petio new vars

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 */
 }

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 */
 }

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 */
 }

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 */
 }

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 */
 }

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;
 }
 

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 */
 }

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 */
 }