From 72a9062a665c1867a464ffa54acbf3e4931b296b Mon Sep 17 00:00:00 2001 From: matty Date: Sat, 19 Apr 2025 11:43:59 -0400 Subject: [PATCH] begin building new theme --- README.md | 4 +- assets/style.css | 314 ++--------------------------------------------- package.json | 6 +- 3 files changed, 17 insertions(+), 307 deletions(-) diff --git a/README.md b/README.md index 175ed8a..de61e9e 100644 --- a/README.md +++ b/README.md @@ -1,3 +1 @@ -# PeerTube dark theme - -Dark theme for PeerTube. +# Dark Theme for NCTV >v7.0.0 diff --git a/assets/style.css b/assets/style.css index ea4a635..5744245 100644 --- a/assets/style.css +++ b/assets/style.css @@ -1,306 +1,18 @@ -:root { - --bs-border-color: #3d3f41; - --bs-link-color: #F57200; - --bs-link-hover-color: #2467cc -} - body { + --red: #FF3B3B; + --green: #2E9D04; - --mainBackgroundColor: #121313; - --mainForegroundColor: #FFF; - --mainBackgroundHoverColor: #fef3ec; + --fg: #e0e0e1; + --bg: #222; - /* Compat with PeerTube < 3.2 */ - --submenuColor: #202020; - --submenuBackgroundColor: #181818; + --input-fg: #e0e0e1; + --input-bg: #222; + --input-placeholder: #d1d1d1; + --input-border-color: #a5a5a5; - --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; - --mainColor: #0083F5; - --inputBorderColor: #a5a5a5; - --hoverColor: #2d2d2d0d; - --mainHoverColor: #2a4858; + --bg-secondary: hsl(30 4% 26% / 1); + + --primary: #FD9C50; + --on-primary: #111; + --border-primary: #F2690D; } - -span.instance-name, -h1.instance-name.home-page, -.custom-markup-container h1, -.custom-markup-container a.instance-name { - background: -webkit-linear-gradient(left, #0083F5, #f57200 65%) !important; - background-clip: text !important; - -webkit-background-clip: text !important; - -moz-background-clip: text !important; - -o-background-clip: text !important; - -ms-background-clip: text !important; - -webkit-text-fill-color: transparent !important; - font-weight: 900 !important; -} - -/* input.p-inputtext.p-component.ng-star-inserted { - color: white; -} */ - -/* .custom-markup-container a , -.modal-body p a { - color: #f57200 !important; - text-decoration: underline !important; - } - -.custom-markup-container a:hover, -.modal-body p a:hover { - color: #D16100 !important; - text-decoration: none !important; -} */ - -.alert.pt-alert-primary.ng-star-inserted, -.instance-information { -display: none; -} - -/* a { -color: #f57200; -text-decoration: none; -} - -a:hover { -color: #D16100; -text-decoration: underline; -} */ - -/* .icon.icon-logo { - display: inline-block; - margin-right: 5px; - border-radius: 0px; - margin-top: 0.25rem; - background: url(https://cdn.nicecrew.digital/static-assets/nctv/icons/NCTV_N_Clr.png) 0% 0% / contain no-repeat; - width: 4rem; - height: 2.75rem; - position: relative; -} */ - -/* .custom-markup-container a { - color: #f57200 !important; - text-decoration: underline !important; - } - */ - -/* input.p-inputtext.p-component.ng-star-inserted { - color: white; -} */ - -/* .external-login-blocks { - color: red; - font-size: 2rem; - width: 80%; - } */ - -/* .svg.feather.feather-thumbs-up:hover { - color: green !important; -} - -svg.feather.feather-thumbs-up:active, -svg.feather.feather-thumbs-up:visited { - fill: green !important; -} - -button.action-button-like.activated { - fill: green !important; -} - -button.action-button-dislike.activated { - fill: red !important; -} - -svg.feather.feather-thumbs-down:hover { - color: red !important; -} - -svg.feather.feather-thumbs-down:active, -svg.feather.feather-thumbs-down:visited, -.action-button-dislike { - fill: red !important; -} - */ - -a.video-thumbnail:hover { - transform: scale(1.02); -} - -a.video-thumbnail { - background-color: transparent !important; - border-radius: 0.45rem !important; -} - - -.logged-in-block, -.logged-in-block > div { - background-color: #181818 !important; -} - -/* .danger-zone button, -.danger-zone input[type=submit] { - background-color: #af3221 !important; -} - -.danger-zone button:hover, -.danger-zone input[type=submit]:hover { - background-color: #61261e !important; -} - -.channel-info { - background-color: #1c1c1c !important; -} */ - -/* a.video-miniature-account.ng-star-inserted { - color: #F57200; -} - -a.video-miniature-account.ng-star-inserted:hover { - color: #f5720085 -} - -.menu-link:hover { - color: #F57200 !important; -} */ - -/* .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); -} */ - -/* .icon-logo { - background-color: #fff; - background-origin: content-box; - border-radius: 20px; - min-height: 29px; - min-width: 29px; - padding: 3px 4px 3px 8px; -} */ - -.ng-dropdown-panel { - border-color: var(--inputBorderColor); -} - -.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; -} - -/* Livechat plugin styling */ - -.chat-msg__time { - display: none !important; -} - -/* Video player styling */ - -/* #video-wrapper { - background-color: transparent !important; -} - -video, div[id^="vjs_video_"], .vjs-control-bar { /* handles both live and VODs as well as control bar on player*/ - /* border-radius: 0.25rem; - background-color: transparent !important; -} */ - -/* #videojs-wrapper { - margin-top: 0.25rem !important; -} */ - -/* random shit */ -#incompatible-browser { - display: none !important; -} \ No newline at end of file diff --git a/package.json b/package.json index b5011ca..554d645 100644 --- a/package.json +++ b/package.json @@ -1,9 +1,9 @@ { "name": "peertube-theme-nctv-dark", - "version": "1.1.7", - "description": "NCTV dark theme", + "version": "3.0.0", + "description": "Dark theme for NCTV for PeerTube >7.0.0", "engine": { - "peertube": ">=4.2.0" + "peertube": ">=7.0.0" }, "keywords": [ "peertube",