From 66efd33f6404c62ca9499d795fe50bc656a821be Mon Sep 17 00:00:00 2001 From: gilbN Date: Sun, 11 Jul 2021 01:12:17 +0200 Subject: [PATCH] petio new vars --- CSS/themes/petio/aquamarine.css | 15 ++------ CSS/themes/petio/dark.css | 15 ++------ CSS/themes/petio/dracula.css | 15 ++------ CSS/themes/petio/hotline.css | 15 ++------ CSS/themes/petio/organizr-dark.css | 15 ++------ CSS/themes/petio/petio-base.css | 61 +++++++++++++++++++++++------- CSS/themes/petio/plex.css | 15 ++------ CSS/themes/petio/space-gray.css | 15 ++------ 8 files changed, 69 insertions(+), 97 deletions(-) diff --git a/CSS/themes/petio/aquamarine.css b/CSS/themes/petio/aquamarine.css index f9f420e7..8b5f509e 100644 --- a/CSS/themes/petio/aquamarine.css +++ b/CSS/themes/petio/aquamarine.css @@ -13,18 +13,9 @@ /* PETIO AQUAMARINE THEME */ @import url(https://theme-park.dev/CSS/themes/petio/petio-base.css); +@import url(https://theme-park.dev/CSS/variables/aquamarine.css); + +/* APP VARS */ :root { - --main-bg-color: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at top, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - --text-color: #eee; - --text-color-hover: #fff; - --button-color: #009688; - --button-color-hover: #12afa0; - --button-text: #eee; - --button-text-hover: #FFF; - --accent-color: 18, 175, 160; - --accent-color-hover: #fff; - --link-color: #0ed2bf; - --link-color-hover: #fff; --spinner: invert(39%) sepia(98%) saturate(527%) hue-rotate(129deg) brightness(94%) contrast(101%); /* Made with https://codepen.io/jsm91/embed/ZEEawyZ */ } \ No newline at end of file diff --git a/CSS/themes/petio/dark.css b/CSS/themes/petio/dark.css index b8f3e805..71b8d102 100644 --- a/CSS/themes/petio/dark.css +++ b/CSS/themes/petio/dark.css @@ -13,18 +13,9 @@ /* PETIO DARK THEME */ @import url(https://theme-park.dev/CSS/themes/petio/petio-base.css); +@import url(https://theme-park.dev/CSS/variables/dark.css); + +/* APP VARS */ :root { - --main-bg-color: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(circle , #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - --text-color: #b7b7b7; - --text-color-hover: #fff; - --button-color: hsla(0,0%,100%,.15); - --button-color-hover: rgb(82, 82, 82); - --button-text: #eee; - --button-text-hover: #fff; - --accent-color: 100, 100, 100; - --accent-color-hover: #ffffff73; - --link-color: #fff; - --link-color-hover: #fff; --spinner: invert(35%) sepia(12%) saturate(4%) hue-rotate(2deg) brightness(104%) contrast(86%); /* Made with https://codepen.io/jsm91/embed/ZEEawyZ */ } \ No newline at end of file diff --git a/CSS/themes/petio/dracula.css b/CSS/themes/petio/dracula.css index c697d2d3..476f2a07 100644 --- a/CSS/themes/petio/dracula.css +++ b/CSS/themes/petio/dracula.css @@ -13,18 +13,9 @@ /* PETIO DRACULA THEME */ @import url(https://theme-park.dev/CSS/themes/petio/petio-base.css); +@import url(https://theme-park.dev/CSS/variables/dracula.css); + +/* APP VARS */ :root { - --main-bg-color: #282a36; - --modal-bg-color: #282a36; - --text-color:#6272a4; - --text-color-hover: #95adfa; - --button-color: #bd93f9; - --button-color-hover: #ff79c6; - --button-text: #eee; - --button-text-hover: #FFF; - --accent-color: 80, 250, 123; - --accent-color-hover: #8be9fd; - --link-color: #ff79c6; - --link-color-hover: #8be9fd; --spinner: invert(79%) sepia(27%) saturate(1033%) hue-rotate(74deg) brightness(104%) contrast(96%); /* Made with https://codepen.io/jsm91/embed/ZEEawyZ */ } \ No newline at end of file diff --git a/CSS/themes/petio/hotline.css b/CSS/themes/petio/hotline.css index a171d102..49f5cf19 100644 --- a/CSS/themes/petio/hotline.css +++ b/CSS/themes/petio/hotline.css @@ -13,18 +13,9 @@ /* PETIO HOTLINE THEME */ @import url(https://theme-park.dev/CSS/themes/petio/petio-base.css); +@import url(https://theme-park.dev/CSS/variables/hotline.css); + +/* APP VARS */ :root { - --main-bg-color: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at top, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - --text-color: #eee; - --text-color-hover: #fff; - --button-color: hsla(0,0%,100%,.15); - --button-color-hover: hsla(0,0%,100%,.30); - --button-text: #eee; - --button-text-hover: #fff; - --accent-color: 244, 67, 54; - --accent-color-hover: #0b3161; - --link-color: #0b3161; - --link-color-hover: #fff; --spinner: invert(32%) sepia(35%) saturate(3786%) hue-rotate(341deg) brightness(100%) contrast(92%); /* Made with https://codepen.io/jsm91/embed/ZEEawyZ */ } \ No newline at end of file diff --git a/CSS/themes/petio/organizr-dark.css b/CSS/themes/petio/organizr-dark.css index 5fb8d2fd..8732f60e 100644 --- a/CSS/themes/petio/organizr-dark.css +++ b/CSS/themes/petio/organizr-dark.css @@ -13,18 +13,9 @@ /* PETIO ORGANIZR-DARK THEME */ @import url(https://theme-park.dev/CSS/themes/petio/petio-base.css); +@import url(https://theme-park.dev/CSS/variables/organizr-dark.css); + +/* APP VARS */ :root { - --main-bg-color: #1f1f1f; - --modal-bg-color: #1b1b1b; - --text-color: #96a2b4; - --text-color-hover: #fff; - --button-color: #2cabe3; - --button-color-hover: rgb(44 171 227 / .8); - --button-text: #eee; - --button-text-hover: #fff; - --accent-color: 44, 171, 227; - --accent-color-hover: #fff; - --link-color: #2cabe3; - --link-color-hover: #fff; --spinner: invert(65%) sepia(83%) saturate(2026%) hue-rotate(167deg) brightness(90%) contrast(97%); /* Made with https://codepen.io/jsm91/embed/ZEEawyZ */ } \ No newline at end of file diff --git a/CSS/themes/petio/petio-base.css b/CSS/themes/petio/petio-base.css index eb6b46ac..5f5e0b6b 100644 --- a/CSS/themes/petio/petio-base.css +++ b/CSS/themes/petio/petio-base.css @@ -16,16 +16,19 @@ body { background: var(--main-bg-color); - color: var(--text-color) + color: var(--text) } /* TEXT COLOR */ p, -.card .text-wrap .title, .card .text-wrap .year, .media-content .overview, -.media-content .media-crew .crew-credit { - color: var(--text-color); +.media-content .media-crew .crew-credit, +.media-content .media-crew .sidebar--item a, +.sidebar--item .media-content .media-crew a, +.sidebar--item p, +.menu--item p { + color: var(--text); } h1, @@ -34,8 +37,19 @@ h3, h4, h5, h6, -.person--details p { - color: #fff; +.person--details p, +.text-wrap > p, +.card .text-wrap .title, +.main-title, +.media-details .media-title, .single-title, +.sub-title, +.sub-title, .widget--title, +.settings--menu--item p { + color: var(--text-hover); +} + +.card .text-wrap > p { + color: var(--text-hover); } .settings--menu--item.active p { @@ -45,6 +59,9 @@ h6, .settings--menu--item.active { border-bottom: 1px solid rgb(var(--accent-color)); } +.settings--menu--item:hover { + border-bottom: 1px solid var(--text-hover); +} .settings--menu--item.active .icon svg path { fill: rgb(var(--accent-color)); @@ -80,7 +97,7 @@ h6, } .menu--item.active { - background: rgba(255, 255, 255, .15); + background: rgba(var(--accent-color), .05); border-right: 4px solid rgb(var(--accent-color)); } @@ -97,7 +114,7 @@ h6, } .sidebar--item.active { - background: rgba(255, 255, 255, .15); + background: rgba(var(--accent-color), .05); border-top: 4px solid rgb(var(--accent-color)); } @@ -117,6 +134,19 @@ h6, background: rgb(var(--accent-color)); } +.sidebar--item:hover p, +.sidebar--item:hover .icon svg path, +.menu--item:hover p, +.menu--item:hover .icon svg path { +color: rgb(var(--accent-color)); +fill: rgb(var(--accent-color)); +} + +.sidebar--item .icon svg path, +.menu--item .icon svg path { + fill: var(--text); +} + /* LINKS */ a, .table-action, @@ -144,6 +174,10 @@ p a:hover, .widget--item hr { background: rgb(255 255 255 / 50%); } +.widget--item--inner, +.sr--instance--inner { + background: hsl(0deg 0% 0% / 15%); +} .filter--add:hover { color: rgb(var(--accent-color)); @@ -217,7 +251,8 @@ code { background: rgb(var(--accent-color)); } -.card--inner:hover .image-wrap { +.card--inner:hover .image-wrap, +.company-card:hover .company-card--inner { -webkit-filter: brightness(.7); filter: brightness(.7); -webkit-box-shadow: 0 0 0 2px rgb(var(--accent-color)), 0 5px 10px 0 rgb(0 0 0 / 30%); @@ -335,7 +370,7 @@ code { } thead { - color: #fff; + color: var(--text-hover); background: rgba(0, 0, 0, 0.25); } @@ -365,19 +400,19 @@ input[type=checkbox]:checked:after { input:not([type=checkbox]):not(.styled-input--input):not([type=file]):focus { border-bottom: 2px solid rgb(var(--accent-color)); background: rgba(255, 255, 255, .2); - color: var(--text-color-hover) + color: var(--text-hover) } input:not([type=checkbox]):not(.styled-input--input):not([type=file]), .login-wrap input { border-bottom: 2px solid rgba(0, 0, 0, 0); - color: var(--text-color); + color: var(--text); background: rgb(255 255 255 / 10%); } .search-form input:focus { background: hsla(0, 0%, 100%, .1) !important; - color: var(--text-color-hover) !important; + color: var(--text-hover) !important; border-bottom: 2px solid rgba(0, 0, 0, 0) !important; } diff --git a/CSS/themes/petio/plex.css b/CSS/themes/petio/plex.css index 0aada4f6..c9477ad8 100644 --- a/CSS/themes/petio/plex.css +++ b/CSS/themes/petio/plex.css @@ -12,18 +12,9 @@ /* PETIO PLEX THEME */ @import url(https://theme-park.dev/CSS/themes/petio/petio-base.css); +@import url(https://theme-park.dev/CSS/variables/plex.css); + +/* APP VARS */ :root { - --main-bg-color: url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/blur-noise.png"), url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/preset-light2.png") center center/cover no-repeat fixed; - --modal-bg-color: url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/blur-noise.png"), url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/preset-dark2.png") center center/cover no-repeat fixed; - --text-color: #eee; - --text-color-hover: #fff; - --button-color: #cc7b19; - --button-color-hover: #e59029; - --button-text: #eee; - --button-text-hover: #fff; - --accent-color: 229, 160, 13; - --accent-color-hover: #ffc107; - --link-color: #e5a00d; - --link-color-hover: #fff; --spinner: invert(0%) sepia(0%) saturate(100%) hue-rotate(0deg) brightness(100%) contrast(100%); /* Made with https://codepen.io/jsm91/embed/ZEEawyZ */ } diff --git a/CSS/themes/petio/space-gray.css b/CSS/themes/petio/space-gray.css index 0fef7457..1cd845e6 100644 --- a/CSS/themes/petio/space-gray.css +++ b/CSS/themes/petio/space-gray.css @@ -13,18 +13,9 @@ /* PETIO SPACE GRAY THEME */ @import url(https://theme-park.dev/CSS/themes/petio/petio-base.css); +@import url(https://theme-park.dev/CSS/variables/space-gray.css); + +/* APP VARS */ :root { - --main-bg-color: radial-gradient( ellipse at center, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient( ellipse at top, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - --text-color: #eee; - --text-color-hover: #fff; - --button-color: #607D8B; - --button-color-hover: #81a6b7; - --button-text: #eee; - --button-text-hover: #fff; - --accent-color: 129, 166, 183; - --accent-color-hover: #607D8B; - --link-color: #9adfff; - --link-color-hover: #fff; --spinner: invert(50%) sepia(31%) saturate(341%) hue-rotate(155deg) brightness(88%) contrast(85%); /* Made with https://codepen.io/jsm91/embed/ZEEawyZ */ } \ No newline at end of file