Update 2022-02-22
This commit is contained in:
deathbybandaid
parent
68fedbffd7
commit
b3732cac70
@ -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 {
|
||||
@ -134,10 +161,17 @@ body > app-root > app-user-layout > app-tools > div > div > div.col-9 > app-pass
|
||||
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%);
|
||||
}
|
||||
@ -526,3 +526,14 @@ 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>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);
|
||||
}
|
||||
@ -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 */
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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);
|
||||
.animate__animated.animate__pulse {
|
||||
--animate-duration: 1.5s;
|
||||
}
|
||||
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__pulse:hover {
|
||||
box-shadow: 0 0 10px rgba(var(--accent-color), 0.502);
|
||||
}
|
||||
|
||||
/* @media (min-width: 992px) {
|
||||
.portfolio-box img {
|
||||
object-fit: cover;
|
||||
@ -381,37 +376,54 @@ p {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@-moz-keyframes fadein { /* Firefox */
|
||||
|
||||
@-moz-keyframes fadein {
|
||||
|
||||
/* Firefox */
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes fadein { /* Safari and Chrome */
|
||||
|
||||
@-webkit-keyframes fadein {
|
||||
|
||||
/* Safari and Chrome */
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@-o-keyframes fadein { /* Opera */
|
||||
|
||||
@-o-keyframes fadein {
|
||||
|
||||
/* Opera */
|
||||
from {
|
||||
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 */
|
||||
}
|
||||
@ -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 (
|
||||
|
||||
Loading…
Reference in New Issue
Block a user