458 lines
14 KiB
CSS
458 lines
14 KiB
CSS
@import "./fonts.css";
|
|
@import "./highlight.css";
|
|
@import "./icons.css";
|
|
|
|
/* Recolor */
|
|
:root {
|
|
accent-color: var(--gray-9);
|
|
--color-primary: var(--gray-9);
|
|
--color-primary-contrast: var(--gray-1);
|
|
--color-primary-hover: var(--gray-10);
|
|
--color-primary-dark-1: var(--gray-10);
|
|
--color-primary-dark-2: var(--gray-10);
|
|
--color-primary-dark-3: var(--gray-11);
|
|
--color-primary-dark-4: var(--gray-11);
|
|
--color-primary-dark-5: var(--gray-12);
|
|
--color-primary-dark-6: var(--gray-12);
|
|
--color-primary-dark-7: var(--gray-12);
|
|
--color-primary-light-1: var(--gray-8);
|
|
--color-primary-light-2: var(--gray-8);
|
|
--color-primary-light-3: var(--gray-7);
|
|
--color-primary-light-4: var(--gray-7);
|
|
--color-primary-light-5: var(--gray-6);
|
|
--color-primary-light-6: var(--gray-6);
|
|
--color-primary-light-7: var(--gray-6);
|
|
--color-primary-alpha-10: var(--gray-a9);
|
|
--color-primary-alpha-20: var(--gray-a9);
|
|
--color-primary-alpha-30: var(--gray-a10);
|
|
--color-primary-alpha-40: var(--gray-a10);
|
|
--color-primary-alpha-50: var(--gray-a11);
|
|
--color-primary-alpha-60: var(--gray-a11);
|
|
--color-primary-alpha-70: var(--gray-a12);
|
|
--color-primary-alpha-80: var(--gray-a12);
|
|
--color-primary-alpha-90: var(--gray-a12);
|
|
--color-secondary: var(--gray-9);
|
|
--color-secondary-dark-1: var(--gray-9);
|
|
--color-secondary-dark-2: var(--gray-9);
|
|
--color-secondary-dark-3: var(--gray-9);
|
|
--color-secondary-dark-4: var(--gray-10);
|
|
--color-secondary-dark-5: var(--gray-10);
|
|
--color-secondary-dark-6: var(--gray-10);
|
|
--color-secondary-dark-7: var(--gray-11);
|
|
--color-secondary-dark-8: var(--gray-11);
|
|
--color-secondary-dark-9: var(--gray-11);
|
|
--color-secondary-dark-10: var(--gray-12);
|
|
--color-secondary-dark-11: var(--gray-12);
|
|
--color-secondary-dark-12: var(--gray-12);
|
|
--color-secondary-dark-13: var(--gray-12);
|
|
--color-secondary-light-1: var(--gray-8);
|
|
--color-secondary-light-2: var(--gray-7);
|
|
--color-secondary-light-3: var(--gray-6);
|
|
--color-secondary-light-4: var(--gray-5);
|
|
--color-secondary-alpha-10: var(--gray-a2);
|
|
--color-secondary-alpha-20: var(--gray-a2);
|
|
--color-secondary-alpha-30: var(--gray-a3);
|
|
--color-secondary-alpha-40: var(--gray-a3);
|
|
--color-secondary-alpha-50: var(--gray-a4);
|
|
--color-secondary-alpha-60: var(--gray-a4);
|
|
--color-secondary-alpha-70: var(--gray-a5);
|
|
--color-secondary-alpha-80: var(--gray-a5);
|
|
--color-secondary-alpha-90: var(--gray-a5);
|
|
|
|
/* colors */
|
|
--color-red: var(--red-9);
|
|
--color-orange: var(--orange-9);
|
|
--color-yellow: var(--amber-9);
|
|
--color-olive: var(--green-9);
|
|
--color-green: var(--grass-9);
|
|
--color-teal: var(--teal-9);
|
|
--color-blue: var(--blue-9);
|
|
--color-violet: var(--violet-9);
|
|
--color-purple: var(--purple-9);
|
|
--color-pink: var(--pink-9);
|
|
--color-brown: var(--brown-9);
|
|
--color-grey: var(--gray-9);
|
|
--color-black: var(--slate-9);
|
|
/* light variants - produced via Sass scale-color(color, $lightness: -10%) */
|
|
--color-red-light: var(--red-10);
|
|
--color-orange-light: var(--orange-10);
|
|
--color-yellow-light: var(--amber-10);
|
|
--color-olive-light: var(--green-10);
|
|
--color-green-light: var(--grass-10);
|
|
--color-teal-light: var(--teal-10);
|
|
--color-blue-light: var(--blue-10);
|
|
--color-violet-light: var(--violet-10);
|
|
--color-purple-light: var(--purple-10);
|
|
--color-pink-light: var(--pink-10);
|
|
--color-brown-light: var(--brown);
|
|
--color-grey-light: var(--gray-10);
|
|
--color-black-light: var(--slate-10);
|
|
/* dark 1 variants - produced via Sass scale-color(color, catppuccin.$lightness: -10%) */
|
|
--color-red-dark-1: var(--red-10);
|
|
--color-orange-dark-1: var(--orange-10);
|
|
--color-yellow-dark-1: var(--amber-10);
|
|
--color-olive-dark-1: var(--green-10);
|
|
--color-green-dark-1: var(--grass-10);
|
|
--color-teal-dark-1: var(--teal-10);
|
|
--color-blue-dark-1: var(--blue-10);
|
|
--color-violet-dark-1: var(--violet-10);
|
|
--color-purple-dark-1: var(--purple-10);
|
|
--color-pink-dark-1: var(--pink-10);
|
|
--color-brown-dark-1: var(--brown-10);
|
|
--color-black-dark-1: var(--slate-10);
|
|
/* dark 2 variants - produced via Sass scale-color(color, catppuccin.$lightness: -20%) */
|
|
--color-red-dark-2: var(--red-11);
|
|
--color-orange-dark-2: var(--orange-11);
|
|
--color-yellow-dark-2: var(--amber-11);
|
|
--color-olive-dark-2: var(--green-11);
|
|
--color-green-dark-2: var(--grass-11);
|
|
--color-teal-dark-2: var(--teal-11);
|
|
--color-blue-dark-2: var(--violet-11);
|
|
--color-violet-dark-2: var(--violet-11);
|
|
--color-purple-dark-2: var(--purple-11);
|
|
--color-pink-dark-2: var(--pink-11);
|
|
--color-brown-dark-2: var(--brown-11);
|
|
--color-black-dark-2: var(--slate-11);
|
|
/* other colors */
|
|
--color-gold: #9e6c00; /* Radix Colors' Yellow 11 */
|
|
--color-white: #fcfcfc; /* Radix Colors' Gray 1 */
|
|
--color-diff-removed-word-bg: var(--red-11);
|
|
--color-diff-added-word-bg: var(--grass-11);
|
|
--color-diff-removed-row-bg: var(--red-3);
|
|
--color-diff-moved-row-bg: var(--amber-3);
|
|
--color-diff-added-row-bg: var(--grass-3);
|
|
--color-diff-removed-row-border: var(--red-3);
|
|
--color-diff-moved-row-border: var(--amber-3);
|
|
--color-diff-added-row-border: var(--red-3);
|
|
--color-diff-inactive: var(--teal-3);
|
|
--color-error-border: var(--red-11);
|
|
--color-error-bg: var(--red-2);
|
|
--color-error-bg-active: var(--red-5);
|
|
--color-error-bg-hover: var(--red-4);
|
|
--color-error-text: var(--red-11);
|
|
--color-success-border: var(--grass-11);
|
|
--color-success-bg: var(--grass-2);
|
|
--color-success-text: var(--grass-11);
|
|
--color-warning-border: var(--amber-11);
|
|
--color-warning-bg: var(--amber-2);
|
|
--color-warning-text: var(--amber-11);
|
|
--color-info-border: var(--blue-11);
|
|
--color-info-bg: var(--blue-2);
|
|
--color-info-text: var(--blue-11);
|
|
--color-red-badge: var(--red-11);
|
|
--color-red-badge-bg: var(--red-2);
|
|
--color-red-badge-hover-bg: var(--red-4);
|
|
--color-green-badge: var(--grass-11);
|
|
--color-green-badge-bg: var(--grass-2);
|
|
--color-green-badge-hover-bg: var(--grass-4);
|
|
--color-yellow-badge: var(--amber-11);
|
|
--color-yellow-badge-bg: var(--amber-2);
|
|
--color-yellow-badge-hover-bg: var(--amber-4);
|
|
--color-orange-badge: var(--orange-11);
|
|
--color-orange-badge-bg: var(--orange-2);
|
|
--color-orange-badge-hover-bg: var(--orange-4);
|
|
--color-git: #ef5f00; /* Radix Colors' Orange 10 */
|
|
--color-highlight-bg: var(--gray-a2);
|
|
/* target-based colors */
|
|
--color-body: var(--gray-1);
|
|
--color-box-header: var(--gray-6);
|
|
--color-box-body: var(--gray-2);
|
|
--color-box-body-highlight: var(--gray-5);
|
|
--color-text-dark: var(--gray-6);
|
|
--color-text: var(--gray-11);
|
|
--color-text-light: var(--gray-12);
|
|
--color-text-light-1: var(--gray-12);
|
|
--color-text-light-2: var(--gray-12);
|
|
--color-text-light-3: var(--gray-12);
|
|
--color-footer: var(--gray-2);
|
|
--color-timeline: var(--gray-4);
|
|
--color-input-text: var(--gray-11);
|
|
--color-input-background: var(--gray-4);
|
|
--color-input-toggle-background: var(--gray-4);
|
|
--color-input-border: var(--gray-6);
|
|
--color-input-border-hover: var(--gray-7);
|
|
--color-nav-bg: var(--gray-2);
|
|
--color-nav-hover-bg: var(--gray-4);
|
|
--color-navbar: var(--gray-2);
|
|
--color-navbar-transparent: var(--gray-a1);
|
|
--color-light: var(--gray-4);
|
|
--color-light-mimic-enabled: rgba(
|
|
0,
|
|
0,
|
|
0,
|
|
calc(40 / 255 * 222 / 255 / var(--opacity-disabled))
|
|
);
|
|
--color-light-border: var(--gray-6);
|
|
--color-hover: var(--gray-a4);
|
|
--color-active: var(--gray-a5);
|
|
--color-menu: var(--gray-3);
|
|
--color-card: var(--gray-3);
|
|
--color-markup-table-row: var(--gray-a2);
|
|
--color-markup-code-block: var(--gray-a4);
|
|
--color-markup-code-inline: var(--gray-3);
|
|
--color-button: var(--gray-3);
|
|
--color-code-bg: var(--gray-2);
|
|
--color-code-sidebar-bg: var(--gray-3);
|
|
--color-shadow: var(--gray-a2);
|
|
--color-tooltip-bg: var(--gray-3);
|
|
--color-tooltip-text: var(--color-text);
|
|
--color-secondary-bg: var(--gray-3);
|
|
--color-text-focus: var(--gray-12);
|
|
--color-expand-button: var(--gray-5);
|
|
--color-placeholder-text: var(--gray-a6);
|
|
--color-editor-line-highlight: var(--color-primary-light-5);
|
|
--color-project-board-bg: var(--color-secondary-light-2);
|
|
/* gitea source code: */
|
|
/* should ideally be --color-text-dark, see go-gitea/gitea#15651 */
|
|
--color-caret: var(--color-text);
|
|
--color-reaction-bg: var(--gray-a4);
|
|
--color-reaction-active-bg: var(--color-primary-alpha-40);
|
|
--color-header-wrapper: var(--gray-4);
|
|
--color-header-wrapper-transparent: var(--gray-4a);
|
|
--color-label-text: var(--gray-1);
|
|
--color-label-bg: var(--gray-9);
|
|
--color-label-hover-bg: var(--gray-10);
|
|
--color-label-active-bg: var(--gray-10);
|
|
--color-accent: var(--color-primary-light-1);
|
|
--color-small-accent: var(--color-primary-light-5);
|
|
--color-active-line: var(--gray-12);
|
|
}
|
|
|
|
/* Blockquotes */
|
|
.markup blockquote {
|
|
margin-right: 0;
|
|
border-radius: var(--border-radius);
|
|
}
|
|
|
|
blockquote.attention-caution {
|
|
border-left-color: var(--color-error-border);
|
|
background-color: var(--color-error-bg);
|
|
}
|
|
svg.attention-caution,
|
|
strong.attention-caution {
|
|
color: var(--color-error-text) !important;
|
|
}
|
|
|
|
blockquote.attention-important {
|
|
border-left-color: var(--color-violet-dark-2);
|
|
background-color: var(--violet-2);
|
|
}
|
|
svg.attention-important,
|
|
strong.attention-important {
|
|
color: var(--color-violet-dark-2) !important;
|
|
}
|
|
|
|
blockquote.attention-note {
|
|
border-left-color: var(--color-info-border);
|
|
background-color: var(--color-info-bg);
|
|
}
|
|
svg.attention-note,
|
|
strong.attention-note {
|
|
color: var(--color-info-text) !important;
|
|
}
|
|
|
|
blockquote.attention-tip {
|
|
border-left-color: var(--color-success-border);
|
|
background-color: var(--color-success-bg);
|
|
}
|
|
svg.attention-tip,
|
|
strong.attention-tip {
|
|
color: var(--color-success-text) !important;
|
|
}
|
|
|
|
blockquote.attention-warning {
|
|
border-left-color: var(--color-warning-border);
|
|
background-color: var(--color-warning-bg);
|
|
}
|
|
svg.attention-warning,
|
|
strong.attention-warning {
|
|
color: var(--color-warning-text) !important;
|
|
}
|
|
|
|
/* Remove various border of elements */
|
|
#navbar,
|
|
ul li {
|
|
border-bottom: none !important;
|
|
}
|
|
|
|
/* Remove borders */
|
|
.secondary-nav {
|
|
& > overflow-menu {
|
|
border: none !important;
|
|
}
|
|
& > .divider {
|
|
border-top: none;
|
|
}
|
|
}
|
|
|
|
.page-footer,
|
|
.repo-home-sidebar-bottom .flex-list > :first-child,
|
|
#repo-files-table .repo-file-cell {
|
|
border-top: none;
|
|
}
|
|
|
|
.tippy-box {
|
|
border: none;
|
|
padding: 1px;
|
|
}
|
|
|
|
.code-search,
|
|
.flex-list > .flex-item + .flex-item,
|
|
.grid-list > .grid-item,
|
|
.ui.attached.header,
|
|
.ui.attached.segment,
|
|
.ui.basic.label,
|
|
.ui.button.basic:not(.red),
|
|
.ui.button.small,
|
|
.ui.button.compact,
|
|
.ui.card,
|
|
.menu > .divider,
|
|
.ui.cards > .card,
|
|
.ui.dropdown .menu,
|
|
.ui.input > input,
|
|
.ui.menu,
|
|
.ui.segment,
|
|
.ui.segments,
|
|
.ui.segments > .segment,
|
|
.ui.selection.dropdown,
|
|
.ui.selection .menu,
|
|
.ui.selection .menu > .item,
|
|
#profile-avatar-card,
|
|
#repo-files-table,
|
|
#readme_profile,
|
|
/* Remove border on code-view lines */
|
|
.ui.table .code-diff table tbody tr,
|
|
.ui.table .code-view table tbody tr {
|
|
border: none !important;
|
|
}
|
|
overflow-menu {
|
|
border-bottom: none !important;
|
|
}
|
|
|
|
.ui.menu .item::before,
|
|
.ui.vertical.menu .item::before {
|
|
background: var(--gray-6);
|
|
}
|
|
|
|
/* Borders on tables */
|
|
.ui.table,
|
|
.ui.table tbody tr,
|
|
.ui.table thead tr {
|
|
border: 1px solid var(--gray-6);
|
|
border-color: var(--gray-6);
|
|
& td,
|
|
& th {
|
|
border: none;
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
|
|
/* Borders recolors */
|
|
.markup h1,
|
|
.markup h2,
|
|
.markup h3,
|
|
.markup h4,
|
|
.markup h5,
|
|
.markup h6,
|
|
.menu {
|
|
border-color: var(--gray-5) !important;
|
|
}
|
|
.markup hr {
|
|
background-color: var(--gray-5);
|
|
}
|
|
.divider:not(.divider-text) {
|
|
border-top-color: var(--gray-5);
|
|
}
|
|
.page-footer .right-links > a {
|
|
border-left-color: var(--gray-5);
|
|
}
|
|
.tw-border-b-secondary {
|
|
border-bottom-color: var(--gray-5) !important;
|
|
}
|
|
|
|
/* Custom labels (Requires our fork) */
|
|
.ui.label.scope-parent {
|
|
.ui.label.scope-left {
|
|
border: 1px var(--custom-color-label-bg, var(--color-label-bg)) solid !important;
|
|
}
|
|
.ui.label.scope-middle {
|
|
background-color: transparent;
|
|
color: var(--color-text) !important;
|
|
border: 1px var(--custom-color-label-bg, var(--color-label-bg)) solid !important;
|
|
border-radius: var(--border-radius);
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
}
|
|
.ui.label.scope-right {
|
|
background-color: transparent !important;
|
|
color: var(--custom-color-label-bg, var(--color-label-bg)) !important;
|
|
border: 1px var(--custom-color-label-bg, var(--color-label-bg)) solid !important;
|
|
border-left-width: 0 !important;
|
|
}
|
|
}
|
|
|
|
/* Invert emojis that are hard to read otherwise */
|
|
.emoji[aria-label="check mark"],
|
|
.emoji[aria-label="currency exchange"],
|
|
.emoji[aria-label="TOP arrow"],
|
|
.emoji[aria-label="END arrow"],
|
|
.emoji[aria-label="ON! arrow"],
|
|
.emoji[aria-label="SOON arrow"],
|
|
.emoji[aria-label="heavy dollar sign"],
|
|
.emoji[aria-label="copyright"],
|
|
.emoji[aria-label="registered"],
|
|
.emoji[aria-label="trade mark"],
|
|
.emoji[aria-label="multiply"],
|
|
.emoji[aria-label="plus"],
|
|
.emoji[aria-label="minus"],
|
|
.emoji[aria-label="divide"],
|
|
.emoji[aria-label="curly loop"],
|
|
.emoji[aria-label="double curly loop"],
|
|
.emoji[aria-label="wavy dash"],
|
|
.emoji[aria-label="paw prints"],
|
|
.emoji[aria-label="musical note"],
|
|
.emoji[aria-label="musical notes"] {
|
|
filter: invert(100%) hue-rotate(180deg);
|
|
}
|
|
|
|
.ui.basic.modal,
|
|
.ui.basic.modal > .header,
|
|
.ui.inverted.button {
|
|
color: #cdd6f4 !important;
|
|
}
|
|
|
|
#repo-topics,
|
|
#topic_edit > .ui.selection.dropdown {
|
|
color: var(--color-label-text) !important;
|
|
}
|
|
|
|
.inline-code-block {
|
|
color: #11111b;
|
|
}
|
|
|
|
::selection {
|
|
background: var(--gray-a2) !important;
|
|
}
|
|
|
|
/* Heatmap recolor */
|
|
#user-heatmap svg rect {
|
|
&[style*="var(--color-secondary-alpha-60)"] {
|
|
fill: var(--grass-2) !important;
|
|
}
|
|
&[style*="var(--color-primary-light-4)"] {
|
|
fill: var(--grass-4) !important;
|
|
}
|
|
&[style*="var(--color-primary-light-2)"] {
|
|
fill: var(--grass-6) !important;
|
|
}
|
|
&[style*="var(--color-primary)"] {
|
|
fill: var(--grass-8) !important;
|
|
}
|
|
&[style*="var(--color-primary-dark-2)"] {
|
|
fill: var(--grass-10) !important;
|
|
}
|
|
&[style*="var(--color-primary-dark-4)"] {
|
|
fill: var(--grass-12) !important;
|
|
}
|
|
}
|