alternate stylesheet
This commit is contained in:
BIN
css/handmadepaper.png
Normal file
BIN
css/handmadepaper.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
103
css/v1.css
Normal file
103
css/v1.css
Normal file
@ -0,0 +1,103 @@
|
||||
body {
|
||||
/* Background pattern from Toptal Subtle Patterns */
|
||||
background: url("handmadepaper.png");
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
text-shadow: 1px 1px grey;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
table {
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
column-gap: 0.5em;
|
||||
row-gap: 0.5em;
|
||||
margin: 1em auto;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
input[type="radio"] {
|
||||
margin-top: -1px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
label.disabled {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.grid td {
|
||||
border: 2px solid black;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.region td {
|
||||
border: 1px solid grey;
|
||||
}
|
||||
|
||||
.grid input {
|
||||
width: 1.6em;
|
||||
height: 1.6em;
|
||||
font-size: 1.5em;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.grid input:enabled {
|
||||
font-family: cursive;
|
||||
color: darkblue;
|
||||
}
|
||||
|
||||
.grid input:disabled {
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.grid input::placeholder {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.unhighlighted:enabled {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.highlighted {
|
||||
background: yellow;
|
||||
}
|
||||
|
||||
#shareDiv {
|
||||
display: block;
|
||||
line-height: 80%;
|
||||
}
|
||||
|
||||
#shareA {
|
||||
text-decoration: none;
|
||||
font-size: 0.8em;
|
||||
letter-spacing: 0.5em;
|
||||
}
|
||||
|
||||
#highlightRadiosDiv {
|
||||
column-gap: 0;
|
||||
}
|
||||
|
||||
input[type="number"] {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
input[type="number"]::-webkit-outer-spin-button,
|
||||
input::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
input[type="number"]::-webkit-calendar-picker-indicator {
|
||||
display: none;
|
||||
}
|
||||
304
css/v2.css
Normal file
304
css/v2.css
Normal file
@ -0,0 +1,304 @@
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
width: min-content;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
section,
|
||||
div,
|
||||
footer {
|
||||
align-items: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
margin: 0.8rem 0;
|
||||
}
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
row-gap: 0.5rem;
|
||||
column-gap: 0.3rem;
|
||||
margin: 0.5rem auto;
|
||||
}
|
||||
|
||||
.grid {
|
||||
border-spacing: 0;
|
||||
border: 1px solid black;
|
||||
border-radius: 6px;
|
||||
margin: auto;
|
||||
cursor: url(img/ink-pen.svg) 2 22, text;
|
||||
}
|
||||
|
||||
.grid td,
|
||||
tr {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.grid tr:first-child td:first-child {
|
||||
border-top-left-radius: 5px;
|
||||
}
|
||||
|
||||
.grid tr:first-child td:first-child input {
|
||||
border-top-left-radius: 4px;
|
||||
}
|
||||
|
||||
.grid tr:first-child td:last-child {
|
||||
border-top-right-radius: 5px;
|
||||
}
|
||||
|
||||
.grid tr:first-child td:last-child input {
|
||||
border-top-right-radius: 4px;
|
||||
}
|
||||
|
||||
.grid tr:last-child td:first-child {
|
||||
border-bottom-left-radius: 5px;
|
||||
}
|
||||
|
||||
.grid tr:last-child td:first-child>input {
|
||||
border-bottom-left-radius: 4px;
|
||||
}
|
||||
|
||||
.grid tr:last-child td:last-child {
|
||||
border-bottom-right-radius: 5px;
|
||||
}
|
||||
|
||||
.grid tr:last-child td:last-child input {
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
|
||||
.grid tr:nth-child(3n+1) td {
|
||||
border-top: 1px solid black;
|
||||
}
|
||||
|
||||
.grid tr:nth-child(3n+2) td {
|
||||
border-top: 1px solid grey;
|
||||
border-bottom: 1px solid grey;
|
||||
}
|
||||
|
||||
.grid tr:nth-child(3n) td {
|
||||
border-bottom: 1px solid black;
|
||||
}
|
||||
|
||||
.grid td:nth-child(3n+1) {
|
||||
border-left: 1px solid black;
|
||||
}
|
||||
|
||||
.grid td:nth-child(3n+2) {
|
||||
border-left: 1px solid grey;
|
||||
border-right: 1px solid grey;
|
||||
}
|
||||
|
||||
.grid td:nth-child(3n+3) {
|
||||
border-right: 1px solid black;
|
||||
}
|
||||
|
||||
.grid input {
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
font-size: 1.5rem;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
transition: background 0.5s;
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
input[type="number"]::-webkit-outer-spin-button,
|
||||
input::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
input[type="number"]::-webkit-calendar-picker-indicator {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.grid input:enabled {
|
||||
background: white;
|
||||
color: darkblue;
|
||||
cursor: inherit;
|
||||
}
|
||||
|
||||
.grid input.pencil,
|
||||
.grid input::placeholder {
|
||||
color: #666 !important;
|
||||
font-size: 0.9rem !important;
|
||||
}
|
||||
|
||||
.grid input:disabled {
|
||||
color: white !important;
|
||||
background: #6666ff !important;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.grid input.forbidden:enabled {
|
||||
background: #f9f99f;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.grid input.same-value:enabled {
|
||||
background: #ffff33;
|
||||
cursor: not-allowed !important;
|
||||
}
|
||||
|
||||
.grid input.forbidden:disabled {
|
||||
color: #f9f99f;
|
||||
background: #6666ff;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.grid input.same-value:disabled,
|
||||
.tools button.same-value:enabled,
|
||||
.tools input:enabled:checked+label {
|
||||
color: #f9f99f !important;
|
||||
background: #00b359 !important;
|
||||
}
|
||||
|
||||
.grid input.one-candidate {
|
||||
cursor: help !important;
|
||||
}
|
||||
|
||||
.tools button,
|
||||
.tools input+label {
|
||||
color: white;
|
||||
text-shadow: -1px -1px #5b6c9e;
|
||||
background: #8ca6f2;
|
||||
border: 2px outset #8ca6f2;
|
||||
border-radius: 4px;
|
||||
font-size: 1.3rem;
|
||||
min-width: 20px;
|
||||
padding: 4px 5px 5px 5px;
|
||||
margin: 0px 1px 1px 1px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tools img {
|
||||
display: block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.tools input {
|
||||
position: fixed;
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.tools button:enabled:hover,
|
||||
.tools button:enabled:focus,
|
||||
.tools input:enabled:hover+label,
|
||||
.tools input:enabled:focus+label {
|
||||
border-width: 1px;
|
||||
border-style: outset;
|
||||
padding: 5px 5px 5px 6px;
|
||||
margin: 1px 1px 1px 2px;
|
||||
}
|
||||
|
||||
.tools input:enabled:checked:hover+label,
|
||||
.tools input:enabled:checked:focus+label {
|
||||
border-width: 3px;
|
||||
border-style: inset;
|
||||
padding: 4px 2px 2px 5px;
|
||||
margin: 1px 1px 1px 2px;
|
||||
}
|
||||
|
||||
.tools input:enabled:checked+label {
|
||||
text-shadow: -1px -1px #005f2f;
|
||||
border: 2px inset #00b359;
|
||||
background: #00b359;
|
||||
padding: 4px 4px 4px 5px;
|
||||
margin: 1px 1px 0px 2px;
|
||||
}
|
||||
|
||||
.tools button:enabled:active,
|
||||
.tools input:enabled:active+label {
|
||||
border-width: 4px !important;
|
||||
border-style: inset !important;
|
||||
padding: 4px 0px 0px 5px !important;
|
||||
margin: 0px 1px 0px 2px !important;
|
||||
}
|
||||
|
||||
.tools button:disabled,
|
||||
.tools input:disabled+label {
|
||||
text-shadow: -1px -1px #555;
|
||||
color: #ccc;
|
||||
background: darkgrey;
|
||||
border: 1px outset darkgrey;
|
||||
padding: 5px 6px 6px 6px;
|
||||
margin: 0px 1px 1px 1px;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.tools button:disabled * {
|
||||
filter: grayscale(100%);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.tools button.warning:hover {
|
||||
background: #ff5050;
|
||||
border-color: #ff5050;
|
||||
}
|
||||
|
||||
.context-menu {
|
||||
display: none;
|
||||
z-index: 1000;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
border: 1px solid #CCC;
|
||||
white-space: nowrap;
|
||||
font-family: sans-serif;
|
||||
background: #EEE;
|
||||
color: #333;
|
||||
border-top-right-radius: 3px;
|
||||
border-bottom-left-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.context-menu li {
|
||||
padding: 6px 10px;
|
||||
cursor: default;
|
||||
list-style-type: none;
|
||||
transition: all .3s ease;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.context-menu li:hover {
|
||||
background-color: #DEF;
|
||||
}
|
||||
|
||||
.context-menu li.error {
|
||||
color: #888
|
||||
}
|
||||
|
||||
.context-menu li.error:hover {
|
||||
background-color: #EEE;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.credits {
|
||||
font-size: 0.8rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
body {
|
||||
color: #eee;
|
||||
background: #121212;
|
||||
}
|
||||
body a {
|
||||
color: #809fff;
|
||||
}
|
||||
}
|
||||
314
css/v3.css
Normal file
314
css/v3.css
Normal file
@ -0,0 +1,314 @@
|
||||
:root {
|
||||
--body-bc: #e8ffff;
|
||||
--body-fc: black;
|
||||
--shadow: lightgray;
|
||||
--border-color: #555b6e;
|
||||
--box-bc: #F7FFF7;
|
||||
--box-fc: black;
|
||||
--forbidden-box-bc: #FFEE99;
|
||||
--same-value-box-bc: #ffbc25;
|
||||
--placeholder-fc: var(--grid-color);
|
||||
--clue-bc: #60D2CB;
|
||||
--forbidden-clue-bc: var(--clue-bc);
|
||||
--same-value-clue-bc: #24737F;
|
||||
--clue-fc: var(--box-bc);
|
||||
--forbidden-clue-fc: var(--forbidden-box-bc);
|
||||
--same-value-clue-fc: var(--forbidden-box-bc);
|
||||
--tool-fc: var(--clue-fc);
|
||||
--tool-bc: var(--clue-bc);
|
||||
--selected-tool-bc: var(--same-value-clue-bc);
|
||||
--selected-tool-fc: var(--same-value-clue-fc);
|
||||
--tool-hover-bc: #80DBD5;
|
||||
--selected-tool-hover-bc: #319EAF;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--body-bc: #1c1c1e;
|
||||
--body-fc: #fefefe;
|
||||
--shadow: darkgray;
|
||||
--border-color: #292929;
|
||||
--box-bc: #0C151D;
|
||||
--box-fc: #bfcbce;
|
||||
--forbidden-box-bc: #004E52;
|
||||
--same-value-box-bc: #09BC8A;
|
||||
--placeholder-fc: var(--grid-color);
|
||||
--clue-bc: #508991;
|
||||
--forbidden-clue-bc: var(--clue-bc);
|
||||
--same-value-clue-bc: #75DDDD;
|
||||
--clue-fc: var(--box-bc);
|
||||
--forbidden-clue-fc: var(--forbidden-box-bc);
|
||||
--same-value-clue-fc: var(--forbidden-box-bc);
|
||||
--tool-fc: var(--clue-fc);
|
||||
--tool-bc: var(--clue-bc);
|
||||
--selected-tool-bc: var(--same-value-clue-bc);
|
||||
--selected-tool-fc: var(--same-value-clue-fc);
|
||||
--tool-hover-bc: #61A0A8;
|
||||
--selected-tool-hover-bc: #9DE7E7;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
width: min-content;
|
||||
margin: auto;
|
||||
background: var(--body-bc);
|
||||
color: var(--body-fc)
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
font-weight: 50;
|
||||
margin: 2rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1rem;
|
||||
text-indent: 1rem;
|
||||
text-shadow: .1rem .1rem var(--shadow);
|
||||
}
|
||||
|
||||
section,
|
||||
div,
|
||||
footer {
|
||||
align-items: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
row-gap: 0.5rem;
|
||||
column-gap: 0.3rem;
|
||||
margin: 0.5rem auto;
|
||||
}
|
||||
|
||||
.grid {
|
||||
border-spacing: 0;
|
||||
margin: auto;
|
||||
cursor: url(img/ink-pen.svg) 2 22, text;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.grid td,
|
||||
tr {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.grid tr:nth-child(3n+1) td {
|
||||
border-top: 2px solid var(--border-color);
|
||||
}
|
||||
|
||||
.grid tr:nth-child(3n+2) td {
|
||||
border-top: 1px solid var(--border-color);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.grid tr:nth-child(3n) td {
|
||||
border-bottom: 2px solid var(--border-color);
|
||||
}
|
||||
|
||||
.grid td:nth-child(3n+1) {
|
||||
border-left: 2px solid var(--border-color);
|
||||
}
|
||||
|
||||
.grid td:nth-child(3n+2) {
|
||||
border-left: 1px solid var(--border-color);
|
||||
border-right: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.grid td:nth-child(3n+3) {
|
||||
border-right: 2px solid var(--border-color);
|
||||
}
|
||||
|
||||
.grid input {
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
transition: background 0.5s;
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
input[type="number"]::-webkit-outer-spin-button,
|
||||
input::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
input[type="number"]::-webkit-calendar-picker-indicator {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.grid input:enabled {
|
||||
font-size: 1.4rem;
|
||||
color: var(--box-fc);
|
||||
background: var(--box-bc);
|
||||
cursor: inherit;
|
||||
}
|
||||
|
||||
.grid input.pencil,
|
||||
.grid input::placeholder {
|
||||
color: #666 !important;
|
||||
font-size: 0.9rem !important;
|
||||
}
|
||||
|
||||
.grid input:disabled {
|
||||
font-size: 1.3rem;
|
||||
font-weight: bold;
|
||||
color: var(--clue-fc);
|
||||
background: var(--clue-bc);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.grid input.forbidden:enabled {
|
||||
background: var(--forbidden-box-bc);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.grid input.same-value:enabled {
|
||||
background: var(--same-value-box-bc);
|
||||
cursor: not-allowed !important;
|
||||
}
|
||||
|
||||
.grid input.forbidden:disabled {
|
||||
color: var(--forbidden-clue-fc);
|
||||
background: var(--forbidden-clue-bc) !important;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.grid input.same-value:disabled {
|
||||
color: var(--same-value-clue-fc) !important;
|
||||
background: var(--same-value-clue-bc) !important;
|
||||
}
|
||||
|
||||
.grid input.one-candidate {
|
||||
cursor: help !important;
|
||||
}
|
||||
|
||||
.tools div {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.tools button,
|
||||
.tools input+label {
|
||||
color: var(--tool-fc);
|
||||
background: var(--clue-bc);
|
||||
border: 1px outset var(--clue-bc);
|
||||
font-size: 1.3rem;
|
||||
font-weight: bold;
|
||||
min-width: 20px;
|
||||
padding: 6px;
|
||||
margin: .1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tools img {
|
||||
display: block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.tools input {
|
||||
position: fixed;
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.tools button:enabled:checked,
|
||||
.tools input:enabled:checked+label {
|
||||
border-style: inset;
|
||||
}
|
||||
|
||||
.tools button.same-value:enabled,
|
||||
.tools input:enabled:checked+label {
|
||||
background: var(--selected-tool-bc);
|
||||
color: var(--selected-tool-fc);
|
||||
border-color: var(--selected-tool-bc);
|
||||
}
|
||||
|
||||
.tools button:enabled:hover,
|
||||
.tools input:enabled:hover+label {
|
||||
background: var(--tool-hover-bc);
|
||||
border-color: var(--tool-hover-bc);
|
||||
}
|
||||
|
||||
.tools button:enabled:checked:hover,
|
||||
.tools input:enabled:checked:hover+label {
|
||||
background: var(--selected-tool-hover-bc);
|
||||
border-color: var(--selected-tool-hover-bc);
|
||||
}
|
||||
|
||||
.tools button:disabled,
|
||||
.tools input:disabled+label {
|
||||
color: #ccc;
|
||||
background: darkgrey;
|
||||
border-style: outset;
|
||||
border-color: darkgrey;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.tools button:disabled * {
|
||||
filter: grayscale(100%);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.tools button.warning:hover {
|
||||
background: #ff5050;
|
||||
border-color: #ff5050;
|
||||
}
|
||||
|
||||
.context-menu {
|
||||
display: none;
|
||||
z-index: 1000;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
border: 1px solid #CCC;
|
||||
white-space: nowrap;
|
||||
font-family: sans-serif;
|
||||
background: #EEE;
|
||||
color: #333;
|
||||
border-top-right-radius: 3px;
|
||||
border-bottom-left-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.context-menu li {
|
||||
padding: 6px 10px;
|
||||
cursor: default;
|
||||
list-style-type: none;
|
||||
transition: all .3s ease;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.context-menu li:hover {
|
||||
background-color: #DEF;
|
||||
}
|
||||
|
||||
.context-menu li.error {
|
||||
color: #888
|
||||
}
|
||||
|
||||
.context-menu li.error:hover {
|
||||
background-color: #EEE;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--forbidden-clue-bc);
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: var(--same-value-clue-bc);
|
||||
}
|
||||
|
||||
.credits {
|
||||
font-size: 0.8rem;
|
||||
margin: 0;
|
||||
}
|
||||
387
css/v4.css
Normal file
387
css/v4.css
Normal file
@ -0,0 +1,387 @@
|
||||
* {
|
||||
font-family: "Roboto", "Calibri", "Arial", sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
width: min-content;
|
||||
margin: auto;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin: 1rem;
|
||||
font-weight: 300;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
row-gap: 0.5rem;
|
||||
column-gap: 0.2rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
button,
|
||||
label {
|
||||
font-weight: 400;
|
||||
transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
border: 1px solid;
|
||||
border-radius: 3px;
|
||||
padding: 3px 0px;
|
||||
margin: 0;
|
||||
background-clip: border-box;
|
||||
font-size: 1.1rem;
|
||||
cursor: pointer;
|
||||
min-width: 2.5rem;
|
||||
}
|
||||
|
||||
button:disabled,
|
||||
:disabled+label {
|
||||
cursor: not-allowed !important;
|
||||
}
|
||||
|
||||
i {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
position: fixed;
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.radioGroup {
|
||||
column-gap: 0px;
|
||||
}
|
||||
|
||||
input[type="radio"]+label {
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
input[type="radio"]:first-child+label {
|
||||
border-top-left-radius: 3px;
|
||||
border-bottom-left-radius: 3px;
|
||||
}
|
||||
|
||||
.radioGroup label:last-child {
|
||||
border-right-width: 1px;
|
||||
border-top-right-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
}
|
||||
|
||||
form {
|
||||
border: 3px solid;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
|
||||
}
|
||||
|
||||
table {
|
||||
border-spacing: 0;
|
||||
margin: auto;
|
||||
cursor: text;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 0;
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
table input {
|
||||
width: 2.4rem;
|
||||
height: 2.4rem;
|
||||
font-size: 1.4rem;
|
||||
border: 1px solid transparent;
|
||||
padding: 0;
|
||||
transition: background 0.5s;
|
||||
text-align: center;
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
tr:nth-child(3n+1) td {
|
||||
border-top-width: 3px;
|
||||
}
|
||||
|
||||
tr:nth-child(3n) td {
|
||||
border-bottom-width: 3px;
|
||||
}
|
||||
|
||||
td:nth-child(3n+1) {
|
||||
border-left-width: 3px;
|
||||
}
|
||||
|
||||
td:nth-child(3n) {
|
||||
border-right-width: 3px;
|
||||
}
|
||||
|
||||
input[type="number"]::-webkit-outer-spin-button,
|
||||
input::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
input[type="number"]::-webkit-calendar-picker-indicator {
|
||||
display: none;
|
||||
}
|
||||
|
||||
table input:enabled {
|
||||
cursor: inherit;
|
||||
}
|
||||
|
||||
.forbidden {
|
||||
cursor: not-allowed !important;
|
||||
}
|
||||
|
||||
.pencil,
|
||||
::placeholder {
|
||||
font-size: 0.9rem !important;
|
||||
}
|
||||
|
||||
#links {
|
||||
flex-direction: column;
|
||||
row-gap: .2rem;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.context-menu {
|
||||
display: none;
|
||||
z-index: 1000;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
border: 1px solid;
|
||||
white-space: nowrap;
|
||||
font-family: sans-serif;
|
||||
box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.context-menu li {
|
||||
padding: 6px 10px;
|
||||
cursor: default;
|
||||
list-style-type: none;
|
||||
transition: all .3s ease;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
|
||||
/* Colors */
|
||||
|
||||
body {
|
||||
color: #273134;
|
||||
background-color: #f7f7f7;
|
||||
}
|
||||
|
||||
form,
|
||||
td {
|
||||
border-color: #d3e1e8;
|
||||
}
|
||||
|
||||
table input {
|
||||
color: #303d41;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
table input:enabled:hover {
|
||||
color: #273134;
|
||||
}
|
||||
|
||||
:focus {
|
||||
border-color: rgba(46, 179, 152, 0.5);
|
||||
}
|
||||
|
||||
:checked+label,
|
||||
.context-menu li:hover {
|
||||
color: #ffffff;
|
||||
background-color: #2eb398;
|
||||
}
|
||||
|
||||
:checked+label img {
|
||||
filter: invert();
|
||||
opacity: 100%;
|
||||
}
|
||||
|
||||
:disabled,
|
||||
:disabled+label,
|
||||
.context-menu li.error {
|
||||
color: rgba(39, 49, 52, 0.55);
|
||||
}
|
||||
|
||||
:disabled img,
|
||||
:disabled+label img {
|
||||
opacity: 25%;
|
||||
}
|
||||
|
||||
button,
|
||||
input+label,
|
||||
.context-menu {
|
||||
color: #273134;
|
||||
border-color: rgba(0, 0, 0, 0.15);
|
||||
background-color: #fcfcfc;
|
||||
}
|
||||
|
||||
img {
|
||||
opacity: 70%;
|
||||
}
|
||||
|
||||
:focus,
|
||||
:focus+label {
|
||||
border-color: rgba(46, 179, 152, 0.5);
|
||||
}
|
||||
|
||||
button:enabled:hover,
|
||||
input:enabled:hover+label {
|
||||
color: #060808;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
input:enabled:checked:hover+label {
|
||||
background-color: #59d4bc;
|
||||
}
|
||||
|
||||
button:enabled:hover img,
|
||||
input:enabled:hover+label img {
|
||||
opacity: 85%;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #248a76;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: #252f32;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #2eb398;
|
||||
}
|
||||
|
||||
a:active {
|
||||
color: #248a76;
|
||||
}
|
||||
|
||||
.forbidden {
|
||||
background-color: #ebebeb;
|
||||
}
|
||||
|
||||
.same-value {
|
||||
background-color: #ebebeb;
|
||||
color: #2eb398;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #2eb398;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
body {
|
||||
color: #abb9b6;
|
||||
background-color: #1b2224;
|
||||
}
|
||||
|
||||
form,
|
||||
td {
|
||||
border-color: #3f5055;
|
||||
}
|
||||
|
||||
img {
|
||||
filter: invert();
|
||||
}
|
||||
|
||||
table input {
|
||||
color: #abb9b6;
|
||||
background-color: #222b2e;
|
||||
}
|
||||
|
||||
table input:enabled:hover {
|
||||
color: #ccd7d4;
|
||||
}
|
||||
|
||||
:focus {
|
||||
border-color: rgba(46, 179, 152, 0.7);
|
||||
}
|
||||
|
||||
:checked+label,
|
||||
.context-menu li:hover {
|
||||
color: #ffffff;
|
||||
background-color: #2eb398;
|
||||
}
|
||||
|
||||
:checked+label img {
|
||||
filter: invert();
|
||||
}
|
||||
|
||||
:disabled,
|
||||
:disabled+label,
|
||||
.context-menu li.error {
|
||||
color: rgba(204, 215, 212, 0.45);
|
||||
}
|
||||
|
||||
button,
|
||||
input+label,
|
||||
.context-menu {
|
||||
color: #ccd7d4;
|
||||
border-color: rgba(0, 0, 0, 0.25);
|
||||
background-color: #263034;
|
||||
}
|
||||
|
||||
img {
|
||||
opacity: 70%;
|
||||
}
|
||||
|
||||
:focus,
|
||||
:focus+label {
|
||||
border-color: rgba(46, 179, 152, 0.7);
|
||||
;
|
||||
}
|
||||
|
||||
button:enabled:hover,
|
||||
input:enabled:hover+label {
|
||||
color: #a1b5b0;
|
||||
border-color: rgba(0, 0, 0, 0.25);
|
||||
background-color: #38464b;
|
||||
}
|
||||
|
||||
:enabled:hover+label img {
|
||||
opacity: 85%;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #6ddac4;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: #c7d0ce;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #96e4d4;
|
||||
}
|
||||
|
||||
a:active {
|
||||
color: #6ddac4;
|
||||
}
|
||||
|
||||
.forbidden {
|
||||
background-color: #2d383b;
|
||||
}
|
||||
|
||||
.same-value {
|
||||
color: #2eb398;
|
||||
background-color: #2d383b;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user