txtdot/static/common.css
Artemy Egorov 3b5f402d77
Interface improvements (#74)
* fix: interface style improvements

and components in ejs templates

* fix: improvement of improvements

* Redesign: kind of MD3

* Working url/search switch

* formatting

* Add switch animation, adjust sizes, adjust btn colors, rename bg2 to outline

* Format

---------

Co-authored-by: DarkCat09 <gh@dc09.ru>
2024-02-14 10:23:13 +03:00

97 lines
1.3 KiB
CSS

* {
box-sizing: border-box;
}
:root {
--bg: #fdfbff;
--fg: #1a1c1e;
--outline: #74777f;
--accent: #255fa4;
--accent-hl: #003060;
--btn-hl: #4178c1;
--btn2-hl: rgba(189, 199, 220, 0.5);
--error: #ff897d;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #1a1c1e;
--fg: #e3e2e6;
--outline: #8e9199;
--accent: #a6c8ff;
--accent-hl: #d6e3ff;
--btn-hl: #79adf9;
--btn2-hl: rgba(189, 199, 220, 0.2);
--error: #ffb4ab;
}
}
body {
margin: 0;
padding: 0.5rem;
background: var(--bg);
color: var(--fg);
font-family: 'Noto Sans', 'Cantarell', 'Roboto', system-ui, sans-serif;
font-size: 1.1rem;
}
main {
max-width: 50rem;
width: 100%;
margin: auto;
}
.menu {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 0.375rem;
align-items: flex-start;
}
.button {
padding: 0.25rem 1rem;
border: none;
border-radius: 1rem;
background: var(--accent);
color: var(--bg);
text-decoration: none;
font-size: 1rem;
cursor: pointer;
transition: background-color 0.15s ease-out;
}
.button:hover {
background: var(--btn-hl);
}
.button.secondary {
background: var(--bg);
color: var(--fg);
border: 1px solid var(--outline);
}
.button.secondary:hover {
background: var(--btn2-hl);
}
a {
text-decoration: none;
}