|
|
@@ -4,39 +4,608 @@
|
|
|
padding: 2rem;
|
|
|
text-align: center;
|
|
|
}
|
|
|
+.panel-button {
|
|
|
+ border: none;
|
|
|
+ cursor: pointer;
|
|
|
+ position: relative;
|
|
|
+ background-color: #313031;
|
|
|
+ height: 24px;
|
|
|
+ aspect-ratio: 1;
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ box-shadow:
|
|
|
+ inset 8px 0px 4px -8px #000,
|
|
|
+ inset -8px 0px 4px -8px #000,
|
|
|
+ inset 0px 8px 4px -8px #000,
|
|
|
+ inset 0px -8px 4px -8px #000,
|
|
|
+ inset 0px 8px 4px -8px #fff,
|
|
|
+ inset 0px -8px 2px -8px #432400,
|
|
|
+ 0px 0px 4px 0px #000;
|
|
|
+}
|
|
|
+.panel-button:active,
|
|
|
+.panel-button.active {
|
|
|
+ box-shadow:
|
|
|
+ inset 0px 9px 2px -8px #000,
|
|
|
+ inset 8px 0px 4px -8px #563a10,
|
|
|
+ inset 8px 0px 4px -8px #563a10,
|
|
|
+ inset -8px 0px 4px -8px #563a10,
|
|
|
+ inset -8px 0px 4px -8px #563a10,
|
|
|
+ inset 0px -9px 2px -8px #fff,
|
|
|
+ 0px 0px 4px 0px #000;
|
|
|
+ background-color: #f1be64;
|
|
|
+ filter: none;
|
|
|
+ outline: 0;
|
|
|
+}
|
|
|
|
|
|
-.logo {
|
|
|
- height: 6em;
|
|
|
- padding: 1.5em;
|
|
|
- will-change: filter;
|
|
|
- transition: filter 300ms;
|
|
|
+.panel-button.hover,
|
|
|
+.panel-button:focus,
|
|
|
+.panel-button:hover {
|
|
|
+ color: #000;
|
|
|
+ text-decoration: none;
|
|
|
+ outline: 0;
|
|
|
+ box-shadow:
|
|
|
+ inset 8px 0px 4px -8px #000,
|
|
|
+ inset -8px 0px 4px -8px #000,
|
|
|
+ inset 0px 9px 2px -8px #fff,
|
|
|
+ inset 0px -8px 4px -8px hsl(36, 94%, 20%),
|
|
|
+ 0px 0px 4px 0px #000,
|
|
|
+ inset 0px 0px 4px 2px #f9b44b;
|
|
|
+ background-color: #e39827;
|
|
|
+ filter: drop-shadow(0 0 2px #f9b44b);
|
|
|
}
|
|
|
-.logo:hover {
|
|
|
- filter: drop-shadow(0 0 2em #646cffaa);
|
|
|
+input:focus {
|
|
|
+ border: none;
|
|
|
+ filter: drop-shadow(0 0 2px #f9b44b);
|
|
|
}
|
|
|
-.logo.react:hover {
|
|
|
- filter: drop-shadow(0 0 2em #61dafbaa);
|
|
|
+.button {
|
|
|
+ background-color: #8e8e8e;
|
|
|
+ padding: 10px 12px 10px 12px;
|
|
|
+ font-size: 100%;
|
|
|
+ text-align: left;
|
|
|
+ color: #000;
|
|
|
+ font-weight: 600;
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: baseline;
|
|
|
+ min-width: 128px;
|
|
|
+ border: none;
|
|
|
+ line-height: inherit;
|
|
|
+ white-space: nowrap;
|
|
|
+ box-shadow:
|
|
|
+ inset 8px 0px 4px -8px #000,
|
|
|
+ inset -8px 0px 4px -8px #000,
|
|
|
+ inset 0px 10px 2px -8px #e3e3e3,
|
|
|
+ inset 0px 10px 2px -8px #282828,
|
|
|
+ inset 0px -9px 2px -8px #000,
|
|
|
+ 0px 0px 4px 0px #000;
|
|
|
+ position: relative;
|
|
|
+ margin-right: 14px;
|
|
|
+ cursor: pointer;
|
|
|
+ -webkit-user-select: none;
|
|
|
+ -moz-user-select: none;
|
|
|
+ user-select: none;
|
|
|
+ height: 36px;
|
|
|
+ text-align: left;
|
|
|
}
|
|
|
-
|
|
|
-@keyframes logo-spin {
|
|
|
- from {
|
|
|
- transform: rotate(0deg);
|
|
|
- }
|
|
|
- to {
|
|
|
- transform: rotate(360deg);
|
|
|
- }
|
|
|
+.button.icon {
|
|
|
+ height: fit-content;
|
|
|
+ min-width: auto;
|
|
|
+ padding: 0;
|
|
|
+ margin: 0;
|
|
|
}
|
|
|
-
|
|
|
-@media (prefers-reduced-motion: no-preference) {
|
|
|
- a:nth-of-type(2) .logo {
|
|
|
- animation: logo-spin infinite 20s linear;
|
|
|
- }
|
|
|
+.flex-column .button {
|
|
|
+ margin-right: 0;
|
|
|
}
|
|
|
-
|
|
|
-.card {
|
|
|
- padding: 2em;
|
|
|
+.button i {
|
|
|
+ margin-right: 0px;
|
|
|
+}
|
|
|
+.button:hover,
|
|
|
+.button.hover {
|
|
|
+ color: #000;
|
|
|
+ text-decoration: none;
|
|
|
+ outline: 0;
|
|
|
+ box-shadow:
|
|
|
+ inset 8px 0px 4px -8px #000,
|
|
|
+ inset -8px 0px 4px -8px #000,
|
|
|
+ inset 0px 9px 2px -8px #fff,
|
|
|
+ inset 0px 8px 4px -8px #000,
|
|
|
+ inset 0px -8px 4px -8px #000,
|
|
|
+ inset 0px -9px 2px -8px #432400,
|
|
|
+ 0px 0px 4px 0px #000,
|
|
|
+ inset 0px 0px 4px 2px #f9b44b;
|
|
|
+ background-color: #e39827;
|
|
|
+ filter: drop-shadow(0 0 2px #f9b44b);
|
|
|
+}
|
|
|
+.button:active,
|
|
|
+.button.active {
|
|
|
+ position: relative;
|
|
|
+ padding-top: 12px;
|
|
|
+ padding-bottom: 8px;
|
|
|
+ vertical-align: -2px;
|
|
|
+ box-shadow:
|
|
|
+ inset 0px 10px 2px -8px #000,
|
|
|
+ inset 0px 9px 2px -8px #000,
|
|
|
+ inset 8px 0px 4px -8px #563a10,
|
|
|
+ inset 8px 0px 4px -8px #563a10,
|
|
|
+ inset -8px 0px 4px -8px #563a10,
|
|
|
+ inset -8px 0px 4px -8px #563a10,
|
|
|
+ inset 0px 9px 2px -8px #563a10,
|
|
|
+ inset 0px -9px 2px -8px #563a10,
|
|
|
+ inset 0px -8.5px 0px -8px #563a10,
|
|
|
+ 0px 0px 4px 0px #000;
|
|
|
+ background-color: #f1be64;
|
|
|
+ filter: none;
|
|
|
+ outline: 0;
|
|
|
+}
|
|
|
+.button.disabled,
|
|
|
+.button.disabled:hover,
|
|
|
+.button.disabled:active {
|
|
|
+ padding-top: 10px;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ cursor: default;
|
|
|
+ vertical-align: 0;
|
|
|
+ background-color: #3d3d3d;
|
|
|
+ color: #818181;
|
|
|
+ box-shadow:
|
|
|
+ inset 8px 0px 4px -8px #000,
|
|
|
+ inset -8px 0px 4px -8px #000,
|
|
|
+ inset 0px 8px 4px -8px #000,
|
|
|
+ inset 0px -6px 4px -8px #818181,
|
|
|
+ inset 0px -8px 4px -8px #000,
|
|
|
+ 0px 0px 4px 0px #000;
|
|
|
+ filter: none;
|
|
|
+}
|
|
|
+.button-green {
|
|
|
+ background-color: #5eb663;
|
|
|
+ padding: 10px 12px 10px 12px;
|
|
|
+ font-size: 100%;
|
|
|
+ text-align: left;
|
|
|
+ color: #000;
|
|
|
+ font-weight: 600;
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: baseline;
|
|
|
+ min-width: 128px;
|
|
|
+ border: none;
|
|
|
+ line-height: inherit;
|
|
|
+ white-space: nowrap;
|
|
|
+ box-shadow:
|
|
|
+ inset 8px 0px 4px -8px #000,
|
|
|
+ inset -8px 0px 4px -8px #000,
|
|
|
+ inset 0px 10px 2px -8px #95df99,
|
|
|
+ inset 0px 10px 2px -8px #163218,
|
|
|
+ inset 0px -9px 2px -8px #000,
|
|
|
+ 0px 0px 4px 0px #000;
|
|
|
+ position: relative;
|
|
|
+ margin-right: 14px;
|
|
|
+ cursor: pointer;
|
|
|
+ -webkit-user-select: none;
|
|
|
+ -moz-user-select: none;
|
|
|
+ user-select: none;
|
|
|
+ height: 36px;
|
|
|
+ text-align: left;
|
|
|
+}
|
|
|
+.flex-column .button-green {
|
|
|
+ margin-right: 0;
|
|
|
+}
|
|
|
+.button-green i {
|
|
|
+ margin-right: 0px;
|
|
|
+}
|
|
|
+.button-green:hover,
|
|
|
+.button-green:focus,
|
|
|
+.button-green.hover {
|
|
|
+ color: #000;
|
|
|
+ text-decoration: none;
|
|
|
+ outline: 0;
|
|
|
+ box-shadow:
|
|
|
+ inset 8px 0px 4px -8px #000,
|
|
|
+ inset -8px 0px 4px -8px #000,
|
|
|
+ inset 0px 9px 2px -8px #cdf1cf,
|
|
|
+ inset 0px 8px 4px -8px #000,
|
|
|
+ inset 0px -8px 4px -8px #000,
|
|
|
+ inset 0px -9px 2px -8px #432400,
|
|
|
+ 0px 0px 4px 0px #000,
|
|
|
+ inset 0px 0px 4px 2px #34be3c;
|
|
|
+ background-color: #92e897;
|
|
|
+ filter: drop-shadow(0 0 2px #34be3c);
|
|
|
+}
|
|
|
+.button-green:active,
|
|
|
+.button-green.active {
|
|
|
+ position: relative;
|
|
|
+ padding-top: 12px;
|
|
|
+ padding-bottom: 8px;
|
|
|
+ vertical-align: -2px;
|
|
|
+ box-shadow:
|
|
|
+ inset 0px 10px 2px -8px #000,
|
|
|
+ inset 0px 9px 2px -8px #000,
|
|
|
+ inset 8px 0px 4px -8px #3f5024,
|
|
|
+ inset 8px 0px 4px -8px #3f5024,
|
|
|
+ inset -8px 0px 4px -8px #3f5024,
|
|
|
+ inset -8px 0px 4px -8px #3f5024,
|
|
|
+ inset 0px 9px 2px -8px #3f5024,
|
|
|
+ inset 0px -9px 2px -8px #3f5024,
|
|
|
+ inset 0px -8.5px 0px -8px #3f5024,
|
|
|
+ 0px 0px 4px 0px #000;
|
|
|
+ background-color: #cfdf93;
|
|
|
+ filter: none;
|
|
|
+ outline: 0;
|
|
|
+}
|
|
|
+.button-green.disabled,
|
|
|
+.button-green.disabled:hover,
|
|
|
+.button-green.disabled:active {
|
|
|
+ padding-top: 10px;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ cursor: default;
|
|
|
+ vertical-align: 0;
|
|
|
+ background-color: #002b02;
|
|
|
+ color: #376d3b;
|
|
|
+ box-shadow:
|
|
|
+ inset 8px 0px 4px -8px #000,
|
|
|
+ inset -8px 0px 4px -8px #000,
|
|
|
+ inset 0px 8px 4px -8px #000,
|
|
|
+ inset 0px -6px 4px -8px #376d3b,
|
|
|
+ inset 0px -8px 4px -8px #000,
|
|
|
+ 0px 0px 4px 0px #000;
|
|
|
+ filter: none;
|
|
|
+}
|
|
|
+.button-green-right {
|
|
|
+ background-color: #5eb663;
|
|
|
+ padding: 10px 12px 10px 12px;
|
|
|
+ font-size: 100%;
|
|
|
+ text-align: left;
|
|
|
+ color: #000;
|
|
|
+ font-weight: 600;
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: baseline;
|
|
|
+ min-width: 128px;
|
|
|
+ border: none;
|
|
|
+ line-height: inherit;
|
|
|
+ white-space: nowrap;
|
|
|
+ box-shadow:
|
|
|
+ inset 8px 0px 4px -8px #000,
|
|
|
+ inset 0px 10px 2px -8px #95df99,
|
|
|
+ inset 0px 10px 2px -8px #163218,
|
|
|
+ inset 0px -9px 2px -8px #000,
|
|
|
+ 0px 0px 4px 0px #000;
|
|
|
+ position: relative;
|
|
|
+ margin-right: 14px;
|
|
|
+ cursor: pointer;
|
|
|
+ -webkit-user-select: none;
|
|
|
+ -moz-user-select: none;
|
|
|
+ user-select: none;
|
|
|
+ height: 36px;
|
|
|
+ text-align: right;
|
|
|
+}
|
|
|
+.button-green-right::after {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ height: 100%;
|
|
|
+ width: 24px;
|
|
|
+ right: -10px;
|
|
|
+ top: 0;
|
|
|
+ background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAABACAMAAADCiszgAAABDlBMVEUAAAASMBURLxJJgUkAKxNKiU1Ih01msGpMjVFNjlFLik9ToFdLik9Lik9Lik5Yq1wIHgoOKhGAyoVNjVFipmY3cDpQkVVrsHB2vHlXmFyK1Y5/yoRvuHNcs2E7eT8bQB1doGFAe0IJIQxNjFJDgkhjrGgGHgxetmNcs2FasF9RllVVpllXqlxRnlVQm1RYrV0cQh5SoVcUNRdQk1VLllA8e0AXOhpQkFM0bDcqXC4jTiVRmFVFiUkIHgpTpFhNmVJEh0hNj1EtYTCI1I16w35utnJXn1tNk1FJkk1HjUs/fkI3czsyajYpWSsZPhxrsW9ZnV1XmVo6dz41bzgmUygkUCYiTSUTMRUPKxEOKRFdNbmJAAAAJ3RSTlMAVisODG41Bvb75Zfc1dGXlwb98/7y8fDS0JeXl5eXl25sVjU1MSucyRWzAAABMElEQVQ4y23M51LCUBiE4QWRKFFB7L37EUJTithI6FXs7f5vxDgok3Oy+/OdZxbGdrOZ3DyDOmMn2WptHM5odbfdflzdOtGq2ek8Pa/Pqtg0nVK3eLUUVWrcvsil08UVFaeszG/WsKQsT+tYJJW3s7caFpl8FOf8WKZ40YeFYqFYKBaKhWLx44V/LBQLxaLg+T8sFAvFouFYdFIZFoqFYqFYArjuYQngeuwUEsB19wii4lqu2x+s6dXO9QavDa1atuMOG2+Bh1658VFQq5XJutX3cQjaQal8XbgMQ6N31ZtKKAJKQSkoBaWgFJSCUlAKSkEpKAWloBSUglJQCkpBKSgFpdiz8rUARTxec9yRRmGYTv/lQaMw9ocjL6oUywfjyufXdxhqTdx7O46QmjhX4w9Fq5Q/daB+bwAAAABJRU5ErkJggg==");
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: 100% 0%;
|
|
|
+ background-size: contain;
|
|
|
+}
|
|
|
+.button-green-right i {
|
|
|
+ margin-right: 0px;
|
|
|
+}
|
|
|
+.button-green-right:hover,
|
|
|
+.button-green-right:focus,
|
|
|
+.button-green-right.hover {
|
|
|
+ color: #000;
|
|
|
+ text-decoration: none;
|
|
|
+ outline: 0;
|
|
|
+ filter: brightness(1.3) drop-shadow(0 0 2px #34be3c);
|
|
|
+}
|
|
|
+.button-green-right:active,
|
|
|
+.button-green-right.active {
|
|
|
+ position: relative;
|
|
|
+ padding-top: 12px;
|
|
|
+ padding-bottom: 8px;
|
|
|
+ vertical-align: -2px;
|
|
|
+ box-shadow:
|
|
|
+ inset 0px 10px 2px -8px #000,
|
|
|
+ inset 0px 9px 2px -8px #000,
|
|
|
+ inset 8px 0px 4px -8px #3f5024,
|
|
|
+ inset 8px 0px 4px -8px #3f5024,
|
|
|
+ inset 0px 9px 2px -8px #3f5024,
|
|
|
+ inset 0px -9px 2px -8px #3f5024,
|
|
|
+ inset 0px -8.5px 0px -8px #3f5024,
|
|
|
+ 0px 0px 4px 0px #000;
|
|
|
+ background-color: #cfdf93;
|
|
|
+ filter: none;
|
|
|
+ outline: 0;
|
|
|
+}
|
|
|
+.button-green-right:active::after,
|
|
|
+.button-green-right.active::after {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ height: 100%;
|
|
|
+ width: 24px;
|
|
|
+ right: -10px;
|
|
|
+ top: 0;
|
|
|
+ background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAABACAMAAADCiszgAAACBFBMVEUAAACWq1clPgwnPRChwmOhv18iOQ4iOhEdLwwhNBAkOA8jOQ4iNBAkPBSJolSUs1t1ij4kNA4MHwAhLwwhMw0hMQ+Fn0+Jp16Xt14aLA0kOxQlPBR5jkAnOBMqOhYVJQYOIgMcLgsLHQIoPRgZKQoiOBEkOxF4jj6SsFkLGwMlORdOYCRleS4/UB9ohU8xRR3P35PD5ovO3pHM3ZDK243A1IXG2Iq4zX7N4JLM4ZHL4pDJ4o+ev2nH44/F5I6guGoxRxitw3WBmlNxiUZOZS294YW12H0+VCKqzXOcvGWSqmBedjmevmSRqV9geDoQIQIJGgLJ346v0nquxHUmMSMEEQTF4Y3B44mtzom+3IegwoSVt3+etWlwj2KKpld+llJ/mVFuhUQ6TiLH2oq704nA24e21Ya73oW73oOz1X210n2oy3Klxm6lvW6Lq22YuWWaumSUs2KYt2CQpl6Rr1yLqFuNplqBnFF0jEN2kEJeci9MYi1LYCtBVCU9UyItQBguQxccKBLK3Y3C2onD1YfC2IWrzYS22YC6z32bvny1ynu10HigwnaoyHOpx22brmmjv2WWtWGMq2GPr196lV2AnFprh1iSrlZ4k1ZuilaLp1F4kEpyikhmfUF1jEBdcD5acjdUZzdtgjZacDNNYi5HWy0zQyg4TCYoNx4pOxsmMRogMA46/ea2AAAAMHRSTlMADhT7YTLolBhR/O2XTTk1Ev779vKcbWxlVk5MPv76+Ovpp6CclpRzZ15aVU5JRxpOaUmtAAAB4klEQVQ4y23Q5VuTcRTG8VtRBKQEAxS7++BgM6YOwYBJbOo6AQnp7rK7u5v6J3keHsbO2fW7X36vz4tzHVRryzmIhNVoy9mVArkb2mp25ENuZm5qqnr7ngT849e/6dn5namyvugJf/trS0tfKWqxpa0/OjqZnCFq0d3HgbB9PGmfwCeKiksqS8tsyVt4JZPZcv6C/XLSGo5JiUmJKY4zWFViUmJSYlrCFRpeu5lXA1cxTEpMAu9dwiRxarzGcezPtIyvVXwts603MAk8npaeYlSGS0cmDUwcR+y16zbomDiujI5O5ObrleNA+KeBieOSnujIRO4hrTJcZwlEqsa27j6uV3HGlz+1246CeK572NY/NDx2WNbb9568/Px9+Iio5Lh56/mHod8Fop7UamtocH+2qKcc3mbrwGABwOlpl9fZFdmYDXB6xtX4rG8gEwCnZ90PrCGdgtNzbmdXSKfgtLCptffACr1yWtjc0ZsFfZxebHmVt0jB6SVrt0HB6ZXOVQaFoOWrYYzT8hgFp1djFEoKJYWSQkmhpFBSKCmUFCaTw+VuaukUFGbzHW+js6NbUNTXNzQ4rW/yBIXH47n/9HVfFsR8Pt+j9nebJIXf729/+zETcsFg8P2nRIrr2v4fg9wCPnjQTyTwM1IAAAAASUVORK5CYII=");
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: 100% 0%;
|
|
|
+ background-size: contain;
|
|
|
+}
|
|
|
+.button-green-right.disabled,
|
|
|
+.button-green-right.disabled:hover,
|
|
|
+.button-green-right.disabled:active {
|
|
|
+ padding-top: 10px;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ cursor: default;
|
|
|
+ vertical-align: 0;
|
|
|
+ background-color: #002b02;
|
|
|
+ color: #376d3b;
|
|
|
+ box-shadow:
|
|
|
+ inset 8px 0px 4px -8px #000,
|
|
|
+ inset -8px 0px 4px -8px #000,
|
|
|
+ inset 0px 8px 4px -8px #000,
|
|
|
+ inset 0px -6px 4px -8px #376d3b,
|
|
|
+ inset 0px -8px 4px -8px #000,
|
|
|
+ 0px 0px 4px 0px #000;
|
|
|
+ filter: none;
|
|
|
+}
|
|
|
+.button-red {
|
|
|
+ background-color: #fe5a5a;
|
|
|
+ padding: 10px 12px 10px 12px;
|
|
|
+ font-size: 100%;
|
|
|
+ text-align: left;
|
|
|
+ color: #000;
|
|
|
+ font-weight: 600;
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: baseline;
|
|
|
+ min-width: 128px;
|
|
|
+ border: none;
|
|
|
+ line-height: inherit;
|
|
|
+ white-space: nowrap;
|
|
|
+ box-shadow:
|
|
|
+ inset 8px 0px 4px -8px #000,
|
|
|
+ inset -8px 0px 4px -8px #000,
|
|
|
+ inset 0px 10px 2px -8px #fda1a1,
|
|
|
+ inset 0px 10px 2px -8px #8b0101,
|
|
|
+ inset 0px -9px 2px -8px #000,
|
|
|
+ 0px 0px 4px 0px #000;
|
|
|
+ position: relative;
|
|
|
+ margin-right: 14px;
|
|
|
+ cursor: pointer;
|
|
|
+ -webkit-user-select: none;
|
|
|
+ -moz-user-select: none;
|
|
|
+ user-select: none;
|
|
|
+ height: 36px;
|
|
|
+ text-align: left;
|
|
|
+}
|
|
|
+.flex-column .button-red {
|
|
|
+ margin-right: 0;
|
|
|
+}
|
|
|
+.button-red i {
|
|
|
+ margin-right: 0px;
|
|
|
+}
|
|
|
+.button-red:hover,
|
|
|
+.button-red:focus,
|
|
|
+.button-red.hover {
|
|
|
+ color: #000;
|
|
|
+ text-decoration: none;
|
|
|
+ outline: 0;
|
|
|
+ box-shadow:
|
|
|
+ inset 8px 0px 4px -8px #000,
|
|
|
+ inset -8px 0px 4px -8px #000,
|
|
|
+ inset 0px 9px 2px -8px #f8eaea,
|
|
|
+ inset 0px 8px 4px -8px #000,
|
|
|
+ inset 0px -8px 4px -8px #000,
|
|
|
+ inset 0px -9px 2px -8px #432400,
|
|
|
+ 0px 0px 4px 0px #000,
|
|
|
+ inset 0px 0px 4px 2px #c35353;
|
|
|
+ background-color: #ff9b9b;
|
|
|
+ filter: drop-shadow(0 0 2px #c35353);
|
|
|
+}
|
|
|
+.button-red:active,
|
|
|
+.button-red.active {
|
|
|
+ position: relative;
|
|
|
+ padding-top: 12px;
|
|
|
+ padding-bottom: 8px;
|
|
|
+ vertical-align: -2px;
|
|
|
+ box-shadow:
|
|
|
+ inset 0px 10px 2px -8px #000,
|
|
|
+ inset 0px 9px 2px -8px #000,
|
|
|
+ inset 8px 0px 4px -8px #642323,
|
|
|
+ inset 8px 0px 4px -8px #642323,
|
|
|
+ inset -8px 0px 4px -8px #642323,
|
|
|
+ inset -8px 0px 4px -8px #642323,
|
|
|
+ inset 0px 9px 2px -8px #642323,
|
|
|
+ inset 0px -9px 2px -8px #642323,
|
|
|
+ inset 0px -8.5px 0px -8px #642323,
|
|
|
+ 0px 0px 4px 0px #000;
|
|
|
+ background-color: #fca8a8;
|
|
|
+ filter: none;
|
|
|
+ outline: 0;
|
|
|
+}
|
|
|
+.button-red.disabled,
|
|
|
+.button-red.disabled:hover,
|
|
|
+.button-red.disabled:active {
|
|
|
+ padding-top: 10px;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ cursor: default;
|
|
|
+ vertical-align: 0;
|
|
|
+ background-color: #571f1f;
|
|
|
+ color: #8c4e4e;
|
|
|
+ box-shadow:
|
|
|
+ inset 8px 0px 4px -8px #000,
|
|
|
+ inset -8px 0px 4px -8px #000,
|
|
|
+ inset 0px 8px 4px -8px #000,
|
|
|
+ inset 0px -6px 4px -8px #8c4e4e,
|
|
|
+ inset 0px -8px 4px -8px #000,
|
|
|
+ 0px 0px 4px 0px #000;
|
|
|
+ filter: none;
|
|
|
+}
|
|
|
+input[type="text"],
|
|
|
+input[type="password"],
|
|
|
+input[type="email"],
|
|
|
+input[type="url"],
|
|
|
+input[type="search"],
|
|
|
+textarea {
|
|
|
+ vertical-align: baseline;
|
|
|
+ font-family: inherit;
|
|
|
+ line-height: 1.2;
|
|
|
+ font-size: 105%;
|
|
|
+ height: 36px;
|
|
|
+ max-width: 100%;
|
|
|
+ background: #8e8e8e;
|
|
|
+ border-radius: 4px;
|
|
|
+ padding: 6px;
|
|
|
+ border: none;
|
|
|
+ box-shadow:
|
|
|
+ inset 0px 4px 1px -2px #000,
|
|
|
+ inset 0px -4px 1px -2px #c5c5c5,
|
|
|
+ inset 2px 0px 1px 0px #5f5f5f,
|
|
|
+ inset -2px 0px 1px 0px #5f5f5f,
|
|
|
+ inset 0px -2px 2px 0px #5f5f5f,
|
|
|
+ 0px 0px 4px 1px #2e2521;
|
|
|
+}
|
|
|
+input[type="text"]:focus,
|
|
|
+input[type="password"]:focus,
|
|
|
+input[type="email"]:focus,
|
|
|
+input[type="url"]:focus,
|
|
|
+input[type="search"]:focus,
|
|
|
+textarea:focus {
|
|
|
+ outline: none;
|
|
|
+ background: #f0dab4;
|
|
|
+ box-shadow:
|
|
|
+ inset 0px 4px 2px -2px #000,
|
|
|
+ inset 0px -1px 1px 0px #74624b,
|
|
|
+ inset 0px -4px 2px -2px #e0e0e0,
|
|
|
+ inset 2px 0px 2px 0px #a6885c,
|
|
|
+ inset -2px 0px 2px 0px #a6885c,
|
|
|
+ 0px 0px 4px 1px #2e2521;
|
|
|
+}
|
|
|
+textarea {
|
|
|
+ width: 100%;
|
|
|
+ height: 8.1em;
|
|
|
}
|
|
|
|
|
|
-.read-the-docs {
|
|
|
- color: #888;
|
|
|
+.checkbox-label {
|
|
|
+ margin-top: 8px;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ display: flex;
|
|
|
+ align-content: center;
|
|
|
+ position: relative;
|
|
|
+ cursor: pointer;
|
|
|
+ line-height: 1.2;
|
|
|
+ break-inside: avoid;
|
|
|
+}
|
|
|
+.checkbox-label > div {
|
|
|
+ width: 100%;
|
|
|
+ padding-left: 8px;
|
|
|
+}
|
|
|
+.checkbox-label input {
|
|
|
+ position: relative;
|
|
|
+ top: -1px;
|
|
|
+ left: 0px;
|
|
|
+ width: 16px;
|
|
|
+ height: 15px;
|
|
|
+ padding: 6px;
|
|
|
+ position: absolute;
|
|
|
+ opacity: 0;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.checkbox-label .checkbox {
|
|
|
+ margin: auto;
|
|
|
+ position: relative;
|
|
|
+ top: -1px;
|
|
|
+ left: 0px;
|
|
|
+ width: 16px;
|
|
|
+ height: 15px;
|
|
|
+ padding: 6px;
|
|
|
+ background: #8e8e8e;
|
|
|
+ box-shadow:
|
|
|
+ inset 0px 4px 2.5px -2.5px #111,
|
|
|
+ inset 2px 0px 2px 0px #323232,
|
|
|
+ inset -2px 0px 2px 0px #323232,
|
|
|
+ inset 0px -1px 1px 0px #fff,
|
|
|
+ inset 0px -4px 2px -2px #8e8e8e,
|
|
|
+ 0px 0px 4px 1px #2e2521;
|
|
|
+}
|
|
|
+.checkbox-label .checkbox:hover,
|
|
|
+.checkbox-label .checkbox.hover,
|
|
|
+.checkbox-label .checkbox:active,
|
|
|
+.checkbox-label .checkbox.active,
|
|
|
+.checkbox-label input:focus ~ .checkbox {
|
|
|
+ background: #e39827;
|
|
|
+ box-shadow:
|
|
|
+ inset 0px 4px 2px -2px #412a07,
|
|
|
+ inset 2px 0px 2px 0px #5a3c10,
|
|
|
+ inset -2px 0px 2px 0px #5a3c10,
|
|
|
+ inset 0px -2px 2px 0px #d0ae79,
|
|
|
+ inset 0px -2px 4px 0px #c78627,
|
|
|
+ 0px 0px 4px 1px #786b4f;
|
|
|
+}
|
|
|
+.checkbox-label .checkbox:active,
|
|
|
+.checkbox-label .checkbox.active {
|
|
|
+ background: #f3c98e;
|
|
|
+ box-shadow:
|
|
|
+ inset 0px 4px 2px -2px #412a07,
|
|
|
+ inset 2px 0px 2px 0px #5a3c10,
|
|
|
+ inset -2px 0px 2px 0px #5a3c10,
|
|
|
+ inset 0px -2px 2px 0px #d0ae79,
|
|
|
+ inset 0px -2px 4px 0px #c78627,
|
|
|
+ inset 0px 1px 2.5px 4.5px #e39827,
|
|
|
+ 0px 0px 4px 1px #786b4f;
|
|
|
+}
|
|
|
+.checkbox-label .checkbox:disabled,
|
|
|
+.checkbox-label .checkbox.disabled {
|
|
|
+ background: #313031;
|
|
|
+ box-shadow:
|
|
|
+ inset 0px 4px 2.5px -2.5px #111,
|
|
|
+ inset 2px 0px 2px 0px #323232,
|
|
|
+ inset -2px 0px 2px 0px #323232,
|
|
|
+ inset 0px -1px 1px 0px #666,
|
|
|
+ inset 0px -4px 2px -2px #8e8e8e,
|
|
|
+ 0px 0px 4px 1px #2e2521;
|
|
|
+}
|
|
|
+.checkbox-label input:checked ~ .checkbox {
|
|
|
+ background: #e39827;
|
|
|
+}
|
|
|
+.checkbox-label input:checked ~ .checkbox:active,
|
|
|
+.checkbox-label input:checked ~ .checkbox.active {
|
|
|
+ background: #f3c98e;
|
|
|
+}
|
|
|
+.checkbox-label .checkbox::after {
|
|
|
+ position: absolute;
|
|
|
+ content: "";
|
|
|
+}
|
|
|
+.checkbox-label input:checked ~ .checkbox::after {
|
|
|
+ -webkit-transform: rotate(45deg) scale(1);
|
|
|
+ -ms-transform: rotate(45deg) scale(1);
|
|
|
+ transform: rotate(45deg) scale(1);
|
|
|
+ opacity: 1;
|
|
|
+ left: 6px;
|
|
|
+ top: 3px;
|
|
|
+ width: 2px;
|
|
|
+ height: 6px;
|
|
|
+ border: solid #282728;
|
|
|
+ border-width: 0 2.5px 2.5px 0;
|
|
|
+ background-color: transparent;
|
|
|
+ border-radius: 0;
|
|
|
+}
|
|
|
+.disable-checkbox-label input[type="checkbox"] {
|
|
|
+ position: relative;
|
|
|
+ opacity: 1;
|
|
|
+ -webkit-appearance: none;
|
|
|
+ appearance: none;
|
|
|
+ margin: 0;
|
|
|
+ margin-top: 2px;
|
|
|
+ width: 1.2em;
|
|
|
+ height: 1.2em;
|
|
|
+ cursor: pointer;
|
|
|
+ background-color: transparent;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48IS0tISBGb250IEF3ZXNvbWUgRnJlZSA2LjQuMCBieSBAZm9udGF3ZXNvbWUgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbSBMaWNlbnNlIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20vbGljZW5zZSAoQ29tbWVyY2lhbCBMaWNlbnNlKSBDb3B5cmlnaHQgMjAyMyBGb250aWNvbnMsIEluYy4gLS0+PHN0eWxlPnN2Z3tmaWxsOiNhNmE2YTZ9PC9zdHlsZT48cGF0aCBkPSJNMzY3LjIgNDEyLjVMOTkuNSAxNDQuOEM3Ny4xIDE3Ni4xIDY0IDIxNC41IDY0IDI1NmMwIDEwNiA4NiAxOTIgMTkyIDE5MmM0MS41IDAgNzkuOS0xMy4xIDExMS4yLTM1LjV6bTQ1LjMtNDUuM0M0MzQuOSAzMzUuOSA0NDggMjk3LjUgNDQ4IDI1NmMwLTEwNi04Ni0xOTItMTkyLTE5MmMtNDEuNSAwLTc5LjkgMTMuMS0xMTEuMiAzNS41TDQxMi41IDM2Ny4yek0wIDI1NmEyNTYgMjU2IDAgMSAxIDUxMiAwQTI1NiAyNTYgMCAxIDEgMCAyNTZ6Ii8+PC9zdmc+");
|
|
|
+}
|
|
|
+.disable-checkbox-label input[type="checkbox"]:hover {
|
|
|
+ background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48IS0tISBGb250IEF3ZXNvbWUgRnJlZSA2LjQuMCBieSBAZm9udGF3ZXNvbWUgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbSBMaWNlbnNlIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20vbGljZW5zZSAoQ29tbWVyY2lhbCBMaWNlbnNlKSBDb3B5cmlnaHQgMjAyMyBGb250aWNvbnMsIEluYy4gLS0+PHN0eWxlPnN2Z3tmaWxsOiNmZmI1MzN9PC9zdHlsZT48cGF0aCBkPSJNMzY3LjIgNDEyLjVMOTkuNSAxNDQuOEM3Ny4xIDE3Ni4xIDY0IDIxNC41IDY0IDI1NmMwIDEwNiA4NiAxOTIgMTkyIDE5MmM0MS41IDAgNzkuOS0xMy4xIDExMS4yLTM1LjV6bTQ1LjMtNDUuM0M0MzQuOSAzMzUuOSA0NDggMjk3LjUgNDQ4IDI1NmMwLTEwNi04Ni0xOTItMTkyLTE5MmMtNDEuNSAwLTc5LjkgMTMuMS0xMTEuMiAzNS41TDQxMi41IDM2Ny4yek0wIDI1NmEyNTYgMjU2IDAgMSAxIDUxMiAwQTI1NiAyNTYgMCAxIDEgMCAyNTZ6Ii8+PC9zdmc+");
|
|
|
+}
|
|
|
+.disable-checkbox-label input[type="checkbox"]:checked {
|
|
|
+ background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48IS0tISBGb250IEF3ZXNvbWUgRnJlZSA2LjQuMCBieSBAZm9udGF3ZXNvbWUgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbSBMaWNlbnNlIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20vbGljZW5zZSAoQ29tbWVyY2lhbCBMaWNlbnNlKSBDb3B5cmlnaHQgMjAyMyBGb250aWNvbnMsIEluYy4gLS0+PHN0eWxlPnN2Z3tmaWxsOiNmZmEyMDB9PC9zdHlsZT48cGF0aCBkPSJNMzY3LjIgNDEyLjVMOTkuNSAxNDQuOEM3Ny4xIDE3Ni4xIDY0IDIxNC41IDY0IDI1NmMwIDEwNiA4NiAxOTIgMTkyIDE5MmM0MS41IDAgNzkuOS0xMy4xIDExMS4yLTM1LjV6bTQ1LjMtNDUuM0M0MzQuOSAzMzUuOSA0NDggMjk3LjUgNDQ4IDI1NmMwLTEwNi04Ni0xOTItMTkyLTE5MmMtNDEuNSAwLTc5LjkgMTMuMS0xMTEuMiAzNS41TDQxMi41IDM2Ny4yek0wIDI1NmEyNTYgMjU2IDAgMSAxIDUxMiAwQTI1NiAyNTYgMCAxIDEgMCAyNTZ6Ii8+PC9zdmc+");
|
|
|
}
|
tripeur
