first-commit
This commit is contained in:
johnabs
651
theme-custom.css
Normal file
651
theme-custom.css
Normal file
@@ -0,0 +1,651 @@
|
||||
gitea-theme-meta-info { --theme-display-name: "Codex Obscura"; }\n:root { --is-dark-theme: true; }
|
||||
/* ============================================================
|
||||
CODEX OBSCURA — Gitea Custom Theme
|
||||
Fall Palette × Dark Academia × Pixel Borders
|
||||
Matches the Hugo theme aesthetic
|
||||
============================================================ */
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=VT323&family=IM+Fell+English:ital@0;1&family=Josefin+Sans:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Courier+Prime:ital,wght@0,400;0,700;1,400&display=swap');
|
||||
|
||||
/* ── Core colour overrides ───────────────────────────────── */
|
||||
:root {
|
||||
--color-primary: #d4a228;
|
||||
--color-primary-dark: #a07818;
|
||||
--color-primary-light: #f0c040;
|
||||
--color-secondary: #c4601c;
|
||||
|
||||
--color-bg-primary: #130e07;
|
||||
--color-bg-secondary: #1c1509;
|
||||
--color-bg-tertiary: #261c0e;
|
||||
--color-bg-hover: #312414;
|
||||
|
||||
--color-primary-light-4: #3a2a14;
|
||||
--color-primary-light-3: #6a4018;
|
||||
--color-primary-light-2: #a07818;
|
||||
--color-primary-light-1: #c4881c;
|
||||
--color-primary: #d4a228;
|
||||
--color-primary-dark-1: #d4a228;
|
||||
--color-primary-dark-2: #e8b830;
|
||||
--color-primary-dark-3: #f0c040;
|
||||
--color-primary-dark-4: #f0c040;
|
||||
|
||||
--color-text-primary: #e8d5a3;
|
||||
--color-text-secondary: #c9b07a;
|
||||
--color-text-tertiary: #8a7050;
|
||||
|
||||
--color-border-primary: #5a4020;
|
||||
--color-border-secondary: #3a2a14;
|
||||
--color-border-hover: #8a6030;
|
||||
|
||||
--color-green: #4e7830;
|
||||
--color-green-light: #6a9e44;
|
||||
--color-red: #8a2e08;
|
||||
--color-red-light: #c4601c;
|
||||
--color-orange: #c4601c;
|
||||
--color-yellow: #d4a228;
|
||||
|
||||
--color-input-background: #1c1509;
|
||||
--color-input-border: #5a4020;
|
||||
|
||||
--color-menu-active: #d4a228;
|
||||
--color-link: #d4a228;
|
||||
--color-link-hover: #f0c040;
|
||||
|
||||
--color-diff-added-row: rgba(78, 120, 48, 0.15);
|
||||
--color-diff-removed-row: rgba(138, 46, 8, 0.15);
|
||||
--color-diff-added-word: rgba(78, 120, 48, 0.3);
|
||||
--color-diff-removed-word: rgba(138, 46, 8, 0.3);
|
||||
|
||||
/* shadow / glow */
|
||||
--shadow-sm: 2px 2px 0 #3a2a14;
|
||||
--shadow-md: 2px 2px 0 #5c3a18;
|
||||
}
|
||||
|
||||
/* ── Global typography ───────────────────────────────────── */
|
||||
body,
|
||||
.ui,
|
||||
input,
|
||||
textarea,
|
||||
select,
|
||||
button {
|
||||
font-family: 'Josefin Sans', sans-serif !important;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6,
|
||||
.header,
|
||||
.ui.header,
|
||||
.repository .file-header,
|
||||
.navbar .item {
|
||||
font-family: 'VT323', monospace !important;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
code, pre, .code, tt,
|
||||
.file-content,
|
||||
.diff-file-box {
|
||||
font-family: 'Courier Prime', monospace !important;
|
||||
}
|
||||
|
||||
/* ── Body & background ───────────────────────────────────── */
|
||||
body {
|
||||
background: #0b0804 !important;
|
||||
color: #e8d5a3 !important;
|
||||
}
|
||||
|
||||
/* ── Navbar ──────────────────────────────────────────────── */
|
||||
.navbar,
|
||||
#navbar {
|
||||
background: #1c1509 !important;
|
||||
border-bottom: 2px solid #5a4020 !important;
|
||||
box-shadow: 0 2px 0 #3a2a14 !important;
|
||||
}
|
||||
|
||||
.navbar .item,
|
||||
#navbar .item {
|
||||
color: #c9b07a !important;
|
||||
font-family: 'VT323', monospace !important;
|
||||
font-size: 1.1rem !important;
|
||||
letter-spacing: 0.08em !important;
|
||||
}
|
||||
|
||||
.navbar .item:hover,
|
||||
#navbar .item:hover {
|
||||
color: #d4a228 !important;
|
||||
background: #261c0e !important;
|
||||
}
|
||||
|
||||
.navbar .item.active,
|
||||
#navbar .item.active {
|
||||
color: #d4a228 !important;
|
||||
background: #312414 !important;
|
||||
}
|
||||
|
||||
/* site logo text */
|
||||
.navbar .header.item,
|
||||
#navbar .header.item {
|
||||
color: #e8d5a3 !important;
|
||||
font-size: 1.4rem !important;
|
||||
}
|
||||
|
||||
/* ── Page container ──────────────────────────────────────── */
|
||||
.page-content,
|
||||
.full.height > .left,
|
||||
.repository,
|
||||
.user,
|
||||
.org {
|
||||
background: #130e07 !important;
|
||||
}
|
||||
|
||||
/* ── Segments & cards ────────────────────────────────────── */
|
||||
.ui.segment,
|
||||
.ui.segments,
|
||||
.ui.card,
|
||||
.ui.cards > .card {
|
||||
background: #1c1509 !important;
|
||||
border: 2px solid #5a4020 !important;
|
||||
box-shadow: 2px 2px 0 #3a2a14 !important;
|
||||
border-radius: 0 !important;
|
||||
color: #c9b07a !important;
|
||||
}
|
||||
|
||||
.ui.segment:hover,
|
||||
.ui.card:hover {
|
||||
border-color: #a07818 !important;
|
||||
}
|
||||
|
||||
/* ── Menus & dropdowns ───────────────────────────────────── */
|
||||
.ui.menu,
|
||||
.ui.dropdown .menu {
|
||||
background: #1c1509 !important;
|
||||
border: 2px solid #5a4020 !important;
|
||||
border-radius: 0 !important;
|
||||
box-shadow: 2px 2px 0 #3a2a14 !important;
|
||||
}
|
||||
|
||||
.ui.menu .item,
|
||||
.ui.dropdown .menu .item {
|
||||
color: #c9b07a !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
.ui.menu .item:hover,
|
||||
.ui.dropdown .menu .item:hover {
|
||||
background: #261c0e !important;
|
||||
color: #d4a228 !important;
|
||||
}
|
||||
|
||||
.ui.menu .active.item,
|
||||
.ui.menu .item.active {
|
||||
background: #312414 !important;
|
||||
color: #d4a228 !important;
|
||||
border-color: #a07818 !important;
|
||||
}
|
||||
|
||||
/* tabular menu */
|
||||
.ui.tabular.menu .active.item {
|
||||
background: #130e07 !important;
|
||||
border-color: #5a4020 !important;
|
||||
border-bottom-color: #130e07 !important;
|
||||
color: #d4a228 !important;
|
||||
}
|
||||
|
||||
/* ── Buttons ─────────────────────────────────────────────── */
|
||||
.ui.button,
|
||||
.ui.buttons .button {
|
||||
background: #261c0e !important;
|
||||
color: #c9b07a !important;
|
||||
border: 2px solid #5a4020 !important;
|
||||
border-radius: 0 !important;
|
||||
box-shadow: 2px 2px 0 #3a2a14 !important;
|
||||
font-family: 'VT323', monospace !important;
|
||||
font-size: 1rem !important;
|
||||
letter-spacing: 0.06em !important;
|
||||
transition: all 150ms ease !important;
|
||||
}
|
||||
|
||||
.ui.button:hover {
|
||||
background: #312414 !important;
|
||||
border-color: #a07818 !important;
|
||||
color: #d4a228 !important;
|
||||
transform: translate(-1px, -1px) !important;
|
||||
box-shadow: 3px 3px 0 #3a2a14 !important;
|
||||
}
|
||||
|
||||
.ui.primary.button,
|
||||
.ui.green.button {
|
||||
background: #a07818 !important;
|
||||
color: #0b0804 !important;
|
||||
border-color: #d4a228 !important;
|
||||
}
|
||||
|
||||
.ui.primary.button:hover,
|
||||
.ui.green.button:hover {
|
||||
background: #d4a228 !important;
|
||||
}
|
||||
|
||||
.ui.red.button,
|
||||
.ui.negative.button {
|
||||
background: #5a1a08 !important;
|
||||
color: #e8d5a3 !important;
|
||||
border-color: #8a2e08 !important;
|
||||
}
|
||||
|
||||
.ui.red.button:hover {
|
||||
background: #8a2e08 !important;
|
||||
}
|
||||
|
||||
/* ── Inputs & forms ──────────────────────────────────────── */
|
||||
.ui.input input,
|
||||
.ui.form input,
|
||||
.ui.form textarea,
|
||||
.ui.form select,
|
||||
input[type="text"],
|
||||
input[type="password"],
|
||||
input[type="email"],
|
||||
input[type="search"],
|
||||
textarea,
|
||||
select {
|
||||
background: #1c1509 !important;
|
||||
border: 2px solid #5a4020 !important;
|
||||
border-radius: 0 !important;
|
||||
color: #e8d5a3 !important;
|
||||
font-family: 'Josefin Sans', sans-serif !important;
|
||||
}
|
||||
|
||||
.ui.input input:focus,
|
||||
.ui.form input:focus,
|
||||
.ui.form textarea:focus {
|
||||
border-color: #a07818 !important;
|
||||
outline: none !important;
|
||||
box-shadow: 0 0 0 2px rgba(212, 162, 40, 0.15) !important;
|
||||
}
|
||||
|
||||
/* ── Labels & badges ─────────────────────────────────────── */
|
||||
.ui.label,
|
||||
.ui.labels .label {
|
||||
background: #261c0e !important;
|
||||
border: 2px solid #5a4020 !important;
|
||||
border-radius: 0 !important;
|
||||
color: #c9b07a !important;
|
||||
font-family: 'VT323', monospace !important;
|
||||
letter-spacing: 0.06em !important;
|
||||
}
|
||||
|
||||
/* issue labels */
|
||||
.label[style] {
|
||||
border-radius: 0 !important;
|
||||
font-family: 'VT323', monospace !important;
|
||||
letter-spacing: 0.06em !important;
|
||||
}
|
||||
|
||||
/* open/closed badges */
|
||||
.ui.green.label, .issue-state-label.open {
|
||||
background: #2a4a18 !important;
|
||||
border-color: #4e7830 !important;
|
||||
color: #6a9e44 !important;
|
||||
}
|
||||
|
||||
.ui.red.label, .issue-state-label.closed {
|
||||
background: #3a1008 !important;
|
||||
border-color: #8a2e08 !important;
|
||||
color: #c4601c !important;
|
||||
}
|
||||
|
||||
.ui.purple.label, .ui.violet.label {
|
||||
background: #2a1a3a !important;
|
||||
border-color: #5a3a7a !important;
|
||||
color: #c9b0e8 !important;
|
||||
}
|
||||
|
||||
/* ── Repository list items ───────────────────────────────── */
|
||||
.repository.list .item,
|
||||
.explore .list .item {
|
||||
border-bottom: 1px solid #3a2a14 !important;
|
||||
padding: 1rem !important;
|
||||
transition: background 150ms ease !important;
|
||||
}
|
||||
|
||||
.repository.list .item:hover,
|
||||
.explore .list .item:hover {
|
||||
background: #1c1509 !important;
|
||||
}
|
||||
|
||||
/* repo name link */
|
||||
.repository.list .item .header a,
|
||||
.explore .list .item .header a {
|
||||
color: #d4a228 !important;
|
||||
font-family: 'VT323', monospace !important;
|
||||
font-size: 1.2rem !important;
|
||||
}
|
||||
|
||||
.repository.list .item .header a:hover {
|
||||
color: #f0c040 !important;
|
||||
}
|
||||
|
||||
/* ── File tree / code browser ────────────────────────────── */
|
||||
.repository .file-list,
|
||||
.repository .code-view {
|
||||
background: #130e07 !important;
|
||||
}
|
||||
|
||||
.repository .file-list .item,
|
||||
.repository .files tr {
|
||||
border-bottom: 1px solid #3a2a14 !important;
|
||||
}
|
||||
|
||||
.repository .files tr:hover {
|
||||
background: #1c1509 !important;
|
||||
}
|
||||
|
||||
.repository .files .icon {
|
||||
color: #8a6030 !important;
|
||||
}
|
||||
|
||||
.repository .files .name a {
|
||||
color: #c9b07a !important;
|
||||
}
|
||||
|
||||
.repository .files .name a:hover {
|
||||
color: #d4a228 !important;
|
||||
}
|
||||
|
||||
/* commit message */
|
||||
.repository .files .message a {
|
||||
color: #8a7050 !important;
|
||||
}
|
||||
|
||||
.repository .files .message a:hover {
|
||||
color: #c9b07a !important;
|
||||
}
|
||||
|
||||
/* ── Diff view ───────────────────────────────────────────── */
|
||||
.diff-file-box {
|
||||
border: 2px solid #5a4020 !important;
|
||||
border-radius: 0 !important;
|
||||
margin-bottom: 1rem !important;
|
||||
}
|
||||
|
||||
.diff-file-box .file-header {
|
||||
background: #261c0e !important;
|
||||
border-bottom: 2px solid #5a4020 !important;
|
||||
color: #c9b07a !important;
|
||||
padding: 0.5rem 1rem !important;
|
||||
}
|
||||
|
||||
.diff-file-box .file-header .file-header-title {
|
||||
color: #d4a228 !important;
|
||||
font-family: 'Courier Prime', monospace !important;
|
||||
}
|
||||
|
||||
.code-diff tr.added td {
|
||||
background: rgba(78, 120, 48, 0.12) !important;
|
||||
}
|
||||
|
||||
.code-diff tr.deleted td {
|
||||
background: rgba(138, 46, 8, 0.12) !important;
|
||||
}
|
||||
|
||||
.code-diff td.lines-num {
|
||||
background: #1c1509 !important;
|
||||
color: #5a4830 !important;
|
||||
border-right: 1px solid #3a2a14 !important;
|
||||
}
|
||||
|
||||
/* ── Code blocks ─────────────────────────────────────────── */
|
||||
.code-view .lines-code,
|
||||
pre, code {
|
||||
background: #0b0804 !important;
|
||||
color: #e8d5a3 !important;
|
||||
}
|
||||
|
||||
/* ── Issue & PR list ─────────────────────────────────────── */
|
||||
.issue.list .item,
|
||||
.pulls.list .item {
|
||||
border-bottom: 1px solid #3a2a14 !important;
|
||||
padding: 0.75rem 0 !important;
|
||||
}
|
||||
|
||||
.issue.list .item:hover {
|
||||
background: #1c1509 !important;
|
||||
}
|
||||
|
||||
.issue.list .item .title,
|
||||
.pulls.list .item .title {
|
||||
color: #e8d5a3 !important;
|
||||
font-family: 'Josefin Sans', sans-serif !important;
|
||||
}
|
||||
|
||||
.issue.list .item .title:hover {
|
||||
color: #d4a228 !important;
|
||||
}
|
||||
|
||||
/* ── Comments ────────────────────────────────────────────── */
|
||||
.comment .content {
|
||||
background: #1c1509 !important;
|
||||
border: 2px solid #5a4020 !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
.comment .content .header {
|
||||
background: #261c0e !important;
|
||||
border-bottom: 2px solid #5a4020 !important;
|
||||
color: #8a7050 !important;
|
||||
}
|
||||
|
||||
.comment .content .header .author {
|
||||
color: #d4a228 !important;
|
||||
font-family: 'VT323', monospace !important;
|
||||
font-size: 1.1rem !important;
|
||||
}
|
||||
|
||||
/* ── Activity feed ───────────────────────────────────────── */
|
||||
.feeds .news .desc {
|
||||
color: #c9b07a !important;
|
||||
}
|
||||
|
||||
.feeds .news .time {
|
||||
color: #5a4830 !important;
|
||||
}
|
||||
|
||||
/* ── User profile ────────────────────────────────────────── */
|
||||
.user.profile .ui.card {
|
||||
background: #1c1509 !important;
|
||||
}
|
||||
|
||||
.user.profile .ui.card .extra {
|
||||
border-top: 1px solid #3a2a14 !important;
|
||||
}
|
||||
|
||||
/* ── Markdown rendered content ───────────────────────────── */
|
||||
.markup,
|
||||
.markdown {
|
||||
color: #c9b07a !important;
|
||||
}
|
||||
|
||||
.markup h1, .markup h2, .markup h3,
|
||||
.markup h4, .markup h5, .markup h6,
|
||||
.markdown h1, .markdown h2, .markdown h3 {
|
||||
font-family: 'VT323', monospace !important;
|
||||
color: #f0c040 !important;
|
||||
border-bottom: 1px solid #3a2a14 !important;
|
||||
letter-spacing: 0.05em !important;
|
||||
}
|
||||
|
||||
.markup a, .markdown a {
|
||||
color: #d4a228 !important;
|
||||
border-bottom: 1px solid #a07818 !important;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
.markup a:hover, .markdown a:hover {
|
||||
color: #f0c040 !important;
|
||||
}
|
||||
|
||||
.markup blockquote, .markdown blockquote {
|
||||
background: #1c1509 !important;
|
||||
border-left: 4px solid #a07818 !important;
|
||||
color: #8a7050 !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
.markup table th, .markdown table th {
|
||||
background: #261c0e !important;
|
||||
color: #d4a228 !important;
|
||||
border: 1px solid #5a4020 !important;
|
||||
font-family: 'VT323', monospace !important;
|
||||
}
|
||||
|
||||
.markup table td, .markdown table td {
|
||||
border: 1px solid #3a2a14 !important;
|
||||
color: #c9b07a !important;
|
||||
}
|
||||
|
||||
.markup table tr:nth-child(even) td,
|
||||
.markdown table tr:nth-child(even) td {
|
||||
background: #1c1509 !important;
|
||||
}
|
||||
|
||||
/* ── Dividers ────────────────────────────────────────────── */
|
||||
.ui.divider {
|
||||
border-color: #3a2a14 !important;
|
||||
}
|
||||
|
||||
/* ── Pagination ──────────────────────────────────────────── */
|
||||
.ui.pagination.menu .item {
|
||||
background: #1c1509 !important;
|
||||
color: #8a7050 !important;
|
||||
border: 2px solid #3a2a14 !important;
|
||||
border-radius: 0 !important;
|
||||
min-width: 2.5rem !important;
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
.ui.pagination.menu .item:hover {
|
||||
background: #261c0e !important;
|
||||
color: #d4a228 !important;
|
||||
border-color: #a07818 !important;
|
||||
}
|
||||
|
||||
.ui.pagination.menu .active.item {
|
||||
background: #312414 !important;
|
||||
color: #d4a228 !important;
|
||||
border-color: #a07818 !important;
|
||||
}
|
||||
|
||||
/* ── Footer ──────────────────────────────────────────────── */
|
||||
#footer {
|
||||
background: #0b0804 !important;
|
||||
border-top: 2px solid #3a2a14 !important;
|
||||
color: #5a4830 !important;
|
||||
}
|
||||
|
||||
#footer a {
|
||||
color: #8a7050 !important;
|
||||
}
|
||||
|
||||
#footer a:hover {
|
||||
color: #d4a228 !important;
|
||||
}
|
||||
|
||||
/* ── Scrollbar ───────────────────────────────────────────── */
|
||||
::-webkit-scrollbar { width: 8px; height: 8px; }
|
||||
::-webkit-scrollbar-track { background: #0b0804; }
|
||||
::-webkit-scrollbar-thumb { background: #5c3a18; border: 2px solid #1c1509; }
|
||||
::-webkit-scrollbar-thumb:hover { background: #a07818; }
|
||||
|
||||
/* ── Links globally ──────────────────────────────────────── */
|
||||
a {
|
||||
color: #d4a228 !important;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #f0c040 !important;
|
||||
}
|
||||
|
||||
/* ── Statistic numbers ───────────────────────────────────── */
|
||||
.ui.statistic .value {
|
||||
color: #d4a228 !important;
|
||||
font-family: 'VT323', monospace !important;
|
||||
}
|
||||
|
||||
.ui.statistic .label {
|
||||
color: #8a7050 !important;
|
||||
font-family: 'Josefin Sans', sans-serif !important;
|
||||
}
|
||||
|
||||
/* ── Flash/alert messages ────────────────────────────────── */
|
||||
.ui.positive.message, .ui.success.message {
|
||||
background: #1a3010 !important;
|
||||
border-color: #4e7830 !important;
|
||||
color: #6a9e44 !important;
|
||||
}
|
||||
|
||||
.ui.negative.message, .ui.error.message {
|
||||
background: #2a0e08 !important;
|
||||
border-color: #8a2e08 !important;
|
||||
color: #c4601c !important;
|
||||
}
|
||||
|
||||
.ui.warning.message {
|
||||
background: #2a1e08 !important;
|
||||
border-color: #a07818 !important;
|
||||
color: #d4a228 !important;
|
||||
}
|
||||
|
||||
.ui.info.message {
|
||||
background: #0e1a2a !important;
|
||||
border-color: #2a5a8a !important;
|
||||
color: #7ab0d4 !important;
|
||||
}
|
||||
|
||||
/* ── Selection ───────────────────────────────────────────── */
|
||||
::selection {
|
||||
background: #a07818 !important;
|
||||
color: #0b0804 !important;
|
||||
}
|
||||
/* Clone panel / dropdown background */
|
||||
.clone-panel,
|
||||
.clone-panel-tab,
|
||||
.clone-panel-field,
|
||||
.clone-panel-list,
|
||||
.flex-items-block {
|
||||
background: var(--color-box-body, #1c1509) !important;
|
||||
color: var(--color-text, #e8d5a3) !important;
|
||||
}
|
||||
|
||||
.clone-panel .item,
|
||||
.clone-panel-tab .item {
|
||||
color: var(--color-text, #c9b07a) !important;
|
||||
}
|
||||
|
||||
.clone-panel-tab .item.active {
|
||||
color: var(--color-primary, #d4a228) !important;
|
||||
border-bottom: 2px solid var(--color-primary, #d4a228) !important;
|
||||
}
|
||||
|
||||
.clone-panel input {
|
||||
background: var(--color-input-background, #130e07) !important;
|
||||
color: var(--color-text, #e8d5a3) !important;
|
||||
border: 1px solid var(--color-border-primary, #3a2a14) !important;
|
||||
}
|
||||
|
||||
.divider {
|
||||
border-color: var(--color-border-primary, #3a2a14) !important;
|
||||
}
|
||||
|
||||
.clone-panel-popup {
|
||||
background: #1c1509 !important;
|
||||
border: 1px solid #3a2a14 !important;
|
||||
box-shadow: 2px 2px 0 #0b0804 !important;
|
||||
}
|
||||
.tippy-content,
|
||||
.tippy-box {
|
||||
background: #1c1509 !important;
|
||||
border: 1px solid #3a2a14 !important;
|
||||
box-shadow: 2px 2px 0 #0b0804 !important;
|
||||
color: #e8d5a3 !important;
|
||||
}
|
||||
|
||||
.tippy-arrow {
|
||||
color: #1c1509 !important;
|
||||
}
|
||||
Reference in New Issue
Block a user