mirror of https://github.com/Chocobozzz/PeerTube
346 lines
7.6 KiB
SCSS
346 lines
7.6 KiB
SCSS
@use 'sass:math';
|
||
@use 'sass:color';
|
||
@use '_variables' as *;
|
||
@use '_bootstrap-variables' as *;
|
||
@use '_mixins' as *;
|
||
@use '_icons' as *;
|
||
@use '_fonts';
|
||
@use './custom-markup';
|
||
@use './bootstrap';
|
||
@use './primeng-custom';
|
||
@use './z-index';
|
||
@use './class-helpers/index.scss';
|
||
|
||
@mixin main-col-expanded {
|
||
--main-col-width: 100vw;
|
||
|
||
width: calc(100% - #{$menu-collapsed-width});
|
||
margin-inline-start: $menu-collapsed-width;
|
||
}
|
||
|
||
/* clears the ‘X’ from Chrome */
|
||
input[type="search"]::-webkit-search-decoration,
|
||
input[type="search"]::-webkit-search-cancel-button,
|
||
input[type="search"]::-webkit-search-results-button,
|
||
input[type="search"]::-webkit-search-results-decoration { display: none; }
|
||
|
||
body {
|
||
// ---------------------------------------------------------------------------
|
||
// New theme with fallback
|
||
// ---------------------------------------------------------------------------
|
||
|
||
--menu-bg: var(--menuBackgroundColor);
|
||
--menu-fg: var(--menuForegroundColor);
|
||
|
||
--fg: var(--mainForegroundColor, #000);
|
||
|
||
--bg: var(--mainBackgroundColor, #fff);
|
||
--bg-secondary: var(--greyBackgroundColor, #E5E5E5);
|
||
|
||
--primary: var(--mainColor, hsl(24, 90%, 45%));
|
||
--on-primary: #{pvar(--fg)};
|
||
|
||
--red: #{$red};
|
||
--on-red: #{$white};
|
||
|
||
--green: #{$green};
|
||
|
||
--input-fg: var(--inputForegroundColor, #{pvar(--fg)});
|
||
--input-bg: var(--inputBackgroundColor, #{pvar(--bg-secondary-400)});
|
||
--input-placeholder: var(--inputPlaceholderColor, #{pvar(--fg-50)});
|
||
--input-border-color: var(--inputBorderColor, #{pvar(--input-bg)});
|
||
--input-bg-in-secondary: #{pvar(--bg-secondary-450)};
|
||
|
||
--input-check-active-fg: #{pvar(--on-primary)};
|
||
--input-check-active-bg: #{pvar(--primary)};
|
||
|
||
--input-y-padding: 5px;
|
||
--input-x-padding: 20px;
|
||
|
||
--textarea-fg: var(--textareaForegroundColor, #{pvar(--input-fg)});
|
||
--textarea-bg: var(--textareaBackgroundColor, #{pvar(--input-bg)});
|
||
|
||
--support-btn-fg: var(--supportButtonColor, #{pvar(--fg-300)});
|
||
--support-btn-bg: var(--supportButtonBackgroundColor, transparent);
|
||
--support-btn-heart-bg: var(--supportButtonHeartColor, #{$support-button-heart});
|
||
|
||
--x-margin-content: 2rem;
|
||
|
||
--main-col-width: calc(100vw - #{$menu-width});
|
||
|
||
--secondary-icon-color: #{pvar(--fg-50)};
|
||
--active-icon-color: #{pvar(--on-primary)};
|
||
--active-icon-bg: #{pvar(--primary)};
|
||
|
||
--border-primary: #{pvar(--primary)};
|
||
|
||
--alert-primary-fg: #{pvar(--on-primary-200)};
|
||
--alert-primary-bg: #{pvar(--primary-200)};
|
||
--alert-primary-border-color: #{pvar(--primary-300)};
|
||
|
||
--menu-margin-left: #{$menu-margin-left};
|
||
|
||
--header-height: #{$header-height};
|
||
|
||
--menu-fg: #{pvar(--fg-400)};
|
||
--menu-bg: #{pvar(--bg-secondary-400)};
|
||
|
||
@media screen and (max-width: $small-view) {
|
||
--header-height: #{$header-height-small-view};
|
||
}
|
||
|
||
@media screen and (max-width: $mobile-view) {
|
||
--header-height: #{$header-height-mobile-view};
|
||
}
|
||
|
||
// Light theme
|
||
&[data-pt-theme=peertube-core-light-beige],
|
||
&[data-pt-theme=default] {
|
||
--is-dark: 0;
|
||
|
||
--primary: #FF8F37;
|
||
--border-primary: #F2690D;
|
||
|
||
--fg: hsl(0 14% 2%);
|
||
|
||
--bg: hsl(250 5% 96%);
|
||
--bg-secondary: hsl(0 12% 72%);
|
||
--bg-secondary-500: hsl(0 12% 72%);
|
||
--bg-secondary-450: hsl(0 13% 81%);
|
||
--bg-secondary-400: hsl(0 19% 89%);
|
||
--bg-secondary-350: hsl(0 13% 92%);
|
||
|
||
--menu-bg-600: hsl(0 12% 72%);
|
||
--menu-bg-550: hsl(0 13% 81%);
|
||
--menu-bg: hsl(0 19% 89%);
|
||
|
||
--secondary-icon-color: hsl(0, 9%, 51%);
|
||
--input-placeholder: hsl(0, 9%, 51%);
|
||
|
||
--input-check-active-fg: #{pvar(--bg)};
|
||
--input-check-active-bg: #{pvar(--fg-250)};
|
||
|
||
--alert-primary-fg: #{pvar(--on-primary-200)};
|
||
--alert-primary-bg: #{pvar(--primary-200)};
|
||
--alert-primary-border-color: #{pvar(--primary-300)};
|
||
}
|
||
|
||
// Brown
|
||
&[data-pt-theme=peertube-core-dark-brown] {
|
||
--is-dark: 1;
|
||
|
||
--primary: #FD9C50;
|
||
--on-primary: #111;
|
||
--border-primary: #F2690D;
|
||
|
||
--input-bg: #{pvar(--bg-secondary-450)};
|
||
--input-bg-in-secondary: #{pvar(--bg-secondary-500)};
|
||
|
||
--fg: hsl(0 10% 96%);
|
||
|
||
--bg: hsl(0 14% 7%);
|
||
--bg-secondary: hsl(0 14% 22%);
|
||
|
||
--alert-primary-fg: #{pvar(--on-primary)};
|
||
--alert-primary-bg: #cd9e7a;
|
||
--alert-primary-border-color: #{pvar(--primary-600)};
|
||
|
||
--active-icon-color: #{pvar(--fg-450)};
|
||
--active-icon-bg: #{pvar(--bg-secondary-600)};
|
||
}
|
||
|
||
& {
|
||
font-family: $main-fonts;
|
||
font-weight: $font-regular;
|
||
color: pvar(--fg);
|
||
background-color: pvar(--bg);
|
||
|
||
// On desktop browsers, make sure vertical scroll bar is always visible
|
||
// Allow to disable the scrollbar instead of hide it when the content fit the body
|
||
// And not move the content and header horizontally sticked to right when the content is updating
|
||
overflow-y: scroll;
|
||
|
||
// Fix "reboot" style that set text-align: left
|
||
text-align: start;
|
||
}
|
||
}
|
||
|
||
::selection {
|
||
color: pvar(--on-primary-450);
|
||
background-color: pvar(--primary-450);
|
||
}
|
||
|
||
// Force to override bootstrap utilities
|
||
body [hidden] {
|
||
display: none !important;
|
||
}
|
||
|
||
noscript,
|
||
#incompatible-browser {
|
||
display: block;
|
||
font-size: 1.2rem;
|
||
max-width: 600px;
|
||
margin: 1rem auto;
|
||
}
|
||
|
||
strong {
|
||
font-weight: $font-semibold;
|
||
}
|
||
|
||
input[readonly] {
|
||
// Force blank on readonly inputs
|
||
background-color: pvar(--input-bg) !important;
|
||
}
|
||
|
||
input,
|
||
textarea {
|
||
color: pvar(--input-fg);
|
||
|
||
@include disable-outline;
|
||
}
|
||
|
||
button {
|
||
background: unset;
|
||
color: pvar(--fg);
|
||
|
||
@include disable-outline;
|
||
}
|
||
|
||
label,
|
||
.label {
|
||
font-weight: $font-bold;
|
||
margin-bottom: 0.5rem;
|
||
font-size: 18px;
|
||
color: pvar(--fg-350);
|
||
}
|
||
|
||
.pt-label-container {
|
||
margin-bottom: 0.5rem;
|
||
|
||
label {
|
||
display: inline;
|
||
|
||
@include margin-right(0.25rem);
|
||
}
|
||
}
|
||
|
||
code {
|
||
background-color: pvar(--bg-secondary-500);
|
||
color: pvar(--fg-400);
|
||
border-radius: 3px;
|
||
padding: .2em .4em;
|
||
margin: auto .4em;
|
||
font-size: 75%;
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
a {
|
||
color: inherit;
|
||
|
||
&:hover {
|
||
opacity: 0.8;
|
||
}
|
||
}
|
||
|
||
.main-col {
|
||
// Don't use rfs to get exact pixels
|
||
margin-inline-start: $menu-width;
|
||
|
||
width: calc(100% - #{$menu-width});
|
||
outline: none;
|
||
|
||
.margin-content {
|
||
margin: 0 pvar(--x-margin-content);
|
||
flex-grow: 1;
|
||
}
|
||
|
||
.skip-to-content-sub-menu {
|
||
display: block;
|
||
z-index: z(modal);
|
||
padding: 1rem;
|
||
background: pvar(--bg);
|
||
text-align: center;
|
||
text-decoration: underline;
|
||
}
|
||
|
||
// Override some properties if the main content is expanded (no menu on the left)
|
||
&.expanded {
|
||
@include main-col-expanded();
|
||
}
|
||
|
||
&.lock-scroll .main-row > router-outlet + * { /* stylelint-disable-line selector-max-compound-selectors */
|
||
// Lock and hide body scrollbars
|
||
position: fixed;
|
||
}
|
||
}
|
||
|
||
.modal-open,
|
||
.main-col.expanded {
|
||
overflow: hidden !important;
|
||
}
|
||
|
||
my-global-icon[iconName=external-link] {
|
||
margin: 0 0.3em;
|
||
width: 0.9em;
|
||
height: 0.9em;
|
||
line-height: 0.9em;
|
||
display: inline-block;
|
||
color: pvar(--secondary-icon-color);
|
||
position: relative;
|
||
top: -0.1em;
|
||
}
|
||
|
||
@media screen and (max-width: $menu-overlay-view) {
|
||
.menu-open {
|
||
overflow: hidden !important;
|
||
}
|
||
|
||
.main-col {
|
||
@include main-col-expanded();
|
||
}
|
||
}
|
||
|
||
@media screen and (max-width: $small-view) {
|
||
.main-col {
|
||
--x-margin-content: 1rem;
|
||
}
|
||
|
||
my-markdown-textarea {
|
||
.root {
|
||
max-width: 100% !important;
|
||
}
|
||
}
|
||
|
||
input[type=text],
|
||
input[type=password],
|
||
input[type=email],
|
||
textarea,
|
||
.peertube-select-container {
|
||
flex-grow: 1;
|
||
}
|
||
|
||
.caption input[type=text] {
|
||
width: unset !important;
|
||
flex-grow: 1;
|
||
}
|
||
}
|
||
|
||
@media screen and (max-width: $mobile-view) {
|
||
.main-col,
|
||
.main-col.expanded {
|
||
width: 100%;
|
||
|
||
@include margin-left(0);
|
||
}
|
||
}
|
||
|
||
ngx-loading-bar {
|
||
.ngx-bar {
|
||
height: 3px !important;
|
||
border-radius: 0 !important;
|
||
border-start-end-radius: 6px !important;
|
||
border-end-end-radius: 6px !important;
|
||
}
|
||
}
|