From 9e84a88ab8868166a51e06fe80492d3eaff4d906 Mon Sep 17 00:00:00 2001
From: PTKay <jp_moura99@outlook.com>
Date: Wed, 30 Oct 2024 18:56:41 +0000
Subject: [PATCH] Revised AMOLED theme

---
 hedgedocs/web/stylesheets/amoled.css  | 268 ++++++++++++++++++++++++--
 hedgedocs/web/stylesheets/rangers.css |  36 ++--
 2 files changed, 276 insertions(+), 28 deletions(-)

diff --git a/hedgedocs/web/stylesheets/amoled.css b/hedgedocs/web/stylesheets/amoled.css
index cf830abd..783f2432 100644
--- a/hedgedocs/web/stylesheets/amoled.css
+++ b/hedgedocs/web/stylesheets/amoled.css
@@ -4,17 +4,17 @@
     --md-default-fg-color--light: #e6e6e6;
     --md-default-fg-color--lighter: #efefef;
     --md-default-fg-color--lightest: #303030;
-    --md-default-bg-color: #000000;
-    --background-color: var(--md-default-bg-color);
-    --md-primary-fg-color: #1355e4;
+    --md-default-bg-color: var(--amoled-background-color);
+    --background-color: var(--amoled-background);
+    --md-primary-fg-color: #820000;
     --md-primary-fg-color--light: #75b6e7;
     --md-admonition-bg-color: #0f0f0f;
     --md-typeset-table-color: #303030;
     --md-code-fg-color: #d8d8d8;
     --md-code-bg-color: #151515;
     --md-typeset-color: var(--md-default-fg-color);
-    --md-typeset-a-color: #2d70ff;
-    --md-accent-fg-color: #4983ff;
+    --md-typeset-a-color: var(--amoled-accent-color-brighter);
+    --md-accent-fg-color: var(--amoled-alternate-bg-color);
     --md-admonition-fg-color: var(--md-default-fg-color);
     --md-code-hl-name-color: var(--md-code-fg-color);
     --md-code-hl-operator-color: var(--md-default-fg-color--light);
@@ -22,20 +22,266 @@
     --md-code-hl-comment-color: var(--md-default-fg-color--light);
     --md-code-hl-generic-color: var(--md-default-fg-color--light);
     --md-code-hl-variable-color: var(--md-default-fg-color--light);
+    --amoled-background-color: #000000;
+    --amoled-header-color: #820000;
+    --amoled-background: #000000;
+    --amoled-alternate-fg-color: #f2f8f8;
+    --amoled-alternate-bg-color: #500000;
+    --amoled-fg-color-hover: #f4f975;
+    --amoled-accent-color-brighter: #e90000;
+    --amoled-anchor-link-color: #0074ff;
+}
+
+[data-md-color-scheme='amoled'] .contributor {
+    color: var(--md-default-fg-color);
+    word-break: break-word;
+}
+
+[data-md-color-scheme='amoled'] .md-typeset hr {
+    border-bottom: .05rem solid var(--md-default-fg-color--lighter);
+    display: flow-root;
+    margin: 1.5em 0;
+}
+
+[data-md-color-scheme='amoled'] .md-typeset a {
+    color: var(--amoled-anchor-link-color);
+}
+
+[data-md-color-scheme='amoled'] a.contributor:hover {
+    color: var(--md-default-fg-color--lighter);
+}
+
+[data-md-color-scheme='amoled'] .md-nav__link:is(:focus,:hover) {
+    color: var(--md-default-fg-color--lighter);
 }
 
 [data-md-color-scheme='amoled'] th {
-    background-color: #151515;
+    background-color: var(--md-primary-fg-color);
+    color: var(--amoled-alternate-fg-color);
+}
+
+[data-md-color-scheme='amoled'] tr {
+    background-color: var(--md-admonition-bg-color);
+}
+
+
+
+@media screen and (min-width: 76.25em) {
+    [data-md-color-scheme='amoled'] .md-nav--lifted>.md-nav__list>.md-nav__item--active>.md-nav__link {
+        background: var(--amoled-header-color);
+        color: var(--amoled-alternate-fg-color) !important;
+        box-shadow: 0 0 0 0;
+        border-left: 0px;
+        transition: 125ms;
+    }
+    [data-md-color-scheme='amoled'] .md-nav--lifted>.md-nav__list>.md-nav__item--active>.md-nav__link:is(:focus,:hover) {
+        background: var(--amoled-alternate-bg-color);
+        color: var(--amoled-fg-color-hover);
+    }
+    [data-md-color-scheme='amoled'] main>div>div.md-sidebar.md-sidebar--primary>div>div>nav>ul>li.md-nav__item.md-nav__item--active.md-nav__item--section.md-nav__item--nested>div>a {
+        color: var(--amoled-alternate-fg-color) !important;
+        padding: 5px 5px 5px 10px;
+    }
+    [data-md-color-scheme='amoled'] main>div>div.md-sidebar.md-sidebar--primary>div>div>nav>ul>li.md-nav__item.md-nav__item--active.md-nav__item--section.md-nav__item--nested>div>a:is(:focus,:hover) {
+        color: var(--amoled-alternate-fg-color) !important;
+    }
+}
+
+@media screen and (min-width: 60em) {
+    [data-md-color-scheme='amoled'] .md-nav--secondary .md-nav__title {
+        background: var(--amoled-header-color);
+        color: var(--amoled-alternate-fg-color);
+        padding-top: 5px;
+        padding-bottom: 5px;
+        box-shadow: 0 0 0 0;
+    }
+}
+
+[data-md-color-scheme='amoled'] .md-search__form:hover {
+    background-color: hsla(0,0%,10%,.12);
+}
+
+@media screen and (max-width: 76.1875em) {
+    [data-md-color-scheme='amoled'] .md-nav--primary .md-nav__link {
+        margin-top: 0;
+        font-weight: bold;
+        opacity: 75%;
+    }
+    
+    [data-md-color-scheme='amoled'] .md-nav__item .md-nav__link--active .md-nav__container {
+        border-left: none !important;
+        padding-left: 0 !important;
+    }
+
+    [data-md-color-scheme='amoled'] .md-nav--primary .md-nav__item--active>.md-nav__link {
+        color: var(--md-typeset-a-color);
+        border-left: 5px solid;
+        opacity: 100%;
+    }
+}
+
+[data-md-color-scheme='amoled'] .md-sidebar__scrollwrap:focus-within, .md-sidebar__scrollwrap {
+    scrollbar-color: var(--amoled-header-color) #00000000;
+    transition: 0.15s;
+}
+
+[data-md-color-scheme='amoled'] .md-typeset pre>code {
+    scrollbar-color: var(--amoled-header-color) #00000000;
+    transition: 0.15s;
+}
+[data-md-color-scheme='amoled'] .md-typeset pre>code:hover {
+    scrollbar-color: var(--md-accent-fg-color) #00000000;
+}
+
+[data-md-color-scheme='amoled'] .md-search__form {
+    border-radius: 0;
+}
+
+[data-md-color-scheme='amoled'] .md-search__input {
+    color: var(--md-default-fg-color--lighter);
+    font-size: .8rem;
+}
+
+[data-md-color-scheme='amoled'] .md-search-result mark {
+    color: var(--amoled-accent-color-brighter);
+}
+
+[data-md-color-scheme='amoled'] .md-tabs {
+    background-color: var(--amoled-header-color);
+    color: var(--amoled-alternate-fg-color);
+    font-weight: bold;
+}
+
+[data-md-color-scheme='amoled'] .md-tabs__item--active .md-tabs__link {
+    color: var(--amoled-fg-color-hover);
+    background-color: var(--amoled-alternate-bg-color);
+    text-align: center;
+    padding-bottom: 0.7rem;
 }
 
-[data-md-color-scheme='amoled'] .md-typeset table:not([class]) tbody tr:hover {
-    background-color: rgba(255, 255, 255, .055);
-    box-shadow: 0 .05rem 0 var(--md-default-bg-color) inset;
+@media screen and (min-width: 76.1875em) {
+    [data-md-color-scheme='amoled'] .md-nav__item .md-nav__link--active:not(label) {
+        color:  var(--amoled-accent-color-brighter);
+        border-left: .25em solid;
+        padding-left: .5em;
+    }
+}
+
+[data-md-color-scheme='amoled'] .md-logo {
+    filter: invert(4.8%)
+}
+
+[data-md-color-scheme='amoled'] a.md-tabs__link.md-tabs__link--active {
+    color: var(--amoled-alternate-bg-color);
+}
+
+[data-md-color-scheme='amoled'] a.md-tabs__link.md-tabs__link--active:after {
+    color: var(--amoled-alternate-bg-color);
+}
+
+[data-md-color-scheme='amoled'] .md-tabs__link:hover {
+    background-color: var(--amoled-alternate-bg-color);
+    color: var(--amoled-fg-color-hover);
+    text-align: center;
+    padding-bottom: 0.7rem;
+    transition: background-color 0.1s, color 0.1s;
+}
+
+[data-md-color-scheme='amoled'] .md-tabs__link--active:hover {
+    background-color: var(--amoled-alternate-bg-color);
+    color: var(--amoled-fg-color-hover);
+    text-align: center;
+    animation: none;
+}
+
+[data-md-color-scheme='amoled'] .md-tabs__item--active .md-tabs__link--active {
+    color: inherit;
+    background-color: #4ea5cf;
+    padding-bottom: .7rem;
+}
+
+[data-md-color-scheme='amoled'] .md-tabs__item--active .md-tabs__link--active:hover {
+    color: inherit;
+    background-color: var(--amoled-alternate-bg-color);
+    padding-bottom: .7rem;
+}
+
+
+[data-md-color-scheme='amoled'] .md-tabs__link {
+    opacity: 1;
+    outline-color: var(--md-accent-fg-color);
+    outline-offset: 0.2rem;
+    line-height: 0.8rem;
+    border-bottom: 0px transparent;
+    transition: transform 0.4s cubic-bezier(0.1, 0.7, 0.1, 1), opacity 0s, border-bottom 0.25s ease;
+}
+
+[data-md-color-scheme='amoled'] .md-tabs__link.md-tabs__link--active:hover {
+    background-color: #00000000 !important;
+    color: var(--amoled-alternate-bg-color);
+}
+
+[data-md-color-scheme='amoled'] .md-tabs__item.md-tabs__item--active:hover {
+    color: var(--amoled-fg-color-hover);
+    background-color: #00000000 !important;
+}
+
+[data-md-color-scheme='amoled'] .md-tabs__link:after {
+    border-bottom: 0px var(--amoled-alternate-bg-color);
+    transform: scaleX(1);
+}
+
+[data-md-color-scheme='amoled'] .md-header {
+    background-color: var(--amoled-header-color);
+    color: var(--amoled-alternate-fg-color);
+    font-weight: bold;
+}
+
+[data-md-color-scheme='amoled'] .md-typeset .md-button {
+    border-radius: 0rem;
+}
+
+[data-md-color-scheme='amoled'] .md-nav__item .md-nav__link--active, .md-nav__item .md-nav__link--active code {
+    color: var(--md-accent-fg-color);
 }
 
 /* EXTERNAL LINKS IN SIDEBAR */
 
 [data-md-color-scheme='amoled'] a[href^="htt"].md-nav__link::before {
     opacity: 75%;
-    filter: invert(100%);
-}
\ No newline at end of file
+    filter: invert(75%);
+}
+
+@media screen and (max-width: 76.1875em) { 
+    [data-md-color-scheme='amoled'] a[href^="htt"].md-nav__link::before {
+        opacity: 100%;
+        filter: invert(75%);
+    }
+}
+
+/*
+DISABLED FOR ALIGNMENT PURPOSES
+
+[data-md-color-scheme='amoled'] .md-typeset .md-button {
+    border: 0px;
+    border-bottom: .15rem solid;
+    border-color: var(--md-primary-fg-color);
+    border-radius: 0rem;
+    cursor: pointer;
+    display: inline-block;
+    font-weight: 700;
+    padding: .625em 2em;
+    transition: color 125ms,background-color 125ms,border-color 125ms;
+}
+
+[data-md-color-scheme='amoled'] .md-typeset .md-button:is(:focus,:hover) {
+    background-color: var(--md-primary-fg-color);
+    border-color: var(--amoled-alternate-bg-color);
+    color: var(--md-accent-bg-color);
+}
+[data-md-color-scheme='amoled'] .md-typeset .md-button:-webkit-any(:focus,:hover) {
+    background-color: var(--md-primary-fg-color);
+    border-color: var(--amoled-alternate-bg-color);
+    color: var(--md-accent-bg-color);
+}
+*/
\ No newline at end of file
diff --git a/hedgedocs/web/stylesheets/rangers.css b/hedgedocs/web/stylesheets/rangers.css
index bdf866af..53d97cf3 100644
--- a/hedgedocs/web/stylesheets/rangers.css
+++ b/hedgedocs/web/stylesheets/rangers.css
@@ -30,6 +30,8 @@
     --rangers-background-color: #f0f3f5;
     --rangers-header-color: #3e7e9e;
     --rangers-background: radial-gradient(farthest-corner at 25vw 25vh, #ced4d5 10%, #879295 100%);
+    --rangers-alternate-fg-color: #f2f8f8;
+    --rangers-alternate-bg-color: #56bff0;
 }
 
 [data-md-color-scheme='rangers'] .contributor {
@@ -53,7 +55,7 @@
 
 [data-md-color-scheme='rangers'] th {
     background-color: var(--md-primary-fg-color);
-    color: #f2f8f8;
+    color: var(--rangers-alternate-fg-color);
 }
 
 [data-md-color-scheme='rangers'] tr {
@@ -65,27 +67,27 @@
 @media screen and (min-width: 76.25em) {
     [data-md-color-scheme='rangers'] .md-nav--lifted>.md-nav__list>.md-nav__item--active>.md-nav__link {
         background: var(--rangers-header-color);
-        color: #f2f8f8 !important;
+        color: var(--rangers-alternate-fg-color) !important;
         box-shadow: 0 0 0 0;
         border-left: 0px;
         transition: 125ms;
     }
     [data-md-color-scheme='rangers'] .md-nav--lifted>.md-nav__list>.md-nav__item--active>.md-nav__link:is(:focus,:hover) {
-        background: #56bff0;
+        background: var(--rangers-alternate-bg-color);
     }
     [data-md-color-scheme='rangers'] main>div>div.md-sidebar.md-sidebar--primary>div>div>nav>ul>li.md-nav__item.md-nav__item--active.md-nav__item--section.md-nav__item--nested>div>a {
-        color: #f2f8f8 !important;
+        color: var(--rangers-alternate-fg-color) !important;
         padding: 5px 5px 5px 10px;
     }
     [data-md-color-scheme='rangers'] main>div>div.md-sidebar.md-sidebar--primary>div>div>nav>ul>li.md-nav__item.md-nav__item--active.md-nav__item--section.md-nav__item--nested>div>a:is(:focus,:hover) {
-        color: #f2f8f8 !important;
+        color: var(--rangers-alternate-fg-color) !important;
     }
 }
 
 @media screen and (min-width: 60em) {
     [data-md-color-scheme='rangers'] .md-nav--secondary .md-nav__title {
         background: var(--rangers-header-color);
-        color: #f2f8f8;
+        color: var(--rangers-alternate-fg-color);
         padding-top: 5px;
         padding-bottom: 5px;
         box-shadow: 0 0 0 0;
@@ -127,7 +129,7 @@
 
 [data-md-color-scheme='rangers'] .md-tabs {
     background-color: var(--rangers-header-color);
-    color: #f2f8f8;
+    color: var(--rangers-alternate-fg-color);
     font-weight: bold;
 }
 
@@ -144,7 +146,7 @@
 }
 
 [data-md-color-scheme='rangers'] a.md-tabs__link.md-tabs__link--active {
-    color: #56bff0;
+    color: var(--rangers-alternate-bg-color);
 }
 
 [data-md-color-scheme='rangers'] a.md-nav__link.md-nav__link--passed.md-nav__link--active {
@@ -152,11 +154,11 @@
 }
 
 [data-md-color-scheme='rangers'] a.md-tabs__link.md-tabs__link--active:after {
-    color: #56bff0;
+    color: var(--rangers-alternate-bg-color);
 }
 
 [data-md-color-scheme='rangers'] .md-tabs__link:hover {
-    background-color: #56bff0;
+    background-color: var(--rangers-alternate-bg-color);
     color: #d8f6f6;
     text-align: center;
     padding-bottom: 0.7rem;
@@ -164,7 +166,7 @@
 }
 
 [data-md-color-scheme='rangers'] .md-tabs__link--active:hover {
-    background-color: #56bff0;
+    background-color: var(--rangers-alternate-bg-color);
     color: #d8f6f6;
     text-align: center;
     animation: none;
@@ -178,7 +180,7 @@
 
 [data-md-color-scheme='rangers'] .md-tabs__item--active .md-tabs__link--active:hover {
     color: inherit;
-    background-color: #4ea5cf;
+    background-color: var(--rangers-alternate-bg-color);
     padding-bottom: .7rem;
 }
 
@@ -194,7 +196,7 @@
 
 [data-md-color-scheme='rangers'] .md-tabs__link.md-tabs__link--active:hover {
     background-color: #00000000 !important;
-    color: #56bff0;
+    color: var(--rangers-alternate-bg-color);
 }
 
 [data-md-color-scheme='rangers'] .md-tabs__item.md-tabs__item--active:hover {
@@ -203,13 +205,13 @@
 }
 
 [data-md-color-scheme='rangers'] .md-tabs__link:after {
-    border-bottom: 0px #56bff0;
+    border-bottom: 0px var(--rangers-alternate-bg-color);
     transform: scaleX(1);
 }
 
 [data-md-color-scheme='rangers'] .md-header {
     background-color: var(--rangers-header-color);
-    color: #f2f8f8;
+    color: var(--rangers-alternate-fg-color);
     font-weight: bold;
 }
 
@@ -248,12 +250,12 @@ DISABLED FOR ALIGNMENT PURPOSES
 
 [data-md-color-scheme='rangers'] .md-typeset .md-button:is(:focus,:hover) {
     background-color: var(--md-primary-fg-color);
-    border-color: #56bff0;
+    border-color: var(--rangers-alternate-bg-color);
     color: var(--md-accent-bg-color);
 }
 [data-md-color-scheme='rangers'] .md-typeset .md-button:-webkit-any(:focus,:hover) {
     background-color: var(--md-primary-fg-color);
-    border-color: #56bff0;
+    border-color: var(--rangers-alternate-bg-color);
     color: var(--md-accent-bg-color);
 }
 */
\ No newline at end of file