interesting
/
PeerTube
mirror of https://github.com/Chocobozzz/PeerTube.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

`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 2020-06-09 09:33:28 +02:00 committed by GitHub
parent 6ad971d5f5
commit e66883b37a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
65 changed files with 355 additions and 294 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/app/+about/about-instance/about-instance.component.scss
View File

@ -27,7 +27,7 @@
margin-right: 5px; margin-right: 5px;
&.category { &.category {
background-color: var(--mainColor); background-color: pvar(--mainColor);
} }
} }
} }

1
client/src/app/+accounts/account-video-channels/account-video-channels.component.html
View File

@ -19,6 +19,7 @@
<div class="no-results my-5" i18n *ngIf="getVideosOf(videoChannel).length === 0">This channel doesn't have any videos.</div> <div class="no-results my-5" i18n *ngIf="getVideosOf(videoChannel).length === 0">This channel doesn't have any videos.</div>
<my-video-miniature <my-video-miniature
class="pr-2"
*ngFor="let video of getVideosOf(videoChannel)" *ngFor="let video of getVideosOf(videoChannel)"
[video]="video" [user]="user" [displayVideoActions]="true" [video]="video" [user]="user" [displayVideoActions]="true"
></my-video-miniature> ></my-video-miniature>

4
client/src/app/+admin/follows/followers-list/followers-list.component.scss
View File

@ -14,12 +14,12 @@ a {
display: inline-block; display: inline-block;
&, &:hover { &, &:hover {
color: var(--mainForegroundColor); color: pvar(--mainForegroundColor);
} }
span { span {
font-size: 80%; font-size: 80%;
color: var(--inputPlaceholderColor); color: pvar(--inputPlaceholderColor);
} }
} }

4
client/src/app/+admin/follows/following-list/following-list.component.scss
View File

@ -6,12 +6,12 @@ a {
display: inline-block; display: inline-block;
&, &:hover { &, &:hover {
color: var(--mainForegroundColor); color: pvar(--mainForegroundColor);
} }
span { span {
font-size: 80%; font-size: 80%;
color: var(--inputPlaceholderColor); color: pvar(--inputPlaceholderColor);
} }
} }

4
client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.scss
View File

@ -6,12 +6,12 @@ a {
display: inline-block; display: inline-block;
&, &:hover { &, &:hover {
color: var(--mainForegroundColor); color: pvar(--mainForegroundColor);
} }
span { span {
font-size: 80%; font-size: 80%;
color: var(--inputPlaceholderColor); color: pvar(--inputPlaceholderColor);
} }
} }

4
client/src/app/+admin/moderation/instance-blocklist/instance-server-blocklist.component.scss
View File

@ -6,12 +6,12 @@ a {
display: inline-block; display: inline-block;
&, &:hover { &, &:hover {
color: var(--mainForegroundColor); color: pvar(--mainForegroundColor);
} }
span { span {
font-size: 80%; font-size: 80%;
color: var(--inputPlaceholderColor); color: pvar(--inputPlaceholderColor);
} }
} }

20
client/src/app/+admin/moderation/moderation.component.scss
View File

@ -47,29 +47,19 @@
} }
.screenratio { .screenratio {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56%;
div { div {
@include miniature-thumbnail; @include miniature-thumbnail;
position: absolute;
height: 100%;
width: 100%;
display: inline-flex; display: inline-flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
color: var(--inputPlaceholderColor); color: pvar(--inputPlaceholderColor);
} }
::ng-deep iframe { @include large-screen-ratio($selector: 'div, ::ng-deep iframe') {
position: absolute;
width: 100% !important; width: 100% !important;
height: 100% !important; height: 100% !important;
left: 0; left: 0;
top: 0; };
}
} }
.chip { .chip {
@ -115,7 +105,7 @@ my-action-dropdown.show {
} }
span { span {
color: var(--inputPlaceholderColor); color: pvar(--inputPlaceholderColor);
} }
.video-table-video-image-label { .video-table-video-image-label {
@ -135,7 +125,7 @@ my-action-dropdown.show {
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
font-size: 90%; font-size: 90%;
color: var(--mainForegroundColor); color: pvar(--mainForegroundColor);
line-height: 1rem; line-height: 1rem;
div .glyphicon { div .glyphicon {

6
client/src/app/+admin/plugins/shared/plugin-list.component.scss
View File

@ -3,7 +3,7 @@
.plugin { .plugin {
margin: 15px 0; margin: 15px 0;
background-color: var(--submenuColor); background-color: pvar(--submenuColor);
} }
.first-row { .first-row {
@ -25,10 +25,10 @@
margin-left: 10px; margin-left: 10px;
my-global-icon { my-global-icon {
@include apply-svg-color(var(--greyForegroundColor)); @include apply-svg-color(pvar(--greyForegroundColor));
&[iconName="npm"] { &[iconName="npm"] {
@include fill-svg-color(var(--greyForegroundColor)); @include fill-svg-color(pvar(--greyForegroundColor));
} }
} }
} }

8
client/src/app/+admin/plugins/shared/toggle-plugin-type.scss
View File

@ -19,12 +19,12 @@
} }
.ui-button.ui-state-active { .ui-button.ui-state-active {
background-color: var(--mainColor); background-color: pvar(--mainColor);
border-color: var(--mainColor); border-color: pvar(--mainColor);
&:hover { &:hover {
background-color: var(--mainHoverColor); background-color: pvar(--mainHoverColor);
border-color: var(--mainHoverColor); border-color: pvar(--mainHoverColor);
} }
} }

2
client/src/app/+admin/system/logs/logs.component.scss
View File

@ -28,7 +28,7 @@
} }
.warn { .warn {
color: var(--mainColor); color: pvar(--mainColor);
} }
.error { .error {

2
client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.scss
View File

@ -19,7 +19,7 @@
width: fit-content; width: fit-content;
display: flex; display: flex;
align-items: baseline; align-items: baseline;
color: var(--mainForegroundColor); color: pvar(--mainForegroundColor);
.video-channel-display-name { .video-channel-display-name {
font-weight: $font-semibold; font-weight: $font-semibold;

2
client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss
View File

@ -30,7 +30,7 @@
width: fit-content; width: fit-content;
display: flex; display: flex;
align-items: baseline; align-items: baseline;
color: var(--mainForegroundColor); color: pvar(--mainForegroundColor);
.video-channel-display-name { .video-channel-display-name {
font-weight: $font-semibold; font-weight: $font-semibold;

4
client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.scss
View File

@ -3,7 +3,7 @@
@import '_miniature'; @import '_miniature';
.playlist-info { .playlist-info {
background-color: var(--submenuColor); background-color: pvar(--submenuColor);
margin-left: -15px; margin-left: -15px;
margin-top: -$sub-menu-margin-bottom; margin-top: -$sub-menu-margin-bottom;
@ -14,7 +14,7 @@
/* fix ellipsis dots background color */ /* fix ellipsis dots background color */
::ng-deep .miniature-name::after { ::ng-deep .miniature-name::after {
background-color: var(--submenuColor) !important; background-color: pvar(--submenuColor) !important;
} }
} }

6
client/src/app/+my-account/my-account-videos/my-account-videos.component.scss
View File

@ -84,7 +84,7 @@ my-edit-button {
.video-bottom, .video-bottom,
.video-bottom .video-miniature-information { .video-bottom .video-miniature-information {
/* same width than a.video-thumbnail */ /* 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 { ::ng-deep {
.action-button { .action-button {
/* same width than a.video-thumbnail */ /* same width than a.video-thumbnail */
width: 223px; width: $video-thumbnail-width;
} }
} }
} }
@ -124,7 +124,7 @@ my-edit-button {
flex-direction: column; flex-direction: column;
.video-miniature-name { .video-miniature-name {
max-width: 223px; max-width: $video-thumbnail-width;
} }
} }
} }

10
client/src/app/+signup/+register/custom-stepper.component.scss
View File

@ -28,7 +28,7 @@ header {
margin-bottom: 10px; margin-bottom: 10px;
my-global-icon { my-global-icon {
@include apply-svg-color(var(--mainBackgroundColor)); @include apply-svg-color(pvar(--mainBackgroundColor));
width: 22px; width: 22px;
height: 22px; height: 22px;
@ -42,13 +42,13 @@ header {
&.active, &.active,
&.completed { &.completed {
.step-index { .step-index {
border-color: var(--mainColor); border-color: pvar(--mainColor);
background-color: var(--mainColor); background-color: pvar(--mainColor);
color: var(--mainBackgroundColor); color: pvar(--mainBackgroundColor);
} }
.step-label { .step-label {
color: var(--mainColor); color: pvar(--mainColor);
} }
} }

4
client/src/app/+signup/+register/register.component.scss
View File

@ -39,7 +39,7 @@
ngb-accordion ::ng-deep { ngb-accordion ::ng-deep {
.btn { .btn {
font-weight: $font-semibold !important; font-weight: $font-semibold !important;
color: var(--mainForegroundColor) !important; color: pvar(--mainForegroundColor) !important;
} }
} }
} }
@ -94,7 +94,7 @@ button {
margin-bottom: 20px; margin-bottom: 20px;
::ng-deep .loader div { ::ng-deep .loader div {
border-color: var(--mainColor) transparent transparent transparent; border-color: pvar(--mainColor) transparent transparent transparent;
} }
& + div { & + div {

4
client/src/app/+video-channels/video-channel-videos/video-channel-videos.component.ts
View File

@ -47,6 +47,10 @@ export class VideoChannelVideosComponent extends AbstractVideoList implements On
super() super()
this.titlePage = this.i18n('Published videos') this.titlePage = this.i18n('Published videos')
this.displayOptions = {
...this.displayOptions,
avatar: false
}
} }
ngOnInit () { ngOnInit () {

7
client/src/app/app.component.scss
View File

@ -13,7 +13,7 @@
.sub-header-container { .sub-header-container {
margin-top: $header-height; margin-top: $header-height;
background-color: var(--mainBackgroundColor); background-color: pvar(--mainBackgroundColor);
width: 100%; width: 100%;
} }
@ -22,7 +22,7 @@
position: fixed; position: fixed;
top: 0; top: 0;
width: 100%; width: 100%;
background-color: var(--mainBackgroundColor); background-color: pvar(--mainBackgroundColor);
z-index: z(header); z-index: z(header);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
display: flex; display: flex;
@ -38,7 +38,7 @@
@include icon(24px); @include icon(24px);
&.icon-menu { &.icon-menu {
background-color: var(--mainForegroundColor); background-color: pvar(--mainForegroundColor);
mask-image: url('../assets/images/header/menu.svg'); mask-image: url('../assets/images/header/menu.svg');
margin: 0 18px 0 20px; margin: 0 18px 0 20px;
} }
@ -65,6 +65,7 @@
background: url('../assets/images/logo.svg') no-repeat; background: url('../assets/images/logo.svg') no-repeat;
width: 23px; width: 23px;
height: 24px; height: 24px;
margin-right: .5rem;
} }
} }

10
client/src/app/header/search-typeahead.component.scss
View File

@ -10,7 +10,7 @@
font-size: 14px; font-size: 14px;
&::placeholder { &::placeholder {
color: var(--inputPlaceholderColor); color: pvar(--inputPlaceholderColor);
} }
} }
@ -18,7 +18,7 @@
@include icon(25px); @include icon(25px);
height: 21px; height: 21px;
background-color: var(--mainForegroundColor); background-color: pvar(--mainForegroundColor);
mask: url('../../assets/images/header/search.svg') no-repeat 50% 50%; mask: url('../../assets/images/header/search.svg') no-repeat 50% 50%;
// yolo // yolo
@ -37,10 +37,10 @@
#typeahead-help, #typeahead-help,
#typeahead-instructions, #typeahead-instructions,
my-suggestions ::ng-deep ul { my-suggestions ::ng-deep ul {
border: 1px solid var(--mainBackgroundColor); border: 1px solid pvar(--mainBackgroundColor);
border-bottom-right-radius: 3px; border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px; border-bottom-left-radius: 3px;
background: var(--mainBackgroundColor); background: pvar(--mainBackgroundColor);
transition: .3s ease; transition: .3s ease;
transition-property: box-shadow; transition-property: box-shadow;
} }
@ -67,7 +67,7 @@ my-suggestions ::ng-deep ul {
#typeahead-container { #typeahead-container {
input { 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; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 20px 0px;
flex-grow: 1; flex-grow: 1;
transition: box-shadow .3s ease, width .2s ease; transition: box-shadow .3s ease, width .2s ease;

12
client/src/app/header/suggestion.component.scss
View File

@ -5,21 +5,21 @@ a {
width: 100%; width: 100%;
&, &:hover { &, &:hover {
color: var(--mainForegroundColor); color: pvar(--mainForegroundColor);
&.focus-visible { &.focus-visible {
background-color: var(--mainHoverColor); background-color: pvar(--mainHoverColor);
color: var(--mainBackgroundColor); color: pvar(--mainBackgroundColor);
} }
} }
} }
.bg-gray { .bg-gray {
background-color: var(--mainBackgroundColor); background-color: pvar(--mainBackgroundColor);
} }
.text-gray-light { .text-gray-light {
color: var(--mainForegroundColor); color: pvar(--mainForegroundColor);
} }
my-global-icon { my-global-icon {
@ -28,5 +28,5 @@ my-global-icon {
top: -2px; top: -2px;
margin: 5px; margin: 5px;
@include apply-svg-color(var(--mainForegroundColor)); @include apply-svg-color(pvar(--mainForegroundColor));
} }

4
client/src/app/login/login.component.scss
View File

@ -18,7 +18,7 @@ input[type=submit] {
} }
.create-an-account, .forgot-password-button { .create-an-account, .forgot-password-button {
color: var(--mainForegroundColor); color: pvar(--mainForegroundColor);
cursor: pointer; cursor: pointer;
transition: opacity cubic-bezier(0.39, 0.575, 0.565, 1); transition: opacity cubic-bezier(0.39, 0.575, 0.565, 1);
@ -50,7 +50,7 @@ input[type=submit] {
cursor: pointer; cursor: pointer;
border: 1px solid #d1d7e0; border: 1px solid #d1d7e0;
border-radius: 5px; border-radius: 5px;
color: var(--mainForegroundColor); color: pvar(--mainForegroundColor);
margin: 10px 10px 0 0; margin: 10px 10px 0 0;
display: flex; display: flex;
justify-content: center; justify-content: center;

4
client/src/app/menu/avatar-notification.component.scss
View File

@ -106,8 +106,8 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: var(--mainColor); background-color: pvar(--mainColor);
color: var(#fff); color: #fff;
font-size: 10px; font-size: 10px;
font-weight: $font-semibold; font-weight: $font-semibold;

22
client/src/app/menu/menu.component.scss
View File

@ -7,18 +7,18 @@
padding: 0; padding: 0;
width: $menu-width; width: $menu-width;
z-index: z(menu); z-index: z(menu);
scrollbar-color: var(--actionButtonColor) var(--menuBackgroundColor); scrollbar-color: pvar(--actionButtonColor) pvar(--menuBackgroundColor);
} }
menu { menu {
@include ellipsis; @include ellipsis;
background-color: var(--menuBackgroundColor); background-color: pvar(--menuBackgroundColor);
margin: 0; margin: 0;
padding: 0; padding: 0;
height: 100%; height: 100%;
overflow-x: hidden; overflow-x: hidden;
color: var(--menuForegroundColor); color: pvar(--menuForegroundColor);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
@ -62,7 +62,7 @@ menu {
.logged-in-display-name { .logged-in-display-name {
font-size: 16px; font-size: 16px;
font-weight: $font-semibold; font-weight: $font-semibold;
color: var(--menuForegroundColor); color: pvar(--menuForegroundColor);
cursor: pointer; cursor: pointer;
@include disable-default-a-behaviour; @include disable-default-a-behaviour;
@ -89,7 +89,7 @@ menu {
} }
::ng-deep { ::ng-deep {
@include apply-svg-color(var(--menuForegroundColor)); @include apply-svg-color(pvar(--menuForegroundColor));
} }
} }
} }
@ -139,7 +139,7 @@ menu {
display: flex; display: flex;
align-items: center; align-items: center;
padding-left: $menu-lateral-padding; padding-left: $menu-lateral-padding;
color: var(--menuForegroundColor); color: pvar(--menuForegroundColor);
cursor: pointer; cursor: pointer;
min-height: 40px; min-height: 40px;
font-size: 16px; font-size: 16px;
@ -206,7 +206,7 @@ menu {
a, span[role=button] { a, span[role=button] {
display: inline-block; display: inline-block;
text-decoration: none; text-decoration: none;
color: var(--mainBackgroundColor); color: pvar(--mainBackgroundColor);
opacity: $footer-links-base-opacity; opacity: $footer-links-base-opacity;
white-space: nowrap; white-space: nowrap;
font-size: 90%; font-size: 90%;
@ -221,7 +221,7 @@ menu {
height: 1.4rem; height: 1.4rem;
my-global-icon { my-global-icon {
@include apply-svg-color(var(--mainBackgroundColor)); @include apply-svg-color(pvar(--mainBackgroundColor));
display: flex; display: flex;
width: auto; width: auto;
@ -235,7 +235,7 @@ menu {
.footer-copyleft small a { .footer-copyleft small a {
@include disable-default-a-behaviour; @include disable-default-a-behaviour;
color: var(--mainBackgroundColor); color: pvar(--mainBackgroundColor);
opacity: $footer-links-base-opacity - .2; opacity: $footer-links-base-opacity - .2;
} }
} }
@ -323,7 +323,7 @@ label {
left: 3px; left: 3px;
width: 14px; width: 14px;
height: 14px; height: 14px;
background: var(--mainBackgroundColor); background: pvar(--mainBackgroundColor);
border-radius: 50%; border-radius: 50%;
transition: 0.3s ease-out; transition: 0.3s ease-out;
} }
@ -334,7 +334,7 @@ label {
} }
input:checked + label { input:checked + label {
background: var(--mainColor); background: pvar(--mainColor);
&:after { &:after {
left: calc(100% - 3px); left: calc(100% - 3px);

2
client/src/app/modal/welcome-modal.component.scss
View File

@ -51,7 +51,7 @@ li {
.link-block { .link-block {
@include disable-default-a-behaviour; @include disable-default-a-behaviour;
color: var(--mainForegroundColor); color: pvar(--mainForegroundColor);
padding: 10px; padding: 10px;
transition: background-color 0.2s ease-in; transition: background-color 0.2s ease-in;
flex-basis: 33%; flex-basis: 33%;

4
client/src/app/search/search.component.scss
View File

@ -62,7 +62,7 @@
display: flex; display: flex;
align-items: baseline; align-items: baseline;
color: var(--mainForegroundColor); color: pvar(--mainForegroundColor);
width: fit-content; width: fit-content;
.video-channel-display-name { .video-channel-display-name {
@ -111,7 +111,7 @@
// Override the min-width: 500px to not break screen // Override the min-width: 500px to not break screen
::ng-deep .video-miniature-information { ::ng-deep .video-miniature-information {
min-width: 223px !important; min-width: $video-thumbnail-width !important;
} }
} }

2
client/src/app/shared/buttons/action-dropdown.component.scss
View File

@ -34,7 +34,7 @@
width: 21px; width: 21px;
::ng-deep { ::ng-deep {
@include apply-svg-color(var(--actionButtonColor)); @include apply-svg-color(pvar(--actionButtonColor));
} }
} }

4
client/src/app/shared/channel/avatar.component.scss
View File

@ -30,9 +30,9 @@
a:nth-of-type(2) img { a:nth-of-type(2) img {
height: 60%; height: 60%;
width: 60%; width: 60%;
border: 2px solid var(--mainBackgroundColor); border: 2px solid pvar(--mainBackgroundColor);
transform: translateX(15%); transform: translateX(15%);
position: relative; position: relative;
background-color: var(--mainBackgroundColor); background-color: pvar(--mainBackgroundColor);
} }
} }

12
client/src/app/shared/forms/markdown-textarea.component.scss
View File

@ -14,7 +14,7 @@ $input-border-radius: 3px;
textarea { textarea {
@include peertube-textarea(100%, 150px); @include peertube-textarea(100%, 150px);
background-color: var(--markdownTextareaBackgroundColor); background-color: pvar(--markdownTextareaBackgroundColor);
font-family: monospace; font-family: monospace;
font-size: 13px; font-size: 13px;
@ -61,7 +61,7 @@ $input-border-radius: 3px;
flex-grow: 1; flex-grow: 1;
border-bottom-left-radius: unset; border-bottom-left-radius: unset;
border-bottom-right-radius: unset; border-bottom-right-radius: unset;
border-bottom: 2px solid var(--mainColor); border-bottom: 2px solid pvar(--mainColor);
:first-child { :first-child {
margin-left: auto; margin-left: auto;
@ -112,7 +112,7 @@ $input-border-radius: 3px;
padding-left: 0px; padding-left: 0px;
padding-right: 0px; padding-right: 0px;
position: absolute; position: absolute;
background-color: var(--mainBackgroundColor); background-color: pvar(--mainBackgroundColor);
width: 100% !important; width: 100% !important;
border-top: none; border-top: none;
border-left: none; border-left: none;
@ -125,8 +125,8 @@ $input-border-radius: 3px;
::ng-deep .tab-content { ::ng-deep .tab-content {
@include content-preview-base(); @include content-preview-base();
background-color: var(--mainBackgroundColor); background-color: pvar(--mainBackgroundColor);
scrollbar-color: var(--actionButtonColor) var(--mainBackgroundColor); scrollbar-color: pvar(--actionButtonColor) pvar(--mainBackgroundColor);
} }
textarea, textarea,
@ -214,7 +214,7 @@ $input-border-radius: 3px;
padding: $base-padding; padding: $base-padding;
border-right: 1px dashed $input-border-color !important; border-right: 1px dashed $input-border-color !important;
resize: none; resize: none;
scrollbar-color: var(--actionButtonColor) var(--markdownTextareaBackgroundColor); scrollbar-color: pvar(--actionButtonColor) pvar(--markdownTextareaBackgroundColor);
&:focus { &:focus {
box-shadow: none; box-shadow: none;

2
client/src/app/shared/forms/peertube-checkbox.component.scss
View File

@ -45,7 +45,7 @@
font-size: 12px; font-size: 12px;
line-height: 12px; line-height: 12px;
font-weight: 500; font-weight: 500;
color: var(--inputPlaceholderColor); color: pvar(--inputPlaceholderColor);
background-color: rgba(217,225,232,.1); background-color: rgba(217,225,232,.1);
border: 1px solid rgba(217,225,232,.5); border: 1px solid rgba(217,225,232,.5);
} }

2
client/src/app/shared/forms/timestamp-input.component.scss
View File

@ -9,7 +9,7 @@ p-inputmask {
&:focus-within, &:focus-within,
&:focus { &:focus {
box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest); box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
} }
} }
} }

2
client/src/app/shared/images/preview-upload.component.scss
View File

@ -22,7 +22,7 @@
&.no-image { &.no-image {
border: 2px solid grey; border: 2px solid grey;
background-color: var(--mainBackgroundColor); background-color: pvar(--mainBackgroundColor);
} }
} }
} }

2
client/src/app/shared/instance/instance-features-table.component.scss
View File

@ -3,7 +3,7 @@
table { table {
font-size: 14px; font-size: 14px;
color: var(--mainForegroundColor); color: pvar(--mainForegroundColor);
.label, .label,
.sub-label { .sub-label {

4
client/src/app/shared/menu/top-menu-dropdown.component.scss
View File

@ -48,8 +48,8 @@
width: 100%; width: 100%;
&.active { &.active {
color: var(--mainBackgroundColor) !important; color: pvar(--mainBackgroundColor) !important;
background-color: var(--mainHoverColor); background-color: pvar(--mainHoverColor);
opacity: .9; opacity: .9;
} }
} }

6
client/src/app/shared/misc/help.component.scss
View File

@ -11,7 +11,7 @@
top: -2px; top: -2px;
margin: 5px; margin: 5px;
@include apply-svg-color(var(--mainForegroundColor)) @include apply-svg-color(pvar(--mainForegroundColor))
} }
} }
@ -25,8 +25,8 @@
text-align: left; text-align: left;
padding: 10px; padding: 10px;
font-size: 13px; font-size: 13px;
background-color: var(--mainBackgroundColor); background-color: pvar(--mainBackgroundColor);
color: var(--mainForegroundColor); color: pvar(--mainForegroundColor);
border-radius: 3px; border-radius: 3px;
p { p {

6
client/src/app/shared/misc/list-overflow.component.scss
View File

@ -24,7 +24,7 @@ button {
&.routeActive { &.routeActive {
&::after { &::after {
display: inherit; display: inherit;
border: 2px solid var(--mainColor); border: 2px solid pvar(--mainColor);
position: relative; position: relative;
right: 95%; right: 95%;
top: 50%; top: 50%;
@ -53,8 +53,8 @@ button {
width: 100%; width: 100%;
&.active { &.active {
color: var(--mainBackgroundColor) !important; color: pvar(--mainBackgroundColor) !important;
background-color: var(--mainHoverColor); background-color: pvar(--mainHoverColor);
opacity: .9; opacity: .9;
} }
} }

4
client/src/app/shared/misc/utils.ts
View File

@ -59,7 +59,9 @@ function durationToString (duration: number) {
const secondsPadding = seconds >= 10 ? '' : '0' const secondsPadding = seconds >= 10 ? '' : '0'
const displayedHours = hours > 0 ? hours.toString() + ':' : '' 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) { function immutableAssign <A, B> (target: A, source: B) {

2
client/src/app/shared/users/user-notifications.component.scss
View File

@ -44,7 +44,7 @@
.from-date { .from-date {
font-size: 0.85em; font-size: 0.85em;
color: var(--greyForegroundColor); color: pvar(--greyForegroundColor);
padding-left: 5px; padding-left: 5px;
min-width: 70px; min-width: 70px;
text-align: right; text-align: right;

2
client/src/app/shared/video-playlist/video-add-to-playlist.component.scss
View File

@ -68,7 +68,7 @@
.timestamp-info { .timestamp-info {
font-size: 0.9em; font-size: 0.9em;
color: var(--greyForegroundColor); color: pvar(--greyForegroundColor);
margin-left: 5px; margin-left: 5px;
} }
} }

12
client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss
View File

@ -24,7 +24,7 @@ my-video-thumbnail,
.video { .video {
display: flex; display: flex;
align-items: center; align-items: center;
background-color: var(--mainBackgroundColor); background-color: pvar(--mainBackgroundColor);
padding: 10px; padding: 10px;
border-bottom: 1px solid $separator-border-color; border-bottom: 1px solid $separator-border-color;
@ -49,7 +49,7 @@ my-video-thumbnail,
a { a {
@include disable-default-a-behaviour; @include disable-default-a-behaviour;
color: var(--mainForegroundColor); color: pvar(--mainForegroundColor);
display: flex; display: flex;
min-width: 0; min-width: 0;
align-items: center; align-items: center;
@ -58,11 +58,11 @@ my-video-thumbnail,
.position { .position {
font-weight: $font-semibold; font-weight: $font-semibold;
margin-right: 10px; margin-right: 10px;
color: var(--greyForegroundColor); color: pvar(--greyForegroundColor);
min-width: 25px; min-width: 25px;
my-global-icon { my-global-icon {
@include apply-svg-color(var(--greyForegroundColor)); @include apply-svg-color(pvar(--greyForegroundColor));
width: 17px; width: 17px;
position: relative; position: relative;
@ -81,7 +81,7 @@ my-video-thumbnail,
} }
.video-info-account, .video-info-timestamp { .video-info-account, .video-info-timestamp {
color: var(--greyForegroundColor); color: pvar(--greyForegroundColor);
} }
} }
} }
@ -109,7 +109,7 @@ my-video-thumbnail,
} }
.icon-more { .icon-more {
@include apply-svg-color(var(--greyForegroundColor)); @include apply-svg-color(pvar(--greyForegroundColor));
display: flex; display: flex;

4
client/src/app/shared/video-playlist/video-playlist-miniature.component.scss
View File

@ -53,7 +53,7 @@
@include disable-default-a-behaviour; @include disable-default-a-behaviour;
display: block; display: block;
color: var(--greyForegroundColor); color: pvar(--greyForegroundColor);
} }
.privacy-date { .privacy-date {
@ -72,7 +72,7 @@
.video-info-description { .video-info-description {
margin-top: 10px; margin-top: 10px;
color: var(--greyForegroundColor); color: pvar(--greyForegroundColor);
} }
} }
} }

1
client/src/app/shared/video/abstract-video-list.html
View File

@ -36,6 +36,7 @@
</div> </div>
<my-video-miniature <my-video-miniature
[fitWidth]="true"
[video]="video" [user]="user" [ownerDisplayType]="ownerDisplayType" [video]="video" [user]="user" [ownerDisplayType]="ownerDisplayType"
[displayVideoActions]="displayVideoActions" [displayOptions]="displayOptions" [displayVideoActions]="displayVideoActions" [displayOptions]="displayOptions"
(videoBlacklisted)="removeVideoFromArray(video)" (videoRemoved)="removeVideoFromArray(video)" (videoBlacklisted)="removeVideoFromArray(video)" (videoRemoved)="removeVideoFromArray(video)"

25
client/src/app/shared/video/abstract-video-list.scss
View File

@ -1,6 +1,24 @@
@import '_bootstrap-variables';
@import '_variables';
@import '_mixins'; @import '_mixins';
@import '_miniature'; @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 { .videos-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -45,13 +63,16 @@
margin-top: -10px; margin-top: -10px;
padding-top: 20px; padding-top: 20px;
// make the element span a full grid row within .videos grid
grid-column: 1 / -1;
&:not(:first-child) { &:not(:first-child) {
border-top: 1px solid $separator-border-color; border-top: 1px solid $separator-border-color;
} }
} }
.margin-content { :host-context(.main-col:not(.expanded)) .margin-content {
@include adapt-margin-content-width; @include adapt-margin-content-width($fluid: true);
} }
@media screen and (max-width: $mobile-view) { @media screen and (max-width: $mobile-view) {

2
client/src/app/shared/video/feed.component.scss
View File

@ -15,6 +15,6 @@
position: relative; position: relative;
top: -2px; top: -2px;
@include apply-svg-color(var(--mainForegroundColor)) @include apply-svg-color(pvar(--mainForegroundColor))
} }
} }

4
client/src/app/shared/video/modals/video-download.component.scss
View File

@ -41,13 +41,13 @@
min-width: 142px; min-width: 142px;
padding-right: 5px; padding-right: 5px;
display: inline-block; display: inline-block;
color: var(--greyForegroundColor); color: pvar(--greyForegroundColor);
font-weight: $font-bold; font-weight: $font-bold;
} }
a.metadata-attribute-value { a.metadata-attribute-value {
@include disable-default-a-behaviour; @include disable-default-a-behaviour;
color: var(--mainForegroundColor); color: pvar(--mainForegroundColor);
&:hover { &:hover {
opacity: 0.9; opacity: 0.9;

2
client/src/app/shared/video/video-miniature.component.html
View File

@ -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 <my-video-thumbnail
[video]="video" [nsfw]="isVideoBlur" [video]="video" [nsfw]="isVideoBlur"
[displayWatchLaterPlaylist]="isWatchLaterPlaylistDisplayed()" [inWatchLaterPlaylist]="inWatchLaterPlaylist" (watchLaterClick)="onWatchLaterClick($event)" [displayWatchLaterPlaylist]="isWatchLaterPlaylistDisplayed()" [inWatchLaterPlaylist]="inWatchLaterPlaylist" (watchLaterClick)="onWatchLaterClick($event)"

33
client/src/app/shared/video/video-miniature.component.scss
View File

@ -6,7 +6,6 @@ $more-button-width: 41px;
$more-margin-right: 15px; $more-margin-right: 15px;
.video-miniature { .video-miniature {
width: $video-miniature-width;
display: inline-flex; display: inline-flex;
flex-direction: column; flex-direction: column;
margin-bottom: $video-miniature-margin-bottom; margin-bottom: $video-miniature-margin-bottom;
@ -19,14 +18,16 @@ $more-margin-right: 15px;
.video-miniature-information { .video-miniature-information {
width: $video-miniature-width - $more-button-width - $more-margin-right; width: $video-miniature-width - $more-button-width - $more-margin-right;
line-height: normal; line-height: normal;
font-size: 13px;
.video-miniature-name { .video-miniature-name {
@include miniature-name; @include miniature-name;
font-size: 110%;
} }
.video-miniature-created-at-views { .video-miniature-created-at-views {
display: block; display: block;
font-size: 13px; font-size: 95%;
} }
.video-miniature-account, .video-miniature-account,
@ -35,8 +36,8 @@ $more-margin-right: 15px;
@include ellipsis; @include ellipsis;
display: block; display: block;
font-size: 13px; font-size: 95%;
color: var(--greyForegroundColor); color: pvar(--greyForegroundColor);
&:hover { &:hover {
color: $grey-foreground-hover-color; color: $grey-foreground-hover-color;
@ -87,10 +88,6 @@ $more-margin-right: 15px;
@media screen and (max-width: $small-view) { @media screen and (max-width: $small-view) {
.video-miniature-information { .video-miniature-information {
margin: 0 10px; margin: 0 10px;
.video-miniature-name {
margin-top: 0;
}
} }
.video-actions { .video-actions {
@ -109,6 +106,24 @@ $more-margin-right: 15px;
opacity: 1; 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 { &.display-as-row {
flex-direction: row; flex-direction: row;
margin-bottom: 0; margin-bottom: 0;
@ -137,7 +152,7 @@ $more-margin-right: 15px;
.video-miniature-created-at-views, .video-miniature-created-at-views,
.video-miniature-account, .video-miniature-account,
.video-miniature-channel { .video-miniature-channel {
font-size: 14px; font-size: 95%;
width: fit-content; width: fit-content;
} }

1
client/src/app/shared/video/video-miniature.component.ts
View File

@ -55,6 +55,7 @@ export class VideoMiniatureComponent implements OnInit {
} }
@Input() displayAsRow = false @Input() displayAsRow = false
@Input() displayVideoActions = true @Input() displayVideoActions = true
@Input() fitWidth = false
@Output() videoBlacklisted = new EventEmitter() @Output() videoBlacklisted = new EventEmitter()
@Output() videoUnblacklisted = new EventEmitter() @Output() videoUnblacklisted = new EventEmitter()

8
client/src/app/shared/video/video-thumbnail.component.scss
View File

@ -14,7 +14,7 @@
div { div {
height: 100%; height: 100%;
background-color: var(--mainColor); background-color: pvar(--mainColor);
} }
} }
@ -25,7 +25,8 @@
border-radius: 3px; border-radius: 3px;
font-size: 12px; font-size: 12px;
font-weight: $font-bold; font-weight: $font-semibold;
line-height: 1.2;
z-index: z(miniature); z-index: z(miniature);
} }
@ -34,6 +35,7 @@
padding: 0 5px; padding: 0 5px;
left: 5px; left: 5px;
top: 5px; top: 5px;
font-weight: $font-bold;
&.warning { background-color: orange; } &.warning { background-color: orange; }
&.danger { background-color: red; } &.danger { background-color: red; }
@ -41,7 +43,7 @@
.video-thumbnail-duration-overlay { .video-thumbnail-duration-overlay {
position: absolute; position: absolute;
padding: 0 5px; padding: 0 3px;
right: 5px; right: 5px;
bottom: 5px; bottom: 5px;
} }

4
client/src/app/videos/+video-edit/shared/video-edit.component.scss
View File

@ -17,7 +17,7 @@ label {
} }
.title-page a { .title-page a {
color: var(--mainForegroundColor); color: pvar(--mainForegroundColor);
&:hover { &:hover {
text-decoration: none; text-decoration: none;
@ -122,7 +122,7 @@ my-peertube-checkbox {
display: inline-block; display: inline-block;
margin-right: 25px; margin-right: 25px;
color: var(--greyForegroundColor); color: pvar(--greyForegroundColor);
font-size: 15px; font-size: 15px;
} }

2
client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.scss
View File

@ -3,7 +3,7 @@
.first-step-block { .first-step-block {
.torrent-or-magnet { .torrent-or-magnet {
@include divider($color: var(--inputPlaceholderColor), $background: var(--submenuColor)); @include divider($color: pvar(--inputPlaceholderColor), $background: pvar(--submenuColor));
&[data-content] { &[data-content] {
margin: 1.5rem 0; margin: 1.5rem 0;

10
client/src/app/videos/+video-edit/video-add.component.scss
View File

@ -33,10 +33,10 @@ $nav-link-height: 40px;
&.active { &.active {
border: $border-width $border-type $border-color; border: $border-width $border-type $border-color;
border-bottom: none; border-bottom: none;
background-color: var(--submenuColor) !important; background-color: pvar(--submenuColor) !important;
span { span {
border-bottom: 2px solid var(--mainColor); border-bottom: 2px solid pvar(--mainColor);
font-weight: $font-bold; font-weight: $font-bold;
} }
} }
@ -47,7 +47,7 @@ $nav-link-height: 40px;
border: $border-width $border-type $border-color; border: $border-width $border-type $border-color;
border-top: transparent; border-top: transparent;
background-color: var(--submenuColor); background-color: pvar(--submenuColor);
border-bottom-left-radius: 3px; border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px; border-bottom-right-radius: 3px;
width: 100%; width: 100%;
@ -58,7 +58,7 @@ $nav-link-height: 40px;
align-items: center; align-items: center;
&.dragover { &.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 */ /* Hide active tab style to not have a moving tab effect */
a.nav-link.active { a.nav-link.active {
border: none; border: none;
background-color: var(--mainBackgroundColor) !important; background-color: pvar(--mainBackgroundColor) !important;
} }
} }
} }

12
client/src/app/videos/+video-watch/comment/video-comment.component.scss
View File

@ -70,7 +70,7 @@
a { a {
@include disable-default-a-behaviour; @include disable-default-a-behaviour;
color: var(--mainForegroundColor); color: pvar(--mainForegroundColor);
} }
.comment-account-fid { .comment-account-fid {
@ -80,7 +80,7 @@
.comment-date { .comment-date {
font-size: 90%; font-size: 90%;
color: var(--greyForegroundColor); color: pvar(--greyForegroundColor);
margin-left: 5px; margin-left: 5px;
text-decoration: none; text-decoration: none;
} }
@ -95,7 +95,7 @@
&:not(.linkified-url) { &:not(.linkified-url) {
@include disable-default-a-behaviour; @include disable-default-a-behaviour;
color: var(--mainForegroundColor); color: pvar(--mainForegroundColor);
font-weight: $font-semibold; font-weight: $font-semibold;
} }
@ -108,7 +108,7 @@
} }
&.comment-html-deleted { &.comment-html-deleted {
color: var(--greyForegroundColor); color: pvar(--greyForegroundColor);
margin-bottom: 1rem; margin-bottom: 1rem;
} }
} }
@ -120,12 +120,12 @@
::ng-deep .dropdown-toggle, ::ng-deep .dropdown-toggle,
.comment-action-reply, .comment-action-reply,
.comment-action-delete { .comment-action-delete {
color: var(--greyForegroundColor); color: pvar(--greyForegroundColor);
cursor: pointer; cursor: pointer;
margin-right: 10px; margin-right: 10px;
&:hover { &:hover {
color: var(--mainForegroundColor); color: pvar(--mainForegroundColor);
} }
} }

4
client/src/app/videos/+video-watch/video-watch-playlist.component.scss
View File

@ -7,7 +7,7 @@
min-width: 200px; min-width: 200px;
max-width: 470px; max-width: 470px;
height: 66vh; height: 66vh;
background-color: var(--mainBackgroundColor); background-color: pvar(--mainBackgroundColor);
overflow-y: auto; overflow-y: auto;
border-bottom: 1px solid $separator-border-color; border-bottom: 1px solid $separator-border-color;
@ -22,7 +22,7 @@
} }
.playlist-by-index { .playlist-by-index {
color: var(--greyForegroundColor); color: pvar(--greyForegroundColor);
display: flex; display: flex;
.playlist-by { .playlist-by {

32
client/src/app/videos/+video-watch/video-watch.component.scss
View File

@ -166,7 +166,7 @@ $video-info-margin-left: 44px;
a { a {
@include disable-default-a-behaviour; @include disable-default-a-behaviour;
color: var(--mainForegroundColor); color: pvar(--mainForegroundColor);
&:hover { &:hover {
opacity: 0.8; opacity: 0.8;
@ -225,7 +225,7 @@ $video-info-margin-left: 44px;
::ng-deep.action-button { ::ng-deep.action-button {
@include peertube-button; @include peertube-button;
@include button-with-icon(21px, 0, -1px); @include button-with-icon(21px, 0, -1px);
@include apply-svg-color(var(--actionButtonColor)); @include apply-svg-color(pvar(--actionButtonColor));
font-size: 100%; font-size: 100%;
font-weight: $font-semibold; font-weight: $font-semibold;
@ -233,7 +233,7 @@ $video-info-margin-left: 44px;
padding: 0 10px 0 10px; padding: 0 10px 0 10px;
white-space: nowrap; white-space: nowrap;
background-color: transparent !important; background-color: transparent !important;
color: var(--actionButtonColor); color: pvar(--actionButtonColor);
text-transform: uppercase; text-transform: uppercase;
&::after { &::after {
@ -255,36 +255,36 @@ $video-info-margin-left: 44px;
&.action-button-like.activated { &.action-button-like.activated {
.count { .count {
color: var(--activatedActionButtonColor); color: pvar(--activatedActionButtonColor);
} }
my-global-icon { my-global-icon {
@include apply-svg-color(var(--activatedActionButtonColor)); @include apply-svg-color(pvar(--activatedActionButtonColor));
} }
} }
&.action-button-dislike.activated { &.action-button-dislike.activated {
.count { .count {
color: var(--activatedActionButtonColor); color: pvar(--activatedActionButtonColor);
} }
my-global-icon { my-global-icon {
@include apply-svg-color(var(--activatedActionButtonColor)); @include apply-svg-color(pvar(--activatedActionButtonColor));
} }
} }
&.action-button-support { &.action-button-support {
color: var(--supportButtonColor); color: pvar(--supportButtonColor);
my-global-icon { my-global-icon {
@include apply-svg-color(var(--supportButtonColor)); @include apply-svg-color(pvar(--supportButtonColor));
} }
} }
&.action-button-support { &.action-button-support {
my-global-icon { my-global-icon {
::ng-deep path:first-child { ::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; background-color: #909090;
&.liked { &.liked {
background-color: var(--activatedActionButtonColor); background-color: pvar(--activatedActionButtonColor);
} }
} }
} }
@ -356,7 +356,7 @@ $video-info-margin-left: 44px;
.video-info-description-more { .video-info-description-more {
cursor: pointer; cursor: pointer;
font-weight: $font-semibold; font-weight: $font-semibold;
color: var(--greyForegroundColor); color: pvar(--greyForegroundColor);
font-size: 14px; font-size: 14px;
.glyphicon { .glyphicon {
@ -379,13 +379,13 @@ $video-info-margin-left: 44px;
min-width: 142px; min-width: 142px;
padding-right: 5px; padding-right: 5px;
display: inline-block; display: inline-block;
color: var(--greyForegroundColor); color: pvar(--greyForegroundColor);
font-weight: $font-bold; font-weight: $font-bold;
} }
a.video-attribute-value { a.video-attribute-value {
@include disable-default-a-behaviour; @include disable-default-a-behaviour;
color: var(--mainForegroundColor); color: pvar(--mainForegroundColor);
&:hover { &:hover {
opacity: 0.9; opacity: 0.9;
@ -480,7 +480,7 @@ my-video-comments {
a { a {
@include disable-default-a-behaviour; @include disable-default-a-behaviour;
color: var(--mainColor); color: pvar(--mainColor);
transition: color 0.3s; transition: color 0.3s;
&:hover { &:hover {
@ -503,7 +503,7 @@ my-video-comments {
} }
.privacy-concerns-okay { .privacy-concerns-okay {
background-color: var(--mainColor); background-color: pvar(--mainColor);
margin-left: 10px; margin-left: 10px;
} }
} }

6
client/src/app/videos/video-list/video-overview.component.html
View File

@ -12,7 +12,7 @@
<a routerLink="/search" [queryParams]="{ categoryOneOf: [ object.category.id ] }">{{ object.category.label }}</a> <a routerLink="/search" [queryParams]="{ categoryOneOf: [ object.category.id ] }">{{ object.category.label }}</a>
</div> </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> </my-video-miniature>
</div> </div>
@ -21,7 +21,7 @@
<a routerLink="/search" [queryParams]="{ tagsOneOf: [ object.tag ] }">#{{ object.tag }}</a> <a routerLink="/search" [queryParams]="{ tagsOneOf: [ object.tag ] }">#{{ object.tag }}</a>
</div> </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> </my-video-miniature>
</div> </div>
@ -34,7 +34,7 @@
</a> </a>
</div> </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> </my-video-miniature>
</div> </div>

24
client/src/sass/application.scss
View File

@ -47,21 +47,21 @@ body {
--actionButtonColor: #{$grey-foreground-color}; --actionButtonColor: #{$grey-foreground-color};
--supportButtonBackgroundColor: #{transparent}; --supportButtonBackgroundColor: #{transparent};
--supportButtonColor: #{var(--actionButtonColor)}; --supportButtonColor: #{pvar(--actionButtonColor)};
--supportButtonHeartColor: #{$support-button-heart}; --supportButtonHeartColor: #{$support-button-heart};
--activatedActionButtonColor: #{$activated-action-button-color}; --activatedActionButtonColor: #{$activated-action-button-color};
font-family: $main-fonts; font-family: $main-fonts;
font-weight: $font-regular; font-weight: $font-regular;
color: var(--mainForegroundColor); color: pvar(--mainForegroundColor);
background-color: var(--mainBackgroundColor); background-color: pvar(--mainBackgroundColor);
font-size: 14px; font-size: 14px;
} }
::selection { ::selection {
color: var(--mainBackgroundColor); color: pvar(--mainBackgroundColor);
background-color: var(--mainHoverColor); background-color: pvar(--mainHoverColor);
} }
#incompatible-browser { #incompatible-browser {
@ -78,12 +78,12 @@ strong {
input.readonly { input.readonly {
/* Force blank on readonly inputs */ /* Force blank on readonly inputs */
background-color: var(--inputBackgroundColor) !important; background-color: pvar(--inputBackgroundColor) !important;
} }
input, textarea { input, textarea {
outline: none; outline: none;
color: var(--mainForegroundColor); color: pvar(--mainForegroundColor);
} }
label { label {
@ -128,7 +128,7 @@ label {
} }
.sub-menu { .sub-menu {
background-color: var(--submenuColor); background-color: pvar(--submenuColor);
width: 100%; width: 100%;
height: 81px; height: 81px;
margin-bottom: $sub-menu-margin-bottom; margin-bottom: $sub-menu-margin-bottom;
@ -166,7 +166,7 @@ label {
} }
.title-page { .title-page {
color: var(--mainForegroundColor); color: pvar(--mainForegroundColor);
font-size: 16px; font-size: 16px;
display: inline-block; display: inline-block;
margin-right: 55px; margin-right: 55px;
@ -180,7 +180,7 @@ label {
&.active { &.active {
font-weight: $font-bold; font-weight: $font-bold;
border-bottom: 2px solid var(--mainColor); border-bottom: 2px solid pvar(--mainColor);
} }
&.title-page-single { &.title-page-single {
@ -188,7 +188,7 @@ label {
} }
&:hover, &:active, &:focus { &:hover, &:active, &:focus {
color: var(--mainForegroundColor); color: pvar(--mainForegroundColor);
} }
@media screen and (max-width: $mobile-view) { @media screen and (max-width: $mobile-view) {
@ -220,7 +220,7 @@ label {
@include disable-default-a-behaviour; @include disable-default-a-behaviour;
font-size: 16px; font-size: 16px;
color: var(--mainForegroundColor); color: pvar(--mainForegroundColor);
padding: 5px 15px; padding: 5px 15px;
border-radius: 0.25rem; border-radius: 0.25rem;

30
client/src/sass/bootstrap.scss vendored
View File

@ -51,8 +51,8 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
padding: 3px 15px; padding: 3px 15px;
&.active { &.active {
color: var(--mainBackgroundColor) !important; color: pvar(--mainBackgroundColor) !important;
background-color: var(--mainHoverColor); background-color: pvar(--mainHoverColor);
opacity: .9; opacity: .9;
} }
@ -94,7 +94,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
text-align: center; text-align: center;
.modal-content { .modal-content {
background-color: var(--mainBackgroundColor); background-color: pvar(--mainBackgroundColor);
} }
.modal-header { .modal-header {
@ -161,7 +161,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
a { a {
@include disable-default-a-behaviour; @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 { .nav-link {
@include disable-default-a-behaviour; @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 { &.active {
font-weight: $font-semibold; font-weight: $font-semibold;
background-color: var(--mainBackgroundColor) !important; background-color: pvar(--mainBackgroundColor) !important;
border: none; border: none;
border-bottom: 2px solid var(--mainColor); border-bottom: 2px solid pvar(--mainColor);
} }
&:hover { &:hover {
border-top-color: transparent; border-top-color: transparent;
@ -192,7 +192,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
} }
.card { .card {
background-color: var(--mainBackgroundColor); background-color: pvar(--mainBackgroundColor);
border-color: #dee2e6; border-color: #dee2e6;
} }
@ -240,27 +240,27 @@ ngb-tooltip-window {
} }
.btn-outline-tertiary { .btn-outline-tertiary {
color: var(--secondaryColor); color: pvar(--secondaryColor);
border-color: var(--secondaryColor); border-color: pvar(--secondaryColor);
&:focus-within, &:focus-within,
&:focus, &:focus,
&:hover { &:hover {
color: var(--mainBackgroundColor); color: pvar(--mainBackgroundColor);
background-color: var(--secondaryColor); background-color: pvar(--secondaryColor);
} }
} }
// input box-shadow on focus // input box-shadow on focus
.form-control { .form-control {
font-size: 15px; font-size: 15px;
color: var(--mainForegroundColor); color: pvar(--mainForegroundColor);
background-color: var(--inputBackgroundColor); background-color: pvar(--inputBackgroundColor);
outline: none; outline: none;
&:focus-within, &:focus-within,
&:focus { &:focus {
box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest); box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
&.input-error { &.input-error {
box-shadow: #{$focus-box-shadow-form} #{scale-color($red, $alpha: -75%)}; box-shadow: #{$focus-box-shadow-form} #{scale-color($red, $alpha: -75%)};

55
client/src/sass/include/_miniature.scss
View File

@ -6,7 +6,7 @@
transition: color 0.2s; transition: color 0.2s;
font-weight: $font-semibold; font-weight: $font-semibold;
color: var(--mainForegroundColor); color: pvar(--mainForegroundColor);
margin-top: 10px; margin-top: 10px;
margin-bottom: 5px; margin-bottom: 5px;
@ -80,7 +80,7 @@ $play-overlay-width: 18px;
} }
&.focus-visible { &.focus-visible {
box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest); box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
outline: none; outline: none;
} }
@ -168,7 +168,7 @@ $play-overlay-width: 18px;
outline: none; outline: none;
} }
color: var(--mainForegroundColor); color: pvar(--mainForegroundColor);
} }
} }
@ -187,7 +187,7 @@ $play-overlay-width: 18px;
} }
.followers { .followers {
color: var(--greyForegroundColor); color: pvar(--greyForegroundColor);
font-weight: normal; font-weight: normal;
font-size: 14px; font-size: 14px;
margin-left: 10px; margin-left: 10px;
@ -203,7 +203,7 @@ $play-overlay-width: 18px;
display: inline-block; display: inline-block;
font-size: 16px; font-size: 16px;
text-transform: uppercase; text-transform: uppercase;
color: var(--greyForegroundColor); color: pvar(--greyForegroundColor);
margin-bottom: 10px; margin-bottom: 10px;
font-weight: $font-semibold; font-weight: $font-semibold;
text-decoration: none; text-decoration: none;
@ -221,32 +221,37 @@ $play-overlay-width: 18px;
} }
} }
@mixin adapt-margin-content-width { @mixin adapt-margin-content-width($fluid: false) {
width: $video-miniature-width * 6; @if $fluid {
margin: auto !important; margin-left: 3vw !important;
margin-right: 3vw !important;
} @else {
width: $video-miniature-width * 6;
margin: auto !important;
@media screen and (max-width: 1800px) { @media screen and (max-width: 1800px) {
width: $video-miniature-width * 5; width: $video-miniature-width * 5;
} }
@media screen and (max-width: 1800px - $video-miniature-width) { @media screen and (max-width: 1800px - $video-miniature-width) {
width: $video-miniature-width * 4; width: $video-miniature-width * 4;
} }
@media screen and (max-width: 1800px - (2* $video-miniature-width)) { @media screen and (max-width: 1800px - (2* $video-miniature-width)) {
width: $video-miniature-width * 3; width: $video-miniature-width * 3;
} }
@media screen and (max-width: 1800px - (3* $video-miniature-width)) { @media screen and (max-width: 1800px - (3* $video-miniature-width)) {
width: $video-miniature-width * 2; width: $video-miniature-width * 2;
} }
@media screen and (max-width: $mobile-view) { @media screen and (max-width: $mobile-view) {
width: auto; width: auto;
margin: 0 !important; margin: 0 !important;
.videos { .videos {
@include video-miniature-small-screen; @include video-miniature-small-screen;
}
} }
} }
} }

86
client/src/sass/include/_mixins.scss
View File

@ -90,8 +90,8 @@
display: inline-block; display: inline-block;
height: $button-height; height: $button-height;
width: $width; width: $width;
color: var(--inputForegroundColor); color: pvar(--inputForegroundColor);
background-color: var(--inputBackgroundColor); background-color: pvar(--inputBackgroundColor);
border: 1px solid #C6C6C6; border: 1px solid #C6C6C6;
border-radius: 3px; border-radius: 3px;
padding-left: 15px; padding-left: 15px;
@ -99,7 +99,7 @@
font-size: 15px; font-size: 15px;
&::placeholder { &::placeholder {
color: var(--inputPlaceholderColor); color: pvar(--inputPlaceholderColor);
} }
@media screen and (max-width: $width) { @media screen and (max-width: $width) {
@ -122,24 +122,24 @@
@mixin peertube-textarea ($width, $height) { @mixin peertube-textarea ($width, $height) {
@include peertube-input-text($width); @include peertube-input-text($width);
color: var(--textareaForegroundColor); color: pvar(--textareaForegroundColor);
background-color: var(--textareaBackgroundColor); background-color: pvar(--textareaBackgroundColor);
height: $height; height: $height;
padding: 5px 15px; padding: 5px 15px;
font-size: 15px; font-size: 15px;
} }
@mixin orange-button { @mixin orange-button {
@include button-focus(var(--mainColorLightest)); @include button-focus(pvar(--mainColorLightest));
&, &:active, &:focus { &, &:active, &:focus {
color: #fff; color: #fff;
background-color: var(--mainColor); background-color: pvar(--mainColor);
} }
&:hover { &:hover {
color: #fff; color: #fff;
background-color: var(--mainHoverColor); background-color: pvar(--mainHoverColor);
} }
&[disabled], &.disabled { &[disabled], &.disabled {
@ -156,7 +156,7 @@
@mixin tertiary-button { @mixin tertiary-button {
@include button-focus($grey-button-outline-color); @include button-focus($grey-button-outline-color);
color: var(--greyForegroundColor); color: pvar(--greyForegroundColor);
background-color: transparent; background-color: transparent;
&[disabled], &.disabled { &[disabled], &.disabled {
@ -173,11 +173,11 @@
&, &:active, &:focus { &, &:active, &:focus {
background-color: $grey-background-color; background-color: $grey-background-color;
color: var(--greyForegroundColor); color: pvar(--greyForegroundColor);
} }
&:hover, &:active, &:focus, &[disabled], &.disabled { &:hover, &:active, &:focus, &[disabled], &.disabled {
color: var(--greyForegroundColor); color: pvar(--greyForegroundColor);
background-color: $grey-background-hover-color; background-color: $grey-background-hover-color;
} }
@ -186,7 +186,7 @@
} }
my-global-icon { my-global-icon {
@include apply-svg-color(var(--greyForegroundColor)) @include apply-svg-color(pvar(--greyForegroundColor))
} }
} }
@ -283,8 +283,8 @@
margin: 0; margin: 0;
width: $width; width: $width;
border-radius: 3px; border-radius: 3px;
color: var(--inputForegroundColor); color: pvar(--inputForegroundColor);
background: var(--inputBackgroundColor); background: pvar(--inputBackgroundColor);
position: relative; position: relative;
font-size: 15px; font-size: 15px;
@ -315,7 +315,7 @@
cursor: pointer; cursor: pointer;
height: $button-height; height: $button-height;
text-overflow: ellipsis; text-overflow: ellipsis;
color: var(--mainForegroundColor); color: pvar(--mainForegroundColor);
&:focus { &:focus {
outline: none; outline: none;
@ -375,7 +375,7 @@
position: absolute; position: absolute;
&:focus + span { &:focus + span {
box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest); box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
} }
& + span { & + span {
@ -404,7 +404,7 @@
&:checked + span { &:checked + span {
border-color: transparent; border-color: transparent;
background: var(--mainColor); background: pvar(--mainColor);
animation: jelly 0.6s ease; animation: jelly 0.6s ease;
&:after { &:after {
@ -464,14 +464,14 @@
@mixin in-content-small-title { @mixin in-content-small-title {
text-transform: uppercase; text-transform: uppercase;
color: var(--mainColor); color: pvar(--mainColor);
font-weight: $font-bold; font-weight: $font-bold;
font-size: 13px; font-size: 13px;
} }
@mixin settings-big-title { @mixin settings-big-title {
text-transform: uppercase; text-transform: uppercase;
color: var(--mainColor); color: pvar(--mainColor);
font-weight: $font-bold; font-weight: $font-bold;
font-size: 110%; font-size: 110%;
margin-bottom: 10px; margin-bottom: 10px;
@ -482,7 +482,7 @@
font-size: 13px; font-size: 13px;
margin-top: 4px; margin-top: 4px;
color: var(--mainForegroundColor); color: pvar(--mainForegroundColor);
span:hover { span:hover {
opacity: 0.8; opacity: 0.8;
@ -612,8 +612,8 @@
border-radius: 0.25rem; border-radius: 0.25rem;
.progress-bar { .progress-bar {
color: var(--mainBackgroundColor); color: pvar(--mainBackgroundColor);
background-color: var(--mainColor); background-color: pvar(--mainColor);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
@ -622,7 +622,7 @@
transition: width 0.6s ease; transition: width 0.6s ease;
&.secondary { &.secondary {
background-color: var(--secondaryColor); background-color: pvar(--secondaryColor);
} }
} }
} }
@ -633,14 +633,14 @@
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
margin-bottom: 1rem; margin-bottom: 1rem;
list-style: none; list-style: none;
background-color: var(--submenuColor); background-color: pvar(--submenuColor);
border-radius: 0.25rem; border-radius: 0.25rem;
.breadcrumb-item { .breadcrumb-item {
display: flex; display: flex;
a { a {
color: var(--mainColor); color: pvar(--mainColor);
} }
& + .breadcrumb-item { & + .breadcrumb-item {
@ -688,7 +688,7 @@
& > a, & > a,
& > div { & > div {
padding: 20px; padding: 20px;
background: var(--submenuColor); background: pvar(--submenuColor);
border-radius: 4px; border-radius: 4px;
box-sizing: border-box; box-sizing: border-box;
height: 100%; height: 100%;
@ -699,14 +699,14 @@
text-align: center; text-align: center;
font-size: 130%; font-size: 130%;
line-height: 21px; line-height: 21px;
color: var(--mainForegroundColor); color: pvar(--mainForegroundColor);
line-height: 30px; line-height: 30px;
margin-bottom: 20px; margin-bottom: 20px;
} }
.dashboard-label { .dashboard-label {
font-size: 90%; font-size: 90%;
color: var(--inputPlaceholderColor); color: pvar(--inputPlaceholderColor);
text-align: center; text-align: center;
} }
} }
@ -726,7 +726,7 @@
height: max-content; height: max-content;
&:focus-within { &: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; height: 30px !important;
font-size: 12px !important; font-size: 12px !important;
background-color: var(--mainBackgroundColor) !important; background-color: pvar(--mainBackgroundColor) !important;
color: var(--mainForegroundColor) !important; color: pvar(--mainForegroundColor) !important;
} }
} }
@ -769,7 +769,7 @@
vertical-align: middle !important; vertical-align: middle !important;
path { 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%; width: 95%;
border-top: .05rem solid $color; border-top: .05rem solid $color;
height: .05rem; height: .05rem;
@ -810,7 +810,7 @@
border-radius: 5rem; border-radius: 5rem;
display: inline-flex; display: inline-flex;
font-size: 90%; font-size: 90%;
color: var(--mainForegroundColor); color: pvar(--mainForegroundColor);
height: $avatar-height; height: $avatar-height;
line-height: 1rem; line-height: 1rem;
margin: .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;
}
}

2
client/src/sass/include/_variables.scss
View File

@ -116,7 +116,7 @@ $variables: (
--embedBigPlayBackgroundColor: var(--embedBigPlayBackgroundColor) --embedBigPlayBackgroundColor: var(--embedBigPlayBackgroundColor)
); );
@function var($variable) { @function pvar($variable) {
@return map-get($variables, $variable); @return map-get($variables, $variable);
} }

4
client/src/sass/loading-bar.scss
View File

@ -10,7 +10,7 @@
-moz-transition: 350ms linear all; -moz-transition: 350ms linear all;
-o-transition: 350ms linear all; -o-transition: 350ms linear all;
transition: 350ms linear all; transition: 350ms linear all;
color: var(--mainColor); color: pvar(--mainColor);
} }
#loading-bar .bar { #loading-bar .bar {
@ -19,7 +19,7 @@
-o-transition: width 350ms; -o-transition: width 350ms;
transition: width 350ms; transition: width 350ms;
background: var(--mainColor); background: pvar(--mainColor);
position: fixed; position: fixed;
z-index: z(loadbar); z-index: z(loadbar);
top: 0; top: 0;

2
client/src/sass/player/context-menu.scss
View File

@ -14,7 +14,7 @@ $context-menu-width: 350px;
.vjs-menu-content { .vjs-menu-content {
opacity: $primary-foreground-opacity; opacity: $primary-foreground-opacity;
color: var(--embedForegroundCsolor); color: pvar(--embedForegroundCsolor);
font-size: $font-size !important; font-size: $font-size !important;
font-weight: $font-semibold; font-weight: $font-semibold;
} }

10
client/src/sass/player/peertube-skin.scss
View File

@ -17,7 +17,7 @@ body {
.video-js.vjs-peertube-skin { .video-js.vjs-peertube-skin {
font-size: $font-size; font-size: $font-size;
color: var(--embedForegroundColor); color: pvar(--embedForegroundColor);
.vjs-dock-text { .vjs-dock-text {
padding-right: 10px; padding-right: 10px;
@ -132,7 +132,7 @@ body {
.vjs-control-bar, .vjs-control-bar,
.vjs-big-play-button, .vjs-big-play-button,
.vjs-settings-dialog { .vjs-settings-dialog {
background-color: var(--embedBigPlayBackgroundColor); background-color: pvar(--embedBigPlayBackgroundColor);
} }
.vjs-poster { .vjs-poster {
@ -157,7 +157,7 @@ body {
.vjs-theater-control, .vjs-theater-control,
.vjs-settings .vjs-settings
{ {
color: var(--embedForegroundColor) !important; color: pvar(--embedForegroundColor) !important;
opacity: $primary-foreground-opacity; opacity: $primary-foreground-opacity;
transition: opacity .1s; transition: opacity .1s;
@ -170,7 +170,7 @@ body {
.vjs-current-time, .vjs-current-time,
.vjs-duration, .vjs-duration,
.vjs-peertube { .vjs-peertube {
color: var(--embedForegroundColor); color: pvar(--embedForegroundColor);
opacity: $primary-foreground-opacity; opacity: $primary-foreground-opacity;
} }
@ -190,7 +190,7 @@ body {
transition: none; transition: none;
.vjs-play-progress { .vjs-play-progress {
background: var(--embedForegroundColor); background: pvar(--embedForegroundColor);
// Not display the circle if the progress is not hovered // Not display the circle if the progress is not hovered
&::before { &::before {

2
client/src/sass/player/settings-menu.scss
View File

@ -38,7 +38,7 @@ $setting-transition-easing: ease-out;
position: absolute; position: absolute;
right: .5em; right: .5em;
bottom: 3.5em; bottom: 3.5em;
color: var(--embedForegroundColor); color: pvar(--embedForegroundColor);
opacity: $primary-foreground-opacity; opacity: $primary-foreground-opacity;
margin: 0 auto; margin: 0 auto;
font-size: $font-size !important; font-size: $font-size !important;

70
client/src/sass/primeng-custom.scss
View File

@ -7,7 +7,7 @@
@mixin glyphicon-light { @mixin glyphicon-light {
font-family: 'Glyphicons Halflings'; font-family: 'Glyphicons Halflings';
text-decoration: none !important; text-decoration: none !important;
color: var(--mainForegroundColor) !important; color: pvar(--mainForegroundColor) !important;
font-display: swap; font-display: swap;
} }
@ -19,14 +19,14 @@ my-button {
// focus box-shadow for primeng // focus box-shadow for primeng
.ui-inputtext:enabled:focus:not(.ui-state-error) { .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 // data table customizations
p-table { p-table {
.ui-table-caption { .ui-table-caption {
border: none !important; border: none !important;
background-color: var(--mainBackgroundColor) !important; background-color: pvar(--mainBackgroundColor) !important;
.caption { .caption {
height: 40px; height: 40px;
@ -41,14 +41,14 @@ p-table {
} }
th { th {
background-color: var(--mainBackgroundColor) !important; background-color: pvar(--mainBackgroundColor) !important;
outline: 0; outline: 0;
} }
td, th { td, th {
font-family: $main-fonts; font-family: $main-fonts;
font-size: 15px !important; font-size: 15px !important;
color: var(--mainForegroundColor) !important; color: pvar(--mainForegroundColor) !important;
} }
td { td {
@ -63,14 +63,14 @@ p-table {
tr { tr {
outline: 0; outline: 0;
background-color: var(--mainBackgroundColor) !important; background-color: pvar(--mainBackgroundColor) !important;
height: 46px; height: 46px;
&.ui-state-highlight { &.ui-state-highlight {
background-color: var(--submenuColor) !important; background-color: pvar(--submenuColor) !important;
td, td > a { td, td > a {
color: var(--mainForegroundColor) !important; color: pvar(--mainForegroundColor) !important;
} }
} }
} }
@ -78,7 +78,7 @@ p-table {
.ui-table-tbody { .ui-table-tbody {
tr { tr {
&:hover { &:hover {
background-color: var(--submenuColor) !important; background-color: pvar(--submenuColor) !important;
.action-cell { .action-cell {
.dropdown-root, .dropdown-root,
@ -113,16 +113,16 @@ p-table {
th { th {
border: none !important; border: none !important;
border-bottom: 1px solid !important; border-bottom: 1px solid !important;
border-color: var(--submenuColor) !important; border-color: pvar(--submenuColor) !important;
text-align: left !important; text-align: left !important;
padding: 5px 0 5px 15px !important; padding: 5px 0 5px 15px !important;
font-weight: $font-semibold !important; font-weight: $font-semibold !important;
color: var(--mainForegroundColor) !important; color: pvar(--mainForegroundColor) !important;
&.ui-sortable-column:hover { &.ui-sortable-column:hover {
background-color: var(--submenuColor) !important; background-color: pvar(--submenuColor) !important;
border: 1px solid !important; border: 1px solid !important;
border-color: var(--submenuColor) !important; border-color: pvar(--submenuColor) !important;
border-width: 0 1px !important; border-width: 0 1px !important;
&:first-child { &:first-child {
@ -131,7 +131,7 @@ p-table {
} }
&.ui-state-highlight { &.ui-state-highlight {
background-color: var(--submenuColor) !important; background-color: pvar(--submenuColor) !important;
.pi { .pi {
@extend .glyphicon; @extend .glyphicon;
@ -143,13 +143,13 @@ p-table {
&.pi-sort-amount-up-alt { &.pi-sort-amount-up-alt {
@extend .glyphicon-triangle-top; @extend .glyphicon-triangle-top;
color: var(--mainForegroundColor) !important; color: pvar(--mainForegroundColor) !important;
} }
&.pi-sort-amount-down { &.pi-sort-amount-down {
@extend .glyphicon-triangle-bottom; @extend .glyphicon-triangle-bottom;
color: var(--mainForegroundColor) !important; color: pvar(--mainForegroundColor) !important;
} }
} }
} }
@ -184,11 +184,11 @@ p-table {
p-paginator { p-paginator {
.ui-paginator-bottom { .ui-paginator-bottom {
background-color: var(--mainBackgroundColor) !important; background-color: pvar(--mainBackgroundColor) !important;
position: relative; position: relative;
border: none; border: none;
border-top: 1px solid !important; border-top: 1px solid !important;
border-color: var(--submenuColor) !important; border-color: pvar(--submenuColor) !important;
height: 40px; height: 40px;
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -200,18 +200,18 @@ p-table {
left: 0; left: 0;
&.ui-state-focus { &.ui-state-focus {
box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest); box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
} }
.ui-dropdown-label { .ui-dropdown-label {
color: var(--inputPlaceholderColor); color: pvar(--inputPlaceholderColor);
} }
} }
.ui-paginator-current { .ui-paginator-current {
position: absolute; position: absolute;
right: 0; right: 0;
color: var(--inputPlaceholderColor); color: pvar(--inputPlaceholderColor);
} }
.ui-paginator-first, .ui-paginator-first,
@ -227,7 +227,7 @@ p-table {
&.focus-within, &.focus-within,
&:focus { &:focus {
box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest); box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
} }
&.ui-state-disabled:hover { &.ui-state-disabled:hover {
@ -261,12 +261,12 @@ p-table {
.ui-paginator-page { .ui-paginator-page {
&.focus-within, &.focus-within,
&:focus { &:focus {
box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest) !important; box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest) !important;
} }
} }
a { a {
color: var(--mainForegroundColor) !important; color: pvar(--mainForegroundColor) !important;
font-weight: $font-semibold !important; font-weight: $font-semibold !important;
margin: 0 5px !important; margin: 0 5px !important;
outline: 0 !important; outline: 0 !important;
@ -278,7 +278,7 @@ p-table {
&.ui-state-active { &.ui-state-active {
&, &:hover, &:active, &:focus { &, &:hover, &:active, &:focus {
color: #fff !important; color: #fff !important;
background-color: var(--mainColor) !important; background-color: pvar(--mainColor) !important;
} }
} }
} }
@ -328,7 +328,7 @@ p-multiselect {
&:focus, &:focus,
&.ui-state-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 { .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) { .ui-inputtext:enabled:focus:not(.ui-state-error) {
border-color: var(--mainColorLighter) !important; border-color: pvar(--mainColorLighter) !important;
box-shadow: none; box-shadow: none;
} }
} }
@ -445,8 +445,8 @@ p-tablecheckbox:hover div .ui-chkbox-box {
.ui-chkbox-box { .ui-chkbox-box {
&.ui-state-active { &.ui-state-active {
border-color: var(--mainColor) !important; border-color: pvar(--mainColor) !important;
background-color: var(--mainColor) !important; background-color: pvar(--mainColor) !important;
} }
.ui-chkbox-icon { .ui-chkbox-icon {
@ -462,8 +462,8 @@ p-tablecheckbox:hover div .ui-chkbox-box {
height: 12px; height: 12px;
opacity: 0; opacity: 0;
transform: rotate(45deg) scale(0); transform: rotate(45deg) scale(0);
border-right: 2px solid var(--mainBackgroundColor); border-right: 2px solid pvar(--mainBackgroundColor);
border-bottom: 2px solid var(--mainBackgroundColor); border-bottom: 2px solid pvar(--mainBackgroundColor);
} }
&.pi-check:after { &.pi-check:after {
@ -478,7 +478,7 @@ p-inputswitch {
height: 26px; height: 26px;
.ui-inputswitch-checked .ui-inputswitch-slider { .ui-inputswitch-checked .ui-inputswitch-slider {
background-color: var(--mainColor) !important; background-color: pvar(--mainColor) !important;
} }
&.small { &.small {
@ -520,8 +520,8 @@ p-toast {
.ui-toast-message { .ui-toast-message {
font-family: $main-fonts; font-family: $main-fonts;
background-color: var(--mainBackgroundColor) !important; background-color: pvar(--mainBackgroundColor) !important;
color: var(--mainForegroundColor) !important; color: pvar(--mainForegroundColor) !important;
border-radius: 5px; border-radius: 5px;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid #EBEEF5 !important; border: 1px solid #EBEEF5 !important;