Skip to content

Commit eedc795

Browse files
fnetXfnetX
committed
CB/design: Migrate codeberg.css into a custom theme & add codeberg-dark
1 parent 9e629b1 commit eedc795

File tree

5 files changed

+200
-0
lines changed

5 files changed

+200
-0
lines changed

‎web_src/less/themes/codeberg/base-brand.less‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
.following.bar, #navbar {
2+
/* Change navbar color scheme to match Codeberg's brand */
3+
background-color: var(--color-primary);
4+
border-bottom: none !important;
5+
}
6+
7+
.following.bar .menu.stackable>.item, .following.bar .ui.container>.item {
8+
/* Use white text for navbar buttons */
9+
color: #fff !important;
10+
}
11+
#navbar-expand-toggle {
12+
/* Fix contrast for the mobile menu button */
13+
--color-light-border: rgba(255,255,255,0.5);
14+
--color-text-light: #fff;
15+
}
16+
* {
17+
/* Revert changes to browser scrollbar */
18+
scrollbar-width: initial;
19+
scrollbar-color: initial;
20+
}
21+

‎web_src/less/themes/codeberg/dark-variables.less‎

Lines changed: 160 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,160 @@
1+
:root {
2+
--color-primary: #2185d0; /* from brand palette */
3+
--color-primary-alpha-10: #2185d019;
4+
--color-primary-alpha-20: #2185d033;
5+
--color-primary-alpha-30: #2185d04b;
6+
--color-primary-alpha-40: #2185d066;
7+
--color-primary-alpha-50: #2185d080;
8+
--color-primary-alpha-60: #2185d099;
9+
--color-primary-alpha-70: #2185d0b3;
10+
--color-primary-alpha-80: #2185d0cc;
11+
--color-primary-alpha-90: #2185d0e1;
12+
13+
--color-primary-light-1: #1e78bb; /* 10% shade steps, AA contrast with white text */
14+
--color-primary-light-2: #1a6aa6;
15+
--color-primary-light-3: #175d92;
16+
--color-primary-light-4: #14507d;
17+
--color-primary-light-5: #114368;
18+
--color-primary-light-6: #0d3553;
19+
--color-primary-light-7: #0a283e;
20+
21+
--color-primary-dark-1: #3d94d6; /* 12.5% tint steps */
22+
--color-primary-dark-2: #59a4dc;
23+
--color-primary-dark-3: #74b3e2;
24+
--color-primary-dark-4: #90c2e8;
25+
--color-primary-dark-5: #acd1ed;
26+
--color-primary-dark-6: #c8e1f3;
27+
--color-primary-dark-7: #e3f0f9;
28+
29+
--color-secondary: #082437; /* 25% shade steps from dark-1 */
30+
--color-secondary-alpha-10: #08243719;
31+
--color-secondary-alpha-20: #08243733;
32+
--color-secondary-alpha-30: #0824374b;
33+
--color-secondary-alpha-40: #08243766;
34+
--color-secondary-alpha-50: #08243780;
35+
--color-secondary-alpha-60: #08243799;
36+
--color-secondary-alpha-70: #082437b3;
37+
--color-secondary-alpha-80: #082437cc;
38+
--color-secondary-alpha-90: #082437e1;
39+
40+
--color-secondary-light-1: #061825; /* 50% shade from dark-1, AA contrast with brand color for text */
41+
--color-secondary-light-2: #04121b; /* 62.5% shade from dark-1 */
42+
--color-secondary-light-3: #030c12; /* 75% shade from dark-1 */
43+
--color-secondary-light-4: #010609; /* 87.5% shade from dark-1 */
44+
45+
--color-secondary-dark-1: #0b3049; /* from brand palette */
46+
--color-secondary-dark-2: #1d4057; /* 7.5% tint steps */
47+
--color-secondary-dark-3: #304f64;
48+
--color-secondary-dark-4: #425f72;
49+
--color-secondary-dark-5: #546e80;
50+
--color-secondary-dark-6: #677e8d;
51+
--color-secondary-dark-7: #798d9b;
52+
--color-secondary-dark-8: #8b9da9;
53+
--color-secondary-dark-9: #9dacb6;
54+
--color-secondary-dark-10: #b0bcc4;
55+
--color-secondary-dark-11: #c2cbd2;
56+
--color-secondary-dark-12: #d4dbdf;
57+
--color-secondary-dark-13: #e7eaed;
58+
59+
--color-diff-inactive: #353846; /* TODO */
60+
--color-body: var(--color-secondary-light-3);
61+
--color-box-header: var(--color-secondary-light-1);
62+
--color-box-body: var(--color-secondary-light-2);
63+
--color-text-dark: #fff;
64+
--color-text: var(--color-secondary-dark-12);
65+
--color-text-light: var(--color-secondary-dark-9);
66+
--color-text-light-2: var(--color-secondary-dark-6);
67+
--color-text-light-3: var(--color-secondary-dark-3);
68+
--color-footer: var(--color-secondary-light-4);
69+
--color-timeline: var(--color-secondary);
70+
--color-input-text: var(--color-text-dark);
71+
--color-input-background: var(--color-secondary);
72+
--color-input-border: var(--color-secondary-dark-2);
73+
--color-input-border-hover: var(--color-primary);
74+
--color-navbar: var(--color-secondary); /* not the main navbar, but for e.g. repo header */
75+
--color-menu: var(--color-secondary-light-1);
76+
--color-card: var(--color-secondary-light-1);
77+
--color-markup-code-block: var(--color-secondary);
78+
--color-light: var(--color-secondary-dark-2);
79+
--color-light-border: var(--color-secondary-dark-4);
80+
--color-hover: var(--color-secondary-dark-3);
81+
--color-active: var(--color-secondary);
82+
--color-button: var(--color-secondary-dark-2);
83+
--color-code-bg: var(--color-secondary-light-2);
84+
--color-code-sidebar-bg: var(--color-secondary-light-3);
85+
--color-secondary-bg: var(--color-secondary-light-2);
86+
--color-expand-button: var(--color-secondary-dark-3);
87+
--color-placeholder-text: var(--color-text-light-2);
88+
}
89+
90+
.ui.horizontal.segments > .segment {
91+
background-color: var(--color-secondary-light-3);
92+
}
93+
[data-tooltip]:before, [data-tooltip]:after {
94+
background: #1b1c1d !important;
95+
border-color: #1b1c1d !important;
96+
color: #dbdbdb !important;
97+
}
98+
[data-tooltip]:before {
99+
box-shadow: 1px 1px #1b1c1d !important;
100+
}
101+
.feeds .list ul li.private {
102+
background: var(--color-secondary-dark-2)
103+
}
104+
.form .help {
105+
color: #7f8699
106+
}
107+
.ui .text.light.grey {
108+
color: #7f8699 !important
109+
}
110+
.ui.search > .results {
111+
background: var(--color-secondary-dark-3);
112+
}
113+
.repository.file.list #repo-files-table tr {
114+
background: var(--color-secondary-light-1);
115+
}
116+
.repository.file.list #repo-files-table tr:hover {
117+
background-color: var(--color-secondary-dark-1) !important
118+
}
119+
.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 {
120+
background: var(--color-secondary-dark-2)
121+
}
122+
.ui.green.button, .ui.green.buttons .button {
123+
background-color: #21ba45;
124+
}
125+
.ui.green.button:hover, .ui.green.buttons .button:hover {
126+
background-color: #16ab39
127+
}
128+
129+
/** TODO: ??? **/
130+
.tag-code, .tag-code td {
131+
background: var(--color-secondary-dark-2) !important
132+
}
133+
.tag-code td.lines-num {
134+
background-color: var(--color-secondary-dark-3) !important
135+
}
136+
.ui.attached.info.message, .ui.info.message {
137+
box-shadow: 0 0 0 1px #4b5e71 inset, 0 0 transparent
138+
}
139+
.ui.active.label {
140+
background: #393d4a;
141+
border-color: #393d4a;
142+
color: #dbdbdb
143+
}
144+
.ui.modal > .content {
145+
background: var(--color-secondary-dark-3);
146+
}
147+
.minicolors-panel {
148+
border-color: #6a737d !important
149+
}
150+
.repository.release #release-list > li .detail .dot {
151+
background-color: #505667;
152+
border-color: #383c4a
153+
}
154+
#git-graph-container .ui.buttons button#flow-color-monochrome.ui.button {
155+
/* TODO: a button there is white for some reason?! */
156+
border-left-color: #4c505c;
157+
}
158+
.is-loading:after {
159+
border-color: #4a4c58 #4a4c58 #d7d7da #d7d7da
160+
}

‎web_src/less/themes/theme-codeberg-auto.less‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
/* Basic styles for Codeberg */
2+
@import "codeberg/base-brand.less";
3+
4+
@media (prefers-color-scheme: dark) {
5+
/* Arc-Green based dark theme */
6+
@import "theme-arc-green.less";
7+
@import "codeberg/dark-variables.less";
8+
}
9+

‎web_src/less/themes/theme-codeberg-dark.less‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
/* Basic styles for Codeberg */
2+
@import "codeberg/base-brand.less";
3+
4+
/* Arc-Green based dark theme */
5+
@import "theme-arc-green.less";
6+
@import "codeberg/dark-variables.less";
7+

‎web_src/less/themes/theme-codeberg-light.less‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
/* Basic styles for Codeberg */
2+
@import "codeberg/base-brand.less";
3+

0 commit comments

Comments
 (0)