Move to stylelint
This commit is contained in:
Chocobozzz
parent
7d026caf68
commit
931d343018
|
|
@ -1,30 +0,0 @@
|
|||
files:
|
||||
include:
|
||||
- "src/app/**/*.scss"
|
||||
- "src/assets/**/*.scss"
|
||||
- "src/sass/**/*.scss"
|
||||
- "src/standalone/**/*.scss"
|
||||
syntax:
|
||||
include:
|
||||
- scss
|
||||
- sass
|
||||
rules:
|
||||
property-sort-order: 0
|
||||
attribute-quotes: 0
|
||||
border-zero: 0
|
||||
no-color-keywords: 0
|
||||
no-color-literals: 0
|
||||
no-css-comments: 0
|
||||
no-important: 0
|
||||
no-trailing-zero: 1
|
||||
space-after-bang: 1
|
||||
space-before-bang: 1
|
||||
space-after-colon: 1
|
||||
space-before-colon: 1
|
||||
clean-import-paths: 0
|
||||
hex-length: 1
|
||||
hex-notation: 0
|
||||
nesting-depth:
|
||||
- 1
|
||||
- max-depth: 4
|
||||
indentation: 2
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
{
|
||||
"extends": "stylelint-config-sass-guidelines",
|
||||
"rules": {
|
||||
"scss/at-import-no-partial-leading-underscore": null,
|
||||
"color-hex-case": null,
|
||||
"color-hex-length": null,
|
||||
"order/properties-alphabetical-order": null,
|
||||
"selector-pseudo-element-no-unknown": [
|
||||
true,
|
||||
{
|
||||
"ignorePseudoElements": [ "ng-deep" ]
|
||||
}
|
||||
],
|
||||
"max-nesting-depth": [
|
||||
8,
|
||||
{
|
||||
"ignore": [ "blockless-at-rules", "pseudo-classes" ]
|
||||
}
|
||||
],
|
||||
"selector-max-compound-selectors": 9,
|
||||
"selector-no-qualifying-type": null,
|
||||
"scss/at-extend-no-missing-placeholder": null,
|
||||
"number-leading-zero": null,
|
||||
"rule-empty-line-before": null,
|
||||
"selector-max-id": null,
|
||||
"scss/at-function-pattern": null,
|
||||
"function-parentheses-space-inside": "never-single-line"
|
||||
}
|
||||
}
|
||||
|
|
@ -15,14 +15,14 @@
|
|||
"scripts": {
|
||||
"lint": "npm run lint-ts && npm run lint-scss",
|
||||
"lint-ts": "tslint --project ./tsconfig.app.json -c ./tslint.json 'src/app/**/*.ts' 'src/standalone/**/*.ts'",
|
||||
"lint-scss": "sass-lint -c .sass-lint.yml",
|
||||
"lint-scss": "stylelint 'src/**/*.scss'",
|
||||
"webpack": "webpack",
|
||||
"tslint": "tslint",
|
||||
"ng": "ng",
|
||||
"webpack-bundle-analyzer": "webpack-bundle-analyzer",
|
||||
"webdriver-manager": "webdriver-manager",
|
||||
"ngx-extractor": "ngx-extractor",
|
||||
"sass-lint": "sass-lint"
|
||||
"stylelint": "stylelint"
|
||||
},
|
||||
"typings": "*.d.ts",
|
||||
"resolutions": {
|
||||
|
|
@ -106,13 +106,14 @@
|
|||
"rxjs": "^6.5.2",
|
||||
"sanitize-html": "^2.1.2",
|
||||
"sass": "^1.29.0",
|
||||
"sass-lint": "^1.13.1",
|
||||
"sass-loader": "^10",
|
||||
"sass-resources-loader": "^2.0.0",
|
||||
"sha.js": "^2.4.11",
|
||||
"socket.io-client": "^4.0.1",
|
||||
"stream-browserify": "^3.0.0",
|
||||
"stream-http": "^3.0.0",
|
||||
"stylelint": "^13.13.0",
|
||||
"stylelint-config-sass-guidelines": "^8.0.0",
|
||||
"terser-webpack-plugin": "^4",
|
||||
"ts-loader": "^8.0.14",
|
||||
"tslib": "^2.0.0",
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
{{ following }}
|
||||
</a>
|
||||
|
||||
<button i18n class="showMore" *ngIf="!loadedAllFollowings && canLoadMoreFollowings()" (click)="loadAllFollowings()">Show full list</button>
|
||||
<button i18n class="show-more" *ngIf="!loadedAllFollowings && canLoadMoreFollowings()" (click)="loadAllFollowings()">Show full list</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ a {
|
|||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.showMore {
|
||||
.show-more {
|
||||
@include peertube-button-link;
|
||||
@include grey-button;
|
||||
|
||||
|
|
|
|||
|
|
@ -63,7 +63,8 @@
|
|||
|
||||
position: relative;
|
||||
|
||||
&:hover, &:active {
|
||||
&:hover,
|
||||
&:active {
|
||||
&::after {
|
||||
content: '#';
|
||||
display: inline-block;
|
||||
|
|
@ -71,7 +72,8 @@
|
|||
}
|
||||
}
|
||||
|
||||
.middle-title, .section-title {
|
||||
.middle-title,
|
||||
.section-title {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -45,7 +45,8 @@
|
|||
.p2p-privacy,
|
||||
my-about-peertube-contributors {
|
||||
::ng-deep {
|
||||
p, li {
|
||||
p,
|
||||
li {
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -65,13 +65,13 @@
|
|||
}
|
||||
|
||||
.description-html {
|
||||
@include fade-text(30px, pvar(--channelBackgroundColor));
|
||||
|
||||
grid-column: 2 / 4;
|
||||
grid-row: 2;
|
||||
|
||||
max-height: 80px;
|
||||
font-size: 16px;
|
||||
|
||||
@include fade-text(30px, pvar(--channelBackgroundColor));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@ my-user-moderation-dropdown,
|
|||
}
|
||||
|
||||
.copy-button {
|
||||
border: none;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.account-info {
|
||||
|
|
@ -104,9 +104,9 @@ my-user-moderation-dropdown,
|
|||
}
|
||||
|
||||
.description:not(.expanded) {
|
||||
max-height: 70px;
|
||||
|
||||
@include fade-text(30px, pvar(--submenuBackgroundColor));
|
||||
|
||||
max-height: 70px;
|
||||
}
|
||||
|
||||
.show-more {
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@ input[type=submit] {
|
|||
display: flex;
|
||||
margin-left: auto;
|
||||
|
||||
& + .form-error {
|
||||
+ .form-error {
|
||||
display: inline;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
|
@ -84,7 +84,8 @@ textarea {
|
|||
}
|
||||
|
||||
.disabled-checkbox-extra {
|
||||
&, ::ng-deep label {
|
||||
&,
|
||||
::ng-deep label {
|
||||
opacity: .5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,7 +13,8 @@ a {
|
|||
@include disable-default-a-behaviour;
|
||||
display: inline-block;
|
||||
|
||||
&, &:hover {
|
||||
&,
|
||||
&:hover {
|
||||
color: pvar(--mainForegroundColor);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,8 @@ a {
|
|||
@include disable-default-a-behaviour;
|
||||
display: inline-block;
|
||||
|
||||
&, &:hover {
|
||||
&,
|
||||
&:hover {
|
||||
color: pvar(--mainForegroundColor);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "mixins";
|
||||
@import 'mixins';
|
||||
|
||||
.form-sub-title {
|
||||
flex-grow: 0;
|
||||
|
|
|
|||
|
|
@ -5,7 +5,8 @@ a {
|
|||
@include disable-default-a-behaviour;
|
||||
display: inline-block;
|
||||
|
||||
&, &:hover {
|
||||
&,
|
||||
&:hover {
|
||||
color: pvar(--mainForegroundColor);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -49,7 +49,8 @@ my-global-icon {
|
|||
max-height: 22px;
|
||||
}
|
||||
|
||||
div, p {
|
||||
div,
|
||||
p {
|
||||
@include ellipsis;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
@import '_variables';
|
||||
@import '_mixins';
|
||||
|
||||
.update-button[disabled="true"] ::ng-deep .action-button {
|
||||
.update-button[disabled=true] ::ng-deep .action-button {
|
||||
cursor: default !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,8 @@ h2 {
|
|||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
input[type=submit], button {
|
||||
input[type=submit],
|
||||
button {
|
||||
@include peertube-button;
|
||||
@include orange-button;
|
||||
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
my-global-icon {
|
||||
@include apply-svg-color(pvar(--greyForegroundColor));
|
||||
|
||||
&[iconName="npm"] {
|
||||
&[iconName=npm] {
|
||||
@include fill-svg-color(pvar(--greyForegroundColor));
|
||||
}
|
||||
}
|
||||
|
|
@ -49,7 +49,7 @@
|
|||
justify-content: space-between;
|
||||
|
||||
.description {
|
||||
opacity: 0.8
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@ pre {
|
|||
}
|
||||
|
||||
.job-error {
|
||||
color: red;
|
||||
color: #ff0000;
|
||||
}
|
||||
|
||||
.badge {
|
||||
|
|
|
|||
|
|
@ -66,7 +66,7 @@
|
|||
ng-select,
|
||||
my-button {
|
||||
width: 100% !important;
|
||||
margin-left: 0px !important;
|
||||
margin-left: 0 !important;
|
||||
margin-bottom: 10px !important;
|
||||
}
|
||||
|
||||
|
|
@ -85,7 +85,7 @@
|
|||
ng-select,
|
||||
my-button {
|
||||
width: 100% !important;
|
||||
margin-left: 0px !important;
|
||||
margin-left: 0 !important;
|
||||
margin-bottom: 10px !important;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -37,7 +37,8 @@ my-select-custom-value {
|
|||
display: block;
|
||||
}
|
||||
|
||||
input[type=submit], button {
|
||||
input[type=submit],
|
||||
button {
|
||||
@include peertube-button;
|
||||
@include orange-button;
|
||||
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ input:not([type=submit]):not([type=checkbox]) {
|
|||
display: block;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-right: none;
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
input[type=submit] {
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ tr.banned > td {
|
|||
|
||||
.user-table-primary-text .glyphicon {
|
||||
font-size: 80%;
|
||||
color: gray;
|
||||
color: #808080;
|
||||
margin-left: 0.1rem;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -33,7 +33,8 @@ input[type=email] {
|
|||
}
|
||||
}
|
||||
|
||||
.create-an-account, .forgot-password-button {
|
||||
.create-an-account,
|
||||
.forgot-password-button {
|
||||
color: pvar(--mainForegroundColor);
|
||||
cursor: pointer;
|
||||
transition: opacity cubic-bezier(0.39, 0.575, 0.565, 1);
|
||||
|
|
@ -49,7 +50,7 @@ input[type=email] {
|
|||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
|
||||
& > div {
|
||||
> div {
|
||||
flex: 1 1;
|
||||
}
|
||||
|
||||
|
|
@ -65,7 +66,8 @@ input[type=email] {
|
|||
form {
|
||||
margin: 0;
|
||||
|
||||
&, input {
|
||||
&,
|
||||
input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
|
@ -82,7 +84,8 @@ input[type=email] {
|
|||
|
||||
color: var(--mainColor);
|
||||
|
||||
&:hover, &:active {
|
||||
&:hover,
|
||||
&:active {
|
||||
color: var(--mainHoverColor);
|
||||
}
|
||||
}
|
||||
|
|
@ -111,7 +114,7 @@ input[type=email] {
|
|||
min-width: 100px;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(209, 215, 224, 0.5)
|
||||
background-color: rgba(209, 215, 224, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -138,7 +141,7 @@ input[type=email] {
|
|||
}
|
||||
}
|
||||
|
||||
@mixin columnReverseDisplay {
|
||||
@mixin column-reverse-display {
|
||||
flex-direction: column-reverse;
|
||||
|
||||
.login-form-and-externals,
|
||||
|
|
@ -168,14 +171,14 @@ input[type=email] {
|
|||
|
||||
@media screen and (max-width: breakpoint(md)) {
|
||||
.wrapper {
|
||||
@include columnReverseDisplay();
|
||||
@include column-reverse-display();
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: breakpoint(md) + $menu-width) {
|
||||
:host-context(.main-col:not(.expanded)) {
|
||||
.wrapper {
|
||||
@include columnReverseDisplay();
|
||||
@include column-reverse-display();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ input[type=submit] {
|
|||
display: flex;
|
||||
margin-left: auto;
|
||||
|
||||
& + .form-error {
|
||||
+ .form-error {
|
||||
display: inline;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -32,7 +32,8 @@ my-user-notifications {
|
|||
.header {
|
||||
flex-direction: column;
|
||||
|
||||
& >:first-child, .peertube-select-container {
|
||||
> :first-child,
|
||||
.peertube-select-container {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
font-size: 16px;
|
||||
}
|
||||
|
||||
& > div {
|
||||
> div {
|
||||
padding: 10px;
|
||||
|
||||
&:first-child {
|
||||
|
|
|
|||
|
|
@ -2,12 +2,12 @@
|
|||
@import '_mixins';
|
||||
|
||||
.row {
|
||||
@include sub-menu-h1;
|
||||
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
|
||||
& > my-top-menu-dropdown:nth-child(1) {
|
||||
> my-top-menu-dropdown:nth-child(1) {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
@include sub-menu-h1;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -66,7 +66,8 @@ textarea {
|
|||
width: auto !important;
|
||||
}
|
||||
|
||||
label[for=name] + div, textarea {
|
||||
label[for=name] + div,
|
||||
textarea {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -83,7 +83,7 @@ input[type=text] {
|
|||
margin: auto;
|
||||
|
||||
.video-channel-name {
|
||||
margin-left: 0px !important;
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -39,12 +39,12 @@
|
|||
}
|
||||
|
||||
.delete-history {
|
||||
grid-column: 4;
|
||||
|
||||
@include peertube-button;
|
||||
@include grey-button;
|
||||
@include button-with-icon;
|
||||
|
||||
grid-column: 4;
|
||||
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,12 +2,12 @@
|
|||
@import '_mixins';
|
||||
|
||||
.row {
|
||||
@include sub-menu-h1;
|
||||
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
|
||||
& > my-top-menu-dropdown:nth-child(1) {
|
||||
> my-top-menu-dropdown:nth-child(1) {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
@include sub-menu-h1;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,15 +13,15 @@
|
|||
display: inline-flex;
|
||||
|
||||
.video-table-video-image {
|
||||
@include miniature-thumbnail;
|
||||
|
||||
$image-height: 45px;
|
||||
|
||||
@include miniature-thumbnail;
|
||||
|
||||
height: $image-height;
|
||||
width: #{(16/9) * $image-height};
|
||||
margin-right: 0.5rem;
|
||||
border-radius: 2px;
|
||||
border: none;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
|
|
@ -60,7 +60,7 @@
|
|||
|
||||
div .glyphicon {
|
||||
font-size: 80%;
|
||||
color: gray;
|
||||
color: #808080;
|
||||
margin-left: 0.1rem;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ pre {
|
|||
}
|
||||
|
||||
.video-import-error {
|
||||
color: red;
|
||||
color: #ff0000;
|
||||
}
|
||||
|
||||
.badge {
|
||||
|
|
|
|||
|
|
@ -25,8 +25,8 @@
|
|||
}
|
||||
|
||||
.playlist-buttons {
|
||||
display:flex;
|
||||
margin: 30px 0 10px 0;
|
||||
display: flex;
|
||||
margin: 30px 0 10px;
|
||||
|
||||
.share-button {
|
||||
@include peertube-button;
|
||||
|
|
@ -42,9 +42,10 @@
|
|||
.cdk-drag-preview {
|
||||
box-sizing: border-box;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
|
||||
0 8px 10px 1px rgba(0, 0, 0, 0.14),
|
||||
0 3px 14px 2px rgba(0, 0, 0, 0.12);
|
||||
box-shadow:
|
||||
0 5px 5px -3px rgba(0, 0, 0, 0.2),
|
||||
0 8px 10px 1px rgba(0, 0, 0, 0.14),
|
||||
0 3px 14px 2px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.cdk-drag-placeholder {
|
||||
|
|
@ -56,7 +57,7 @@
|
|||
}
|
||||
|
||||
.video:last-child {
|
||||
border: none;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.videos.cdk-drop-list-dragging .video:not(.cdk-drag-placeholder) {
|
||||
|
|
|
|||
|
|
@ -26,12 +26,12 @@ h1 {
|
|||
}
|
||||
|
||||
.action-button-delete-selection {
|
||||
display: inline-block;
|
||||
|
||||
@include peertube-button;
|
||||
@include orange-button;
|
||||
@include button-with-icon(21px);
|
||||
|
||||
display: inline-block;
|
||||
|
||||
my-global-icon {
|
||||
@include apply-svg-color(#fff);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ input[type=submit] {
|
|||
|
||||
font-weight: $font-semibold;
|
||||
display: inline-block;
|
||||
padding: 0 10px 0 10px;
|
||||
padding: 0 10px;
|
||||
white-space: nowrap;
|
||||
background: transparent;
|
||||
|
||||
|
|
|
|||
|
|
@ -84,7 +84,7 @@ button {
|
|||
border-color: pvar(--mainColor) transparent transparent transparent;
|
||||
}
|
||||
|
||||
& + div {
|
||||
+ div {
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,19 +9,16 @@ svg {
|
|||
stroke-dashoffset: 0;
|
||||
|
||||
&.circle {
|
||||
-webkit-animation: dash .9s ease-in-out;
|
||||
animation: dash .9s ease-in-out;
|
||||
}
|
||||
|
||||
&.line {
|
||||
stroke-dashoffset: 1000;
|
||||
-webkit-animation: dash .9s .35s ease-in-out forwards;
|
||||
animation: dash .9s .35s ease-in-out forwards;
|
||||
}
|
||||
|
||||
&.check {
|
||||
stroke-dashoffset: -100;
|
||||
-webkit-animation: dash-check .9s .35s ease-in-out forwards;
|
||||
animation: dash-check .9s .35s ease-in-out forwards;
|
||||
}
|
||||
}
|
||||
|
|
@ -38,16 +35,6 @@ svg {
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
@-webkit-keyframes dash {
|
||||
0% {
|
||||
stroke-dashoffset: 1000;
|
||||
}
|
||||
100% {
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes dash {
|
||||
0% {
|
||||
stroke-dashoffset: 1000;
|
||||
|
|
@ -57,15 +44,6 @@ svg {
|
|||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes dash-check {
|
||||
0% {
|
||||
stroke-dashoffset: -100;
|
||||
}
|
||||
100% {
|
||||
stroke-dashoffset: 900;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes dash-check {
|
||||
0% {
|
||||
stroke-dashoffset: -100;
|
||||
|
|
|
|||
|
|
@ -131,10 +131,10 @@
|
|||
}
|
||||
|
||||
.owner-description {
|
||||
@include fade-text(120px, pvar(--mainBackgroundColor));
|
||||
|
||||
max-height: 140px;
|
||||
word-break: break-word;
|
||||
|
||||
@include fade-text(120px, pvar(--mainBackgroundColor));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -150,7 +150,7 @@
|
|||
}
|
||||
|
||||
.copy-button {
|
||||
border: none;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1400px) {
|
||||
|
|
@ -178,9 +178,9 @@
|
|||
}
|
||||
|
||||
.channel-description:not(.expanded) {
|
||||
max-height: 70px;
|
||||
|
||||
@include fade-text(30px, pvar(--channelBackgroundColor));
|
||||
|
||||
max-height: 70px;
|
||||
}
|
||||
|
||||
.show-more {
|
||||
|
|
@ -220,10 +220,10 @@
|
|||
}
|
||||
|
||||
.owner-description {
|
||||
@include fade-text(30px, pvar(--mainBackgroundColor));
|
||||
|
||||
grid-column: 2;
|
||||
max-height: 70px;
|
||||
|
||||
@include fade-text(30px, pvar(--mainBackgroundColor));
|
||||
}
|
||||
|
||||
.view-account {
|
||||
|
|
|
|||
|
|
@ -16,6 +16,6 @@ label {
|
|||
}
|
||||
|
||||
.warning-replace-caption {
|
||||
color: red;
|
||||
color: #ff0000;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
|
@ -150,7 +150,7 @@ p-calendar {
|
|||
@include media-breakpoint-up(md) {
|
||||
@include make-col(7);
|
||||
|
||||
& + .col-video-edit {
|
||||
+ .col-video-edit {
|
||||
@include make-col(5);
|
||||
}
|
||||
}
|
||||
|
|
@ -158,7 +158,7 @@ p-calendar {
|
|||
@include media-breakpoint-up(xl) {
|
||||
@include make-col(8);
|
||||
|
||||
& + .col-video-edit {
|
||||
+ .col-video-edit {
|
||||
@include make-col(4);
|
||||
}
|
||||
}
|
||||
|
|
@ -169,7 +169,7 @@ p-calendar {
|
|||
@include media-breakpoint-up(md) {
|
||||
@include make-col(8);
|
||||
|
||||
& + .col-video-edit {
|
||||
+ .col-video-edit {
|
||||
@include make-col(4);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ $width-size: 190px;
|
|||
.alert.alert-danger {
|
||||
text-align: center;
|
||||
|
||||
& > div {
|
||||
> div {
|
||||
font-weight: $font-semibold;
|
||||
}
|
||||
}
|
||||
|
|
@ -17,10 +17,10 @@ $width-size: 190px;
|
|||
align-items: center;
|
||||
|
||||
.upload-icon {
|
||||
@include apply-svg-color(#C6C6C6);
|
||||
|
||||
width: 90px;
|
||||
margin-bottom: 25px;
|
||||
|
||||
@include apply-svg-color(#C6C6C6);
|
||||
}
|
||||
|
||||
.peertube-select-container {
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@ $nav-link-height: 40px;
|
|||
|
||||
::ng-deep .video-add-nav {
|
||||
border-bottom: $border-width $border-type $border-color;
|
||||
margin: 20px 0 0 0 !important;
|
||||
margin: 20px 0 0 !important;
|
||||
|
||||
&.hide-nav {
|
||||
display: none !important;
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ form {
|
|||
padding-right: $markdown-icon-width + 15px !important;
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
padding-right: $markdown-icon-width + 19px !important;
|
||||
padding-right: $markdown-icon-width + 19px !important;
|
||||
}
|
||||
|
||||
&:focus::placeholder {
|
||||
|
|
@ -57,7 +57,9 @@ form {
|
|||
}
|
||||
}
|
||||
|
||||
&:focus, &:active, &:hover {
|
||||
&:focus,
|
||||
&:active,
|
||||
&:hover {
|
||||
my-global-icon svg {
|
||||
background-color: #C6C6C6;
|
||||
color: pvar(--mainBackgroundColor);
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@ my-actor-avatar {
|
|||
display: inline-flex;
|
||||
padding-right: 6px;
|
||||
padding-left: 6px;
|
||||
color: white !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.comment-account {
|
||||
|
|
@ -133,7 +133,10 @@ my-actor-avatar {
|
|||
cursor: pointer;
|
||||
margin-right: 10px;
|
||||
|
||||
&:hover, &:active, &:focus, &:focus-visible {
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus,
|
||||
&:focus-visible {
|
||||
color: pvar(--mainForegroundColor);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,8 @@
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
.glyphicon, .comment-thread-loading {
|
||||
.glyphicon,
|
||||
.comment-thread-loading {
|
||||
margin-right: 5px;
|
||||
display: inline-block;
|
||||
font-size: 13px;
|
||||
|
|
@ -40,7 +41,7 @@
|
|||
#dropdown-sort-comments {
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
border: none;
|
||||
border: 0;
|
||||
transform: translateY(-7%);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,8 @@
|
|||
margin-bottom: 25px;
|
||||
flex-wrap: wrap-reverse;
|
||||
|
||||
.title-page.active, .title-page.title-page-single {
|
||||
.title-page.active,
|
||||
.title-page.title-page-single {
|
||||
margin-bottom: unset;
|
||||
margin-right: .5rem !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@
|
|||
|
||||
my-global-icon {
|
||||
&:not(.active) {
|
||||
opacity: .5
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
::ng-deep {
|
||||
|
|
|
|||
|
|
@ -79,7 +79,7 @@
|
|||
<span [innerHTML]="getRatePopoverText()"></span>
|
||||
</ng-template>
|
||||
|
||||
<div class="video-actions fullWidth justify-content-end">
|
||||
<div class="video-actions full-width justify-content-end">
|
||||
<button
|
||||
[ngbPopover]="getRatePopoverText() && ratePopoverText" [ngClass]="{ 'activated': userRating === 'like' }" (click)="setLike()" (keyup.enter)="setLike()"
|
||||
class="action-button action-button-like" [attr.aria-pressed]="userRating === 'like'" [attr.aria-label]="tooltipLike"
|
||||
|
|
|
|||
|
|
@ -6,12 +6,12 @@
|
|||
$player-factor: 16/9;
|
||||
$video-info-margin-left: 44px;
|
||||
|
||||
@function getPlayerHeight($width){
|
||||
@return calc(#{$width} / #{$player-factor})
|
||||
@function getPlayerHeight ($width) {
|
||||
@return calc(#{$width} / #{$player-factor});
|
||||
}
|
||||
|
||||
@function getPlayerWidth($height){
|
||||
@return calc(#{$height} * #{$player-factor})
|
||||
@function getPlayerWidth ($height) {
|
||||
@return calc(#{$height} * #{$player-factor});
|
||||
}
|
||||
|
||||
@mixin playlist-below-player {
|
||||
|
|
@ -24,11 +24,11 @@ $video-info-margin-left: 44px;
|
|||
|
||||
.root {
|
||||
&.theater-enabled #video-wrapper {
|
||||
$height: calc(100vh - #{$header-height} - #{$theater-bottom-space});
|
||||
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
$height: calc(100vh - #{$header-height} - #{$theater-bottom-space});
|
||||
|
||||
#videojs-wrapper {
|
||||
width: 100%;
|
||||
height: $height;
|
||||
|
|
@ -141,7 +141,7 @@ $video-info-margin-left: 44px;
|
|||
.video-info-first-row {
|
||||
display: flex;
|
||||
|
||||
& > div:first-child {
|
||||
> div:first-child {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
|
|
@ -207,7 +207,7 @@ $video-info-margin-left: 44px;
|
|||
}
|
||||
|
||||
.video-actions-rates {
|
||||
margin: 0 0 10px 0;
|
||||
margin: 0 0 10px;
|
||||
align-items: start;
|
||||
width: max-content;
|
||||
margin-left: auto;
|
||||
|
|
@ -231,7 +231,7 @@ $video-info-margin-left: 44px;
|
|||
font-size: 100%;
|
||||
font-weight: $font-semibold;
|
||||
display: inline-block;
|
||||
padding: 0 10px 0 10px;
|
||||
padding: 0 10px;
|
||||
white-space: nowrap;
|
||||
background-color: transparent !important;
|
||||
color: pvar(--actionButtonColor);
|
||||
|
|
@ -346,7 +346,8 @@ $video-info-margin-left: 44px;
|
|||
}
|
||||
}
|
||||
|
||||
.glyphicon, .description-loading {
|
||||
.glyphicon,
|
||||
.description-loading {
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
||||
|
|
@ -396,7 +397,7 @@ $video-info-margin-left: 44px;
|
|||
&.video-attribute-tags {
|
||||
.video-attribute-value:not(:nth-child(2)) {
|
||||
&::before {
|
||||
content: ', '
|
||||
content: ', ';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
padding-top: 30px;
|
||||
|
||||
.section-title {
|
||||
border-top: none !important;
|
||||
border-top: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -33,12 +33,14 @@
|
|||
}
|
||||
|
||||
a {
|
||||
&:hover, &:focus:not(.focus-visible), &:active {
|
||||
color: pvar(--mainForegroundColor);
|
||||
|
||||
&:hover,
|
||||
&:focus:not(.focus-visible),
|
||||
&:active {
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
color: pvar(--mainForegroundColor);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -79,7 +79,7 @@
|
|||
display: inline-block;
|
||||
width: 23px;
|
||||
height: 24px;
|
||||
margin-right: .5rem;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $mobile-view) {
|
||||
|
|
|
|||
|
|
@ -12,16 +12,13 @@
|
|||
left: 0;
|
||||
color: #333;
|
||||
font-size: 1em;
|
||||
background-color: rgba(255,255,255,0.9);
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.cfp-hotkeys-container.fade {
|
||||
z-index: -1024;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.15s linear;
|
||||
-moz-transition: opacity 0.15s linear;
|
||||
-o-transition: opacity 0.15s linear;
|
||||
transition: opacity 0.15s linear;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -44,7 +44,8 @@ li.suggestion {
|
|||
|
||||
// soft border-radius for the last suggestion and the link inside
|
||||
&:last-of-type {
|
||||
&, & ::ng-deep a {
|
||||
&,
|
||||
::ng-deep a {
|
||||
border-bottom-right-radius: 3px;
|
||||
border-bottom-left-radius: 3px;
|
||||
}
|
||||
|
|
@ -74,7 +75,7 @@ li.suggestion {
|
|||
#typeahead-container {
|
||||
input {
|
||||
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) 0 1px 20px 0;
|
||||
flex-grow: 1;
|
||||
transition: box-shadow .3s ease, width .2s ease;
|
||||
}
|
||||
|
|
@ -95,7 +96,7 @@ li.suggestion {
|
|||
right: 10px;
|
||||
}
|
||||
|
||||
& > div:last-child {
|
||||
> div:last-child {
|
||||
// we have to switch the display and not the opacity,
|
||||
// to avoid clashing with the rest of the interface.
|
||||
display: none;
|
||||
|
|
@ -103,7 +104,7 @@ li.suggestion {
|
|||
|
||||
&:focus,
|
||||
::ng-deep &:focus-within {
|
||||
& > div:last-child {
|
||||
> div:last-child {
|
||||
@media screen and (min-width: $mobile-view) {
|
||||
display: initial !important;
|
||||
}
|
||||
|
|
@ -111,12 +112,12 @@ li.suggestion {
|
|||
#typeahead-help,
|
||||
#typeahead-instructions,
|
||||
li.suggestion {
|
||||
box-shadow: rgba(0, 0, 0, 0.2) 0px 10px 20px -5px;
|
||||
box-shadow: rgba(0, 0, 0, 0.2) 0 10px 20px -5px;
|
||||
}
|
||||
}
|
||||
|
||||
::ng-deep input {
|
||||
box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 20px 0px;
|
||||
box-shadow: rgba(0, 0, 0, 0.2) 0 1px 20px 0;
|
||||
border-end-start-radius: 0;
|
||||
border-end-end-radius: 0;
|
||||
|
||||
|
|
|
|||
|
|
@ -2,9 +2,11 @@
|
|||
|
||||
a {
|
||||
@include disable-default-a-behaviour;
|
||||
|
||||
width: 100%;
|
||||
|
||||
&, &:hover {
|
||||
&,
|
||||
&:hover {
|
||||
color: pvar(--mainForegroundColor);
|
||||
|
||||
&.focus-visible {
|
||||
|
|
@ -23,10 +25,10 @@ a {
|
|||
}
|
||||
|
||||
my-global-icon {
|
||||
@include apply-svg-color(pvar(--mainForegroundColor));
|
||||
|
||||
width: 17px;
|
||||
position: relative;
|
||||
top: -2px;
|
||||
margin: 5px;
|
||||
|
||||
@include apply-svg-color(pvar(--mainForegroundColor));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,12 +5,12 @@
|
|||
@include peertube-button-link;
|
||||
@include orange-button;
|
||||
|
||||
border-radius: 0;
|
||||
|
||||
&.focus-visible,
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
|
|
|
|||
|
|
@ -24,8 +24,9 @@ $footer-links-base-opacity: .8;
|
|||
background-color: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
&:hover, &.focus-visible {
|
||||
background-color: rgba(255, 255, 255, 0.10);
|
||||
&:hover,
|
||||
&.focus-visible {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
my-global-icon {
|
||||
|
|
@ -60,7 +61,8 @@ menu {
|
|||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
&:focus, &:hover {
|
||||
&:focus,
|
||||
&:hover {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
|
|
@ -125,7 +127,7 @@ my-notification {
|
|||
line-height: 1;
|
||||
|
||||
&.show {
|
||||
background-color: rgba(255, 255, 255, 0.20);
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
box-shadow: inset 0 3px 5px rgba(0, 0, 0, .325);
|
||||
}
|
||||
|
||||
|
|
@ -158,14 +160,14 @@ my-notification {
|
|||
position: absolute;
|
||||
right: -35px;
|
||||
top: -8px;
|
||||
color: grey;
|
||||
color: #808080;
|
||||
width: $main-radius;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-toggle {
|
||||
&::after {
|
||||
border: none;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -193,11 +195,11 @@ my-actor-avatar {
|
|||
}
|
||||
|
||||
.logged-in-display-name {
|
||||
@include disable-default-a-behaviour;
|
||||
|
||||
font-size: 16px;
|
||||
font-weight: $font-semibold;
|
||||
color: pvar(--menuForegroundColor);
|
||||
|
||||
@include disable-default-a-behaviour;
|
||||
}
|
||||
|
||||
.logged-in-username {
|
||||
|
|
@ -251,7 +253,7 @@ my-actor-avatar {
|
|||
}
|
||||
|
||||
.login-buttons-block {
|
||||
margin: 30px 25px 35px 25px;
|
||||
margin: 30px 25px 35px;
|
||||
|
||||
> a {
|
||||
display: block;
|
||||
|
|
@ -305,7 +307,8 @@ my-actor-avatar {
|
|||
}
|
||||
|
||||
.footer-links {
|
||||
&, > div {
|
||||
&,
|
||||
> div {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
|
@ -388,29 +391,29 @@ my-actor-avatar {
|
|||
.dropdown-item:hover,
|
||||
.dropdown-item:active {
|
||||
&.settings-sensitive my-global-icon ::ng-deep svg {
|
||||
margin-top: 0px !important;
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
my-global-icon {
|
||||
&[iconName="playlists"] {
|
||||
&[iconName=playlists] {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
&[iconName="videos"] {
|
||||
&[iconName=videos] {
|
||||
position: relative;
|
||||
right: -1px;
|
||||
}
|
||||
|
||||
&[iconName="channel"] {
|
||||
&[iconName=channel] {
|
||||
margin-top: -2px;
|
||||
}
|
||||
|
||||
&[iconName="sign-out"] {
|
||||
&[iconName='sign-out'] {
|
||||
position: relative;
|
||||
right: -2px;
|
||||
height: 20px;
|
||||
|
|
|
|||
|
|
@ -16,19 +16,20 @@
|
|||
.notification-inbox-popover,
|
||||
.notification-inbox-link a {
|
||||
@include apply-svg-color(#808080);
|
||||
::ng-deep {
|
||||
svg {
|
||||
transition: color .1s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
transition: all .1s ease-in-out;
|
||||
border-radius: 25px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover, &:active {
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
::ng-deep svg {
|
||||
transition: color .1s ease-in-out;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
@include apply-svg-color(#fff);
|
||||
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -59,7 +60,7 @@
|
|||
font-size: 14px;
|
||||
font-family: $main-fonts;
|
||||
width: 400px;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.30);
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
|
||||
|
||||
.loader {
|
||||
display: flex;
|
||||
|
|
@ -80,7 +81,7 @@
|
|||
max-height: 500px;
|
||||
}
|
||||
|
||||
& > my-user-notifications:nth-child(2) {
|
||||
> my-user-notifications:nth-child(2) {
|
||||
overflow-y: auto;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
|
@ -110,7 +111,8 @@
|
|||
background: transparent;
|
||||
}
|
||||
|
||||
a, button {
|
||||
a,
|
||||
button {
|
||||
color: rgba(20, 20, 20, 0.5);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
|
|
@ -133,7 +135,8 @@
|
|||
}
|
||||
}
|
||||
|
||||
.notification-inbox-popover, .notification-inbox-link {
|
||||
.notification-inbox-popover,
|
||||
.notification-inbox-link {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ li {
|
|||
text-align: center;
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
margin: 20px 0 40px 0;
|
||||
margin: 20px 0 40px;
|
||||
}
|
||||
|
||||
.columns {
|
||||
|
|
|
|||
|
|
@ -30,29 +30,29 @@
|
|||
}
|
||||
|
||||
.avatar-32 {
|
||||
--avatarSize: 32px;
|
||||
--avatarSize: 32px;
|
||||
}
|
||||
|
||||
.avatar-34 {
|
||||
--avatarSize: 34px;
|
||||
--avatarSize: 34px;
|
||||
}
|
||||
|
||||
.avatar-36 {
|
||||
--avatarSize: 36px;
|
||||
--avatarSize: 36px;
|
||||
}
|
||||
|
||||
.avatar-40 {
|
||||
--avatarSize: 40px;
|
||||
--avatarSize: 40px;
|
||||
}
|
||||
|
||||
.avatar-100 {
|
||||
--avatarSize: 100px;
|
||||
--initialFontSize: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-120 {
|
||||
--avatarSize: 120px;
|
||||
--initialFontSize: 46px;
|
||||
--avatarSize: 120px;
|
||||
--initialFontSize: 46px;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ input {
|
|||
position: absolute;
|
||||
visibility: hidden;
|
||||
|
||||
& + label {
|
||||
+ label {
|
||||
cursor: pointer;
|
||||
text-indent: -9999px;
|
||||
width: 35px;
|
||||
|
|
@ -16,7 +16,7 @@ input {
|
|||
position: relative;
|
||||
margin: 0;
|
||||
|
||||
&:after {
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
|
|
@ -28,7 +28,7 @@ input {
|
|||
transition: 0.3s ease-out;
|
||||
}
|
||||
|
||||
&:active:after {
|
||||
&:active::after {
|
||||
width: 40px;
|
||||
}
|
||||
}
|
||||
|
|
@ -36,7 +36,7 @@ input {
|
|||
&:checked + label {
|
||||
background: pvar(--mainColor);
|
||||
|
||||
&:after {
|
||||
&::after {
|
||||
left: calc(100% - 3px);
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ $input-border-radius: 3px;
|
|||
|
||||
font-family: monospace;
|
||||
font-size: 13px;
|
||||
border-bottom: none;
|
||||
border-bottom: 0;
|
||||
border-bottom-left-radius: unset;
|
||||
border-bottom-right-radius: unset;
|
||||
}
|
||||
|
|
@ -51,7 +51,8 @@ $input-border-radius: 3px;
|
|||
opacity: 0.6;
|
||||
}
|
||||
|
||||
&:hover, &:active {
|
||||
&:hover,
|
||||
&:active {
|
||||
svg {
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
@ -105,6 +106,8 @@ $input-border-radius: 3px;
|
|||
}
|
||||
|
||||
@mixin maximized-base {
|
||||
$nav-preview-vertical-padding: 40px;
|
||||
|
||||
flex-direction: row;
|
||||
z-index: #{z(header) - 1};
|
||||
position: fixed;
|
||||
|
|
@ -115,20 +118,18 @@ $input-border-radius: 3px;
|
|||
width: calc(100% - #{$menu-width});
|
||||
height: calc(100vh - #{$header-height}) !important;
|
||||
|
||||
$nav-preview-vertical-padding: 40px;
|
||||
|
||||
.nav-preview {
|
||||
@include nav-preview-medium();
|
||||
padding-top: #{$nav-preview-vertical-padding / 2};
|
||||
padding-bottom: #{$nav-preview-vertical-padding / 2};
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
position: absolute;
|
||||
background-color: pvar(--mainBackgroundColor);
|
||||
width: 100% !important;
|
||||
border-top: none;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
border-top: 0;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
|
||||
:last-child {
|
||||
margin-right: pvar(--horizontalMarginContent);
|
||||
|
|
@ -148,7 +149,7 @@ $input-border-radius: 3px;
|
|||
margin-top: #{$nav-preview-tab-height + $nav-preview-vertical-padding} !important;
|
||||
height: calc(100vh - #{$header-height + $nav-preview-tab-height + $nav-preview-vertical-padding}) !important;
|
||||
width: 50% !important;
|
||||
border: none !important;
|
||||
border: 0 !important;
|
||||
border-radius: unset !important;
|
||||
}
|
||||
|
||||
|
|
@ -249,11 +250,11 @@ $input-border-radius: 3px;
|
|||
}
|
||||
|
||||
@media only screen and (min-width: $small-view) {
|
||||
@include maximized-in-medium-view();
|
||||
|
||||
:host-context(.expanded) {
|
||||
@include in-medium-view();
|
||||
}
|
||||
|
||||
@include maximized-in-medium-view();
|
||||
}
|
||||
|
||||
@media only screen and (min-width: #{$small-view + $menu-width}) {
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@
|
|||
line-height: 12px;
|
||||
font-weight: 500;
|
||||
color: pvar(--inputPlaceholderColor);
|
||||
background-color: rgba(217,225,232,.1);
|
||||
border: 1px solid rgba(217,225,232,.5);
|
||||
background-color: rgba(217, 225, 232, .1);
|
||||
border: 1px solid rgba(217, 225, 232, .5);
|
||||
}
|
||||
}
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
max-width: 100%;
|
||||
|
||||
&.no-image {
|
||||
border: 2px solid grey;
|
||||
border: 2px solid #808080;
|
||||
background-color: pvar(--mainBackgroundColor);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ ng-select ::ng-deep {
|
|||
}
|
||||
|
||||
.root {
|
||||
display:flex;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
> my-select-options {
|
||||
|
|
@ -41,9 +41,9 @@ ng-select ::ng-deep {
|
|||
}
|
||||
|
||||
my-select-options + input {
|
||||
margin-left: 5px;
|
||||
|
||||
@include peertube-input-text($form-base-input-width);
|
||||
|
||||
margin-left: 5px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -4,8 +4,7 @@ p-inputmask {
|
|||
::ng-deep input {
|
||||
width: 80px;
|
||||
font-size: 15px;
|
||||
|
||||
border: none;
|
||||
border: 0;
|
||||
|
||||
&:focus-within,
|
||||
&:focus {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
@import '_variables';
|
||||
@import '_mixins';
|
||||
@import "./_bootstrap-variables";
|
||||
@import './_bootstrap-variables';
|
||||
|
||||
@import '~bootstrap/scss/functions';
|
||||
@import '~bootstrap/scss/variables';
|
||||
|
|
@ -30,7 +30,7 @@ ngb-accordion ::ng-deep {
|
|||
background-color: unset;
|
||||
padding: 0;
|
||||
|
||||
& + .collapse.show {
|
||||
+ .collapse.show {
|
||||
background-color: var(--submenuBackgroundColor);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ table {
|
|||
.more-info {
|
||||
font-style: italic;
|
||||
font-weight: initial;
|
||||
font-size: 14px
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,6 +8,9 @@
|
|||
.action-button {
|
||||
@include peertube-button;
|
||||
|
||||
display: inline-block;
|
||||
padding: 0 10px;
|
||||
|
||||
&.button-styled {
|
||||
|
||||
&.grey {
|
||||
|
|
@ -18,14 +21,13 @@
|
|||
@include orange-button;
|
||||
}
|
||||
|
||||
&:hover, &:active, &:focus {
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
background-color: $grey-background-color;
|
||||
}
|
||||
}
|
||||
|
||||
display: inline-block;
|
||||
padding: 0 10px;
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -64,7 +66,8 @@
|
|||
@include dropdown-with-icon-item;
|
||||
}
|
||||
|
||||
a, span {
|
||||
a,
|
||||
span {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.date-toggle {
|
||||
&:hover {
|
||||
cursor: default
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,14 +5,14 @@
|
|||
width: 100%;
|
||||
|
||||
a {
|
||||
color: black;
|
||||
color: #000;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
my-global-icon {
|
||||
@include apply-svg-color(pvar(--mainForegroundColor));
|
||||
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
|
||||
@include apply-svg-color(pvar(--mainForegroundColor))
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
border: 4px solid;
|
||||
border-radius: 50%;
|
||||
animation: loader 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
|
||||
border-color: #999999 transparent transparent transparent;
|
||||
border-color: #999999 transparent transparent;
|
||||
}
|
||||
|
||||
.loader div:nth-child(1) {
|
||||
|
|
|
|||
|
|
@ -2,20 +2,19 @@
|
|||
@import '_mixins';
|
||||
|
||||
.help-tooltip-button {
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
@include disable-outline;
|
||||
|
||||
cursor: pointer;
|
||||
border: 0;
|
||||
margin: 5px;
|
||||
|
||||
my-global-icon {
|
||||
@include apply-svg-color(pvar(--greyForegroundColor));
|
||||
|
||||
width: 17px;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
|
||||
@include apply-svg-color(pvar(--greyForegroundColor))
|
||||
}
|
||||
|
||||
@include disable-outline;
|
||||
}
|
||||
|
||||
::ng-deep {
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
</button>
|
||||
|
||||
<div *ngIf="!isInMobileView" class="list-overflow-menu" ngbDropdown container="body" #dropdown="ngbDropdown" (mouseleave)="closeDropdownIfHovered(dropdown)" (mouseenter)="openDropdownOnHover(dropdown)">
|
||||
<button class="btn btn-outline-secondary btn-sm" [ngClass]="{ routeActive: active }"
|
||||
<button class="btn btn-outline-secondary btn-sm" [ngClass]="{ 'route-active': active }"
|
||||
ngbDropdownAnchor (click)="dropdownAnchorClicked(dropdown)" role="button"
|
||||
>
|
||||
<span class="glyphicon glyphicon-chevron-down"></span>
|
||||
|
|
|
|||
|
|
@ -15,13 +15,13 @@
|
|||
|
||||
button {
|
||||
width: 30px;
|
||||
border: none;
|
||||
border: 0;
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.routeActive {
|
||||
&.route-active {
|
||||
&::after {
|
||||
display: inherit;
|
||||
border: 2px solid pvar(--mainColor);
|
||||
|
|
@ -36,7 +36,7 @@ button {
|
|||
margin-top: 0 !important;
|
||||
position: static;
|
||||
right: auto;
|
||||
bottom: auto
|
||||
bottom: auto;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
|
|
|
|||
|
|
@ -21,11 +21,11 @@
|
|||
}
|
||||
|
||||
my-global-icon {
|
||||
@include apply-svg-color(#333);
|
||||
|
||||
width: 24px;
|
||||
margin-right: 11px;
|
||||
margin-left: 3px;
|
||||
|
||||
@include apply-svg-color(#333);
|
||||
}
|
||||
|
||||
.avatar {
|
||||
|
|
|
|||
|
|
@ -11,7 +11,8 @@ label {
|
|||
margin-right: 5px;
|
||||
}
|
||||
|
||||
&, .progress {
|
||||
&,
|
||||
.progress {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
|
||||
input {
|
||||
@include peertube-input-text(250px);
|
||||
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,12 +17,18 @@
|
|||
word-wrap: break-word;
|
||||
|
||||
::ng-deep p:last-child {
|
||||
margin-bottom: 0px !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.screenratio {
|
||||
@include block-ratio($selector: 'div, ::ng-deep iframe') {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
left: 0;
|
||||
};
|
||||
|
||||
div {
|
||||
@include miniature-thumbnail;
|
||||
|
||||
|
|
@ -31,12 +37,6 @@
|
|||
align-items: center;
|
||||
color: pvar(--inputPlaceholderColor);
|
||||
}
|
||||
|
||||
@include block-ratio($selector: 'div, ::ng-deep iframe') {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
left: 0;
|
||||
};
|
||||
}
|
||||
|
||||
.input-group {
|
||||
|
|
@ -93,15 +93,15 @@ my-action-dropdown.show {
|
|||
display: inline-flex;
|
||||
|
||||
.table-video-image {
|
||||
@include miniature-thumbnail;
|
||||
|
||||
$image-height: 45px;
|
||||
|
||||
@include miniature-thumbnail;
|
||||
|
||||
height: $image-height;
|
||||
width: #{(16/9) * $image-height};
|
||||
margin-right: 0.5rem;
|
||||
border-radius: 2px;
|
||||
border: none;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
|
|
@ -139,7 +139,7 @@ my-action-dropdown.show {
|
|||
|
||||
div .glyphicon {
|
||||
font-size: 80%;
|
||||
color: gray;
|
||||
color: #808080;
|
||||
margin-left: 0.1rem;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,8 @@ a {
|
|||
@include disable-default-a-behaviour;
|
||||
display: inline-block;
|
||||
|
||||
&, &:hover {
|
||||
&,
|
||||
&:hover {
|
||||
color: pvar(--mainForegroundColor);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -7,5 +7,5 @@ textarea {
|
|||
|
||||
.live-info {
|
||||
font-size: 15px;
|
||||
margin: 40px 0 20px 0;
|
||||
margin: 40px 0 20px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.20);
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
|
||||
div {
|
||||
height: 100%;
|
||||
|
|
@ -39,8 +39,8 @@
|
|||
top: 5px;
|
||||
font-weight: $font-bold;
|
||||
|
||||
&.warning { background-color: orange; }
|
||||
&.danger { background-color: red; }
|
||||
&.warning { background-color: #ffa500; }
|
||||
&.danger { background-color: #ff0000; }
|
||||
}
|
||||
|
||||
.video-thumbnail-duration-overlay,
|
||||
|
|
@ -77,9 +77,9 @@
|
|||
padding: 3px;
|
||||
|
||||
my-global-icon {
|
||||
@include apply-svg-color(#fff);
|
||||
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
|
||||
@include apply-svg-color(#fff);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,8 +8,8 @@
|
|||
float: right;
|
||||
padding: 0;
|
||||
|
||||
& > .btn,
|
||||
& > .dropdown > .dropdown-toggle {
|
||||
> .btn,
|
||||
> .dropdown > .dropdown-toggle {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
&.big {
|
||||
height: 35px;
|
||||
|
||||
& > button:first-child {
|
||||
> button:first-child {
|
||||
width: max-content;
|
||||
min-width: 175px;
|
||||
}
|
||||
|
|
@ -37,15 +37,15 @@
|
|||
}
|
||||
|
||||
// Unlogged
|
||||
& > .dropdown > .dropdown-toggle span {
|
||||
> .dropdown > .dropdown-toggle span {
|
||||
padding-right: 3px;
|
||||
}
|
||||
|
||||
// Logged
|
||||
& > .btn {
|
||||
> .btn {
|
||||
padding-right: 4px;
|
||||
|
||||
& + .dropdown > button {
|
||||
+ .dropdown > button {
|
||||
padding-left: 2px;
|
||||
|
||||
&::after {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
@import '_mixins';
|
||||
@import '_miniature';
|
||||
|
||||
$iconSize: 16px;
|
||||
$icon-size: 16px;
|
||||
|
||||
::ng-deep my-video-list-header {
|
||||
display: flex;
|
||||
|
|
@ -17,20 +17,19 @@ $iconSize: 16px;
|
|||
|
||||
my-feed {
|
||||
display: inline-block;
|
||||
width: calc(#{$iconSize} - 2px);
|
||||
width: calc(#{$icon-size} - 2px);
|
||||
}
|
||||
|
||||
.moderation-block {
|
||||
|
||||
my-global-icon {
|
||||
position: relative;
|
||||
width: $iconSize;
|
||||
}
|
||||
|
||||
margin-left: .4rem;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
|
||||
my-global-icon {
|
||||
position: relative;
|
||||
width: $icon-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -72,7 +71,7 @@ $iconSize: 16px;
|
|||
|
||||
.title-page {
|
||||
margin-bottom: 10px;
|
||||
margin-right: 0px;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-right: none;
|
||||
border-right: 0;
|
||||
|
||||
select {
|
||||
height: inherit;
|
||||
|
|
@ -85,7 +85,7 @@
|
|||
&.metadata-attribute-tags {
|
||||
.metadata-attribute-value:not(:nth-child(2)) {
|
||||
&::before {
|
||||
content: ', '
|
||||
content: ', ';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ my-actor-avatar {
|
|||
}
|
||||
|
||||
.video-info-blocked {
|
||||
color: red;
|
||||
color: #ff0000;
|
||||
|
||||
.blocked-reason::before {
|
||||
content: ' - ';
|
||||
|
|
@ -49,7 +49,7 @@ my-actor-avatar {
|
|||
}
|
||||
|
||||
.video-info-nsfw {
|
||||
color: red;
|
||||
color: #ff0000;
|
||||
}
|
||||
|
||||
.video-actions {
|
||||
|
|
|
|||
|
|
@ -126,7 +126,7 @@ $timestamp-margin-right: 10px;
|
|||
border-top: 1px solid $separator-border-color;
|
||||
}
|
||||
|
||||
.new-playlist-button {
|
||||
.new-playlist-button {
|
||||
cursor: pointer;
|
||||
|
||||
my-global-icon {
|
||||
|
|
|
|||
|
|
@ -84,21 +84,23 @@ my-video-thumbnail,
|
|||
width: auto;
|
||||
}
|
||||
|
||||
.video-info-account, .video-info-timestamp {
|
||||
.video-info-account,
|
||||
.video-info-timestamp {
|
||||
color: pvar(--greyForegroundColor);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.video-info-name {
|
||||
@include ellipsis;
|
||||
|
||||
font-size: 18px;
|
||||
font-weight: $font-semibold;
|
||||
display: inline-block;
|
||||
|
||||
@include ellipsis;
|
||||
}
|
||||
|
||||
.more, my-edit-button {
|
||||
.more,
|
||||
my-edit-button {
|
||||
justify-self: flex-end;
|
||||
margin-left: auto;
|
||||
cursor: pointer;
|
||||
|
|
@ -118,7 +120,7 @@ my-video-thumbnail,
|
|||
display: flex;
|
||||
|
||||
&::after {
|
||||
border: none;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
display: inline-block;
|
||||
width: 100%;
|
||||
|
||||
&.no-videos:not(.to-manage){
|
||||
&.no-videos:not(.to-manage) {
|
||||
a {
|
||||
cursor: default !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,9 +8,9 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
|
|||
|
||||
@import './bootstrap';
|
||||
@import './primeng-custom';
|
||||
@import './ng-select.scss';
|
||||
@import './ng-select';
|
||||
|
||||
@import './classes.scss';
|
||||
@import './classes';
|
||||
|
||||
[hidden] {
|
||||
display: none !important;
|
||||
|
|
@ -89,14 +89,16 @@ input.readonly {
|
|||
background-color: pvar(--inputBackgroundColor) !important;
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
input,
|
||||
textarea {
|
||||
outline: none;
|
||||
color: pvar(--inputForegroundColor);
|
||||
}
|
||||
|
||||
button {
|
||||
background: unset;
|
||||
@include disable-outline;
|
||||
|
||||
background: unset;
|
||||
}
|
||||
|
||||
label {
|
||||
|
|
@ -121,12 +123,12 @@ code {
|
|||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.input-error
|
||||
.input-error,
|
||||
my-input-toggle-hidden ::ng-deep input {
|
||||
border-color: $red !important;
|
||||
}
|
||||
|
||||
.fullWidth {
|
||||
.full-width {
|
||||
width: 100%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
|
@ -134,7 +136,7 @@ my-input-toggle-hidden ::ng-deep input {
|
|||
}
|
||||
|
||||
.glyphicon-black {
|
||||
color: black;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.row {
|
||||
|
|
@ -184,26 +186,26 @@ my-input-toggle-hidden ::ng-deep input {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
&.lock-scroll .main-row > router-outlet + * {
|
||||
&.lock-scroll .main-row > router-outlet + * { /* stylelint-disable-line selector-max-compound-selectors */
|
||||
// Lock and hide body scrollbars
|
||||
position: fixed;
|
||||
|
||||
// Lock and hide sub-menu scrollbars
|
||||
.sub-menu {
|
||||
.sub-menu { /* stylelint-disable-line */
|
||||
overflow-x: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title-page {
|
||||
@include disable-default-a-behaviour;
|
||||
|
||||
opacity: 0.6;
|
||||
color: pvar(--mainForegroundColor);
|
||||
font-size: 16px;
|
||||
display: inline-block;
|
||||
margin-right: 55px;
|
||||
font-weight: $font-semibold;
|
||||
@include disable-default-a-behaviour;
|
||||
|
||||
border-bottom: 2px solid transparent;
|
||||
|
||||
&.title-page-single {
|
||||
|
|
@ -219,13 +221,19 @@ my-input-toggle-hidden ::ng-deep input {
|
|||
font-size: 125%;
|
||||
}
|
||||
|
||||
&:hover, &:active, &:focus {
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
color: pvar(--mainForegroundColor);
|
||||
}
|
||||
|
||||
&.active, &:hover, &:active, &:focus, &.title-page-single {
|
||||
&.active,
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus,
|
||||
&.title-page-single {
|
||||
opacity: 1;
|
||||
outline: 0px hidden !important;
|
||||
outline: 0 hidden !important;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $mobile-view) {
|
||||
|
|
@ -262,7 +270,10 @@ my-input-toggle-hidden ::ng-deep input {
|
|||
background-color: pvar(--submenuBackgroundColor);
|
||||
}
|
||||
|
||||
&.active, &:hover, &:active, &:focus {
|
||||
&.active,
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
|
@ -275,8 +286,13 @@ my-input-toggle-hidden ::ng-deep input {
|
|||
|
||||
// In tables, don't have a hover different background
|
||||
table {
|
||||
.action-button-edit, .action-button-delete {
|
||||
&:hover, &:active, &:focus, &[disabled], &.disabled {
|
||||
.action-button-edit,
|
||||
.action-button-delete {
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus,
|
||||
&[disabled],
|
||||
&.disabled {
|
||||
background-color: $grey-background-color !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -329,15 +345,12 @@ ngx-loading-bar {
|
|||
|
||||
@media screen and (max-width: #{breakpoint(xxl)}) {
|
||||
.main-col {
|
||||
& {
|
||||
--horizontalMarginContent: #{$not-expanded-horizontal-margins / 2};
|
||||
}
|
||||
--horizontalMarginContent: #{$not-expanded-horizontal-margins / 2};
|
||||
--videosHorizontalMarginContent: 30px;
|
||||
|
||||
&.expanded {
|
||||
--horizontalMarginContent: #{$expanded-horizontal-margins / 2};
|
||||
}
|
||||
|
||||
--videosHorizontalMarginContent: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
|
|||
|
||||
// Thanks https://gist.github.com/alexandrevicenzi/680147013e902a4eaa5d
|
||||
.glyphicon-refresh-animate {
|
||||
animation: spin .7s infinite linear;
|
||||
animation: spin 0.7s infinite linear;
|
||||
}
|
||||
|
||||
.glyphicon-duplicate {
|
||||
|
|
@ -25,6 +25,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
|
|||
from {
|
||||
transform: scale(1) rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: scale(1) rotate(360deg);
|
||||
}
|
||||
|
|
@ -70,7 +71,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
|
|||
&.active {
|
||||
color: pvar(--mainBackgroundColor) !important;
|
||||
background-color: pvar(--mainHoverColor);
|
||||
opacity: .9;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
&:active {
|
||||
|
|
@ -97,9 +98,9 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
|
|||
}
|
||||
|
||||
@media screen and (min-width: #{breakpoint(md)}) {
|
||||
.modal:before {
|
||||
.modal::before {
|
||||
vertical-align: middle;
|
||||
content: " ";
|
||||
content: ' ';
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
|
@ -123,7 +124,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
|
|||
}
|
||||
|
||||
.modal-header {
|
||||
border-bottom: none;
|
||||
border-bottom: 0;
|
||||
margin-bottom: 5px;
|
||||
|
||||
.modal-title {
|
||||
|
|
@ -140,10 +141,11 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
|
|||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
opacity: .5;
|
||||
opacity: 0.5;
|
||||
|
||||
&[iconName="cross"] {
|
||||
&[iconName=cross] { /* stylelint-disable-line selector-max-compound-selectors */
|
||||
@include icon(16px);
|
||||
|
||||
top: -3px;
|
||||
}
|
||||
}
|
||||
|
|
@ -154,7 +156,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
|
|||
text-align: right;
|
||||
|
||||
> .peertube-button:not(:first-child) {
|
||||
margin-left: 10px
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -168,7 +170,8 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
|
|||
|
||||
// On touchscreen devices, simply overflow: hidden to avoid detached overlay on scroll
|
||||
@media (hover: none) and (pointer: coarse) {
|
||||
.modal-open, .menu-open {
|
||||
.modal-open,
|
||||
.menu-open {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
|
|
@ -176,7 +179,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
|
|||
.menu-open {
|
||||
.main-col {
|
||||
&::before {
|
||||
background-color: black;
|
||||
background-color: #000;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
opacity: 0.75;
|
||||
|
|
@ -204,7 +207,10 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
|
|||
.nav-link {
|
||||
opacity: 0.6 !important;
|
||||
|
||||
&.active, &:hover, &:active, &:focus {
|
||||
&.active,
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -221,7 +227,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
|
|||
|
||||
color: pvar(--mainForegroundColor);
|
||||
font-weight: $font-semibold;
|
||||
border: none;
|
||||
border: 0;
|
||||
border-bottom: 2px solid transparent;
|
||||
opacity: 0.6;
|
||||
|
||||
|
|
@ -231,7 +237,10 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
|
|||
border-bottom-color: pvar(--mainColor);
|
||||
}
|
||||
|
||||
&.active, &:hover, &:active, &:focus {
|
||||
&.active,
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
|
@ -314,9 +323,10 @@ ngb-tooltip-window {
|
|||
}
|
||||
|
||||
.input-group {
|
||||
& > .form-control {
|
||||
> .form-control {
|
||||
flex: initial;
|
||||
}
|
||||
|
||||
input.form-control {
|
||||
width: unset !important;
|
||||
flex-grow: 1;
|
||||
|
|
@ -366,7 +376,7 @@ ngb-tooltip-window {
|
|||
border: 1px solid #eee;
|
||||
border-radius: .25rem;
|
||||
|
||||
& > label {
|
||||
> label {
|
||||
position: relative;
|
||||
top: -5px;
|
||||
left: -10px;
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
@mixin show-more-description {
|
||||
color: pvar(--mainColor);
|
||||
cursor: pointer;
|
||||
margin: 10px auto 45px auto;
|
||||
margin: 10px auto 45px;
|
||||
}
|
||||
|
||||
@mixin avatar-row-responsive ($img-margin, $grey-font-size) {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "./_bootstrap-variables";
|
||||
@import './_bootstrap-variables';
|
||||
|
||||
@import '~bootstrap/scss/functions';
|
||||
@import '~bootstrap/scss/variables';
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@font-face{
|
||||
@font-face {
|
||||
font-family: 'Source Sans Pro';
|
||||
font-weight: 200 900;
|
||||
font-style: normal;
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
src: url('../fonts/source-sans/WOFF2/VAR/SourceSans3VF-Roman.ttf.woff2') format('woff2');
|
||||
}
|
||||
|
||||
@font-face{
|
||||
@font-face {
|
||||
font-family: 'Source Sans Pro';
|
||||
font-weight: 200 900;
|
||||
font-style: italic;
|
||||
|
|
|
|||
|
|
@ -21,12 +21,12 @@
|
|||
}
|
||||
|
||||
@mixin miniature-thumbnail {
|
||||
@include disable-outline;
|
||||
|
||||
$play-overlay-transition: 0.2s ease;
|
||||
$play-overlay-height: 26px;
|
||||
$play-overlay-width: 18px;
|
||||
|
||||
@include disable-outline;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
|
|
@ -47,7 +47,8 @@
|
|||
opacity: 0;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
|
||||
&, .icon {
|
||||
&,
|
||||
.icon {
|
||||
transition: all $play-overlay-transition;
|
||||
}
|
||||
|
||||
|
|
@ -79,7 +80,7 @@
|
|||
|
||||
&.blur-filter {
|
||||
filter: blur(20px);
|
||||
transform : scale(1.03);
|
||||
transform: scale(1.03);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -129,10 +130,7 @@
|
|||
column-gap: 30px;
|
||||
grid-template-columns: repeat(
|
||||
auto-fill,
|
||||
minmax(
|
||||
var(--miniatureMinWidth),
|
||||
1fr
|
||||
)
|
||||
minmax(var(--miniatureMinWidth), 1fr)
|
||||
);
|
||||
|
||||
.video-wrapper,
|
||||
|
|
|
|||
|
|
@ -1,7 +1,9 @@
|
|||
@import '_variables';
|
||||
|
||||
@mixin disable-default-a-behaviour {
|
||||
&:hover, &:focus, &:active {
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
text-decoration: none !important;
|
||||
outline: none !important;
|
||||
}
|
||||
|
|
@ -22,7 +24,7 @@
|
|||
@mixin ellipsis-multiline($font-size: 16px, $number-of-lines: 2) {
|
||||
display: block;
|
||||
/* Fallback for non-webkit */
|
||||
display: -webkit-box;
|
||||
display: -webkit-box; /* stylelint-disable-line value-no-vendor-prefix */
|
||||
-webkit-line-clamp: $number-of-lines;
|
||||
/* Fallback for non-webkit */
|
||||
font-size: $font-size;
|
||||
|
|
@ -36,7 +38,7 @@
|
|||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&:after {
|
||||
&::after {
|
||||
content: '';
|
||||
pointer-events: none;
|
||||
width: 100%;
|
||||
|
|
@ -109,9 +111,9 @@
|
|||
padding-bottom: 0;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
.input-group-text{
|
||||
.input-group-text {
|
||||
font-size: 14px;
|
||||
color: gray;
|
||||
color: #808080;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -128,7 +130,9 @@
|
|||
@mixin orange-button {
|
||||
@include button-focus(pvar(--mainColorLightest));
|
||||
|
||||
&, &:active, &:focus {
|
||||
&,
|
||||
&:active,
|
||||
&:focus {
|
||||
color: #fff;
|
||||
background-color: pvar(--mainColor);
|
||||
}
|
||||
|
|
@ -138,14 +142,15 @@
|
|||
background-color: pvar(--mainHoverColor);
|
||||
}
|
||||
|
||||
&[disabled], &.disabled {
|
||||
&[disabled],
|
||||
&.disabled {
|
||||
cursor: default;
|
||||
color: #fff;
|
||||
background-color: #C6C6C6;
|
||||
}
|
||||
|
||||
my-global-icon {
|
||||
@include apply-svg-color(#fff)
|
||||
@include apply-svg-color(#fff);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -155,7 +160,9 @@
|
|||
border: 2px solid pvar(--mainColor);
|
||||
font-weight: $font-semibold;
|
||||
|
||||
&, &:active, &:focus {
|
||||
&,
|
||||
&:active,
|
||||
&:focus {
|
||||
color: pvar(--mainColor);
|
||||
background-color: pvar(--mainBackgroundColor);
|
||||
}
|
||||
|
|
@ -165,14 +172,15 @@
|
|||
background-color: pvar(--mainColorLightest);
|
||||
}
|
||||
|
||||
&[disabled], &.disabled {
|
||||
&[disabled],
|
||||
&.disabled {
|
||||
cursor: default;
|
||||
color: pvar(--mainColor);
|
||||
background-color: #C6C6C6;
|
||||
}
|
||||
|
||||
my-global-icon {
|
||||
@include apply-svg-color(pvar(--mainColor))
|
||||
@include apply-svg-color(pvar(--mainColor));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -182,12 +190,13 @@
|
|||
color: pvar(--greyForegroundColor);
|
||||
background-color: transparent;
|
||||
|
||||
&[disabled], &.disabled {
|
||||
&[disabled],
|
||||
.disabled {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
my-global-icon {
|
||||
@include apply-svg-color(transparent)
|
||||
@include apply-svg-color(transparent);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -197,17 +206,22 @@
|
|||
background-color: $grey-background-color;
|
||||
color: pvar(--greyForegroundColor);
|
||||
|
||||
&:hover, &:active, &:focus, &[disabled], &.disabled {
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus,
|
||||
&[disabled],
|
||||
&.disabled {
|
||||
color: pvar(--greyForegroundColor);
|
||||
background-color: $grey-background-hover-color;
|
||||
}
|
||||
|
||||
&[disabled], &.disabled {
|
||||
&[disabled],
|
||||
&.disabled {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
my-global-icon {
|
||||
@include apply-svg-color(pvar(--greyForegroundColor))
|
||||
@include apply-svg-color(pvar(--greyForegroundColor));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -216,24 +230,30 @@
|
|||
$text: #fff6f5;
|
||||
|
||||
@include button-focus(scale-color($color, $alpha: -95%));
|
||||
|
||||
background-color: $color;
|
||||
color: $text;
|
||||
|
||||
&:hover, &:active, &:focus, &[disabled], &.disabled {
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus,
|
||||
&[disabled],
|
||||
&.disabled {
|
||||
background-color: lighten($color: $color, $amount: 10);
|
||||
}
|
||||
|
||||
&[disabled], &.disabled {
|
||||
&[disabled],
|
||||
&.disabled {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
my-global-icon {
|
||||
@include apply-svg-color($text)
|
||||
@include apply-svg-color($text);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin peertube-button {
|
||||
border: none;
|
||||
border: 0;
|
||||
font-weight: $font-semibold;
|
||||
font-size: 15px;
|
||||
height: $button-height;
|
||||
|
|
@ -246,18 +266,17 @@
|
|||
}
|
||||
|
||||
@mixin peertube-button-link {
|
||||
display: inline-block;
|
||||
|
||||
@include disable-default-a-behaviour;
|
||||
@include peertube-button;
|
||||
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@mixin peertube-button-outline {
|
||||
display: inline-block;
|
||||
|
||||
@include disable-default-a-behaviour;
|
||||
@include peertube-button;
|
||||
|
||||
display: inline-block;
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
|
|
@ -291,17 +310,17 @@
|
|||
filter: alpha(opacity=0);
|
||||
opacity: 0;
|
||||
outline: none;
|
||||
background: white;
|
||||
background: #fff;
|
||||
cursor: inherit;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin peertube-button-file ($width) {
|
||||
width: $width;
|
||||
|
||||
@include peertube-file;
|
||||
@include peertube-button;
|
||||
|
||||
width: $width;
|
||||
}
|
||||
|
||||
@mixin icon ($size) {
|
||||
|
|
@ -317,7 +336,7 @@
|
|||
@mixin select-arrow-down {
|
||||
top: 50%;
|
||||
right: calc(0% + 15px);
|
||||
content: " ";
|
||||
content: ' ';
|
||||
height: 0;
|
||||
width: 0;
|
||||
position: absolute;
|
||||
|
|
@ -358,7 +377,7 @@
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
&:after {
|
||||
&::after {
|
||||
@include select-arrow-down;
|
||||
}
|
||||
|
||||
|
|
@ -394,21 +413,21 @@
|
|||
option {
|
||||
font-weight: $font-semibold;
|
||||
color: pvar(--greyForegroundColor);
|
||||
border: none;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Thanks: https://codepen.io/triss90/pen/XNEdRe/
|
||||
@mixin peertube-radio-container {
|
||||
input[type="radio"] {
|
||||
input[type=radio] {
|
||||
display: none;
|
||||
|
||||
& + label {
|
||||
+ label {
|
||||
font-weight: $font-regular;
|
||||
cursor: pointer;
|
||||
|
||||
&:before {
|
||||
&::before {
|
||||
position: relative;
|
||||
top: -2px;
|
||||
content: '';
|
||||
|
|
@ -425,12 +444,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
&:checked + label:before {
|
||||
&:checked + label::before {
|
||||
background-color: #000;
|
||||
box-shadow: inset 0 0 0 4px #fff;
|
||||
}
|
||||
|
||||
&:focus + label:before {
|
||||
&:focus + label::before {
|
||||
outline: none;
|
||||
border-color: #000;
|
||||
}
|
||||
|
|
@ -445,7 +464,7 @@
|
|||
box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
|
||||
}
|
||||
|
||||
& + span {
|
||||
+ span {
|
||||
position: relative;
|
||||
width: 18px;
|
||||
min-width: 18px;
|
||||
|
|
@ -455,7 +474,7 @@
|
|||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
|
||||
&:after {
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: calc(2px - #{$border-width});
|
||||
|
|
@ -474,13 +493,13 @@
|
|||
background: pvar(--mainColor);
|
||||
animation: jelly 0.6s ease;
|
||||
|
||||
&:after {
|
||||
&::after {
|
||||
opacity: 1;
|
||||
transform: rotate(45deg) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
& + span + span {
|
||||
+ span + span {
|
||||
font-size: 15px;
|
||||
font-weight: $font-regular;
|
||||
margin-left: 5px;
|
||||
|
|
@ -489,7 +508,7 @@
|
|||
}
|
||||
|
||||
&[disabled] + span,
|
||||
&[disabled] + span + span{
|
||||
&[disabled] + span + span {
|
||||
opacity: 0.5;
|
||||
cursor: default;
|
||||
}
|
||||
|
|
@ -685,13 +704,13 @@
|
|||
color: pvar(--mainColor);
|
||||
}
|
||||
|
||||
& + .breadcrumb-item {
|
||||
+ .breadcrumb-item {
|
||||
padding-left: 0.5rem;
|
||||
&::before {
|
||||
display: inline-block;
|
||||
padding-right: 0.5rem;
|
||||
color: #6c757d;
|
||||
content: "/";
|
||||
content: '/';
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -706,13 +725,13 @@
|
|||
flex-wrap: wrap;
|
||||
margin: 0 -5px;
|
||||
|
||||
& > div {
|
||||
> div {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 percentage(1/3);
|
||||
padding: 0 5px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
& > a {
|
||||
> a {
|
||||
@include disable-default-a-behaviour;
|
||||
|
||||
text-decoration: none;
|
||||
|
|
@ -727,8 +746,8 @@
|
|||
}
|
||||
}
|
||||
|
||||
& > a,
|
||||
& > div {
|
||||
> a,
|
||||
> div {
|
||||
padding: 20px;
|
||||
background: pvar(--submenuBackgroundColor);
|
||||
border-radius: 4px;
|
||||
|
|
@ -737,7 +756,8 @@
|
|||
}
|
||||
}
|
||||
|
||||
.dashboard-num, .dashboard-text {
|
||||
.dashboard-num,
|
||||
.dashboard-text {
|
||||
text-align: center;
|
||||
font-size: 130%;
|
||||
color: pvar(--mainForegroundColor);
|
||||
|
|
@ -831,7 +851,7 @@
|
|||
flex-direction: column;
|
||||
|
||||
.form-sub-title {
|
||||
margin-right: 0px !important;
|
||||
margin-right: 0 !important;
|
||||
margin-bottom: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -60,7 +60,7 @@ $max-channels-width: 1200px;
|
|||
$footer-height: 30px;
|
||||
$footer-margin: 30px;
|
||||
|
||||
$separator-border-color: rgba(0, 0, 0, 0.10);
|
||||
$separator-border-color: rgba(0, 0, 0, 0.1);
|
||||
|
||||
$video-miniature-margin-bottom: 15px;
|
||||
|
||||
|
|
@ -90,7 +90,7 @@ $markdown-textarea-background-color: $grey-background-hover-color;
|
|||
$sub-menu-margin-bottom: 30px;
|
||||
$sub-menu-margin-bottom-small-view: 10px;
|
||||
|
||||
$activated-action-button-color: black;
|
||||
$activated-action-button-color: #000;
|
||||
|
||||
$focus-box-shadow-form: 0 0 0 .2rem;
|
||||
|
||||
|
|
@ -147,7 +147,7 @@ $variables: (
|
|||
@if map-has-key($variables, $variable) {
|
||||
@return map-get($variables, $variable);
|
||||
} @else {
|
||||
@error "ERROR: Variable #{$variable} does not exist";
|
||||
@error 'ERROR: Variable #{$variable} does not exist';
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ $ng-select-height: 30px;
|
|||
$ng-select-value-padding-left: 15px;
|
||||
$ng-select-value-font-size: 15px;
|
||||
|
||||
@import "~@ng-select/ng-select/scss/default.theme.scss";
|
||||
@import '~@ng-select/ng-select/scss/default.theme';
|
||||
|
||||
.ng-select {
|
||||
font-size: $ng-select-value-font-size;
|
||||
|
|
@ -31,13 +31,13 @@ $ng-select-value-font-size: 15px;
|
|||
}
|
||||
|
||||
.ng-arrow-wrapper {
|
||||
padding-right: 12px
|
||||
padding-right: 12px;
|
||||
}
|
||||
|
||||
&.ng-select-single .ng-value-container .ng-value {
|
||||
color: pvar(--inputForegroundColor);
|
||||
|
||||
.ng-value-label {
|
||||
.ng-value-label { /* stylelint-disable-line */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
|
@ -45,7 +45,8 @@ $ng-select-value-font-size: 15px;
|
|||
|
||||
&.ng-select-multiple .ng-select-container .ng-value-container {
|
||||
padding-left: 12px;
|
||||
.ng-value {
|
||||
|
||||
.ng-value { /* stylelint-disable-line */
|
||||
margin-left: 3px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -31,26 +31,26 @@ $context-menu-width: 350px;
|
|||
background-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
[class^="vjs-icon-"] {
|
||||
[class^='vjs-icon-'] {
|
||||
$icons: 'link-2', 'repeat', 'code', 'tick-white', 'info';
|
||||
|
||||
display: inline-flex;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
cursor: pointer;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
background-color: white;
|
||||
background-color: #fff;
|
||||
mask-size: cover;
|
||||
margin-right: 0.8rem !important;
|
||||
|
||||
$icons: 'link-2', 'repeat', 'code', 'tick-white', 'info';
|
||||
|
||||
@each $icon in $icons {
|
||||
&[class$="-#{$icon}"] {
|
||||
mask-image: url('#{$assets-path}/player/images/#{$icon}.svg');
|
||||
}
|
||||
}
|
||||
|
||||
&[class$="-tick-white"] {
|
||||
&[class$='-tick-white'] {
|
||||
float: right;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue