Initial commit
This commit is contained in:
300
styles.css
Normal file
300
styles.css
Normal file
@@ -0,0 +1,300 @@
|
||||
:root {
|
||||
--tul-color: #5948AD;
|
||||
--fs-color: #888B95;
|
||||
--ft-color: #924C14;
|
||||
--fp-color: #0076D5;
|
||||
--ef-color: #65A812;
|
||||
--fua-color: #006443;
|
||||
--fm-color: #EA7603;
|
||||
--fzs-color: #00B0BE;
|
||||
--cxi-color: #C20019;
|
||||
|
||||
--accent-color: var(--tul-color);
|
||||
|
||||
--background-color: color-mix(in srgb, var(--accent-color) 5%, white);
|
||||
--shadow-color: color-mix(in srgb, var(--accent-color), gray);
|
||||
|
||||
--button-color: var(--background-color);
|
||||
--button-hover-color: white;
|
||||
--button-border-color: color-mix(in srgb, var(--accent-color), white);
|
||||
|
||||
--button-accent-color: var(--accent-color);
|
||||
--button-accent-hover-color: color-mix(in srgb, var(--accent-color), white 25%);
|
||||
}
|
||||
|
||||
[data-faculty= "fs"] { --accent-color: var( --fs-color); }
|
||||
[data-faculty= "ft"] { --accent-color: var( --ft-color); }
|
||||
[data-faculty= "fp"] { --accent-color: var( --fp-color); }
|
||||
[data-faculty= "ef"] { --accent-color: var( --ef-color); }
|
||||
[data-faculty="fua"] { --accent-color: var(--fua-color); }
|
||||
[data-faculty= "fm"] { --accent-color: var( --fm-color); }
|
||||
[data-faculty="fzs"] { --accent-color: var(--fzs-color); }
|
||||
[data-faculty="cxi"] { --accent-color: var(--cxi-color); }
|
||||
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
font-family: "Noto Sans", sans-serif;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: var(--background-color);
|
||||
|
||||
transition: background-color 0.25s;
|
||||
}
|
||||
|
||||
.main-container {
|
||||
padding: 24px;
|
||||
width: 600px;
|
||||
height: 500px;
|
||||
|
||||
box-shadow: 0 0 20px var(--shadow-color);
|
||||
background-color: white;
|
||||
border-radius: 16px;
|
||||
|
||||
transition: box-shadow 0.25s;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
text-align: center;
|
||||
|
||||
opacity: 1;
|
||||
transition: opacity 0.25s;
|
||||
}
|
||||
|
||||
.main-content > * {
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.paragraphs {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.paragraphs > p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a, a:visited, a:active {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.horizontal-list {
|
||||
width: 100%;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.horizontal-list > .filler {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
button, .button {
|
||||
box-sizing: border-box;
|
||||
flex-grow: 0;
|
||||
padding: 8px 16px;
|
||||
|
||||
text-decoration: none;
|
||||
font-family: inherit;
|
||||
font-size: 100%;
|
||||
border: 1px var(--button-border-color) solid;
|
||||
color: black;
|
||||
background-color: var(--button-color);
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
|
||||
transition: color 0.25s, background-color 0.25s, border 0.25s;
|
||||
}
|
||||
|
||||
button:hover, .button:hover {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
button.narrow, .button.narrow {
|
||||
padding: 4px 16px;
|
||||
font-size: 16px;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
button.expand, .button.expand {
|
||||
flex-grow: 2;
|
||||
flex-basis: 0;
|
||||
}
|
||||
|
||||
button.accent, .button.accent {
|
||||
color: white;
|
||||
border: 1px var(--button-accent-color) solid;
|
||||
background-color: var(--button-accent-color);
|
||||
}
|
||||
|
||||
button.accent:hover, .button.accent:hover {
|
||||
background-color: var(--button-accent-hover-color);
|
||||
border: 1px var(--button-accent-hover-color) solid;
|
||||
}
|
||||
|
||||
button:disabled, .button:disabled {
|
||||
border: 1px gray solid;
|
||||
background-color: lightgray;
|
||||
color: black;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
button:disabled:hover, .button:disabled:hover {
|
||||
border: 1px gray solid;
|
||||
background-color: lightgray;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.vertical-spacer {
|
||||
height: 16px
|
||||
}
|
||||
|
||||
.vertical-list {
|
||||
flex-grow: 1;
|
||||
width: 100%;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.slide-animation {
|
||||
position: relative;
|
||||
|
||||
opacity: 1;
|
||||
left: 0;
|
||||
|
||||
transition: left 0.25s, opacity 0.25s;
|
||||
}
|
||||
|
||||
.slide-from-left {
|
||||
animation: 0.25s forwards from-left;
|
||||
}
|
||||
|
||||
.slide-from-right {
|
||||
animation: 0.25s forwards from-right;
|
||||
}
|
||||
|
||||
.slide-to-left {
|
||||
animation: 0.25s forwards to-left;
|
||||
}
|
||||
|
||||
.slide-to-right {
|
||||
animation: 0.25s forwards to-right;
|
||||
}
|
||||
|
||||
@keyframes from-left {
|
||||
from {
|
||||
opacity: 0;
|
||||
left: -16px;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes from-right {
|
||||
from {
|
||||
opacity: 0;
|
||||
left: 16px;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes to-left {
|
||||
from {
|
||||
opacity: 1;
|
||||
left: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
left: -16px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes to-right {
|
||||
from {
|
||||
opacity: 1;
|
||||
left: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
left: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
width: 16px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
label {
|
||||
flex-grow: 1;
|
||||
text-align: left;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
flex-grow: 0;
|
||||
padding: 8px 16px;
|
||||
|
||||
font-family: inherit;
|
||||
font-size: 100%;
|
||||
border: 1px var(--button-border-color) solid;
|
||||
color: black;
|
||||
background-color: var(--button-color);
|
||||
border-radius: 8px;
|
||||
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
input[type="text"]::placeholder {
|
||||
color: gray;
|
||||
}
|
||||
|
||||
input[type="text"]:disabled::placeholder {
|
||||
color: lightgray;
|
||||
}
|
||||
|
||||
input[type="text"]:disabled {
|
||||
background-color: white;
|
||||
color: lightgray;
|
||||
}
|
||||
|
||||
.zmp-logo {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
height: 1em;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user