:root { --is-dark-theme: true; --border-radius: 6px; --color-white: #e6edf3; --color-red: #da3633; --color-orange: #c9510c; --color-yellow: #d29922; --color-blue: #4493f8; --color-purple: #8957e5; --color-green: #238636; --color-green-light: #16ab39; --color-primary: var(--color-green); --color-primary-hover: #29903b; --color-primary-active: #2e9a40; --color-primary-light-4: #0e4429; --color-primary-light-2: #006d32; --color-primary-dark-2: #26a641; --color-primary-dark-4: #39d353; --color-primary-contrast: #ffffff; --color-secondary: #30363d; --color-secondary-alpha-60: #161b22; --color-secondary-alpha-40: rgba(48, 54, 61, 0.4); --color-secondary-bg: #30363d; --color-light-border: var(--color-secondary); --color-body: #0d1117; --color-card: var(--color-body); --color-navbar: #010409; --color-footer: #161b22; --color-text: #bbc0ca; --color-text-dark: #bbc0ca; --color-text-light: #a6aab5; --color-text-light-1: #848d97; --color-text-light-2: #a6aab5; --color-timeline: #21262d; --color-grey-light: var(--color-text-light); --color-box-body: #22272e; --color-markup-code-block: #636e7b66; --color-light: #22272e; --color-button: #22272e; --color-expand-button: var(--color-body); --color-input-background: #22272e; --color-input-border-hover: var(--color-secondary); --color-input-text: #adbac7; --color-box-header: #22272e; --color-active: #22272e; --color-active-line: #272114; --color-menu: #161b22; --color-caret: var(--color-text); --color-box-body: var(--color-body); --color-box-header: #161b22; --color-nav-bg: #010409; --color-header-wrapper: #010409; --color-nav-hover-bg: rgba(177, 186, 196, 0.12); --color-hover: #292e36; --color-label-bg: rgba(56, 139, 253, 0.1); --color-label-hover-bg: #1f6feb; --color-label-text: var(--color-blue); --color-error-bg: #b62324; --color-error-border: #f8514966; --color-error-text: var(--color-white); --color-success-bg: #122117; --color-success-border: #2ea04366; --color-success-text: var(--color-green); --color-info-bg: rgba(56, 139, 253, 0.1); --color-info-border: rgba(56, 139, 253, 0.4); --color-info-text: var(--color-blue); --color-warning-bg: rgba(187, 128, 9, 0.1); --color-warning-border: rgba(187, 128, 9, 0.4); --color-warning-text: var(--color-yellow); /* code editor colors are set in https://github.com/go-gitea/gitea/blob/f5b300ea77081a1b78ac044cb1c0f9225538d091/web_src/js/features/codeeditor.js#L82-L97. */ /* monaco editor dark theme is toggled via variable `--is-dark-theme` */ --color-primary-light-3: #71798e; --color-editor-line-highlight: var(--color-body); --color-code-bg: var(--color-body); --color-diff-removed-row-bg: rgba(248, 81, 73, 0.15); --color-diff-removed-row-border: rgba(248, 81, 73, 0.3); --color-diff-removed-word-bg: rgba(248, 81, 73, 0.4); --color-diff-added-row-bg: rgba(46, 160, 67, 0.15); --color-diff-added-row-border: rgba(46, 160, 67, 0.3); --color-diff-added-word-bg: rgba(46, 160, 67, 0.4); --color-diff-inactive: var(--color-secondary-alpha-60); } .text.primary, .flex-item a:not(.label, .button):hover { color: var(--color-blue) !important; } .svg:not(.text) { fill: var(--color-text-light-1); } .label > .svg, .btn > .svg, .button > .svg, .badge.gt-text-white > .svg, .card > .svg, a:not(.item):hover > .svg, .dropdown:hover .svg, .ui.attached.menu:not(.new-menu) .item .svg { fill: currentColor; } .markdown-toolbar-button:hover { background-color: var(--color-secondary); border-radius: var(--border-radius); } .page-content.dashboard, .page-content.explore, .page-content.repository:not(.new), .page-content.signin { margin-top: 10px; } .ui.list .list > .item > .content, .ui.list > .item > .content { color: unset; } .ui.list .list > .item .description, .ui.list > .item .description { color: var(--color-text); } .ui.repository.list, .ui.user.list { background: var(--color-box-header); padding: 1em; border-radius: 0.75em; } .ui.avatar:not(.org-avatar) { border-radius: 50% !important; box-shadow: 0 0 0 1px var(--color-secondary); } .ui.header .sub.header { color: #636e7b; } .ui.modal > .actions { background: var(--color-body) !important; } .ui.green.buttons .button, .ui.green.button { background-color: #347d39; color: #cdd9e5 !important; border-radius: 2em; padding: 5px 10px; } a, .ui.breadcrumb a { color: var(--color-blue); } a[href="#"] { color: var(--color-text); } a:hover, a.muted:hover, .ui.breadcrumb a:hover, .ui.floating.jump.select-label.dropdown:hover, .ui.floating.jump.select-milestone.dropdown:hover, .ui.floating.jump.select-project.dropdown:hover, .ui.floating.jump.select-assignees.dropdown:hover, .muted-links a:hover { color: var(--color-blue); } a.text:not(.primary):hover, a.muted.text:hover, .ui.breadcrumb a.text:hover, .muted-links a:hover { text-decoration: none; } .flex-item .flex-item-title a, .repo-title a { color: var(--color-white); } .repo-icon { display: inline-block; transform: scale(0.75); margin-right: -0.05rem !important; } .interact-fg:hover { color: var(--color-blue) !important; } .repository.file.list .file-actions .btn-octicon:hover { color: var(--color-blue) !important; } .repository.file.list #file-buttons .ui.button { color: #cdd9e5 !important; } .ui.basic.green.button, .ui.basic.green.buttons .button, .ui.basic.primary.button, .ui.basic.primary.buttons .button { background-color: var(--color-button); } .ui.basic.green.button:hover, .ui.basic.green.buttons .button:hover, .ui.basic.primary.button:hover, .ui.basic.primary.buttons .button:hover { background-color: var(--color-hover); } .ui.basic.red.buttons .button, .ui.basic.red.button, .ui.basic.red.buttons .button:focus, .ui.basic.red.button:focus { color: #f85149; background: var(--color-button); border-color: var(--color-light-border); } .ui.basic.red.buttons .button:hover, .ui.basic.red.button:hover { color: #ffffff; background: #b62324; border-color: #f0f6fc1a; } .ui.basic.red.buttons .button:active, .ui.basic.red.button:active { color: #ffffff; background: #d03533; border-color: #f0f6fc1a; } .issue.list { list-style: none; margin-top: 1rem; background-color: #22272e; border-radius: 6px; padding: 3px 10px 3px 10px; border: 1px solid var(--color-secondary); } .issue-state-label { border-radius: 2em !important; } .issue-content-right { border: 0 !important; padding: 8px 0 0 8px !important; } .issue-content-right .ui.button, .issue-content-right .ui.input, .issue-content-right .ui.input input, .issue-content-right .ui.dropdown input, .issue-content-right .ui.search.selection.dropdown, .issue-content-right .ui.search.selection.dropdown > input.search { padding: 0 8px !important; min-height: 28px; } .issue-content-right .ui.button ~ .ui.button, .issue-content-right > form ~ .ui.button { margin-top: .5rem !important; } .ui.top.attached.header { border-radius: var(--border-radius) var(--border-radius) 0 0; } .ui.top.attached.header + .ui.attached.segment:not(.grid):not(.repos-search):not(.teams) { border-radius: 0 0 var(--border-radius) var(--border-radius); } .ui.attached.header { border-radius: 6px; } .ui.attached.table { background-color: var(--color-body); } .markup, .markup code, .markup tt, #org-info a, .repo-description, .repository-menu .item { color: var(--color-white); } .repo-list-link { color: var(--color-blue) !important; } .ui.label:not(.basic) { border-radius: 2em; } .ui.label.sha { color: var(--color-text); background: unset !important; border-color: var(--color-secondary) !important; border-radius: 0.375rem; } .ui.labels a.label:hover, a.ui.label:hover { color: var(--color-white); } /* repo list dashboard */ .feeds .list ul li.private { background-color: #22272e; } /* due date boxes */ .repository .metas #deadlineForm input { border-color: var(--color-secondary); } /* default border radius */ .ui.button, .ui.basic.buttons .button, .ui.basic.button, .ui.dropdown .menu, .ui.form input:not([type]), .ui.form input[type="date"], .ui.form input[type="datetime-local"], .ui.form input[type="email"], .ui.form input[type="number"], .ui.form input[type="password"], .ui.form input[type="search"], .ui.form input[type="tel"], .ui.form input[type="time"], .ui.form input[type="text"], .ui.form input[type="file"], .ui.form input[type="url"], .ui.form textarea, .ui.input textarea, .ui.label, .ui.menu, .ui.segment, .ui.segments, .ui.segments:not(.horizontal) > .segment:only-child, .ui.secondary.menu .dropdown.item>.menu, .ui.selection.dropdown, .ui.selection.dropdown .menu, .ui.table, .ui.text.menu .dropdown.item>.menu { border-radius: var(--border-radius); } .ui.floating.dropdown>.menu { border-radius: var(--border-radius) !important; } /* no border radius between connected buttons */ .ui.buttons .button { border-radius: 0; } /* default left border radius */ .ui.action.input > .dropdown:first-child, .ui.action.input > .button:first-child, .ui.action.input > .buttons:first-child > .button, .ui.compact.menu:not(.secondary) .item:first-child, .ui.horizontal.segments > .segment:first-child { border-radius: var(--border-radius) 0 0 var(--border-radius); } /* default right border radius */ .ui.action.input > .dropdown:last-child, .ui.action.input > .button:last-child, .ui.action.input > .buttons:last-child > .button, .ui.compact.menu:not(.secondary) .item:last-child, .ui.horizontal.segments > .segment:last-child { border-radius: 0 var(--border-radius) var(--border-radius) 0; } /* default top border radius */ .ui.secondary.pointing.menu .active.item, .ui.secondary.pointing.menu .item:hover { border-radius: var(--border-radius) var(--border-radius) 0 0; } .ui.tabular.menu .active.item, .repository.view.issue .comment-list .comment > .content > div:first-child { border-top-left-radius: var(--border-radius) !important; border-top-right-radius: var(--border-radius) !important; } /* default bottom border radius */ .ui.segment[class*="bottom attached"] { border-radius: 0 0 var(--border-radius) var(--border-radius); } .repository.view.issue .comment-list .comment > .content > div:last-child { border-bottom-right-radius: var(--border-radius); border-bottom-left-radius: var(--border-radius); } .ui.table>thead>tr:first-child>th:first-child { border-radius: var(--border-radius) 0 0; } .ui.table>thead>tr:first-child>th:last-child { border-radius: 0 var(--border-radius) 0 0; } /* border color form fields */ input, textarea, .ui.input > input, .ui.form input:not([type]), .ui.form select, .ui.form textarea, .ui.form input[type="date"], .ui.form input[type="datetime-local"], .ui.form input[type="email"], .ui.form input[type="file"], .ui.form input[type="number"], .ui.form input[type="password"], .ui.form input[type="search"], .ui.form input[type="tel"], .ui.form input[type="text"], .ui.form input[type="time"], .ui.form input[type="url"], .ui.selection.dropdown, .ui.checkbox label:before, .ui.checkbox input:checked ~ label:before, .ui.checkbox input:not([type="radio"]):indeterminate ~ label:before { border-color: var(--color-secondary); } .ui.input > input { transition: none; } .tag-code, .tag-code td { background-color: var(--color-body); } /* code highlighting dark theme */ .chroma .cm, /* block comments */ .chroma .c1 /* line comments */ { color: #8b949e; } /* strings */ .chroma .s, .chroma .cpf { color: #a5d6ff; } .chroma .s2 { color: #8ddb8c; } /* keywords */ .chroma .k, .chroma .kc, .chroma .kd, .chroma .kn, .chroma .kt { color: #ff7b72; } .chroma .m { color: #6cb6ff; } /* method names */ .chroma .na, .chroma .nf { color: #d2a8ff; } .chroma .nb { color: var(--color-blue); } .chroma .nx { color: var(--color-text); } .chroma .nv { color: #08dddd; } .chroma .si { color: #8ddb8c; } .chroma .nt { color: #50eb75; } .chroma .nd { color: #c4cfcf; } .chroma .n, /* variable & referenced class names */ .chroma .nc, /* class names */ .chroma .nn /* import names */ { color: #c9d1d9; } /* operators */ .chroma .o { color: #c9d1d9; } .repository.file.list #repo-files-table thead tr th { padding: 12px 12px 12px 20px; } .repository.file.list #repo-files-table tbody tr { background: var(--color-body); } .repository.file.list #repo-files-table tbody tr:hover { background: var(--color-box-header); } /* text color repo files */ .repository.file.list #repo-files-table td.name a, .repository.file.list #repo-files-table td a:not(.muted) { color: var(--color-white); } .repository.file.list #repo-files-table td a:hover { color: var(--color-blue); } .repository #commits-table.ui.basic.striped.table tbody tr:nth-child(2n) { background-color: var(--color-body) !important; } .repository #commits-table .author a { color: var(--color-text); } /* gpg commit label */ .repository #commits-table td.sha .sha.label.isSigned.isVerified, .repository #repo-files-table .sha.label.isSigned.isVerified, .repository #rev-list .sha.label.isSigned.isVerified, .repository .timeline-item.commits-list .singular-commit .sha.label.isSigned.isVerified { border: 1.5px solid #21ba45 !important; background: transparent; border-radius: 6px; } .ui.container .ui.tabular.menu .active.item, .ui.container .ui.tabular.menu .active.item:hover { color: var(--color-white); margin-top: 0; } .header-wrapper .ui.tabular.menu, .ui.secondary.menu:not(.filter) { gap: 0.5rem; } .header-wrapper .ui.tabular.menu { min-height: 48px; align-items: center; } .header-wrapper .ui.menu .item, .page-content > .ui.menu .item { color: var(--color-white) !important; } .page-content .ui.menu .item .svg { margin-right: 0.5rem !important; } .header-wrapper .ui.tabular.menu:not(.new-menu) .item, .header-wrapper .ui.tabular.menu:not(.new-menu) .active.item, .ui.secondary.menu:not(.new-menu) .item .ui.secondary.menu:not(.new-menu) .active.item { border: 0; border-radius: var(--border-radius) !important; align-items: center; line-height: 30px; padding: 0 8px; margin-top: 0 !important; margin-bottom: 0 !important; } .header-wrapper .ui.tabular.menu .item:hover, .ui.secondary.menu .item:hover { background: var(--color-nav-hover-bg) !important; } .header-wrapper .ui.tabular.menu:not(.new-menu) .active.item { background: unset; } .header-wrapper .ui.tabular.menu:not(.new-menu) .active.item::after { background: #f78166; bottom: calc(50% - 25px); content: ""; height: 2px; position: absolute; right: 50%; transform: translate(50%, -50%); width: 100%; z-index: 1; } .ui.secondary.pointing.menu .active.item, .ui.secondary.pointing.menu .active.item:hover { border-color: #f78166; } .ui.menu.new-menu .item:last-child { padding-right: 16px !important; } .ui.basic.label { color: var(--color-text-light-1); border-radius: 2em; background: transparent; font-weight: 400; padding: 0 7px !important; line-height: 18px; } .ui.menu .item > .label:not(.floating) { padding: 4px 7px; } /* repo watch and fork counters */ .repo-buttons .ui.labeled.button>.label, .repo-buttons .ui.labeled.button>.label:hover { color: var(--color-white); border-top-right-radius: var(--border-radius); border-bottom-right-radius: var(--border-radius); background: #21262d; padding: 0 10px !important; } .repo-buttons .ui.labeled.button.disabled > .label { color: #adbac7; } /* background emoji reactions */ .repository .segment.reactions .ui.label.basic.blue { background-color: transparent; } .diff-toggle-file-tree-button:hover { color: var(--color-blue); } .diff-file-body .file-body.code-diff table tbody tr td { line-height: 16px; } a.blob-excerpt { background: var(--color-body); } .comment-code-cloud { background-color: var(--color-navbar); } /* hover font color */ .ui.secondary.pointing.menu .active.item, .ui.secondary.pointing.menu .active.item:hover, .ui.secondary.pointing.menu .dropdown.item:hover, .ui.secondary.pointing.menu .link.item:hover, .ui.secondary.pointing.menu a.item:hover { color: var(--color-text); } .ui.selection.active.dropdown, .ui.selection.active.dropdown:hover, .ui.selection.active.dropdown .menu, .ui.selection.active.dropdown:hover .menu { border-color: var(--color-secondary); } .ui.cards > .card, .ui.card, .ui.cards a.card:hover, a.ui.card:hover { border: 0; } .ui.cards > .card > .extra, .ui.card > .extra { border-top-color: var(--color-secondary) !important; } .ui.cards > .card > .extra a:not(.ui):hover, .ui.card > .extra a:not(.ui):hover { color: var(--color-blue); } .ui.action.input:not([class*="left action"]) > input:focus { border-right: none; } /* font color line numbers */ .lines-num span:after { color: var(--color-text); } /* gpg key signed message */ .repository .ui.attached.isSigned.isVerified.message { background-color: var(--color-primary); color: black; } .repository .ui.attached.isSigned.isVerified.message .ui.text { color: var(--color-active); } .ui .info.segment.top { background-color: var(--color-navbar) !important; } .repository .ui.attached.isSigned.isVerified.top, .repository .ui.attached.isSigned.isVerified.message { border-top: 0px solid var(--color-text); } .repository .ui.attached.isSigned.isVerified { border-left: 0px solid var(--color-text); border-right: 0px solid var(--color-text); } .repository .ui.attached.isSigned.isVerified:last-child, .repository .ui.attached.isSigned.isVerified.bottom { border-bottom: 0px solid #a3c293; } /* PR timelines colors */ .repository.view.issue .comment-list .timeline-item .badge { width: 30px; height: 30px; margin-left: -31px; } .repository.view.issue .pull-desc code { color: var(--color-text-light-1); } .repository.view.issue .pull-desc code a { background-color: var(--color-label-bg); padding: 0 4px; border-radius: var(--border-radius); } .ui.top.attached.header.comment-header { padding: 0 16px; } .comment:target .header:before { border-right-color: var(--color-info-border) !important; box-shadow: none !important; } .comment:target .comment-container { border-color: var(--color-info-border) !important; box-shadow: none !important; } .comment:target .comment-container { background: var(--color-body); } .comment:target .comment-container .comment-header { background: var(--color-info-bg); border-bottom-color: var(--color-info-border) !important; } /* review - pending label */ .ui.basic.labels .yellow.label, .ui.ui.ui.basic.yellow.label { background: var(--color-project-board-bg); color: #333 !important; } /* green checkmark background when approving PRs */ .bg-green { background: var(--color-primary) !important; } i.green.icon.icon.icon.icon { color: var(--color-primary); } .following.bar #navbar { width: 100vw; border-bottom: 1px solid var(--color-secondary); /* default 52px */ min-height: 40px; padding: 0 0.5rem; background: var(--color-navbar); } * { scrollbar-color: unset; } ::-webkit-scrollbar-thumb { box-shadow: inset 0 0 0 6px var(--color-navbar); } ::-webkit-scrollbar-thumb:hover { box-shadow: inset 0 0 0 6px var(--color-text); } .following.bar #navbar .brand { margin-top: -2px; } .ui.radio.checkbox label:after, .ui.radio.checkbox input:focus ~ label:before, .ui.radio.checkbox input:checked ~ label:before { border-color: var(--color-secondary); } .input > input ~ button, .input > input ~ .button { border-left-width: 0 !important; } .input > input:focus ~ button, .input > input:focus ~ .button { border-color: var(--color-blue) !important; } input:focus, textarea:focus, .ui.input input:focus, .ui.form input:not([type]):focus, .ui.form select:focus, .ui.form textarea:focus, .ui.form input[type="date"]:focus, .ui.form input[type="datetime-local"]:focus, .ui.form input[type="email"]:focus, .ui.form input[type="file"]:focus, .ui.form input[type="number"]:focus, .ui.form input[type="password"]:focus, .ui.form input[type="search"]:focus, .ui.form input[type="tel"]:focus, .ui.form input[type="text"]:focus, .ui.form input[type="time"]:focus, .ui.form input[type="url"]:focus, .ui.selection.dropdown:focus { border-color: var(--color-blue); border-radius: var(--border-radius); } .ui.checkbox input:focus ~ label:before, .ui.checkbox input:focus ~ label::before, .ui.checkbox input:not([type="radio"]):indeterminate:focus ~ label:before, .ui.checkbox input:not([type="radio"]):indeterminate:focus ~ label::before, .ui.checkbox input:checked:focus ~ label:before, .ui.checkbox input:checked:focus ~ label::before, .ui.radio.checkbox input:focus:checked ~ label:before, .ui.radio.checkbox input:focus:checked ~ label::before { border-color: var(--color-blue); } .repo-icon { display: none; } .ui.green.button { padding: 5px 16px; line-height: 20px; } .ui.secondary.pointing.menu .item > .circular.label { line-height: 10px; } .ui.grey.labels .label, .ui.ui.ui.grey.label { line-height: 10px; } .ui.primary.label, .ui.primary.labels .label { background-color: var(--color-secondary) !important; } /* borders -------------------------------------------------------------------*/ .following.bar.light { border-bottom: 0px solid var(--color-secondary); } .ui.table { border-width: inherit; } .repo-buttons .ui.labeled.button > .label { border-width: inherit; border: 1px solid var(--color-secondary) !important; } .repo-button-row .button { min-height: 30px; } .ui.table[class*="single line"], .ui.table [class*="single line"] { white-space: nowrap; border: 1px solid var(--color-secondary); } .ui.basic.secondary.buttons .button, .ui.basic.secondary.button { color: var(--color-text) !important; border: 1px solid var(--color-secondary) !important; } .ui.table > tr > td, .ui.table > tbody > tr > td { border-top-color: var(--color-secondary); } .ui.labeled.button.disabled>.button, .ui.basic.buttons .button, .ui.basic.button, .ui.basic.buttons .button:focus, .ui.basic.button:focus { color: var(--color-text); } .ui.vertical.menu { background: var(--color-body); border: 0; } .ui.vertical.menu .header.item { font-weight: 600; background: unset; } .ui.vertical.menu .menu .item:hover { background: var(--color-hover); } .ui.vertical.menu .active.item, .ui.vertical.menu .active.item:hover { background: #b1bac414 !important; font-weight: 500; } .ui.vertical.menu .item, .ui.vertical.menu .item > summary { background: unset; padding: 8px; color: var(--color-white) !important; } .ui.vertical.menu .item, .ui.vertical.menu .item.active, .ui.vertical.menu .item:hover, .ui.vertical.menu .item > summary { border-radius: 6px; } .ui.vertical.menu .item::before { background: unset; } .ui.primary.labels .label, .ui.ui.ui.primary.label { color: #a6aab5; } .issue.list a:not(.label):hover { color: var(--color-blue) !important; } .tag-code, .tag-code td, .tag-code .blob-excerpt { background-color: var(--color-body); } /* issue \& PR count labels */ .ui.menu .item > .label { background: rgba(99, 110, 123, 0.4); color: #cdd9e5; } #navbar a.item .notification_count { color: var(--color-text); } .ui.secondary.menu .dropdown.item:hover, .ui.secondary.menu a.item:hover { color: #e3e3e3; } .ui.secondary.menu .active.item, .ui.secondary.menu .active.item:hover { color: var(--color-white) !important; } .vch__day__square, .vch__legend__wrapper rect { rx: 2px; ry: 2px; }