1
0
Fork 0
codeberg-forgejo/web_src/css/themes/codeberg/dark-variables.css

168 lines
6.2 KiB
CSS

:root {
--color-primary: #4793cc; /* from brand palette, brightened for readability */
--color-primary-alpha-10: #2185d019;
--color-primary-alpha-20: #2185d033;
--color-primary-alpha-30: #2185d04b;
--color-primary-alpha-40: #2185d066;
--color-primary-alpha-50: #2185d080;
--color-primary-alpha-60: #2185d099;
--color-primary-alpha-70: #2185d0b3;
--color-primary-alpha-80: #2185d0cc;
--color-primary-alpha-90: #2185d0e1;
--color-primary-light-1: #1e78bb; /* 10% shade steps, AA contrast with white text */
--color-primary-light-2: #1a6aa6;
--color-primary-light-3: #175d92;
--color-primary-light-4: #14507d;
--color-primary-light-5: #114368;
--color-primary-light-6: #0d3553;
--color-primary-light-7: #0a283e;
--color-primary-dark-1: #3d94d6; /* 12.5% tint steps */
--color-primary-dark-2: #59a4dc;
--color-primary-dark-3: #74b3e2;
--color-primary-dark-4: #90c2e8;
--color-primary-dark-5: #acd1ed;
--color-primary-dark-6: #c8e1f3;
--color-primary-dark-7: #e3f0f9;
--color-secondary: #082437; /* 25% shade steps from dark-1 */
--color-secondary-alpha-10: #08243719;
--color-secondary-alpha-20: #08243733;
--color-secondary-alpha-30: #0824374b;
--color-secondary-alpha-40: #08243766;
--color-secondary-alpha-50: #08243780;
--color-secondary-alpha-60: #08243799;
--color-secondary-alpha-70: #082437b3;
--color-secondary-alpha-80: #082437cc;
--color-secondary-alpha-90: #082437e1;
--color-secondary-light-1: #061825; /* 50% shade from dark-1, AA contrast with brand color for text */
--color-secondary-light-2: #04121b; /* 62.5% shade from dark-1 */
--color-secondary-light-3: #0c1a24; /* 75% shade from dark-1, then brightened for less eye strain */
--color-secondary-light-4: #010609; /* 87.5% shade from dark-1 */
--color-secondary-dark-1: #0b3049; /* from brand palette */
--color-secondary-dark-2: #1d4057; /* 7.5% tint steps */
--color-secondary-dark-3: #304f64;
--color-secondary-dark-4: #425f72;
--color-secondary-dark-5: #546e80;
--color-secondary-dark-6: #677e8d;
--color-secondary-dark-7: #798d9b;
--color-secondary-dark-8: #8b9da9;
--color-secondary-dark-9: #9dacb6;
--color-secondary-dark-10: #b0bcc4;
--color-secondary-dark-11: #c2cbd2;
--color-secondary-dark-12: #d4dbdf;
--color-secondary-dark-13: #e7eaed;
--color-diff-inactive: #353846; /* TODO */
--color-body: var(--color-secondary-light-3);
--color-box-header: var(--color-secondary-light-1);
--color-box-body: var(--color-secondary-light-2);
--color-text-dark: #fff;
--color-text: var(--color-secondary-dark-12);
--color-text-light: var(--color-secondary-dark-9);
--color-text-light-2: var(--color-secondary-dark-6);
--color-text-light-3: var(--color-secondary-dark-3);
--color-footer: var(--color-secondary-light-4);
--color-timeline: var(--color-secondary);
--color-input-text: var(--color-text-dark);
--color-input-background: var(--color-secondary);
--color-input-border: var(--color-secondary-dark-2);
--color-input-border-hover: var(--color-primary);
--color-navbar: #1b2c40; /* not the main navbar, but for e.g. repo header. brightened from --color-secondary for tab contrast. */
--color-menu: var(--color-secondary-light-1);
--color-card: var(--color-secondary-light-1);
--color-markup-code-block: var(--color-secondary);
--color-light: var(--color-secondary-dark-2);
--color-light-border: var(--color-secondary-dark-4);
--color-hover: var(--color-secondary-dark-3);
--color-active: var(--color-secondary);
--color-button: var(--color-secondary-dark-2);
--color-code-bg: var(--color-secondary-light-2);
--color-code-sidebar-bg: var(--color-secondary-light-3);
--color-secondary-bg: var(--color-secondary-light-2);
--color-expand-button: var(--color-secondary-dark-3);
--color-placeholder-text: var(--color-text-light-2);
--color-nav-hover-bg: var(--color-secondary-dark-3);
}
.ui.horizontal.segments > .segment {
background-color: var(--color-secondary-light-3);
}
[data-tooltip]:before, [data-tooltip]:after {
background: #1b1c1d !important;
border-color: #1b1c1d !important;
color: #dbdbdb !important;
}
[data-tooltip]:before {
box-shadow: 1px 1px #1b1c1d !important;
}
.feeds .list ul li.private {
background: var(--color-secondary-dark-2)
}
.form .help {
color: #7f8699
}
.ui .text.light.grey {
color: #7f8699 !important
}
.ui.search > .results {
background: var(--color-secondary-dark-3);
}
.repository.file.list #repo-files-table tr {
background: var(--color-secondary-light-1);
}
.repository.file.list #repo-files-table tr:hover {
background-color: var(--color-secondary-dark-1) !important
}
.repository.file.editor.edit .editor-preview, .repository.wiki.new .CodeMirror .editor-preview, .repository.file.editor.edit .editor-preview-side, .repository.wiki.new .CodeMirror .editor-preview-side, .repository.file.editor.edit + .editor-preview-side, .repository.wiki.new .CodeMirror + .editor-preview-side {
background: var(--color-secondary-dark-2)
}
.ui.green.button, .ui.green.buttons .button {
background-color: #21ba45;
}
.ui.green.button:hover, .ui.green.buttons .button:hover {
background-color: #16ab39
}
.ui.tertiary.button {
color: #fff9;
&:hover {
color: #ccc;
}
}
/** TODO: ??? **/
.tag-code, .tag-code td {
background: var(--color-secondary-dark-2) !important
}
.tag-code td.lines-num {
background-color: var(--color-secondary-dark-3) !important
}
.ui.attached.info.message, .ui.info.message {
box-shadow: 0 0 0 1px #4b5e71 inset, 0 0 transparent
}
.ui.active.label {
background: #393d4a;
border-color: #393d4a;
color: #dbdbdb
}
.ui.modal > .content {
background: var(--color-secondary-dark-3);
}
.minicolors-panel {
border-color: #6a737d !important
}
.repository.release #release-list > li .detail .dot {
background-color: #505667;
border-color: #383c4a
}
#git-graph-container .ui.buttons button#flow-color-monochrome.ui.button {
/* TODO: a button there is white for some reason?! */
border-left-color: #4c505c;
}
.is-loading:after {
border-color: #4a4c58 #4a4c58 #d7d7da #d7d7da
}