From 53c65b2d1171e17458d99fc36191fe1a8a0969f9 Mon Sep 17 00:00:00 2001 From: Jason Henriquez Date: Fri, 17 Nov 2023 06:55:28 -0600 Subject: [PATCH 1/9] Add back @double-great/stylelint-a11y Stylelint plugin Notably, we choose to not use the 'a11y/no-outline-none' rule. The reason for this being that our focus ring suffices for almost every use case (https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance-minimum), and using the same hover and focus styling can be considered bad design in many cases. YT goes the direction of foregoing the focus ring for many of its components and choosing a barely darker color than its :hover for :focus styling, which is controversial. Accessibility-wise, at the very least, using the same hover and focus styling can be confusing, especially for sighted users who use keyboard navigation. --- .stylelintrc.json | 9 ++++++++- src/renderer/components/ft-select/ft-select.css | 2 +- src/renderer/components/ft-slider/ft-slider.css | 1 + src/renderer/themes.css | 7 ++++--- 4 files changed, 14 insertions(+), 5 deletions(-) diff --git a/.stylelintrc.json b/.stylelintrc.json index deadc16c868cb..391a148a1fd79 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -1,5 +1,5 @@ { - "plugins": ["stylelint-use-logical-spec"], + "plugins": ["stylelint-use-logical-spec", "@double-great/stylelint-a11y"], "overrides": [ { "files": ["**/*.scss"], @@ -16,6 +16,13 @@ } ], "rules": { + "selector-pseudo-class-no-unknown": [ + true, + { + "ignorePseudoClasses": ["deep"] + } + ], + "a11y/no-outline-none": true, "liberty/use-logical-spec": ["always", { "except": ["float"] }] } } diff --git a/src/renderer/components/ft-select/ft-select.css b/src/renderer/components/ft-select/ft-select.css index ca723b30da898..49410dc6443db 100644 --- a/src/renderer/components/ft-select/ft-select.css +++ b/src/renderer/components/ft-select/ft-select.css @@ -52,7 +52,7 @@ background-color: var(--card-bg-color); } -/* Remove focus */ +/* stylelint-disable-next-line a11y/no-outline-none */ .select-text:focus { outline: none; } diff --git a/src/renderer/components/ft-slider/ft-slider.css b/src/renderer/components/ft-slider/ft-slider.css index a71a5a90c3841..b7b477d7bddb7 100644 --- a/src/renderer/components/ft-slider/ft-slider.css +++ b/src/renderer/components/ft-slider/ft-slider.css @@ -41,6 +41,7 @@ } /* Focus */ +/* stylelint-disable-next-line a11y/no-outline-none */ .pure-material-slider > input:focus { outline: none; } diff --git a/src/renderer/themes.css b/src/renderer/themes.css index 0e6ddecf4a285..22b904708c4a4 100644 --- a/src/renderer/themes.css +++ b/src/renderer/themes.css @@ -229,11 +229,11 @@ /* Given that the Hot Pink theme does not need link underlining due to meeting WCAG 2 Level AA (https://webaim.org/resources/linkcontrastchecker/?fcolor=FFFFFF&bcolor=DE1C85&lcolor=000000), it can be safely elided. This looks quite pleasant on this theme. */ -.hotPink a:not(:hover), .hotPink a.navOption:hover, .hotPink *:not(:hover) { +.hotPink a:not(:hover):not(:focus), .hotPink a.navOption:hover, .hotPink a.navOption:focus .hotPink *:not(:hover):not(:focus) { text-decoration: none; } -.hotPink a:hover { +.hotPink a:hover, .hotPink a:focus { text-decoration: underline; } @@ -1042,6 +1042,7 @@ body { background-color: var(--bg-color); } +/* stylelint-disable-next-line a11y/no-outline-none */ .hideOutlines *:focus { outline: none; } @@ -1064,6 +1065,6 @@ a:visited { border-radius: 6px; } -::-webkit-scrollbar-thumb:hover { +::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-thumb:focus { background: var(--scrollbar-color-hover); } From 390b3ba5ec2dbb69a9e306bc44ea03ed213e424c Mon Sep 17 00:00:00 2001 From: Jason Henriquez Date: Sat, 18 Nov 2023 10:29:19 -0600 Subject: [PATCH 2/9] Add back stylelint-config-sass-guidelines --- .stylelintrc.json | 7 ++ src/renderer/App.css | 10 +-- src/renderer/App.vue | 3 +- .../distraction-settings.css | 2 +- .../components/ft-button/ft-button.css | 4 +- .../ft-channel-bubble/ft-channel-bubble.css | 9 +-- .../ft-community-poll/ft-community-poll.css | 2 +- .../ft-community-post/ft-community-post.scss | 2 +- .../components/ft-flex-box/ft-flex-box.css | 1 - .../ft-icon-button/ft-icon-button.scss | 3 - .../ft-input-tags/ft-input-tags.css | 2 +- src/renderer/components/ft-input/ft-input.css | 29 +++---- .../components/ft-loader/ft-loader.css | 13 ++- .../ft-profile-bubble/ft-profile-bubble.css | 8 +- .../ft-profile-edit/ft-profile-edit.css | 5 +- .../ft-profile-selector.css | 8 +- .../ft-progress-bar/ft-progress-bar.css | 4 +- .../components/ft-prompt/ft-prompt.css | 4 +- .../ft-radio-button/ft-radio-button.css | 29 ++++--- .../components/ft-select/ft-select.css | 17 ++-- .../ft-settings-section.scss | 10 ++- .../components/ft-slider/ft-slider.css | 19 ++--- src/renderer/components/ft-toast/ft-toast.css | 2 +- .../components/ft-tooltip/ft-tooltip.css | 9 +-- .../side-nav-more-options.css | 18 ++--- src/renderer/components/side-nav/side-nav.css | 33 ++++---- src/renderer/components/top-nav/top-nav.scss | 3 +- .../watch-video-comments.css | 6 +- .../watch-video-live-chat.css | 16 ++-- src/renderer/scss-partials/_ft-list-item.scss | 6 +- src/renderer/themes.css | 80 +++++++++---------- src/renderer/videoJS.css | 11 +-- src/renderer/views/Channel/Channel.css | 7 +- src/renderer/views/Channel/Channel.vue | 1 + .../SubscribedChannels/SubscribedChannels.css | 2 +- 35 files changed, 166 insertions(+), 219 deletions(-) diff --git a/.stylelintrc.json b/.stylelintrc.json index 391a148a1fd79..19d1f797d6485 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -1,5 +1,6 @@ { "plugins": ["stylelint-use-logical-spec", "@double-great/stylelint-a11y"], + "extends": ["stylelint-config-sass-guidelines"], "overrides": [ { "files": ["**/*.scss"], @@ -16,6 +17,12 @@ } ], "rules": { + "selector-no-qualifying-type": [ + true, { + "ignore": ["attribute"] + }], + "selector-class-pattern": null, + "selector-id-pattern": null, "selector-pseudo-class-no-unknown": [ true, { diff --git a/src/renderer/App.css b/src/renderer/App.css index 90fc87ab4938e..0671f997660ff 100644 --- a/src/renderer/App.css +++ b/src/renderer/App.css @@ -1,9 +1,9 @@ @font-face { font-family: Roboto; - src: url(assets/font/Roboto-Regular.ttf); + src: url("assets/font/Roboto-Regular.ttf"); } -#app { +.app { display: flex; flex-wrap: wrap; font-family: 'Roboto', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; @@ -30,18 +30,18 @@ .flexBox { display: block; user-select: unset; - -webkit-user-select: unset; } -#changeLogText { +.changeLogText { overflow-y: scroll; block-size: 40vh; - display: block + display: block; } .fade-enter-active, .fade-leave-active { transition: opacity .15s; } + .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ { opacity: 0; } diff --git a/src/renderer/App.vue b/src/renderer/App.vue index e0394fae9711b..59375ac4f8fd2 100644 --- a/src/renderer/App.vue +++ b/src/renderer/App.vue @@ -2,6 +2,7 @@
diff --git a/src/renderer/components/distraction-settings/distraction-settings.css b/src/renderer/components/distraction-settings/distraction-settings.css index e1db90f33e402..7ea65384e0c20 100644 --- a/src/renderer/components/distraction-settings/distraction-settings.css +++ b/src/renderer/components/distraction-settings/distraction-settings.css @@ -3,7 +3,7 @@ } @media only screen and (max-width: 800px) { - br.hide-on-mobile { + .hide-on-mobile { display: none; } } diff --git a/src/renderer/components/ft-button/ft-button.css b/src/renderer/components/ft-button/ft-button.css index 4642a184de499..d3287977e1aff 100644 --- a/src/renderer/components/ft-button/ft-button.css +++ b/src/renderer/components/ft-button/ft-button.css @@ -32,7 +32,7 @@ transform: translate3d(0, 0, 0); } -.ripple:after { +.ripple::after { content: ""; display: block; position: absolute; @@ -49,7 +49,7 @@ transition: transform .5s, opacity 1s; } -.ripple:active:after { +.ripple:active::after { transform: scale(0, 0); opacity: .3; transition: 0s; diff --git a/src/renderer/components/ft-channel-bubble/ft-channel-bubble.css b/src/renderer/components/ft-channel-bubble/ft-channel-bubble.css index fcb7b96e50df7..2bfe010d49662 100644 --- a/src/renderer/components/ft-channel-bubble/ft-channel-bubble.css +++ b/src/renderer/components/ft-channel-bubble/ft-channel-bubble.css @@ -11,17 +11,12 @@ overflow: hidden; color: inherit; text-decoration: none; - -webkit-transition: background 0.2s ease-out; - -moz-transition: background 0.2s ease-out; - -o-transition: background 0.2s ease-out; transition: background 0.2s ease-out; } .bubblePadding:hover { background-color: var(--side-nav-hover-color); color: var(--side-nav-hover-text-color); - -moz-transition: background 0.2s ease-in; - -o-transition: background 0.2s ease-in; transition: background 0.2s ease-in; } @@ -29,7 +24,7 @@ inline-size: 50px; block-size: 50px; border-radius: 100%; - -webkit-border-radius: 100%; + border-radius: 100%; } .selected { @@ -39,7 +34,7 @@ } .icon { - color: #EEEEEE; + color: #EEE; font-size: 25px; position: absolute; inset-block-start: 12px; diff --git a/src/renderer/components/ft-community-poll/ft-community-poll.css b/src/renderer/components/ft-community-poll/ft-community-poll.css index c35738a1bff99..021dd0b6d63d8 100644 --- a/src/renderer/components/ft-community-poll/ft-community-poll.css +++ b/src/renderer/components/ft-community-poll/ft-community-poll.css @@ -17,7 +17,7 @@ .filled-circle { border-radius: 50%; - background-color: black; + background-color: #000; float: var(--float-left-ltr-rtl-value); block-size: 6px; inset-inline-start: 2px; diff --git a/src/renderer/components/ft-community-post/ft-community-post.scss b/src/renderer/components/ft-community-post/ft-community-post.scss index 7c7a6a8470ac4..c054d1294ba70 100644 --- a/src/renderer/components/ft-community-post/ft-community-post.scss +++ b/src/renderer/components/ft-community-post/ft-community-post.scss @@ -19,7 +19,6 @@ } .communityThumbnail { - -webkit-border-radius: 50%; border-radius: 50%; block-size: 55px; margin-inline-end: 5px; @@ -34,6 +33,7 @@ font-weight: bold; margin-block: 5px 0; margin-inline: 5px 6px; + .authorNameLink { color: inherit; text-decoration: none; diff --git a/src/renderer/components/ft-flex-box/ft-flex-box.css b/src/renderer/components/ft-flex-box/ft-flex-box.css index facb39fff6e40..281b6748999e1 100644 --- a/src/renderer/components/ft-flex-box/ft-flex-box.css +++ b/src/renderer/components/ft-flex-box/ft-flex-box.css @@ -3,5 +3,4 @@ flex-flow: row wrap; justify-content: space-evenly; user-select: none; - -webkit-user-select: none; } diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.scss b/src/renderer/components/ft-icon-button/ft-icon-button.scss index 58f776dd6414c..c76e9333fd5b9 100644 --- a/src/renderer/components/ft-icon-button/ft-icon-button.scss +++ b/src/renderer/components/ft-icon-button/ft-icon-button.scss @@ -3,8 +3,6 @@ flex-flow: row wrap; justify-content: space-evenly; position: relative; - - -webkit-user-select: none; user-select: none; } @@ -90,7 +88,6 @@ list-style-type: none; position: absolute; text-align: center; - -webkit-user-select: none; user-select: none; z-index: 3; diff --git a/src/renderer/components/ft-input-tags/ft-input-tags.css b/src/renderer/components/ft-input-tags/ft-input-tags.css index c1a81925adc13..150f85ff0041b 100644 --- a/src/renderer/components/ft-input-tags/ft-input-tags.css +++ b/src/renderer/components/ft-input-tags/ft-input-tags.css @@ -53,7 +53,7 @@ color: var(--primary-text-color); opacity: 0.5; padding: 10px; - padding-inline-start: 0px; + padding-inline-start: 0; } .removeTagButton:hover { diff --git a/src/renderer/components/ft-input/ft-input.css b/src/renderer/components/ft-input/ft-input.css index a458b9869336d..cc0d94ef44e32 100644 --- a/src/renderer/components/ft-input/ft-input.css +++ b/src/renderer/components/ft-input/ft-input.css @@ -57,8 +57,7 @@ border-radius: 100%; color: var(--primary-text-color); opacity: 0; - -moz-transition: background 0.2s ease-in; - -o-transition: background 0.2s ease-in; + transition: background 0.2s ease-in; transition: background 0.2s ease-in; } @@ -74,8 +73,7 @@ .clearInputTextButton.visible:active { background-color: var(--tertiary-text-color); color: var(--side-nav-active-text-color); - -moz-transition: background 0.2s ease-in; - -o-transition: background 0.2s ease-in; + transition: background 0.2s ease-in; transition: background 0.2s ease-in; } @@ -84,7 +82,7 @@ } .forceTextColor .clearInputTextButton { - color: #EEEEEE; + color: #EEE; } .forceTextColor .clearInputTextButton:active { @@ -93,12 +91,10 @@ .ft-input { box-sizing: border-box; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; outline: none; inline-size: 100%; padding: 1rem; - border: none; + border: 0; margin-block-end: 10px; font-size: 16px; block-size: 45px; @@ -107,26 +103,23 @@ background-color: var(--search-bar-color); } -.ft-input-component ::-webkit-input-placeholder { +.ftcomponent ::placeholder { color: var(--tertiary-text-color); user-select: none; - -webkit-user-select: none; } .forceTextColor .ft-input { - color: #EEEEEE; + color: #EEE; background-color: var(--primary-input-color); } .forceTextColor .ft-input:focus { box-shadow: 0 0 1rem 0 var(--primary-input-color); - -moz-transition: box-shadow 0.2s ease-in-out; - -o-transition: box-shadow 0.2s ease-in-out; transition: box-shadow 0.2s ease-in-out; } -.forceTextColor ::-webkit-input-placeholder { - color: #EEEEEE; +.forceTextColor ::placeholder { + color: #EEE; } .inputWrapper { @@ -158,7 +151,7 @@ } .forceTextColor .inputAction { - color: #EEEEEE; + color: #EEE; } .ft-input-component.showActionButton .ft-input { @@ -172,8 +165,6 @@ .inputAction.enabled:hover { background-color: var(--side-nav-hover-color); color: var(--side-nav-hover-text-color); - -moz-transition: background 0.2s ease-in; - -o-transition: background 0.2s ease-in; transition: background 0.2s ease-in; } @@ -184,8 +175,6 @@ .inputAction.enabled:active { background-color: var(--tertiary-text-color); color: var(--side-nav-active-text-color); - -moz-transition: background 0.2s ease-in; - -o-transition: background 0.2s ease-in; transition: background 0.2s ease-in; } diff --git a/src/renderer/components/ft-loader/ft-loader.css b/src/renderer/components/ft-loader/ft-loader.css index 6dabd908c82ac..a8b380b001c55 100644 --- a/src/renderer/components/ft-loader/ft-loader.css +++ b/src/renderer/components/ft-loader/ft-loader.css @@ -53,23 +53,21 @@ inset-block-start: 0; inset-inline-start: 0; background-color: var(--primary-color); - - -webkit-animation: sk-bounce 2.0s infinite ease-in-out; animation: sk-bounce 2.0s infinite ease-in-out; } .double-bounce2 { - -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } -@-webkit-keyframes sk-bounce { +@keyframes sk-bounce { 0%, 100% { - -webkit-transform: scale(0.0) + transform: scale(0.0) } + 50% { - -webkit-transform: scale(1.0) + transform: scale(1.0) } } @@ -77,10 +75,9 @@ 0%, 100% { transform: scale(0.0); - -webkit-transform: scale(0.0); } + 50% { transform: scale(1.0); - -webkit-transform: scale(1.0); } } 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 a3266e01b7c1d..9c73d2004b1c6 100644 --- a/src/renderer/components/ft-profile-bubble/ft-profile-bubble.css +++ b/src/renderer/components/ft-profile-bubble/ft-profile-bubble.css @@ -4,17 +4,12 @@ padding-block: 10px 30px; padding-inline: 10px; cursor: pointer; - -webkit-transition: background 0.2s ease-out; - -moz-transition: background 0.2s ease-out; - -o-transition: background 0.2s ease-out; transition: background 0.2s ease-out; } .bubblePadding:hover { background-color: var(--side-nav-hover-color); color: var(--side-nav-hover-text-color); - -moz-transition: background 0.2s ease-in; - -o-transition: background 0.2s ease-in; transition: background 0.2s ease-in; } @@ -24,7 +19,7 @@ margin-block: 20px 5px; margin-inline: auto; border-radius: 50%; - -webkit-border-radius: 50%; + border-radius: 50%; } .initial { @@ -34,7 +29,6 @@ padding-block: 17.5px; padding-inline: 0; user-select: none; - -webkit-user-select: none; } .profileName { 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 dc77c5077ecfb..527fcdbca4f47 100644 --- a/src/renderer/components/ft-profile-edit/ft-profile-edit.css +++ b/src/renderer/components/ft-profile-edit/ft-profile-edit.css @@ -28,7 +28,7 @@ margin: 10px; cursor: pointer; border-radius: 50%; - -webkit-border-radius: 50%; + border-radius: 50%; } .initial { @@ -36,9 +36,8 @@ line-height: 1em; text-align: center; padding-block: 25px; - padding-inline: 0px; + padding-inline: 0; user-select: none; - -webkit-user-select: none; } @media only screen and (max-width: 680px) { 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 94ee6e91d376e..1f29fe34446d4 100644 --- a/src/renderer/components/ft-profile-selector/ft-profile-selector.css +++ b/src/renderer/components/ft-profile-selector/ft-profile-selector.css @@ -6,7 +6,7 @@ display: flex; justify-content: center; border-radius: 50%; - -webkit-border-radius: 50%; + border-radius: 50%; } .colorOption:hover { @@ -18,7 +18,6 @@ line-height: 1em; text-align: center; user-select: none; - -webkit-user-select: none; } .profileList { @@ -42,17 +41,12 @@ .profile { cursor: pointer; block-size: 50px; - -webkit-transition: background 0.2s ease-out; - -moz-transition: background 0.2s ease-out; - -o-transition: background 0.2s ease-out; transition: background 0.2s ease-out; } .profile:hover { background-color: var(--side-nav-hover-color); color: var(--side-nav-hover-text-color); - -moz-transition: background 0.2s ease-in; - -o-transition: background 0.2s ease-in; transition: background 0.2s ease-in; } 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 6f14df5af8311..c7ebd6f3ca871 100644 --- a/src/renderer/components/ft-progress-bar/ft-progress-bar.css +++ b/src/renderer/components/ft-progress-bar/ft-progress-bar.css @@ -1,8 +1,8 @@ .progressBar { position: fixed; block-size: 3px; - inset-block-end: 0px; - inset-inline-start: 0px; + inset-block-end: 0; + inset-inline-start: 0; background-color: var(--primary-color); z-index: 1; transition: inline-size 0.5s; diff --git a/src/renderer/components/ft-prompt/ft-prompt.css b/src/renderer/components/ft-prompt/ft-prompt.css index e17beffab8e6d..2071739da0677 100644 --- a/src/renderer/components/ft-prompt/ft-prompt.css +++ b/src/renderer/components/ft-prompt/ft-prompt.css @@ -1,7 +1,7 @@ .prompt { position: fixed; - inset-block-start: 0px; - inset-inline-start: 0px; + inset-block-start: 0; + inset-inline-start: 0; inline-size: 100%; block-size: 100%; background-color: rgba(0, 0, 0, 0.7); 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 4efd5aeab7f1b..1a77f98aac8b4 100644 --- a/src/renderer/components/ft-radio-button/ft-radio-button.css +++ b/src/renderer/components/ft-radio-button/ft-radio-button.css @@ -9,24 +9,23 @@ pure-checkbox input[type="checkbox"], .pure-radiobutton input[type="checkbox"], inline-size: 1px; } -.pure-checkbox input[type="checkbox"]:focus + label:before, .pure-radiobutton input[type="checkbox"]:focus + label:before, .pure-checkbox input[type="radio"]:focus + label:before, .pure-radiobutton input[type="radio"]:focus + label:before, .pure-checkbox input[type="checkbox"]:hover + label:before, .pure-radiobutton input[type="checkbox"]:hover + label:before, .pure-checkbox input[type="radio"]:hover + label:before, .pure-radiobutton input[type="radio"]:hover + label:before { +.pure-checkbox input[type="checkbox"]:focus + label::before, .pure-radiobutton input[type="checkbox"]:focus + label::before, .pure-checkbox input[type="radio"]:focus + label::before, .pure-radiobutton input[type="radio"]:focus + label::before, .pure-checkbox input[type="checkbox"]:hover + label::before, .pure-radiobutton input[type="checkbox"]:hover + label::before, .pure-checkbox input[type="radio"]:hover + label::before, .pure-radiobutton input[type="radio"]:hover + label::before { border-color: var(--primary-color); } -.pure-checkbox input[type="checkbox"]:active + label:before, .pure-radiobutton input[type="checkbox"]:active + label:before, .pure-checkbox input[type="radio"]:active + label:before, .pure-radiobutton input[type="radio"]:active + label:before { transition-duration: 0s; } +.pure-checkbox input[type="checkbox"]:active + label::before, .pure-radiobutton input[type="checkbox"]:active + label::before, .pure-checkbox input[type="radio"]:active + label::before, .pure-radiobutton input[type="radio"]:active + label::before { transition-duration: 0s; } .pure-checkbox input[type="checkbox"] + label, .pure-radiobutton input[type="checkbox"] + label, .pure-checkbox input[type="radio"] + label, .pure-radiobutton input[type="radio"] + label { position: relative; padding-inline-start: 2em; vertical-align: middle; - -webkit-user-select: none; user-select: none; cursor: pointer; display: block; margin-block-end: -20px; } -.pure-checkbox input[type="checkbox"] + label:before, .pure-radiobutton input[type="checkbox"] + label:before, .pure-checkbox input[type="radio"] + label:before, .pure-radiobutton input[type="radio"] + label:before { +.pure-checkbox input[type="checkbox"] + label::before, .pure-radiobutton input[type="checkbox"] + label::before, .pure-checkbox input[type="radio"] + label::before, .pure-radiobutton input[type="radio"] + label::before { box-sizing: content-box; content: ''; color: var(--primary-color); @@ -41,7 +40,7 @@ pure-checkbox input[type="checkbox"], .pure-radiobutton input[type="checkbox"], transition: all 0.4s ease; } -.pure-checkbox input[type="checkbox"] + label:after, .pure-radiobutton input[type="checkbox"] + label:after, .pure-checkbox input[type="radio"] + label:after, .pure-radiobutton input[type="radio"] + label:after { +.pure-checkbox input[type="checkbox"] + label::after, .pure-radiobutton input[type="checkbox"] + label::after, .pure-checkbox input[type="radio"] + label::after, .pure-radiobutton input[type="radio"] + label::after { box-sizing: content-box; content: ''; background-color: var(--primary-color); @@ -56,13 +55,13 @@ pure-checkbox input[type="checkbox"], .pure-radiobutton input[type="checkbox"], transition: transform 200ms ease-out; } -.pure-checkbox input[type="checkbox"]:disabled + label:before, .pure-radiobutton input[type="checkbox"]:disabled + label:before, .pure-checkbox input[type="radio"]:disabled + label:before, .pure-radiobutton input[type="radio"]:disabled + label:before { border-color: #cccccc; } +.pure-checkbox input[type="checkbox"]:disabled + label::before, .pure-radiobutton input[type="checkbox"]:disabled + label::before, .pure-checkbox input[type="radio"]:disabled + label::before, .pure-radiobutton input[type="radio"]:disabled + label::before { border-color: #ccc; } -.pure-checkbox input[type="checkbox"]:disabled:focus + label:before, .pure-radiobutton input[type="checkbox"]:disabled:focus + label:before, .pure-checkbox input[type="radio"]:disabled:focus + label:before, .pure-radiobutton input[type="radio"]:disabled:focus + label:before, .pure-checkbox input[type="checkbox"]:disabled:hover + label:before, .pure-radiobutton input[type="checkbox"]:disabled:hover + label:before, .pure-checkbox input[type="radio"]:disabled:hover + label:before, .pure-radiobutton input[type="radio"]:disabled:hover + label:before { background-color: inherit; } +.pure-checkbox input[type="checkbox"]:disabled:focus + label::before, .pure-radiobutton input[type="checkbox"]:disabled:focus + label::before, .pure-checkbox input[type="radio"]:disabled:focus + label::before, .pure-radiobutton input[type="radio"]:disabled:focus + label::before, .pure-checkbox input[type="checkbox"]:disabled:hover + label::before, .pure-radiobutton input[type="checkbox"]:disabled:hover + label::before, .pure-checkbox input[type="radio"]:disabled:hover + label::before, .pure-radiobutton input[type="radio"]:disabled:hover + label::before { background-color: inherit; } -.pure-checkbox input[type="checkbox"]:disabled:checked + label:before, .pure-radiobutton input[type="checkbox"]:disabled:checked + label:before, .pure-checkbox input[type="radio"]:disabled:checked + label:before, .pure-radiobutton input[type="radio"]:disabled:checked + label:before { background-color: #cccccc; } +.pure-checkbox input[type="checkbox"]:disabled:checked + label::before, .pure-radiobutton input[type="checkbox"]:disabled:checked + label::before, .pure-checkbox input[type="radio"]:disabled:checked + label::before, .pure-radiobutton input[type="radio"]:disabled:checked + label::before { background-color: #ccc; } -.pure-checkbox input[type="checkbox"] + label:after, .pure-radiobutton input[type="checkbox"] + label:after { +.pure-checkbox input[type="checkbox"] + label::after, .pure-radiobutton input[type="checkbox"] + label::after { background-color: transparent; inset-block-start: 50%; inset-inline-start: 4px; @@ -75,26 +74,26 @@ pure-checkbox input[type="checkbox"], .pure-radiobutton input[type="checkbox"], transform: rotate(-45deg) scale(0); } -.pure-checkbox input[type="checkbox"]:checked + label:after, .pure-radiobutton input[type="checkbox"]:checked + label:after { +.pure-checkbox input[type="checkbox"]:checked + label::after, .pure-radiobutton input[type="checkbox"]:checked + label::after { content: ''; transform: rotate(-45deg) scale(1); transition: transform 200ms ease-out; } -.pure-checkbox input[type="radio"]:checked + label:before, .pure-radiobutton input[type="radio"]:checked + label:before { +.pure-checkbox input[type="radio"]:checked + label::before, .pure-radiobutton input[type="radio"]:checked + label::before { animation: borderscale 300ms ease-in; } -.pure-checkbox input[type="radio"]:checked + label:after, .pure-radiobutton input[type="radio"]:checked + label:after { transform: scale(1); } +.pure-checkbox input[type="radio"]:checked + label::after, .pure-radiobutton input[type="radio"]:checked + label::after { transform: scale(1); } -.pure-checkbox input[type="radio"] + label:before, .pure-radiobutton input[type="radio"] + label:before, .pure-checkbox input[type="radio"] + label:after, .pure-radiobutton input[type="radio"] + label:after { border-radius: 50%; } +.pure-checkbox input[type="radio"] + label::before, .pure-radiobutton input[type="radio"] + label::before, .pure-checkbox input[type="radio"] + label::after, .pure-radiobutton input[type="radio"] + label::after { border-radius: 50%; } -.pure-checkbox input[type="checkbox"]:checked + label:before, .pure-radiobutton input[type="checkbox"]:checked + label:before { +.pure-checkbox input[type="checkbox"]:checked + label::before, .pure-radiobutton input[type="checkbox"]:checked + label::before { animation: borderscale 200ms ease-in; background: var(--primary-color); } -.pure-checkbox input[type="checkbox"]:checked + label:after, .pure-radiobutton input[type="checkbox"]:checked + label:after { transform: rotate(-45deg) scale(1); } +.pure-checkbox input[type="checkbox"]:checked + label::after, .pure-radiobutton input[type="checkbox"]:checked + label::after { transform: rotate(-45deg) scale(1); } @keyframes borderscale { 50% { diff --git a/src/renderer/components/ft-select/ft-select.css b/src/renderer/components/ft-select/ft-select.css index 49410dc6443db..f187c0d979ae7 100644 --- a/src/renderer/components/ft-select/ft-select.css +++ b/src/renderer/components/ft-select/ft-select.css @@ -29,7 +29,7 @@ margin-block-start: 30px; } -.disabled, .disabled + svg.iconSelect { +.disabled, .disabled + .iconSelect { opacity: 0.4; cursor: not-allowed; } @@ -44,7 +44,7 @@ padding-inline: 0 10px; font-size: 18px; border-radius: 0; - border: none; + border: 0; } .select option { @@ -60,7 +60,7 @@ /* Use custom arrow */ .select .select-text { appearance: none; - -webkit-appearance:none; + appearance:none; text-overflow: ellipsis; padding-inline-end: 1.1rem; } @@ -111,7 +111,7 @@ inline-size: 200px; } -.select-bar:before, .select-bar:after { +.select-bar::before, .select-bar::after { content: ''; block-size: 2px; inline-size: 0; @@ -121,16 +121,16 @@ transition: 0.2s ease all; } -.select-bar:before { +.select-bar::before { inset-inline-start: 50%; } -.select-bar:after { +.select-bar::after { inset-inline-end: 50%; } /* active state */ -.select-text:focus ~ .select-bar:before, .select-text:focus ~ .select-bar:after { +.select-text:focus ~ .select-bar::before, .select-text:focus ~ .select-bar::after { inline-size: 50%; } @@ -155,6 +155,7 @@ .select { inline-size: 100%; } + .select .select-text { display:block; max-inline-size: 95%; @@ -163,7 +164,7 @@ @media only screen and (max-width: 680px) { .select { - padding: 0px; + padding: 0; margin-inline-end: -15px; } } 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 8c1399109940b..b5d609c179251 100644 --- a/src/renderer/components/ft-settings-section/ft-settings-section.scss +++ b/src/renderer/components/ft-settings-section/ft-settings-section.scss @@ -41,12 +41,11 @@ } .sectionTitle { - -webkit-user-select: none; user-select: none; margin-inline-start: 2%; } -:deep(.switchGrid) { +%switch-grid { align-items: center; display: grid; grid-template-columns: auto auto; @@ -57,9 +56,12 @@ } } -:deep(.switchColumnGrid) { - @extend :deep(.switchGrid); +:deep(.switchGrid) { + @extend %switch-grid; +} +:deep(.switchColumnGrid) { + @extend %switch-grid; align-items: start; } diff --git a/src/renderer/components/ft-slider/ft-slider.css b/src/renderer/components/ft-slider/ft-slider.css index b7b477d7bddb7..a76afcf4f37c4 100644 --- a/src/renderer/components/ft-slider/ft-slider.css +++ b/src/renderer/components/ft-slider/ft-slider.css @@ -16,7 +16,7 @@ /* Input */ .pure-material-slider > input { - -webkit-appearance: none; + appearance: none; position: relative; inset-block-start: 24px; display: block; @@ -69,8 +69,8 @@ /* Webkit | Thumb */ .pure-material-slider > input::-webkit-slider-thumb { appearance: none; - -webkit-appearance: none; - border: none; + appearance: none; + border: 0; border-radius: 50%; block-size: 2px; inline-size: 2px; @@ -112,7 +112,7 @@ /* Moz | Track */ .pure-material-slider > input::-moz-range-track { margin-block: 0; - margin-auto: 17px; + margin: 17px; border-radius: 1px; inline-size: 100%; block-size: 2px; @@ -122,8 +122,8 @@ /* Moz | Thumb */ .pure-material-slider > input::-moz-range-thumb { appearance: none; - -moz-appearance: none; - border: none; + appearance: none; + border: 0; border-radius: 50%; block-size: 2px; inline-size: 2px; @@ -165,6 +165,7 @@ .pure-material-slider > input:disabled::-moz-range-progress { background-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.87); } + .pure-material-slider > input:disabled::-moz-range-thumb { background-color: rgb(var(--pure-material-onsurface-rgb, 0, 0, 0)); box-shadow: 0 0 0 1px rgb(var(--pure-material-surface-rgb, 255, 255, 255)) !important; @@ -172,7 +173,7 @@ } .pure-material-slider > input::-moz-focus-outer { - border: none; + border: 0; } /* MS | Track */ @@ -180,7 +181,7 @@ box-sizing: border-box; margin-block: 17px; margin-inline: 0; - border: none; + border: 0; border-radius: 1px; padding-block: 0; padding-inline: 17px; @@ -207,7 +208,7 @@ appearance: none; margin-block: 0; margin-inline: 17px; - border: none; + border: 0; border-radius: 50%; block-size: 2px; inline-size: 2px; diff --git a/src/renderer/components/ft-toast/ft-toast.css b/src/renderer/components/ft-toast/ft-toast.css index 99274cece4058..49efd0d052651 100644 --- a/src/renderer/components/ft-toast/ft-toast.css +++ b/src/renderer/components/ft-toast/ft-toast.css @@ -16,7 +16,7 @@ text-align: center; overflow-y: auto; background-color: rgba(0, 0, 0, 0.7); - color: white; + color: #FFF; opacity: 0; border-radius: 20px; cursor: pointer; diff --git a/src/renderer/components/ft-tooltip/ft-tooltip.css b/src/renderer/components/ft-tooltip/ft-tooltip.css index 1e43b784ef521..6d3db0a09c0f3 100644 --- a/src/renderer/components/ft-tooltip/ft-tooltip.css +++ b/src/renderer/components/ft-tooltip/ft-tooltip.css @@ -19,7 +19,6 @@ .button:hover + .text.bottom-left, .button:focus + .text.top, .button:hover + .text.top { - -webkit-transform: translate(calc(-50% * var(--horizontal-directionality-coefficient)), 0); transform: translate(calc(-50% * var(--horizontal-directionality-coefficient)), 0); } @@ -27,7 +26,6 @@ .button:hover + .text.left, .button:focus + .text.right, .button:hover + .text.right { - -webkit-transform: translate(0, -50%); transform: translate(0, -50%); } @@ -56,7 +54,6 @@ margin-block-start: 1em; inset-block-start: 100%; inset-inline-start: 50%; - -webkit-transform: translate(calc(-50% * var(--horizontal-directionality-coefficient)), -1em); transform: translate(calc(-50% * var(--horizontal-directionality-coefficient)), -1em); } @@ -64,15 +61,13 @@ margin-block-start: 1em; inset-block-start: 100%; inset-inline-start: -100px; - -webkit-transform: translate(-50%, -1em); transform: translate(calc(-50% * var(--horizontal-directionality-coefficient)), -1em); } .text.left { - margin-inline-end:1em; + margin-inline-end: 1em; inset-inline-end: 100%; inset-block-start: 50%; - -webkit-transform: translate(calc(1em * var(--horizontal-directionality-coefficient)), -50%); transform: translate(calc(1em * var(--horizontal-directionality-coefficient)), -50%); } @@ -80,7 +75,6 @@ inset-inline-start: 100%; margin-inline-start: 1em; inset-block-start: 50%; - -webkit-transform: translate(calc(-1em * var(--horizontal-directionality-coefficient)), -50%); transform: translate(calc(-1em * var(--horizontal-directionality-coefficient)), -50%); } @@ -88,7 +82,6 @@ inset-block-end: 100%; inset-inline-start: 50%; margin-block-end: 1em; - -webkit-transform: translate(calc(-50% * var(--horizontal-directionality-coefficient)), 1em); transform: translate(calc(-50% * var(--horizontal-directionality-coefficient)), 1em); } 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 6da86c064ea0d..02d31b02d9c61 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 @@ -14,16 +14,12 @@ .navOption:hover { background-color: var(--side-nav-hover-color); color: var(--side-nav-hover-text-color); - -moz-transition: background 0.2s ease-in; - -o-transition: background 0.2s ease-in; transition: background 0.2s ease-in; } .navOption:active { background-color: var(--side-nav-active-color); color: var(--side-nav-active-text-color); - -moz-transition: background 0.2s ease-in; - -o-transition: background 0.2s ease-in; transition: background 0.2s ease-in; } @@ -33,9 +29,7 @@ inset-block-end: 60px; inline-size: 70px; z-index: 0; - -webkit-box-shadow: 3px -3px 5px 0px rgba(0,0,0,0.2); - -moz-box-shadow: 3px -3px 5px 0px rgba(0,0,0,0.2); - box-shadow: 3px -3px 5px 0px rgba(0,0,0,0.2); + box-shadow: 3px -3px 5px 0 rgba(0,0,0,0.2); } @media only screen and (max-width: 680px) { @@ -44,10 +38,10 @@ } .sideNav, .closed { - margin-block-start: 0px; + margin-block-start: 0; block-size: 60px; inline-size: 100%; - inset-block-end: 0px; + inset-block-end: 0; inset-block-start: auto; overflow-y: inherit; } @@ -60,15 +54,15 @@ } .navLabel { - margin-inline-start: 0px; + margin-inline-start: 0; inline-size: 100%; text-align: center; - inset-inline-start: 0px; + inset-inline-start: 0; font-size: 11px; } .navIcon { - margin-inline-start: 0px; + margin-inline-start: 0; inline-size: 100%; display: block; margin-block-start: 0.5em; diff --git a/src/renderer/components/side-nav/side-nav.css b/src/renderer/components/side-nav/side-nav.css index de36a3f621bf5..e0731ef474ea6 100644 --- a/src/renderer/components/side-nav/side-nav.css +++ b/src/renderer/components/side-nav/side-nav.css @@ -13,7 +13,6 @@ transition-duration: 150ms; transition-timing-function: ease-in-out; user-select: none; - -webkit-user-select: none; } .inner { @@ -53,16 +52,12 @@ .navOption:hover, .navChannel:hover { background-color: var(--side-nav-hover-color); color: var(--side-nav-hover-text-color); - -moz-transition: background 0.2s ease-in; - -o-transition: background 0.2s ease-in; transition: background 0.2s ease-in; } .navOption:active, .navChannel:active { background-color: var(--side-nav-active-color); color: var(--side-nav-active-text-color); - -moz-transition: background 0.2s ease-in; - -o-transition: background 0.2s ease-in; transition: background 0.2s ease-in; } @@ -88,7 +83,6 @@ margin: 0; position: absolute; inset-block-start: 50%; - -ms-transform: translateY(-50%); transform: translateY(-50%); } @@ -131,22 +125,23 @@ } .closed .navIcon { - margin-inline-start: 0px; + margin-inline-start: 0; inline-size: 100%; display: block; - margin-block-end: 0px; + margin-block-end: 0; } + .closed .navIconExpand{ block-size:1.3em; } .closed .navLabel { - margin-inline-start: 0px; + margin-inline-start: 0; inline-size: 100%; text-align: center; - inset-inline-start: 0px; + inset-inline-start: 0; font-size: 11px; - margin-block-end: 0em; + margin-block-end: 0; } .closed .navChannel { @@ -162,8 +157,7 @@ float: none; margin-block: 0; margin-inline: auto; - inset-block-start: 0px; - -ms-transform: none; + inset-block-start: 0; transform: none; margin-block-start: 0.3em; margin-block-end: 0.3em; @@ -187,16 +181,16 @@ } .topNavOption { - margin-block-start: 0px; + margin-block-start: 0; padding-inline-start: 10px; padding-inline-end: 10px; } .sideNav, .closed { - margin-block-start: 0px; + margin-block-start: 0; block-size: 60px; inline-size: 100%; - inset-block-end: 0px; + inset-block-end: 0; inset-block-start: auto; overflow-y: hidden; } @@ -204,22 +198,23 @@ .navOption, .closed .navOption { inline-size: 70px; block-size: 40px; - padding: 0px; + padding: 0; padding-block-start: 10px; padding-block-end: 10px; } .navLabel { - margin-inline-start: 0px; + margin-inline-start: 0; inline-size: 100%; text-align: center; - inset-inline-start: 0px; + inset-inline-start: 0; font-size: 11px; } .moreOption { display: block; } + .closed.hiddenLabels{ inline-size: 100%; } diff --git a/src/renderer/components/top-nav/top-nav.scss b/src/renderer/components/top-nav/top-nav.scss index 943ffce8b3a3b..86a10c06f7eb5 100644 --- a/src/renderer/components/top-nav/top-nav.scss +++ b/src/renderer/components/top-nav/top-nav.scss @@ -58,10 +58,9 @@ &.arrowBackwardDisabled, &.arrowForwardDisabled { - color: gray; + color: #808080; opacity: 0.5; pointer-events: none; - -webkit-user-select: none; user-select: none; } 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 e6159d142cc00..b1d74108b8341 100644 --- a/src/renderer/components/watch-video-comments/watch-video-comments.css +++ b/src/renderer/components/watch-video-comments/watch-video-comments.css @@ -56,7 +56,7 @@ inline-size: 60px; block-size: 60px; border-radius: 200px; - -webkit-border-radius: 200px; + border-radius: 200px; } .commentThumbnailHidden { @@ -72,7 +72,7 @@ color: rgb(0 0 0); background-color: rgb(235 160 172); border-radius: 50%; - -webkit-border-radius: 50%; + border-radius: 50%; } .commentAuthorWrapper { @@ -152,7 +152,7 @@ inline-size: 15px; block-size: 15px; border-radius: 50%; - -webkit-border-radius: 50%; + border-radius: 50%; } .commentHeartBadgeWhite { 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 fdf77ea22dda8..9bed56c015a15 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 @@ -65,7 +65,7 @@ cursor: pointer; background-color: var(--primary-color); border-radius: 200px; - -webkit-border-radius: 200px; + border-radius: 200px; } .superChatContent { @@ -105,7 +105,7 @@ } .comment .upperSuperChatMessage { - padding: 0px; + padding: 0; } .comment { @@ -125,7 +125,7 @@ margin-block-end: 10px; background-color: var(--primary-color); border-radius: 5px; - -webkit-border-radius: 5px; + border-radius: 5px; position: relative; } @@ -134,8 +134,8 @@ 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; + border-radius: 5px 5px 0 0; + border-radius: 5px 5px 0 0; } .upperSuperChatMessage .channelThumbnail { @@ -157,7 +157,7 @@ font-weight: bold; margin-inline-start: 65px; position: absolute; - inset-block-start: 0px; + inset-block-start: 0; } .superChatMessage .chatMessage { @@ -173,7 +173,7 @@ .channelThumbnail { inline-size: 25px; border-radius: 200px; - -webkit-border-radius: 200px; + border-radius: 200px; } .chatContent { @@ -216,7 +216,7 @@ inset-block-end: 20px; cursor: pointer; border-radius: 200px; - -webkit-border-radius: 200px; + border-radius: 200px; text-align: center; transition: background 0.2s ease-out; } diff --git a/src/renderer/scss-partials/_ft-list-item.scss b/src/renderer/scss-partials/_ft-list-item.scss index 15ca9f4042d95..c2e447590691d 100644 --- a/src/renderer/scss-partials/_ft-list-item.scss +++ b/src/renderer/scss-partials/_ft-list-item.scss @@ -86,7 +86,6 @@ $watched-transition-duration: 0.5s; grid-column: 1; grid-row: 1; user-select: none; - -webkit-user-select: none; } .thumbnailLink { @@ -239,9 +238,7 @@ $watched-transition-duration: 0.5s; font-size: 12px; } - & { - @include low-contrast-when-watched(var(--secondary-text-color)); - } + @include low-contrast-when-watched(var(--secondary-text-color)); .channelName { @include low-contrast-when-watched(var(--secondary-text-color)); @@ -341,7 +338,6 @@ $watched-transition-duration: 0.5s; .upcoming { text-transform: uppercase; user-select: none; - -webkit-user-select: none; } // we use h3 for semantic reasons but don't want to keep the h3 style diff --git a/src/renderer/themes.css b/src/renderer/themes.css index 22b904708c4a4..b8f96333f1dfd 100644 --- a/src/renderer/themes.css +++ b/src/renderer/themes.css @@ -68,21 +68,21 @@ --title-color: #3f7ac6; --bg-color: #f1f1f1; --favorite-icon-color: #FFD600; - --card-bg-color: #FFFFFF; - --secondary-card-bg-color: #eeeeee; - --scrollbar-color: #CCCCCC; + --card-bg-color: #FFF; + --secondary-card-bg-color: #eee; + --scrollbar-color: #CCC; --scrollbar-color-hover: #BDBDBD; - --side-nav-color: #FFFFFF; + --side-nav-color: #FFF; --side-nav-hover-color: #e0e0e0; --side-nav-active-color: #757575; --search-bar-color: #f5f5f5; } .system[data-system-theme*='dark'], .dark { - --primary-text-color: #EEEEEE; + --primary-text-color: #EEE; --secondary-text-color: #ddd; --tertiary-text-color: #999; - --title-color: #EEEEEE; + --title-color: #EEE; --bg-color: #212121; --favorite-icon-color: #FFEA00; --card-bg-color: #303030; @@ -96,13 +96,13 @@ } .black { - --primary-text-color: #EEEEEE; + --primary-text-color: #EEE; --secondary-text-color: #ddd; - --tertiary-text-color: #EEEEEE; - --title-color: #EEEEEE; - --bg-color: #000000; + --tertiary-text-color: #EEE; + --title-color: #EEE; + --bg-color: #000; --favorite-icon-color: #FFEA00; - --card-bg-color: #000000; + --card-bg-color: #000; --secondary-card-bg-color: rgba(0, 0, 0, 0.75); --scrollbar-color: #515151; --scrollbar-color-hover: #424242; @@ -113,10 +113,10 @@ } .gray { - --primary-text-color: #EEEEEE; + --primary-text-color: #EEE; --secondary-text-color: #E0E0E0; --tertiary-text-color: #F5F5F5; - --title-color: #EEEEEE; + --title-color: #EEE; --bg-color: #212121; --card-bg-color: #303030; --secondary-card-bg-color: rgba(0, 0, 0, 0.75); @@ -173,7 +173,7 @@ --bg-color: #ffeadd; --favorite-icon-color: #760278; --card-bg-color: #ffd1dc; - --secondary-card-bg-color: #FFFFFF; + --secondary-card-bg-color: #FFF; --scrollbar-color: #f5c8d3; --scrollbar-color-hover: #760278; --scrollbar-text-color-hover: var(--scrollbar-color); @@ -190,19 +190,19 @@ --primary-text-color: #FFFF; --secondary-text-color: #FFFF; --tertiary-text-color: #FFFF; - --title-color: #000000; + --title-color: #000; --bg-color: #ff008a; --favorite-icon-color: #FFEA00; --card-bg-color: #DE1C85; --secondary-card-bg-color: rgba(0, 0, 0, 0.75); - --scrollbar-color: #FFFFFF; + --scrollbar-color: #FFF; --scrollbar-color-hover: #C0F6FF; - --scrollbar-text-color-hover: #000000; + --scrollbar-text-color-hover: #000; --side-nav-color: #EE1E90; - --side-nav-hover-color: #FFFFFF; - --side-nav-hover-text-color: #000000; + --side-nav-hover-color: #FFF; + --side-nav-hover-text-color: #000; --side-nav-active-color: #959595; - --side-nav-active-text-color: #000000; + --side-nav-active-text-color: #000; --search-bar-color: #9C2D5D; --logo-icon: url("../../_icons/iconWhiteSmall.png"); --logo-text: url("../../_icons/textWhiteSmall.png"); @@ -210,16 +210,16 @@ many other colors than black and white. This means that the primary and secondary theme colors are forced here to be black so as to avoid any accessibility concerns. */ - --primary-color: #000000 !important; - --primary-color-hover: #000000 !important; - --primary-color-active: #000000 !important; - --text-with-main-color: #FFFFFF !important; - --text-with-accent-color: #FFFFFF !important; - --accent-color: #000000 !important; + --primary-color: #000 !important; + --primary-color-hover: #000 !important; + --primary-color-active: #000 !important; + --text-with-main-color: #FFF !important; + --text-with-accent-color: #FFF !important; + --accent-color: #000 !important; --accent-color-hover: #808080 !important; --accent-color-active: #6A739A !important; - --accent-color-light: #000000 !important; - --accent-color-visited: #000000 !important; + --accent-color-light: #000 !important; + --accent-color-visited: #000 !important; --accent-color-opacity1: rgba(0,0,0,0.04) !important; --accent-color-opacity2: rgba(0,0,0,0.12) !important; --accent-color-opacity3: rgba(255,255,255,0.16) !important; @@ -229,7 +229,7 @@ /* Given that the Hot Pink theme does not need link underlining due to meeting WCAG 2 Level AA (https://webaim.org/resources/linkcontrastchecker/?fcolor=FFFFFF&bcolor=DE1C85&lcolor=000000), it can be safely elided. This looks quite pleasant on this theme. */ -.hotPink a:not(:hover):not(:focus), .hotPink a.navOption:hover, .hotPink a.navOption:focus .hotPink *:not(:hover):not(:focus) { +.hotPink a:not(:hover):not(:focus), .hotPink .navOption:hover, .hotPink .navOption:focus, .hotPink *:not(:hover):not(:focus) { text-decoration: none; } @@ -247,7 +247,7 @@ it can be safely elided. This looks quite pleasant on this theme. */ .mainCyan, .mainTeal, .mainGreen { - --text-with-main-color: #FFFFFF; + --text-with-main-color: #FFF; --logo-icon-bar-color: url("../../_icons/iconWhiteSmall.png"); --logo-text-bar-color: url("../../_icons/textWhiteSmall.png"); } @@ -258,7 +258,7 @@ it can be safely elided. This looks quite pleasant on this theme. */ .mainAmber, .mainOrange, .mainDeepOrange { - --text-with-main-color: #000000; + --text-with-main-color: #000; --logo-icon-bar-color: url("../../_icons/iconBlackSmall.png"); --logo-text-bar-color: url("../../_icons/textBlackSmall.png"); } @@ -407,8 +407,8 @@ it can be safely elided. This looks quite pleasant on this theme. */ } .mainDraculaRed { - --primary-color: #FF5555; - --primary-color-hover: #FF6666; + --primary-color: #F55; + --primary-color-hover: #F66; --primary-color-active: #E64D4D; } @@ -531,7 +531,7 @@ it can be safely elided. This looks quite pleasant on this theme. */ .secCyan, .secTeal, .secGreen { - --text-with-accent-color: #FFFFFF; + --text-with-accent-color: #FFF; } .secLightGreen, @@ -540,7 +540,7 @@ it can be safely elided. This looks quite pleasant on this theme. */ .secAmber, .secOrange, .secDeepOrange { - --text-with-accent-color: #000000; + --text-with-accent-color: #000; } .secRed { @@ -803,11 +803,11 @@ it can be safely elided. This looks quite pleasant on this theme. */ } .secDraculaRed { - --accent-color: #FF5555; - --accent-color-hover: #FF6666; + --accent-color: #F55; + --accent-color-hover: #F66; --accent-color-active: #E64D4D; - --accent-color-light: #FF7777; - --accent-color-visited: #CC4444; + --accent-color-light: #F77; + --accent-color-visited: #C44; } .secDraculaYellow { @@ -1037,7 +1037,7 @@ body { --red-500: #f44336; } -#app { +.app { color: var(--primary-text-color); background-color: var(--bg-color); } diff --git a/src/renderer/videoJS.css b/src/renderer/videoJS.css index 813bb40c3302c..bbf783cab856d 100644 --- a/src/renderer/videoJS.css +++ b/src/renderer/videoJS.css @@ -620,7 +620,7 @@ body.vjs-full-window { .video-js button { background: none; - border: none; + border: 0; color: inherit; display: inline-block; font-size: inherit; @@ -1090,10 +1090,7 @@ body.vjs-full-window { cursor: pointer; padding: 0; margin: 0 0.45em 0 0.45em; - - -webkit-user-select: none; user-select: none; - background-color: #73859f; background-color: rgba(115, 133, 159, 0.5); } @@ -1736,7 +1733,7 @@ video::-webkit-media-text-track-display { .vjs-text-track-settings fieldset { margin: 5px; padding: 3px; - border: none; + border: 0; } .vjs-text-track-settings fieldset span { @@ -1799,7 +1796,7 @@ video::-webkit-media-text-track-display { left: 0; width: 100%; height: 100%; - border: none; + border: 0; z-index: -1000; } @@ -2028,7 +2025,7 @@ video::-webkit-media-text-track-display { width: 2em; height: 2em; line-height: 2em; - border: none; + border: 0; border-radius: 50%; font-size: 3.5em; background-color: rgba(0,0,0,.45); diff --git a/src/renderer/views/Channel/Channel.css b/src/renderer/views/Channel/Channel.css index 28567c0320034..701a0320d8f78 100644 --- a/src/renderer/views/Channel/Channel.css +++ b/src/renderer/views/Channel/Channel.css @@ -20,7 +20,7 @@ } .channelBannerContainer.default { - background-color: black; + background-color: #000; background-image: url("../../assets/img/defaultBanner.png"); background-repeat: repeat; background-size: contain; @@ -49,7 +49,6 @@ inline-size: 100px; block-size: 100px; border-radius: 200px; - -webkit-border-radius: 200px; object-fit: cover; } @@ -170,8 +169,6 @@ } .communityThumbnail { - /* stylelint-disable-next-line property-no-vendor-prefix */ - -webkit-border-radius: 200px; border-radius: 200px; block-size: 12%; inline-size: 12%; @@ -208,7 +205,7 @@ flex: 1 1 0%; } - #communityPanel { + .communityPanel { margin-block-start: 1rem; } } diff --git a/src/renderer/views/Channel/Channel.vue b/src/renderer/views/Channel/Channel.vue index f8cfb0b5c6ed8..b2fa1607f3fc6 100644 --- a/src/renderer/views/Channel/Channel.vue +++ b/src/renderer/views/Channel/Channel.vue @@ -369,6 +369,7 @@ Date: Sat, 18 Nov 2023 11:22:20 -0600 Subject: [PATCH 3/9] Add back stylelint-config-standard --- .stylelintrc.json | 2 +- src/renderer/App.css | 7 +- .../distraction-settings.css | 2 +- .../experimental-settings.css | 3 +- .../components/ft-button/ft-button.css | 4 +- src/renderer/components/ft-card/ft-card.css | 2 +- .../ft-channel-bubble/ft-channel-bubble.css | 3 +- .../ft-community-poll/ft-community-poll.css | 3 +- .../ft-community-post/ft-community-post.scss | 11 +- .../ft-input-tags/ft-input-tags.css | 4 +- src/renderer/components/ft-input/ft-input.css | 10 +- .../ft-notification-banner.css | 5 +- .../ft-profile-bubble/ft-profile-bubble.css | 1 - .../ft-profile-edit/ft-profile-edit.css | 3 +- .../ft-profile-selector.css | 1 - .../components/ft-prompt/ft-prompt.css | 2 +- .../ft-radio-button/ft-radio-button.css | 4 +- .../ft-search-filters/ft-search-filters.css | 10 +- .../components/ft-select/ft-select.css | 20 +- .../ft-settings-section.scss | 13 +- .../ft-share-button/ft-share-button.scss | 3 +- .../components/ft-slider/ft-slider.css | 18 +- .../ft-sponsor-block-category.scss | 2 +- src/renderer/components/ft-toast/ft-toast.css | 2 +- .../ft-toggle-switch/ft-toggle-switch.scss | 2 +- .../components/ft-tooltip/ft-tooltip.css | 46 +-- .../playlist-info/playlist-info.scss | 4 +- .../side-nav-more-options.css | 7 +- src/renderer/components/side-nav/side-nav.css | 44 ++- .../subscriptions-tab-ui.css | 4 +- src/renderer/components/top-nav/top-nav.scss | 28 +- .../watch-video-chapters.css | 11 +- .../watch-video-comments.css | 8 +- .../watch-video-description.css | 2 +- .../watch-video-info/watch-video-info.scss | 13 +- .../watch-video-live-chat.css | 73 ++--- .../watch-video-playlist.css | 5 + src/renderer/scss-partials/_ft-list-item.scss | 139 +++++---- src/renderer/themes.css | 282 +++++++++--------- src/renderer/views/About/About.scss | 4 +- src/renderer/views/Channel/Channel.css | 19 +- src/renderer/views/Hashtag/Hashtag.css | 2 +- src/renderer/views/History/History.css | 2 +- src/renderer/views/Playlist/Playlist.css | 5 +- src/renderer/views/Popular/Popular.css | 4 +- .../views/ProfileSettings/ProfileSettings.css | 2 +- src/renderer/views/Search/Search.css | 2 +- .../SubscribedChannels/SubscribedChannels.css | 2 +- .../views/Subscriptions/Subscriptions.css | 5 +- src/renderer/views/Trending/Trending.css | 7 +- .../views/UserPlaylists/UserPlaylists.css | 2 +- src/renderer/views/Watch/Watch.scss | 20 +- 52 files changed, 420 insertions(+), 459 deletions(-) diff --git a/.stylelintrc.json b/.stylelintrc.json index 19d1f797d6485..e32dc52314fb9 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -1,6 +1,6 @@ { "plugins": ["stylelint-use-logical-spec", "@double-great/stylelint-a11y"], - "extends": ["stylelint-config-sass-guidelines"], + "extends": ["stylelint-config-standard", "stylelint-config-sass-guidelines"], "overrides": [ { "files": ["**/*.scss"], diff --git a/src/renderer/App.css b/src/renderer/App.css index 0671f997660ff..24b765ca8d13e 100644 --- a/src/renderer/App.css +++ b/src/renderer/App.css @@ -6,7 +6,7 @@ .app { display: flex; flex-wrap: wrap; - font-family: 'Roboto', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; + font-family: Roboto, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; block-size: 100%; } @@ -46,7 +46,7 @@ opacity: 0; } -@media only screen and (max-width: 680px) { +@media only screen and (width <= 680px) { .routerView { margin-block: 68px; margin-inline: 8px; @@ -58,7 +58,6 @@ } .flexBox { - margin-block-start: 60px; - margin-block-end: -75px; + margin-block: 60px -75px; } } diff --git a/src/renderer/components/distraction-settings/distraction-settings.css b/src/renderer/components/distraction-settings/distraction-settings.css index 7ea65384e0c20..2862421a81de2 100644 --- a/src/renderer/components/distraction-settings/distraction-settings.css +++ b/src/renderer/components/distraction-settings/distraction-settings.css @@ -2,7 +2,7 @@ text-align: center; } -@media only screen and (max-width: 800px) { +@media only screen and (width <= 800px) { .hide-on-mobile { display: none; } diff --git a/src/renderer/components/experimental-settings/experimental-settings.css b/src/renderer/components/experimental-settings/experimental-settings.css index 3f20bf0554619..2b20e6e674d38 100644 --- a/src/renderer/components/experimental-settings/experimental-settings.css +++ b/src/renderer/components/experimental-settings/experimental-settings.css @@ -1,6 +1,5 @@ .experimental-warning { text-align: center; font-weight: bold; - padding-inline-start: 4%; - padding-inline-end: 4% + padding-inline: 4% 4% } diff --git a/src/renderer/components/ft-button/ft-button.css b/src/renderer/components/ft-button/ft-button.css index d3287977e1aff..4a0cc58edf2c5 100644 --- a/src/renderer/components/ft-button/ft-button.css +++ b/src/renderer/components/ft-button/ft-button.css @@ -1,5 +1,5 @@ .btn { - font-family: 'Roboto', sans-serif; + font-family: Roboto, sans-serif; min-inline-size: 100px; font-size: 0.9rem; padding-block: 10px; @@ -18,7 +18,7 @@ font-weight: 500; vertical-align: middle; margin: 5px; - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); + box-shadow: 0 1px 2px rgb(0 0 0 / 50%); } .btn:disabled { diff --git a/src/renderer/components/ft-card/ft-card.css b/src/renderer/components/ft-card/ft-card.css index b9ef73f8b7f41..250d9a851753b 100644 --- a/src/renderer/components/ft-card/ft-card.css +++ b/src/renderer/components/ft-card/ft-card.css @@ -3,5 +3,5 @@ margin: 8px; padding-block: 3px 16px; padding-inline: 16px; - box-shadow: 0 1px 2px rgba(0,0,0,.1); + box-shadow: 0 1px 2px rgb(0 0 0 / 10%); } diff --git a/src/renderer/components/ft-channel-bubble/ft-channel-bubble.css b/src/renderer/components/ft-channel-bubble/ft-channel-bubble.css index 2bfe010d49662..de49d0567260d 100644 --- a/src/renderer/components/ft-channel-bubble/ft-channel-bubble.css +++ b/src/renderer/components/ft-channel-bubble/ft-channel-bubble.css @@ -24,13 +24,12 @@ inline-size: 50px; block-size: 50px; border-radius: 100%; - border-radius: 100%; } .selected { position: absolute; inset-block-start: 10px; - background-color: rgba(0, 0, 0, 0.5); + background-color: rgb(0 0 0 / 50%); } .icon { diff --git a/src/renderer/components/ft-community-poll/ft-community-poll.css b/src/renderer/components/ft-community-poll/ft-community-poll.css index 021dd0b6d63d8..3f954536a43c7 100644 --- a/src/renderer/components/ft-community-poll/ft-community-poll.css +++ b/src/renderer/components/ft-community-poll/ft-community-poll.css @@ -33,11 +33,10 @@ .option { display: flex; align-items: center; - padding-block-end: 10px; + padding-block: 5px; border-radius: 5px; border-style: solid; border-width: 1px; - padding-block: 5px; padding-inline-start: 10px; margin-block-end: 10px; } diff --git a/src/renderer/components/ft-community-post/ft-community-post.scss b/src/renderer/components/ft-community-post/ft-community-post.scss index c054d1294ba70..0332ac2c34d41 100644 --- a/src/renderer/components/ft-community-post/ft-community-post.scss +++ b/src/renderer/components/ft-community-post/ft-community-post.scss @@ -4,7 +4,8 @@ .outside { margin: auto; inline-size: 40%; - @media screen and (max-width: 768px) { + + @media screen and (width <= 768px) { inline-size: 100%; } } @@ -61,7 +62,7 @@ max-inline-size: 210px; text-align: start; - @media screen and (max-width: 680px) { + @media screen and (width <= 680px) { margin-inline-start: 0; text-align: start; } @@ -73,8 +74,7 @@ } .likeCount { - margin-inline-start: 5px; - margin-inline-end: 6px; + margin-inline: 5px 6px; } } @@ -83,8 +83,7 @@ .videoThumbnail { display: flex; - margin-block-end: auto; - margin-block-start: auto; + margin-block: auto; position: relative; inline-size: fit-content; diff --git a/src/renderer/components/ft-input-tags/ft-input-tags.css b/src/renderer/components/ft-input-tags/ft-input-tags.css index 150f85ff0041b..bdf006aff437c 100644 --- a/src/renderer/components/ft-input-tags/ft-input-tags.css +++ b/src/renderer/components/ft-input-tags/ft-input-tags.css @@ -8,7 +8,7 @@ } .disabledMsg { - color: rgb(233, 255, 108); + color: rgb(233 255 108); padding-block-end: 10px; } @@ -64,7 +64,7 @@ margin-block-start: 10px; } -@media only screen and (max-width: 576px) { +@media only screen and (width <= 576px) { .ft-input-tags-component { inline-size: 100%; } diff --git a/src/renderer/components/ft-input/ft-input.css b/src/renderer/components/ft-input/ft-input.css index cc0d94ef44e32..e5f9a17041073 100644 --- a/src/renderer/components/ft-input/ft-input.css +++ b/src/renderer/components/ft-input/ft-input.css @@ -1,3 +1,4 @@ +/* stylelint-disable no-descending-specificity */ .ft-input-component { position: relative; } @@ -49,6 +50,7 @@ position: absolute; inset-block-start: 5px; inset-inline-start: 0; + /* To be higher than `.inputWrapper` */ z-index: 1; margin-block: 0; @@ -58,7 +60,6 @@ color: var(--primary-text-color); opacity: 0; transition: background 0.2s ease-in; - transition: background 0.2s ease-in; } .clearInputTextButton.visible:hover { @@ -74,7 +75,6 @@ background-color: var(--tertiary-text-color); color: var(--side-nav-active-text-color); transition: background 0.2s ease-in; - transition: background 0.2s ease-in; } .search .clearInputTextButton { @@ -135,12 +135,14 @@ inset-inline-end: 0; border-radius: 100%; color: var(--primary-text-color); + /* this should look disabled by default */ - opacity: 50%; + opacity: 0.5; } .inputAction.enabled { - opacity: 100%; + opacity: 1; + /* Only look respond to cursor when enabled */ cursor: pointer; } diff --git a/src/renderer/components/ft-notification-banner/ft-notification-banner.css b/src/renderer/components/ft-notification-banner/ft-notification-banner.css index 4bf8377664972..2f8464be3d343 100644 --- a/src/renderer/components/ft-notification-banner/ft-notification-banner.css +++ b/src/renderer/components/ft-notification-banner/ft-notification-banner.css @@ -1,6 +1,7 @@ .ftNotificationBanner { background-color: var(--primary-color); color: var(--text-with-main-color); + /* background-color: var(--accent-color); color: var(--text-with-accent-color); @@ -9,13 +10,13 @@ padding: 16px; padding-block: 3px 5px; padding-inline: 16px; - box-shadow: 0 1px 2px rgba(0,0,0,.1); + box-shadow: 0 1px 2px rgb(0 0 0 / 10%); position: relative; cursor: pointer; } .ftNotificationBanner:focus { - box-shadow: 20px 20px 20px rgba(0,0,0,.1); + box-shadow: 20px 20px 20px rgb(0 0 0 / 10%); } .message { 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 9c73d2004b1c6..1dda37d0f1420 100644 --- a/src/renderer/components/ft-profile-bubble/ft-profile-bubble.css +++ b/src/renderer/components/ft-profile-bubble/ft-profile-bubble.css @@ -19,7 +19,6 @@ margin-block: 20px 5px; margin-inline: auto; border-radius: 50%; - border-radius: 50%; } .initial { 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 527fcdbca4f47..e829173754783 100644 --- a/src/renderer/components/ft-profile-edit/ft-profile-edit.css +++ b/src/renderer/components/ft-profile-edit/ft-profile-edit.css @@ -28,7 +28,6 @@ margin: 10px; cursor: pointer; border-radius: 50%; - border-radius: 50%; } .initial { @@ -40,7 +39,7 @@ user-select: none; } -@media only screen and (max-width: 680px) { +@media only screen and (width <= 680px) { .card { inline-size: 90%; } 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 1f29fe34446d4..a5cefccac5be4 100644 --- a/src/renderer/components/ft-profile-selector/ft-profile-selector.css +++ b/src/renderer/components/ft-profile-selector/ft-profile-selector.css @@ -6,7 +6,6 @@ display: flex; justify-content: center; border-radius: 50%; - border-radius: 50%; } .colorOption:hover { diff --git a/src/renderer/components/ft-prompt/ft-prompt.css b/src/renderer/components/ft-prompt/ft-prompt.css index 2071739da0677..5b58d4d3d2d01 100644 --- a/src/renderer/components/ft-prompt/ft-prompt.css +++ b/src/renderer/components/ft-prompt/ft-prompt.css @@ -4,7 +4,7 @@ inset-inline-start: 0; inline-size: 100%; block-size: 100%; - background-color: rgba(0, 0, 0, 0.7); + background-color: rgb(0 0 0 / 70%); z-index: 10; padding: 15px; box-sizing: border-box; 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 1a77f98aac8b4..7a5e14ad680b8 100644 --- a/src/renderer/components/ft-radio-button/ft-radio-button.css +++ b/src/renderer/components/ft-radio-button/ft-radio-button.css @@ -1,3 +1,4 @@ +/* stylelint-disable no-descending-specificity */ pure-checkbox input[type="checkbox"], .pure-radiobutton input[type="checkbox"], .pure-checkbox input[type="radio"], .pure-radiobutton input[type="radio"] { border: 0; clip: rect(0 0 0 0); @@ -18,7 +19,6 @@ pure-checkbox input[type="checkbox"], .pure-radiobutton input[type="checkbox"], .pure-checkbox input[type="checkbox"] + label, .pure-radiobutton input[type="checkbox"] + label, .pure-checkbox input[type="radio"] + label, .pure-radiobutton input[type="radio"] + label { position: relative; padding-inline-start: 2em; - vertical-align: middle; user-select: none; cursor: pointer; display: block; @@ -93,7 +93,7 @@ pure-checkbox input[type="checkbox"], .pure-radiobutton input[type="checkbox"], background: var(--primary-color); } -.pure-checkbox input[type="checkbox"]:checked + label::after, .pure-radiobutton input[type="checkbox"]:checked + label::after { transform: rotate(-45deg) scale(1); } +.pure-radiobutton input[type="checkbox"]:checked + label::after { transform: rotate(-45deg) scale(1); } @keyframes borderscale { 50% { 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 cb31aba278150..33ba9f6448f50 100644 --- a/src/renderer/components/ft-search-filters/ft-search-filters.css +++ b/src/renderer/components/ft-search-filters/ft-search-filters.css @@ -1,16 +1,12 @@ .searchFilterInner { max-inline-size: 800px; - margin-inline-start: auto; - margin-inline-end: auto; - + margin-inline: auto; padding-block: 20px 70px; padding-inline: 20px; max-block-size: 410px; overflow-y: auto; - background-color: var(--card-bg-color); - box-shadow: 0 1px 2px rgba(0,0,0,.1); - + box-shadow: 0 1px 2px rgb(0 0 0 / 10%); opacity: 0.9; } @@ -28,7 +24,7 @@ margin-inline: auto; } -@media only screen and (max-width: 600px) { +@media only screen and (width <= 600px) { .searchRadio { border-inline-end: 0; } diff --git a/src/renderer/components/ft-select/ft-select.css b/src/renderer/components/ft-select/ft-select.css index f187c0d979ae7..41548720aac6c 100644 --- a/src/renderer/components/ft-select/ft-select.css +++ b/src/renderer/components/ft-select/ft-select.css @@ -20,7 +20,7 @@ * https://codepen.io/pavelvaravko/pen/qjojOr */ -/* select starting stylings ------------------------------*/ +/* select starting stylings ------------------------------ */ .select { position: relative; inline-size: 200px; @@ -29,11 +29,6 @@ margin-block-start: 30px; } -.disabled, .disabled + .iconSelect { - opacity: 0.4; - cursor: not-allowed; -} - .select-text { position: relative; font-family: inherit; @@ -59,7 +54,6 @@ /* Use custom arrow */ .select .select-text { - appearance: none; appearance:none; text-overflow: ellipsis; padding-inline-end: 1.1rem; @@ -69,6 +63,7 @@ position: absolute; inset-block-start: 10px; inset-inline-end: 15px; + /* Styling the down arrow */ padding: 0; content: ''; @@ -78,6 +73,11 @@ color: var(--tertiary-text-color); } +.disabled, .disabled + .iconSelect { + opacity: 0.4; + cursor: not-allowed; +} + .selectTooltip { position: absolute; inset-block-start: -20px; @@ -145,13 +145,13 @@ opacity: 0.5; } -@media only screen and (max-width: 1000px) { +@media only screen and (width <= 1000px) { .select .select-text { max-inline-size: 240px; } } -@media only screen and (max-width: 800px) { +@media only screen and (width <= 800px) { .select { inline-size: 100%; } @@ -162,7 +162,7 @@ } } -@media only screen and (max-width: 680px) { +@media only screen and (width <= 680px) { .select { padding: 0; margin-inline-end: -15px; 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 b5d609c179251..d748f2946c5ca 100644 --- a/src/renderer/components/ft-settings-section/ft-settings-section.scss +++ b/src/renderer/components/ft-settings-section/ft-settings-section.scss @@ -4,7 +4,7 @@ margin-inline: auto; inline-size: 85%; - @media only screen and (max-width: 800px) { + @media only screen and (width <= 800px) { inline-size: 100%; } @@ -20,7 +20,7 @@ } > div:not(:last-child, .ft-flex-box) { - @media only screen and (max-width: 800px) { + @media only screen and (width <= 800px) { margin-block-end: 20px; } } @@ -51,7 +51,7 @@ grid-template-columns: auto auto; justify-content: space-evenly; - @media only screen and (max-width: 680px) { + @media only screen and (width <= 680px) { grid-template-columns: auto; } } @@ -62,6 +62,7 @@ :deep(.switchColumnGrid) { @extend %switch-grid; + align-items: start; } @@ -75,19 +76,19 @@ text-align: center; } -@media only screen and (max-width: 460px) { +@media only screen and (width <= 460px) { :deep(.settingsFlexStart460px) { justify-content: flex-start; } } -@media only screen and (max-width: 500px) { +@media only screen and (width <= 500px) { :deep(.settingsFlexStart500px) { justify-content: flex-start; } } -@media only screen and (max-width: 680px) { +@media only screen and (width <= 680px) { .settingsSection { > div { :deep(.text.bottom) { 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 cfccc6a6bf3e1..b04bd46799524 100644 --- a/src/renderer/components/ft-share-button/ft-share-button.scss +++ b/src/renderer/components/ft-share-button/ft-share-button.scss @@ -1,3 +1,4 @@ +/* stylelint-disable no-descending-specificity */ .shareLinks { display: grid; grid-auto-flow: column; @@ -89,7 +90,7 @@ } } -@media only screen and (max-width: 450px) { +@media only screen and (width <= 450px) { .shareLinks { grid-auto-flow: row; margin-inline: auto; diff --git a/src/renderer/components/ft-slider/ft-slider.css b/src/renderer/components/ft-slider/ft-slider.css index a76afcf4f37c4..c6463d7c25650 100644 --- a/src/renderer/components/ft-slider/ft-slider.css +++ b/src/renderer/components/ft-slider/ft-slider.css @@ -1,11 +1,13 @@ +/* stylelint-disable no-descending-specificity */ .pure-material-slider { --pure-material-safari-helper1: var(--accent-color-opacity1); --pure-material-safari-helper2: var(--accent-color-opacity2); --pure-material-safari-helper3: var(--accent-color-opacity3); --pure-material-safari-helper4: var(--accent-color-opacity4); + display: inline-block; inline-size: 380px; - color: rgba(var(--primary-text-color), 0.87); + color: rgb(var(--primary-text-color) 0.87); font-family: var(--pure-material-font, "Roboto", "Segoe UI", BlinkMacSystemFont, system-ui, -apple-system); font-size: 16px; line-height: 1.5; @@ -68,7 +70,6 @@ /* Webkit | Thumb */ .pure-material-slider > input::-webkit-slider-thumb { - appearance: none; appearance: none; border: 0; border-radius: 50%; @@ -99,7 +100,7 @@ /* Webkit | Disabled */ .pure-material-slider > input:disabled::-webkit-slider-runnable-track { - background-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.38); + background-color: rgb(var(--pure-material-onsurface-rgb, 0, 0, 0) 0.38); } .pure-material-slider > input:disabled::-webkit-slider-thumb { @@ -121,7 +122,6 @@ /* Moz | Thumb */ .pure-material-slider > input::-moz-range-thumb { - appearance: none; appearance: none; border: 0; border-radius: 50%; @@ -159,11 +159,11 @@ /* Moz | Disabled */ .pure-material-slider > input:disabled::-moz-range-track { - background-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.38); + background-color: rgb(var(--pure-material-onsurface-rgb, 0, 0, 0) 0.38); } .pure-material-slider > input:disabled::-moz-range-progress { - background-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.87); + background-color: rgb(var(--pure-material-onsurface-rgb, 0, 0, 0) 0.87); } .pure-material-slider > input:disabled::-moz-range-thumb { @@ -237,11 +237,11 @@ /* MS | Disabled */ .pure-material-slider > input:disabled::-ms-fill-lower { - background-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.38); + background-color: rgb(var(--pure-material-onsurface-rgb, 0, 0, 0) 0.38); } .pure-material-slider > input:disabled::-ms-fill-upper { - background-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.38); + background-color: rgb(var(--pure-material-onsurface-rgb, 0, 0, 0) 0.38); opacity: 0.38; } @@ -251,7 +251,7 @@ transform: scale(4, 4); } -@media only screen and (max-width: 680px) { +@media only screen and (width <= 680px) { .pure-material-slider { inline-size: 100%; } 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 b052038c4443a..a42c9ecee7a1d 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 @@ -3,7 +3,7 @@ padding-block: 0; padding-inline: 10px; - @media only screen and (max-width: 680px) { + @media only screen and (width <= 680px) { inline-size: 100%; } diff --git a/src/renderer/components/ft-toast/ft-toast.css b/src/renderer/components/ft-toast/ft-toast.css index 49efd0d052651..d13c79da101d2 100644 --- a/src/renderer/components/ft-toast/ft-toast.css +++ b/src/renderer/components/ft-toast/ft-toast.css @@ -15,7 +15,7 @@ margin: 5px; text-align: center; overflow-y: auto; - background-color: rgba(0, 0, 0, 0.7); + background-color: rgb(0 0 0 / 70%); color: #FFF; opacity: 0; border-radius: 20px; 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 5d939f8c56656..b96c676fa22ae 100644 --- a/src/renderer/components/ft-toggle-switch/ft-toggle-switch.scss +++ b/src/renderer/components/ft-toggle-switch/ft-toggle-switch.scss @@ -74,7 +74,7 @@ } } - @media (max-width: 680px) { + @media (width <= 680px) { 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 6d3db0a09c0f3..e2d804503f1c0 100644 --- a/src/renderer/components/ft-tooltip/ft-tooltip.css +++ b/src/renderer/components/ft-tooltip/ft-tooltip.css @@ -7,30 +7,8 @@ padding: 0; } -.button:focus + .text, -.button:hover + .text { - opacity: 1; - visibility: visible; -} - -.button:focus + .text.bottom, -.button:hover + .text.bottom, -.button:hover + .text.bottom-left, -.button:hover + .text.bottom-left, -.button:focus + .text.top, -.button:hover + .text.top { - transform: translate(calc(-50% * var(--horizontal-directionality-coefficient)), 0); -} - -.button:focus + .text.left, -.button:hover + .text.left, -.button:focus + .text.right, -.button:hover + .text.right { - transform: translate(0, -50%); -} - .text { - background-color: rgba(0, 0, 0, 0.8); + background-color: rgb(0 0 0 / 80%); border-radius: 20px; color: #fff; font-size: 1rem; @@ -85,6 +63,28 @@ transform: translate(calc(-50% * var(--horizontal-directionality-coefficient)), 1em); } +.button:focus + .text, +.button:hover + .text { + opacity: 1; + visibility: visible; +} + +.button:focus + .text.bottom, +.button:hover + .text.bottom, +.button:focus + .text.bottom-left, +.button:hover + .text.bottom-left, +.button:focus + .text.top, +.button:hover + .text.top { + transform: translate(calc(-50% * var(--horizontal-directionality-coefficient)), 0); +} + +.button:focus + .text.left, +.button:hover + .text.left, +.button:focus + .text.right, +.button:hover + .text.right { + transform: translate(0, -50%); +} + .tooltip { display: inline-block; position: relative; diff --git a/src/renderer/components/playlist-info/playlist-info.scss b/src/renderer/components/playlist-info/playlist-info.scss index 5a64adb2dd716..2b5d4aab42e06 100644 --- a/src/renderer/components/playlist-info/playlist-info.scss +++ b/src/renderer/components/playlist-info/playlist-info.scss @@ -6,7 +6,7 @@ cursor: pointer; inline-size: 100%; - @media only screen and (max-width: 800px) { + @media only screen and (width <= 800px) { display: none; } } @@ -29,7 +29,7 @@ overflow-y: auto; white-space: break-spaces; - @media only screen and (max-width: 500px) { + @media only screen and (width <= 500px) { max-block-size: 10vh; } } 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 02d31b02d9c61..1126225866802 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 @@ -29,10 +29,10 @@ inset-block-end: 60px; inline-size: 70px; z-index: 0; - box-shadow: 3px -3px 5px 0 rgba(0,0,0,0.2); + box-shadow: 3px -3px 5px 0 rgb(0 0 0 / 20%); } -@media only screen and (max-width: 680px) { +@media only screen and (width <= 680px) { .sideNavMoreOptions { display: block; } @@ -41,8 +41,7 @@ margin-block-start: 0; block-size: 60px; inline-size: 100%; - inset-block-end: 0; - inset-block-start: auto; + inset-block: auto 0; overflow-y: inherit; } diff --git a/src/renderer/components/side-nav/side-nav.css b/src/renderer/components/side-nav/side-nav.css index e0731ef474ea6..dec21cf60961c 100644 --- a/src/renderer/components/side-nav/side-nav.css +++ b/src/renderer/components/side-nav/side-nav.css @@ -18,8 +18,7 @@ .inner { block-size: 100%; inline-size: 200px; - overflow-y: auto; - overflow-x: hidden; + overflow: hidden auto; } .closed .inner { @@ -49,6 +48,19 @@ display: none; } +.navOption, .channelLink { + display: block; + color: inherit; + text-decoration: inherit; +} + + +.navOption .navLabel { + margin-inline-start: 40px; + overflow: hidden; + word-break: break-word; +} + .navOption:hover, .navChannel:hover { background-color: var(--side-nav-hover-color); color: var(--side-nav-hover-text-color); @@ -65,12 +77,6 @@ margin-inline-start: 10px; } -.navOption .navLabel { - margin-inline-start: 40px; - overflow: hidden; - word-break: break-word; -} - .navChannel .navLabel { overflow: hidden; margin-inline-start: 40px; @@ -86,12 +92,6 @@ transform: translateY(-50%); } -.navOption, .channelLink { - display: block; - color: inherit; - text-decoration: inherit; -} - .channelThumbnail { border-radius: 50%; vertical-align: middle; @@ -155,15 +155,13 @@ position: static; display: block; float: none; - margin-block: 0; margin-inline: auto; inset-block-start: 0; transform: none; - margin-block-start: 0.3em; - margin-block-end: 0.3em; + margin-block: 0.3em; } -@media only screen and (max-width: 680px) { +@media only screen and (width <= 680px) { .inner { display: contents; /* sunglasses emoji */ } @@ -176,22 +174,19 @@ position: fixed; inset-inline-start: 0; inset-block-end: 0; - display: flex; } .topNavOption { margin-block-start: 0; - padding-inline-start: 10px; - padding-inline-end: 10px; + padding-inline: 10px; } .sideNav, .closed { margin-block-start: 0; block-size: 60px; inline-size: 100%; - inset-block-end: 0; - inset-block-start: auto; + inset-block: auto 0; overflow-y: hidden; } @@ -199,8 +194,7 @@ inline-size: 70px; block-size: 40px; padding: 0; - padding-block-start: 10px; - padding-block-end: 10px; + padding-block: 10px 10px; } .navLabel { 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 43d037639526c..07025c77f31bb 100644 --- a/src/renderer/components/subscriptions-tab-ui/subscriptions-tab-ui.css +++ b/src/renderer/components/subscriptions-tab-ui/subscriptions-tab-ui.css @@ -14,13 +14,13 @@ inset-inline-end: 10px; } -@media only screen and (max-width: 350px) { +@media only screen and (width <= 350px) { .floatingTopButton { position: absolute } } -@media only screen and (max-width: 680px) { +@media only screen and (width <= 680px) { .card { inline-size: 90%; } diff --git a/src/renderer/components/top-nav/top-nav.scss b/src/renderer/components/top-nav/top-nav.scss index 86a10c06f7eb5..e53ece4e327e8 100644 --- a/src/renderer/components/top-nav/top-nav.scss +++ b/src/renderer/components/top-nav/top-nav.scss @@ -14,15 +14,14 @@ box-shadow: 0 2px 1px 0 var(--primary-shadow-color); display: flex; block-size: 60px; - inset-inline-start: 0; + inset-inline: 0; line-height: 60px; position: sticky; - inset-inline-end: 0; inset-block-start: 0; inline-size: 100%; z-index: 4; - @media only screen and (min-width: 961px) { + @media only screen and (width >= 961px) { display: grid; grid-template-columns: 1fr 440px 1fr; } @@ -31,13 +30,13 @@ background-color: var(--primary-color); } - @media only screen and (max-width: 680px) { + @media only screen and (width <= 680px) { position: fixed; } } .menuIcon { - @media only screen and (max-width: 680px) { + @media only screen and (width <= 680px) { display: none; } } @@ -111,13 +110,13 @@ } .navSearchIcon { - @media only screen and (min-width: 681px) { + @media only screen and (width >= 681px) { display: none; } } .navNewWindowIcon { - @media only screen and (max-width: 680px) { + @media only screen and (width <= 680px) { display: none; } } @@ -172,7 +171,7 @@ inset-block-start: -3px; inline-size: 100px; - @media only screen and (max-width: 680px) { + @media only screen and (width <= 680px) { display: none; } @@ -191,11 +190,10 @@ align-items: center; display: flex; - @media only screen and (max-width: 680px) { + @media only screen and (width <= 680px) { background-color: var(--side-nav-color); - inset-inline-start: 0; + inset-inline: 0; position: fixed; - inset-inline-end: 0; inset-block-start: 60px; @include top-nav-is-colored { @@ -209,18 +207,16 @@ } .searchFilters { - inset-inline-start: 0; + inset-inline: 0; margin-block: 10px 20px; margin-inline: 220px 20px; position: absolute; - inset-inline-end: 0; transition: margin 150ms ease-in-out; - @media only screen and (max-width: 680px) { - inset-inline-start: 0; + @media only screen and (width <= 680px) { + inset-inline: 0; margin-block: 95px 0; margin-inline: 10px; - inset-inline-end: 0; } } } 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 4091110e1de16..844abd9c1c751 100644 --- a/src/renderer/components/watch-video-chapters/watch-video-chapters.css +++ b/src/renderer/components/watch-video-chapters/watch-video-chapters.css @@ -3,8 +3,7 @@ } .chaptersTitle { - margin-block-start: 10px; - margin-block-end: 0; + margin-block: 10px 0; cursor: pointer; } @@ -35,11 +34,9 @@ .chapter { display: grid; - grid-template-areas: - 'thumbnail title' - 'thumbnail timestamp'; - grid-template-columns: auto 1fr; - grid-template-rows: min(auto, 2fr) 1fr; + grid-template: + 'thumbnail title' 2fr + 'thumbnail timestamp' 2fr / auto 1fr; column-gap: 10px; justify-items: start; cursor: pointer; 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 b1d74108b8341..1158dca615feb 100644 --- a/src/renderer/components/watch-video-comments/watch-video-comments.css +++ b/src/renderer/components/watch-video-comments/watch-video-comments.css @@ -31,7 +31,7 @@ float: var(--float-right-ltr-rtl-value); } -@media only screen and (max-width: 800px) { +@media only screen and (width <= 800px) { .commentSort { float: none; inline-size: fit-content; @@ -56,7 +56,6 @@ inline-size: 60px; block-size: 60px; border-radius: 200px; - border-radius: 200px; } .commentThumbnailHidden { @@ -72,7 +71,6 @@ color: rgb(0 0 0); background-color: rgb(235 160 172); border-radius: 50%; - border-radius: 50%; } .commentAuthorWrapper { @@ -106,9 +104,8 @@ .commentPinned { font-weight: normal; font-size: 12px; - margin-block-start: 0; + margin-block: 0 5px; margin-inline-start: 68px; - margin-block-end: 5px; } .commentDate { @@ -152,7 +149,6 @@ inline-size: 15px; block-size: 15px; border-radius: 50%; - border-radius: 50%; } .commentHeartBadgeWhite { 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 721c263445f69..c7b2a437e55d8 100644 --- a/src/renderer/components/watch-video-description/watch-video-description.css +++ b/src/renderer/components/watch-video-description/watch-video-description.css @@ -4,7 +4,7 @@ } .description { - font-family: 'Roboto', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; + font-family: Roboto, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; font-size: 17px; white-space: pre-wrap; overflow-wrap: anywhere; 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 ad7c658529c18..397da900a8fbc 100644 --- a/src/renderer/components/watch-video-info/watch-video-info.scss +++ b/src/renderer/components/watch-video-info/watch-video-info.scss @@ -4,7 +4,7 @@ grid-template-columns: auto minmax(min-content, 1fr); padding: 16px; - @media screen and (max-width: 680px) { + @media screen and (width <= 680px) { grid-template-columns: auto; } } @@ -55,7 +55,7 @@ font-size: 15px; text-align: end; - @media screen and (max-width: 680px) { + @media screen and (width <= 680px) { text-align: start; } } @@ -69,7 +69,7 @@ margin-block: 4px 0; margin-inline: 0; - @media screen and (max-width: 680px) { + @media screen and (width <= 680px) { margin-block-start: 16px; } } @@ -84,7 +84,7 @@ max-inline-size: 210px; text-align: end; - @media screen and (max-width: 680px) { + @media screen and (width <= 680px) { margin-inline-start: 0; text-align: start; } @@ -109,12 +109,11 @@ margin-inline-start: 4px; } - @media screen and (max-width: 680px) { + @media screen and (width <= 680px) { justify-content: flex-start; :deep(.iconDropdown) { - inset-inline-start: calc(50% - 20px); - inset-inline-end: auto; + inset-inline: calc(50% - 20px) auto; } } } 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 9bed56c015a15..e16a34137831f 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 @@ -59,13 +59,11 @@ display: inline-block; padding: 1px; padding-inline-end: 10px; - margin-inline-start: 2px; - margin-inline-end: 2px; + margin-inline: 2px 2px; block-size: 30px; cursor: pointer; background-color: var(--primary-color); border-radius: 200px; - border-radius: 200px; } .superChatContent { @@ -74,6 +72,17 @@ color: var(--text-with-main-color); } +.channelThumbnail { + inline-size: 25px; + border-radius: 200px; +} + +.channelName { + color: var(--tertiary-text-color); + font-weight: bold; + padding-inline-end: 5px; +} + .superChat .channelThumbnail { margin-block-start: 3px; margin-inline-start: 3px; @@ -85,7 +94,7 @@ } .openedSuperChat { - background-color: rgba(0, 0, 0, 0.7); + background-color: rgb(0 0 0 / 70%); inline-size: 100%; block-size: 415px; position: absolute; @@ -96,6 +105,24 @@ z-index: 1; } +.superChatMessage { + inline-size: 90%; + grid-template-columns: auto; + margin-inline: 5% 5%; + margin-block: 25px 10px; + background-color: var(--primary-color); + border-radius: 5px; + position: relative; +} + +.upperSuperChatMessage { + margin-block-start: -15px; + inline-size: 100%; + block-size: 55px; + background-color: var(--primary-color-hover); + border-radius: 5px 5px 0 0; +} + .openedSuperChat .superChatMessage { position: absolute; } @@ -116,28 +143,6 @@ gap: 5px; } -.superChatMessage { - inline-size: 90%; - grid-template-columns: auto; - margin-inline-start: 5%; - margin-inline-end: 5%; - margin-block-start: 25px; - margin-block-end: 10px; - background-color: var(--primary-color); - border-radius: 5px; - border-radius: 5px; - position: relative; -} - -.upperSuperChatMessage { - margin-block-start: -15px; - inline-size: 100%; - block-size: 55px; - background-color: var(--primary-color-hover); - border-radius: 5px 5px 0 0; - border-radius: 5px 5px 0 0; -} - .upperSuperChatMessage .channelThumbnail { inline-size: 45px; margin-inline-start: 10px; @@ -170,25 +175,12 @@ overflow-y: auto; } -.channelThumbnail { - inline-size: 25px; - border-radius: 200px; - border-radius: 200px; -} - .chatContent { - margin-block-start: 5px; - margin-block-end: 2px; + margin-block: 5px 2px; font-size: 12px; word-wrap: break-word; } -.channelName { - color: var(--tertiary-text-color); - font-weight: bold; - padding-inline-end: 5px; -} - .member { color: #4CAF50; } @@ -216,7 +208,6 @@ inset-block-end: 20px; cursor: pointer; border-radius: 200px; - border-radius: 200px; text-align: center; transition: background 0.2s ease-out; } diff --git a/src/renderer/components/watch-video-playlist/watch-video-playlist.css b/src/renderer/components/watch-video-playlist/watch-video-playlist.css index e859e7d676a28..b8b4ea9d92077 100644 --- a/src/renderer/components/watch-video-playlist/watch-video-playlist.css +++ b/src/renderer/components/watch-video-playlist/watch-video-playlist.css @@ -23,20 +23,25 @@ .playlistProgressBar { margin-inline-start: 10px; + /* > In order to let ::-webkit-progress-value take effect, appearance needs to be set to none on the element. */ + /* https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-progress-value */ appearance: none; } .playlistProgressBar::-webkit-progress-value { /* Color for filled part */ + /* https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-progress-value */ + /* background-color is required to be declared here to prevent color being green */ background-color: var(--accent-color); } .playlistProgressBar::-webkit-progress-bar { /* Color for unfilled part */ + /* https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-progress-bar */ background-color: var(--secondary-text-color); } diff --git a/src/renderer/scss-partials/_ft-list-item.scss b/src/renderer/scss-partials/_ft-list-item.scss index c2e447590691d..7b1fb69d9cb05 100644 --- a/src/renderer/scss-partials/_ft-list-item.scss +++ b/src/renderer/scss-partials/_ft-list-item.scss @@ -54,6 +54,17 @@ $watched-transition-duration: 0.5s; .ft-list-item { padding: 6px; + .thumbnailImage { + @include is-sidebar-item { + block-size: 75px; + } + + @include is-recommendation { + block-size: auto; + inline-size: 163px; + } + } + &.watched { @include low-contrast-when-watched(var(--primary-text-color)); @@ -71,56 +82,66 @@ $watched-transition-duration: 0.5s; } } - .videoThumbnail { - display: grid; + .favoritesIcon, + .externalPlayerIcon { + opacity: $thumbnail-overlay-opacity; + } - .thumbnailLink, - .videoWatched, - .videoDuration, - .externalPlayerIcon, - .favoritesIcon, - .watchedProgressBar, - .videoCountContainer, - .background, - .inner { - grid-column: 1; - grid-row: 1; - user-select: none; + .favoritesIcon, + .externalPlayerIcon, + .optionsButton { + visibility: none; + opacity: 0; + transition: visibility 0s, opacity 0.2s linear; + } + + @media (hover: hover) { + .favoritesIcon.favorited, + &:hover .favoritesIcon, + &:hover .externalPlayerIcon, + &:focus-within .favoritesIcon, + &:focus-within .externalPlayerIcon { + visibility: visible; + opacity: $thumbnail-overlay-opacity; } - .thumbnailLink { - display: flex; - overflow: hidden; + &:hover .optionsButton, + &:focus-within .optionsButton { + visibility: visible; + opacity: 1; } + } - .thumbnailImage { - @include is-sidebar-item { - block-size: 75px; - } + .videoThumbnail { + display: grid; - @include is-recommendation { - block-size: auto; - inline-size: 163px; - } + .thumbnailLink { + display: flex; + overflow: hidden; } .videoWatched { - align-self: flex-start; + place-self: flex-start start; background-color: var(--bg-color); color: var(--primary-text-color); - justify-self: start; opacity: $thumbnail-overlay-opacity; padding: 2px; pointer-events: none; } + .videoWatched, + .live, + .upcoming { + text-transform: uppercase; + user-select: none; + } + .videoDuration { - align-self: flex-end; + place-self: flex-end end; background-color: var(--card-bg-color); border-radius: 5px; color: var(--primary-text-color); font-size: 15px; - justify-self: end; line-height: 1.2; margin-block: 0 4px; margin-inline: 0 4px; @@ -140,9 +161,8 @@ $watched-transition-duration: 0.5s; } .externalPlayerIcon { - align-self: flex-end; + place-self: flex-end start; font-size: 17px; - justify-self: start; margin-block-end: 4px; margin-inline-start: 4px; } @@ -156,18 +176,30 @@ $watched-transition-duration: 0.5s; } .watchedProgressBar { - align-self: flex-end; + place-self: flex-end stretch; background-color: var(--primary-color); block-size: 2px; - justify-self: stretch; z-index: 2; } + .thumbnailLink, + .videoWatched, + .videoDuration, + .externalPlayerIcon, + .favoritesIcon, + .watchedProgressBar, + .videoCountContainer, + .background, + .inner { + grid-column: 1; + grid-row: 1; + user-select: none; + } + .videoCountContainer { - align-self: stretch; + place-self: stretch end; display: grid; font-size: 20px; - justify-self: end; inline-size: 60px; .background { @@ -301,43 +333,6 @@ $watched-transition-duration: 0.5s; margin-block-start: 8px; } } - - .favoritesIcon, - .externalPlayerIcon { - opacity: $thumbnail-overlay-opacity; - } - - @media (hover: hover) { - .favoritesIcon.favorited, - &:hover .favoritesIcon, - &:hover .externalPlayerIcon, - &:focus-within .favoritesIcon, - &:focus-within .externalPlayerIcon { - visibility: visible; - opacity: $thumbnail-overlay-opacity; - } - - &:hover .optionsButton, - &:focus-within .optionsButton { - visibility: visible; - opacity: 1; - } - - .favoritesIcon, - .externalPlayerIcon, - .optionsButton { - visibility: none; - opacity: 0; - transition: visibility 0s, opacity 0.2s linear; - } - } -} - -.videoWatched, -.live, -.upcoming { - text-transform: uppercase; - user-select: none; } // we use h3 for semantic reasons but don't want to keep the h3 style diff --git a/src/renderer/themes.css b/src/renderer/themes.css index b8f96333f1dfd..4c0ed24c5ddb0 100644 --- a/src/renderer/themes.css +++ b/src/renderer/themes.css @@ -6,7 +6,7 @@ .catppuccinMocha, .pastelPink, .hotPink { - --primary-input-color: rgba(0, 0, 0, 0.50); + --primary-input-color: rgb(0 0 0 / 50%); } .system[data-system-theme*='light'], .light, @@ -28,7 +28,7 @@ .dracula, .catppuccinMocha, .pastelPink { - --primary-input-color: rgba(0, 0, 0, 0.50); + --primary-input-color: rgb(0 0 0 / 50%); --side-nav-hover-text-color: var(--primary-text-color); } @@ -57,14 +57,14 @@ .dracula, .catppuccinMocha, .hotPink { - --primary-shadow-color: rgba(0, 0, 0, 0.75); + --primary-shadow-color: rgb(0 0 0 / 75%); } .system[data-system-theme*='light'], .light { --primary-text-color: #212121; --secondary-text-color: #424242; --tertiary-text-color: #757575; - --primary-shadow-color: rgba(232, 232, 232, 1); + --primary-shadow-color: rgb(232 232 232 / 100%); --title-color: #3f7ac6; --bg-color: #f1f1f1; --favorite-icon-color: #FFD600; @@ -86,7 +86,7 @@ --bg-color: #212121; --favorite-icon-color: #FFEA00; --card-bg-color: #303030; - --secondary-card-bg-color: rgba(0, 0, 0, 0.75); + --secondary-card-bg-color: rgb(0 0 0 / 75%); --scrollbar-color: #414141; --scrollbar-color-hover: #757575; --side-nav-color: #262626; @@ -103,7 +103,7 @@ --bg-color: #000; --favorite-icon-color: #FFEA00; --card-bg-color: #000; - --secondary-card-bg-color: rgba(0, 0, 0, 0.75); + --secondary-card-bg-color: rgb(0 0 0 / 75%); --scrollbar-color: #515151; --scrollbar-color-hover: #424242; --side-nav-color: #0f0f0f; @@ -119,7 +119,7 @@ --title-color: #EEE; --bg-color: #212121; --card-bg-color: #303030; - --secondary-card-bg-color: rgba(0, 0, 0, 0.75); + --secondary-card-bg-color: rgb(0 0 0 / 75%); --side-nav-color: #262626; --side-nav-hover-color: #212121; --side-nav-active-color: #303030; @@ -168,7 +168,7 @@ --primary-text-color: #1F002B; --secondary-text-color: #361836; --tertiary-text-color: #5A285A; - --primary-shadow-color: rgb(255, 240, 240, 0.5); + --primary-shadow-color: rgb(255 240 240 / 50%); --title-color: #185EB4; --bg-color: #ffeadd; --favorite-icon-color: #760278; @@ -194,7 +194,7 @@ --bg-color: #ff008a; --favorite-icon-color: #FFEA00; --card-bg-color: #DE1C85; - --secondary-card-bg-color: rgba(0, 0, 0, 0.75); + --secondary-card-bg-color: rgb(0 0 0 / 75%); --scrollbar-color: #FFF; --scrollbar-color-hover: #C0F6FF; --scrollbar-text-color-hover: #000; @@ -206,6 +206,7 @@ --search-bar-color: #9C2D5D; --logo-icon: url("../../_icons/iconWhiteSmall.png"); --logo-text: url("../../_icons/textWhiteSmall.png"); + /* The hot pink theme does not have a great color contrast with many other colors than black and white. This means that the primary and secondary theme colors are forced here to be black so as to avoid any @@ -220,16 +221,16 @@ --accent-color-active: #6A739A !important; --accent-color-light: #000 !important; --accent-color-visited: #000 !important; - --accent-color-opacity1: rgba(0,0,0,0.04) !important; - --accent-color-opacity2: rgba(0,0,0,0.12) !important; - --accent-color-opacity3: rgba(255,255,255,0.16) !important; - --accent-color-opacity4: rgba(255,255,255,0.24) !important; + --accent-color-opacity1: rgb(0 0 0 / 4%) !important; + --accent-color-opacity2: rgb(0 0 0 / 12%) !important; + --accent-color-opacity3: rgb(255 255 255 / 16%) !important; + --accent-color-opacity4: rgb(255 255 255 / 24%) !important; } /* Given that the Hot Pink theme does not need link underlining due to meeting WCAG 2 Level AA (https://webaim.org/resources/linkcontrastchecker/?fcolor=FFFFFF&bcolor=DE1C85&lcolor=000000), it can be safely elided. This looks quite pleasant on this theme. */ -.hotPink a:not(:hover):not(:focus), .hotPink .navOption:hover, .hotPink .navOption:focus, .hotPink *:not(:hover):not(:focus) { +.hotPink a:not(:hover, :focus), .hotPink .navOption:hover, .hotPink .navOption:focus, .hotPink *:not(:hover, :focus) { text-decoration: none; } @@ -549,10 +550,10 @@ it can be safely elided. This looks quite pleasant on this theme. */ --accent-color-active: #c62828; --accent-color-light: #ef9a9a; --accent-color-visited: #b71c1c; - --accent-color-opacity1: rgba(244,67,54,0.04); - --accent-color-opacity2: rgba(244,67,54,0.12); - --accent-color-opacity3: rgba(244,67,54,0.16); - --accent-color-opacity4: rgba(244,67,54,0.24); + --accent-color-opacity1: rgb(244 67 54 / 4%); + --accent-color-opacity2: rgb(244 67 54 / 12%); + --accent-color-opacity3: rgb(244 67 54 / 16%); + --accent-color-opacity4: rgb(244 67 54 / 24%); } .secPink { @@ -561,10 +562,10 @@ it can be safely elided. This looks quite pleasant on this theme. */ --accent-color-active: #AD1457; --accent-color-light: #F48FB1; --accent-color-visited: #880E4F; - --accent-color-opacity1: rgba(233,30,99,0.04); - --accent-color-opacity2: rgba(233,30,99,0.12); - --accent-color-opacity3: rgba(233,30,99,0.16); - --accent-color-opacity4: rgba(233,30,99,0.24); + --accent-color-opacity1: rgb(233 30 99 / 4%); + --accent-color-opacity2: rgb(233 30 99 / 12%); + --accent-color-opacity3: rgb(233 30 99 / 16%); + --accent-color-opacity4: rgb(233 30 99 / 24%); } .secPurple { @@ -573,10 +574,10 @@ it can be safely elided. This looks quite pleasant on this theme. */ --accent-color-active: #6A1B9A; --accent-color-light: #CE93D8; --accent-color-visited: #4A148C; - --accent-color-opacity1: rgba(156,39,176,0.04); - --accent-color-opacity2: rgba(156,39,176,0.12); - --accent-color-opacity3: rgba(156,39,176,0.16); - --accent-color-opacity4: rgba(156,39,176,0.24); + --accent-color-opacity1: rgb(156 39 176 / 4%); + --accent-color-opacity2: rgb(156 39 176 / 12%); + --accent-color-opacity3: rgb(156 39 176 / 16%); + --accent-color-opacity4: rgb(156 39 176 / 24%); } .secDeepPurple { @@ -585,10 +586,10 @@ it can be safely elided. This looks quite pleasant on this theme. */ --accent-color-active: #4527A0; --accent-color-light: #B39DDB; --accent-color-visited: #311B92; - --accent-color-opacity1: rgba(103,58,183,0.04); - --accent-color-opacity2: rgba(103,58,183,0.12); - --accent-color-opacity3: rgba(103,58,183,0.16); - --accent-color-opacity4: rgba(103,58,183,0.24); + --accent-color-opacity1: rgb(103 58 183 / 4%); + --accent-color-opacity2: rgb(103 58 183 / 12%); + --accent-color-opacity3: rgb(103 58 183 / 16%); + --accent-color-opacity4: rgb(103 58 183 / 24%); } .secIndigo { @@ -597,10 +598,10 @@ it can be safely elided. This looks quite pleasant on this theme. */ --accent-color-active: #283593; --accent-color-light: #9FA8DA; --accent-color-visited: #1A237E; - --accent-color-opacity1: rgba(63,81,181,0.04); - --accent-color-opacity2: rgba(63,81,181,0.12); - --accent-color-opacity3: rgba(63,81,181,0.16); - --accent-color-opacity4: rgba(63,81,181,0.24); + --accent-color-opacity1: rgb(63 81 181 / 4%); + --accent-color-opacity2: rgb(63 81 181 / 12%); + --accent-color-opacity3: rgb(63 81 181 / 16%); + --accent-color-opacity4: rgb(63 81 181 / 24%); } .secBlue { @@ -609,10 +610,10 @@ it can be safely elided. This looks quite pleasant on this theme. */ --accent-color-active: #1565C0; --accent-color-light: #90CAF9; --accent-color-visited: #0D47A1; - --accent-color-opacity1: rgba(33,150,243,0.04); - --accent-color-opacity2: rgba(33,150,243,0.12); - --accent-color-opacity3: rgba(33,150,243,0.16); - --accent-color-opacity4: rgba(33,150,243,0.24); + --accent-color-opacity1: rgb(33 150 243 / 4%); + --accent-color-opacity2: rgb(33 150 243 / 12%); + --accent-color-opacity3: rgb(33 150 243 / 16%); + --accent-color-opacity4: rgb(33 150 243 / 24%); } .secLightBlue { @@ -621,10 +622,10 @@ it can be safely elided. This looks quite pleasant on this theme. */ --accent-color-active: #0277BD; --accent-color-light: #81D4FA; --accent-color-visited: #01579B; - --accent-color-opacity1: rgba(3,169,244,0.04); - --accent-color-opacity2: rgba(3,169,244,0.12); - --accent-color-opacity3: rgba(3,169,244,0.16); - --accent-color-opacity4: rgba(3,169,244,0.24); + --accent-color-opacity1: rgb(3 169 244 / 4%); + --accent-color-opacity2: rgb(3 169 244 / 12%); + --accent-color-opacity3: rgb(3 169 244 / 16%); + --accent-color-opacity4: rgb(3 169 244 / 24%); } .secCyan { @@ -633,10 +634,10 @@ it can be safely elided. This looks quite pleasant on this theme. */ --accent-color-active: #00838F; --accent-color-light: #80DEEA; --accent-color-visited: #006064; - --accent-color-opacity1: rgba(0,188,212,0.04); - --accent-color-opacity2: rgba(0,188,212,0.12); - --accent-color-opacity3: rgba(0,188,212,0.16); - --accent-color-opacity4: rgba(0,188,212,0.24); + --accent-color-opacity1: rgb(0 188 212 / 4%); + --accent-color-opacity2: rgb(0 188 212 / 12%); + --accent-color-opacity3: rgb(0 188 212 / 16%); + --accent-color-opacity4: rgb(0 188 212 / 24%); } .secTeal { @@ -645,10 +646,10 @@ it can be safely elided. This looks quite pleasant on this theme. */ --accent-color-active: #00695C; --accent-color-light: #80CBC4; --accent-color-visited: #004D40; - --accent-color-opacity1: rgba(0,150,136,0.04); - --accent-color-opacity2: rgba(0,150,136,0.12); - --accent-color-opacity3: rgba(0,150,136,0.16); - --accent-color-opacity4: rgba(0,150,136,0.24); + --accent-color-opacity1: rgb(0 150 136 / 4%); + --accent-color-opacity2: rgb(0 150 136 / 12%); + --accent-color-opacity3: rgb(0 150 136 / 16%); + --accent-color-opacity4: rgb(0 150 136 / 24%); } .secGreen { @@ -657,10 +658,10 @@ it can be safely elided. This looks quite pleasant on this theme. */ --accent-color-active: #2E7D32; --accent-color-light: #A5D6A7; --accent-color-visited: #1B5E20; - --accent-color-opacity1: rgba(76,175,80,0.04); - --accent-color-opacity2: rgba(76,175,80,0.12); - --accent-color-opacity3: rgba(76,175,80,0.16); - --accent-color-opacity4: rgba(76,175,80,0.24); + --accent-color-opacity1: rgb(76 175 80 / 4%); + --accent-color-opacity2: rgb(76 175 80 / 12%); + --accent-color-opacity3: rgb(76 175 80 / 16%); + --accent-color-opacity4: rgb(76 175 80 / 24%); } .secLightGreen { @@ -669,10 +670,10 @@ it can be safely elided. This looks quite pleasant on this theme. */ --accent-color-active: #558B2F; --accent-color-light: #C5E1A5; --accent-color-visited: #33691E; - --accent-color-opacity1: rgba(139,195,74,0.04); - --accent-color-opacity2: rgba(139,195,74,0.12); - --accent-color-opacity3: rgba(139,195,74,0.16); - --accent-color-opacity4: rgba(139,195,74,0.24); + --accent-color-opacity1: rgb(139 195 74 / 4%); + --accent-color-opacity2: rgb(139 195 74 / 12%); + --accent-color-opacity3: rgb(139 195 74 / 16%); + --accent-color-opacity4: rgb(139 195 74 / 24%); } .secLime { @@ -681,10 +682,10 @@ it can be safely elided. This looks quite pleasant on this theme. */ --accent-color-active: #9E9D24; --accent-color-light: #E6EE9C; --accent-color-visited: #827717; - --accent-color-opacity1: rgba(205,220,57,0.04); - --accent-color-opacity2: rgba(205,220,57,0.12); - --accent-color-opacity3: rgba(205,220,57,0.16); - --accent-color-opacity4: rgba(205,220,57,0.24); + --accent-color-opacity1: rgb(205 220 57 / 4%); + --accent-color-opacity2: rgb(205 220 57 / 12%); + --accent-color-opacity3: rgb(205 220 57 / 16%); + --accent-color-opacity4: rgb(205 220 57 / 24%); } .secYellow { @@ -693,10 +694,10 @@ it can be safely elided. This looks quite pleasant on this theme. */ --accent-color-active: #F9A825; --accent-color-light: #FFF59D; --accent-color-visited: #F57F17; - --accent-color-opacity1: rgba(255,235,59,0.04); - --accent-color-opacity2: rgba(255,235,59,0.12); - --accent-color-opacity3: rgba(255,235,59,0.16); - --accent-color-opacity4: rgba(255,235,59,0.24); + --accent-color-opacity1: rgb(255 235 59 / 4%); + --accent-color-opacity2: rgb(255 235 59 / 12%); + --accent-color-opacity3: rgb(255 235 59 / 16%); + --accent-color-opacity4: rgb(255 235 59 / 24%); } .secAmber { @@ -705,10 +706,10 @@ it can be safely elided. This looks quite pleasant on this theme. */ --accent-color-active: #FF8F00; --accent-color-light: #FFE082; --accent-color-visited: #FF6F00; - --accent-color-opacity1: rgba(255,193,7,0.04); - --accent-color-opacity2: rgba(255,193,7,0.12); - --accent-color-opacity3: rgba(255,193,7,0.16); - --accent-color-opacity4: rgba(255,193,7,0.24); + --accent-color-opacity1: rgb(255 193 7 / 4%); + --accent-color-opacity2: rgb(255 193 7 / 12%); + --accent-color-opacity3: rgb(255 193 7 / 16%); + --accent-color-opacity4: rgb(255 193 7 / 24%); } .secOrange { @@ -717,10 +718,10 @@ it can be safely elided. This looks quite pleasant on this theme. */ --accent-color-active: #EF6C00; --accent-color-light: #FFCC80; --accent-color-visited: #E65100; - --accent-color-opacity1: rgba(255,152,0,0.04); - --accent-color-opacity2: rgba(255,152,0,0.12); - --accent-color-opacity3: rgba(255,152,0,0.16); - --accent-color-opacity4: rgba(255,152,0,0.24); + --accent-color-opacity1: rgb(255 152 0 / 4%); + --accent-color-opacity2: rgb(255 152 0 / 12%); + --accent-color-opacity3: rgb(255 152 0 / 16%); + --accent-color-opacity4: rgb(255 152 0 / 24%); } .secDeepOrange { @@ -729,10 +730,10 @@ it can be safely elided. This looks quite pleasant on this theme. */ --accent-color-active: #D84315; --accent-color-light: #FFAB91; --accent-color-visited: #BF360C; - --accent-color-opacity1: rgba(255,87,34,0.04); - --accent-color-opacity2: rgba(255,87,34,0.12); - --accent-color-opacity3: rgba(255,87,34,0.16); - --accent-color-opacity4: rgba(255,87,34,0.24); + --accent-color-opacity1: rgb(255 87 34 / 4%); + --accent-color-opacity2: rgb(255 87 34 / 12%); + --accent-color-opacity3: rgb(255 87 34 / 16%); + --accent-color-opacity4: rgb(255 87 34 / 24%); } .secDraculaCyan, @@ -755,10 +756,10 @@ it can be safely elided. This looks quite pleasant on this theme. */ .secDraculaPurple, .secDraculaRed, .secDraculaYellow { - --accent-color-opacity1: rgba(98, 114, 164, 0.04); - --accent-color-opacity2: rgba(98, 114, 164, 0.12); - --accent-color-opacity3: rgba(98, 114, 164, 0.16); - --accent-color-opacity4: rgba(98, 114, 164, 0.24); + --accent-color-opacity1: rgb(98 114 164 / 4%); + --accent-color-opacity2: rgb(98 114 164 / 12%); + --accent-color-opacity3: rgb(98 114 164 / 16%); + --accent-color-opacity4: rgb(98 114 164 / 24%); } .secDraculaCyan { @@ -841,10 +842,10 @@ it can be safely elided. This looks quite pleasant on this theme. */ --accent-color-active: #e1c8c3; --accent-color-light: #F8EAE7; --accent-color-visited: #D3A197; - --accent-color-opacity1: rgba(245,224,220,0.04); - --accent-color-opacity2: rgba(245,224,220,0.12); - --accent-color-opacity3: rgba(245,224,220,0.16); - --accent-color-opacity4: rgba(245,224,220,0.24); + --accent-color-opacity1: rgb(245 224 220 / 4%); + --accent-color-opacity2: rgb(245 224 220 / 12%); + --accent-color-opacity3: rgb(245 224 220 / 16%); + --accent-color-opacity4: rgb(245 224 220 / 24%); } .secCatppuccinMochaFlamingo { @@ -853,10 +854,10 @@ it can be safely elided. This looks quite pleasant on this theme. */ --accent-color-active: #ddb7b7; --accent-color-light: #F7DFDF; --accent-color-visited: #cf9898; - --accent-color-opacity1: rgba(242,205,205,0.04); - --accent-color-opacity2: rgba(242,205,205,0.12); - --accent-color-opacity3: rgba(242,205,205,0.16); - --accent-color-opacity4: rgba(242,205,205,0.24); + --accent-color-opacity1: rgb(242 205 205 / 4%); + --accent-color-opacity2: rgb(242 205 205 / 12%); + --accent-color-opacity3: rgb(242 205 205 / 16%); + --accent-color-opacity4: rgb(242 205 205 / 24%); } .secCatppuccinMochaPink { @@ -865,10 +866,10 @@ it can be safely elided. This looks quite pleasant on this theme. */ --accent-color-active: #dca3cd; --accent-color-light: #f4dbed; --accent-color-visited: #d28fc0; - --accent-color-opacity1: rgba(245,194,231,0.04); - --accent-color-opacity2: rgba(245,194,231,0.12); - --accent-color-opacity3: rgba(245,194,231,0.16); - --accent-color-opacity4: rgba(245,194,231,0.24); + --accent-color-opacity1: rgb(245 194 231 / 4%); + --accent-color-opacity2: rgb(245 194 231 / 12%); + --accent-color-opacity3: rgb(245 194 231 / 16%); + --accent-color-opacity4: rgb(245 194 231 / 24%); } .secCatppuccinMochaMauve { @@ -877,10 +878,10 @@ it can be safely elided. This looks quite pleasant on this theme. */ --accent-color-active: #b38fdf; --accent-color-light: #D6B9F9; --accent-color-visited: #A171DA; - --accent-color-opacity1: rgba(203,166,247,0.04); - --accent-color-opacity2: rgba(203,166,247,0.12); - --accent-color-opacity3: rgba(203,166,247,0.16); - --accent-color-opacity4: rgba(203,166,247,0.24); + --accent-color-opacity1: rgb(203 166 247 / 4%); + --accent-color-opacity2: rgb(203 166 247 / 12%); + --accent-color-opacity3: rgb(203 166 247 / 16%); + --accent-color-opacity4: rgb(203 166 247 / 24%); } .secCatppuccinMochaRed { @@ -889,10 +890,10 @@ it can be safely elided. This looks quite pleasant on this theme. */ --accent-color-active: #de7693; --accent-color-light: #F5A3BA; --accent-color-visited: #D56C89; - --accent-color-opacity1: rgba(243,139,168,0.04); - --accent-color-opacity2: rgba(243,139,168,0.12); - --accent-color-opacity3: rgba(243,139,168,0.16); - --accent-color-opacity4: rgba(243,139,168,0.24); + --accent-color-opacity1: rgb(243 139 168 / 4%); + --accent-color-opacity2: rgb(243 139 168 / 12%); + --accent-color-opacity3: rgb(243 139 168 / 16%); + --accent-color-opacity4: rgb(243 139 168 / 24%); } .secCatppuccinMochaMaroon { @@ -901,10 +902,10 @@ it can be safely elided. This looks quite pleasant on this theme. */ --accent-color-active: #d68895; --accent-color-light: #F0B7C0; --accent-color-visited: #C86A79; - --accent-color-opacity1: rgba(235,160,172,0.04); - --accent-color-opacity2: rgba(235,160,172,0.12); - --accent-color-opacity3: rgba(235,160,172,0.16); - --accent-color-opacity4: rgba(235,160,172,0.24); + --accent-color-opacity1: rgb(235 160 172 / 4%); + --accent-color-opacity2: rgb(235 160 172 / 12%); + --accent-color-opacity3: rgb(235 160 172 / 16%); + --accent-color-opacity4: rgb(235 160 172 / 24%); } .secCatppuccinMochaPeach { @@ -913,10 +914,10 @@ it can be safely elided. This looks quite pleasant on this theme. */ --accent-color-active: #e1996d; --accent-color-light: #FBC4A2; --accent-color-visited: #D78A5B; - --accent-color-opacity1: rgba(250,179,135,0.04); - --accent-color-opacity2: rgba(250,179,135,0.12); - --accent-color-opacity3: rgba(250,179,135,0.16); - --accent-color-opacity4: rgba(250,179,135,0.24); + --accent-color-opacity1: rgb(250 179 135 / 4%); + --accent-color-opacity2: rgb(250 179 135 / 12%); + --accent-color-opacity3: rgb(250 179 135 / 16%); + --accent-color-opacity4: rgb(250 179 135 / 24%); } .secCatppuccinMochaYellow { @@ -925,10 +926,10 @@ it can be safely elided. This looks quite pleasant on this theme. */ --accent-color-active: #dec48d; --accent-color-light: #FBECCB; --accent-color-visited: #D5B05D; - --accent-color-opacity1: rgba(249,226,175,0.04); - --accent-color-opacity2: rgba(249,226,175,0.12); - --accent-color-opacity3: rgba(249,226,175,0.16); - --accent-color-opacity4: rgba(249,226,175,0.24); + --accent-color-opacity1: rgb(249 226 175 / 4%); + --accent-color-opacity2: rgb(249 226 175 / 12%); + --accent-color-opacity3: rgb(249 226 175 / 16%); + --accent-color-opacity4: rgb(249 226 175 / 24%); } .secCatppuccinMochaGreen { @@ -937,10 +938,10 @@ it can be safely elided. This looks quite pleasant on this theme. */ --accent-color-active: #86c780; --accent-color-light: #BCEAB8; --accent-color-visited: #6ED166; - --accent-color-opacity1: rgba(166,227,161,0.04); - --accent-color-opacity2: rgba(166,227,161,0.12); - --accent-color-opacity3: rgba(166,227,161,0.16); - --accent-color-opacity4: rgba(166,227,161,0.24); + --accent-color-opacity1: rgb(166 227 161 / 4%); + --accent-color-opacity2: rgb(166 227 161 / 12%); + --accent-color-opacity3: rgb(166 227 161 / 16%); + --accent-color-opacity4: rgb(166 227 161 / 24%); } .secCatppuccinMochaTeal { @@ -949,10 +950,10 @@ it can be safely elided. This looks quite pleasant on this theme. */ --accent-color-active: #6fc5b7; --accent-color-light: #AFE9DF; --accent-color-visited: #5CCCB9; - --accent-color-opacity1: rgba(148,226,213,0.04); - --accent-color-opacity2: rgba(148,226,213,0.12); - --accent-color-opacity3: rgba(148,226,213,0.16); - --accent-color-opacity4: rgba(148,226,213,0.24); + --accent-color-opacity1: rgb(148 226 213 / 4%); + --accent-color-opacity2: rgb(148 226 213 / 12%); + --accent-color-opacity3: rgb(148 226 213 / 16%); + --accent-color-opacity4: rgb(148 226 213 / 24%); } .secCatppuccinMochaSky { @@ -961,10 +962,10 @@ it can be safely elided. This looks quite pleasant on this theme. */ --accent-color-active: #68bcca; --accent-color-light: #9FE3EF; --accent-color-visited: #64C2D3; - --accent-color-opacity1: rgba(137,220,235,0.04); - --accent-color-opacity2: rgba(137,220,235,0.12); - --accent-color-opacity3: rgba(137,220,235,0.16); - --accent-color-opacity4: rgba(137,220,235,0.24); + --accent-color-opacity1: rgb(137 220 235 / 4%); + --accent-color-opacity2: rgb(137 220 235 / 12%); + --accent-color-opacity3: rgb(137 220 235 / 16%); + --accent-color-opacity4: rgb(137 220 235 / 24%); } .secCatppuccinMochaSapphire { @@ -973,10 +974,10 @@ it can be safely elided. This looks quite pleasant on this theme. */ --accent-color-active: #59a9cf; --accent-color-light: #93D4F0; --accent-color-visited: #6AB6D7; - --accent-color-opacity1: rgba(116,199,236,0.04); - --accent-color-opacity2: rgba(116,199,236,0.12); - --accent-color-opacity3: rgba(116,199,236,0.16); - --accent-color-opacity4: rgba(116,199,236,0.24); + --accent-color-opacity1: rgb(116 199 236 / 4%); + --accent-color-opacity2: rgb(116 199 236 / 12%); + --accent-color-opacity3: rgb(116 199 236 / 16%); + --accent-color-opacity4: rgb(116 199 236 / 24%); } .secCatppuccinMochaBlue { @@ -985,10 +986,10 @@ it can be safely elided. This looks quite pleasant on this theme. */ --accent-color-active: #6593df; --accent-color-light: #A7C7FB; --accent-color-visited: #739CDD; - --accent-color-opacity1: rgba(137,220,235,0.04); - --accent-color-opacity2: rgba(137,220,235,0.12); - --accent-color-opacity3: rgba(137,220,235,0.16); - --accent-color-opacity4: rgba(137,220,235,0.24); + --accent-color-opacity1: rgb(137 220 235 / 4%); + --accent-color-opacity2: rgb(137 220 235 / 12%); + --accent-color-opacity3: rgb(137 220 235 / 16%); + --accent-color-opacity4: rgb(137 220 235 / 24%); } .secCatppuccinMochaLavender { @@ -997,10 +998,10 @@ it can be safely elided. This looks quite pleasant on this theme. */ --accent-color-active: #8d98e4; --accent-color-light: #D2D8FE; --accent-color-visited: #96A1E9; - --accent-color-opacity1: rgba(180,190,254,0.04); - --accent-color-opacity2: rgba(180,190,254,0.12); - --accent-color-opacity3: rgba(180,190,254,0.16); - --accent-color-opacity4: rgba(180,190,254,0.24); + --accent-color-opacity1: rgb(180 190 254 / 4%); + --accent-color-opacity2: rgb(180 190 254 / 12%); + --accent-color-opacity3: rgb(180 190 254 / 16%); + --accent-color-opacity4: rgb(180 190 254 / 24%); } body[dir='ltr'] { @@ -1017,7 +1018,7 @@ body[dir='rtl'] { --horizontal-directionality-coefficient: -1; } -body[dir='rtl'] [data-prefix="fas"]:not([data-icon="magnifying-glass"]):not([data-icon="circle-question"]) { +body[dir='rtl'] [data-prefix="fas"]:not([data-icon="magnifying-glass"], [data-icon="circle-question"]) { transform: scale(-1,1); } @@ -1034,6 +1035,7 @@ body { min-block-size: 100vh; color: var(--primary-text-color); background-color: var(--bg-color); + --red-500: #f44336; } @@ -1047,10 +1049,12 @@ body { outline: none; } +/* stylelint-disable-next-line no-descending-specificity */ a:link { color: var(--link-color); } +/* stylelint-disable-next-line no-descending-specificity */ a:visited { color: var(--link-visited-color); } diff --git a/src/renderer/views/About/About.scss b/src/renderer/views/About/About.scss index 0272d7628b06f..49e07f65bc886 100644 --- a/src/renderer/views/About/About.scss +++ b/src/renderer/views/About/About.scss @@ -3,7 +3,7 @@ margin-inline: auto; inline-size: 85%; - @media only screen and (max-width: 680px) { + @media only screen and (width <= 680px) { inline-size: 90%; } } @@ -30,7 +30,7 @@ margin-inline: auto; max-inline-size: 860px; - @media only screen and (max-width: 650px) { + @media only screen and (width <= 650px) { grid-template-columns: 1fr; } } diff --git a/src/renderer/views/Channel/Channel.css b/src/renderer/views/Channel/Channel.css index 701a0320d8f78..73879bb541d23 100644 --- a/src/renderer/views/Channel/Channel.css +++ b/src/renderer/views/Channel/Channel.css @@ -79,6 +79,8 @@ } .channelSearch { + margin-block-start: 10px; + max-inline-size: 250px; inline-size: 220px; margin-inline-start: auto; align-self: flex-end; @@ -129,11 +131,6 @@ box-sizing: border-box; } -.channelSearch { - margin-block-start: 10px; - max-inline-size: 250px; -} - .elementListLoading { margin-block-start: 200px; } @@ -176,16 +173,14 @@ .ft-community-image { display: block; - margin-inline-start: auto; - margin-inline-end: auto; + margin-inline: auto; } .community-post-container { - padding-inline-start: 30%; - padding-inline-end: 30%; + padding-inline: 30%; } -@media only screen and (max-width: 800px) { +@media only screen and (width <= 800px) { .channelInfoTabs { block-size: auto; flex-flow: column-reverse; @@ -210,7 +205,7 @@ } } -@media only screen and (max-width: 400px) { +@media only screen and (width <= 400px) { .channelInfo { justify-content: center; gap: 10px; @@ -232,7 +227,7 @@ } } -@media only screen and (max-width: 260px) { +@media only screen and (width <= 260px) { .channelDetails { max-inline-size: none; } diff --git a/src/renderer/views/Hashtag/Hashtag.css b/src/renderer/views/Hashtag/Hashtag.css index 8dd30434746de..a2d9314e834cc 100644 --- a/src/renderer/views/Hashtag/Hashtag.css +++ b/src/renderer/views/Hashtag/Hashtag.css @@ -19,7 +19,7 @@ inline-size: 85%; } -@media only screen and (max-width: 680px) { +@media only screen and (width <= 680px) { .card { inline-size: 90%; } diff --git a/src/renderer/views/History/History.css b/src/renderer/views/History/History.css index 8885b1123ddfb..a902565bb94b5 100644 --- a/src/renderer/views/History/History.css +++ b/src/renderer/views/History/History.css @@ -8,7 +8,7 @@ color: var(--tertiary-text-color); } -@media only screen and (max-width: 680px) { +@media only screen and (width <= 680px) { .card { inline-size: 90%; } diff --git a/src/renderer/views/Playlist/Playlist.css b/src/renderer/views/Playlist/Playlist.css index a0a5113ccfae5..3187e5d0a980f 100644 --- a/src/renderer/views/Playlist/Playlist.css +++ b/src/renderer/views/Playlist/Playlist.css @@ -41,15 +41,14 @@ } :deep(.videoThumbnail) { - margin-block-start: auto; - margin-block-end: auto; + margin-block: auto; } :deep(.thumbnailImage) { max-inline-size: 25vw; } -@media only screen and (max-width: 850px) { +@media only screen and (width <= 850px) { .routerView { flex-direction: column; } diff --git a/src/renderer/views/Popular/Popular.css b/src/renderer/views/Popular/Popular.css index 8625c77b4f8df..05f87ad79961a 100644 --- a/src/renderer/views/Popular/Popular.css +++ b/src/renderer/views/Popular/Popular.css @@ -10,13 +10,13 @@ inset-inline-end: 10px; } -@media only screen and (max-width: 350px) { +@media only screen and (width <= 350px) { .floatingTopButton { position: absolute } } -@media only screen and (max-width: 680px) { +@media only screen and (width <= 680px) { .card { inline-size: 90%; } diff --git a/src/renderer/views/ProfileSettings/ProfileSettings.css b/src/renderer/views/ProfileSettings/ProfileSettings.css index 6a6ef39e2dba5..d708a9197dde4 100644 --- a/src/renderer/views/ProfileSettings/ProfileSettings.css +++ b/src/renderer/views/ProfileSettings/ProfileSettings.css @@ -14,7 +14,7 @@ margin-inline: auto; } -@media only screen and (max-width: 680px) { +@media only screen and (width <= 680px) { .card { inline-size: 90%; } diff --git a/src/renderer/views/Search/Search.css b/src/renderer/views/Search/Search.css index aeaa95da9bc44..1ef3d4d136f53 100644 --- a/src/renderer/views/Search/Search.css +++ b/src/renderer/views/Search/Search.css @@ -19,7 +19,7 @@ margin-inline: auto; } -@media only screen and (max-width: 680px) { +@media only screen and (width <= 680px) { .card { inline-size: 90%; } diff --git a/src/renderer/views/SubscribedChannels/SubscribedChannels.css b/src/renderer/views/SubscribedChannels/SubscribedChannels.css index 9d92e4aab9d9b..0c8c0f51ae041 100644 --- a/src/renderer/views/SubscribedChannels/SubscribedChannels.css +++ b/src/renderer/views/SubscribedChannels/SubscribedChannels.css @@ -66,7 +66,7 @@ block-size: 80%; } -@media only screen and (max-width: 680px) { +@media only screen and (width <= 680px) { .card { inline-size: 90%; } diff --git a/src/renderer/views/Subscriptions/Subscriptions.css b/src/renderer/views/Subscriptions/Subscriptions.css index 66ff34fe8a104..3446217754239 100644 --- a/src/renderer/views/Subscriptions/Subscriptions.css +++ b/src/renderer/views/Subscriptions/Subscriptions.css @@ -10,9 +10,8 @@ .subscriptionTabs { inline-size: 100%; - margin-block-start: -3px; + margin-block: -3px 10px; color: var(--tertiary-text-color); - margin-block-end: 10px; } .selectedTab { @@ -35,7 +34,7 @@ font-weight: bold; } -@media only screen and (max-width: 680px) { +@media only screen and (width <= 680px) { .card { inline-size: 90%; } diff --git a/src/renderer/views/Trending/Trending.css b/src/renderer/views/Trending/Trending.css index a973f9088dd8e..5425c5e253094 100644 --- a/src/renderer/views/Trending/Trending.css +++ b/src/renderer/views/Trending/Trending.css @@ -14,9 +14,8 @@ inline-size: 100%; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; - margin-block-start: -3px; + margin-block: -3px 10px; color: var(--tertiary-text-color); - margin-block-end: 10px; } .selectedTab { @@ -39,13 +38,13 @@ font-weight: bold; } -@media only screen and (max-width: 350px) { +@media only screen and (width <= 350px) { .floatingTopButton { position: absolute } } -@media only screen and (max-width: 680px) { +@media only screen and (width <= 680px) { .card { inline-size: 90%; } diff --git a/src/renderer/views/UserPlaylists/UserPlaylists.css b/src/renderer/views/UserPlaylists/UserPlaylists.css index 8885b1123ddfb..a902565bb94b5 100644 --- a/src/renderer/views/UserPlaylists/UserPlaylists.css +++ b/src/renderer/views/UserPlaylists/UserPlaylists.css @@ -8,7 +8,7 @@ color: var(--tertiary-text-color); } -@media only screen and (max-width: 680px) { +@media only screen and (width <= 680px) { .card { inline-size: 90%; } diff --git a/src/renderer/views/Watch/Watch.scss b/src/renderer/views/Watch/Watch.scss index cf58ed9c5f23c..dfc73287958d2 100644 --- a/src/renderer/views/Watch/Watch.scss +++ b/src/renderer/views/Watch/Watch.scss @@ -16,7 +16,7 @@ display: inline-block; max-inline-size: calc(80vh * 1.78); - @media only screen and (min-width: 901px) { + @media only screen and (width >= 901px) { inline-size: 300%; } } @@ -99,7 +99,7 @@ .sidebarArea { grid-area: sidebar; - @media only screen and (min-width: 901px) { + @media only screen and (width >= 901px) { min-inline-size: 380px; } @@ -122,10 +122,10 @@ .watchVideoPlaylist { :deep(.videoThumbnail) { - margin-block-start: auto; - margin-block-end: auto; + margin-block: auto; } - @media (max-width: 768px) { + + @media (width <= 768px) { block-size: auto; } } @@ -135,27 +135,27 @@ margin-block: 0 16px; margin-inline: 0; - @media only screen and (min-width: 901px) { + @media only screen and (width >= 901px) { margin-block: 0 16px; margin-inline: 8px; } } - @media only screen and (max-width: 1350px) { + @media only screen and (width <= 1350px) { @include theatre-mode-template; } - @media only screen and (min-width: 901px) { + @media only screen and (width >= 901px) { &.useTheatreMode { @include theatre-mode-template; } } - @media only screen and (max-width: 900px) { + @media only screen and (width <= 900px) { @include single-column-template; } - @media only screen and (min-width: 901px) { + @media only screen and (width >= 901px) { .infoArea { scroll-margin-block-start: 76px; } From 73da734a80278c1e3411136633f162a9952647e2 Mon Sep 17 00:00:00 2001 From: Jason Henriquez Date: Sat, 18 Nov 2023 12:03:14 -0600 Subject: [PATCH 4/9] Satisfy media-prefers-reduced-motion a11y rule This is not recognized as a fix by the rule due to its limited detection logic, so this rule is not being imported directly. --- src/renderer/themes.css | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/renderer/themes.css b/src/renderer/themes.css index 4c0ed24c5ddb0..faf1f90d81400 100644 --- a/src/renderer/themes.css +++ b/src/renderer/themes.css @@ -1059,6 +1059,13 @@ a:visited { color: var(--link-visited-color); } +@media (prefers-reduced-motion) { + * { + transition: none !important; + animation: none !important; + } +} + ::-webkit-scrollbar { inline-size: 6px; block-size: 6px; From fcc44bddb6f4616197d72e3a9600ccb6d9caebbe Mon Sep 17 00:00:00 2001 From: Jason Henriquez Date: Sun, 19 Nov 2023 08:53:40 -0600 Subject: [PATCH 5/9] Remove duplicate code --- src/renderer/components/ft-loader/ft-loader.css | 11 ----------- 1 file changed, 11 deletions(-) diff --git a/src/renderer/components/ft-loader/ft-loader.css b/src/renderer/components/ft-loader/ft-loader.css index a8b380b001c55..b27213cf68512 100644 --- a/src/renderer/components/ft-loader/ft-loader.css +++ b/src/renderer/components/ft-loader/ft-loader.css @@ -60,17 +60,6 @@ animation-delay: -1.0s; } -@keyframes sk-bounce { - 0%, - 100% { - transform: scale(0.0) - } - - 50% { - transform: scale(1.0) - } -} - @keyframes sk-bounce { 0%, 100% { From 6d204a1a7f28215f706bc8acbe82c7f9b0fff68d Mon Sep 17 00:00:00 2001 From: Jason Henriquez Date: Fri, 5 Apr 2024 22:26:22 -0500 Subject: [PATCH 6/9] Implement linting fixes --- .../distraction-settings.css | 4 +- .../ft-channel-bubble/ft-channel-bubble.css | 1 - .../ft-community-post/ft-community-post.scss | 2 +- .../ft-list-channel/ft-list-channel.scss | 12 ++--- .../ft-list-hashtag/ft-list-hashtag.scss | 2 +- .../ft-list-playlist/ft-list-playlist.scss | 2 +- .../ft-list-video/ft-list-video.scss | 2 +- .../ft-playlist-add-video-prompt.css | 9 ++-- .../ft-playlist-selector.scss | 7 +-- .../ft-profile-channel-list.css | 2 +- .../ft-profile-edit/ft-profile-edit.css | 2 +- .../ft-profile-filter-channels-list.css | 2 +- .../ft-profile-selector.css | 3 +- .../components/ft-prompt/ft-prompt.css | 3 +- .../components/ft-select/ft-select.css | 7 +-- .../ft-subscribe-button.scss | 6 +-- src/renderer/components/ft-toast/ft-toast.css | 1 + .../components/ft-tooltip/ft-tooltip.css | 2 +- .../ft-video-player/ft-video-player.css | 2 +- .../playlist-info/playlist-info.scss | 6 +-- .../watch-video-comments.css | 2 +- .../watch-video-info/watch-video-info.scss | 20 +++++---- src/renderer/themes.css | 44 +++++++++---------- src/renderer/views/Channel/Channel.css | 6 ++- src/renderer/views/Playlist/Playlist.scss | 7 ++- .../views/ProfileSettings/ProfileSettings.css | 2 +- src/renderer/views/Settings/Settings.css | 2 +- .../views/UserPlaylists/UserPlaylists.css | 7 +-- src/renderer/views/Watch/Watch.scss | 12 ++--- 29 files changed, 89 insertions(+), 90 deletions(-) diff --git a/src/renderer/components/distraction-settings/distraction-settings.css b/src/renderer/components/distraction-settings/distraction-settings.css index d6cefc07134a0..a67117e854298 100644 --- a/src/renderer/components/distraction-settings/distraction-settings.css +++ b/src/renderer/components/distraction-settings/distraction-settings.css @@ -1,5 +1,5 @@ -@media only screen and (max-width: 800px) { - br.hide-on-mobile { +@media only screen and (width <= 800px) { + .hide-on-mobile { display: none; } } diff --git a/src/renderer/components/ft-channel-bubble/ft-channel-bubble.css b/src/renderer/components/ft-channel-bubble/ft-channel-bubble.css index bedc159824b8f..0dfb0c1148177 100644 --- a/src/renderer/components/ft-channel-bubble/ft-channel-bubble.css +++ b/src/renderer/components/ft-channel-bubble/ft-channel-bubble.css @@ -24,7 +24,6 @@ inline-size: 50px; block-size: 50px; border-radius: 100%; - -webkit-border-radius: 100%; object-fit: cover; } diff --git a/src/renderer/components/ft-community-post/ft-community-post.scss b/src/renderer/components/ft-community-post/ft-community-post.scss index 80f1db590be97..bb50bb5b4fb43 100644 --- a/src/renderer/components/ft-community-post/ft-community-post.scss +++ b/src/renderer/components/ft-community-post/ft-community-post.scss @@ -1,5 +1,5 @@ /* stylelint-disable property-no-vendor-prefix */ -@use '../../scss-partials/_ft-list-item'; +@use '../../scss-partials/ft-list-item'; .outside { margin: auto; diff --git a/src/renderer/components/ft-list-channel/ft-list-channel.scss b/src/renderer/components/ft-list-channel/ft-list-channel.scss index 4fa0fe962cfaa..57e7bb205a7f7 100644 --- a/src/renderer/components/ft-list-channel/ft-list-channel.scss +++ b/src/renderer/components/ft-list-channel/ft-list-channel.scss @@ -1,4 +1,4 @@ -@use '../../scss-partials/_ft-list-item'; +@use '../../scss-partials/ft-list-item'; .ft-list-channel { &.grid { @@ -6,6 +6,9 @@ text-align: center; .infoAndSubscribe { + display: flex; + justify-content: center; + inline-size: 100%; flex-flow: column wrap; align-items: center; @@ -32,13 +35,6 @@ } } -.infoAndSubscribe { - display: flex; - flex-flow: row wrap; - justify-content: center; - inline-size: 100%; -} - .handle { color: inherit; text-decoration: none; diff --git a/src/renderer/components/ft-list-hashtag/ft-list-hashtag.scss b/src/renderer/components/ft-list-hashtag/ft-list-hashtag.scss index c524018e4b808..b9932da1de4a5 100644 --- a/src/renderer/components/ft-list-hashtag/ft-list-hashtag.scss +++ b/src/renderer/components/ft-list-hashtag/ft-list-hashtag.scss @@ -1,4 +1,4 @@ -@use '../../scss-partials/_ft-list-item'; +@use '../../scss-partials/ft-list-item'; .hashtagImage { color: var(--primary-text-color); diff --git a/src/renderer/components/ft-list-playlist/ft-list-playlist.scss b/src/renderer/components/ft-list-playlist/ft-list-playlist.scss index af386ff4b9119..0b80f3851c5ae 100644 --- a/src/renderer/components/ft-list-playlist/ft-list-playlist.scss +++ b/src/renderer/components/ft-list-playlist/ft-list-playlist.scss @@ -1 +1 @@ -@use '../../scss-partials/_ft-list-item'; +@use '../../scss-partials/ft-list-item'; diff --git a/src/renderer/components/ft-list-video/ft-list-video.scss b/src/renderer/components/ft-list-video/ft-list-video.scss index 7512ac8a6d8ac..6a622222d5435 100644 --- a/src/renderer/components/ft-list-video/ft-list-video.scss +++ b/src/renderer/components/ft-list-video/ft-list-video.scss @@ -1,4 +1,4 @@ -@use '../../scss-partials/_ft-list-item'; +@use '../../scss-partials/ft-list-item'; .thumbnailLink:hover { outline: 3px solid var(--side-nav-hover-color); diff --git a/src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.css b/src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.css index fa65984ce5534..1824909255479 100644 --- a/src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.css +++ b/src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.css @@ -23,7 +23,8 @@ grid-template-columns: 1fr auto; column-gap: 16px; } -@media only screen and (max-width: 800px) { + +@media only screen and (width <= 800px) { .searchInputsRow { /* Switch to 2 rows from 2 columns */ grid-template-columns: auto; @@ -37,7 +38,8 @@ grid-template-rows: 1fr; align-items: center; } -@media only screen and (max-width: 800px) { + +@media only screen and (width <= 800px) { .optionsRow { /* Switch to 2 rows from 2 columns */ grid-template-columns: auto; @@ -52,11 +54,10 @@ } .playlists-container { - box-shadow: inset 0 0 5px rgba(0,0,0,.5); + box-shadow: inset 0 0 5px rgb(0 0 0 / 50%); /* Use remaining height */ flex-grow: 1; - overflow-y: scroll; } diff --git a/src/renderer/components/ft-playlist-selector/ft-playlist-selector.scss b/src/renderer/components/ft-playlist-selector/ft-playlist-selector.scss index f887a9962b92e..ddcce78f0b62b 100644 --- a/src/renderer/components/ft-playlist-selector/ft-playlist-selector.scss +++ b/src/renderer/components/ft-playlist-selector/ft-playlist-selector.scss @@ -15,11 +15,9 @@ .videoCountContainer { position: absolute; - inset-inline-end: 0; inset-block: 0; inline-size: 60px; - font-size: 20px; .background, @@ -38,7 +36,6 @@ flex-direction: column; justify-content: center; align-items: center; - color: var(--primary-text-color); } } @@ -63,7 +60,6 @@ &.grid { display: flex; flex-direction: column; - inline-size: 245px; min-block-size: 230px; padding-block-end: 20px; @@ -77,6 +73,7 @@ aspect-ratio: 16/9; } } + .title { font-size: 22px; } @@ -85,9 +82,7 @@ .selectedIcon { position: absolute; - inset-block-start: calc(50% - 25px); inset-inline-start: calc(50% - 25px); - font-size: 50px; } 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 50867ea464314..52b828b61ad56 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 @@ -8,7 +8,7 @@ h2, .selectedCount { margin-inline: auto; } -@media only screen and (max-width: 680px) { +@media only screen and (width <= 680px) { .card { inline-size: 90%; } 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 538f25bb735f2..31d54c310ff0f 100644 --- a/src/renderer/components/ft-profile-edit/ft-profile-edit.css +++ b/src/renderer/components/ft-profile-edit/ft-profile-edit.css @@ -82,7 +82,7 @@ h3 { margin-inline: auto; } -@media only screen and (max-width: 680px) { +@media only screen and (width <= 680px) { .card { 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 e91ac2a3c1af8..35ee6d14029ab 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 @@ -12,7 +12,7 @@ h2 { margin-inline: auto; } -@media only screen and (max-width: 680px) { +@media only screen and (width <= 680px) { .card { inline-size: 90%; } 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 cf67c27462fa9..53c3d41bf491b 100644 --- a/src/renderer/components/ft-profile-selector/ft-profile-selector.css +++ b/src/renderer/components/ft-profile-selector/ft-profile-selector.css @@ -35,6 +35,7 @@ margin-block-start: 60px; block-size: auto; overflow-y: auto; + /* profile list max height: 90% of window size - 100 px. It's scaled to be 340px on 800x600 resolution. Offset of 100px is to compensate for the fixed size of elements above the list, which takes more screen space on lower resolutions @@ -45,7 +46,7 @@ /* Navbar changes position to horizontal with this media rule. Height adjust for profile list so it won't cover navbar. */ -@media only screen and (max-width: 680px){ +@media only screen and (width <= 680px){ .profileWrapper { max-block-size: calc(95vh - 180px); } diff --git a/src/renderer/components/ft-prompt/ft-prompt.css b/src/renderer/components/ft-prompt/ft-prompt.css index 381fd8c4969cd..06312c5a864ac 100644 --- a/src/renderer/components/ft-prompt/ft-prompt.css +++ b/src/renderer/components/ft-prompt/ft-prompt.css @@ -4,7 +4,8 @@ inset-inline-start: 0; inline-size: 100%; block-size: 100%; - background-color: rgba(0, 0, 0, 0.7); + background-color: rgb(0 0 0 / 70%); + /* Higher than components like playlist info */ z-index: 200; padding: 15px; diff --git a/src/renderer/components/ft-select/ft-select.css b/src/renderer/components/ft-select/ft-select.css index f6e28801781f6..3b4c74915b73d 100644 --- a/src/renderer/components/ft-select/ft-select.css +++ b/src/renderer/components/ft-select/ft-select.css @@ -37,7 +37,7 @@ padding-inline-start: 1rem; font-size: 16px; border-radius: 5px; - border: none; + border: 0; } .select option { @@ -61,6 +61,7 @@ position: absolute; inset-block-start: 10px; inset-inline-end: 10px; + /* Styling the down arrow */ padding: 0; content: ''; @@ -141,8 +142,8 @@ opacity: 0.5; } -@media only screen and (max-width: 800px) { +@media only screen and (width <= 800px) { .select { inline-size: 100%; } -} \ No newline at end of file +} diff --git a/src/renderer/components/ft-subscribe-button/ft-subscribe-button.scss b/src/renderer/components/ft-subscribe-button/ft-subscribe-button.scss index 467ce117761f0..249281b8a6db6 100644 --- a/src/renderer/components/ft-subscribe-button/ft-subscribe-button.scss +++ b/src/renderer/components/ft-subscribe-button/ft-subscribe-button.scss @@ -3,9 +3,10 @@ margin-block-end: 10px; border-radius: 4px; block-size: fit-content; - box-shadow: 0px 1px 2px rgb(0 0 0 / 50%); + box-shadow: 0 1px 2px rgb(0 0 0 / 50%); display: flex; flex-wrap: nowrap; + /* addresses odd clipping behavior when adjusting window size */ background-color: var(--primary-color); } @@ -76,7 +77,6 @@ overflow-y: scroll; position: absolute; text-align: center; - -webkit-user-select: none; user-select: none; z-index: 3; // accounts for parent's left and right margins @@ -112,7 +112,6 @@ justify-content: center; flex-shrink: 0; border-radius: 50%; - -webkit-border-radius: 50%; } .initial { @@ -120,7 +119,6 @@ line-height: 1em; text-align: center; user-select: none; - -webkit-user-select: none; } .profileName { diff --git a/src/renderer/components/ft-toast/ft-toast.css b/src/renderer/components/ft-toast/ft-toast.css index 516e78d05db4c..1a5ef01a53ff5 100644 --- a/src/renderer/components/ft-toast/ft-toast.css +++ b/src/renderer/components/ft-toast/ft-toast.css @@ -3,6 +3,7 @@ inset-inline-start: 50vw; transform: translate(calc(-50% * var(--horizontal-directionality-coefficient)), 0); inset-block-end: 50px; + /* Higher than any prompt */ z-index: 300; display: flex; diff --git a/src/renderer/components/ft-tooltip/ft-tooltip.css b/src/renderer/components/ft-tooltip/ft-tooltip.css index a431c0fe66b3f..893106747722f 100644 --- a/src/renderer/components/ft-tooltip/ft-tooltip.css +++ b/src/renderer/components/ft-tooltip/ft-tooltip.css @@ -69,7 +69,7 @@ inline-size: 55vw; } -@media only screen and (max-width: 1100px) { +@media only screen and (width <= 1100px) { inline-size: 40vw; } 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 1eb804c1bc6f8..b098db5badf6d 100644 --- a/src/renderer/components/ft-video-player/ft-video-player.css +++ b/src/renderer/components/ft-video-player/ft-video-player.css @@ -30,7 +30,7 @@ } /* stylelint-enable liberty/use-logical-spec */ -@media only screen and (max-width: 460px) { +@media only screen and (width <= 460px) { :deep(.dash-selector .vjs-menu) { max-block-size: 14em; } diff --git a/src/renderer/components/playlist-info/playlist-info.scss b/src/renderer/components/playlist-info/playlist-info.scss index d26d6b56788c8..3cc30f9632763 100644 --- a/src/renderer/components/playlist-info/playlist-info.scss +++ b/src/renderer/components/playlist-info/playlist-info.scss @@ -75,7 +75,6 @@ .searchInputsRow { margin-block-start: 8px; - display: grid; /* 2 columns */ @@ -83,9 +82,8 @@ column-gap: 8px; } -@media only screen and (max-width: 1250px) { +@media only screen and (width <= 1250px) { :deep(.sharePlaylistIcon .iconDropdown) { - inset-inline-start: auto; - inset-inline-end: auto; + inset-inline: auto auto; } } 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 5eb4847f8bb8a..79185b1309f4c 100644 --- a/src/renderer/components/watch-video-comments/watch-video-comments.css +++ b/src/renderer/components/watch-video-comments/watch-video-comments.css @@ -31,7 +31,7 @@ float: var(--float-right-ltr-rtl-value); } -@media only screen and (max-width: 1000px) { +@media only screen and (width <= 1000px) { .commentSort { float: none; } 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 09177b58dae35..a6e3252aa2bcf 100644 --- a/src/renderer/components/watch-video-info/watch-video-info.scss +++ b/src/renderer/components/watch-video-info/watch-video-info.scss @@ -58,22 +58,22 @@ justify-content: flex-end; gap: 4px; - @media screen and (max-width: 680px) { + @media screen and (width <= 680px) { :deep(.iconDropdown) { - inset-inline-start: auto; - inset-inline-end: calc(50% - 20px); + inset-inline: auto calc(50% - 20px); } } - @media screen and (max-width: 460px) { + @media screen and (width <= 460px) { flex-wrap: nowrap; + :deep(.iconDropdown) { - inset-inline-start: auto; - inset-inline-end: auto; + inset-inline: auto auto; } } } - @media screen and (max-width: 460px) { + + @media screen and (width <= 460px) { flex-direction: column; align-items: flex-start; margin-block-start: 10px; @@ -93,7 +93,7 @@ max-inline-size: 210px; text-align: end; - @media screen and (max-width: 680px) { + @media screen and (width <= 680px) { margin-inline-start: 0; text-align: start; } @@ -110,8 +110,9 @@ gap: 3px; } } + .datePublishedAndViewCount { - @media only screen and (max-width: 460px) { + @media only screen and (width <= 460px) { display: flex; justify-content: left; flex-direction: column; @@ -121,6 +122,7 @@ } } } + .videoViews { white-space: nowrap; } diff --git a/src/renderer/themes.css b/src/renderer/themes.css index 16d45ddc705e8..94f20c9f95b10 100644 --- a/src/renderer/themes.css +++ b/src/renderer/themes.css @@ -7,7 +7,7 @@ .pastelPink, .hotPink, .nordic { - --primary-input-color: rgba(0, 0, 0, 0.50); + --primary-input-color: rgb(0 0 0 / 50%); } .system[data-system-theme*='light'], .light, @@ -31,7 +31,7 @@ .catppuccinMocha, .pastelPink, .nordic { - --primary-input-color: rgba(0, 0, 0, 0.50); + --primary-input-color: rgb(0 0 0 / 50%); --side-nav-hover-text-color: var(--primary-text-color); } @@ -62,7 +62,7 @@ .catppuccinMocha, .hotPink, .nordic { - --primary-shadow-color: rgba(0, 0, 0, 0.75); + --primary-shadow-color: rgb(0 0 0 / 75%); } .system[data-system-theme*='light'], .light { @@ -72,10 +72,10 @@ --primary-shadow-color: rgb(232 232 232 / 100%); --title-color: #3f7ac6; --bg-color: #f1f1f1; - --favorite-icon-color: #00CC00; - --card-bg-color: #FFFFFF; - --secondary-card-bg-color: #eeeeee; - --scrollbar-color: #CCCCCC; + --favorite-icon-color: #0C0; + --card-bg-color: #FFF; + --secondary-card-bg-color: #eee; + --scrollbar-color: #CCC; --scrollbar-color-hover: #BDBDBD; --side-nav-color: #FFF; --side-nav-hover-color: #e0e0e0; @@ -89,7 +89,7 @@ --tertiary-text-color: #999; --title-color: #EEE; --bg-color: #212121; - --favorite-icon-color: #00FF00; + --favorite-icon-color: #0F0; --card-bg-color: #303030; --secondary-card-bg-color: rgb(0 0 0 / 75%); --scrollbar-color: #414141; @@ -103,12 +103,12 @@ .black { --primary-text-color: #EEE; --secondary-text-color: #ddd; - --tertiary-text-color: #EEEEEE; - --title-color: #EEEEEE; - --bg-color: #000000; - --favorite-icon-color: #00FF00; - --card-bg-color: #000000; - --secondary-card-bg-color: rgba(0, 0, 0, 0.75); + --tertiary-text-color: #EEE; + --title-color: #EEE; + --bg-color: #000; + --favorite-icon-color: #0F0; + --card-bg-color: #000; + --secondary-card-bg-color: rgb(0 0 0 / 75%); --scrollbar-color: #515151; --scrollbar-color-hover: #424242; --side-nav-color: #0f0f0f; @@ -137,7 +137,7 @@ --tertiary-text-color: #e5e8f3; --title-color: #BD93F9; --bg-color: #282A36; - --favorite-icon-color: #00FF00; + --favorite-icon-color: #0F0; --card-bg-color: #33353F; --secondary-card-bg-color: #282A36; --scrollbar-color: #44475A; @@ -156,7 +156,7 @@ --tertiary-text-color: #a6adc8; --title-color: var(--accent-color); --bg-color: #1e1e2e; - --favorite-icon-color: #00FF00; + --favorite-icon-color: #0F0; --card-bg-color: #181825; --secondary-card-bg-color: #1e1e2e; --scrollbar-color: #313244; @@ -197,7 +197,7 @@ --tertiary-text-color: #FFFF; --title-color: #000; --bg-color: #ff008a; - --favorite-icon-color: #00FF00; + --favorite-icon-color: #0F0; --card-bg-color: #DE1C85; --secondary-card-bg-color: rgb(0 0 0 / 75%); --scrollbar-color: #FFF; @@ -244,14 +244,14 @@ it can be safely elided. This looks quite pleasant on this theme. */ } .nordic { - --primary-text-color: #EEEEEE; + --primary-text-color: #EEE; --secondary-text-color: #ddd; - --tertiary-text-color: #EEEEEE; - --title-color: #EEEEEE; + --tertiary-text-color: #EEE; + --title-color: #EEE; --bg-color: #2b2f3a; - --favorite-icon-color: #00FF00; + --favorite-icon-color: #0F0; --card-bg-color: #2e3440; - --secondary-card-bg-color: rgba(59, 66, 82, 0.75); + --secondary-card-bg-color: rgb(59 66 82 / 75%); --scrollbar-color: #4b566a; --scrollbar-color-hover: #4b566a; --side-nav-color: #2e3440; diff --git a/src/renderer/views/Channel/Channel.css b/src/renderer/views/Channel/Channel.css index d0f869afe040b..8fb4900f78a7b 100644 --- a/src/renderer/views/Channel/Channel.css +++ b/src/renderer/views/Channel/Channel.css @@ -209,15 +209,17 @@ } } -@media only screen and (max-width: 680px) { +@media only screen and (width <= 680px) { .channelInfo { flex-direction: column; margin-block: 20px 10px; } + .card { max-inline-size: none; inline-size: 100%; } + .channelInfoActionsContainer { flex-direction: row-reverse; justify-content: left; @@ -226,7 +228,7 @@ } } -@media only screen and (max-width: 400px) { +@media only screen and (width <= 400px) { .channelInfo { justify-content: center; gap: 10px; diff --git a/src/renderer/views/Playlist/Playlist.scss b/src/renderer/views/Playlist/Playlist.scss index 5b4fb3c265d7d..1f7bc60e1be50 100644 --- a/src/renderer/views/Playlist/Playlist.scss +++ b/src/renderer/views/Playlist/Playlist.scss @@ -10,7 +10,9 @@ padding: 10px; position: sticky; inset-block-start: 96px; + /* This is needed to make prompt always above video entries */ + /* Value being too high would block search suggestions */ z-index: 1; inline-size: 30%; @@ -44,7 +46,7 @@ // Hide action buttons during transitions // - // The class for icon container is mainly styled in `_ft-list-item.scss` + // The class for icon container is mainly styled in `ft-list-item.scss` // But the transition related classes are all on container elements // So `:deep` is used :deep(.ft-list-item .videoThumbnail .playlistIcons) { @@ -56,6 +58,7 @@ pointer-events: none; } } + .playlistItem-enter, .playlistItem-leave-to { opacity: 0; transform: translate(calc(10% * var(--horizontal-directionality-coefficient))); @@ -70,7 +73,7 @@ margin-block: auto; } -@media only screen and (max-width: 850px) { +@media only screen and (width <= 850px) { .routerView { flex-direction: column; } diff --git a/src/renderer/views/ProfileSettings/ProfileSettings.css b/src/renderer/views/ProfileSettings/ProfileSettings.css index 8c568da7bc3fc..f7d8a4ebc9a47 100644 --- a/src/renderer/views/ProfileSettings/ProfileSettings.css +++ b/src/renderer/views/ProfileSettings/ProfileSettings.css @@ -29,7 +29,7 @@ h2 { margin-inline: auto; } -@media only screen and (max-width: 680px) { +@media only screen and (width <= 680px) { .card { inline-size: 90%; } diff --git a/src/renderer/views/Settings/Settings.css b/src/renderer/views/Settings/Settings.css index 42f5502d04152..d433f8cf483cb 100644 --- a/src/renderer/views/Settings/Settings.css +++ b/src/renderer/views/Settings/Settings.css @@ -6,7 +6,7 @@ hr { border-block-start: 2px solid var(--scrollbar-color-hover); } -@media only screen and (max-width: 800px) { +@media only screen and (width <= 800px) { hr { inline-size: 100%; } diff --git a/src/renderer/views/UserPlaylists/UserPlaylists.css b/src/renderer/views/UserPlaylists/UserPlaylists.css index ab9a66fc608be..bdecb1640e17f 100644 --- a/src/renderer/views/UserPlaylists/UserPlaylists.css +++ b/src/renderer/views/UserPlaylists/UserPlaylists.css @@ -1,6 +1,5 @@ .card { position: relative; - inline-size: 85%; margin-block: 0 60px; margin-inline: auto; @@ -23,7 +22,8 @@ grid-template-columns: 1fr auto; column-gap: 16px; } -@media only screen and (max-width: 800px) { + +@media only screen and (width <= 800px) { .searchInputsRow { /* Switch to 2 rows from 2 columns */ grid-template-columns: auto; @@ -37,7 +37,8 @@ grid-template-rows: 1fr; align-items: center; } -@media only screen and (max-width: 800px) { + +@media only screen and (width <= 800px) { .optionsRow { /* Switch to 2 rows from 2 columns */ grid-template-columns: auto; diff --git a/src/renderer/views/Watch/Watch.scss b/src/renderer/views/Watch/Watch.scss index 35a219936c461..cac7c281dff90 100644 --- a/src/renderer/views/Watch/Watch.scss +++ b/src/renderer/views/Watch/Watch.scss @@ -16,7 +16,7 @@ display: inline-block; max-inline-size: calc(80vh * 1.78); - @media only screen and (min-width: 1051px) { + @media only screen and (width >= 1051px) { inline-size: 300%; } } @@ -99,7 +99,7 @@ .sidebarArea { grid-area: sidebar; - @media only screen and (min-width: 1051px) { + @media only screen and (width >= 1051px) { min-inline-size: 380px; } @@ -135,7 +135,7 @@ margin-block: 0 16px; margin-inline: 0; - @media only screen and (min-width: 1051px) { + @media only screen and (width >= 1051px) { margin-block: 0 16px; margin-inline: 8px; } @@ -145,17 +145,17 @@ @include theatre-mode-template; } - @media only screen and (min-width: 1051px) { + @media only screen and (width >= 1051px) { &.useTheatreMode { @include theatre-mode-template; } } - @media only screen and (max-width: 1050px) { + @media only screen and (width <= 1050px) { @include single-column-template; } - @media only screen and (min-width: 1051px) { + @media only screen and (width >= 1051px) { .infoArea { scroll-margin-block-start: 76px; } From 9e16fe189e47d808f0a4b7366f8037e4e2fc9131 Mon Sep 17 00:00:00 2001 From: Jason Henriquez Date: Fri, 5 Apr 2024 22:32:22 -0500 Subject: [PATCH 7/9] Implement _ft-list-item.scss linting fixes excluding no-descending-specificity Properly implementing the no-descending-specificity rule in this file seems to utterly destroy the styling. This would be its own entire initiative to unravel. --- src/renderer/scss-partials/_ft-list-item.scss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/renderer/scss-partials/_ft-list-item.scss b/src/renderer/scss-partials/_ft-list-item.scss index b3f2588a146cd..0b990d51ff49f 100644 --- a/src/renderer/scss-partials/_ft-list-item.scss +++ b/src/renderer/scss-partials/_ft-list-item.scss @@ -1,3 +1,5 @@ +/* stylelint-disable no-descending-specificity */ + $thumbnail-overlay-opacity: 0.85; $watched-transition-duration: 0.5s; @@ -127,7 +129,6 @@ $watched-transition-duration: 0.5s; grid-column: 1; grid-row: 1; user-select: none; - -webkit-user-select: none; } .thumbnailLink { @@ -186,12 +187,12 @@ $watched-transition-duration: 0.5s; justify-self: end; margin-inline-end: 3px; margin-block-start: 3px; - display: grid; grid-auto-flow: column; justify-content: flex-end; block-size: fit-content; } + .quickBookmarkVideoIcon, .addToPlaylistIcon, .trashIcon, @@ -337,7 +338,7 @@ $watched-transition-duration: 0.5s; inline-size: 336px; max-inline-size: 25vw; - @media only screen and (max-width: 680px) { + @media only screen and (width <= 680px) { max-inline-size: 30vw; } } @@ -346,7 +347,7 @@ $watched-transition-duration: 0.5s; max-inline-size: 25vw; max-block-size: 25vw; - @media only screen and (max-width: 680px) { + @media only screen and (width <= 680px) { max-inline-size: 30vw; max-block-size: 30vw; } @@ -435,7 +436,6 @@ $watched-transition-duration: 0.5s; .upcoming { text-transform: uppercase; user-select: none; - -webkit-user-select: none; } // we use h3 for semantic reasons but don't want to keep the h3 style From bbe7ae0a1218553538220811c4b3ad01d8d27af5 Mon Sep 17 00:00:00 2001 From: Jason Henriquez Date: Fri, 12 Apr 2024 08:03:24 -0500 Subject: [PATCH 8/9] Restart from scratch modifications of _ft-list-item.scss --- src/renderer/scss-partials/_ft-list-item.scss | 76 +++---------------- 1 file changed, 12 insertions(+), 64 deletions(-) diff --git a/src/renderer/scss-partials/_ft-list-item.scss b/src/renderer/scss-partials/_ft-list-item.scss index 0b990d51ff49f..c6f6a5d7af513 100644 --- a/src/renderer/scss-partials/_ft-list-item.scss +++ b/src/renderer/scss-partials/_ft-list-item.scss @@ -1,5 +1,4 @@ /* stylelint-disable no-descending-specificity */ - $thumbnail-overlay-opacity: 0.85; $watched-transition-duration: 0.5s; @@ -56,17 +55,6 @@ $watched-transition-duration: 0.5s; .ft-list-item { padding: 6px; - .thumbnailImage { - @include is-sidebar-item { - block-size: 75px; - } - - @include is-recommendation { - block-size: auto; - inline-size: 163px; - } - } - &.watched { @include low-contrast-when-watched(var(--primary-text-color)); @@ -84,36 +72,6 @@ $watched-transition-duration: 0.5s; } } - .favoritesIcon, - .externalPlayerIcon { - opacity: $thumbnail-overlay-opacity; - } - - .favoritesIcon, - .externalPlayerIcon, - .optionsButton { - visibility: none; - opacity: 0; - transition: visibility 0s, opacity 0.2s linear; - } - - @media (hover: hover) { - .favoritesIcon.favorited, - &:hover .favoritesIcon, - &:hover .externalPlayerIcon, - &:focus-within .favoritesIcon, - &:focus-within .externalPlayerIcon { - visibility: visible; - opacity: $thumbnail-overlay-opacity; - } - - &:hover .optionsButton, - &:focus-within .optionsButton { - visibility: visible; - opacity: 1; - } - } - .videoThumbnail { display: grid; @@ -136,6 +94,17 @@ $watched-transition-duration: 0.5s; overflow: hidden; } + .thumbnailImage { + @include is-sidebar-item { + block-size: 75px; + } + + @include is-recommendation { + block-size: auto; + inline-size: 163px; + } + } + .videoWatched { place-self: flex-start start; background-color: var(--bg-color); @@ -145,13 +114,6 @@ $watched-transition-duration: 0.5s; pointer-events: none; } - .videoWatched, - .live, - .upcoming { - text-transform: uppercase; - user-select: none; - } - .videoDuration { place-self: flex-end end; background-color: var(--card-bg-color); @@ -208,20 +170,6 @@ $watched-transition-duration: 0.5s; z-index: 2; } - .thumbnailLink, - .videoWatched, - .videoDuration, - .externalPlayerIcon, - .favoritesIcon, - .watchedProgressBar, - .videoCountContainer, - .background, - .inner { - grid-column: 1; - grid-row: 1; - user-select: none; - } - .videoCountContainer { place-self: stretch end; display: grid; @@ -411,7 +359,7 @@ $watched-transition-duration: 0.5s; &:has(:focus-visible) .addToPlaylistIcon:not(.alwaysVisible), &:has(:focus-visible) .quickBookmarkVideoIcon:not(.alwaysVisible), &:has(:focus-visible) .externalPlayerIcon { - opacity: $thumbnail-overlay-opacity; + opacity: 1; } &:hover .optionsButton, From e6bf4e0621f4192174424f1f4e848c9b790ccdb7 Mon Sep 17 00:00:00 2001 From: Jason Henriquez Date: Sat, 13 Apr 2024 08:49:28 -0500 Subject: [PATCH 9/9] Resolve styling discrepancies introduced with ft-list-channel and ft-tooltip --- .../ft-list-channel/ft-list-channel.scss | 13 ++++++------ .../components/ft-select/ft-select.css | 2 +- .../components/ft-tooltip/ft-tooltip.css | 21 +++++++++++++++++++ 3 files changed, 29 insertions(+), 7 deletions(-) diff --git a/src/renderer/components/ft-list-channel/ft-list-channel.scss b/src/renderer/components/ft-list-channel/ft-list-channel.scss index 57e7bb205a7f7..8f1b55dd7892d 100644 --- a/src/renderer/components/ft-list-channel/ft-list-channel.scss +++ b/src/renderer/components/ft-list-channel/ft-list-channel.scss @@ -1,14 +1,18 @@ @use '../../scss-partials/ft-list-item'; +.infoAndSubscribe { + display: flex; + flex-flow: row wrap; + justify-content: center; + inline-size: 100%; +} + .ft-list-channel { &.grid { align-items: center; text-align: center; .infoAndSubscribe { - display: flex; - justify-content: center; - inline-size: 100%; flex-flow: column wrap; align-items: center; @@ -24,9 +28,6 @@ &.list { .infoAndSubscribe { - flex-flow: row wrap; - justify-content: center; - .channelSubscribeButton { margin-block: auto; margin-inline: 7px; diff --git a/src/renderer/components/ft-select/ft-select.css b/src/renderer/components/ft-select/ft-select.css index 3b4c74915b73d..d2b0a30f2bcdf 100644 --- a/src/renderer/components/ft-select/ft-select.css +++ b/src/renderer/components/ft-select/ft-select.css @@ -52,7 +52,7 @@ /* Use custom arrow */ .select .select-text { - appearance:none; + appearance: none; text-overflow: ellipsis; padding-inline-end: 1.5rem; } diff --git a/src/renderer/components/ft-tooltip/ft-tooltip.css b/src/renderer/components/ft-tooltip/ft-tooltip.css index 893106747722f..9419eeed1c27c 100644 --- a/src/renderer/components/ft-tooltip/ft-tooltip.css +++ b/src/renderer/components/ft-tooltip/ft-tooltip.css @@ -63,6 +63,27 @@ transform: translate(calc(-50% * var(--horizontal-directionality-coefficient)), 1em); } +.button:focus + .text, +.button:hover + .text { + opacity: 1; + visibility: visible; +} + +.button:focus + .text.bottom, +.button:hover + .text.bottom, +.button:hover + .text.bottom-left, +.button:focus + .text.top, +.button:hover + .text.top { + transform: translate(calc(-50% * var(--horizontal-directionality-coefficient)), 0); +} + +.button:focus + .text.left, +.button:hover + .text.left, +.button:focus + .text.right, +.button:hover + .text.right { + transform: translate(0, -50%); +} + .text.allowNewlines { white-space: pre-wrap; text-align: start;