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