`fitWidth` for `video-miniature`, fluid grid (#2830)
* Fluid abstract video list * normalize timestamp display on miniatures * use grid for abstract-video-list - refactor scss function var to pvar to avoid overriding css variables - move fluid-grid margins to adapt-margin-content-width mixin for maintainability - fix video-miniature-name margin-top on small screen * move sceenratio function in a mixin * display no miniature avatar in channel videos view
This commit is contained in:
Rigel Kent
GitHub
parent
6ad971d5f5
commit
e66883b37a
|
|
@ -27,7 +27,7 @@
|
|||
margin-right: 5px;
|
||||
|
||||
&.category {
|
||||
background-color: var(--mainColor);
|
||||
background-color: pvar(--mainColor);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@
|
|||
<div class="no-results my-5" i18n *ngIf="getVideosOf(videoChannel).length === 0">This channel doesn't have any videos.</div>
|
||||
|
||||
<my-video-miniature
|
||||
class="pr-2"
|
||||
*ngFor="let video of getVideosOf(videoChannel)"
|
||||
[video]="video" [user]="user" [displayVideoActions]="true"
|
||||
></my-video-miniature>
|
||||
|
|
|
|||
|
|
@ -14,12 +14,12 @@ a {
|
|||
display: inline-block;
|
||||
|
||||
&, &:hover {
|
||||
color: var(--mainForegroundColor);
|
||||
color: pvar(--mainForegroundColor);
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 80%;
|
||||
color: var(--inputPlaceholderColor);
|
||||
color: pvar(--inputPlaceholderColor);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -6,12 +6,12 @@ a {
|
|||
display: inline-block;
|
||||
|
||||
&, &:hover {
|
||||
color: var(--mainForegroundColor);
|
||||
color: pvar(--mainForegroundColor);
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 80%;
|
||||
color: var(--inputPlaceholderColor);
|
||||
color: pvar(--inputPlaceholderColor);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -6,12 +6,12 @@ a {
|
|||
display: inline-block;
|
||||
|
||||
&, &:hover {
|
||||
color: var(--mainForegroundColor);
|
||||
color: pvar(--mainForegroundColor);
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 80%;
|
||||
color: var(--inputPlaceholderColor);
|
||||
color: pvar(--inputPlaceholderColor);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -6,12 +6,12 @@ a {
|
|||
display: inline-block;
|
||||
|
||||
&, &:hover {
|
||||
color: var(--mainForegroundColor);
|
||||
color: pvar(--mainForegroundColor);
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 80%;
|
||||
color: var(--inputPlaceholderColor);
|
||||
color: pvar(--inputPlaceholderColor);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -47,29 +47,19 @@
|
|||
}
|
||||
|
||||
.screenratio {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
padding-bottom: 56%;
|
||||
|
||||
div {
|
||||
@include miniature-thumbnail;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: var(--inputPlaceholderColor);
|
||||
color: pvar(--inputPlaceholderColor);
|
||||
}
|
||||
|
||||
::ng-deep iframe {
|
||||
position: absolute;
|
||||
@include large-screen-ratio($selector: 'div, ::ng-deep iframe') {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
.chip {
|
||||
|
|
@ -115,7 +105,7 @@ my-action-dropdown.show {
|
|||
}
|
||||
|
||||
span {
|
||||
color: var(--inputPlaceholderColor);
|
||||
color: pvar(--inputPlaceholderColor);
|
||||
}
|
||||
|
||||
.video-table-video-image-label {
|
||||
|
|
@ -135,7 +125,7 @@ my-action-dropdown.show {
|
|||
flex-direction: column;
|
||||
justify-content: center;
|
||||
font-size: 90%;
|
||||
color: var(--mainForegroundColor);
|
||||
color: pvar(--mainForegroundColor);
|
||||
line-height: 1rem;
|
||||
|
||||
div .glyphicon {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
|
||||
.plugin {
|
||||
margin: 15px 0;
|
||||
background-color: var(--submenuColor);
|
||||
background-color: pvar(--submenuColor);
|
||||
}
|
||||
|
||||
.first-row {
|
||||
|
|
@ -25,10 +25,10 @@
|
|||
margin-left: 10px;
|
||||
|
||||
my-global-icon {
|
||||
@include apply-svg-color(var(--greyForegroundColor));
|
||||
@include apply-svg-color(pvar(--greyForegroundColor));
|
||||
|
||||
&[iconName="npm"] {
|
||||
@include fill-svg-color(var(--greyForegroundColor));
|
||||
@include fill-svg-color(pvar(--greyForegroundColor));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,12 +19,12 @@
|
|||
}
|
||||
|
||||
.ui-button.ui-state-active {
|
||||
background-color: var(--mainColor);
|
||||
border-color: var(--mainColor);
|
||||
background-color: pvar(--mainColor);
|
||||
border-color: pvar(--mainColor);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--mainHoverColor);
|
||||
border-color: var(--mainHoverColor);
|
||||
background-color: pvar(--mainHoverColor);
|
||||
border-color: pvar(--mainHoverColor);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
}
|
||||
|
||||
.warn {
|
||||
color: var(--mainColor);
|
||||
color: pvar(--mainColor);
|
||||
}
|
||||
|
||||
.error {
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
width: fit-content;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
color: var(--mainForegroundColor);
|
||||
color: pvar(--mainForegroundColor);
|
||||
|
||||
.video-channel-display-name {
|
||||
font-weight: $font-semibold;
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
width: fit-content;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
color: var(--mainForegroundColor);
|
||||
color: pvar(--mainForegroundColor);
|
||||
|
||||
.video-channel-display-name {
|
||||
font-weight: $font-semibold;
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
@import '_miniature';
|
||||
|
||||
.playlist-info {
|
||||
background-color: var(--submenuColor);
|
||||
background-color: pvar(--submenuColor);
|
||||
margin-left: -15px;
|
||||
margin-top: -$sub-menu-margin-bottom;
|
||||
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
|
||||
/* fix ellipsis dots background color */
|
||||
::ng-deep .miniature-name::after {
|
||||
background-color: var(--submenuColor) !important;
|
||||
background-color: pvar(--submenuColor) !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -84,7 +84,7 @@ my-edit-button {
|
|||
.video-bottom,
|
||||
.video-bottom .video-miniature-information {
|
||||
/* same width than a.video-thumbnail */
|
||||
max-width: 223px !important;
|
||||
max-width: $video-thumbnail-width !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -110,7 +110,7 @@ my-edit-button {
|
|||
::ng-deep {
|
||||
.action-button {
|
||||
/* same width than a.video-thumbnail */
|
||||
width: 223px;
|
||||
width: $video-thumbnail-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -124,7 +124,7 @@ my-edit-button {
|
|||
flex-direction: column;
|
||||
|
||||
.video-miniature-name {
|
||||
max-width: 223px;
|
||||
max-width: $video-thumbnail-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ header {
|
|||
margin-bottom: 10px;
|
||||
|
||||
my-global-icon {
|
||||
@include apply-svg-color(var(--mainBackgroundColor));
|
||||
@include apply-svg-color(pvar(--mainBackgroundColor));
|
||||
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
|
|
@ -42,13 +42,13 @@ header {
|
|||
&.active,
|
||||
&.completed {
|
||||
.step-index {
|
||||
border-color: var(--mainColor);
|
||||
background-color: var(--mainColor);
|
||||
color: var(--mainBackgroundColor);
|
||||
border-color: pvar(--mainColor);
|
||||
background-color: pvar(--mainColor);
|
||||
color: pvar(--mainBackgroundColor);
|
||||
}
|
||||
|
||||
.step-label {
|
||||
color: var(--mainColor);
|
||||
color: pvar(--mainColor);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@
|
|||
ngb-accordion ::ng-deep {
|
||||
.btn {
|
||||
font-weight: $font-semibold !important;
|
||||
color: var(--mainForegroundColor) !important;
|
||||
color: pvar(--mainForegroundColor) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -94,7 +94,7 @@ button {
|
|||
margin-bottom: 20px;
|
||||
|
||||
::ng-deep .loader div {
|
||||
border-color: var(--mainColor) transparent transparent transparent;
|
||||
border-color: pvar(--mainColor) transparent transparent transparent;
|
||||
}
|
||||
|
||||
& + div {
|
||||
|
|
|
|||
|
|
@ -47,6 +47,10 @@ export class VideoChannelVideosComponent extends AbstractVideoList implements On
|
|||
super()
|
||||
|
||||
this.titlePage = this.i18n('Published videos')
|
||||
this.displayOptions = {
|
||||
...this.displayOptions,
|
||||
avatar: false
|
||||
}
|
||||
}
|
||||
|
||||
ngOnInit () {
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
|
||||
.sub-header-container {
|
||||
margin-top: $header-height;
|
||||
background-color: var(--mainBackgroundColor);
|
||||
background-color: pvar(--mainBackgroundColor);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
background-color: var(--mainBackgroundColor);
|
||||
background-color: pvar(--mainBackgroundColor);
|
||||
z-index: z(header);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
|
||||
display: flex;
|
||||
|
|
@ -38,7 +38,7 @@
|
|||
@include icon(24px);
|
||||
|
||||
&.icon-menu {
|
||||
background-color: var(--mainForegroundColor);
|
||||
background-color: pvar(--mainForegroundColor);
|
||||
mask-image: url('../assets/images/header/menu.svg');
|
||||
margin: 0 18px 0 20px;
|
||||
}
|
||||
|
|
@ -65,6 +65,7 @@
|
|||
background: url('../assets/images/logo.svg') no-repeat;
|
||||
width: 23px;
|
||||
height: 24px;
|
||||
margin-right: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
font-size: 14px;
|
||||
|
||||
&::placeholder {
|
||||
color: var(--inputPlaceholderColor);
|
||||
color: pvar(--inputPlaceholderColor);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
@include icon(25px);
|
||||
height: 21px;
|
||||
|
||||
background-color: var(--mainForegroundColor);
|
||||
background-color: pvar(--mainForegroundColor);
|
||||
mask: url('../../assets/images/header/search.svg') no-repeat 50% 50%;
|
||||
|
||||
// yolo
|
||||
|
|
@ -37,10 +37,10 @@
|
|||
#typeahead-help,
|
||||
#typeahead-instructions,
|
||||
my-suggestions ::ng-deep ul {
|
||||
border: 1px solid var(--mainBackgroundColor);
|
||||
border: 1px solid pvar(--mainBackgroundColor);
|
||||
border-bottom-right-radius: 3px;
|
||||
border-bottom-left-radius: 3px;
|
||||
background: var(--mainBackgroundColor);
|
||||
background: pvar(--mainBackgroundColor);
|
||||
transition: .3s ease;
|
||||
transition-property: box-shadow;
|
||||
}
|
||||
|
|
@ -67,7 +67,7 @@ my-suggestions ::ng-deep ul {
|
|||
|
||||
#typeahead-container {
|
||||
input {
|
||||
border: 1px solid var(--mainBackgroundColor) !important;
|
||||
border: 1px solid pvar(--mainBackgroundColor) !important;
|
||||
box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 20px 0px;
|
||||
flex-grow: 1;
|
||||
transition: box-shadow .3s ease, width .2s ease;
|
||||
|
|
|
|||
|
|
@ -5,21 +5,21 @@ a {
|
|||
width: 100%;
|
||||
|
||||
&, &:hover {
|
||||
color: var(--mainForegroundColor);
|
||||
color: pvar(--mainForegroundColor);
|
||||
|
||||
&.focus-visible {
|
||||
background-color: var(--mainHoverColor);
|
||||
color: var(--mainBackgroundColor);
|
||||
background-color: pvar(--mainHoverColor);
|
||||
color: pvar(--mainBackgroundColor);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bg-gray {
|
||||
background-color: var(--mainBackgroundColor);
|
||||
background-color: pvar(--mainBackgroundColor);
|
||||
}
|
||||
|
||||
.text-gray-light {
|
||||
color: var(--mainForegroundColor);
|
||||
color: pvar(--mainForegroundColor);
|
||||
}
|
||||
|
||||
my-global-icon {
|
||||
|
|
@ -28,5 +28,5 @@ my-global-icon {
|
|||
top: -2px;
|
||||
margin: 5px;
|
||||
|
||||
@include apply-svg-color(var(--mainForegroundColor));
|
||||
@include apply-svg-color(pvar(--mainForegroundColor));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ input[type=submit] {
|
|||
}
|
||||
|
||||
.create-an-account, .forgot-password-button {
|
||||
color: var(--mainForegroundColor);
|
||||
color: pvar(--mainForegroundColor);
|
||||
cursor: pointer;
|
||||
transition: opacity cubic-bezier(0.39, 0.575, 0.565, 1);
|
||||
|
||||
|
|
@ -50,7 +50,7 @@ input[type=submit] {
|
|||
cursor: pointer;
|
||||
border: 1px solid #d1d7e0;
|
||||
border-radius: 5px;
|
||||
color: var(--mainForegroundColor);
|
||||
color: pvar(--mainForegroundColor);
|
||||
margin: 10px 10px 0 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
|
|
|||
|
|
@ -106,8 +106,8 @@
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
background-color: var(--mainColor);
|
||||
color: var(#fff);
|
||||
background-color: pvar(--mainColor);
|
||||
color: #fff;
|
||||
font-size: 10px;
|
||||
font-weight: $font-semibold;
|
||||
|
||||
|
|
|
|||
|
|
@ -7,18 +7,18 @@
|
|||
padding: 0;
|
||||
width: $menu-width;
|
||||
z-index: z(menu);
|
||||
scrollbar-color: var(--actionButtonColor) var(--menuBackgroundColor);
|
||||
scrollbar-color: pvar(--actionButtonColor) pvar(--menuBackgroundColor);
|
||||
}
|
||||
|
||||
menu {
|
||||
@include ellipsis;
|
||||
|
||||
background-color: var(--menuBackgroundColor);
|
||||
background-color: pvar(--menuBackgroundColor);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
overflow-x: hidden;
|
||||
color: var(--menuForegroundColor);
|
||||
color: pvar(--menuForegroundColor);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
|
|
@ -62,7 +62,7 @@ menu {
|
|||
.logged-in-display-name {
|
||||
font-size: 16px;
|
||||
font-weight: $font-semibold;
|
||||
color: var(--menuForegroundColor);
|
||||
color: pvar(--menuForegroundColor);
|
||||
cursor: pointer;
|
||||
|
||||
@include disable-default-a-behaviour;
|
||||
|
|
@ -89,7 +89,7 @@ menu {
|
|||
}
|
||||
|
||||
::ng-deep {
|
||||
@include apply-svg-color(var(--menuForegroundColor));
|
||||
@include apply-svg-color(pvar(--menuForegroundColor));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -139,7 +139,7 @@ menu {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: $menu-lateral-padding;
|
||||
color: var(--menuForegroundColor);
|
||||
color: pvar(--menuForegroundColor);
|
||||
cursor: pointer;
|
||||
min-height: 40px;
|
||||
font-size: 16px;
|
||||
|
|
@ -206,7 +206,7 @@ menu {
|
|||
a, span[role=button] {
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
color: var(--mainBackgroundColor);
|
||||
color: pvar(--mainBackgroundColor);
|
||||
opacity: $footer-links-base-opacity;
|
||||
white-space: nowrap;
|
||||
font-size: 90%;
|
||||
|
|
@ -221,7 +221,7 @@ menu {
|
|||
height: 1.4rem;
|
||||
|
||||
my-global-icon {
|
||||
@include apply-svg-color(var(--mainBackgroundColor));
|
||||
@include apply-svg-color(pvar(--mainBackgroundColor));
|
||||
|
||||
display: flex;
|
||||
width: auto;
|
||||
|
|
@ -235,7 +235,7 @@ menu {
|
|||
.footer-copyleft small a {
|
||||
@include disable-default-a-behaviour;
|
||||
|
||||
color: var(--mainBackgroundColor);
|
||||
color: pvar(--mainBackgroundColor);
|
||||
opacity: $footer-links-base-opacity - .2;
|
||||
}
|
||||
}
|
||||
|
|
@ -323,7 +323,7 @@ label {
|
|||
left: 3px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
background: var(--mainBackgroundColor);
|
||||
background: pvar(--mainBackgroundColor);
|
||||
border-radius: 50%;
|
||||
transition: 0.3s ease-out;
|
||||
}
|
||||
|
|
@ -334,7 +334,7 @@ label {
|
|||
}
|
||||
|
||||
input:checked + label {
|
||||
background: var(--mainColor);
|
||||
background: pvar(--mainColor);
|
||||
|
||||
&:after {
|
||||
left: calc(100% - 3px);
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@ li {
|
|||
.link-block {
|
||||
@include disable-default-a-behaviour;
|
||||
|
||||
color: var(--mainForegroundColor);
|
||||
color: pvar(--mainForegroundColor);
|
||||
padding: 10px;
|
||||
transition: background-color 0.2s ease-in;
|
||||
flex-basis: 33%;
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@
|
|||
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
color: var(--mainForegroundColor);
|
||||
color: pvar(--mainForegroundColor);
|
||||
width: fit-content;
|
||||
|
||||
.video-channel-display-name {
|
||||
|
|
@ -111,7 +111,7 @@
|
|||
|
||||
// Override the min-width: 500px to not break screen
|
||||
::ng-deep .video-miniature-information {
|
||||
min-width: 223px !important;
|
||||
min-width: $video-thumbnail-width !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@
|
|||
width: 21px;
|
||||
|
||||
::ng-deep {
|
||||
@include apply-svg-color(var(--actionButtonColor));
|
||||
@include apply-svg-color(pvar(--actionButtonColor));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -30,9 +30,9 @@
|
|||
a:nth-of-type(2) img {
|
||||
height: 60%;
|
||||
width: 60%;
|
||||
border: 2px solid var(--mainBackgroundColor);
|
||||
border: 2px solid pvar(--mainBackgroundColor);
|
||||
transform: translateX(15%);
|
||||
position: relative;
|
||||
background-color: var(--mainBackgroundColor);
|
||||
background-color: pvar(--mainBackgroundColor);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ $input-border-radius: 3px;
|
|||
textarea {
|
||||
@include peertube-textarea(100%, 150px);
|
||||
|
||||
background-color: var(--markdownTextareaBackgroundColor);
|
||||
background-color: pvar(--markdownTextareaBackgroundColor);
|
||||
|
||||
font-family: monospace;
|
||||
font-size: 13px;
|
||||
|
|
@ -61,7 +61,7 @@ $input-border-radius: 3px;
|
|||
flex-grow: 1;
|
||||
border-bottom-left-radius: unset;
|
||||
border-bottom-right-radius: unset;
|
||||
border-bottom: 2px solid var(--mainColor);
|
||||
border-bottom: 2px solid pvar(--mainColor);
|
||||
|
||||
:first-child {
|
||||
margin-left: auto;
|
||||
|
|
@ -112,7 +112,7 @@ $input-border-radius: 3px;
|
|||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
position: absolute;
|
||||
background-color: var(--mainBackgroundColor);
|
||||
background-color: pvar(--mainBackgroundColor);
|
||||
width: 100% !important;
|
||||
border-top: none;
|
||||
border-left: none;
|
||||
|
|
@ -125,8 +125,8 @@ $input-border-radius: 3px;
|
|||
|
||||
::ng-deep .tab-content {
|
||||
@include content-preview-base();
|
||||
background-color: var(--mainBackgroundColor);
|
||||
scrollbar-color: var(--actionButtonColor) var(--mainBackgroundColor);
|
||||
background-color: pvar(--mainBackgroundColor);
|
||||
scrollbar-color: pvar(--actionButtonColor) pvar(--mainBackgroundColor);
|
||||
}
|
||||
|
||||
textarea,
|
||||
|
|
@ -214,7 +214,7 @@ $input-border-radius: 3px;
|
|||
padding: $base-padding;
|
||||
border-right: 1px dashed $input-border-color !important;
|
||||
resize: none;
|
||||
scrollbar-color: var(--actionButtonColor) var(--markdownTextareaBackgroundColor);
|
||||
scrollbar-color: pvar(--actionButtonColor) pvar(--markdownTextareaBackgroundColor);
|
||||
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@
|
|||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
font-weight: 500;
|
||||
color: var(--inputPlaceholderColor);
|
||||
color: pvar(--inputPlaceholderColor);
|
||||
background-color: rgba(217,225,232,.1);
|
||||
border: 1px solid rgba(217,225,232,.5);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ p-inputmask {
|
|||
|
||||
&:focus-within,
|
||||
&:focus {
|
||||
box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest);
|
||||
box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
|
||||
&.no-image {
|
||||
border: 2px solid grey;
|
||||
background-color: var(--mainBackgroundColor);
|
||||
background-color: pvar(--mainBackgroundColor);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
|
||||
table {
|
||||
font-size: 14px;
|
||||
color: var(--mainForegroundColor);
|
||||
color: pvar(--mainForegroundColor);
|
||||
|
||||
.label,
|
||||
.sub-label {
|
||||
|
|
|
|||
|
|
@ -48,8 +48,8 @@
|
|||
width: 100%;
|
||||
|
||||
&.active {
|
||||
color: var(--mainBackgroundColor) !important;
|
||||
background-color: var(--mainHoverColor);
|
||||
color: pvar(--mainBackgroundColor) !important;
|
||||
background-color: pvar(--mainHoverColor);
|
||||
opacity: .9;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
top: -2px;
|
||||
margin: 5px;
|
||||
|
||||
@include apply-svg-color(var(--mainForegroundColor))
|
||||
@include apply-svg-color(pvar(--mainForegroundColor))
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -25,8 +25,8 @@
|
|||
text-align: left;
|
||||
padding: 10px;
|
||||
font-size: 13px;
|
||||
background-color: var(--mainBackgroundColor);
|
||||
color: var(--mainForegroundColor);
|
||||
background-color: pvar(--mainBackgroundColor);
|
||||
color: pvar(--mainForegroundColor);
|
||||
border-radius: 3px;
|
||||
|
||||
p {
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ button {
|
|||
&.routeActive {
|
||||
&::after {
|
||||
display: inherit;
|
||||
border: 2px solid var(--mainColor);
|
||||
border: 2px solid pvar(--mainColor);
|
||||
position: relative;
|
||||
right: 95%;
|
||||
top: 50%;
|
||||
|
|
@ -53,8 +53,8 @@ button {
|
|||
width: 100%;
|
||||
|
||||
&.active {
|
||||
color: var(--mainBackgroundColor) !important;
|
||||
background-color: var(--mainHoverColor);
|
||||
color: pvar(--mainBackgroundColor) !important;
|
||||
background-color: pvar(--mainHoverColor);
|
||||
opacity: .9;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -59,7 +59,9 @@ function durationToString (duration: number) {
|
|||
const secondsPadding = seconds >= 10 ? '' : '0'
|
||||
const displayedHours = hours > 0 ? hours.toString() + ':' : ''
|
||||
|
||||
return displayedHours + minutesPadding + minutes.toString() + ':' + secondsPadding + seconds.toString()
|
||||
return (
|
||||
displayedHours + minutesPadding + minutes.toString() + ':' + secondsPadding + seconds.toString()
|
||||
).replace(/^0/, '')
|
||||
}
|
||||
|
||||
function immutableAssign <A, B> (target: A, source: B) {
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@
|
|||
|
||||
.from-date {
|
||||
font-size: 0.85em;
|
||||
color: var(--greyForegroundColor);
|
||||
color: pvar(--greyForegroundColor);
|
||||
padding-left: 5px;
|
||||
min-width: 70px;
|
||||
text-align: right;
|
||||
|
|
|
|||
|
|
@ -68,7 +68,7 @@
|
|||
|
||||
.timestamp-info {
|
||||
font-size: 0.9em;
|
||||
color: var(--greyForegroundColor);
|
||||
color: pvar(--greyForegroundColor);
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ my-video-thumbnail,
|
|||
.video {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: var(--mainBackgroundColor);
|
||||
background-color: pvar(--mainBackgroundColor);
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid $separator-border-color;
|
||||
|
||||
|
|
@ -49,7 +49,7 @@ my-video-thumbnail,
|
|||
a {
|
||||
@include disable-default-a-behaviour;
|
||||
|
||||
color: var(--mainForegroundColor);
|
||||
color: pvar(--mainForegroundColor);
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
|
|
@ -58,11 +58,11 @@ my-video-thumbnail,
|
|||
.position {
|
||||
font-weight: $font-semibold;
|
||||
margin-right: 10px;
|
||||
color: var(--greyForegroundColor);
|
||||
color: pvar(--greyForegroundColor);
|
||||
min-width: 25px;
|
||||
|
||||
my-global-icon {
|
||||
@include apply-svg-color(var(--greyForegroundColor));
|
||||
@include apply-svg-color(pvar(--greyForegroundColor));
|
||||
|
||||
width: 17px;
|
||||
position: relative;
|
||||
|
|
@ -81,7 +81,7 @@ my-video-thumbnail,
|
|||
}
|
||||
|
||||
.video-info-account, .video-info-timestamp {
|
||||
color: var(--greyForegroundColor);
|
||||
color: pvar(--greyForegroundColor);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -109,7 +109,7 @@ my-video-thumbnail,
|
|||
}
|
||||
|
||||
.icon-more {
|
||||
@include apply-svg-color(var(--greyForegroundColor));
|
||||
@include apply-svg-color(pvar(--greyForegroundColor));
|
||||
|
||||
display: flex;
|
||||
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@
|
|||
@include disable-default-a-behaviour;
|
||||
|
||||
display: block;
|
||||
color: var(--greyForegroundColor);
|
||||
color: pvar(--greyForegroundColor);
|
||||
}
|
||||
|
||||
.privacy-date {
|
||||
|
|
@ -72,7 +72,7 @@
|
|||
|
||||
.video-info-description {
|
||||
margin-top: 10px;
|
||||
color: var(--greyForegroundColor);
|
||||
color: pvar(--greyForegroundColor);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -36,6 +36,7 @@
|
|||
</div>
|
||||
|
||||
<my-video-miniature
|
||||
[fitWidth]="true"
|
||||
[video]="video" [user]="user" [ownerDisplayType]="ownerDisplayType"
|
||||
[displayVideoActions]="displayVideoActions" [displayOptions]="displayOptions"
|
||||
(videoBlacklisted)="removeVideoFromArray(video)" (videoRemoved)="removeVideoFromArray(video)"
|
||||
|
|
|
|||
|
|
@ -1,6 +1,24 @@
|
|||
@import '_bootstrap-variables';
|
||||
@import '_variables';
|
||||
@import '_mixins';
|
||||
@import '_miniature';
|
||||
|
||||
.videos {
|
||||
display: grid;
|
||||
column-gap: calc(10px + .2%);
|
||||
grid-template-columns: repeat(
|
||||
auto-fill,
|
||||
minmax(
|
||||
var(--miniature-min-width, #{$video-thumbnail-width}),
|
||||
1fr
|
||||
)
|
||||
);
|
||||
|
||||
@media screen and (min-width: #{breakpoint(xxl)}) {
|
||||
--miniature-min-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
.videos-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
|
@ -45,13 +63,16 @@
|
|||
margin-top: -10px;
|
||||
padding-top: 20px;
|
||||
|
||||
// make the element span a full grid row within .videos grid
|
||||
grid-column: 1 / -1;
|
||||
|
||||
&:not(:first-child) {
|
||||
border-top: 1px solid $separator-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
.margin-content {
|
||||
@include adapt-margin-content-width;
|
||||
:host-context(.main-col:not(.expanded)) .margin-content {
|
||||
@include adapt-margin-content-width($fluid: true);
|
||||
}
|
||||
|
||||
@media screen and (max-width: $mobile-view) {
|
||||
|
|
|
|||
|
|
@ -15,6 +15,6 @@
|
|||
position: relative;
|
||||
top: -2px;
|
||||
|
||||
@include apply-svg-color(var(--mainForegroundColor))
|
||||
@include apply-svg-color(pvar(--mainForegroundColor))
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -41,13 +41,13 @@
|
|||
min-width: 142px;
|
||||
padding-right: 5px;
|
||||
display: inline-block;
|
||||
color: var(--greyForegroundColor);
|
||||
color: pvar(--greyForegroundColor);
|
||||
font-weight: $font-bold;
|
||||
}
|
||||
|
||||
a.metadata-attribute-value {
|
||||
@include disable-default-a-behaviour;
|
||||
color: var(--mainForegroundColor);
|
||||
color: pvar(--mainForegroundColor);
|
||||
|
||||
&:hover {
|
||||
opacity: 0.9;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="video-miniature" [ngClass]="{ 'display-as-row': displayAsRow }" (mouseenter)="loadActions()">
|
||||
<div class="video-miniature" [ngClass]="{ 'display-as-row': displayAsRow, 'fit-width': fitWidth }" (mouseenter)="loadActions()">
|
||||
<my-video-thumbnail
|
||||
[video]="video" [nsfw]="isVideoBlur"
|
||||
[displayWatchLaterPlaylist]="isWatchLaterPlaylistDisplayed()" [inWatchLaterPlaylist]="inWatchLaterPlaylist" (watchLaterClick)="onWatchLaterClick($event)"
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@ $more-button-width: 41px;
|
|||
$more-margin-right: 15px;
|
||||
|
||||
.video-miniature {
|
||||
width: $video-miniature-width;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: $video-miniature-margin-bottom;
|
||||
|
|
@ -19,14 +18,16 @@ $more-margin-right: 15px;
|
|||
.video-miniature-information {
|
||||
width: $video-miniature-width - $more-button-width - $more-margin-right;
|
||||
line-height: normal;
|
||||
font-size: 13px;
|
||||
|
||||
.video-miniature-name {
|
||||
@include miniature-name;
|
||||
font-size: 110%;
|
||||
}
|
||||
|
||||
.video-miniature-created-at-views {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
font-size: 95%;
|
||||
}
|
||||
|
||||
.video-miniature-account,
|
||||
|
|
@ -35,8 +36,8 @@ $more-margin-right: 15px;
|
|||
@include ellipsis;
|
||||
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
color: var(--greyForegroundColor);
|
||||
font-size: 95%;
|
||||
color: pvar(--greyForegroundColor);
|
||||
|
||||
&:hover {
|
||||
color: $grey-foreground-hover-color;
|
||||
|
|
@ -87,10 +88,6 @@ $more-margin-right: 15px;
|
|||
@media screen and (max-width: $small-view) {
|
||||
.video-miniature-information {
|
||||
margin: 0 10px;
|
||||
|
||||
.video-miniature-name {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.video-actions {
|
||||
|
|
@ -109,6 +106,24 @@ $more-margin-right: 15px;
|
|||
opacity: 1;
|
||||
}
|
||||
|
||||
&.fit-width {
|
||||
width: 100%;
|
||||
height: unset;
|
||||
margin-bottom: $video-miniature-margin-bottom / 2;
|
||||
|
||||
.video-bottom {
|
||||
width: 100% !important;
|
||||
|
||||
.video-miniature-information {
|
||||
width: calc(100% - 40px) !important;
|
||||
}
|
||||
}
|
||||
|
||||
my-video-thumbnail {
|
||||
@include large-screen-ratio($selector: '::ng-deep .video-thumbnail');
|
||||
}
|
||||
}
|
||||
|
||||
&.display-as-row {
|
||||
flex-direction: row;
|
||||
margin-bottom: 0;
|
||||
|
|
@ -137,7 +152,7 @@ $more-margin-right: 15px;
|
|||
.video-miniature-created-at-views,
|
||||
.video-miniature-account,
|
||||
.video-miniature-channel {
|
||||
font-size: 14px;
|
||||
font-size: 95%;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -55,6 +55,7 @@ export class VideoMiniatureComponent implements OnInit {
|
|||
}
|
||||
@Input() displayAsRow = false
|
||||
@Input() displayVideoActions = true
|
||||
@Input() fitWidth = false
|
||||
|
||||
@Output() videoBlacklisted = new EventEmitter()
|
||||
@Output() videoUnblacklisted = new EventEmitter()
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
|
||||
div {
|
||||
height: 100%;
|
||||
background-color: var(--mainColor);
|
||||
background-color: pvar(--mainColor);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -25,7 +25,8 @@
|
|||
|
||||
border-radius: 3px;
|
||||
font-size: 12px;
|
||||
font-weight: $font-bold;
|
||||
font-weight: $font-semibold;
|
||||
line-height: 1.2;
|
||||
z-index: z(miniature);
|
||||
}
|
||||
|
||||
|
|
@ -34,6 +35,7 @@
|
|||
padding: 0 5px;
|
||||
left: 5px;
|
||||
top: 5px;
|
||||
font-weight: $font-bold;
|
||||
|
||||
&.warning { background-color: orange; }
|
||||
&.danger { background-color: red; }
|
||||
|
|
@ -41,7 +43,7 @@
|
|||
|
||||
.video-thumbnail-duration-overlay {
|
||||
position: absolute;
|
||||
padding: 0 5px;
|
||||
padding: 0 3px;
|
||||
right: 5px;
|
||||
bottom: 5px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ label {
|
|||
}
|
||||
|
||||
.title-page a {
|
||||
color: var(--mainForegroundColor);
|
||||
color: pvar(--mainForegroundColor);
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
|
|
@ -122,7 +122,7 @@ my-peertube-checkbox {
|
|||
display: inline-block;
|
||||
margin-right: 25px;
|
||||
|
||||
color: var(--greyForegroundColor);
|
||||
color: pvar(--greyForegroundColor);
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
|
||||
.first-step-block {
|
||||
.torrent-or-magnet {
|
||||
@include divider($color: var(--inputPlaceholderColor), $background: var(--submenuColor));
|
||||
@include divider($color: pvar(--inputPlaceholderColor), $background: pvar(--submenuColor));
|
||||
|
||||
&[data-content] {
|
||||
margin: 1.5rem 0;
|
||||
|
|
|
|||
|
|
@ -33,10 +33,10 @@ $nav-link-height: 40px;
|
|||
&.active {
|
||||
border: $border-width $border-type $border-color;
|
||||
border-bottom: none;
|
||||
background-color: var(--submenuColor) !important;
|
||||
background-color: pvar(--submenuColor) !important;
|
||||
|
||||
span {
|
||||
border-bottom: 2px solid var(--mainColor);
|
||||
border-bottom: 2px solid pvar(--mainColor);
|
||||
font-weight: $font-bold;
|
||||
}
|
||||
}
|
||||
|
|
@ -47,7 +47,7 @@ $nav-link-height: 40px;
|
|||
border: $border-width $border-type $border-color;
|
||||
border-top: transparent;
|
||||
|
||||
background-color: var(--submenuColor);
|
||||
background-color: pvar(--submenuColor);
|
||||
border-bottom-left-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
width: 100%;
|
||||
|
|
@ -58,7 +58,7 @@ $nav-link-height: 40px;
|
|||
align-items: center;
|
||||
|
||||
&.dragover {
|
||||
border: 3px dashed var(--mainColor);
|
||||
border: 3px dashed pvar(--mainColor);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -72,7 +72,7 @@ $nav-link-height: 40px;
|
|||
/* Hide active tab style to not have a moving tab effect */
|
||||
a.nav-link.active {
|
||||
border: none;
|
||||
background-color: var(--mainBackgroundColor) !important;
|
||||
background-color: pvar(--mainBackgroundColor) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -70,7 +70,7 @@
|
|||
a {
|
||||
@include disable-default-a-behaviour;
|
||||
|
||||
color: var(--mainForegroundColor);
|
||||
color: pvar(--mainForegroundColor);
|
||||
}
|
||||
|
||||
.comment-account-fid {
|
||||
|
|
@ -80,7 +80,7 @@
|
|||
|
||||
.comment-date {
|
||||
font-size: 90%;
|
||||
color: var(--greyForegroundColor);
|
||||
color: pvar(--greyForegroundColor);
|
||||
margin-left: 5px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
|
@ -95,7 +95,7 @@
|
|||
&:not(.linkified-url) {
|
||||
@include disable-default-a-behaviour;
|
||||
|
||||
color: var(--mainForegroundColor);
|
||||
color: pvar(--mainForegroundColor);
|
||||
|
||||
font-weight: $font-semibold;
|
||||
}
|
||||
|
|
@ -108,7 +108,7 @@
|
|||
}
|
||||
|
||||
&.comment-html-deleted {
|
||||
color: var(--greyForegroundColor);
|
||||
color: pvar(--greyForegroundColor);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -120,12 +120,12 @@
|
|||
::ng-deep .dropdown-toggle,
|
||||
.comment-action-reply,
|
||||
.comment-action-delete {
|
||||
color: var(--greyForegroundColor);
|
||||
color: pvar(--greyForegroundColor);
|
||||
cursor: pointer;
|
||||
margin-right: 10px;
|
||||
|
||||
&:hover {
|
||||
color: var(--mainForegroundColor);
|
||||
color: pvar(--mainForegroundColor);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
min-width: 200px;
|
||||
max-width: 470px;
|
||||
height: 66vh;
|
||||
background-color: var(--mainBackgroundColor);
|
||||
background-color: pvar(--mainBackgroundColor);
|
||||
overflow-y: auto;
|
||||
border-bottom: 1px solid $separator-border-color;
|
||||
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
}
|
||||
|
||||
.playlist-by-index {
|
||||
color: var(--greyForegroundColor);
|
||||
color: pvar(--greyForegroundColor);
|
||||
display: flex;
|
||||
|
||||
.playlist-by {
|
||||
|
|
|
|||
|
|
@ -166,7 +166,7 @@ $video-info-margin-left: 44px;
|
|||
a {
|
||||
@include disable-default-a-behaviour;
|
||||
|
||||
color: var(--mainForegroundColor);
|
||||
color: pvar(--mainForegroundColor);
|
||||
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
|
|
@ -225,7 +225,7 @@ $video-info-margin-left: 44px;
|
|||
::ng-deep.action-button {
|
||||
@include peertube-button;
|
||||
@include button-with-icon(21px, 0, -1px);
|
||||
@include apply-svg-color(var(--actionButtonColor));
|
||||
@include apply-svg-color(pvar(--actionButtonColor));
|
||||
|
||||
font-size: 100%;
|
||||
font-weight: $font-semibold;
|
||||
|
|
@ -233,7 +233,7 @@ $video-info-margin-left: 44px;
|
|||
padding: 0 10px 0 10px;
|
||||
white-space: nowrap;
|
||||
background-color: transparent !important;
|
||||
color: var(--actionButtonColor);
|
||||
color: pvar(--actionButtonColor);
|
||||
text-transform: uppercase;
|
||||
|
||||
&::after {
|
||||
|
|
@ -255,36 +255,36 @@ $video-info-margin-left: 44px;
|
|||
|
||||
&.action-button-like.activated {
|
||||
.count {
|
||||
color: var(--activatedActionButtonColor);
|
||||
color: pvar(--activatedActionButtonColor);
|
||||
}
|
||||
|
||||
my-global-icon {
|
||||
@include apply-svg-color(var(--activatedActionButtonColor));
|
||||
@include apply-svg-color(pvar(--activatedActionButtonColor));
|
||||
}
|
||||
}
|
||||
|
||||
&.action-button-dislike.activated {
|
||||
.count {
|
||||
color: var(--activatedActionButtonColor);
|
||||
color: pvar(--activatedActionButtonColor);
|
||||
}
|
||||
|
||||
my-global-icon {
|
||||
@include apply-svg-color(var(--activatedActionButtonColor));
|
||||
@include apply-svg-color(pvar(--activatedActionButtonColor));
|
||||
}
|
||||
}
|
||||
|
||||
&.action-button-support {
|
||||
color: var(--supportButtonColor);
|
||||
color: pvar(--supportButtonColor);
|
||||
|
||||
my-global-icon {
|
||||
@include apply-svg-color(var(--supportButtonColor));
|
||||
@include apply-svg-color(pvar(--supportButtonColor));
|
||||
}
|
||||
}
|
||||
|
||||
&.action-button-support {
|
||||
my-global-icon {
|
||||
::ng-deep path:first-child {
|
||||
fill: var(--supportButtonHeartColor) !important;
|
||||
fill: pvar(--supportButtonHeartColor) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -325,7 +325,7 @@ $video-info-margin-left: 44px;
|
|||
background-color: #909090;
|
||||
|
||||
&.liked {
|
||||
background-color: var(--activatedActionButtonColor);
|
||||
background-color: pvar(--activatedActionButtonColor);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -356,7 +356,7 @@ $video-info-margin-left: 44px;
|
|||
.video-info-description-more {
|
||||
cursor: pointer;
|
||||
font-weight: $font-semibold;
|
||||
color: var(--greyForegroundColor);
|
||||
color: pvar(--greyForegroundColor);
|
||||
font-size: 14px;
|
||||
|
||||
.glyphicon {
|
||||
|
|
@ -379,13 +379,13 @@ $video-info-margin-left: 44px;
|
|||
min-width: 142px;
|
||||
padding-right: 5px;
|
||||
display: inline-block;
|
||||
color: var(--greyForegroundColor);
|
||||
color: pvar(--greyForegroundColor);
|
||||
font-weight: $font-bold;
|
||||
}
|
||||
|
||||
a.video-attribute-value {
|
||||
@include disable-default-a-behaviour;
|
||||
color: var(--mainForegroundColor);
|
||||
color: pvar(--mainForegroundColor);
|
||||
|
||||
&:hover {
|
||||
opacity: 0.9;
|
||||
|
|
@ -480,7 +480,7 @@ my-video-comments {
|
|||
a {
|
||||
@include disable-default-a-behaviour;
|
||||
|
||||
color: var(--mainColor);
|
||||
color: pvar(--mainColor);
|
||||
transition: color 0.3s;
|
||||
|
||||
&:hover {
|
||||
|
|
@ -503,7 +503,7 @@ my-video-comments {
|
|||
}
|
||||
|
||||
.privacy-concerns-okay {
|
||||
background-color: var(--mainColor);
|
||||
background-color: pvar(--mainColor);
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
<a routerLink="/search" [queryParams]="{ categoryOneOf: [ object.category.id ] }">{{ object.category.label }}</a>
|
||||
</div>
|
||||
|
||||
<my-video-miniature *ngFor="let video of buildVideos(object.videos)" [video]="video" [user]="user" [displayVideoActions]="false">
|
||||
<my-video-miniature class="pr-2" *ngFor="let video of buildVideos(object.videos)" [video]="video" [user]="user" [displayVideoActions]="false">
|
||||
</my-video-miniature>
|
||||
</div>
|
||||
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
<a routerLink="/search" [queryParams]="{ tagsOneOf: [ object.tag ] }">#{{ object.tag }}</a>
|
||||
</div>
|
||||
|
||||
<my-video-miniature *ngFor="let video of buildVideos(object.videos)" [video]="video" [user]="user" [displayVideoActions]="false">
|
||||
<my-video-miniature class="pr-2" *ngFor="let video of buildVideos(object.videos)" [video]="video" [user]="user" [displayVideoActions]="false">
|
||||
</my-video-miniature>
|
||||
</div>
|
||||
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
</a>
|
||||
</div>
|
||||
|
||||
<my-video-miniature *ngFor="let video of buildVideos(object.videos)" [video]="video" [user]="user" [displayVideoActions]="false">
|
||||
<my-video-miniature class="pr-2" *ngFor="let video of buildVideos(object.videos)" [video]="video" [user]="user" [displayVideoActions]="false">
|
||||
</my-video-miniature>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -47,21 +47,21 @@ body {
|
|||
|
||||
--actionButtonColor: #{$grey-foreground-color};
|
||||
--supportButtonBackgroundColor: #{transparent};
|
||||
--supportButtonColor: #{var(--actionButtonColor)};
|
||||
--supportButtonColor: #{pvar(--actionButtonColor)};
|
||||
--supportButtonHeartColor: #{$support-button-heart};
|
||||
|
||||
--activatedActionButtonColor: #{$activated-action-button-color};
|
||||
|
||||
font-family: $main-fonts;
|
||||
font-weight: $font-regular;
|
||||
color: var(--mainForegroundColor);
|
||||
background-color: var(--mainBackgroundColor);
|
||||
color: pvar(--mainForegroundColor);
|
||||
background-color: pvar(--mainBackgroundColor);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
::selection {
|
||||
color: var(--mainBackgroundColor);
|
||||
background-color: var(--mainHoverColor);
|
||||
color: pvar(--mainBackgroundColor);
|
||||
background-color: pvar(--mainHoverColor);
|
||||
}
|
||||
|
||||
#incompatible-browser {
|
||||
|
|
@ -78,12 +78,12 @@ strong {
|
|||
|
||||
input.readonly {
|
||||
/* Force blank on readonly inputs */
|
||||
background-color: var(--inputBackgroundColor) !important;
|
||||
background-color: pvar(--inputBackgroundColor) !important;
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
outline: none;
|
||||
color: var(--mainForegroundColor);
|
||||
color: pvar(--mainForegroundColor);
|
||||
}
|
||||
|
||||
label {
|
||||
|
|
@ -128,7 +128,7 @@ label {
|
|||
}
|
||||
|
||||
.sub-menu {
|
||||
background-color: var(--submenuColor);
|
||||
background-color: pvar(--submenuColor);
|
||||
width: 100%;
|
||||
height: 81px;
|
||||
margin-bottom: $sub-menu-margin-bottom;
|
||||
|
|
@ -166,7 +166,7 @@ label {
|
|||
}
|
||||
|
||||
.title-page {
|
||||
color: var(--mainForegroundColor);
|
||||
color: pvar(--mainForegroundColor);
|
||||
font-size: 16px;
|
||||
display: inline-block;
|
||||
margin-right: 55px;
|
||||
|
|
@ -180,7 +180,7 @@ label {
|
|||
|
||||
&.active {
|
||||
font-weight: $font-bold;
|
||||
border-bottom: 2px solid var(--mainColor);
|
||||
border-bottom: 2px solid pvar(--mainColor);
|
||||
}
|
||||
|
||||
&.title-page-single {
|
||||
|
|
@ -188,7 +188,7 @@ label {
|
|||
}
|
||||
|
||||
&:hover, &:active, &:focus {
|
||||
color: var(--mainForegroundColor);
|
||||
color: pvar(--mainForegroundColor);
|
||||
}
|
||||
|
||||
@media screen and (max-width: $mobile-view) {
|
||||
|
|
@ -220,7 +220,7 @@ label {
|
|||
@include disable-default-a-behaviour;
|
||||
|
||||
font-size: 16px;
|
||||
color: var(--mainForegroundColor);
|
||||
color: pvar(--mainForegroundColor);
|
||||
padding: 5px 15px;
|
||||
border-radius: 0.25rem;
|
||||
|
||||
|
|
|
|||
|
|
@ -51,8 +51,8 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
|
|||
padding: 3px 15px;
|
||||
|
||||
&.active {
|
||||
color: var(--mainBackgroundColor) !important;
|
||||
background-color: var(--mainHoverColor);
|
||||
color: pvar(--mainBackgroundColor) !important;
|
||||
background-color: pvar(--mainHoverColor);
|
||||
opacity: .9;
|
||||
}
|
||||
|
||||
|
|
@ -94,7 +94,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
|
|||
text-align: center;
|
||||
|
||||
.modal-content {
|
||||
background-color: var(--mainBackgroundColor);
|
||||
background-color: pvar(--mainBackgroundColor);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
|
|
@ -161,7 +161,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
|
|||
a {
|
||||
@include disable-default-a-behaviour;
|
||||
|
||||
color: var(--mainForegroundColor);
|
||||
color: pvar(--mainForegroundColor);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -170,7 +170,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
|
|||
.nav-link {
|
||||
@include disable-default-a-behaviour;
|
||||
|
||||
color: var(--mainForegroundColor) !important;
|
||||
color: pvar(--mainForegroundColor) !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -180,9 +180,9 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
|
|||
}
|
||||
&.active {
|
||||
font-weight: $font-semibold;
|
||||
background-color: var(--mainBackgroundColor) !important;
|
||||
background-color: pvar(--mainBackgroundColor) !important;
|
||||
border: none;
|
||||
border-bottom: 2px solid var(--mainColor);
|
||||
border-bottom: 2px solid pvar(--mainColor);
|
||||
}
|
||||
&:hover {
|
||||
border-top-color: transparent;
|
||||
|
|
@ -192,7 +192,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
|
|||
}
|
||||
|
||||
.card {
|
||||
background-color: var(--mainBackgroundColor);
|
||||
background-color: pvar(--mainBackgroundColor);
|
||||
border-color: #dee2e6;
|
||||
}
|
||||
|
||||
|
|
@ -240,27 +240,27 @@ ngb-tooltip-window {
|
|||
}
|
||||
|
||||
.btn-outline-tertiary {
|
||||
color: var(--secondaryColor);
|
||||
border-color: var(--secondaryColor);
|
||||
color: pvar(--secondaryColor);
|
||||
border-color: pvar(--secondaryColor);
|
||||
|
||||
&:focus-within,
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: var(--mainBackgroundColor);
|
||||
background-color: var(--secondaryColor);
|
||||
color: pvar(--mainBackgroundColor);
|
||||
background-color: pvar(--secondaryColor);
|
||||
}
|
||||
}
|
||||
|
||||
// input box-shadow on focus
|
||||
.form-control {
|
||||
font-size: 15px;
|
||||
color: var(--mainForegroundColor);
|
||||
background-color: var(--inputBackgroundColor);
|
||||
color: pvar(--mainForegroundColor);
|
||||
background-color: pvar(--inputBackgroundColor);
|
||||
outline: none;
|
||||
|
||||
&:focus-within,
|
||||
&:focus {
|
||||
box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest);
|
||||
box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
|
||||
|
||||
&.input-error {
|
||||
box-shadow: #{$focus-box-shadow-form} #{scale-color($red, $alpha: -75%)};
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
transition: color 0.2s;
|
||||
font-weight: $font-semibold;
|
||||
color: var(--mainForegroundColor);
|
||||
color: pvar(--mainForegroundColor);
|
||||
margin-top: 10px;
|
||||
margin-bottom: 5px;
|
||||
|
||||
|
|
@ -80,7 +80,7 @@ $play-overlay-width: 18px;
|
|||
}
|
||||
|
||||
&.focus-visible {
|
||||
box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest);
|
||||
box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
|
|
@ -168,7 +168,7 @@ $play-overlay-width: 18px;
|
|||
outline: none;
|
||||
}
|
||||
|
||||
color: var(--mainForegroundColor);
|
||||
color: pvar(--mainForegroundColor);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -187,7 +187,7 @@ $play-overlay-width: 18px;
|
|||
}
|
||||
|
||||
.followers {
|
||||
color: var(--greyForegroundColor);
|
||||
color: pvar(--greyForegroundColor);
|
||||
font-weight: normal;
|
||||
font-size: 14px;
|
||||
margin-left: 10px;
|
||||
|
|
@ -203,7 +203,7 @@ $play-overlay-width: 18px;
|
|||
display: inline-block;
|
||||
font-size: 16px;
|
||||
text-transform: uppercase;
|
||||
color: var(--greyForegroundColor);
|
||||
color: pvar(--greyForegroundColor);
|
||||
margin-bottom: 10px;
|
||||
font-weight: $font-semibold;
|
||||
text-decoration: none;
|
||||
|
|
@ -221,32 +221,37 @@ $play-overlay-width: 18px;
|
|||
}
|
||||
}
|
||||
|
||||
@mixin adapt-margin-content-width {
|
||||
width: $video-miniature-width * 6;
|
||||
margin: auto !important;
|
||||
@mixin adapt-margin-content-width($fluid: false) {
|
||||
@if $fluid {
|
||||
margin-left: 3vw !important;
|
||||
margin-right: 3vw !important;
|
||||
} @else {
|
||||
width: $video-miniature-width * 6;
|
||||
margin: auto !important;
|
||||
|
||||
@media screen and (max-width: 1800px) {
|
||||
width: $video-miniature-width * 5;
|
||||
}
|
||||
@media screen and (max-width: 1800px) {
|
||||
width: $video-miniature-width * 5;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1800px - $video-miniature-width) {
|
||||
width: $video-miniature-width * 4;
|
||||
}
|
||||
@media screen and (max-width: 1800px - $video-miniature-width) {
|
||||
width: $video-miniature-width * 4;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1800px - (2* $video-miniature-width)) {
|
||||
width: $video-miniature-width * 3;
|
||||
}
|
||||
@media screen and (max-width: 1800px - (2* $video-miniature-width)) {
|
||||
width: $video-miniature-width * 3;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1800px - (3* $video-miniature-width)) {
|
||||
width: $video-miniature-width * 2;
|
||||
}
|
||||
@media screen and (max-width: 1800px - (3* $video-miniature-width)) {
|
||||
width: $video-miniature-width * 2;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $mobile-view) {
|
||||
width: auto;
|
||||
margin: 0 !important;
|
||||
@media screen and (max-width: $mobile-view) {
|
||||
width: auto;
|
||||
margin: 0 !important;
|
||||
|
||||
.videos {
|
||||
@include video-miniature-small-screen;
|
||||
.videos {
|
||||
@include video-miniature-small-screen;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -90,8 +90,8 @@
|
|||
display: inline-block;
|
||||
height: $button-height;
|
||||
width: $width;
|
||||
color: var(--inputForegroundColor);
|
||||
background-color: var(--inputBackgroundColor);
|
||||
color: pvar(--inputForegroundColor);
|
||||
background-color: pvar(--inputBackgroundColor);
|
||||
border: 1px solid #C6C6C6;
|
||||
border-radius: 3px;
|
||||
padding-left: 15px;
|
||||
|
|
@ -99,7 +99,7 @@
|
|||
font-size: 15px;
|
||||
|
||||
&::placeholder {
|
||||
color: var(--inputPlaceholderColor);
|
||||
color: pvar(--inputPlaceholderColor);
|
||||
}
|
||||
|
||||
@media screen and (max-width: $width) {
|
||||
|
|
@ -122,24 +122,24 @@
|
|||
@mixin peertube-textarea ($width, $height) {
|
||||
@include peertube-input-text($width);
|
||||
|
||||
color: var(--textareaForegroundColor);
|
||||
background-color: var(--textareaBackgroundColor);
|
||||
color: pvar(--textareaForegroundColor);
|
||||
background-color: pvar(--textareaBackgroundColor);
|
||||
height: $height;
|
||||
padding: 5px 15px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
@mixin orange-button {
|
||||
@include button-focus(var(--mainColorLightest));
|
||||
@include button-focus(pvar(--mainColorLightest));
|
||||
|
||||
&, &:active, &:focus {
|
||||
color: #fff;
|
||||
background-color: var(--mainColor);
|
||||
background-color: pvar(--mainColor);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
background-color: var(--mainHoverColor);
|
||||
background-color: pvar(--mainHoverColor);
|
||||
}
|
||||
|
||||
&[disabled], &.disabled {
|
||||
|
|
@ -156,7 +156,7 @@
|
|||
@mixin tertiary-button {
|
||||
@include button-focus($grey-button-outline-color);
|
||||
|
||||
color: var(--greyForegroundColor);
|
||||
color: pvar(--greyForegroundColor);
|
||||
background-color: transparent;
|
||||
|
||||
&[disabled], &.disabled {
|
||||
|
|
@ -173,11 +173,11 @@
|
|||
|
||||
&, &:active, &:focus {
|
||||
background-color: $grey-background-color;
|
||||
color: var(--greyForegroundColor);
|
||||
color: pvar(--greyForegroundColor);
|
||||
}
|
||||
|
||||
&:hover, &:active, &:focus, &[disabled], &.disabled {
|
||||
color: var(--greyForegroundColor);
|
||||
color: pvar(--greyForegroundColor);
|
||||
background-color: $grey-background-hover-color;
|
||||
}
|
||||
|
||||
|
|
@ -186,7 +186,7 @@
|
|||
}
|
||||
|
||||
my-global-icon {
|
||||
@include apply-svg-color(var(--greyForegroundColor))
|
||||
@include apply-svg-color(pvar(--greyForegroundColor))
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -283,8 +283,8 @@
|
|||
margin: 0;
|
||||
width: $width;
|
||||
border-radius: 3px;
|
||||
color: var(--inputForegroundColor);
|
||||
background: var(--inputBackgroundColor);
|
||||
color: pvar(--inputForegroundColor);
|
||||
background: pvar(--inputBackgroundColor);
|
||||
position: relative;
|
||||
font-size: 15px;
|
||||
|
||||
|
|
@ -315,7 +315,7 @@
|
|||
cursor: pointer;
|
||||
height: $button-height;
|
||||
text-overflow: ellipsis;
|
||||
color: var(--mainForegroundColor);
|
||||
color: pvar(--mainForegroundColor);
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
|
|
@ -375,7 +375,7 @@
|
|||
position: absolute;
|
||||
|
||||
&:focus + span {
|
||||
box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest);
|
||||
box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
|
||||
}
|
||||
|
||||
& + span {
|
||||
|
|
@ -404,7 +404,7 @@
|
|||
|
||||
&:checked + span {
|
||||
border-color: transparent;
|
||||
background: var(--mainColor);
|
||||
background: pvar(--mainColor);
|
||||
animation: jelly 0.6s ease;
|
||||
|
||||
&:after {
|
||||
|
|
@ -464,14 +464,14 @@
|
|||
|
||||
@mixin in-content-small-title {
|
||||
text-transform: uppercase;
|
||||
color: var(--mainColor);
|
||||
color: pvar(--mainColor);
|
||||
font-weight: $font-bold;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
@mixin settings-big-title {
|
||||
text-transform: uppercase;
|
||||
color: var(--mainColor);
|
||||
color: pvar(--mainColor);
|
||||
font-weight: $font-bold;
|
||||
font-size: 110%;
|
||||
margin-bottom: 10px;
|
||||
|
|
@ -482,7 +482,7 @@
|
|||
|
||||
font-size: 13px;
|
||||
margin-top: 4px;
|
||||
color: var(--mainForegroundColor);
|
||||
color: pvar(--mainForegroundColor);
|
||||
|
||||
span:hover {
|
||||
opacity: 0.8;
|
||||
|
|
@ -612,8 +612,8 @@
|
|||
border-radius: 0.25rem;
|
||||
|
||||
.progress-bar {
|
||||
color: var(--mainBackgroundColor);
|
||||
background-color: var(--mainColor);
|
||||
color: pvar(--mainBackgroundColor);
|
||||
background-color: pvar(--mainColor);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
|
@ -622,7 +622,7 @@
|
|||
transition: width 0.6s ease;
|
||||
|
||||
&.secondary {
|
||||
background-color: var(--secondaryColor);
|
||||
background-color: pvar(--secondaryColor);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -633,14 +633,14 @@
|
|||
padding: 0.75rem 1rem;
|
||||
margin-bottom: 1rem;
|
||||
list-style: none;
|
||||
background-color: var(--submenuColor);
|
||||
background-color: pvar(--submenuColor);
|
||||
border-radius: 0.25rem;
|
||||
|
||||
.breadcrumb-item {
|
||||
display: flex;
|
||||
|
||||
a {
|
||||
color: var(--mainColor);
|
||||
color: pvar(--mainColor);
|
||||
}
|
||||
|
||||
& + .breadcrumb-item {
|
||||
|
|
@ -688,7 +688,7 @@
|
|||
& > a,
|
||||
& > div {
|
||||
padding: 20px;
|
||||
background: var(--submenuColor);
|
||||
background: pvar(--submenuColor);
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
|
|
@ -699,14 +699,14 @@
|
|||
text-align: center;
|
||||
font-size: 130%;
|
||||
line-height: 21px;
|
||||
color: var(--mainForegroundColor);
|
||||
color: pvar(--mainForegroundColor);
|
||||
line-height: 30px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.dashboard-label {
|
||||
font-size: 90%;
|
||||
color: var(--inputPlaceholderColor);
|
||||
color: pvar(--inputPlaceholderColor);
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
|
@ -726,7 +726,7 @@
|
|||
height: max-content;
|
||||
|
||||
&:focus-within {
|
||||
box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest);
|
||||
box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -735,8 +735,8 @@
|
|||
height: 30px !important;
|
||||
font-size: 12px !important;
|
||||
|
||||
background-color: var(--mainBackgroundColor) !important;
|
||||
color: var(--mainForegroundColor) !important;
|
||||
background-color: pvar(--mainBackgroundColor) !important;
|
||||
color: pvar(--mainForegroundColor) !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -769,7 +769,7 @@
|
|||
vertical-align: middle !important;
|
||||
|
||||
path {
|
||||
fill: var(--greyForegroundColor) !important;
|
||||
fill: pvar(--greyForegroundColor) !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -780,7 +780,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@mixin divider($color: var(--submenuColor), $background: var(--mainBackgroundColor)) {
|
||||
@mixin divider($color: pvar(--submenuColor), $background: pvar(--mainBackgroundColor)) {
|
||||
width: 95%;
|
||||
border-top: .05rem solid $color;
|
||||
height: .05rem;
|
||||
|
|
@ -810,7 +810,7 @@
|
|||
border-radius: 5rem;
|
||||
display: inline-flex;
|
||||
font-size: 90%;
|
||||
color: var(--mainForegroundColor);
|
||||
color: pvar(--mainForegroundColor);
|
||||
height: $avatar-height;
|
||||
line-height: 1rem;
|
||||
margin: .1rem;
|
||||
|
|
@ -887,3 +887,21 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
// applies 16:9 ratio to a child element (using $selector) only using
|
||||
// an immediate's parent size. This allows 16:9 ratio without explicit
|
||||
// dimensions, as width/height cannot be computed from each other.
|
||||
@mixin large-screen-ratio ($selector: 'div') {
|
||||
position: relative;
|
||||
height: 0;
|
||||
width: 100%;
|
||||
padding-top: 56%;
|
||||
|
||||
#{$selector} {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -116,7 +116,7 @@ $variables: (
|
|||
--embedBigPlayBackgroundColor: var(--embedBigPlayBackgroundColor)
|
||||
);
|
||||
|
||||
@function var($variable) {
|
||||
@function pvar($variable) {
|
||||
@return map-get($variables, $variable);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
-moz-transition: 350ms linear all;
|
||||
-o-transition: 350ms linear all;
|
||||
transition: 350ms linear all;
|
||||
color: var(--mainColor);
|
||||
color: pvar(--mainColor);
|
||||
}
|
||||
|
||||
#loading-bar .bar {
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
-o-transition: width 350ms;
|
||||
transition: width 350ms;
|
||||
|
||||
background: var(--mainColor);
|
||||
background: pvar(--mainColor);
|
||||
position: fixed;
|
||||
z-index: z(loadbar);
|
||||
top: 0;
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ $context-menu-width: 350px;
|
|||
|
||||
.vjs-menu-content {
|
||||
opacity: $primary-foreground-opacity;
|
||||
color: var(--embedForegroundCsolor);
|
||||
color: pvar(--embedForegroundCsolor);
|
||||
font-size: $font-size !important;
|
||||
font-weight: $font-semibold;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ body {
|
|||
|
||||
.video-js.vjs-peertube-skin {
|
||||
font-size: $font-size;
|
||||
color: var(--embedForegroundColor);
|
||||
color: pvar(--embedForegroundColor);
|
||||
|
||||
.vjs-dock-text {
|
||||
padding-right: 10px;
|
||||
|
|
@ -132,7 +132,7 @@ body {
|
|||
.vjs-control-bar,
|
||||
.vjs-big-play-button,
|
||||
.vjs-settings-dialog {
|
||||
background-color: var(--embedBigPlayBackgroundColor);
|
||||
background-color: pvar(--embedBigPlayBackgroundColor);
|
||||
}
|
||||
|
||||
.vjs-poster {
|
||||
|
|
@ -157,7 +157,7 @@ body {
|
|||
.vjs-theater-control,
|
||||
.vjs-settings
|
||||
{
|
||||
color: var(--embedForegroundColor) !important;
|
||||
color: pvar(--embedForegroundColor) !important;
|
||||
|
||||
opacity: $primary-foreground-opacity;
|
||||
transition: opacity .1s;
|
||||
|
|
@ -170,7 +170,7 @@ body {
|
|||
.vjs-current-time,
|
||||
.vjs-duration,
|
||||
.vjs-peertube {
|
||||
color: var(--embedForegroundColor);
|
||||
color: pvar(--embedForegroundColor);
|
||||
opacity: $primary-foreground-opacity;
|
||||
}
|
||||
|
||||
|
|
@ -190,7 +190,7 @@ body {
|
|||
transition: none;
|
||||
|
||||
.vjs-play-progress {
|
||||
background: var(--embedForegroundColor);
|
||||
background: pvar(--embedForegroundColor);
|
||||
|
||||
// Not display the circle if the progress is not hovered
|
||||
&::before {
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@ $setting-transition-easing: ease-out;
|
|||
position: absolute;
|
||||
right: .5em;
|
||||
bottom: 3.5em;
|
||||
color: var(--embedForegroundColor);
|
||||
color: pvar(--embedForegroundColor);
|
||||
opacity: $primary-foreground-opacity;
|
||||
margin: 0 auto;
|
||||
font-size: $font-size !important;
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
@mixin glyphicon-light {
|
||||
font-family: 'Glyphicons Halflings';
|
||||
text-decoration: none !important;
|
||||
color: var(--mainForegroundColor) !important;
|
||||
color: pvar(--mainForegroundColor) !important;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
|
|
@ -19,14 +19,14 @@ my-button {
|
|||
|
||||
// focus box-shadow for primeng
|
||||
.ui-inputtext:enabled:focus:not(.ui-state-error) {
|
||||
box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest) !important;
|
||||
box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest) !important;
|
||||
}
|
||||
|
||||
// data table customizations
|
||||
p-table {
|
||||
.ui-table-caption {
|
||||
border: none !important;
|
||||
background-color: var(--mainBackgroundColor) !important;
|
||||
background-color: pvar(--mainBackgroundColor) !important;
|
||||
|
||||
.caption {
|
||||
height: 40px;
|
||||
|
|
@ -41,14 +41,14 @@ p-table {
|
|||
}
|
||||
|
||||
th {
|
||||
background-color: var(--mainBackgroundColor) !important;
|
||||
background-color: pvar(--mainBackgroundColor) !important;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
td, th {
|
||||
font-family: $main-fonts;
|
||||
font-size: 15px !important;
|
||||
color: var(--mainForegroundColor) !important;
|
||||
color: pvar(--mainForegroundColor) !important;
|
||||
}
|
||||
|
||||
td {
|
||||
|
|
@ -63,14 +63,14 @@ p-table {
|
|||
|
||||
tr {
|
||||
outline: 0;
|
||||
background-color: var(--mainBackgroundColor) !important;
|
||||
background-color: pvar(--mainBackgroundColor) !important;
|
||||
height: 46px;
|
||||
|
||||
&.ui-state-highlight {
|
||||
background-color: var(--submenuColor) !important;
|
||||
background-color: pvar(--submenuColor) !important;
|
||||
|
||||
td, td > a {
|
||||
color: var(--mainForegroundColor) !important;
|
||||
color: pvar(--mainForegroundColor) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -78,7 +78,7 @@ p-table {
|
|||
.ui-table-tbody {
|
||||
tr {
|
||||
&:hover {
|
||||
background-color: var(--submenuColor) !important;
|
||||
background-color: pvar(--submenuColor) !important;
|
||||
|
||||
.action-cell {
|
||||
.dropdown-root,
|
||||
|
|
@ -113,16 +113,16 @@ p-table {
|
|||
th {
|
||||
border: none !important;
|
||||
border-bottom: 1px solid !important;
|
||||
border-color: var(--submenuColor) !important;
|
||||
border-color: pvar(--submenuColor) !important;
|
||||
text-align: left !important;
|
||||
padding: 5px 0 5px 15px !important;
|
||||
font-weight: $font-semibold !important;
|
||||
color: var(--mainForegroundColor) !important;
|
||||
color: pvar(--mainForegroundColor) !important;
|
||||
|
||||
&.ui-sortable-column:hover {
|
||||
background-color: var(--submenuColor) !important;
|
||||
background-color: pvar(--submenuColor) !important;
|
||||
border: 1px solid !important;
|
||||
border-color: var(--submenuColor) !important;
|
||||
border-color: pvar(--submenuColor) !important;
|
||||
border-width: 0 1px !important;
|
||||
|
||||
&:first-child {
|
||||
|
|
@ -131,7 +131,7 @@ p-table {
|
|||
}
|
||||
|
||||
&.ui-state-highlight {
|
||||
background-color: var(--submenuColor) !important;
|
||||
background-color: pvar(--submenuColor) !important;
|
||||
|
||||
.pi {
|
||||
@extend .glyphicon;
|
||||
|
|
@ -143,13 +143,13 @@ p-table {
|
|||
&.pi-sort-amount-up-alt {
|
||||
@extend .glyphicon-triangle-top;
|
||||
|
||||
color: var(--mainForegroundColor) !important;
|
||||
color: pvar(--mainForegroundColor) !important;
|
||||
}
|
||||
|
||||
&.pi-sort-amount-down {
|
||||
@extend .glyphicon-triangle-bottom;
|
||||
|
||||
color: var(--mainForegroundColor) !important;
|
||||
color: pvar(--mainForegroundColor) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -184,11 +184,11 @@ p-table {
|
|||
|
||||
p-paginator {
|
||||
.ui-paginator-bottom {
|
||||
background-color: var(--mainBackgroundColor) !important;
|
||||
background-color: pvar(--mainBackgroundColor) !important;
|
||||
position: relative;
|
||||
border: none;
|
||||
border-top: 1px solid !important;
|
||||
border-color: var(--submenuColor) !important;
|
||||
border-color: pvar(--submenuColor) !important;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
|
@ -200,18 +200,18 @@ p-table {
|
|||
left: 0;
|
||||
|
||||
&.ui-state-focus {
|
||||
box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest);
|
||||
box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
|
||||
}
|
||||
|
||||
.ui-dropdown-label {
|
||||
color: var(--inputPlaceholderColor);
|
||||
color: pvar(--inputPlaceholderColor);
|
||||
}
|
||||
}
|
||||
|
||||
.ui-paginator-current {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
color: var(--inputPlaceholderColor);
|
||||
color: pvar(--inputPlaceholderColor);
|
||||
}
|
||||
|
||||
.ui-paginator-first,
|
||||
|
|
@ -227,7 +227,7 @@ p-table {
|
|||
|
||||
&.focus-within,
|
||||
&:focus {
|
||||
box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest);
|
||||
box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
|
||||
}
|
||||
|
||||
&.ui-state-disabled:hover {
|
||||
|
|
@ -261,12 +261,12 @@ p-table {
|
|||
.ui-paginator-page {
|
||||
&.focus-within,
|
||||
&:focus {
|
||||
box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest) !important;
|
||||
box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest) !important;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--mainForegroundColor) !important;
|
||||
color: pvar(--mainForegroundColor) !important;
|
||||
font-weight: $font-semibold !important;
|
||||
margin: 0 5px !important;
|
||||
outline: 0 !important;
|
||||
|
|
@ -278,7 +278,7 @@ p-table {
|
|||
&.ui-state-active {
|
||||
&, &:hover, &:active, &:focus {
|
||||
color: #fff !important;
|
||||
background-color: var(--mainColor) !important;
|
||||
background-color: pvar(--mainColor) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -328,7 +328,7 @@ p-multiselect {
|
|||
|
||||
&:focus,
|
||||
&.ui-state-focus {
|
||||
box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest);
|
||||
box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -368,11 +368,11 @@ p-multiselect {
|
|||
}
|
||||
|
||||
.ui-multiselect-panel .ui-multiselect-items .ui-multiselect-item.ui-state-highlight {
|
||||
background-color: var(--mainColorLighter);
|
||||
background-color: pvar(--mainColorLighter);
|
||||
}
|
||||
|
||||
.ui-inputtext:enabled:focus:not(.ui-state-error) {
|
||||
border-color: var(--mainColorLighter) !important;
|
||||
border-color: pvar(--mainColorLighter) !important;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -445,8 +445,8 @@ p-tablecheckbox:hover div .ui-chkbox-box {
|
|||
|
||||
.ui-chkbox-box {
|
||||
&.ui-state-active {
|
||||
border-color: var(--mainColor) !important;
|
||||
background-color: var(--mainColor) !important;
|
||||
border-color: pvar(--mainColor) !important;
|
||||
background-color: pvar(--mainColor) !important;
|
||||
}
|
||||
|
||||
.ui-chkbox-icon {
|
||||
|
|
@ -462,8 +462,8 @@ p-tablecheckbox:hover div .ui-chkbox-box {
|
|||
height: 12px;
|
||||
opacity: 0;
|
||||
transform: rotate(45deg) scale(0);
|
||||
border-right: 2px solid var(--mainBackgroundColor);
|
||||
border-bottom: 2px solid var(--mainBackgroundColor);
|
||||
border-right: 2px solid pvar(--mainBackgroundColor);
|
||||
border-bottom: 2px solid pvar(--mainBackgroundColor);
|
||||
}
|
||||
|
||||
&.pi-check:after {
|
||||
|
|
@ -478,7 +478,7 @@ p-inputswitch {
|
|||
height: 26px;
|
||||
|
||||
.ui-inputswitch-checked .ui-inputswitch-slider {
|
||||
background-color: var(--mainColor) !important;
|
||||
background-color: pvar(--mainColor) !important;
|
||||
}
|
||||
|
||||
&.small {
|
||||
|
|
@ -520,8 +520,8 @@ p-toast {
|
|||
|
||||
.ui-toast-message {
|
||||
font-family: $main-fonts;
|
||||
background-color: var(--mainBackgroundColor) !important;
|
||||
color: var(--mainForegroundColor) !important;
|
||||
background-color: pvar(--mainBackgroundColor) !important;
|
||||
color: pvar(--mainForegroundColor) !important;
|
||||
border-radius: 5px;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #EBEEF5 !important;
|
||||
|
|
|
|||
Loading…
Reference in New Issue