Last active
October 20, 2017 21:58
-
-
Save towerofnix/22a3b512556ebf2712fdee33e6e3f779 to your computer and use it in GitHub Desktop.
A simple and probably incomplete dark theme stylesheet for https://gogs.io sites
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
:root { | |
--fg-color: #EEE; | |
--bold-color: #FFF; | |
--attached-border-color: #2A2A2A; | |
--focus-color: #778; | |
} | |
body { | |
background-color: #222 !important; | |
color: var(--fg-color) !important; | |
} | |
/* Headers, footers --------------------------------------------- */ | |
.header-wrapper { | |
background-color: #333 !important; | |
} | |
.following.bar.light { | |
background-color: #222 !important; | |
border-bottom-color: #333 !important; | |
color: var(--fg-color) !important; | |
} | |
.following.bar .top.menu a.item:hover { | |
color: rgba(255, 255, 255, 0.45); | |
} | |
footer { | |
background-color: #333; | |
border-color: #222; | |
} | |
footer .container .links > * { | |
border-color: #666; | |
} | |
/* UI things ---------------------------------------------------- */ | |
.ui .text.black { | |
color: #AAA; | |
} | |
.ui .text.black:hover { | |
color: #FFF; | |
} | |
.ui .text.grey a { | |
color: #888 !important; | |
} | |
.ui .text.grey a:hover { | |
color: #BBB !important; | |
} | |
.ui.header { | |
color: #FFF; | |
} | |
.ui.breadcrumb .divider { | |
color: rgba(255, 255, 255, 0.4); | |
} | |
.ui.form .field > label, | |
.ui.form .inline.field > label, .ui.form .inline.field > p, .ui.form .inline.fields .field > label, .ui.form .inline.fields .field > p, .ui.form .inline.fields > label { | |
color: rgba(255, 255, 255, 0.87); | |
} | |
.ui.checkbox label, .ui.checkbox + label { | |
color: rgba(255, 255, 255, 0.87); | |
} | |
.ui.checkbox label:hover, .ui.checkbox + label:hover { | |
color: rgba(255, 255, 255, 0.8); | |
} | |
.ui.checkbox input:focus ~ .box::after, .ui.checkbox input:focus ~ label, .ui.checkbox input:focus ~ label::after { | |
color: rgba(255, 255, 255, 0.95); | |
} | |
.ui.input input { | |
background: #333; | |
color: #CCC; | |
} | |
.ui.input input:focus, .ui.input.focus input { | |
background: #444; | |
color: #AAA; | |
} | |
.ui.menu { | |
background: #333; | |
} | |
.ui.menu .item { | |
color: rgba(255, 255, 255, 0.87); | |
} | |
.ui.menu .active.item, | |
.ui.menu .active.item:hover, .ui.vertical.menu .active.item:hover, | |
.ui.link.menu .item:hover, .ui.menu .dropdown.item:hover, .ui.menu .link.item:hover, .ui.menu a.item:hover, | |
.ui.menu .ui.dropdown .menu > .active.item { | |
background: rgba(255, 255, 255, 0.05) !important; | |
color: rgba(255, 255, 255, 0.95) !important; | |
} | |
.ui.basic.button, .ui.basic.buttons .button { | |
color: rgba(255, 255, 255, 0.6) !important; | |
background-color: rgba(230, 230, 230, 0.1) !important; | |
border-color: rgba(255, 255, 255, 0.15); | |
} | |
.ui.basic.button:focus, .ui.basic.button:hover, .ui.basic.buttons .button:focus, .ui.basic.buttons .button:hover { | |
background-color: rgba(180, 180, 180, 0.2) !important; | |
color: #FFF !important; | |
} | |
.ui.basic.label, .ui.label { | |
background-color: rgba(230, 230, 230, 0.1); | |
color: #AAA; | |
} | |
a.ui.basic.label:hover, a.ui.label:hover, a.ui.labels .label:hover { | |
background-color: rgba(180, 180, 180, 0.2); | |
color: #FFF; | |
} | |
.ui.form textarea, | |
.ui.form input:not([type]), .ui.form input[type="text"], .ui.form input[type="email"], .ui.form input[type="search"], .ui.form input[type="password"], .ui.form input[type="date"], .ui.form input[type="datetime-local"], .ui.form input[type="tel"], .ui.form input[type="time"], .ui.form input[type="file"], .ui.form input[type="url"], .ui.form input[type="number"] { | |
background: #303030; | |
color: rgba(255, 255, 255, 0.87); | |
border-color: rgba(160, 160, 160, 0.15); | |
} | |
.ui.form textarea:focus, | |
.ui.form input:focus:not([type]), .ui.form input[type="text"]:focus, .ui.form input[type="email"]:focus, .ui.form input[type="search"]:focus, .ui.form input[type="password"]:focus, .ui.form input[type="date"]:focus, .ui.form input[type="datetime-local"]:focus, .ui.form input[type="tel"]:focus, .ui.form input[type="time"]:focus, .ui.form input[type="file"]:focus, .ui.form input[type="url"]:focus, .ui.form input[type="number"]:focus { | |
background: #333; | |
color: rgba(255, 255, 255, 0.95); | |
border-color: var(--focus-color); | |
} | |
.ui.attached.header { | |
background: #333 !important; | |
border-color: var(--attached-border-color) !important; | |
color: var(--fg-color) !important; | |
} | |
.ui .info.segment.top { | |
background-color: #333 !important; | |
border-color: #222 !important; | |
} | |
.ui.segment { | |
background-color: #2A2A2A; | |
border-color: #222 !important; | |
} | |
.ui.card { | |
background: #333; | |
color: var(--fg-color) !important; | |
border-color: var(--attached-border-color); | |
} | |
.ui.card > .content, .ui.cards > .card > .content { | |
border-top-color: rgba(255, 255, 255, 0.1) !important; | |
} | |
.ui.card > .extra, .ui.cards > .card > .extra { | |
border-top-color: rgba(255, 255, 255, 0.05) !important; | |
} | |
.ui.card, .ui.cards > .card { | |
box-shadow: 0 1px 3px 0 #111, 0 0 0 1px #111; | |
} | |
.ui.card > .content > .header, .ui.cards > .card > .content > .header { | |
color: rgba(255, 255, 255, 0.85); | |
} | |
.ui.card > .extra a:not(.ui), .ui.cards > .card > .extra a:not(.ui) { | |
color: rgba(255, 255, 255, 0.4); | |
} | |
.ui.table { | |
background: #333 !important; | |
color: var(--fg-color) !important; | |
} | |
.ui.attached.table { | |
border-color: var(--attached-border-color); | |
} | |
.ui.table thead th { | |
color: var(--bold-color); | |
background: #444; | |
} | |
.ui.tabular.menu { | |
border-bottom-color: #444; | |
} | |
.ui.tabular.menu .active.item { | |
background: #555; | |
border-color: #444; | |
color: #FFF; | |
} | |
.ui.tabular.menu .item { | |
color: rgba(255, 255, 255, 0.7); | |
} | |
.ui.tabular.menu .item:hover { | |
color: rgba(255, 255, 255, 1.0); | |
} | |
.ui.secondary.pointing.menu .active.item { | |
color: rgba(255, 255, 255, 0.95); | |
border-color: #EEE; | |
} | |
.ui.secondary.pointing.menu .active.item:hover { | |
color: rgba(255, 255, 255, 0.95); | |
} | |
.ui.secondary.pointing.menu .dropdown.item:hover, .ui.secondary.pointing.menu .link.item:hover, .ui.secondary.pointing.menu a.item:hover { | |
color: rgba(255, 255, 255, 0.87); | |
} | |
.ui.secondary.menu .active.item { | |
background: rgba(255, 255, 255, 0.05); | |
color: rgba(255, 255, 255, 0.95); | |
} | |
.ui.secondary.menu .active.item:hover { | |
background: rgba(255, 255, 255, 0.04) !important; | |
} | |
.ui.menu .dropdown.item .menu, | |
.ui.dropdown .menu, | |
.ui.menu, .ui.vertical.menu, | |
.ui.selection.dropdown { | |
background: #333; | |
color: var(--fg-color); | |
} | |
.ui.dropdown .menu > .header, | |
.ui.vertical.menu .header.item { | |
color: rgba(255, 255, 255, 0.85); | |
} | |
.ui.vertical.menu .header.item { | |
background: #444; | |
} | |
.ui.dropdown .menu .active.item { | |
color: rgba(255, 255, 255, 0.95); | |
} | |
.ui.dropdown .menu .selected.item, .ui.dropdown.selected { | |
background: rgba(255, 255, 255, 0.03); | |
color: rgba(255, 255, 255, 0.95); | |
} | |
.ui.menu .ui.dropdown .menu > .item:hover, .ui.menu .ui.dropdown .menu > .selected.item { | |
background: rgba(255, 255, 255, 0.05) !important; | |
} | |
.ui.menu .ui.dropdown .menu > .item, | |
.ui.dropdown .menu > .item { | |
color: rgba(255, 255, 255, 0.87) !important; | |
} | |
.ui.secondary.menu .dropdown.item:hover, .ui.secondary.menu .link.item:hover, .ui.secondary.menu a.item:hover { | |
color: rgba(255, 255, 255, 0.95); | |
} | |
.ui.menu .ui.dropdown .menu > .item:hover, .ui.menu .ui.dropdown .menu > .selected.item { | |
color: rgba(255, 255, 255, 0.95) !important; | |
} | |
.ui.selection.active.dropdown, .ui.selection.active.dropdown .menu { | |
border-color: #333 !important; | |
} | |
.ui.selection.dropdown .menu > .item, | |
.ui.selection.dropdown:focus .menu, | |
.ui.selection.dropdown:focus { | |
border-color: rgba(0, 0, 0, 0.3) !important; | |
} | |
.ui.selection.visible.dropdown > .text:not(.default) { | |
color: rgba(255, 255, 255, 0.8); | |
} | |
.ui.menu .item.disabled, .ui.menu .item.disabled:hover { | |
color: rgba(200, 200, 200, 0.3); | |
} | |
.ui.menu .item.disabled i.icon { | |
color: rgba(200, 200, 200, 0.3); | |
} | |
.ui.menu .item > .label { | |
background: #555; | |
color: #DDD; | |
} | |
/* Repository-specific stuff ------------------------------------ */ | |
.repository.file.list #repo-files-table tr:hover { | |
background-color: #334258; | |
} | |
/* User profile-specific stuff ---------------------------------- */ | |
.user.profile .ui.card .extra.content ul li:not(:last-child) { | |
border-bottom: 1px solid #444; | |
} | |
/* Issue-specific stuff ----------------------------------------- */ | |
.issue.list > .item .title { | |
color: #CCC; | |
} | |
.issue.list > .item .title:hover { | |
color: #FFF; | |
} | |
.repository.view.issue .comment-list .comment .content .header:before, | |
.repository .comment.form .content .form:before, | |
.repository .comment.form .content .form:after { | |
border-right-color: var(--attached-border-color); | |
} | |
.repository.view.issue .comment-list .comment .content .header:after { | |
border-right-color: #333; | |
} | |
.repository.view.issue .comment-list::before { | |
background-color: #333; | |
} | |
/* Code stuff --------------------------------------------------- */ | |
.repository .diff-file-box .file-body.file-code .lines-num { | |
background: #333 !important; | |
border-color: var(--attached-border-color) !important; | |
} | |
.repository .diff-file-box .code-diff tbody tr td { | |
background: #444 !important; | |
} | |
.repository .diff-file-box .code-diff tbody tr.tag-code td { | |
background-color: #554 !important; | |
} | |
.repository .diff-file-box .code-diff tbody tr.add-code td { | |
background: #454 !important; | |
} | |
.repository .diff-file-box .code-diff tbody tr.del-code td { | |
background: #644 !important; | |
} | |
.repository .diff-file-box .code-diff tbody tr.same-code td.active { | |
background: #664 !important; | |
} | |
.repository .diff-file-box .code-diff tbody tr .added-code { | |
background-color: #676; | |
} | |
.repository .diff-file-box .code-diff tbody tr .removed-code { | |
background-color: #766; | |
} | |
.repository.file.list #file-content .code-view .lines-num pre, .repository.file.list #file-content .code-view .lines-code pre, .repository.file.list #file-content .code-view .lines-num ol, .repository.file.list #file-content .code-view .lines-code ol, .repository.file.list #file-content .code-view .lines-num .hljs, .repository.file.list #file-content .code-view .lines-code .hljs { | |
background: #444 !important; | |
} | |
.repository.file.list #file-content .code-view .lines-num { | |
background: #333 !important; | |
} | |
.hljs { | |
color: #AAA !important; | |
} | |
.hljs-keyword, .hljs-selector-tag, .hljs-subst { | |
color: #AAA; | |
} | |
.hljs-type, .hljs-class .hljs-title { | |
color: #ABD; | |
} | |
.hljs-number, .hljs-literal, .hljs-variable, .hljs-template-variable, .hljs-tag .hljs-attr { | |
color: #7DD; | |
} | |
/* Misc. things ------------------------------------------------- */ | |
i.icon { | |
color: rgba(255, 255, 255, 0.8); | |
} | |
.mega-octicon:before, .octicon:before { | |
color: rgba(255, 255, 255, 0.6); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Screenshots: