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

Reorganize application.scss

This commit is contained in:
Chocobozzz 2022-06-13 11:42:23 +02:00
parent dc1296a9ab
commit f72c78b2f6
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
9 changed files with 220 additions and 209 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/app/+videos/+video-watch/shared/action-buttons/action-buttons.component.html
View File

@ -1,5 +1,5 @@
<div class="video-actions-rates">
<div class="video-actions full-width justify-content-end">
<div class="video-actions justify-content-end">
<my-video-rate
[video]="video" [isUserLoggedIn]="isUserLoggedIn"
(rateUpdated)="onRateUpdated($event)" (userRatingLoaded)="onRateUpdated($event)"

3
client/src/app/+videos/+video-watch/shared/action-buttons/action-buttons.component.scss
View File

@ -5,6 +5,9 @@
height: 40px; // Align with the title
display: flex;
align-items: center;
width: 100%;
margin: 0 auto;
max-width: initial;
.action-button:not(:first-child),
.action-dropdown,

1
client/src/app/shared/shared-forms/input-text.component.ts
View File

@ -2,7 +2,6 @@ import { Component, forwardRef, Input } from '@angular/core'
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
import { Notifier } from '@app/core'
@Component({
selector: 'my-input-text',
templateUrl: './input-text.component.html',

2
client/src/assets/images/feather/external-link.svg
View File

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-external-link"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-external-link"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6M15 3h6v6M10 14 21 3"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 388 B

After

Width:  |  Height:  |  Size: 293 B

2
client/src/assets/images/feather/skip-back.svg
View File

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-skip-back"><polygon points="19 20 9 12 19 4 19 20"/><line x1="5" y1="19" x2="5" y2="5"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-skip-back"><path d="M19 20 9 12l10-8v16zM5 19V5"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 298 B

After

Width:  |  Height:  |  Size: 240 B

2
client/src/assets/images/feather/skip-forward.svg
View File

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-skip-forward"><polygon points="5 4 15 12 5 20 5 4"></polygon><line x1="19" y1="5" x2="19" y2="19"></line></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-skip-forward"><path d="m5 4 10 8-10 8V4zM19 5v14"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 315 B

After

Width:  |  Height:  |  Size: 241 B

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

@ -6,7 +6,7 @@
@use '_fonts';
@use './classes';
@use './class-helpers';
@use './custom-markup';
@use './ng-select';
@ -132,31 +132,6 @@ code {
vertical-align: middle;
}
.form-group {
margin-bottom: 1rem;
}
.form-error,
.form-warning {
display: block;
margin-top: 5px;
}
.form-error {
color: $red;
}
.input-error,
my-input-text ::ng-deep input {
border-color: $red !important;
}
.full-width {
width: 100%;
margin: 0 auto;
max-width: initial;
}
.main-col {
@include margin-left($menu-width);
@ -210,62 +185,6 @@ my-input-text ::ng-deep input {
}
}
.title-page {
@include disable-default-a-behaviour;
@include margin-right(55px);
opacity: 0.6;
color: pvar(--mainForegroundColor);
font-size: 16px;
display: inline-block;
font-weight: $font-semibold;
border-bottom: 2px solid transparent;
&.title-page-single {
margin-top: 30px;
margin-bottom: 25px;
}
&.active {
border-bottom-color: pvar(--mainColor);
}
&.title-page-single {
font-size: 125%;
}
&:hover,
&:active,
&:focus {
color: pvar(--mainForegroundColor);
}
&.active,
&:hover,
&:active,
&:focus,
&.title-page-single {
opacity: 1;
outline: 0 hidden !important;
}
@media screen and (max-width: $mobile-view) {
@include margin-left(15px);
}
}
.title-page-about,
.title-page-settings {
white-space: nowrap;
font-size: 115%;
}
.admin-sub-header {
display: flex;
align-items: center;
margin-bottom: 30px;
}
// In tables, don't have a hover different background
table {
my-edit-button,
@ -283,18 +202,6 @@ table {
}
}
.no-results {
height: 40vh;
max-height: 500px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: $font-semibold;
}
.dropdown-item {
@include dropdown-with-icon-item;
@ -311,73 +218,6 @@ my-global-icon[iconName=external-link] {
color: pvar(--inputPlaceholderColor);
}
.chevron-down {
@include chevron-down(0.55rem, 0.15rem);
margin: 0 8px;
}
.chevron-up {
@include chevron-up(0.55rem, 0.15rem);
margin: 0 8px;
}
.chevron-right {
@include chevron-right(0.55rem, 0.15rem);
margin: 0 8px;
}
.chevron-left {
@include chevron-left(0.55rem, 0.15rem);
margin: 0 8px;
}
/* offsetTop for scrollToAnchor */
.anchor {
position: relative;
top: #{-($header-height + 20px)};
}
.offset-content { // if sub-menu fixed
.anchor {
top: #{-($header-height + $sub-menu-height + 20px)};
}
}
.form-group-description {
@extend .muted !optional;
font-size: 90%;
margin-top: 10px;
}
.callout {
padding: 1.25rem;
border: 1px solid #eee;
border-radius: .25rem;
position: relative;
> label {
position: relative;
top: -5px;
left: -10px;
color: #6c757d !important;
}
&:not(.callout-light) {
border-left-width: .25rem;
}
&.callout-info {
border-color: pvar(--mainColorLightest);
border-left-color: pvar(--mainColor);
}
}
@media screen and (max-width: #{breakpoint(xxl)}) {
.main-col {
--horizontalMarginContent: #{math.div($not-expanded-horizontal-margins, 2)};
@ -434,10 +274,6 @@ my-global-icon[iconName=external-link] {
padding-top: $sub-menu-height + $sub-menu-margin-bottom-small-view;
}
.admin-sub-header {
flex-direction: column;
}
my-markdown-textarea {
.root {
max-width: 100% !important;

212
client/src/sass/class-helpers.scss Normal file
View File

@ -0,0 +1,212 @@
@use '_variables' as *;
@use '_mixins' as *;
@use '_badges' as *;
@use '_icons' as *;
.peertube-button {
@include peertube-button;
}
.peertube-button-link {
@include peertube-button-link;
}
.orange-button {
@include orange-button;
}
.orange-button-inverted {
@include orange-button-inverted;
}
.grey-button {
@include grey-button;
}
.tertiary-button {
@include tertiary-button;
}
.peertube-radio-container {
@include peertube-radio-container;
}
// ---------------------------------------------------------------------------
.muted {
color: pvar(--greyForegroundColor) !important;
}
// ---------------------------------------------------------------------------
.pt-badge {
@include peertube-badge;
}
// ---------------------------------------------------------------------------
.form-group {
margin-bottom: 1rem;
}
.form-error,
.form-warning {
display: block;
margin-top: 5px;
}
.form-error {
color: $red;
}
.input-error {
border-color: $red !important;
}
.form-group-description {
@extend .muted !optional;
font-size: 90%;
margin-top: 10px;
}
// ---------------------------------------------------------------------------
.title-page {
@include disable-default-a-behaviour;
@include margin-right(55px);
opacity: 0.6;
color: pvar(--mainForegroundColor);
font-size: 16px;
display: inline-block;
font-weight: $font-semibold;
border-bottom: 2px solid transparent;
&.title-page-single {
margin-top: 30px;
margin-bottom: 25px;
}
&.active {
border-bottom-color: pvar(--mainColor);
}
&.title-page-single {
font-size: 125%;
}
&:hover,
&:active,
&:focus {
color: pvar(--mainForegroundColor);
}
&.active,
&:hover,
&:active,
&:focus,
&.title-page-single {
opacity: 1;
outline: 0 hidden !important;
}
@media screen and (max-width: $mobile-view) {
@include margin-left(15px);
}
}
.title-page-about,
.title-page-settings {
white-space: nowrap;
font-size: 115%;
}
.admin-sub-header {
display: flex;
align-items: center;
margin-bottom: 30px;
@media screen and (max-width: $small-view) {
flex-direction: column;
}
}
// ---------------------------------------------------------------------------
.no-results {
height: 40vh;
max-height: 500px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: $font-semibold;
}
// ---------------------------------------------------------------------------
.chevron-down {
@include chevron-down(0.55rem, 0.15rem);
margin: 0 8px;
}
.chevron-up {
@include chevron-up(0.55rem, 0.15rem);
margin: 0 8px;
}
.chevron-right {
@include chevron-right(0.55rem, 0.15rem);
margin: 0 8px;
}
.chevron-left {
@include chevron-left(0.55rem, 0.15rem);
margin: 0 8px;
}
// ---------------------------------------------------------------------------
.callout {
padding: 1.25rem;
border: 1px solid #eee;
border-radius: .25rem;
position: relative;
> label {
position: relative;
top: -5px;
left: -10px;
color: #6c757d !important;
}
&:not(.callout-light) {
border-left-width: .25rem;
}
&.callout-info {
border-color: pvar(--mainColorLightest);
border-left-color: pvar(--mainColor);
}
}
// ---------------------------------------------------------------------------
.anchor {
position: relative;
top: #{-($header-height + 20px)};
}
.offset-content { // if sub-menu fixed
.anchor {
top: #{-($header-height + $sub-menu-height + 20px)};
}
}

39
client/src/sass/classes.scss
View File

@ -1,39 +0,0 @@
@use '_variables' as *;
@use '_mixins' as *;
@use '_badges' as *;
.peertube-button {
@include peertube-button;
}
.peertube-button-link {
@include peertube-button-link;
}
.orange-button {
@include orange-button;
}
.orange-button-inverted {
@include orange-button-inverted;
}
.grey-button {
@include grey-button;
}
.tertiary-button {
@include tertiary-button;
}
.peertube-radio-container {
@include peertube-radio-container;
}
.muted {
color: pvar(--greyForegroundColor) !important;
}
.pt-badge {
@include peertube-badge;
}