diff --git a/themes/kubowania/images/blue_block.png b/themes/Kubow/images/blue_block.png similarity index 100% rename from themes/kubowania/images/blue_block.png rename to themes/Kubow/images/blue_block.png diff --git a/themes/kubowania/images/green_block.png b/themes/Kubow/images/green_block.png similarity index 100% rename from themes/kubowania/images/green_block.png rename to themes/Kubow/images/green_block.png diff --git a/themes/kubowania/images/navy_block.png b/themes/Kubow/images/navy_block.png similarity index 100% rename from themes/kubowania/images/navy_block.png rename to themes/Kubow/images/navy_block.png diff --git a/themes/kubowania/images/peach_block.png b/themes/Kubow/images/peach_block.png similarity index 100% rename from themes/kubowania/images/peach_block.png rename to themes/Kubow/images/peach_block.png diff --git a/themes/kubowania/images/pink_block.png b/themes/Kubow/images/pink_block.png similarity index 100% rename from themes/kubowania/images/pink_block.png rename to themes/Kubow/images/pink_block.png diff --git a/themes/kubowania/images/purple_block.png b/themes/Kubow/images/purple_block.png similarity index 100% rename from themes/kubowania/images/purple_block.png rename to themes/Kubow/images/purple_block.png diff --git a/themes/kubowania/images/yellow_block.png b/themes/Kubow/images/yellow_block.png similarity index 100% rename from themes/kubowania/images/yellow_block.png rename to themes/Kubow/images/yellow_block.png diff --git a/themes/Kubow/style.css b/themes/Kubow/style.css new file mode 100644 index 0000000..2f6dacc --- /dev/null +++ b/themes/Kubow/style.css @@ -0,0 +1,289 @@ +/* source: https://github.com/kubowania/Tetris */ + +:root { + /* default font size in browsers is 16px = 1em, we make + things easier for us and make 10px our base size. + We have 10/16 = 0.625 = 1rem as it is set on root element. + So 1rem is now 10px throughout our stylesheet.*/ + font-size: 0.625em; +} + +* { + box-sizing: border-box; +} + +body { + font-family: "Montserrat", sans-serif; + font-size: 1.6rem; + margin: auto; + max-width: 60rem; + color: #d8edea; + background: radial-gradient( + circle, + rgba(175, 196, 174, 1) 0%, + rgba(104, 204, 191, 1) 89%, + rgba(94, 191, 178, 1) 100% + ); +} + +h1 { + text-align: center; + margin: 1rem; + letter-spacing: 1.5rem; +} + +section { + margin: 1em; +} + +div { + display: flex; + justify-content: center; + align-items: center; +} + +#settingsSection { + width: auto; +} + +fieldset, #statsTable { + margin-top: 1rem; + background: #f0f0f0; + background-image: linear-gradient(#d0d0d0, #f0f0f0); + border: 0; + border-radius: 5px; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset, 0 1px 0 #fff; + color: #85796b; +} + +legend { + font-size: 0.9em; + color: #d8edea; + transform: translate(0, -0.6em); +} + +fieldset > div { + display: grid; + grid-template-columns: 3fr 2fr 3fr 2fr; + grid-column-gap: 1em; + grid-row-gap: 1em; + justify-items: right; + align-items: center; +} + +fieldset > div > * { + width: 100%; +} + +label { + text-align: right; +} + +button, +input[type="number"], +select { + text-transform: uppercase; + position: relative; + width: 22rem; + height: 2.2rem; + text-align: center; + color: #fff; + letter-spacing: 1px; + text-decoration: none; + line-height: 23px; + font-size: 10px; + display: block; + text-shadow: -1px -1px 0 #a84155; + background: #d25068; + border: 1px solid #d25068; + width: 12rem; + background-image: linear-gradient(to bottom, #f66c7b, #d25068); + border-radius: 5px; + box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, + 0 -1px 0 rgba(255, 255, 255, 0.1) inset, 0 4px 0 #ad4257, + 0 4px 2px rgba(0, 0, 0, 0.5); +} + +button:before, +input[type="number"]:before, +select:before { + background: #f0f0f0; + background-image: linear-gradient(#d0d0d0, #f0f0f0); + border-radius: 5px; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset, 0 1px 0 #fff; + position: absolute; + content: ""; + left: -6px; + right: -6px; + top: -6px; + bottom: -10px; + z-index: -1; +} + +button:active, +select:active { + box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, + 0 -1px 0 rgba(255, 255, 255, 0.1) inset; + top: 5px; +} + +button:active:before, +input[type="number"]:active:before, +select:active:before { + top: -11px; + bottom: -5px; + content: ""; +} + +button:hover, +input[type="number"]:hover, +select:hover { + background: #f66c7b; + background-image: linear-gradient(top, #d25068, #f66c7b); +} + +#themePreviewTable { + grid-column: 3 / 5; + width: auto; +} + +fieldset input[type="checkbox"] { + width: auto; +} + +#showGhostDiv { + grid-row: 2; + grid-column: 1/5; + width: 100%; +} + +#gameSection div { + display: grid; + grid-gap: 3vmin; +} + +#holdTable { + grid-column: 1; + grid-row: 1; + justify-self: end; +} + +#matrixTable { + grid-column: 2; + grid-row: 1 / 4; +} + +#messageSpan { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + color: rgba(255, 255, 255, 0.8); + font-size: 4vmin; + text-align: center; + text-shadow: 1px 1px rgba(153, 145, 175, 0.5); +} + +#nextTable { + grid-column: 3; + grid-row: 1 / 4; +} + + +.minoes-table { + table-layout: fixed; + border-spacing: 0; + margin: auto; +} + +th, td { + font-weight: normal; + padding: 0; + height: 2rem; + width: 2rem; + background: transparent; + border: 0; +} + +.I { + background-image: url(images/blue_block.png); +} + +.J { + background-image: url(images/navy_block.png); +} + +.L { + background-image: url(images/peach_block.png); +} + +.O { + background-image: url(images/yellow_block.png); +} + +.S { + background-image: url(images/green_block.png); +} + +.T { + background-image: url(images/purple_block.png); +} + +.Z { + background-image: url(images/pink_block.png); +} + +.locked { + background: #f0f0f0; + border: 3px outset rgba(255, 255, 255, 0.2); +} + +.cleared-line { + background: white; +} + +.trail { + border-top: 0 !important; + border-bottom: 0 !important; + border-left: 3px solid rgba(255, 255, 255, 0.2) !important; + border-right: 3px solid rgba(125, 125, 125, 0.2) !important; + background: rgba(255, 255, 255, 0.1) !important; +} + +.ghost { + border: 3px outset rgba(255, 255, 255, 0.2); + border-radius: 2px; + color: rgba(255, 255, 255, 0.9); +} + +#statsTable { + grid-column: 1; + grid-row: 2; + color: rgb(133, 121, 107, 0.5); + padding-top: 1rem; + font-size: 1.2rem; +} + +#statsTable td { + text-align: center; + border: 0; + font-size: 2.3rem; + color: rgb(133, 121, 107, 0.5); +} + +footer { + position: absolute; + left: 50%; + bottom: 1em; + transform: translateX(-50%); +} + +a { + text-decoration: none; + color: lightblue; +} + +#credits { + font-size: 0.8em; + gap: 0.8em; +} diff --git a/themes/Manjaro/style.css b/themes/Manjaro/style.css new file mode 100644 index 0000000..5ff6383 --- /dev/null +++ b/themes/Manjaro/style.css @@ -0,0 +1,216 @@ +body { + margin: 0; + font-family: open sans,sans-serif; + font-size: 14px; + letter-spacing: .01em; + color: white; + background: #222; + width: 100%; + height: 100%; +} + +h1 { + text-align: center; +} + +section { + margin: 1em; +} + +div { + display: flex; + justify-content: center; + align-items: center; +} + +#settingsSection { + width: auto; +} + +fieldset { + border: 0; + font-size: 14px; +} + +legend { + font-size: 0.9em; + color: #AAA; +} + +fieldset > div { + display: grid; + grid-template-columns: 3fr 2fr 3fr 2fr; + grid-column-gap: 2em; + grid-row-gap: 1em; + justify-items: right; + align-items: center; +} + +fieldset > div > * { + width: 100%; +} + +label { + text-align: right; +} + +#themePreviewTable { + grid-column: 3 / 5; + width: auto; +} + +fieldset input[type="checkbox"] { + width: auto; +} + +#showGhostDiv { + grid-row: 2; + grid-column: 1/5; + width: 100%; +} + +#gameSection div { + display: grid; + grid-gap: 3vmin; + margin: -3vmin 0 auto 0; +} + +#holdTable { + grid-column: 1; + grid-row: 1; + justify-self: end; +} + +#matrixTable { + grid-column: 2; + grid-row: 1 / 4; +} + +#messageSpan { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + color: rgba(255, 255, 255, 0.8); + font-size: 4vmin; + text-shadow: 1px 1px rgba(0, 0, 0, 0.8); + text-align: center; + font-weight: bold; +} + +#nextTable { + grid-column: 3; + grid-row: 1 / 4; +} + + +.minoes-table { + table-layout: fixed; + border-spacing: 0; + margin: auto; +} + +th, td { + font-weight: normal; + padding: 0; + height: 3vmin; + width: 3vmin; +} + +th { + border: 1px solid transparent; +} + +td { + border: 1px solid #444; +} + +.mino { + border: 1px solid; + border-radius: 1px; +} + +.I { /* cyan */ + background: #99d9ea; + border-color: #d1edf5; +} + +.J { /* blue */ + background: #7f92ff; + border-color: #c2cbff; +} + +.L { /* orange */ + background: #ffb27f; + border-color: #ffe1cd; +} + +.O { /* yellow */ + background: #ffe97f; + border-color: #fff5ca; +} + +.S { /* green */ + background: #7fff8e; + border-color: #ccffd2; +} + +.T { /* magenta */ + background: #d67fff; + border-color: #edc9ff; +} + +.Z { /* red */ + background: #ff7f7f; + border-color: #ffdada; +} + +.locked-mino, .cleared-line { + background: #AAA; + border: 1px solid #CCC; + border-radius: 1px; +} + +.trail { + background: #333; + border: 1px solid #444; + border-radius: 1px; +} + +.ghost { + background: #555; + border: 1px solid #666; + border-radius: 1px; +} + + +#statsTable { + grid-column: 1; + grid-row: 3; + height: 0; + justify-self: end; + margin: 0 auto; +} + +#statsTable td { + text-align: center; + font-weight: bold; + border: 0; +} + +footer { + position: absolute; + left: 50%; + bottom: 1em; + transform: translateX(-50%); +} + +a { + text-decoration: none; + color: lightblue; +} + +#credits { + font-size: 0.8em; + gap: 0.8em; +} diff --git a/themes/default/style.css b/themes/default/style.css index c4f557a..cf41b7d 100644 --- a/themes/default/style.css +++ b/themes/default/style.css @@ -1,7 +1,14 @@ body { + margin: 0; font-family: sans-serif; color: white; background: #222; + width: 100%; + height: 100%; +} + +h1 { + text-align: center; } section { @@ -14,6 +21,19 @@ div { align-items: center; } +#settingsSection { + width: auto; +} + +fieldset { + border: 1px solid #444; +} + +legend { + font-size: 0.9em; + color: #AAA; +} + fieldset > div { display: grid; grid-template-columns: 3fr 2fr 3fr 2fr; @@ -23,28 +43,33 @@ fieldset > div { align-items: center; } -fieldset button, input { +fieldset > div > * { width: 100%; } label { - text-align: center; + text-align: right; } -a { - text-decoration: none; - color: lightblue; +#themePreviewTable { + grid-column: 3 / 5; + width: auto; } -#gameSection { - width: 72vmin; - grid-template-columns: 18vmin 30vmin 18vmin; - grid-gap: 3vmin; - margin: auto; +fieldset input[type="checkbox"] { + width: auto; +} + +#showGhostDiv { + grid-row: 2; + grid-column: 1/5; + width: 100%; } #gameSection div { display: grid; + grid-gap: 3vmin; + margin: -3vmin 0 auto 0; } #holdTable { @@ -53,18 +78,6 @@ a { justify-self: end; } -#statsTable { - grid-column: 1; - grid-row: 3; - height: 0; - justify-self: end; - margin: 0 auto; -} - -#scoreTable { - font-weight: bold; -} - #matrixTable { grid-column: 2; grid-row: 1 / 4; @@ -94,88 +107,107 @@ a { margin: auto; } -.minoes-table tr { - height: 3vmin; -} - -.minoes-table th, td { +th, td { font-weight: normal; padding: 0; height: 3vmin; width: 3vmin; +} + +th { border: 1px solid transparent; } -.minoes-table th { - border: 1px solid transparent; +td { + border: 1px solid #444; } -.minoes-table td { - border: 1px solid #888; -} - -.minoes-table .mino { +.mino { border: 1px solid; border-radius: 1px; } -.minoes-table .I { - /* cyan */ +.I { /* cyan */ background: #99d9ea; border-color: #d1edf5; } -.minoes-table .J { - /* blue */ +.J { /* blue */ background: #7f92ff; border-color: #c2cbff; } -.minoes-table .L { - /* orange */ +.L { /* orange */ background: #ffb27f; border-color: #ffe1cd; } -.minoes-table .O { - /* yellow */ +.O { /* yellow */ background: #ffe97f; border-color: #fff5ca; } -.minoes-table .S { - /* green */ +.S { /* green */ background: #7fff8e; border-color: #ccffd2; } -.minoes-table .T { - /* magenta */ +.T { /* magenta */ background: #d67fff; border-color: #edc9ff; } -.minoes-table .Z { - /* red */ +.Z { /* red */ background: #ff7f7f; border-color: #ffdada; } -.locked, .cleared-line { - background: white; - border: 1px solid white; +.locked-mino, .cleared-line { + background: #AAA; + border: 1px solid #CCC; border-radius: 1px; } .trail { - background: rgba(255, 255, 255, 0.2); - border: 1px solid white; + background: #333; + border: 1px solid #444; border-radius: 1px; } .ghost { - background: rgba(255, 255, 255, 0.4); - border: 1px solid rgba(255, 255, 255, 0.6); + background: #555; + border: 1px solid #666; border-radius: 1px; } + +#statsTable { + grid-column: 1; + grid-row: 3; + height: 0; + justify-self: end; + margin: 0 auto; +} + +#statsTable td { + text-align: center; + font-weight: bold; + border: 0; +} + +footer { + position: absolute; + left: 50%; + bottom: 1em; + transform: translateX(-50%); +} + +a { + text-decoration: none; + color: lightblue; +} + +#credits { + font-size: 0.8em; + gap: 0.8em; +} diff --git a/themes/effect/fonts/ShareTech.woff2 b/themes/effect/fonts/ShareTech.woff2 deleted file mode 100644 index 25cc921..0000000 Binary files a/themes/effect/fonts/ShareTech.woff2 and /dev/null differ diff --git a/themes/effect/fonts/ShareTechMono.woff2 b/themes/effect/fonts/ShareTechMono.woff2 deleted file mode 100644 index cee230d..0000000 Binary files a/themes/effect/fonts/ShareTechMono.woff2 and /dev/null differ diff --git a/themes/effect/images/bg.jpg b/themes/effect/images/bg.jpg deleted file mode 100644 index b88d8e6..0000000 Binary files a/themes/effect/images/bg.jpg and /dev/null differ diff --git a/themes/effect/style.css b/themes/effect/style.css deleted file mode 100644 index 32646de..0000000 --- a/themes/effect/style.css +++ /dev/null @@ -1,250 +0,0 @@ -.invisible-grid > .empty-cell { - background: transparent; - border: 1px solid transparent; -} - -.visible-grid > .empty-cell { - background: transparent; - border: 1px inset rgba(128, 128, 128, 0.3); -} - -.mino, .I-mino, .J-mino, .L-mino, .O-mino, .S-mino, .T-mino, .Z-mino { - background: rgba(127, 229, 255, 0.3); - border: 1px solid rgba(127, 229, 255, 0.7); - border-radius: 0.3vmin; -} - -.locked-mino { - background: rgba(242, 255, 255, 0.5); - border-color: rgba(242, 255, 255, 0.7); -} - -.cleared-line { - background: white; -} - -.trail { - background: rgba(255, 255, 255, 0.2); - border: 1px solid rgba(255, 255, 255, 0.2); - border-radius: 0.3vmin; -} - -.ghost { - background: rgba(255, 255, 255, 0.2); - border: 1px solid rgba(255, 255, 255, 0.4); - border-radius: 0.3vmin; -} - - - -@font-face { - font-family: 'Share Tech'; - font-style: normal; - font-weight: 400; - src: local('Share Tech Regular'), local('ShareTech-Regular'), url(fonts/ShareTech.woff2) format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; -} - -@font-face { - font-family: 'Share Tech Mono'; - font-style: normal; - font-weight: 400; - src: local('Share Tech Mono Regular'), local('ShareTechMono-Regular'), url(fonts/ShareTechMono.woff2) format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; -} - - -* { - font-family: 'Share Tech'; - font-size: 1em; - text-align: center; -} - -body { - background-color: #0D111D; - background-image: url("images/bg.jpg"); - background-size: cover; - background-attachment: fixed; -} - - -h1 { - font-size: 5vmin; - margin: 1vmin auto; - text-shadow: 3px 2px rgba(153, 145, 175, 0.5); - text-align: center; - color: white; -} - -section, footer, div { - display: flex; - justify-content: center; - align-items: center; -} - -fieldset { - border: 1px white solid; - border-radius: 4px; - align-items: center; - margin: 1vmin auto; - width: 60%; -} - -fieldset > div { - display: grid; - grid-template-columns: 3fr 2fr 3fr 2fr; - grid-gap: 1vmin; -} - -fieldset legend, label { - color: white; -} - -fieldset input, select, button { - width: 100%; -} - -input[type="checkbox"] { - width: auto; -} - -button { - width: auto; -} - -#showGhostDiv { - grid-column-start: 1; - grid-column-end: 5; - width: 100%; -} - -#settingsButton { - display: none; - width: auto; - margin: 2vmin; -} - -#hideSettingsButton { - display: none; - width: auto; - margin: auto; -} - -.minoes-table { - table-layout: fixed; - border-spacing: 0; - margin: auto; -} - -tr { - height: 3vmin; -} - -th, td { - font-weight: normal; - padding: 0; - border-width: 1px; - border-style: solid; - border-color: transparent; - height: 3vmin; - width: 3vmin; -} - -#game { - display: none; - width: 72vmin; - grid-template-columns: 18vmin 30vmin 18vmin; - grid-gap: 3vmin; - margin: auto; -} - -#hold { - grid-column: 1; - grid-row: 1; - justify-self: end; -} - -#stats { - grid-column: 1; - grid-row: 3; - height: 0; - justify-self: end; - margin: 0 auto; -} - -#score { - font-weight: bold; -} - -#matrix { - grid-column: 2; - grid-row: 1 / 4; -} - -#message { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - color: rgba(255, 255, 255, 0.8); - font-size: 4vmin; - text-shadow: 1px 1px rgba(0, 0, 0, 0.8); - text-align: center; - font-weight: bold; -} - -#next { - grid-column: 3; - grid-row: 1 / 4; -} - -a { - text-decoration: none; - font-size: 1em; - color: white; -} - -a:hover { - color: lightcyan; -} - -#leaderboardLink { - display: flex; - justify-content: center; -} - -#leaderboard{ - min-width: 25%; - margin: auto; - text-align: center; - border-top: 1px solid white; - caption-side: top; -} - -caption { - color: white; -} - -.name { - font-family: 'Share Tech'; - text-align: left; - font-size: 2.5vmin; - color: white; -} - -.player { - font-family: 'Share Tech'; - text-align: center; - font-size: 2.5vmin; - color: white; -} - -.value { - font-family: 'Share Tech Mono'; - text-align: right; - font-size: 2.5vmin; - color: white; -} - - - diff --git a/themes/kubowania/style.css b/themes/kubowania/style.css deleted file mode 100644 index b1df3a3..0000000 --- a/themes/kubowania/style.css +++ /dev/null @@ -1,65 +0,0 @@ -.empty-cell { - background: transparent; -} - -.invisible-grid > .empty-cell { - border: 1px solid transparent; -} - -.visible-grid > .empty-cell { - border: 1px inset rgba(128, 128, 128, 0.3); -} - -.mino { - border: 1px inset rgba(128, 128, 128, 0.3); - border-radius: 0; -} - -.I-mino { - background-image: url(images/blue_block.png); -} - -.J-mino { - background-image: url(images/navy_block.png); -} - -.L-mino { - background-image: url(images/peach_block.png); -} - -.O-mino { - background-image: url(images/yellow_block.png); -} - -.S-mino { - background-image: url(images/green_block.png); -} - -.T-mino { - background-image: url(images/purple_block.png); -} - -.Z-mino { - background-image: url(images/pink_block.png); -} - -.locked-mino { - background: white; - border-radius: 1px; -} - -.cleared-line { - background: white; -} - -.trail { - background: rgba(255, 255, 255, 0.2); - border: 1px solid rgba(255, 255, 255, 0.2); - border-radius: 1px; -} - -.ghost { - background: rgba(255, 255, 255, 0.4); - border: 1px transparent; - border-radius: 1px; -}