diff --git a/src/renderer/components/ft-loader/ft-loader.css b/src/renderer/components/ft-loader/ft-loader.css
index 538b43ee85acb..6dabd908c82ac 100644
--- a/src/renderer/components/ft-loader/ft-loader.css
+++ b/src/renderer/components/ft-loader/ft-loader.css
@@ -19,14 +19,14 @@
display: flex;
justify-content: center;
align-items: center;
- width: 100%;
- height: 100%;
+ inline-size: 100%;
+ block-size: 100%;
padding: 0;
margin: 0;
}
.fullscreen {
- height: 85vh;
+ block-size: 85vh;
}
/*
@@ -36,8 +36,8 @@
*/
.spinner {
- width: 40px;
- height: 40px;
+ inline-size: 40px;
+ block-size: 40px;
position: relative;
margin-block: 100px;
margin-inline: auto;
@@ -45,8 +45,8 @@
.double-bounce1,
.double-bounce2 {
- width: 100%;
- height: 100%;
+ inline-size: 100%;
+ block-size: 100%;
border-radius: 50%;
opacity: 0.6;
position: absolute;
diff --git a/src/renderer/components/ft-profile-bubble/ft-profile-bubble.css b/src/renderer/components/ft-profile-bubble/ft-profile-bubble.css
index c5d0a6afd3666..a3266e01b7c1d 100644
--- a/src/renderer/components/ft-profile-bubble/ft-profile-bubble.css
+++ b/src/renderer/components/ft-profile-bubble/ft-profile-bubble.css
@@ -1,6 +1,6 @@
.bubblePadding {
- width: 100px;
- height: 115px;
+ inline-size: 100px;
+ block-size: 115px;
padding-block: 10px 30px;
padding-inline: 10px;
cursor: pointer;
@@ -19,8 +19,8 @@
}
.bubble {
- width: 70px;
- height: 70px;
+ inline-size: 70px;
+ block-size: 70px;
margin-block: 20px 5px;
margin-inline: auto;
border-radius: 50%;
diff --git a/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.css b/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.css
index 4beaf2f6b792f..9071f57d38cc2 100644
--- a/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.css
+++ b/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.css
@@ -1,5 +1,5 @@
.card {
- width: 85%;
+ inline-size: 85%;
margin-block: 0 15px;
margin-inline: auto;
}
diff --git a/src/renderer/components/ft-profile-edit/ft-profile-edit.css b/src/renderer/components/ft-profile-edit/ft-profile-edit.css
index c72cf594982c9..dc77c5077ecfb 100644
--- a/src/renderer/components/ft-profile-edit/ft-profile-edit.css
+++ b/src/renderer/components/ft-profile-edit/ft-profile-edit.css
@@ -1,5 +1,5 @@
.card {
- width: 85%;
+ inline-size: 85%;
margin-block: 0 15px;
margin-inline: auto;
}
@@ -9,7 +9,7 @@
}
.profileName {
- width: 400px;
+ inline-size: 400px;
}
.bottomMargin {
@@ -17,14 +17,14 @@
}
.colorOptions {
- max-width: 1000px;
+ max-inline-size: 1000px;
margin-block: 0 30px;
margin-inline: auto;
}
.colorOption {
- width: 100px;
- height: 100px;
+ inline-size: 100px;
+ block-size: 100px;
margin: 10px;
cursor: pointer;
border-radius: 50%;
@@ -43,6 +43,6 @@
@media only screen and (max-width: 680px) {
.card {
- width: 90%;
+ inline-size: 90%;
}
}
diff --git a/src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.css b/src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.css
index 8a902e94724c8..966b1fa8cfc4d 100644
--- a/src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.css
+++ b/src/renderer/components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.css
@@ -1,5 +1,5 @@
.card {
- width: 85%;
+ inline-size: 85%;
margin-block: 0 30px;
margin-inline: auto;
}
@@ -9,7 +9,7 @@
}
:deep(.select-label) {
- width: 95%;
+ inline-size: 95%;
}
:deep(.select) {
diff --git a/src/renderer/components/ft-profile-selector/ft-profile-selector.css b/src/renderer/components/ft-profile-selector/ft-profile-selector.css
index 0c2b2acf1536f..94ee6e91d376e 100644
--- a/src/renderer/components/ft-profile-selector/ft-profile-selector.css
+++ b/src/renderer/components/ft-profile-selector/ft-profile-selector.css
@@ -1,6 +1,6 @@
.colorOption {
- width: 40px;
- height: 40px;
+ inline-size: 40px;
+ block-size: 40px;
cursor: pointer;
align-items: center;
display: flex;
@@ -26,8 +26,8 @@
position: absolute;
inset-block-start: 60px;
inset-inline-end: 10px;
- min-width: 250px;
- height: 400px;
+ min-inline-size: 250px;
+ block-size: 400px;
padding: 5px;
background-color: var(--card-bg-color);
box-shadow: 0 0 4px var(--scrollbar-color-hover);
@@ -35,13 +35,13 @@
.profileWrapper {
margin-block-start: 60px;
- height: 340px;
+ block-size: 340px;
overflow-y: auto;
}
.profile {
cursor: pointer;
- height: 50px;
+ block-size: 50px;
-webkit-transition: background 0.2s ease-out;
-moz-transition: background 0.2s ease-out;
-o-transition: background 0.2s ease-out;
@@ -66,7 +66,7 @@
.profileName {
display: flex;
align-items: center;
- height: 50px;
+ block-size: 50px;
padding-inline-end: 10px;
}
diff --git a/src/renderer/components/ft-progress-bar/ft-progress-bar.css b/src/renderer/components/ft-progress-bar/ft-progress-bar.css
index 8dc334371cfbe..6f14df5af8311 100644
--- a/src/renderer/components/ft-progress-bar/ft-progress-bar.css
+++ b/src/renderer/components/ft-progress-bar/ft-progress-bar.css
@@ -1,9 +1,9 @@
.progressBar {
position: fixed;
- height: 3px;
+ block-size: 3px;
inset-block-end: 0px;
inset-inline-start: 0px;
background-color: var(--primary-color);
z-index: 1;
- transition: width 0.5s;
+ transition: inline-size 0.5s;
}
diff --git a/src/renderer/components/ft-progress-bar/ft-progress-bar.vue b/src/renderer/components/ft-progress-bar/ft-progress-bar.vue
index dbbe9a3f4d51c..28d835b2f3652 100644
--- a/src/renderer/components/ft-progress-bar/ft-progress-bar.vue
+++ b/src/renderer/components/ft-progress-bar/ft-progress-bar.vue
@@ -1,7 +1,7 @@
diff --git a/src/renderer/components/ft-prompt/ft-prompt.css b/src/renderer/components/ft-prompt/ft-prompt.css
index aa0714d882992..33aa83a50522f 100644
--- a/src/renderer/components/ft-prompt/ft-prompt.css
+++ b/src/renderer/components/ft-prompt/ft-prompt.css
@@ -2,8 +2,8 @@
position: fixed;
inset-block-start: 0;
inset-inline-start: 0;
- width: 100vw;
- height: 100vh;
+ inline-size: 100vw;
+ block-size: 100vh;
background-color: rgba(0, 0, 0, 0.7);
/* Higher than components like playlist info */
z-index: 200;
@@ -18,11 +18,11 @@
box-sizing: border-box;
margin-block: 0;
margin-inline: auto;
- max-width: 95%;
+ max-inline-size: 95%;
}
.promptCard:not(.autosize) {
- width: 95%;
+ inline-size: 95%;
margin: 0;
position: absolute;
inset-inline-start: 2.5%;
diff --git a/src/renderer/components/ft-radio-button/ft-radio-button.css b/src/renderer/components/ft-radio-button/ft-radio-button.css
index 670616ecb077e..4efd5aeab7f1b 100644
--- a/src/renderer/components/ft-radio-button/ft-radio-button.css
+++ b/src/renderer/components/ft-radio-button/ft-radio-button.css
@@ -1,12 +1,12 @@
pure-checkbox input[type="checkbox"], .pure-radiobutton input[type="checkbox"], .pure-checkbox input[type="radio"], .pure-radiobutton input[type="radio"] {
border: 0;
clip: rect(0 0 0 0);
- height: 1px;
+ block-size: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
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 {
@@ -33,8 +33,8 @@ pure-checkbox input[type="checkbox"], .pure-radiobutton input[type="checkbox"],
position: absolute;
inset-block-start: 50%;
inset-inline-start: 0;
- width: 14px;
- height: 14px;
+ inline-size: 14px;
+ block-size: 14px;
margin-block-start: -9px;
border: 2px solid var(--primary-color);
text-align: center;
@@ -48,8 +48,8 @@ pure-checkbox input[type="checkbox"], .pure-radiobutton input[type="checkbox"],
position: absolute;
inset-block-start: 50%;
inset-inline-start: 4px;
- width: 10px;
- height: 10px;
+ inline-size: 10px;
+ block-size: 10px;
margin-block-start: -5px;
transform: scale(0);
transform-origin: 50%;
@@ -66,8 +66,8 @@ pure-checkbox input[type="checkbox"], .pure-radiobutton input[type="checkbox"],
background-color: transparent;
inset-block-start: 50%;
inset-inline-start: 4px;
- width: 8px;
- height: 3px;
+ inline-size: 8px;
+ block-size: 3px;
margin-block-start: -4px;
border-style: solid;
border-width: 0 0 3px 3px;
diff --git a/src/renderer/components/ft-search-filters/ft-search-filters.css b/src/renderer/components/ft-search-filters/ft-search-filters.css
index 0159e28feffff..cb31aba278150 100644
--- a/src/renderer/components/ft-search-filters/ft-search-filters.css
+++ b/src/renderer/components/ft-search-filters/ft-search-filters.css
@@ -1,11 +1,11 @@
.searchFilterInner {
- max-width: 800px;
+ max-inline-size: 800px;
margin-inline-start: auto;
margin-inline-end: auto;
padding-block: 20px 70px;
padding-inline: 20px;
- max-height: 410px;
+ max-block-size: 410px;
overflow-y: auto;
background-color: var(--card-bg-color);
@@ -23,7 +23,7 @@
}
.radioFlexBox {
- max-width: 1000px;
+ max-inline-size: 1000px;
margin-block: 0;
margin-inline: auto;
}
diff --git a/src/renderer/components/ft-select/ft-select.css b/src/renderer/components/ft-select/ft-select.css
index 67a822bbf7775..ca723b30da898 100644
--- a/src/renderer/components/ft-select/ft-select.css
+++ b/src/renderer/components/ft-select/ft-select.css
@@ -23,7 +23,7 @@
/* select starting stylings ------------------------------*/
.select {
position: relative;
- width: 200px;
+ inline-size: 200px;
padding-block: 0 10px;
padding-inline: 0 10px;
margin-block-start: 30px;
@@ -39,7 +39,7 @@
font-family: inherit;
background-color: transparent;
color: var(--primary-text-color);
- width: 240px;
+ inline-size: 240px;
padding-block: 10px;
padding-inline: 0 10px;
font-size: 18px;
@@ -108,13 +108,13 @@
.select-bar {
position: relative;
display: block;
- width: 200px;
+ inline-size: 200px;
}
.select-bar:before, .select-bar:after {
content: '';
- height: 2px;
- width: 0;
+ block-size: 2px;
+ inline-size: 0;
inset-block-end: 1px;
position: absolute;
background: var(--accent-color);
@@ -131,14 +131,14 @@
/* active state */
.select-text:focus ~ .select-bar:before, .select-text:focus ~ .select-bar:after {
- width: 50%;
+ inline-size: 50%;
}
/* HIGHLIGHTER ================================== */
.select-highlight {
position: absolute;
- height: 60%;
- width: 100px;
+ block-size: 60%;
+ inline-size: 100px;
inset-block-start: 25%;
inset-inline-start: 0;
pointer-events: none;
@@ -147,17 +147,17 @@
@media only screen and (max-width: 1000px) {
.select .select-text {
- max-width: 240px;
+ max-inline-size: 240px;
}
}
@media only screen and (max-width: 800px) {
.select {
- width: 100%;
+ inline-size: 100%;
}
.select .select-text {
display:block;
- max-width: 95%;
+ max-inline-size: 95%;
}
}
diff --git a/src/renderer/components/ft-settings-section/ft-settings-section.scss b/src/renderer/components/ft-settings-section/ft-settings-section.scss
index 9fa31bcf8cf44..8c1399109940b 100644
--- a/src/renderer/components/ft-settings-section/ft-settings-section.scss
+++ b/src/renderer/components/ft-settings-section/ft-settings-section.scss
@@ -2,10 +2,10 @@
background-color: var(--card-bg-color);
margin-block: 0;
margin-inline: auto;
- width: 85%;
+ inline-size: 85%;
@media only screen and (max-width: 800px) {
- width: 100%;
+ inline-size: 100%;
}
&[open] {
@@ -16,7 +16,7 @@
box-sizing: border-box;
padding-block: 0;
padding-inline: 20px;
- width: 100%;
+ inline-size: 100%;
}
> div:not(:last-child, .ft-flex-box) {
@@ -29,9 +29,9 @@
.sectionLine {
background-color: var(--primary-color);
border: 0;
- height: 2px;
+ block-size: 2px;
margin-block-start: -1px;
- width: 100%;
+ inline-size: 100%;
}
.sectionHeader {
diff --git a/src/renderer/components/ft-share-button/ft-share-button.scss b/src/renderer/components/ft-share-button/ft-share-button.scss
index 982767c7e26fa..be150d7dbdf8b 100644
--- a/src/renderer/components/ft-share-button/ft-share-button.scss
+++ b/src/renderer/components/ft-share-button/ft-share-button.scss
@@ -3,7 +3,7 @@
grid-auto-flow: column;
grid-template-rows: auto auto;
padding: 12px;
- width: max-content;
+ inline-size: max-content;
.header {
color: var(--primary-text-color);
@@ -27,12 +27,12 @@
grid-row: span 3;
margin-block: 0;
margin-inline: 12px;
- width: 1px;
+ inline-size: 1px;
}
.youtubeLogo {
- height: 18px;
- width: auto;
+ block-size: 18px;
+ inline-size: auto;
@at-root {
.dark &,
@@ -62,9 +62,9 @@
.invidiousLogo {
background-size: cover;
display: inline-block;
- height: 20px;
+ block-size: 20px;
margin-inline-end: 2px;
- width: 20px;
+ inline-size: 20px;
@at-root {
.dark &,
diff --git a/src/renderer/components/ft-slider/ft-slider.css b/src/renderer/components/ft-slider/ft-slider.css
index 501d1cddac0c4..a71a5a90c3841 100644
--- a/src/renderer/components/ft-slider/ft-slider.css
+++ b/src/renderer/components/ft-slider/ft-slider.css
@@ -4,7 +4,7 @@
--pure-material-safari-helper3: var(--accent-color-opacity3);
--pure-material-safari-helper4: var(--accent-color-opacity4);
display: inline-block;
- width: 380px;
+ inline-size: 380px;
color: rgba(var(--primary-text-color), 0.87);
font-family: var(--pure-material-font, "Roboto", "Segoe UI", BlinkMacSystemFont, system-ui, -apple-system);
font-size: 16px;
@@ -22,8 +22,8 @@
display: block;
margin-block: 0 -36px;
margin-inline: 0;
- width: 100%;
- height: 36px;
+ inline-size: 100%;
+ block-size: 36px;
background-color: transparent;
cursor: pointer;
}
@@ -60,8 +60,8 @@
margin-block: 17px;
margin-inline: 0;
border-radius: 1px;
- width: 100%;
- height: 2px;
+ inline-size: 100%;
+ block-size: 2px;
background-color: var(--accent-color-opacity4);
}
@@ -71,8 +71,8 @@
-webkit-appearance: none;
border: none;
border-radius: 50%;
- height: 2px;
- width: 2px;
+ block-size: 2px;
+ inline-size: 2px;
background-color: var(--accent-color);
transform: scale(6, 6);
transition: box-shadow 0.2s;
@@ -113,8 +113,8 @@
margin-block: 0;
margin-auto: 17px;
border-radius: 1px;
- width: 100%;
- height: 2px;
+ inline-size: 100%;
+ block-size: 2px;
background-color: var(--accent-color-opacity4);
}
@@ -124,8 +124,8 @@
-moz-appearance: none;
border: none;
border-radius: 50%;
- height: 2px;
- width: 2px;
+ block-size: 2px;
+ inline-size: 2px;
background-color: var(--accent-color);
transform: scale(6, 6);
transition: box-shadow 0.2s;
@@ -134,7 +134,7 @@
/* Moz | Progress */
.pure-material-slider > input::-moz-range-progress {
border-radius: 1px;
- height: 2px;
+ block-size: 2px;
background-color: var(--accent-color);
}
@@ -183,21 +183,21 @@
border-radius: 1px;
padding-block: 0;
padding-inline: 17px;
- width: 100%;
- height: 2px;
+ inline-size: 100%;
+ block-size: 2px;
background-color: transparent;
}
.pure-material-slider > input::-ms-fill-lower {
border-radius: 1px;
- height: 2px;
+ block-size: 2px;
background-color: var(--accent-color);
}
/* MS | Progress */
.pure-material-slider > input::-ms-fill-upper {
border-radius: 1px;
- height: 2px;
+ block-size: 2px;
background-color: var(--accent-color-opacity4);
}
@@ -208,8 +208,8 @@
margin-inline: 17px;
border: none;
border-radius: 50%;
- height: 2px;
- width: 2px;
+ block-size: 2px;
+ inline-size: 2px;
background-color: var(--accent-color);
transform: scale(6, 6);
transition: box-shadow 0.2s;
@@ -251,6 +251,6 @@
@media only screen and (max-width: 680px) {
.pure-material-slider {
- width: 100%;
+ inline-size: 100%;
}
}
diff --git a/src/renderer/components/ft-sponsor-block-category/ft-sponsor-block-category.scss b/src/renderer/components/ft-sponsor-block-category/ft-sponsor-block-category.scss
index 3afca0e66b660..b052038c4443a 100644
--- a/src/renderer/components/ft-sponsor-block-category/ft-sponsor-block-category.scss
+++ b/src/renderer/components/ft-sponsor-block-category/ft-sponsor-block-category.scss
@@ -4,7 +4,7 @@
padding-inline: 10px;
@media only screen and (max-width: 680px) {
- width: 100%;
+ inline-size: 100%;
}
.sponsorTitle {
diff --git a/src/renderer/components/ft-subscribe-button/ft-subscribe-button.css b/src/renderer/components/ft-subscribe-button/ft-subscribe-button.css
index 9faeb44025d03..338ea7b3538c1 100644
--- a/src/renderer/components/ft-subscribe-button/ft-subscribe-button.css
+++ b/src/renderer/components/ft-subscribe-button/ft-subscribe-button.css
@@ -1,6 +1,6 @@
.subscribeButton {
align-self: center;
- height: 50%;
+ block-size: 50%;
margin-block-end: 10px;
- min-width: 150px;
+ min-inline-size: 150px;
}
diff --git a/src/renderer/components/ft-toggle-switch/ft-toggle-switch.scss b/src/renderer/components/ft-toggle-switch/ft-toggle-switch.scss
index dc4207e1675a8..5d939f8c56656 100644
--- a/src/renderer/components/ft-toggle-switch/ft-toggle-switch.scss
+++ b/src/renderer/components/ft-toggle-switch/ft-toggle-switch.scss
@@ -12,12 +12,12 @@
.switch-input {
appearance: none;
- height: 20px;
+ block-size: 20px;
inset-inline-start: -3px;
position: absolute;
inset-block-start: calc(50% - 3px);
transform: translate(0, -50%);
- width: 34px;
+ inline-size: 34px;
}
.switch-label {
@@ -43,9 +43,9 @@
&::before {
background-color: #9e9e9e;
border-radius: 8px;
- height: 14px;
+ block-size: 14px;
inset-inline-start: 1px;
- width: 34px;
+ inline-size: 34px;
.switch-input:checked + & {
background-color: var(--accent-color-light);
@@ -60,9 +60,9 @@
background-color: #fafafa;
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%);
- height: 20px;
+ block-size: 20px;
inset-inline-start: 0;
- width: 20px;
+ inline-size: 20px;
.switch-input:checked + & {
background-color: var(--accent-color);
@@ -75,7 +75,7 @@
}
@media (max-width: 680px) {
- max-width: 250px;
+ max-inline-size: 250px;
}
}
diff --git a/src/renderer/components/ft-tooltip/ft-tooltip.css b/src/renderer/components/ft-tooltip/ft-tooltip.css
index 7af822570323f..1e43b784ef521 100644
--- a/src/renderer/components/ft-tooltip/ft-tooltip.css
+++ b/src/renderer/components/ft-tooltip/ft-tooltip.css
@@ -38,8 +38,8 @@
font-size: 1rem;
line-height: 120%;
margin: 0;
- max-width: max-content;
- min-width: 15em;
+ max-inline-size: max-content;
+ min-inline-size: 15em;
opacity: 0;
padding-block: 10px;
padding-inline: 8px;
diff --git a/src/renderer/components/ft-video-player/ft-video-player.css b/src/renderer/components/ft-video-player/ft-video-player.css
index c751799f90781..8cb9950aa11a0 100644
--- a/src/renderer/components/ft-video-player/ft-video-player.css
+++ b/src/renderer/components/ft-video-player/ft-video-player.css
@@ -1,9 +1,10 @@
+/* stylelint-disable liberty/use-logical-spec */
.relative {
position: relative;
}
.ftVideoPlayer {
- width:100%;
+ width: 100%;
}
.ftVideoPlayer.vjs-user-inactive {
@@ -16,14 +17,15 @@
}
:deep(.sponsorBlockMarker) {
- height: 100%;
+ block-size: 100%;
background-color: var(--primary-color);
}
:deep(.chapterMarker) {
height: 100%;
- inset-block-start: 0;
+ top: 0;
width: 2px;
z-index: 2;
background-color: #000;
}
+/* stylelint-enable liberty/use-logical-spec */
diff --git a/src/renderer/components/general-settings/general-settings.css b/src/renderer/components/general-settings/general-settings.css
index c14113f11a9bc..4d2321eeb3e2a 100644
--- a/src/renderer/components/general-settings/general-settings.css
+++ b/src/renderer/components/general-settings/general-settings.css
@@ -1,10 +1,10 @@
.select {
- min-width: 240px;
- width: auto;
+ min-inline-size: 240px;
+ inline-size: auto;
}
/* https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors */
.select:deep(.select-text) {
- min-width: 240px;
- width: auto;
+ min-inline-size: 240px;
+ inline-size: auto;
}
diff --git a/src/renderer/components/password-dialog/password-dialog.css b/src/renderer/components/password-dialog/password-dialog.css
index 2d37968aabcaf..cf547ceed9048 100644
--- a/src/renderer/components/password-dialog/password-dialog.css
+++ b/src/renderer/components/password-dialog/password-dialog.css
@@ -1,9 +1,9 @@
.card {
- width: 85%;
+ inline-size: 85%;
margin: auto;
box-sizing: border-box;
}
.passwordInput {
- width: 100%;
+ inline-size: 100%;
}
diff --git a/src/renderer/components/player-settings/player-settings.scss b/src/renderer/components/player-settings/player-settings.scss
index 19bfa9b25f8e9..736a6b052b9db 100644
--- a/src/renderer/components/player-settings/player-settings.scss
+++ b/src/renderer/components/player-settings/player-settings.scss
@@ -7,7 +7,7 @@
column-gap: 1rem;
margin-block: 0;
margin-inline: auto;
- width: 95%;
+ inline-size: 95%;
.screenshotFolderLabel,
.screenshotFolderButton,
diff --git a/src/renderer/components/playlist-info/playlist-info.scss b/src/renderer/components/playlist-info/playlist-info.scss
index a03ba61b68867..c659de9a5ff86 100644
--- a/src/renderer/components/playlist-info/playlist-info.scss
+++ b/src/renderer/components/playlist-info/playlist-info.scss
@@ -1,10 +1,10 @@
.playListThumbnail {
- width: 100%;
+ inline-size: 100%;
}
.playlistThumbnail img {
cursor: pointer;
- width: 100%;
+ inline-size: 100%;
// Ensure placeholder image displayed at same aspect ratio as most other images
aspect-ratio: 16/9;
@@ -27,12 +27,12 @@
}
.playlistDescription {
- max-height: 20vh;
+ max-block-size: 20vh;
overflow-y: auto;
white-space: break-spaces;
@media only screen and (max-width: 500px) {
- max-height: 10vh;
+ max-block-size: 10vh;
}
}
@@ -41,14 +41,14 @@
color: inherit;
display: flex;
gap: 8px;
- height: 40px;
+ block-size: 40px;
text-decoration: none;
}
.channelThumbnail {
border-radius: 200px;
float: var(--float-left-ltr-rtl-value);
- width: 40px;
+ inline-size: 40px;
}
.channelName {
diff --git a/src/renderer/components/side-nav-more-options/side-nav-more-options.css b/src/renderer/components/side-nav-more-options/side-nav-more-options.css
index 2d3eaf16334cc..6da86c064ea0d 100644
--- a/src/renderer/components/side-nav-more-options/side-nav-more-options.css
+++ b/src/renderer/components/side-nav-more-options/side-nav-more-options.css
@@ -31,7 +31,7 @@
position: fixed;
background-color: var(--side-nav-color);
inset-block-end: 60px;
- width: 70px;
+ inline-size: 70px;
z-index: 0;
-webkit-box-shadow: 3px -3px 5px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 3px -3px 5px 0px rgba(0,0,0,0.2);
@@ -45,23 +45,23 @@
.sideNav, .closed {
margin-block-start: 0px;
- height: 60px;
- width: 100%;
+ block-size: 60px;
+ inline-size: 100%;
inset-block-end: 0px;
inset-block-start: auto;
overflow-y: inherit;
}
.navOption, .closed .navOption {
- width: 70px;
- height: 40px;
+ inline-size: 70px;
+ block-size: 40px;
padding-block: 10px;
padding-inline: 0;
}
.navLabel {
margin-inline-start: 0px;
- width: 100%;
+ inline-size: 100%;
text-align: center;
inset-inline-start: 0px;
font-size: 11px;
@@ -69,7 +69,7 @@
.navIcon {
margin-inline-start: 0px;
- width: 100%;
+ inline-size: 100%;
display: block;
margin-block-start: 0.5em;
}
@@ -79,6 +79,6 @@
}
.closed .navIconExpand{
- height:1.3em;
+ block-size:1.3em;
}
}
diff --git a/src/renderer/components/side-nav/side-nav.css b/src/renderer/components/side-nav/side-nav.css
index 1325afb972e0d..de36a3f621bf5 100644
--- a/src/renderer/components/side-nav/side-nav.css
+++ b/src/renderer/components/side-nav/side-nav.css
@@ -1,7 +1,7 @@
.sideNav {
display: block;
- height: calc(100vh - 60px);
- width: 200px;
+ block-size: calc(100vh - 60px);
+ inline-size: 200px;
overflow-x: hidden;
position: sticky;
inset-inline-start: 0;
@@ -9,7 +9,7 @@
z-index: 3;
box-shadow: 1px -1px 1px -1px var(--primary-shadow-color);
background-color: var(--side-nav-color);
- transition-property: width;
+ transition-property: inline-size;
transition-duration: 150ms;
transition-timing-function: ease-in-out;
user-select: none;
@@ -17,22 +17,22 @@
}
.inner {
- height: 100%;
- width: 200px;
+ block-size: 100%;
+ inline-size: 200px;
overflow-y: auto;
overflow-x: hidden;
}
.closed .inner {
- width: 80px;
+ inline-size: 80px;
}
.closed .hiddenLabels {
- width: 60px;
+ inline-size: 60px;
}
.closed.hiddenLabels {
- width: 60px;
+ inline-size: 60px;
}
.topNavOption {
@@ -42,7 +42,7 @@
.navOption, .navChannel {
position: relative;
padding: 5px;
- min-height: 35px;
+ min-block-size: 35px;
-webkit-user-drag: none;
}
@@ -84,7 +84,7 @@
}
.thumbnailContainer {
- width: 35px;
+ inline-size: 35px;
margin: 0;
position: absolute;
inset-block-start: 50%;
@@ -104,12 +104,12 @@
}
.closed {
- width: 80px;
+ inline-size: 80px;
}
.sideNav hr {
- width: 90%;
- height: 1px;
+ inline-size: 90%;
+ block-size: 1px;
border: 0;
background-color: var(--primary-color);
}
@@ -125,24 +125,24 @@
}
.closed .navOption {
- width: 100%;
+ inline-size: 100%;
padding-block: 5px;
padding-inline: 0;
}
.closed .navIcon {
margin-inline-start: 0px;
- width: 100%;
+ inline-size: 100%;
display: block;
margin-block-end: 0px;
}
.closed .navIconExpand{
- height:1.3em;
+ block-size:1.3em;
}
.closed .navLabel {
margin-inline-start: 0px;
- width: 100%;
+ inline-size: 100%;
text-align: center;
inset-inline-start: 0px;
font-size: 11px;
@@ -150,8 +150,8 @@
}
.closed .navChannel {
- width: 100%;
- height: 45px;
+ inline-size: 100%;
+ block-size: 45px;
padding-block: 5px;
padding-inline: 0;
}
@@ -194,16 +194,16 @@
.sideNav, .closed {
margin-block-start: 0px;
- height: 60px;
- width: 100%;
+ block-size: 60px;
+ inline-size: 100%;
inset-block-end: 0px;
inset-block-start: auto;
overflow-y: hidden;
}
.navOption, .closed .navOption {
- width: 70px;
- height: 40px;
+ inline-size: 70px;
+ block-size: 40px;
padding: 0px;
padding-block-start: 10px;
padding-block-end: 10px;
@@ -211,7 +211,7 @@
.navLabel {
margin-inline-start: 0px;
- width: 100%;
+ inline-size: 100%;
text-align: center;
inset-inline-start: 0px;
font-size: 11px;
@@ -221,6 +221,6 @@
display: block;
}
.closed.hiddenLabels{
- width: 100%;
+ inline-size: 100%;
}
}
diff --git a/src/renderer/components/subscriptions-tab-ui/subscriptions-tab-ui.css b/src/renderer/components/subscriptions-tab-ui/subscriptions-tab-ui.css
index 103af5333ec49..43d037639526c 100644
--- a/src/renderer/components/subscriptions-tab-ui/subscriptions-tab-ui.css
+++ b/src/renderer/components/subscriptions-tab-ui/subscriptions-tab-ui.css
@@ -1,5 +1,5 @@
.card {
- width: 85%;
+ inline-size: 85%;
margin-block: 0 60px;
margin-inline: auto;
}
@@ -22,6 +22,6 @@
@media only screen and (max-width: 680px) {
.card {
- width: 90%;
+ inline-size: 90%;
}
}
diff --git a/src/renderer/components/top-nav/top-nav.scss b/src/renderer/components/top-nav/top-nav.scss
index 03d532e487e12..c182bf1148e72 100644
--- a/src/renderer/components/top-nav/top-nav.scss
+++ b/src/renderer/components/top-nav/top-nav.scss
@@ -13,13 +13,13 @@
background-color: var(--card-bg-color);
box-shadow: 0 2px 1px 0 var(--primary-shadow-color);
display: flex;
- height: 60px;
+ block-size: 60px;
inset-inline-start: 0;
line-height: 60px;
position: sticky;
inset-inline-end: 0;
inset-block-start: 0;
- width: 100%;
+ inline-size: 100%;
z-index: 4;
@media only screen and (min-width: 961px) {
@@ -47,10 +47,10 @@
color: var(--primary-text-color);
cursor: pointer;
font-size: 20px;
- height: 1em;
+ block-size: 1em;
padding: 10px;
transition: background 0.2s ease-out;
- width: 1em;
+ inline-size: 1em;
@include top-nav-is-colored {
color: var(--text-with-main-color);
@@ -144,8 +144,8 @@
background-position: right top;
background-repeat: no-repeat;
background-size: 25px;
- height: 25px;
- width: 25px;
+ block-size: 25px;
+ inline-size: 25px;
@include top-nav-is-colored {
background-image: var(--logo-icon-bar-color);
@@ -157,11 +157,11 @@
background-position: right top;
background-repeat: no-repeat;
background-size: 100px;
- height: 40px;
+ block-size: 40px;
margin-inline-start: 5px;
position: relative;
inset-block-start: -3px;
- width: 100px;
+ inline-size: 100px;
@media only screen and (max-width: 680px) {
display: none;
@@ -176,7 +176,7 @@
.middle {
flex: 1;
- max-width: 440px;
+ max-inline-size: 440px;
.searchContainer {
align-items: center;
diff --git a/src/renderer/components/watch-video-chapters/watch-video-chapters.css b/src/renderer/components/watch-video-chapters/watch-video-chapters.css
index 29e3a29eb71b8..4091110e1de16 100644
--- a/src/renderer/components/watch-video-chapters/watch-video-chapters.css
+++ b/src/renderer/components/watch-video-chapters/watch-video-chapters.css
@@ -14,7 +14,7 @@
.chaptersWrapper {
margin-block-start: 15px;
- max-height: 250px;
+ max-block-size: 250px;
overflow-y: scroll;
display: flex;
flex-direction: column;
@@ -22,7 +22,7 @@
}
.chaptersWrapper.compact {
- max-height: 200px;
+ max-block-size: 200px;
}
.chaptersChevron {
@@ -53,8 +53,8 @@
.chapterThumbnail {
grid-area: thumbnail;
- width: 130px;
- height: auto;
+ inline-size: 130px;
+ block-size: auto;
margin: 3px;
}
diff --git a/src/renderer/components/watch-video-comments/watch-video-comments.css b/src/renderer/components/watch-video-comments/watch-video-comments.css
index 9c53d1c86fd93..812adff95d191 100644
--- a/src/renderer/components/watch-video-comments/watch-video-comments.css
+++ b/src/renderer/components/watch-video-comments/watch-video-comments.css
@@ -44,8 +44,8 @@
.commentThumbnail {
float: var(--float-left-ltr-rtl-value);
- width: 60px;
- height: 60px;
+ inline-size: 60px;
+ block-size: 60px;
border-radius: 200px;
-webkit-border-radius: 200px;
}
@@ -55,8 +55,8 @@
display: flex;
justify-content: center;
align-items: center;
- width: 60px;
- height: 60px;
+ inline-size: 60px;
+ block-size: 60px;
font-size: 20px;
line-height: 1em;
text-transform: capitalize;
@@ -111,17 +111,16 @@
.commentMemberIcon {
margin-inline-start: 5px;
- width: 14px;
- height: 14px;
+ inline-size: 14px;
+ block-size: 14px;
}
.commentSubscribedIcon {
content: var(--logo-icon);
- height: 14px;
- width: 14px;
+ block-size: 14px;
+ inline-size: 14px;
vertical-align: middle;
- margin-left: 0.25em;
- margin-right: 0.25em;
+ margin-inline: 0.25em;
}
.commentLikeCount {
@@ -133,8 +132,8 @@
.commentHeartBadge {
display: inline-block;
position: relative;
- width: 25px;
- height: 20px;
+ inline-size: 25px;
+ block-size: 20px;
margin-inline-start: 10px;
margin-block-end: -7px;
}
@@ -142,8 +141,8 @@
.commentHeartBadgeImg {
position: absolute;
inset-inline-start: 0;
- width: 15px;
- height: 15px;
+ inline-size: 15px;
+ block-size: 15px;
border-radius: 50%;
-webkit-border-radius: 50%;
}
@@ -152,8 +151,8 @@
position: absolute;
inset-inline-start: 9px;
inset-block-end: 1px;
- width: 11px;
- height: 11px;
+ inline-size: 11px;
+ block-size: 11px;
z-index: 1;
}
@@ -162,8 +161,8 @@
color: var(--red-500);
inset-inline-start: 10px;
inset-block-end: 2px;
- width: 9px;
- height: 9px;
+ inline-size: 9px;
+ block-size: 9px;
z-index: 2;
}
diff --git a/src/renderer/components/watch-video-description/watch-video-description.css b/src/renderer/components/watch-video-description/watch-video-description.css
index c34953dde31f6..721c263445f69 100644
--- a/src/renderer/components/watch-video-description/watch-video-description.css
+++ b/src/renderer/components/watch-video-description/watch-video-description.css
@@ -1,6 +1,6 @@
.videoDescription {
overflow-y: auto;
- max-height: 300px;
+ max-block-size: 300px;
}
.description {
diff --git a/src/renderer/components/watch-video-info/watch-video-info.scss b/src/renderer/components/watch-video-info/watch-video-info.scss
index fa086d1083421..ad7c658529c18 100644
--- a/src/renderer/components/watch-video-info/watch-video-info.scss
+++ b/src/renderer/components/watch-video-info/watch-video-info.scss
@@ -28,7 +28,7 @@
border-radius: 50%;
cursor: pointer;
margin-inline-end: 10px;
- width: 56px;
+ inline-size: 56px;
}
.channelName {
@@ -66,7 +66,8 @@
}
.datePublished {
- margin: 4px 0 0;
+ margin-block: 4px 0;
+ margin-inline: 0;
@media screen and (max-width: 680px) {
margin-block-start: 16px;
@@ -80,7 +81,7 @@
font-size: 16px;
margin-inline-start: auto;
margin-block-start: 4px;
- max-width: 210px;
+ max-inline-size: 210px;
text-align: end;
@media screen and (max-width: 680px) {
@@ -90,7 +91,7 @@
.likeBar {
border-radius: 4px;
- height: 8px;
+ block-size: 8px;
margin-block-end: 4px;
}
diff --git a/src/renderer/components/watch-video-live-chat/watch-video-live-chat.css b/src/renderer/components/watch-video-live-chat/watch-video-live-chat.css
index 0a9e1a956592c..fdf77ea22dda8 100644
--- a/src/renderer/components/watch-video-live-chat/watch-video-live-chat.css
+++ b/src/renderer/components/watch-video-live-chat/watch-video-live-chat.css
@@ -1,5 +1,5 @@
.card.hasError {
- height: auto !important;
+ block-size: auto !important;
padding: 16px;
}
@@ -8,8 +8,8 @@
}
.messageContainer {
- width: 100%;
- height: 100%;
+ inline-size: 100%;
+ block-size: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
@@ -36,7 +36,7 @@
}
.errorIcon {
- width: 100%;
+ inline-size: 100%;
color: var(--tertiary-text-color);
font-size: 100px;
}
@@ -49,8 +49,8 @@
}
.superChatComments {
- width: 100%;
- height: 50px;
+ inline-size: 100%;
+ block-size: 50px;
overflow-x: auto;
white-space: nowrap;
}
@@ -61,7 +61,7 @@
padding-inline-end: 10px;
margin-inline-start: 2px;
margin-inline-end: 2px;
- height: 30px;
+ block-size: 30px;
cursor: pointer;
background-color: var(--primary-color);
border-radius: 200px;
@@ -77,7 +77,7 @@
.superChat .channelThumbnail {
margin-block-start: 3px;
margin-inline-start: 3px;
- height: 25px;
+ block-size: 25px;
}
.donationAmount {
@@ -86,8 +86,8 @@
.openedSuperChat {
background-color: rgba(0, 0, 0, 0.7);
- width: 100%;
- height: 415px;
+ inline-size: 100%;
+ block-size: 415px;
position: absolute;
margin-inline-start: -16px;
padding-inline-end: 32px;
@@ -109,7 +109,7 @@
}
.comment {
- width: 100%;
+ inline-size: 100%;
padding-block: 5px 7px;
display: grid;
grid-template-columns: min-content auto;
@@ -117,7 +117,7 @@
}
.superChatMessage {
- width: 90%;
+ inline-size: 90%;
grid-template-columns: auto;
margin-inline-start: 5%;
margin-inline-end: 5%;
@@ -131,15 +131,15 @@
.upperSuperChatMessage {
margin-block-start: -15px;
- width: 100%;
- height: 55px;
+ inline-size: 100%;
+ block-size: 55px;
background-color: var(--primary-color-hover);
border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
}
.upperSuperChatMessage .channelThumbnail {
- width: 45px;
+ inline-size: 45px;
margin-inline-start: 10px;
margin-block-start: 5px;
}
@@ -166,12 +166,12 @@
}
.liveChatComments {
- width: 100%;
+ inline-size: 100%;
overflow-y: auto;
}
.channelThumbnail {
- width: 25px;
+ inline-size: 25px;
border-radius: 200px;
-webkit-border-radius: 200px;
}
@@ -204,13 +204,13 @@
}
.badgeImage {
- width: 14px;
+ inline-size: 14px;
}
.scrollToBottom {
background-color: var(--accent-color);
- width: 35px;
- height: 35px;
+ inline-size: 35px;
+ block-size: 35px;
position: absolute;
inset-inline-start: 45%;
inset-block-end: 20px;
diff --git a/src/renderer/components/watch-video-live-chat/watch-video-live-chat.vue b/src/renderer/components/watch-video-live-chat/watch-video-live-chat.vue
index 968cb22de940f..3719372c10258 100644
--- a/src/renderer/components/watch-video-live-chat/watch-video-live-chat.vue
+++ b/src/renderer/components/watch-video-live-chat/watch-video-live-chat.vue
@@ -118,7 +118,7 @@