vrifox/gitea-theme
vrifox/gitea-theme
Archived
1
0
Fork 0
Code Issues 6 Releases Activity

using monospace on more areas; no-js-fixes (no 'unsafe-inline') and single-user-fixes (display: none for unnecessary parts)

Browse source
This commit is contained in:
Vrifox 2020-10-02 11:21:24 +02:00
parent d3fcec8e56
commit 6bb95104b6
6 changed files with 174 additions and 84 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

147
public/css/theme-vrifox-2020.css
View file

@ -10,7 +10,7 @@
body { body {
background: #28283c; background: #28283c;
color: #f5f5ff; color: #f5f5ff;
font-family: monospace, 'Lucida Console', 'Monaco'; } font-family: monospace, 'Lucida Console', 'Monaco' !important; }
a { a {
color: white; color: white;
@ -21,7 +21,8 @@ a {
.ui.main.menu { .ui.main.menu {
background: #3c3c5a; background: #3c3c5a;
border-bottom: 0; border-bottom: 0;
min-height: 64px; } min-height: 64px;
font-family: monospace, 'Lucida Console', 'Monaco' !important; }
.ui.main.menu #navbar { .ui.main.menu #navbar {
width: 1127px; } width: 1127px; }
.ui.main.menu #navbar .item { .ui.main.menu #navbar .item {
@ -33,17 +34,17 @@ a {
.ui.main.menu #navbar .item.brand .mini.image:hover { .ui.main.menu #navbar .item.brand .mini.image:hover {
opacity: .9; } opacity: .9; }
.ui.main.menu #navbar .item:not(.brand) { .ui.main.menu #navbar .item:not(.brand) {
display: block;
padding: 24px;
border-radius: 0; border-radius: 0;
display: block;
margin: 0px 0px; margin: 0px 0px;
padding: 24px;
transition: background .2s, color .2s; } transition: background .2s, color .2s; }
.ui.main.menu #navbar .item:not(.brand):hover { .ui.main.menu #navbar .item:not(.brand):hover {
background: #32324b; background: #32324b;
color: white; } color: white; }
.ui.main.menu #navbar .item.active:not(.brand) { .ui.main.menu #navbar .item.active:not(.brand) {
color: #f5f5ff; background: #32324b;
background: #32324b; } color: #f5f5ff; }
.ui.main.menu .dropdown.item > .menu { .ui.main.menu .dropdown.item > .menu {
margin-top: 0; } margin-top: 0; }
.ui.main.menu .dropdown.item > .menu, .ui.main.menu.text.menu .dropdown.item > .menu { .ui.main.menu .dropdown.item > .menu, .ui.main.menu.text.menu .dropdown.item > .menu {
@ -65,34 +66,38 @@ a {
color: #d7d7e1; } color: #d7d7e1; }
.repository .header-wrapper .repo-header .repo-title .svg.octicon-repo { .repository .header-wrapper .repo-header .repo-title .svg.octicon-repo {
display: none; } display: none; }
.repository .header-wrapper .repo-header .repo-buttons .button { .repository .header-wrapper .repo-header .repo-buttons {
background: #3c3c5a; display: none; }
box-shadow: none; .repository .header-wrapper .repo-header .repo-buttons .button {
color: #f5f5ff; background: #3c3c5a;
transition: background .2s, color .2s; } box-shadow: none;
.repository .header-wrapper .repo-header .repo-buttons .button:hover { color: #f5f5ff;
transition: background .2s, color .2s;
font-family: monospace, 'Lucida Console', 'Monaco' !important; }
.repository .header-wrapper .repo-header .repo-buttons .button:hover {
background: #32324b;
color: white; }
.repository .header-wrapper .repo-header .repo-buttons .label {
background: #32324b; background: #32324b;
color: white; } box-shadow: none;
.repository .header-wrapper .repo-header .repo-buttons .label { color: #f5f5ff;
background: #32324b; transition: background .2s, color .2s; }
box-shadow: none; .repository .header-wrapper .repo-header .repo-buttons .label:hover {
color: #f5f5ff; background: #28283c;
transition: background .2s, color .2s; } color: white; }
.repository .header-wrapper .repo-header .repo-buttons .label:hover { .repository .header-wrapper .tabs.container .menu.navbar .item {
background: #28283c;
color: white; }
.repository .header-wrapper .tabs .item {
color: #d7d7e1; color: #d7d7e1;
transition: color .2s; } transition: color .2s;
.repository .header-wrapper .tabs .item:hover { font-family: monospace, 'Lucida Console', 'Monaco' !important; }
.repository .header-wrapper .tabs.container .menu.navbar .item:hover {
color: white; } color: white; }
.repository .header-wrapper .tabs .item.active { .repository .header-wrapper .tabs.container .menu.navbar .item.active {
background: #3c3c5a; background: #3c3c5a;
border: 0; border: 0;
color: #f5f5ff; } color: #f5f5ff; }
.repository .header-wrapper .tabs .item.active span.label { .repository .header-wrapper .tabs.container .menu.navbar .item.active span.label {
background: #32324b; } background: #32324b; }
.repository .header-wrapper .tabs .item span.label { .repository .header-wrapper .tabs.container .menu.navbar .item span.label {
background: #3c3c5a; } background: #3c3c5a; }
.repository .container .repo-description { .repository .container .repo-description {
@ -115,7 +120,10 @@ a {
display: flex !important; } display: flex !important; }
.repository .container .repository-summary { .repository .container .repository-summary {
border: 0; } border: 0;
box-shadow: none;
height: initial;
overflow: auto; }
.repository .container .repository-summary .repository-menu { .repository .container .repository-summary .repository-menu {
background: #32324b; } background: #32324b; }
.repository .container .repository-summary .repository-menu .item a { .repository .container .repository-summary .repository-menu .item a {
@ -123,7 +131,17 @@ a {
.repository .container .repository-summary .repository-menu .item a:hover { .repository .container .repository-summary .repository-menu .item a:hover {
color: white !important; } color: white !important; }
.repository .container .repository-summary .language-stats-details { .repository .container .repository-summary .language-stats-details {
display: block !important; } background: #3c3c5a;
padding: 0; }
.repository .container .repository-summary .language-stats-details .horizontal.list .item {
border-radius: 0;
padding: 10px; }
.repository .container .repository-summary .language-stats-details .horizontal.list .item .color-icon {
display: none; }
.repository .container .repository-summary .language-stats-details .horizontal.list .item span {
color: #f5f5ff; }
.repository .container .repository-summary .language-stats {
display: none; }
.repository .container .secondary.menu .item .blue.buttons .button { .repository .container .secondary.menu .item .blue.buttons .button {
background: #3c3c5a; background: #3c3c5a;
@ -135,7 +153,8 @@ a {
.repository .container .secondary.menu .item #clone-panel #repo-clone-https, .repository .container .secondary.menu .item #clone-panel #repo-clone-https,
.repository .container .secondary.menu .item #clone-panel #repo-clone-ssh { .repository .container .secondary.menu .item #clone-panel #repo-clone-ssh {
color: #f5f5ff; color: #f5f5ff;
box-shadow: none !important; } box-shadow: none !important;
font-family: monospace, 'Lucida Console', 'Monaco' !important; }
.repository .container .secondary.menu .item #clone-panel #repo-clone-https:not(.blue), .repository .container .secondary.menu .item #clone-panel #repo-clone-https:not(.blue),
.repository .container .secondary.menu .item #clone-panel #repo-clone-ssh:not(.blue) { .repository .container .secondary.menu .item #clone-panel #repo-clone-ssh:not(.blue) {
background: #3c3c5a; } background: #3c3c5a; }
@ -150,7 +169,8 @@ a {
.repository .container .secondary.menu .item #clone-panel input#repo-clone-url { .repository .container .secondary.menu .item #clone-panel input#repo-clone-url {
background: #28283c; background: #28283c;
border: 2px solid #3c3c5a; border: 2px solid #3c3c5a;
color: #f5f5ff; } color: #f5f5ff;
font-family: monospace, 'Lucida Console', 'Monaco' !important; }
.repository .container .secondary.menu .item #clone-panel input#repo-clone-url:focus { .repository .container .secondary.menu .item #clone-panel input#repo-clone-url:focus {
background: #32324b; background: #32324b;
border: 2px solid #3c3c5a; border: 2px solid #3c3c5a;
@ -184,10 +204,10 @@ a {
color: #f5f5ff; } color: #f5f5ff; }
.repository .container .table { .repository .container .table {
color: #f5f5ff;
border: 0;
background: #1e1e2d; background: #1e1e2d;
border-radius: 5px; } border: 0;
border-radius: 5px;
color: #f5f5ff; }
.repository .container .table thead tr:hover { .repository .container .table thead tr:hover {
background: transparent !important; } background: transparent !important; }
.repository .container .table thead tr th { .repository .container .table thead tr th {
@ -221,26 +241,30 @@ a {
color: #f5f5ff; } color: #f5f5ff; }
.repository .container .non-diff-file-content .header { .repository .container .non-diff-file-content .header {
background: #32324b; background: #32324b;
color: #f5f5ff;
border: 0; }
.repository .container .non-diff-file-content .table {
color: #f5f5ff;
border: 0; border: 0;
background: #1e1e2d; } color: #f5f5ff;
font-family: monospace, 'Lucida Console', 'Monaco' !important; }
.repository .container .non-diff-file-content .table {
background: #1e1e2d;
border: 0;
color: #f5f5ff; }
/* repository: releases */ /* repository: releases */
.repository.release .container .header { .repository.release .container .header {
background: transparent; } background: transparent;
font-family: monospace, 'Lucida Console', 'Monaco' !important; }
.repository.release .container #release-list { .repository.release .container #release-list {
border-top: 1px solid #3c3c5a; } border-top: 1px solid #3c3c5a; }
/* repository: activity */ /* repository: activity */
.repository.commits .container h2.header { .repository.commits .container h2.header {
font-family: monospace, 'Lucida Console', 'Monaco' !important;
background: transparent; } background: transparent; }
.repository.commits .container h2.header .filter .button { .repository.commits .container h2.header .filter .button {
background: #3c3c5a; background: #3c3c5a;
color: #f5f5ff; } color: #f5f5ff;
font-family: monospace, 'Lucida Console', 'Monaco' !important; }
.repository.commits .container h2.header .filter .button:hover { .repository.commits .container h2.header .filter .button:hover {
background: #32324b; } background: #32324b; }
.repository.commits .container h2.header .filter .menu { .repository.commits .container h2.header .filter .menu {
@ -397,7 +421,8 @@ a {
.repository.file .container .non-diff-file-content .file-header .file-header-right .file-actions .buttons .button { .repository.file .container .non-diff-file-content .file-header .file-header-right .file-actions .buttons .button {
background: #464669; background: #464669;
box-shadow: none; box-shadow: none;
color: #f5f5ff; } color: #f5f5ff;
font-family: monospace, 'Lucida Console', 'Monaco' !important; }
.repository.file .container .non-diff-file-content .file-header .file-header-right .file-actions .buttons .button:hover { .repository.file .container .non-diff-file-content .file-header .file-header-right .file-actions .buttons .button:hover {
background: #3c3c5a; } background: #3c3c5a; }
@ -473,8 +498,8 @@ a {
/* user: profile repositories / main */ /* user: profile repositories / main */
.user .container .grid .card { .user .container .grid .card {
box-shadow: none;
background: #32324b; background: #32324b;
box-shadow: none;
color: #f5f5ff; } color: #f5f5ff; }
.user .container .grid .card .content .header { .user .container .grid .card .content .header {
color: #f5f5ff; } color: #f5f5ff; }
@ -487,16 +512,22 @@ a {
.user .container .grid .card .extra.content ul a:hover { .user .container .grid .card .extra.content ul a:hover {
color: #ff8282; } color: #ff8282; }
.user .container .grid .secondary.menu .item { .user .container .grid .secondary.menu {
color: #d7d7e1; } overflow-x: auto;
.user .container .grid .secondary.menu .item:hover { overflow-y: hidden; }
color: white; } .user .container .grid .secondary.menu .item {
.user .container .grid .secondary.menu .item.active { color: #d7d7e1;
color: #f5f5ff; } font-family: monospace, 'Lucida Console', 'Monaco' !important; }
.user .container .grid .secondary.menu .item.active:hover { .user .container .grid .secondary.menu .item:hover {
color: white; } color: white; }
.user .container .grid .secondary.menu .item .label { .user .container .grid .secondary.menu .item.active {
background: #3c3c5a; } color: #f5f5ff; }
.user .container .grid .secondary.menu .item.active:hover {
color: white; }
.user .container .grid .secondary.menu .item .label {
background: #3c3c5a; }
.user .container .grid .secondary.menu .item[href*="stars"], .user .container .grid .secondary.menu .item[href*="following"], .user .container .grid .secondary.menu .item[href*="followers"] {
display: none; }
.user .container .grid .filter.menu { .user .container .grid .filter.menu {
display: none; } display: none; }
@ -522,11 +553,15 @@ a {
.user .container .grid .repository.list .item:not(:first-child) { .user .container .grid .repository.list .item:not(:first-child) {
border-top: 1px solid #3c3c5a; } border-top: 1px solid #3c3c5a; }
.user .container .grid .repository.list .item .header a.name i.archive.icon { .user .container .grid .repository.list .item .header a.name {
color: #d7d7e1 !important; } font-family: monospace, 'Lucida Console', 'Monaco' !important; }
.user .container .grid .repository.list .item .header a.name i.archive.icon {
color: #d7d7e1 !important; }
.user .container .grid .repository.list .item .header .metas span { .user .container .grid .repository.list .item .header .metas {
color: #d7d7e1 !important; } display: none; }
.user .container .grid .repository.list .item .header .metas span {
color: #d7d7e1 !important; }
.user .container .grid .repository.list .item .description p { .user .container .grid .repository.list .item .description p {
color: #f5f5ff; } color: #f5f5ff; }

10
source/gitea-theme-git.vrifox.cc.scss
View file

@ -2,6 +2,16 @@
/* DON'T EDIT THIS FILE; EDIT THE SCSS/SASS INSTEAD */ /* DON'T EDIT THIS FILE; EDIT THE SCSS/SASS INSTEAD */
/* ------------------------------------------------ */ /* ------------------------------------------------ */
@mixin font-family() {
font-family: monospace, 'Lucida Console', 'Monaco' !important;
}
@mixin display-none-single-user() { //items that are useless on a single-user instance
display: none;
}
@mixin display-none-javascript() { //items that are useless if javascript is (partially) disabled (server)
display: none;
}
@import 'partials/main'; @import 'partials/main';
@import 'partials/nav'; @import 'partials/nav';

2
source/partials/_main.scss
View file

@ -10,7 +10,7 @@
body { body {
background: rgb(40, 40, 60); background: rgb(40, 40, 60);
color: rgb(245, 245, 255); color: rgb(245, 245, 255);
font-family: monospace, 'Lucida Console', 'Monaco'; @include font-family();
} }
a { a {
color: rgb(255, 255, 255); color: rgb(255, 255, 255);

7
source/partials/_nav.scss
View file

@ -2,6 +2,7 @@
background: rgb(60, 60, 90); background: rgb(60, 60, 90);
border-bottom: 0; border-bottom: 0;
min-height: 64px; min-height: 64px;
@include font-family();
#navbar { #navbar {
width: 1127px ; width: 1127px ;
.item { .item {
@ -16,18 +17,18 @@
} }
} }
&:not(.brand) { &:not(.brand) {
display: block;
padding: 24px;
border-radius: 0; border-radius: 0;
display: block;
margin: 0px 0px; margin: 0px 0px;
padding: 24px;
transition: background .2s, color .2s; transition: background .2s, color .2s;
&:hover { &:hover {
background: rgb(50, 50, 75); background: rgb(50, 50, 75);
color: rgb(255, 255, 255); color: rgb(255, 255, 255);
} }
&.active { &.active {
color: rgb(245, 245, 255);
background: rgb(50, 50, 75); background: rgb(50, 50, 75);
color: rgb(245, 245, 255);
} }
} }
} }

78
source/partials/repository.scss
View file

@ -20,11 +20,13 @@
} }
} }
.repo-buttons { .repo-buttons {
@include display-none-single-user();
.button { .button {
background: rgb(60, 60, 90); background: rgb(60, 60, 90);
box-shadow: none; box-shadow: none;
color: rgb(245, 245, 255); color: rgb(245, 245, 255);
transition: background .2s, color .2s; transition: background .2s, color .2s;
@include font-family();
&:hover { &:hover {
background: rgb(50, 50, 75); background: rgb(50, 50, 75);
color: rgb(255, 255, 255); color: rgb(255, 255, 255);
@ -43,24 +45,30 @@
} }
} }
.tabs { .tabs {
.item { &.container {
color: rgb(215, 215, 225); .menu.navbar {
transition: color .2s; .item {
&:hover { color: rgb(215, 215, 225);
color: rgb(255, 255, 255); transition: color .2s;
} @include font-family();
&.active { &:hover {
background: rgb(60, 60, 90); color: rgb(255, 255, 255);
border: 0; }
color: rgb(245, 245, 255); &.active {
span.label { background: rgb(60, 60, 90);
background: rgb(50, 50, 75); border: 0;
color: rgb(245, 245, 255);
span.label {
background: rgb(50, 50, 75);
}
}
span.label {
background: rgb(60, 60, 90);
}
} }
} }
span.label {
background: rgb(60, 60, 90);
}
} }
&.divider {}
} }
} }
.container { .container {
@ -92,6 +100,9 @@
} }
.repository-summary { .repository-summary {
border: 0; border: 0;
box-shadow: none;
height: initial; // no-javascript fix
overflow: auto; // no-javascript fix
.repository-menu { .repository-menu {
background: rgb(50, 50, 75); background: rgb(50, 50, 75);
.item { .item {
@ -104,7 +115,23 @@
} }
} }
.language-stats-details { .language-stats-details {
display: block !important; background: rgb(60, 60, 90); // no-javascript fix
padding: 0; // no-javascript fix
.horizontal.list {
.item {
border-radius: 0; // no-javascript fix
padding: 10px;
.color-icon {
display: none; // no-javascript fix
}
span {
color: rgb(245, 245, 255); // no-javascript fix
}
}
}
}
.language-stats {
display: none; // no-javascript fix
} }
} }
.secondary.menu { .secondary.menu {
@ -124,6 +151,7 @@
#repo-clone-ssh { #repo-clone-ssh {
color: rgb(245, 245, 255); color: rgb(245, 245, 255);
box-shadow: none !important; box-shadow: none !important;
@include font-family();
&:not(.blue) { &:not(.blue) {
background: rgb(60, 60, 90); background: rgb(60, 60, 90);
&:hover { &:hover {
@ -139,6 +167,7 @@
background: rgb(40, 40, 60); background: rgb(40, 40, 60);
border: 2px solid rgb(60, 60, 90); border: 2px solid rgb(60, 60, 90);
color: rgb(245, 245, 255); color: rgb(245, 245, 255);
@include font-family();
&:focus { &:focus {
background: rgb(50, 50, 75); background: rgb(50, 50, 75);
border: 2px solid rgb(60, 60, 90); border: 2px solid rgb(60, 60, 90);
@ -163,7 +192,7 @@
.download.icon { .download.icon {
color: rgb(245, 245, 255); color: rgb(245, 245, 255);
.menu { .menu {
background: rgb(60, 60, 90); background: rgb(60, 60, 90);
border: 1px solid rgb(50, 50, 75); border: 1px solid rgb(50, 50, 75);
box-shadow: none; box-shadow: none;
.item { .item {
@ -183,10 +212,10 @@
color: rgb(245, 245, 255); color: rgb(245, 245, 255);
} }
.table { .table {
color: rgb(245, 245, 255);
border: 0;
background: rgb(30, 30, 45); background: rgb(30, 30, 45);
border: 0;
border-radius: 5px; border-radius: 5px;
color: rgb(245, 245, 255);
thead { thead {
tr { tr {
&:hover { &:hover {
@ -242,13 +271,14 @@
color: rgb(245, 245, 255); color: rgb(245, 245, 255);
.header { .header {
background: rgb(50, 50, 75); background: rgb(50, 50, 75);
color: rgb(245, 245, 255);
border: 0; border: 0;
color: rgb(245, 245, 255);
@include font-family();
} }
.table { .table {
color: rgb(245, 245, 255);
border: 0;
background: rgb(30, 30, 45); background: rgb(30, 30, 45);
border: 0;
color: rgb(245, 245, 255);
} }
} }
} }
@ -260,6 +290,7 @@
.container { .container {
.header { .header {
background: transparent; background: transparent;
@include font-family();
} }
#release-list { #release-list {
border-top: 1px solid rgb(60, 60, 90); border-top: 1px solid rgb(60, 60, 90);
@ -272,11 +303,13 @@
.repository.commits { .repository.commits {
.container { .container {
h2.header { h2.header {
@include font-family();
background: transparent; background: transparent;
.filter { .filter {
.button { .button {
background: rgb(60, 60, 90); background: rgb(60, 60, 90);
color: rgb(245, 245, 255); color: rgb(245, 245, 255);
@include font-family();
&:hover { &:hover {
background: rgb(50, 50, 75); background: rgb(50, 50, 75);
} }
@ -544,6 +577,7 @@
background: rgb(70, 70, 105); background: rgb(70, 70, 105);
box-shadow: none; box-shadow: none;
color: rgb(245, 245, 255); color: rgb(245, 245, 255);
@include font-family();
&:hover { &:hover {
background: rgb(60, 60, 90); background: rgb(60, 60, 90);
} }

14
source/partials/user.scss
View file

@ -5,8 +5,8 @@
.container { .container {
.grid { .grid {
.card { .card {
box-shadow: none;
background: rgb(50, 50, 75); background: rgb(50, 50, 75);
box-shadow: none;
color: rgb(245, 245, 255); color: rgb(245, 245, 255);
.content { .content {
.header { .header {
@ -29,8 +29,11 @@
} }
} }
.secondary.menu { .secondary.menu {
overflow-x: auto;
overflow-y: hidden;
.item { .item {
color: rgb(215, 215, 225); color: rgb(215, 215, 225);
@include font-family();
&:hover { &:hover {
color: rgb(255, 255, 255); color: rgb(255, 255, 255);
} }
@ -43,10 +46,15 @@
.label { .label {
background: rgb(60, 60, 90); background: rgb(60, 60, 90);
} }
&[href*="stars"],
&[href*="following"],
&[href*="followers"] {
@include display-none-single-user();
}
} }
} }
.filter.menu { .filter.menu {
display: none; @include display-none-javascript();
} }
form.form { form.form {
.input { .input {
@ -79,11 +87,13 @@
} }
.header { .header {
a.name { a.name {
@include font-family();
i.archive.icon { i.archive.icon {
color: rgb(215, 215, 225) !important; color: rgb(215, 215, 225) !important;
} }
} }
.metas { .metas {
@include display-none-single-user();
span { span {
color: rgb(215, 215, 225) !important; color: rgb(215, 215, 225) !important;
} }