theme-ghdark.css

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideInFromLeft {
  from {
    transform: translateX(-50px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInFromRight {
  from {
    transform: translateX(50px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInFromBottom {
  from {
    transform: translateY(50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.following.bar.light {
  background: var(--color-menu) none repeat scroll 0% 0%;
  border-color: var(--black-color);
}
footer {
  opacity: 0.5;
  transition: opacity 0.1s ease 0s;
}
footer:hover {
  opacity: 0.9;
}
.dashboard.feeds .right.stackable.menu > .item.active,
.dashboard.issues .right.stackable.menu > .item.active {
  color: var(--color-primary);
}
.repository.file.list #repo-files-table tr {
  background: var(--color-box-header);
}
.repository #clone-panel input {
  text-overflow: ellipsis;
  overflow: hidden;
}
.repository.file.list #repo-files-table thead th {
  background-color: var(--color-box-body);
}
:root {
  color-scheme: dark;
  --is-dark-theme: true;
  --black-color: #000000;
  --color-body: #0d1117;
  --color-card: #0d1117;
  --color-box-header: #0d1117;
  --color-box-body: #161b22;
  --color-active: #262c36;/*#30363b;*/
  --color-menu: #010409;
  --color-navbar: #010409;
  --color-nav-bg: #010409;
  --color-footer: #0d1117;
  --color-header-wrapper: #010409;
  --color-input-background: #010409;
  --color-diff-removed-row-bg: rgba(248, 81, 73, 0.15);
  --color-diff-added-row-bg: rgba(46, 160, 67, 0.15);
  --color-expand-button: rgba(56, 139, 253, 0.4);
  --color-diff-inactive: rgba(24, 24, 26, 0.1);
  --color-primary: #58a6ff;
  --color-primary-dark-1: #3392ff;
  --color-primary-dark-2: #6db1ff;
  --color-primary-dark-3: #81bcff;
  --color-primary-dark-4: #a4ceff;
  --color-primary-dark-5: #bddcff;
  --color-primary-dark-6: #d8eaff;
  --color-primary-dark-7: #f8fbff;
  --color-primary-light-1: #4f94e3;
  --color-primary-light-2: #4483ca;
  --color-primary-light-3: #3669a4;
  --color-primary-light-4: #274b75;
  --color-primary-light-5: #203c5b;
  --color-primary-light-6: #101f2f;
  --color-primary-light-7: #08101a;
  --color-primary-light-extra: #1f6feb;
  --color-primary-alpha-10: #58a6ff19;
  --color-primary-alpha-20: #58a6ff33;
  --color-primary-alpha-30: #58a6ff4b;
  --color-primary-alpha-40: #58a6ff66;
  --color-primary-alpha-50: #58a6ff80;
  --color-primary-alpha-60: #58a6ff99;
  --color-primary-alpha-70: #58a6ffb3;
  --color-primary-alpha-80: #58a6ffcc;
  --color-primary-alpha-90: #58a6ffe1;
  --color-secondary: #30363d;
  --color-text-muted: #7d8590;
  --color-text: rgb(230, 237, 243);
  --color-text-light: rgb(230, 237, 243);
  --color-input-text: rgb(230, 237, 243);
  --color-error-text: rgb(248, 81, 73);
  --color-error-border: rgba(248, 81, 73, 0.5);
  --color-nav-hover-bg: rgba(177, 186, 196, 0.12);
  --color-hover: rgba(177, 186, 196, 0.12);
  --color-button: #212830;/*#21262d;*/
  --color-secondary-alpha-60: #161b22;
  --color-secondary-alpha-50: #21262d;
  --color-label-bg: rgb(33, 38, 45);
  --color-label-hover-bg: rgba(177, 186, 196, 0.12);
  --color-label-text: rgb(230, 237, 243);
  --color-caret: rgb(230, 237, 243);
  --color-active-line: #222c40;
  --color-button-red: #d23636;
  --color-button-hover: #e35353;
  --color-green-label: #238636;
  --color-green-label-hover: #2ea043;
  --color-fg-muted: #9198a1;
  --color-secondary-dark-7: #9198a1;
  --color-button-border: #3d444d;
  --color-text-light-2: rgb(240, 246, 252);
  --color-input-border: #30363d;
  --color-input-border-hover: #30363d;
  --color-green-badge: #238636;
  --color-markup-code-inline: #1e2329;
  --color-markup-code-block: #151b23;
}

.overflow-menu-items > a > svg {
  color: var(--color-fg-muted);
  fill: var(--color-fg-muted);
}
.ui.menu {
  margin: 0px;
}
.navbar-left {
  flex: 1 1 auto;
}
#navbar {
  min-height: 64px;
}
.navbar-right {
  flex: 0 1 auto;
  padding-right: 11px;
}
.ui.secondary.menu {
  margin-left: 0;
  margin-right: 0;
}
.labels > .ui.label {
  height: 20px;
  line-height: 0.6;
  border-radius: 10px !important;
  background-color: transparent;
  border: 1px solid var(--color-secondary);
  color: var(--color-text-muted);
}
.tippy-box {
  color: var(--color-text);
  background-color: var(--color-text-muted) !important;
}
/* .tippy-svg-arrow-outer {
  fill:var(--color-text-muted) !important;
} */
.tippy-svg-arrow-inner {
  fill: var(--color-text-muted) !important;
}
.ui.segment,
.ui.segments,
.ui.attached.segment {
  background: var(--color-box-header);
}
.repository.file.list #repo-files-table tr:hover {
  background-color: var(--color-box-body);
}
.repository.new.issue .comment.form .content::after {
  border-right-color: var(--color-body);
}
.ui.segment .ui.tabular.menu .active.item,
.ui.segment .ui.tabular.menu .active.item:hover {
  background: var(--color-body);
}
markdown-toolbar svg {
  color: var(--color-text-muted);
}
markdown-toolbar svg:hover {
  color: var(--color-primary);
}
.ui.tabular.menu .active.item {
  margin-bottom: -1px;
}
.ui.grey.labels .label,
.ui.ui.ui.grey.label {
  background-color: rgb(45, 45, 45);
}
.ui.red.labels .label,
.ui.ui.ui.red.label {
  background-color: var(--color-error-text);
}
.ui.secondary.menu .item {
  transition: color, background 0.1s ease 0s;
}
.feeds .list ul li.private {
  background: var(--color-input-background) none repeat scroll 0% 0%;
}
.ui.green.button,
.ui.green.buttons .button {
  background-color: var(--color-green-label);
}
.ui.green.button:hover,
.ui.green.buttons .button:hover {
  background-color: var(--color-green-label-hover);
}
.ui.red.button,
.ui.red.buttons .button {
  background-color: var(--color-button-red);
}
.ui.red.button:hover,
.ui.red.buttons .button:hover {
  background-color: var(--color-button-hover);
}
.ui.green.label,
.ui.green.labels .label,
.ui.basic.green.label {
  background-color: var(--color-green-label);
}
.tag-code,
.tag-code td {
  background: rgba(56, 139, 253, 0.15) !important;
}
.tag-code td.lines-num {
  background-color: rgba(56, 139, 253, 0.4) !important;
}
table.chroma > tbody {
  background-color: var(--color-footer);
}
tr.same-code {
  background-color: var(--color-footer);
}
.lines-code {
  background-color: var(--color-diff-inactive);
}
tr.add-code > td:nth-child(1) {
  background-color: rgba(63, 185, 80, 0.3);
}
tr.add-code > td:nth-child(2) {
  background-color: rgba(63, 185, 80, 0.3);
}
tr.del-code > td:nth-child(1) {
  background-color: rgba(248, 81, 73, 0.3);
}
tr.del-code > td:nth-child(2) {
  background-color: rgba(248, 81, 73, 0.3);
}
.ui.primary.sha.label {
  background-color: var(--color-primary-alpha-30) !important;
}
.lines-num.lines-num-old.del-code,
.lines-type-marker.lines-type-marker-old.del-code,
.lines-num.lines-num-old,
.lines-type-marker.lines-type-marker-old {
  background-color: rgba(248, 81, 73, 0.3) !important;
}
.lines-num.lines-num-new.add-code,
.lines-type-marker.lines-type-marker-new.add-code,
.lines-num.lines-num-new,
.lines-type-marker.lines-type-marker-new {
  background-color: rgba(63, 185, 80, 0.3) !important;
}
.repository .diff-file-box .code-diff tbody tr .lines-type-marker {
  padding-right: 8px !important;
}
@media only screen and (min-width: 768px) {
  .issue .ui.segment.metas {
    position: sticky;
    top: 25px;
    max-height: 100vh;
    overflow: scroll;
    padding-bottom: 40px;
  }
}
.issue-item-top-row .ui.label {
  margin-top: 0px;
  margin-bottom: 0px;
  padding: 0.2em 0.5em;
  opacity: 0.8;
  transition: opacity 0.1s ease 0s;
}
.issue-item-top-row .ui.label:hover {
  opacity: 1;
}
::-moz-selection {
  background: #1953ac !important;
}
::selection {
  background: #1953ac !important;
}
.feeds .list .repo-owner-name-list .item-name {
  max-width: 90% !important;
}
del {
  opacity: 0.7;
}
h1 > del {
  text-decoration-thickness: 5px;
}
h2 > del {
  text-decoration-thickness: 5px;
}
h3 > del {
  text-decoration-thickness: 3px;
}
h4 > del {
  text-decoration-thickness: 2px;
}
h5 > del {
  text-decoration-thickness: 1px;
}
h6 > del {
  text-decoration-thickness: 1px;
}
.ui.message.unicode-escape-prompt {
  opacity: 0.5;
}
.ui.message.unicode-escape-prompt:hover {
  opacity: 1;
}
div.ui.secondary.vertical.filter.menu {
  border: var(--color-menu) solid 8px;
  border-radius: 10px;
}
.ui.basic.primary.button,
.ui.basic.primary.buttons .button,
.ui.primary.button,
.ui.primary.buttons .button {
  background-color: var(--color-primary-light-extra) !important;
}
.ui.basic.primary.button:hover,
.ui.basic.primary.buttons .button:hover,
.ui.primary.button:hover,
.ui.primary.buttons .button:hover {
  background-color: var(--color-primary-dark-1) !important;
}
.feeds .list ul li .repo-list-link .svg {
  margin-right: 3px;
}
.repo-title > a:nth-child(4) {
  font-weight: bold;
}
.ui.repo-topic.large.label.topic,
.ui.small.label.topic {
  background: #13233a;
  color: #58a6ff;
  border-radius: 10px;
}
.repository.file.list #repo-files-table tbody .svg.octicon-file-directory-fill,
.repository.file.list #repo-files-table tbody .svg.octicon-file-submodule {
  color: unset;
}
.ui.attached.table.unstackable.segment {
  border-radius: 0px 0px 5px 5px;
}
.ui.tertiary.button {
  color: #58a6ff;
}
.ui.tertiary.button:hover {
  color: #8bc1ff;
}
.ui.selection.dropdown {
  background: #0d1117;
}
.ui.selection.dropdown:hover {
  background: #0d1117;
}
.ui.error.header {
  background: unset !important;
}
.ui.error.message,
.ui.attached.error.message,
.ui.red.message,
.ui.attached.red.message,
.ui.negative.message,
.ui.attached.negative.message {
  background: rgba(248, 81, 73, 0.1);
}
.ui.modal > .header {
  color: var(--color-text);
}
.ui.modal > .actions,
.ui.modal .content + .actions,
.ui.modal .content + form > .actions {
  background: var(--color-body);
}
.ui.button,
.ui.button:focus {
  border: 1px solid rgba(238, 244, 250, 0.105);
}
.ui.button:hover {
  background: var(--color-active);
  border: 1px solid rgba(238, 244, 250, 0.48);
}
.small-menu-items .item {
  background: var(--color-body) !important;
}
.ui.secondary.pointing.menu .active.item,
.ui.secondary.pointing.menu .active.item:hover,
.ui.secondary.pointing.menu .dropdown.item:hover,
.ui.secondary.pointing.menu a.item:hover {
  color: var(--color-text);
}
.ui.list > .item a,
.ui.list .list > .item a {
  overflow: auto;
}

.repo-buttons .ui.labeled.button > .label {
  border: 1px solid var(--color-button-border);
  border-color: var(--color-button-border);
}
.repo-buttons .ui.labeled.button > .label:hover {
  color: var(--color-text);
  background: var(--color-active);
}
.ui.basic.buttons .button:hover,
.ui.basic.button:hover {
  border: 1px solid var(--color-button-border);
  color: var(--color-text);
  background: var(--color-active);
}
.ui.labeled.button > .button:hover + .label {
  border-left-color: var(--color-button-border);
}
.ui.action.input .ui.ui.button {
  border-left: 1px solid var(--color-button-border) !important;
  border: 1px solid var(--color-button-border);
}
.ui.action.input:not([class*="left action"]) > input,
.ui.action.input:not([class*="left action"]) > input:hover,
.repository .clone-panel #repo-clone-url {
  border: 1px solid var(--color-button-border);
  border-right: 0px solid #00000000;
}
.user.profile .ui.card {
  border-radius: 12px;
}

.ui.secondary.menu .dropdown.item > .menu,
.ui.text.menu .dropdown.item > .menu {
  padding: 5px;
  border-radius: 9px;
}

.ui.menu .ui.dropdown.item .menu .item {
  border-radius: 5px;
}

.user-menu > .item {
  border-radius: 5px !important;
}

.chroma .nx {
  color: rgb(191, 212, 234);
}

.chroma .s,
.chroma .s1,
.chroma .s2 {
  color: rgb(48, 200, 24);
}

.chroma .nf {
  color: rgb(251, 118, 174);
}

.chroma .kt {
  color: rgb(107, 141, 242);
}

.chroma .nb {
  color: rgb(64, 153, 255);
}

.chroma .k,
.chroma .kc,
.chroma .kd,
.chroma .kn,
.chroma .kp,
.chroma .kr {
  color: rgb(244, 111, 124);
}

.chroma .m,
.chroma .mb,
.chroma .mf,
.chroma .mh,
.chroma .mi,
.chroma .mo {
  color: rgb(23, 202, 202);
}

.chroma .c,
.chroma .c1,
.chroma .ch {
  color: rgb(137, 149, 162);
}

.code-view .lines-num:hover {
  color: rgb(255, 255, 255) !important;
}

.monaco-editor .margin-view-overlays,
.monaco-editor-background {
  background-color: #0d1117 !important;
}

/*
  Gitea Theme Enhancements
  -------------------------
  - Change all description styles.
  - Adjusted font sizes for better readability
  - Added hover effects to buttons
*/

.description {
  color: var(--color-text-light-2) !important;
}

a.ui.basic.label {
  color: var(--color-text) !important;
}

.ui .text.black {
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
}

.ui .text.black:hover {
  color: var(--color-primary) !important;
}

span.text {
  color: var(--color-text-light-2) !important;
}

span.text.black {
  color: var(--color-caret) !important;
}

tr > th,
.content {
  color: var(--color-text) !important;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: 1px solid black !important;
  -webkit-text-fill-color: black !important;
  -webkit-box-shadow: 0 0 0px 1000px #000 inset !important;
  transition: background-color 5000s ease-in-out 0s !important;
  -webkit-transition: background-color 5000s ease-in-out 0s !important;
  -moz-transition: background-color 5000s ease-in-out 0s !important;
  -ms-transition: background-color 5000s ease-in-out 0s !important;
  -o-transition: background-color 5000s ease-in-out 0s !important;
}

a.ui.basic.blue.button.repo.name.item > span.text.truncate {
  color: var(--color-caret) !important;
}

span.header {
  color: var(--color-text-light-2) !important;
}

/* General Styles */
body {
  background: var(--color-body);
  color: var(--color-text);
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.file-view a {
  text-decoration: underline;
}

a {
  text-decoration: none;
  transition: color 0.3s ease;
  -webkit-transition: color 0.3s ease;
  -moz-transition: color 0.3s ease;
  -ms-transition: color 0.3s ease;
  -o-transition: color 0.3s ease;
}

a:hover {
  color: var(--color-primary-dark-1);
}

/* Buttons */
.ui.button,
.ui.button:focus,
.ui.label,
.ui.label:focus
{
  border: 1px solid var(--color-button-border);
  transition: background-color 0.3s ease, border-color 0.3s ease,
    color 0.3s ease;
  -webkit-transition: background-color 0.3s ease, border-color 0.3s ease,
    color 0.3s ease;
  -moz-transition: background-color 0.3s ease, border-color 0.3s ease,
    color 0.3s ease;
  -ms-transition: background-color 0.3s ease, border-color 0.3s ease,
    color 0.3s ease;
  -o-transition: background-color 0.3s ease, border-color 0.3s ease,
    color 0.3s ease;
}

.ui.button:hover {
  background: var(--color-active);
  border: 1px solid var(--color-button-border);
}

.ui.primary.button,
.ui.primary.buttons .button {
  background-color: var(--color-primary);
  color: white;
}

.ui.primary.button:hover,
.ui.primary.buttons .button:hover {
  background-color: var(--color-primary-dark-1);
}

.ui.secondary.button,
.ui.secondary.buttons .button {
  background-color: var(--color-secondary);
  color: white;
}

.ui.secondary.button:hover,
.ui.secondary.buttons .button:hover {
  background-color: var(--color-secondary-alpha-60);
}

.ui.tertiary.button {
  color: var(--color-primary);
}

.ui.tertiary.button:hover {
  color: var(--color-primary-dark-1);
}

input[type="text"],
textarea {
  background-color: var(--color-input-background);
  color: var(--color-text);
  border: 1px solid var(--color-secondary);
  border-radius: 5px;
  padding: 8px;
  transition: background-color 0.3s ease, border-color 0.3s ease;
  -webkit-transition: background-color 0.3s ease, border-color 0.3s ease;
  -moz-transition: background-color 0.3s ease, border-color 0.3s ease;
  -ms-transition: background-color 0.3s ease, border-color 0.3s ease;
  -o-transition: background-color 0.3s ease, border-color 0.3s ease;
}

input[type="text"]:focus,
textarea:focus {
  border-color: var(--color-primary);
  background-color: var(--color-input-background);
}

input#repo-clone-url {
  border: none;
}

pre.code-block {
  margin: 20px auto;
  z-index: 0;
}

.ui.secondary.stackable.pointing.tight.menu {
  margin-bottom: 15px !important;
}

.profile-avatar-name > span {
  color: var(--color-caret) !important;
}

@import url("/assets/css/index.css");