X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=public%2Fstylesheets%2Fvariant.sass;h=3631a6ed2cef07d14d1c40da822f7167156dc7c1;hb=9a3c9f790aa28fd4708faefe41b4624173922c8e;hp=7e530f69901150e96444ccd0a6a5f3d1150571fd;hpb=01ca2adce0ddcf246f184c6d19389262b0f5e6e5;p=vchess.git diff --git a/public/stylesheets/variant.sass b/public/stylesheets/variant.sass index 7e530f69..3631a6ed 100644 --- a/public/stylesheets/variant.sass +++ b/public/stylesheets/variant.sass @@ -1,12 +1,9 @@ .container#variantPage padding: 0 -//.container#variantPage > .row > div @media screen and (max-width: 767px) .col-sm-12 padding: 0 - -@media screen and (max-width: 767px) h4 margin: 0 0 10px 0 p @@ -14,11 +11,23 @@ margin-right: 0 padding: 0 3px -#pgn-div > a - display: none +#menuBar + font-style: italic + background: linear-gradient(#e66465, #9198e5) + margin: 0 0 10px 0 + @media screen and (min-width: 768px) + width: 100% + img + height: 30px + padding-top: 10px + span + padding-left: 10px + padding-right: 15px -#pgn-div > p - cursor: pointer +#menuContainer + height: 48px + +//TODO: taille modal au cas par cas. standard == 767. Can be larger (welcome, fen...) .warn padding: 3px @@ -26,20 +35,45 @@ background-color: lightgrey font-weight: bold -.playing, button.playing:hover +button.playing background-color: #ffcc99 + &:hover + background-color: #ffcc99 -.seek, button.seek:hover +button.seek background-color: #cc99ff + &:hover + background-color: #cc99ff -// https://stackoverflow.com/questions/5445491/height-equal-to-dynamic-width-css-fluid-layout -figure.diagram-container > .diagram +figure.diagram-container + margin: 15px 0 15px 0 + text-align: center + width: 100% display: block - width: 45% - min-width: 300px - max-width: 800px - margin-left: auto - margin-right: auto + .diagram + display: block + width: 40% + //min-width: 300px + max-width: 800px + margin-left: auto + margin-right: auto + .diag12 + float: left + margin-left: calc(10% - 20px) + margin-right: 40px + @media screen and (max-width: 500px) + float: none + margin: 0 auto 10px auto + .diag22 + float: left + margin-right: calc(10% - 20px) + @media screen and (max-width: 500px) + float: none + margin: 0 auto + figcaption + display: block + clear: both + padding-top: 5px .topindicator position: relative @@ -53,17 +87,29 @@ figure.diagram-container > .diagram float: right margin: 0 20px 10px 0 +.spaceleft + margin-left: 30px + +.reserve-count + padding-left: 40% + +.reserve-div + margin-bottom: 20px + +.reserve-row-1 + margin-bottom: 15px + .connected background-color: green .disconnected background-color: red -.expert-switch - padding: 5px 10px +.settings-btn + padding: 6px 7px 0 7px -.expert-mode, button.expert-mode:hover - background-color: #ffcc99 +.settings-btn-small + padding: 0 3px .white-turn background-color: white @@ -71,56 +117,58 @@ figure.diagram-container > .diagram .black-turn background-color: black -// TODO: div.board, board9, board10, board11, board12 div.board float: left - width: 12.5% height: 0 - padding-bottom: 12.5% display: inline-block position: relative -.game - clear: both +div.board8 + width: 12.5% + padding-bottom: 12.5% -.game .board - cursor: pointer +div.board10 + width: 10% + padding-bottom: 10% -#choices - margin-bottom: 10px +div.board11 + width: 9.09% + padding-bottom: 9.1% + +.game + clear: both + .board + cursor: pointer #choices - margin: 0 auto 0 auto - position: relative - z-index: 300 - overflow-y: inherit - background-color: rgba(0,0,0,0) //transparent - -#choices img - cursor: pointer - background-color: #e6ee9c - -#choices img:hover - background-color: skyblue - -img.choice-piece - height: 0 - width: 90% - padding: 5% - height: 90% - -img.piece, img.mark-square, img.choice-piece - max-width: 100% - height: auto - display: block + margin: 0 auto 0 auto + position: relative + z-index: 300 + overflow-y: inherit + background-color: rgba(0,0,0,0) //transparent + img + cursor: pointer + background-color: #e6ee9c + &:hover + background-color: skyblue + .choice-piece + width: 90% + max-width: 100% + height: auto + display: block + +img.piece, img.mark-square + max-width: 100% + height: auto + display: block img.mark-square - opacity: 0.6 + opacity: 0.6 img.ghost - position: absolute - opacity: 0.4 - top: 0 + position: absolute + opacity: 0.4 + top: 0 img.piece width: 100% @@ -132,21 +180,24 @@ img.mark-square left: 12% opacity: .7 -figure.diagram-container > figcaption - display: block - clear: both - padding-top: 5px - -.light-square - background-color: #f0d9b5 -.dark-square - background-color: #b58863 - .highlight - background-color: #00cc66 + background-color: #00cc66 !important .incheck - background-color: #cc3300 + background-color: #cc3300 !important + +.light-square.lichess + background-color: #f0d9b5; +.dark-square.lichess + background-color: #b58863; +.light-square.chesscom + background-color: #e5e5ca; +.dark-square.chesscom + background-color: #6f8f57; +.light-square.chesstempo + background-color: #fdfdfd; +.dark-square.chesstempo + background-color: #88a0a8; .light-square-diag background-color: #e5e5ca @@ -167,12 +218,6 @@ figure.showPieces > img figure.showPieces > figcaption color: #6C6C6C -figure.diagram-container - margin: 15px 0 15px 0 - text-align: center - width: 100% - display: block - .section-title padding: 0 @@ -180,7 +225,7 @@ figure.diagram-container padding: 5px .section-content - padding: 5px + padding: 0 5px ol, ul:not(.browser-default) padding-left: 20px @@ -191,8 +236,85 @@ ul:not(.browser-default) ul:not(.browser-default) > li list-style-type: disc -.rulesTitle +.variantpage-title font-weight: bold cursor: pointer - padding: 3px; + padding: 3px + margin-left: 0 + margin-right: 0 background-color: lightgrey + +#fen-string + margin-top: 0 + +#pgn-game + margin-top: 0 + margin-bottom: 0 + +#downloadBtn + display: block + margin-left: auto + margin-right: auto + +#pgn-div > a + display: none + +#fen-div > p + margin-left: 0 + margin-right: 0 + +.newproblem-form input, .newproblem-form textarea + width: 100% + +.emphasis + font-style: italic + +#newpbInstructions + margin-bottom: var(--universal-margin); + +.center-btn + margin-left: 40% + +//TODO? +.center-inline + text-align: center +.center-block + margin-left: auto + margin-right: auto + +.mistake-newproblem + color: #663300 + +#problem-solution + display: none + +.topspace + margin-top: 15px + +.problem + cursor: pointer + margin-bottom: 15px + +#solution-div h3 + cursor: pointer + +.newproblem-form, .newproblem-preview + max-width: 90% + +.clickable + cursor: pointer + +.name-connected + color: green + +.name-disconnected + color: red + +.clearer + clear: both + +.my-chatmsg + color: black + +.opp-chatmsg + color: blue