faa09bd2bf
* feat: desktop revamp * feat: refactor system monitor * fix linter CI * remove unused import component * added responsive and resizeable component * responsive and resizeable local server page * finalize responsive and resizeable component * fix scroll custom ui * remove react scroll to bottom from modal troubleshoot * fix modal troubleshoot ui * fix setting gpu list * text area custom scroll bar * fix padding message input * cleanup classname * update inference engine model dropdown * update loader style * update quick ask ui * prepare theme provider * update dark theme * remove update hotkey list model and navigation * fix: cleanup hardcode classname * fix: update feedback * Set native theme electron * update destop ui revamp from feedback * update button icon component insider icon chat input message * update model dropdown ui * update tranaparent baclground * update logo model provider * fix: set background material acrylic support to blur background windows * fix: update tranparent left and right panel * fix: linter CI * update app using frameless window * styling custom style minimize, maximize and close app * temporary hidden maximize window * fix: responsive left and right panel * fix: enable click outside when leftpanel responsive * fix: remove unused import * update transparent variable css windows * fix: ui import model * feat: Support Theme system (#2946) * feat: update support theme system * update select component * feat: add theme folder in root project * fix: padding left and right center panel * fix: update padding left and right * chore: migrate themes * fix: rmdirsync error * chore: update gitignore * fix: cp recursive * fix: files electron package json * fix: migration * fix: update fgit ignore --------- Co-authored-by: Louis <louis@jan.ai> * fix: update feedback missing state when refrash app * fix: error test CI * chore: refactor useLoadThemes * chore: cleanup unused vars * fix: revert back menubar windows * fix minor ui * fix: minor ui --------- Co-authored-by: Louis <louis@jan.ai>
135 lines
2.6 KiB
SCSS
135 lines
2.6 KiB
SCSS
.btn {
|
|
@apply inline-flex items-center justify-center px-4 font-semibold transition-all;
|
|
|
|
&:focus,
|
|
&:focus-within {
|
|
@apply outline-2 outline-offset-4;
|
|
}
|
|
&:hover {
|
|
filter: brightness(95%);
|
|
}
|
|
|
|
// Primary
|
|
&--primary {
|
|
color: hsla(var(--primary-fg));
|
|
background-color: hsla(var(--primary-bg)) !important;
|
|
&:hover {
|
|
filter: brightness(65%);
|
|
}
|
|
|
|
// Variant soft primary
|
|
&.btn--soft {
|
|
background-color: hsla(var(--primary-bg-soft)) !important;
|
|
color: hsla(var(--primary-bg));
|
|
}
|
|
|
|
// Variant outline primary
|
|
&.btn--outline {
|
|
background-color: transparent !important;
|
|
border: 1px solid hsla(var(--primary-bg));
|
|
color: hsla(var(--primary-bg));
|
|
}
|
|
}
|
|
|
|
// Ghost
|
|
&--ghost {
|
|
background-color: transparent !important;
|
|
&.btn--soft {
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
// Variant outline ghost
|
|
&.btn--outline {
|
|
background-color: transparent !important;
|
|
border: 1px solid hsla(var(--ghost-border));
|
|
}
|
|
}
|
|
|
|
// Destructive
|
|
&--destructive {
|
|
color: hsla(var(--destructive-fg));
|
|
background-color: hsla(var(--destructive-bg)) !important;
|
|
&:hover {
|
|
filter: brightness(65%);
|
|
}
|
|
|
|
// Variant soft destructive
|
|
&.btn--soft {
|
|
background-color: hsla(var(--destructive-bg-soft)) !important;
|
|
color: hsla(var(--destructive-bg));
|
|
}
|
|
|
|
// Variant outline destructive
|
|
&.btn--outline {
|
|
background-color: transparent !important;
|
|
border: 1px solid hsla(var(--destructive-bg));
|
|
color: hsla(var(--destructive-bg));
|
|
}
|
|
}
|
|
|
|
// Disabled
|
|
&:disabled {
|
|
color: hsla(var(--disabled-fg));
|
|
background-color: hsla(var(--disabled-bg)) !important;
|
|
cursor: not-allowed;
|
|
|
|
&:hover {
|
|
filter: brightness(100%);
|
|
}
|
|
}
|
|
|
|
// Icon
|
|
&--icon {
|
|
width: 24px;
|
|
height: 24px;
|
|
padding: 2px;
|
|
&:hover {
|
|
background-color: hsla(var(--icon-bg)) !important;
|
|
}
|
|
|
|
&.btn--outline {
|
|
background-color: transparent !important;
|
|
border: 1px solid hsla(var(--icon-border));
|
|
&:hover {
|
|
background-color: hsla(var(--icon-bg)) !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Size
|
|
&--small {
|
|
@apply h-6 px-2;
|
|
font-size: 12px;
|
|
border-radius: 4px;
|
|
&.btn--icon {
|
|
width: 24px;
|
|
height: 24px;
|
|
padding: 2px;
|
|
}
|
|
}
|
|
|
|
&--medium {
|
|
@apply h-8;
|
|
border-radius: 6px;
|
|
&.btn--icon {
|
|
width: 24px;
|
|
height: 24px;
|
|
padding: 2px;
|
|
}
|
|
}
|
|
|
|
&--large {
|
|
@apply h-9;
|
|
border-radius: 8px;
|
|
&.btn--icon {
|
|
width: 24px;
|
|
height: 24px;
|
|
padding: 2px;
|
|
}
|
|
}
|
|
|
|
&--block {
|
|
@apply w-full;
|
|
}
|
|
}
|