[Theme] - Adding RoundedYellow Theme (#211)

stashapp · Jan 17, 2024 · 63f9e21 · 63f9e21
1 parent c3459a2
commit 63f9e21
Show file tree

Hide file tree

Showing 3 changed files with 180 additions and 0 deletions.
diff --git a/themes/Theme-RoundedYellow/README.md b/themes/Theme-RoundedYellow/README.md
@@ -0,0 +1,5 @@
+A theme with yellow accent colour and rounded corners.
+
+# Preview
+![2024-01-03_14-37-11_blur](https://github.com/Written2001/CommunityScripts/assets/121555133/96932001-4b46-4e97-b4de-5e7cb61608fb)
+![2024-01-03_14-37-01_blur](https://github.com/Written2001/CommunityScripts/assets/121555133/e999ae6b-5e53-418c-a561-00c658afba3e)
diff --git a/themes/Theme-RoundedYellow/Theme-RoundedYellow.css b/themes/Theme-RoundedYellow/Theme-RoundedYellow.css
@@ -0,0 +1,169 @@
+:root{
+    --bgcol: #101118;
+    --searchbgcol: #1b1c28;
+    --btnbordercol: #202b33;
+    --secbtncol: #171822;
+    --btnaccentcol: #cfad0b;
+    --cardbgcol: #1f282c;
+    --navbarcol: #212529;
+  }
+
+  body {
+    background-color: var(--bgcol);
+  }
+
+  .bg-secondary {
+    background-color: var(--searchbgcol)!important;
+  }
+
+  .pagination .btn:first-child {border-left: 1px solid var(--btnbordercol);}
+  .pagination .btn:last-child {border-right: 1px solid var(--btnbordercol);}
+
+  .btn-secondary {
+    border-color: var(--btnbordercol);
+    background-color: var(--bgcol);
+  }
+
+  .btn-secondary:disabled {
+    border-color: var(--btnbordercol);
+    background-color: var(--secbtncol);
+  }
+
+  .btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active, .show>.btn-secondary.dropdown-toggle {
+    background-color: var(--secbtncol);
+    border: 1px solid var(--btnbordercol);
+    color: var(--btnaccentcol);
+    border-bottom: 3px solid var(--btnaccentcol);
+  }
+
+  .card {
+    background-color: var(--cardbgcol);
+    border-radius: 30px;
+  }
+
+  .progress-indicator {
+    background-color: var(--btnaccentcol);
+  }
+
+  .bg-dark{
+    background-color: var(--navbarcol)!important;
+  }
+
+  .btn.active:not(.disabled), .btn.active.minimal:not(.disabled) {
+    background-color: transparent;
+    color: var(--btnaccentcol);
+    border-bottom: 3px solid var(--btnaccentcol);
+  }
+
+  .btn-primary{
+    background-color: var(--btnaccentcol);
+    border-color: var(--btnaccentcol);
+  }
+
+  .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show>.btn-primary.dropdown-toggle {
+    background-color: transparent;
+    border-color: var(--btnaccentcol);
+  }
+
+  .btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus, .show>.btn-primary.dropdown-toggle:focus {
+      box-shadow: 0 0 0 0;
+  }
+
+  .btn-primary:focus, .btn-primary.focus {
+      background-color: var(--btnaccentcol);
+      border-color: var(--btnaccentcol);
+      box-shadow: 0 0 0 0;
+  }
+
+  .btn-primary:hover {
+      color: #fff;
+      background-color: var(--btnaccentcol);
+      border-color: var(--btnaccentcol);
+  }
+
+  div.react-select__menu, div.dropdown-menu {
+      background-color: var(--bgcol);
+      color: #f5f8fa;
+      z-index: 1600;
+  }
+
+  .modal-header, .modal-body, .modal-footer {
+      background-color: var(--bgcol);
+      color: #f5f8fa;
+  }
+
+  .edit-filter-dialog .criterion-list .card .filter-item-header:focus {
+      border-color: var(--btnaccentcol);
+      border-radius: calc(.375rem - 1px);
+      box-shadow: inset 0 0 0 0.1rem var(--btnaccentcol);
+      outline: 0;
+  }
+
+  .nav-tabs .nav-link.active {
+      border-bottom: 2px solid;
+      color: var(--btnaccentcol);
+  }
+
+  .nav-tabs .nav-link.active:hover {
+      border-bottom-color: var(--btnaccentcol);
+      cursor: default;
+  }
+
+  .job-table.card {
+      background-color: var(--bgcol);
+      height: 10em;
+      margin-bottom: 30px;
+      overflow-y: auto;
+      padding: .5rem 15px;
+  }
+
+  .progress-bar {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      overflow: hidden;
+      color: #fff;
+      text-align: center;
+      white-space: nowrap;
+      background-color: var(--btnaccentcol);
+      transition: width .6s ease;
+  }
+
+  .grid-card .progress-bar {
+      background-color: rgba(115,133,159,.5);
+      bottom: 5px;
+      display: block;
+      height: 5px;
+      position: absolute;
+      width: 100%;
+  }
+
+  .grid-card .progress-indicator {
+      background-color: var(--btnaccentcol);
+      height: 5px;
+  }
+
+  .hover-scrubber .hover-scrubber-indicator .hover-scrubber-indicator-marker {
+      background-color: var(--btnaccentcol);
+      bottom: 0;
+      height: 5px;
+      position: absolute;
+  }
+
+  #tasks-panel .tasks-panel-queue {
+      background-color: var(--bgcol);
+      margin-top: -1rem;
+      padding-bottom: .25rem;
+      padding-top: 1rem;
+      position: sticky;
+      top: 3rem;
+      z-index: 2;
+  }
+
+  #scene-edit-details .edit-buttons-container {
+      background-color: var(--bgcol);
+      position: sticky;
+      top: 0;
+      z-index: 3;
+  }
+
diff --git a/themes/Theme-RoundedYellow/Theme-RoundedYellow.yml b/themes/Theme-RoundedYellow/Theme-RoundedYellow.yml
@@ -0,0 +1,6 @@
+name: Theme - Rounded Yellow
+description: Theme with rounded corners and yellow accents
+version: 1.0
+ui:
+  css:
+  - Theme-RoundedYellow.css