diff --git a/mirzaev/site/rules/system/public/css/main.css b/mirzaev/site/rules/system/public/css/main.css index ae942fb..e1dd2b8 100755 --- a/mirzaev/site/rules/system/public/css/main.css +++ b/mirzaev/site/rules/system/public/css/main.css @@ -1,189 +1,192 @@ @font-face { - font-family: comissioner; - src: url('/fonts/commissioner.ttf') format('ttf'); - font-weight: normal; - font-style: normal; + font-family: comissioner; + src: url("/fonts/commissioner.ttf") format("ttf"); + font-weight: normal; + font-style: normal; } - :root { - --button-light-red-active: #eee4e4; - --button-light-red-hover: #ddcbcb; - --button-light-red: #eadada; - --background-light : #fff; - --background : #f00; - --background-dark : #000; - --text : #020202; - --text-light : #fafafa; - --text-hover : #fff; - --text-active : #d0d0d0; - --red-light-1 : #dc4343; - --red-light : #bf3737; - --red : #a43333; - --red-dark : #8d2a2a; + --button-light-red-active: #eee4e4; + --button-light-red-hover: #ddcbcb; + --button-light-red: #eadada; + --background-light: #fff; + --background: #f00; + --background-dark: #000; + --text: #020202; + --text-light: #fafafa; + --text-hover: #fff; + --text-active: #d0d0d0; + --red-light-1: #dc4343; + --red-light: #bf3737; + --red: #a43333; + --red-dark: #8d2a2a; } - * { - text-decoration: none; - outline : none; - border : none; - color : var(--text); - font-family : commissioner, Roboto, sans-serif; - transition : 0.1s ease-out; + text-decoration: none; + outline: none; + border: none; + color: var(--text); + font-family: commissioner, Roboto, sans-serif; + transition: 0.1s ease-out; } .unselectable { - -webkit-touch-callout: none; - -webkit-user-select : none; - -khtml-user-select : none; - -moz-user-select : none; - -ms-user-select : none; - user-select : none; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } - - a { - color: var(--red-light); + color: var(--red-light); } a:hover { - color: var(--red-light-1); + color: var(--red-light-1); } a:active { - color: var(--red-dark); + color: var(--red-dark); } button { - cursor: pointer; - background-color: var(--button-light-red); + cursor: pointer; + background-color: var(--button-light-red); } button:hover { - background-color: var(--button-light-red-hover); + background-color: var(--button-light-red-hover); } button:active { - background-color: var(--button-light-red-active); + background-color: var(--button-light-red-active); } button[disabled]:is(:hover, :active) { - cursor: unset; - background-color: var(--button-light-red); + cursor: unset; + background-color: var(--button-light-red); } body { - margin : 0; - padding-top: calc(20vh + 394px); - padding-bottom: 10vh; - display: flex; - flex-direction: column; - background-color : var(--background); + margin: 0; + padding-top: calc(20vh + 394px); + padding-bottom: 10vh; + display: flex; + flex-direction: column; + background-color: var(--background); } aside { - z-index : 500; + z-index: 500; } div#wrap { - margin-top: -394px; - margin-left: 50vw; - position: absolute; + margin-top: -394px; + margin-left: 50vw; + position: absolute; } -div#wrap>a>img#masha { - z-index: 800; - left: 0; - bottom: 0; - width: 333px; - height: 394px; - position: relative; - cursor: pointer; - animation-direction : alternate; - animation-name : koshka_dancing; - animation-iteration-count: infinite; - animation-timing-function: cubic-bezier(.65,.05,.36,1); +div#wrap > a > img#masha { + z-index: 800; + left: 0; + bottom: 0; + width: 333px; + height: 394px; + position: relative; + cursor: pointer; + animation-direction: alternate; + animation-name: koshka_dancing; + animation-iteration-count: infinite; + animation-timing-function: cubic-bezier(0.65, 0.05, 0.36, 1); } -:is(div#wrap>a>img#masha, div#wrap>a>#masha_hand):hover { - animation-play-state: paused; +:is(div#wrap > a > img#masha, div#wrap > a > #masha_hand):hover { + animation-play-state: paused; } -div#wrap>a>#masha_hand { - left: 0; - bottom: 0; - position: absolute; - cursor: pointer; - animation-direction : alternate; - animation-name : hand_dancing; - animation-iteration-count: infinite; - animation-timing-function: cubic-bezier(.65,.05,.36,1); +div#wrap > a > #masha_hand { + left: 0; + bottom: 0; + position: absolute; + cursor: pointer; + animation-direction: alternate; + animation-name: hand_dancing; + animation-iteration-count: infinite; + animation-timing-function: cubic-bezier(0.65, 0.05, 0.36, 1); } -div#wrap>a>#masha_hand>img#hand{ - z-index: 500; - left: -30px; - bottom: -5px; - width: 70px; - height: 88px; - position: absolute; +div#wrap > a > #masha_hand > img#hand { + z-index: 500; + left: -30px; + bottom: -5px; + width: 70px; + height: 88px; + position: absolute; } -div#wrap>a>#masha_hand>img#knife { - z-index: 100500; - left: calc(-112px + 70px - 40px); - bottom: calc(-273px + 88px + 35px); - width: 112px; - height: 273px; - position: absolute; +div#wrap > a > #masha_hand > img#knife { + z-index: 100500; + left: calc(-112px + 70px - 40px); + bottom: calc(-273px + 88px + 35px); + width: 112px; + height: 273px; + position: absolute; } header { - z-index : 5000; - width: 800px; - height: 100px; - margin: 0 auto; - display : flex; - border-radius: 3px 3px 0 0; - background-color: var(--background-dark); + z-index: 5000; + width: 800px; + height: 100px; + margin: 0 auto; + display: flex; + border-radius: 3px 3px 0 0; + background-color: var(--background-dark); } -header>h1 { - margin: auto; - font-size: 2.5rem; - color: var(--text-light); +header > h1 { + margin: auto; + font-size: 2.5rem; + color: var(--text-light); } main { - z-index : 1000; - width: 800px; - margin: 0 auto; - border-radius: 0 0 3px 3px; - background-color: var(--background-light) + z-index: 1000; + width: 800px; + margin: 0 auto; + border-radius: 0 0 3px 3px; + background-color: var(--background-light); } -main>ol { - margin: 50px 100px; - font-size: 1.2rem; +main > ol { + margin: 50px 100px; + font-size: 1.2rem; } -main>ol>li { - padding-left: 40px; - margin-bottom: 8px; +main > ol > small { + margin-left: 10px; + margin-top: 20px; + margin-bottom: 8px; + display: block; } -main>ol>li::marker { - /* font-size: 1.3rem; */ +main > ol > li { + padding-left: 40px; + margin-bottom: 8px; +} + +main > ol > li::marker { + /* font-size: 1.3rem; */ } footer { - z-index : 3000; + z-index: 3000; } @media (max-width: 800px) { - body { - padding-bottom: unset; - } + body { + padding-bottom: unset; + } } diff --git a/mirzaev/site/rules/system/views/rules.html b/mirzaev/site/rules/system/views/rules.html index 690f4c5..fc3a76d 100644 --- a/mirzaev/site/rules/system/views/rules.html +++ b/mirzaev/site/rules/system/views/rules.html @@ -187,4 +187,8 @@