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
508
crates/pinakes-ui/assets/styles/_sections.scss
Normal file
508
crates/pinakes-ui/assets/styles/_sections.scss
Normal file
|
|
@ -0,0 +1,508 @@
|
|||
@use 'variables' as *;
|
||||
@use 'mixins' as *;
|
||||
|
||||
// Statistics
|
||||
|
||||
.statistics-page {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.stats-overview,
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: $space-8;
|
||||
margin-bottom: $space-12;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: $bg-2;
|
||||
border: 1px solid $border;
|
||||
border-radius: $radius;
|
||||
padding: 20px;
|
||||
@include flex(row, flex-start, center, $space-8);
|
||||
|
||||
&.stat-primary {
|
||||
border-left: 3px solid $accent;
|
||||
}
|
||||
|
||||
&.stat-success {
|
||||
border-left: 3px solid $success;
|
||||
}
|
||||
|
||||
&.stat-info {
|
||||
border-left: 3px solid $type-document-text;
|
||||
}
|
||||
|
||||
&.stat-warning {
|
||||
border-left: 3px solid $warning;
|
||||
}
|
||||
|
||||
&.stat-purple {
|
||||
border-left: 3px solid $type-audio-text;
|
||||
}
|
||||
|
||||
&.stat-danger {
|
||||
border-left: 3px solid $error;
|
||||
}
|
||||
}
|
||||
|
||||
.stat-icon {
|
||||
flex-shrink: 0;
|
||||
color: $text-2;
|
||||
}
|
||||
|
||||
.stat-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: $font-size-6xl;
|
||||
font-weight: $font-weight-bold;
|
||||
color: $text-0;
|
||||
line-height: $line-height-tight;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: $font-size-md;
|
||||
color: $text-2;
|
||||
margin-top: $space-2;
|
||||
font-weight: $font-weight-medium;
|
||||
}
|
||||
|
||||
.stats-section {
|
||||
background: $bg-2;
|
||||
border: 1px solid $border;
|
||||
border-radius: $radius;
|
||||
padding: $space-8;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: $font-size-3xl;
|
||||
font-weight: $font-weight-semibold;
|
||||
color: $text-0;
|
||||
margin-bottom: 20px;
|
||||
|
||||
// Alternative smaller size used in some places
|
||||
&.small {
|
||||
font-size: $font-size-xl;
|
||||
margin-bottom: $space-6;
|
||||
padding-bottom: 6px;
|
||||
border-bottom: 1px solid $border-subtle;
|
||||
}
|
||||
}
|
||||
|
||||
// Chart bars
|
||||
|
||||
.chart-bars {
|
||||
@include flex(column, flex-start, stretch, $space-8);
|
||||
}
|
||||
|
||||
.bar-item {
|
||||
display: grid;
|
||||
grid-template-columns: 120px 1fr 80px;
|
||||
align-items: center;
|
||||
gap: $space-8;
|
||||
}
|
||||
|
||||
.bar-label {
|
||||
font-size: $font-size-lg;
|
||||
font-weight: $font-weight-medium;
|
||||
color: $text-1;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.bar-track {
|
||||
height: 28px;
|
||||
background: $bg-3;
|
||||
border-radius: $radius-sm;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bar-fill {
|
||||
height: 100%;
|
||||
transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border-radius: $radius-sm;
|
||||
|
||||
&.bar-primary {
|
||||
background: linear-gradient(90deg, $accent 0%, $gradient-accent-end 100%);
|
||||
}
|
||||
|
||||
&.bar-success {
|
||||
background: linear-gradient(90deg, $success 0%, $gradient-success-end 100%);
|
||||
}
|
||||
}
|
||||
|
||||
.bar-value {
|
||||
font-size: $font-size-lg;
|
||||
font-weight: $font-weight-semibold;
|
||||
color: $text-1;
|
||||
text-align: right;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
// Settings
|
||||
|
||||
.settings-section {
|
||||
margin-bottom: $space-8;
|
||||
}
|
||||
|
||||
.settings-card {
|
||||
background: $bg-2;
|
||||
border: 1px solid $border;
|
||||
border-radius: $radius-md;
|
||||
padding: 20px;
|
||||
margin-bottom: $space-8;
|
||||
|
||||
&.danger-card {
|
||||
border: 1px solid $error-border-light;
|
||||
}
|
||||
}
|
||||
|
||||
.settings-card-header {
|
||||
@include flex-between;
|
||||
margin-bottom: $space-8;
|
||||
padding-bottom: $space-6;
|
||||
border-bottom: 1px solid $border-subtle;
|
||||
}
|
||||
|
||||
.settings-card-title {
|
||||
font-size: $font-size-xl;
|
||||
font-weight: $font-weight-semibold;
|
||||
}
|
||||
|
||||
.settings-card-body {
|
||||
padding-top: $space-1;
|
||||
}
|
||||
|
||||
.settings-field {
|
||||
@include flex-between;
|
||||
padding: $space-4 0;
|
||||
border-bottom: 1px solid $border-subtle;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
select {
|
||||
min-width: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
// Config status
|
||||
|
||||
.config-path {
|
||||
font-size: $font-size-base;
|
||||
color: $text-2;
|
||||
margin-bottom: $space-6;
|
||||
font-family: $font-family-mono;
|
||||
padding: 6px $space-5;
|
||||
background: $bg-0;
|
||||
border-radius: $radius-sm;
|
||||
border: 1px solid $border-subtle;
|
||||
}
|
||||
|
||||
.config-status {
|
||||
@include flex(row, flex-start, center, 6px);
|
||||
padding: 3px $space-5;
|
||||
border-radius: 12px;
|
||||
font-size: $font-size-base;
|
||||
font-weight: $font-weight-semibold;
|
||||
|
||||
&.writable {
|
||||
background: $success-light;
|
||||
color: $success;
|
||||
}
|
||||
|
||||
&.readonly {
|
||||
background: $error-medium;
|
||||
color: $error;
|
||||
}
|
||||
}
|
||||
|
||||
// Root list
|
||||
|
||||
.root-list {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.root-item {
|
||||
@include flex-between;
|
||||
padding: $space-4 $space-6;
|
||||
background: $bg-0;
|
||||
border: 1px solid $border-subtle;
|
||||
border-radius: $radius-sm;
|
||||
margin-bottom: $space-2;
|
||||
font-family: $font-family-mono;
|
||||
font-size: $font-size-md;
|
||||
color: $text-1;
|
||||
}
|
||||
|
||||
// Info row
|
||||
|
||||
.info-row {
|
||||
@include flex-between;
|
||||
padding: 6px 0;
|
||||
border-bottom: 1px solid $border-subtle;
|
||||
font-size: $font-size-lg;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.info-label {
|
||||
color: $text-1;
|
||||
font-weight: $font-weight-medium;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
color: $text-0;
|
||||
}
|
||||
|
||||
// Tasks
|
||||
|
||||
.tasks-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
|
||||
gap: $space-8;
|
||||
padding: $space-6;
|
||||
}
|
||||
|
||||
.task-card {
|
||||
background: $bg-2;
|
||||
border: 1px solid $border;
|
||||
border-radius: $radius;
|
||||
overflow: hidden;
|
||||
transition: all $transition-slower;
|
||||
|
||||
&:hover {
|
||||
border-color: $border-strong;
|
||||
box-shadow: $shadow-card-hover;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
&-enabled {
|
||||
border-left: 3px solid $success;
|
||||
}
|
||||
|
||||
&-disabled {
|
||||
border-left: 3px solid $text-3;
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
.task-card-header {
|
||||
@include flex-between;
|
||||
align-items: flex-start;
|
||||
padding: $space-8;
|
||||
border-bottom: 1px solid $border-subtle;
|
||||
}
|
||||
|
||||
.task-header-left {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.task-name {
|
||||
font-size: $font-size-3xl;
|
||||
font-weight: $font-weight-semibold;
|
||||
color: $text-0;
|
||||
margin-bottom: $space-1;
|
||||
}
|
||||
|
||||
.task-schedule {
|
||||
@include flex(row, flex-start, center, 6px);
|
||||
font-size: $font-size-md;
|
||||
color: $text-2;
|
||||
font-family: $font-family-mono-alt;
|
||||
}
|
||||
|
||||
.schedule-icon {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.task-status-badge {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
@include flex(row, flex-start, center, 6px);
|
||||
padding: $space-1 10px;
|
||||
border-radius: $radius-sm;
|
||||
font-size: $font-size-sm;
|
||||
font-weight: $font-weight-semibold;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: $letter-spacing-wide;
|
||||
|
||||
&.status-enabled {
|
||||
background: $green-medium;
|
||||
color: $success;
|
||||
|
||||
.status-dot {
|
||||
animation: pulse 1.5s infinite;
|
||||
}
|
||||
}
|
||||
|
||||
&.status-disabled {
|
||||
background: $bg-3;
|
||||
color: $text-2;
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
@include status-dot;
|
||||
background: currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
.task-info-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
|
||||
gap: $space-6;
|
||||
padding: $space-8;
|
||||
}
|
||||
|
||||
.task-info-item {
|
||||
@include flex(row, flex-start, flex-start, 10px);
|
||||
}
|
||||
|
||||
.task-info-icon {
|
||||
font-size: 18px;
|
||||
color: $text-2;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.task-info-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.task-info-label {
|
||||
font-size: $font-size-sm;
|
||||
color: $text-2;
|
||||
font-weight: $font-weight-semibold;
|
||||
@include text-uppercase($letter-spacing-wide);
|
||||
margin-bottom: $space-1;
|
||||
}
|
||||
|
||||
.task-info-value {
|
||||
font-size: $font-size-md;
|
||||
color: $text-1;
|
||||
font-weight: $font-weight-medium;
|
||||
@include text-truncate;
|
||||
}
|
||||
|
||||
.task-card-actions {
|
||||
display: flex;
|
||||
gap: $space-4;
|
||||
padding: $space-5 $space-8;
|
||||
background: $bg-1;
|
||||
border-top: 1px solid $border-subtle;
|
||||
|
||||
button {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Database actions
|
||||
|
||||
.db-actions {
|
||||
@include flex(column, flex-start, stretch, $space-8);
|
||||
padding: $space-5;
|
||||
}
|
||||
|
||||
.db-action-row {
|
||||
@include flex(row, space-between, center, $space-8);
|
||||
padding: $space-5;
|
||||
border-radius: 6px;
|
||||
background: $overlay-inverse-light;
|
||||
}
|
||||
|
||||
.db-action-info {
|
||||
flex: 1;
|
||||
|
||||
h4 {
|
||||
font-size: 0.95rem;
|
||||
font-weight: $font-weight-semibold;
|
||||
color: $text-0;
|
||||
margin-bottom: $space-1;
|
||||
}
|
||||
}
|
||||
|
||||
.db-action-confirm {
|
||||
@include flex(row, flex-start, center, $space-4);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
// Library page
|
||||
|
||||
.library-toolbar {
|
||||
@include flex-between;
|
||||
padding: $space-4 0;
|
||||
margin-bottom: $space-6;
|
||||
gap: $space-6;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.toolbar-left {
|
||||
@include flex(row, flex-start, center, $space-5);
|
||||
}
|
||||
|
||||
.toolbar-right {
|
||||
@include flex(row, flex-start, center, $space-5);
|
||||
}
|
||||
|
||||
.sort-control,
|
||||
.page-size-control {
|
||||
select {
|
||||
padding: $space-2 24px $space-2 $space-4;
|
||||
font-size: $font-size-base;
|
||||
background: $bg-2;
|
||||
}
|
||||
}
|
||||
|
||||
.page-size-control {
|
||||
@include flex(row, flex-start, center, $space-2);
|
||||
}
|
||||
|
||||
.library-stats {
|
||||
@include flex-between;
|
||||
padding: $space-1 0 6px 0;
|
||||
font-size: $font-size-base;
|
||||
}
|
||||
|
||||
.type-filter-row {
|
||||
@include flex(row, flex-start, center, 6px);
|
||||
padding: $space-2 0;
|
||||
margin-bottom: 6px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
// Pagination
|
||||
|
||||
.pagination {
|
||||
@include flex-center;
|
||||
gap: $space-2;
|
||||
margin-top: $space-8;
|
||||
padding: $space-4 0;
|
||||
}
|
||||
|
||||
.page-btn {
|
||||
min-width: 28px;
|
||||
text-align: center;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.page-ellipsis {
|
||||
color: $text-2;
|
||||
padding: 0 $space-2;
|
||||
font-size: $font-size-md;
|
||||
user-select: none;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue