diff --git a/package.json b/package.json index 8a305fd68a186..60fed0161ddf4 100644 --- a/package.json +++ b/package.json @@ -118,8 +118,8 @@ "rimraf": "^6.0.1", "sass": "^1.77.8", "sass-loader": "^14.2.1", - "stylelint": "^16.6.1", - "stylelint-config-sass-guidelines": "^11.1.0", + "stylelint": "^16.7.0", + "stylelint-config-sass-guidelines": "^12.0.0", "stylelint-config-standard": "^36.0.1", "stylelint-high-performance-animation": "^1.10.0", "stylelint-use-logical-spec": "^5.0.1", diff --git a/src/renderer/App.css b/src/renderer/App.css index 28607f039e3ff..866c01197bf6f 100644 --- a/src/renderer/App.css +++ b/src/renderer/App.css @@ -1,6 +1,6 @@ @font-face { font-family: Roboto; - src: url("assets/font/Roboto-Regular.ttf"); + src: url('assets/font/Roboto-Regular.ttf'); } .app { @@ -45,11 +45,13 @@ overflow-wrap: break-word; } -.fade-enter-active, .fade-leave-active { - transition: opacity .15s; +.fade-enter-active, +.fade-leave-active { + transition: opacity 0.15s; } -.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ { +.fade-enter, +.fade-leave-to /* .fade-leave-active below version 2.1.8 */ { opacity: 0; } diff --git a/src/renderer/components/experimental-settings/experimental-settings.css b/src/renderer/components/experimental-settings/experimental-settings.css index 2b20e6e674d38..5cf37ec635900 100644 --- a/src/renderer/components/experimental-settings/experimental-settings.css +++ b/src/renderer/components/experimental-settings/experimental-settings.css @@ -1,5 +1,5 @@ .experimental-warning { text-align: center; font-weight: bold; - padding-inline: 4% 4% + padding-inline: 4%; } diff --git a/src/renderer/components/ft-age-restricted/ft-age-restricted.css b/src/renderer/components/ft-age-restricted/ft-age-restricted.css index 33a98376fa1b4..21800c5d4e9b0 100644 --- a/src/renderer/components/ft-age-restricted/ft-age-restricted.css +++ b/src/renderer/components/ft-age-restricted/ft-age-restricted.css @@ -8,7 +8,8 @@ padding-block: 20px; } -.message, .frown { +.message, +.frown { color: var(--primary-text-color); background-color: var(--card-bg-color); padding-inline: 0; diff --git a/src/renderer/components/ft-button/ft-button.css b/src/renderer/components/ft-button/ft-button.css index a2a9a5f4474b6..1fce48714e469 100644 --- a/src/renderer/components/ft-button/ft-button.css +++ b/src/renderer/components/ft-button/ft-button.css @@ -34,7 +34,7 @@ } .ripple::after { - content: ""; + content: ''; display: block; position: absolute; inline-size: 100%; @@ -47,11 +47,11 @@ background-position: 50%; transform: scale(10, 10); opacity: 0; - transition: transform .5s, opacity 1s; + transition: transform 0.5s, opacity 1s; } .ripple:active::after { transform: scale(0, 0); - opacity: .3; + opacity: 0.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 0dfb0c1148177..858a7dd416670 100644 --- a/src/renderer/components/ft-channel-bubble/ft-channel-bubble.css +++ b/src/renderer/components/ft-channel-bubble/ft-channel-bubble.css @@ -34,7 +34,7 @@ } .icon { - color: #EEE; + color: #eee; font-size: 25px; position: absolute; inset-block-start: 12px; diff --git a/src/renderer/components/ft-checkbox-list/ft-checkbox-list.css b/src/renderer/components/ft-checkbox-list/ft-checkbox-list.css index 429b13059995d..30085ee39f775 100644 --- a/src/renderer/components/ft-checkbox-list/ft-checkbox-list.css +++ b/src/renderer/components/ft-checkbox-list/ft-checkbox-list.css @@ -1,5 +1,5 @@ /* stylelint-disable no-descending-specificity */ -.pure-checkbox input[type="checkbox"] { +.pure-checkbox input[type='checkbox'] { border: 0; clip: rect(0 0 0 0); block-size: 1px; @@ -10,13 +10,14 @@ inline-size: 1px; } -.pure-checkbox input[type="checkbox"]:focus + label::before, .pure-checkbox input[type="checkbox"]:hover + label::before { +.pure-checkbox input[type='checkbox']:focus + label::before, +.pure-checkbox input[type='checkbox']:hover + label::before { border: 2px solid var(--primary-color); } -.pure-checkbox input[type="checkbox"]:active + label::before { transition-duration: 0s; } +.pure-checkbox input[type='checkbox']:active + label::before { transition-duration: 0s; } -.pure-checkbox input[type="checkbox"] + label { +.pure-checkbox input[type='checkbox'] + label { position: relative; padding-inline-start: 2em; user-select: none; @@ -25,7 +26,7 @@ margin-block-start: 10px; } -.pure-checkbox input[type="checkbox"] + label::before { +.pure-checkbox input[type='checkbox'] + label::before { box-sizing: content-box; content: ''; color: var(--primary-text-color); @@ -40,7 +41,7 @@ transition: all 0.4s ease; } -.pure-checkbox input[type="checkbox"] + label::after { +.pure-checkbox input[type='checkbox'] + label::after { box-sizing: content-box; border-style: solid; border-image: none; @@ -58,26 +59,27 @@ transition: transform 200ms ease-out; } -.pure-checkbox input[type="checkbox"]:disabled + label::before { border-color: #ccc; } +.pure-checkbox input[type='checkbox']:disabled + label::before { border-color: #ccc; } -.pure-checkbox input[type="checkbox"]:disabled:focus + label::before, .pure-checkbox input[type="checkbox"]:disabled:hover + label::before { background-color: inherit; } +.pure-checkbox input[type='checkbox']:disabled:focus + label::before, +.pure-checkbox input[type='checkbox']:disabled:hover + label::before { background-color: inherit; } -.pure-checkbox input[type="checkbox"]:disabled:checked + label::before { background-color: #ccc; } +.pure-checkbox input[type='checkbox']:disabled:checked + label::before { background-color: #ccc; } -.pure-checkbox input[type="checkbox"]:checked + label::after { +.pure-checkbox input[type='checkbox']:checked + label::after { content: ''; transform: rotate(-45deg) scale(1); transition: transform 200ms ease-out; } -.pure-checkbox input[type="checkbox"]:checked + label::before { +.pure-checkbox input[type='checkbox']:checked + label::before { animation: borderscale 200ms ease-in; } @keyframes -borderscale { 50% { - box-shadow: 0 0 0 2px var(--primary-text-color); -} + borderscale { 50% { + box-shadow: 0 0 0 2px var(--primary-text-color); + } } .checkboxTitle { @@ -85,7 +87,7 @@ borderscale { 50% { } @media only screen and (width <= 680px) { - .pure-checkbox input[type="checkbox"] + label { + .pure-checkbox input[type='checkbox'] + label { margin-block-start: 3px; } } 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 3f954536a43c7..0d3c0ec06cde3 100644 --- a/src/renderer/components/ft-community-poll/ft-community-poll.css +++ b/src/renderer/components/ft-community-poll/ft-community-poll.css @@ -65,6 +65,7 @@ cursor: pointer; } -.reveal-answer:hover, .reveal-answer:focus { - background-color: var(--side-nav-hover-color) +.reveal-answer:hover, +.reveal-answer:focus { + background-color: var(--side-nav-hover-color); } 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 41dd14b2d0a35..6a0b220e2bd6a 100644 --- a/src/renderer/components/ft-icon-button/ft-icon-button.scss +++ b/src/renderer/components/ft-icon-button/ft-icon-button.scss @@ -98,7 +98,9 @@ } } - &.favorite, &.favorite:hover, &.favorite:focus-visible { + &.favorite, + &.favorite:hover, + &.favorite:focus-visible { &:not(.disabled) { color: var(--favorite-icon-color); } diff --git a/src/renderer/components/ft-input/ft-input.css b/src/renderer/components/ft-input/ft-input.css index e5f9a17041073..89b7450e588f6 100644 --- a/src/renderer/components/ft-input/ft-input.css +++ b/src/renderer/components/ft-input/ft-input.css @@ -3,14 +3,14 @@ position: relative; } - body[dir='rtl'] .ft-input-component.search.showClearTextButton .inputAction { +body[dir='rtl'] .ft-input-component.search.showClearTextButton .inputAction { inset-inline-end: -30px; - } +} - body[dir='rtl'] .ft-input-component.search.clearTextButtonVisible .inputAction, - body[dir='rtl'] .ft-input-component.search.showClearTextButton:focus-within .inputAction { +body[dir='rtl'] .ft-input-component.search.clearTextButtonVisible .inputAction, +body[dir='rtl'] .ft-input-component.search.showClearTextButton:focus-within .inputAction { inset-inline-end: 0; - } +} .ft-input-component.search.showClearTextButton { padding-inline-start: 30px; @@ -41,7 +41,8 @@ opacity: 1; } -.disabled label, .disabled .ft-input{ +.disabled label, +.disabled .ft-input { opacity: 0.4; cursor: not-allowed; } @@ -82,7 +83,7 @@ } .forceTextColor .clearInputTextButton { - color: #EEE; + color: #eee; } .forceTextColor .clearInputTextButton:active { @@ -109,7 +110,7 @@ } .forceTextColor .ft-input { - color: #EEE; + color: #eee; background-color: var(--primary-input-color); } @@ -119,7 +120,7 @@ } .forceTextColor ::placeholder { - color: #EEE; + color: #eee; } .inputWrapper { @@ -153,7 +154,7 @@ } .forceTextColor .inputAction { - color: #EEE; + color: #eee; } .ft-input-component.showActionButton .ft-input { diff --git a/src/renderer/components/ft-loader/ft-loader.css b/src/renderer/components/ft-loader/ft-loader.css index b27213cf68512..17c0047d66a62 100644 --- a/src/renderer/components/ft-loader/ft-loader.css +++ b/src/renderer/components/ft-loader/ft-loader.css @@ -36,37 +36,37 @@ */ .spinner { - inline-size: 40px; - block-size: 40px; - position: relative; - margin-block: 100px; - margin-inline: auto; + inline-size: 40px; + block-size: 40px; + position: relative; + margin-block: 100px; + margin-inline: auto; } .double-bounce1, .double-bounce2 { - inline-size: 100%; - block-size: 100%; - border-radius: 50%; - opacity: 0.6; - position: absolute; - inset-block-start: 0; - inset-inline-start: 0; - background-color: var(--primary-color); - animation: sk-bounce 2.0s infinite ease-in-out; + inline-size: 100%; + block-size: 100%; + border-radius: 50%; + opacity: 0.6; + position: absolute; + inset-block-start: 0; + inset-inline-start: 0; + background-color: var(--primary-color); + animation: sk-bounce 2s infinite ease-in-out; } .double-bounce2 { - animation-delay: -1.0s; + animation-delay: -1s; } @keyframes sk-bounce { - 0%, - 100% { - transform: scale(0.0); - } + 0%, + 100% { + transform: scale(0); + } - 50% { - transform: scale(1.0); - } + 50% { + transform: scale(1); + } } 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 6efe9d4f95bba..ec96a51cf3ff2 100644 --- a/src/renderer/components/ft-notification-banner/ft-notification-banner.css +++ b/src/renderer/components/ft-notification-banner/ft-notification-banner.css @@ -7,7 +7,7 @@ color: var(--text-with-accent-color); */ margin: 4px; - padding: 16px; + padding: 16px; padding-block: 3px 5px; padding-inline: 16px; box-shadow: 0 1px 2px rgb(0 0 0 / 10%); 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 52b828b61ad56..3d7ff2ca33542 100644 --- a/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.css +++ b/src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.css @@ -1,4 +1,5 @@ -h2, .selectedCount { +h2, +.selectedCount { text-align: center; } 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 31d54c310ff0f..6290036dda212 100644 --- a/src/renderer/components/ft-profile-edit/ft-profile-edit.css +++ b/src/renderer/components/ft-profile-edit/ft-profile-edit.css @@ -11,7 +11,8 @@ h3 { color: var(--tertiary-text-color); } -.profileName, .colorSelection { +.profileName, +.colorSelection { margin: auto; inline-size: 350px; } 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 53c3d41bf491b..f59707834dc3a 100644 --- a/src/renderer/components/ft-profile-selector/ft-profile-selector.css +++ b/src/renderer/components/ft-profile-selector/ft-profile-selector.css @@ -40,13 +40,13 @@ 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 */ - max-block-size: calc(90vh - 100px); + max-block-size: calc(90vh - 100px); min-block-size: 340px; } /* Navbar changes position to horizontal with this media rule. Height adjust for profile list so it won't cover navbar. */ -@media only screen and (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 2b7d604596270..74f36a1a41efb 100644 --- a/src/renderer/components/ft-prompt/ft-prompt.css +++ b/src/renderer/components/ft-prompt/ft-prompt.css @@ -36,9 +36,9 @@ } .promptCard.flex-column { - /* Some child(ren) will grow vertically */ - display: flex; - flex-direction: column; + /* Some child(ren) will grow vertically */ + display: flex; + flex-direction: column; } .promptCard.slim { 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 92dbf9f7e7bb1..ca7b968925a35 100644 --- a/src/renderer/components/ft-radio-button/ft-radio-button.css +++ b/src/renderer/components/ft-radio-button/ft-radio-button.css @@ -1,5 +1,5 @@ /* stylelint-disable no-descending-specificity */ -.pure-radiobutton input[type="radio"] { +.pure-radiobutton input[type='radio'] { border: 0; clip: rect(0 0 0 0); block-size: 1px; @@ -10,13 +10,14 @@ inline-size: 1px; } -.pure-radiobutton input[type="radio"]:focus + label::before, .pure-radiobutton input[type="radio"]:hover + label::before { +.pure-radiobutton input[type='radio']:focus + label::before, +.pure-radiobutton input[type='radio']:hover + label::before { border: 2px solid var(--primary-color); } -.pure-radiobutton input[type="radio"]:active + label::before { transition-duration: 0s; } +.pure-radiobutton input[type='radio']:active + label::before { transition-duration: 0s; } -.pure-radiobutton input[type="radio"] + label { +.pure-radiobutton input[type='radio'] + label { position: relative; padding-inline-start: 2em; user-select: none; @@ -25,7 +26,7 @@ margin-block-start: 10px; } -.pure-radiobutton input[type="radio"] + label::before { +.pure-radiobutton input[type='radio'] + label::before { box-sizing: content-box; content: ''; color: var(--primary-text-color); @@ -40,7 +41,7 @@ transition: all 0.4s ease; } -.pure-radiobutton input[type="radio"] + label::after { +.pure-radiobutton input[type='radio'] + label::after { box-sizing: content-box; content: ''; background-color: var(--primary-text-color); @@ -55,29 +56,32 @@ transition: transform 200ms ease-out; } -.pure-radiobutton input[type="radio"]:disabled + label::before { border-color: #ccc; } +.pure-radiobutton input[type='radio']:disabled + label::before { border-color: #ccc; } -.pure-radiobutton input[type="radio"]:disabled:focus + label::before, .pure-radiobutton input[type="radio"]:disabled:hover + label::before { background-color: inherit; } +.pure-radiobutton input[type='radio']:disabled:focus + label::before, +.pure-radiobutton input[type='radio']:disabled:hover + label::before { background-color: inherit; } -.pure-radiobutton input[type="radio"]:disabled:checked + label::before { background-color: #ccc; } +.pure-radiobutton input[type='radio']:disabled:checked + label::before { background-color: #ccc; } -.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-radiobutton input[type="radio"]:focus + label::after{ +.pure-radiobutton input[type='radio']:focus + label::after { background-color: var(--primary-color); } -.pure-radiobutton input[type="radio"]:checked + label::after { transform: scale(1); } +.pure-radiobutton input[type='radio']:checked + label::after { transform: scale(1); } -.pure-radiobutton input[type="radio"] + label::before, .pure-radiobutton input[type="radio"] + label::after { border-radius: 50%; } +.pure-radiobutton input[type='radio'] + label::before, +.pure-radiobutton input[type='radio'] + label::after { border-radius: 50%; } @keyframes -borderscale { 50% { - box-shadow: 0 0 0 2px var(--primary-text-color); -} + borderscale { 50% { + box-shadow: 0 0 0 2px var(--primary-text-color); + } } .radioTitle { @@ -85,7 +89,7 @@ borderscale { 50% { } @media only screen and (width <= 680px) { - .pure-radiobutton input[type="radio"] + label { + .pure-radiobutton input[type='radio'] + label { margin-block-start: 3px; } } diff --git a/src/renderer/components/ft-select/ft-select.css b/src/renderer/components/ft-select/ft-select.css index 58ae9bf374f4d..c129834ae263c 100644 --- a/src/renderer/components/ft-select/ft-select.css +++ b/src/renderer/components/ft-select/ft-select.css @@ -50,7 +50,7 @@ outline: none; } - /* Use custom arrow */ +/* Use custom arrow */ .select .select-text { appearance: none; text-overflow: ellipsis; @@ -71,7 +71,8 @@ color: var(--tertiary-text-color); } -.disabled, .disabled + .iconSelect { +.disabled, +.disabled + .iconSelect { opacity: 0.4; cursor: not-allowed; } @@ -102,7 +103,8 @@ } /* active state */ -.select-text:focus ~ .select-label, .select-text:valid ~ .select-label { +.select-text:focus ~ .select-label, +.select-text:valid ~ .select-label { color: var(--accent-color); inset-block-start: -20px; transition: 0.2s ease all; @@ -115,7 +117,8 @@ display: block; } -.select-bar::before, .select-bar::after { +.select-bar::before, +.select-bar::after { content: ''; block-size: 2px; inline-size: 0; @@ -134,7 +137,8 @@ } /* 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%; } 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 d20e535353bf5..dc3515db90ba6 100644 --- a/src/renderer/components/ft-share-button/ft-share-button.scss +++ b/src/renderer/components/ft-share-button/ft-share-button.scss @@ -47,8 +47,7 @@ } .black &, - .solarizedDark & - { + .solarizedDark & { filter: brightness(0.933); } diff --git a/src/renderer/components/ft-slider/ft-slider.css b/src/renderer/components/ft-slider/ft-slider.css index c6463d7c25650..34ff70dc15a28 100644 --- a/src/renderer/components/ft-slider/ft-slider.css +++ b/src/renderer/components/ft-slider/ft-slider.css @@ -8,7 +8,7 @@ display: inline-block; inline-size: 380px; color: rgb(var(--primary-text-color) 0.87); - font-family: var(--pure-material-font, "Roboto", "Segoe UI", BlinkMacSystemFont, system-ui, -apple-system); + font-family: var(--pure-material-font, 'Roboto', 'Segoe UI', BlinkMacSystemFont, system-ui, -apple-system); font-size: 16px; line-height: 1.5; padding: 5px; 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 249281b8a6db6..f0a506fbc1616 100644 --- a/src/renderer/components/ft-subscribe-button/ft-subscribe-button.scss +++ b/src/renderer/components/ft-subscribe-button/ft-subscribe-button.scss @@ -23,14 +23,16 @@ white-space: initial; } -.subscribeButton.btn, .profileDropdownToggle.btn { +.subscribeButton.btn, +.profileDropdownToggle.btn { align-self: center; margin-block: 0; margin-inline: 0; } .dropdownOpened { - .subscribeButton, .profileDropdownToggle { + .subscribeButton, + .profileDropdownToggle { border-end-start-radius: 0; border-end-end-radius: 0; } @@ -57,7 +59,8 @@ } } -.hasProfileDropdownToggle > .subscribeButton.btn, .profileDropdownToggle.btn { +.hasProfileDropdownToggle > .subscribeButton.btn, +.profileDropdownToggle.btn { padding-block: 5px; padding-inline: 6px; box-shadow: none; diff --git a/src/renderer/components/ft-toast/ft-toast.css b/src/renderer/components/ft-toast/ft-toast.css index 1a5ef01a53ff5..c7c37555aaa07 100644 --- a/src/renderer/components/ft-toast/ft-toast.css +++ b/src/renderer/components/ft-toast/ft-toast.css @@ -18,7 +18,7 @@ text-align: center; overflow-y: auto; background-color: rgb(0 0 0 / 70%); - color: #FFF; + color: #fff; opacity: 0; border-radius: 20px; cursor: pointer; 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 b098db5badf6d..62b01b1450e69 100644 --- a/src/renderer/components/ft-video-player/ft-video-player.css +++ b/src/renderer/components/ft-video-player/ft-video-player.css @@ -11,7 +11,8 @@ cursor: none; } -:deep(.sponsorBlockMarker), :deep(.chapterMarker) { +:deep(.sponsorBlockMarker), +:deep(.chapterMarker) { position: absolute; opacity: 0.6; } diff --git a/src/renderer/components/general-settings/general-settings.css b/src/renderer/components/general-settings/general-settings.css index c4ad1999e9cc6..07e4205544631 100644 --- a/src/renderer/components/general-settings/general-settings.css +++ b/src/renderer/components/general-settings/general-settings.css @@ -6,4 +6,4 @@ .switchGrid { gap: 10px; margin-block-end: 12px; -} \ No newline at end of file +} diff --git a/src/renderer/components/playlist-info/playlist-info.scss b/src/renderer/components/playlist-info/playlist-info.scss index a429360c0c355..cdec36bd25c9c 100644 --- a/src/renderer/components/playlist-info/playlist-info.scss +++ b/src/renderer/components/playlist-info/playlist-info.scss @@ -80,7 +80,8 @@ } .top-bar { - .playlistThumbnail, .playlistInfoSeparator { + .playlistThumbnail, + .playlistInfoSeparator { display: none; } @@ -95,7 +96,8 @@ margin-block-start: 0.2em; } - .playlistTitle, .playlistDescription { + .playlistTitle, + .playlistDescription { overflow-x: hidden; text-align: center; white-space: nowrap; @@ -116,7 +118,9 @@ align-items: center; } - .channelShareWrapper, .searchInputsRow, .playlistStats { + .channelShareWrapper, + .searchInputsRow, + .playlistStats { column-gap: 0; inline-size: 100%; } @@ -128,6 +132,6 @@ @media only screen and (width <= 1250px) { :deep(.sharePlaylistIcon .iconDropdown) { - inset-inline: auto auto; + inset-inline: auto; } } diff --git a/src/renderer/components/proxy-settings/proxy-settings.css b/src/renderer/components/proxy-settings/proxy-settings.css index 582365c9120fd..4798186b5b717 100644 --- a/src/renderer/components/proxy-settings/proxy-settings.css +++ b/src/renderer/components/proxy-settings/proxy-settings.css @@ -1,3 +1,3 @@ .protocol-dropdown { margin-block-end: 1rem; -} \ No newline at end of file +} 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 1126225866802..adc4de66ec329 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 @@ -37,7 +37,8 @@ display: block; } - .sideNav, .closed { + .sideNav, + .closed { margin-block-start: 0; block-size: 60px; inline-size: 100%; @@ -45,7 +46,8 @@ overflow-y: inherit; } - .navOption, .closed .navOption { + .navOption, + .closed .navOption { inline-size: 70px; block-size: 40px; padding-block: 10px; @@ -71,7 +73,7 @@ display: block; } - .closed .navIconExpand{ - block-size:1.3em; + .closed .navIconExpand { + block-size: 1.3em; } } diff --git a/src/renderer/components/side-nav/side-nav.css b/src/renderer/components/side-nav/side-nav.css index 282d41c7a1d90..e13f4c4666b9c 100644 --- a/src/renderer/components/side-nav/side-nav.css +++ b/src/renderer/components/side-nav/side-nav.css @@ -37,7 +37,8 @@ margin-block-start: 10px; } -.navOption, .navChannel { +.navOption, +.navChannel { position: relative; padding: 5px; min-block-size: 35px; @@ -48,7 +49,8 @@ display: none; } -.navOption, .channelLink { +.navOption, +.channelLink { display: block; color: inherit; text-decoration: inherit; @@ -61,13 +63,15 @@ word-break: break-word; } -.navOption:hover, .navChannel:hover { +.navOption:hover, +.navChannel:hover { background-color: var(--side-nav-hover-color); color: var(--side-nav-hover-text-color); transition: background 0.2s ease-in; } -.navOption:active, .navChannel:active { +.navOption:active, +.navChannel:active { background-color: var(--side-nav-active-color); color: var(--side-nav-active-text-color); transition: background 0.2s ease-in; @@ -131,8 +135,8 @@ margin-block-end: 0; } -.closed .navIconExpand{ - block-size:1.3em; +.closed .navIconExpand { + block-size: 1.3em; } .closed .navLabel { @@ -173,7 +177,9 @@ display: contents; /* sunglasses emoji */ } - hr, .mobileHidden, .refreshIcon { + hr, + .mobileHidden, + .refreshIcon { display: none; } @@ -189,7 +195,8 @@ padding-inline: 10px; } - .sideNav, .closed { + .sideNav, + .closed { margin-block-start: 0; block-size: 60px; inline-size: 100%; @@ -197,11 +204,12 @@ overflow-y: hidden; } - .navOption, .closed .navOption { + .navOption, + .closed .navOption { inline-size: 70px; block-size: 40px; padding: 0; - padding-block: 10px 10px; + padding-block: 10px; } .navLabel { @@ -216,7 +224,7 @@ display: block; } - .closed.hiddenLabels{ + .closed.hiddenLabels { inline-size: 100%; } } 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 a6e3252aa2bcf..00a79fba8d7b7 100644 --- a/src/renderer/components/watch-video-info/watch-video-info.scss +++ b/src/renderer/components/watch-video-info/watch-video-info.scss @@ -14,7 +14,8 @@ word-break: break-word; } -.videoMetrics, .videoButtons { +.videoMetrics, +.videoButtons { display: flex; justify-content: space-between; align-items: center; @@ -68,7 +69,7 @@ flex-wrap: nowrap; :deep(.iconDropdown) { - inset-inline: auto auto; + inset-inline: 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 722c746329a10..307ed79a68bee 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 @@ -66,7 +66,7 @@ display: inline-block; padding: 1px; padding-inline-end: 10px; - margin-inline: 2px 2px; + margin-inline: 2px; block-size: 30px; cursor: pointer; background-color: var(--primary-color); @@ -115,7 +115,7 @@ .superChatMessage { inline-size: 90%; grid-template-columns: auto; - margin-inline: 5% 5%; + margin-inline: 5%; margin-block: 25px 10px; background-color: var(--primary-color); border-radius: 5px; @@ -189,11 +189,11 @@ } .member { - color: #4CAF50; + color: #4caf50; } .moderator { - color: #2196F3; + color: #2196f3; } .owner { 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 0a632bf00c851..8300d6c3bb956 100644 --- a/src/renderer/components/watch-video-playlist/watch-video-playlist.css +++ b/src/renderer/components/watch-video-playlist/watch-video-playlist.css @@ -4,7 +4,8 @@ white-space: nowrap; } -.playlistTitleLink, .channelName { +.playlistTitleLink, +.channelName { text-decoration: none; color: inherit; } diff --git a/src/renderer/components/watch-video-recommendations/watch-video-recommendations.css b/src/renderer/components/watch-video-recommendations/watch-video-recommendations.css index b0744683c5167..cc99e998ff906 100644 --- a/src/renderer/components/watch-video-recommendations/watch-video-recommendations.css +++ b/src/renderer/components/watch-video-recommendations/watch-video-recommendations.css @@ -1,19 +1,19 @@ .relative { - position: relative; + position: relative; } .watchVideoRecommendations { - display: grid; - grid-gap: 8px; + display: grid; + grid-gap: 8px; } .autoPlayToggle { - display: flex; - justify-content: flex-end; - align-items: center; + display: flex; + justify-content: flex-end; + align-items: center; } -.VideoRecommendationsTopBar{ - display:flex; - justify-content:space-between; +.VideoRecommendationsTopBar { + display: flex; + justify-content: space-between; } diff --git a/src/renderer/themes.css b/src/renderer/themes.css index f4883c38f7ba5..b21cad820139e 100644 --- a/src/renderer/themes.css +++ b/src/renderer/themes.css @@ -1,5 +1,7 @@ -.system[data-system-theme*='light'], .light, -.system[data-system-theme*='dark'], .dark, +.system[data-system-theme*='light'], +.light, +.system[data-system-theme*='dark'], +.dark, .black, .gray, .dracula, @@ -24,8 +26,10 @@ --destructive-active-color: #c62828; } -.system[data-system-theme*='light'], .light, -.system[data-system-theme*='dark'], .dark, +.system[data-system-theme*='light'], +.light, +.system[data-system-theme*='dark'], +.dark, .black, .dracula, .catppuccinMocha, @@ -39,8 +43,10 @@ --instance-menu-color: var(--search-bar-color); } -.system[data-system-theme*='light'], .light, -.system[data-system-theme*='dark'], .dark, +.system[data-system-theme*='light'], +.light, +.system[data-system-theme*='dark'], +.dark, .black, .gray, .dracula, @@ -53,8 +59,10 @@ --side-nav-hover-text-color: var(--primary-text-color); } -.system[data-system-theme*='light'], .light, -.system[data-system-theme*='dark'], .dark, +.system[data-system-theme*='light'], +.light, +.system[data-system-theme*='dark'], +.dark, .black, .gray, .dracula, @@ -79,18 +87,21 @@ --logo-tertiary-color: var(--primary-text-color); } -.system[data-system-theme*='light'], .light, -.system[data-system-theme*='dark'], .dark, +.system[data-system-theme*='light'], +.light, +.system[data-system-theme*='dark'], +.dark, .black, .gray { - --logo-icon: url("../../_icons/iconColorSmall.svg"); - --logo-text: url("../../_icons/textColorSmall.svg"); + --logo-icon: url('../../_icons/iconColorSmall.svg'); + --logo-text: url('../../_icons/textColorSmall.svg'); --logo-primary-color: #f33; --logo-secondary-color: #29abe1; --logo-tertiary-color: #000; } -.system[data-system-theme*='dark'], .dark, +.system[data-system-theme*='dark'], +.dark, .black, .gray, .dracula, @@ -102,31 +113,33 @@ --primary-shadow-color: rgb(0 0 0 / 75%); } -.system[data-system-theme*='light'], .light { +.system[data-system-theme*='light'], +.light { --primary-text-color: #212121; --secondary-text-color: #424242; --tertiary-text-color: #757575; --primary-shadow-color: rgb(232 232 232 / 100%); --title-color: #3f7ac6; --bg-color: #f1f1f1; - --favorite-icon-color: #0C0; - --card-bg-color: #FFF; + --favorite-icon-color: #0c0; + --card-bg-color: #fff; --secondary-card-bg-color: #eee; - --scrollbar-color: #CCC; - --scrollbar-color-hover: #BDBDBD; - --side-nav-color: #FFF; + --scrollbar-color: #ccc; + --scrollbar-color-hover: #bdbdbd; + --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: #EEE; +.system[data-system-theme*='dark'], +.dark { + --primary-text-color: #eee; --secondary-text-color: #ddd; --tertiary-text-color: #999; - --title-color: #EEE; + --title-color: #eee; --bg-color: #212121; - --favorite-icon-color: #0F0; + --favorite-icon-color: #0f0; --card-bg-color: #303030; --secondary-card-bg-color: rgb(0 0 0 / 75%); --scrollbar-color: #414141; @@ -138,27 +151,27 @@ } .black { - --primary-text-color: #EEE; - --secondary-text-color: #ddd; - --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; - --side-nav-hover-color: #212121; - --side-nav-active-color: #303030; - --search-bar-color: #262626; + --primary-text-color: #eee; + --secondary-text-color: #ddd; + --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; + --side-nav-hover-color: #212121; + --side-nav-active-color: #303030; + --search-bar-color: #262626; } .gray { - --primary-text-color: #EEE; - --secondary-text-color: #E0E0E0; - --tertiary-text-color: #F5F5F5; - --title-color: #EEE; + --primary-text-color: #eee; + --secondary-text-color: #e0e0e0; + --tertiary-text-color: #f5f5f5; + --title-color: #eee; --bg-color: #212121; --card-bg-color: #303030; --secondary-card-bg-color: rgb(0 0 0 / 75%); @@ -169,22 +182,22 @@ } .dracula { - --primary-text-color: #F8F8F2; + --primary-text-color: #f8f8f2; --secondary-text-color: #c6cee6; --tertiary-text-color: #e5e8f3; - --title-color: #BD93F9; - --bg-color: #282A36; - --favorite-icon-color: #0F0; - --card-bg-color: #33353F; - --secondary-card-bg-color: #282A36; - --scrollbar-color: #44475A; - --scrollbar-color-hover: #3D4051; - --side-nav-color: #44475A; - --side-nav-hover-color: #57596B; - --side-nav-active-color: #3D4051; - --search-bar-color: #3E3F4A; - --logo-icon: url("../../_icons/iconDraculaLightSmall.svg"); - --logo-text: url("../../_icons/textDraculaLightSmall.svg"); + --title-color: #bd93f9; + --bg-color: #282a36; + --favorite-icon-color: #0f0; + --card-bg-color: #33353f; + --secondary-card-bg-color: #282a36; + --scrollbar-color: #44475a; + --scrollbar-color-hover: #3d4051; + --side-nav-color: #44475a; + --side-nav-hover-color: #57596b; + --side-nav-active-color: #3d4051; + --search-bar-color: #3e3f4a; + --logo-icon: url('../../_icons/iconDraculaLightSmall.svg'); + --logo-text: url('../../_icons/textDraculaLightSmall.svg'); } .catppuccinMocha { @@ -193,48 +206,48 @@ --tertiary-text-color: #a6adc8; --title-color: var(--accent-color); --bg-color: #1e1e2e; - --favorite-icon-color: #0F0; + --favorite-icon-color: #0f0; --card-bg-color: #181825; --secondary-card-bg-color: #1e1e2e; --scrollbar-color: #313244; - --scrollbar-color-hover: #3D4051; + --scrollbar-color-hover: #3d4051; --side-nav-color: #181825; --side-nav-hover-color: #11111b; --side-nav-active-color: #11111b; --search-bar-color: #313244; - --logo-icon: url("../../_icons/iconCatppuccinMochaLightSmall.svg"); - --logo-text: url("../../_icons/textCatppuccinMochaLightSmall.svg"); + --logo-icon: url('../../_icons/iconCatppuccinMochaLightSmall.svg'); + --logo-text: url('../../_icons/textCatppuccinMochaLightSmall.svg'); } .pastelPink { - --primary-text-color: #1F002B; + --primary-text-color: #1f002b; --secondary-text-color: #361836; - --tertiary-text-color: #5A285A; + --tertiary-text-color: #5a285a; --primary-shadow-color: rgb(255 240 240 / 50%); - --title-color: #185EB4; + --title-color: #185eb4; --bg-color: #ffeadd; --favorite-icon-color: #760278; --card-bg-color: #ffd1dc; - --secondary-card-bg-color: #FFF; + --secondary-card-bg-color: #fff; --scrollbar-color: #f5c8d3; --scrollbar-color-hover: #760278; --scrollbar-text-color-hover: var(--scrollbar-color); --side-nav-color: #ffd1dc; --side-nav-hover-color: #cef4f1; - --side-nav-active-color: #3124E7; - --side-nav-active-text-color: #FFFF; - --search-bar-color: #FFF0DD; - --logo-icon: url("../../_icons/iconBlackSmall.svg"); - --logo-text: url("../../_icons/textBlackSmall.svg"); + --side-nav-active-color: #3124e7; + --side-nav-active-text-color: #ffff; + --search-bar-color: #fff0dd; + --logo-icon: url('../../_icons/iconBlackSmall.svg'); + --logo-text: url('../../_icons/textBlackSmall.svg'); } .nordic { - --primary-text-color: #EEE; + --primary-text-color: #eee; --secondary-text-color: #ddd; - --tertiary-text-color: #EEE; - --title-color: #EEE; + --tertiary-text-color: #eee; + --title-color: #eee; --bg-color: #2b2f3a; - --favorite-icon-color: #0F0; + --favorite-icon-color: #0f0; --card-bg-color: #2e3440; --secondary-card-bg-color: rgb(59 66 82 / 75%); --scrollbar-color: #4b566a; @@ -243,30 +256,30 @@ --side-nav-hover-color: #3b4252; --side-nav-active-color: #3b4252; --search-bar-color: #4b566a; - --logo-icon: url("../../_icons/iconNordicLightSmall.svg"); - --logo-text: url("../../_icons/textNordicLightSmall.svg"); + --logo-icon: url('../../_icons/iconNordicLightSmall.svg'); + --logo-text: url('../../_icons/textNordicLightSmall.svg'); } .hotPink { - --primary-text-color: #FFFF; - --secondary-text-color: #FFFF; - --tertiary-text-color: #FFFF; + --primary-text-color: #ffff; + --secondary-text-color: #ffff; + --tertiary-text-color: #ffff; --title-color: #000; --bg-color: #ff008a; - --favorite-icon-color: #0F0; - --card-bg-color: #DE1C85; + --favorite-icon-color: #0f0; + --card-bg-color: #de1c85; --secondary-card-bg-color: rgb(0 0 0 / 75%); - --scrollbar-color: #FFF; - --scrollbar-color-hover: #C0F6FF; + --scrollbar-color: #fff; + --scrollbar-color-hover: #c0f6ff; --scrollbar-text-color-hover: #000; - --side-nav-color: #EE1E90; - --side-nav-hover-color: #FFF; + --side-nav-color: #ee1e90; + --side-nav-hover-color: #fff; --side-nav-hover-text-color: #000; --side-nav-active-color: #959595; --side-nav-active-text-color: #000; - --search-bar-color: #9C2D5D; - --logo-icon: url("../../_icons/iconWhiteSmall.svg"); - --logo-text: url("../../_icons/textWhiteSmall.svg"); + --search-bar-color: #9c2d5d; + --logo-icon: url('../../_icons/iconWhiteSmall.svg'); + --logo-text: url('../../_icons/textWhiteSmall.svg'); /* 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 @@ -275,11 +288,11 @@ --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; + --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-active: #6a739a !important; --accent-color-light: #000 !important; --accent-color-visited: #000 !important; --accent-color-opacity1: rgb(0 0 0 / 4%) !important; @@ -291,31 +304,35 @@ /* 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, :focus), .hotPink .navOption:hover, .hotPink .navOption:focus, .hotPink *:not(:hover, :focus) { +.hotPink a:not(:hover, :focus), +.hotPink .navOption:hover, +.hotPink .navOption:focus, +.hotPink *:not(:hover, :focus) { text-decoration: none; } -.hotPink a:hover, .hotPink a:focus { +.hotPink a:hover, +.hotPink a:focus { text-decoration: underline; } .solarizedDark { - --primary-text-color: #FDF6E3; - --secondary-text-color: #DDD6C3; - --tertiary-text-color: #DDD6C3; - --title-color: #FDF6E3; - --bg-color: #002B36; + --primary-text-color: #fdf6e3; + --secondary-text-color: #ddd6c3; + --tertiary-text-color: #ddd6c3; + --title-color: #fdf6e3; + --bg-color: #002b36; --favorite-icon-color: #0f0; - --card-bg-color: #204B56; + --card-bg-color: #204b56; --secondary-card-bg-color: #102b36; - --scrollbar-color: #608B96; - --scrollbar-color-hover: #406B76; - --side-nav-color: #204B56; - --side-nav-hover-color: #608B96; - --side-nav-active-color: #406B76; + --scrollbar-color: #608b96; + --scrollbar-color-hover: #406b76; + --side-nav-color: #204b56; + --side-nav-hover-color: #608b96; + --side-nav-active-color: #406b76; --search-bar-color: #073642; - --logo-icon: url("../../_icons/iconSolarizedLightSmall.svg"); - --logo-text: url("../../_icons/textSolarizedLightSmall.svg"); + --logo-icon: url('../../_icons/iconSolarizedLightSmall.svg'); + --logo-text: url('../../_icons/textSolarizedLightSmall.svg'); } .solarizedLight { @@ -333,8 +350,8 @@ it can be safely elided. This looks quite pleasant on this theme. */ --side-nav-hover-color: #fdf6e3; --side-nav-active-color: #839496; --search-bar-color: #c9c8b5; - --logo-icon: url("../../_icons/iconSolarizedDarkSmall.svg"); - --logo-text: url("../../_icons/textSolarizedDarkSmall.svg"); + --logo-icon: url('../../_icons/iconSolarizedDarkSmall.svg'); + --logo-text: url('../../_icons/textSolarizedDarkSmall.svg'); } .mainRed, @@ -347,9 +364,9 @@ it can be safely elided. This looks quite pleasant on this theme. */ .mainCyan, .mainTeal, .mainGreen { - --text-with-main-color: #FFF; - --logo-icon-bar-color: url("../../_icons/iconWhiteSmall.svg"); - --logo-text-bar-color: url("../../_icons/textWhiteSmall.svg"); + --text-with-main-color: #fff; + --logo-icon-bar-color: url('../../_icons/iconWhiteSmall.svg'); + --logo-text-bar-color: url('../../_icons/textWhiteSmall.svg'); } .mainLightGreen, @@ -359,8 +376,8 @@ it can be safely elided. This looks quite pleasant on this theme. */ .mainOrange, .mainDeepOrange { --text-with-main-color: #000; - --logo-icon-bar-color: url("../../_icons/iconBlackSmall.svg"); - --logo-text-bar-color: url("../../_icons/textBlackSmall.svg"); + --logo-icon-bar-color: url('../../_icons/iconBlackSmall.svg'); + --logo-text-bar-color: url('../../_icons/textBlackSmall.svg'); } .mainRed { @@ -370,93 +387,93 @@ it can be safely elided. This looks quite pleasant on this theme. */ } .mainPink { - --primary-color: #E91E63; - --primary-color-hover: #D81B60; - --primary-color-active: #AD1457; + --primary-color: #e91e63; + --primary-color-hover: #d81b60; + --primary-color-active: #ad1457; } .mainPurple { - --primary-color: #9C27B0; - --primary-color-hover: #8E24AA; - --primary-color-active: #6A1B9A; + --primary-color: #9c27b0; + --primary-color-hover: #8e24aa; + --primary-color-active: #6a1b9a; } .mainDeepPurple { - --primary-color: #673AB7; - --primary-color-hover: #5E35B1; - --primary-color-active: #4527A0; + --primary-color: #673ab7; + --primary-color-hover: #5e35b1; + --primary-color-active: #4527a0; } .mainIndigo { - --primary-color: #3F51B5; - --primary-color-hover: #3949AB; + --primary-color: #3f51b5; + --primary-color-hover: #3949ab; --primary-color-active: #283593; } .mainBlue { - --primary-color: #2196F3; - --primary-color-hover: #1E88E5; - --primary-color-active: #1565C0; + --primary-color: #2196f3; + --primary-color-hover: #1e88e5; + --primary-color-active: #1565c0; } .mainLightBlue { - --primary-color: #03A9F4; - --primary-color-hover: #039BE5; - --primary-color-active: #0277BD; + --primary-color: #03a9f4; + --primary-color-hover: #039be5; + --primary-color-active: #0277bd; } .mainCyan { - --primary-color: #00BCD4; - --primary-color-hover: #00ACC1; - --primary-color-active: #00838F; + --primary-color: #00bcd4; + --primary-color-hover: #00acc1; + --primary-color-active: #00838f; } .mainTeal { --primary-color: #009688; - --primary-color-hover: #00897B; - --primary-color-active: #00695C; + --primary-color-hover: #00897b; + --primary-color-active: #00695c; } .mainGreen { - --primary-color: #4CAF50; - --primary-color-hover: #43A047; - --primary-color-active: #2E7D32; + --primary-color: #4caf50; + --primary-color-hover: #43a047; + --primary-color-active: #2e7d32; } .mainLightGreen { - --primary-color: #8BC34A; - --primary-color-hover: #7CB342; - --primary-color-active: #558B2F; + --primary-color: #8bc34a; + --primary-color-hover: #7cb342; + --primary-color-active: #558b2f; } .mainLime { - --primary-color: #CDDC39; - --primary-color-hover: #C0CA33; - --primary-color-active: #9E9D24; + --primary-color: #cddc39; + --primary-color-hover: #c0ca33; + --primary-color-active: #9e9d24; } .mainYellow { - --primary-color: #FFEB3B; - --primary-color-hover: #FDD835; - --primary-color-active: #F9A825; + --primary-color: #ffeb3b; + --primary-color-hover: #fdd835; + --primary-color-active: #f9a825; } .mainAmber { - --primary-color: #FFC107; - --primary-color-hover: #FFB300; - --primary-color-active: #FF8F00; + --primary-color: #ffc107; + --primary-color-hover: #ffb300; + --primary-color-active: #ff8f00; } .mainOrange { - --primary-color: #FF9800; - --primary-color-hover: #FB8C00; - --primary-color-active: #EF6C00; + --primary-color: #ff9800; + --primary-color-hover: #fb8c00; + --primary-color-active: #ef6c00; } .mainDeepOrange { - --primary-color: #FF5722; - --primary-color-hover: #F4511E; - --primary-color-active: #D84315; + --primary-color: #ff5722; + --primary-color-hover: #f4511e; + --primary-color-active: #d84315; } .mainDraculaCyan, @@ -464,58 +481,58 @@ it can be safely elided. This looks quite pleasant on this theme. */ .mainDraculaOrange, .mainDraculaRed, .mainDraculaYellow { - --text-with-main-color: #282A36; - --logo-icon-bar-color: url("../../_icons/iconDraculaDarkSmall.svg"); - --logo-text-bar-color: url("../../_icons/textDraculaDarkSmall.svg"); + --text-with-main-color: #282a36; + --logo-icon-bar-color: url('../../_icons/iconDraculaDarkSmall.svg'); + --logo-text-bar-color: url('../../_icons/textDraculaDarkSmall.svg'); } .mainDraculaPink, .mainDraculaPurple { - --text-with-main-color: #F8F8F2; - --logo-icon-bar-color: url("../../_icons/iconDraculaLightSmall.svg"); - --logo-text-bar-color: url("../../_icons/textDraculaLightSmall.svg"); + --text-with-main-color: #f8f8f2; + --logo-icon-bar-color: url('../../_icons/iconDraculaLightSmall.svg'); + --logo-text-bar-color: url('../../_icons/textDraculaLightSmall.svg'); } .mainDraculaCyan { - --primary-color: #8BE9FD; - --primary-color-hover: #97EBFD; - --primary-color-active: #7DD2E4; + --primary-color: #8be9fd; + --primary-color-hover: #97ebfd; + --primary-color-active: #7dd2e4; } .mainDraculaGreen { - --primary-color: #50FA7B; - --primary-color-hover: #62FB88; - --primary-color-active: #48E16F; + --primary-color: #50fa7b; + --primary-color-hover: #62fb88; + --primary-color-active: #48e16f; } .mainDraculaOrange { - --primary-color: #FFB86C; - --primary-color-hover: #FFBF7B; - --primary-color-active: #E6A661; + --primary-color: #ffb86c; + --primary-color-hover: #ffbf7b; + --primary-color-active: #e6a661; } .mainDraculaPink { - --primary-color: #FF79C6; - --primary-color-hover: #FF86CC; - --primary-color-active: #E66DB2; + --primary-color: #ff79c6; + --primary-color-hover: #ff86cc; + --primary-color-active: #e66db2; } .mainDraculaPurple { - --primary-color: #BD93F9; - --primary-color-hover: #C49EFA; - --primary-color-active: #AA84E0; + --primary-color: #bd93f9; + --primary-color-hover: #c49efa; + --primary-color-active: #aa84e0; } .mainDraculaRed { - --primary-color: #F55; - --primary-color-hover: #F66; - --primary-color-active: #E64D4D; + --primary-color: #f55; + --primary-color-hover: #f66; + --primary-color-active: #e64d4d; } .mainDraculaYellow { - --primary-color: #F1FA8C; - --primary-color-hover: #F2FB98; - --primary-color-active: #D9E17E; + --primary-color: #f1fa8c; + --primary-color-hover: #f2fb98; + --primary-color-active: #d9e17e; } .mainCatppuccinMochaRosewater, @@ -533,8 +550,8 @@ it can be safely elided. This looks quite pleasant on this theme. */ .mainCatppuccinMochaBlue, .mainCatppuccinMochaLavender { --text-with-main-color: #1e1e2e; - --logo-icon-bar-color: url("../../_icons/iconCatppuccinMochaDarkSmall.svg"); - --logo-text-bar-color: url("../../_icons/textCatppuccinMochaDarkSmall.svg"); + --logo-icon-bar-color: url('../../_icons/iconCatppuccinMochaDarkSmall.svg'); + --logo-text-bar-color: url('../../_icons/textCatppuccinMochaDarkSmall.svg'); } .mainCatppuccinMochaRosewater { @@ -628,15 +645,15 @@ it can be safely elided. This looks quite pleasant on this theme. */ .mainSolarizedViolet, .mainSolarizedGreen { --text-with-main-color: #fdf6e3; - --logo-icon-bar-color: url("../../_icons/iconDraculaLightSmall.svg"); - --logo-text-bar-color: url("../../_icons/textDraculaLightSmall.svg"); + --logo-icon-bar-color: url('../../_icons/iconDraculaLightSmall.svg'); + --logo-text-bar-color: url('../../_icons/textDraculaLightSmall.svg'); } .mainSolarizedBlue, .mainSolarizedCyan { --text-with-main-color: #000; - --logo-icon-bar-color: url("../../_icons/iconDraculaDarkSmall.svg"); - --logo-text-bar-color: url("../../_icons/textDraculaDarkSmall.svg"); + --logo-icon-bar-color: url('../../_icons/iconDraculaDarkSmall.svg'); + --logo-text-bar-color: url('../../_icons/textDraculaDarkSmall.svg'); } .mainSolarizedYellow { @@ -697,7 +714,7 @@ it can be safely elided. This looks quite pleasant on this theme. */ .secCyan, .secTeal, .secGreen { - --text-with-accent-color: #FFF; + --text-with-accent-color: #fff; } .secLightGreen, @@ -722,11 +739,11 @@ it can be safely elided. This looks quite pleasant on this theme. */ } .secPink { - --accent-color: #E91E63; - --accent-color-hover: #D81B60; - --accent-color-active: #AD1457; - --accent-color-light: #F48FB1; - --accent-color-visited: #880E4F; + --accent-color: #e91e63; + --accent-color-hover: #d81b60; + --accent-color-active: #ad1457; + --accent-color-light: #f48fb1; + --accent-color-visited: #880e4f; --accent-color-opacity1: rgb(233 30 99 / 4%); --accent-color-opacity2: rgb(233 30 99 / 12%); --accent-color-opacity3: rgb(233 30 99 / 16%); @@ -734,11 +751,11 @@ it can be safely elided. This looks quite pleasant on this theme. */ } .secPurple { - --accent-color: #9C27B0; - --accent-color-hover: #8E24AA; - --accent-color-active: #6A1B9A; - --accent-color-light: #CE93D8; - --accent-color-visited: #4A148C; + --accent-color: #9c27b0; + --accent-color-hover: #8e24aa; + --accent-color-active: #6a1b9a; + --accent-color-light: #ce93d8; + --accent-color-visited: #4a148c; --accent-color-opacity1: rgb(156 39 176 / 4%); --accent-color-opacity2: rgb(156 39 176 / 12%); --accent-color-opacity3: rgb(156 39 176 / 16%); @@ -746,11 +763,11 @@ it can be safely elided. This looks quite pleasant on this theme. */ } .secDeepPurple { - --accent-color: #673AB7; - --accent-color-hover: #5E35B1; - --accent-color-active: #4527A0; - --accent-color-light: #B39DDB; - --accent-color-visited: #311B92; + --accent-color: #673ab7; + --accent-color-hover: #5e35b1; + --accent-color-active: #4527a0; + --accent-color-light: #b39ddb; + --accent-color-visited: #311b92; --accent-color-opacity1: rgb(103 58 183 / 4%); --accent-color-opacity2: rgb(103 58 183 / 12%); --accent-color-opacity3: rgb(103 58 183 / 16%); @@ -758,11 +775,11 @@ it can be safely elided. This looks quite pleasant on this theme. */ } .secIndigo { - --accent-color: #3F51B5; - --accent-color-hover: #3949AB; + --accent-color: #3f51b5; + --accent-color-hover: #3949ab; --accent-color-active: #283593; - --accent-color-light: #9FA8DA; - --accent-color-visited: #1A237E; + --accent-color-light: #9fa8da; + --accent-color-visited: #1a237e; --accent-color-opacity1: rgb(63 81 181 / 4%); --accent-color-opacity2: rgb(63 81 181 / 12%); --accent-color-opacity3: rgb(63 81 181 / 16%); @@ -770,11 +787,11 @@ it can be safely elided. This looks quite pleasant on this theme. */ } .secBlue { - --accent-color: #2196F3; - --accent-color-hover: #1E88E5; - --accent-color-active: #1565C0; - --accent-color-light: #90CAF9; - --accent-color-visited: #0D47A1; + --accent-color: #2196f3; + --accent-color-hover: #1e88e5; + --accent-color-active: #1565c0; + --accent-color-light: #90caf9; + --accent-color-visited: #0d47a1; --accent-color-opacity1: rgb(33 150 243 / 4%); --accent-color-opacity2: rgb(33 150 243 / 12%); --accent-color-opacity3: rgb(33 150 243 / 16%); @@ -782,11 +799,11 @@ it can be safely elided. This looks quite pleasant on this theme. */ } .secLightBlue { - --accent-color: #03A9F4; - --accent-color-hover: #039BE5; - --accent-color-active: #0277BD; - --accent-color-light: #81D4FA; - --accent-color-visited: #01579B; + --accent-color: #03a9f4; + --accent-color-hover: #039be5; + --accent-color-active: #0277bd; + --accent-color-light: #81d4fa; + --accent-color-visited: #01579b; --accent-color-opacity1: rgb(3 169 244 / 4%); --accent-color-opacity2: rgb(3 169 244 / 12%); --accent-color-opacity3: rgb(3 169 244 / 16%); @@ -794,10 +811,10 @@ it can be safely elided. This looks quite pleasant on this theme. */ } .secCyan { - --accent-color: #00BCD4; - --accent-color-hover: #00ACC1; - --accent-color-active: #00838F; - --accent-color-light: #80DEEA; + --accent-color: #00bcd4; + --accent-color-hover: #00acc1; + --accent-color-active: #00838f; + --accent-color-light: #80deea; --accent-color-visited: #006064; --accent-color-opacity1: rgb(0 188 212 / 4%); --accent-color-opacity2: rgb(0 188 212 / 12%); @@ -807,10 +824,10 @@ it can be safely elided. This looks quite pleasant on this theme. */ .secTeal { --accent-color: #009688; - --accent-color-hover: #00897B; - --accent-color-active: #00695C; - --accent-color-light: #80CBC4; - --accent-color-visited: #004D40; + --accent-color-hover: #00897b; + --accent-color-active: #00695c; + --accent-color-light: #80cbc4; + --accent-color-visited: #004d40; --accent-color-opacity1: rgb(0 150 136 / 4%); --accent-color-opacity2: rgb(0 150 136 / 12%); --accent-color-opacity3: rgb(0 150 136 / 16%); @@ -818,11 +835,11 @@ it can be safely elided. This looks quite pleasant on this theme. */ } .secGreen { - --accent-color: #4CAF50; - --accent-color-hover: #43A047; - --accent-color-active: #2E7D32; - --accent-color-light: #A5D6A7; - --accent-color-visited: #1B5E20; + --accent-color: #4caf50; + --accent-color-hover: #43a047; + --accent-color-active: #2e7d32; + --accent-color-light: #a5d6a7; + --accent-color-visited: #1b5e20; --accent-color-opacity1: rgb(76 175 80 / 4%); --accent-color-opacity2: rgb(76 175 80 / 12%); --accent-color-opacity3: rgb(76 175 80 / 16%); @@ -830,11 +847,11 @@ it can be safely elided. This looks quite pleasant on this theme. */ } .secLightGreen { - --accent-color: #8BC34A; - --accent-color-hover: #7CB342; - --accent-color-active: #558B2F; - --accent-color-light: #C5E1A5; - --accent-color-visited: #33691E; + --accent-color: #8bc34a; + --accent-color-hover: #7cb342; + --accent-color-active: #558b2f; + --accent-color-light: #c5e1a5; + --accent-color-visited: #33691e; --accent-color-opacity1: rgb(139 195 74 / 4%); --accent-color-opacity2: rgb(139 195 74 / 12%); --accent-color-opacity3: rgb(139 195 74 / 16%); @@ -842,10 +859,10 @@ it can be safely elided. This looks quite pleasant on this theme. */ } .secLime { - --accent-color: #CDDC39; - --accent-color-hover: #C0CA33; - --accent-color-active: #9E9D24; - --accent-color-light: #E6EE9C; + --accent-color: #cddc39; + --accent-color-hover: #c0ca33; + --accent-color-active: #9e9d24; + --accent-color-light: #e6ee9c; --accent-color-visited: #827717; --accent-color-opacity1: rgb(205 220 57 / 4%); --accent-color-opacity2: rgb(205 220 57 / 12%); @@ -854,11 +871,11 @@ it can be safely elided. This looks quite pleasant on this theme. */ } .secYellow { - --accent-color: #FFEB3B; - --accent-color-hover: #FDD835; - --accent-color-active: #F9A825; - --accent-color-light: #FFF59D; - --accent-color-visited: #F57F17; + --accent-color: #ffeb3b; + --accent-color-hover: #fdd835; + --accent-color-active: #f9a825; + --accent-color-light: #fff59d; + --accent-color-visited: #f57f17; --accent-color-opacity1: rgb(255 235 59 / 4%); --accent-color-opacity2: rgb(255 235 59 / 12%); --accent-color-opacity3: rgb(255 235 59 / 16%); @@ -866,11 +883,11 @@ it can be safely elided. This looks quite pleasant on this theme. */ } .secAmber { - --accent-color: #FFC107; - --accent-color-hover: #FFB300; - --accent-color-active: #FF8F00; - --accent-color-light: #FFE082; - --accent-color-visited: #FF6F00; + --accent-color: #ffc107; + --accent-color-hover: #ffb300; + --accent-color-active: #ff8f00; + --accent-color-light: #ffe082; + --accent-color-visited: #ff6f00; --accent-color-opacity1: rgb(255 193 7 / 4%); --accent-color-opacity2: rgb(255 193 7 / 12%); --accent-color-opacity3: rgb(255 193 7 / 16%); @@ -878,11 +895,11 @@ it can be safely elided. This looks quite pleasant on this theme. */ } .secOrange { - --accent-color: #FF9800; - --accent-color-hover: #FB8C00; - --accent-color-active: #EF6C00; - --accent-color-light: #FFCC80; - --accent-color-visited: #E65100; + --accent-color: #ff9800; + --accent-color-hover: #fb8c00; + --accent-color-active: #ef6c00; + --accent-color-light: #ffcc80; + --accent-color-visited: #e65100; --accent-color-opacity1: rgb(255 152 0 / 4%); --accent-color-opacity2: rgb(255 152 0 / 12%); --accent-color-opacity3: rgb(255 152 0 / 16%); @@ -890,11 +907,11 @@ it can be safely elided. This looks quite pleasant on this theme. */ } .secDeepOrange { - --accent-color: #FF5722; - --accent-color-hover: #F4511E; - --accent-color-active: #D84315; - --accent-color-light: #FFAB91; - --accent-color-visited: #BF360C; + --accent-color: #ff5722; + --accent-color-hover: #f4511e; + --accent-color-active: #d84315; + --accent-color-light: #ffab91; + --accent-color-visited: #bf360c; --accent-color-opacity1: rgb(255 87 34 / 4%); --accent-color-opacity2: rgb(255 87 34 / 12%); --accent-color-opacity3: rgb(255 87 34 / 16%); @@ -911,7 +928,7 @@ it can be safely elided. This looks quite pleasant on this theme. */ .secDraculaPink, .secDraculaPurple { - --text-with-accent-color: #F8F8F2; + --text-with-accent-color: #f8f8f2; } .secDraculaCyan, @@ -928,60 +945,60 @@ it can be safely elided. This looks quite pleasant on this theme. */ } .secDraculaCyan { - --accent-color: #8BE9FD; - --accent-color-hover: #97EBFD; - --accent-color-active: #7DD2E4; - --accent-color-light: #A2EDFD; - --accent-color-visited: #6FBACA; + --accent-color: #8be9fd; + --accent-color-hover: #97ebfd; + --accent-color-active: #7dd2e4; + --accent-color-light: #a2edfd; + --accent-color-visited: #6fbaca; } .secDraculaGreen { - --accent-color: #50FA7B; - --accent-color-hover: #62FB88; - --accent-color-active: #48E16F; - --accent-color-light: #73FB95; - --accent-color-visited: #40C862; + --accent-color: #50fa7b; + --accent-color-hover: #62fb88; + --accent-color-active: #48e16f; + --accent-color-light: #73fb95; + --accent-color-visited: #40c862; } .secDraculaOrange { - --accent-color: #FFB86C; - --accent-color-hover: #FFBF7B; - --accent-color-active: #E6A661; - --accent-color-light: #FFC689; - --accent-color-visited: #CC9356; + --accent-color: #ffb86c; + --accent-color-hover: #ffbf7b; + --accent-color-active: #e6a661; + --accent-color-light: #ffc689; + --accent-color-visited: #cc9356; } .secDraculaPink { - --accent-color: #FF79C6; - --accent-color-hover: #FF86CC; - --accent-color-active: #E66DB2; - --accent-color-light: #FF94D1; - --accent-color-visited: #CC619E; + --accent-color: #ff79c6; + --accent-color-hover: #ff86cc; + --accent-color-active: #e66db2; + --accent-color-light: #ff94d1; + --accent-color-visited: #cc619e; } .secDraculaPurple { - --accent-color: #BD93F9; - --accent-color-hover: #C49EFA; - --accent-color-active: #AA84E0; - --accent-color-light: #CAA9FA; - --accent-color-visited: #9776C7; + --accent-color: #bd93f9; + --accent-color-hover: #c49efa; + --accent-color-active: #aa84e0; + --accent-color-light: #caa9fa; + --accent-color-visited: #9776c7; } .secDraculaRed { - --accent-color: #F55; - --accent-color-hover: #F66; - --accent-color-active: #E64D4D; - --accent-color-light: #F77; - --accent-color-visited: #C44; + --accent-color: #f55; + --accent-color-hover: #f66; + --accent-color-active: #e64d4d; + --accent-color-light: #f77; + --accent-color-visited: #c44; } .secDraculaYellow { - --accent-color: #F1FA8C; - --accent-color-hover: #F2FB98; - --accent-color-active: #D9E17E; - --accent-color-light: #F4FBA3; - --accent-color-visited: #C1C870; + --accent-color: #f1fa8c; + --accent-color-hover: #f2fb98; + --accent-color-active: #d9e17e; + --accent-color-light: #f4fba3; + --accent-color-visited: #c1c870; } .secCatppuccinMochaRosewater, @@ -1005,8 +1022,8 @@ it can be safely elided. This looks quite pleasant on this theme. */ --accent-color: #f5e0dc; --accent-color-hover: #fceeec; --accent-color-active: #e1c8c3; - --accent-color-light: #F8EAE7; - --accent-color-visited: #D3A197; + --accent-color-light: #f8eae7; + --accent-color-visited: #d3a197; --accent-color-opacity1: rgb(245 224 220 / 4%); --accent-color-opacity2: rgb(245 224 220 / 12%); --accent-color-opacity3: rgb(245 224 220 / 16%); @@ -1017,7 +1034,7 @@ it can be safely elided. This looks quite pleasant on this theme. */ --accent-color: #f2cdcd; --accent-color-hover: #f3d7d7; --accent-color-active: #ddb7b7; - --accent-color-light: #F7DFDF; + --accent-color-light: #f7dfdf; --accent-color-visited: #cf9898; --accent-color-opacity1: rgb(242 205 205 / 4%); --accent-color-opacity2: rgb(242 205 205 / 12%); @@ -1041,8 +1058,8 @@ it can be safely elided. This looks quite pleasant on this theme. */ --accent-color: #cba6f7; --accent-color-hover: #d4b7f8; --accent-color-active: #b38fdf; - --accent-color-light: #D6B9F9; - --accent-color-visited: #A171DA; + --accent-color-light: #d6b9f9; + --accent-color-visited: #a171da; --accent-color-opacity1: rgb(203 166 247 / 4%); --accent-color-opacity2: rgb(203 166 247 / 12%); --accent-color-opacity3: rgb(203 166 247 / 16%); @@ -1053,8 +1070,8 @@ it can be safely elided. This looks quite pleasant on this theme. */ --accent-color: #f38ba8; --accent-color-hover: #f399b2; --accent-color-active: #de7693; - --accent-color-light: #F5A3BA; - --accent-color-visited: #D56C89; + --accent-color-light: #f5a3ba; + --accent-color-visited: #d56c89; --accent-color-opacity1: rgb(243 139 168 / 4%); --accent-color-opacity2: rgb(243 139 168 / 12%); --accent-color-opacity3: rgb(243 139 168 / 16%); @@ -1065,8 +1082,8 @@ it can be safely elided. This looks quite pleasant on this theme. */ --accent-color: #eba0ac; --accent-color-hover: #ebb4bd; --accent-color-active: #d68895; - --accent-color-light: #F0B7C0; - --accent-color-visited: #C86A79; + --accent-color-light: #f0b7c0; + --accent-color-visited: #c86a79; --accent-color-opacity1: rgb(235 160 172 / 4%); --accent-color-opacity2: rgb(235 160 172 / 12%); --accent-color-opacity3: rgb(235 160 172 / 16%); @@ -1077,8 +1094,8 @@ it can be safely elided. This looks quite pleasant on this theme. */ --accent-color: #fab387; --accent-color-hover: #f7bd99; --accent-color-active: #e1996d; - --accent-color-light: #FBC4A2; - --accent-color-visited: #D78A5B; + --accent-color-light: #fbc4a2; + --accent-color-visited: #d78a5b; --accent-color-opacity1: rgb(250 179 135 / 4%); --accent-color-opacity2: rgb(250 179 135 / 12%); --accent-color-opacity3: rgb(250 179 135 / 16%); @@ -1089,8 +1106,8 @@ it can be safely elided. This looks quite pleasant on this theme. */ --accent-color: #f9e2af; --accent-color-hover: #f9e7bf; --accent-color-active: #dec48d; - --accent-color-light: #FBECCB; - --accent-color-visited: #D5B05D; + --accent-color-light: #fbeccb; + --accent-color-visited: #d5b05d; --accent-color-opacity1: rgb(249 226 175 / 4%); --accent-color-opacity2: rgb(249 226 175 / 12%); --accent-color-opacity3: rgb(249 226 175 / 16%); @@ -1101,8 +1118,8 @@ it can be safely elided. This looks quite pleasant on this theme. */ --accent-color: #a6e3a1; --accent-color-hover: #b6e3b2; --accent-color-active: #86c780; - --accent-color-light: #BCEAB8; - --accent-color-visited: #6ED166; + --accent-color-light: #bceab8; + --accent-color-visited: #6ed166; --accent-color-opacity1: rgb(166 227 161 / 4%); --accent-color-opacity2: rgb(166 227 161 / 12%); --accent-color-opacity3: rgb(166 227 161 / 16%); @@ -1113,8 +1130,8 @@ it can be safely elided. This looks quite pleasant on this theme. */ --accent-color: #94e2d5; --accent-color-hover: #a1dfd5; --accent-color-active: #6fc5b7; - --accent-color-light: #AFE9DF; - --accent-color-visited: #5CCCB9; + --accent-color-light: #afe9df; + --accent-color-visited: #5cccb9; --accent-color-opacity1: rgb(148 226 213 / 4%); --accent-color-opacity2: rgb(148 226 213 / 12%); --accent-color-opacity3: rgb(148 226 213 / 16%); @@ -1125,8 +1142,8 @@ it can be safely elided. This looks quite pleasant on this theme. */ --accent-color: #89dceb; --accent-color-hover: #99dfeb; --accent-color-active: #68bcca; - --accent-color-light: #9FE3EF; - --accent-color-visited: #64C2D3; + --accent-color-light: #9fe3ef; + --accent-color-visited: #64c2d3; --accent-color-opacity1: rgb(137 220 235 / 4%); --accent-color-opacity2: rgb(137 220 235 / 12%); --accent-color-opacity3: rgb(137 220 235 / 16%); @@ -1137,8 +1154,8 @@ it can be safely elided. This looks quite pleasant on this theme. */ --accent-color: #74c7ec; --accent-color-hover: #84c7e6; --accent-color-active: #59a9cf; - --accent-color-light: #93D4F0; - --accent-color-visited: #6AB6D7; + --accent-color-light: #93d4f0; + --accent-color-visited: #6ab6d7; --accent-color-opacity1: rgb(116 199 236 / 4%); --accent-color-opacity2: rgb(116 199 236 / 12%); --accent-color-opacity3: rgb(116 199 236 / 16%); @@ -1149,8 +1166,8 @@ it can be safely elided. This looks quite pleasant on this theme. */ --accent-color: #89b4fa; --accent-color-hover: #9bbef6; --accent-color-active: #6593df; - --accent-color-light: #A7C7FB; - --accent-color-visited: #739CDD; + --accent-color-light: #a7c7fb; + --accent-color-visited: #739cdd; --accent-color-opacity1: rgb(137 220 235 / 4%); --accent-color-opacity2: rgb(137 220 235 / 12%); --accent-color-opacity3: rgb(137 220 235 / 16%); @@ -1161,8 +1178,8 @@ it can be safely elided. This looks quite pleasant on this theme. */ --accent-color: #b4befe; --accent-color-hover: #c9d0ff; --accent-color-active: #8d98e4; - --accent-color-light: #D2D8FE; - --accent-color-visited: #96A1E9; + --accent-color-light: #d2d8fe; + --accent-color-visited: #96a1e9; --accent-color-opacity1: rgb(180 190 254 / 4%); --accent-color-opacity2: rgb(180 190 254 / 12%); --accent-color-opacity3: rgb(180 190 254 / 16%); @@ -1287,7 +1304,7 @@ it can be safely elided. This looks quite pleasant on this theme. */ --accent-color-opacity4: rgb(101 119 0 / 24%); } - /* region destructive color for red color themes +/* region destructive color for red color themes using :has(.app) to increase specificity */ .mainRed:has(.app), .secRed:has(.app), @@ -1295,33 +1312,33 @@ it can be safely elided. This looks quite pleasant on this theme. */ .secDraculaRed:has(.app), .mainSolarizedRed:has(.app), .secSolarizedRed:has(.app) { - --destructive-color: #9C27B0; - --destructive-text-color: #FFF; - --destructive-hover-color: #8E24AA; - --destructive-active-color: #6A1B9A; - } - - /* Deal with theme conflict on destructive colors */ - .mainRed.secPurple, - .mainRed.secDeepPurple, - .mainRed.secDraculaPurple, - .mainDraculaRed.secPurple, - .mainDraculaRed.secDeepPurple, - .mainDraculaRed.secDraculaPurple, - .mainSolarizedRed.secPurple, - .mainSolarizedRed.secDeepPurple, - .mainSolarizedRed.secDraculaPurple, - .mainPurple.secRed, - .mainPurple.secDraculaRed, - .mainDeepPurple.secRed, - .mainDeepPurple.secDraculaRed, - .mainDraculaPurple.secRed, - .mainDraculaPurple.secDraculaRed { - --destructive-color: #FF9800; - --destructive-text-color: #FFF; - --destructive-hover-color: #FB8C00; - --destructive-active-color: #EF6C00; - } + --destructive-color: #9c27b0; + --destructive-text-color: #fff; + --destructive-hover-color: #8e24aa; + --destructive-active-color: #6a1b9a; +} + +/* Deal with theme conflict on destructive colors */ +.mainRed.secPurple, +.mainRed.secDeepPurple, +.mainRed.secDraculaPurple, +.mainDraculaRed.secPurple, +.mainDraculaRed.secDeepPurple, +.mainDraculaRed.secDraculaPurple, +.mainSolarizedRed.secPurple, +.mainSolarizedRed.secDeepPurple, +.mainSolarizedRed.secDraculaPurple, +.mainPurple.secRed, +.mainPurple.secDraculaRed, +.mainDeepPurple.secRed, +.mainDeepPurple.secDraculaRed, +.mainDraculaPurple.secRed, +.mainDraculaPurple.secDraculaRed { + --destructive-color: #ff9800; + --destructive-text-color: #fff; + --destructive-hover-color: #fb8c00; + --destructive-active-color: #ef6c00; +} body[dir='ltr'] { --ltr-or-rtl: ltr; @@ -1337,16 +1354,16 @@ body[dir='rtl'] { --horizontal-directionality-coefficient: -1; } -body[dir='rtl'] [data-prefix="fas"]:not([data-icon="magnifying-glass"], [data-icon="circle-question"], [data-icon="check"]) { - transform: scale(-1,1); +body[dir='rtl'] [data-prefix='fas']:not([data-icon='magnifying-glass'], [data-icon='circle-question'], [data-icon='check']) { + transform: scale(-1, 1); } /* Arabic, Kurdish, Persian and Urdu have a reversed question mark, but not Hebrew and Yiddish */ -html[lang='ar'] [data-prefix="fas"][data-icon="circle-question"], -html[lang='fa'] [data-prefix="fas"][data-icon="circle-question"], -html[lang='ku'] [data-prefix="fas"][data-icon="circle-question"], -html[lang='ur'] [data-prefix="fas"][data-icon="circle-question"] { - transform: scale(-1, 1) +html[lang='ar'] [data-prefix='fas'][data-icon='circle-question'], +html[lang='fa'] [data-prefix='fas'][data-icon='circle-question'], +html[lang='ku'] [data-prefix='fas'][data-icon='circle-question'], +html[lang='ur'] [data-prefix='fas'][data-icon='circle-question'] { + transform: scale(-1, 1); } body { @@ -1370,12 +1387,12 @@ body { /* stylelint-disable-next-line no-descending-specificity */ a:link { - color: var(--link-color); + color: var(--link-color); } /* stylelint-disable-next-line no-descending-specificity */ a:visited { - color: var(--link-visited-color); + color: var(--link-visited-color); } @media (prefers-reduced-motion) { @@ -1386,7 +1403,7 @@ a:visited { } ::-webkit-scrollbar { - inline-size: auto; + inline-size: auto; block-size: auto; } @@ -1401,6 +1418,7 @@ a:visited { border: 0; } -::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-thumb:focus { +::-webkit-scrollbar-thumb:hover, +::-webkit-scrollbar-thumb:focus { background: var(--scrollbar-color-hover); } diff --git a/src/renderer/views/Channel/Channel.css b/src/renderer/views/Channel/Channel.css index 8fb4900f78a7b..66aa3cc0294b8 100644 --- a/src/renderer/views/Channel/Channel.css +++ b/src/renderer/views/Channel/Channel.css @@ -21,7 +21,7 @@ .channelBannerContainer.default { background-color: #000; - background-image: url("../../assets/img/defaultBanner.png"); + background-image: url('../../assets/img/defaultBanner.png'); background-repeat: repeat; background-size: contain; } @@ -101,7 +101,7 @@ block-size: auto; justify-content: unset; gap: 32px; - padding-block: .3em; + padding-block: 0.3em; padding-inline: 0; flex-wrap: nowrap; } @@ -154,7 +154,7 @@ } .thumbnailContainer { - display: flex + display: flex; } .channelLineContainer { @@ -246,7 +246,8 @@ flex-direction: column; } - .thumbnailContainer, .channelInfoActionsContainer { + .thumbnailContainer, + .channelInfoActionsContainer { flex-wrap: wrap; align-items: center; text-align: center; @@ -255,7 +256,7 @@ } @media only screen and (width <= 260px) { - .channelDetails { + .channelDetails { max-inline-size: none; } } diff --git a/src/renderer/views/Hashtag/Hashtag.css b/src/renderer/views/Hashtag/Hashtag.css index a2d9314e834cc..372cb70483a83 100644 --- a/src/renderer/views/Hashtag/Hashtag.css +++ b/src/renderer/views/Hashtag/Hashtag.css @@ -8,7 +8,8 @@ margin-block-start: 16px; } -.getNextPage:hover, .getNextPage:focus { +.getNextPage:hover, +.getNextPage:focus { background-color: var(--side-nav-hover-color); color: var(--side-nav-hover-text-color); } diff --git a/src/renderer/views/Playlist/Playlist.scss b/src/renderer/views/Playlist/Playlist.scss index 1e0ce41dc574c..d1ab1f4dd939a 100644 --- a/src/renderer/views/Playlist/Playlist.scss +++ b/src/renderer/views/Playlist/Playlist.scss @@ -114,7 +114,8 @@ } } -.playlistItem-enter, .playlistItem-leave-to { +.playlistItem-enter, +.playlistItem-leave-to { opacity: 0; transform: translate(calc(10% * var(--horizontal-directionality-coefficient))); } diff --git a/src/renderer/views/ProfileSettings/ProfileSettings.css b/src/renderer/views/ProfileSettings/ProfileSettings.css index f7d8a4ebc9a47..4ec9e91f2297e 100644 --- a/src/renderer/views/ProfileSettings/ProfileSettings.css +++ b/src/renderer/views/ProfileSettings/ProfileSettings.css @@ -18,7 +18,8 @@ h2 { color: var(--card-bg-color); } -.profileList > .openedProfile:hover, .profileList > .openedProfile:focus-visible { +.profileList > .openedProfile:hover, +.profileList > .openedProfile:focus-visible { background-color: var(--tertiary-text-color); transition: background 0.2s ease-in; } diff --git a/src/renderer/views/Search/Search.css b/src/renderer/views/Search/Search.css index 1ef3d4d136f53..ec9031f0d9dcf 100644 --- a/src/renderer/views/Search/Search.css +++ b/src/renderer/views/Search/Search.css @@ -8,7 +8,8 @@ margin-block-start: 16px; } -.getNextPage:hover, .getNextPage:focus { +.getNextPage:hover, +.getNextPage:focus { background-color: var(--side-nav-hover-color); color: var(--side-nav-hover-text-color); } diff --git a/src/renderer/views/SubscribedChannels/SubscribedChannels.css b/src/renderer/views/SubscribedChannels/SubscribedChannels.css index 0c8c0f51ae041..bc34f613c3bcb 100644 --- a/src/renderer/views/SubscribedChannels/SubscribedChannels.css +++ b/src/renderer/views/SubscribedChannels/SubscribedChannels.css @@ -15,7 +15,7 @@ .channels { inline-size: 100%; display: grid; - grid-template-columns: repeat(auto-fill, minmax(120px, 1fr) ); + grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 2.5rem; margin-block-start: 2rem; } diff --git a/yarn.lock b/yarn.lock index 4e748e33d6ba5..22112c7b2766b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1065,20 +1065,20 @@ "@babel/helper-validator-identifier" "^7.24.7" to-fast-properties "^2.0.0" -"@csstools/css-parser-algorithms@^2.6.3": - version "2.6.3" - resolved "https://registry.yarnpkg.com/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.6.3.tgz#b5e7eb2bd2a42e968ef61484f1490a8a4148a8eb" - integrity sha512-xI/tL2zxzEbESvnSxwFgwvy5HS00oCXxL4MLs6HUiDcYfwowsoQaABKxUElp1ARITrINzBnsECOc1q0eg2GOrA== +"@csstools/css-parser-algorithms@^2.6.1", "@csstools/css-parser-algorithms@^2.7.1": + version "2.7.1" + resolved "https://registry.yarnpkg.com/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.7.1.tgz#6d93a8f7d8aeb7cd9ed0868f946e46f021b6aa70" + integrity sha512-2SJS42gxmACHgikc1WGesXLIT8d/q2l0UFM7TaEeIzdFCE/FPMtTiizcPGGJtlPo2xuQzY09OhrLTzRxqJqwGw== -"@csstools/css-tokenizer@^2.3.1": - version "2.3.1" - resolved "https://registry.yarnpkg.com/@csstools/css-tokenizer/-/css-tokenizer-2.3.1.tgz#3d47e101ad48d815a4bdce8159fb5764f087f17a" - integrity sha512-iMNHTyxLbBlWIfGtabT157LH9DUx9X8+Y3oymFEuMj8HNc+rpE3dPFGFgHjpKfjeFDjLjYIAIhXPGvS2lKxL9g== +"@csstools/css-tokenizer@^2.2.4", "@csstools/css-tokenizer@^2.4.1": + version "2.4.1" + resolved "https://registry.yarnpkg.com/@csstools/css-tokenizer/-/css-tokenizer-2.4.1.tgz#1d8b2e200197cf5f35ceb07ca2dade31f3a00ae8" + integrity sha512-eQ9DIktFJBhGjioABJRtUucoWR2mwllurfnM8LuNGAqX3ViZXaUchqk+1s7jjtkFiT9ySdACsFEA3etErkALUg== -"@csstools/media-query-list-parser@^2.1.11": - version "2.1.11" - resolved "https://registry.yarnpkg.com/@csstools/media-query-list-parser/-/media-query-list-parser-2.1.11.tgz#465aa42f268599729350e305e1ae14a30c1daf51" - integrity sha512-uox5MVhvNHqitPP+SynrB1o8oPxPMt2JLgp5ghJOWf54WGQ5OKu47efne49r1SWqs3wRP8xSWjnO9MBKxhB1dA== +"@csstools/media-query-list-parser@^2.1.13", "@csstools/media-query-list-parser@^2.1.9": + version "2.1.13" + resolved "https://registry.yarnpkg.com/@csstools/media-query-list-parser/-/media-query-list-parser-2.1.13.tgz#f00be93f6bede07c14ddf51a168ad2748e4fe9e5" + integrity sha512-XaHr+16KRU9Gf8XLi3q8kDlI18d5vzKSKCY510Vrtc9iNR0NJzbY9hhTmwhzYZj/ZwGL4VmB3TA9hJW0Um2qFA== "@csstools/selector-specificity@^3.1.1": version "3.1.1" @@ -1543,6 +1543,20 @@ resolved "https://registry.yarnpkg.com/@sindresorhus/merge-streams/-/merge-streams-1.0.0.tgz#9cd84cc15bc865a5ca35fcaae198eb899f7b5c90" integrity sha512-rUV5WyJrJLoloD4NDN1V1+LDMDWOa4OTsT4yYJwQNpTU6FWxkxHpL7eu4w+DmiH8x/EAM1otkPE1+LaspIbplw== +"@stylistic/stylelint-plugin@^2.1.0": + version "2.1.2" + resolved "https://registry.yarnpkg.com/@stylistic/stylelint-plugin/-/stylelint-plugin-2.1.2.tgz#d53556d1e9a62d9707028d394cf272f0bd2f0833" + integrity sha512-JsSqu0Y3vsX+PBl+DwULxC0cIv9C1yIcq1MXkx7pBOGtTqU26a75I8MPYMiEYvrsXgsKLi65xVgy1iLVSZquJA== + dependencies: + "@csstools/css-parser-algorithms" "^2.6.1" + "@csstools/css-tokenizer" "^2.2.4" + "@csstools/media-query-list-parser" "^2.1.9" + is-plain-object "^5.0.0" + postcss-selector-parser "^6.0.16" + postcss-value-parser "^4.2.0" + style-search "^0.1.0" + stylelint "^16.4.0" + "@szmarczak/http-timer@^4.0.5": version "4.0.6" resolved "https://registry.yarnpkg.com/@szmarczak/http-timer/-/http-timer-4.0.6.tgz#b4a914bb62e7c272d4e5989fe4440f812ab1d807" @@ -3181,10 +3195,10 @@ debug@2.6.9: dependencies: ms "2.0.0" -debug@4, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.4: - version "4.3.4" - resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865" - integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ== +debug@4, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.4, debug@^4.3.5: + version "4.3.5" + resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.5.tgz#e83444eceb9fedd4a1da56d671ae2446a01a6e1e" + integrity sha512-pt0bNEmneDIvdL1Xsd9oDQ/wrQRkXDT4AUWlNZNPKvW5x/jyO9VFXkJUP07vQ2upmw5PlaITaPKc31jK13V+jg== dependencies: ms "2.1.2" @@ -5706,10 +5720,10 @@ known-css-properties@^0.29.0: resolved "https://registry.yarnpkg.com/known-css-properties/-/known-css-properties-0.29.0.tgz#e8ba024fb03886f23cb882e806929f32d814158f" integrity sha512-Ne7wqW7/9Cz54PDt4I3tcV+hAyat8ypyOGzYRJQfdxnnjeWsTxt1cy8pjvvKeI5kfXuyvULyeeAvwvvtAX3ayQ== -known-css-properties@^0.31.0: - version "0.31.0" - resolved "https://registry.yarnpkg.com/known-css-properties/-/known-css-properties-0.31.0.tgz#5c8d9d8777b3ca09482b2397f6a241e5d69a1023" - integrity sha512-sBPIUGTNF0czz0mwGGUoKKJC8Q7On1GPbCSFPfyEsfHb2DyBG0Y4QtV+EVWpINSaiGKZblDNuF5AezxSgOhesQ== +known-css-properties@^0.34.0: + version "0.34.0" + resolved "https://registry.yarnpkg.com/known-css-properties/-/known-css-properties-0.34.0.tgz#ccd7e9f4388302231b3f174a8b1d5b1f7b576cea" + integrity sha512-tBECoUqNFbyAY4RrbqsBQqDFpGXAEbdD5QKr8kACx3+rnArmuuR22nKQWKazvp07N9yjTyDZaw/20UIH8tL9DQ== launch-editor@^2.6.1: version "2.6.1" @@ -8016,6 +8030,11 @@ strip-json-comments@^3.1.1: resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006" integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig== +style-search@^0.1.0: + version "0.1.0" + resolved "https://registry.yarnpkg.com/style-search/-/style-search-0.1.0.tgz#7958c793e47e32e07d2b5cafe5c0bf8e12e77902" + integrity sha512-Dj1Okke1C3uKKwQcetra4jSuk0DqbzbYtXipzFlFMZtowbF1x7BKJwB9AayVMyFARvU8EDrZdcax4At/452cAg== + stylehacks@^7.0.0: version "7.0.0" resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-7.0.0.tgz#68e8ee54724671c0c698be82e1299c6548c31921" @@ -8029,11 +8048,12 @@ stylelint-config-recommended@^14.0.1: resolved "https://registry.yarnpkg.com/stylelint-config-recommended/-/stylelint-config-recommended-14.0.1.tgz#d25e86409aaf79ee6c6085c2c14b33c7e23c90c6" integrity sha512-bLvc1WOz/14aPImu/cufKAZYfXs/A/owZfSMZ4N+16WGXLoX5lOir53M6odBxvhgmgdxCVnNySJmZKx73T93cg== -stylelint-config-sass-guidelines@^11.1.0: - version "11.1.0" - resolved "https://registry.yarnpkg.com/stylelint-config-sass-guidelines/-/stylelint-config-sass-guidelines-11.1.0.tgz#0106f3ec4991a598823b55841bf45fce63268c8c" - integrity sha512-mVE3UmN8MlshK4Gb3eYk6f8tw9DkQ9yjMF4W9krlmpaNZpSXOdh13AL0sU7l/9l4Pnpt4KMobNNIRI0tJl56Cw== +stylelint-config-sass-guidelines@^12.0.0: + version "12.0.0" + resolved "https://registry.yarnpkg.com/stylelint-config-sass-guidelines/-/stylelint-config-sass-guidelines-12.0.0.tgz#aff9ddc0b24e48eac4c44088cdbdad7166d76af3" + integrity sha512-lGJml+QEVlU/nqI+awiQieyxXHkmuwhz4XsfUNkQVcNaPXBpLgefOHjZ7ZSmUm4y4YG8JhrvYNjYzUcTfe8cdg== dependencies: + "@stylistic/stylelint-plugin" "^2.1.0" postcss-scss "^4.0.9" stylelint-scss "^6.2.1" @@ -8067,14 +8087,14 @@ stylelint-use-logical-spec@^5.0.1: resolved "https://registry.yarnpkg.com/stylelint-use-logical-spec/-/stylelint-use-logical-spec-5.0.1.tgz#d5aa254d615d373f18214297c0b49a03a6ca5980" integrity sha512-UfLB4LW6iG4r3cXxjxkiHQrFyhWFqt8FpNNngD+TyvgMWSokk5TYwTvBHS3atUvZhOogllTOe/PUrGE+4z84AA== -stylelint@^16.6.1: - version "16.6.1" - resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-16.6.1.tgz#84735aca2bb5cde535572b7a9b878d2ec983a570" - integrity sha512-yNgz2PqWLkhH2hw6X9AweV9YvoafbAD5ZsFdKN9BvSDVwGvPh+AUIrn7lYwy1S7IHmtFin75LLfX1m0D2tHu8Q== +stylelint@^16.4.0, stylelint@^16.7.0: + version "16.7.0" + resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-16.7.0.tgz#5f6acf516aedecba7a6472ba0cc1ffc20e2be86b" + integrity sha512-Q1ATiXlz+wYr37a7TGsfvqYn2nSR3T/isw3IWlZQzFzCNoACHuGBb6xBplZXz56/uDRJHIygxjh7jbV/8isewA== dependencies: - "@csstools/css-parser-algorithms" "^2.6.3" - "@csstools/css-tokenizer" "^2.3.1" - "@csstools/media-query-list-parser" "^2.1.11" + "@csstools/css-parser-algorithms" "^2.7.1" + "@csstools/css-tokenizer" "^2.4.1" + "@csstools/media-query-list-parser" "^2.1.13" "@csstools/selector-specificity" "^3.1.1" "@dual-bundle/import-meta-resolve" "^4.1.0" balanced-match "^2.0.0" @@ -8082,7 +8102,7 @@ stylelint@^16.6.1: cosmiconfig "^9.0.0" css-functions-list "^3.2.2" css-tree "^2.3.1" - debug "^4.3.4" + debug "^4.3.5" fast-glob "^3.3.2" fastest-levenshtein "^1.0.16" file-entry-cache "^9.0.0" @@ -8093,13 +8113,13 @@ stylelint@^16.6.1: ignore "^5.3.1" imurmurhash "^0.1.4" is-plain-object "^5.0.0" - known-css-properties "^0.31.0" + known-css-properties "^0.34.0" mathml-tag-names "^2.1.3" meow "^13.2.0" micromatch "^4.0.7" normalize-path "^3.0.0" picocolors "^1.0.1" - postcss "^8.4.38" + postcss "^8.4.39" postcss-resolve-nested-selector "^0.1.1" postcss-safe-parser "^7.0.0" postcss-selector-parser "^6.1.0"