css reducion
This commit is contained in:
bronkuu
parent
5f156ab6a0
commit
b8cf13b7d5
20 changed files with 1603 additions and 1677 deletions
|
|
@ -1,361 +1,239 @@
|
|||
/* ========== SIDEBAR ========== */
|
||||
aside.sidebar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: var(--sidebar-width);
|
||||
background: var(--surface-container-lowest);
|
||||
border-right: 1px solid var(--outline-variant);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 1rem;
|
||||
z-index: 40;
|
||||
transition: width 0.2s ease, padding 0.2s ease;
|
||||
|
||||
.brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
padding: 0 0.5rem;
|
||||
|
||||
.collapse-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: var(--on-surface-variant);
|
||||
padding: 0.25rem;
|
||||
border-radius: var(--border-radius-sm);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
|
||||
&:hover {
|
||||
background: var(--surface-container-high);
|
||||
color: var(--on-surface);
|
||||
}
|
||||
|
||||
.material-symbols-outlined {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.brand-text {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
|
||||
h1 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
color: var(--primary);
|
||||
letter-spacing: -0.01em;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 0.75rem;
|
||||
color: var(--on-surface-variant);
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cta {
|
||||
width: 100%;
|
||||
height: 2.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
background: var(--primary);
|
||||
color: var(--on-primary);
|
||||
border: none;
|
||||
border-radius: var(--border-radius-md);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.02em;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
margin-bottom: 1.5rem;
|
||||
transition: opacity var(--transition);
|
||||
|
||||
&:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.material-symbols-outlined {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
nav {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
|
||||
a.link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: var(--border-radius-md);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
color: var(--on-surface-variant);
|
||||
transition: all var(--transition);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: var(--surface-container-low);
|
||||
color: var(--on-surface);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: var(--primary-container);
|
||||
color: var(--primary);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.material-symbols-outlined {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: auto;
|
||||
padding-top: 1rem;
|
||||
border-top: 1px solid var(--outline-variant);
|
||||
|
||||
.user {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.5rem;
|
||||
margin-top: 0.75rem;
|
||||
|
||||
.avatar {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border-radius: 50%;
|
||||
background: var(--surface-container-high);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--on-surface);
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.name {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: var(--on-surface);
|
||||
}
|
||||
|
||||
.status {
|
||||
font-size: 0.75rem;
|
||||
color: var(--on-surface-variant);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
body {
|
||||
display: grid;
|
||||
grid-template-columns: var(--sidebar-w) 1fr;
|
||||
grid-template-rows: var(--topnav-h) 1fr;
|
||||
grid-template-areas:
|
||||
"sidebar topnav"
|
||||
"sidebar main";
|
||||
height: 100dvh;
|
||||
}
|
||||
|
||||
/* ---------- COLLAPSED ---------- */
|
||||
body.sidebar-collapsed aside.sidebar {
|
||||
width: 3.5rem;
|
||||
padding: 0.5rem;
|
||||
|
||||
.brand .brand-text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cta {
|
||||
padding: 0;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
border-radius: 50%;
|
||||
|
||||
span:not(.material-symbols-outlined) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
nav a.link {
|
||||
justify-content: center;
|
||||
padding: 0.75rem 0.5rem;
|
||||
|
||||
span:not(.material-symbols-outlined) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
footer .user .info {
|
||||
display: none;
|
||||
}
|
||||
body.sidebar-collapsed {
|
||||
grid-template-columns: var(--sidebar-w-collapsed) 1fr;
|
||||
}
|
||||
|
||||
body.sidebar-collapsed main {
|
||||
margin-left: 3.5rem;
|
||||
width: calc(100% - 3.5rem);
|
||||
/* ===== Sidebar ===== */
|
||||
aside {
|
||||
grid-area: sidebar;
|
||||
background: var(--surface-white);
|
||||
border-right: 1px solid var(--outline-dim);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: var(--space-md);
|
||||
gap: var(--space-sm);
|
||||
overflow: hidden;
|
||||
z-index: 40;
|
||||
transition: width 0.2s ease, padding 0.2s ease;
|
||||
}
|
||||
|
||||
/* ========== MAIN LAYOUT ========== */
|
||||
aside > .collapse-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: var(--on-surface-dim);
|
||||
padding: var(--space-xs);
|
||||
border-radius: var(--radius-sm);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
aside > .collapse-btn:hover {
|
||||
background: var(--surface-highest);
|
||||
color: var(--on-surface);
|
||||
}
|
||||
|
||||
aside > .cta {
|
||||
width: 100%;
|
||||
height: 2.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--space-sm);
|
||||
background: var(--primary);
|
||||
color: var(--on-primary);
|
||||
border: none;
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
transition: opacity var(--transition);
|
||||
}
|
||||
|
||||
aside > .cta:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
aside > nav {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-xs);
|
||||
}
|
||||
|
||||
aside > nav > a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-sm);
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
color: var(--on-surface-dim);
|
||||
transition: all var(--transition);
|
||||
}
|
||||
|
||||
aside > nav > a:hover {
|
||||
background: var(--surface-low);
|
||||
color: var(--on-surface);
|
||||
}
|
||||
|
||||
aside > nav > a.active {
|
||||
background: var(--primary-container);
|
||||
color: var(--primary);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
body.sidebar-collapsed aside {
|
||||
width: var(--sidebar-w-collapsed);
|
||||
padding: var(--space-xs);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
body.sidebar-collapsed aside > .cta {
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
padding: 0;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
body.sidebar-collapsed aside > .cta span:not(.material-symbols-outlined) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body.sidebar-collapsed aside > nav > a {
|
||||
justify-content: center;
|
||||
padding: var(--space-sm);
|
||||
}
|
||||
|
||||
body.sidebar-collapsed aside > nav > a span:not(.material-symbols-outlined) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ===== Topnav ===== */
|
||||
.topnav {
|
||||
grid-area: topnav;
|
||||
border-bottom: 1px solid var(--outline-dim);
|
||||
background: var(--surface);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-lg);
|
||||
padding: 0 var(--space-lg);
|
||||
flex-shrink: 0;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 30;
|
||||
}
|
||||
|
||||
.topnav > h1 {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.topnav > .search {
|
||||
position: relative;
|
||||
width: 15rem;
|
||||
}
|
||||
|
||||
.topnav > .search input {
|
||||
height: 2rem;
|
||||
padding-left: 2rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.topnav > .search .material-symbols-outlined {
|
||||
position: absolute;
|
||||
left: var(--space-sm);
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
font-size: 1.25rem;
|
||||
color: var(--on-surface-dim);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* ===== Main ===== */
|
||||
main {
|
||||
margin-left: var(--sidebar-width);
|
||||
width: calc(100% - var(--sidebar-width));
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100dvh;
|
||||
transition: margin-left 0.2s ease, width 0.2s ease;
|
||||
grid-area: main;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* ========== TOP NAVBAR ========== */
|
||||
header.topnav {
|
||||
height: var(--topnav-height);
|
||||
border-bottom: 1px solid var(--outline-variant);
|
||||
background: var(--surface);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1.5rem;
|
||||
padding: 0 1.5rem;
|
||||
flex-shrink: 0;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 30;
|
||||
|
||||
h1 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
color: var(--on-surface);
|
||||
letter-spacing: -0.01em;
|
||||
white-space: nowrap;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
search {
|
||||
position: relative;
|
||||
width: 15rem;
|
||||
|
||||
.material-symbols-outlined {
|
||||
position: absolute;
|
||||
left: 0.5rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
font-size: 1.25rem;
|
||||
color: var(--on-surface-variant);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 0.5rem 0 2rem;
|
||||
border: 1px solid var(--outline-variant);
|
||||
border-radius: var(--border-radius-sm);
|
||||
background: var(--surface-container-lowest);
|
||||
font-size: 0.75rem;
|
||||
color: var(--on-surface);
|
||||
outline: none;
|
||||
transition: border-color var(--transition);
|
||||
|
||||
&:focus {
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: var(--on-surface-variant);
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== MAIN CONTENT ========== */
|
||||
.main-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
padding: var(--space-md);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-md);
|
||||
min-height: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* ========== RESPONSIVE ========== */
|
||||
/* ===== Responsive ===== */
|
||||
@media (max-width: 64em) {
|
||||
header.topnav search {
|
||||
width: 10rem;
|
||||
}
|
||||
.topnav > .search {
|
||||
width: 10rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 48em) {
|
||||
body:not(.sidebar-collapsed) aside.sidebar {
|
||||
width: 3.5rem;
|
||||
padding: 0.5rem;
|
||||
aside {
|
||||
width: var(--sidebar-w-collapsed);
|
||||
padding: var(--space-xs);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.brand .brand-text,
|
||||
.cta span:not(.material-symbols-outlined),
|
||||
nav a.link span:not(.material-symbols-outlined),
|
||||
.user .info {
|
||||
display: none;
|
||||
}
|
||||
aside > .cta {
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
padding: 0;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.cta {
|
||||
padding: 0;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
margin: 0 auto 1rem;
|
||||
border-radius: 50%;
|
||||
}
|
||||
aside > .cta span:not(.material-symbols-outlined) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
nav a.link {
|
||||
justify-content: center;
|
||||
padding: 0.75rem 0.5rem;
|
||||
}
|
||||
aside > nav > a {
|
||||
justify-content: center;
|
||||
padding: var(--space-sm);
|
||||
}
|
||||
|
||||
.user {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
aside > nav > a span:not(.material-symbols-outlined) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body.sidebar-collapsed aside.sidebar {
|
||||
width: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
border-right: none;
|
||||
}
|
||||
body.sidebar-collapsed aside {
|
||||
width: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
body.sidebar-collapsed main {
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
body.sidebar-collapsed {
|
||||
grid-template-columns: 0 1fr;
|
||||
}
|
||||
|
||||
main {
|
||||
margin-left: 3.5rem;
|
||||
width: calc(100% - 3.5rem);
|
||||
}
|
||||
.topnav {
|
||||
padding: 0 var(--space-sm);
|
||||
}
|
||||
|
||||
header.topnav {
|
||||
padding: 0 0.75rem;
|
||||
.topnav > .search {
|
||||
display: none;
|
||||
}
|
||||
|
||||
search {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.main-content {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
.main-content {
|
||||
padding: var(--space-sm);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue