532 lines
15 KiB
CSS
532 lines
15 KiB
CSS
/* ==UserStyle==
|
|
@name Catppuccin Codeberg
|
|
@namespace github.com/catppuccin/userstyles/styles/codeberg
|
|
@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/codeberg
|
|
@version 1.0.2
|
|
@description Soothing pastel theme for Codeberg
|
|
@author Catppuccin
|
|
@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/codeberg/catppuccin.user.css
|
|
@license MIT
|
|
|
|
@preprocessor stylus
|
|
@var select flavor "Flavor" ["Latte", "Frappe", "Macchiato", "Mocha*"]
|
|
@var checkbox navbar-color "Use dark navbar-color" 0
|
|
==/UserStyle== */
|
|
|
|
@-moz-document domain("codeberg.org") {
|
|
if (flavor=="Latte") {
|
|
$type = light
|
|
|
|
$rosewater = hsl(10.8, 58.8%, 66.7%)
|
|
$flamingo = hsl(0, 59.8%, 66.9%)
|
|
$pink = hsl(316, 73.4%, 69%)
|
|
$mauve = hsl(266, 85%, 58%)
|
|
$red = hsl(347.1, 86.7%, 44.1%)
|
|
$maroon = hsl(354.8, 76.3%, 58.6%)
|
|
$peach = hsl(22, 99.2%, 52%)
|
|
$yellow = hsl(34.9, 77%, 49.4%)
|
|
$green = hsl(109.2, 57.6%, 39.8%)
|
|
$teal = hsl(183.2, 73.9%, 34.5%)
|
|
$sky = hsl(197.1, 96.6%, 45.7%)
|
|
$sapphire = hsl(188.9, 70%, 41.8%)
|
|
$blue = hsl(219.9, 91.5%, 53.9%)
|
|
$lavender = hsl(230.9, 97.2%, 72%)
|
|
$text = hsl(233.8, 16%, 35.5%)
|
|
$subtext1 = hsl(233.3, 12.8%, 41.4%)
|
|
$subtext0 = hsl(232.8, 10.4%, 47.3%)
|
|
$overlay2 = hsl(232.2, 9.6%, 53.1%)
|
|
$overlay1 = hsl(231.4, 10%, 59%)
|
|
$overlay0 = hsl(228, 11.2%, 65.1%)
|
|
$surface2 = hsl(226.7, 12.2%, 71%)
|
|
$surface1 = hsl(225, 13.6%, 76.9%)
|
|
$surface0 = hsl(222.9, 15.9%, 82.7%)
|
|
$base = hsl(220, 23.1%, 94.9%)
|
|
$mantle = hsl(220, 22%, 92%)
|
|
$crust = hsl(220, 20.7%, 88.6%)
|
|
}
|
|
else if (flavor=="Frappe") {
|
|
$type = dark
|
|
|
|
$rosewater = hsl(10.3, 57.4%, 88%)
|
|
$flamingo = hsl(0, 58.5%, 83.9%)
|
|
$pink = hsl(316, 73.2%, 83.9%)
|
|
$mauve = hsl(276.7, 59%, 76.1%)
|
|
$red = hsl(358.8, 67.8%, 70.8%)
|
|
$maroon = hsl(357.8, 65.9%, 75.9%)
|
|
$peach = hsl(20.3, 79.1%, 70%)
|
|
$yellow = hsl(39.5, 62%, 73.1%)
|
|
$green = hsl(95.8, 43.9%, 67.8%)
|
|
$teal = hsl(171.5, 39.2%, 64.5%)
|
|
$sky = hsl(189.1, 47.8%, 72.9%)
|
|
$sapphire = hsl(198.6, 55.4%, 69.2%)
|
|
$blue = hsl(221.6, 74.2%, 74.1%)
|
|
$lavender = hsl(238.9, 66.3%, 83.7%)
|
|
$text = hsl(227.2, 70.1%, 86.9%)
|
|
$subtext1 = hsl(226.7, 43.7%, 79.8%)
|
|
$subtext0 = hsl(228.3, 29.5%, 72.7%)
|
|
$overlay2 = hsl(227.7, 22.3%, 65.7%)
|
|
$overlay1 = hsl(226.7, 17%, 58.4%)
|
|
$overlay0 = hsl(229.1, 13.4%, 51.6%)
|
|
$surface2 = hsl(228, 13.3%, 44.3%)
|
|
$surface1 = hsl(227.1, 14.7%, 37.3%)
|
|
$surface0 = hsl(230, 15.6%, 30.2%)
|
|
$base = hsl(229.1, 18.6%, 23.1%)
|
|
$mantle = hsl(230.5, 18.8%, 19.8%)
|
|
$crust = hsl(229.4, 19.5%, 17.1%)
|
|
}
|
|
else if (flavor=="Macchiato") {
|
|
$type = dark
|
|
|
|
$rosewater = hsl(10, 57.7%, 89.8%)
|
|
$flamingo = hsl(0, 58.3%, 85.9%)
|
|
$pink = hsl(316.1, 73.7%, 85.1%)
|
|
$mauve = hsl(266.5, 82.7%, 79.6%)
|
|
$red = hsl(351.2, 73.9%, 72.9%)
|
|
$maroon = hsl(355.1, 71.4%, 76.7%)
|
|
$peach = hsl(21.4, 85.5%, 72.9%)
|
|
$yellow = hsl(40.3, 69.9%, 77.8%)
|
|
$green = hsl(105.2, 48.3%, 72%)
|
|
$teal = hsl(171.1, 46.8%, 69%)
|
|
$sky = hsl(188.8, 59.4%, 72.9%)
|
|
$sapphire = hsl(198.6, 65.6%, 69.2%)
|
|
$blue = hsl(220.2, 82.8%, 74.9%)
|
|
$lavender = hsl(234.5, 82.3%, 84.5%)
|
|
$text = hsl(227.4, 68.3%, 87.6%)
|
|
$subtext1 = hsl(228, 39.2%, 80%)
|
|
$subtext0 = hsl(227.4, 26.8%, 72.2%)
|
|
$overlay2 = hsl(228.3, 20%, 64.7%)
|
|
$overlay1 = hsl(227.6, 15.5%, 56.9%)
|
|
$overlay0 = hsl(230.3, 12.4%, 49.2%)
|
|
$surface2 = hsl(229.7, 13.7%, 41.4%)
|
|
$surface1 = hsl(231.1, 15.6%, 33.9%)
|
|
$surface0 = hsl(230.4, 18.8%, 26.1%)
|
|
$base = hsl(231.8, 23.4%, 18.4%)
|
|
$mantle = hsl(233.3, 23.1%, 15.3%)
|
|
$crust = hsl(235.7, 22.6%, 12.2%)
|
|
}
|
|
else if (flavor=="Mocha") {
|
|
$type = dark
|
|
|
|
$rosewater = hsl(9.6, 55.6%, 91.2%)
|
|
$flamingo = hsl(0, 58.7%, 87.6%)
|
|
$pink = hsl(316.5, 71.8%, 86.1%)
|
|
$mauve = hsl(267.4, 83.5%, 81%)
|
|
$red = hsl(343.3, 81.2%, 74.9%)
|
|
$maroon = hsl(350.4, 65.2%, 77.5%)
|
|
$peach = hsl(23, 92%, 75.5%)
|
|
$yellow = hsl(41.4, 86%, 83.1%)
|
|
$green = hsl(115.5, 54.1%, 76.1%)
|
|
$teal = hsl(170, 57.4%, 73.3%)
|
|
$sky = hsl(189.2, 71%, 72.9%)
|
|
$sapphire = hsl(198.5, 75.9%, 69%)
|
|
$lavender = hsl(231.9, 97.4%, 85.1%)
|
|
$blue = hsl(217.2, 91.9%, 75.9%)
|
|
$text = hsl(226.2, 63.9%, 88%)
|
|
$subtext1 = hsl(226.7, 35.3%, 80%)
|
|
$subtext0 = hsl(227.6, 23.6%, 71.8%)
|
|
$overlay2 = hsl(228.4, 16.8%, 63.7%)
|
|
$overlay1 = hsl(229.7, 12.8%, 55.5%)
|
|
$overlay0 = hsl(230.8, 10.7%, 47.5%)
|
|
$surface2 = hsl(232.5, 12%, 39.2%)
|
|
$surface1 = hsl(234.3, 13.2%, 31.2%)
|
|
$surface0 = hsl(236.8, 16.2%, 22.9%)
|
|
$base = hsl(240, 21.1%, 14.9%)
|
|
$mantle = hsl(240, 21.3%, 12%)
|
|
$crust = hsl(240, 22.7%, 8.6%)
|
|
}
|
|
|
|
|
|
: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;
|
|
|
|
--color-diff-removed-row-bg: rgba($red, 0.2)!important;
|
|
--color-diff-removed-row-border: rgba($red, 0.2)!important;
|
|
--color-diff-removed-word-bg: rgba($red, 0.4)!important;
|
|
|
|
--color-diff-added-row-bg: rgba($green, 0.2)!important;
|
|
--color-diff-added-row-border: rgba($green, 0.2)!important;
|
|
--color-diff-added-word-bg: rgba($green, 0.4)!important;
|
|
|
|
--color-diff-inactive: $surface1;
|
|
|
|
--color-code-bg: $surface0;
|
|
--color-expand-button: $surface1;
|
|
}
|
|
|
|
|
|
body {
|
|
background-color: $base;
|
|
color: $text;
|
|
|
|
}
|
|
|
|
div#navbar.ui.container {
|
|
background-color: $blue !important;
|
|
color: $base !important;
|
|
}
|
|
|
|
if navbar-color {
|
|
div#navbar.ui.container {
|
|
background-color: $mantle !important;
|
|
color: $text !important;
|
|
}
|
|
}
|
|
|
|
th,
|
|
textarea,
|
|
h4.ui.top.attached.error.header,
|
|
div.ui.red.message,
|
|
div.ui.segment.sub-menu.repository-menu,
|
|
nav.navbar,
|
|
div.sidebar,
|
|
div.sidebar-menu,
|
|
div.card,
|
|
div.menu.left.transition.visible,
|
|
div.menu.user-menu.left.transition.visible,
|
|
a.item.active
|
|
input,
|
|
div.ui.dropdown.icon.button,
|
|
div.ui.borderless.pagination.menu.narrow,
|
|
span.name,
|
|
blockquote.alert {
|
|
background-color: $mantle !important;
|
|
color: $text !important;
|
|
transition: 0.5s;
|
|
}
|
|
|
|
div.extra.content.word-break,
|
|
td.name,
|
|
td.message,
|
|
td.text {
|
|
border-color: $surface1 !important;
|
|
}
|
|
|
|
div.ui.top.attached.header.clearing.segment.pr.commit-header,
|
|
footer,
|
|
h1,
|
|
h3,
|
|
h4 {
|
|
background-color: $mantle !important;
|
|
}
|
|
|
|
div.ui.compact.tiny.menu,
|
|
div.ui.secondary.pointing.tabular.top.attached.borderless.menu.stackable.new-menu.navbar,
|
|
div.ui.attached.segment,
|
|
div.ui.borderless.pagination.menu,
|
|
div.ui.two.item.tabable.menu,
|
|
div.ui.secondary.tiny.pointing.borderless.menu.center.grid.repos-filter,
|
|
div.header-wrapper,
|
|
div.ui.attached.segment.df.ac.sb.py-2.commit-header-row.fw,
|
|
div.file-view.markup.markdown,
|
|
div.ui.attached.segment.repos-search,
|
|
div.ui.attached.table.segment.rounded-bottom {
|
|
background-color: $base !important;
|
|
}
|
|
|
|
span.ui.grey.label.ml-3,
|
|
div.ui.circular.mini.grey.label,
|
|
div.divider,
|
|
button.btn.btn-primary,
|
|
div.ui.language.bottom.floating.slide.up.dropdown.link.item.button {
|
|
background-color: $surface0 !important;
|
|
}
|
|
|
|
tr {
|
|
background-color: $base !important;
|
|
}
|
|
|
|
.blob-excerpt.lines-code {
|
|
background-color: $mantle !important;
|
|
}
|
|
.chroma.lines-code {
|
|
background-color: transparent !important;
|
|
}
|
|
.add-code {
|
|
background-color: alpha($green, 0.1) !important;
|
|
}
|
|
.added-code {
|
|
background-color: alpha($green, 0.15) !important;
|
|
color: $text !important;
|
|
}
|
|
.del-code {
|
|
background-color: alpha($red, 0.1) !important;
|
|
}
|
|
.removed-code {
|
|
background-color: alpha($red, 0.15) !important;
|
|
color: $text !important;
|
|
}
|
|
code.code-inner {
|
|
color: $overlay1 !important;
|
|
}
|
|
tr.tag-code.nl-0.ol-0, td.lines-num, td.lines-type-marker {
|
|
background-color: alpha($blue, 0.1) !important;
|
|
}
|
|
|
|
kbd,
|
|
code {
|
|
background-color: transparent !important;
|
|
color: $text !important;
|
|
}
|
|
|
|
span.c1 {
|
|
color: $overlay1 !important;
|
|
}
|
|
span.s1 {
|
|
color: $peach !important;
|
|
}
|
|
span.token.string,
|
|
span.s2 {
|
|
color: $green !important;
|
|
}
|
|
span.n {
|
|
color: $text !important;
|
|
}
|
|
span.o,
|
|
span.kc,
|
|
span.kd,
|
|
span.kr {
|
|
color: $red !important;
|
|
}
|
|
span.nf {
|
|
color: $blue !important;
|
|
}
|
|
span.token.function,
|
|
span.mi {
|
|
color: $teal !important;
|
|
}
|
|
|
|
nav.navbar {
|
|
border: none !important;
|
|
}
|
|
|
|
pre {
|
|
background-color: $mantle !important;
|
|
border-color: $blue !important;
|
|
}
|
|
|
|
a.ui.primary.sha.label,
|
|
span.ui.primary.sha.label {
|
|
background-color: $mantle !important;
|
|
}
|
|
|
|
h1,
|
|
a,
|
|
a.header-anchor,
|
|
a.item {
|
|
background-color: transparent !important;
|
|
color: $blue !important;
|
|
transition: 0.5s;
|
|
}
|
|
|
|
a:hover,
|
|
a.item:hover,
|
|
span.name:hover {
|
|
background-color: transparent !important;
|
|
color: $green !important;
|
|
transition: 0.5s;
|
|
}
|
|
|
|
.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.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;
|
|
}
|
|
|
|
.ui.horizontal.segments>.segment {
|
|
background-color: $surface0;
|
|
}
|
|
|
|
.tag-code td.lines-type-marker, td.blob-hunk {
|
|
color: $text!important;
|
|
}
|
|
|
|
.tag-code, .tag-code td {
|
|
background: $surface1!important;
|
|
}
|
|
|
|
.tag-code td.lines-num {
|
|
background-color: $surface1!important;
|
|
}
|
|
|
|
.chroma .sb {
|
|
color: $subtext1;
|
|
}
|
|
|
|
.chroma .nt {
|
|
color: rgba($mauve, 0.7)!important;
|
|
}
|
|
|
|
.chroma .na {
|
|
color: rgba($teal, 0.7)!important;
|
|
}
|
|
|
|
.chroma .nb {
|
|
color: rgba($mauve, 0.7);
|
|
}
|
|
|
|
.chroma .s2 {
|
|
color: rgba($teal, 0.7);
|
|
}
|
|
|
|
.chroma .si {
|
|
color: rgba($peach, 0.6);
|
|
}
|
|
|
|
.chroma .nv {
|
|
color: rgba($peach, 0.6);
|
|
}
|
|
|
|
.chroma .nx {
|
|
color: $text;
|
|
}
|
|
|
|
.chroma .nf {
|
|
color: $yellow;
|
|
}
|
|
|
|
.chroma .s {
|
|
color: rgba($teal, 0.7);
|
|
}
|
|
|
|
}
|
|
}
|