From 6bb95104b606a1e0e558238b8bd824d0316856f9 Mon Sep 17 00:00:00 2001
From: Vrifox <gitea@vrifox.cc>
Date: Fri, 2 Oct 2020 11:21:24 +0200
Subject: [PATCH] using monospace on more areas; no-js-fixes (no
 'unsafe-inline') and single-user-fixes (display: none for unnecessary parts)

---
 public/css/theme-vrifox-2020.css      | 147 ++++++++++++++++----------
 source/gitea-theme-git.vrifox.cc.scss |  10 ++
 source/partials/_main.scss            |   2 +-
 source/partials/_nav.scss             |   7 +-
 source/partials/repository.scss       |  78 ++++++++++----
 source/partials/user.scss             |  14 ++-
 6 files changed, 174 insertions(+), 84 deletions(-)

diff --git a/public/css/theme-vrifox-2020.css b/public/css/theme-vrifox-2020.css
index 9e6cceb..e299e46 100644
--- a/public/css/theme-vrifox-2020.css
+++ b/public/css/theme-vrifox-2020.css
@@ -10,7 +10,7 @@
 body {
   background: #28283c;
   color: #f5f5ff;
-  font-family: monospace, 'Lucida Console', 'Monaco'; }
+  font-family: monospace, 'Lucida Console', 'Monaco' !important; }
 
 a {
   color: white;
@@ -21,7 +21,8 @@ a {
 .ui.main.menu {
   background: #3c3c5a;
   border-bottom: 0;
-  min-height: 64px; }
+  min-height: 64px;
+  font-family: monospace, 'Lucida Console', 'Monaco' !important; }
   .ui.main.menu #navbar {
     width: 1127px; }
     .ui.main.menu #navbar .item {
@@ -33,17 +34,17 @@ a {
           .ui.main.menu #navbar .item.brand .mini.image:hover {
             opacity: .9; }
       .ui.main.menu #navbar .item:not(.brand) {
-        display: block;
-        padding: 24px;
         border-radius: 0;
+        display: block;
         margin: 0px 0px;
+        padding: 24px;
         transition: background .2s, color .2s; }
         .ui.main.menu #navbar .item:not(.brand):hover {
           background: #32324b;
           color: white; }
         .ui.main.menu #navbar .item.active:not(.brand) {
-          color: #f5f5ff;
-          background: #32324b; }
+          background: #32324b;
+          color: #f5f5ff; }
   .ui.main.menu .dropdown.item > .menu {
     margin-top: 0; }
   .ui.main.menu .dropdown.item > .menu, .ui.main.menu.text.menu .dropdown.item > .menu {
@@ -65,34 +66,38 @@ a {
     color: #d7d7e1; }
   .repository .header-wrapper .repo-header .repo-title .svg.octicon-repo {
     display: none; }
-  .repository .header-wrapper .repo-header .repo-buttons .button {
-    background: #3c3c5a;
-    box-shadow: none;
-    color: #f5f5ff;
-    transition: background .2s, color .2s; }
-    .repository .header-wrapper .repo-header .repo-buttons .button:hover {
+  .repository .header-wrapper .repo-header .repo-buttons {
+    display: none; }
+    .repository .header-wrapper .repo-header .repo-buttons .button {
+      background: #3c3c5a;
+      box-shadow: none;
+      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;
-      color: white; }
-  .repository .header-wrapper .repo-header .repo-buttons .label {
-    background: #32324b;
-    box-shadow: none;
-    color: #f5f5ff;
-    transition: background .2s, color .2s; }
-    .repository .header-wrapper .repo-header .repo-buttons .label:hover {
-      background: #28283c;
-      color: white; }
-  .repository .header-wrapper .tabs .item {
+      box-shadow: none;
+      color: #f5f5ff;
+      transition: background .2s, color .2s; }
+      .repository .header-wrapper .repo-header .repo-buttons .label:hover {
+        background: #28283c;
+        color: white; }
+  .repository .header-wrapper .tabs.container .menu.navbar .item {
     color: #d7d7e1;
-    transition: color .2s; }
-    .repository .header-wrapper .tabs .item:hover {
+    transition: color .2s;
+    font-family: monospace, 'Lucida Console', 'Monaco' !important; }
+    .repository .header-wrapper .tabs.container .menu.navbar .item:hover {
       color: white; }
-    .repository .header-wrapper .tabs .item.active {
+    .repository .header-wrapper .tabs.container .menu.navbar .item.active {
       background: #3c3c5a;
       border: 0;
       color: #f5f5ff; }
-      .repository .header-wrapper .tabs .item.active span.label {
+      .repository .header-wrapper .tabs.container .menu.navbar .item.active span.label {
         background: #32324b; }
-    .repository .header-wrapper .tabs .item span.label {
+    .repository .header-wrapper .tabs.container .menu.navbar .item span.label {
       background: #3c3c5a; }
 
 .repository .container .repo-description {
@@ -115,7 +120,10 @@ a {
     display: flex !important; }
 
 .repository .container .repository-summary {
-  border: 0; }
+  border: 0;
+  box-shadow: none;
+  height: initial;
+  overflow: auto; }
   .repository .container .repository-summary .repository-menu {
     background: #32324b; }
     .repository .container .repository-summary .repository-menu .item a {
@@ -123,7 +131,17 @@ a {
       .repository .container .repository-summary .repository-menu .item a:hover {
         color: white !important; }
   .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 {
   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-ssh {
   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-ssh:not(.blue) {
     background: #3c3c5a; }
@@ -150,7 +169,8 @@ a {
 .repository .container .secondary.menu .item #clone-panel input#repo-clone-url {
   background: #28283c;
   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 {
     background: #32324b;
     border: 2px solid #3c3c5a;
@@ -184,10 +204,10 @@ a {
   color: #f5f5ff; }
 
 .repository .container .table {
-  color: #f5f5ff;
-  border: 0;
   background: #1e1e2d;
-  border-radius: 5px; }
+  border: 0;
+  border-radius: 5px;
+  color: #f5f5ff; }
   .repository .container .table thead tr:hover {
     background: transparent !important; }
   .repository .container .table thead tr th {
@@ -221,26 +241,30 @@ a {
   color: #f5f5ff; }
   .repository .container .non-diff-file-content .header {
     background: #32324b;
-    color: #f5f5ff;
-    border: 0; }
-  .repository .container .non-diff-file-content .table {
-    color: #f5f5ff;
     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.release .container .header {
-  background: transparent; }
+  background: transparent;
+  font-family: monospace, 'Lucida Console', 'Monaco' !important; }
 
 .repository.release .container #release-list {
   border-top: 1px solid #3c3c5a; }
 
 /* repository: activity */
 .repository.commits .container h2.header {
+  font-family: monospace, 'Lucida Console', 'Monaco' !important;
   background: transparent; }
   .repository.commits .container h2.header .filter .button {
     background: #3c3c5a;
-    color: #f5f5ff; }
+    color: #f5f5ff;
+    font-family: monospace, 'Lucida Console', 'Monaco' !important; }
     .repository.commits .container h2.header .filter .button:hover {
       background: #32324b; }
   .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 {
   background: #464669;
   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 {
     background: #3c3c5a; }
 
@@ -473,8 +498,8 @@ a {
 
 /* user: profile repositories / main */
 .user .container .grid .card {
-  box-shadow: none;
   background: #32324b;
+  box-shadow: none;
   color: #f5f5ff; }
   .user .container .grid .card .content .header {
     color: #f5f5ff; }
@@ -487,16 +512,22 @@ a {
       .user .container .grid .card .extra.content ul a:hover {
         color: #ff8282; }
 
-.user .container .grid .secondary.menu .item {
-  color: #d7d7e1; }
-  .user .container .grid .secondary.menu .item:hover {
-    color: white; }
-  .user .container .grid .secondary.menu .item.active {
-    color: #f5f5ff; }
-    .user .container .grid .secondary.menu .item.active:hover {
+.user .container .grid .secondary.menu {
+  overflow-x: auto;
+  overflow-y: hidden; }
+  .user .container .grid .secondary.menu .item {
+    color: #d7d7e1;
+    font-family: monospace, 'Lucida Console', 'Monaco' !important; }
+    .user .container .grid .secondary.menu .item:hover {
       color: white; }
-  .user .container .grid .secondary.menu .item .label {
-    background: #3c3c5a; }
+    .user .container .grid .secondary.menu .item.active {
+      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 {
   display: none; }
@@ -522,11 +553,15 @@ a {
 .user .container .grid .repository.list .item:not(:first-child) {
   border-top: 1px solid #3c3c5a; }
 
-.user .container .grid .repository.list .item .header a.name i.archive.icon {
-  color: #d7d7e1 !important; }
+.user .container .grid .repository.list .item .header a.name {
+  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 {
-  color: #d7d7e1 !important; }
+.user .container .grid .repository.list .item .header .metas {
+  display: none; }
+  .user .container .grid .repository.list .item .header .metas span {
+    color: #d7d7e1 !important; }
 
 .user .container .grid .repository.list .item .description p {
   color: #f5f5ff; }
diff --git a/source/gitea-theme-git.vrifox.cc.scss b/source/gitea-theme-git.vrifox.cc.scss
index 1820d54..3385147 100644
--- a/source/gitea-theme-git.vrifox.cc.scss
+++ b/source/gitea-theme-git.vrifox.cc.scss
@@ -2,6 +2,16 @@
 /* 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/nav';
diff --git a/source/partials/_main.scss b/source/partials/_main.scss
index c81f519..6f41939 100644
--- a/source/partials/_main.scss
+++ b/source/partials/_main.scss
@@ -10,7 +10,7 @@
 body {
   background: rgb(40, 40, 60);
   color: rgb(245, 245, 255);
-  font-family: monospace, 'Lucida Console', 'Monaco';
+  @include font-family();
 }
 a {
   color: rgb(255, 255, 255);
diff --git a/source/partials/_nav.scss b/source/partials/_nav.scss
index 5604e3e..e823955 100644
--- a/source/partials/_nav.scss
+++ b/source/partials/_nav.scss
@@ -2,6 +2,7 @@
   background: rgb(60, 60, 90);
   border-bottom: 0;
   min-height: 64px;
+  @include font-family();
   #navbar {
     width: 1127px ;
     .item {
@@ -16,18 +17,18 @@
         }
       }
       &:not(.brand) {
-        display: block;
-        padding: 24px;
         border-radius: 0;
+        display: block;
         margin: 0px 0px;
+        padding: 24px;
         transition: background .2s, color .2s;
         &:hover {
           background: rgb(50, 50, 75);
           color: rgb(255, 255, 255);
         }
         &.active {
-          color: rgb(245, 245, 255);
           background: rgb(50, 50, 75);
+          color: rgb(245, 245, 255);
         }
       }
     }
diff --git a/source/partials/repository.scss b/source/partials/repository.scss
index 096c76d..01c8f42 100644
--- a/source/partials/repository.scss
+++ b/source/partials/repository.scss
@@ -20,11 +20,13 @@
         }
       }
       .repo-buttons {
+        @include display-none-single-user();
         .button {
           background: rgb(60, 60, 90);
           box-shadow: none;
           color: rgb(245, 245, 255);
           transition: background .2s, color .2s;
+          @include font-family();
           &:hover {
             background: rgb(50, 50, 75);
             color: rgb(255, 255, 255);
@@ -43,24 +45,30 @@
       }
     }
     .tabs {
-      .item {
-        color: rgb(215, 215, 225);
-        transition: color .2s;
-        &:hover {
-          color: rgb(255, 255, 255);
-        }
-        &.active {
-          background: rgb(60, 60, 90);
-          border: 0;
-          color: rgb(245, 245, 255);
-          span.label {
-            background: rgb(50, 50, 75);
+      &.container {
+        .menu.navbar {
+          .item {
+            color: rgb(215, 215, 225);
+            transition: color .2s;
+            @include font-family();
+            &:hover {
+              color: rgb(255, 255, 255);
+            }
+            &.active {
+              background: rgb(60, 60, 90);
+              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 {
@@ -92,6 +100,9 @@
     }
     .repository-summary {
       border: 0;
+      box-shadow: none;
+      height: initial; // no-javascript fix
+      overflow: auto; // no-javascript fix
       .repository-menu {
         background: rgb(50, 50, 75);
         .item {
@@ -104,7 +115,23 @@
         }
       }
       .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 {
@@ -124,6 +151,7 @@
           #repo-clone-ssh {
             color: rgb(245, 245, 255);
             box-shadow: none !important;
+            @include font-family();
             &:not(.blue) {
               background: rgb(60, 60, 90);
               &:hover {
@@ -139,6 +167,7 @@
             background: rgb(40, 40, 60);
             border: 2px solid rgb(60, 60, 90);
             color: rgb(245, 245, 255);
+            @include font-family();
             &:focus {
               background: rgb(50, 50, 75);
               border: 2px solid rgb(60, 60, 90);
@@ -163,7 +192,7 @@
           .download.icon {
             color: rgb(245, 245, 255);
             .menu {
-                background: rgb(60, 60, 90);
+              background: rgb(60, 60, 90);
               border: 1px solid rgb(50, 50, 75);
               box-shadow: none;
               .item {
@@ -183,10 +212,10 @@
       color: rgb(245, 245, 255);
     }
     .table {
-      color: rgb(245, 245, 255);
-      border: 0;
       background: rgb(30, 30, 45);
+      border: 0;
       border-radius: 5px;
+      color: rgb(245, 245, 255);
       thead {
         tr {
           &:hover {
@@ -242,13 +271,14 @@
       color: rgb(245, 245, 255);
       .header {
         background: rgb(50, 50, 75);
-        color: rgb(245, 245, 255);
         border: 0;
+        color: rgb(245, 245, 255);
+        @include font-family();
       }
       .table {
-        color: rgb(245, 245, 255);
-        border: 0;
         background: rgb(30, 30, 45);
+        border: 0;
+        color: rgb(245, 245, 255);
       }
     }
   }
@@ -260,6 +290,7 @@
   .container {
     .header {
       background: transparent;
+      @include font-family();
     }
     #release-list {
       border-top: 1px solid rgb(60, 60, 90);
@@ -272,11 +303,13 @@
 .repository.commits {
   .container {
     h2.header {
+      @include font-family();
       background: transparent;
       .filter {
         .button {
           background: rgb(60, 60, 90);
           color: rgb(245, 245, 255);
+          @include font-family();
           &:hover {
             background: rgb(50, 50, 75);
           }
@@ -544,6 +577,7 @@
                 background: rgb(70, 70, 105);
                 box-shadow: none;
                 color: rgb(245, 245, 255);
+                @include font-family();
                 &:hover {
                   background: rgb(60, 60, 90);
                 }
diff --git a/source/partials/user.scss b/source/partials/user.scss
index 645b1c2..da869f2 100644
--- a/source/partials/user.scss
+++ b/source/partials/user.scss
@@ -5,8 +5,8 @@
   .container {
     .grid {
       .card {
-        box-shadow: none;
         background: rgb(50, 50, 75);
+        box-shadow: none;
         color: rgb(245, 245, 255);
         .content {
           .header {
@@ -29,8 +29,11 @@
         }
       }
       .secondary.menu {
+        overflow-x: auto;
+        overflow-y: hidden;
         .item {
           color: rgb(215, 215, 225);
+          @include font-family();
           &:hover {
             color: rgb(255, 255, 255);
           }
@@ -43,10 +46,15 @@
           .label {
             background: rgb(60, 60, 90);
           }
+          &[href*="stars"], 
+          &[href*="following"], 
+          &[href*="followers"] {
+            @include display-none-single-user();
+          }
         }
       }
       .filter.menu {
-        display: none;
+        @include display-none-javascript();
       }
       form.form {
         .input {
@@ -79,11 +87,13 @@
           }
           .header {
             a.name {
+              @include font-family();
               i.archive.icon {
                 color: rgb(215, 215, 225) !important;
               }
             }
             .metas {
+              @include display-none-single-user();
               span {
                 color: rgb(215, 215, 225) !important;
               }