diff --git a/peertube-theme-dark/assets/style.css b/peertube-theme-dark/assets/style.css index 04f27fc..bba0ce2 100644 --- a/peertube-theme-dark/assets/style.css +++ b/peertube-theme-dark/assets/style.css @@ -1,55 +1,137 @@ -body { - --mainBackgroundColor: #111111; - --mainForegroundColor: #e0e0e1; - - --mainBackgroundHoverColor: #30343b; - - /* Compat with PeerTube < 3.2 */ - --submenuColor: rgb(32, 32, 32); - - --submenuBackgroundColor: rgb(32, 32, 32); - - --inputForegroundColor: #e0e0e1; - --inputBackgroundColor: #30363d; - --inputPlaceholderColor: #aaa; - - --textareaForegroundColor: #e0e0e1; - --textareaBackgroundColor: #30363d; - --markdownTextareaBackgroundColor: #30363d; - - --greyForegroundColor: #bbb; - --greyBackgroundColor: #232830; - --greySecondaryBackgroundColor: #30343b; - - --actionButtonColor: #bbb; - --activatedActionButtonColor: #fff; - - --channelBackgroundColor: rgb(32, 32, 32); - --mainColorVeryLight: #292121; +:root { + --bs-border-color: #3d3f41; + --bs-link-color: #257bfd; + --bs-link-hover-color: #2467cc } -.icon-logo { - min-width: 29px; - min-height: 29px; - background-color: #fff; - background-origin: content-box; - border-radius: 20px; - padding: 3px 4px 3px 8px; +body { + + --mainBackgroundColor: #222; + --mainForegroundColor: #e0e0e1; + --mainBackgroundHoverColor: #fef3ec; + + /* Compat with PeerTube < 3.2 */ + --submenuColor: #202020; + --submenuBackgroundColor: #2c2c2c; + + --inputForegroundColor: #e0e0e1; + --inputBackgroundColor: var(--mainBackgroundColor); + --inputPlaceholderColor: #d1d1d1; + --textareaForegroundColor: #e0e0e1; + --textareaBackgroundColor: var(--mainBackgroundColor); + --markdownTextareaBackgroundColor: #30363d; + --greyForegroundColor: #bbb; + --greyBackgroundColor: #464340; + --greySecondaryBackgroundColor: #4e4d4a; + --actionButtonColor: #bbb; + --activatedActionButtonColor: #fff; + --channelBackgroundColor: #303030; + --mainColorVeryLight: #242320; + --mainColorLightest: #3f3834; + --inputBorderColor: #a5a5a5; + --hoverColor: #ffffff0d +} + +.dropdown-header { + color: var(--mainForegroundColor) +} + +.dropdown-item:active { + background-color: var(--hoverColor) !important +} + +.dropdown-menu { + --bs-dropdown-link-hover-bg: var(--hoverColor) !important } .dropdown-menu, .dropdown-divider { - border-color: var(--inputBorderColor); + border-color: var(--inputBorderColor) } -.dropdown-header { - color: var(--mainForegroundColor); +.icon-logo { + background-color: #fff; + background-origin: content-box; + border-radius: 20px; + min-height: 29px; + min-width: 29px; + padding: 3px 4px 3px 8px } -.accordion-button { - background-color: #292121; +.ng-dropdown-panel { + border-color: var(--inputBorderColor) } -.alert .link-orange { - color: #292121; +.ng-optgroup { + background-color: var(--mainBackgroundColor) !important; + color: var(--inputPlaceholderColor) !important; +} + +.ng-option-marked, +.ng-select-container, +.ng-select-container.ng-has-value, +.ng-select-container.ng-select-focused.ng-select-opened, +.ng-select-multiple { + background-color: var(--mainBackgroundColor) !important; + color: var(--mainForegroundColor) !important +} + +.ng-option:hover, +.ng-option.ng-option-selected { + background-color: #555 !important; + color: var(--mainForegroundColor) !important +} + +.ng-select-container .ng-arrow, +.peertube-select-container::after { + border-top-color: var(--mainForegroundColor) !important +} + +.ng-select.ng-select.ng-select-opened>.ng-select-container .ng-arrow { + border-bottom-color: var(--mainForegroundColor) !important +} + +.notification { + border-bottom-color: rgba(255, 255, 255, 0.1) !important +} + +.notification svg, +.notifications-header svg, +.menu-link svg { + color: var(--greyForegroundColor) !important +} + +.notification.unread { + background-color: #ffffff0d !important +} + +.notifications-header { + border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; + color: var(--greyForegroundColor) !important +} + +.popover { + --bs-popover-bg: var(--mainBackgroundColor) !important; + --bs-popover-body-color: var(--mainForegroundColor) !important; + --bs-popover-box-shadow: 0 .5rem 1rem rgba(255, 255, 255, .15) !important; + --bs-popover-header-color: var(--mainForegroundColor) !important +} + +.progress { + background-color: var(--greySecondaryBackgroundColor) !important +} + +.progress>span, +.all-notifications, +.notifications-header svg:hover, +.menu-link:hover svg { + color: var(--mainForegroundColor) !important +} + +.root-header { + box-shadow: 0 1px 3px rgba(200, 200, 200, .10) !important +} + +input#search-video { + box-shadow: rgba(200, 200, 200, 0.1) 0 1px 20px 0 !important }