Merge pull request #323 from GilbN/develop

1.6.12

css/base/bitwarden/bitwarden-base.css

@@ -49,12 +49,30 @@ app-org-vault-groupings .card li.active>div a:first-of-type,
 .groupings .card li.active>a:first-of-type,
 .groupings .card li.active>div a:first-of-type,
 html[class*="theme_"] a {
-    color: var(--link-color-hover) !important;
+    color: var(--link-color-hover);
 }
+
+html[class*="theme_"] app-vault-groupings .card li.active>a:first-of-type,
+html[class*="theme_"] app-vault-groupings .card li.active>div a:first-of-type,
+html[class*="theme_"] app-org-vault-groupings .card li.active>a:first-of-type,
+html[class*="theme_"] app-org-vault-groupings .card li.active>div a:first-of-type,
+html[class*="theme_"] .groupings .card li.active>a:first-of-type,
+html[class*="theme_"] .groupings .card li.active>div a:first-of-type {
+    color: rgb(var(--accent-color));
+}
+
 html[class*="theme_"] #totpImage {
     background: lightgray;
 }
 
+html[class*="theme_"] .table td>a:not(.badge) {
+    color: var(--link-color);
+}
+
+html[class*="theme_"] .table td>a:not(.badge):hover {
+    color: var(--link-color-hover);
+}
+
 /* TEXT */
 html[class*="theme_"] .text-muted,
 .text-muted,
@@ -65,6 +83,11 @@ html[class*="theme_"] .text-muted,
     color: var(--text-muted) !important;
 }
 
+html[class*="theme_"] .navbar .nav-item.active>.nav-link,
+html[class*="theme_"] .navbar .nav-item>.nav-link {
+    font-weight: 600;
+}
+
 .table-hover tbody tr:hover {
     color: var(--text-hover);
     background-color: rgba(255, 255, 255, .08);
@@ -120,6 +143,10 @@ html[class*="theme_"] .card-body:not(.bg-light>.card-body) {
     color: var(--text);
 }
 
+html[class*="theme_"] a.text-body {
+    color: var(--text-hover) !important;
+}
+
 app-vault-groupings .card li.active>a:first-of-type,
 app-vault-groupings .card li.active>div a:first-of-type,
 app-vault-groupings .card li.active>div>.fa {
@@ -127,17 +154,24 @@ app-vault-groupings .card li.active>div>.fa {
 }
 
 body>app-root>app-user-layout>app-tools>div>div>div.col-9>app-password-generator>div.card.card-password.bg-light.my-4,
-body > app-root > app-user-layout > app-tools > div > div > div.col-9 > app-password-generator > div.card.card-password.bg-light.my-4 > div {
+body>app-root>app-user-layout>app-tools>div>div>div.col-9>app-password-generator>div.card.card-password.bg-light.my-4>div {
     background-color: rgb(0 0 0 / 15%) !important;
 }
 
 html[class*="theme_"] .password-number {
     color: rgb(var(--accent-color));
 }
+
 html[class*="theme_"] .password-letter {
     color: white;
 }
 
+html[class*="theme_"] app-vault-groupings .card .card-body a,
+html[class*="theme_"] app-org-vault-groupings .card .card-body a,
+html[class*="theme_"] .groupings .card .card-body a {
+    color: var(--text);
+}
+
 /* MODALS */
 html[class*="theme_"] .modal-header {
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
@@ -150,6 +184,7 @@ html[class*="theme_"] .modal-header {
     -moz-background-size: auto, cover;
     -o-background-size: auto, cover;
 }
+
 html[class*="theme_"] .modal-body {
     background: var(--modal-bg-color);
     background-repeat: repeat, no-repeat;
@@ -160,6 +195,7 @@ html[class*="theme_"] .modal-body {
     -moz-background-size: auto, cover;
     -o-background-size: auto, cover;
 }
+
 html[class*="theme_"] .modal-footer {
     border-top: 1px solid rgba(255, 255, 255, 0.1);
     background: var(--modal-footer-color);
@@ -172,6 +208,10 @@ html[class*="theme_"] .modal-footer {
     -o-background-size: auto, cover;
 }
 
+html[class*="theme_"] .close {
+    color: var(--text);
+}
+
 .close,
 .close:hover {
     color: #fff;
@@ -228,7 +268,8 @@ html[class*="theme_"] .modal-footer {
 }
 
 /* FORMS */
-html[class*="theme_"] label.form-check-label, html[class*="theme_"] .form-control-file {
+html[class*="theme_"] label.form-check-label,
+html[class*="theme_"] .form-control-file {
     color: var(--text);
 }
 
@@ -269,7 +310,12 @@ select:focus {
     box-shadow: 3px 3px 10px rgba(0, 0, 0, .2);
 } */
 
-html[class*="theme_"] .dropdown-menu, html[class*="theme_"] .dropdown-item {
+html[class*="theme_"] .navbar .dropdown-menu .dropdown-item-text {
+    color: var(--text);
+}
+
+html[class*="theme_"] .dropdown-menu,
+html[class*="theme_"] .dropdown-item {
     background: #1f1f1f;
     color: #fff;
 }
@@ -297,17 +343,35 @@ a.text-danger:focus {
     background: rgb(0 0 0 / 20%) !important;
 }
 
+html[class*="theme_"] app-vault-groupings .card #search,
+html[class*="theme_"] app-org-vault-groupings .card #search,
+html[class*="theme_"] .groupings .card #search {
+    background-color: transparent;
+    border-color: rgb(var(--accent-color));
+    color: #fff;
+}
+
 /* SETTINGS */
 
-html[class*="theme_"] .page-header, html[class*="theme_"] .secondary-header {
+html[class*="theme_"] .page-header,
+html[class*="theme_"] .secondary-header {
+    border-bottom: 1px solid rgb(255 255 255 / 30%);
+}
+
+html[class*="theme_"] .page-header,
+html[class*="theme_"] .secondary-header {
+    border-bottom: 1px solid rgb(255 255 255 / 30%);
+}
+
+html[class*="theme_"] .footer {
     border-bottom: 1px solid rgb(255 255 255 / 30%);
 }
 
 html[class*="theme_"] .list-group-item.active {
-    color: var(--text);
+    border-color: rgba(255, 255, 255, 0.15);
+    color: rgb(var(--accent-color));
     background-color: rgb(255 255 255 / 10%);
     border-left: 3px solid rgb(var(--accent-color));
-    border-color: rgba(255, 255, 255, 0.1);
 }
 
 html[class*="theme_"] .callout {
@@ -317,7 +381,7 @@ html[class*="theme_"] .callout {
 }
 
 html[class*="theme_"] .list-group-item {
-    background-color: rgb(0 0 0 / 25%);
+    background-color: rgb(0 0 0 / 35%);
     border: 1px solid rgb(255 255 255 / 8%);
     color: var(--text);
 }
@@ -450,7 +514,23 @@ html[class*="theme_"] .btn-outline-secondary:active {
     opacity: .8;
 }
 
+html[class*="theme_"] .badge-info {
+    background-color: var(--button-color);
+    color: var(--label-text-color);
+}
+
 /* Org */
+
+html[class*="theme_"] .org-nav .nav-tabs a.active {
+    border-top: 3px solid rgb(var(--accent-color));
+    color: rgb(var(--accent-color));
+}
+
+html[class*="theme_"] .nav-tabs .nav-link.active {
+    background: rgba(0, 0, 0, 0.25);
+    border-color: rgba(255, 255, 255, 0.15);
+}
+
 .org-nav {
     background: var(--main-bg-color);
     background-repeat: repeat, no-repeat;
@@ -559,6 +639,10 @@ input:focus:-ms-input-placeholder {
     background-color: rgba(255, 255, 255, 0.1) !important;
 }
 
+html[class*="theme_"] .groupings .card .card-body a {
+    color: var(--text);
+}
+
 /* Pagination */
 
 .page-item.active .page-link {
@@ -587,6 +671,15 @@ input:focus:-ms-input-placeholder {
     --bs-table-accent-bg: var(--bs-table-striped-bg);
     color: var(--text-hover);
 }
+
 html[class*="theme_"] .table td {
     color: var(--text);
+}
+
+html[class*="theme_"] .table.table-list.table td:not(tr:first-child td),
+html[class*="theme_"] .table.table-list .table th:not(tr:first-child td),
+html[class*="theme_"] hr,
+html[class*="theme_"] .dropdown-divider,
+html[class*="theme_"] .footer {
+    border-top: 1px solid rgb(255 255 255 / 30%);
 }

css/base/overseerr/overseerr-base.css

@@ -339,7 +339,7 @@ a.slider-title:hover {
     background: linear-gradient(rgba(var(--accent-color), 0.3) 0%, rgba(0, 0, 0) 100%) !important;
 }
 
-#__next > div > div.relative.flex.flex-col.flex-1.w-0.min-w-0.mb-16.lg\:ml-64 > main > div > div > div > div.media-overview {
+#__next>div>div.relative.flex.flex-col.flex-1.w-0.min-w-0.mb-16.lg\:ml-64>main>div>div>div>div.media-overview {
     background: var(--main-bg-color);
     padding: 1rem 1rem 2rem 0;
     padding-left: 1rem;
@@ -525,4 +525,15 @@ body>div.fixed.top-0.bottom-0.left-0.right-0.z-50.flex.items-center.justify-cent
 #__next>div>div.relative.z-50.mt-8.sm\:mx-auto.sm\:w-full.sm\:max-w-md>div>button,
 #__next>div>div.relative.z-50.mt-8.sm\:mx-auto.sm\:w-full.sm\:max-w-md>div>div:nth-child(3)>button {
     background: rgba(255, 255, 255, 0.1);
+}
+
+/* TOAST */
+
+#toast-container>div>div {
+    background: rgb(var(--accent-color));
+}
+
+#toast-container .text-gray-400,
+#toast-container .text-white {
+    color: var(--label-text-color);
 }

css/base/sonarr/sonarr-base.css

@@ -941,11 +941,11 @@ input:focus:-ms-input-placeholder {
 }
 
 [class*="CalendarEventGroup-airTime-"] {
-    color: var(--text);
+    color: #fff;
 }
 
 [class*="CalendarEventGroup-episodeInfo-"] {
-    color: var(--text);
+    color: #fff;
 }
 
 /* calendar agenda */

index.html

@@ -37,10 +37,11 @@
     <!-- Third party plugin CSS-->
     <link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css"
         rel="stylesheet" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
     <!-- Core theme CSS (includes Bootstrap)-->
     <link href="resources/landing-page/css/styles.css?v=1.1" rel="stylesheet" />
     <link rel="stylesheet" href="resources/landing-page/css/jquery-bg-slideshow.css">
-    <link rel="stylesheet" href="resources/landing-page/css/custom.css?v=2.4">
+    <link rel="stylesheet" href="resources/landing-page/css/custom.css?v=2.6">
 </head>
 
 <body id="page-top">
@@ -176,7 +177,7 @@
             <div class="col-lg-10 align-self-end">
             </div>
             <div class="col-lg-8 align-self-baseline">
-                <button id="switch-theme" class="btn btn-primary btn-xl click-me-btn">Click Me!</button>
+                <button id="switch-theme" class="btn btn-primary btn-xl animate__animated animate__pulse animate__infinite">Click Me!</button>
             </div>
         </div>
     </div>

resources/landing-page/css/custom.css

@@ -2,7 +2,7 @@
     --about: linear-gradient(to bottom, rgba(0, 0, 0, 1.0), rgba(87, 109, 117, 0)), var(--main-bg-color);
 }
 
-.bg-primary { 
+.bg-primary {
     background: var(--about) !important;
     background-repeat: repeat, no-repeat;
     background-attachment: fixed, fixed;
@@ -32,13 +32,16 @@ section {
 .text-white-50 {
     color: var(--text) !important;
 }
+.page-section {
+    padding: 1.2rem 0;
+}
 
 @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
 
     #mainNav,
     #mainNav.navbar-scrolled {
         box-shadow: none;
-        background-color: rgba(0, 0, 0, 0.55);
+        background-color: rgba(var(--accent-color),1);
         -webkit-backdrop-filter: blur(10px);
         backdrop-filter: blur(10px);
     }
@@ -57,6 +60,7 @@ section {
 
     #mainNav .navbar-nav .nav-item .nav-link {
         padding-left: 1rem;
+        color: var(--label-text-color)
     }
 }
 
@@ -73,7 +77,7 @@ section {
 @media (min-width: 992px) {
     #mainNav {
         box-shadow: none;
-        background-color: rgba(0, 0, 0, 0.55);
+        background-color: rgba(var(--accent-color), 0.25);
         backdrop-filter: blur(10px);
         -webkit-backdrop-filter: blur(10px);
     }
@@ -101,7 +105,7 @@ section {
 
     #mainNav.navbar-scrolled {
         box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
-        background-color: rgba(0, 0, 0, 0.55);
+        background-color: rgba(var(--accent-color), 0.25);
         backdrop-filter: blur(10px);
         -webkit-backdrop-filter: blur(10px);
     }
@@ -125,16 +129,16 @@ section {
 
 #mainNav .navbar-nav .nav-item .nav-link:hover,
 #mainNav .navbar-nav .nav-item .nav-link:active {
-    color: rgb(var(--accent-color));
+    color: var(--text-hover);
 }
 
 #mainNav .navbar-nav .nav-item .nav-link.active {
     color: var(--link-color-hover) !important;
 }
 
-.navbar-light .navbar-toggler-icon {
+/* .navbar-light .navbar-toggler-icon {
     filter: invert(1);
-}
+} */
 
 .navbar-light .navbar-toggler {
     color: rgba(0, 0, 0, 0.5);
@@ -307,23 +311,14 @@ p {
     line-height: 1.2;
 }
 
-@keyframes glowing {
-    0% {
-      background-color: var(--button-color);
-      box-shadow: 0 0 5px rgba(var(--accent-color), 0.502);
-    }
-    50% {
-      background-color: var(--button-color-hover);
-      box-shadow: 0 0 10px rgba(var(--accent-color));
-    }
-    100% {
-        background-color: var(--button-color);
-        box-shadow: 0 0 5px rgba(var(--accent-color), 0.502)
-    }
-  }
-.click-me-btn {
-    animation: glowing 1300ms infinite;
+.animate__animated.animate__pulse {
+    --animate-duration: 1.5s;
+}
+
+.animate__pulse:hover {
+    box-shadow: 0 0 10px rgba(var(--accent-color), 0.502);
 }
+
 /* @media (min-width: 992px) {
 .portfolio-box img {
     object-fit: cover;
@@ -341,7 +336,7 @@ p {
 }
 
 #portfolio [class*="container-"] .portfolio-box .portfolio-box-caption.hotline-hover {
-    background: linear-gradient(0deg, rgba(247,101,184,1) 0%, rgb(21, 95, 165) 100%);
+    background: linear-gradient(0deg, rgba(247, 101, 184, 1) 0%, rgb(21, 95, 165) 100%);
 }
 
 #portfolio [class*="container-"] .portfolio-box .portfolio-box-caption.space-gray-hover {
@@ -379,39 +374,56 @@ p {
 
 @keyframes fadein {
     from {
-        opacity:0;
+        opacity: 0;
     }
+
     to {
-        opacity:1;
+        opacity: 1;
     }
 }
-@-moz-keyframes fadein { /* Firefox */
+
+@-moz-keyframes fadein {
+
+    /* Firefox */
     from {
-        opacity:0;
+        opacity: 0;
     }
+
     to {
-        opacity:1;
+        opacity: 1;
     }
 }
-@-webkit-keyframes fadein { /* Safari and Chrome */
+
+@-webkit-keyframes fadein {
+
+    /* Safari and Chrome */
     from {
-        opacity:0;
+        opacity: 0;
     }
+
     to {
-        opacity:1;
+        opacity: 1;
     }
 }
-@-o-keyframes fadein { /* Opera */
+
+@-o-keyframes fadein {
+
+    /* Opera */
     from {
-        opacity:0;
+        opacity: 0;
     }
+
     to {
         opacity: 1;
     }
 }
+
 body {
     animation: fadein 2s;
-    -moz-animation: fadein 2s; /* Firefox */
-    -webkit-animation: fadein 2s; /* Safari and Chrome */
-    -o-animation: fadein 2s; /* Opera */
+    -moz-animation: fadein 2s;
+    /* Firefox */
+    -webkit-animation: fadein 2s;
+    /* Safari and Chrome */
+    -o-animation: fadein 2s;
+    /* Opera */
 }

resources/landing-page/js/scripts.js

@@ -50,15 +50,16 @@
 
 
 function injectTheme(theme,container="head") {
+    let themeLower = theme.toLowerCase()
     if (container === "head") {
         html_element = document.head;
     } else html_element = document.body;
     let themeOption = document.getElementById("theme-option")
     let link = themeOption ? themeOption : document.createElement("link");
-    url = "/css/theme-options/"
+    url = "/css/theme-options"
     link.type = "text/css";
     link.rel = "stylesheet";
-    link.href = `${url}/${theme.toLowerCase()}.css`;
+    link.href = `${url}/${themeLower}.css`;
     link.id = `theme-option`
     html_element.appendChild(link);
   }
@@ -85,8 +86,9 @@ function injectTheme(theme,container="head") {
     href="https://docs.theme-park.dev/custom/">variables</a>.`
     createApps(apps,themeOptions)
     smoothScroll()
-    let randomTheme = Object.keys(themeOptions)[~~(Math.random() * Object.keys(themeOptions).length)]
-    injectTheme(randomTheme)
+    currentIndex = ~~(Math.random() * Object.keys(themeOptions).length)
+    injectTheme(Object.keys(themeOptions)[currentIndex])
+    updateMetaThemeColor()
     })
 }
 
@@ -119,7 +121,9 @@ function createApps(apps,themeOptions) {
 }
 
 function fadeOutIn(speed) {
-    let theme = Object.keys(themeOptions)[~~(Math.random() * Object.keys(themeOptions).length)]
+    currentIndex = (currentIndex+1)%Object.keys(themeOptions).length;
+    //let theme = Object.keys(themeOptions)[~~(Math.random() * Object.keys(themeOptions).length)]
+    let theme = Object.keys(themeOptions)[currentIndex]
     if (!document.body.style.opacity) {
         document.body.style.opacity = 1;
     }
@@ -129,6 +133,7 @@ function fadeOutIn(speed) {
             clearInterval(outInterval);
             injectTheme(theme)
             document.getElementById("switch-theme").innerText = theme
+            updateMetaThemeColor()
             var inInterval = setInterval(function() {
                 document.body.style.opacity = Number(document.body.style.opacity)+0.02;
                 if (document.body.style.opacity >= 1)
@@ -139,6 +144,16 @@ function fadeOutIn(speed) {
 
 }
 
+function updateMetaThemeColor() {
+    fetch(`/css/theme-options/${Object.keys(themeOptions)[currentIndex].toLowerCase()}.css`)
+    .then(response =>  response.text())
+    .then(text => {
+        let re = text.match("--accent-color:.*;")[0]
+        rgb = re.split(":")[1].split(";")[0].replace(/\s/g, "")
+        document.querySelector('meta[name="theme-color"]').setAttribute('content',  `rgb(${rgb})`);
+        })
+}
+
 // Smooth scrolling using anime.js
 function smoothScroll() {$('a.js-scroll-trigger[href*="#"]:not([href="#"])').on('click', function () {
     if (