External/fredy
1
0
Fork 0
mirror of https://github.com/orangecoding/fredy.git synced 2026-06-16 12:31:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Fredy UI redesign

Browse Source 
* New design :)
This commit is contained in:
Christian Kellner
2026-04-22 21:11:18 +02:00
committed by GitHub
parent c78472bd19
commit f30ec4645c
43 changed files with 4004 additions and 794 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
ui/src/Index.less
View File

@@ -1,16 +1,110 @@
@import './tokens.less';
body,
html {
margin: 0;
height: 100%;
width: 100%;
background-color: #232429;
font-family: @font-ui;
background-color: @color-base;
background-image: radial-gradient(ellipse at 60% 0%, rgba(224,74,56,0.05) 0%, transparent 55%);
background-attachment: fixed;
}
@media (max-width: 768px) {
body, html {
background-attachment: scroll;
}
}
// Semi UI theme overrides
body {
--semi-color-bg-0: @color-base !important;
--semi-color-bg-1: @color-surface !important;
--semi-color-bg-2: @color-elevated !important;
--semi-color-bg-3: @color-border !important;
--semi-color-border: @color-border !important;
--semi-color-primary: @color-accent !important;
--semi-color-primary-hover: @color-accent-dim !important;
--semi-color-primary-active: @color-accent-dim !important;
--semi-color-primary-light-default: rgba(224,74,56,0.12) !important;
--semi-color-primary-light-hover: rgba(224,74,56,0.18) !important;
--semi-color-primary-light-active: rgba(224,74,56,0.22) !important;
--semi-color-text-0: @color-text !important;
--semi-color-text-1: @color-text !important;
--semi-color-text-2: @color-muted !important;
--semi-color-text-3: @color-faint !important;
--semi-color-fill-0: rgba(255,255,255,0.04) !important;
--semi-color-fill-1: rgba(255,255,255,0.06) !important;
--semi-color-fill-2: rgba(255,255,255,0.08) !important;
--semi-font-family: @font-ui !important;
}
// Semi table row overrides
.semi-table-row-head {
background-color: #2b2b2b !important;
color: #fff !important;
background-color: rgba(255,255,255,0.06) !important;
}
.semi-table-row-head .semi-table-row-cell {
background-color: rgba(255,255,255,0.06) !important;
color: @color-muted !important;
font-size: @text-xs;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.semi-table-row-cell {
background-color: @color-surface !important;
}
.semi-table-tbody .semi-table-row:nth-child(even) .semi-table-row-cell {
background-color: @color-base !important;
}
.semi-table-tbody .semi-table-row:hover .semi-table-row-cell {
background-color: @color-elevated !important;
}
.semi-table-row-cell {
background-color: #333333 !important;
// Scrollbar
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: @color-surface; }
::-webkit-scrollbar-thumb { background: @color-border-bright; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: @color-muted; }
.semi-icon:not(.semi-tabs-bar .semi-tabs-tab .semi-icon):not(.semi-checkbox .semi-icon) {
vertical-align: middle;
}
// Suppress focus outlines — Semi uses --semi-color-primary (our red) for all rings
button:focus,
button:focus-visible,
.semi-button:focus,
.semi-button:focus-visible,
.semi-input-wrapper:focus-within,
.semi-select:focus-within,
[tabindex]:focus {
outline: none !important;
box-shadow: none !important;
}
.semi-input-wrapper-focus {
border-color: @color-border-bright !important;
box-shadow: none !important;
}
// Semi Modal dark theme overrides
.semi-modal-content {
background: #161616 !important;
border: 1px solid @color-border !important;
border-top: 3px solid @color-accent !important;
border-radius: 14px !important;
}
.semi-modal-header {
background: transparent !important;
border-bottom: 1px solid @color-border !important;
border-radius: 14px 14px 0 0 !important;
padding: 20px 24px 16px !important;
}
.semi-modal-mask {
background: rgba(0,0,0,0.7) !important;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}