From: Benjamin Auder Date: Thu, 20 Dec 2018 20:20:55 +0000 (+0100) Subject: Group some styles in variant.sass X-Git-Url: https://git.auder.net/variants/current/doc/css/img/pieces/%7B%7B?a=commitdiff_plain;h=80b15df120c7444afc091b29332a27df36416126;p=vchess.git Group some styles in variant.sass --- diff --git a/public/javascripts/components/game.js b/public/javascripts/components/game.js index 17f3b18d..587587fb 100644 --- a/public/javascripts/components/game.js +++ b/public/javascripts/components/game.js @@ -371,7 +371,7 @@ Vue.component('my-game', { attrs: { "aria-label": 'Undo' }, "class": { "small": smallScreen, - "marginleft": true, + "spaceleft": true, }, }, [h('i', { 'class': { "material-icons": true } }, "fast_rewind")]), @@ -395,7 +395,7 @@ Vue.component('my-game', { attrs: { "aria-label": 'Undo' }, "class": { "small": smallScreen, - "marginleft": true, + "spaceleft": true, }, }, [h('i', { 'class': { "material-icons": true } }, "undo")] diff --git a/public/stylesheets/index.sass b/public/stylesheets/index.sass index 3ae86f9e..331e8f68 100644 --- a/public/stylesheets/index.sass +++ b/public/stylesheets/index.sass @@ -10,6 +10,8 @@ padding-left: 10px padding-right: 15px +// TODO: box-shadow or box-sizeing ? +//https://stackoverflow.com/questions/9601357/placing-border-inside-of-div-and-not-on-its-edge .variant box-sizing: border-box border: 1px solid brown diff --git a/public/stylesheets/variant.sass b/public/stylesheets/variant.sass index 6cd3c1f4..505e26fa 100644 --- a/public/stylesheets/variant.sass +++ b/public/stylesheets/variant.sass @@ -11,50 +11,53 @@ margin-right: 0 padding: 0 3px - //TODO: taille modal au cas par cas. standard == 767. Can be larger (welcome, fen...) - .warn padding: 3px color: red 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 figure.diagram-container margin: 15px 0 15px 0 text-align: center width: 100% display: block - -// https://stackoverflow.com/questions/5445491/height-equal-to-dynamic-width-css-fluid-layout -figure.diagram-container > .diagram - display: block - width: 40% - min-width: 300px - max-width: 800px - margin-left: auto - margin-right: auto - -figure.diagram-container > .diagram2 - display: block - float: left - width: 40% - min-width: 300px - max-width: 800px - margin-right: 40px - margin-bottom: 10px - -figure.diagram-container > figcaption - display: block - clear: both - padding-top: 5px + .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 @@ -68,7 +71,7 @@ figure.diagram-container > figcaption float: right margin: 0 20px 10px 0 -.marginleft +.spaceleft margin-left: 30px .reserve-count @@ -118,45 +121,38 @@ div.board11 .game clear: both - -.game .board - cursor: pointer + .board + cursor: pointer #choices - margin-bottom: 10px - -#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% @@ -175,17 +171,17 @@ img.mark-square background-color: #cc3300 !important .light-square.lichess - background-color: #f0d9b5; + background-color: #f0d9b5; .dark-square.lichess - background-color: #b58863; + background-color: #b58863; .light-square.chesscom - background-color: #e5e5ca; + background-color: #e5e5ca; .dark-square.chesscom - background-color: #6f8f57; + background-color: #6f8f57; .light-square.chesstempo - background-color: #fdfdfd; + background-color: #fdfdfd; .dark-square.chesstempo - background-color: #88a0a8; + background-color: #88a0a8; .light-square-diag background-color: #e5e5ca diff --git a/views/rules/Chess960.pug b/views/rules/Chess960.pug index 331bc5ab..0c575289 100644 --- a/views/rules/Chess960.pug +++ b/views/rules/Chess960.pug @@ -140,9 +140,9 @@ ul The capture is possible only right after the pawn jump: not later in the game. figure.diagram-container - .diagram2 + .diagram.diag12 | fen:nr1kb1r1/ppp3pp/8/2Pp4/8/7P/PP3PP1/1R3KBR: - .diagram2 + .diagram.diag22 | fen:nr1kb1r1/ppp3pp/3P4/8/8/7P/PP3PP1/2KR2BR: figcaption. Left: black just played d5 (jump from d7). diff --git a/views/rules/Magnetic.pug b/views/rules/Magnetic.pug index 20b5fe08..9beca28a 100644 --- a/views/rules/Magnetic.pug +++ b/views/rules/Magnetic.pug @@ -22,9 +22,9 @@ p | So, after each move some pieces are attracted while others are repelled. figure.diagram-container - .diagram2 + .diagram.diag12 | fen:3b4/8/3K4/q1R2rP1/3Q4/8/3b4/8: - .diagram2 + .diagram.diag22 | fen:3b4/8/3K4/qR1Qr1P1/3b4/8/8/8: figcaption Left: before white move Qd5. Right: after this move.