peertube-theme-nctv-dark/assets/style.css
2024-03-11 21:36:15 -04:00

228 lines
5.0 KiB
CSS

:root {
--bs-border-color: #3d3f41;
--bs-link-color: #F57200;
--bs-link-hover-color: #2467cc
}
body {
--mainBackgroundColor: #141414;
--mainForegroundColor: #FFF;
--mainBackgroundHoverColor: #fef3ec;
/* Compat with PeerTube < 3.2 */
--submenuColor: #202020;
--submenuBackgroundColor: #181818;
--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;
}
span.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;
}
.icon.icon-logo {
display: inline-block;
margin-right: 5px;
border-radius: 0px;
margin-top: 0.25rem;
background: url(https://cdn.nicecrew.digital/nctv_color_icon.png) 0% 0% / contain no-repeat;
width: 4rem;
height: 2.75rem;
position: relative;
}
/* .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;
}
*/
.video-thumbnail {
border-radius: 0.275rem !important;
}
.video-thumbnail:hover {
transform: scale(1.02);
}
.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;
}