493 lines
12 KiB
CSS
493 lines
12 KiB
CSS
:root {
|
|
--font-family: 'Quicksand', sans-serif;
|
|
|
|
/* Light Colors */
|
|
--cl-bg: #e0ffdd;
|
|
--cl-text: black;
|
|
--cl-dec-text: black;
|
|
--cl-box: #e7bb69;
|
|
--cl-box-edge: #c19d59;
|
|
--cl-box-ridge: #e1b768;
|
|
--cl-label: white;
|
|
--cl-lines: black;
|
|
--cl-login-hover: rgba(255, 255, 255, 0.8);
|
|
--cl-null-text: #9b9b9b;
|
|
--cl-table-header: #d6f0a7;
|
|
--cl-table-odd: #dadada;
|
|
--cl-table-hover: #c6dc9e;
|
|
--cl-back-button: rgba(0, 0, 0, 0.3);
|
|
|
|
/* Dark Colors */
|
|
--cd-bg: #111;
|
|
--cd-text: #fff;
|
|
--cd-dec-text: #9b9b9b;
|
|
--cd-box: #262933;
|
|
--cd-box-edge: #1a1a1a;
|
|
--cd-box-ridge: #282b35;
|
|
--cd-label: #222;
|
|
--cd-lines: #4d4d4d;
|
|
--cd-login-hover: rgba(0, 0, 0, 0.5);
|
|
--cd-null-text: #9b9b9b;
|
|
--cd-table-header: #314a48;
|
|
--cd-table-odd: #2d2d2d;
|
|
--cd-table-hover: #344543;
|
|
--cd-back-button: rgba(255, 255, 255, 0.3);
|
|
|
|
--c-loading: #d6d6d6;
|
|
|
|
@media (prefers-color-scheme: light) {
|
|
--c-bg: var(--cl-bg);
|
|
--c-text: var(--cl-text);
|
|
--c-dec-text: var(--cl-dec-text);
|
|
--c-box: var(--cl-box);
|
|
--c-box-edge: var(--cl-box-edge);
|
|
--c-box-ridge: var(--cl-box-ridge);
|
|
--c-label: var(--cl-label);
|
|
--c-lines: var(--cl-lines);
|
|
--c-login-hover: var(--cl-login-hover);
|
|
--c-null-text: var(--cl-null-text);
|
|
--c-table-header: var(--cl-table-header);
|
|
--c-table-odd: var(--cl-table-odd);
|
|
--c-table-hover: var(--cl-table-hover);
|
|
--c-back-button: var(--cl-back-button);
|
|
|
|
--p-theme-switch-0: 0;
|
|
--p-theme-switch-1: 1;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
--c-bg: var(--cd-bg);
|
|
--c-text: var(--cd-text);
|
|
--c-dec-text: var(--cd-dec-text);
|
|
--c-box: var(--cd-box);
|
|
--c-box-edge: var(--cd-box-edge);
|
|
--c-box-ridge: var(--cd-box-ridge);
|
|
--c-label: var(--cd-label);
|
|
--c-lines: var(--cd-lines);
|
|
--c-login-hover: var(--cd-login-hover);
|
|
--c-null-text: var(--cd-null-text);
|
|
--c-table-header: var(--cd-table-header);
|
|
--c-table-odd: var(--cd-table-odd);
|
|
--c-table-hover: var(--cd-table-hover);
|
|
--c-back-button: var(--cd-back-button);
|
|
|
|
--p-theme-switch-0: 1;
|
|
--p-theme-switch-1: 0;
|
|
}
|
|
}
|
|
|
|
:root:has(#themeSwitch:checked) {
|
|
/* Swapped light and dark themes. */
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
--c-bg: var(--cl-bg);
|
|
--c-text: var(--cl-text);
|
|
--c-dec-text: var(--cl-dec-text);
|
|
--c-box: var(--cl-box);
|
|
--c-box-edge: var(--cl-box-edge);
|
|
--c-box-ridge: var(--cl-box-ridge);
|
|
--c-label: var(--cl-label);
|
|
--c-lines: var(--cl-lines);
|
|
--c-login-hover: var(--cl-login-hover);
|
|
--c-null-text: var(--cl-null-text);
|
|
--c-table-header: var(--cl-table-header);
|
|
--c-table-odd: var(--cl-table-odd);
|
|
--c-table-hover: var(--cl-table-hover);
|
|
--c-back-button: var(--cl-back-button);
|
|
}
|
|
|
|
@media (prefers-color-scheme: light) {
|
|
--c-bg: var(--cd-bg);
|
|
--c-text: var(--cd-text);
|
|
--c-dec-text: var(--cd-dec-text);
|
|
--c-box: var(--cd-box);
|
|
--c-box-edge: var(--cd-box-edge);
|
|
--c-box-ridge: var(--cd-box-ridge);
|
|
--c-label: var(--cd-label);
|
|
--c-lines: var(--cd-lines);
|
|
--c-login-hover: var(--cd-login-hover);
|
|
--c-null-text: var(--cd-null-text);
|
|
--c-table-header: var(--cd-table-header);
|
|
--c-table-odd: var(--cd-table-odd);
|
|
--c-table-hover: var(--cd-table-hover);
|
|
--c-back-button: var(--cd-back-button);
|
|
}
|
|
}
|
|
|
|
html {
|
|
width: 100%; height: 100%;
|
|
font-family: var(--font-family);
|
|
color: var(--c-text);
|
|
overflow: hidden;
|
|
|
|
@media (min-aspect-ratio: 100/135) { /* Wider */
|
|
font-size: min(calc(100/135 * 1vh), 62.5%);
|
|
/* Centered around the main box: packageLabel with net height/width 100/135 */
|
|
}
|
|
|
|
@media (max-aspect-ratio: 100/135) { /* longer */
|
|
font-size: min(calc(100/100 * 1vw), 62.5%);
|
|
}
|
|
}
|
|
|
|
body {
|
|
width: 100vw; height: 100%;
|
|
margin: 0 auto 0 auto;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
background-color: var(--c-bg);
|
|
}
|
|
|
|
#themeSwitchContainer {
|
|
width: 10rem; height: 10rem;
|
|
position: fixed;
|
|
top: 0; left: 0;
|
|
z-index: 5;
|
|
user-select: none;
|
|
|
|
--sun-color: #fffb15;
|
|
--moon-color: #ffe598;
|
|
|
|
@media (prefers-color-scheme: light) {
|
|
--day-color: #a3e0ee;
|
|
--night-color: #222;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
--night-color: #a3e0ee;
|
|
--day-color: #222;
|
|
}
|
|
|
|
--w: 6deg;
|
|
--spokes: 10;
|
|
|
|
> input {
|
|
width: 100%; height: 100%;
|
|
position: absolute;
|
|
opacity: 0;
|
|
cursor: pointer;
|
|
|
|
&:hover ~ span:nth-child(2) {
|
|
filter: brightness(110%);
|
|
}
|
|
|
|
&:checked ~ span {
|
|
&:nth-of-type(1) { background-color: var(--night-color); }
|
|
&:nth-of-type(2) { opacity: var(--p-theme-switch-0); }
|
|
&:nth-of-type(3) { opacity: var(--p-theme-switch-1); }
|
|
}
|
|
}
|
|
|
|
> span {
|
|
transition: opacity 0.15s ease-in-out;
|
|
position: absolute;
|
|
pointer-events: none;
|
|
|
|
&:nth-of-type(1) {
|
|
width: 100%; height: 100%;
|
|
top: 0; left: 0;
|
|
background-color: var(--day-color);
|
|
filter: brightness(100%);
|
|
transition: background-color 0.15s ease-in-out,
|
|
filter 0.15s ease-in-out;
|
|
}
|
|
|
|
&:nth-of-type(2) {
|
|
width: 4rem; height: 4rem;
|
|
position: absolute;
|
|
top: 3rem; left: 3rem;
|
|
background-color: var(--sun-color);
|
|
border-radius: 50%;
|
|
opacity: var(--p-theme-switch-1);
|
|
|
|
&::before {
|
|
content: "";
|
|
width: 7rem; height: 7rem;
|
|
position: absolute;
|
|
top: -1.5rem; left: -1.5rem;
|
|
border-radius: inherit;
|
|
background-image: repeating-conic-gradient(
|
|
from calc(-1*var(--w)/2), var(--sun-color) 0 calc(var(--w) - 2deg),
|
|
transparent calc(var(--w)) calc(360deg/var(--spokes) - 2deg),
|
|
var(--sun-color) calc(360deg/var(--spokes))
|
|
);
|
|
}
|
|
}
|
|
|
|
&:nth-of-type(3) {
|
|
width: 6rem; height: 6rem;
|
|
top: 1.75rem; left: 1.75rem;
|
|
background-color: var(--moon-color);
|
|
border-radius: 50%;
|
|
opacity: var(--p-theme-switch-0);
|
|
mask-image: radial-gradient(circle, rgba(0,0,0,0) 33%, black 34%);
|
|
mask-position: -3rem -3rem;
|
|
mask-repeat: no-repeat;
|
|
mask-size: 166.66% 166.66%;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
#package {
|
|
margin: auto;
|
|
width: 298rem;
|
|
height: 200rem;
|
|
--spacing: 0.8rem;
|
|
background: repeating-linear-gradient(90deg,
|
|
var(--c-box) 0rem,
|
|
var(--c-box) var(--spacing),
|
|
var(--c-box-ridge) var(--spacing),
|
|
var(--c-box-ridge) calc(2 *var(--spacing))
|
|
);
|
|
|
|
border: 1rem solid var(--c-box-edge);
|
|
position: absolute;
|
|
z-index: 1;
|
|
user-select: none;
|
|
|
|
> img {
|
|
display: block;
|
|
position: absolute;
|
|
|
|
&:nth-of-type(1) {
|
|
width: 30rem;
|
|
top: 6rem; left: 263rem;
|
|
}
|
|
|
|
&:nth-of-type(2) {
|
|
width: 30rem;
|
|
top: 6rem; left: 228rem;
|
|
}
|
|
|
|
&:nth-of-type(3) {
|
|
width: 35rem;
|
|
top: 162rem; left: 257rem;
|
|
}
|
|
|
|
&:nth-of-type(4) {
|
|
width: 25rem;
|
|
top: 165rem; left: 10rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
#packageTape {
|
|
margin: auto;
|
|
height: 30rem;
|
|
position: absolute;
|
|
z-index: 1;
|
|
|
|
> text {
|
|
font: 1.5px var(--font-family);
|
|
fill: rgba(255, 255, 255, 0.4);
|
|
user-select: none;
|
|
}
|
|
}
|
|
|
|
#packageLabel {
|
|
width: 80rem;
|
|
height: 115rem;
|
|
|
|
outline-width: 5rem;
|
|
outline-style: solid;
|
|
outline-color: var(--c-label);
|
|
|
|
border-radius: 12px;
|
|
background-color: var(--c-label);
|
|
border: 0.5rem solid var(--c-lines);
|
|
|
|
transition: background-color 0.15s ease-in-out,
|
|
border 0.15s ease-in-out,
|
|
outline-color 0.15s ease-in-out;
|
|
|
|
display: grid;
|
|
grid-template-rows: 2fr 1fr 7fr 2fr;
|
|
|
|
z-index: 2;
|
|
|
|
svg {
|
|
fill: var(--c-dec-text);
|
|
}
|
|
}
|
|
|
|
#packageLabelTop {
|
|
display: grid;
|
|
grid-template-columns: 1fr 3fr;
|
|
border-bottom: 0.5rem solid var(--c-lines);
|
|
|
|
> div:nth-of-type(1) {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border-right: 0.5rem solid var(--c-lines);
|
|
|
|
> svg {
|
|
width: 80%; height: 80%;
|
|
}
|
|
}
|
|
|
|
> div:nth-of-type(2) {
|
|
padding: 3%;
|
|
display: grid;
|
|
grid-template-rows: 1fr 1fr;
|
|
|
|
> div:nth-of-type(1) {
|
|
display: block;
|
|
color: var(--c-dec-text);
|
|
user-select: none;
|
|
|
|
> p {
|
|
margin: 0;
|
|
font-size: 150%;
|
|
|
|
&:nth-of-type(1) { display: inline-block; }
|
|
&:nth-of-type(2) {
|
|
display: inline-block;
|
|
float: right;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
> div:nth-of-type(2) {
|
|
width: 80%;
|
|
position: relative;
|
|
|
|
> svg {
|
|
position: absolute;
|
|
left: 0; top: 0;
|
|
width: 35rem; height: 7rem;
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#login {
|
|
display: block;
|
|
margin: 0;
|
|
width: 24.8rem; height: 7rem;
|
|
line-height: 7rem;
|
|
position: relative;
|
|
left: 5rem;
|
|
|
|
font-size: 6rem;
|
|
font-family: 'Courier';
|
|
font-weight: 800;
|
|
text-align: center;
|
|
|
|
transition: background 0.15s ease-in-out,
|
|
color 0.15s ease-in-out;
|
|
|
|
z-index: 4;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
|
|
#packageLabelTitle {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-bottom: 0.5rem solid var(--c-lines);
|
|
user-select: none;
|
|
|
|
> h1 {
|
|
margin: 1%;
|
|
font-size: 430%;
|
|
}
|
|
}
|
|
|
|
@keyframes cursorWait {
|
|
0% { content: "█"; }
|
|
50% { content: ""; }
|
|
100% { content: "█"; }
|
|
}
|
|
|
|
@keyframes rotate {
|
|
to { --angle: 360deg; }
|
|
}
|
|
|
|
@property --angle {
|
|
syntax: "<angle>";
|
|
initial-value: 0deg;
|
|
inherits: false;
|
|
}
|
|
|
|
#packageLabelContent {
|
|
border-bottom: 0.5rem solid var(--c-lines);
|
|
font-size: 150%;
|
|
font-family: 'Courier';
|
|
|
|
> h1 {
|
|
padding: 7%;
|
|
margin: 0;
|
|
line-height: 100%;
|
|
color: var(--c-lines);
|
|
}
|
|
|
|
> h1::after {
|
|
animation: 1.5s infinite normal cursorWait;
|
|
content: "hello";
|
|
}
|
|
}
|
|
|
|
#packageLabelBot {
|
|
display: grid;
|
|
grid-template-rows: 6fr 1fr;
|
|
|
|
> svg {
|
|
margin: 3% auto 0 auto;
|
|
width: 80%; height: 85%;
|
|
}
|
|
|
|
> a {
|
|
margin: auto;
|
|
margin-bottom: 1%;
|
|
font-size: 2rem;
|
|
color: var(--c-dec-text);
|
|
text-decoration: none;
|
|
transition: filter 0.15s ease-in-out;
|
|
filter: brightness(100%);
|
|
|
|
&:hover { filter: brightness(120%); }
|
|
}
|
|
}
|
|
|
|
body { /* Default no authentication */
|
|
#packageLabelTitle > h1::before { content: "PRIORITY PACKAGING" }
|
|
|
|
#packageLabelContent > div { display: none; }
|
|
|
|
#login {
|
|
background: var(--c-label);
|
|
color: var(--c-text);
|
|
|
|
&::before { content: "LOGIN"; }
|
|
&:hover { background-color: var(--c-login-hover); }
|
|
}
|
|
}
|
|
|
|
body.{{ state.auth }} {
|
|
#packageLabelTitle h1::before { content: "PACKAGE INFO" }
|
|
|
|
#packageLabelContent {
|
|
> div { display: block; }
|
|
> h1 { display: none; }
|
|
}
|
|
|
|
#login {
|
|
color: transparent;
|
|
background:transparent;
|
|
|
|
&::before { content: "LOGOUT"; }
|
|
&:hover {
|
|
background: var(--c-label);
|
|
color: var(--c-text);
|
|
}
|
|
}
|
|
}
|