added petio

CSS/themes/petio/aquamarine.css

@@ -0,0 +1,28 @@
+
+/*    dP   dP                                                                  dP        */
+/*    88   88                                                                  88        */
+/*  d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b.    88d888b. .d8888b. 88d888b. 88  .dP   */
+/*    88   88'  `88 88ooood8 88'`88'`88 88ooood8    88'  `88 88'  `88 88'  `88 88888"    */
+/*    88   88    88 88.  ... 88  88  88 88.  ...    88.  .88 88.  .88 88       88  `8b.  */
+/*    dP   dP    dP `88888P' dP  dP  dP `88888P' 88 88Y888P' `88888P8 dP       dP   `YP  */
+/*                                                  88                                   */
+/*                                                  dP					 */
+
+/*		   		        Made by @gilbN					 */
+/*			      https://github.com/gilbN/theme.park			 */
+
+/* MOVIEMATCH AQUAMARINE THEME */
+@import url(https://gilbn.github.io/theme.park/CSS/themes/moviematch/moviematch-base.css);
+: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:  #12afa0;
+  --accent-color-hover: #fff;
+  --link-color: #0ed2bf;
+}

CSS/themes/petio/dark.css

@@ -0,0 +1,28 @@
+
+/*    dP   dP                                                                  dP        */
+/*    88   88                                                                  88        */
+/*  d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b.    88d888b. .d8888b. 88d888b. 88  .dP   */
+/*    88   88'  `88 88ooood8 88'`88'`88 88ooood8    88'  `88 88'  `88 88'  `88 88888"    */
+/*    88   88    88 88.  ... 88  88  88 88.  ...    88.  .88 88.  .88 88       88  `8b.  */
+/*    dP   dP    dP `88888P' dP  dP  dP `88888P' 88 88Y888P' `88888P8 dP       dP   `YP  */
+/*                                                  88                                   */
+/*                                                  dP					 */
+
+/*		   		        Made by @gilbN					 */
+/*			      https://github.com/gilbN/theme.park			 */
+
+/* MOVIEMATCH DARK THEME */
+@import url(https://gilbn.github.io/theme.park/CSS/themes/moviematch/moviematch-base.css);
+: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: hsla(0,0%,100%,.30);
+  --button-text: #eee;
+  --button-text-hover: #fff;
+  --accent-color:  #646464;
+  --accent-color-hover: #ffffff73;
+  --link-color: #fff;
+}

CSS/themes/petio/hotline.css

@@ -0,0 +1,28 @@
+
+/*    dP   dP                                                                  dP        */
+/*    88   88                                                                  88        */
+/*  d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b.    88d888b. .d8888b. 88d888b. 88  .dP   */
+/*    88   88'  `88 88ooood8 88'`88'`88 88ooood8    88'  `88 88'  `88 88'  `88 88888"    */
+/*    88   88    88 88.  ... 88  88  88 88.  ...    88.  .88 88.  .88 88       88  `8b.  */
+/*    dP   dP    dP `88888P' dP  dP  dP `88888P' 88 88Y888P' `88888P8 dP       dP   `YP  */
+/*                                                  88                                   */
+/*                                                  dP					 */
+
+/*		   		        Made by @gilbN					 */
+/*			      https://github.com/gilbN/theme.park			 */
+
+/* MOVIEMATCH HOTLINE THEME */
+@import url(https://gilbn.github.io/theme.park/CSS/themes/moviematch/moviematch-base.css);
+: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:  #F44336;
+  --accent-color-hover: #0b3161;
+  --link-color: #0b3161;
+}

CSS/themes/petio/organizr-dark.css

@@ -0,0 +1,28 @@
+
+/*    dP   dP                                                                  dP        */
+/*    88   88                                                                  88        */
+/*  d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b.    88d888b. .d8888b. 88d888b. 88  .dP   */
+/*    88   88'  `88 88ooood8 88'`88'`88 88ooood8    88'  `88 88'  `88 88'  `88 88888"    */
+/*    88   88    88 88.  ... 88  88  88 88.  ...    88.  .88 88.  .88 88       88  `8b.  */
+/*    dP   dP    dP `88888P' dP  dP  dP `88888P' 88 88Y888P' `88888P8 dP       dP   `YP  */
+/*                                                  88                                   */
+/*                                                  dP					 */
+
+/*		   		        Made by @gilbN					 */
+/*			      https://github.com/gilbN/theme.park			 */
+
+/* MOVIEMATCH ORGANIZR-DARK THEME */
+@import url(https://gilbn.github.io/theme.park/CSS/themes/moviematch/moviematch-base.css);
+: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:#2cabe3;
+  --accent-color-hover: #fff;
+  --link-color: #2cabe3;
+}

CSS/themes/petio/petio-base.css

@@ -0,0 +1,193 @@
+/*    dP   dP                                                                  dP        */
+/*    88   88                                                                  88        */
+/*  d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b.    88d888b. .d8888b. 88d888b. 88  .dP   */
+/*    88   88'  `88 88ooood8 88'`88'`88 88ooood8    88'  `88 88'  `88 88'  `88 88888"    */
+/*    88   88    88 88.  ... 88  88  88 88.  ...    88.  .88 88.  .88 88       88  `8b.  */
+/*    dP   dP    dP `88888P' dP  dP  dP `88888P' 88 88Y888P' `88888P8 dP       dP   `YP  */
+/*                                                  88                                   */
+/*                                                  dP					 */
+
+/*		   		        Made by @gilbN					 */
+/*			      https://github.com/gilbN/theme.park			 */
+
+* {
+    outline: none;
+}
+
+body {
+    background: var(--main-bg-color);
+    color: var(--text-color)
+}
+
+/* TEXT COLOR */
+.sub-title, .widget--title,p{
+    color: var(--text-color);
+}
+h1, h2, h3, h4, h5, h6 {
+    color: #fff;
+}
+.settings--menu--item.active p {
+    color: var(--accent-color);
+}
+.settings--menu--item.active {
+    border-bottom: 1px solid var(--accent-color);
+}
+.settings--menu--item.active .icon svg path {
+    fill: var(--accent-color);
+}
+/* MENU */
+/* @media (min-width: 1100px) {
+.sidebar--inner {
+    display: block;
+    background: rgb(0 0 0 / 25%);
+}
+} */
+.menu {
+    background: rgb(0 0 0 / 25%);
+}
+
+@media (max-width: 1099.98px) {
+.sidebar--inner,
+.sidebar--scroll {
+    background: var(--modal-bg-color);
+}
+}
+@media (min-width: 1100px) {
+.page .sidebar {
+    background: rgb(0 0 0 / 25%);
+}
+}
+
+@media (max-width: 991.98px) {
+.menu.open {
+background: var(--modal-bg-color)
+}
+}
+.mob-menu-top {
+    background: var(--modal-bg-color);
+}
+.menu--item.active {
+    background: rgba(255, 255, 255, .15);
+    border-right: 4px solid var(--accent-color);
+}
+@media (min-width: 1100px) {
+.sidebar--item.active {
+    border-top: none !important;
+    border-right: 4px solid var(--accent-color);
+}
+}
+.sidebar--item.active {
+    background: rgba(255, 255, 255, .15);
+    border-top: 4px solid var(--accent-color);
+}
+.menu--item.active p,
+.media-content .media-crew .sidebar--item.active a, .sidebar--item.active .media-content .media-crew a, .sidebar--item.active p {
+    color: var(--accent-color);
+}
+.menu--item.active .icon svg path,
+.sidebar--item.active .icon svg path {
+    fill: var(--accent-color);
+}
+.mob-menu-top .nav-toggle span {
+    background: var(--accent-color);
+}
+/* LINKS */
+a, .table-action,.session--toggle,p a,.profile-page .logout {
+    color: var(--link-color);
+}
+
+/* OTHER */
+.widget--item hr {
+    background: rgb(255 255 255 / 50%);
+}
+.filter--add:hover {
+    color: var(--accent-color);
+    border-color: var(--accent-color);
+}
+.filter--item {
+    background: rgb(0 0 0 / 25%);
+}
+/* DASH */
+.session--prog, .session--media .card .playback-status {
+    background: var(--accent-color);
+}
+.card--inner:hover .image-wrap {
+    -webkit-filter: brightness(.7);
+    filter: brightness(.7);
+    -webkit-box-shadow: 0 0 0 2px var(--accent-color), 0 5px 10px 0 rgb(0 0 0 / 30%);
+    -moz-box-shadow: 0 0 0 2px var(--accent-color),0 5px 10px 0 rgba(0,0,0,.3);
+    box-shadow: 0 0 0 2px var(--accent-color), 0 5px 10px 0 rgb(0 0 0 / 30%);
+}
+.push-msg--item {
+    color: #fff;
+}
+
+/* BUTTONS */
+
+.btn, .btn__square {
+    background: var(--button-color);
+    color: var(--button-text);
+    border: 2px solid var(--button-color);
+}
+.btn:hover, .btn__square:hover {
+    background: var(--button-color-hover);
+    color: var(--button-text-hover);
+    border: 2px solid var(--button-color-hover);
+}
+.btn.bad:hover {
+    border: 2px solid #e95151;
+}
+
+/* TABLES */
+.generic-table tr:not(.child):not(.sub) td {
+    border-bottom: 1px solid rgba(255, 255, 255, .1);
+}
+.generic-table tr:not(.child):not(.sub) th {
+    text-align: left;
+    padding: 5px;
+    border-bottom: 1px solid rgba(255, 255, 255, .4);
+}
+
+/* MODALS */
+.modal--inner {
+    background: var(--modal-bg-color);
+}
+.modal--top {
+    background: var(--modal-bg-color);
+}
+/* FORMS & INPUTS */
+input[type=checkbox]:checked:after {
+    background: var(--accent-color)
+}
+input:not([type=checkbox]):not(.styled-input--input):not([type=file]):focus {
+    border-bottom: 2px solid var(--accent-color);
+    background: rgba(255, 255, 255, .2);
+    color: var(--text-color-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);
+    background: rgb(255 255 255 / 10%);
+}
+
+/* PLACEHOLDER TEXT */
+::placeholder {
+    color: var(--text) !important;
+    opacity: .5;
+}
+
+:-moz-placeholder {
+    color: var(--text) !important;
+    opacity: .5;
+}
+
+:-ms-input-placeholder {
+    color: var(--text) !important;
+    opacity: .5;
+}
+
+::-webkit-input-placeholder {
+    color: var(--text) !important;
+    opacity: .5;
+}

CSS/themes/petio/space-gray.css

@@ -0,0 +1,28 @@
+
+/*    dP   dP                                                                  dP        */
+/*    88   88                                                                  88        */
+/*  d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b.    88d888b. .d8888b. 88d888b. 88  .dP   */
+/*    88   88'  `88 88ooood8 88'`88'`88 88ooood8    88'  `88 88'  `88 88'  `88 88888"    */
+/*    88   88    88 88.  ... 88  88  88 88.  ...    88.  .88 88.  .88 88       88  `8b.  */
+/*    dP   dP    dP `88888P' dP  dP  dP `88888P' 88 88Y888P' `88888P8 dP       dP   `YP  */
+/*                                                  88                                   */
+/*                                                  dP					 */
+
+/*		   		        Made by @gilbN					 */
+/*			      https://github.com/gilbN/theme.park			 */
+
+/* MOVIEMATCH SPACE GRAY THEME */
+@import url(https://gilbn.github.io/theme.park/CSS/themes/moviematch/moviematch-base.css);
+: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: #81a6b7;
+  --accent-color-hover: #607D8B;
+  --link-color: #9adfff;  
+}

README.md

@@ -238,12 +238,17 @@
 <p><a href="https://github.com/gilbN/theme.park/wiki/Moviematch"><img src="https://raw.githubusercontent.com/LukeChannings/moviematch/main/web/static/icons/icon-180.png" alt="" width="48" height="48" /></a></p>
 <p><a href="https://github.com/gilbN/theme.park/wiki/Moviematch">Moviematch</a></p>
 </td>
+<td style="width: 90px; height: 40px; text-align: center;">
+<p><a href="https://github.com/gilbN/theme.park/wiki/Petio"><img src="https://avatars.githubusercontent.com/u/75477127?s=48&v=4" alt="" width="48" height="48" /></a></p>
+<p><a href="https://github.com/gilbN/theme.park/wiki/Petio">Petio</a></p>
+</td>
 </tr>
 </tbody>
 </table>
 
 
 
+
 ## [Adding your own theme colors](https://github.com/gilbN/theme.park/wiki/Creating-your-own-themes)