lasers
/
FreeTube
mirror of https://github.com/FreeTubeApp/FreeTube
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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:
Jason 2023-09-14 00:22:33 +00:00 committed by GitHub
parent d6fd7bec33
commit 3db6f437c9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
69 changed files with 374 additions and 373 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
.stylelintrc.json
View File

@ -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
} }
} }

7
lefthook.yml
View File

@ -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
View File

@ -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",

8
src/renderer/App.css
View File

@ -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;
} }

2
src/renderer/components/download-settings/download-settings.css
View File

@ -1,3 +1,3 @@
.folderDisplay { .folderDisplay {
width: 50vh; inline-size: 50vh;
} }

6
src/renderer/components/ft-age-restricted/ft-age-restricted.scss
View File

@ -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%;
} }
} }

6
src/renderer/components/ft-button/ft-button.css
View File

@ -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;

10
src/renderer/components/ft-channel-bubble/ft-channel-bubble.css
View File

@ -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%;
} }

8
src/renderer/components/ft-community-poll/ft-community-poll.css
View File

@ -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 {

32
src/renderer/components/ft-community-post/ft-community-post.scss
View File

@ -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;
} }

4
src/renderer/components/ft-community-post/slider-style.css
View File

@ -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;
} }

2
src/renderer/components/ft-element-list/ft-element-list.css
View File

@ -1,3 +1,3 @@
.maxWidth { .maxWidth {
width: 100%; inline-size: 100%;
} }

6
src/renderer/components/ft-icon-button/ft-icon-button.scss
View File

@ -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
src/renderer/components/ft-input-tags/ft-input-tags.css
View File

@ -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%;
} }
} }

6
src/renderer/components/ft-input/ft-input.css
View File

@ -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;

4
src/renderer/components/ft-list-lazy-wrapper/ft-list-lazy-wrapper.css
View File

@ -1,7 +1,7 @@
.grid { .grid {
min-height: 264px; min-block-size: 264px;
} }
.list { .list {
min-height: 131px; min-block-size: 131px;
} }

2
src/renderer/components/ft-list-video/ft-list-video.vue
View File

@ -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">

14
src/renderer/components/ft-loader/ft-loader.css
View File

@ -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;

8
src/renderer/components/ft-profile-bubble/ft-profile-bubble.css
View File

@ -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%;

2
src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.css
View File

@ -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;
} }

12
src/renderer/components/ft-profile-edit/ft-profile-edit.css
View File

@ -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%;
} }
} }

4
src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.css
View File

@ -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) {

14
src/renderer/components/ft-profile-selector/ft-profile-selector.css
View File

@ -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;
} }

4
src/renderer/components/ft-progress-bar/ft-progress-bar.css
View File

@ -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;
} }

2
src/renderer/components/ft-progress-bar/ft-progress-bar.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div <div
class="progressBar" class="progressBar"
:style="{ width: progressBarPercentage + '%' }" :style="{ inlineSize: progressBarPercentage + '%' }"
/> />
</template> </template>

8
src/renderer/components/ft-prompt/ft-prompt.css
View File

@ -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%;

16
src/renderer/components/ft-radio-button/ft-radio-button.css
View File

@ -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;

6
src/renderer/components/ft-search-filters/ft-search-filters.css
View File

@ -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;
} }

22
src/renderer/components/ft-select/ft-select.css
View File

@ -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%;
} }
} }

10
src/renderer/components/ft-settings-section/ft-settings-section.scss
View File

@ -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 {

12
src/renderer/components/ft-share-button/ft-share-button.scss
View File

@ -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 &,

38
src/renderer/components/ft-slider/ft-slider.css
View File

@ -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%;
} }
} }

2
src/renderer/components/ft-sponsor-block-category/ft-sponsor-block-category.scss
View File

@ -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 {

4
src/renderer/components/ft-subscribe-button/ft-subscribe-button.css
View File

@ -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;
} }

14
src/renderer/components/ft-toggle-switch/ft-toggle-switch.scss
View File

@ -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;
} }
} }

4
src/renderer/components/ft-tooltip/ft-tooltip.css
View File

@ -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;

8
src/renderer/components/ft-video-player/ft-video-player.css
View File

@ -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 */

8
src/renderer/components/general-settings/general-settings.css
View File

@ -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;
} }

4
src/renderer/components/password-dialog/password-dialog.css
View File

@ -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%;
} }

2
src/renderer/components/player-settings/player-settings.scss
View File

@ -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,

12
src/renderer/components/playlist-info/playlist-info.scss
View File

@ -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 {

16
src/renderer/components/side-nav-more-options/side-nav-more-options.css
View File

@ -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;
} }
} }

50
src/renderer/components/side-nav/side-nav.css
View File

@ -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%;
} }
} }

4
src/renderer/components/subscriptions-tab-ui/subscriptions-tab-ui.css
View File

@ -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%;
} }
} }

18
src/renderer/components/top-nav/top-nav.scss
View File

@ -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;

8
src/renderer/components/watch-video-chapters/watch-video-chapters.css
View File

@ -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;
} }

35
src/renderer/components/watch-video-comments/watch-video-comments.css
View File

@ -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;
} }

2
src/renderer/components/watch-video-description/watch-video-description.css
View File

@ -1,6 +1,6 @@
.videoDescription { .videoDescription {
overflow-y: auto; overflow-y: auto;
max-height: 300px; max-block-size: 300px;
} }
.description { .description {

9
src/renderer/components/watch-video-info/watch-video-info.scss
View File

@ -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;
} }

40
src/renderer/components/watch-video-live-chat/watch-video-live-chat.css
View File

@ -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;

2
src/renderer/components/watch-video-live-chat/watch-video-live-chat.vue
View File

@ -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

6
src/renderer/components/watch-video-playlist/watch-video-playlist.css
View File

@ -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 {

22
src/renderer/scss-partials/_ft-list-item.scss
View File

@ -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%;
} }
} }

6
src/renderer/themes.css
View File

@ -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 {

10
src/renderer/views/About/About.scss
View File

@ -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;

42
src/renderer/views/Channel/Channel.css
View File

@ -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 {

8
src/renderer/views/Hashtag/Hashtag.css
View File

@ -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%;
} }
} }

4
src/renderer/views/History/History.css
View File

@ -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%;
} }
} }

18
src/renderer/views/Playlist/Playlist.css
View File

@ -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;
} }
} }

4
src/renderer/views/Popular/Popular.css
View File

@ -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%;
} }
} }

6
src/renderer/views/ProfileSettings/ProfileSettings.css
View File

@ -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%;
} }
} }

8
src/renderer/views/Search/Search.css
View File

@ -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%;
} }
} }

4
src/renderer/views/Settings/Settings.css
View File

@ -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;

14
src/renderer/views/SubscribedChannels/SubscribedChannels.css
View File

@ -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;
} }
} }

6
src/renderer/views/Subscriptions/Subscriptions.css
View File

@ -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%;
} }
} }

6
src/renderer/views/Trending/Trending.css
View File

@ -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%;
} }
} }

4
src/renderer/views/UserPlaylists/UserPlaylists.css
View File

@ -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%;
} }
} }

21
src/renderer/views/Watch/Watch.scss
View File

@ -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;
} }
} }

5
yarn.lock
View File

@ -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"