704 lines
16 KiB
CSS
704 lines
16 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;
|
|
|
|
/* 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;
|
|
|
|
--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);
|
|
|
|
--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);
|
|
|
|
--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);
|
|
}
|
|
|
|
@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);
|
|
}
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
span {
|
|
transition: opacity 0.15s ease-in-out;
|
|
position: absolute;
|
|
pointer-events: none;
|
|
}
|
|
|
|
span:nth-child(2) {
|
|
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;
|
|
}
|
|
|
|
span:nth-child(3) {
|
|
width: 4rem; height: 4rem;
|
|
position: absolute;
|
|
top: 3rem; left: 3rem;
|
|
background-color: var(--sun-color);
|
|
border-radius: 50%;
|
|
opacity: var(--p-theme-switch-1);
|
|
}
|
|
|
|
span:nth-child(3)::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))
|
|
);
|
|
}
|
|
|
|
span:nth-child(4) {
|
|
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%;
|
|
}
|
|
|
|
input:hover ~ span:nth-child(2) {
|
|
filter: brightness(110%);
|
|
}
|
|
|
|
input:checked ~ span:nth-child(2) {
|
|
background-color: var(--night-color);
|
|
}
|
|
|
|
input:checked ~ span:nth-child(3) {
|
|
opacity: var(--p-theme-switch-0);
|
|
}
|
|
|
|
input:checked ~ span:nth-child(4) {
|
|
opacity: var(--p-theme-switch-1);
|
|
}
|
|
}
|
|
|
|
|
|
#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-child(1) {
|
|
width: 30rem;
|
|
top: 6rem; left: 263rem;
|
|
}
|
|
|
|
:nth-child(2) {
|
|
width: 30rem;
|
|
top: 6rem; left: 228rem;
|
|
}
|
|
|
|
:nth-child(3) {
|
|
width: 35rem;
|
|
top: 162rem; left: 257rem;
|
|
}
|
|
|
|
:nth-child(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-child(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-child(2) {
|
|
padding: 3%;
|
|
display: grid;
|
|
grid-template-rows: 1fr 1fr;
|
|
|
|
> div:nth-child(1) {
|
|
display: block;
|
|
color: var(--c-dec-text);
|
|
user-select: none;
|
|
|
|
p {
|
|
margin: 0;
|
|
font-size: 150%;
|
|
}
|
|
|
|
p:nth-child(1) {
|
|
display: inline-block;
|
|
}
|
|
|
|
p:nth-child(2) {
|
|
display: inline-block;
|
|
float: right;
|
|
}
|
|
}
|
|
|
|
> div:nth-child(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";
|
|
}
|
|
|
|
> div:nth-child(2) {
|
|
padding: 7% 7% 0 7%;
|
|
color: var(--c-text);
|
|
}
|
|
|
|
h1 {
|
|
margin: 0;
|
|
line-height: 100%;
|
|
}
|
|
|
|
input {
|
|
background: none;
|
|
color: var(--c-text);
|
|
border: 1px solid var(--c-lines);
|
|
padding: 2%;
|
|
margin: 2% 0 2% 0;
|
|
font-size: 150%;
|
|
font-family: 'Courier';
|
|
}
|
|
|
|
input.error {
|
|
outline: 2px solid red !important;
|
|
}
|
|
|
|
input[type=submit] {
|
|
cursor: pointer;
|
|
transition: background-color 0.15s ease-in-out;
|
|
}
|
|
|
|
/* Button enabled/disabled. */
|
|
input[type=submit] {
|
|
color: var(--c-null-text);
|
|
border-style: dashed;
|
|
pointer-events: none;
|
|
}
|
|
|
|
input[type=submit].enabled {
|
|
color: var(--c-text);
|
|
border-style: solid;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
input[type=submit]:hover {
|
|
background-color: var(--c-login-hover);
|
|
}
|
|
|
|
input:focus {
|
|
outline: none;
|
|
}
|
|
|
|
input[type=submit].loading {
|
|
border: 1px solid transparent;
|
|
background: linear-gradient(var(--c-label), var(--c-label)) padding-box, conic-gradient(
|
|
from var(--angle),
|
|
var(--c-lines) 0% 30%,
|
|
var(--c-loading) 30% 50%,
|
|
var(--c-lines) 50% 80%,
|
|
var(--c-loading) 80% 100%
|
|
) border-box;
|
|
animation: 1.5s rotate linear infinite;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
#repoSelect {
|
|
border-bottom: 2px solid var(--c-lines);
|
|
|
|
#repoSelectInput {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
#repoSelectButton {
|
|
float: right;
|
|
}
|
|
|
|
#repoSelectError {
|
|
line-height: 100%;
|
|
height: 3rem;
|
|
margin: 2% 0 2% 0;
|
|
}
|
|
}
|
|
|
|
#repoInfo {
|
|
margin-top: 2%;
|
|
transition: opacity 0.15s ease-in-out;
|
|
|
|
> h1:first-child {
|
|
margin-top: 4%;
|
|
}
|
|
|
|
#repoActions {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
#repoLinkInput::selection {
|
|
background-color: transparent;
|
|
}
|
|
|
|
#repoLinkButton {
|
|
float: right;
|
|
}
|
|
|
|
#repoFeatures {
|
|
margin-top: 2%;
|
|
transition: opacity 0.15s ease-in-out;
|
|
|
|
#featureBox {
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
|
|
.feature {
|
|
margin-right: 2%;
|
|
font-weight: 800;
|
|
pointer-events: auto;
|
|
}
|
|
/* .feature { */
|
|
/* border: 1px solid var(--c-lines); */
|
|
/* padding: 2%; */
|
|
/* margin-right: 2%; */
|
|
/* font-size: 150%; */
|
|
/* cursor: pointer; */
|
|
/* user-select: none; */
|
|
/* transition: background-color 0.15s ease-in-out; */
|
|
/* } */
|
|
|
|
/* .feature:hover { */
|
|
/* background-color: var(--c-login-hover); */
|
|
/* } */
|
|
|
|
/* Feature states. */
|
|
.feature {
|
|
color: var(--c-null-text);
|
|
border-style: dashed;
|
|
}
|
|
|
|
.feature.fEnabled {
|
|
color: var(--c-text);
|
|
border-style: solid;
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#confirmOverlay {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
|
|
position: absolute;
|
|
left: 0;
|
|
z-index: 10;
|
|
|
|
transition: opacity 0.15s ease-in-out;
|
|
|
|
> div {
|
|
margin: 30% auto 0 auto;
|
|
|
|
width: 80rem;
|
|
height: 30rem;
|
|
|
|
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;
|
|
|
|
> div {
|
|
padding: 7%;
|
|
|
|
input[type=submit] {
|
|
float: right;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#confirmOverlay {
|
|
pointer-events: none;
|
|
top: 100%;
|
|
opacity: 0;
|
|
}
|
|
|
|
#confirmOverlay.enabled {
|
|
pointer-events: auto;
|
|
top: 0;
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Repo selected and created states. */
|
|
#repoInfo, #repoFeatures {
|
|
opacity: 0;
|
|
}
|
|
|
|
#repoInfo.repoSelected, #repoFeatures.repoCreated {
|
|
opacity: 1
|
|
}
|
|
}
|
|
|
|
#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%);
|
|
}
|
|
|
|
a: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);
|
|
}
|
|
|
|
#login::before {
|
|
content: "LOGIN";
|
|
}
|
|
|
|
#login:hover {
|
|
background-color: var(--c-login-hover);
|
|
}
|
|
}
|
|
|
|
body.auth {
|
|
#packageLabelTitle h1::before {
|
|
content: "PACKAGE INFO"
|
|
}
|
|
|
|
#packageLabelContent > div {
|
|
display: block;
|
|
}
|
|
|
|
#packageLabelContent > h1 {
|
|
display: none;
|
|
}
|
|
|
|
#login {
|
|
color: transparent;
|
|
background:transparent;
|
|
}
|
|
|
|
#login::before {
|
|
content: "LOGOUT";
|
|
}
|
|
|
|
#login:hover {
|
|
background: var(--c-label);
|
|
color: var(--c-text);
|
|
}
|
|
}
|