feat: themed topbar
This commit is contained in:
justTOBBI
parent
1a486fc8b2
commit
9a61915e15
1 changed files with 87 additions and 222 deletions
|
|
@ -14,280 +14,145 @@
|
|||
@-moz-document domain("codeberg.org") {
|
||||
/* Quelltext hier eingeben... */
|
||||
if (theme=="Latte") {
|
||||
$type = light
|
||||
|
||||
$rosewater = #dc8a78
|
||||
$flamingo = #dd7878
|
||||
$pink = #ea76cb
|
||||
$mauve = #8839ef
|
||||
$red = #d20f39
|
||||
$maroon = #e64553
|
||||
$peach = #fe640b
|
||||
$yellow = #df8e1d
|
||||
$green = #40a02b
|
||||
$teal = #179299
|
||||
$sky = #04a5e5
|
||||
$sapphire = #209fb5
|
||||
$blue = #1e66f5
|
||||
$lavender = #7287fd
|
||||
$text = #4c4f69
|
||||
$subtext1 = #5c5f77
|
||||
$subtext0 = #6c6f85
|
||||
$overlay2 = #7c7f93
|
||||
$overlay1 = #8c8fa1
|
||||
$overlay0 = #9ca0b0
|
||||
$surface2 = #acb0be
|
||||
$surface1 = #bcc0cc
|
||||
$surface0 = #ccd0da
|
||||
$base = #eff1f5
|
||||
$mantle = #e6e9ef
|
||||
$crust = #dce0e8
|
||||
$type=light $rosewater=#dc8a78 $flamingo=#dd7878 $pink=#ea76cb $mauve=#8839ef $red=#d20f39 $maroon=#e64553 $peach=#fe640b $yellow=#df8e1d $green=#40a02b $teal=#179299 $sky=#04a5e5 $sapphire=#209fb5 $blue=#1e66f5 $lavender=#7287fd $text=#4c4f69 $subtext1=#5c5f77 $subtext0=#6c6f85 $overlay2=#7c7f93 $overlay1=#8c8fa1 $overlay0=#9ca0b0 $surface2=#acb0be $surface1=#bcc0cc $surface0=#ccd0da $base=#eff1f5 $mantle=#e6e9ef $crust=#dce0e8
|
||||
}
|
||||
else if (theme=="Frappe") {
|
||||
$type = dark
|
||||
|
||||
$rosewater = #f2d5cf
|
||||
$flamingo = #eebebe
|
||||
$pink = #f4b8e4
|
||||
$mauve = #ca9ee6
|
||||
$red = #e78284
|
||||
$maroon = #ea999c
|
||||
$peach = #ef9f76
|
||||
$yellow = #e5c890
|
||||
$green = #a6d189
|
||||
$teal = #81c8be
|
||||
$sky = #99d1db
|
||||
$sapphire = #85c1dc
|
||||
$blue = #8caaee
|
||||
$lavender = #babbf1
|
||||
$text = #c6d0f5
|
||||
$subtext1 = #b5bfe2
|
||||
$subtext0 = #a5adce
|
||||
$overlay2 = #949cbb
|
||||
$overlay1 = #838ba7
|
||||
$overlay0 = #737994
|
||||
$surface2 = #626880
|
||||
$surface1 = #51576d
|
||||
$surface0 = #414559
|
||||
$base = #303446
|
||||
$mantle = #292c3c
|
||||
$crust = #232634
|
||||
$type=dark $rosewater=#f2d5cf $flamingo=#eebebe $pink=#f4b8e4 $mauve=#ca9ee6 $red=#e78284 $maroon=#ea999c $peach=#ef9f76 $yellow=#e5c890 $green=#a6d189 $teal=#81c8be $sky=#99d1db $sapphire=#85c1dc $blue=#8caaee $lavender=#babbf1 $text=#c6d0f5 $subtext1=#b5bfe2 $subtext0=#a5adce $overlay2=#949cbb $overlay1=#838ba7 $overlay0=#737994 $surface2=#626880 $surface1=#51576d $surface0=#414559 $base=#303446 $mantle=#292c3c $crust=#232634
|
||||
}
|
||||
else if (theme=="Macchiato") {
|
||||
$type = dark
|
||||
|
||||
$rosewater = #f4dbd6
|
||||
$flamingo = #f0c6c6
|
||||
$pink = #f5bde6
|
||||
$mauve = #c6a0f6
|
||||
$red = #ed8796
|
||||
$maroon = #ee99a0
|
||||
$peach = #f5a97f
|
||||
$yellow = #eed49f
|
||||
$green = #a6da95
|
||||
$teal = #8bd5ca
|
||||
$sky = #91d7e3
|
||||
$sapphire = #7dc4e4
|
||||
$blue = #8aadf4
|
||||
$lavender = #b7bdf8
|
||||
$text = #cad3f5
|
||||
$subtext1 = #b8c0e0
|
||||
$subtext0 = #a5adcb
|
||||
$overlay2 = #939ab7
|
||||
$overlay1 = #8087a2
|
||||
$overlay0 = #6e738d
|
||||
$surface2 = #5b6078
|
||||
$surface1 = #494d64
|
||||
$surface0 = #363a4f
|
||||
$base = #24273a
|
||||
$mantle = #1e2030
|
||||
$crust = #181926
|
||||
$type=dark $rosewater=#f4dbd6 $flamingo=#f0c6c6 $pink=#f5bde6 $mauve=#c6a0f6 $red=#ed8796 $maroon=#ee99a0 $peach=#f5a97f $yellow=#eed49f $green=#a6da95 $teal=#8bd5ca $sky=#91d7e3 $sapphire=#7dc4e4 $blue=#8aadf4 $lavender=#b7bdf8 $text=#cad3f5 $subtext1=#b8c0e0 $subtext0=#a5adcb $overlay2=#939ab7 $overlay1=#8087a2 $overlay0=#6e738d $surface2=#5b6078 $surface1=#494d64 $surface0=#363a4f $base=#24273a $mantle=#1e2030 $crust=#181926
|
||||
}
|
||||
else if (theme=="Mocha") {
|
||||
$type = dark
|
||||
|
||||
$rosewater = #f5e0dc
|
||||
$flamingo = #f2cdcd
|
||||
$pink = #f5c2e7
|
||||
$mauve = #cba6f7
|
||||
$red = #f38ba8
|
||||
$maroon = #eba0ac
|
||||
$peach = #fab387
|
||||
$yellow = #f9e2af
|
||||
$green = #a6e3a1
|
||||
$teal = #94e2d5
|
||||
$sky = #89dceb
|
||||
$sapphire = #74c7ec
|
||||
$lavender = #b4befe
|
||||
$blue = #89b4fa
|
||||
$text = #cdd6f4
|
||||
$subtext1 = #bac2de
|
||||
$subtext0 = #a6adc8
|
||||
$overlay2 = #9399b2
|
||||
$overlay1 = #7f849c
|
||||
$overlay0 = #6c7086
|
||||
$surface2 = #585b70
|
||||
$surface1 = #45475a
|
||||
$surface0 = #313244
|
||||
$base = #1e1e2e
|
||||
$mantle = #181825
|
||||
$crust = #11111b
|
||||
$type=dark $rosewater=#f5e0dc $flamingo=#f2cdcd $pink=#f5c2e7 $mauve=#cba6f7 $red=#f38ba8 $maroon=#eba0ac $peach=#fab387 $yellow=#f9e2af $green=#a6e3a1 $teal=#94e2d5 $sky=#89dceb $sapphire=#74c7ec $lavender=#b4befe $blue=#89b4fa $text=#cdd6f4 $subtext1=#bac2de $subtext0=#a6adc8 $overlay2=#9399b2 $overlay1=#7f849c $overlay0=#6c7086 $surface2=#585b70 $surface1=#45475a $surface0=#313244 $base=#1e1e2e $mantle=#181825 $crust=#11111b
|
||||
}
|
||||
:root {
|
||||
--color-body: $base;
|
||||
--color-text: $text;
|
||||
--color-text-light: $subtext0;
|
||||
--color-text-light-2: $subtext1;
|
||||
--color-text-light-3: $subtext1;
|
||||
--color-text-dark: $subtext0;
|
||||
--color-text-dark-2: $subtext1;
|
||||
--color-text-dark-3: $subtext1;
|
||||
--color-secondary: $surface1;
|
||||
--color-caret: $text;
|
||||
--color-navbar: $surface0;
|
||||
;
|
||||
--color-footer: $surface0;
|
||||
--color-red: $red;
|
||||
--color-orange: $peach;
|
||||
--color-yellow: $yellow;
|
||||
--color-olive: $green;
|
||||
--color-green: $green;
|
||||
--color-teal: $teal;
|
||||
--color-blue: $blue;
|
||||
--color-violet: $mauve;
|
||||
--color-purple: $mauve;
|
||||
--color-grey: $overlay0;
|
||||
--color-gold: $yellow;
|
||||
--color-red-light: $red;
|
||||
--color-orange-light: $peach;
|
||||
--color-yellow-light: $yellow;
|
||||
--color-olive-light: $green;
|
||||
--color-green-light: $green;
|
||||
--color-teal-light: $teal;
|
||||
--color-blue-light: $blue;
|
||||
--color-violet-light: $mauve;
|
||||
--color-purple-light: $mauve;
|
||||
--color-grey-light: $overlay2;
|
||||
--color-gold-light: $yellow;
|
||||
--color-black: $crust;
|
||||
--color-white: $text;
|
||||
--color-primary: $blue --color-console-fg: $text;
|
||||
--color-console-bg: $base;
|
||||
--color-error-border: $maroon;
|
||||
--color-error-bg: $overlay0;
|
||||
--color-error-text: $subtext1;
|
||||
--color-success-border: $green;
|
||||
--color-success-bg: $overlay0;
|
||||
--color-success-text: $subtext1;
|
||||
--color-warning-border: $orange;
|
||||
--color-warning-bg: $overlay1;
|
||||
--color-warning-text: $subtext1;
|
||||
--color-info-border: $overlay0;
|
||||
--color-info-bg: $surface0;
|
||||
--color-info-text: $subtext1;
|
||||
--color-box-header: $surface1;
|
||||
--color-box-body: $surface0;
|
||||
--color-markup-code-block: $surface2;
|
||||
--color-input-background: $base;
|
||||
--color-input-border: $surface1;
|
||||
--color-input-text: $text;
|
||||
--color-card: $surface0;
|
||||
--color-active: $surface0;
|
||||
--color-menu: $surface1;
|
||||
--color-button: $overlay0;
|
||||
--color-light-border: $surface1;
|
||||
--color-dark-border: $overlay0;
|
||||
}
|
||||
|
||||
|
||||
:root {
|
||||
--color-body: $base;
|
||||
--color-text: $text;
|
||||
--color-text-light: $subtext0;
|
||||
--color-text-light-2: $subtext1;
|
||||
--color-text-light-3: $subtext1;
|
||||
--color-text-dark: $subtext0;
|
||||
--color-text-dark-2: $subtext1;
|
||||
--color-text-dark-3: $subtext1;
|
||||
--color-secondary: $surface1;
|
||||
--color-caret: $text;
|
||||
--color-navbar: $surface0;;
|
||||
--color-footer: $surface0;
|
||||
|
||||
--color-red: $red;
|
||||
--color-orange: $peach;
|
||||
--color-yellow: $yellow;
|
||||
--color-olive: $green;
|
||||
--color-green: $green;
|
||||
--color-teal: $teal;
|
||||
--color-blue: $blue;
|
||||
--color-violet: $mauve;
|
||||
--color-purple: $mauve;
|
||||
--color-grey: $overlay0;
|
||||
--color-gold: $yellow;
|
||||
--color-red-light: $red;
|
||||
--color-orange-light: $peach;
|
||||
--color-yellow-light: $yellow;
|
||||
--color-olive-light: $green;
|
||||
--color-green-light: $green;
|
||||
--color-teal-light: $teal;
|
||||
--color-blue-light: $blue;
|
||||
--color-violet-light: $mauve;
|
||||
--color-purple-light: $mauve;
|
||||
--color-grey-light: $overlay2;
|
||||
--color-gold-light: $yellow;
|
||||
--color-black: $crust;
|
||||
--color-white: $text;
|
||||
|
||||
--color-primary: $blue
|
||||
|
||||
--color-console-fg: $text;
|
||||
--color-console-bg: $base;
|
||||
|
||||
--color-error-border: $maroon;
|
||||
--color-error-bg: $overlay0;
|
||||
--color-error-text: $subtext1;
|
||||
|
||||
--color-success-border: $green;
|
||||
--color-success-bg: $overlay0;
|
||||
--color-success-text: $subtext1;
|
||||
|
||||
--color-warning-border: $orange;
|
||||
--color-warning-bg: $overlay1;
|
||||
--color-warning-text: $subtext1;
|
||||
|
||||
--color-info-border: $overlay0;
|
||||
--color-info-bg: $surface0;
|
||||
--color-info-text: $subtext1;
|
||||
|
||||
--color-box-header: $surface1;
|
||||
--color-box-body: $surface0;
|
||||
|
||||
--color-markup-code-block: $surface2;
|
||||
|
||||
--color-input-background: $base;
|
||||
--color-input-border: $surface1;
|
||||
--color-input-text: $text;
|
||||
|
||||
--color-card: $surface0;
|
||||
|
||||
--color-active: $surface0;
|
||||
--color-menu: $surface1;
|
||||
|
||||
--color-button: $overlay0;
|
||||
--color-light-border: $surface1;
|
||||
--color-dark-border: $overlay0;
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
background-color: $base;
|
||||
color: $text;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.ui.table {
|
||||
color: $text;
|
||||
}
|
||||
|
||||
.repository-summary {
|
||||
background-color: $surface0;
|
||||
}
|
||||
|
||||
.ui.green.button {
|
||||
background-color: $green;
|
||||
color: $base;
|
||||
}
|
||||
|
||||
.ui.red.button {
|
||||
background-color: $red;
|
||||
color: $base;
|
||||
border-color: $overlay0;
|
||||
}
|
||||
|
||||
.ui.basic.red.button {
|
||||
color: $red;
|
||||
}
|
||||
|
||||
|
||||
.ui.negative.button {
|
||||
background-color: $red;
|
||||
color: $base;
|
||||
}
|
||||
|
||||
.ui.basic.green.button {
|
||||
color: $green;
|
||||
}
|
||||
|
||||
.ui.breadcrumb {
|
||||
color: $text;
|
||||
}
|
||||
|
||||
|
||||
.following.bar #navbar {
|
||||
background-color: $blue !important;
|
||||
}
|
||||
#navbar .item {
|
||||
color: $surface0;
|
||||
}
|
||||
* {
|
||||
caret-color: $text;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.ui.red.label, .ui.red.labels .label {
|
||||
background-color: $red!important;
|
||||
border-color: $red!important;
|
||||
color: $base!important;
|
||||
.ui.red.label,
|
||||
.ui.red.labels .label {
|
||||
background-color: $red !important;
|
||||
border-color: $red !important;
|
||||
color: $base !important;
|
||||
}
|
||||
.ui.green.label, .ui.green.labels, .ui.basic.green.label {
|
||||
background-color: $green!important;
|
||||
border-color: $green!important;
|
||||
color: $base!important;
|
||||
.ui.green.label,
|
||||
.ui.green.labels,
|
||||
.ui.basic.green.label {
|
||||
background-color: $green !important;
|
||||
border-color: $green !important;
|
||||
color: $base !important;
|
||||
}
|
||||
|
||||
.repository.file.list #repo-files-table tr {
|
||||
background-color: $base;
|
||||
}
|
||||
.repository.file.list #repo-files-table tr:hover {
|
||||
background-color: $surface1!important;
|
||||
background-color: $surface1 !important;
|
||||
}
|
||||
|
||||
.ui.horizontal.segments>.segment {
|
||||
background-color: $surface0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
Loading…
Reference in a new issue