winnie-http/htdocs/assets/css/style.css

98 lines
2.4 KiB
CSS
Raw Permalink Normal View History

2024-06-07 19:07:05 +07:00
:root {
color-scheme:light dark;
2024-06-07 19:07:05 +07:00
--light-bg-color: #fafafa;
--light-fg-color: rgba(0, 0, 0, 0.8);
--light-nav-bg-color: #ffffff;
--light-nav-fg-color: rgba(0, 0, 0, 0.8);
--light-nav-border-color: rgba(0, 0, 0, 0.8);
--light-nav-backdrop-color: #fafafa;
--light-nav-shade-color: rgba(0, 0, 0, 0.12);
--light-nav-darker-shade-color: rgba(0, 0, 0, 0.12);
--light-card-bg-color: #ffffff;
--light-card-fg-color: rgba(0, 0, 0, 0.8);
--light-card-shade-color: rgba(0, 0, 0, 0.20);
--dark-bg-color: #242424;
--dark-fg-color: #ffffff;
--dark-nav-bg-color: #303030;
--dark-nav-fg-color: #ffffff;
--dark-nav-border-color: #ffffff;
--dark-nav-backdrop-color: #242424;
--dark-nav-shade-color: rgba(0, 0, 0, 0.36);
--dark-nav-darker-shade-color: rgba(0, 0, 0, 0.9);
--dark-card-bg-color: rgba(255, 255, 255, 0.08);
--dark-card-fg-color: #ffffff;
--dark-card-shade-color: rgba(0, 0, 0, 0.36)
2024-06-07 19:07:05 +07:00
}
@font-face {
font-family: Inter;
font-weight: 400 800;
src: url("../fonts/Inter-VariableFont.ttf");
2024-06-07 19:07:05 +07:00
}
* {
font-family: Inter;
font-weight: 500;
2024-06-07 19:07:05 +07:00
}
html, body {
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: light-dark(var(--light-bg-color),var(--dark-bg-color));
2024-06-07 19:07:05 +07:00
}
h1, h2, h3, h4, h5, h6 {
font-weight: 800;
2024-06-07 19:07:05 +07:00
margin: 0;
padding: 0;
}
hr {
2024-06-07 19:07:05 +07:00
width: 100%;
border: 0;
height: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
2024-06-07 19:07:05 +07:00
}
code {
font-family: 'Courier New', Courier, monospace;
background-color: light-dark(var(--light-nav-backdrop-color), var(--dark-nav-backdrop-color));
padding: 5px;
border-radius: 5px;
2024-06-07 19:07:05 +07:00
}
.container {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
2024-06-07 19:07:05 +07:00
}
.content {
2024-06-07 19:07:05 +07:00
display: grid;
gap: 1rem;
color: light-dark(var(--light-card-fg-color),var(--dark-card-fg-color));
background-color: light-dark(var(--light-card-bg-color),var(--dark-card-bg-color));
box-shadow: 0px 0px 100px 0 light-dark(var(--light-card-shade-color),var(--dark-card-shade-color));
2024-06-07 19:07:05 +07:00
margin: 1.5rem;
padding: 3rem;
border-radius: 1.5rem;
2024-06-07 19:07:05 +07:00
}
#content_header_section {
display: grid;
gap: 1rem;
justify-items: center;
2024-06-07 19:07:05 +07:00
}
#content_files_section, #content_limit_section {
display: grid;
2024-06-07 19:07:05 +07:00
}
.content h1 {
font-size: calc(45px + 0.5vw);
2024-06-07 19:07:05 +07:00
}