mirror of https://github.com/FreeTubeApp/FreeTube
Merge branch 'development' into piped-support
This commit is contained in:
ChunkyProgrammer
commit
f0733a7662
|
|
@ -1,5 +1,6 @@
|
|||
{
|
||||
"plugins": ["stylelint-use-logical-spec"],
|
||||
"plugins": ["stylelint-use-logical-spec", "@double-great/stylelint-a11y"],
|
||||
"extends": ["stylelint-config-standard", "stylelint-config-sass-guidelines"],
|
||||
"overrides": [
|
||||
{
|
||||
"files": ["**/*.scss"],
|
||||
|
|
@ -16,6 +17,19 @@
|
|||
}
|
||||
],
|
||||
"rules": {
|
||||
"selector-no-qualifying-type": [
|
||||
true, {
|
||||
"ignore": ["attribute"]
|
||||
}],
|
||||
"selector-class-pattern": null,
|
||||
"selector-id-pattern": null,
|
||||
"selector-pseudo-class-no-unknown": [
|
||||
true,
|
||||
{
|
||||
"ignorePseudoClasses": ["deep"]
|
||||
}
|
||||
],
|
||||
"a11y/no-outline-none": true,
|
||||
"liberty/use-logical-spec": ["always", { "except": ["float"] }]
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
@font-face {
|
||||
font-family: Roboto;
|
||||
src: url(assets/font/Roboto-Regular.ttf);
|
||||
src: url("assets/font/Roboto-Regular.ttf");
|
||||
}
|
||||
|
||||
#app {
|
||||
.app {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
font-family: 'Roboto', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
font-family: Roboto, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
block-size: 100%;
|
||||
}
|
||||
|
||||
|
|
@ -30,23 +30,23 @@
|
|||
.flexBox {
|
||||
display: block;
|
||||
user-select: unset;
|
||||
-webkit-user-select: unset;
|
||||
}
|
||||
|
||||
#changeLogText {
|
||||
.changeLogText {
|
||||
overflow-y: scroll;
|
||||
block-size: 40vh;
|
||||
display: block
|
||||
display: block;
|
||||
}
|
||||
|
||||
.fade-enter-active, .fade-leave-active {
|
||||
transition: opacity .15s;
|
||||
}
|
||||
|
||||
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 680px) {
|
||||
@media only screen and (width <= 680px) {
|
||||
.routerView {
|
||||
margin-block: 68px;
|
||||
margin-inline: 8px;
|
||||
|
|
@ -58,7 +58,6 @@
|
|||
}
|
||||
|
||||
.flexBox {
|
||||
margin-block-start: 60px;
|
||||
margin-block-end: -75px;
|
||||
margin-block: 60px -75px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
<div
|
||||
v-if="dataReady"
|
||||
id="app"
|
||||
class="app"
|
||||
:class="{
|
||||
hideOutlines: outlinesHidden,
|
||||
isLocaleRightToLeft: isLocaleRightToLeft
|
||||
|
|
@ -52,7 +53,7 @@
|
|||
@click="showReleaseNotes = !showReleaseNotes"
|
||||
>
|
||||
<span
|
||||
id="changeLogText"
|
||||
class="changeLogText"
|
||||
v-html="updateChangelog"
|
||||
/>
|
||||
<ft-flex-box>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
@media only screen and (max-width: 800px) {
|
||||
br.hide-on-mobile {
|
||||
@media only screen and (width <= 800px) {
|
||||
.hide-on-mobile {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
.experimental-warning {
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
padding-inline-start: 4%;
|
||||
padding-inline-end: 4%
|
||||
padding-inline: 4% 4%
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.btn {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-family: Roboto, sans-serif;
|
||||
min-inline-size: 100px;
|
||||
font-size: 0.9rem;
|
||||
padding-block: 10px;
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
font-weight: 500;
|
||||
vertical-align: middle;
|
||||
margin: 5px;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
|
||||
box-shadow: 0 1px 2px rgb(0 0 0 / 50%);
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
|
|
@ -32,7 +32,7 @@
|
|||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
.ripple:after {
|
||||
.ripple::after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
|
|
@ -49,7 +49,7 @@
|
|||
transition: transform .5s, opacity 1s;
|
||||
}
|
||||
|
||||
.ripple:active:after {
|
||||
.ripple:active::after {
|
||||
transform: scale(0, 0);
|
||||
opacity: .3;
|
||||
transition: 0s;
|
||||
|
|
|
|||
|
|
@ -3,5 +3,5 @@
|
|||
margin: 8px;
|
||||
padding-block: 3px 16px;
|
||||
padding-inline: 16px;
|
||||
box-shadow: 0 1px 2px rgba(0,0,0,.1);
|
||||
box-shadow: 0 1px 2px rgb(0 0 0 / 10%);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,18 +24,17 @@
|
|||
inline-size: 50px;
|
||||
block-size: 50px;
|
||||
border-radius: 100%;
|
||||
-webkit-border-radius: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.selected {
|
||||
position: absolute;
|
||||
inset-block-start: 10px;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
background-color: rgb(0 0 0 / 50%);
|
||||
}
|
||||
|
||||
.icon {
|
||||
color: #EEEEEE;
|
||||
color: #EEE;
|
||||
font-size: 25px;
|
||||
position: absolute;
|
||||
inset-block-start: 12px;
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
|
||||
.filled-circle {
|
||||
border-radius: 50%;
|
||||
background-color: black;
|
||||
background-color: #000;
|
||||
float: var(--float-left-ltr-rtl-value);
|
||||
block-size: 6px;
|
||||
inset-inline-start: 2px;
|
||||
|
|
@ -33,11 +33,10 @@
|
|||
.option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-block-end: 10px;
|
||||
padding-block: 5px;
|
||||
border-radius: 5px;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
padding-block: 5px;
|
||||
padding-inline-start: 10px;
|
||||
margin-block-end: 10px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
/* stylelint-disable property-no-vendor-prefix */
|
||||
@use '../../scss-partials/_ft-list-item';
|
||||
@use '../../scss-partials/ft-list-item';
|
||||
|
||||
.outside {
|
||||
margin: auto;
|
||||
inline-size: 40%;
|
||||
@media screen and (max-width: 768px) {
|
||||
|
||||
@media screen and (width <= 768px) {
|
||||
inline-size: 100%;
|
||||
}
|
||||
}
|
||||
|
|
@ -25,7 +26,6 @@
|
|||
}
|
||||
|
||||
.communityThumbnail {
|
||||
-webkit-border-radius: 50%;
|
||||
border-radius: 50%;
|
||||
block-size: 55px;
|
||||
margin-inline-end: 5px;
|
||||
|
|
@ -40,6 +40,7 @@
|
|||
font-weight: bold;
|
||||
margin-block: 5px 0;
|
||||
margin-inline: 5px 6px;
|
||||
|
||||
.authorNameLink {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
|
|
@ -67,7 +68,7 @@
|
|||
max-inline-size: 210px;
|
||||
text-align: start;
|
||||
|
||||
@media screen and (max-width: 680px) {
|
||||
@media screen and (width <= 680px) {
|
||||
margin-inline-start: 0;
|
||||
text-align: start;
|
||||
}
|
||||
|
|
@ -79,8 +80,7 @@
|
|||
}
|
||||
|
||||
.likeCount {
|
||||
margin-inline-start: 5px;
|
||||
margin-inline-end: 6px;
|
||||
margin-inline: 5px 6px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -89,8 +89,7 @@
|
|||
|
||||
.videoThumbnail {
|
||||
display: flex;
|
||||
margin-block-end: auto;
|
||||
margin-block-start: auto;
|
||||
margin-block: auto;
|
||||
position: relative;
|
||||
inline-size: fit-content;
|
||||
|
||||
|
|
|
|||
|
|
@ -3,5 +3,4 @@
|
|||
flex-flow: row wrap;
|
||||
justify-content: space-evenly;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,8 +3,6 @@
|
|||
flex-flow: row wrap;
|
||||
justify-content: space-evenly;
|
||||
position: relative;
|
||||
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
|
|
@ -90,7 +88,6 @@
|
|||
list-style-type: none;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
z-index: 3;
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
}
|
||||
|
||||
.disabledMsg {
|
||||
color: rgb(233, 255, 108);
|
||||
color: rgb(233 255 108);
|
||||
padding-block-end: 10px;
|
||||
}
|
||||
|
||||
|
|
@ -53,7 +53,7 @@
|
|||
color: var(--primary-text-color);
|
||||
opacity: 0.5;
|
||||
padding: 10px;
|
||||
padding-inline-start: 0px;
|
||||
padding-inline-start: 0;
|
||||
}
|
||||
|
||||
.removeTagButton:hover {
|
||||
|
|
@ -64,7 +64,7 @@
|
|||
margin-block-start: 10px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 576px) {
|
||||
@media only screen and (width <= 576px) {
|
||||
.ft-input-tags-component {
|
||||
inline-size: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
/* stylelint-disable no-descending-specificity */
|
||||
.ft-input-component {
|
||||
position: relative;
|
||||
}
|
||||
|
|
@ -49,6 +50,7 @@
|
|||
position: absolute;
|
||||
inset-block-start: 5px;
|
||||
inset-inline-start: 0;
|
||||
|
||||
/* To be higher than `.inputWrapper` */
|
||||
z-index: 1;
|
||||
margin-block: 0;
|
||||
|
|
@ -80,7 +82,7 @@
|
|||
}
|
||||
|
||||
.forceTextColor .clearInputTextButton {
|
||||
color: #EEEEEE;
|
||||
color: #EEE;
|
||||
}
|
||||
|
||||
.forceTextColor .clearInputTextButton:active {
|
||||
|
|
@ -89,12 +91,10 @@
|
|||
|
||||
.ft-input {
|
||||
box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
outline: none;
|
||||
inline-size: 100%;
|
||||
padding: 1rem;
|
||||
border: none;
|
||||
border: 0;
|
||||
margin-block-end: 10px;
|
||||
font-size: 16px;
|
||||
block-size: 45px;
|
||||
|
|
@ -103,26 +103,23 @@
|
|||
background-color: var(--search-bar-color);
|
||||
}
|
||||
|
||||
.ft-input-component ::-webkit-input-placeholder {
|
||||
.ftcomponent ::placeholder {
|
||||
color: var(--tertiary-text-color);
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
.forceTextColor .ft-input {
|
||||
color: #EEEEEE;
|
||||
color: #EEE;
|
||||
background-color: var(--primary-input-color);
|
||||
}
|
||||
|
||||
.forceTextColor .ft-input:focus {
|
||||
box-shadow: 0 0 1rem 0 var(--primary-input-color);
|
||||
-moz-transition: box-shadow 0.2s ease-in-out;
|
||||
-o-transition: box-shadow 0.2s ease-in-out;
|
||||
transition: box-shadow 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.forceTextColor ::-webkit-input-placeholder {
|
||||
color: #EEEEEE;
|
||||
.forceTextColor ::placeholder {
|
||||
color: #EEE;
|
||||
}
|
||||
|
||||
.inputWrapper {
|
||||
|
|
@ -138,12 +135,14 @@
|
|||
inset-inline-end: 0;
|
||||
border-radius: 100%;
|
||||
color: var(--primary-text-color);
|
||||
|
||||
/* this should look disabled by default */
|
||||
opacity: 50%;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.inputAction.enabled {
|
||||
opacity: 100%;
|
||||
opacity: 1;
|
||||
|
||||
/* Only look respond to cursor when enabled */
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -154,7 +153,7 @@
|
|||
}
|
||||
|
||||
.forceTextColor .inputAction {
|
||||
color: #EEEEEE;
|
||||
color: #EEE;
|
||||
}
|
||||
|
||||
.ft-input-component.showActionButton .ft-input {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,11 @@
|
|||
@use '../../scss-partials/_ft-list-item';
|
||||
@use '../../scss-partials/ft-list-item';
|
||||
|
||||
.infoAndSubscribe {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: center;
|
||||
inline-size: 100%;
|
||||
}
|
||||
|
||||
.ft-list-channel {
|
||||
&.grid {
|
||||
|
|
@ -21,9 +28,6 @@
|
|||
|
||||
&.list {
|
||||
.infoAndSubscribe {
|
||||
flex-flow: row wrap;
|
||||
justify-content: center;
|
||||
|
||||
.channelSubscribeButton {
|
||||
margin-block: auto;
|
||||
margin-inline: 7px;
|
||||
|
|
@ -32,13 +36,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.infoAndSubscribe {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: center;
|
||||
inline-size: 100%;
|
||||
}
|
||||
|
||||
.handle {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@use '../../scss-partials/_ft-list-item';
|
||||
@use '../../scss-partials/ft-list-item';
|
||||
|
||||
.hashtagImage {
|
||||
color: var(--primary-text-color);
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
@use '../../scss-partials/_ft-list-item';
|
||||
@use '../../scss-partials/ft-list-item';
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@use '../../scss-partials/_ft-list-item';
|
||||
@use '../../scss-partials/ft-list-item';
|
||||
|
||||
.thumbnailLink:hover {
|
||||
outline: 3px solid var(--side-nav-hover-color);
|
||||
|
|
|
|||
|
|
@ -53,34 +53,20 @@
|
|||
inset-block-start: 0;
|
||||
inset-inline-start: 0;
|
||||
background-color: var(--primary-color);
|
||||
|
||||
-webkit-animation: sk-bounce 2.0s infinite ease-in-out;
|
||||
animation: sk-bounce 2.0s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.double-bounce2 {
|
||||
-webkit-animation-delay: -1.0s;
|
||||
animation-delay: -1.0s;
|
||||
}
|
||||
|
||||
@-webkit-keyframes sk-bounce {
|
||||
0%,
|
||||
100% {
|
||||
-webkit-transform: scale(0.0)
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: scale(1.0)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sk-bounce {
|
||||
0%,
|
||||
100% {
|
||||
transform: scale(0.0);
|
||||
-webkit-transform: scale(0.0);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale(1.0);
|
||||
-webkit-transform: scale(1.0);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
.ftNotificationBanner {
|
||||
background-color: var(--primary-color);
|
||||
color: var(--text-with-main-color);
|
||||
|
||||
/*
|
||||
background-color: var(--accent-color);
|
||||
color: var(--text-with-accent-color);
|
||||
|
|
@ -9,13 +10,13 @@
|
|||
padding: 16px;
|
||||
padding-block: 3px 5px;
|
||||
padding-inline: 16px;
|
||||
box-shadow: 0 1px 2px rgba(0,0,0,.1);
|
||||
box-shadow: 0 1px 2px rgb(0 0 0 / 10%);
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ftNotificationBanner:focus {
|
||||
box-shadow: 20px 20px 20px rgba(0,0,0,.1);
|
||||
box-shadow: 20px 20px 20px rgb(0 0 0 / 10%);
|
||||
}
|
||||
|
||||
.message {
|
||||
|
|
|
|||
|
|
@ -23,7 +23,8 @@
|
|||
grid-template-columns: 1fr auto;
|
||||
column-gap: 16px;
|
||||
}
|
||||
@media only screen and (max-width: 800px) {
|
||||
|
||||
@media only screen and (width <= 800px) {
|
||||
.searchInputsRow {
|
||||
/* Switch to 2 rows from 2 columns */
|
||||
grid-template-columns: auto;
|
||||
|
|
@ -37,7 +38,8 @@
|
|||
grid-template-rows: 1fr;
|
||||
align-items: center;
|
||||
}
|
||||
@media only screen and (max-width: 800px) {
|
||||
|
||||
@media only screen and (width <= 800px) {
|
||||
.optionsRow {
|
||||
/* Switch to 2 rows from 2 columns */
|
||||
grid-template-columns: auto;
|
||||
|
|
@ -52,11 +54,10 @@
|
|||
}
|
||||
|
||||
.playlists-container {
|
||||
box-shadow: inset 0 0 5px rgba(0,0,0,.5);
|
||||
box-shadow: inset 0 0 5px rgb(0 0 0 / 50%);
|
||||
|
||||
/* Use remaining height */
|
||||
flex-grow: 1;
|
||||
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -107,7 +107,9 @@ export default defineComponent({
|
|||
newPlaylistDefaultProperties: function () {
|
||||
return this.$store.getters.getNewPlaylistDefaultProperties
|
||||
},
|
||||
|
||||
locale: function () {
|
||||
return this.$i18n.locale.replace('_', '-')
|
||||
},
|
||||
processedQuery: function() {
|
||||
return this.query.trim().toLowerCase()
|
||||
},
|
||||
|
|
|
|||
|
|
@ -15,11 +15,9 @@
|
|||
|
||||
.videoCountContainer {
|
||||
position: absolute;
|
||||
|
||||
inset-inline-end: 0;
|
||||
inset-block: 0;
|
||||
inline-size: 60px;
|
||||
|
||||
font-size: 20px;
|
||||
|
||||
.background,
|
||||
|
|
@ -38,7 +36,6 @@
|
|||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
}
|
||||
|
|
@ -63,7 +60,6 @@
|
|||
&.grid {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
inline-size: 245px;
|
||||
min-block-size: 230px;
|
||||
padding-block-end: 20px;
|
||||
|
|
@ -77,6 +73,7 @@
|
|||
aspect-ratio: 16/9;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
|
@ -85,9 +82,7 @@
|
|||
|
||||
.selectedIcon {
|
||||
position: absolute;
|
||||
|
||||
inset-block-start: calc(50% - 25px);
|
||||
inset-inline-start: calc(50% - 25px);
|
||||
|
||||
font-size: 50px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,7 +19,6 @@
|
|||
margin-block: 20px 5px;
|
||||
margin-inline: auto;
|
||||
border-radius: 50%;
|
||||
-webkit-border-radius: 50%;
|
||||
}
|
||||
|
||||
.initial {
|
||||
|
|
@ -29,7 +28,6 @@
|
|||
padding-block: 17.5px;
|
||||
padding-inline: 0;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
.profileName {
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ h2, .selectedCount {
|
|||
margin-inline: auto;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 680px) {
|
||||
@media only screen and (width <= 680px) {
|
||||
.card {
|
||||
inline-size: 90%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -45,14 +45,12 @@ h3 {
|
|||
margin: 2px;
|
||||
cursor: pointer;
|
||||
border-radius: 50%;
|
||||
-webkit-border-radius: 50%;
|
||||
}
|
||||
|
||||
.initial {
|
||||
font-size: 37.5px;
|
||||
text-align: center;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
.colorOption:has(.initial) {
|
||||
|
|
@ -84,7 +82,7 @@ h3 {
|
|||
margin-inline: auto;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 680px) {
|
||||
@media only screen and (width <= 680px) {
|
||||
.card {
|
||||
inline-size: 90%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ h2 {
|
|||
margin-inline: auto;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 680px) {
|
||||
@media only screen and (width <= 680px) {
|
||||
.card {
|
||||
inline-size: 90%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
-webkit-border-radius: 50%;
|
||||
}
|
||||
|
||||
.colorOption:hover {
|
||||
|
|
@ -18,7 +17,6 @@
|
|||
line-height: 1em;
|
||||
text-align: center;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
.profileList {
|
||||
|
|
@ -37,6 +35,7 @@
|
|||
margin-block-start: 60px;
|
||||
block-size: auto;
|
||||
overflow-y: auto;
|
||||
|
||||
/*
|
||||
profile list max height: 90% of window size - 100 px. It's scaled to be 340px on 800x600 resolution.
|
||||
Offset of 100px is to compensate for the fixed size of elements above the list, which takes more screen space on lower resolutions
|
||||
|
|
@ -47,7 +46,7 @@
|
|||
|
||||
/* Navbar changes position to horizontal with this media rule.
|
||||
Height adjust for profile list so it won't cover navbar. */
|
||||
@media only screen and (max-width: 680px){
|
||||
@media only screen and (width <= 680px){
|
||||
.profileWrapper {
|
||||
max-block-size: calc(95vh - 180px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
.progressBar {
|
||||
position: fixed;
|
||||
block-size: 3px;
|
||||
inset-block-end: 0px;
|
||||
inset-inline-start: 0px;
|
||||
inset-block-end: 0;
|
||||
inset-inline-start: 0;
|
||||
background-color: var(--primary-color);
|
||||
z-index: 1;
|
||||
transition: inline-size 0.5s;
|
||||
|
|
|
|||
|
|
@ -4,7 +4,8 @@
|
|||
inset-inline-start: 0;
|
||||
inline-size: 100%;
|
||||
block-size: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
background-color: rgb(0 0 0 / 70%);
|
||||
|
||||
/* Higher than components like playlist info */
|
||||
z-index: 200;
|
||||
padding: 15px;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
/* stylelint-disable no-descending-specificity */
|
||||
pure-checkbox input[type="checkbox"], .pure-radiobutton input[type="checkbox"], .pure-checkbox input[type="radio"], .pure-radiobutton input[type="radio"] {
|
||||
border: 0;
|
||||
clip: rect(0 0 0 0);
|
||||
|
|
@ -9,24 +10,22 @@ pure-checkbox input[type="checkbox"], .pure-radiobutton input[type="checkbox"],
|
|||
inline-size: 1px;
|
||||
}
|
||||
|
||||
.pure-checkbox input[type="checkbox"]:focus + label:before, .pure-radiobutton input[type="checkbox"]:focus + label:before, .pure-checkbox input[type="radio"]:focus + label:before, .pure-radiobutton input[type="radio"]:focus + label:before, .pure-checkbox input[type="checkbox"]:hover + label:before, .pure-radiobutton input[type="checkbox"]:hover + label:before, .pure-checkbox input[type="radio"]:hover + label:before, .pure-radiobutton input[type="radio"]:hover + label:before {
|
||||
.pure-checkbox input[type="checkbox"]:focus + label::before, .pure-radiobutton input[type="checkbox"]:focus + label::before, .pure-checkbox input[type="radio"]:focus + label::before, .pure-radiobutton input[type="radio"]:focus + label::before, .pure-checkbox input[type="checkbox"]:hover + label::before, .pure-radiobutton input[type="checkbox"]:hover + label::before, .pure-checkbox input[type="radio"]:hover + label::before, .pure-radiobutton input[type="radio"]:hover + label::before {
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
|
||||
.pure-checkbox input[type="checkbox"]:active + label:before, .pure-radiobutton input[type="checkbox"]:active + label:before, .pure-checkbox input[type="radio"]:active + label:before, .pure-radiobutton input[type="radio"]:active + label:before { transition-duration: 0s; }
|
||||
.pure-checkbox input[type="checkbox"]:active + label::before, .pure-radiobutton input[type="checkbox"]:active + label::before, .pure-checkbox input[type="radio"]:active + label::before, .pure-radiobutton input[type="radio"]:active + label::before { transition-duration: 0s; }
|
||||
|
||||
.pure-checkbox input[type="checkbox"] + label, .pure-radiobutton input[type="checkbox"] + label, .pure-checkbox input[type="radio"] + label, .pure-radiobutton input[type="radio"] + label {
|
||||
position: relative;
|
||||
padding-inline-start: 2em;
|
||||
vertical-align: middle;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
margin-block-end: -20px;
|
||||
}
|
||||
|
||||
.pure-checkbox input[type="checkbox"] + label:before, .pure-radiobutton input[type="checkbox"] + label:before, .pure-checkbox input[type="radio"] + label:before, .pure-radiobutton input[type="radio"] + label:before {
|
||||
.pure-checkbox input[type="checkbox"] + label::before, .pure-radiobutton input[type="checkbox"] + label::before, .pure-checkbox input[type="radio"] + label::before, .pure-radiobutton input[type="radio"] + label::before {
|
||||
box-sizing: content-box;
|
||||
content: '';
|
||||
color: var(--primary-color);
|
||||
|
|
@ -41,7 +40,7 @@ pure-checkbox input[type="checkbox"], .pure-radiobutton input[type="checkbox"],
|
|||
transition: all 0.4s ease;
|
||||
}
|
||||
|
||||
.pure-checkbox input[type="checkbox"] + label:after, .pure-radiobutton input[type="checkbox"] + label:after, .pure-checkbox input[type="radio"] + label:after, .pure-radiobutton input[type="radio"] + label:after {
|
||||
.pure-checkbox input[type="checkbox"] + label::after, .pure-radiobutton input[type="checkbox"] + label::after, .pure-checkbox input[type="radio"] + label::after, .pure-radiobutton input[type="radio"] + label::after {
|
||||
box-sizing: content-box;
|
||||
content: '';
|
||||
background-color: var(--primary-color);
|
||||
|
|
@ -56,13 +55,13 @@ pure-checkbox input[type="checkbox"], .pure-radiobutton input[type="checkbox"],
|
|||
transition: transform 200ms ease-out;
|
||||
}
|
||||
|
||||
.pure-checkbox input[type="checkbox"]:disabled + label:before, .pure-radiobutton input[type="checkbox"]:disabled + label:before, .pure-checkbox input[type="radio"]:disabled + label:before, .pure-radiobutton input[type="radio"]:disabled + label:before { border-color: #cccccc; }
|
||||
.pure-checkbox input[type="checkbox"]:disabled + label::before, .pure-radiobutton input[type="checkbox"]:disabled + label::before, .pure-checkbox input[type="radio"]:disabled + label::before, .pure-radiobutton input[type="radio"]:disabled + label::before { border-color: #ccc; }
|
||||
|
||||
.pure-checkbox input[type="checkbox"]:disabled:focus + label:before, .pure-radiobutton input[type="checkbox"]:disabled:focus + label:before, .pure-checkbox input[type="radio"]:disabled:focus + label:before, .pure-radiobutton input[type="radio"]:disabled:focus + label:before, .pure-checkbox input[type="checkbox"]:disabled:hover + label:before, .pure-radiobutton input[type="checkbox"]:disabled:hover + label:before, .pure-checkbox input[type="radio"]:disabled:hover + label:before, .pure-radiobutton input[type="radio"]:disabled:hover + label:before { background-color: inherit; }
|
||||
.pure-checkbox input[type="checkbox"]:disabled:focus + label::before, .pure-radiobutton input[type="checkbox"]:disabled:focus + label::before, .pure-checkbox input[type="radio"]:disabled:focus + label::before, .pure-radiobutton input[type="radio"]:disabled:focus + label::before, .pure-checkbox input[type="checkbox"]:disabled:hover + label::before, .pure-radiobutton input[type="checkbox"]:disabled:hover + label::before, .pure-checkbox input[type="radio"]:disabled:hover + label::before, .pure-radiobutton input[type="radio"]:disabled:hover + label::before { background-color: inherit; }
|
||||
|
||||
.pure-checkbox input[type="checkbox"]:disabled:checked + label:before, .pure-radiobutton input[type="checkbox"]:disabled:checked + label:before, .pure-checkbox input[type="radio"]:disabled:checked + label:before, .pure-radiobutton input[type="radio"]:disabled:checked + label:before { background-color: #cccccc; }
|
||||
.pure-checkbox input[type="checkbox"]:disabled:checked + label::before, .pure-radiobutton input[type="checkbox"]:disabled:checked + label::before, .pure-checkbox input[type="radio"]:disabled:checked + label::before, .pure-radiobutton input[type="radio"]:disabled:checked + label::before { background-color: #ccc; }
|
||||
|
||||
.pure-checkbox input[type="checkbox"] + label:after, .pure-radiobutton input[type="checkbox"] + label:after {
|
||||
.pure-checkbox input[type="checkbox"] + label::after, .pure-radiobutton input[type="checkbox"] + label::after {
|
||||
background-color: transparent;
|
||||
inset-block-start: 50%;
|
||||
inset-inline-start: 4px;
|
||||
|
|
@ -75,26 +74,26 @@ pure-checkbox input[type="checkbox"], .pure-radiobutton input[type="checkbox"],
|
|||
transform: rotate(-45deg) scale(0);
|
||||
}
|
||||
|
||||
.pure-checkbox input[type="checkbox"]:checked + label:after, .pure-radiobutton input[type="checkbox"]:checked + label:after {
|
||||
.pure-checkbox input[type="checkbox"]:checked + label::after, .pure-radiobutton input[type="checkbox"]:checked + label::after {
|
||||
content: '';
|
||||
transform: rotate(-45deg) scale(1);
|
||||
transition: transform 200ms ease-out;
|
||||
}
|
||||
|
||||
.pure-checkbox input[type="radio"]:checked + label:before, .pure-radiobutton input[type="radio"]:checked + label:before {
|
||||
.pure-checkbox input[type="radio"]:checked + label::before, .pure-radiobutton input[type="radio"]:checked + label::before {
|
||||
animation: borderscale 300ms ease-in;
|
||||
}
|
||||
|
||||
.pure-checkbox input[type="radio"]:checked + label:after, .pure-radiobutton input[type="radio"]:checked + label:after { transform: scale(1); }
|
||||
.pure-checkbox input[type="radio"]:checked + label::after, .pure-radiobutton input[type="radio"]:checked + label::after { transform: scale(1); }
|
||||
|
||||
.pure-checkbox input[type="radio"] + label:before, .pure-radiobutton input[type="radio"] + label:before, .pure-checkbox input[type="radio"] + label:after, .pure-radiobutton input[type="radio"] + label:after { border-radius: 50%; }
|
||||
.pure-checkbox input[type="radio"] + label::before, .pure-radiobutton input[type="radio"] + label::before, .pure-checkbox input[type="radio"] + label::after, .pure-radiobutton input[type="radio"] + label::after { border-radius: 50%; }
|
||||
|
||||
.pure-checkbox input[type="checkbox"]:checked + label:before, .pure-radiobutton input[type="checkbox"]:checked + label:before {
|
||||
.pure-checkbox input[type="checkbox"]:checked + label::before, .pure-radiobutton input[type="checkbox"]:checked + label::before {
|
||||
animation: borderscale 200ms ease-in;
|
||||
background: var(--primary-color);
|
||||
}
|
||||
|
||||
.pure-checkbox input[type="checkbox"]:checked + label:after, .pure-radiobutton input[type="checkbox"]:checked + label:after { transform: rotate(-45deg) scale(1); }
|
||||
.pure-radiobutton input[type="checkbox"]:checked + label::after { transform: rotate(-45deg) scale(1); }
|
||||
|
||||
@keyframes
|
||||
borderscale { 50% {
|
||||
|
|
|
|||
|
|
@ -1,16 +1,12 @@
|
|||
.searchFilterInner {
|
||||
max-inline-size: 800px;
|
||||
margin-inline-start: auto;
|
||||
margin-inline-end: auto;
|
||||
|
||||
margin-inline: auto;
|
||||
padding-block: 20px 70px;
|
||||
padding-inline: 20px;
|
||||
max-block-size: 410px;
|
||||
overflow-y: auto;
|
||||
|
||||
background-color: var(--card-bg-color);
|
||||
box-shadow: 0 1px 2px rgba(0,0,0,.1);
|
||||
|
||||
box-shadow: 0 1px 2px rgb(0 0 0 / 10%);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
|
|
@ -28,7 +24,7 @@
|
|||
margin-inline: auto;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 600px) {
|
||||
@media only screen and (width <= 600px) {
|
||||
.searchRadio {
|
||||
border-inline-end: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,18 +20,13 @@
|
|||
* https://codepen.io/pavelvaravko/pen/qjojOr
|
||||
*/
|
||||
|
||||
/* select starting stylings ------------------------------*/
|
||||
/* select starting stylings ------------------------------ */
|
||||
.select {
|
||||
position: relative;
|
||||
inline-size: 200px;
|
||||
margin-block-start: 30px;
|
||||
}
|
||||
|
||||
.disabled, .disabled + svg.iconSelect {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.select-text {
|
||||
position: relative;
|
||||
font-family: inherit;
|
||||
|
|
@ -42,7 +37,7 @@
|
|||
padding-inline-start: 1rem;
|
||||
font-size: 16px;
|
||||
border-radius: 5px;
|
||||
border: none;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.select option {
|
||||
|
|
@ -50,7 +45,7 @@
|
|||
background-color: var(--card-bg-color);
|
||||
}
|
||||
|
||||
/* Remove focus */
|
||||
/* stylelint-disable-next-line a11y/no-outline-none */
|
||||
.select-text:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
|
@ -58,7 +53,6 @@
|
|||
/* Use custom arrow */
|
||||
.select .select-text {
|
||||
appearance: none;
|
||||
-webkit-appearance:none;
|
||||
text-overflow: ellipsis;
|
||||
padding-inline-end: 1.5rem;
|
||||
}
|
||||
|
|
@ -67,6 +61,7 @@
|
|||
position: absolute;
|
||||
inset-block-start: 10px;
|
||||
inset-inline-end: 10px;
|
||||
|
||||
/* Styling the down arrow */
|
||||
padding: 0;
|
||||
content: '';
|
||||
|
|
@ -76,6 +71,11 @@
|
|||
color: var(--tertiary-text-color);
|
||||
}
|
||||
|
||||
.disabled, .disabled + .iconSelect {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.selectTooltip {
|
||||
position: absolute;
|
||||
inset-block-start: -22px;
|
||||
|
|
@ -108,7 +108,7 @@
|
|||
display: block;
|
||||
}
|
||||
|
||||
.select-bar:before, .select-bar:after {
|
||||
.select-bar::before, .select-bar::after {
|
||||
content: '';
|
||||
block-size: 2px;
|
||||
inline-size: 0;
|
||||
|
|
@ -118,16 +118,16 @@
|
|||
transition: 0.2s ease all;
|
||||
}
|
||||
|
||||
.select-bar:before {
|
||||
.select-bar::before {
|
||||
inset-inline-start: 50%;
|
||||
}
|
||||
|
||||
.select-bar:after {
|
||||
.select-bar::after {
|
||||
inset-inline-end: 50%;
|
||||
}
|
||||
|
||||
/* active state */
|
||||
.select-text:focus ~ .select-bar:before, .select-text:focus ~ .select-bar:after {
|
||||
.select-text:focus ~ .select-bar::before, .select-text:focus ~ .select-bar::after {
|
||||
inline-size: 50%;
|
||||
}
|
||||
|
||||
|
|
@ -142,8 +142,8 @@
|
|||
opacity: 0.5;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 800px) {
|
||||
@media only screen and (width <= 800px) {
|
||||
.select {
|
||||
inline-size: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
margin-inline: auto;
|
||||
inline-size: 85%;
|
||||
|
||||
@media only screen and (max-width: 800px) {
|
||||
@media only screen and (width <= 800px) {
|
||||
inline-size: 100%;
|
||||
}
|
||||
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
}
|
||||
|
||||
> div:not(:last-child, .ft-flex-box) {
|
||||
@media only screen and (max-width: 800px) {
|
||||
@media only screen and (width <= 800px) {
|
||||
margin-block-end: 20px;
|
||||
}
|
||||
}
|
||||
|
|
@ -40,7 +40,6 @@
|
|||
}
|
||||
|
||||
.sectionTitle {
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
margin-inline-start: 2%;
|
||||
margin-block: 0.5em;
|
||||
|
|
@ -55,19 +54,23 @@
|
|||
margin-block: 0.5em;
|
||||
}
|
||||
|
||||
:deep(.switchGrid) {
|
||||
%switch-grid {
|
||||
align-items: center;
|
||||
display: grid;
|
||||
grid-template-columns: auto auto;
|
||||
justify-content: space-evenly;
|
||||
|
||||
@media only screen and (max-width: 680px) {
|
||||
@media only screen and (width <= 680px) {
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.switchGrid) {
|
||||
@extend %switch-grid;
|
||||
}
|
||||
|
||||
:deep(.switchColumnGrid) {
|
||||
@extend :deep(.switchGrid);
|
||||
@extend %switch-grid;
|
||||
|
||||
align-items: start;
|
||||
}
|
||||
|
|
@ -82,19 +85,19 @@
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 460px) {
|
||||
@media only screen and (width <= 460px) {
|
||||
:deep(.settingsFlexStart460px) {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 500px) {
|
||||
@media only screen and (width <= 500px) {
|
||||
:deep(.settingsFlexStart500px) {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 680px) {
|
||||
@media only screen and (width <= 680px) {
|
||||
.settingsSection {
|
||||
> div {
|
||||
:deep(.text.bottom) {
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
/* stylelint-disable no-descending-specificity */
|
||||
.shareLinks {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
|
|
@ -89,7 +90,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 450px) {
|
||||
@media only screen and (width <= 450px) {
|
||||
.shareLinks {
|
||||
grid-auto-flow: row;
|
||||
margin-inline: auto;
|
||||
|
|
|
|||
|
|
@ -1,11 +1,13 @@
|
|||
/* stylelint-disable no-descending-specificity */
|
||||
.pure-material-slider {
|
||||
--pure-material-safari-helper1: var(--accent-color-opacity1);
|
||||
--pure-material-safari-helper2: var(--accent-color-opacity2);
|
||||
--pure-material-safari-helper3: var(--accent-color-opacity3);
|
||||
--pure-material-safari-helper4: var(--accent-color-opacity4);
|
||||
|
||||
display: inline-block;
|
||||
inline-size: 380px;
|
||||
color: rgba(var(--primary-text-color), 0.87);
|
||||
color: rgb(var(--primary-text-color) 0.87);
|
||||
font-family: var(--pure-material-font, "Roboto", "Segoe UI", BlinkMacSystemFont, system-ui, -apple-system);
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
|
|
@ -16,7 +18,7 @@
|
|||
|
||||
/* Input */
|
||||
.pure-material-slider > input {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
position: relative;
|
||||
inset-block-start: 24px;
|
||||
display: block;
|
||||
|
|
@ -41,6 +43,7 @@
|
|||
}
|
||||
|
||||
/* Focus */
|
||||
/* stylelint-disable-next-line a11y/no-outline-none */
|
||||
.pure-material-slider > input:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
|
@ -68,8 +71,7 @@
|
|||
/* Webkit | Thumb */
|
||||
.pure-material-slider > input::-webkit-slider-thumb {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
border: none;
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
block-size: 2px;
|
||||
inline-size: 2px;
|
||||
|
|
@ -98,7 +100,7 @@
|
|||
|
||||
/* Webkit | Disabled */
|
||||
.pure-material-slider > input:disabled::-webkit-slider-runnable-track {
|
||||
background-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.38);
|
||||
background-color: rgb(var(--pure-material-onsurface-rgb, 0, 0, 0) 0.38);
|
||||
}
|
||||
|
||||
.pure-material-slider > input:disabled::-webkit-slider-thumb {
|
||||
|
|
@ -111,7 +113,7 @@
|
|||
/* Moz | Track */
|
||||
.pure-material-slider > input::-moz-range-track {
|
||||
margin-block: 0;
|
||||
margin-auto: 17px;
|
||||
margin: 17px;
|
||||
border-radius: 1px;
|
||||
inline-size: 100%;
|
||||
block-size: 2px;
|
||||
|
|
@ -121,8 +123,7 @@
|
|||
/* Moz | Thumb */
|
||||
.pure-material-slider > input::-moz-range-thumb {
|
||||
appearance: none;
|
||||
-moz-appearance: none;
|
||||
border: none;
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
block-size: 2px;
|
||||
inline-size: 2px;
|
||||
|
|
@ -158,12 +159,13 @@
|
|||
|
||||
/* Moz | Disabled */
|
||||
.pure-material-slider > input:disabled::-moz-range-track {
|
||||
background-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.38);
|
||||
background-color: rgb(var(--pure-material-onsurface-rgb, 0, 0, 0) 0.38);
|
||||
}
|
||||
|
||||
.pure-material-slider > input:disabled::-moz-range-progress {
|
||||
background-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.87);
|
||||
background-color: rgb(var(--pure-material-onsurface-rgb, 0, 0, 0) 0.87);
|
||||
}
|
||||
|
||||
.pure-material-slider > input:disabled::-moz-range-thumb {
|
||||
background-color: rgb(var(--pure-material-onsurface-rgb, 0, 0, 0));
|
||||
box-shadow: 0 0 0 1px rgb(var(--pure-material-surface-rgb, 255, 255, 255)) !important;
|
||||
|
|
@ -171,7 +173,7 @@
|
|||
}
|
||||
|
||||
.pure-material-slider > input::-moz-focus-outer {
|
||||
border: none;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* MS | Track */
|
||||
|
|
@ -179,7 +181,7 @@
|
|||
box-sizing: border-box;
|
||||
margin-block: 17px;
|
||||
margin-inline: 0;
|
||||
border: none;
|
||||
border: 0;
|
||||
border-radius: 1px;
|
||||
padding-block: 0;
|
||||
padding-inline: 17px;
|
||||
|
|
@ -206,7 +208,7 @@
|
|||
appearance: none;
|
||||
margin-block: 0;
|
||||
margin-inline: 17px;
|
||||
border: none;
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
block-size: 2px;
|
||||
inline-size: 2px;
|
||||
|
|
@ -235,11 +237,11 @@
|
|||
|
||||
/* MS | Disabled */
|
||||
.pure-material-slider > input:disabled::-ms-fill-lower {
|
||||
background-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.38);
|
||||
background-color: rgb(var(--pure-material-onsurface-rgb, 0, 0, 0) 0.38);
|
||||
}
|
||||
|
||||
.pure-material-slider > input:disabled::-ms-fill-upper {
|
||||
background-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.38);
|
||||
background-color: rgb(var(--pure-material-onsurface-rgb, 0, 0, 0) 0.38);
|
||||
opacity: 0.38;
|
||||
}
|
||||
|
||||
|
|
@ -249,7 +251,7 @@
|
|||
transform: scale(4, 4);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 680px) {
|
||||
@media only screen and (width <= 680px) {
|
||||
.pure-material-slider {
|
||||
inline-size: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
padding-block: 0;
|
||||
padding-inline: 10px;
|
||||
|
||||
@media only screen and (max-width: 680px) {
|
||||
@media only screen and (width <= 680px) {
|
||||
inline-size: 100%;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,9 +3,10 @@
|
|||
margin-block-end: 10px;
|
||||
border-radius: 4px;
|
||||
block-size: fit-content;
|
||||
box-shadow: 0px 1px 2px rgb(0 0 0 / 50%);
|
||||
box-shadow: 0 1px 2px rgb(0 0 0 / 50%);
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
/* addresses odd clipping behavior when adjusting window size */
|
||||
background-color: var(--primary-color);
|
||||
}
|
||||
|
|
@ -76,7 +77,6 @@
|
|||
overflow-y: scroll;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
z-index: 3;
|
||||
// accounts for parent's left and right margins
|
||||
|
|
@ -112,7 +112,6 @@
|
|||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
border-radius: 50%;
|
||||
-webkit-border-radius: 50%;
|
||||
}
|
||||
|
||||
.initial {
|
||||
|
|
@ -120,7 +119,6 @@
|
|||
line-height: 1em;
|
||||
text-align: center;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
.profileName {
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
inset-inline-start: 50vw;
|
||||
transform: translate(calc(-50% * var(--horizontal-directionality-coefficient)), 0);
|
||||
inset-block-end: 50px;
|
||||
|
||||
/* Higher than any prompt */
|
||||
z-index: 300;
|
||||
display: flex;
|
||||
|
|
@ -16,8 +17,8 @@
|
|||
margin: 5px;
|
||||
text-align: center;
|
||||
overflow-y: auto;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
color: white;
|
||||
background-color: rgb(0 0 0 / 70%);
|
||||
color: #FFF;
|
||||
opacity: 0;
|
||||
border-radius: 20px;
|
||||
cursor: pointer;
|
||||
|
|
|
|||
|
|
@ -74,7 +74,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media (max-width: 680px) {
|
||||
@media (width <= 680px) {
|
||||
max-inline-size: 250px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,30 +7,6 @@
|
|||
padding: 0;
|
||||
}
|
||||
|
||||
.button:focus + .text,
|
||||
.button:hover + .text {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.button:focus + .text.bottom,
|
||||
.button:hover + .text.bottom,
|
||||
.button:hover + .text.bottom-left,
|
||||
.button:hover + .text.bottom-left,
|
||||
.button:focus + .text.top,
|
||||
.button:hover + .text.top {
|
||||
-webkit-transform: translate(calc(-50% * var(--horizontal-directionality-coefficient)), 0);
|
||||
transform: translate(calc(-50% * var(--horizontal-directionality-coefficient)), 0);
|
||||
}
|
||||
|
||||
.button:focus + .text.left,
|
||||
.button:hover + .text.left,
|
||||
.button:focus + .text.right,
|
||||
.button:hover + .text.right {
|
||||
-webkit-transform: translate(0, -50%);
|
||||
transform: translate(0, -50%);
|
||||
}
|
||||
|
||||
.text {
|
||||
background-color: color-mix(in srgb, var(--primary-text-color) 80%, transparent);
|
||||
border-radius: 20px;
|
||||
|
|
@ -56,7 +32,6 @@
|
|||
margin-block-start: 1em;
|
||||
inset-block-start: 100%;
|
||||
inset-inline-start: 50%;
|
||||
-webkit-transform: translate(calc(-50% * var(--horizontal-directionality-coefficient)), -1em);
|
||||
transform: translate(calc(-50% * var(--horizontal-directionality-coefficient)), -1em);
|
||||
}
|
||||
|
||||
|
|
@ -64,15 +39,13 @@
|
|||
margin-block-start: 1em;
|
||||
inset-block-start: 100%;
|
||||
inset-inline-start: -100px;
|
||||
-webkit-transform: translate(-50%, -1em);
|
||||
transform: translate(calc(-50% * var(--horizontal-directionality-coefficient)), -1em);
|
||||
}
|
||||
|
||||
.text.left {
|
||||
margin-inline-end:1em;
|
||||
margin-inline-end: 1em;
|
||||
inset-inline-end: 100%;
|
||||
inset-block-start: 50%;
|
||||
-webkit-transform: translate(calc(1em * var(--horizontal-directionality-coefficient)), -50%);
|
||||
transform: translate(calc(1em * var(--horizontal-directionality-coefficient)), -50%);
|
||||
}
|
||||
|
||||
|
|
@ -80,7 +53,6 @@
|
|||
inset-inline-start: 100%;
|
||||
margin-inline-start: 1em;
|
||||
inset-block-start: 50%;
|
||||
-webkit-transform: translate(calc(-1em * var(--horizontal-directionality-coefficient)), -50%);
|
||||
transform: translate(calc(-1em * var(--horizontal-directionality-coefficient)), -50%);
|
||||
}
|
||||
|
||||
|
|
@ -88,17 +60,37 @@
|
|||
inset-block-end: 100%;
|
||||
inset-inline-start: 50%;
|
||||
margin-block-end: 1em;
|
||||
-webkit-transform: translate(calc(-50% * var(--horizontal-directionality-coefficient)), 1em);
|
||||
transform: translate(calc(-50% * var(--horizontal-directionality-coefficient)), 1em);
|
||||
}
|
||||
|
||||
.button:focus + .text,
|
||||
.button:hover + .text {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.button:focus + .text.bottom,
|
||||
.button:hover + .text.bottom,
|
||||
.button:hover + .text.bottom-left,
|
||||
.button:focus + .text.top,
|
||||
.button:hover + .text.top {
|
||||
transform: translate(calc(-50% * var(--horizontal-directionality-coefficient)), 0);
|
||||
}
|
||||
|
||||
.button:focus + .text.left,
|
||||
.button:hover + .text.left,
|
||||
.button:focus + .text.right,
|
||||
.button:hover + .text.right {
|
||||
transform: translate(0, -50%);
|
||||
}
|
||||
|
||||
.text.allowNewlines {
|
||||
white-space: pre-wrap;
|
||||
text-align: start;
|
||||
inline-size: 55vw;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1100px) {
|
||||
@media only screen and (width <= 1100px) {
|
||||
inline-size: 40vw;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
}
|
||||
/* stylelint-enable liberty/use-logical-spec */
|
||||
|
||||
@media only screen and (max-width: 460px) {
|
||||
@media only screen and (width <= 460px) {
|
||||
:deep(.dash-selector .vjs-menu) {
|
||||
max-block-size: 14em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
// Ensure placeholder image displayed at same aspect ratio as most other images
|
||||
aspect-ratio: 16/9;
|
||||
|
||||
@media only screen and (max-width: 800px) {
|
||||
@media only screen and (width <= 800px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
overflow-y: auto;
|
||||
white-space: break-spaces;
|
||||
|
||||
@media only screen and (max-width: 500px) {
|
||||
@media only screen and (width <= 500px) {
|
||||
max-block-size: 10vh;
|
||||
}
|
||||
}
|
||||
|
|
@ -77,9 +77,8 @@
|
|||
margin-block-start: 8px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1250px) {
|
||||
@media only screen and (width <= 1250px) {
|
||||
:deep(.sharePlaylistIcon .iconDropdown) {
|
||||
inset-inline-start: auto;
|
||||
inset-inline-end: auto;
|
||||
inset-inline: auto auto;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,22 +29,19 @@
|
|||
inset-block-end: 60px;
|
||||
inline-size: 70px;
|
||||
z-index: 0;
|
||||
-webkit-box-shadow: 3px -3px 5px 0px rgba(0,0,0,0.2);
|
||||
-moz-box-shadow: 3px -3px 5px 0px rgba(0,0,0,0.2);
|
||||
box-shadow: 3px -3px 5px 0px rgba(0,0,0,0.2);
|
||||
box-shadow: 3px -3px 5px 0 rgb(0 0 0 / 20%);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 680px) {
|
||||
@media only screen and (width <= 680px) {
|
||||
.sideNavMoreOptions {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.sideNav, .closed {
|
||||
margin-block-start: 0px;
|
||||
margin-block-start: 0;
|
||||
block-size: 60px;
|
||||
inline-size: 100%;
|
||||
inset-block-end: 0px;
|
||||
inset-block-start: auto;
|
||||
inset-block: auto 0;
|
||||
overflow-y: inherit;
|
||||
}
|
||||
|
||||
|
|
@ -56,15 +53,15 @@
|
|||
}
|
||||
|
||||
.navLabel {
|
||||
margin-inline-start: 0px;
|
||||
margin-inline-start: 0;
|
||||
inline-size: 100%;
|
||||
text-align: center;
|
||||
inset-inline-start: 0px;
|
||||
inset-inline-start: 0;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.navIcon {
|
||||
margin-inline-start: 0px;
|
||||
margin-inline-start: 0;
|
||||
inline-size: 100%;
|
||||
display: block;
|
||||
margin-block-start: 0.5em;
|
||||
|
|
|
|||
|
|
@ -13,14 +13,12 @@
|
|||
transition-duration: 150ms;
|
||||
transition-timing-function: ease-in-out;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
.inner {
|
||||
block-size: 100%;
|
||||
inline-size: 200px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
overflow: hidden auto;
|
||||
}
|
||||
|
||||
.closed .inner {
|
||||
|
|
@ -50,6 +48,19 @@
|
|||
display: none;
|
||||
}
|
||||
|
||||
.navOption, .channelLink {
|
||||
display: block;
|
||||
color: inherit;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
|
||||
|
||||
.navOption .navLabel {
|
||||
margin-inline-start: 40px;
|
||||
overflow: hidden;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.navOption:hover, .navChannel:hover {
|
||||
background-color: var(--side-nav-hover-color);
|
||||
color: var(--side-nav-hover-text-color);
|
||||
|
|
@ -66,12 +77,6 @@
|
|||
margin-inline-start: 10px;
|
||||
}
|
||||
|
||||
.navOption .navLabel {
|
||||
margin-inline-start: 40px;
|
||||
overflow: hidden;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.navChannel .navLabel {
|
||||
overflow: hidden;
|
||||
margin-inline-start: 40px;
|
||||
|
|
@ -84,16 +89,9 @@
|
|||
margin: 0;
|
||||
position: absolute;
|
||||
inset-block-start: 50%;
|
||||
-ms-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.navOption, .channelLink {
|
||||
display: block;
|
||||
color: inherit;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
|
||||
.channelThumbnail {
|
||||
border-radius: 50%;
|
||||
vertical-align: middle;
|
||||
|
|
@ -127,22 +125,23 @@
|
|||
}
|
||||
|
||||
.closed .navIcon {
|
||||
margin-inline-start: 0px;
|
||||
margin-inline-start: 0;
|
||||
inline-size: 100%;
|
||||
display: block;
|
||||
margin-block-end: 0px;
|
||||
margin-block-end: 0;
|
||||
}
|
||||
|
||||
.closed .navIconExpand{
|
||||
block-size:1.3em;
|
||||
}
|
||||
|
||||
.closed .navLabel {
|
||||
margin-inline-start: 0px;
|
||||
margin-inline-start: 0;
|
||||
inline-size: 100%;
|
||||
text-align: center;
|
||||
inset-inline-start: 0px;
|
||||
inset-inline-start: 0;
|
||||
font-size: 11px;
|
||||
margin-block-end: 0em;
|
||||
margin-block-end: 0;
|
||||
}
|
||||
|
||||
.closed .navChannel {
|
||||
|
|
@ -156,16 +155,13 @@
|
|||
position: static;
|
||||
display: block;
|
||||
float: none;
|
||||
margin-block: 0;
|
||||
margin-inline: auto;
|
||||
inset-block-start: 0px;
|
||||
-ms-transform: none;
|
||||
inset-block-start: 0;
|
||||
transform: none;
|
||||
margin-block-start: 0.3em;
|
||||
margin-block-end: 0.3em;
|
||||
margin-block: 0.3em;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 680px) {
|
||||
@media only screen and (width <= 680px) {
|
||||
.inner {
|
||||
display: contents; /* sunglasses emoji */
|
||||
}
|
||||
|
|
@ -178,44 +174,41 @@
|
|||
position: fixed;
|
||||
inset-inline-start: 0;
|
||||
inset-block-end: 0;
|
||||
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.topNavOption {
|
||||
margin-block-start: 0px;
|
||||
padding-inline-start: 10px;
|
||||
padding-inline-end: 10px;
|
||||
margin-block-start: 0;
|
||||
padding-inline: 10px;
|
||||
}
|
||||
|
||||
.sideNav, .closed {
|
||||
margin-block-start: 0px;
|
||||
margin-block-start: 0;
|
||||
block-size: 60px;
|
||||
inline-size: 100%;
|
||||
inset-block-end: 0px;
|
||||
inset-block-start: auto;
|
||||
inset-block: auto 0;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.navOption, .closed .navOption {
|
||||
inline-size: 70px;
|
||||
block-size: 40px;
|
||||
padding: 0px;
|
||||
padding-block-start: 10px;
|
||||
padding-block-end: 10px;
|
||||
padding: 0;
|
||||
padding-block: 10px 10px;
|
||||
}
|
||||
|
||||
.navLabel {
|
||||
margin-inline-start: 0px;
|
||||
margin-inline-start: 0;
|
||||
inline-size: 100%;
|
||||
text-align: center;
|
||||
inset-inline-start: 0px;
|
||||
inset-inline-start: 0;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.moreOption {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.closed.hiddenLabels{
|
||||
inline-size: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,13 +14,13 @@
|
|||
inset-inline-end: 10px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 350px) {
|
||||
@media only screen and (width <= 350px) {
|
||||
.floatingTopButton {
|
||||
position: absolute
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 680px) {
|
||||
@media only screen and (width <= 680px) {
|
||||
.card {
|
||||
inline-size: 90%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,15 +14,14 @@
|
|||
box-shadow: 0 2px 1px 0 var(--primary-shadow-color);
|
||||
display: flex;
|
||||
block-size: 60px;
|
||||
inset-inline-start: 0;
|
||||
inset-inline: 0;
|
||||
line-height: 60px;
|
||||
position: sticky;
|
||||
inset-inline-end: 0;
|
||||
inset-block-start: 0;
|
||||
inline-size: 100%;
|
||||
z-index: 4;
|
||||
|
||||
@media only screen and (min-width: 961px) {
|
||||
@media only screen and (width >= 961px) {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 440px 1fr;
|
||||
}
|
||||
|
|
@ -31,13 +30,13 @@
|
|||
background-color: var(--primary-color);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 680px) {
|
||||
@media only screen and (width <= 680px) {
|
||||
position: fixed;
|
||||
}
|
||||
}
|
||||
|
||||
.menuIcon {
|
||||
@media only screen and (max-width: 680px) {
|
||||
@media only screen and (width <= 680px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -58,10 +57,9 @@
|
|||
|
||||
&.arrowBackwardDisabled,
|
||||
&.arrowForwardDisabled {
|
||||
color: gray;
|
||||
color: #808080;
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
|
|
@ -112,13 +110,13 @@
|
|||
}
|
||||
|
||||
.navSearchIcon {
|
||||
@media only screen and (min-width: 681px) {
|
||||
@media only screen and (width >= 681px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.navNewWindowIcon {
|
||||
@media only screen and (max-width: 680px) {
|
||||
@media only screen and (width <= 680px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -173,7 +171,7 @@
|
|||
inset-block-start: -3px;
|
||||
inline-size: 100px;
|
||||
|
||||
@media only screen and (max-width: 680px) {
|
||||
@media only screen and (width <= 680px) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
@ -192,11 +190,10 @@
|
|||
align-items: center;
|
||||
display: flex;
|
||||
|
||||
@media only screen and (max-width: 680px) {
|
||||
@media only screen and (width <= 680px) {
|
||||
background-color: var(--side-nav-color);
|
||||
inset-inline-start: 0;
|
||||
inset-inline: 0;
|
||||
position: fixed;
|
||||
inset-inline-end: 0;
|
||||
inset-block-start: 60px;
|
||||
|
||||
@include top-nav-is-colored {
|
||||
|
|
@ -210,18 +207,16 @@
|
|||
}
|
||||
|
||||
.searchFilters {
|
||||
inset-inline-start: 0;
|
||||
inset-inline: 0;
|
||||
margin-block: 10px 20px;
|
||||
margin-inline: 220px 20px;
|
||||
position: absolute;
|
||||
inset-inline-end: 0;
|
||||
transition: margin 150ms ease-in-out;
|
||||
|
||||
@media only screen and (max-width: 680px) {
|
||||
inset-inline-start: 0;
|
||||
@media only screen and (width <= 680px) {
|
||||
inset-inline: 0;
|
||||
margin-block: 95px 0;
|
||||
margin-inline: 10px;
|
||||
inset-inline-end: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,8 +3,7 @@
|
|||
}
|
||||
|
||||
.chaptersTitle {
|
||||
margin-block-start: 10px;
|
||||
margin-block-end: 0;
|
||||
margin-block: 10px 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
@ -35,11 +34,9 @@
|
|||
|
||||
.chapter {
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
'thumbnail title'
|
||||
'thumbnail timestamp';
|
||||
grid-template-columns: auto 1fr;
|
||||
grid-template-rows: min(auto, 2fr) 1fr;
|
||||
grid-template:
|
||||
'thumbnail title' 2fr
|
||||
'thumbnail timestamp' 2fr / auto 1fr;
|
||||
column-gap: 10px;
|
||||
justify-items: start;
|
||||
cursor: pointer;
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@
|
|||
float: var(--float-right-ltr-rtl-value);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1000px) {
|
||||
@media only screen and (width <= 1000px) {
|
||||
.commentSort {
|
||||
float: none;
|
||||
}
|
||||
|
|
@ -54,7 +54,6 @@
|
|||
inline-size: 60px;
|
||||
block-size: 60px;
|
||||
border-radius: 200px;
|
||||
-webkit-border-radius: 200px;
|
||||
}
|
||||
|
||||
.commentThumbnailHidden {
|
||||
|
|
@ -70,7 +69,6 @@
|
|||
color: rgb(0 0 0);
|
||||
background-color: rgb(235 160 172);
|
||||
border-radius: 50%;
|
||||
-webkit-border-radius: 50%;
|
||||
}
|
||||
|
||||
.commentAuthorWrapper {
|
||||
|
|
@ -104,9 +102,8 @@
|
|||
.commentPinned {
|
||||
font-weight: normal;
|
||||
font-size: 12px;
|
||||
margin-block-start: 0;
|
||||
margin-block: 0 5px;
|
||||
margin-inline-start: 68px;
|
||||
margin-block-end: 5px;
|
||||
}
|
||||
|
||||
.commentDate {
|
||||
|
|
@ -150,7 +147,6 @@
|
|||
inline-size: 15px;
|
||||
block-size: 15px;
|
||||
border-radius: 50%;
|
||||
-webkit-border-radius: 50%;
|
||||
}
|
||||
|
||||
.commentHeartBadgeWhite {
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
}
|
||||
|
||||
.description {
|
||||
font-family: 'Roboto', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
font-family: Roboto, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
font-size: 17px;
|
||||
white-space: pre-wrap;
|
||||
overflow-wrap: anywhere;
|
||||
|
|
|
|||
|
|
@ -58,22 +58,22 @@
|
|||
justify-content: flex-end;
|
||||
gap: 4px;
|
||||
|
||||
@media screen and (max-width: 680px) {
|
||||
@media screen and (width <= 680px) {
|
||||
:deep(.iconDropdown) {
|
||||
inset-inline-start: auto;
|
||||
inset-inline-end: calc(50% - 20px);
|
||||
inset-inline: auto calc(50% - 20px);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 460px) {
|
||||
@media screen and (width <= 460px) {
|
||||
flex-wrap: nowrap;
|
||||
|
||||
:deep(.iconDropdown) {
|
||||
inset-inline-start: auto;
|
||||
inset-inline-end: auto;
|
||||
inset-inline: auto auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 460px) {
|
||||
|
||||
@media screen and (width <= 460px) {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
margin-block-start: 10px;
|
||||
|
|
@ -93,7 +93,7 @@
|
|||
max-inline-size: 210px;
|
||||
text-align: end;
|
||||
|
||||
@media screen and (max-width: 680px) {
|
||||
@media screen and (width <= 680px) {
|
||||
margin-inline-start: 0;
|
||||
text-align: start;
|
||||
}
|
||||
|
|
@ -110,8 +110,9 @@
|
|||
gap: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.datePublishedAndViewCount {
|
||||
@media only screen and (max-width: 460px) {
|
||||
@media only screen and (width <= 460px) {
|
||||
display: flex;
|
||||
justify-content: left;
|
||||
flex-direction: column;
|
||||
|
|
@ -121,6 +122,7 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.videoViews {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -66,13 +66,11 @@
|
|||
display: inline-block;
|
||||
padding: 1px;
|
||||
padding-inline-end: 10px;
|
||||
margin-inline-start: 2px;
|
||||
margin-inline-end: 2px;
|
||||
margin-inline: 2px 2px;
|
||||
block-size: 30px;
|
||||
cursor: pointer;
|
||||
background-color: var(--primary-color);
|
||||
border-radius: 200px;
|
||||
-webkit-border-radius: 200px;
|
||||
}
|
||||
|
||||
.superChatContent {
|
||||
|
|
@ -81,6 +79,17 @@
|
|||
color: var(--text-with-main-color);
|
||||
}
|
||||
|
||||
.channelThumbnail {
|
||||
inline-size: 25px;
|
||||
border-radius: 200px;
|
||||
}
|
||||
|
||||
.channelName {
|
||||
color: var(--tertiary-text-color);
|
||||
font-weight: bold;
|
||||
padding-inline-end: 5px;
|
||||
}
|
||||
|
||||
.superChat .channelThumbnail {
|
||||
margin-block-start: 3px;
|
||||
margin-inline-start: 3px;
|
||||
|
|
@ -92,7 +101,7 @@
|
|||
}
|
||||
|
||||
.openedSuperChat {
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
background-color: rgb(0 0 0 / 70%);
|
||||
inline-size: 100%;
|
||||
block-size: 415px;
|
||||
position: absolute;
|
||||
|
|
@ -103,6 +112,24 @@
|
|||
z-index: 1;
|
||||
}
|
||||
|
||||
.superChatMessage {
|
||||
inline-size: 90%;
|
||||
grid-template-columns: auto;
|
||||
margin-inline: 5% 5%;
|
||||
margin-block: 25px 10px;
|
||||
background-color: var(--primary-color);
|
||||
border-radius: 5px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.upperSuperChatMessage {
|
||||
margin-block-start: -15px;
|
||||
inline-size: 100%;
|
||||
block-size: 55px;
|
||||
background-color: var(--primary-color-hover);
|
||||
border-radius: 5px 5px 0 0;
|
||||
}
|
||||
|
||||
.openedSuperChat .superChatMessage {
|
||||
position: absolute;
|
||||
}
|
||||
|
|
@ -112,7 +139,7 @@
|
|||
}
|
||||
|
||||
.comment .upperSuperChatMessage {
|
||||
padding: 0px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.comment {
|
||||
|
|
@ -123,28 +150,6 @@
|
|||
gap: 5px;
|
||||
}
|
||||
|
||||
.superChatMessage {
|
||||
inline-size: 90%;
|
||||
grid-template-columns: auto;
|
||||
margin-inline-start: 5%;
|
||||
margin-inline-end: 5%;
|
||||
margin-block-start: 25px;
|
||||
margin-block-end: 10px;
|
||||
background-color: var(--primary-color);
|
||||
border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.upperSuperChatMessage {
|
||||
margin-block-start: -15px;
|
||||
inline-size: 100%;
|
||||
block-size: 55px;
|
||||
background-color: var(--primary-color-hover);
|
||||
border-radius: 5px 5px 0px 0px;
|
||||
-webkit-border-radius: 5px 5px 0px 0px;
|
||||
}
|
||||
|
||||
.upperSuperChatMessage .channelThumbnail {
|
||||
inline-size: 45px;
|
||||
margin-inline-start: 10px;
|
||||
|
|
@ -164,7 +169,7 @@
|
|||
font-weight: bold;
|
||||
margin-inline-start: 65px;
|
||||
position: absolute;
|
||||
inset-block-start: 0px;
|
||||
inset-block-start: 0;
|
||||
}
|
||||
|
||||
.superChatMessage .chatMessage {
|
||||
|
|
@ -177,25 +182,12 @@
|
|||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.channelThumbnail {
|
||||
inline-size: 25px;
|
||||
border-radius: 200px;
|
||||
-webkit-border-radius: 200px;
|
||||
}
|
||||
|
||||
.chatContent {
|
||||
margin-block-start: 5px;
|
||||
margin-block-end: 2px;
|
||||
margin-block: 5px 2px;
|
||||
font-size: 12px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.channelName {
|
||||
color: var(--tertiary-text-color);
|
||||
font-weight: bold;
|
||||
padding-inline-end: 5px;
|
||||
}
|
||||
|
||||
.member {
|
||||
color: #4CAF50;
|
||||
}
|
||||
|
|
@ -223,7 +215,6 @@
|
|||
inset-block-end: 20px;
|
||||
cursor: pointer;
|
||||
border-radius: 200px;
|
||||
-webkit-border-radius: 200px;
|
||||
text-align: center;
|
||||
transition: background 0.2s ease-out;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,20 +23,25 @@
|
|||
|
||||
.playlistProgressBar {
|
||||
margin-inline-start: 10px;
|
||||
|
||||
/* > In order to let ::-webkit-progress-value take effect, appearance needs to be set to none on the <progress> element. */
|
||||
|
||||
/* https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-progress-value */
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.playlistProgressBar::-webkit-progress-value {
|
||||
/* Color for filled part */
|
||||
|
||||
/* https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-progress-value */
|
||||
|
||||
/* background-color is required to be declared here to prevent color being green */
|
||||
background-color: var(--accent-color);
|
||||
}
|
||||
|
||||
.playlistProgressBar::-webkit-progress-bar {
|
||||
/* Color for unfilled part */
|
||||
|
||||
/* https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-progress-bar */
|
||||
background-color: var(--secondary-text-color);
|
||||
}
|
||||
|
|
@ -63,6 +68,12 @@
|
|||
transition: background 0.2s ease-in;
|
||||
}
|
||||
|
||||
.playlistIconActive {
|
||||
color: var(--accent-color);
|
||||
stroke-width: 10;
|
||||
stroke: var(--accent-color);
|
||||
}
|
||||
|
||||
.playlistIconActive:hover {
|
||||
background-color: var(--side-nav-hover-color);
|
||||
color: var(--accent-color-hover);
|
||||
|
|
@ -71,12 +82,6 @@
|
|||
transition: background 0.2s ease-in;
|
||||
}
|
||||
|
||||
.playlistIconActive {
|
||||
color: var(--accent-color);
|
||||
stroke-width: 10;
|
||||
stroke: var(--accent-color);
|
||||
}
|
||||
|
||||
.playlistItems {
|
||||
overflow-y: auto;
|
||||
block-size: 360px;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
/* stylelint-disable no-descending-specificity */
|
||||
$thumbnail-overlay-opacity: 0.85;
|
||||
$watched-transition-duration: 0.5s;
|
||||
|
||||
|
|
@ -86,7 +87,6 @@ $watched-transition-duration: 0.5s;
|
|||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
.thumbnailLink {
|
||||
|
|
@ -106,22 +106,20 @@ $watched-transition-duration: 0.5s;
|
|||
}
|
||||
|
||||
.videoWatched {
|
||||
align-self: flex-start;
|
||||
place-self: flex-start start;
|
||||
background-color: var(--bg-color);
|
||||
color: var(--primary-text-color);
|
||||
justify-self: start;
|
||||
opacity: $thumbnail-overlay-opacity;
|
||||
padding: 2px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.videoDuration {
|
||||
align-self: flex-end;
|
||||
place-self: flex-end end;
|
||||
background-color: var(--card-bg-color);
|
||||
border-radius: 5px;
|
||||
color: var(--primary-text-color);
|
||||
font-size: 15px;
|
||||
justify-self: end;
|
||||
line-height: 1.2;
|
||||
margin-block: 0 4px;
|
||||
margin-inline: 0 4px;
|
||||
|
|
@ -141,9 +139,8 @@ $watched-transition-duration: 0.5s;
|
|||
}
|
||||
|
||||
.externalPlayerIcon {
|
||||
align-self: flex-end;
|
||||
place-self: flex-end start;
|
||||
font-size: 17px;
|
||||
justify-self: start;
|
||||
margin-block-end: 4px;
|
||||
margin-inline-start: 4px;
|
||||
}
|
||||
|
|
@ -152,12 +149,12 @@ $watched-transition-duration: 0.5s;
|
|||
justify-self: end;
|
||||
margin-inline-end: 3px;
|
||||
margin-block-start: 3px;
|
||||
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
justify-content: flex-end;
|
||||
block-size: fit-content;
|
||||
}
|
||||
|
||||
.quickBookmarkVideoIcon,
|
||||
.addToPlaylistIcon,
|
||||
.trashIcon,
|
||||
|
|
@ -167,18 +164,16 @@ $watched-transition-duration: 0.5s;
|
|||
}
|
||||
|
||||
.watchedProgressBar {
|
||||
align-self: flex-end;
|
||||
place-self: flex-end stretch;
|
||||
background-color: var(--primary-color);
|
||||
block-size: 2px;
|
||||
justify-self: stretch;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.videoCountContainer {
|
||||
align-self: stretch;
|
||||
place-self: stretch end;
|
||||
display: grid;
|
||||
font-size: 20px;
|
||||
justify-self: end;
|
||||
inline-size: 60px;
|
||||
pointer-events: none;
|
||||
|
||||
|
|
@ -256,9 +251,7 @@ $watched-transition-duration: 0.5s;
|
|||
font-size: 12px;
|
||||
}
|
||||
|
||||
& {
|
||||
@include low-contrast-when-watched(var(--secondary-text-color));
|
||||
}
|
||||
@include low-contrast-when-watched(var(--secondary-text-color));
|
||||
|
||||
.channelName {
|
||||
@include low-contrast-when-watched(var(--secondary-text-color));
|
||||
|
|
@ -293,7 +286,7 @@ $watched-transition-duration: 0.5s;
|
|||
inline-size: 336px;
|
||||
max-inline-size: 25vw;
|
||||
|
||||
@media only screen and (max-width: 680px) {
|
||||
@media only screen and (width <= 680px) {
|
||||
max-inline-size: 30vw;
|
||||
}
|
||||
}
|
||||
|
|
@ -302,7 +295,7 @@ $watched-transition-duration: 0.5s;
|
|||
max-inline-size: 25vw;
|
||||
max-block-size: 25vw;
|
||||
|
||||
@media only screen and (max-width: 680px) {
|
||||
@media only screen and (width <= 680px) {
|
||||
max-inline-size: 30vw;
|
||||
max-block-size: 30vw;
|
||||
}
|
||||
|
|
@ -391,7 +384,6 @@ $watched-transition-duration: 0.5s;
|
|||
.upcoming {
|
||||
text-transform: uppercase;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
// we use h3 for semantic reasons but don't want to keep the h3 style
|
||||
|
|
|
|||
|
|
@ -281,6 +281,7 @@ const state = {
|
|||
thumbnailPreference: '',
|
||||
blurThumbnails: false,
|
||||
useProxy: false,
|
||||
userPlaylistSortOrder: 'date_added_descending',
|
||||
useRssFeeds: false,
|
||||
useSponsorBlock: false,
|
||||
videoVolumeMouseScroll: false,
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
.pastelPink,
|
||||
.hotPink,
|
||||
.nordic {
|
||||
--primary-input-color: rgba(0, 0, 0, 0.50);
|
||||
--primary-input-color: rgb(0 0 0 / 50%);
|
||||
}
|
||||
|
||||
.system[data-system-theme*='light'], .light,
|
||||
|
|
@ -31,7 +31,7 @@
|
|||
.catppuccinMocha,
|
||||
.pastelPink,
|
||||
.nordic {
|
||||
--primary-input-color: rgba(0, 0, 0, 0.50);
|
||||
--primary-input-color: rgb(0 0 0 / 50%);
|
||||
--side-nav-hover-text-color: var(--primary-text-color);
|
||||
}
|
||||
|
||||
|
|
@ -62,36 +62,36 @@
|
|||
.catppuccinMocha,
|
||||
.hotPink,
|
||||
.nordic {
|
||||
--primary-shadow-color: rgba(0, 0, 0, 0.75);
|
||||
--primary-shadow-color: rgb(0 0 0 / 75%);
|
||||
}
|
||||
|
||||
.system[data-system-theme*='light'], .light {
|
||||
--primary-text-color: #212121;
|
||||
--secondary-text-color: #424242;
|
||||
--tertiary-text-color: #757575;
|
||||
--primary-shadow-color: rgba(232, 232, 232, 1);
|
||||
--primary-shadow-color: rgb(232 232 232 / 100%);
|
||||
--title-color: #3f7ac6;
|
||||
--bg-color: #f1f1f1;
|
||||
--favorite-icon-color: #00CC00;
|
||||
--card-bg-color: #FFFFFF;
|
||||
--secondary-card-bg-color: #eeeeee;
|
||||
--scrollbar-color: #CCCCCC;
|
||||
--favorite-icon-color: #0C0;
|
||||
--card-bg-color: #FFF;
|
||||
--secondary-card-bg-color: #eee;
|
||||
--scrollbar-color: #CCC;
|
||||
--scrollbar-color-hover: #BDBDBD;
|
||||
--side-nav-color: #FFFFFF;
|
||||
--side-nav-color: #FFF;
|
||||
--side-nav-hover-color: #e0e0e0;
|
||||
--side-nav-active-color: #757575;
|
||||
--search-bar-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.system[data-system-theme*='dark'], .dark {
|
||||
--primary-text-color: #EEEEEE;
|
||||
--primary-text-color: #EEE;
|
||||
--secondary-text-color: #ddd;
|
||||
--tertiary-text-color: #999;
|
||||
--title-color: #EEEEEE;
|
||||
--title-color: #EEE;
|
||||
--bg-color: #212121;
|
||||
--favorite-icon-color: #00FF00;
|
||||
--favorite-icon-color: #0F0;
|
||||
--card-bg-color: #303030;
|
||||
--secondary-card-bg-color: rgba(0, 0, 0, 0.75);
|
||||
--secondary-card-bg-color: rgb(0 0 0 / 75%);
|
||||
--scrollbar-color: #414141;
|
||||
--scrollbar-color-hover: #757575;
|
||||
--side-nav-color: #262626;
|
||||
|
|
@ -101,14 +101,14 @@
|
|||
}
|
||||
|
||||
.black {
|
||||
--primary-text-color: #EEEEEE;
|
||||
--primary-text-color: #EEE;
|
||||
--secondary-text-color: #ddd;
|
||||
--tertiary-text-color: #EEEEEE;
|
||||
--title-color: #EEEEEE;
|
||||
--bg-color: #000000;
|
||||
--favorite-icon-color: #00FF00;
|
||||
--card-bg-color: #000000;
|
||||
--secondary-card-bg-color: rgba(0, 0, 0, 0.75);
|
||||
--tertiary-text-color: #EEE;
|
||||
--title-color: #EEE;
|
||||
--bg-color: #000;
|
||||
--favorite-icon-color: #0F0;
|
||||
--card-bg-color: #000;
|
||||
--secondary-card-bg-color: rgb(0 0 0 / 75%);
|
||||
--scrollbar-color: #515151;
|
||||
--scrollbar-color-hover: #424242;
|
||||
--side-nav-color: #0f0f0f;
|
||||
|
|
@ -118,13 +118,13 @@
|
|||
}
|
||||
|
||||
.gray {
|
||||
--primary-text-color: #EEEEEE;
|
||||
--primary-text-color: #EEE;
|
||||
--secondary-text-color: #E0E0E0;
|
||||
--tertiary-text-color: #F5F5F5;
|
||||
--title-color: #EEEEEE;
|
||||
--title-color: #EEE;
|
||||
--bg-color: #212121;
|
||||
--card-bg-color: #303030;
|
||||
--secondary-card-bg-color: rgba(0, 0, 0, 0.75);
|
||||
--secondary-card-bg-color: rgb(0 0 0 / 75%);
|
||||
--side-nav-color: #262626;
|
||||
--side-nav-hover-color: #212121;
|
||||
--side-nav-active-color: #303030;
|
||||
|
|
@ -137,7 +137,7 @@
|
|||
--tertiary-text-color: #e5e8f3;
|
||||
--title-color: #BD93F9;
|
||||
--bg-color: #282A36;
|
||||
--favorite-icon-color: #00FF00;
|
||||
--favorite-icon-color: #0F0;
|
||||
--card-bg-color: #33353F;
|
||||
--secondary-card-bg-color: #282A36;
|
||||
--scrollbar-color: #44475A;
|
||||
|
|
@ -156,7 +156,7 @@
|
|||
--tertiary-text-color: #a6adc8;
|
||||
--title-color: var(--accent-color);
|
||||
--bg-color: #1e1e2e;
|
||||
--favorite-icon-color: #00FF00;
|
||||
--favorite-icon-color: #0F0;
|
||||
--card-bg-color: #181825;
|
||||
--secondary-card-bg-color: #1e1e2e;
|
||||
--scrollbar-color: #313244;
|
||||
|
|
@ -173,12 +173,12 @@
|
|||
--primary-text-color: #1F002B;
|
||||
--secondary-text-color: #361836;
|
||||
--tertiary-text-color: #5A285A;
|
||||
--primary-shadow-color: rgb(255, 240, 240, 0.5);
|
||||
--primary-shadow-color: rgb(255 240 240 / 50%);
|
||||
--title-color: #185EB4;
|
||||
--bg-color: #ffeadd;
|
||||
--favorite-icon-color: #760278;
|
||||
--card-bg-color: #ffd1dc;
|
||||
--secondary-card-bg-color: #FFFFFF;
|
||||
--secondary-card-bg-color: #FFF;
|
||||
--scrollbar-color: #f5c8d3;
|
||||
--scrollbar-color-hover: #760278;
|
||||
--scrollbar-text-color-hover: var(--scrollbar-color);
|
||||
|
|
@ -195,62 +195,63 @@
|
|||
--primary-text-color: #FFFF;
|
||||
--secondary-text-color: #FFFF;
|
||||
--tertiary-text-color: #FFFF;
|
||||
--title-color: #000000;
|
||||
--title-color: #000;
|
||||
--bg-color: #ff008a;
|
||||
--favorite-icon-color: #00FF00;
|
||||
--favorite-icon-color: #0F0;
|
||||
--card-bg-color: #DE1C85;
|
||||
--secondary-card-bg-color: rgba(0, 0, 0, 0.75);
|
||||
--scrollbar-color: #FFFFFF;
|
||||
--secondary-card-bg-color: rgb(0 0 0 / 75%);
|
||||
--scrollbar-color: #FFF;
|
||||
--scrollbar-color-hover: #C0F6FF;
|
||||
--scrollbar-text-color-hover: #000000;
|
||||
--scrollbar-text-color-hover: #000;
|
||||
--side-nav-color: #EE1E90;
|
||||
--side-nav-hover-color: #FFFFFF;
|
||||
--side-nav-hover-text-color: #000000;
|
||||
--side-nav-hover-color: #FFF;
|
||||
--side-nav-hover-text-color: #000;
|
||||
--side-nav-active-color: #959595;
|
||||
--side-nav-active-text-color: #000000;
|
||||
--side-nav-active-text-color: #000;
|
||||
--search-bar-color: #9C2D5D;
|
||||
--logo-icon: url("../../_icons/iconWhiteSmall.svg");
|
||||
--logo-text: url("../../_icons/textWhiteSmall.svg");
|
||||
|
||||
/* The hot pink theme does not have a great color contrast with
|
||||
many other colors than black and white. This means that the primary and
|
||||
secondary theme colors are forced here to be black so as to avoid any
|
||||
accessibility concerns. */
|
||||
--primary-color: #000000 !important;
|
||||
--primary-color-hover: #000000 !important;
|
||||
--primary-color-active: #000000 !important;
|
||||
--text-with-main-color: #FFFFFF !important;
|
||||
--text-with-accent-color: #FFFFFF !important;
|
||||
--accent-color: #000000 !important;
|
||||
--primary-color: #000 !important;
|
||||
--primary-color-hover: #000 !important;
|
||||
--primary-color-active: #000 !important;
|
||||
--text-with-main-color: #FFF !important;
|
||||
--text-with-accent-color: #FFF !important;
|
||||
--accent-color: #000 !important;
|
||||
--accent-color-hover: #808080 !important;
|
||||
--accent-color-active: #6A739A !important;
|
||||
--accent-color-light: #000000 !important;
|
||||
--accent-color-visited: #000000 !important;
|
||||
--accent-color-opacity1: rgba(0,0,0,0.04) !important;
|
||||
--accent-color-opacity2: rgba(0,0,0,0.12) !important;
|
||||
--accent-color-opacity3: rgba(255,255,255,0.16) !important;
|
||||
--accent-color-opacity4: rgba(255,255,255,0.24) !important;
|
||||
--accent-color-light: #000 !important;
|
||||
--accent-color-visited: #000 !important;
|
||||
--accent-color-opacity1: rgb(0 0 0 / 4%) !important;
|
||||
--accent-color-opacity2: rgb(0 0 0 / 12%) !important;
|
||||
--accent-color-opacity3: rgb(255 255 255 / 16%) !important;
|
||||
--accent-color-opacity4: rgb(255 255 255 / 24%) !important;
|
||||
}
|
||||
|
||||
/* Given that the Hot Pink theme does not need link underlining due to meeting
|
||||
WCAG 2 Level AA (https://webaim.org/resources/linkcontrastchecker/?fcolor=FFFFFF&bcolor=DE1C85&lcolor=000000),
|
||||
it can be safely elided. This looks quite pleasant on this theme. */
|
||||
.hotPink a:not(:hover), .hotPink a.navOption:hover, .hotPink *:not(:hover) {
|
||||
.hotPink a:not(:hover, :focus), .hotPink .navOption:hover, .hotPink .navOption:focus, .hotPink *:not(:hover, :focus) {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.hotPink a:hover {
|
||||
.hotPink a:hover, .hotPink a:focus {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.nordic {
|
||||
--primary-text-color: #EEEEEE;
|
||||
--primary-text-color: #EEE;
|
||||
--secondary-text-color: #ddd;
|
||||
--tertiary-text-color: #EEEEEE;
|
||||
--title-color: #EEEEEE;
|
||||
--tertiary-text-color: #EEE;
|
||||
--title-color: #EEE;
|
||||
--bg-color: #2b2f3a;
|
||||
--favorite-icon-color: #00FF00;
|
||||
--favorite-icon-color: #0F0;
|
||||
--card-bg-color: #2e3440;
|
||||
--secondary-card-bg-color: rgba(59, 66, 82, 0.75);
|
||||
--secondary-card-bg-color: rgb(59 66 82 / 75%);
|
||||
--scrollbar-color: #4b566a;
|
||||
--scrollbar-color-hover: #4b566a;
|
||||
--side-nav-color: #2e3440;
|
||||
|
|
@ -271,7 +272,7 @@ it can be safely elided. This looks quite pleasant on this theme. */
|
|||
.mainCyan,
|
||||
.mainTeal,
|
||||
.mainGreen {
|
||||
--text-with-main-color: #FFFFFF;
|
||||
--text-with-main-color: #FFF;
|
||||
--logo-icon-bar-color: url("../../_icons/iconWhiteSmall.svg");
|
||||
--logo-text-bar-color: url("../../_icons/textWhiteSmall.svg");
|
||||
}
|
||||
|
|
@ -282,7 +283,7 @@ it can be safely elided. This looks quite pleasant on this theme. */
|
|||
.mainAmber,
|
||||
.mainOrange,
|
||||
.mainDeepOrange {
|
||||
--text-with-main-color: #000000;
|
||||
--text-with-main-color: #000;
|
||||
--logo-icon-bar-color: url("../../_icons/iconBlackSmall.svg");
|
||||
--logo-text-bar-color: url("../../_icons/textBlackSmall.svg");
|
||||
}
|
||||
|
|
@ -431,8 +432,8 @@ it can be safely elided. This looks quite pleasant on this theme. */
|
|||
}
|
||||
|
||||
.mainDraculaRed {
|
||||
--primary-color: #FF5555;
|
||||
--primary-color-hover: #FF6666;
|
||||
--primary-color: #F55;
|
||||
--primary-color-hover: #F66;
|
||||
--primary-color-active: #E64D4D;
|
||||
}
|
||||
|
||||
|
|
@ -555,7 +556,7 @@ it can be safely elided. This looks quite pleasant on this theme. */
|
|||
.secCyan,
|
||||
.secTeal,
|
||||
.secGreen {
|
||||
--text-with-accent-color: #FFFFFF;
|
||||
--text-with-accent-color: #FFF;
|
||||
}
|
||||
|
||||
.secLightGreen,
|
||||
|
|
@ -564,7 +565,7 @@ it can be safely elided. This looks quite pleasant on this theme. */
|
|||
.secAmber,
|
||||
.secOrange,
|
||||
.secDeepOrange {
|
||||
--text-with-accent-color: #000000;
|
||||
--text-with-accent-color: #000;
|
||||
}
|
||||
|
||||
.secRed {
|
||||
|
|
@ -573,10 +574,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
|
|||
--accent-color-active: #c62828;
|
||||
--accent-color-light: #ef9a9a;
|
||||
--accent-color-visited: #b71c1c;
|
||||
--accent-color-opacity1: rgba(244,67,54,0.04);
|
||||
--accent-color-opacity2: rgba(244,67,54,0.12);
|
||||
--accent-color-opacity3: rgba(244,67,54,0.16);
|
||||
--accent-color-opacity4: rgba(244,67,54,0.24);
|
||||
--accent-color-opacity1: rgb(244 67 54 / 4%);
|
||||
--accent-color-opacity2: rgb(244 67 54 / 12%);
|
||||
--accent-color-opacity3: rgb(244 67 54 / 16%);
|
||||
--accent-color-opacity4: rgb(244 67 54 / 24%);
|
||||
}
|
||||
|
||||
.secPink {
|
||||
|
|
@ -585,10 +586,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
|
|||
--accent-color-active: #AD1457;
|
||||
--accent-color-light: #F48FB1;
|
||||
--accent-color-visited: #880E4F;
|
||||
--accent-color-opacity1: rgba(233,30,99,0.04);
|
||||
--accent-color-opacity2: rgba(233,30,99,0.12);
|
||||
--accent-color-opacity3: rgba(233,30,99,0.16);
|
||||
--accent-color-opacity4: rgba(233,30,99,0.24);
|
||||
--accent-color-opacity1: rgb(233 30 99 / 4%);
|
||||
--accent-color-opacity2: rgb(233 30 99 / 12%);
|
||||
--accent-color-opacity3: rgb(233 30 99 / 16%);
|
||||
--accent-color-opacity4: rgb(233 30 99 / 24%);
|
||||
}
|
||||
|
||||
.secPurple {
|
||||
|
|
@ -597,10 +598,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
|
|||
--accent-color-active: #6A1B9A;
|
||||
--accent-color-light: #CE93D8;
|
||||
--accent-color-visited: #4A148C;
|
||||
--accent-color-opacity1: rgba(156,39,176,0.04);
|
||||
--accent-color-opacity2: rgba(156,39,176,0.12);
|
||||
--accent-color-opacity3: rgba(156,39,176,0.16);
|
||||
--accent-color-opacity4: rgba(156,39,176,0.24);
|
||||
--accent-color-opacity1: rgb(156 39 176 / 4%);
|
||||
--accent-color-opacity2: rgb(156 39 176 / 12%);
|
||||
--accent-color-opacity3: rgb(156 39 176 / 16%);
|
||||
--accent-color-opacity4: rgb(156 39 176 / 24%);
|
||||
}
|
||||
|
||||
.secDeepPurple {
|
||||
|
|
@ -609,10 +610,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
|
|||
--accent-color-active: #4527A0;
|
||||
--accent-color-light: #B39DDB;
|
||||
--accent-color-visited: #311B92;
|
||||
--accent-color-opacity1: rgba(103,58,183,0.04);
|
||||
--accent-color-opacity2: rgba(103,58,183,0.12);
|
||||
--accent-color-opacity3: rgba(103,58,183,0.16);
|
||||
--accent-color-opacity4: rgba(103,58,183,0.24);
|
||||
--accent-color-opacity1: rgb(103 58 183 / 4%);
|
||||
--accent-color-opacity2: rgb(103 58 183 / 12%);
|
||||
--accent-color-opacity3: rgb(103 58 183 / 16%);
|
||||
--accent-color-opacity4: rgb(103 58 183 / 24%);
|
||||
}
|
||||
|
||||
.secIndigo {
|
||||
|
|
@ -621,10 +622,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
|
|||
--accent-color-active: #283593;
|
||||
--accent-color-light: #9FA8DA;
|
||||
--accent-color-visited: #1A237E;
|
||||
--accent-color-opacity1: rgba(63,81,181,0.04);
|
||||
--accent-color-opacity2: rgba(63,81,181,0.12);
|
||||
--accent-color-opacity3: rgba(63,81,181,0.16);
|
||||
--accent-color-opacity4: rgba(63,81,181,0.24);
|
||||
--accent-color-opacity1: rgb(63 81 181 / 4%);
|
||||
--accent-color-opacity2: rgb(63 81 181 / 12%);
|
||||
--accent-color-opacity3: rgb(63 81 181 / 16%);
|
||||
--accent-color-opacity4: rgb(63 81 181 / 24%);
|
||||
}
|
||||
|
||||
.secBlue {
|
||||
|
|
@ -633,10 +634,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
|
|||
--accent-color-active: #1565C0;
|
||||
--accent-color-light: #90CAF9;
|
||||
--accent-color-visited: #0D47A1;
|
||||
--accent-color-opacity1: rgba(33,150,243,0.04);
|
||||
--accent-color-opacity2: rgba(33,150,243,0.12);
|
||||
--accent-color-opacity3: rgba(33,150,243,0.16);
|
||||
--accent-color-opacity4: rgba(33,150,243,0.24);
|
||||
--accent-color-opacity1: rgb(33 150 243 / 4%);
|
||||
--accent-color-opacity2: rgb(33 150 243 / 12%);
|
||||
--accent-color-opacity3: rgb(33 150 243 / 16%);
|
||||
--accent-color-opacity4: rgb(33 150 243 / 24%);
|
||||
}
|
||||
|
||||
.secLightBlue {
|
||||
|
|
@ -645,10 +646,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
|
|||
--accent-color-active: #0277BD;
|
||||
--accent-color-light: #81D4FA;
|
||||
--accent-color-visited: #01579B;
|
||||
--accent-color-opacity1: rgba(3,169,244,0.04);
|
||||
--accent-color-opacity2: rgba(3,169,244,0.12);
|
||||
--accent-color-opacity3: rgba(3,169,244,0.16);
|
||||
--accent-color-opacity4: rgba(3,169,244,0.24);
|
||||
--accent-color-opacity1: rgb(3 169 244 / 4%);
|
||||
--accent-color-opacity2: rgb(3 169 244 / 12%);
|
||||
--accent-color-opacity3: rgb(3 169 244 / 16%);
|
||||
--accent-color-opacity4: rgb(3 169 244 / 24%);
|
||||
}
|
||||
|
||||
.secCyan {
|
||||
|
|
@ -657,10 +658,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
|
|||
--accent-color-active: #00838F;
|
||||
--accent-color-light: #80DEEA;
|
||||
--accent-color-visited: #006064;
|
||||
--accent-color-opacity1: rgba(0,188,212,0.04);
|
||||
--accent-color-opacity2: rgba(0,188,212,0.12);
|
||||
--accent-color-opacity3: rgba(0,188,212,0.16);
|
||||
--accent-color-opacity4: rgba(0,188,212,0.24);
|
||||
--accent-color-opacity1: rgb(0 188 212 / 4%);
|
||||
--accent-color-opacity2: rgb(0 188 212 / 12%);
|
||||
--accent-color-opacity3: rgb(0 188 212 / 16%);
|
||||
--accent-color-opacity4: rgb(0 188 212 / 24%);
|
||||
}
|
||||
|
||||
.secTeal {
|
||||
|
|
@ -669,10 +670,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
|
|||
--accent-color-active: #00695C;
|
||||
--accent-color-light: #80CBC4;
|
||||
--accent-color-visited: #004D40;
|
||||
--accent-color-opacity1: rgba(0,150,136,0.04);
|
||||
--accent-color-opacity2: rgba(0,150,136,0.12);
|
||||
--accent-color-opacity3: rgba(0,150,136,0.16);
|
||||
--accent-color-opacity4: rgba(0,150,136,0.24);
|
||||
--accent-color-opacity1: rgb(0 150 136 / 4%);
|
||||
--accent-color-opacity2: rgb(0 150 136 / 12%);
|
||||
--accent-color-opacity3: rgb(0 150 136 / 16%);
|
||||
--accent-color-opacity4: rgb(0 150 136 / 24%);
|
||||
}
|
||||
|
||||
.secGreen {
|
||||
|
|
@ -681,10 +682,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
|
|||
--accent-color-active: #2E7D32;
|
||||
--accent-color-light: #A5D6A7;
|
||||
--accent-color-visited: #1B5E20;
|
||||
--accent-color-opacity1: rgba(76,175,80,0.04);
|
||||
--accent-color-opacity2: rgba(76,175,80,0.12);
|
||||
--accent-color-opacity3: rgba(76,175,80,0.16);
|
||||
--accent-color-opacity4: rgba(76,175,80,0.24);
|
||||
--accent-color-opacity1: rgb(76 175 80 / 4%);
|
||||
--accent-color-opacity2: rgb(76 175 80 / 12%);
|
||||
--accent-color-opacity3: rgb(76 175 80 / 16%);
|
||||
--accent-color-opacity4: rgb(76 175 80 / 24%);
|
||||
}
|
||||
|
||||
.secLightGreen {
|
||||
|
|
@ -693,10 +694,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
|
|||
--accent-color-active: #558B2F;
|
||||
--accent-color-light: #C5E1A5;
|
||||
--accent-color-visited: #33691E;
|
||||
--accent-color-opacity1: rgba(139,195,74,0.04);
|
||||
--accent-color-opacity2: rgba(139,195,74,0.12);
|
||||
--accent-color-opacity3: rgba(139,195,74,0.16);
|
||||
--accent-color-opacity4: rgba(139,195,74,0.24);
|
||||
--accent-color-opacity1: rgb(139 195 74 / 4%);
|
||||
--accent-color-opacity2: rgb(139 195 74 / 12%);
|
||||
--accent-color-opacity3: rgb(139 195 74 / 16%);
|
||||
--accent-color-opacity4: rgb(139 195 74 / 24%);
|
||||
}
|
||||
|
||||
.secLime {
|
||||
|
|
@ -705,10 +706,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
|
|||
--accent-color-active: #9E9D24;
|
||||
--accent-color-light: #E6EE9C;
|
||||
--accent-color-visited: #827717;
|
||||
--accent-color-opacity1: rgba(205,220,57,0.04);
|
||||
--accent-color-opacity2: rgba(205,220,57,0.12);
|
||||
--accent-color-opacity3: rgba(205,220,57,0.16);
|
||||
--accent-color-opacity4: rgba(205,220,57,0.24);
|
||||
--accent-color-opacity1: rgb(205 220 57 / 4%);
|
||||
--accent-color-opacity2: rgb(205 220 57 / 12%);
|
||||
--accent-color-opacity3: rgb(205 220 57 / 16%);
|
||||
--accent-color-opacity4: rgb(205 220 57 / 24%);
|
||||
}
|
||||
|
||||
.secYellow {
|
||||
|
|
@ -717,10 +718,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
|
|||
--accent-color-active: #F9A825;
|
||||
--accent-color-light: #FFF59D;
|
||||
--accent-color-visited: #F57F17;
|
||||
--accent-color-opacity1: rgba(255,235,59,0.04);
|
||||
--accent-color-opacity2: rgba(255,235,59,0.12);
|
||||
--accent-color-opacity3: rgba(255,235,59,0.16);
|
||||
--accent-color-opacity4: rgba(255,235,59,0.24);
|
||||
--accent-color-opacity1: rgb(255 235 59 / 4%);
|
||||
--accent-color-opacity2: rgb(255 235 59 / 12%);
|
||||
--accent-color-opacity3: rgb(255 235 59 / 16%);
|
||||
--accent-color-opacity4: rgb(255 235 59 / 24%);
|
||||
}
|
||||
|
||||
.secAmber {
|
||||
|
|
@ -729,10 +730,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
|
|||
--accent-color-active: #FF8F00;
|
||||
--accent-color-light: #FFE082;
|
||||
--accent-color-visited: #FF6F00;
|
||||
--accent-color-opacity1: rgba(255,193,7,0.04);
|
||||
--accent-color-opacity2: rgba(255,193,7,0.12);
|
||||
--accent-color-opacity3: rgba(255,193,7,0.16);
|
||||
--accent-color-opacity4: rgba(255,193,7,0.24);
|
||||
--accent-color-opacity1: rgb(255 193 7 / 4%);
|
||||
--accent-color-opacity2: rgb(255 193 7 / 12%);
|
||||
--accent-color-opacity3: rgb(255 193 7 / 16%);
|
||||
--accent-color-opacity4: rgb(255 193 7 / 24%);
|
||||
}
|
||||
|
||||
.secOrange {
|
||||
|
|
@ -741,10 +742,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
|
|||
--accent-color-active: #EF6C00;
|
||||
--accent-color-light: #FFCC80;
|
||||
--accent-color-visited: #E65100;
|
||||
--accent-color-opacity1: rgba(255,152,0,0.04);
|
||||
--accent-color-opacity2: rgba(255,152,0,0.12);
|
||||
--accent-color-opacity3: rgba(255,152,0,0.16);
|
||||
--accent-color-opacity4: rgba(255,152,0,0.24);
|
||||
--accent-color-opacity1: rgb(255 152 0 / 4%);
|
||||
--accent-color-opacity2: rgb(255 152 0 / 12%);
|
||||
--accent-color-opacity3: rgb(255 152 0 / 16%);
|
||||
--accent-color-opacity4: rgb(255 152 0 / 24%);
|
||||
}
|
||||
|
||||
.secDeepOrange {
|
||||
|
|
@ -753,10 +754,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
|
|||
--accent-color-active: #D84315;
|
||||
--accent-color-light: #FFAB91;
|
||||
--accent-color-visited: #BF360C;
|
||||
--accent-color-opacity1: rgba(255,87,34,0.04);
|
||||
--accent-color-opacity2: rgba(255,87,34,0.12);
|
||||
--accent-color-opacity3: rgba(255,87,34,0.16);
|
||||
--accent-color-opacity4: rgba(255,87,34,0.24);
|
||||
--accent-color-opacity1: rgb(255 87 34 / 4%);
|
||||
--accent-color-opacity2: rgb(255 87 34 / 12%);
|
||||
--accent-color-opacity3: rgb(255 87 34 / 16%);
|
||||
--accent-color-opacity4: rgb(255 87 34 / 24%);
|
||||
}
|
||||
|
||||
.secDraculaCyan,
|
||||
|
|
@ -779,10 +780,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
|
|||
.secDraculaPurple,
|
||||
.secDraculaRed,
|
||||
.secDraculaYellow {
|
||||
--accent-color-opacity1: rgba(98, 114, 164, 0.04);
|
||||
--accent-color-opacity2: rgba(98, 114, 164, 0.12);
|
||||
--accent-color-opacity3: rgba(98, 114, 164, 0.16);
|
||||
--accent-color-opacity4: rgba(98, 114, 164, 0.24);
|
||||
--accent-color-opacity1: rgb(98 114 164 / 4%);
|
||||
--accent-color-opacity2: rgb(98 114 164 / 12%);
|
||||
--accent-color-opacity3: rgb(98 114 164 / 16%);
|
||||
--accent-color-opacity4: rgb(98 114 164 / 24%);
|
||||
}
|
||||
|
||||
.secDraculaCyan {
|
||||
|
|
@ -827,11 +828,11 @@ it can be safely elided. This looks quite pleasant on this theme. */
|
|||
}
|
||||
|
||||
.secDraculaRed {
|
||||
--accent-color: #FF5555;
|
||||
--accent-color-hover: #FF6666;
|
||||
--accent-color: #F55;
|
||||
--accent-color-hover: #F66;
|
||||
--accent-color-active: #E64D4D;
|
||||
--accent-color-light: #FF7777;
|
||||
--accent-color-visited: #CC4444;
|
||||
--accent-color-light: #F77;
|
||||
--accent-color-visited: #C44;
|
||||
}
|
||||
|
||||
.secDraculaYellow {
|
||||
|
|
@ -865,10 +866,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
|
|||
--accent-color-active: #e1c8c3;
|
||||
--accent-color-light: #F8EAE7;
|
||||
--accent-color-visited: #D3A197;
|
||||
--accent-color-opacity1: rgba(245,224,220,0.04);
|
||||
--accent-color-opacity2: rgba(245,224,220,0.12);
|
||||
--accent-color-opacity3: rgba(245,224,220,0.16);
|
||||
--accent-color-opacity4: rgba(245,224,220,0.24);
|
||||
--accent-color-opacity1: rgb(245 224 220 / 4%);
|
||||
--accent-color-opacity2: rgb(245 224 220 / 12%);
|
||||
--accent-color-opacity3: rgb(245 224 220 / 16%);
|
||||
--accent-color-opacity4: rgb(245 224 220 / 24%);
|
||||
}
|
||||
|
||||
.secCatppuccinMochaFlamingo {
|
||||
|
|
@ -877,10 +878,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
|
|||
--accent-color-active: #ddb7b7;
|
||||
--accent-color-light: #F7DFDF;
|
||||
--accent-color-visited: #cf9898;
|
||||
--accent-color-opacity1: rgba(242,205,205,0.04);
|
||||
--accent-color-opacity2: rgba(242,205,205,0.12);
|
||||
--accent-color-opacity3: rgba(242,205,205,0.16);
|
||||
--accent-color-opacity4: rgba(242,205,205,0.24);
|
||||
--accent-color-opacity1: rgb(242 205 205 / 4%);
|
||||
--accent-color-opacity2: rgb(242 205 205 / 12%);
|
||||
--accent-color-opacity3: rgb(242 205 205 / 16%);
|
||||
--accent-color-opacity4: rgb(242 205 205 / 24%);
|
||||
}
|
||||
|
||||
.secCatppuccinMochaPink {
|
||||
|
|
@ -889,10 +890,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
|
|||
--accent-color-active: #dca3cd;
|
||||
--accent-color-light: #f4dbed;
|
||||
--accent-color-visited: #d28fc0;
|
||||
--accent-color-opacity1: rgba(245,194,231,0.04);
|
||||
--accent-color-opacity2: rgba(245,194,231,0.12);
|
||||
--accent-color-opacity3: rgba(245,194,231,0.16);
|
||||
--accent-color-opacity4: rgba(245,194,231,0.24);
|
||||
--accent-color-opacity1: rgb(245 194 231 / 4%);
|
||||
--accent-color-opacity2: rgb(245 194 231 / 12%);
|
||||
--accent-color-opacity3: rgb(245 194 231 / 16%);
|
||||
--accent-color-opacity4: rgb(245 194 231 / 24%);
|
||||
}
|
||||
|
||||
.secCatppuccinMochaMauve {
|
||||
|
|
@ -901,10 +902,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
|
|||
--accent-color-active: #b38fdf;
|
||||
--accent-color-light: #D6B9F9;
|
||||
--accent-color-visited: #A171DA;
|
||||
--accent-color-opacity1: rgba(203,166,247,0.04);
|
||||
--accent-color-opacity2: rgba(203,166,247,0.12);
|
||||
--accent-color-opacity3: rgba(203,166,247,0.16);
|
||||
--accent-color-opacity4: rgba(203,166,247,0.24);
|
||||
--accent-color-opacity1: rgb(203 166 247 / 4%);
|
||||
--accent-color-opacity2: rgb(203 166 247 / 12%);
|
||||
--accent-color-opacity3: rgb(203 166 247 / 16%);
|
||||
--accent-color-opacity4: rgb(203 166 247 / 24%);
|
||||
}
|
||||
|
||||
.secCatppuccinMochaRed {
|
||||
|
|
@ -913,10 +914,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
|
|||
--accent-color-active: #de7693;
|
||||
--accent-color-light: #F5A3BA;
|
||||
--accent-color-visited: #D56C89;
|
||||
--accent-color-opacity1: rgba(243,139,168,0.04);
|
||||
--accent-color-opacity2: rgba(243,139,168,0.12);
|
||||
--accent-color-opacity3: rgba(243,139,168,0.16);
|
||||
--accent-color-opacity4: rgba(243,139,168,0.24);
|
||||
--accent-color-opacity1: rgb(243 139 168 / 4%);
|
||||
--accent-color-opacity2: rgb(243 139 168 / 12%);
|
||||
--accent-color-opacity3: rgb(243 139 168 / 16%);
|
||||
--accent-color-opacity4: rgb(243 139 168 / 24%);
|
||||
}
|
||||
|
||||
.secCatppuccinMochaMaroon {
|
||||
|
|
@ -925,10 +926,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
|
|||
--accent-color-active: #d68895;
|
||||
--accent-color-light: #F0B7C0;
|
||||
--accent-color-visited: #C86A79;
|
||||
--accent-color-opacity1: rgba(235,160,172,0.04);
|
||||
--accent-color-opacity2: rgba(235,160,172,0.12);
|
||||
--accent-color-opacity3: rgba(235,160,172,0.16);
|
||||
--accent-color-opacity4: rgba(235,160,172,0.24);
|
||||
--accent-color-opacity1: rgb(235 160 172 / 4%);
|
||||
--accent-color-opacity2: rgb(235 160 172 / 12%);
|
||||
--accent-color-opacity3: rgb(235 160 172 / 16%);
|
||||
--accent-color-opacity4: rgb(235 160 172 / 24%);
|
||||
}
|
||||
|
||||
.secCatppuccinMochaPeach {
|
||||
|
|
@ -937,10 +938,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
|
|||
--accent-color-active: #e1996d;
|
||||
--accent-color-light: #FBC4A2;
|
||||
--accent-color-visited: #D78A5B;
|
||||
--accent-color-opacity1: rgba(250,179,135,0.04);
|
||||
--accent-color-opacity2: rgba(250,179,135,0.12);
|
||||
--accent-color-opacity3: rgba(250,179,135,0.16);
|
||||
--accent-color-opacity4: rgba(250,179,135,0.24);
|
||||
--accent-color-opacity1: rgb(250 179 135 / 4%);
|
||||
--accent-color-opacity2: rgb(250 179 135 / 12%);
|
||||
--accent-color-opacity3: rgb(250 179 135 / 16%);
|
||||
--accent-color-opacity4: rgb(250 179 135 / 24%);
|
||||
}
|
||||
|
||||
.secCatppuccinMochaYellow {
|
||||
|
|
@ -949,10 +950,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
|
|||
--accent-color-active: #dec48d;
|
||||
--accent-color-light: #FBECCB;
|
||||
--accent-color-visited: #D5B05D;
|
||||
--accent-color-opacity1: rgba(249,226,175,0.04);
|
||||
--accent-color-opacity2: rgba(249,226,175,0.12);
|
||||
--accent-color-opacity3: rgba(249,226,175,0.16);
|
||||
--accent-color-opacity4: rgba(249,226,175,0.24);
|
||||
--accent-color-opacity1: rgb(249 226 175 / 4%);
|
||||
--accent-color-opacity2: rgb(249 226 175 / 12%);
|
||||
--accent-color-opacity3: rgb(249 226 175 / 16%);
|
||||
--accent-color-opacity4: rgb(249 226 175 / 24%);
|
||||
}
|
||||
|
||||
.secCatppuccinMochaGreen {
|
||||
|
|
@ -961,10 +962,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
|
|||
--accent-color-active: #86c780;
|
||||
--accent-color-light: #BCEAB8;
|
||||
--accent-color-visited: #6ED166;
|
||||
--accent-color-opacity1: rgba(166,227,161,0.04);
|
||||
--accent-color-opacity2: rgba(166,227,161,0.12);
|
||||
--accent-color-opacity3: rgba(166,227,161,0.16);
|
||||
--accent-color-opacity4: rgba(166,227,161,0.24);
|
||||
--accent-color-opacity1: rgb(166 227 161 / 4%);
|
||||
--accent-color-opacity2: rgb(166 227 161 / 12%);
|
||||
--accent-color-opacity3: rgb(166 227 161 / 16%);
|
||||
--accent-color-opacity4: rgb(166 227 161 / 24%);
|
||||
}
|
||||
|
||||
.secCatppuccinMochaTeal {
|
||||
|
|
@ -973,10 +974,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
|
|||
--accent-color-active: #6fc5b7;
|
||||
--accent-color-light: #AFE9DF;
|
||||
--accent-color-visited: #5CCCB9;
|
||||
--accent-color-opacity1: rgba(148,226,213,0.04);
|
||||
--accent-color-opacity2: rgba(148,226,213,0.12);
|
||||
--accent-color-opacity3: rgba(148,226,213,0.16);
|
||||
--accent-color-opacity4: rgba(148,226,213,0.24);
|
||||
--accent-color-opacity1: rgb(148 226 213 / 4%);
|
||||
--accent-color-opacity2: rgb(148 226 213 / 12%);
|
||||
--accent-color-opacity3: rgb(148 226 213 / 16%);
|
||||
--accent-color-opacity4: rgb(148 226 213 / 24%);
|
||||
}
|
||||
|
||||
.secCatppuccinMochaSky {
|
||||
|
|
@ -985,10 +986,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
|
|||
--accent-color-active: #68bcca;
|
||||
--accent-color-light: #9FE3EF;
|
||||
--accent-color-visited: #64C2D3;
|
||||
--accent-color-opacity1: rgba(137,220,235,0.04);
|
||||
--accent-color-opacity2: rgba(137,220,235,0.12);
|
||||
--accent-color-opacity3: rgba(137,220,235,0.16);
|
||||
--accent-color-opacity4: rgba(137,220,235,0.24);
|
||||
--accent-color-opacity1: rgb(137 220 235 / 4%);
|
||||
--accent-color-opacity2: rgb(137 220 235 / 12%);
|
||||
--accent-color-opacity3: rgb(137 220 235 / 16%);
|
||||
--accent-color-opacity4: rgb(137 220 235 / 24%);
|
||||
}
|
||||
|
||||
.secCatppuccinMochaSapphire {
|
||||
|
|
@ -997,10 +998,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
|
|||
--accent-color-active: #59a9cf;
|
||||
--accent-color-light: #93D4F0;
|
||||
--accent-color-visited: #6AB6D7;
|
||||
--accent-color-opacity1: rgba(116,199,236,0.04);
|
||||
--accent-color-opacity2: rgba(116,199,236,0.12);
|
||||
--accent-color-opacity3: rgba(116,199,236,0.16);
|
||||
--accent-color-opacity4: rgba(116,199,236,0.24);
|
||||
--accent-color-opacity1: rgb(116 199 236 / 4%);
|
||||
--accent-color-opacity2: rgb(116 199 236 / 12%);
|
||||
--accent-color-opacity3: rgb(116 199 236 / 16%);
|
||||
--accent-color-opacity4: rgb(116 199 236 / 24%);
|
||||
}
|
||||
|
||||
.secCatppuccinMochaBlue {
|
||||
|
|
@ -1009,10 +1010,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
|
|||
--accent-color-active: #6593df;
|
||||
--accent-color-light: #A7C7FB;
|
||||
--accent-color-visited: #739CDD;
|
||||
--accent-color-opacity1: rgba(137,220,235,0.04);
|
||||
--accent-color-opacity2: rgba(137,220,235,0.12);
|
||||
--accent-color-opacity3: rgba(137,220,235,0.16);
|
||||
--accent-color-opacity4: rgba(137,220,235,0.24);
|
||||
--accent-color-opacity1: rgb(137 220 235 / 4%);
|
||||
--accent-color-opacity2: rgb(137 220 235 / 12%);
|
||||
--accent-color-opacity3: rgb(137 220 235 / 16%);
|
||||
--accent-color-opacity4: rgb(137 220 235 / 24%);
|
||||
}
|
||||
|
||||
.secCatppuccinMochaLavender {
|
||||
|
|
@ -1021,10 +1022,10 @@ it can be safely elided. This looks quite pleasant on this theme. */
|
|||
--accent-color-active: #8d98e4;
|
||||
--accent-color-light: #D2D8FE;
|
||||
--accent-color-visited: #96A1E9;
|
||||
--accent-color-opacity1: rgba(180,190,254,0.04);
|
||||
--accent-color-opacity2: rgba(180,190,254,0.12);
|
||||
--accent-color-opacity3: rgba(180,190,254,0.16);
|
||||
--accent-color-opacity4: rgba(180,190,254,0.24);
|
||||
--accent-color-opacity1: rgb(180 190 254 / 4%);
|
||||
--accent-color-opacity2: rgb(180 190 254 / 12%);
|
||||
--accent-color-opacity3: rgb(180 190 254 / 16%);
|
||||
--accent-color-opacity4: rgb(180 190 254 / 24%);
|
||||
}
|
||||
|
||||
body[dir='ltr'] {
|
||||
|
|
@ -1041,7 +1042,7 @@ body[dir='rtl'] {
|
|||
--horizontal-directionality-coefficient: -1;
|
||||
}
|
||||
|
||||
body[dir='rtl'] [data-prefix="fas"]:not([data-icon="magnifying-glass"]):not([data-icon="circle-question"]) {
|
||||
body[dir='rtl'] [data-prefix="fas"]:not([data-icon="magnifying-glass"], [data-icon="circle-question"]) {
|
||||
transform: scale(-1,1);
|
||||
}
|
||||
|
||||
|
|
@ -1058,26 +1059,37 @@ body {
|
|||
min-block-size: 100vh;
|
||||
color: var(--primary-text-color);
|
||||
background-color: var(--bg-color);
|
||||
|
||||
--red-500: #f44336;
|
||||
}
|
||||
|
||||
#app {
|
||||
.app {
|
||||
color: var(--primary-text-color);
|
||||
background-color: var(--bg-color);
|
||||
}
|
||||
|
||||
/* stylelint-disable-next-line a11y/no-outline-none */
|
||||
.hideOutlines *:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* stylelint-disable-next-line no-descending-specificity */
|
||||
a:link {
|
||||
color: var(--link-color);
|
||||
}
|
||||
|
||||
/* stylelint-disable-next-line no-descending-specificity */
|
||||
a:visited {
|
||||
color: var(--link-visited-color);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion) {
|
||||
* {
|
||||
transition: none !important;
|
||||
animation: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
inline-size: 6px;
|
||||
block-size: 6px;
|
||||
|
|
@ -1088,6 +1100,6 @@ a:visited {
|
|||
border-radius: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-thumb:focus {
|
||||
background: var(--scrollbar-color-hover);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -620,7 +620,7 @@ body.vjs-full-window {
|
|||
|
||||
.video-js button {
|
||||
background: none;
|
||||
border: none;
|
||||
border: 0;
|
||||
color: inherit;
|
||||
display: inline-block;
|
||||
font-size: inherit;
|
||||
|
|
@ -1090,10 +1090,7 @@ body.vjs-full-window {
|
|||
cursor: pointer;
|
||||
padding: 0;
|
||||
margin: 0 0.45em 0 0.45em;
|
||||
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
|
||||
background-color: #73859f;
|
||||
background-color: rgba(115, 133, 159, 0.5);
|
||||
}
|
||||
|
|
@ -1736,7 +1733,7 @@ video::-webkit-media-text-track-display {
|
|||
.vjs-text-track-settings fieldset {
|
||||
margin: 5px;
|
||||
padding: 3px;
|
||||
border: none;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.vjs-text-track-settings fieldset span {
|
||||
|
|
@ -1799,7 +1796,7 @@ video::-webkit-media-text-track-display {
|
|||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
border: 0;
|
||||
z-index: -1000;
|
||||
}
|
||||
|
||||
|
|
@ -2028,7 +2025,7 @@ video::-webkit-media-text-track-display {
|
|||
width: 2em;
|
||||
height: 2em;
|
||||
line-height: 2em;
|
||||
border: none;
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
font-size: 3.5em;
|
||||
background-color: rgba(0,0,0,.45);
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
margin-inline: auto;
|
||||
inline-size: 85%;
|
||||
|
||||
@media only screen and (max-width: 680px) {
|
||||
@media only screen and (width <= 680px) {
|
||||
inline-size: 90%;
|
||||
}
|
||||
}
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
margin-inline: auto;
|
||||
max-inline-size: 860px;
|
||||
|
||||
@media only screen and (max-width: 650px) {
|
||||
@media only screen and (width <= 650px) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
}
|
||||
|
||||
.channelBannerContainer.default {
|
||||
background-color: black;
|
||||
background-color: #000;
|
||||
background-image: url("../../assets/img/defaultBanner.png");
|
||||
background-repeat: repeat;
|
||||
background-size: contain;
|
||||
|
|
@ -49,7 +49,6 @@
|
|||
inline-size: 100px;
|
||||
block-size: 100px;
|
||||
border-radius: 200px;
|
||||
-webkit-border-radius: 200px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
|
|
@ -81,6 +80,8 @@
|
|||
}
|
||||
|
||||
.channelSearch {
|
||||
margin-block-start: 10px;
|
||||
max-inline-size: 250px;
|
||||
inline-size: 220px;
|
||||
margin-inline-start: auto;
|
||||
align-self: flex-end;
|
||||
|
|
@ -134,11 +135,6 @@
|
|||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.channelSearch {
|
||||
margin-block-start: 10px;
|
||||
max-inline-size: 250px;
|
||||
}
|
||||
|
||||
.elementListLoading {
|
||||
margin-block-start: 200px;
|
||||
}
|
||||
|
|
@ -174,8 +170,6 @@
|
|||
}
|
||||
|
||||
.communityThumbnail {
|
||||
/* stylelint-disable-next-line property-no-vendor-prefix */
|
||||
-webkit-border-radius: 200px;
|
||||
border-radius: 200px;
|
||||
block-size: 12%;
|
||||
inline-size: 12%;
|
||||
|
|
@ -183,16 +177,14 @@
|
|||
|
||||
.ft-community-image {
|
||||
display: block;
|
||||
margin-inline-start: auto;
|
||||
margin-inline-end: auto;
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.community-post-container {
|
||||
padding-inline-start: 30%;
|
||||
padding-inline-end: 30%;
|
||||
padding-inline: 30%;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 800px) {
|
||||
@media only screen and (width <= 800px) {
|
||||
.channelInfoTabs {
|
||||
block-size: auto;
|
||||
flex-flow: column-reverse;
|
||||
|
|
@ -212,20 +204,22 @@
|
|||
flex: 1 1 0%;
|
||||
}
|
||||
|
||||
#communityPanel {
|
||||
.communityPanel {
|
||||
margin-block-start: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 680px) {
|
||||
@media only screen and (width <= 680px) {
|
||||
.channelInfo {
|
||||
flex-direction: column;
|
||||
margin-block: 20px 10px;
|
||||
}
|
||||
|
||||
.card {
|
||||
max-inline-size: none;
|
||||
inline-size: 100%;
|
||||
}
|
||||
|
||||
.channelInfoActionsContainer {
|
||||
flex-direction: row-reverse;
|
||||
justify-content: left;
|
||||
|
|
@ -234,7 +228,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 400px) {
|
||||
@media only screen and (width <= 400px) {
|
||||
.channelInfo {
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
|
|
@ -260,7 +254,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 260px) {
|
||||
@media only screen and (width <= 260px) {
|
||||
.channelDetails {
|
||||
max-inline-size: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -368,6 +368,7 @@
|
|||
<ft-element-list
|
||||
v-if="!hideChannelCommunity && currentTab === 'community'"
|
||||
id="communityPanel"
|
||||
class="communityPanel"
|
||||
:data="latestCommunityPosts"
|
||||
:use-channels-hidden-preference="false"
|
||||
role="tabpanel"
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
inline-size: 85%;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 680px) {
|
||||
@media only screen and (width <= 680px) {
|
||||
.card {
|
||||
inline-size: 90%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
color: var(--tertiary-text-color);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 680px) {
|
||||
@media only screen and (width <= 680px) {
|
||||
.card {
|
||||
inline-size: 90%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ import PlaylistInfo from '../../components/playlist-info/playlist-info.vue'
|
|||
import FtListVideoNumbered from '../../components/ft-list-video-numbered/ft-list-video-numbered.vue'
|
||||
import FtFlexBox from '../../components/ft-flex-box/ft-flex-box.vue'
|
||||
import FtButton from '../../components/ft-button/ft-button.vue'
|
||||
import FtSelect from '../../components/ft-select/ft-select.vue'
|
||||
import FtAutoLoadNextPageWrapper from '../../components/ft-auto-load-next-page-wrapper/ft-auto-load-next-page-wrapper.vue'
|
||||
import {
|
||||
getLocalPlaylist,
|
||||
|
|
@ -16,6 +17,17 @@ import {
|
|||
import { extractNumberFromString, setPublishedTimestampsInvidious, showToast } from '../../helpers/utils'
|
||||
import { invidiousGetPlaylistInfo, youtubeImageUrlToInvidious } from '../../helpers/api/invidious'
|
||||
import { getPipedPlaylist, getPipedPlaylistMore, pipedImageToYouTube } from '../../helpers/api/piped'
|
||||
|
||||
const SORT_BY_VALUES = {
|
||||
DateAddedNewest: 'date_added_descending',
|
||||
DateAddedOldest: 'date_added_ascending',
|
||||
AuthorAscending: 'author_ascending',
|
||||
AuthorDescending: 'author_descending',
|
||||
VideoTitleAscending: 'video_title_ascending',
|
||||
VideoTitleDescending: 'video_title_descending',
|
||||
Custom: 'custom',
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Playlist',
|
||||
components: {
|
||||
|
|
@ -25,6 +37,7 @@ export default defineComponent({
|
|||
'ft-list-video-numbered': FtListVideoNumbered,
|
||||
'ft-flex-box': FtFlexBox,
|
||||
'ft-button': FtButton,
|
||||
'ft-select': FtSelect,
|
||||
'ft-auto-load-next-page-wrapper': FtAutoLoadNextPageWrapper,
|
||||
},
|
||||
beforeRouteLeave(to, from, next) {
|
||||
|
|
@ -80,6 +93,12 @@ export default defineComponent({
|
|||
currentInvidiousInstance: function () {
|
||||
return this.$store.getters.getCurrentInvidiousInstance
|
||||
},
|
||||
userPlaylistSortOrder: function () {
|
||||
return this.$store.getters.getUserPlaylistSortOrder
|
||||
},
|
||||
sortOrder: function () {
|
||||
return this.isUserPlaylistRequested ? this.userPlaylistSortOrder : SORT_BY_VALUES.Custom
|
||||
},
|
||||
currentLocale: function () {
|
||||
return this.$i18n.locale.replace('_', '-')
|
||||
},
|
||||
|
|
@ -141,10 +160,10 @@ export default defineComponent({
|
|||
},
|
||||
|
||||
sometimesFilteredUserPlaylistItems() {
|
||||
if (!this.isUserPlaylistRequested) { return this.playlistItems }
|
||||
if (this.processedVideoSearchQuery === '') { return this.playlistItems }
|
||||
if (!this.isUserPlaylistRequested) { return this.sortedPlaylistItems }
|
||||
if (this.processedVideoSearchQuery === '') { return this.sortedPlaylistItems }
|
||||
|
||||
return this.playlistItems.filter((v) => {
|
||||
return this.sortedPlaylistItems.filter((v) => {
|
||||
if (typeof (v.title) === 'string' && v.title.toLowerCase().includes(this.processedVideoSearchQuery)) {
|
||||
return true
|
||||
} else if (typeof (v.author) === 'string' && v.author.toLowerCase().includes(this.processedVideoSearchQuery)) {
|
||||
|
|
@ -154,10 +173,41 @@ export default defineComponent({
|
|||
return false
|
||||
})
|
||||
},
|
||||
sortByValues() {
|
||||
return Object.values(SORT_BY_VALUES)
|
||||
},
|
||||
isSortOrderCustom() {
|
||||
return this.sortOrder === SORT_BY_VALUES.Custom
|
||||
},
|
||||
sortedPlaylistItems: function () {
|
||||
if (this.sortOrder === SORT_BY_VALUES.Custom) {
|
||||
return this.playlistItems
|
||||
}
|
||||
|
||||
return this.playlistItems.toSorted((a, b) => {
|
||||
switch (this.sortOrder) {
|
||||
case SORT_BY_VALUES.DateAddedNewest:
|
||||
return b.timeAdded - a.timeAdded
|
||||
case SORT_BY_VALUES.DateAddedOldest:
|
||||
return a.timeAdded - b.timeAdded
|
||||
case SORT_BY_VALUES.VideoTitleAscending:
|
||||
return a.title.localeCompare(b.title, this.currentLocale)
|
||||
case SORT_BY_VALUES.VideoTitleDescending:
|
||||
return b.title.localeCompare(a.title, this.currentLocale)
|
||||
case SORT_BY_VALUES.AuthorAscending:
|
||||
return a.author.localeCompare(b.author, this.currentLocale)
|
||||
case SORT_BY_VALUES.AuthorDescending:
|
||||
return b.author.localeCompare(a.author, this.currentLocale)
|
||||
default:
|
||||
console.error(`Unknown sortOrder: ${this.sortOrder}`)
|
||||
return 0
|
||||
}
|
||||
})
|
||||
},
|
||||
visiblePlaylistItems: function () {
|
||||
if (!this.isUserPlaylistRequested) {
|
||||
// No filtering for non user playlists yet
|
||||
return this.playlistItems
|
||||
return this.sortedPlaylistItems
|
||||
}
|
||||
|
||||
if (this.userPlaylistVisibleLimit < this.sometimesFilteredUserPlaylistItems.length) {
|
||||
|
|
@ -169,6 +219,32 @@ export default defineComponent({
|
|||
processedVideoSearchQuery() {
|
||||
return this.videoSearchQuery.trim().toLowerCase()
|
||||
},
|
||||
sortBySelectNames() {
|
||||
return this.sortByValues.map((k) => {
|
||||
switch (k) {
|
||||
case SORT_BY_VALUES.Custom:
|
||||
return this.$t('Playlist.Sort By.Custom')
|
||||
case SORT_BY_VALUES.DateAddedNewest:
|
||||
return this.$t('Playlist.Sort By.DateAddedNewest')
|
||||
case SORT_BY_VALUES.DateAddedOldest:
|
||||
return this.$t('Playlist.Sort By.DateAddedOldest')
|
||||
case SORT_BY_VALUES.VideoTitleAscending:
|
||||
return this.$t('Playlist.Sort By.VideoTitleAscending')
|
||||
case SORT_BY_VALUES.VideoTitleDescending:
|
||||
return this.$t('Playlist.Sort By.VideoTitleDescending')
|
||||
case SORT_BY_VALUES.AuthorAscending:
|
||||
return this.$t('Playlist.Sort By.AuthorAscending')
|
||||
case SORT_BY_VALUES.AuthorDescending:
|
||||
return this.$t('Playlist.Sort By.AuthorDescending')
|
||||
default:
|
||||
console.error(`Unknown sort: ${k}`)
|
||||
return k
|
||||
}
|
||||
})
|
||||
},
|
||||
sortBySelectValues() {
|
||||
return this.sortByValues
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
$route () {
|
||||
|
|
@ -564,6 +640,7 @@ export default defineComponent({
|
|||
...mapActions([
|
||||
'updateSubscriptionDetails',
|
||||
'updatePlaylist',
|
||||
'updateUserPlaylistSortOrder',
|
||||
'removeVideo',
|
||||
]),
|
||||
|
||||
|
|
|
|||
|
|
@ -10,7 +10,9 @@
|
|||
padding: 10px;
|
||||
position: sticky;
|
||||
inset-block-start: 96px;
|
||||
|
||||
/* This is needed to make prompt always above video entries */
|
||||
|
||||
/* Value being too high would block search suggestions */
|
||||
z-index: 1;
|
||||
inline-size: 30%;
|
||||
|
|
@ -44,7 +46,7 @@
|
|||
|
||||
// Hide action buttons during transitions
|
||||
//
|
||||
// The class for icon container is mainly styled in `_ft-list-item.scss`
|
||||
// The class for icon container is mainly styled in `ft-list-item.scss`
|
||||
// But the transition related classes are all on container elements
|
||||
// So `:deep` is used
|
||||
:deep(.ft-list-item .videoThumbnail .playlistIcons) {
|
||||
|
|
@ -56,6 +58,7 @@
|
|||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.playlistItem-enter, .playlistItem-leave-to {
|
||||
opacity: 0;
|
||||
transform: translate(calc(10% * var(--horizontal-directionality-coefficient)));
|
||||
|
|
@ -66,12 +69,16 @@
|
|||
max-block-size: 7vh;
|
||||
}
|
||||
|
||||
:deep(.videoThumbnail) {
|
||||
margin-block-start: auto;
|
||||
margin-block-end: auto;
|
||||
.sortSelect {
|
||||
/* Put it on the right and align with 'More Options' dropdown button */
|
||||
margin-inline: auto 20px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 850px) {
|
||||
:deep(.videoThumbnail) {
|
||||
margin-block: auto;
|
||||
}
|
||||
|
||||
@media only screen and (width <= 850px) {
|
||||
.routerView {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -43,6 +43,15 @@
|
|||
<template
|
||||
v-if="playlistItems.length > 0"
|
||||
>
|
||||
<ft-select
|
||||
v-if="isUserPlaylistRequested && playlistItems.length > 1"
|
||||
class="sortSelect"
|
||||
:value="sortOrder"
|
||||
:select-names="sortBySelectNames"
|
||||
:select-values="sortBySelectValues"
|
||||
:placeholder="$t('Playlist.Sort By.Sort By')"
|
||||
@change="updateUserPlaylistSortOrder"
|
||||
/>
|
||||
<template
|
||||
v-if="visiblePlaylistItems.length > 0"
|
||||
>
|
||||
|
|
@ -62,8 +71,8 @@
|
|||
appearance="result"
|
||||
:always-show-add-to-playlist-button="true"
|
||||
:quick-bookmark-button-enabled="quickBookmarkButtonEnabled"
|
||||
:can-move-video-up="index > 0 && !playlistInVideoSearchMode"
|
||||
:can-move-video-down="index < playlistItems.length - 1 && !playlistInVideoSearchMode"
|
||||
:can-move-video-up="index > 0 && !playlistInVideoSearchMode && isSortOrderCustom"
|
||||
:can-move-video-down="index < playlistItems.length - 1 && !playlistInVideoSearchMode && isSortOrderCustom"
|
||||
:can-remove-from-playlist="true"
|
||||
:video-index="playlistInVideoSearchMode ? playlistItems.findIndex(i => i === item) : index"
|
||||
:initial-visible-state="index < 10"
|
||||
|
|
|
|||
|
|
@ -10,13 +10,13 @@
|
|||
inset-inline-end: 10px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 350px) {
|
||||
@media only screen and (width <= 350px) {
|
||||
.floatingTopButton {
|
||||
position: absolute
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 680px) {
|
||||
@media only screen and (width <= 680px) {
|
||||
.card {
|
||||
inline-size: 90%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ h2 {
|
|||
margin-inline: auto;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 680px) {
|
||||
@media only screen and (width <= 680px) {
|
||||
.card {
|
||||
inline-size: 90%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
margin-inline: auto;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 680px) {
|
||||
@media only screen and (width <= 680px) {
|
||||
.card {
|
||||
inline-size: 90%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ hr {
|
|||
border-block-start: 2px solid var(--scrollbar-color-hover);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 800px) {
|
||||
@media only screen and (width <= 800px) {
|
||||
hr {
|
||||
inline-size: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@
|
|||
text-overflow: ellipsis;
|
||||
overflow-wrap: break-word;
|
||||
inline-size: 100%;
|
||||
display: -webkit-box;
|
||||
display: box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
padding-block: 0;
|
||||
|
|
@ -66,7 +66,7 @@
|
|||
block-size: 80%;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 680px) {
|
||||
@media only screen and (width <= 680px) {
|
||||
.card {
|
||||
inline-size: 90%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,9 +10,8 @@
|
|||
|
||||
.subscriptionTabs {
|
||||
inline-size: 100%;
|
||||
margin-block-start: -3px;
|
||||
margin-block: -3px 10px;
|
||||
color: var(--tertiary-text-color);
|
||||
margin-block-end: 10px;
|
||||
}
|
||||
|
||||
.selectedTab {
|
||||
|
|
@ -35,7 +34,7 @@
|
|||
font-weight: bold;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 680px) {
|
||||
@media only screen and (width <= 680px) {
|
||||
.card {
|
||||
inline-size: 90%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,9 +14,8 @@
|
|||
inline-size: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
margin-block-start: -3px;
|
||||
margin-block: -3px 10px;
|
||||
color: var(--tertiary-text-color);
|
||||
margin-block-end: 10px;
|
||||
}
|
||||
|
||||
.selectedTab {
|
||||
|
|
@ -39,13 +38,13 @@
|
|||
font-weight: bold;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 350px) {
|
||||
@media only screen and (width <= 350px) {
|
||||
.floatingTopButton {
|
||||
position: absolute
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 680px) {
|
||||
@media only screen and (width <= 680px) {
|
||||
.card {
|
||||
inline-size: 90%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
.card {
|
||||
position: relative;
|
||||
|
||||
inline-size: 85%;
|
||||
margin-block: 0 60px;
|
||||
margin-inline: auto;
|
||||
|
|
@ -23,7 +22,8 @@
|
|||
grid-template-columns: 1fr auto;
|
||||
column-gap: 16px;
|
||||
}
|
||||
@media only screen and (max-width: 800px) {
|
||||
|
||||
@media only screen and (width <= 800px) {
|
||||
.searchInputsRow {
|
||||
/* Switch to 2 rows from 2 columns */
|
||||
grid-template-columns: auto;
|
||||
|
|
@ -37,7 +37,8 @@
|
|||
grid-template-rows: 1fr;
|
||||
align-items: center;
|
||||
}
|
||||
@media only screen and (max-width: 800px) {
|
||||
|
||||
@media only screen and (width <= 800px) {
|
||||
.optionsRow {
|
||||
/* Switch to 2 rows from 2 columns */
|
||||
grid-template-columns: auto;
|
||||
|
|
@ -55,7 +56,7 @@
|
|||
color: var(--tertiary-text-color);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 680px) {
|
||||
@media only screen and (width <= 680px) {
|
||||
.card {
|
||||
inline-size: 90%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
display: inline-block;
|
||||
max-inline-size: calc(80vh * 1.78);
|
||||
|
||||
@media only screen and (min-width: 1051px) {
|
||||
@media only screen and (width >= 1051px) {
|
||||
inline-size: 300%;
|
||||
}
|
||||
}
|
||||
|
|
@ -99,7 +99,7 @@
|
|||
.sidebarArea {
|
||||
grid-area: sidebar;
|
||||
|
||||
@media only screen and (min-width: 1051px) {
|
||||
@media only screen and (width >= 1051px) {
|
||||
min-inline-size: 380px;
|
||||
}
|
||||
|
||||
|
|
@ -122,10 +122,10 @@
|
|||
|
||||
.watchVideoPlaylist {
|
||||
:deep(.videoThumbnail) {
|
||||
margin-block-start: auto;
|
||||
margin-block-end: auto;
|
||||
margin-block: auto;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
|
||||
@media (width <= 768px) {
|
||||
block-size: auto;
|
||||
}
|
||||
}
|
||||
|
|
@ -135,27 +135,27 @@
|
|||
margin-block: 0 16px;
|
||||
margin-inline: 0;
|
||||
|
||||
@media only screen and (min-width: 1051px) {
|
||||
@media only screen and (width >= 1051px) {
|
||||
margin-block: 0 16px;
|
||||
margin-inline: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1350px) {
|
||||
@media only screen and (width <= 1350px) {
|
||||
@include theatre-mode-template;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1051px) {
|
||||
@media only screen and (width >= 1051px) {
|
||||
&.useTheatreMode {
|
||||
@include theatre-mode-template;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1050px) {
|
||||
@media only screen and (width <= 1050px) {
|
||||
@include single-column-template;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1051px) {
|
||||
@media only screen and (width >= 1051px) {
|
||||
.infoArea {
|
||||
scroll-margin-block-start: 76px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -278,6 +278,9 @@ Settings:
|
|||
Ask Before Opening Link: Před otevřením odkazu se zeptat
|
||||
Open Link: Otevřít odkaz
|
||||
External Link Handling: Zpracování externích odkazů
|
||||
Auto Load Next Page:
|
||||
Label: Automaticky načíst další stránku
|
||||
Tooltip: Automaticky načítat další stránky a komentáře.
|
||||
Theme Settings:
|
||||
Theme Settings: 'Nastavení motivu'
|
||||
Match Top Bar with Main Color: 'Přizpůsobit horní lištu hlavní barvě'
|
||||
|
|
@ -945,6 +948,15 @@ Playlist:
|
|||
#* Published
|
||||
#& Views
|
||||
Playlist: Playlist
|
||||
Sort By:
|
||||
Sort By: Seřadit podle
|
||||
DateAddedNewest: Naposledy přidáno
|
||||
DateAddedOldest: Nejdříve přidáno
|
||||
AuthorAscending: Autor (A-Z)
|
||||
AuthorDescending: Autor (Z-A)
|
||||
VideoTitleDescending: Název (Z-A)
|
||||
VideoTitleAscending: Název (A-Z)
|
||||
Custom: Vlastní
|
||||
Toggle Theatre Mode: 'Přepnout režim divadla'
|
||||
Change Format:
|
||||
Change Media Formats: 'Změnit formát videa'
|
||||
|
|
|
|||
|
|
@ -185,7 +185,6 @@ User Playlists:
|
|||
|
||||
LatestPlayedFirst: 'Recently Played'
|
||||
EarliestPlayedFirst: 'Earliest Played'
|
||||
|
||||
SinglePlaylistView:
|
||||
Search for Videos: Search for Videos
|
||||
|
||||
|
|
@ -876,6 +875,15 @@ Playlist:
|
|||
View: View
|
||||
Views: Views
|
||||
Last Updated On: Last Updated On
|
||||
Sort By:
|
||||
Sort By: Sort By
|
||||
DateAddedNewest: Latest added first
|
||||
DateAddedOldest: Earliest added first
|
||||
AuthorAscending: Author (A-Z)
|
||||
AuthorDescending: Author (Z-A)
|
||||
VideoTitleAscending: Title (A-Z)
|
||||
VideoTitleDescending: Title (Z-A)
|
||||
Custom: Custom
|
||||
|
||||
# On Video Watch Page
|
||||
#* Published
|
||||
|
|
|
|||
|
|
@ -276,6 +276,9 @@ Settings:
|
|||
Ask Before Opening Link: Preguntar antes de abrir el enlace
|
||||
Open Link: Abrir el enlace
|
||||
External Link Handling: Gestión de enlaces externos
|
||||
Auto Load Next Page:
|
||||
Label: Carga automática de la página siguiente
|
||||
Tooltip: Cargar automáticamente páginas adicionales y comentarios.
|
||||
Theme Settings:
|
||||
Theme Settings: 'Configuración del tema'
|
||||
Match Top Bar with Main Color: 'Usar color principal para barra superior'
|
||||
|
|
|
|||
|
|
@ -285,6 +285,9 @@ Settings:
|
|||
Ask Before Opening Link: Hivatkozás megnyitása előtt kérése
|
||||
Open Link: Hivatkozás megnyitása
|
||||
External Link Handling: Külső hivatkozás kezelése
|
||||
Auto Load Next Page:
|
||||
Label: Következő oldal automatikus betöltése
|
||||
Tooltip: További oldalak és megjegyzések automatikus betöltése.
|
||||
Theme Settings:
|
||||
Theme Settings: 'Téma beállítások'
|
||||
Match Top Bar with Main Color: 'Illessze a felső sávot a fő színnel'
|
||||
|
|
@ -972,6 +975,15 @@ Playlist:
|
|||
#* Published
|
||||
#& Views
|
||||
Playlist: Lejátszási lista
|
||||
Sort By:
|
||||
DateAddedOldest: Legrégebbiek elől
|
||||
DateAddedNewest: Legújabbak elől
|
||||
Sort By: Rendezés
|
||||
AuthorAscending: Szerző szerint (A-Z)
|
||||
AuthorDescending: Szerző szerint (Z-A)
|
||||
VideoTitleAscending: Cím szerint (A-Z)
|
||||
VideoTitleDescending: Cím szerint (Z-A)
|
||||
Custom: Egyéni rendezés
|
||||
Toggle Theatre Mode: 'Mozi mód be-/kikapcsolása'
|
||||
Change Format:
|
||||
Change Media Formats: 'Videoformátumok módosítása'
|
||||
|
|
|
|||
|
|
@ -276,6 +276,9 @@ Settings:
|
|||
Ask Before Opening Link: Chiedi prima di aprire il link
|
||||
Open Link: Apri link
|
||||
External Link Handling: Gestione dei link esterni
|
||||
Auto Load Next Page:
|
||||
Label: Carica automaticamente la pagina successiva
|
||||
Tooltip: Carica automaticamente pagine e commenti aggiuntivi.
|
||||
Theme Settings:
|
||||
Theme Settings: 'Impostazioni del tema'
|
||||
Match Top Bar with Main Color: 'Abbina la barra superiore al colore principale'
|
||||
|
|
@ -932,6 +935,15 @@ Playlist:
|
|||
#* Published
|
||||
#& Views
|
||||
Playlist: Playlist
|
||||
Sort By:
|
||||
Sort By: Ordina per
|
||||
Custom: Personalizzato
|
||||
VideoTitleDescending: Titolo (Z-A)
|
||||
AuthorDescending: Autore (Z-A)
|
||||
AuthorAscending: Autore (A-Z)
|
||||
DateAddedNewest: Prima gli aggiunti più nuovi
|
||||
DateAddedOldest: Prima gli aggiunti più vecchi
|
||||
VideoTitleAscending: Titolo (A-Z)
|
||||
Toggle Theatre Mode: 'Attiva/disattiva la modalità teatro'
|
||||
Change Format:
|
||||
Change Media Formats: 'Cambia formato video'
|
||||
|
|
|
|||
|
|
@ -273,6 +273,9 @@ Settings:
|
|||
Ask Before Opening Link: Zapytaj przed otworzeniem linku
|
||||
Open Link: Otwórz link
|
||||
External Link Handling: Obsługa zewnętrznych linków
|
||||
Auto Load Next Page:
|
||||
Tooltip: Wczytuj kolejne strony oraz komentarze automatycznie.
|
||||
Label: Automatycznie wczytaj kolejną stronę
|
||||
Theme Settings:
|
||||
Theme Settings: 'Ustawienia wyglądu'
|
||||
Match Top Bar with Main Color: 'Dopasuj górną belkę do głównego koloru'
|
||||
|
|
|
|||
|
|
@ -221,7 +221,7 @@ History:
|
|||
Watch History: 'Histórico de visualizações'
|
||||
Your history list is currently empty.: 'Seu histórico está vazio no momento.'
|
||||
Search bar placeholder: Pesquisar no histórico
|
||||
Empty Search Message: Não há vídeos no seu histórico que correspondam à sua pesquisa
|
||||
Empty Search Message: Não há vídeos em seu histórico que correspondam à sua pesquisa
|
||||
Settings:
|
||||
# On Settings Page
|
||||
Settings: 'Configurações'
|
||||
|
|
@ -270,6 +270,9 @@ Settings:
|
|||
Ask Before Opening Link: Perguntar antes de abrir o link
|
||||
Open Link: Abrir link
|
||||
External Link Handling: Ação de link externo
|
||||
Auto Load Next Page:
|
||||
Label: Carregamento automático da próxima página
|
||||
Tooltip: Carregar páginas e comentários adicionais automaticamente.
|
||||
Theme Settings:
|
||||
Theme Settings: 'Configurações de aparência'
|
||||
Match Top Bar with Main Color: 'Usar cor principal na barra superior'
|
||||
|
|
@ -925,6 +928,15 @@ Playlist:
|
|||
#* Published
|
||||
#& Views
|
||||
Playlist: Playlist
|
||||
Sort By:
|
||||
Sort By: Ordenar por
|
||||
AuthorAscending: Autor (A-Z)
|
||||
VideoTitleAscending: Título (A-Z)
|
||||
Custom: Personalizado
|
||||
DateAddedNewest: Mais recentes
|
||||
DateAddedOldest: Mais antigos
|
||||
AuthorDescending: Autor (Z-A)
|
||||
VideoTitleDescending: Título (Z-A)
|
||||
Toggle Theatre Mode: 'Alternar Modo Teatro'
|
||||
Change Format:
|
||||
Change Media Formats: 'Mudar formato do vídeo'
|
||||
|
|
|
|||
|
|
@ -104,8 +104,8 @@ Subscriptions:
|
|||
vitezei
|
||||
Error Channels: Canale cu erori
|
||||
Empty Channels: Canalele la care sunteți abonat(ă) nu au în prezent clipuri video.
|
||||
Disabled Automatic Fetching: Ai dezactivat obținerea automată de abonamente. Reîmprospătează
|
||||
abonamentele pentru a le vedea aici.
|
||||
Disabled Automatic Fetching: Ați dezactivat preluarea automată a abonamentelor.
|
||||
Reîmprospătați abonamentele pentru a le vedea aici.
|
||||
Subscriptions Tabs: Filele Abonamente
|
||||
All Subscription Tabs Hidden: Toate filele de abonament sunt ascunse. Pentru a vedea
|
||||
conținutul aici, vă rugăm să afișați unele file din secțiunea "{subsection}” din
|
||||
|
|
@ -131,7 +131,8 @@ User Playlists:
|
|||
Când lucrările vor fi finalizate, toate videoclipurile care se află în prezent
|
||||
aici vor fi migrate într-o listă de redare "Favorite".
|
||||
Search bar placeholder: Căutați liste de redare
|
||||
Empty Search Message: Nu sunt videoclipuri pentru căutarea ta
|
||||
Empty Search Message: Nu există videoclipuri în această listă de redare care să
|
||||
corespundă căutării dvs.
|
||||
Move Video Down: Mutați video în jos
|
||||
Enable Quick Bookmark With This Playlist: Activați marcajul rapid cu această listă
|
||||
de redare
|
||||
|
|
@ -172,13 +173,24 @@ User Playlists:
|
|||
Delete Playlist: Ștergeți lista de redare
|
||||
Are you sure you want to delete this playlist? This cannot be undone: Sunteți sigur
|
||||
că doriți să ștergeți această listă de redare? Acest lucru nu poate fi anulat.
|
||||
CreatePlaylistPrompt:
|
||||
Toast:
|
||||
Playlist {playlistName} has been successfully created.: Lista de redare {playlistName}
|
||||
a fost creată cu succes.
|
||||
There was an issue with creating the playlist.: A existat o problemă la crearea
|
||||
listei de redare.
|
||||
There is already a playlist with this name. Please pick a different name.: Există
|
||||
deja o listă de redare cu acest nume. Vă rugăm să alegeți un alt nume.
|
||||
New Playlist Name: Numele noii liste de redare
|
||||
Create: Creați
|
||||
History:
|
||||
# On History Page
|
||||
History: 'Istoric'
|
||||
Watch History: 'Istoricul vizionărilor'
|
||||
Your history list is currently empty.: 'Lista dvs. de istoric este momentan goală.'
|
||||
Search bar placeholder: Căutare în istoric
|
||||
Empty Search Message: Nu sunt videoclipuri în istoricul tău pentru termenii căutați
|
||||
Empty Search Message: Nu există videoclipuri în această listă de redare care să
|
||||
corespundă căutării dvs.
|
||||
Settings:
|
||||
# On Settings Page
|
||||
Settings: 'Setări'
|
||||
|
|
@ -210,8 +222,8 @@ Settings:
|
|||
#! List countries
|
||||
External Link Handling:
|
||||
No Action: Nicio acțiune
|
||||
Ask Before Opening Link: Întrebați înainte de a deschide link-ul
|
||||
Open Link: Deschideți link-ul
|
||||
Ask Before Opening Link: Întrebați înainte de a deschide linkul
|
||||
Open Link: Deschideți linkul
|
||||
External Link Handling: Gestionarea legăturilor externe
|
||||
View all Invidious instance information: Vizualizați toate informațiile despre
|
||||
instanța Invidious
|
||||
|
|
@ -325,11 +337,11 @@ Settings:
|
|||
Error:
|
||||
Forbidden Characters: Caractere interzise
|
||||
Empty File Name: Denumiri de fișiere goale
|
||||
File Name Tooltip: Poți folosi variabile mai jos. %Y An patru numere. %M Lună
|
||||
doua numere. %D Zi două numere. %H oră două numere. %N Minute două numere.
|
||||
%S Secunde două numere. %T Milisecunde trei numere. %s Secunda din videoclip.
|
||||
%t Milisecunda din videoclip trei numere. %i Numele videoclipului. Poți folosi
|
||||
și "\" sau "/" pentru a creea subdosare.
|
||||
File Name Tooltip: Puteți utiliza variabilele de mai jos. %Y Anul 4 cifre. %M
|
||||
Luna 2 cifre. %D Ziua 2 cifre. %H Ora 2 cifre. %N Minute 2 cifre. %S Secunda
|
||||
2 cifre. %T Milisecundă 3 cifre. %s Secunda video. %t Milisecundă video 3
|
||||
cifre. %i Video ID. De asemenea, puteți utiliza "\" sau "/" pentru a crea
|
||||
subfoldere.
|
||||
Enable: Activează captura de ecran
|
||||
Format Label: Formatul capturii de ecran
|
||||
Video Playback Rate Interval: Intervalul de redare video
|
||||
|
|
@ -602,6 +614,7 @@ Profile:
|
|||
Profile Filter: Filtru profil
|
||||
Profile Settings: Setări de profil
|
||||
Toggle Profile List: Lista profilului toggle
|
||||
Create Profile Name: Creați numele profilului
|
||||
Channel:
|
||||
Subscriber: 'Abonat'
|
||||
Subscribers: 'Abonați'
|
||||
|
|
@ -674,11 +687,11 @@ Video:
|
|||
Video has been marked as watched: 'Video a fost marcat ca fiind vizionat'
|
||||
Video has been removed from your history: 'Video a fost eliminat din istoric'
|
||||
Open in YouTube: 'Deschideți în YouTube'
|
||||
Copy YouTube Link: 'Copiați link-ul YouTube'
|
||||
Copy YouTube Link: 'Copiați linkul YouTube'
|
||||
Open YouTube Embedded Player: 'Deschideți playerul încorporat YouTube'
|
||||
Copy YouTube Embedded Player Link: 'Copiați link-ul playerului încorporat YouTube'
|
||||
Copy YouTube Embedded Player Link: 'Copiați linkul playerului încorporat YouTube'
|
||||
Open in Invidious: 'Deschideți în Invidious'
|
||||
Copy Invidious Link: 'Copiați link-ul Invidious'
|
||||
Copy Invidious Link: 'Copiați linkul Invidious'
|
||||
Views: 'Vizionări'
|
||||
Loop Playlist: 'Lista de redare în buclă'
|
||||
Shuffle Playlist: 'Lista de redare aleatorie'
|
||||
|
|
@ -773,9 +786,9 @@ Video:
|
|||
audio only: numai audio
|
||||
video only: numai video
|
||||
Download Video: Descărcați video
|
||||
Copy Invidious Channel Link: Copiați link-ul canalului Invidious
|
||||
Copy Invidious Channel Link: Copiați linkul canalului Invidious
|
||||
Open Channel in Invidious: Canal deschis în Invidious
|
||||
Copy YouTube Channel Link: Copiați link-ul canalului YouTube
|
||||
Copy YouTube Channel Link: Copiați linkul canalului YouTube
|
||||
Open Channel in YouTube: Deschideți canalul în YouTube
|
||||
Video has been removed from your saved list: Videoclipul a fost eliminat din lista
|
||||
ta de salvări
|
||||
|
|
@ -846,8 +859,8 @@ Share:
|
|||
Share Video: 'Distribuiți video'
|
||||
Share Playlist: 'Distribuie lista de redare'
|
||||
Include Timestamp: 'Includeți timpul de începere'
|
||||
Copy Link: 'Copiați link-ul'
|
||||
Open Link: 'Deschideți link-ul'
|
||||
Copy Link: 'Copiați linkul'
|
||||
Open Link: 'Deschideți linkul'
|
||||
Copy Embed: 'Copiați încorporarea'
|
||||
Open Embed: 'Deschideți încorporarea'
|
||||
# On Click
|
||||
|
|
@ -960,8 +973,8 @@ Tooltips:
|
|||
Proxy Videos Through Invidious: Se va conecta la Invidious pentru a servi videoclipuri
|
||||
în loc să facă o conexiune directă la YouTube. Anulează preferințele API.
|
||||
Force Local Backend for Legacy Formats: Funcționează numai atunci când API-ul
|
||||
Invidious este implicit. Atunci când este activată, API-ul local va rula și
|
||||
va utiliza formatele vechi returnate de acesta în locul celor returnate de Invidious.
|
||||
Invidious este implicit. Atunci când este activat, API-ul local va rula și va
|
||||
utiliza formatele vechi returnate de acesta în locul celor returnate de Invidious.
|
||||
Ajută atunci când videoclipurile returnate de Invidious nu sunt redate din cauza
|
||||
restricțiilor de țară.
|
||||
Scroll Playback Rate Over Video Player: În timp ce cursorul se află deasupra videoclipului,
|
||||
|
|
@ -979,7 +992,7 @@ Tooltips:
|
|||
General Settings:
|
||||
External Link Handling: "Alegeți comportamentul implicit atunci când se face clic
|
||||
pe un link care nu poate fi deschis în FreeTube.\nÎn mod implicit, FreeTube
|
||||
va deschide link-ul pe care s-a făcut clic în browserul dvs. implicit.\n"
|
||||
va deschide linkul pe care s-a făcut clic în browserul dvs. implicit.\n"
|
||||
Region for Trending: Regiunea de tendințe vă permite să alegeți ce videoclipuri
|
||||
în tendințe din fiecare țară doriți să fie afișate.
|
||||
Invidious Instance: Instanța Invidious la care FreeTube se va conecta pentru apelurile
|
||||
|
|
@ -993,10 +1006,10 @@ Tooltips:
|
|||
a obține date. API-ul local este un extractor incorporat. API-ul Invidious necesită
|
||||
un server Invidious la care să vă conectați.
|
||||
Distraction Free Settings:
|
||||
Hide Channels: Introduceți un nume de canal sau un ID de canal pentru a ascunde
|
||||
toate videoclipurile, listele de redare și canalul în sine pentru a nu apărea
|
||||
în căutare, în tendințe, în cele mai populare și recomandate. Numele canalului
|
||||
introdus trebuie să se potrivească complet și să țină cont de majuscule și minuscule.
|
||||
Hide Channels: Introduceți un ID de canal pentru a ascunde toate videoclipurile,
|
||||
listele de redare și canalul însuși de la apariția în căutare, tendințe, cele
|
||||
mai populare și recomandate. ID-ul canalului introdus trebuie să fie o potrivire
|
||||
completă și este sensibil la majuscule și minuscule.
|
||||
Hide Subscriptions Live: Această setare este înlocuită de setarea "{appWideSetting}”
|
||||
la nivel de aplicație, în secțiunea „{subsection}” din „{settingsSection}”
|
||||
Experimental Settings:
|
||||
|
|
@ -1045,3 +1058,11 @@ Playlist will not pause when current video is finished: Lista de redare nu se va
|
|||
când videoclipul curent este terminat
|
||||
Go to page: Mergeți la {page}
|
||||
Close Banner: Închideți bannerul
|
||||
Age Restricted:
|
||||
This video is age restricted: Acest videoclip este restricționat în funcție de vârstă
|
||||
This channel is age restricted: Acest canal este restricționat de vârstă
|
||||
Channel Hidden: '{channel} adăugat la filtrul de canal'
|
||||
Trimmed input must be at least N characters long: Intrarea tăiată trebuie să aibă
|
||||
cel puțin 1 caracter | Intrarea tăiată trebuie să aibă cel puțin {length} caractere
|
||||
Tag already exists: Eticheta "{tagName}" există deja
|
||||
Channel Unhidden: '{channel} eliminat din filtrul de canale'
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@ Search / Go to URL: 'Ara / URL''ye git'
|
|||
Search Filters:
|
||||
Search Filters: 'Filtreler'
|
||||
Sort By:
|
||||
Sort By: 'Sırala'
|
||||
Sort By: 'Sıralama ölçütü'
|
||||
Most Relevant: 'En Uygun'
|
||||
Rating: 'Derecelendirme'
|
||||
Upload Date: 'Yükleme Tarihi'
|
||||
|
|
@ -277,6 +277,9 @@ Settings:
|
|||
Ask Before Opening Link: Bağlantıyı Açmadan Önce Sor
|
||||
Open Link: Bağlantıyı Aç
|
||||
External Link Handling: Harici Bağlantı İşleme
|
||||
Auto Load Next Page:
|
||||
Label: Sonraki Sayfayı Otomatik Yükle
|
||||
Tooltip: Sonraki sayfaları ve yorumları otomatik olarak yükle.
|
||||
Theme Settings:
|
||||
Theme Settings: 'Tema Ayarları'
|
||||
Match Top Bar with Main Color: 'Üst Barı Ana Renk ile Eşleştir'
|
||||
|
|
@ -761,7 +764,7 @@ Channel:
|
|||
Added channel to your subscriptions: 'Kanal aboneliklerinize eklendi'
|
||||
Search Channel: 'Kanalda ara'
|
||||
Your search results have returned 0 results: 'Arama sonuçlarınız 0 sonuç verdi'
|
||||
Sort By: 'Sırala'
|
||||
Sort By: 'Sıralama ölçütü'
|
||||
Videos:
|
||||
Videos: 'Videolar'
|
||||
This channel does not currently have any videos: 'Bu kanalda şu anda herhangi
|
||||
|
|
@ -978,6 +981,15 @@ Playlist:
|
|||
#* Published
|
||||
#& Views
|
||||
Playlist: Oynatma Listesi
|
||||
Sort By:
|
||||
DateAddedNewest: Son eklenen önce
|
||||
AuthorAscending: Yazar (A-Z)
|
||||
AuthorDescending: Yazar (Z-A)
|
||||
VideoTitleAscending: Başlık (A-Z)
|
||||
VideoTitleDescending: Başlık (Z-A)
|
||||
Sort By: Sıralama ölçütü
|
||||
DateAddedOldest: İlk eklenen önce
|
||||
Custom: Özel
|
||||
Toggle Theatre Mode: 'Tiyatro Modunu Aç/Kapat'
|
||||
Change Format:
|
||||
Change Media Formats: 'Video Biçimlerini Değiştir'
|
||||
|
|
|
|||
|
|
@ -113,7 +113,7 @@ User Playlists:
|
|||
Your saved videos are empty. Click on the save button on the corner of a video to have it listed here: 您未保存视频。点击视频角落的“保存”按钮保存视频
|
||||
Playlist Message: 本页面不代表功能完备的播放列表。它只列举您保存或喜爱的播放列表。当项目完成时，本页面的所有视频将会迁移到“最喜爱”播放列表。
|
||||
Search bar placeholder: 搜索播放列表
|
||||
Empty Search Message: 这个与你的搜索匹配的播放列表中没有视频
|
||||
Empty Search Message: 此播放列表中没有匹配你搜索的视频
|
||||
Are you sure you want to remove all watched videos from this playlist? This cannot be undone: 你确定要从此播放列表删除所有已观看的视频吗？此操作无法撤销。
|
||||
AddVideoPrompt:
|
||||
Search in Playlists: 在播放列表中搜索
|
||||
|
|
@ -194,7 +194,7 @@ History:
|
|||
Watch History: '观看历史记录'
|
||||
Your history list is currently empty.: 您的历史记录列表目前是空的。
|
||||
Search bar placeholder: 在播放历史中搜索
|
||||
Empty Search Message: 匹配搜索的历史记录中没有视频
|
||||
Empty Search Message: 历史记录中没有匹配你搜索的视频
|
||||
Settings:
|
||||
# On Settings Page
|
||||
Settings: '设置'
|
||||
|
|
@ -238,6 +238,9 @@ Settings:
|
|||
No Action: 无操作
|
||||
External Link Handling: 外部链接处理
|
||||
Open Link: 打开链接
|
||||
Auto Load Next Page:
|
||||
Label: 自动加载下一页
|
||||
Tooltip: 自动加载额外页面和评论。
|
||||
Theme Settings:
|
||||
Theme Settings: '主题设置'
|
||||
Match Top Bar with Main Color: '顶部菜单栏对应主颜色'
|
||||
|
|
@ -825,6 +828,15 @@ Playlist:
|
|||
#* Published
|
||||
#& Views
|
||||
Playlist: 播放列表
|
||||
Sort By:
|
||||
Sort By: 排序依据
|
||||
DateAddedNewest: 最近添加的优先
|
||||
DateAddedOldest: 最早添加的优先
|
||||
AuthorAscending: 作者名（A-Z）
|
||||
AuthorDescending: 作者名（Z-A）
|
||||
VideoTitleDescending: 标题（Z-A)
|
||||
Custom: 自定义
|
||||
VideoTitleAscending: 标题（A-Z）
|
||||
Toggle Theatre Mode: '切换剧场模式'
|
||||
Change Format:
|
||||
Change Media Formats: '更换视频格式'
|
||||
|
|
|
|||
|
|
@ -239,6 +239,9 @@ Settings:
|
|||
Ask Before Opening Link: 開啟連結前詢問
|
||||
Open Link: 開啟連結
|
||||
External Link Handling: 外部連結處理
|
||||
Auto Load Next Page:
|
||||
Tooltip: 自動載入額外頁面與留言。
|
||||
Label: 自動載入下一頁
|
||||
Theme Settings:
|
||||
Theme Settings: '主題設定'
|
||||
Match Top Bar with Main Color: '頂部功能表欄對應主色彩'
|
||||
|
|
@ -834,6 +837,15 @@ Playlist:
|
|||
#* Published
|
||||
#& Views
|
||||
Playlist: 播放清單
|
||||
Sort By:
|
||||
Sort By: 排序方式
|
||||
DateAddedNewest: 最後新增優先
|
||||
DateAddedOldest: 最早新增優先
|
||||
AuthorAscending: 作者 (A-Z)
|
||||
AuthorDescending: 作者 (Z-A)
|
||||
VideoTitleAscending: 標題 (A-Z)
|
||||
VideoTitleDescending: 標題 (Z-A)
|
||||
Custom: 自訂
|
||||
Toggle Theatre Mode: '切換為劇院模式'
|
||||
Change Format:
|
||||
Change Media Formats: '變更影片格式'
|
||||
|
|
|
|||
Loading…
Reference in New Issue