Janus007/PlanTempusApp
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

WIP

Browse source
This commit is contained in:
Janus C. H. Knudsen 2026-01-10 20:39:17 +01:00
parent 54b057886c
commit 7fc1ae0650
204 changed files with 4345 additions and 134 deletions
Download patch file Download diff file Expand all files Collapse all files

258
PlanTempus.Application/wwwroot/css/drawers.css Normal file
View file

@ -0,0 +1,258 @@
/**
* Drawers - Slide-in Panels
*
* Profile drawer, notifications drawer, etc.
*/
/* ===========================================
BASE DRAWER
=========================================== */
swp-profile-drawer,
swp-notification-drawer,
swp-todo-drawer {
position: fixed;
top: 0;
right: 0;
width: 320px;
height: 100vh;
background: var(--color-surface);
border-left: 1px solid var(--color-border);
box-shadow: var(--shadow-lg);
z-index: var(--z-drawer);
display: flex;
flex-direction: column;
transform: translateX(100%);
transition: transform var(--transition-normal);
}
swp-profile-drawer.active,
swp-notification-drawer.active,
swp-todo-drawer.active {
transform: translateX(0);
}
/* ===========================================
DRAWER HEADER
=========================================== */
swp-drawer-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--spacing-4) var(--spacing-5);
border-bottom: 1px solid var(--color-border);
flex-shrink: 0;
}
swp-drawer-title {
font-size: var(--font-size-lg);
font-weight: 600;
color: var(--color-text);
}
swp-drawer-close {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border: none;
background: transparent;
border-radius: var(--border-radius);
cursor: pointer;
color: var(--color-text-secondary);
transition: all var(--transition-fast);
}
swp-drawer-close:hover {
background: var(--color-background-hover);
color: var(--color-text);
}
swp-drawer-close i {
font-size: 20px;
}
/* ===========================================
DRAWER CONTENT
=========================================== */
swp-drawer-content {
flex: 1;
overflow-y: auto;
padding: var(--spacing-5);
}
swp-drawer-divider {
height: 1px;
background: var(--color-border);
margin: var(--spacing-4) 0;
}
/* ===========================================
PROFILE SECTION
=========================================== */
swp-profile-section {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: var(--spacing-4) 0;
}
swp-profile-avatar-large {
width: 64px;
height: 64px;
border-radius: 50%;
background: var(--color-teal);
color: white;
font-size: 24px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--spacing-3);
}
swp-profile-name-large {
font-size: var(--font-size-lg);
font-weight: 600;
color: var(--color-text);
margin-bottom: var(--spacing-1);
}
swp-profile-email {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
}
/* ===========================================
DRAWER MENU
=========================================== */
swp-drawer-menu {
display: flex;
flex-direction: column;
gap: var(--spacing-1);
}
swp-drawer-menu-item {
display: flex;
align-items: center;
gap: var(--spacing-3);
padding: var(--spacing-3) var(--spacing-3);
border-radius: var(--border-radius);
cursor: pointer;
transition: background var(--transition-fast);
color: var(--color-text);
}
swp-drawer-menu-item:hover {
background: var(--color-background-hover);
}
swp-drawer-menu-item i {
font-size: 20px;
color: var(--color-text-secondary);
}
/* ===========================================
THEME TOGGLE
=========================================== */
swp-theme-toggle {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--spacing-3);
border-radius: var(--border-radius);
background: var(--color-background);
}
swp-theme-label {
display: flex;
align-items: center;
gap: var(--spacing-3);
color: var(--color-text);
}
swp-theme-label i {
font-size: 20px;
color: var(--color-text-secondary);
}
swp-toggle-switch {
position: relative;
width: 44px;
height: 24px;
}
swp-toggle-switch input {
opacity: 0;
width: 0;
height: 0;
}
swp-toggle-slider {
position: absolute;
cursor: pointer;
inset: 0;
background: var(--color-border);
border-radius: 12px;
transition: background var(--transition-fast);
}
swp-toggle-slider::before {
content: '';
position: absolute;
width: 18px;
height: 18px;
left: 3px;
bottom: 3px;
background: white;
border-radius: 50%;
transition: transform var(--transition-fast);
}
swp-toggle-switch input:checked + swp-toggle-slider {
background: var(--color-teal);
}
swp-toggle-switch input:checked + swp-toggle-slider::before {
transform: translateX(20px);
}
/* ===========================================
DRAWER FOOTER
=========================================== */
swp-drawer-footer {
padding: var(--spacing-4) var(--spacing-5);
border-top: 1px solid var(--color-border);
flex-shrink: 0;
}
swp-drawer-action {
display: flex;
align-items: center;
justify-content: center;
gap: var(--spacing-2);
width: 100%;
padding: var(--spacing-3);
font-size: var(--font-size-base);
font-family: var(--font-family);
color: var(--color-text-secondary);
background: transparent;
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
cursor: pointer;
transition: all var(--transition-fast);
}
swp-drawer-action:hover {
background: var(--color-background-hover);
}
swp-drawer-action.logout:hover {
color: var(--color-red);
border-color: var(--color-red);
}
swp-drawer-action i {
font-size: 18px;
}