GogsThemes/themes/dark_theme.scss
2022-12-19 14:35:22 +02:00

989 lines
No EOL
20 KiB
SCSS

$mainBgColor : #111;
$secondBgColor : #1c1c1c;
$mainTextColor : silver;
$secondTextColor : bisque;
$accentBase : #197474;
$accentBase2 : steelblue;
$accentBase-dark : #4682b485;
$active : rgba(196, 45, 45, 0.95);
$link : #193c9b;
$btnColor : #122940;
$btnShadow : #2b2b2b;
$userCardShadow : #151124;
$RepoFilesBg : #0a294878;
$codeBg : #111;
$codeColor : #9ebdb1;
$codeSelected : #001;
$codeColorSelected : #8f1;
$codeDifOld : #6f3a3a;
$privRepoBg : #f9f8f8;
/**** Syntax Highlighting ****/
$comment : #a2a2a26e;
$selector : #0086b3;
$doctag : #90a959;
$attribute : #1c7100;
$hljsTitle : #d5bd5b;
$meta : #444444;
body:not(.full-width) {
background-color: $mainBgColor;
background-image: url("/img/grad1.png");
background-size: contain;
background-attachment: fixed;
color: $secondTextColor;
}
.following.bar.light {
background-color: $secondBgColor !important;
border-bottom: 1px solid $mainBgColor;
color: $secondTextColor !important;
position: fixed;
top: 0;
}
.ui.menu .dropdown.item .menu {
background: #1d1d1d;
}
@media (max-width: 1199px) {
.ui.container:not(.fluid) {
width: 85% !important;
}
}
@media (min-width: 1200px) {
.ui.container:not(.fluid) {
width: 75% !important;
}
}
.tabular .item {
/* Repo tabs menu */
color: $accentBase !important;
}
h1,
h2,
h3,
h4,
h5,
.ui.header,
.ui.menu,
.ui.input input,
.ui.button:not(.label) {
color: $accentBase;
}
.ui.info.segment.top {
background-color: #1d1d1d!important;
}
#file-content h1,
#file-content h2,
#file-content h3,
#file-content h4,
#file-content h5 {
color: $mainTextColor;
}
pre.raw,
code.raw {
background-color: $secondBgColor;
border: 1px solid $mainBgColor;
}
.following.bar {
color: $accentBase !important;
}
.overflow.menu .items .item {
color: $mainTextColor;
}
.following.bar .top.menu a.item.brand {
color: $accentBase !important;
}
.following.bar .top.menu a.item:hover,
.following.bar .top.menu .dropdown.item:hover,
.following.bar .top.menu .dropdown.item.active {
color: $active !important;
}
.following.bar .top.menu a.item:hover {
color: $active !important;
}
.following.bar .top.menu .menu {
color: $accentBase !important;
}
.following.bar .head.link.item {
color: $accentBase !important;
}
.home {
padding-top: 80px;
}
.ui.left {
padding-left: 5px;
}
.ui.right {
padding-right: 5px;
}
.ui .header>i+.content {
background-color: $mainBgColor !important;
}
footer {
color: $mainTextColor !important;
background-color: $mainBgColor;
}
.markdown:not(code) {
background-color: $secondBgColor;
color: $mainTextColor;
}
.markdown:not(code) blockquote {
border-left: 4px solid $secondBgColor;
}
.markdown:not(code) table th,
.markdown:not(code) table td {
border: 0px solid $accentBase !important;
background-color: $codeBg;
color:$accentBase;
}
.markdown:not(code) span.frame>span {
border: 1px solid $mainBgColor;
}
.markdown:not(code) pre code,
.markdown:not(code) pre tt {
color: $mainTextColor;
}
.markdown:not(code) .highlight pre,
.markdown:not(code) pre {
background-color: $secondBgColor;
}
.home .stackable {
padding-top: 40px;
}
.ui.attached.header {
background: $secondBgColor !important;
color: $accentBase !important;
border: none !important;
}
.repository .header-wrapper {
color: $accentBase !important;
background-color: transparent;
padding-top: 80px;
}
.repository {
padding-top: 80px;
}
.repository #clone-panel {
width: 30vw !important;
}
.repository #clone-panel input {
max-width: 100%;
background-color: $secondBgColor;
}
.repository.file.list #git-stats {
background-color: transparent;
}
.repository.file.list #file-content .view-raw {
border: 0 !important;
}
.repository.file.list #file-content .code-view * {
font-size: 14px;
line-height: 20px!important;
}
.repository.file.list #file-content .code-view .lines-num span {
line-height: 20px !important;
}
.repository.file.list #file-content .code-view table {
border: 0 !important;
}
.repository.file.list #file-content .code-view .lines-num {
background-color: $secondBgColor !important;
line-height :20px !important;
font-size: 12px;
}
.repository.file.list #file-content .code-view .lines-num pre li,
.repository.file.list #file-content .code-view .lines-code pre li,
.repository.file.list #file-content .code-view .lines-num ol li,
.repository.file.list #file-content .code-view .lines-code ol li,
.repository.file.list #file-content .code-view .lines-num .hljs li,
.repository.file.list #file-content .code-view .lines-code .hljs li {
font-size: 14px;
}
.repository.file.list #file-content .code-view .lines-num pre li.active,
.repository.file.list #file-content .code-view .lines-code pre li.active,
.repository.file.list #file-content .code-view .lines-num ol li.active,
.repository.file.list #file-content .code-view .lines-code ol li.active,
.repository.file.list #file-content .code-view .lines-num .hljs li.active,
.repository.file.list #file-content .code-view .lines-code .hljs li.active,
.hljs-meta .hljs-attribute .hljs-name .hljs-tag .hljs-string .hljs-doctag .hljs-subst .hljs-selector-tag .hljs-keyword .hljs-quote .hljs-comment {
background: $codeSelected;
color: $codeColorSelected !important;
}
.repository .diff-file-box .file-body.file-code .lines-num {
background-color: $secondBgColor !important;
}
.repository .diff-file-box .code-diff tbody tr.del-code td {
background-color: $codeDifOld !important;
border-color: #000 !important;
color: #fff !important;
}
.repository .diff-file-box .code-diff tbody tr.add-code td {
background-color: #467b60 !important;
border-color: #c1e9c1 !important;
color: #fff !important;
}
.repository .diff-file-box .code-diff tbody tr.del-code td.add-code pre {
background-color: #4c296a !important;
color: #fff !important;
}
.repository .diff-file-box .code-diff tbody tr.del-code td.add-code {
background-color: #4c296a !important;
color: #fff !important;
}
.repository.file.editor .commit-form-wrapper .commit-form {
border: 1px solid $mainBgColor;
}
.repository .diff-detail-box ol li {
border-bottom: 1px dashed $mainBgColor;
}
.repository .diff-file-box .file-body.file-code .lines-num-old {
border-right: 1px solid $mainBgColor;
}
.repository .head .mega-octicon {
color: $accentBase;
}
.mega-octicon.octicon-repo {
color: $accentBase2 !important;
}
#repo-clone-url {
color: $accentBase !important;
}
#repo-clone-url::-moz-selection {
color: $active !important;
background-color: $secondBgColor;
}
#repo-clone-url::selection {
color: $active !important;
background-color: $secondBgColor;
}
.repository.release #release-list {
border-top: 1px solid $mainBgColor;
}
.repository.release #release-list>li .detail {
border-left: 1px solid $mainBgColor;
}
.repository.forks .list .item {
border-bottom: 1px solid $mainBgColor;
}
.repository.settings.collaboration .collaborator.list>.item:not(:last-child) {
border-bottom: 1px solid $mainBgColor;
}
#search-user-box .results .item {
border-bottom: 1px solid $mainBgColor;
}
.ui.vertical.menu .header.item {
background: $secondBgColor;
color: $mainTextColor;
text-align: center;
padding-left: 0;
}
.organization {
padding-top: 80px;
}
.organization.profile #org-avatar {
width: 90px;
height: 70px;
margin-right: 5px;
}
.organization.teams .repositories .item:not(:last-child),
.organization.teams .members .item:not(:last-child) {
border-bottom: 1px solid $mainBgColor;
}
.user:not(.icon) {
padding-top: 80px;
}
.ui.card {
background-color: transparent !important;
color: $mainTextColor !important;
border: 0 !important;
}
.user.profile .ui.card .extra.content ul li:not(:last-child) {
border-bottom: 1px solid $mainBgColor;
}
.dashboard {
padding-top: 80px;
}
.feeds .list ul li:not(:last-child) {
border-bottom: none;
}
.feeds .list ul li a .octicon {
color: $accentBase2;
}
.explore {
padding-top: 80px;
}
.ui.repository.list .item .ui.header {
color: $mainTextColor;
}
.ui.repository.list .item .ui.header .name {
color: $mainTextColor;
}
.ui.repository.list .item .ui.header .name:hover {
color: $active;
}
.ui.repository.list .item:not(:first-child) {
border-top: none;
}
.ui.header .sub.header {
color: $accentBase !important;
}
.ui.header {
color: $accentBase !important;
}
.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: $mainTextColor;
}
.secondary {
background-color: transparent !important;
color: $accentBase !important;
}
.secondary .item {
color: $mainTextColor !important;
}
.secondary .item:hover {
color: $mainTextColor;
}
.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-color: $codeBg !important;
color: $codeColor;
margin: 0;
padding: 0 !important;
border: 0 !important;
}
.feeds .news>.ui.grid {
margin-left: auto;
margin-right: auto;
}
#ActionButtons {
color: $mainTextColor !important;
background-color: inherit !important;
border: 0.5px solid $mainBgColor;
}
.CodeMirror-code {
background-color: $codeBg !important;
color: $codeColor !important;
}
.CodeMirror-gutters {
background-color: $codeBg;
color: $accentBase;
}
.CodeMirror {
/* file edditor */
background: $codeBg;
color: $codeColor !important;
}
#repo-desc {
text-align: center;
font-weight: 500;
color: $mainTextColor;
}
#repo-clone-ssh {
color: $mainTextColor;
}
#repo-clone-https {
color: $mainTextColor;
}
#danger_zone_edited {
background: $secondBgColor;
border-color: $mainBgColor !important;
}
#basic_sett,
#adv_sett,
#adv_sett_form,
#admin_sec_panel,
#admin_small_panel {
background: $secondBgColor;
border-color: $mainBgColor !important;
}
#danger_zone_edited_header {
background: $accentBase !important;
}
#commits-table-head tr th {
color: $mainTextColor !important;
}
.ui.table thead th {
background: $secondBgColor;
color: $mainTextColor;
}
.ui.table thead tr:hover th {
background: $mainBgColor;
}
.ui.table tr td {
border-top: none;
}
.repository.file.list #repo-files-table tr:hover {
background-color: $mainBgColor;
}
tr:hover a {
color: $active;
}
#repo-files-table tr:hover {
color: $active;
}
#repo-files-table tr:hover span {
/* repo time last changed */
color: $active !important;
}
.feeds .list ul li.private {
background-color: $secondBgColor;
}
.feeds .list ul {
background-color: $mainBgColor;
background-image: url("/img/grad1.png");
background-size: contain;
background-attachment: fixed;
background-blend-mode: difference;
}
.repository .diff-file-box .code-diff tbody tr.tag-code td {
background-color: $secondBgColor !important;
}
.repository .diff-file-box .header {
background-color: $accentBase;
}
/* File Editor */
.editor-toolbar a {
color: $link !important;
}
.editor-toolbar a.active,
.editor-toolbar a:hover {
background: $btnShadow;
color: $mainTextColor;
border-color: $btnShadow;
}
.CodeMirror {
border: 1px solid $mainBgColor;
}
.CodeMirror-gutters {
background-color: $secondBgColor;
border-right: none;
border-left: none;
}
/*######################### Syntax Higlight Theme #####################*/
.hljs-comment,
.hljs-quote {
color: $comment !important;
font-weight: 400;
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-subst {
color: $selector !important;
}
.hljs-string,
.hljs-doctag {
color: $doctag !important;
}
.hljs-tag,
.hljs-name,
.hljs-attribute {
color: $attribute !important;
}
.hljs-meta {
color: $meta !important;
}
.hljs-built_in,
.hljs-builtin-name {
color: $selector !important;
}
.hljs-title,
.hljs-section,
.hljs-selector-id {
color: $hljsTitle !important;
}
/* Editor Highlight Theme */
.cm-s-default .cm-comment {
color: $comment !important;
font-weight: 400;
}
.cm-s-default .cm-def {
color: $codeColor;
}
.cm-s-default .cm-builtin {
color: $selector !important;
}
/* semantic */
.ui.attached.segment {
border: 0;
}
.ui.segment {
background: $secondBgColor;
}
.ui.buttons>.ui.dropdown:last-child .menu,
.ui.menu .right.dropdown.item .menu,
.ui.menu .right.menu .dropdown:last-child .menu {
background-color: $secondBgColor !important;
}
.ui.menu .ui.dropdown .menu>.item {
color: $accentBase !important;
background-color: $secondBgColor !important;
}
.ui.dropdown .menu>.item:hover {
color: $active;
}
.ui.menu {
background: $secondBgColor;
}
.ui.menu .ui.dropdown .menu>.selected.item {
color: $active !important;
}
.ui.menu .ui.dropdown .menu>.active.item {
color: $active !important;
}
.ui.selection.dropdown .menu>.item {
border-top: none;
}
.ui.checkbox input:focus~label {
color: $mainTextColor;
}
.ui.checkbox.checked label:focus {
color: $mainTextColor;
}
.ui.checkbox label {
color: $mainTextColor;
}
.ui.checkbox.checked label {
color: $mainTextColor;
}
.ui.checkbox label.focus {
color: $mainTextColor;
}
.ui.checkbox.checked label.focus {
color: $mainTextColor;
}
.ui.checkbox label:hover {
color: $mainTextColor;
}
.ui.checkbox.checked label:hover {
color: $mainTextColor;
}
.ui.checkbox label,
.ui.checkbox+label {
color: $mainTextColor;
}
.ui.checkbox label:hover,
.ui.checkbox+label:hover {
color: $mainTextColor;
}
.ui.checkbox.checked label,
.ui.checkbox.checked+label {
color: $mainTextColor;
}
.ui.checkbox.checked label:hover,
.ui.checkbox.cheked+label:hover {
color: $mainTextColor;
}
.ui.link.menu .item,
.ui.menu .dropdown.item,
.ui.menu .link.item,
.ui.menu a.item {
color: $mainTextColor;
}
.ui.link.menu .item:hover,
.ui.menu .dropdown.item:hover,
.ui.menu .link.item:hover,
.ui.menu a.item:hover {
color: $active;
}
.ui .dropdown .menu {
background-color: $secondBgColor;
}
.ui .dropdown .menu a:hover {
color: $accentBase !important;
}
.ui.basic.button,
.ui.basic.buttons .button {
background: $accentBase !important;
color: $mainTextColor;
}
.ui.vertical.menu {
background: $secondBgColor;
color: $accentBase;
}
.ui.dropdown .menu .selected.item,
.ui.dropdown.selected {
background: $secondBgColor;
color: $mainTextColor;
}
.ui.vertical.menu .item {
color: $mainTextColor;
}
.ui.menu .item {
font-weight: 600;
color: $mainTextColor;
}
.ui.menu .item .active {
font-weight: 600;
}
.ui.menu .item>.input input {
background-color: $mainBgColor;
}
.ui.menu .item:hover,
.ui.vertical.menu .item:hover {
color: $mainTextColor;
}
.ui.vertical.menu .active.item {
background: $link;
}
.ui.menu .active.item {
font-weight: 600;
}
.ui.menu .active.item:hover,
.ui.vertical.menu .active.item:hover {
color: inherit;
}
.ui.dropdown .menu>.item {
color: $mainTextColor;
}
.ui.menu.three.item .item {
background-color: $secondBgColor;
color: $accentBase2;
}
.ui.card>.extra a:not(.ui),
.ui.cards>.card>.extra a:not(.ui) {
color: $mainTextColor;
}
.ui.table {
background-color: $RepoFilesBg;
background-image: url("/img/grad1.png");
background-size: contain;
background-attachment: fixed;
background-blend-mode: color-burn;
color: $mainTextColor;
}
.ui.button {
background: $btnColor !important;
color: $mainTextColor !important;
}
.ui.button:hover {
color: $active;
}
.ui.dropdown .menu>.header {
color: $mainTextColor;
}
.ui.menu .ui.dropdown .menu>.item:hover {
color: $active !important;
background-color: $secondBgColor !important;
}
.ui.dropdown .menu {
border: 1px solid $secondBgColor;
}
.ui.dropdown .menu>.input:not(.transparent) input {
background-color: $mainBgColor;
color: $secondTextColor;
}
.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="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"] {
background: $mainBgColor;
color: $mainTextColor;
font-weight: 600;
}
.ui.form input:not([type]):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 {
color: $mainTextColor;
border-color: transparent;
border-radius: 0;
background: $mainBgColor;
-webkit-box-shadow: 0 0 0px 1px $btnShadow;
box-shadow: 0 0 0px 1px $btnShadow;
}
.ui.action.input:not([class*="left action"])>input:focus {
border-right-color: transparent !important;
}
.ui.form .field>label {
color: $mainTextColor;
}
.ui.attached.header {
background: $mainBgColor;
}
.ui .text.black:hover {
color: $secondTextColor;
}
.ui.tabular.menu .active.item {
background: none $secondBgColor;
border-color: $secondBgColor;
color: $active;
}
.ui.basic.button,
.ui.basic.buttons .button {
background: $secondBgColor none !important;
color: $mainTextColor!important;
font-weight: 600;
-webkit-box-shadow: 0 0 0px 1px $btnShadow;
box-shadow: 0 0 0px 1px $btnShadow;
}
.ui.basic.button:hover,
.ui.basic.buttons .button:hover {
background: $secondBgColor !important;
color: $active !important;
-webkit-box-shadow: 0 0 0px 1px $btnShadow;
box-shadow: 0 0 0px 1px $btnShadow;
}
.ui.label {
background-color: $accentBase-dark;
color: #fff;
}
.ui.basic.label {
background: none $accentBase;
}
.ui.breadcrumb a {
color: $mainTextColor;
}
.ui.list .list>.item .description,
.ui.list>.item .description {
color: $mainTextColor;
}
.ui.user.list .item .description a {
color: $mainTextColor;
}
.ui.user.list .item .description a:hover {
text-decoration: underline;
color: $accentBase;
}
.ui.buttons:not(.basic):not(.inverted)>.button,
.ui.buttons>.ui.button:not(.basic):not(.inverted) {
-webkit-box-shadow: 0 0 0px 1px $btnShadow;
box-shadow: 0 0 0px 1px $btnShadow;
}
.ui.button {
background: transparent;
}
.ui.button:hover {
background-color: $secondBgColor;
color: $active !important;
}
.ui.card,
.ui.cards>.card {
box-shadow: 0px -1px 22px 10px $userCardShadow;
}
a {
color: $mainTextColor;
}
a:hover {
color: $active;
}
footer {
border-top: 1px solid $mainBgColor;
}
// Makes caret visible when editing files
.CodeMirror-cursor {
border-color: $secondTextColor;
}