From 054674cf4f985849d05035ae0f3d9974bb2902c5 Mon Sep 17 00:00:00 2001
From: nexalapp <108235158+nexalapp@users.noreply.github.com>
Date: Sat, 3 Oct 2026 17:27:09 -0600
Subject: [PATCH] Theme-ModernDark: refresh for Stash v0.31 (2.0)
---
themes/Theme-ModernDark/README.md | 18 +-
themes/Theme-ModernDark/Theme-ModernDark.css | 634 +++++++++++++++++--
themes/Theme-ModernDark/Theme-ModernDark.yml | 2 +-
3 files changed, 591 insertions(+), 63 deletions(-)
diff --git a/themes/Theme-ModernDark/README.md b/themes/Theme-ModernDark/README.md
index 77b2be68..115f3601 100644
--- a/themes/Theme-ModernDark/README.md
+++ b/themes/Theme-ModernDark/README.md
@@ -1,3 +1,19 @@
# ModernDark
-https://discourse.stashapp.cc/t/moderndark/1423
\ No newline at end of file
+https://discourse.stashapp.cc/t/moderndark/1423
+
+Neutral dark grey with cards a step lighter and amber for whatever is active. Version 2.0 refreshes the theme for Stash v0.31: one radius scale (4 / 6 / 8), borderless cards with the cover fading in, amber buttons with dark text so they pass WCAG AA, bordered toolbar segments at one height with the count on the pagination row, and styling for the newer parts of Stash (filter sidebar, selection toolbar, performer header, settings, dialogs).
+
+## Screenshots
+
+Taken on Stash v0.31.1 with demo content: fictional titles and names, blurred openly licensed photos (credits on the [screenshots branch](https://github.com/nexalapp/CommunityScripts/tree/screenshots)).
+
+| Scenes | Scene |
+|---|---|
+|  |  |
+
+| Performer | Studios |
+|---|---|
+|  |  |
+
+
diff --git a/themes/Theme-ModernDark/Theme-ModernDark.css b/themes/Theme-ModernDark/Theme-ModernDark.css
index 24a93272..45ec40e8 100644
--- a/themes/Theme-ModernDark/Theme-ModernDark.css
+++ b/themes/Theme-ModernDark/Theme-ModernDark.css
@@ -1,13 +1,22 @@
-/* Modern Dark Theme by cj13 v1.2 */
+/* Modern Dark Theme by cj13 v1.2, refreshed for Stash v0.31 (v2.0) */
:root {
- --nav-color: #212121;
- --body-color: #191919;
+ --nav-color: #1c1c1c;
+ --body-color: #1c1c1c;
--card-color: #2a2a2a;
- --plex-yelow: #e5a00d;
- --tag-color: #555555;
+ --raised-color: #2a2a2a;
+ --plex-yelow: #e69a1a; /* fills: amber buttons take dark text (AA) */
+ --amber-text: #f3b23a; /* amber used as text on grey */
+ --amber-ink: #1c1c1c;
+ --tag-color: #3a3a3a; /* hairlines and control borders */
+ --text-1: #f2f2f2;
+ --text-2: #b5b5b5; /* meta greys lifted to pass AA on the card grey */
+ --text-3: #909090;
+ --radius-in: 4px;
+ --radius-ctl: 6px;
+ --radius-card: 8px;
}
#scrubber-position-indicator {
- background-color: #e5a00d;
+ background-color: var(--plex-yelow);
}
.scrubber-tags-background {
background-color: #e5a00d;
@@ -38,11 +47,9 @@ div.dropdown-menu {
background-color: var(--nav-color) !important;
}
.card {
- border-radius: 3px;
- box-shadow:
- 0 0 0 1px rgba(16, 22, 26, 0.4),
- 0 0 0 rgba(16, 22, 26, 0),
- 0 0 0 rgba(16, 22, 26, 0);
+ border: 0;
+ border-radius: var(--radius-card);
+ box-shadow: none; /* the tonal step already separates cards */
padding: 20px;
background-color: var(--card-color);
}
@@ -52,13 +59,12 @@ div.dropdown-menu {
.text-input:disabled {
background-color: var(--card-color);
}
+.scrubber-button,
#scrubber-forward {
- background-color: transparent;
- border: 1px solid #555;
-}
-.scrubber-button {
- background-color: transparent;
- border: 1px solid #555;
+ background-color: var(--plex-yelow) !important;
+ border: 0 !important;
+ border-radius: var(--radius-in) !important;
+ color: var(--amber-ink) !important;
}
.bg-secondary {
background-color: var(--card-color) !important;
@@ -74,8 +80,9 @@ div.dropdown-menu {
}
.btn-secondary {
color: #eee;
- background-color: rgba(0, 0, 0, 0.15);
+ background-color: var(--raised-color);
border-color: var(--tag-color);
+ border-radius: var(--radius-ctl);
}
.pagination .btn:last-child {
border-right: 1px solid var(--tag-color);
@@ -95,15 +102,16 @@ minimal.w-100.active.btn.btn-primary {
color: #f5f8fa;
}
.btn-primary {
- color: #fff;
- background-color: #cc7b19;
- border-color: #cc7b19;
+ color: var(--amber-ink);
+ background-color: var(--plex-yelow);
+ border-color: var(--plex-yelow);
+ border-radius: var(--radius-ctl);
font-weight: bold;
}
.btn-primary:hover {
- color: #fff;
- background-color: #e59029;
- border-color: #e59029;
+ color: var(--amber-ink);
+ background-color: var(--amber-text);
+ border-color: var(--amber-text);
font-weight: bold;
}
.nav-tabs .nav-link.active {
@@ -158,6 +166,16 @@ input[type="range"]::-moz-range-track {
input[type="range"]::-moz-range-thumb {
background: #bcbcbc;
}
+input[type="range"],
+input[type="checkbox"] {
+ accent-color: var(--plex-yelow);
+}
+input[type="range"].zoom-slider::-webkit-slider-thumb {
+ background-color: var(--text-1);
+}
+input[type="range"].zoom-slider::-webkit-slider-runnable-track {
+ background: linear-gradient(var(--plex-yelow), var(--plex-yelow)) 0 / 30% 100% no-repeat, var(--tag-color);
+}
div.react-select__control {
background-color: hsla(0, 0%, 39.2%, 0.4);
color: #182026;
@@ -236,29 +254,11 @@ option {
.job-table.card {
background-color: var(--card-color);
}
-.modal-header,
-.modal-body,
-.modal-footer {
- background-color: #2d3744;
- background-repeat: no-repeat;
- background-size: cover;
- background-attachment: fixed;
- /* background-position: center;
- */
-}
+
.folder-list .btn-link {
color: #fff;
}
-.modal-header,
-.modal-body,
-.modal-footer {
- background-color: --var(--card-color);
- color: #f5f8fa;
- background-repeat: no-repeat;
- background-size: cover;
- background-attachment: fixed;
- background-position: center;
-}
+
@media (max-width: 575.98px) and (orientation: portrait) {
.scene-card-preview-image {
height: calc(100vw * (9 / 16));
@@ -471,27 +471,30 @@ button.minimal {
}
.btn-primary.disabled,
.btn-primary:disabled {
- color: #fff;
- background-color: #e59029;
- border-color: #e59029;
+ color: var(--amber-ink);
+ background-color: var(--plex-yelow);
+ border-color: var(--plex-yelow);
font-weight: bold;
+ opacity: 0.5;
}
.btn-primary:focus,
.btn-primary.focus {
- background-color: #cc7b19;
- border-color: #cc7b19;
+ color: var(--amber-ink);
+ background-color: var(--plex-yelow);
+ border-color: var(--plex-yelow);
font-weight: bold;
}
.btn-danger {
- color: hsla(0, 0%, 100%, 0.75);
- background-color: #b32;
- border-color: #b32;
+ color: #fff;
+ background-color: #c9302c;
+ border-color: #c9302c;
+ border-radius: var(--radius-ctl);
font-weight: bold;
}
.btn-danger:hover {
color: white;
- background-color: #b32;
- border-color: #b32;
+ background-color: #d9443f;
+ border-color: #d9443f;
}
.brand-link {
background-color: var(--nav-color) !important;
@@ -504,10 +507,22 @@ button.minimal {
.progress-bar {
background-color: var(--plex-yelow);
}
+/* dialogs and menus use the card tone without borders */
+.modal-content,
.modal-header,
.modal-body,
.modal-footer {
- background-color: var(--body-color);
+ background-color: var(--card-color);
+ color: var(--text-1);
+ border: 0;
+}
+.modal-content {
+ border-radius: var(--radius-card);
+}
+div.react-select__menu,
+div.dropdown-menu {
+ border: 0;
+ border-radius: var(--radius-card);
}
.btn-secondary.disabled,
.btn-secondary:disabled {
@@ -531,25 +546,36 @@ button.minimal {
z-index: 2;
}
.video-js .vjs-play-progress {
- background-color: #e5a00d;
+ background-color: var(--plex-yelow);
}
.filtered-list-toolbar {
background-color: var(--body-color);
}
+.sidebar-pane .sidebar,
+.sidebar .sidebar-footer,
+.sidebar-toolbar {
+ background-color: var(--card-color);
+}
.sidebar-pane .sidebar {
- background-color: var(--body-color);
- border-right: 1px solid var(--nav-color);
+ border-right: 1px solid var(--tag-color);
}
.sidebar-section {
- border-bottom: 1px solid var(--nav-color);
+ border-bottom: 0;
}
.sidebar-toggle-button-container .sidebar-toggle-button {
+ width: 34px;
+ height: 34px;
+ padding: 0;
+ margin-left: 0 !important;
border: 1px solid var(--tag-color);
- border-left: none;
+ border-radius: var(--radius-ctl);
+ background-color: var(--raised-color);
+ opacity: 1;
}
.clearable-text-field, .clearable-text-field:active, .clearable-text-field:focus {
- background-color: var(--nav-color);
+ background-color: var(--raised-color);
border-color: var(--tag-color);
+ border-radius: var(--radius-ctl);
}
.form-control:focus {
box-shadow: 0 0 0 .2rem rgba(68, 68, 68, .25);
@@ -560,3 +586,489 @@ button.minimal {
a.bg-secondary:hover, a.bg-secondary:focus, button.bg-secondary:hover, button.bg-secondary:focus {
background-color: var(--nav-color) !important;
}
+
+/* TOP NAV: bold words, amber underline under the active page */
+.top-nav {
+ border-bottom: 1px solid var(--tag-color);
+ box-shadow: inset 0 -1px 0 var(--tag-color); /* also under the menu items */
+}
+.top-nav .navbar-collapse {
+ box-shadow: inset 0 -1px 0 var(--tag-color);
+}
+.top-nav .navbar-brand .brand-link {
+ font-size: 17px;
+ font-weight: 500;
+ text-transform: none;
+}
+@media (min-width: 1200px) {
+ .top-nav {
+ padding-top: 0;
+ padding-bottom: 0;
+ }
+ .top-nav .navbar-nav .nav-link > a.btn {
+ height: 48px; /* stays inside the bar so its bottom border shows */
+ padding: 0 12px !important;
+ border: 0 !important;
+ border-bottom: 3px solid transparent !important;
+ border-radius: 0 !important;
+ background: none !important;
+ color: var(--text-2) !important;
+ font-size: 13px;
+ font-weight: 600;
+ display: block !important;
+ line-height: 45px; /* 48px minus the 3px underline */
+ }
+ .top-nav .navbar-nav .nav-link > a.btn .nav-menu-icon {
+ display: none !important;
+ }
+ .top-nav .navbar-nav .nav-link > a.btn.active {
+ color: var(--amber-text) !important;
+ border-bottom-color: var(--plex-yelow) !important;
+ }
+ .top-nav .navbar-nav .nav-link > a.btn:hover {
+ color: var(--text-1) !important;
+ }
+}
+
+/* LIST TOOLBAR: bordered 34px segments; the active view gets an amber underline */
+.filtered-list-toolbar {
+ gap: 8px;
+}
+.filtered-list-toolbar .btn-group,
+.filtered-list-toolbar .sort-by-select {
+ height: 34px;
+ border: 1px solid var(--tag-color);
+ border-radius: var(--radius-ctl);
+ background-color: var(--raised-color);
+ padding: 2px;
+ gap: 2px;
+ align-items: center;
+}
+.filtered-list-toolbar .btn-group .btn-group {
+ border: 0;
+ padding: 0;
+ height: auto;
+}
+.filtered-list-toolbar .btn-group .btn,
+.filtered-list-toolbar .sort-by-select .btn {
+ height: 28px;
+ padding: 0 9px;
+ border: 0 !important;
+ border-radius: var(--radius-in) !important;
+ background: none !important;
+ color: var(--text-2);
+}
+.filtered-list-toolbar .btn-group .btn.active {
+ color: var(--amber-text) !important;
+ background-color: var(--card-color) !important;
+ border-bottom: 2px solid var(--plex-yelow) !important;
+}
+.filtered-list-toolbar .btn-group .btn-danger {
+ background-color: #c9302c !important;
+ color: #fff !important;
+}
+.filtered-list-toolbar .search-term-input .form-control,
+.filtered-list-toolbar .page-size-selector select {
+ height: 34px;
+}
+.filtered-list-toolbar.has-selection .selected-items-info span {
+ color: var(--amber-text);
+ font-weight: 600;
+}
+.item-list-container .filtered-list-toolbar.has-selection {
+ background-color: var(--body-color);
+ border-bottom: 1px solid var(--tag-color);
+}
+
+/* PAGINATION: centred, with the result count on the same row */
+.pagination-index-container {
+ display: grid;
+ grid-template-columns: 1fr auto 1fr;
+ align-items: center;
+ gap: 12px;
+ margin-top: 10px;
+ padding: 0 16px;
+}
+.pagination-index-container > .pagination {
+ grid-column: 2;
+ margin: 0 !important;
+}
+.pagination-index-container > .paginationIndex {
+ grid-column: 3;
+ justify-self: end;
+ margin: 0 !important;
+ font-size: 13px;
+ color: var(--text-2);
+}
+.pagination-index-container > .paginationIndex:only-child {
+ grid-column: 1 / -1;
+ justify-self: center;
+}
+.pagination.btn-group {
+ border: 1px solid var(--tag-color);
+ border-radius: var(--radius-ctl);
+ background-color: var(--raised-color);
+ padding: 2px;
+}
+.pagination .btn,
+.pagination .btn:first-child,
+.pagination .btn:last-child {
+ border: 0 !important;
+ border-radius: var(--radius-in) !important;
+ background: none;
+}
+/* the floating pagination at the bottom of long lists, in the toolbar style */
+.pagination-footer-container .pagination.btn-group {
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
+}
+@media (max-width: 575.98px) {
+ .pagination-index-container {
+ grid-template-columns: 1fr;
+ justify-items: center;
+ }
+ .pagination-index-container > .pagination,
+ .pagination-index-container > .paginationIndex {
+ grid-column: 1;
+ justify-self: center;
+ }
+}
+
+/* CARDS: one step lighter than the page, cover fading into the card,
+ centred bold counts under a hairline */
+.grid-card {
+ padding: 0 !important;
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+ transition: transform 0.2s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.2s;
+}
+.grid-card:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 0 0 1px var(--plex-yelow), 0 8px 24px rgba(0, 0, 0, 0.45);
+}
+.grid-card:has(.card-check:checked) {
+ box-shadow: 0 0 0 2px var(--plex-yelow);
+}
+.grid-card hr {
+ display: none;
+}
+.grid-card .thumbnail-section {
+ position: relative;
+ overflow: hidden;
+}
+.scene-card .thumbnail-section::after,
+.performer-card .thumbnail-section::after {
+ content: "";
+ position: absolute;
+ inset: 0;
+ pointer-events: none;
+ background: linear-gradient(180deg, transparent 45%, var(--card-color) 100%);
+}
+.scene-card .scene-card-preview,
+.scene-card .scene-card-preview-image,
+.scene-card .scene-card-preview-video {
+ border-radius: 0 !important;
+}
+.grid-card .thumbnail-section .scene-specs-overlay,
+.grid-card .thumbnail-section .studio-overlay,
+.grid-card .thumbnail-section .performer-card__country-flag,
+.grid-card .thumbnail-section .favorite-button {
+ z-index: 2;
+}
+.scene-card .scene-specs-overlay {
+ font-size: 12px !important;
+ font-weight: 600;
+ color: var(--text-1) !important;
+ text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
+}
+.scene-card .scene-specs-overlay span {
+ margin: 0 !important;
+ padding: 0 !important;
+ font-size: inherit !important;
+ font-weight: inherit !important;
+}
+.scene-card .scene-specs-overlay .overlay-resolution + .overlay-duration::before {
+ content: "\00a0ยท\00a0";
+}
+.scene-card .extra-scene-info,
+.scene-card .overlay-filesize {
+ display: none !important;
+}
+.scene-card .studio-overlay {
+ top: 8px;
+ left: 8px;
+ right: auto;
+ padding: 3px 7px;
+ border-radius: var(--radius-in);
+ background-color: rgba(0, 0, 0, 0.45);
+ opacity: 1;
+ height: auto !important;
+ line-height: 0;
+}
+.scene-card .studio-overlay a {
+ display: block;
+ height: auto !important;
+ line-height: 0;
+}
+.scene-card .studio-overlay {
+ max-width: 60%;
+}
+.scene-card .studio-overlay .image-thumbnail {
+ height: 18px !important;
+ max-height: 18px !important;
+ width: auto;
+ max-width: 100% !important;
+ object-fit: contain;
+}
+.scene-card .card-controls {
+ left: auto !important;
+ right: 8px;
+}
+.grid-card .rating-banner {
+ display: none; /* the rating lives on the scene page */
+}
+.grid-card .card-section {
+ padding: 12px 14px !important; /* same 12px above the counts' hairline on every card */
+ background: transparent;
+}
+.grid-card .scene-card__details,
+.grid-card .studio-card__details {
+ margin-bottom: 0 !important; /* stock adds 14px on top of the section padding */
+}
+.grid-card .card-section-title {
+ font-size: 16px !important;
+ font-weight: 500 !important;
+ line-height: 1.25;
+}
+.grid-card .scene-card__date,
+.grid-card .performer-card__age,
+.grid-card .studio-card__details,
+.grid-card .scene-card__description {
+ font-size: 12px !important;
+ color: var(--text-2) !important;
+}
+.grid-card .card-popovers {
+ margin: auto 0 0 !important;
+ padding: 12px !important;
+ justify-content: center !important;
+ gap: 24px;
+ border-top: 1px solid var(--tag-color);
+}
+.grid-card .card-popovers .btn {
+ padding: 0 !important;
+ font-weight: 600;
+ color: var(--text-1) !important;
+ background: none !important;
+}
+.performer-card .performer-card-image {
+ width: 100% !important;
+ height: auto !important;
+ min-width: 0 !important;
+ max-width: none !important;
+ max-height: none !important;
+ aspect-ratio: 2 / 3;
+ object-fit: cover;
+ object-position: top;
+}
+.studio-card .studio-card-header,
+.tag-card .tag-card-header {
+ display: block !important;
+ position: relative;
+ aspect-ratio: 16 / 9;
+ height: auto !important;
+ background-color: var(--raised-color);
+}
+.studio-card .studio-card-image,
+.tag-card .tag-card-image {
+ position: absolute;
+ inset: 0;
+ width: 100% !important;
+ height: 100% !important;
+ max-height: none !important;
+ object-fit: contain;
+ padding: 10% 12%;
+}
+.recommendation-row .grid-card {
+ width: 320px !important;
+}
+
+/* DETAIL PAGES: page tone (stock is blue-grey); the performer portrait fills
+ the left edge and fades into the header */
+.detail-header {
+ background-color: var(--body-color) !important;
+}
+.detail-header:has(.performer-head) {
+ padding: 0 !important;
+ margin: -15px -15px 0 !important;
+ width: auto !important;
+ max-width: none !important;
+ background-color: var(--card-color) !important;
+}
+.detail-header:has(.performer-head) .detail-container {
+ max-width: none;
+ margin: 0;
+ padding: 0;
+ display: flex;
+ align-items: flex-start;
+}
+.detail-header:has(.performer-head) .detail-header-image {
+ position: relative;
+ flex: 0 0 420px;
+ width: 420px;
+ height: 400px;
+ margin: 0;
+ padding: 0;
+ overflow: hidden;
+}
+.detail-header:has(.performer-head) .detail-header-image .btn-link {
+ display: block;
+ width: 100%;
+ height: 100%;
+ padding: 0;
+}
+.detail-header:has(.performer-head) img.performer {
+ width: 100%;
+ height: 100%;
+ max-width: none !important;
+ max-height: none;
+ object-fit: cover;
+ object-position: center top;
+ border-radius: 0 !important;
+ box-shadow: none !important;
+ background: none !important;
+}
+.detail-header:has(.performer-head) .detail-header-image::after {
+ content: "";
+ position: absolute;
+ inset: 0;
+ pointer-events: none;
+ background: linear-gradient(90deg, transparent 55%, var(--card-color));
+}
+.detail-header:has(.performer-head) > .detail-container > .row {
+ flex: 1;
+ min-width: 0;
+ margin: 0;
+ padding: 24px 36px 0;
+}
+.detail-header:has(.performer-head) .performer-head .col,
+.detail-header:has(.performer-head) .performer-head .row {
+ padding: 0 !important;
+ margin: 0 !important;
+}
+.detail-header .performer-name {
+ font-size: 40px;
+ font-weight: 500;
+ line-height: 1;
+}
+.detail-header .detail-item {
+ font-size: 13px;
+ line-height: 1.4;
+ margin: 0 !important;
+ padding: 0 !important;
+}
+.detail-header .detail-group {
+ row-gap: 5px;
+}
+.detail-header .detail-item-title {
+ width: 130px;
+ color: var(--text-3);
+ font-weight: 500;
+}
+.details-edit {
+ gap: 8px;
+ margin-top: 10px !important;
+}
+.details-edit .btn {
+ margin: 0 !important;
+}
+.details-edit .btn-primary:not(.edit):not(.save) {
+ background-color: var(--tag-color);
+ border-color: transparent;
+ color: var(--text-1);
+}
+@media (max-width: 767.98px) {
+ .detail-header:has(.performer-head) .detail-container {
+ flex-direction: column;
+ }
+ .detail-header:has(.performer-head) .detail-header-image {
+ flex-basis: auto;
+ width: 100%;
+ height: 430px;
+ }
+ .detail-header:has(.performer-head) .detail-header-image::after {
+ background: linear-gradient(180deg, transparent 55%, var(--card-color));
+ }
+ .detail-header:has(.performer-head) > .detail-container > .row {
+ padding: 14px;
+ }
+}
+
+/* SCENE PAGE */
+.scene-tabs .scene-header,
+.scene-tabs .scene-header .TruncatedText {
+ font-size: 32px !important;
+ font-weight: 500;
+ line-height: 1.1;
+}
+.nav-tabs .nav-link.active {
+ border-bottom: 2px solid var(--plex-yelow) !important;
+ color: var(--amber-text);
+}
+.scrubber-wrapper {
+ border: 0;
+ background: none;
+}
+
+/* SETTINGS: cards in the card tone, titles at page size, amber left bar */
+.setting-section .card,
+#settings-container .card,
+.job-table.card {
+ border: 0 !important;
+ border-radius: var(--radius-card);
+}
+#settings-container h1,
+#tasks-panel h1 {
+ font-size: 28px;
+ font-weight: 500;
+}
+.nav-pills .nav-link.active,
+.nav-pills .show > .nav-link {
+ border-left: 3px solid var(--plex-yelow);
+ color: var(--amber-text);
+}
+
+/* EMPTY LISTS */
+.item-list-container .sidebar-pane-content:not(:has(.grid-card, .table-list, .scene-wall, .wall, .tagger-container, .card)) > .pagination-index-container::after {
+ content: "Nothing here yet";
+ grid-column: 1 / -1;
+ margin-top: 18vh;
+ text-align: center;
+ font-size: 26px;
+ font-weight: 500;
+ color: var(--text-2);
+}
+
+/* BIG PLAY BUTTON: a soft translucent circle, icon optically centred */
+.video-js .vjs-big-play-button {
+ width: 72px !important;
+ height: 72px !important;
+ margin-left: -36px !important;
+ margin-top: -36px !important;
+ font-size: 36px !important;
+ line-height: 72px !important;
+ border: 0 !important;
+ border-radius: 50% !important;
+ background-color: rgba(255, 255, 255, 0.14) !important;
+ backdrop-filter: blur(6px);
+}
+.video-js:hover .vjs-big-play-button,
+.video-js .vjs-big-play-button:focus {
+ background-color: rgba(230, 154, 26, 0.45) !important;
+}
+.video-js .vjs-big-play-button .vjs-icon-placeholder::before {
+ font-size: 36px !important;
+ line-height: 72px !important;
+ width: 100% !important;
+ height: 100% !important;
+ text-indent: 3px;
+}
diff --git a/themes/Theme-ModernDark/Theme-ModernDark.yml b/themes/Theme-ModernDark/Theme-ModernDark.yml
index d36a22ed..82af0eeb 100644
--- a/themes/Theme-ModernDark/Theme-ModernDark.yml
+++ b/themes/Theme-ModernDark/Theme-ModernDark.yml
@@ -1,6 +1,6 @@
name: Theme - ModernDark
description: ModernDark Theme for Stash by cj13
-version: 1.3
+version: 2.0
url: https://discourse.stashapp.cc/t/moderndark/1423
ui:
css: