homepage/res/style.css

110 lines
2.4 KiB
CSS
Raw Normal View History

:root {
--body-bg-color: #2E2E2E;
--accent-bg-color: #d4d3d3;
--button-accent-color: #3d3d3d;
--selected-bg-color: #2E2E2E;
--hover-bg-color: #555555;
--card-border-radius: 0;
--button-border-radius: 4px;
2020-10-18 21:41:14 +03:00
--main-font-weight: 500;
--cards-length: 600px;
--fonts-proportional: -apple-system,"Segoe UI",system-ui,"Roboto","Helvetica Neue","Arial";
--fonts-monospace: "SFMono-Regular","Menlo","Monaco","Consolas","Liberation Mono","Courier New",monospace,var(--fonts-emoji);
--fonts-emoji: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji","Twemoji Mozilla";
--fonts-regular: var(--fonts-override,var(--fonts-proportional)),"Noto Sans","Liberation Sans",var(--fonts-emoji),sans-serif;
}
2020-10-04 21:33:26 +03:00
body {
background: var(--body-bg-color);
font-family: var(--fonts-regular);
font-weight: var(--main-font-weight);
2020-10-04 21:33:26 +03:00
}
2020-10-24 20:08:53 +03:00
br {
display: block;
content: "";
margin-top: 2px;
}
.wave-background {
background-image: url(wave.svg);
background-size: 100% auto;
background-repeat: no-repeat;
2020-10-24 20:08:53 +03:00
}
2020-10-04 21:33:26 +03:00
.card {
margin: 25px auto;
padding: 20px;
background: var(--accent-bg-color);
border-radius: var(--card-border-radius);
box-shadow: 2px -2px 38px 1px rgba(0,0,0,0.59);
2020-10-04 21:33:26 +03:00
}
.card.layout-card {
width: var(--cards-length);
2020-10-04 21:33:26 +03:00
}
.navigation-buttons {
text-align: right;
}
.navigation-branding {
float: left;
}
.navigation-branding-text {
text-decoration: none;
display: inline-block;
padding: 8px;
font-size: 18px;
white-space: nowrap;
margin-left: 10px;
margin-right: 10px;
}
.noselect {
user-select: none;
}
2020-10-04 21:33:26 +03:00
.button-default {
display: inline-block;
2020-10-04 21:33:26 +03:00
text-decoration: none;
font-weight: 500;
border: none;
background-color: var(--accent-bg-color);
border-radius: var(--button-border-radius);
padding: 8px;
2020-10-04 22:13:08 +03:00
font-size: 18px;
2020-10-04 21:33:26 +03:00
white-space: nowrap;
margin-left: 10px;
margin-right: 10px;
color: var(--button-accent-color);
2020-10-04 22:13:08 +03:00
cursor: pointer;
2020-10-04 23:56:12 +03:00
outline: none;
2020-10-04 22:13:08 +03:00
}
2020-10-04 23:56:12 +03:00
.button-default:hover:not(.button-selected) {
color: var(--accent-bg-color);
background-color: var(--hover-bg-color);
}
2020-10-04 23:56:12 +03:00
.button-selected {
color: var(--accent-bg-color);
2020-10-18 21:41:14 +03:00
background-color: var(--selected-bg-color);
2020-10-04 22:13:08 +03:00
}
2020-10-05 00:21:51 +03:00
.input {
border: none;
outline: none;
border-radius: 2px;
padding: 3px;
2020-10-05 00:51:30 +03:00
margin: 8px;
}
@media screen and (max-width: 768px) {
.card.layout-card {
width: 80%;
}
}