X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=common.css;h=5ad94282a7a1291528217fb3c591594d65d7d70e;hb=549ca151c2c1a5d0c76cc1ab249d1687c5a18f62;hp=64502422f50a73fe11fcd39b6c790e172f25eeb9;hpb=3c61449b830db29c95d82cdacc4dae710cc705a8;p=xogo.git diff --git a/common.css b/common.css index 6450242..5ad9428 100644 --- a/common.css +++ b/common.css @@ -14,7 +14,6 @@ html { height: 100%; } - body { height: 100%; margin: 0; @@ -23,7 +22,6 @@ body { /* https://stackoverflow.com/a/24392249/12660887 */ position: relative; } - main { display: flex; flex-direction: column; @@ -32,32 +30,6 @@ main { flex-wrap: nowrap; font-size: 1.25rem; } - -main > div { - margin-top: 25vh; - min-height: 500px; - min-width: 320px; - max-width: 800px; /*useful for rules display only*/ -} - -@media(max-height: 800px) { - main > div { - margin-top: 30px; - } -} - -@media(max-width: 767px) { - main > div { - padding: 0 10px; - } -} - -#boardContainer { - margin: 0; - padding: 0; - border: none; -} - h1 { font-size: 2rem; font-weight: bold; @@ -65,7 +37,6 @@ h1 { display: block; margin: 10px 0; } - h4 { font-size: 1.5rem; font-weight: bold; @@ -74,71 +45,12 @@ h4 { margin: 10px 0; color: darkgreen; } - -#gameInfos, -#boardContainer, -#gameStopped, -#pendingSeek, -#pendingRematch, -#newGameForm { - display: none; +a { + text-decoration: none; } - .bold { font-weight: bold; } - -#gameInfos > .players-info { - text-align: center; -} - -#gameInfos > .options-info { - text-align: center; - color: #757575; - margin-bottom: 15px; -} - -#gameInfos > div { - margin: 10px 0; -} - -#gameInfos > .rules { - color: #732E6C; -} - -#gameInfos > .rules > p, -#gameInfos > .rules > ul, -#gameInfos > .rules > ol { - margin: 10px 0; -} - -#gameStopped > h1 { - margin-bottom: 10px; -} - -/* "Sticky footer" */ -#footer { - position: absolute; - bottom: 0; - left: 0; - right: 0; - height: 50px; - text-align: center; -} - -a.left-link { - margin-right: 25px; -} -a.right-link { - margin-left: 25px; -} - -#footer a > img { - height: 1.2em; - display: inline-block; - transform: translateY(3px); -} - button { background-color: #757575; border: none; @@ -152,11 +64,9 @@ button { border-radius: 20%; margin: 15px 0; } - button:hover, button.block-btn:hover { background-color: #b11adc; } - button.block-btn { display: block; background-color: #01786F; @@ -164,7 +74,6 @@ button.block-btn { font-size: 2rem; padding: 15px 32px; } - button.cancel-something { background-color: darkred; display: block; @@ -172,38 +81,173 @@ button.cancel-something { margin-right: auto; } -#upLeftInfos { +/* "Sticky footer" */ +#footer { position: absolute; + bottom: 0; left: 0; - top: 0; + right: 0; + height: 50px; + text-align: center; } - -#upRightStop { - position: absolute; - left: calc(100% - 25px); - top: 0; +@media(max-height: 399px) { + #footer { + display: none; + } } -#upLeftInfos > svg, #upRightStop > svg { - width: 25px; - cursor: pointer; +a.left-link { + margin-right: 25px; +} +a.right-link { + margin-left: 25px; +} +#footer a > img { + height: 1.2em; + display: inline-block; + transform: translateY(3px); } -@media(max-width: 767px) { - #upRightStop { - left: calc(100% - 35px); - } - #upLeftInfos > svg, #upRightStop > svg { - width: 35px; +main > div { + margin-top: 25vh; + min-height: 500px; + min-width: 320px; +} +#gameInfos { + max-width: 800px; +} +@media(max-height: 800px) { + #newGameForm, #gameInfos { + margin-top: 30px; } - #upLeftInfos > svg path, #upRightStop > svg path { - fill: #999; +} +@media(max-width: 767px) { + main > div { + padding: 0 10px; } } +#gameInfos, +#boardContainer, +#gameStopped, +#pendingSeek, +#pendingRematch, +#newGameForm { + display: none; +} +#gameStopped > h1 { + margin-bottom: 10px; +} -#ng-select { +#gameInfos > .players-info { + text-align: center; +} +#gameInfos > .options-info { + text-align: center; + color: #757575; + margin-bottom: 15px; +} +#gameInfos > div { + margin: 10px 0; +} +#gameInfos > .rules { + color: #732E6C; +} +#gameInfos > .rules p, +#gameInfos > .rules ul, +#gameInfos > .rules ol { + margin: 10px 0; +} +#gameInfos > .rules ul { + list-style-type: square; + padding-left: 30px; +} +#gameInfos > .rules ol { + list-style-type: numeric; + padding-left: 30px; +} +#gameInfos > .rules a { + padding-bottom: 1px; + border-bottom: 1px dotted black; +} +#gameInfos > .rules .author { + color: darkblue; + font-style: italic; +} + +/* Complete rules (separate page) */ +.full-rules { + max-width: 800px; + margin: 20px auto; + padding: 0 10px; +} +.full-rules h1, .full-rules h2, .full-rules h3, .full-rules h4 { + font-weight: bold; + display: block; +} +.full-rules h1 { + font-size: 2.5em; + margin: 10px 0 20px 0; +} +.full-rules h2 { + color: darkred; + font-size: 2em; + margin: 10px 0; +} +.full-rules h3 { + color: darkviolet; + font-size: 1.8em; + margin: 10px 0; +} +.full-rules h4 { + color: darkgreen; + font-size: 1.5em; + margin: 5px 0; + text-align: center; +} +.full-rules figure { + display: block; + overflow: visible; + margin-top: 20px; +} +.full-rules figure:after { + content: ''; + display: block; + clear: both; margin-bottom: 20px; } +.full-rules .diag { + position: relative; + margin: 0 auto; +} +.full-rules .left { + float: left; +} +.full-rules .right { + float: right; +} +.full-rules figcaption { + display: block; + text-align: center; + clear: both; + font-size: 0.9em; + color: #0D1C46; + font-weight: bold; +} +/* TODO: use same CSS for rules and full-rules? */ +.full-rules p, .full-rules ul, .full-rules ol { + margin: 10px 0; +} +.full-rules ul { + list-style-type: square; + padding-left: 30px; +} +.full-rules ol { + list-style-type: numeric; + padding-left: 30px; +} +#ng-select { + margin-bottom: 20px; +} /* Options when starting custom game */ .words { line-height: 0.9em; @@ -221,20 +265,19 @@ button.cancel-something { .highlight-word { background-color: lightblue; } - #gameOptions { text-align: center; } - -.option-select, .option-check { +.option-select, .option-input { margin: 15px 0 0 0; } - -.option-check { +.option-input { display: inline-block; margin-right: 10px; } - +.option-input input[type=number] { + width: 64px; +} .btn-wrap { text-align: center; } @@ -243,41 +286,63 @@ button.cancel-something { width: inherit; text-align: center; } - -a { - text-decoration: none; -} - /* Game link div + custom game "button" */ #gameLink span, #gameLink a, #footer a { padding-bottom: 1px; border-bottom: 1px dotted darkgrey; color: darkred; } - #gameLink span { display: inline-box; cursor: pointer; } - #gameLink > p { margin: 10px 0; } -/* Board container (without reserves) */ -.chessboard { +/* Board container (with reserves) */ +#boardContainer { + position: fixed; + width: 100%; + height: 100%; + left: 0; + top: 0; + margin: 0; + padding: 0; + border: none; +} +#upLeftInfos { position: absolute; + left: 0; + top: 0; +} +#upRightStop { + position: absolute; + left: calc(100% - 25px); + top: 0; +} +#upLeftInfos > svg, #upRightStop > svg { + width: 25px; cursor: pointer; } - -/* Board container can be resized */ -.resizeable { - resize: both; - overflow: hidden; +@media(max-width: 767px) { + #upRightStop { + left: calc(100% - 35px); + } + #upLeftInfos > svg, #upRightStop > svg { + width: 35px; + } + #upLeftInfos > svg path, #upRightStop > svg path { + fill: #999; + } +} +/* Playing board (without reserves) */ +.chessboard { + position: absolute; + cursor: pointer; min-width: 200px; min-height: 200px; } - piece { position: absolute; top: 0; @@ -287,13 +352,15 @@ piece { will-change: transform; pointer-events: none; } - +piece.hidden { + display: none; +} /* Drawing of the board */ .chessboard_SVG { width: 100%; height: 100%; } - +/* Default squares colors (can be overriden or unused) */ .dark-square { fill: #b58863; } @@ -303,42 +370,35 @@ piece { .in-shadow { filter: brightness(50%); } - .reserves { position: absolute; display: block; cursor: pointer; } - .reserve-cell { position: relative; display: block; float: left; } - /* Pieces' counter for reserves */ .reserve-num { color: red; position: absolute; display: block; font-weight: bold; - /*z-index: 10;*/ } - -/* Choices div after a promotion (TODO: do not hide board) */ +/* Choices div after a promotion */ #choices, .choice { position: absolute; cursor: pointer; } - /* https://moderncss.dev/custom-select-styles-with-pure-css/ */ :root { --select-border: #777; --select-focus: #b11adc; --select-arrow: var(--select-border); } - select { appearance: none; background-color: transparent; @@ -353,7 +413,6 @@ select { z-index: 1; outline: none; } - .select { display: grid; grid-template-areas: "select"; @@ -372,11 +431,9 @@ select { width: 100%; margin: auto; } - select, .select::after { grid-area: select; } - .select::after { content: ""; justify-self: end; @@ -385,7 +442,6 @@ select, .select::after { background-color: var(--select-arrow); clip-path: polygon(100% 0%, 0 0%, 50% 100%); } - select:focus + .focus { position: absolute; top: -1px; @@ -396,7 +452,6 @@ select:focus + .focus { border-radius: inherit; } - /* https://auralinna.blog/post/2018/how-to-create-material-design-like-form-text-fields/ */ .form-field { display: block; @@ -461,7 +516,6 @@ select:focus + .focus { width: 100%; } - /* https://dev.to/kallmanation/styling-a-checkbox-with-only-css-3o3p */ label.checkbox > input[type="checkbox"] { display: none; @@ -478,7 +532,6 @@ label.checkbox > input[type="checkbox"] + *::before { border-width: 0.1rem; border-color: gray; } - label.checkbox > input[type="checkbox"]:checked + *::before { content: "✓"; font-size: 1.1rem; @@ -491,16 +544,11 @@ label.checkbox > input[type="checkbox"]:checked + *::before { label.checkbox > input[type="checkbox"]:checked + * { color: teal; } - -/*label.checkbox { - color: teal; -}*/ label.checkbox > span.spacer { width: 10px; content: " "; } - /* https://theanam.github.io/css-only-loaders/ ("hour-glass") */ :root{ --loader-width: 70px; @@ -516,7 +564,6 @@ label.checkbox > span.spacer { flex-grow: 0; flex-shrink: 0; } - @keyframes slide { 0% { transform: translateY(0%); @@ -534,7 +581,6 @@ label.checkbox > span.spacer { transform: translateY(0%); } } - @keyframes spin { 0% { transform: rotate(0deg); @@ -552,7 +598,6 @@ label.checkbox > span.spacer { transform: rotate(360deg); } } - .loader.hour-glass { position: relative; width: var(--loader-width, 100px); @@ -564,7 +609,6 @@ label.checkbox > span.spacer { animation: spin var(--animation-duration, 4s) infinite ease-in-out; margin: 20px auto; } - .hour-glass:before { content: ""; position: absolute;