mirror of https://github.com/FreeTubeApp/FreeTube
Implement Stylelint linting of CSS logical properties (#4023)
* Add Stylelint plugin and rule for evaluating use of logical properties * Implement stylelint-advised use of logical properties in SCSS files * Implement stylelint-advised use of logical properties in CSS files * Implement stylelint linting before each commit to any branch of the repo * Remove other Stylelint plugins so that we can add them in later one-by-one After discussing this with the FreeTube team, it seems that we are still undecided on which rules we want to be active, including ones currently enabled. As a stopgap fix, we disabled Stylelint checking in our pre-commit Git hook and our recommended > freetube@0.19.0 lint-fix > run-p eslint-fix lint-style-fix command. With this change, we will be using Stylelint in our > freetube@0.19.0 lint-fix > run-p eslint-fix lint-style-fix command, while giving us the flexibility to add in additional desired plugins and rules as separate efforts. * Add video player to .stylelintignore * Replace non-logical property usage in templates This is not enforced by the plugin at this time. * Remove use of logical properties from ft-video-player, & allow empty input when .stylelintignore files are changed * Update ft-video-player.css to disable use of logical property linter We want to avoid introducing directionality-specific properties that could muck up the video player. * Remove redundant/unnecessary scripts in package.json
This commit is contained in:
parent
d6fd7bec33
commit
3db6f437c9
|
@ -1,6 +1,5 @@
|
||||||
{
|
{
|
||||||
"plugins": ["stylelint-high-performance-animation", "@double-great/stylelint-a11y"],
|
"plugins": ["stylelint-use-logical-spec"],
|
||||||
"extends": ["stylelint-config-standard", "stylelint-config-sass-guidelines"],
|
|
||||||
"overrides": [
|
"overrides": [
|
||||||
{
|
{
|
||||||
"files": ["**/*.scss"],
|
"files": ["**/*.scss"],
|
||||||
|
@ -17,17 +16,6 @@
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"rules": {
|
"rules": {
|
||||||
"selector-class-pattern": null,
|
"liberty/use-logical-spec": ["always", { "except": ["float"] }]
|
||||||
"selector-id-pattern": null,
|
|
||||||
"plugin/no-low-performance-animation-properties": null,
|
|
||||||
"selector-pseudo-class-no-unknown": [
|
|
||||||
true,
|
|
||||||
{
|
|
||||||
"ignorePseudoClasses": ["deep"]
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"a11y/no-outline-none": true,
|
|
||||||
"a11y/selector-pseudo-class-focus": true,
|
|
||||||
"a11y/font-size-is-readable": true
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -3,13 +3,18 @@
|
||||||
pre-commit:
|
pre-commit:
|
||||||
parallel: true
|
parallel: true
|
||||||
commands:
|
commands:
|
||||||
lint:
|
eslint:
|
||||||
# Only runs when any file with filename
|
# Only runs when any file with filename
|
||||||
# matching the glob is being committed
|
# matching the glob is being committed
|
||||||
glob: "*.{js,vue}"
|
glob: "*.{js,vue}"
|
||||||
run: yarn run eslint --no-color {staged_files}
|
run: yarn run eslint --no-color {staged_files}
|
||||||
skip:
|
skip:
|
||||||
- rebase
|
- rebase
|
||||||
|
stylelint:
|
||||||
|
glob: "*.{css,scss}"
|
||||||
|
run: yarn stylelint --no-color --allow-empty-input {staged_files}
|
||||||
|
skip:
|
||||||
|
- rebase
|
||||||
|
|
||||||
# EXAMPLE USAGE
|
# EXAMPLE USAGE
|
||||||
#
|
#
|
||||||
|
|
16
package.json
16
package.json
|
@ -33,15 +33,14 @@
|
||||||
"dev-runner": "node _scripts/dev-runner.js",
|
"dev-runner": "node _scripts/dev-runner.js",
|
||||||
"get-instances": "node _scripts/getInstances.js",
|
"get-instances": "node _scripts/getInstances.js",
|
||||||
"get-regions": "node _scripts/getRegions.mjs",
|
"get-regions": "node _scripts/getRegions.mjs",
|
||||||
"lint-all": "run-p lint lint-json lint-style",
|
"lint-all": "run-p lint lint-json",
|
||||||
"lint-fix": "eslint --fix --ext .js,.vue ./",
|
"lint": "run-p eslint-lint lint-style",
|
||||||
"lint": "eslint --ext .js,.vue ./",
|
"lint-fix": "run-p eslint-lint-fix lint-style-fix",
|
||||||
|
"eslint-lint": "eslint --ext .js,.vue ./",
|
||||||
|
"eslint-lint-fix": "eslint --fix --ext .js,.vue ./",
|
||||||
"lint-json": "eslint --ext .json ./",
|
"lint-json": "eslint --ext .json ./",
|
||||||
"lint-style": "run-p lint-style:scss lint-style:css",
|
"lint-style": "stylelint \"**/*.{css,scss}\"",
|
||||||
"lint-style:scss": "stylelint \"**/*.scss\"",
|
"lint-style-fix": "stylelint --fix \"**/*.{css,scss}\"",
|
||||||
"lint-style:css": "stylelint \"**/*.css\"",
|
|
||||||
"lint-style-fix:scss": "stylelint --fix \"**/*.scss\"",
|
|
||||||
"lint-style-fix:css": "stylelint --fix \"**/*.css\"",
|
|
||||||
"lint-yml": "eslint --ext .yml,.yaml ./",
|
"lint-yml": "eslint --ext .yml,.yaml ./",
|
||||||
"pack": "run-p pack:main pack:renderer",
|
"pack": "run-p pack:main pack:renderer",
|
||||||
"pack:main": "webpack --mode=production --node-env=production --config _scripts/webpack.main.config.js",
|
"pack:main": "webpack --mode=production --node-env=production --config _scripts/webpack.main.config.js",
|
||||||
|
@ -66,6 +65,7 @@
|
||||||
"marked": "^9.0.0",
|
"marked": "^9.0.0",
|
||||||
"path-browserify": "^1.0.1",
|
"path-browserify": "^1.0.1",
|
||||||
"process": "^0.11.10",
|
"process": "^0.11.10",
|
||||||
|
"stylelint-use-logical-spec": "^5.0.0",
|
||||||
"video.js": "7.21.5",
|
"video.js": "7.21.5",
|
||||||
"videojs-contrib-quality-levels": "^3.0.0",
|
"videojs-contrib-quality-levels": "^3.0.0",
|
||||||
"videojs-http-source-selector": "^1.1.6",
|
"videojs-http-source-selector": "^1.1.6",
|
||||||
|
|
|
@ -7,7 +7,7 @@
|
||||||
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';
|
||||||
height: 100%;
|
block-size: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.routerView {
|
.routerView {
|
||||||
|
@ -17,7 +17,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.banner {
|
.banner {
|
||||||
width: 85%;
|
inline-size: 85%;
|
||||||
margin-block: 20px;
|
margin-block: 20px;
|
||||||
margin-inline: auto;
|
margin-inline: auto;
|
||||||
}
|
}
|
||||||
|
@ -35,7 +35,7 @@
|
||||||
|
|
||||||
#changeLogText {
|
#changeLogText {
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
height: 40vh;
|
block-size: 40vh;
|
||||||
display: block
|
display: block
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -53,7 +53,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.banner {
|
.banner {
|
||||||
width: 80%;
|
inline-size: 80%;
|
||||||
margin-block-start: 20px;
|
margin-block-start: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,3 +1,3 @@
|
||||||
.folderDisplay {
|
.folderDisplay {
|
||||||
width: 50vh;
|
inline-size: 50vh;
|
||||||
}
|
}
|
||||||
|
|
|
@ -6,16 +6,16 @@
|
||||||
padding-block: 10px;
|
padding-block: 10px;
|
||||||
padding-inline: 0;
|
padding-inline: 0;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
width: 100%;
|
inline-size: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.frown {
|
.frown {
|
||||||
background-color: var(--card-bg-color);
|
background-color: var(--card-bg-color);
|
||||||
font-size: 10em;
|
font-size: 10em;
|
||||||
height: 100%;
|
block-size: 100%;
|
||||||
padding-block: 20px;
|
padding-block: 20px;
|
||||||
padding-inline: 0;
|
padding-inline: 0;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
width: 100%;
|
inline-size: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
.btn {
|
.btn {
|
||||||
font-family: 'Roboto', sans-serif;
|
font-family: 'Roboto', sans-serif;
|
||||||
min-width: 100px;
|
min-inline-size: 100px;
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
padding-block: 10px;
|
padding-block: 10px;
|
||||||
padding-inline: 20px;
|
padding-inline: 20px;
|
||||||
|
@ -35,8 +35,8 @@
|
||||||
content: "";
|
content: "";
|
||||||
display: block;
|
display: block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100%;
|
inline-size: 100%;
|
||||||
height: 100%;
|
block-size: 100%;
|
||||||
inset-block-start: 0;
|
inset-block-start: 0;
|
||||||
inset-inline-start: 0;
|
inset-inline-start: 0;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
.bubblePadding {
|
.bubblePadding {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100px;
|
inline-size: 100px;
|
||||||
height: 100px;
|
block-size: 100px;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -26,8 +26,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.bubble {
|
.bubble {
|
||||||
width: 50px;
|
inline-size: 50px;
|
||||||
height: 50px;
|
block-size: 50px;
|
||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
-webkit-border-radius: 100%;
|
-webkit-border-radius: 100%;
|
||||||
}
|
}
|
||||||
|
@ -52,5 +52,5 @@
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
width: 100%;
|
inline-size: 100%;
|
||||||
}
|
}
|
||||||
|
|
|
@ -10,22 +10,22 @@
|
||||||
border-width: 2px;
|
border-width: 2px;
|
||||||
display: block;
|
display: block;
|
||||||
float: var(--float-left-ltr-rtl-value);
|
float: var(--float-left-ltr-rtl-value);
|
||||||
height: 10px;
|
block-size: 10px;
|
||||||
inset-inline-start: 5px;
|
inset-inline-start: 5px;
|
||||||
position: relative;
|
position: relative;
|
||||||
inset-block-start: 8px;
|
inset-block-start: 8px;
|
||||||
width: 10px;
|
inline-size: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.filled-circle {
|
.filled-circle {
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background-color: black;
|
background-color: black;
|
||||||
float: var(--float-left-ltr-rtl-value);
|
float: var(--float-left-ltr-rtl-value);
|
||||||
height: 6px;
|
block-size: 6px;
|
||||||
inset-inline-start: 2px;
|
inset-inline-start: 2px;
|
||||||
inset-block-start: 2px;
|
inset-block-start: 2px;
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 6px;
|
inline-size: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.option-text {
|
.option-text {
|
||||||
|
|
|
@ -3,9 +3,9 @@
|
||||||
|
|
||||||
.outside {
|
.outside {
|
||||||
margin: auto;
|
margin: auto;
|
||||||
width: 40%;
|
inline-size: 40%;
|
||||||
@media screen and (max-width: 768px) {
|
@media screen and (max-width: 768px) {
|
||||||
width: 100%;
|
inline-size: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -14,16 +14,16 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.communityImage {
|
.communityImage {
|
||||||
height: 100%;
|
block-size: 100%;
|
||||||
width: 100%;
|
inline-size: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.communityThumbnail {
|
.communityThumbnail {
|
||||||
-webkit-border-radius: 50%;
|
-webkit-border-radius: 50%;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
height: 55px;
|
block-size: 55px;
|
||||||
margin-inline-end: 5px;
|
margin-inline-end: 5px;
|
||||||
width: 55px;
|
inline-size: 55px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.author-div {
|
.author-div {
|
||||||
|
@ -54,7 +54,7 @@
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
margin-block-start: 4px;
|
margin-block-start: 4px;
|
||||||
max-width: 210px;
|
max-inline-size: 210px;
|
||||||
text-align: start;
|
text-align: start;
|
||||||
|
|
||||||
@media screen and (max-width: 680px) {
|
@media screen and (max-width: 680px) {
|
||||||
|
@ -64,7 +64,7 @@
|
||||||
|
|
||||||
.likeBar {
|
.likeBar {
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
height: 8px;
|
block-size: 8px;
|
||||||
margin-block-end: 4px;
|
margin-block-end: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -82,19 +82,19 @@
|
||||||
margin-block-end: auto;
|
margin-block-end: auto;
|
||||||
margin-block-start: auto;
|
margin-block-start: auto;
|
||||||
position: relative;
|
position: relative;
|
||||||
width: fit-content;
|
inline-size: fit-content;
|
||||||
|
|
||||||
.thumbnailImage {
|
.thumbnailImage {
|
||||||
display: block;
|
display: block;
|
||||||
height: auto;
|
block-size: auto;
|
||||||
max-width: 100%;
|
max-inline-size: 100%;
|
||||||
width: auto;
|
inline-size: auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.playlistText {
|
.playlistText {
|
||||||
margin-inline-start: 10px;
|
margin-inline-start: 10px;
|
||||||
width: 50%;
|
inline-size: 50%;
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
|
|
||||||
.playlistAuthor {
|
.playlistAuthor {
|
||||||
|
@ -115,7 +115,7 @@
|
||||||
font-size: small;
|
font-size: small;
|
||||||
padding-block-start: 10px;
|
padding-block-start: 10px;
|
||||||
text-decoration-line: none;
|
text-decoration-line: none;
|
||||||
width: 100%;
|
inline-size: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.playlistPreviewVideoTitle {
|
.playlistPreviewVideoTitle {
|
||||||
|
@ -123,12 +123,12 @@
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
width: 100%;
|
inline-size: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.ft-list-item.grid {
|
.ft-list-item.grid {
|
||||||
min-height: 0 !important;
|
min-block-size: 0 !important;
|
||||||
padding-block-end: 20px;
|
padding-block-end: 20px;
|
||||||
}
|
}
|
||||||
|
|
|
@ -5,7 +5,7 @@
|
||||||
.tns-nav button {
|
.tns-nav button {
|
||||||
background-color: #ddd;
|
background-color: #ddd;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
height: 1.5em;
|
block-size: 1.5em;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
width: 1.5em;
|
inline-size: 1.5em;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,3 +1,3 @@
|
||||||
.maxWidth {
|
.maxWidth {
|
||||||
width: 100%;
|
inline-size: 100%;
|
||||||
}
|
}
|
||||||
|
|
|
@ -11,9 +11,9 @@
|
||||||
.iconButton {
|
.iconButton {
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
height: 1em;
|
block-size: 1em;
|
||||||
transition: background 0.15s ease-out;
|
transition: background 0.15s ease-out;
|
||||||
width: 1em;
|
inline-size: 1em;
|
||||||
|
|
||||||
&.shadow {
|
&.shadow {
|
||||||
box-shadow: 0 1px 2px rgb(0 0 0 / 50%);
|
box-shadow: 0 1px 2px rgb(0 0 0 / 50%);
|
||||||
|
@ -144,6 +144,6 @@
|
||||||
margin-inline: auto;
|
margin-inline: auto;
|
||||||
// Too "visible" with current color
|
// Too "visible" with current color
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
width: 95%;
|
inline-size: 95%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
display: block;
|
display: block;
|
||||||
width: 60%;
|
inline-size: 60%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ft-tag-box ul {
|
.ft-tag-box ul {
|
||||||
|
@ -49,6 +49,6 @@
|
||||||
|
|
||||||
@media only screen and (max-width: 576px) {
|
@media only screen and (max-width: 576px) {
|
||||||
.ft-input-tags-component {
|
.ft-input-tags-component {
|
||||||
width: 100%;
|
inline-size: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -96,12 +96,12 @@
|
||||||
-webkit-box-sizing: border-box;
|
-webkit-box-sizing: border-box;
|
||||||
-moz-box-sizing: border-box;
|
-moz-box-sizing: border-box;
|
||||||
outline: none;
|
outline: none;
|
||||||
width: 100%;
|
inline-size: 100%;
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
border: none;
|
border: none;
|
||||||
margin-block-end: 10px;
|
margin-block-end: 10px;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
height: 45px;
|
block-size: 45px;
|
||||||
color: var(--secondary-text-color);
|
color: var(--secondary-text-color);
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
background-color: var(--search-bar-color);
|
background-color: var(--search-bar-color);
|
||||||
|
@ -195,7 +195,7 @@
|
||||||
|
|
||||||
.list {
|
.list {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100%;
|
inline-size: 100%;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding-block: 5px;
|
padding-block: 5px;
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
.grid {
|
.grid {
|
||||||
min-height: 264px;
|
min-block-size: 264px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.list {
|
.list {
|
||||||
min-height: 131px;
|
min-block-size: 131px;
|
||||||
}
|
}
|
||||||
|
|
|
@ -67,7 +67,7 @@
|
||||||
<div
|
<div
|
||||||
v-if="watched"
|
v-if="watched"
|
||||||
class="watchedProgressBar"
|
class="watchedProgressBar"
|
||||||
:style="{width: progressPercentage + '%'}"
|
:style="{inlineSize: progressPercentage + '%'}"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="info">
|
<div class="info">
|
||||||
|
|
|
@ -19,14 +19,14 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 100%;
|
inline-size: 100%;
|
||||||
height: 100%;
|
block-size: 100%;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fullscreen {
|
.fullscreen {
|
||||||
height: 85vh;
|
block-size: 85vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
@ -36,8 +36,8 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
.spinner {
|
.spinner {
|
||||||
width: 40px;
|
inline-size: 40px;
|
||||||
height: 40px;
|
block-size: 40px;
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-block: 100px;
|
margin-block: 100px;
|
||||||
margin-inline: auto;
|
margin-inline: auto;
|
||||||
|
@ -45,8 +45,8 @@
|
||||||
|
|
||||||
.double-bounce1,
|
.double-bounce1,
|
||||||
.double-bounce2 {
|
.double-bounce2 {
|
||||||
width: 100%;
|
inline-size: 100%;
|
||||||
height: 100%;
|
block-size: 100%;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
opacity: 0.6;
|
opacity: 0.6;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
.bubblePadding {
|
.bubblePadding {
|
||||||
width: 100px;
|
inline-size: 100px;
|
||||||
height: 115px;
|
block-size: 115px;
|
||||||
padding-block: 10px 30px;
|
padding-block: 10px 30px;
|
||||||
padding-inline: 10px;
|
padding-inline: 10px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
@ -19,8 +19,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.bubble {
|
.bubble {
|
||||||
width: 70px;
|
inline-size: 70px;
|
||||||
height: 70px;
|
block-size: 70px;
|
||||||
margin-block: 20px 5px;
|
margin-block: 20px 5px;
|
||||||
margin-inline: auto;
|
margin-inline: auto;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
.card {
|
.card {
|
||||||
width: 85%;
|
inline-size: 85%;
|
||||||
margin-block: 0 15px;
|
margin-block: 0 15px;
|
||||||
margin-inline: auto;
|
margin-inline: auto;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
.card {
|
.card {
|
||||||
width: 85%;
|
inline-size: 85%;
|
||||||
margin-block: 0 15px;
|
margin-block: 0 15px;
|
||||||
margin-inline: auto;
|
margin-inline: auto;
|
||||||
}
|
}
|
||||||
|
@ -9,7 +9,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.profileName {
|
.profileName {
|
||||||
width: 400px;
|
inline-size: 400px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bottomMargin {
|
.bottomMargin {
|
||||||
|
@ -17,14 +17,14 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.colorOptions {
|
.colorOptions {
|
||||||
max-width: 1000px;
|
max-inline-size: 1000px;
|
||||||
margin-block: 0 30px;
|
margin-block: 0 30px;
|
||||||
margin-inline: auto;
|
margin-inline: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.colorOption {
|
.colorOption {
|
||||||
width: 100px;
|
inline-size: 100px;
|
||||||
height: 100px;
|
block-size: 100px;
|
||||||
margin: 10px;
|
margin: 10px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
|
@ -43,6 +43,6 @@
|
||||||
|
|
||||||
@media only screen and (max-width: 680px) {
|
@media only screen and (max-width: 680px) {
|
||||||
.card {
|
.card {
|
||||||
width: 90%;
|
inline-size: 90%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
.card {
|
.card {
|
||||||
width: 85%;
|
inline-size: 85%;
|
||||||
margin-block: 0 30px;
|
margin-block: 0 30px;
|
||||||
margin-inline: auto;
|
margin-inline: auto;
|
||||||
}
|
}
|
||||||
|
@ -9,7 +9,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.select-label) {
|
:deep(.select-label) {
|
||||||
width: 95%;
|
inline-size: 95%;
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.select) {
|
:deep(.select) {
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
.colorOption {
|
.colorOption {
|
||||||
width: 40px;
|
inline-size: 40px;
|
||||||
height: 40px;
|
block-size: 40px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -26,8 +26,8 @@
|
||||||
position: absolute;
|
position: absolute;
|
||||||
inset-block-start: 60px;
|
inset-block-start: 60px;
|
||||||
inset-inline-end: 10px;
|
inset-inline-end: 10px;
|
||||||
min-width: 250px;
|
min-inline-size: 250px;
|
||||||
height: 400px;
|
block-size: 400px;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
background-color: var(--card-bg-color);
|
background-color: var(--card-bg-color);
|
||||||
box-shadow: 0 0 4px var(--scrollbar-color-hover);
|
box-shadow: 0 0 4px var(--scrollbar-color-hover);
|
||||||
|
@ -35,13 +35,13 @@
|
||||||
|
|
||||||
.profileWrapper {
|
.profileWrapper {
|
||||||
margin-block-start: 60px;
|
margin-block-start: 60px;
|
||||||
height: 340px;
|
block-size: 340px;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.profile {
|
.profile {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
height: 50px;
|
block-size: 50px;
|
||||||
-webkit-transition: background 0.2s ease-out;
|
-webkit-transition: background 0.2s ease-out;
|
||||||
-moz-transition: background 0.2s ease-out;
|
-moz-transition: background 0.2s ease-out;
|
||||||
-o-transition: background 0.2s ease-out;
|
-o-transition: background 0.2s ease-out;
|
||||||
|
@ -66,7 +66,7 @@
|
||||||
.profileName {
|
.profileName {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
height: 50px;
|
block-size: 50px;
|
||||||
padding-inline-end: 10px;
|
padding-inline-end: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,9 +1,9 @@
|
||||||
.progressBar {
|
.progressBar {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
height: 3px;
|
block-size: 3px;
|
||||||
inset-block-end: 0px;
|
inset-block-end: 0px;
|
||||||
inset-inline-start: 0px;
|
inset-inline-start: 0px;
|
||||||
background-color: var(--primary-color);
|
background-color: var(--primary-color);
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
transition: width 0.5s;
|
transition: inline-size 0.5s;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div
|
<div
|
||||||
class="progressBar"
|
class="progressBar"
|
||||||
:style="{ width: progressBarPercentage + '%' }"
|
:style="{ inlineSize: progressBarPercentage + '%' }"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
|
@ -2,8 +2,8 @@
|
||||||
position: fixed;
|
position: fixed;
|
||||||
inset-block-start: 0px;
|
inset-block-start: 0px;
|
||||||
inset-inline-start: 0px;
|
inset-inline-start: 0px;
|
||||||
width: 100vw;
|
inline-size: 100vw;
|
||||||
height: 100vh;
|
block-size: 100vh;
|
||||||
background-color: rgba(0, 0, 0, 0.7);
|
background-color: rgba(0, 0, 0, 0.7);
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
|
@ -17,11 +17,11 @@
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
margin-block: 0;
|
margin-block: 0;
|
||||||
margin-inline: auto;
|
margin-inline: auto;
|
||||||
max-width: 95%;
|
max-inline-size: 95%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.promptCard:not(.autosize) {
|
.promptCard:not(.autosize) {
|
||||||
width: 95%;
|
inline-size: 95%;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
inset-inline-start: 2.5%;
|
inset-inline-start: 2.5%;
|
||||||
|
|
|
@ -1,12 +1,12 @@
|
||||||
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);
|
||||||
height: 1px;
|
block-size: 1px;
|
||||||
margin: -1px;
|
margin: -1px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 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 {
|
||||||
|
@ -33,8 +33,8 @@ pure-checkbox input[type="checkbox"], .pure-radiobutton input[type="checkbox"],
|
||||||
position: absolute;
|
position: absolute;
|
||||||
inset-block-start: 50%;
|
inset-block-start: 50%;
|
||||||
inset-inline-start: 0;
|
inset-inline-start: 0;
|
||||||
width: 14px;
|
inline-size: 14px;
|
||||||
height: 14px;
|
block-size: 14px;
|
||||||
margin-block-start: -9px;
|
margin-block-start: -9px;
|
||||||
border: 2px solid var(--primary-color);
|
border: 2px solid var(--primary-color);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
@ -48,8 +48,8 @@ pure-checkbox input[type="checkbox"], .pure-radiobutton input[type="checkbox"],
|
||||||
position: absolute;
|
position: absolute;
|
||||||
inset-block-start: 50%;
|
inset-block-start: 50%;
|
||||||
inset-inline-start: 4px;
|
inset-inline-start: 4px;
|
||||||
width: 10px;
|
inline-size: 10px;
|
||||||
height: 10px;
|
block-size: 10px;
|
||||||
margin-block-start: -5px;
|
margin-block-start: -5px;
|
||||||
transform: scale(0);
|
transform: scale(0);
|
||||||
transform-origin: 50%;
|
transform-origin: 50%;
|
||||||
|
@ -66,8 +66,8 @@ pure-checkbox input[type="checkbox"], .pure-radiobutton input[type="checkbox"],
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
inset-block-start: 50%;
|
inset-block-start: 50%;
|
||||||
inset-inline-start: 4px;
|
inset-inline-start: 4px;
|
||||||
width: 8px;
|
inline-size: 8px;
|
||||||
height: 3px;
|
block-size: 3px;
|
||||||
margin-block-start: -4px;
|
margin-block-start: -4px;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
border-width: 0 0 3px 3px;
|
border-width: 0 0 3px 3px;
|
||||||
|
|
|
@ -1,11 +1,11 @@
|
||||||
.searchFilterInner {
|
.searchFilterInner {
|
||||||
max-width: 800px;
|
max-inline-size: 800px;
|
||||||
margin-inline-start: auto;
|
margin-inline-start: auto;
|
||||||
margin-inline-end: auto;
|
margin-inline-end: auto;
|
||||||
|
|
||||||
padding-block: 20px 70px;
|
padding-block: 20px 70px;
|
||||||
padding-inline: 20px;
|
padding-inline: 20px;
|
||||||
max-height: 410px;
|
max-block-size: 410px;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
|
||||||
background-color: var(--card-bg-color);
|
background-color: var(--card-bg-color);
|
||||||
|
@ -23,7 +23,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.radioFlexBox {
|
.radioFlexBox {
|
||||||
max-width: 1000px;
|
max-inline-size: 1000px;
|
||||||
margin-block: 0;
|
margin-block: 0;
|
||||||
margin-inline: auto;
|
margin-inline: auto;
|
||||||
}
|
}
|
||||||
|
|
|
@ -23,7 +23,7 @@
|
||||||
/* select starting stylings ------------------------------*/
|
/* select starting stylings ------------------------------*/
|
||||||
.select {
|
.select {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 200px;
|
inline-size: 200px;
|
||||||
padding-block: 0 10px;
|
padding-block: 0 10px;
|
||||||
padding-inline: 0 10px;
|
padding-inline: 0 10px;
|
||||||
margin-block-start: 30px;
|
margin-block-start: 30px;
|
||||||
|
@ -39,7 +39,7 @@
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
color: var(--primary-text-color);
|
color: var(--primary-text-color);
|
||||||
width: 240px;
|
inline-size: 240px;
|
||||||
padding-block: 10px;
|
padding-block: 10px;
|
||||||
padding-inline: 0 10px;
|
padding-inline: 0 10px;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
|
@ -108,13 +108,13 @@
|
||||||
.select-bar {
|
.select-bar {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: block;
|
display: block;
|
||||||
width: 200px;
|
inline-size: 200px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.select-bar:before, .select-bar:after {
|
.select-bar:before, .select-bar:after {
|
||||||
content: '';
|
content: '';
|
||||||
height: 2px;
|
block-size: 2px;
|
||||||
width: 0;
|
inline-size: 0;
|
||||||
inset-block-end: 1px;
|
inset-block-end: 1px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
background: var(--accent-color);
|
background: var(--accent-color);
|
||||||
|
@ -131,14 +131,14 @@
|
||||||
|
|
||||||
/* 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 {
|
||||||
width: 50%;
|
inline-size: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* HIGHLIGHTER ================================== */
|
/* HIGHLIGHTER ================================== */
|
||||||
.select-highlight {
|
.select-highlight {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
height: 60%;
|
block-size: 60%;
|
||||||
width: 100px;
|
inline-size: 100px;
|
||||||
inset-block-start: 25%;
|
inset-block-start: 25%;
|
||||||
inset-inline-start: 0;
|
inset-inline-start: 0;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
|
@ -147,17 +147,17 @@
|
||||||
|
|
||||||
@media only screen and (max-width: 1000px) {
|
@media only screen and (max-width: 1000px) {
|
||||||
.select .select-text {
|
.select .select-text {
|
||||||
max-width: 240px;
|
max-inline-size: 240px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: 800px) {
|
@media only screen and (max-width: 800px) {
|
||||||
.select {
|
.select {
|
||||||
width: 100%;
|
inline-size: 100%;
|
||||||
}
|
}
|
||||||
.select .select-text {
|
.select .select-text {
|
||||||
display:block;
|
display:block;
|
||||||
max-width: 95%;
|
max-inline-size: 95%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -2,10 +2,10 @@
|
||||||
background-color: var(--card-bg-color);
|
background-color: var(--card-bg-color);
|
||||||
margin-block: 0;
|
margin-block: 0;
|
||||||
margin-inline: auto;
|
margin-inline: auto;
|
||||||
width: 85%;
|
inline-size: 85%;
|
||||||
|
|
||||||
@media only screen and (max-width: 800px) {
|
@media only screen and (max-width: 800px) {
|
||||||
width: 100%;
|
inline-size: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
&[open] {
|
&[open] {
|
||||||
|
@ -16,7 +16,7 @@
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding-block: 0;
|
padding-block: 0;
|
||||||
padding-inline: 20px;
|
padding-inline: 20px;
|
||||||
width: 100%;
|
inline-size: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
> div:not(:last-child, .ft-flex-box) {
|
> div:not(:last-child, .ft-flex-box) {
|
||||||
|
@ -29,9 +29,9 @@
|
||||||
.sectionLine {
|
.sectionLine {
|
||||||
background-color: var(--primary-color);
|
background-color: var(--primary-color);
|
||||||
border: 0;
|
border: 0;
|
||||||
height: 2px;
|
block-size: 2px;
|
||||||
margin-block-start: -1px;
|
margin-block-start: -1px;
|
||||||
width: 100%;
|
inline-size: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sectionHeader {
|
.sectionHeader {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
grid-auto-flow: column;
|
grid-auto-flow: column;
|
||||||
grid-template-rows: auto auto;
|
grid-template-rows: auto auto;
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
width: max-content;
|
inline-size: max-content;
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
color: var(--primary-text-color);
|
color: var(--primary-text-color);
|
||||||
|
@ -27,12 +27,12 @@
|
||||||
grid-row: span 3;
|
grid-row: span 3;
|
||||||
margin-block: 0;
|
margin-block: 0;
|
||||||
margin-inline: 12px;
|
margin-inline: 12px;
|
||||||
width: 1px;
|
inline-size: 1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.youtubeLogo {
|
.youtubeLogo {
|
||||||
height: 18px;
|
block-size: 18px;
|
||||||
width: auto;
|
inline-size: auto;
|
||||||
|
|
||||||
@at-root {
|
@at-root {
|
||||||
.dark &,
|
.dark &,
|
||||||
|
@ -62,9 +62,9 @@
|
||||||
.invidiousLogo {
|
.invidiousLogo {
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
height: 20px;
|
block-size: 20px;
|
||||||
margin-inline-end: 2px;
|
margin-inline-end: 2px;
|
||||||
width: 20px;
|
inline-size: 20px;
|
||||||
|
|
||||||
@at-root {
|
@at-root {
|
||||||
.dark &,
|
.dark &,
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
--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;
|
||||||
width: 380px;
|
inline-size: 380px;
|
||||||
color: rgba(var(--primary-text-color), 0.87);
|
color: rgba(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;
|
||||||
|
@ -22,8 +22,8 @@
|
||||||
display: block;
|
display: block;
|
||||||
margin-block: 0 -36px;
|
margin-block: 0 -36px;
|
||||||
margin-inline: 0;
|
margin-inline: 0;
|
||||||
width: 100%;
|
inline-size: 100%;
|
||||||
height: 36px;
|
block-size: 36px;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
@ -60,8 +60,8 @@
|
||||||
margin-block: 17px;
|
margin-block: 17px;
|
||||||
margin-inline: 0;
|
margin-inline: 0;
|
||||||
border-radius: 1px;
|
border-radius: 1px;
|
||||||
width: 100%;
|
inline-size: 100%;
|
||||||
height: 2px;
|
block-size: 2px;
|
||||||
background-color: var(--accent-color-opacity4);
|
background-color: var(--accent-color-opacity4);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -71,8 +71,8 @@
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
height: 2px;
|
block-size: 2px;
|
||||||
width: 2px;
|
inline-size: 2px;
|
||||||
background-color: var(--accent-color);
|
background-color: var(--accent-color);
|
||||||
transform: scale(6, 6);
|
transform: scale(6, 6);
|
||||||
transition: box-shadow 0.2s;
|
transition: box-shadow 0.2s;
|
||||||
|
@ -113,8 +113,8 @@
|
||||||
margin-block: 0;
|
margin-block: 0;
|
||||||
margin-auto: 17px;
|
margin-auto: 17px;
|
||||||
border-radius: 1px;
|
border-radius: 1px;
|
||||||
width: 100%;
|
inline-size: 100%;
|
||||||
height: 2px;
|
block-size: 2px;
|
||||||
background-color: var(--accent-color-opacity4);
|
background-color: var(--accent-color-opacity4);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -124,8 +124,8 @@
|
||||||
-moz-appearance: none;
|
-moz-appearance: none;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
height: 2px;
|
block-size: 2px;
|
||||||
width: 2px;
|
inline-size: 2px;
|
||||||
background-color: var(--accent-color);
|
background-color: var(--accent-color);
|
||||||
transform: scale(6, 6);
|
transform: scale(6, 6);
|
||||||
transition: box-shadow 0.2s;
|
transition: box-shadow 0.2s;
|
||||||
|
@ -134,7 +134,7 @@
|
||||||
/* Moz | Progress */
|
/* Moz | Progress */
|
||||||
.pure-material-slider > input::-moz-range-progress {
|
.pure-material-slider > input::-moz-range-progress {
|
||||||
border-radius: 1px;
|
border-radius: 1px;
|
||||||
height: 2px;
|
block-size: 2px;
|
||||||
background-color: var(--accent-color);
|
background-color: var(--accent-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -183,21 +183,21 @@
|
||||||
border-radius: 1px;
|
border-radius: 1px;
|
||||||
padding-block: 0;
|
padding-block: 0;
|
||||||
padding-inline: 17px;
|
padding-inline: 17px;
|
||||||
width: 100%;
|
inline-size: 100%;
|
||||||
height: 2px;
|
block-size: 2px;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pure-material-slider > input::-ms-fill-lower {
|
.pure-material-slider > input::-ms-fill-lower {
|
||||||
border-radius: 1px;
|
border-radius: 1px;
|
||||||
height: 2px;
|
block-size: 2px;
|
||||||
background-color: var(--accent-color);
|
background-color: var(--accent-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* MS | Progress */
|
/* MS | Progress */
|
||||||
.pure-material-slider > input::-ms-fill-upper {
|
.pure-material-slider > input::-ms-fill-upper {
|
||||||
border-radius: 1px;
|
border-radius: 1px;
|
||||||
height: 2px;
|
block-size: 2px;
|
||||||
background-color: var(--accent-color-opacity4);
|
background-color: var(--accent-color-opacity4);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -208,8 +208,8 @@
|
||||||
margin-inline: 17px;
|
margin-inline: 17px;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
height: 2px;
|
block-size: 2px;
|
||||||
width: 2px;
|
inline-size: 2px;
|
||||||
background-color: var(--accent-color);
|
background-color: var(--accent-color);
|
||||||
transform: scale(6, 6);
|
transform: scale(6, 6);
|
||||||
transition: box-shadow 0.2s;
|
transition: box-shadow 0.2s;
|
||||||
|
@ -251,6 +251,6 @@
|
||||||
|
|
||||||
@media only screen and (max-width: 680px) {
|
@media only screen and (max-width: 680px) {
|
||||||
.pure-material-slider {
|
.pure-material-slider {
|
||||||
width: 100%;
|
inline-size: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
padding-inline: 10px;
|
padding-inline: 10px;
|
||||||
|
|
||||||
@media only screen and (max-width: 680px) {
|
@media only screen and (max-width: 680px) {
|
||||||
width: 100%;
|
inline-size: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sponsorTitle {
|
.sponsorTitle {
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
.subscribeButton {
|
.subscribeButton {
|
||||||
align-self: center;
|
align-self: center;
|
||||||
height: 50%;
|
block-size: 50%;
|
||||||
margin-block-end: 10px;
|
margin-block-end: 10px;
|
||||||
min-width: 150px;
|
min-inline-size: 150px;
|
||||||
}
|
}
|
||||||
|
|
|
@ -12,12 +12,12 @@
|
||||||
|
|
||||||
.switch-input {
|
.switch-input {
|
||||||
appearance: none;
|
appearance: none;
|
||||||
height: 20px;
|
block-size: 20px;
|
||||||
inset-inline-start: -3px;
|
inset-inline-start: -3px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
inset-block-start: calc(50% - 3px);
|
inset-block-start: calc(50% - 3px);
|
||||||
transform: translate(0, -50%);
|
transform: translate(0, -50%);
|
||||||
width: 34px;
|
inline-size: 34px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.switch-label {
|
.switch-label {
|
||||||
|
@ -43,9 +43,9 @@
|
||||||
&::before {
|
&::before {
|
||||||
background-color: #9e9e9e;
|
background-color: #9e9e9e;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
height: 14px;
|
block-size: 14px;
|
||||||
inset-inline-start: 1px;
|
inset-inline-start: 1px;
|
||||||
width: 34px;
|
inline-size: 34px;
|
||||||
|
|
||||||
.switch-input:checked + & {
|
.switch-input:checked + & {
|
||||||
background-color: var(--accent-color-light);
|
background-color: var(--accent-color-light);
|
||||||
|
@ -60,9 +60,9 @@
|
||||||
background-color: #fafafa;
|
background-color: #fafafa;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
box-shadow: 0 3px 1px -2px rgb(0 0 0 / 14%), 0 2px 2px 0 rgb(0 0 0 / 9.8%), 0 1px 5px 0 rgb(0 0 0 / 8.4%);
|
box-shadow: 0 3px 1px -2px rgb(0 0 0 / 14%), 0 2px 2px 0 rgb(0 0 0 / 9.8%), 0 1px 5px 0 rgb(0 0 0 / 8.4%);
|
||||||
height: 20px;
|
block-size: 20px;
|
||||||
inset-inline-start: 0;
|
inset-inline-start: 0;
|
||||||
width: 20px;
|
inline-size: 20px;
|
||||||
|
|
||||||
.switch-input:checked + & {
|
.switch-input:checked + & {
|
||||||
background-color: var(--accent-color);
|
background-color: var(--accent-color);
|
||||||
|
@ -75,7 +75,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 680px) {
|
@media (max-width: 680px) {
|
||||||
max-width: 250px;
|
max-inline-size: 250px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -38,8 +38,8 @@
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
line-height: 120%;
|
line-height: 120%;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
max-width: max-content;
|
max-inline-size: max-content;
|
||||||
min-width: 15em;
|
min-inline-size: 15em;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
padding-block: 10px;
|
padding-block: 10px;
|
||||||
padding-inline: 8px;
|
padding-inline: 8px;
|
||||||
|
|
|
@ -1,9 +1,10 @@
|
||||||
|
/* stylelint-disable liberty/use-logical-spec */
|
||||||
.relative {
|
.relative {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ftVideoPlayer {
|
.ftVideoPlayer {
|
||||||
width:100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ftVideoPlayer.vjs-user-inactive {
|
.ftVideoPlayer.vjs-user-inactive {
|
||||||
|
@ -16,14 +17,15 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.sponsorBlockMarker) {
|
:deep(.sponsorBlockMarker) {
|
||||||
height: 100%;
|
block-size: 100%;
|
||||||
background-color: var(--primary-color);
|
background-color: var(--primary-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.chapterMarker) {
|
:deep(.chapterMarker) {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
inset-block-start: 0;
|
top: 0;
|
||||||
width: 2px;
|
width: 2px;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
background-color: #000;
|
background-color: #000;
|
||||||
}
|
}
|
||||||
|
/* stylelint-enable liberty/use-logical-spec */
|
||||||
|
|
|
@ -1,10 +1,10 @@
|
||||||
.select {
|
.select {
|
||||||
min-width: 240px;
|
min-inline-size: 240px;
|
||||||
width: auto;
|
inline-size: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors */
|
/* https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors */
|
||||||
.select:deep(.select-text) {
|
.select:deep(.select-text) {
|
||||||
min-width: 240px;
|
min-inline-size: 240px;
|
||||||
width: auto;
|
inline-size: auto;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,9 +1,9 @@
|
||||||
.card {
|
.card {
|
||||||
width: 85%;
|
inline-size: 85%;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
.passwordInput {
|
.passwordInput {
|
||||||
width: 100%;
|
inline-size: 100%;
|
||||||
}
|
}
|
||||||
|
|
|
@ -7,7 +7,7 @@
|
||||||
column-gap: 1rem;
|
column-gap: 1rem;
|
||||||
margin-block: 0;
|
margin-block: 0;
|
||||||
margin-inline: auto;
|
margin-inline: auto;
|
||||||
width: 95%;
|
inline-size: 95%;
|
||||||
|
|
||||||
.screenshotFolderLabel,
|
.screenshotFolderLabel,
|
||||||
.screenshotFolderButton,
|
.screenshotFolderButton,
|
||||||
|
|
|
@ -1,10 +1,10 @@
|
||||||
.playListThumbnail {
|
.playListThumbnail {
|
||||||
width: 100%;
|
inline-size: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.playlistThumbnail img {
|
.playlistThumbnail img {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
width: 100%;
|
inline-size: 100%;
|
||||||
|
|
||||||
@media only screen and (max-width: 800px) {
|
@media only screen and (max-width: 800px) {
|
||||||
display: none;
|
display: none;
|
||||||
|
@ -25,12 +25,12 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.playlistDescription {
|
.playlistDescription {
|
||||||
max-height: 20vh;
|
max-block-size: 20vh;
|
||||||
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 (max-width: 500px) {
|
||||||
max-height: 10vh;
|
max-block-size: 10vh;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -39,14 +39,14 @@
|
||||||
color: inherit;
|
color: inherit;
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
height: 40px;
|
block-size: 40px;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.channelThumbnail {
|
.channelThumbnail {
|
||||||
border-radius: 200px;
|
border-radius: 200px;
|
||||||
float: var(--float-left-ltr-rtl-value);
|
float: var(--float-left-ltr-rtl-value);
|
||||||
width: 40px;
|
inline-size: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.channelName {
|
.channelName {
|
||||||
|
|
|
@ -31,7 +31,7 @@
|
||||||
position: fixed;
|
position: fixed;
|
||||||
background-color: var(--side-nav-color);
|
background-color: var(--side-nav-color);
|
||||||
inset-block-end: 60px;
|
inset-block-end: 60px;
|
||||||
width: 70px;
|
inline-size: 70px;
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
-webkit-box-shadow: 3px -3px 5px 0px rgba(0,0,0,0.2);
|
-webkit-box-shadow: 3px -3px 5px 0px rgba(0,0,0,0.2);
|
||||||
-moz-box-shadow: 3px -3px 5px 0px rgba(0,0,0,0.2);
|
-moz-box-shadow: 3px -3px 5px 0px rgba(0,0,0,0.2);
|
||||||
|
@ -45,23 +45,23 @@
|
||||||
|
|
||||||
.sideNav, .closed {
|
.sideNav, .closed {
|
||||||
margin-block-start: 0px;
|
margin-block-start: 0px;
|
||||||
height: 60px;
|
block-size: 60px;
|
||||||
width: 100%;
|
inline-size: 100%;
|
||||||
inset-block-end: 0px;
|
inset-block-end: 0px;
|
||||||
inset-block-start: auto;
|
inset-block-start: auto;
|
||||||
overflow-y: inherit;
|
overflow-y: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navOption, .closed .navOption {
|
.navOption, .closed .navOption {
|
||||||
width: 70px;
|
inline-size: 70px;
|
||||||
height: 40px;
|
block-size: 40px;
|
||||||
padding-block: 10px;
|
padding-block: 10px;
|
||||||
padding-inline: 0;
|
padding-inline: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navLabel {
|
.navLabel {
|
||||||
margin-inline-start: 0px;
|
margin-inline-start: 0px;
|
||||||
width: 100%;
|
inline-size: 100%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
inset-inline-start: 0px;
|
inset-inline-start: 0px;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
|
@ -69,7 +69,7 @@
|
||||||
|
|
||||||
.navIcon {
|
.navIcon {
|
||||||
margin-inline-start: 0px;
|
margin-inline-start: 0px;
|
||||||
width: 100%;
|
inline-size: 100%;
|
||||||
display: block;
|
display: block;
|
||||||
margin-block-start: 0.5em;
|
margin-block-start: 0.5em;
|
||||||
}
|
}
|
||||||
|
@ -79,6 +79,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.closed .navIconExpand{
|
.closed .navIconExpand{
|
||||||
height:1.3em;
|
block-size:1.3em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
.sideNav {
|
.sideNav {
|
||||||
display: block;
|
display: block;
|
||||||
height: calc(100vh - 60px);
|
block-size: calc(100vh - 60px);
|
||||||
width: 200px;
|
inline-size: 200px;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
position: sticky;
|
position: sticky;
|
||||||
inset-inline-start: 0;
|
inset-inline-start: 0;
|
||||||
|
@ -9,7 +9,7 @@
|
||||||
z-index: 3;
|
z-index: 3;
|
||||||
box-shadow: 1px -1px 1px -1px var(--primary-shadow-color);
|
box-shadow: 1px -1px 1px -1px var(--primary-shadow-color);
|
||||||
background-color: var(--side-nav-color);
|
background-color: var(--side-nav-color);
|
||||||
transition-property: width;
|
transition-property: inline-size;
|
||||||
transition-duration: 150ms;
|
transition-duration: 150ms;
|
||||||
transition-timing-function: ease-in-out;
|
transition-timing-function: ease-in-out;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
|
@ -17,22 +17,22 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.inner {
|
.inner {
|
||||||
height: 100%;
|
block-size: 100%;
|
||||||
width: 200px;
|
inline-size: 200px;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.closed .inner {
|
.closed .inner {
|
||||||
width: 80px;
|
inline-size: 80px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.closed .hiddenLabels {
|
.closed .hiddenLabels {
|
||||||
width: 60px;
|
inline-size: 60px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.closed.hiddenLabels {
|
.closed.hiddenLabels {
|
||||||
width: 60px;
|
inline-size: 60px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.topNavOption {
|
.topNavOption {
|
||||||
|
@ -42,7 +42,7 @@
|
||||||
.navOption, .navChannel {
|
.navOption, .navChannel {
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
min-height: 35px;
|
min-block-size: 35px;
|
||||||
-webkit-user-drag: none;
|
-webkit-user-drag: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -84,7 +84,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.thumbnailContainer {
|
.thumbnailContainer {
|
||||||
width: 35px;
|
inline-size: 35px;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
inset-block-start: 50%;
|
inset-block-start: 50%;
|
||||||
|
@ -104,12 +104,12 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.closed {
|
.closed {
|
||||||
width: 80px;
|
inline-size: 80px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sideNav hr {
|
.sideNav hr {
|
||||||
width: 90%;
|
inline-size: 90%;
|
||||||
height: 1px;
|
block-size: 1px;
|
||||||
border: 0;
|
border: 0;
|
||||||
background-color: var(--primary-color);
|
background-color: var(--primary-color);
|
||||||
}
|
}
|
||||||
|
@ -125,24 +125,24 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.closed .navOption {
|
.closed .navOption {
|
||||||
width: 100%;
|
inline-size: 100%;
|
||||||
padding-block: 5px;
|
padding-block: 5px;
|
||||||
padding-inline: 0;
|
padding-inline: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.closed .navIcon {
|
.closed .navIcon {
|
||||||
margin-inline-start: 0px;
|
margin-inline-start: 0px;
|
||||||
width: 100%;
|
inline-size: 100%;
|
||||||
display: block;
|
display: block;
|
||||||
margin-block-end: 0px;
|
margin-block-end: 0px;
|
||||||
}
|
}
|
||||||
.closed .navIconExpand{
|
.closed .navIconExpand{
|
||||||
height:1.3em;
|
block-size:1.3em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.closed .navLabel {
|
.closed .navLabel {
|
||||||
margin-inline-start: 0px;
|
margin-inline-start: 0px;
|
||||||
width: 100%;
|
inline-size: 100%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
inset-inline-start: 0px;
|
inset-inline-start: 0px;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
|
@ -150,8 +150,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.closed .navChannel {
|
.closed .navChannel {
|
||||||
width: 100%;
|
inline-size: 100%;
|
||||||
height: 45px;
|
block-size: 45px;
|
||||||
padding-block: 5px;
|
padding-block: 5px;
|
||||||
padding-inline: 0;
|
padding-inline: 0;
|
||||||
}
|
}
|
||||||
|
@ -194,16 +194,16 @@
|
||||||
|
|
||||||
.sideNav, .closed {
|
.sideNav, .closed {
|
||||||
margin-block-start: 0px;
|
margin-block-start: 0px;
|
||||||
height: 60px;
|
block-size: 60px;
|
||||||
width: 100%;
|
inline-size: 100%;
|
||||||
inset-block-end: 0px;
|
inset-block-end: 0px;
|
||||||
inset-block-start: auto;
|
inset-block-start: auto;
|
||||||
overflow-y: hidden;
|
overflow-y: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navOption, .closed .navOption {
|
.navOption, .closed .navOption {
|
||||||
width: 70px;
|
inline-size: 70px;
|
||||||
height: 40px;
|
block-size: 40px;
|
||||||
padding: 0px;
|
padding: 0px;
|
||||||
padding-block-start: 10px;
|
padding-block-start: 10px;
|
||||||
padding-block-end: 10px;
|
padding-block-end: 10px;
|
||||||
|
@ -211,7 +211,7 @@
|
||||||
|
|
||||||
.navLabel {
|
.navLabel {
|
||||||
margin-inline-start: 0px;
|
margin-inline-start: 0px;
|
||||||
width: 100%;
|
inline-size: 100%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
inset-inline-start: 0px;
|
inset-inline-start: 0px;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
|
@ -221,6 +221,6 @@
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
.closed.hiddenLabels{
|
.closed.hiddenLabels{
|
||||||
width: 100%;
|
inline-size: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
.card {
|
.card {
|
||||||
width: 85%;
|
inline-size: 85%;
|
||||||
margin-block: 0 60px;
|
margin-block: 0 60px;
|
||||||
margin-inline: auto;
|
margin-inline: auto;
|
||||||
}
|
}
|
||||||
|
@ -22,6 +22,6 @@
|
||||||
|
|
||||||
@media only screen and (max-width: 680px) {
|
@media only screen and (max-width: 680px) {
|
||||||
.card {
|
.card {
|
||||||
width: 90%;
|
inline-size: 90%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -13,13 +13,13 @@
|
||||||
background-color: var(--card-bg-color);
|
background-color: var(--card-bg-color);
|
||||||
box-shadow: 0 2px 1px 0 var(--primary-shadow-color);
|
box-shadow: 0 2px 1px 0 var(--primary-shadow-color);
|
||||||
display: flex;
|
display: flex;
|
||||||
height: 60px;
|
block-size: 60px;
|
||||||
inset-inline-start: 0;
|
inset-inline-start: 0;
|
||||||
line-height: 60px;
|
line-height: 60px;
|
||||||
position: sticky;
|
position: sticky;
|
||||||
inset-inline-end: 0;
|
inset-inline-end: 0;
|
||||||
inset-block-start: 0;
|
inset-block-start: 0;
|
||||||
width: 100%;
|
inline-size: 100%;
|
||||||
z-index: 4;
|
z-index: 4;
|
||||||
|
|
||||||
@media only screen and (min-width: 961px) {
|
@media only screen and (min-width: 961px) {
|
||||||
|
@ -47,10 +47,10 @@
|
||||||
color: var(--primary-text-color);
|
color: var(--primary-text-color);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
height: 1em;
|
block-size: 1em;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
transition: background 0.2s ease-out;
|
transition: background 0.2s ease-out;
|
||||||
width: 1em;
|
inline-size: 1em;
|
||||||
|
|
||||||
@include top-nav-is-colored {
|
@include top-nav-is-colored {
|
||||||
color: var(--text-with-main-color);
|
color: var(--text-with-main-color);
|
||||||
|
@ -144,8 +144,8 @@
|
||||||
background-position: right top;
|
background-position: right top;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: 25px;
|
background-size: 25px;
|
||||||
height: 25px;
|
block-size: 25px;
|
||||||
width: 25px;
|
inline-size: 25px;
|
||||||
|
|
||||||
@include top-nav-is-colored {
|
@include top-nav-is-colored {
|
||||||
background-image: var(--logo-icon-bar-color);
|
background-image: var(--logo-icon-bar-color);
|
||||||
|
@ -157,11 +157,11 @@
|
||||||
background-position: right top;
|
background-position: right top;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: 100px;
|
background-size: 100px;
|
||||||
height: 40px;
|
block-size: 40px;
|
||||||
margin-inline-start: 5px;
|
margin-inline-start: 5px;
|
||||||
position: relative;
|
position: relative;
|
||||||
inset-block-start: -3px;
|
inset-block-start: -3px;
|
||||||
width: 100px;
|
inline-size: 100px;
|
||||||
|
|
||||||
@media only screen and (max-width: 680px) {
|
@media only screen and (max-width: 680px) {
|
||||||
display: none;
|
display: none;
|
||||||
|
@ -176,7 +176,7 @@
|
||||||
|
|
||||||
.middle {
|
.middle {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
max-width: 440px;
|
max-inline-size: 440px;
|
||||||
|
|
||||||
.searchContainer {
|
.searchContainer {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
|
@ -14,7 +14,7 @@
|
||||||
|
|
||||||
.chaptersWrapper {
|
.chaptersWrapper {
|
||||||
margin-block-start: 15px;
|
margin-block-start: 15px;
|
||||||
max-height: 250px;
|
max-block-size: 250px;
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
@ -22,7 +22,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.chaptersWrapper.compact {
|
.chaptersWrapper.compact {
|
||||||
max-height: 200px;
|
max-block-size: 200px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.chaptersChevron {
|
.chaptersChevron {
|
||||||
|
@ -53,8 +53,8 @@
|
||||||
|
|
||||||
.chapterThumbnail {
|
.chapterThumbnail {
|
||||||
grid-area: thumbnail;
|
grid-area: thumbnail;
|
||||||
width: 130px;
|
inline-size: 130px;
|
||||||
height: auto;
|
block-size: auto;
|
||||||
margin: 3px;
|
margin: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -44,8 +44,8 @@
|
||||||
|
|
||||||
.commentThumbnail {
|
.commentThumbnail {
|
||||||
float: var(--float-left-ltr-rtl-value);
|
float: var(--float-left-ltr-rtl-value);
|
||||||
width: 60px;
|
inline-size: 60px;
|
||||||
height: 60px;
|
block-size: 60px;
|
||||||
border-radius: 200px;
|
border-radius: 200px;
|
||||||
-webkit-border-radius: 200px;
|
-webkit-border-radius: 200px;
|
||||||
}
|
}
|
||||||
|
@ -55,8 +55,8 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 60px;
|
inline-size: 60px;
|
||||||
height: 60px;
|
block-size: 60px;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
line-height: 1em;
|
line-height: 1em;
|
||||||
text-transform: capitalize;
|
text-transform: capitalize;
|
||||||
|
@ -111,17 +111,16 @@
|
||||||
|
|
||||||
.commentMemberIcon {
|
.commentMemberIcon {
|
||||||
margin-inline-start: 5px;
|
margin-inline-start: 5px;
|
||||||
width: 14px;
|
inline-size: 14px;
|
||||||
height: 14px;
|
block-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.commentSubscribedIcon {
|
.commentSubscribedIcon {
|
||||||
content: var(--logo-icon);
|
content: var(--logo-icon);
|
||||||
height: 14px;
|
block-size: 14px;
|
||||||
width: 14px;
|
inline-size: 14px;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
margin-left: 0.25em;
|
margin-inline: 0.25em;
|
||||||
margin-right: 0.25em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.commentLikeCount {
|
.commentLikeCount {
|
||||||
|
@ -133,8 +132,8 @@
|
||||||
.commentHeartBadge {
|
.commentHeartBadge {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 25px;
|
inline-size: 25px;
|
||||||
height: 20px;
|
block-size: 20px;
|
||||||
margin-inline-start: 10px;
|
margin-inline-start: 10px;
|
||||||
margin-block-end: -7px;
|
margin-block-end: -7px;
|
||||||
}
|
}
|
||||||
|
@ -142,8 +141,8 @@
|
||||||
.commentHeartBadgeImg {
|
.commentHeartBadgeImg {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
inset-inline-start: 0;
|
inset-inline-start: 0;
|
||||||
width: 15px;
|
inline-size: 15px;
|
||||||
height: 15px;
|
block-size: 15px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
-webkit-border-radius: 50%;
|
-webkit-border-radius: 50%;
|
||||||
}
|
}
|
||||||
|
@ -152,8 +151,8 @@
|
||||||
position: absolute;
|
position: absolute;
|
||||||
inset-inline-start: 9px;
|
inset-inline-start: 9px;
|
||||||
inset-block-end: 1px;
|
inset-block-end: 1px;
|
||||||
width: 11px;
|
inline-size: 11px;
|
||||||
height: 11px;
|
block-size: 11px;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -162,8 +161,8 @@
|
||||||
color: var(--red-500);
|
color: var(--red-500);
|
||||||
inset-inline-start: 10px;
|
inset-inline-start: 10px;
|
||||||
inset-block-end: 2px;
|
inset-block-end: 2px;
|
||||||
width: 9px;
|
inline-size: 9px;
|
||||||
height: 9px;
|
block-size: 9px;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
.videoDescription {
|
.videoDescription {
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
max-height: 300px;
|
max-block-size: 300px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.description {
|
.description {
|
||||||
|
|
|
@ -28,7 +28,7 @@
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
margin-inline-end: 10px;
|
margin-inline-end: 10px;
|
||||||
width: 56px;
|
inline-size: 56px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.channelName {
|
.channelName {
|
||||||
|
@ -66,7 +66,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.datePublished {
|
.datePublished {
|
||||||
margin: 4px 0 0;
|
margin-block: 4px 0;
|
||||||
|
margin-inline: 0;
|
||||||
|
|
||||||
@media screen and (max-width: 680px) {
|
@media screen and (max-width: 680px) {
|
||||||
margin-block-start: 16px;
|
margin-block-start: 16px;
|
||||||
|
@ -80,7 +81,7 @@
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
margin-inline-start: auto;
|
margin-inline-start: auto;
|
||||||
margin-block-start: 4px;
|
margin-block-start: 4px;
|
||||||
max-width: 210px;
|
max-inline-size: 210px;
|
||||||
text-align: end;
|
text-align: end;
|
||||||
|
|
||||||
@media screen and (max-width: 680px) {
|
@media screen and (max-width: 680px) {
|
||||||
|
@ -90,7 +91,7 @@
|
||||||
|
|
||||||
.likeBar {
|
.likeBar {
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
height: 8px;
|
block-size: 8px;
|
||||||
margin-block-end: 4px;
|
margin-block-end: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
.card.hasError {
|
.card.hasError {
|
||||||
height: auto !important;
|
block-size: auto !important;
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -8,8 +8,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.messageContainer {
|
.messageContainer {
|
||||||
width: 100%;
|
inline-size: 100%;
|
||||||
height: 100%;
|
block-size: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
@ -36,7 +36,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.errorIcon {
|
.errorIcon {
|
||||||
width: 100%;
|
inline-size: 100%;
|
||||||
color: var(--tertiary-text-color);
|
color: var(--tertiary-text-color);
|
||||||
font-size: 100px;
|
font-size: 100px;
|
||||||
}
|
}
|
||||||
|
@ -49,8 +49,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.superChatComments {
|
.superChatComments {
|
||||||
width: 100%;
|
inline-size: 100%;
|
||||||
height: 50px;
|
block-size: 50px;
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
@ -61,7 +61,7 @@
|
||||||
padding-inline-end: 10px;
|
padding-inline-end: 10px;
|
||||||
margin-inline-start: 2px;
|
margin-inline-start: 2px;
|
||||||
margin-inline-end: 2px;
|
margin-inline-end: 2px;
|
||||||
height: 30px;
|
block-size: 30px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
background-color: var(--primary-color);
|
background-color: var(--primary-color);
|
||||||
border-radius: 200px;
|
border-radius: 200px;
|
||||||
|
@ -77,7 +77,7 @@
|
||||||
.superChat .channelThumbnail {
|
.superChat .channelThumbnail {
|
||||||
margin-block-start: 3px;
|
margin-block-start: 3px;
|
||||||
margin-inline-start: 3px;
|
margin-inline-start: 3px;
|
||||||
height: 25px;
|
block-size: 25px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.donationAmount {
|
.donationAmount {
|
||||||
|
@ -86,8 +86,8 @@
|
||||||
|
|
||||||
.openedSuperChat {
|
.openedSuperChat {
|
||||||
background-color: rgba(0, 0, 0, 0.7);
|
background-color: rgba(0, 0, 0, 0.7);
|
||||||
width: 100%;
|
inline-size: 100%;
|
||||||
height: 415px;
|
block-size: 415px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
margin-inline-start: -16px;
|
margin-inline-start: -16px;
|
||||||
padding-inline-end: 32px;
|
padding-inline-end: 32px;
|
||||||
|
@ -109,7 +109,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.comment {
|
.comment {
|
||||||
width: 100%;
|
inline-size: 100%;
|
||||||
padding-block: 5px 7px;
|
padding-block: 5px 7px;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: min-content auto;
|
grid-template-columns: min-content auto;
|
||||||
|
@ -117,7 +117,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.superChatMessage {
|
.superChatMessage {
|
||||||
width: 90%;
|
inline-size: 90%;
|
||||||
grid-template-columns: auto;
|
grid-template-columns: auto;
|
||||||
margin-inline-start: 5%;
|
margin-inline-start: 5%;
|
||||||
margin-inline-end: 5%;
|
margin-inline-end: 5%;
|
||||||
|
@ -131,15 +131,15 @@
|
||||||
|
|
||||||
.upperSuperChatMessage {
|
.upperSuperChatMessage {
|
||||||
margin-block-start: -15px;
|
margin-block-start: -15px;
|
||||||
width: 100%;
|
inline-size: 100%;
|
||||||
height: 55px;
|
block-size: 55px;
|
||||||
background-color: var(--primary-color-hover);
|
background-color: var(--primary-color-hover);
|
||||||
border-radius: 5px 5px 0px 0px;
|
border-radius: 5px 5px 0px 0px;
|
||||||
-webkit-border-radius: 5px 5px 0px 0px;
|
-webkit-border-radius: 5px 5px 0px 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.upperSuperChatMessage .channelThumbnail {
|
.upperSuperChatMessage .channelThumbnail {
|
||||||
width: 45px;
|
inline-size: 45px;
|
||||||
margin-inline-start: 10px;
|
margin-inline-start: 10px;
|
||||||
margin-block-start: 5px;
|
margin-block-start: 5px;
|
||||||
}
|
}
|
||||||
|
@ -166,12 +166,12 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.liveChatComments {
|
.liveChatComments {
|
||||||
width: 100%;
|
inline-size: 100%;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.channelThumbnail {
|
.channelThumbnail {
|
||||||
width: 25px;
|
inline-size: 25px;
|
||||||
border-radius: 200px;
|
border-radius: 200px;
|
||||||
-webkit-border-radius: 200px;
|
-webkit-border-radius: 200px;
|
||||||
}
|
}
|
||||||
|
@ -204,13 +204,13 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.badgeImage {
|
.badgeImage {
|
||||||
width: 14px;
|
inline-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.scrollToBottom {
|
.scrollToBottom {
|
||||||
background-color: var(--accent-color);
|
background-color: var(--accent-color);
|
||||||
width: 35px;
|
inline-size: 35px;
|
||||||
height: 35px;
|
block-size: 35px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
inset-inline-start: 45%;
|
inset-inline-start: 45%;
|
||||||
inset-block-end: 20px;
|
inset-block-end: 20px;
|
||||||
|
|
|
@ -118,7 +118,7 @@
|
||||||
<div
|
<div
|
||||||
ref="liveChatComments"
|
ref="liveChatComments"
|
||||||
class="liveChatComments"
|
class="liveChatComments"
|
||||||
:style="{ height: chatHeight }"
|
:style="{ blockSize: chatHeight }"
|
||||||
@mousewheel="e => onScroll(e)"
|
@mousewheel="e => onScroll(e)"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
|
|
|
@ -36,8 +36,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.playlistIcon {
|
.playlistIcon {
|
||||||
height: 20px;
|
block-size: 20px;
|
||||||
width: 20px;
|
inline-size: 20px;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
margin-block-start: -25px;
|
margin-block-start: -25px;
|
||||||
|
@ -59,7 +59,7 @@
|
||||||
|
|
||||||
.playlistItems {
|
.playlistItems {
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
height: 360px;
|
block-size: 360px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.playlistItem {
|
.playlistItem {
|
||||||
|
|
|
@ -96,12 +96,12 @@ $watched-transition-duration: 0.5s;
|
||||||
|
|
||||||
.thumbnailImage {
|
.thumbnailImage {
|
||||||
@include is-sidebar-item {
|
@include is-sidebar-item {
|
||||||
height: 75px;
|
block-size: 75px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@include is-recommendation {
|
@include is-recommendation {
|
||||||
height: auto;
|
block-size: auto;
|
||||||
width: 163px;
|
inline-size: 163px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -153,13 +153,13 @@ $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;
|
||||||
height: fit-content;
|
block-size: fit-content;
|
||||||
}
|
}
|
||||||
|
|
||||||
.watchedProgressBar {
|
.watchedProgressBar {
|
||||||
align-self: flex-end;
|
align-self: flex-end;
|
||||||
background-color: var(--primary-color);
|
background-color: var(--primary-color);
|
||||||
height: 2px;
|
block-size: 2px;
|
||||||
justify-self: stretch;
|
justify-self: stretch;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
}
|
}
|
||||||
|
@ -169,7 +169,7 @@ $watched-transition-duration: 0.5s;
|
||||||
display: grid;
|
display: grid;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
justify-self: end;
|
justify-self: end;
|
||||||
width: 60px;
|
inline-size: 60px;
|
||||||
|
|
||||||
.background {
|
.background {
|
||||||
background-color: var(--bg-color);
|
background-color: var(--bg-color);
|
||||||
|
@ -193,7 +193,7 @@ $watched-transition-duration: 0.5s;
|
||||||
|
|
||||||
.channelImage {
|
.channelImage {
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
height: 130px;
|
block-size: 130px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -253,7 +253,7 @@ $watched-transition-duration: 0.5s;
|
||||||
|
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
grid-area: description;
|
grid-area: description;
|
||||||
max-height: 50px;
|
max-block-size: 50px;
|
||||||
overflow-y: hidden;
|
overflow-y: hidden;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -274,14 +274,14 @@ $watched-transition-duration: 0.5s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.channelThumbnail {
|
.channelThumbnail {
|
||||||
width: 231px;
|
inline-size: 231px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.grid {
|
&.grid {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
min-height: 230px;
|
min-block-size: 230px;
|
||||||
padding-block-end: 20px;
|
padding-block-end: 20px;
|
||||||
|
|
||||||
.videoThumbnail,
|
.videoThumbnail,
|
||||||
|
@ -289,7 +289,7 @@ $watched-transition-duration: 0.5s;
|
||||||
margin-block-end: 12px;
|
margin-block-end: 12px;
|
||||||
|
|
||||||
.thumbnailImage {
|
.thumbnailImage {
|
||||||
width: 100%;
|
inline-size: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1031,7 +1031,7 @@ html[lang='ur'] [data-prefix="fas"][data-icon="circle-question"] {
|
||||||
|
|
||||||
body {
|
body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
min-height: 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;
|
||||||
|
@ -1055,8 +1055,8 @@ a:visited {
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar {
|
::-webkit-scrollbar {
|
||||||
width: 6px;
|
inline-size: 6px;
|
||||||
height: 6px;
|
block-size: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb {
|
::-webkit-scrollbar-thumb {
|
||||||
|
|
|
@ -1,10 +1,10 @@
|
||||||
.card {
|
.card {
|
||||||
margin-block: 0 60px;
|
margin-block: 0 60px;
|
||||||
margin-inline: auto;
|
margin-inline: auto;
|
||||||
width: 85%;
|
inline-size: 85%;
|
||||||
|
|
||||||
@media only screen and (max-width: 680px) {
|
@media only screen and (max-width: 680px) {
|
||||||
width: 90%;
|
inline-size: 90%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -13,8 +13,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo {
|
.logo {
|
||||||
max-width: 100%;
|
max-inline-size: 100%;
|
||||||
width: 500px;
|
inline-size: 500px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.version {
|
.version {
|
||||||
|
@ -28,7 +28,7 @@
|
||||||
grid-template-columns: 1fr 1fr;
|
grid-template-columns: 1fr 1fr;
|
||||||
margin-block: 80;
|
margin-block: 80;
|
||||||
margin-inline: auto;
|
margin-inline: auto;
|
||||||
max-width: 860px;
|
max-inline-size: 860px;
|
||||||
|
|
||||||
@media only screen and (max-width: 650px) {
|
@media only screen and (max-width: 650px) {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
.card {
|
.card {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 85%;
|
inline-size: 85%;
|
||||||
margin-block: 0 20px;
|
margin-block: 0 20px;
|
||||||
margin-inline: auto;
|
margin-inline: auto;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
@ -8,15 +8,15 @@
|
||||||
|
|
||||||
.channelDetails {
|
.channelDetails {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
max-width: 92vw;
|
max-inline-size: 92vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
.channelBannerContainer {
|
.channelBannerContainer {
|
||||||
background: center / cover no-repeat var(--banner-url, transparent);
|
background: center / cover no-repeat var(--banner-url, transparent);
|
||||||
height: 13vw;
|
block-size: 13vw;
|
||||||
min-height: 110px;
|
min-block-size: 110px;
|
||||||
max-height: 32vh;
|
max-block-size: 32vh;
|
||||||
width: 100%;
|
inline-size: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.channelBannerContainer.default {
|
.channelBannerContainer.default {
|
||||||
|
@ -37,7 +37,7 @@
|
||||||
.channelInfo {
|
.channelInfo {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-flow: row wrap;
|
flex-flow: row wrap;
|
||||||
width: 100%;
|
inline-size: 100%;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -46,8 +46,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.channelThumbnail {
|
.channelThumbnail {
|
||||||
width: 100px;
|
inline-size: 100px;
|
||||||
height: 100px;
|
block-size: 100px;
|
||||||
border-radius: 200px;
|
border-radius: 200px;
|
||||||
-webkit-border-radius: 200px;
|
-webkit-border-radius: 200px;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
|
@ -55,7 +55,7 @@
|
||||||
|
|
||||||
.channelName {
|
.channelName {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
width: 100%;
|
inline-size: 100%;
|
||||||
font-size: 25px;
|
font-size: 25px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -76,7 +76,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.channelSearch {
|
.channelSearch {
|
||||||
width: 220px;
|
inline-size: 220px;
|
||||||
margin-inline-start: auto;
|
margin-inline-start: auto;
|
||||||
align-self: flex-end;
|
align-self: flex-end;
|
||||||
flex: 1 1 0%;
|
flex: 1 1 0%;
|
||||||
|
@ -88,8 +88,8 @@
|
||||||
|
|
||||||
.channelInfoTabs {
|
.channelInfoTabs {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
inline-size: 100%;
|
||||||
height: auto;
|
block-size: auto;
|
||||||
justify-content: unset;
|
justify-content: unset;
|
||||||
gap: 32px;
|
gap: 32px;
|
||||||
padding-block: .3em;
|
padding-block: .3em;
|
||||||
|
@ -127,7 +127,7 @@
|
||||||
|
|
||||||
.channelSearch {
|
.channelSearch {
|
||||||
margin-block-start: 10px;
|
margin-block-start: 10px;
|
||||||
max-width: 250px;
|
max-inline-size: 250px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.elementListLoading {
|
.elementListLoading {
|
||||||
|
@ -140,8 +140,8 @@
|
||||||
|
|
||||||
.getNextPage {
|
.getNextPage {
|
||||||
background-color: var(--search-bar-color);
|
background-color: var(--search-bar-color);
|
||||||
width: 100%;
|
inline-size: 100%;
|
||||||
height: 45px;
|
block-size: 45px;
|
||||||
line-height: 45px;
|
line-height: 45px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
@ -168,8 +168,8 @@
|
||||||
/* stylelint-disable-next-line property-no-vendor-prefix */
|
/* stylelint-disable-next-line property-no-vendor-prefix */
|
||||||
-webkit-border-radius: 200px;
|
-webkit-border-radius: 200px;
|
||||||
border-radius: 200px;
|
border-radius: 200px;
|
||||||
height: 12%;
|
block-size: 12%;
|
||||||
width: 12%;
|
inline-size: 12%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ft-community-image {
|
.ft-community-image {
|
||||||
|
@ -185,13 +185,13 @@
|
||||||
|
|
||||||
@media only screen and (max-width: 800px) {
|
@media only screen and (max-width: 800px) {
|
||||||
.channelInfoTabs {
|
.channelInfoTabs {
|
||||||
height: auto;
|
block-size: auto;
|
||||||
flex-flow: column-reverse;
|
flex-flow: column-reverse;
|
||||||
}
|
}
|
||||||
|
|
||||||
.channelSearch {
|
.channelSearch {
|
||||||
width: 100%;
|
inline-size: 100%;
|
||||||
max-width: none;
|
max-inline-size: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tabs {
|
.tabs {
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
.getNextPage {
|
.getNextPage {
|
||||||
background-color: var(--search-bar-color);
|
background-color: var(--search-bar-color);
|
||||||
width: 100%;
|
inline-size: 100%;
|
||||||
height: 45px;
|
block-size: 45px;
|
||||||
line-height: 45px;
|
line-height: 45px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
@ -16,11 +16,11 @@
|
||||||
.card {
|
.card {
|
||||||
margin-block: 0 20px;
|
margin-block: 0 20px;
|
||||||
margin-inline: auto;
|
margin-inline: auto;
|
||||||
width: 85%;
|
inline-size: 85%;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: 680px) {
|
@media only screen and (max-width: 680px) {
|
||||||
.card {
|
.card {
|
||||||
width: 90%;
|
inline-size: 90%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
.card {
|
.card {
|
||||||
width: 85%;
|
inline-size: 85%;
|
||||||
margin-block: 0 60px;
|
margin-block: 0 60px;
|
||||||
margin-inline: auto;
|
margin-inline: auto;
|
||||||
}
|
}
|
||||||
|
@ -10,6 +10,6 @@
|
||||||
|
|
||||||
@media only screen and (max-width: 680px) {
|
@media only screen and (max-width: 680px) {
|
||||||
.card {
|
.card {
|
||||||
width: 90%;
|
inline-size: 90%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -5,13 +5,13 @@
|
||||||
.playlistInfo {
|
.playlistInfo {
|
||||||
background-color: var(--card-bg-color);
|
background-color: var(--card-bg-color);
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
height: calc(100vh - 132px);
|
block-size: calc(100vh - 132px);
|
||||||
margin-inline-end: 1em;
|
margin-inline-end: 1em;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
position: sticky;
|
position: sticky;
|
||||||
inset-block-start: 96px;
|
inset-block-start: 96px;
|
||||||
width: 30%;
|
inline-size: 30%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.playlistItems {
|
.playlistItems {
|
||||||
|
@ -20,7 +20,7 @@
|
||||||
grid-gap: 10px;
|
grid-gap: 10px;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
width: 60%;
|
inline-size: 60%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.playlistItem {
|
.playlistItem {
|
||||||
|
@ -36,7 +36,7 @@
|
||||||
|
|
||||||
.loadNextPageWrapper {
|
.loadNextPageWrapper {
|
||||||
/* about the same height as the button */
|
/* about the same height as the button */
|
||||||
max-height: 7vh;
|
max-block-size: 7vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.videoThumbnail) {
|
:deep(.videoThumbnail) {
|
||||||
|
@ -45,7 +45,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.thumbnailImage) {
|
:deep(.thumbnailImage) {
|
||||||
max-width: 25vw;
|
max-inline-size: 25vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: 850px) {
|
@media only screen and (max-width: 850px) {
|
||||||
|
@ -57,16 +57,16 @@
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
position: relative;
|
position: relative;
|
||||||
inset-block-start: 0;
|
inset-block-start: 0;
|
||||||
height: auto;
|
block-size: auto;
|
||||||
width: 100%;
|
inline-size: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.playlistItems {
|
.playlistItems {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
width: 100%;
|
inline-size: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.thumbnailImage) {
|
:deep(.thumbnailImage) {
|
||||||
max-width: 35vw;
|
max-inline-size: 35vw;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
.card {
|
.card {
|
||||||
width: 85%;
|
inline-size: 85%;
|
||||||
margin-block: 0 60px;
|
margin-block: 0 60px;
|
||||||
margin-inline: auto;
|
margin-inline: auto;
|
||||||
}
|
}
|
||||||
|
@ -18,6 +18,6 @@
|
||||||
|
|
||||||
@media only screen and (max-width: 680px) {
|
@media only screen and (max-width: 680px) {
|
||||||
.card {
|
.card {
|
||||||
width: 90%;
|
inline-size: 90%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
.card {
|
.card {
|
||||||
width: 85%;
|
inline-size: 85%;
|
||||||
margin-block: 0 60px;
|
margin-block: 0 60px;
|
||||||
margin-inline: auto;
|
margin-inline: auto;
|
||||||
}
|
}
|
||||||
|
@ -9,13 +9,13 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.profileList {
|
.profileList {
|
||||||
max-width: 1000px;
|
max-inline-size: 1000px;
|
||||||
margin-block: 0 10px;
|
margin-block: 0 10px;
|
||||||
margin-inline: auto;
|
margin-inline: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: 680px) {
|
@media only screen and (max-width: 680px) {
|
||||||
.card {
|
.card {
|
||||||
width: 90%;
|
inline-size: 90%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
.getNextPage {
|
.getNextPage {
|
||||||
background-color: var(--search-bar-color);
|
background-color: var(--search-bar-color);
|
||||||
width: 100%;
|
inline-size: 100%;
|
||||||
height: 45px;
|
block-size: 45px;
|
||||||
line-height: 45px;
|
line-height: 45px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
@ -14,13 +14,13 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.card {
|
.card {
|
||||||
width: 85%;
|
inline-size: 85%;
|
||||||
margin-block: 0 60px;
|
margin-block: 0 60px;
|
||||||
margin-inline: auto;
|
margin-inline: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: 680px) {
|
@media only screen and (max-width: 680px) {
|
||||||
.card {
|
.card {
|
||||||
width: 90%;
|
inline-size: 90%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
hr {
|
hr {
|
||||||
height: 2px;
|
block-size: 2px;
|
||||||
width: 85%;
|
inline-size: 85%;
|
||||||
margin-block: 0;
|
margin-block: 0;
|
||||||
margin-inline: auto;
|
margin-inline: auto;
|
||||||
border: 0;
|
border: 0;
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
.card {
|
.card {
|
||||||
width: 85%;
|
inline-size: 85%;
|
||||||
margin-block: 0 60px;
|
margin-block: 0 60px;
|
||||||
margin-inline: auto;
|
margin-inline: auto;
|
||||||
}
|
}
|
||||||
|
@ -13,7 +13,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.channels {
|
.channels {
|
||||||
width: 100%;
|
inline-size: 100%;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr) );
|
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr) );
|
||||||
gap: 2.5rem;
|
gap: 2.5rem;
|
||||||
|
@ -35,7 +35,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.channelThumbnail {
|
.channelThumbnail {
|
||||||
height: 120px;
|
block-size: 120px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -48,7 +48,7 @@
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
overflow-wrap: break-word;
|
overflow-wrap: break-word;
|
||||||
width: 100%;
|
inline-size: 100%;
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
-webkit-line-clamp: 3;
|
-webkit-line-clamp: 3;
|
||||||
-webkit-box-orient: vertical;
|
-webkit-box-orient: vertical;
|
||||||
|
@ -63,12 +63,12 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.unsubscribeContainer .btn {
|
.unsubscribeContainer .btn {
|
||||||
height: 80%;
|
block-size: 80%;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: 680px) {
|
@media only screen and (max-width: 680px) {
|
||||||
.card {
|
.card {
|
||||||
width: 90%;
|
inline-size: 90%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.channels {
|
.channels {
|
||||||
|
@ -76,6 +76,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.channelThumbnail {
|
.channelThumbnail {
|
||||||
height: 80px;
|
block-size: 80px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
.card {
|
.card {
|
||||||
width: 85%;
|
inline-size: 85%;
|
||||||
margin-block: 0 60px;
|
margin-block: 0 60px;
|
||||||
margin-inline: auto;
|
margin-inline: auto;
|
||||||
}
|
}
|
||||||
|
@ -9,7 +9,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.subscriptionTabs {
|
.subscriptionTabs {
|
||||||
width: 100%;
|
inline-size: 100%;
|
||||||
margin-block-start: -3px;
|
margin-block-start: -3px;
|
||||||
color: var(--tertiary-text-color);
|
color: var(--tertiary-text-color);
|
||||||
margin-block-end: 10px;
|
margin-block-end: 10px;
|
||||||
|
@ -37,6 +37,6 @@
|
||||||
|
|
||||||
@media only screen and (max-width: 680px) {
|
@media only screen and (max-width: 680px) {
|
||||||
.card {
|
.card {
|
||||||
width: 90%;
|
inline-size: 90%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
.card {
|
.card {
|
||||||
width: 85%;
|
inline-size: 85%;
|
||||||
margin-block: 0 60px;
|
margin-block: 0 60px;
|
||||||
margin-inline: auto;
|
margin-inline: auto;
|
||||||
}
|
}
|
||||||
|
@ -11,7 +11,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.trendingInfoTabs {
|
.trendingInfoTabs {
|
||||||
width: 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-start: -3px;
|
||||||
|
@ -47,6 +47,6 @@
|
||||||
|
|
||||||
@media only screen and (max-width: 680px) {
|
@media only screen and (max-width: 680px) {
|
||||||
.card {
|
.card {
|
||||||
width: 90%;
|
inline-size: 90%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
.card {
|
.card {
|
||||||
width: 85%;
|
inline-size: 85%;
|
||||||
margin-block: 0 60px;
|
margin-block: 0 60px;
|
||||||
margin-inline: auto;
|
margin-inline: auto;
|
||||||
}
|
}
|
||||||
|
@ -10,6 +10,6 @@
|
||||||
|
|
||||||
@media only screen and (max-width: 680px) {
|
@media only screen and (max-width: 680px) {
|
||||||
.card {
|
.card {
|
||||||
width: 90%;
|
inline-size: 90%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -14,10 +14,10 @@
|
||||||
@include single-column-template;
|
@include single-column-template;
|
||||||
|
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
max-width: calc(80vh * 1.78);
|
max-inline-size: calc(80vh * 1.78);
|
||||||
|
|
||||||
@media only screen and (min-width: 901px) {
|
@media only screen and (min-width: 901px) {
|
||||||
width: 300%;
|
inline-size: 300%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -42,12 +42,13 @@
|
||||||
|
|
||||||
.videoPlayer {
|
.videoPlayer {
|
||||||
grid-column: 1;
|
grid-column: 1;
|
||||||
margin: 0 auto;
|
margin-block: 0;
|
||||||
max-width: calc(80vh * 1.78);
|
margin-inline: auto;
|
||||||
|
max-inline-size: calc(80vh * 1.78);
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
.upcomingThumbnail {
|
.upcomingThumbnail {
|
||||||
width: 100%;
|
inline-size: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.premiereDate {
|
.premiereDate {
|
||||||
|
@ -57,7 +58,7 @@
|
||||||
inset-block-end: 12px;
|
inset-block-end: 12px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
display: flex;
|
display: flex;
|
||||||
height: 60px;
|
block-size: 60px;
|
||||||
inset-inline-start: 12px;
|
inset-inline-start: 12px;
|
||||||
padding-block: 0;
|
padding-block: 0;
|
||||||
padding-inline: 12px;
|
padding-inline: 12px;
|
||||||
|
@ -73,7 +74,7 @@
|
||||||
.premiereText {
|
.premiereText {
|
||||||
margin-block: 0;
|
margin-block: 0;
|
||||||
margin-inline: 12px;
|
margin-inline: 12px;
|
||||||
min-width: 200px;
|
min-inline-size: 200px;
|
||||||
|
|
||||||
.premiereTextTimestamp {
|
.premiereTextTimestamp {
|
||||||
font-size: 0.85em;
|
font-size: 0.85em;
|
||||||
|
@ -99,7 +100,7 @@
|
||||||
grid-area: sidebar;
|
grid-area: sidebar;
|
||||||
|
|
||||||
@media only screen and (min-width: 901px) {
|
@media only screen and (min-width: 901px) {
|
||||||
min-width: 380px;
|
min-inline-size: 380px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@at-root .noSidebar#{&} {
|
@at-root .noSidebar#{&} {
|
||||||
|
@ -116,7 +117,7 @@
|
||||||
|
|
||||||
.watchVideoSidebar,
|
.watchVideoSidebar,
|
||||||
.watchVideoPlaylist {
|
.watchVideoPlaylist {
|
||||||
height: 500px;
|
block-size: 500px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.watchVideoPlaylist {
|
.watchVideoPlaylist {
|
||||||
|
@ -125,7 +126,7 @@
|
||||||
margin-block-end: auto;
|
margin-block-end: auto;
|
||||||
}
|
}
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
height: auto;
|
block-size: auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -7874,6 +7874,11 @@ stylelint-scss@^4.4.0:
|
||||||
postcss-selector-parser "^6.0.11"
|
postcss-selector-parser "^6.0.11"
|
||||||
postcss-value-parser "^4.2.0"
|
postcss-value-parser "^4.2.0"
|
||||||
|
|
||||||
|
stylelint-use-logical-spec@^5.0.0:
|
||||||
|
version "5.0.0"
|
||||||
|
resolved "https://registry.yarnpkg.com/stylelint-use-logical-spec/-/stylelint-use-logical-spec-5.0.0.tgz#5903e38ea37cb4277ea4f7d29e9a997772afab5f"
|
||||||
|
integrity sha512-uLF876lrsGVWFPQ8haGhfDfsTyAzPoJq2AAExuSzE2V1uC8uCmuy6S66NseiEwcf0AGqWzS56kPVzF/hVvWIjA==
|
||||||
|
|
||||||
stylelint@^15.10.3:
|
stylelint@^15.10.3:
|
||||||
version "15.10.3"
|
version "15.10.3"
|
||||||
resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-15.10.3.tgz#995e4512fdad450fb83e13f3472001f6edb6469c"
|
resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-15.10.3.tgz#995e4512fdad450fb83e13f3472001f6edb6469c"
|
||||||
|
|
Loading…
Reference in New Issue