treewide: fix various UI bugs; optimize crypto dependencies & format
Signed-off-by: NotAShelf <raf@notashelf.dev> Change-Id: If8fe8b38c1d9c4fecd40ff71f88d2ae06a6a6964
This commit is contained in:
parent
764aafa88d
commit
3ccddce7fd
GPG key ID:
29D95B64378DB4BF
178 changed files with 58342 additions and 54241 deletions
344
crates/pinakes-ui/assets/styles/_layout.scss
Normal file
344
crates/pinakes-ui/assets/styles/_layout.scss
Normal file
|
|
@ -0,0 +1,344 @@
|
|||
@use 'variables' as *;
|
||||
@use 'mixins' as *;
|
||||
|
||||
// App layout
|
||||
|
||||
.app {
|
||||
@include flex(row, flex-start, stretch);
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// Sidebar
|
||||
|
||||
.sidebar {
|
||||
width: $sidebar-width;
|
||||
min-width: $sidebar-width;
|
||||
max-width: $sidebar-width;
|
||||
background: $bg-1;
|
||||
border-right: 1px solid $border;
|
||||
@include flex(column);
|
||||
flex-shrink: 0;
|
||||
user-select: none;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
z-index: $z-dropdown;
|
||||
transition: width $transition-slow, min-width $transition-slow,
|
||||
max-width $transition-slow;
|
||||
|
||||
&.collapsed {
|
||||
width: $sidebar-collapsed-width;
|
||||
min-width: $sidebar-collapsed-width;
|
||||
max-width: $sidebar-collapsed-width;
|
||||
|
||||
.nav-label,
|
||||
.sidebar-header .logo,
|
||||
.sidebar-header .version,
|
||||
.nav-badge,
|
||||
.nav-item-text,
|
||||
.sidebar-footer .status-text,
|
||||
.user-name,
|
||||
.role-badge,
|
||||
.user-info .btn,
|
||||
.sidebar-import-header span,
|
||||
.sidebar-import-file {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
justify-content: center;
|
||||
padding: $space-4;
|
||||
border-left: none;
|
||||
border-radius: $radius-sm;
|
||||
|
||||
&.active {
|
||||
border-left: none;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
width: auto;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
padding: 12px $space-4;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.nav-section {
|
||||
padding: 0 $space-2;
|
||||
}
|
||||
|
||||
.sidebar-footer {
|
||||
padding: $space-4;
|
||||
|
||||
.user-info {
|
||||
justify-content: center;
|
||||
padding: $space-2;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-import-progress {
|
||||
padding: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
padding: $space-8 $space-8 20px;
|
||||
@include flex(row, flex-start, baseline, $space-4);
|
||||
|
||||
.logo {
|
||||
font-size: $font-size-2xl;
|
||||
font-weight: $font-weight-bold;
|
||||
letter-spacing: $letter-spacing-tight;
|
||||
color: $text-0;
|
||||
}
|
||||
|
||||
.version {
|
||||
font-size: $font-size-sm;
|
||||
color: $text-2;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-toggle {
|
||||
@include button-ghost;
|
||||
color: $text-2;
|
||||
padding: $space-4;
|
||||
font-size: $font-size-4xl;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
|
||||
&:hover {
|
||||
color: $text-0;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-spacer {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.sidebar-footer {
|
||||
padding: $space-6;
|
||||
border-top: 1px solid $border-subtle;
|
||||
overflow: visible;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
// Navigation
|
||||
|
||||
.nav-section {
|
||||
padding: 0 $space-4;
|
||||
margin-bottom: $space-1;
|
||||
}
|
||||
|
||||
.nav-label {
|
||||
padding: $space-4 $space-4 $space-2;
|
||||
font-size: $font-size-sm;
|
||||
font-weight: $font-weight-semibold;
|
||||
@include text-uppercase;
|
||||
color: $text-2;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
@include flex(row, flex-start, center, $space-4);
|
||||
padding: 6px $space-4;
|
||||
border-radius: $radius-sm;
|
||||
cursor: pointer;
|
||||
color: $text-1;
|
||||
font-size: $font-size-lg;
|
||||
font-weight: 450;
|
||||
transition: color $transition-base, background $transition-base;
|
||||
border: none;
|
||||
background: none;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
border-left: 2px solid transparent;
|
||||
margin-left: 0;
|
||||
|
||||
&:hover {
|
||||
color: $text-0;
|
||||
background: $overlay-light;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $accent-text;
|
||||
border-left-color: $accent;
|
||||
background: $accent-dim;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-item-text {
|
||||
flex: 1;
|
||||
@include text-truncate;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.sidebar:not(.collapsed) .nav-item-text {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
width: 18px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.nav-badge {
|
||||
margin-left: auto;
|
||||
font-size: $font-size-sm;
|
||||
font-weight: $font-weight-semibold;
|
||||
color: $text-2;
|
||||
background: $bg-3;
|
||||
padding: 1px $space-3;
|
||||
border-radius: $radius-xl;
|
||||
min-width: 20px;
|
||||
text-align: center;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
// Status indicator
|
||||
|
||||
.status-indicator {
|
||||
@include flex(row, center, center, 6px);
|
||||
font-size: $font-size-base;
|
||||
font-weight: $font-weight-medium;
|
||||
min-width: 0;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.sidebar:not(.collapsed) .status-indicator {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
@include status-dot;
|
||||
|
||||
&.connected {
|
||||
background: $success;
|
||||
}
|
||||
|
||||
&.disconnected {
|
||||
background: $error;
|
||||
}
|
||||
|
||||
&.checking {
|
||||
background: $warning;
|
||||
@include pulse;
|
||||
}
|
||||
}
|
||||
|
||||
.status-text {
|
||||
color: $text-2;
|
||||
@include text-truncate;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.sidebar:not(.collapsed) .status-text {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
// Main content
|
||||
|
||||
.main {
|
||||
flex: 1;
|
||||
@include flex(column);
|
||||
overflow: hidden;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.header {
|
||||
height: $header-height;
|
||||
min-height: $header-height;
|
||||
border-bottom: 1px solid $border-subtle;
|
||||
@include flex(row, flex-start, center, 12px);
|
||||
padding: 0 20px;
|
||||
background: $bg-1;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: $font-size-xl;
|
||||
font-weight: $font-weight-semibold;
|
||||
color: $text-0;
|
||||
}
|
||||
|
||||
.header-spacer {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 20px;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: $overlay-strong transparent;
|
||||
}
|
||||
|
||||
// Import progress
|
||||
|
||||
.sidebar-import-progress {
|
||||
padding: $space-5 $space-6;
|
||||
background: $bg-2;
|
||||
border-top: 1px solid $border-subtle;
|
||||
font-size: $font-size-base;
|
||||
}
|
||||
|
||||
.sidebar-import-header {
|
||||
@include flex(row, flex-start, center, 6px);
|
||||
margin-bottom: $space-2;
|
||||
color: $text-1;
|
||||
}
|
||||
|
||||
.sidebar-import-file {
|
||||
color: $text-2;
|
||||
font-size: $font-size-sm;
|
||||
@include text-truncate;
|
||||
margin-bottom: $space-2;
|
||||
}
|
||||
|
||||
.sidebar-import-progress .progress-bar {
|
||||
height: 3px;
|
||||
}
|
||||
|
||||
// User info
|
||||
|
||||
.user-info {
|
||||
@include flex(row, flex-start, center, 6px);
|
||||
font-size: $font-size-md;
|
||||
overflow: hidden;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
font-weight: $font-weight-medium;
|
||||
color: $text-0;
|
||||
@include text-truncate;
|
||||
max-width: 90px;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
|
||||
.role-badge {
|
||||
display: inline-block;
|
||||
padding: 1px $space-3;
|
||||
border-radius: $radius-sm;
|
||||
font-size: $font-size-sm;
|
||||
font-weight: $font-weight-semibold;
|
||||
text-transform: uppercase;
|
||||
|
||||
&.role-admin {
|
||||
background: $role-admin-bg;
|
||||
color: $role-admin-text;
|
||||
}
|
||||
|
||||
&.role-editor {
|
||||
background: $role-editor-bg;
|
||||
color: $role-editor-text;
|
||||
}
|
||||
|
||||
&.role-viewer {
|
||||
background: $role-viewer-bg;
|
||||
color: $role-viewer-text;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue