diff --git a/Grayjay.Desktop.Web/index.html b/Grayjay.Desktop.Web/index.html index fded2a8f..0e657ea9 100644 --- a/Grayjay.Desktop.Web/index.html +++ b/Grayjay.Desktop.Web/index.html @@ -1,5 +1,5 @@ - + diff --git a/Grayjay.Desktop.Web/src/components/ButtonGroup/index.module.css b/Grayjay.Desktop.Web/src/components/ButtonGroup/index.module.css index eab256b3..d040c23c 100644 --- a/Grayjay.Desktop.Web/src/components/ButtonGroup/index.module.css +++ b/Grayjay.Desktop.Web/src/components/ButtonGroup/index.module.css @@ -15,9 +15,9 @@ padding: 0px 8px; gap: 4px; border-radius: 99px; - border: 1px solid rgba(255, 255, 255, 0.07); + border: 1px solid rgb(from var(--white-color) r g b / 0.07); background: rgba(99, 101, 240, 0.00); - color: #8C8C8C; + color: var(--grey-color-4); font-feature-settings: 'clig' off, 'liga' off; font-family: Inter; font-size: 16px; @@ -31,6 +31,6 @@ } .containerButton.active { - background: rgba(255, 255, 255, 0.06); - color: #FFF; + background: rgb(from var(--white-color) r g b / 0.06); + color: var(--white-color); } \ No newline at end of file diff --git a/Grayjay.Desktop.Web/src/components/CommentView/index.module.css b/Grayjay.Desktop.Web/src/components/CommentView/index.module.css index 1511d8ab..3c358af1 100644 --- a/Grayjay.Desktop.Web/src/components/CommentView/index.module.css +++ b/Grayjay.Desktop.Web/src/components/CommentView/index.module.css @@ -19,7 +19,7 @@ } .text { - color: #D9D9D9; + color: var(--grey-color-3); leading-trim: both; text-edge: cap; font-family: Inter; @@ -35,7 +35,7 @@ } .text > a { - color: #019BE7; + color: var(--blue-color-1); text-decoration: none; } @@ -71,7 +71,7 @@ } .authorName { - color: #FFF; + color: var(--white-color); leading-trim: both; text-edge: cap; font-family: Inter; @@ -82,7 +82,7 @@ } .metadata { - color: #888; + color: var(--grey-color-4); leading-trim: both; text-edge: cap; font-family: Inter; @@ -100,9 +100,9 @@ align-items: center; gap: 4px; border-radius: 99px; - border: 1px solid #454545; + border: 1px solid var(--grey-color-7); overflow: hidden; - color: #FFF; + color: var(--white-color); text-align: center; font-family: Inter; font-size: 14px; diff --git a/Grayjay.Desktop.Web/src/components/EmptyContentView/index.module.css b/Grayjay.Desktop.Web/src/components/EmptyContentView/index.module.css index 9346f498..87a9ecc8 100644 --- a/Grayjay.Desktop.Web/src/components/EmptyContentView/index.module.css +++ b/Grayjay.Desktop.Web/src/components/EmptyContentView/index.module.css @@ -7,7 +7,7 @@ } .noSubs .title { margin-top: 16px; - color: #FFF; + color: var(--white-color); text-align: center; font-family: Inter; @@ -18,7 +18,7 @@ } .noSubs .description { margin-top: 8px; - color: #575757; + color: var(--grey-color-5); text-align: center; font-family: Inter; font-size: 18px; diff --git a/Grayjay.Desktop.Web/src/components/GlobalContextMenu/index.module.css b/Grayjay.Desktop.Web/src/components/GlobalContextMenu/index.module.css index 7f731979..219338c0 100644 --- a/Grayjay.Desktop.Web/src/components/GlobalContextMenu/index.module.css +++ b/Grayjay.Desktop.Web/src/components/GlobalContextMenu/index.module.css @@ -1,8 +1,8 @@ .menu{ - background-color: #141414; + background-color: var(--black-color-1); padding: 12px; border-radius: 10px; border-radius: 10px; - border: 1px solid #2E2E2E; + border: 1px solid var(--grey-color-6); box-shadow: 0px 1.852px 3.148px 0px rgba(0, 0, 0, 0.06), 0px 8.148px 6.519px 0px rgba(0, 0, 0, 0.10), 0px 20px 13px 0px rgba(0, 0, 0, 0.13), 0px 38.519px 25.481px 0px rgba(0, 0, 0, 0.15), 0px 64.815px 46.852px 0px rgba(0, 0, 0, 0.19), 0px 100px 80px 0px rgba(0, 0, 0, 0.25); } diff --git a/Grayjay.Desktop.Web/src/components/LiveChatRemoteWindow/index.module.css b/Grayjay.Desktop.Web/src/components/LiveChatRemoteWindow/index.module.css index ad7e6433..90938db5 100644 --- a/Grayjay.Desktop.Web/src/components/LiveChatRemoteWindow/index.module.css +++ b/Grayjay.Desktop.Web/src/components/LiveChatRemoteWindow/index.module.css @@ -9,9 +9,9 @@ .window { height: 100%; padding: 10px; - background-color: #111; + background-color: var(--black-color-1); border-radius: 10px; - border: 2px solid #222; + border: 2px solid var(--grey-color-8); box-sizing: border-box; } .window iframe { diff --git a/Grayjay.Desktop.Web/src/components/PlaybackQueue/index.module.css b/Grayjay.Desktop.Web/src/components/PlaybackQueue/index.module.css index b9464b2b..ae389e1f 100644 --- a/Grayjay.Desktop.Web/src/components/PlaybackQueue/index.module.css +++ b/Grayjay.Desktop.Web/src/components/PlaybackQueue/index.module.css @@ -1,6 +1,6 @@ .containerPlaybackQueue { border-radius: 12px; - border: 1px solid rgba(255, 255, 255, 0.13); + border: 1px solid rgb(from var(--white-color) r g b / 0.13); padding-top: 32px; padding-left: 12px; @@ -9,7 +9,7 @@ .title { overflow: hidden; - color: #F0F0F0; + color: var(--grey-color-0); text-overflow: ellipsis; font-family: Inter; font-size: 24px; @@ -20,7 +20,7 @@ .metadata { overflow: hidden; - color: #8C8C8C; + color: var(--grey-color-4); text-overflow: ellipsis; font-family: Inter; font-size: 14px; @@ -30,7 +30,7 @@ } .itemNumber { - color: #8C8C8C; + color: var(--grey-color-4); text-align: center; font-family: Inter; font-size: 12px; @@ -43,13 +43,13 @@ } .itemNumber:hover { - color: #fff; + color: var(--white-color); } .itemTitle { overflow: hidden; - color: #D9D9D9; + color: var(--grey-color-3); text-overflow: ellipsis; font-family: Inter; font-size: 14px; @@ -61,7 +61,7 @@ } .itemAuthor { - color: #8C8C8C; + color: var(--grey-color-4); font-family: Inter; font-size: 14px; font-style: normal; diff --git a/Grayjay.Desktop.Web/src/components/PlaybackQueue/index.tsx b/Grayjay.Desktop.Web/src/components/PlaybackQueue/index.tsx index e076d24a..cbabc3ea 100644 --- a/Grayjay.Desktop.Web/src/components/PlaybackQueue/index.tsx +++ b/Grayjay.Desktop.Web/src/components/PlaybackQueue/index.tsx @@ -83,7 +83,7 @@ const PlaybackQueue: Component = (props) => { "align-items": "center", "overflow": "hidden", "gap": "8px", - "background-color": index() == props.index ? "#2E2E2E" : undefined, + "background-color": index() == props.index ? "var(--grey-color-6)" : undefined, "border-radius": "8px" }} onClick={() => { const v = video(); diff --git a/Grayjay.Desktop.Web/src/components/PlaylistDetailView/index.module.css b/Grayjay.Desktop.Web/src/components/PlaylistDetailView/index.module.css index 490eea8a..0b78c19b 100644 --- a/Grayjay.Desktop.Web/src/components/PlaylistDetailView/index.module.css +++ b/Grayjay.Desktop.Web/src/components/PlaylistDetailView/index.module.css @@ -6,7 +6,7 @@ } .header { - color: #FFF; + color: var(--white-color); font-family: Inter; font-size: 29px; font-style: normal; diff --git a/Grayjay.Desktop.Web/src/components/PlaylistDetailView/index.tsx b/Grayjay.Desktop.Web/src/components/PlaylistDetailView/index.tsx index f64c4d51..bf7eda5c 100644 --- a/Grayjay.Desktop.Web/src/components/PlaylistDetailView/index.tsx +++ b/Grayjay.Desktop.Web/src/components/PlaylistDetailView/index.tsx @@ -143,7 +143,7 @@ const PlaylistDetailView: Component = (props) => { text="Shuffle" icon={iconShuffle} style={{ - border: "1px solid #2E2E2E", + border: "1px solid var(--grey-color-6)", "margin-left": "16px", "margin-right": "16px", "flex-shrink": 0 @@ -157,7 +157,7 @@ const PlaylistDetailView: Component = (props) => { showClearButton={true} inputContainerStyle={{ "height": "70px", - "background": "#141414" + "background": "var(--black-color-1)" }} onTextChanged={(v) => { setFilterText(v); diff --git a/Grayjay.Desktop.Web/src/components/PlaylistItemView/index.module.css b/Grayjay.Desktop.Web/src/components/PlaylistItemView/index.module.css index e819dd18..a9ca1ce4 100644 --- a/Grayjay.Desktop.Web/src/components/PlaylistItemView/index.module.css +++ b/Grayjay.Desktop.Web/src/components/PlaylistItemView/index.module.css @@ -1,5 +1,5 @@ .metadata { - color: rgba(255, 255, 255, 0.60); + color: rgb(from var(--white-color) r g b / 0.60); font-family: Inter; font-size: 16px; font-style: normal; @@ -49,7 +49,7 @@ -webkit-line-clamp: 2; flex: 1 0 0; overflow: hidden; - color: #F0F0F0; + color: var(--grey-color-0); text-overflow: ellipsis; font-family: Inter; font-size: 16px; diff --git a/Grayjay.Desktop.Web/src/components/PlaylistItemView/index.tsx b/Grayjay.Desktop.Web/src/components/PlaylistItemView/index.tsx index b4fffecd..4f6cd45c 100644 --- a/Grayjay.Desktop.Web/src/components/PlaylistItemView/index.tsx +++ b/Grayjay.Desktop.Web/src/components/PlaylistItemView/index.tsx @@ -30,7 +30,7 @@ const PlaylistItemView: Component = (props) => { const editable$ = createMemo(() => props.isEditable ?? true); return ( -
{{ +
{{ props.onPlay?.(); }}}>
}> diff --git a/Grayjay.Desktop.Web/src/components/RatingView/index.module.css b/Grayjay.Desktop.Web/src/components/RatingView/index.module.css index 294a67c1..3c1e4b1a 100644 --- a/Grayjay.Desktop.Web/src/components/RatingView/index.module.css +++ b/Grayjay.Desktop.Web/src/components/RatingView/index.module.css @@ -14,7 +14,7 @@ .text { margin-left: 4px; - color: #FFF; + color: var(--white-color); font-family: Inter; font-size: 14px; font-style: normal; @@ -23,7 +23,7 @@ } .text.active { - color: #019BE7; + color: var(--blue-color-1); } .text.editable { diff --git a/Grayjay.Desktop.Web/src/components/RemotePlaylistDetailView/index.module.css b/Grayjay.Desktop.Web/src/components/RemotePlaylistDetailView/index.module.css index eebaae11..a5e95ffd 100644 --- a/Grayjay.Desktop.Web/src/components/RemotePlaylistDetailView/index.module.css +++ b/Grayjay.Desktop.Web/src/components/RemotePlaylistDetailView/index.module.css @@ -6,7 +6,7 @@ } .header { - color: #FFF; + color: var(--white-color); font-family: Inter; font-size: 29px; font-style: normal; diff --git a/Grayjay.Desktop.Web/src/components/RemotePlaylistDetailView/index.tsx b/Grayjay.Desktop.Web/src/components/RemotePlaylistDetailView/index.tsx index e9c08b4f..bfeaca8f 100644 --- a/Grayjay.Desktop.Web/src/components/RemotePlaylistDetailView/index.tsx +++ b/Grayjay.Desktop.Web/src/components/RemotePlaylistDetailView/index.tsx @@ -66,7 +66,7 @@ const RemotePlaylistDetailView: Component = (prop text="Shuffle" icon={iconShuffle} style={{ - border: "1px solid #2E2E2E", + border: "1px solid var(--grey-color-6)", "margin-left": "16px", "margin-right": "16px", "flex-shrink": 0 diff --git a/Grayjay.Desktop.Web/src/components/RepliesOverlay/index.module.css b/Grayjay.Desktop.Web/src/components/RepliesOverlay/index.module.css index 2d42e14e..281cca5c 100644 --- a/Grayjay.Desktop.Web/src/components/RepliesOverlay/index.module.css +++ b/Grayjay.Desktop.Web/src/components/RepliesOverlay/index.module.css @@ -19,7 +19,7 @@ } .text { - color: #D9D9D9; + color: var(--grey-color-3); leading-trim: both; text-edge: cap; font-family: Inter; @@ -67,7 +67,7 @@ } .authorName { - color: #FFF; + color: var(--white-color); leading-trim: both; text-edge: cap; font-family: Inter; @@ -78,7 +78,7 @@ } .metadata { - color: #888; + color: var(--grey-color-4); leading-trim: both; text-edge: cap; font-family: Inter; @@ -96,9 +96,9 @@ align-items: center; gap: 4px; border-radius: 99px; - border: 1px solid #454545; + border: 1px solid var(--grey-color-7); overflow: hidden; - color: #FFF; + color: var(--white-color); text-align: center; font-family: Inter; font-size: 14px; diff --git a/Grayjay.Desktop.Web/src/components/ToggleButtonGroup/index.module.css b/Grayjay.Desktop.Web/src/components/ToggleButtonGroup/index.module.css index 2067e078..20be4a5d 100644 --- a/Grayjay.Desktop.Web/src/components/ToggleButtonGroup/index.module.css +++ b/Grayjay.Desktop.Web/src/components/ToggleButtonGroup/index.module.css @@ -3,7 +3,7 @@ align-items: flex-start; justify-content: center; border-radius: 8px; - border: 1px solid #454545; + border: 1px solid var(--grey-color-7); overflow: hidden; height: 40px; } @@ -23,10 +23,10 @@ display: flex; justify-content: center; align-items: center; - color: #8C8C8C; + color: var(--grey-color-4); } .containerButton.active { - background: rgba(255, 255, 255, 0.06); - color: #FFF; + background: rgb(from var(--white-color) r g b / 0.06); + color: var(--white-color); } \ No newline at end of file diff --git a/Grayjay.Desktop.Web/src/components/ToggleItemBigButtonGroupMulti/index.module.css b/Grayjay.Desktop.Web/src/components/ToggleItemBigButtonGroupMulti/index.module.css index 6c3cafd3..191bf74c 100644 --- a/Grayjay.Desktop.Web/src/components/ToggleItemBigButtonGroupMulti/index.module.css +++ b/Grayjay.Desktop.Web/src/components/ToggleItemBigButtonGroupMulti/index.module.css @@ -22,7 +22,7 @@ display: flex; justify-content: center; align-items: center; - color: #FFF; + color: var(--white-color); gap: 4px; padding: 10px; flex-direction: column; @@ -32,9 +32,9 @@ border-radius: 6px; box-sizing: border-box; - background: #1B1B1B; + background: var(--black-color-2); } .containerButton.active { - background: #2E2E2E; + background: var(--grey-color-6); } \ No newline at end of file diff --git a/Grayjay.Desktop.Web/src/components/ToggleItemButtonGroup/index.module.css b/Grayjay.Desktop.Web/src/components/ToggleItemButtonGroup/index.module.css index 2367b298..418f7bc0 100644 --- a/Grayjay.Desktop.Web/src/components/ToggleItemButtonGroup/index.module.css +++ b/Grayjay.Desktop.Web/src/components/ToggleItemButtonGroup/index.module.css @@ -23,13 +23,13 @@ display: flex; justify-content: center; align-items: center; - color: #8C8C8C; + color: var(--grey-color-4); gap: 12px; padding-left: 24px; padding-right: 24px; } .containerButton.active { - background: rgba(255, 255, 255, 0.06); - color: #FFF; + background: rgb(from var(--white-color) r g b / 0.06); + color: var(--white-color); } \ No newline at end of file diff --git a/Grayjay.Desktop.Web/src/components/ToggleItemButtonGroupMulti/index.module.css b/Grayjay.Desktop.Web/src/components/ToggleItemButtonGroupMulti/index.module.css index f3b4b01a..0ed69ec1 100644 --- a/Grayjay.Desktop.Web/src/components/ToggleItemButtonGroupMulti/index.module.css +++ b/Grayjay.Desktop.Web/src/components/ToggleItemButtonGroupMulti/index.module.css @@ -26,15 +26,15 @@ padding-left: 24px; padding-right: 24px; align-items: center; - color: #FFF; + color: var(--white-color); gap: 4px; border-radius: 6px; - border: 1px solid #454545; + border: 1px solid var(--grey-color-7); box-sizing: border-box; } .containerButton.active { - background: #2E2E2E; - border: 1px solid #2E2E2E; + background: var(--grey-color-6); + border: 1px solid var(--grey-color-6); } \ No newline at end of file diff --git a/Grayjay.Desktop.Web/src/components/basics/AnimatedImage/index.module.css b/Grayjay.Desktop.Web/src/components/basics/AnimatedImage/index.module.css index ca6846fd..799641b7 100644 --- a/Grayjay.Desktop.Web/src/components/basics/AnimatedImage/index.module.css +++ b/Grayjay.Desktop.Web/src/components/basics/AnimatedImage/index.module.css @@ -12,7 +12,7 @@ } .errorText { - color: white; + color: var(--white-color); width: 100%; height: 100%; display: flex; diff --git a/Grayjay.Desktop.Web/src/components/basics/ViewTypeToggles/index.module.css b/Grayjay.Desktop.Web/src/components/basics/ViewTypeToggles/index.module.css index 53327aa2..5e9d00b8 100644 --- a/Grayjay.Desktop.Web/src/components/basics/ViewTypeToggles/index.module.css +++ b/Grayjay.Desktop.Web/src/components/basics/ViewTypeToggles/index.module.css @@ -2,7 +2,7 @@ height: 36px; margin: 4px; border-radius: 6px; - border: 1px solid #2E2E2E; + border: 1px solid var(--grey-color-6); overflow: hidden; flex-shrink: 0; } @@ -11,7 +11,7 @@ display: inline-block; align-items: center; justify-content: center; - background-color: #1B1B1B; + background-color: var(--black-color-2); } .toggleViewType.enabled { background-color: #262626 !important; diff --git a/Grayjay.Desktop.Web/src/components/basics/inputs/Checkbox/index.module.css b/Grayjay.Desktop.Web/src/components/basics/inputs/Checkbox/index.module.css index 3936335c..5f24436c 100644 --- a/Grayjay.Desktop.Web/src/components/basics/inputs/Checkbox/index.module.css +++ b/Grayjay.Desktop.Web/src/components/basics/inputs/Checkbox/index.module.css @@ -4,7 +4,7 @@ } .checkbox { - border-color: #8C8C8C; + border-color: var(--grey-color-4); border-radius: 4px; border-width: 1.5px; width: 20px; @@ -17,8 +17,8 @@ } .checkbox.checked { - border-color: #019BE7; - background-color: #019BE7; + border-color: var(--blue-color-1); + background-color: var(--blue-color-1); } .checkbox .check { @@ -35,7 +35,7 @@ } .label { - color: #8C8C8C; + color: var(--grey-color-4); font-family: Inter; font-size: 16px; font-style: normal; @@ -49,5 +49,5 @@ } .label.checked { - color: #fff; + color: var(--white-color); } \ No newline at end of file diff --git a/Grayjay.Desktop.Web/src/components/basics/inputs/CheckboxFlex/index.module.css b/Grayjay.Desktop.Web/src/components/basics/inputs/CheckboxFlex/index.module.css index 3285c62f..b9644fbc 100644 --- a/Grayjay.Desktop.Web/src/components/basics/inputs/CheckboxFlex/index.module.css +++ b/Grayjay.Desktop.Web/src/components/basics/inputs/CheckboxFlex/index.module.css @@ -1,5 +1,5 @@ .checkbox { - border-color: #8C8C8C; + border-color: var(--grey-color-4); border-radius: 8px; border-width: 3.6px; width: 22px; @@ -14,8 +14,8 @@ } .checkbox.checked { - border-color: #019BE7; - background-color: #019BE7; + border-color: var(--blue-color-1); + background-color: var(--blue-color-1); border-radius: 8px; border-width: 3.6px; width: 22px; diff --git a/Grayjay.Desktop.Web/src/components/basics/inputs/Dropdown/index.module.css b/Grayjay.Desktop.Web/src/components/basics/inputs/Dropdown/index.module.css index 5a0da0bc..c033f42d 100644 --- a/Grayjay.Desktop.Web/src/components/basics/inputs/Dropdown/index.module.css +++ b/Grayjay.Desktop.Web/src/components/basics/inputs/Dropdown/index.module.css @@ -7,10 +7,10 @@ .select { border-radius: 8px; - border: 1px solid #2E2E2E; - background: #141414; + border: 1px solid var(--grey-color-6); + background: var(--black-color-1); padding: 14px; - color: white; + color: var(--white-color); cursor: pointer; min-width: 128px; @@ -40,11 +40,11 @@ position: absolute; right: 0px; border-radius: 10px; - border: 1px solid #2E2E2E; - background: #141414; + border: 1px solid var(--grey-color-6); + background: var(--black-color-1); overflow-y: auto; scrollbar-width: thin; - scrollbar-color: #555 #333; + scrollbar-color: var(--grey-color-5) var(--grey-color-6); z-index: 999; } @@ -52,14 +52,14 @@ width: 10px; } .optionsContainer::-webkit-scrollbar-thumb { - background-color: #555; + background-color: var(--grey-color-5); border-radius: 5px; } .optionsContainer::-webkit-scrollbar-thumb:hover { - background-color: #888; + background-color: var(--grey-color-4); } .optionsContainer::-webkit-scrollbar-track { - background-color: #333; + background-color: var(--grey-color-6); } .optionsContainer::-webkit-scrollbar-corner { background-color: transparent; @@ -72,7 +72,7 @@ padding-right: 16px; padding-bottom: 16px; padding-top: 16px; - color: #FFF; + color: var(--white-color); font-family: Inter; font-size: 16px; font-style: normal; @@ -86,11 +86,11 @@ } .option.hover { - color: #FFF; + color: var(--white-color); } .option.selected { - background: #1B1B1B; + background: var(--black-color-2); border-radius: 5px; } @@ -105,7 +105,7 @@ .labelText { overflow: hidden; - color: #595959; + color: var(--grey-color-5); text-overflow: ellipsis; font-family: Inter; font-size: 12px; diff --git a/Grayjay.Desktop.Web/src/components/basics/inputs/InputText/index.module.css b/Grayjay.Desktop.Web/src/components/basics/inputs/InputText/index.module.css index 6e78727d..212e469e 100644 --- a/Grayjay.Desktop.Web/src/components/basics/inputs/InputText/index.module.css +++ b/Grayjay.Desktop.Web/src/components/basics/inputs/InputText/index.module.css @@ -1,8 +1,8 @@ .containerInputText { border-radius: 6px; - border: 1px solid #2E2E2E; - background: #1B1B1B; + border: 1px solid var(--grey-color-6); + background: var(--black-color-2); padding-top: 16px; padding-bottom: 16px; padding-left: 12px; @@ -45,8 +45,8 @@ } .containerInputText.disabled { - border: 1px solid #2E2E2E; - background: #141414; + border: 1px solid var(--grey-color-6); + background: var(--black-color-1); } .containerInputText.disabled::placeholder { @@ -75,7 +75,7 @@ flex-grow: 1; border: none; background: transparent; - color: white; + color: var(--white-color); font-weight: 400; font-size: 16px; line-height: 22px; @@ -86,12 +86,12 @@ } .searchInput::placeholder { - color: #494949; + color: var(--grey-color-7); } .labelText { overflow: hidden; - color: #595959; + color: var(--grey-color-5); text-overflow: ellipsis; white-space: nowrap; font-family: Inter; diff --git a/Grayjay.Desktop.Web/src/components/basics/inputs/InputTextArea/index.module.css b/Grayjay.Desktop.Web/src/components/basics/inputs/InputTextArea/index.module.css index 644763ac..357b4b30 100644 --- a/Grayjay.Desktop.Web/src/components/basics/inputs/InputTextArea/index.module.css +++ b/Grayjay.Desktop.Web/src/components/basics/inputs/InputTextArea/index.module.css @@ -1,8 +1,8 @@ .containerInputText { border-radius: 6px; - border: 1px solid #2E2E2E; - background: #1B1B1B; + border: 1px solid var(--grey-color-6); + background: var(--black-color-2); display: flex; flex-direction: row; @@ -36,8 +36,8 @@ } .containerInputText.disabled { - border: 1px solid #2E2E2E; - background: #141414; + border: 1px solid var(--grey-color-6); + background: var(--black-color-1); } .containerInputText.disabled::placeholder { @@ -65,7 +65,7 @@ flex-grow: 1; border: none; background: transparent; - color: white; + color: var(--white-color); font-weight: 400; font-size: 16px; line-height: 22px; @@ -85,16 +85,16 @@ } .searchInput::-webkit-scrollbar-thumb { - background-color: #555; + background-color: var(--grey-color-5); border-radius: 5px; } .searchInput::-webkit-scrollbar-thumb:hover { - background-color: #888; + background-color: var(--grey-color-4); } .searchInput::-webkit-scrollbar-track { - background-color: #333; + background-color: var(--grey-color-6); } .searchInputs::-webkit-scrollbar-corner { @@ -102,7 +102,7 @@ } .searchInput::placeholder { - color: #494949; + color: var(--grey-color-7); } .containerInputTextError { diff --git a/Grayjay.Desktop.Web/src/components/basics/inputs/SettingsDropdown/index.module.css b/Grayjay.Desktop.Web/src/components/basics/inputs/SettingsDropdown/index.module.css index 75f55476..eb1762ba 100644 --- a/Grayjay.Desktop.Web/src/components/basics/inputs/SettingsDropdown/index.module.css +++ b/Grayjay.Desktop.Web/src/components/basics/inputs/SettingsDropdown/index.module.css @@ -6,10 +6,10 @@ .select { border-radius: 8px; - border: 1px solid #2E2E2E; - background: #141414; + border: 1px solid var(--grey-color-6); + background: var(--black-color-1); padding: 14px; - color: white; + color: var(--white-color); cursor: pointer; display: flex; @@ -39,26 +39,26 @@ position: absolute; border-radius: 10px; - border: 1px solid #2E2E2E; - background: #141414; + border: 1px solid var(--grey-color-6); + background: var(--black-color-1); max-height: 200px; overflow-y: auto; scrollbar-width: 8px; - scrollbar-color: #555 #333; + scrollbar-color: var(--grey-color-5) var(--grey-color-6); } .optionsContainer::-webkit-scrollbar { width: 10px; } .optionsContainer::-webkit-scrollbar-thumb { - background-color: #555; + background-color: var(--grey-color-5); border-radius: 5px; } .optionsContainer::-webkit-scrollbar-thumb:hover { - background-color: #888; + background-color: var(--grey-color-4); } .optionsContainer::-webkit-scrollbar-track { - background-color: #333; + background-color: var(--grey-color-6); } .optionsContainer::-webkit-scrollbar-corner { background-color: transparent; @@ -71,7 +71,7 @@ padding-right: 10px; padding-bottom: 10px; padding-top: 10px; - color: #FFF; + color: var(--white-color); font-family: Inter; font-size: 16px; font-style: normal; @@ -83,7 +83,7 @@ display: inline-block; } .option.selected { - background: #1B1B1B; + background: var(--black-color-2); border-radius: 5px; } @@ -97,7 +97,7 @@ .labelText { overflow: hidden; - color: #595959; + color: var(--grey-color-5); text-overflow: ellipsis; font-family: Inter; font-size: 12px; diff --git a/Grayjay.Desktop.Web/src/components/basics/inputs/Toggle/index.module.css b/Grayjay.Desktop.Web/src/components/basics/inputs/Toggle/index.module.css index 40e5137e..c748cce5 100644 --- a/Grayjay.Desktop.Web/src/components/basics/inputs/Toggle/index.module.css +++ b/Grayjay.Desktop.Web/src/components/basics/inputs/Toggle/index.module.css @@ -2,7 +2,7 @@ border-radius: 30px; width: 52px; height: 32px; - background-color: #ffffff22; + background-color: rgb(from var(--white-color) r g b / .13); display: inline-block; transition: background-color 0.5s; cursor: pointer; @@ -12,7 +12,7 @@ height: 22px; margin-top: 5px; margin-left: 5px; - background-color: #FFF; + background-color: var(--white-color); border-radius: 25px; transition: margin-left 0.5s; } @@ -22,5 +22,5 @@ } .toggle.enabled { - background-color: #019BE7; + background-color: var(--blue-color-1); } \ No newline at end of file diff --git a/Grayjay.Desktop.Web/src/components/basics/inputs/TogglePill/index.module.css b/Grayjay.Desktop.Web/src/components/basics/inputs/TogglePill/index.module.css index bcace2c7..f15da0c1 100644 --- a/Grayjay.Desktop.Web/src/components/basics/inputs/TogglePill/index.module.css +++ b/Grayjay.Desktop.Web/src/components/basics/inputs/TogglePill/index.module.css @@ -5,8 +5,8 @@ padding-top: 8px; padding-bottom: 8px; text-align: center; - color: #BFBFBF; - background: transparant; + color: var(--grey-color-1); + background: transparent; display: inline-block; text-align: center; @@ -20,5 +20,5 @@ } .togglePill.enabled { border: 1px solid #02C6E7; - color: white; + color: var(--white-color); } \ No newline at end of file diff --git a/Grayjay.Desktop.Web/src/components/basics/loaders/Loader/index.module.css b/Grayjay.Desktop.Web/src/components/basics/loaders/Loader/index.module.css index 8d2de226..12aff1fa 100644 --- a/Grayjay.Desktop.Web/src/components/basics/loaders/Loader/index.module.css +++ b/Grayjay.Desktop.Web/src/components/basics/loaders/Loader/index.module.css @@ -16,7 +16,7 @@ padding-bottom: 100%; box-shadow: inset 0 0 0 0 #fff; animation: pulseInOut 1.8s ease-in-out infinite; - filter: drop-shadow(0 0 1rem rgba(255, 255, 255, 0.75)); + filter: drop-shadow(0 0 1rem rgb(from var(--white-color) r g b / 0.75)); } .loader:after { @@ -27,7 +27,7 @@ padding-bottom: calc(100% - 2 * var(--T)); box-shadow: 0 0 0 0 #fff; animation: pulseOutIn 1.8s ease-in-out infinite; - filter: drop-shadow(0 0 1rem rgba(255, 255, 255, 0.75)); + filter: drop-shadow(0 0 1rem rgb(from var(--white-color) r g b / 0.75)); } @keyframes pulseInOut { diff --git a/Grayjay.Desktop.Web/src/components/basics/loaders/LoaderContainer/index.module.css b/Grayjay.Desktop.Web/src/components/basics/loaders/LoaderContainer/index.module.css index e68f9088..986377fd 100644 --- a/Grayjay.Desktop.Web/src/components/basics/loaders/LoaderContainer/index.module.css +++ b/Grayjay.Desktop.Web/src/components/basics/loaders/LoaderContainer/index.module.css @@ -4,7 +4,7 @@ position: relative; scrollbar-width: 8px; - scrollbar-color: #555 #333; + scrollbar-color: var(--grey-color-5) var(--grey-color-6); } diff --git a/Grayjay.Desktop.Web/src/components/basics/loaders/LoaderGrid/index.module.css b/Grayjay.Desktop.Web/src/components/basics/loaders/LoaderGrid/index.module.css index 120be0db..16d25b9a 100644 --- a/Grayjay.Desktop.Web/src/components/basics/loaders/LoaderGrid/index.module.css +++ b/Grayjay.Desktop.Web/src/components/basics/loaders/LoaderGrid/index.module.css @@ -3,5 +3,5 @@ height: 100%; position: relative; scrollbar-width: 8px; - scrollbar-color: #555 #333; + scrollbar-color: var(--grey-color-5) var(--grey-color-6); } \ No newline at end of file diff --git a/Grayjay.Desktop.Web/src/components/basics/loaders/LoaderSmall/index.module.css b/Grayjay.Desktop.Web/src/components/basics/loaders/LoaderSmall/index.module.css index 8109960d..022edb8f 100644 --- a/Grayjay.Desktop.Web/src/components/basics/loaders/LoaderSmall/index.module.css +++ b/Grayjay.Desktop.Web/src/components/basics/loaders/LoaderSmall/index.module.css @@ -4,7 +4,7 @@ position: relative; scrollbar-width: 8px; - scrollbar-color: #555 #333; + scrollbar-color: var(--grey-color-5) var(--grey-color-6); } /* HTML:
*/ diff --git a/Grayjay.Desktop.Web/src/components/basics/loaders/SkeletonDiv/index.module.css b/Grayjay.Desktop.Web/src/components/basics/loaders/SkeletonDiv/index.module.css index d30e1175..3c9c116f 100644 --- a/Grayjay.Desktop.Web/src/components/basics/loaders/SkeletonDiv/index.module.css +++ b/Grayjay.Desktop.Web/src/components/basics/loaders/SkeletonDiv/index.module.css @@ -4,7 +4,7 @@ height: 100%; /* Adjust to your container’s height */ position: relative; overflow: hidden; - background: #1b1b1b; /* Solid base color */ + background: var(--black-color-2); /* Solid base color */ } .skeletonBox::before { @@ -17,9 +17,9 @@ background: linear-gradient( 90deg, transparent 0%, /* Invisible start */ - rgba(255,255,255,0.05) 30%, /* Gradual increase */ - rgba(255,255,255,0.2) 50%, /* Softer peak */ - rgba(255,255,255,0.05) 70%, /* Gradual decrease */ + rgb(from var(--white-color) r g b /0.05) 30%, /* Gradual increase */ + rgb(from var(--white-color) r g b /0.2) 50%, /* Softer peak */ + rgb(from var(--white-color) r g b /0.05) 70%, /* Gradual decrease */ transparent 100% /* Invisible end */ ); animation: shimmer 2.2s infinite ease-in-out; diff --git a/Grayjay.Desktop.Web/src/components/buttons/BorderButton/index.module.css b/Grayjay.Desktop.Web/src/components/buttons/BorderButton/index.module.css index a3738d3e..33dce533 100644 --- a/Grayjay.Desktop.Web/src/components/buttons/BorderButton/index.module.css +++ b/Grayjay.Desktop.Web/src/components/buttons/BorderButton/index.module.css @@ -1,6 +1,6 @@ .container { border-radius: 6px; - border: 1px solid #2E2E2E; + border: 1px solid var(--grey-color-6); display: flex; height: 56px; @@ -11,7 +11,7 @@ justify-content: center; box-sizing: border-box; - color: #D9D9D9; + color: var(--grey-color-3); text-align: center; font-feature-settings: 'clig' off, 'liga' off; font-family: Inter; diff --git a/Grayjay.Desktop.Web/src/components/buttons/Button/index.module.css b/Grayjay.Desktop.Web/src/components/buttons/Button/index.module.css index 081dfc19..a652db77 100644 --- a/Grayjay.Desktop.Web/src/components/buttons/Button/index.module.css +++ b/Grayjay.Desktop.Web/src/components/buttons/Button/index.module.css @@ -1,6 +1,6 @@ .container { - background-color: #ffffff0a; border-radius: 6px; + background-color: rgb(from var(--white-color) r g b / 0.04); font-weight: 400; font-size: 16px; line-height: 22px; @@ -39,8 +39,8 @@ } /* .container { - background-color: #ffffff0a; border-radius: 6px; + background-color: rgb(from var(--white-color) r g b / 0.04); padding-left: 40px; padding-right: 40px; font-weight: 600; diff --git a/Grayjay.Desktop.Web/src/components/buttons/Button/index.tsx b/Grayjay.Desktop.Web/src/components/buttons/Button/index.tsx index 98b3e932..ca4193e5 100644 --- a/Grayjay.Desktop.Web/src/components/buttons/Button/index.tsx +++ b/Grayjay.Desktop.Web/src/components/buttons/Button/index.tsx @@ -19,7 +19,7 @@ const Button: Component = (props) => { }; return ( -
+
{props.text} diff --git a/Grayjay.Desktop.Web/src/components/buttons/DescriptorButton/index.module.css b/Grayjay.Desktop.Web/src/components/buttons/DescriptorButton/index.module.css index 3729182f..5185d9ba 100644 --- a/Grayjay.Desktop.Web/src/components/buttons/DescriptorButton/index.module.css +++ b/Grayjay.Desktop.Web/src/components/buttons/DescriptorButton/index.module.css @@ -11,7 +11,7 @@ padding-bottom: 15px; display: inline-block; background: linear-gradient(90deg, transparent, #3b3b3b4f); - border: 1.5px solid #2E2E2E; + border: 1.5px solid var(--grey-color-6); position: relative; height: 90px; display: grid; @@ -53,7 +53,7 @@ width: 100%; } .text .title{ - color: #FFF; + color: var(--white-color); font-family: Inter; font-size: 18px; font-style: normal; @@ -63,7 +63,7 @@ text-overflow: ellipsis; } .text .description{ - color: #8C8C8C; + color: var(--grey-color-4); font-family: Inter; font-size: 14px; font-style: normal; @@ -75,8 +75,8 @@ } /* .container { - background-color: #ffffff0a; border-radius: 6px; + background-color: rgb(from var(--white-color) r g b / 0.04); padding-left: 40px; padding-right: 40px; font-weight: 600; diff --git a/Grayjay.Desktop.Web/src/components/buttons/IconButton/index.module.css b/Grayjay.Desktop.Web/src/components/buttons/IconButton/index.module.css index d37b9682..4fb5c022 100644 --- a/Grayjay.Desktop.Web/src/components/buttons/IconButton/index.module.css +++ b/Grayjay.Desktop.Web/src/components/buttons/IconButton/index.module.css @@ -1,7 +1,7 @@ .container { width: 24px; height: 24px; - background-color: #212122; + background-color: var(--grey-color-8); border-radius: 50%; display: flex; flex-shrink: 0; diff --git a/Grayjay.Desktop.Web/src/components/buttons/LoadingButton/index.module.css b/Grayjay.Desktop.Web/src/components/buttons/LoadingButton/index.module.css index 2d1d1628..2304cf2b 100644 --- a/Grayjay.Desktop.Web/src/components/buttons/LoadingButton/index.module.css +++ b/Grayjay.Desktop.Web/src/components/buttons/LoadingButton/index.module.css @@ -1,6 +1,6 @@ .container { - background-color: #ffffff0a; border-radius: 6px; + background-color: rgb(from var(--white-color) r g b / 0.04); padding-left: 40px; padding-right: 40px; font-weight: 600; diff --git a/Grayjay.Desktop.Web/src/components/buttons/LoadingButton/index.tsx b/Grayjay.Desktop.Web/src/components/buttons/LoadingButton/index.tsx index b7c20fa7..9fe40d8e 100644 --- a/Grayjay.Desktop.Web/src/components/buttons/LoadingButton/index.tsx +++ b/Grayjay.Desktop.Web/src/components/buttons/LoadingButton/index.tsx @@ -22,7 +22,7 @@ const LoadingButton: Component = (props) => { }; return ( -
+
); diff --git a/Grayjay.Desktop.Web/src/components/buttons/PillButton/index.module.css b/Grayjay.Desktop.Web/src/components/buttons/PillButton/index.module.css index 5e622bb9..c20c7a6f 100644 --- a/Grayjay.Desktop.Web/src/components/buttons/PillButton/index.module.css +++ b/Grayjay.Desktop.Web/src/components/buttons/PillButton/index.module.css @@ -6,7 +6,7 @@ gap: 6px; border-radius: 26px; - background-color: #212122; + background-color: var(--grey-color-8); padding-left: 16px; padding-right: 16px; } @@ -21,7 +21,7 @@ } .text { - color: #FFF; + color: var(--white-color); font-family: Inter; font-size: 14px; font-style: normal; diff --git a/Grayjay.Desktop.Web/src/components/buttons/PillButtonSmall/index.module.css b/Grayjay.Desktop.Web/src/components/buttons/PillButtonSmall/index.module.css index dc92ab23..28770cc5 100644 --- a/Grayjay.Desktop.Web/src/components/buttons/PillButtonSmall/index.module.css +++ b/Grayjay.Desktop.Web/src/components/buttons/PillButtonSmall/index.module.css @@ -6,7 +6,7 @@ gap: 6px; border-radius: 22px; - background-color: #212122; + background-color: var(--grey-color-8); padding-left: 20px; padding-right: 20px; } @@ -21,7 +21,7 @@ } .text { - color: #FFF; + color: var(--white-color); font-family: "Inter"; font-size: 16px; font-weight: 500; diff --git a/Grayjay.Desktop.Web/src/components/buttons/SubscribeButton/index.tsx b/Grayjay.Desktop.Web/src/components/buttons/SubscribeButton/index.tsx index 7d758597..9f3e6740 100644 --- a/Grayjay.Desktop.Web/src/components/buttons/SubscribeButton/index.tsx +++ b/Grayjay.Desktop.Web/src/components/buttons/SubscribeButton/index.tsx @@ -43,21 +43,21 @@ const SubscribeButton: Component = (props) => { return ( - { + { const url = props.author; if (url) unsubscribe(url); }} /> - { + { const url = props.author; if (url) subscribe(url); }} /> - { + { }} /> diff --git a/Grayjay.Desktop.Web/src/components/buttons/TransparentIconButton/index.module.css b/Grayjay.Desktop.Web/src/components/buttons/TransparentIconButton/index.module.css index 5536329b..5b95a9f8 100644 --- a/Grayjay.Desktop.Web/src/components/buttons/TransparentIconButton/index.module.css +++ b/Grayjay.Desktop.Web/src/components/buttons/TransparentIconButton/index.module.css @@ -3,7 +3,7 @@ height: 24px; background-color: #24242400; border-radius: 6px; - background: rgba(255, 255, 255, 0.065); + background: rgb(from var(--white-color) r g b / 0.065); display: flex; flex-shrink: 0; } diff --git a/Grayjay.Desktop.Web/src/components/casting/OverlayCasting/index.module.css b/Grayjay.Desktop.Web/src/components/casting/OverlayCasting/index.module.css index 31af6761..397c9090 100644 --- a/Grayjay.Desktop.Web/src/components/casting/OverlayCasting/index.module.css +++ b/Grayjay.Desktop.Web/src/components/casting/OverlayCasting/index.module.css @@ -21,11 +21,11 @@ flex-direction: column; align-items: flex-start; border-radius: 12px; - border: 1px solid #2E2E2E; - background: #141414; + border: 1px solid var(--grey-color-6); + background: var(--black-color-1); /* Drop Shadow */ - box-shadow: 0px 2px 21px 0px rgba(0, 0, 0, 0.55), 0px 32px 64px 0px rgba(0, 0, 0, 0.56); + box-shadow: 0px 2px 21px 0px rgb(from var(--black-color-3) r g b / 0.55), 0px 32px 64px 0px rgb(from var(--black-color-3) r g b / 0.56); } .containerCastingHeader { @@ -36,7 +36,7 @@ } .containerCastingHeaderTitle { - color: #FFF; + color: var(--white-color); font-family: Inter; font-size: 20px; font-style: normal; @@ -48,7 +48,7 @@ width: 32px; height: 32px; border-radius: 50%; - background: #2E2E2E; + background: var(--grey-color-6); display: flex; align-items: center; justify-content: center; @@ -68,7 +68,7 @@ } .containerNoDevicesFoundTitle { - color: #FFF; + color: var(--white-color); font-family: Inter; font-size: 20px; font-style: normal; @@ -89,7 +89,7 @@ align-items: center; flex-direction: row; - color: #8C8C8C; + color: var(--grey-color-4); font-family: Inter; font-size: 14px; font-style: normal; @@ -134,7 +134,7 @@ } .containerDevice:hover { - background-color: #1B1B1B; + background-color: var(--black-color-2); } .containerDevice img { @@ -144,7 +144,7 @@ } .deviceName { - color: #F0F0F0; + color: var(--grey-color-0); font-family: Inter; font-size: 16px; font-style: normal; @@ -158,7 +158,7 @@ } .deviceType { - color: #8C8C8C; + color: var(--grey-color-4); font-family: Inter; font-size: 14px; font-style: normal; @@ -183,7 +183,7 @@ } .helpText { - color: #019BE7; + color: var(--blue-color-1); text-align: center; font-feature-settings: 'clig' off, 'liga' off; font-family: Inter; @@ -209,7 +209,7 @@ flex-direction: column; flex-grow: 1; - color: #8C8C8C; + color: var(--grey-color-4); font-family: Inter; font-size: 12px; font-style: normal; diff --git a/Grayjay.Desktop.Web/src/components/casting/OverlayCasting/index.tsx b/Grayjay.Desktop.Web/src/components/casting/OverlayCasting/index.tsx index 65db407c..dec9ced3 100644 --- a/Grayjay.Desktop.Web/src/components/casting/OverlayCasting/index.tsx +++ b/Grayjay.Desktop.Web/src/components/casting/OverlayCasting/index.tsx @@ -161,7 +161,7 @@ const DeviceList: Component = () => { }}
-
+
@@ -377,9 +377,9 @@ const OverlayCasting: Component = () => {
-
Connecting to casting device
+
Connecting to casting device
-
Make sure you are on the same network VPNs and guest networks can cause issues
+
Make sure you are on the same network VPNs and guest networks can cause issues
diff --git a/Grayjay.Desktop.Web/src/components/containers/ContentGrid/index.module.css b/Grayjay.Desktop.Web/src/components/containers/ContentGrid/index.module.css index a76a3f30..a5cdc251 100644 --- a/Grayjay.Desktop.Web/src/components/containers/ContentGrid/index.module.css +++ b/Grayjay.Desktop.Web/src/components/containers/ContentGrid/index.module.css @@ -11,16 +11,16 @@ } .container::-webkit-scrollbar-thumb { - background-color: #555; + background-color: var(--grey-color-5); border-radius: 5px; } .container::-webkit-scrollbar-thumb:hover { - background-color: #888; + background-color: var(--grey-color-4); } .container::-webkit-scrollbar-track { - background-color: #333; + background-color: var(--grey-color-6); } .container::-webkit-scrollbar-corner { diff --git a/Grayjay.Desktop.Web/src/components/containers/DataTable/index.module.css b/Grayjay.Desktop.Web/src/components/containers/DataTable/index.module.css index f3fd8205..5b5d57c6 100644 --- a/Grayjay.Desktop.Web/src/components/containers/DataTable/index.module.css +++ b/Grayjay.Desktop.Web/src/components/containers/DataTable/index.module.css @@ -3,7 +3,7 @@ height: 100%; position: relative; scrollbar-width: 8px; - scrollbar-color: #555 #333; + scrollbar-color: var(--grey-color-5) var(--grey-color-6); scrollbar-width: thin; } @@ -12,16 +12,16 @@ } .containerScroll::-webkit-scrollbar-thumb { - background-color: #555; + background-color: var(--grey-color-5); border-radius: 5px; } .containerScroll::-webkit-scrollbar-thumb:hover { - background-color: #888; + background-color: var(--grey-color-4); } .containerScroll::-webkit-scrollbar-track { - background-color: #333; + background-color: var(--grey-color-6); } .containerScroll::-webkit-scrollbar-corner { @@ -36,7 +36,7 @@ table .header tr { border-bottom: 0px !important; } table .header th { - background: #1B1B1B; + background: var(--black-color-2); padding-top: 16px; padding-bottom: 16px; } @@ -55,11 +55,11 @@ table .headers th:last-child{ table tr { max-height: 60px; border-bottom: 1px solid #3b3939; - background: #141414; + background: var(--black-color-1); } table th { overflow: hidden; - color: #D9D9D9; + color: var(--grey-color-3); text-overflow: ellipsis; font-family: sans-serif; font-size: 14px; diff --git a/Grayjay.Desktop.Web/src/components/containers/HorizontalScrollContainer/index.module.css b/Grayjay.Desktop.Web/src/components/containers/HorizontalScrollContainer/index.module.css index b1ef992e..89d62256 100644 --- a/Grayjay.Desktop.Web/src/components/containers/HorizontalScrollContainer/index.module.css +++ b/Grayjay.Desktop.Web/src/components/containers/HorizontalScrollContainer/index.module.css @@ -3,7 +3,7 @@ overflow-y: hidden; position: relative; scrollbar-width: 8px; - scrollbar-color: #555 #333; + scrollbar-color: var(--grey-color-5) var(--grey-color-6); scrollbar-width: thin; display: flex; flex-direction: row; @@ -14,16 +14,16 @@ } .containerScroll::-webkit-scrollbar-thumb { - background-color: #555; + background-color: var(--grey-color-5); border-radius: 5px; } .containerScroll::-webkit-scrollbar-thumb:hover { - background-color: #888; + background-color: var(--grey-color-4); } .containerScroll::-webkit-scrollbar-track { - background-color: #333; + background-color: var(--grey-color-6); } .containerScroll::-webkit-scrollbar-corner { @@ -35,7 +35,7 @@ overflow-y: hidden; position: relative; scrollbar-width: 8px; - scrollbar-color: #292929 transparent; + scrollbar-color: var(--grey-color-6) transparent; scrollbar-width: thin; display: flex; flex-direction: row; diff --git a/Grayjay.Desktop.Web/src/components/containers/ScrollContainer/index.module.css b/Grayjay.Desktop.Web/src/components/containers/ScrollContainer/index.module.css index e3d0bef4..0d89de15 100644 --- a/Grayjay.Desktop.Web/src/components/containers/ScrollContainer/index.module.css +++ b/Grayjay.Desktop.Web/src/components/containers/ScrollContainer/index.module.css @@ -4,7 +4,7 @@ height: 100%; position: relative; scrollbar-width: 8px; - scrollbar-color: #555 #333; + scrollbar-color: var(--grey-color-5) var(--grey-color-6); scrollbar-width: thin; } @@ -13,16 +13,16 @@ } .containerScroll::-webkit-scrollbar-thumb { - background-color: #555; + background-color: var(--grey-color-5); border-radius: 5px; } .containerScroll::-webkit-scrollbar-thumb:hover { - background-color: #888; + background-color: var(--grey-color-4); } .containerScroll::-webkit-scrollbar-track { - background-color: #333; + background-color: var(--grey-color-6); } .containerScroll::-webkit-scrollbar-corner { diff --git a/Grayjay.Desktop.Web/src/components/containers/ScrollContainer/index.tsx b/Grayjay.Desktop.Web/src/components/containers/ScrollContainer/index.tsx index 3c4fbac9..2b4037f3 100644 --- a/Grayjay.Desktop.Web/src/components/containers/ScrollContainer/index.tsx +++ b/Grayjay.Desktop.Web/src/components/containers/ScrollContainer/index.tsx @@ -40,7 +40,7 @@ const ScrollContainer: Component = (p) => { }); }}>
diff --git a/Grayjay.Desktop.Web/src/components/containers/SettingsContainer/fields/FieldDropDown/index.module.css b/Grayjay.Desktop.Web/src/components/containers/SettingsContainer/fields/FieldDropDown/index.module.css index 74984a29..b6c058ef 100644 --- a/Grayjay.Desktop.Web/src/components/containers/SettingsContainer/fields/FieldDropDown/index.module.css +++ b/Grayjay.Desktop.Web/src/components/containers/SettingsContainer/fields/FieldDropDown/index.module.css @@ -12,7 +12,7 @@ width: 60%; } .descriptor .title { - color: #FFF; + color: var(--white-color); leading-trim: both; text-edge: cap; font-family: Inter; @@ -24,7 +24,7 @@ } .descriptor .description { - color: #8C8C8C; + color: var(--grey-color-4); leading-trim: both; text-edge: cap; font-family: Inter; @@ -45,8 +45,8 @@ .select { border-radius: 8px; - border: 1px solid #2E2E2E; - background: #141414; + border: 1px solid var(--grey-color-6); + background: var(--black-color-1); padding: 14px; - color: white; + color: var(--white-color); } \ No newline at end of file diff --git a/Grayjay.Desktop.Web/src/components/containers/SettingsContainer/fields/FieldGroup/index.module.css b/Grayjay.Desktop.Web/src/components/containers/SettingsContainer/fields/FieldGroup/index.module.css index b7f77841..0aaa8407 100644 --- a/Grayjay.Desktop.Web/src/components/containers/SettingsContainer/fields/FieldGroup/index.module.css +++ b/Grayjay.Desktop.Web/src/components/containers/SettingsContainer/fields/FieldGroup/index.module.css @@ -1,14 +1,14 @@ .container { width: 100%; - border-top: 1px solid #363636; - border-bottom: 1px solid #363636; + border-top: 1px solid var(--grey-color-6); + border-bottom: 1px solid var(--grey-color-6); padding-top: 24px; padding-bottom: 8px; } .header { - color: #FFF; + color: var(--white-color); font-family: Inter; font-size: 20px; font-style: normal; @@ -16,7 +16,7 @@ line-height: 24px; /* 109.091% */ } .description { - color: #8C8C8C; + color: var(--grey-color-4); font-family: Inter; font-size: 14px; font-style: normal; diff --git a/Grayjay.Desktop.Web/src/components/containers/SettingsContainer/fields/FieldKey/index.module.css b/Grayjay.Desktop.Web/src/components/containers/SettingsContainer/fields/FieldKey/index.module.css index 8020659b..2676f233 100644 --- a/Grayjay.Desktop.Web/src/components/containers/SettingsContainer/fields/FieldKey/index.module.css +++ b/Grayjay.Desktop.Web/src/components/containers/SettingsContainer/fields/FieldKey/index.module.css @@ -16,7 +16,7 @@ margin-left: 20px; } .descriptor .title { - color: #FFF; + color: var(--white-color); leading-trim: both; text-edge: cap; font-family: Inter; @@ -31,7 +31,7 @@ margin-bottom: 8px; } .descriptor .description { - color: #8C8C8C; + color: var(--grey-color-4); leading-trim: both; text-edge: cap; font-family: Inter; diff --git a/Grayjay.Desktop.Web/src/components/containers/SettingsContainer/fields/FieldReadOnly/index.module.css b/Grayjay.Desktop.Web/src/components/containers/SettingsContainer/fields/FieldReadOnly/index.module.css index 83e64c4b..9e03041b 100644 --- a/Grayjay.Desktop.Web/src/components/containers/SettingsContainer/fields/FieldReadOnly/index.module.css +++ b/Grayjay.Desktop.Web/src/components/containers/SettingsContainer/fields/FieldReadOnly/index.module.css @@ -13,7 +13,7 @@ } .descriptor .title { - color: #FFF; + color: var(--white-color); leading-trim: both; text-edge: cap; font-family: Inter; @@ -23,7 +23,7 @@ line-height: 24px; /* 133.333% */ } .descriptor .description { - color: #8C8C8C; + color: var(--grey-color-4); leading-trim: both; text-edge: cap; font-family: Inter; diff --git a/Grayjay.Desktop.Web/src/components/containers/SettingsContainer/fields/FieldToggle/index.module.css b/Grayjay.Desktop.Web/src/components/containers/SettingsContainer/fields/FieldToggle/index.module.css index 6c79d836..34215782 100644 --- a/Grayjay.Desktop.Web/src/components/containers/SettingsContainer/fields/FieldToggle/index.module.css +++ b/Grayjay.Desktop.Web/src/components/containers/SettingsContainer/fields/FieldToggle/index.module.css @@ -13,7 +13,7 @@ width: 60%; } .descriptor .title { - color: #FFF; + color: var(--white-color); leading-trim: both; text-edge: cap; font-family: Inter; @@ -23,7 +23,7 @@ line-height: 24px; /* 133.333% */ } .descriptor .description { - color: #8C8C8C; + color: var(--grey-color-4); leading-trim: both; text-edge: cap; font-family: Inter; diff --git a/Grayjay.Desktop.Web/src/components/containers/SettingsContainer/index.module.css b/Grayjay.Desktop.Web/src/components/containers/SettingsContainer/index.module.css index 55f083fd..2bcb7701 100644 --- a/Grayjay.Desktop.Web/src/components/containers/SettingsContainer/index.module.css +++ b/Grayjay.Desktop.Web/src/components/containers/SettingsContainer/index.module.css @@ -7,16 +7,16 @@ } .container::-webkit-scrollbar-thumb { - background-color: #555; + background-color: var(--grey-color-5); border-radius: 5px; } .container::-webkit-scrollbar-thumb:hover { - background-color: #888; + background-color: var(--grey-color-4); } .container::-webkit-scrollbar-track { - background-color: #333; + background-color: var(--grey-color-6); } .container::-webkit-scrollbar-corner { diff --git a/Grayjay.Desktop.Web/src/components/content/CreatorView/index.module.css b/Grayjay.Desktop.Web/src/components/content/CreatorView/index.module.css index 931e657e..dc591313 100644 --- a/Grayjay.Desktop.Web/src/components/content/CreatorView/index.module.css +++ b/Grayjay.Desktop.Web/src/components/content/CreatorView/index.module.css @@ -4,7 +4,7 @@ justify-content: center; align-items: center; border-radius: 8px; - background: #1B1B1B; + background: var(--black-color-2); margin-right: 16px; margin-bottom: 16px; height: calc(100% - 16px); @@ -21,7 +21,7 @@ .name { overflow: hidden; - color: #F0F0F0; + color: var(--grey-color-0); text-align: center; text-wrap: nowrap; text-overflow: ellipsis; @@ -36,7 +36,7 @@ } .metadata { - color: #6a6a6a; + color: var(--grey-color-5); text-align: center; font-feature-settings: 'clig' off, 'liga' off; font-family: Inter; diff --git a/Grayjay.Desktop.Web/src/components/content/LockedContentThumbnailView/index.module.css b/Grayjay.Desktop.Web/src/components/content/LockedContentThumbnailView/index.module.css index fff2232f..4464d3a7 100644 --- a/Grayjay.Desktop.Web/src/components/content/LockedContentThumbnailView/index.module.css +++ b/Grayjay.Desktop.Web/src/components/content/LockedContentThumbnailView/index.module.css @@ -61,13 +61,13 @@ .duration { border-radius: 4px; - background: #000000EE; + background: rgb(from var(--black-color-3) r g b / 0.93); position: absolute; right: 12px; bottom: 12px; - color: #D9D9D9; + color: var(--grey-color-3); padding: 6px 8px; - color: #FFF; + color: var(--white-color); /*leading-trim: both; -NOT SUPPORTED YET BY BROWSERS*/ @@ -85,13 +85,13 @@ position: absolute; right: 12px; bottom: 12px; - color: #D9D9D9; + color: var(--grey-color-3); padding: 6px 8px; padding: 5px 8px; - color: #FFF; + color: var(--white-color); @@ -103,7 +103,7 @@ line-height: normal; - color: #FFF; + color: var(--white-color); font-family: Inter; font-size: 14px; font-style: normal; @@ -112,13 +112,13 @@ } .isPlanned { border-radius: 3px; - background: #222; + background: var(--grey-color-8); position: absolute; right: 12px; bottom: 12px; - color: #D9D9D9; + color: var(--grey-color-3); padding: 6px 8px; - color: #FFF; + color: var(--white-color); @@ -149,7 +149,7 @@ flex-direction: row; margin-top: 6px; font-size: 15px; - color: #979797; + color: var(--grey-color-2); align-items: center; overflow: hidden; } diff --git a/Grayjay.Desktop.Web/src/components/content/NestedMediaThumbnailView/index.module.css b/Grayjay.Desktop.Web/src/components/content/NestedMediaThumbnailView/index.module.css index 698156f1..64e274a2 100644 --- a/Grayjay.Desktop.Web/src/components/content/NestedMediaThumbnailView/index.module.css +++ b/Grayjay.Desktop.Web/src/components/content/NestedMediaThumbnailView/index.module.css @@ -39,13 +39,13 @@ .duration { border-radius: 4px; - background: #000000EE; + background: rgb(from var(--black-color-3) r g b / 0.93); position: absolute; right: 12px; bottom: 12px; - color: #D9D9D9; + color: var(--grey-color-3); padding: 6px 8px; - color: #FFF; + color: var(--white-color); /*leading-trim: both; -NOT SUPPORTED YET BY BROWSERS*/ @@ -63,13 +63,13 @@ position: absolute; right: 12px; bottom: 12px; - color: #D9D9D9; + color: var(--grey-color-3); padding: 6px 8px; padding: 5px 8px; - color: #FFF; + color: var(--white-color); @@ -81,7 +81,7 @@ line-height: normal; - color: #FFF; + color: var(--white-color); font-family: Inter; font-size: 14px; font-style: normal; @@ -90,13 +90,13 @@ } .isPlanned { border-radius: 3px; - background: #222; + background: var(--grey-color-8); position: absolute; right: 12px; bottom: 12px; - color: #D9D9D9; + color: var(--grey-color-3); padding: 6px 8px; - color: #FFF; + color: var(--white-color); @@ -127,7 +127,7 @@ flex-direction: row; margin-top: 6px; font-size: 15px; - color: #979797; + color: var(--grey-color-2); align-items: center; overflow: hidden; } diff --git a/Grayjay.Desktop.Web/src/components/content/PlaylistView/index.module.css b/Grayjay.Desktop.Web/src/components/content/PlaylistView/index.module.css index d470e264..24b8dac6 100644 --- a/Grayjay.Desktop.Web/src/components/content/PlaylistView/index.module.css +++ b/Grayjay.Desktop.Web/src/components/content/PlaylistView/index.module.css @@ -72,7 +72,7 @@ justify-content: center; align-items: center; - color: #8C8C8C; + color: var(--grey-color-4); font-family: Inter; font-size: 14px; font-style: normal; @@ -87,7 +87,7 @@ .metadata { overflow: hidden; - color: #8C8C8C; + color: var(--grey-color-4); leading-trim: both; text-edge: cap; text-overflow: ellipsis; diff --git a/Grayjay.Desktop.Web/src/components/content/PostThumbnailView/index.module.css b/Grayjay.Desktop.Web/src/components/content/PostThumbnailView/index.module.css index b066c72a..e57bfd3f 100644 --- a/Grayjay.Desktop.Web/src/components/content/PostThumbnailView/index.module.css +++ b/Grayjay.Desktop.Web/src/components/content/PostThumbnailView/index.module.css @@ -21,7 +21,7 @@ overflow:hidden; } .descriptionOverlay { - background: linear-gradient(0deg, #141414, #141414, rgba(0, 0, 0, 0.0)); + background: linear-gradient(0deg, var(--black-color-1), var(--black-color-1), rgba(0, 0, 0, 0.0)); width: 100%; position: absolute; bottom: 65px; @@ -51,13 +51,13 @@ .duration { border-radius: 4px; - background: #000000EE; + background: rgb(from var(--black-color-3) r g b / 0.93); position: absolute; right: 12px; bottom: 12px; - color: #D9D9D9; + color: var(--grey-color-3); padding: 6px 8px; - color: #FFF; + color: var(--white-color); /*leading-trim: both; -NOT SUPPORTED YET BY BROWSERS*/ @@ -75,13 +75,13 @@ position: absolute; right: 12px; bottom: 12px; - color: #D9D9D9; + color: var(--grey-color-3); padding: 6px 8px; padding: 5px 8px; - color: #FFF; + color: var(--white-color); @@ -93,7 +93,7 @@ line-height: normal; - color: #FFF; + color: var(--white-color); font-family: Inter; font-size: 14px; font-style: normal; @@ -102,13 +102,13 @@ } .isPlanned { border-radius: 3px; - background: #222; + background: var(--grey-color-8); position: absolute; right: 12px; bottom: 12px; - color: #D9D9D9; + color: var(--grey-color-3); padding: 6px 8px; - color: #FFF; + color: var(--white-color); @@ -139,7 +139,7 @@ flex-direction: row; margin-top: 0px; font-size: 15px; - color: #979797; + color: var(--grey-color-2); align-items: center; overflow: hidden; position: absolute; diff --git a/Grayjay.Desktop.Web/src/components/content/VideoThumbnailView/index.module.css b/Grayjay.Desktop.Web/src/components/content/VideoThumbnailView/index.module.css index a968a744..94924556 100644 --- a/Grayjay.Desktop.Web/src/components/content/VideoThumbnailView/index.module.css +++ b/Grayjay.Desktop.Web/src/components/content/VideoThumbnailView/index.module.css @@ -40,13 +40,13 @@ .duration { border-radius: 4px; - background: #000000EE; + background: rgb(from var(--black-color-3) r g b / 0.93); position: absolute; right: 12px; bottom: 12px; - color: #D9D9D9; + color: var(--grey-color-3); padding: 6px 8px; - color: #FFF; + color: var(--white-color); /*leading-trim: both; -NOT SUPPORTED YET BY BROWSERS*/ @@ -64,13 +64,13 @@ position: absolute; right: 12px; bottom: 12px; - color: #D9D9D9; + color: var(--grey-color-3); padding: 6px 8px; padding: 5px 8px; - color: #FFF; + color: var(--white-color); @@ -82,7 +82,7 @@ line-height: normal; - color: #FFF; + color: var(--white-color); font-family: Inter; font-size: 14px; font-style: normal; @@ -91,13 +91,13 @@ } .isPlanned { border-radius: 3px; - background: #222; + background: var(--grey-color-8); position: absolute; right: 12px; bottom: 12px; - color: #D9D9D9; + color: var(--grey-color-3); padding: 6px 8px; - color: #FFF; + color: var(--white-color); @@ -128,7 +128,7 @@ flex-direction: row; margin-top: 6px; font-size: 15px; - color: #979797; + color: var(--grey-color-2); align-items: center; overflow: hidden; } @@ -176,5 +176,5 @@ } .progressBarProgress { height: 3px; - background-color: #3333FFAA; + background-color: var(--grey-color-6)3FFAA; } \ No newline at end of file diff --git a/Grayjay.Desktop.Web/src/components/contentDetails/PostDetailsView/index.module.css b/Grayjay.Desktop.Web/src/components/contentDetails/PostDetailsView/index.module.css index c81aa0a5..a8f433aa 100644 --- a/Grayjay.Desktop.Web/src/components/contentDetails/PostDetailsView/index.module.css +++ b/Grayjay.Desktop.Web/src/components/contentDetails/PostDetailsView/index.module.css @@ -99,7 +99,7 @@ } .authorName { - color: #FFF; + color: var(--white-color); leading-trim: both; text-edge: cap; font-family: Inter; diff --git a/Grayjay.Desktop.Web/src/components/contentDetails/VideoDetailView/index.module.css b/Grayjay.Desktop.Web/src/components/contentDetails/VideoDetailView/index.module.css index 2fd2152c..82255353 100644 --- a/Grayjay.Desktop.Web/src/components/contentDetails/VideoDetailView/index.module.css +++ b/Grayjay.Desktop.Web/src/components/contentDetails/VideoDetailView/index.module.css @@ -2,7 +2,7 @@ position: absolute; width: 100vw; height: 100vh; - background-color: #171719; + background-color: var(--grey-color-9); display: flex; flex-direction: column; @@ -81,7 +81,7 @@ } .authorName { - color: #FFF; + color: var(--white-color); leading-trim: both; text-edge: cap; font-family: Inter; @@ -115,7 +115,7 @@ } .title { - color: #FFF; + color: var(--white-color); leading-trim: both; text-edge: cap; font-family: Inter; @@ -133,7 +133,7 @@ } .metadata { - color: #8C8C8C; + color: var(--grey-color-4); leading-trim: both; text-edge: cap; font-family: "Inter"; @@ -180,7 +180,7 @@ gap: 8px; box-sizing: border-box; - color: #FFF; + color: var(--white-color); font-family: Inter; font-size: 16px; font-style: normal; @@ -196,7 +196,7 @@ } .description > a { - color: #019BE7; + color: var(--blue-color-1); text-decoration: none; } @@ -211,7 +211,7 @@ padding-top: 24px; border-radius: 12px; - background: rgba(255, 255, 255, 0.03); + background: rgb(from var(--white-color) r g b / 0.03); } .showMoreShowLessFade { @@ -227,7 +227,7 @@ width: 100%; height: 100px; border-radius: 10px; - background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #212122); + background: linear-gradient(to bottom, rgb(from var(--white-color) r g b / 0), var(--grey-color-8)); pointer-events: none; } @@ -242,7 +242,7 @@ left: 0px; position: absolute; width: 100%; - color: #019BE7; + color: var(--blue-color-1); cursor: pointer; } @@ -259,7 +259,7 @@ } .commentHeaderTitle { - color: #F0F0F0; + color: var(--grey-color-0); font-family: Inter; font-size: 28px; @@ -299,8 +299,8 @@ gap: 12px; align-self: stretch; border-radius: 8px; - border: 1px solid #2E2E2E; - background: #212121; + border: 1px solid var(--grey-color-6); + background: var(--grey-color-8); margin-left: 40px; margin-right: 40px; margin-top: 16px; @@ -319,7 +319,7 @@ .recommendationItemTitle { overflow: hidden; - color: #D9D9D9; + color: var(--grey-color-3); text-overflow: ellipsis; font-family: Inter; font-size: 14px; @@ -331,7 +331,7 @@ } .recommendationItemAuthor { - color: #8C8C8C; + color: var(--grey-color-4); font-family: Inter; font-size: 14px; font-style: normal; @@ -351,7 +351,7 @@ .liveChatError { width: 70%; text-align: center; - background-color: #111; + background-color: var(--black-color-1); margin-left: auto; margin-right: auto; margin-top: 20px; diff --git a/Grayjay.Desktop.Web/src/components/contentDetails/VideoDetailView/index.tsx b/Grayjay.Desktop.Web/src/components/contentDetails/VideoDetailView/index.tsx index 041f9c02..1c408dd2 100644 --- a/Grayjay.Desktop.Web/src/components/contentDetails/VideoDetailView/index.tsx +++ b/Grayjay.Desktop.Web/src/components/contentDetails/VideoDetailView/index.tsx @@ -1678,7 +1678,7 @@ const VideoDetailView: Component = (props) => { "z-index": mode() === VideoMode.Theatre ? 2 : undefined }} onClick={() => hideReplies()}> }> -
{ +
{ e.stopPropagation(); e.preventDefault(); }}> @@ -1693,7 +1693,7 @@ const VideoDetailView: Component = (props) => { hideReplies(); e.stopPropagation(); e.preventDefault(); - }} style="width: 32px; height: 32px; border-radius: 50%; background: #2E2E2E; display: flex; align-items: center; justify-content: center; cursor: pointer;"> + }} style="width: 32px; height: 32px; border-radius: 50%; background: var(--grey-color-6); display: flex; align-items: center; justify-content: center; cursor: pointer;">
@@ -1704,7 +1704,7 @@ const VideoDetailView: Component = (props) => { comment={item} onClick={(ev) => handleContainerClick(ev)} style={{ - "background-color": "#2E2E2E", + "background-color": "var(--grey-color-6)", "border-radius": "8px", "overflow": "hidden", "padding-left": "12px", diff --git a/Grayjay.Desktop.Web/src/components/downloads/DownloadedView/index.module.css b/Grayjay.Desktop.Web/src/components/downloads/DownloadedView/index.module.css index 6d282b19..606465de 100644 --- a/Grayjay.Desktop.Web/src/components/downloads/DownloadedView/index.module.css +++ b/Grayjay.Desktop.Web/src/components/downloads/DownloadedView/index.module.css @@ -7,7 +7,7 @@ } .downloadingCard .title { overflow: hidden; - color: #F0F0F0; + color: var(--grey-color-0); leading-trim: both; @@ -24,7 +24,7 @@ text-wrap: nowrap; } .downloadingCard .author { - color: #F0F0F0; + color: var(--grey-color-0); leading-trim: both; @@ -40,7 +40,7 @@ text-overflow: ellipsis; } .downloadingCard .meta { - color: #8C8C8C; + color: var(--grey-color-4); font-family: Inter; font-size: 14px; font-style: normal; @@ -54,18 +54,18 @@ height: auto; aspect-ratio: 16/9; position: relative; - background-color: white; + background-color: var(--white-color); background-size: cover; border-radius: 8px; overflow: hidden; } .downloadingCard .badgeStatus { border-radius: 3px; - background: #000000EE; + background: rgb(from var(--black-color-3) r g b / 0.93); position: absolute; right: 10px; bottom: 10px; - color: #D9D9D9; + color: var(--grey-color-3); text-edge: cap; @@ -77,8 +77,8 @@ padding: 6px 9px; } .downloadingCard .badgeSize { - color: #FFF; - background: #000000EE; + color: var(--white-color); + background: rgb(from var(--black-color-3) r g b / 0.93); border-radius: 3px; leading-trim: both; diff --git a/Grayjay.Desktop.Web/src/components/downloads/DownloadedView/index.tsx b/Grayjay.Desktop.Web/src/components/downloads/DownloadedView/index.tsx index d50c689a..79d09c94 100644 --- a/Grayjay.Desktop.Web/src/components/downloads/DownloadedView/index.tsx +++ b/Grayjay.Desktop.Web/src/components/downloads/DownloadedView/index.tsx @@ -83,7 +83,7 @@ const DownloadedView: Component = (props) => { ) /* return ( -
+
diff --git a/Grayjay.Desktop.Web/src/components/downloads/DownloadingView/index.module.css b/Grayjay.Desktop.Web/src/components/downloads/DownloadingView/index.module.css index ea411653..76edd2a2 100644 --- a/Grayjay.Desktop.Web/src/components/downloads/DownloadingView/index.module.css +++ b/Grayjay.Desktop.Web/src/components/downloads/DownloadingView/index.module.css @@ -5,7 +5,7 @@ justify-content: center; align-items: center; border-radius: 8px; - background: #1B1B1B; + background: var(--black-color-2); margin-right: 12px; margin-bottom: 12px; padding: 12px; @@ -19,7 +19,7 @@ .name { overflow: hidden; - color: #F0F0F0; + color: var(--grey-color-0); text-align: center; text-wrap: nowrap; text-overflow: ellipsis; @@ -33,7 +33,7 @@ } .metadata { - color: #8C8C8C; + color: var(--grey-color-4); text-align: center; font-feature-settings: 'clig' off, 'liga' off; font-family: Inter; @@ -53,7 +53,7 @@ } .downloadingCard .title { overflow: hidden; - color: #F0F0F0; + color: var(--grey-color-0); leading-trim: both; @@ -70,7 +70,7 @@ text-wrap: nowrap; } .downloadingCard .author { - color: #F0F0F0; + color: var(--grey-color-0); leading-trim: both; @@ -86,7 +86,7 @@ text-overflow: ellipsis; } .downloadingCard .meta { - color: #8C8C8C; + color: var(--grey-color-4); font-family: Inter; font-size: 14px; font-style: normal; @@ -118,7 +118,7 @@ position: absolute; right: 10px; bottom: 10px; - color: #D9D9D9; + color: var(--grey-color-3); border-radius:99px; @@ -131,7 +131,7 @@ padding: 8px; } .downloadingCard .badgeSize { - color: #FFF; + color: var(--white-color); background-color: black; border-radius: 3px; @@ -180,7 +180,7 @@ top: 10px; /* padding: 10px; */ width: 15px; - background-color: #111111; + background-color: var(--black-color-1)111; height: 15px; padding: 5px; border-radius: 3px; diff --git a/Grayjay.Desktop.Web/src/components/downloads/DownloadingView/index.tsx b/Grayjay.Desktop.Web/src/components/downloads/DownloadingView/index.tsx index b4a8a50b..5a8e4b7f 100644 --- a/Grayjay.Desktop.Web/src/components/downloads/DownloadingView/index.tsx +++ b/Grayjay.Desktop.Web/src/components/downloads/DownloadingView/index.tsx @@ -167,7 +167,7 @@ const DownloadingView: Component = (props) => { ) /* return ( -
+
diff --git a/Grayjay.Desktop.Web/src/components/menus/Overlays/SettingsMenu/index.module.css b/Grayjay.Desktop.Web/src/components/menus/Overlays/SettingsMenu/index.module.css index 8c2386e1..2fd958c5 100644 --- a/Grayjay.Desktop.Web/src/components/menus/Overlays/SettingsMenu/index.module.css +++ b/Grayjay.Desktop.Web/src/components/menus/Overlays/SettingsMenu/index.module.css @@ -6,7 +6,7 @@ height:auto; z-index:9; max-height: 100%; - background-color: #141414; + background-color: var(--black-color-1); width: 320px; padding: 12px; border-radius: 10px; @@ -14,12 +14,12 @@ scrollbar-width: thin; border-radius: 10px; - border: 1px solid #2E2E2E; - box-shadow: 0px 1.852px 3.148px 0px rgba(0, 0, 0, 0.06), 0px 8.148px 6.519px 0px rgba(0, 0, 0, 0.10), 0px 20px 13px 0px rgba(0, 0, 0, 0.13), 0px 38.519px 25.481px 0px rgba(0, 0, 0, 0.15), 0px 64.815px 46.852px 0px rgba(0, 0, 0, 0.19), 0px 100px 80px 0px rgba(0, 0, 0, 0.25); + border: 1px solid var(--grey-color-6); + box-shadow: 0px 1.852px 3.148px 0px rgb(from var(--black-color-3) r g b / 0.06), 0px 8.148px 6.519px 0px rgb(from var(--black-color-3) r g b / 0.10), 0px 20px 13px 0px rgb(from var(--black-color-3) r g b / 0.13), 0px 38.519px 25.481px 0px rgb(from var(--black-color-3) r g b / 0.15), 0px 64.815px 46.852px 0px rgb(from var(--black-color-3) r g b / 0.19), 0px 100px 80px 0px rgb(from var(--black-color-3) r g b / 0.25); } .title { - color: #FFF; + color: var(--white-color); font-family: "Inter"; leading-trim: both; @@ -42,7 +42,7 @@ padding-right: 15px; } .menuItem .key { - color: #D7D7D7; + color: var(--grey-color-3); font-size: 15px; font-style: normal; font-weight: 400; @@ -52,7 +52,7 @@ font-family: "Inter"; } .menuItem .value { - color: #FFF; + color: var(--white-color); font-size: 15px; width: calc(100% - 180px); text-align: right; @@ -73,10 +73,10 @@ } .menuItem.isGroup:hover { - background-color: rgba(255,255,255,0.1); + background-color: rgb(from var(--white-color) r g b /0.1); } .menuItem.option:hover { - background-color: rgba(255,255,255,0.1); + background-color: rgb(from var(--white-color) r g b /0.1); } .menuItem .expander { position: absolute; @@ -91,7 +91,7 @@ } .menuItem .expander img { height: 100%; - color: #969696; + color: var(--grey-color-2); } .menuItem.isGroup .expander { display: block; @@ -111,7 +111,7 @@ } .menuButton:hover { cursor: pointer; - background-color: rgba(255,255,255,0.1) + background-color: rgb(from var(--white-color) r g b /0.1) } .menuButton .icon { height: 25px; @@ -140,7 +140,7 @@ line-height: 15px; font-size: 14px; margin-top: 5px; - color: #555555; + color: var(--grey-color-5); } .menuToggle { @@ -174,7 +174,7 @@ } .menuToggle .nameContainer .name { - color: #F0F0F0; + color: var(--grey-color-0); font-family: Inter; font-size: 16px; font-style: normal; @@ -187,7 +187,7 @@ } .menuToggle .nameContainer .description { - color: #595959; + color: var(--grey-color-5); font-family: Inter; font-size: 14px; font-style: normal; @@ -219,7 +219,7 @@ } .menuHeader .nameContainer .name { - color: #F0F0F0; + color: var(--grey-color-0); font-family: Inter; font-size: 16px; font-style: normal; @@ -232,7 +232,7 @@ } .menuHeader .nameContainer .description { - color: #595959; + color: var(--grey-color-5); font-family: Inter; font-size: 14px; font-style: normal; diff --git a/Grayjay.Desktop.Web/src/components/menus/Overlays/SettingsMenu/index.tsx b/Grayjay.Desktop.Web/src/components/menus/Overlays/SettingsMenu/index.tsx index 10866ed0..e65ca3a0 100644 --- a/Grayjay.Desktop.Web/src/components/menus/Overlays/SettingsMenu/index.tsx +++ b/Grayjay.Desktop.Web/src/components/menus/Overlays/SettingsMenu/index.tsx @@ -297,7 +297,7 @@ const SettingsMenu: Component = (props: SettingsMenuProps) =>
}> -
+
openGroup(item as IMenuItemGroup)} classList={{[styles.isGroup]: true}}> @@ -316,7 +316,7 @@ const SettingsMenu: Component = (props: SettingsMenuProps) =>
selectOption(item as IMenuItemOption)}>
{(item as IMenuItemOption).name}
diff --git a/Grayjay.Desktop.Web/src/components/menus/SideBar/index.module.css b/Grayjay.Desktop.Web/src/components/menus/SideBar/index.module.css index 516d02e7..7ae6d3ee 100644 --- a/Grayjay.Desktop.Web/src/components/menus/SideBar/index.module.css +++ b/Grayjay.Desktop.Web/src/components/menus/SideBar/index.module.css @@ -1,8 +1,8 @@ .sidebar { width: 260px; height: calc(100vh - 20px); - border-right: #2E2E2E 1px solid; - background: #1B1B1B; + border-right: var(--grey-color-6) 1px solid; + background: var(--black-color-2); padding: 10px; display: flex; flex-direction: column; @@ -44,7 +44,7 @@ flex-direction: column; align-items: center; gap: 4px; - border-top: 1px solid #2E2E2E; + border-top: 1px solid var(--grey-color-6); padding-bottom: 0px; padding-top: 10px; flex-shrink: 0; @@ -80,7 +80,7 @@ flex-direction: row; text-transform: uppercase; letter-spacing: 2.94px; - color: #8C8C8C; + color: var(--grey-color-4); font-size: 14px; cursor: pointer; } @@ -107,7 +107,7 @@ width: 100%; margin-left: 4px; margin-bottom: 8px; - color: #FFF; + color: var(--white-color); font-family: Sen; font-size: 20px; font-style: normal; diff --git a/Grayjay.Desktop.Web/src/components/menus/SideBar/index.tsx b/Grayjay.Desktop.Web/src/components/menus/SideBar/index.tsx index c33b2daf..fe7c3927 100644 --- a/Grayjay.Desktop.Web/src/components/menus/SideBar/index.tsx +++ b/Grayjay.Desktop.Web/src/components/menus/SideBar/index.tsx @@ -332,7 +332,7 @@ const SideBar: Component = (props: SideBarProps) => { ev.preventDefault(); ev.stopPropagation(); }}> -
{topButtons$().slice(visibleTopButtonCount$(), visibleTopButtonCount$() + moreTopButtonCount$()).map(btn => ( = (props) => { return; } } - + if(ev.ctrlKey){ + return; + } switch (ev.key) { case " ": case "k": diff --git a/Grayjay.Desktop.Web/src/components/player/VideoPlayerView/index.module.css b/Grayjay.Desktop.Web/src/components/player/VideoPlayerView/index.module.css index 5944241d..41b48bfd 100644 --- a/Grayjay.Desktop.Web/src/components/player/VideoPlayerView/index.module.css +++ b/Grayjay.Desktop.Web/src/components/player/VideoPlayerView/index.module.css @@ -28,12 +28,12 @@ transform: translateX(-50%); display: flex; background-color: rgba(0,0,0,.7); - border: 1px solid rgba(255,255,255,.15); padding: 6px 12px; + border: 1px solid rgb(from var(--white-color) r g b /.15); border-radius: 30px; font-size: 16px; cursor: pointer; - color: white; + color: var(--white-color); } .loader { diff --git a/Grayjay.Desktop.Web/src/components/player/VideoPlayerView/index.tsx b/Grayjay.Desktop.Web/src/components/player/VideoPlayerView/index.tsx index 94fab7fb..bbb43b17 100644 --- a/Grayjay.Desktop.Web/src/components/player/VideoPlayerView/index.tsx +++ b/Grayjay.Desktop.Web/src/components/player/VideoPlayerView/index.tsx @@ -1065,7 +1065,7 @@ const VideoPlayerView: Component = (props) => { onDblClick={handleDblClick}> (
)}> - +
diff --git a/Grayjay.Desktop.Web/src/components/tooltip/index.tsx b/Grayjay.Desktop.Web/src/components/tooltip/index.tsx index 37489992..3c752c36 100644 --- a/Grayjay.Desktop.Web/src/components/tooltip/index.tsx +++ b/Grayjay.Desktop.Web/src/components/tooltip/index.tsx @@ -57,8 +57,8 @@ const Tooltip = (props: TooltipProps) => { position: 'absolute', top: `${tooltipPosition().top}px`, left: `${tooltipPosition().left}px`, - "background-color": '#333', - color: '#fff', + "background-color": 'var(--grey-color-6)', + color: 'var(--white-color)', padding: '8px 12px', "border-radius": '4px', "font-size": '0.9rem', diff --git a/Grayjay.Desktop.Web/src/components/topbars/SearchBar/index.module.css b/Grayjay.Desktop.Web/src/components/topbars/SearchBar/index.module.css index 501f3d61..b49ea060 100644 --- a/Grayjay.Desktop.Web/src/components/topbars/SearchBar/index.module.css +++ b/Grayjay.Desktop.Web/src/components/topbars/SearchBar/index.module.css @@ -10,15 +10,15 @@ justify-content: center; align-items: flex-start; border-radius: 10px; - border: 1px solid #2E2E2E; - background: #212121; - box-shadow: 0px 100px 80px 0px rgba(0, 0, 0, 0.16), 0px 64.815px 46.852px 0px rgba(0, 0, 0, 0.12), 0px 38.519px 25.481px 0px rgba(0, 0, 0, 0.10), 0px 20px 13px 0px rgba(0, 0, 0, 0.08), 0px 8.148px 6.519px 0px rgba(0, 0, 0, 0.06), 0px 1.852px 3.148px 0px rgba(0, 0, 0, 0.04); + border: 1px solid var(--grey-color-6); + background: var(--grey-color-8); + box-shadow: 0px 100px 80px 0px rgb(from var(--black-color-3) r g b / 0.16), 0px 64.815px 46.852px 0px rgb(from var(--black-color-3) r g b / 0.12), 0px 38.519px 25.481px 0px rgb(from var(--black-color-3) r g b / 0.10), 0px 20px 13px 0px rgb(from var(--black-color-3) r g b / 0.08), 0px 8.148px 6.519px 0px rgb(from var(--black-color-3) r g b / 0.06), 0px 1.852px 3.148px 0px rgb(from var(--black-color-3) r g b / 0.04); box-sizing: border-box; position: absolute; z-index: 1; - color: #D9D9D9; + color: var(--grey-color-3); leading-trim: both; text-edge: cap; font-family: Inter; diff --git a/Grayjay.Desktop.Web/src/components/topbars/SearchBar/index.tsx b/Grayjay.Desktop.Web/src/components/topbars/SearchBar/index.tsx index d07eb8c9..86a41691 100644 --- a/Grayjay.Desktop.Web/src/components/topbars/SearchBar/index.tsx +++ b/Grayjay.Desktop.Web/src/components/topbars/SearchBar/index.tsx @@ -32,7 +32,7 @@ const SearchBar: Component = (props) => { const buttonStyle: JSX.CSSProperties = { "border-radius": "6px", - "border": "1px solid #454545", + "border": "1px solid var(--grey-color-7)", "height": "37px", "padding-left": "16px", "padding-right": "16px", @@ -162,11 +162,11 @@ const SearchBar: Component = (props) => { }} style={props.overlayStyle}>
Choose content type to search
- changeSearchType(e, ContentType.MEDIA)} /> - changeSearchType(e, ContentType.CHANNEL)} /> - changeSearchType(e, ContentType.PLAYLIST)} /> + changeSearchType(e, ContentType.MEDIA)} /> + changeSearchType(e, ContentType.CHANNEL)} /> + changeSearchType(e, ContentType.PLAYLIST)} />
-
+
Your previous searches
diff --git a/Grayjay.Desktop.Web/src/index.css b/Grayjay.Desktop.Web/src/index.css index baf534e3..ad9ca0d6 100644 --- a/Grayjay.Desktop.Web/src/index.css +++ b/Grayjay.Desktop.Web/src/index.css @@ -1,3 +1,59 @@ +:root{ + /* + --white-color: white; + --grey-color-0: hsl(0, 0%, 94%); + --grey-color-3: hsl(0, 0%, 85%); + --grey-color-1: hsl(0, 0%, 75%); + --grey-color-2: hsl(0, 0%, 59%); + --grey-color-4: hsl(0, 0%, 53%); + --grey-color-5: hsl(0, 0%, 33%); + --grey-color-7: hsl(0, 0%, 27%); + --grey-color-6: hsl(0, 0%, 18%); + --grey-color-8: hsl(0, 0%, 13%); + --grey-color-9: hsl(0, 0%, 9%); + --black-color-1: hsl(0, 0%, 8%); + --black-color-2: hsl(0, 0%, 11%); + --black-color-3: hsl(0, 0%, 0%); + --blue-color-1: yellow; #019BE7; + --red-color-1: #550000; + */ + --white-color: hsl(0, 0%, 100%); + --grey-color-0: hsl(0, 0%, 94%); + --grey-color-3: hsl(0, 0%, 85%); + --grey-color-1: hsl(0, 0%, 75%); + --grey-color-2: hsl(0, 0%, 55%); + --grey-color-4: hsl(0, 0%, 55%); + --grey-color-5: hsl(0, 0%, 30%); + --grey-color-7: hsl(0, 0%, 30%); + --grey-color-6: hsl(0, 0%, 18%); + --grey-color-8: hsl(0, 0%, 10%); + --grey-color-9: hsl(0, 0%, 10%); + --black-color-1: hsl(0, 0%, 10%); + --black-color-2: hsl(0, 0%, 10%); + --black-color-3: hsl(0, 0%, 0%); + --blue-color-1: hsl(200, 99%, 45%); + --red-color-1: #550000; +} +@media (prefers-color-scheme: light){ + :root{ + --white-color: hsl(0, 0%, 0%); + --grey-color-0: hsl(0, 0%, 5%); + --grey-color-3: hsl(0, 0%, 15%); + --grey-color-1: hsl(0, 0%, 25%); + --grey-color-2: hsl(0, 0%, 45%); + --grey-color-4: hsl(0, 0%, 45%); + --grey-color-5: hsl(0, 0%, 70%); + --grey-color-7: hsl(0, 0%, 70%); + --grey-color-6: hsl(0, 0%, 80%); + --grey-color-8: hsl(0, 0%, 80%); + --grey-color-9: hsl(0, 0%, 80%); + --black-color-1: hsl(0, 0%, 100%); + --black-color-2: hsl(0, 0%, 90%); + --black-color-3: hsl(0, 0%, 100%); + --blue-color-1: hsl(200, 99%, 45%); + --red-color-1: #550000; + } +} body { font-family: Inter; font-size: 16px; @@ -7,9 +63,9 @@ body { margin: 0; height: 100vh; width: 100vw; - background-color: #141414; - color: white; - user-select: none; + background-color: var(--black-color-1); + color: var(--white-color); + /* user-select: none; */ overflow: hidden; } @@ -47,11 +103,11 @@ code { flex-grow: 1; max-height: 100vh; overflow: hidden; - background-color: #141414; + background-color: var(--black-color-1); } .icon { - color: white; + color: var(--white-color); } img { diff --git a/Grayjay.Desktop.Web/src/overlays/OverlayCustomDialog/index.module.css b/Grayjay.Desktop.Web/src/overlays/OverlayCustomDialog/index.module.css index 59272da3..0313cdaa 100644 --- a/Grayjay.Desktop.Web/src/overlays/OverlayCustomDialog/index.module.css +++ b/Grayjay.Desktop.Web/src/overlays/OverlayCustomDialog/index.module.css @@ -16,8 +16,8 @@ position: relative; padding: 32px; border-radius: 12px; - border: 1px solid #2E2E2E; - background: #141414; + border: 1px solid var(--grey-color-6); + background: var(--black-color-1); box-shadow: 0px 1.648px 3.148px 0px rgba(0, 0, 0, 0.10), 0px 7.252px 6.519px 0px rgba(0, 0, 0, 0.16), 0px 17.8px 13px 0px rgba(0, 0, 0, 0.21), 0px 34.281px 25.481px 0px rgba(0, 0, 0, 0.26), 0px 57.685px 46.852px 0px rgba(0, 0, 0, 0.32), 0px 89px 80px 0px rgba(0, 0, 0, 0.42); } @@ -36,7 +36,7 @@ width: 40px; height: 40px; border-radius: 48px; - background: #2E2E2E; + background: var(--grey-color-6); cursor: pointer; z-index: 9999 } diff --git a/Grayjay.Desktop.Web/src/overlays/OverlayDialog/index.module.css b/Grayjay.Desktop.Web/src/overlays/OverlayDialog/index.module.css index 68faa9ee..10e8a4d2 100644 --- a/Grayjay.Desktop.Web/src/overlays/OverlayDialog/index.module.css +++ b/Grayjay.Desktop.Web/src/overlays/OverlayDialog/index.module.css @@ -15,8 +15,8 @@ display: flex; border-radius: 12px; - border: 1px solid #2E2E2E; - background: #141414; + border: 1px solid var(--grey-color-6); + background: var(--black-color-1); box-sizing: border-box; box-shadow: 0px 1.167px 3.148px 0px rgba(0, 0, 0, 0.07), 0px 5.133px 6.519px 0px rgba(0, 0, 0, 0.12), 0px 12.6px 13px 0px rgba(0, 0, 0, 0.16), 0px 24.267px 25.481px 0px rgba(0, 0, 0, 0.19), 0px 40.833px 46.852px 0px rgba(0, 0, 0, 0.24), 0px 63px 80px 0px rgba(0, 0, 0, 0.31); } @@ -37,7 +37,7 @@ } .title { - color: #FFF; + color: var(--white-color); font-family: Inter; font-size: 24px; font-style: normal; @@ -46,7 +46,7 @@ text-align: center; } .description { - color: #8C8C8C; + color: var(--grey-color-4); text-align: center; leading-trim: both; @@ -80,15 +80,15 @@ border-radius: 6px; cursor: pointer; border-radius: 8px; - border: 1px solid #2E2E2E; + border: 1px solid var(--grey-color-6); font-size: 16px; } .button.none { - color: #ffffff; + color: var(--white-color); } .button.primary { - background: #019BE7; + background: var(--blue-color-1); } .button.accent { background: #F97066; @@ -120,16 +120,16 @@ } .code::-webkit-scrollbar-thumb { - background-color: #555; + background-color: var(--grey-color-5); border-radius: 5px; } .code::-webkit-scrollbar-thumb:hover { - background-color: #888; + background-color: var(--grey-color-4); } .code::-webkit-scrollbar-track { - background-color: #333; + background-color: var(--grey-color-6); } .code::-webkit-scrollbar-corner { @@ -139,7 +139,7 @@ .addLabel { margin-left: 10px; - color: #FFF; + color: var(--white-color); font-feature-settings: 'clig' off, 'liga' off; font-family: Inter; font-size: 16px; diff --git a/Grayjay.Desktop.Web/src/overlays/OverlayDialogLoader/index.module.css b/Grayjay.Desktop.Web/src/overlays/OverlayDialogLoader/index.module.css index 9624bdad..610d818f 100644 --- a/Grayjay.Desktop.Web/src/overlays/OverlayDialogLoader/index.module.css +++ b/Grayjay.Desktop.Web/src/overlays/OverlayDialogLoader/index.module.css @@ -9,8 +9,8 @@ text-align: center; border-radius: 12px; - border: 1px solid #2E2E2E; - background: #141414; + border: 1px solid var(--grey-color-6); + background: var(--black-color-1); box-shadow: 0px 1.167px 3.148px 0px rgba(0, 0, 0, 0.07), 0px 5.133px 6.519px 0px rgba(0, 0, 0, 0.12), 0px 12.6px 13px 0px rgba(0, 0, 0, 0.16), 0px 24.267px 25.481px 0px rgba(0, 0, 0, 0.19), 0px 40.833px 46.852px 0px rgba(0, 0, 0, 0.24), 0px 63px 80px 0px rgba(0, 0, 0, 0.31); } @@ -21,7 +21,7 @@ } .title { - color: #FFF; + color: var(--white-color); leading-trim: both; @@ -34,7 +34,7 @@ text-align: center; } .description { - color: #8C8C8C; + color: var(--grey-color-4); text-align: center; leading-trim: both; @@ -65,10 +65,10 @@ border-radius: 6px; } .button.none { - color: #019BE7; + color: var(--blue-color-1); } .button.primary { - background: #019BE7; + background: var(--blue-color-1); } .button.accent { background: #F97066; diff --git a/Grayjay.Desktop.Web/src/overlays/OverlayDownloadDialog/index.module.css b/Grayjay.Desktop.Web/src/overlays/OverlayDownloadDialog/index.module.css index 921928a7..c566c44d 100644 --- a/Grayjay.Desktop.Web/src/overlays/OverlayDownloadDialog/index.module.css +++ b/Grayjay.Desktop.Web/src/overlays/OverlayDownloadDialog/index.module.css @@ -7,8 +7,8 @@ padding-right: 20px; padding-bottom: 20px; border-radius: 12px; - border: 1px solid #2E2E2E; - background: #141414; + border: 1px solid var(--grey-color-6); + background: var(--black-color-1); box-shadow: 0px 1.648px 3.148px 0px rgba(0, 0, 0, 0.10), 0px 7.252px 6.519px 0px rgba(0, 0, 0, 0.16), 0px 17.8px 13px 0px rgba(0, 0, 0, 0.21), 0px 34.281px 25.481px 0px rgba(0, 0, 0, 0.26), 0px 57.685px 46.852px 0px rgba(0, 0, 0, 0.32), 0px 89px 80px 0px rgba(0, 0, 0, 0.42); max-height: calc(100% - 24px); box-sizing: border-box; @@ -42,7 +42,7 @@ width: 40px; height: 40px; border-radius: 48px; - background: #2E2E2E; + background: var(--grey-color-6); cursor: pointer; } .closeButton img { @@ -56,7 +56,7 @@ max-height: 50vh; overflow-y: auto; scrollbar-width: thin; - scrollbar-color: #555 #333; + scrollbar-color: var(--grey-color-5) var(--grey-color-6); } .source { @@ -84,7 +84,7 @@ overflow: hidden; font-size: 12px; text-overflow: ellipsis; - color: #8C8C8C + color: var(--grey-color-4) } .source.hasSubs .meta { display: hidden; @@ -107,13 +107,13 @@ .source.enabled { border-radius: 4px; - background: rgba(255, 255, 255, 0.04); + background: rgb(from var(--white-color) r g b / 0.04); } .source.enabled img { display: block; } .source.enabled .name { - color: #F0F0F0; + color: var(--grey-color-0); font-weight: 600; } diff --git a/Grayjay.Desktop.Web/src/overlays/OverlayDownloadDialog/index.tsx b/Grayjay.Desktop.Web/src/overlays/OverlayDownloadDialog/index.tsx index 118fa452..a624a365 100644 --- a/Grayjay.Desktop.Web/src/overlays/OverlayDownloadDialog/index.tsx +++ b/Grayjay.Desktop.Web/src/overlays/OverlayDownloadDialog/index.tsx @@ -219,7 +219,7 @@ const OverlayDownloadDialog: Component = (props: Ove
-
+
-
+
-
+
-
+
-
+
0}>
-
+
); }; diff --git a/Grayjay.Desktop.Web/src/pages/Channel/index.module.css b/Grayjay.Desktop.Web/src/pages/Channel/index.module.css index e09081fb..496f186f 100644 --- a/Grayjay.Desktop.Web/src/pages/Channel/index.module.css +++ b/Grayjay.Desktop.Web/src/pages/Channel/index.module.css @@ -46,7 +46,7 @@ left: 0; width: 100%; height: 100%; - background-image: linear-gradient(to bottom, #141414DB, #141414 100%); + background-image: linear-gradient(to bottom, var(--black-color-1)DB, var(--black-color-1) 100%); } .containerActions { @@ -79,7 +79,7 @@ } .creatorName { - color: #FFF; + color: var(--white-color); font-family: Inter; font-size: 28px; font-style: normal; @@ -89,7 +89,7 @@ } .creatorMetadata { - color: #8C8C8C; + color: var(--grey-color-4); font-family: Inter; font-size: 14px; font-style: normal; @@ -99,7 +99,7 @@ } .creatorDescription { - color: #8C8C8C; + color: var(--grey-color-4); font-family: Inter; font-size: 14px; font-style: normal; @@ -134,7 +134,7 @@ margin-top: 30px; margin-left: auto; margin-right: auto; - background-color: #111; + background-color: var(--black-color-1); border-radius: 5px; } @@ -158,7 +158,7 @@ font-weight: bold; } .aboutMeta { - color: #8C8C8C; + color: var(--grey-color-4); font-family: Inter; font-size: 15px; font-style: normal; diff --git a/Grayjay.Desktop.Web/src/pages/Channel/index.tsx b/Grayjay.Desktop.Web/src/pages/Channel/index.tsx index a92304d1..dafb23eb 100644 --- a/Grayjay.Desktop.Web/src/pages/Channel/index.tsx +++ b/Grayjay.Desktop.Web/src/pages/Channel/index.tsx @@ -262,7 +262,7 @@ const ChannelPage: Component = () => {
-
+
Failed to load channel
diff --git a/Grayjay.Desktop.Web/src/pages/Creators/index.tsx b/Grayjay.Desktop.Web/src/pages/Creators/index.tsx index b1d5653b..3216a963 100644 --- a/Grayjay.Desktop.Web/src/pages/Creators/index.tsx +++ b/Grayjay.Desktop.Web/src/pages/Creators/index.tsx @@ -136,7 +136,7 @@ const CreatorsPage: Component = () => { showClearButton={true} inputContainerStyle={{ "height": "70px", - "background": "#141414" + "background": "var(--black-color-1)" }} onTextChanged={(v) => { setFilterText(v); @@ -190,7 +190,7 @@ const CreatorsPage: Component = () => { { icon: iconSearch, title: "Search Creators", - color: "#019BE7", + color: "var(--blue-color-1)", action: ()=>{navigate("/web/search?type=" + ContentType.CHANNEL)} } ]} /> diff --git a/Grayjay.Desktop.Web/src/pages/Downloads/index.module.css b/Grayjay.Desktop.Web/src/pages/Downloads/index.module.css index befc5901..b18fa442 100644 --- a/Grayjay.Desktop.Web/src/pages/Downloads/index.module.css +++ b/Grayjay.Desktop.Web/src/pages/Downloads/index.module.css @@ -27,7 +27,7 @@ .storageContainer { border-radius: var(--Corner-radius-80, 8px); border: 1px solid #262626; - background: #1B1B1B; + background: var(--black-color-2); margin: 24px; padding-left: 24px; padding-right: 24px; @@ -44,7 +44,7 @@ } .storageContainer .sizeCurrent { display: inline-block; - color: #FFF; + color: var(--white-color); leading-trim: both; @@ -58,7 +58,7 @@ } .storageContainer .sizeTotal { display: inline-block; - color: #FFF; + color: var(--white-color); font-family: Inter; font-size: 18px; @@ -85,7 +85,7 @@ .storageContainer .storageIndicator { border-radius: 99px; - background: rgba(255, 255, 255, 0.06); + background: rgb(from var(--white-color) r g b / 0.06); height: 4px; width: 100%; margin-top: 16px; @@ -104,7 +104,7 @@ text-overflow: ellipsis; margin-top: 19px; vertical-align: top; - color: #9c9c9c; + color: var(--grey-color-2); font-family: Inter; font-size: 14px; @@ -118,7 +118,7 @@ .storageContainer .storagePath .tooltip { display: none; position: absolute; - background-color: #333; + background-color: var(--grey-color-6); padding: 5px; margin-top: 5px; margin-left: -100px; @@ -151,7 +151,7 @@ margin-left: 5px; vertical-align: top; - color: rgba(255, 255, 255, 0.60); + color: rgb(from var(--white-color) r g b / 0.60); leading-trim: both; @@ -224,14 +224,14 @@ padding-right: 8px; align-items: center; border-radius: 6px; - border: 1px solid #454545; + border: 1px solid var(--grey-color-7); font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: 22px; /* 157.143% */ - background: #212121; - color: white; + background: var(--grey-color-8); + color: var(--white-color); } @@ -240,9 +240,9 @@ margin: 4px; padding: 10px 20px; border-radius: 6px; - background: #141414; - border: 1px solid #2E2E2E; - color: white; + background: var(--black-color-1); + border: 1px solid var(--grey-color-6); + color: var(--white-color); text-align: center; leading-trim: both; @@ -262,8 +262,8 @@ } .exportButton { - border: 1px solid #2E2E2E; + border: 1px solid var(--grey-color-6); - color: #D9D9D9; + color: var(--grey-color-3); cursor: pointer; } \ No newline at end of file diff --git a/Grayjay.Desktop.Web/src/pages/Downloads/index.tsx b/Grayjay.Desktop.Web/src/pages/Downloads/index.tsx index fd0d33e8..c03e4b8e 100644 --- a/Grayjay.Desktop.Web/src/pages/Downloads/index.tsx +++ b/Grayjay.Desktop.Web/src/pages/Downloads/index.tsx @@ -512,7 +512,7 @@ const DownloadsPage: Component = () => { const video = useVideo(); let scrollContainerRef: HTMLDivElement | undefined; return ( - +
@@ -639,7 +639,7 @@ const DownloadsPage: Component = () => { { icon: searchIcon, title: "Search Videos", - color: "#019BE7", + color: "var(--blue-color-1)", action: ()=>{navigate("/web/search?type=" + ContentType.MEDIA)} } ]} /> diff --git a/Grayjay.Desktop.Web/src/pages/History/index.module.css b/Grayjay.Desktop.Web/src/pages/History/index.module.css index 1466218f..76372a7c 100644 --- a/Grayjay.Desktop.Web/src/pages/History/index.module.css +++ b/Grayjay.Desktop.Web/src/pages/History/index.module.css @@ -5,7 +5,7 @@ } .title { - color: #FFF; + color: var(--white-color); leading-trim: both; text-edge: cap; @@ -24,7 +24,7 @@ display: -webkit-box; -webkit-line-clamp: 2; /* Number of lines you want to display before truncating */ -webkit-box-orient: vertical; - color: #F0F0F0; + color: var(--grey-color-0); font-family: Inter; font-size: 16px; font-style: normal; @@ -35,7 +35,7 @@ } .authorTitle { - color: #a3a3a3; + color: var(--grey-color-1); leading-trim: both; text-edge: cap; font-family: Inter; @@ -47,7 +47,7 @@ } .authorMetadata { - color: #6a6a6a; + color: var(--grey-color-5); leading-trim: both; text-edge: cap; font-family: Inter; @@ -63,7 +63,7 @@ display: flex; flex-direction: row; height: 100%; - border-top: 1px solid #2e2e2e; + border-top: 1px solid var(--grey-color-6); align-items: center; padding-top: 16px; padding-bottom: 16px; diff --git a/Grayjay.Desktop.Web/src/pages/History/index.tsx b/Grayjay.Desktop.Web/src/pages/History/index.tsx index 509f3668..85322cd5 100644 --- a/Grayjay.Desktop.Web/src/pages/History/index.tsx +++ b/Grayjay.Desktop.Web/src/pages/History/index.tsx @@ -187,7 +187,7 @@ const HistoryPage: Component = () => { style={{ "width": "300px", }} inputContainerStyle={{ - "background-color": "#212121" + "background-color": "var(--grey-color-8)" }} onTextChanged={(newVal) => setQuery(newVal)} icon={ic_search} diff --git a/Grayjay.Desktop.Web/src/pages/Playlist/index.module.css b/Grayjay.Desktop.Web/src/pages/Playlist/index.module.css index 5e13946b..637f494f 100644 --- a/Grayjay.Desktop.Web/src/pages/Playlist/index.module.css +++ b/Grayjay.Desktop.Web/src/pages/Playlist/index.module.css @@ -1,12 +1,12 @@ .container { display: flex; flex-direction: column; - margin-top: 24px; + margin-top: 20px; height: calc(100% - 24px); } .header { - color: #FFF; + color: var(--white-color); leading-trim: both; text-edge: cap; font-family: Inter; @@ -17,7 +17,7 @@ } .metadata { - color: rgba(255, 255, 255, 0.60); + color: rgb(from var(--white-color) r g b / 0.60); leading-trim: both; text-edge: cap; font-family: Inter; @@ -69,7 +69,7 @@ -webkit-line-clamp: 2; flex: 1 0 0; overflow: hidden; - color: #F0F0F0; + color: var(--grey-color-0); leading-trim: both; text-edge: cap; text-overflow: ellipsis; diff --git a/Grayjay.Desktop.Web/src/pages/Playlists/index.module.css b/Grayjay.Desktop.Web/src/pages/Playlists/index.module.css index 5c80dbd1..045210ce 100644 --- a/Grayjay.Desktop.Web/src/pages/Playlists/index.module.css +++ b/Grayjay.Desktop.Web/src/pages/Playlists/index.module.css @@ -6,7 +6,7 @@ } .textHeader { - color: #FFF; + color: var(--white-color); leading-trim: both; text-edge: cap; font-family: Inter; @@ -49,7 +49,7 @@ padding-bottom: 16px; cursor: pointer; - color: #FFF; + color: var(--white-color); text-align: center; leading-trim: both; text-edge: cap; @@ -61,7 +61,7 @@ line-height: 140%; /* 19.6px */ border-radius: 6px; - border: 1px solid #2E2E2E; + border: 1px solid var(--grey-color-6); } .containerPlaylists { diff --git a/Grayjay.Desktop.Web/src/pages/Playlists/index.tsx b/Grayjay.Desktop.Web/src/pages/Playlists/index.tsx index 145d878c..4cd07c71 100644 --- a/Grayjay.Desktop.Web/src/pages/Playlists/index.tsx +++ b/Grayjay.Desktop.Web/src/pages/Playlists/index.tsx @@ -263,7 +263,7 @@ const PlaylistsPage: Component = () => { showClearButton={true} inputContainerStyle={{ "height": "70px", - "background": "#141414" + "background": "var(--black-color-1)" }} onTextChanged={(v) => { setFilterText(v); @@ -326,7 +326,7 @@ const PlaylistsPage: Component = () => { { icon: icon_add, title: "Create Playlist", - color: "#019BE7", + color: "var(--blue-color-1)", action: ()=>{createPlaylist()} } ]} /> diff --git a/Grayjay.Desktop.Web/src/pages/RemotePlaylist/index.module.css b/Grayjay.Desktop.Web/src/pages/RemotePlaylist/index.module.css index 5e13946b..69c29abc 100644 --- a/Grayjay.Desktop.Web/src/pages/RemotePlaylist/index.module.css +++ b/Grayjay.Desktop.Web/src/pages/RemotePlaylist/index.module.css @@ -6,7 +6,7 @@ } .header { - color: #FFF; + color: var(--white-color); leading-trim: both; text-edge: cap; font-family: Inter; @@ -17,7 +17,7 @@ } .metadata { - color: rgba(255, 255, 255, 0.60); + color: rgb(from var(--white-color) r g b / 0.60); leading-trim: both; text-edge: cap; font-family: Inter; @@ -69,7 +69,7 @@ -webkit-line-clamp: 2; flex: 1 0 0; overflow: hidden; - color: #F0F0F0; + color: var(--grey-color-0); leading-trim: both; text-edge: cap; text-overflow: ellipsis; diff --git a/Grayjay.Desktop.Web/src/pages/Search/index.module.css b/Grayjay.Desktop.Web/src/pages/Search/index.module.css index eec9cd2f..d3507a93 100644 --- a/Grayjay.Desktop.Web/src/pages/Search/index.module.css +++ b/Grayjay.Desktop.Web/src/pages/Search/index.module.css @@ -44,8 +44,8 @@ flex-direction: column; align-items: flex-start; border-radius: 12px; - border: 1px solid #454545; - background: #141414; + border: 1px solid var(--grey-color-7); + background: var(--black-color-1); box-shadow: 0px 100px 80px 0px rgba(0, 0, 0, 0.12), 0px 64.815px 46.852px 0px rgba(0, 0, 0, 0.09), 0px 38.519px 25.481px 0px rgba(0, 0, 0, 0.07), 0px 20px 13px 0px rgba(0, 0, 0, 0.06), 0px 8.148px 6.519px 0px rgba(0, 0, 0, 0.05), 0px 1.852px 3.148px 0px rgba(0, 0, 0, 0.03); min-width: 400px; width: 60%; @@ -54,7 +54,7 @@ } .filtersDialogTitle { - color: #FFF; + color: var(--white-color); leading-trim: both; text-edge: cap; font-family: Inter; @@ -65,7 +65,7 @@ } .filterHeader { - color: #D9D9D9; + color: var(--grey-color-3); leading-trim: both; text-edge: cap; font-family: Inter; diff --git a/Grayjay.Desktop.Web/src/pages/Search/index.tsx b/Grayjay.Desktop.Web/src/pages/Search/index.tsx index 00710e12..5ff9f7e2 100644 --- a/Grayjay.Desktop.Web/src/pages/Search/index.tsx +++ b/Grayjay.Desktop.Web/src/pages/Search/index.tsx @@ -163,7 +163,7 @@ const SearchPage: Component = () => { performSearch(v, sortBy$(), filterValues$(), enabledSources$()); }} /> - setFiltersDialogVisible(true)} /> + setFiltersDialogVisible(true)} />
diff --git a/Grayjay.Desktop.Web/src/pages/Settings/index.module.css b/Grayjay.Desktop.Web/src/pages/Settings/index.module.css index 2c3cc7df..ea58951d 100644 --- a/Grayjay.Desktop.Web/src/pages/Settings/index.module.css +++ b/Grayjay.Desktop.Web/src/pages/Settings/index.module.css @@ -15,7 +15,7 @@ flex-direction: column; } .settingsMenuItem { - color: rgba(255, 255, 255, 0.60); + color: rgb(from var(--white-color) r g b / 0.60); height: 46px; border-radius: 6px; font-family: Inter; @@ -33,7 +33,7 @@ .settingsMenuItem:hover { - color: rgba(255, 255, 255, 0.60); + color: rgb(from var(--white-color) r g b / 0.60); height: 46px; border-radius: 6px; font-family: Inter; @@ -50,8 +50,8 @@ .settingsMenuItem.active { - color: #FFF; - background: rgba(255, 255, 255, 0.105); + color: var(--white-color); + background: rgb(from var(--white-color) r g b / 0.105); padding-left: 16px; height: 46px; font-family: Inter; diff --git a/Grayjay.Desktop.Web/src/pages/Sources/index.module.css b/Grayjay.Desktop.Web/src/pages/Sources/index.module.css index 752cb5b1..e72e44c8 100644 --- a/Grayjay.Desktop.Web/src/pages/Sources/index.module.css +++ b/Grayjay.Desktop.Web/src/pages/Sources/index.module.css @@ -1,7 +1,7 @@ .pageTitle { - color: #FFF; + color: var(--white-color); leading-trim: both; text-edge: cap; font-family: Inter; @@ -39,14 +39,14 @@ position: relative; width: calc(100% - 40px); height: 80px; - background-color: #111; + background-color: var(--black-color-1); overflow: hidden; margin-left: 24px; border-radius: 8px; - border-bottom: 1px solid #1B1B1B; + border-bottom: 1px solid var(--black-color-2); } .source.enabled { - background-color: #222; + background-color: var(--grey-color-8); } .source .thumb { @@ -65,7 +65,7 @@ font-family: "Inter"; line-height: 24px; overflow: hidden; - color: white; + color: var(--white-color); leading-trim: both; text-edge: cap; text-overflow: ellipsis; @@ -99,7 +99,7 @@ height: 30px; text-align:center; background-color: #444; - color: white; + color: var(--white-color); border: 0px; border-radius: 20px; } diff --git a/Grayjay.Desktop.Web/src/pages/Sources/index.tsx b/Grayjay.Desktop.Web/src/pages/Sources/index.tsx index 453d1d19..2e9a6c77 100644 --- a/Grayjay.Desktop.Web/src/pages/Sources/index.tsx +++ b/Grayjay.Desktop.Web/src/pages/Sources/index.tsx @@ -175,11 +175,11 @@ const SourcesPage: Component = () => {
diff --git a/Grayjay.Desktop.Web/src/pages/Subscriptions/index.module.css b/Grayjay.Desktop.Web/src/pages/Subscriptions/index.module.css index c50d38f7..add9add6 100644 --- a/Grayjay.Desktop.Web/src/pages/Subscriptions/index.module.css +++ b/Grayjay.Desktop.Web/src/pages/Subscriptions/index.module.css @@ -33,7 +33,7 @@ overflow-y: none; white-space: nowrap; scrollbar-width: thin; - scrollbar-color: #555 #333; + scrollbar-color: var(--grey-color-5) var(--grey-color-6); } .channel { @@ -46,16 +46,16 @@ vertical-align: top; padding: 12px 8px; border-radius: 8px; - background: #1B1B1B; + background: var(--black-color-2); text-align: center; border: 1px solid transparent; } .channel.active { border: 1px solid #4D4D4D; - background: #1B1B1B; + background: var(--black-color-2); } .channel.active .channelText { - color: white; + color: var(--white-color); } .channelImg { width: 60px; @@ -65,7 +65,7 @@ margin-top: 3px; } .channelText { - color: #989898; + color: var(--grey-color-2); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; @@ -92,7 +92,7 @@ right: 20px; height: 20px; width: 20px; - background-color: white; + background-color: var(--white-color); border-radius: 20px; } @@ -124,7 +124,7 @@ border-radius: 5px; width: 80px; height: 80px; - background-color: #222; + background-color: var(--grey-color-8); cursor: pointer; } .subGroupExpand img { @@ -138,7 +138,7 @@ border-radius: 6px; border: 1px solid rgba(173, 32, 220, 0.13); - background: #1B1B1B; + background: var(--black-color-2); width: 170px; height: 80px; overflow: hidden; @@ -185,7 +185,7 @@ bottom: 10px; left: 18px; overflow: hidden; - color: #FFF; + color: var(--white-color); leading-trim: both; @@ -208,10 +208,8 @@ justify-content: center; align-items: center; overflow: hidden; - color: #FFF; - + color: var(--white-color); leading-trim: both; - text-edge: cap; text-overflow: ellipsis; white-space: nowrap; @@ -233,17 +231,17 @@ width: 56px; padding: 8px 24px; border-radius: 6px; - border: 1px solid #454545; + border: 1px solid var(--grey-color-7); margin-right: 8px; - background: #1B1B1B; + background: var(--black-color-2); } .filter.active { - border: 1px solid #454545; - background: #2E2E2E; + border: 1px solid var(--grey-color-7); + background: var(--grey-color-6); } .filter .name { - color: #555555; + color: var(--grey-color-5)555; text-align: center; leading-trim: both; @@ -256,7 +254,7 @@ line-height: 140%; /* 19.6px */ } .filter.active .name { - color: white !important; + color: var(--white-color) !important; } .subgroupBanner { @@ -282,7 +280,7 @@ flex-grow: 1; } .subgroupBanner .bannerTitle { - color: #FFF; + color: var(--white-color); font-family: Inter; font-size: 24px; font-style: normal; @@ -291,7 +289,7 @@ padding-bottom: 12px; } .subgroupBanner .bannerDescription { - color: rgba(255, 255, 255, 0.6); + color: rgb(from var(--white-color) r g b / 0.6); font-family: Inter; font-size: 16px; font-style: normal; @@ -313,7 +311,7 @@ } .noSubs .title { margin-top: 10px; - color: #FFF; + color: var(--white-color); text-align: center; font-family: Inter; @@ -324,7 +322,7 @@ } .noSubs .description { margin-top: 10px; - color: #8C8C8C; + color: var(--grey-color-4); text-align: center; font-family: Inter; font-size: 20px; diff --git a/Grayjay.Desktop.Web/src/pages/Subscriptions/index.tsx b/Grayjay.Desktop.Web/src/pages/Subscriptions/index.tsx index a649584a..2073c3f3 100644 --- a/Grayjay.Desktop.Web/src/pages/Subscriptions/index.tsx +++ b/Grayjay.Desktop.Web/src/pages/Subscriptions/index.tsx @@ -343,7 +343,7 @@ const SubscriptionsPage: Component = () => {
}
newSubscriptionGroup()}> -
+
New Group
@@ -395,7 +395,7 @@ const SubscriptionsPage: Component = () => { { icon: iconSearch, title: "Search Creators", - color: "#019BE7", + color: "var(--blue-color-1)", action: ()=>{navigate("/web/search?type=" + ContentType.CHANNEL)} } ]} /> diff --git a/Grayjay.Desktop.Web/src/pages/Sync/index.module.css b/Grayjay.Desktop.Web/src/pages/Sync/index.module.css index b2976df5..8aee21a8 100644 --- a/Grayjay.Desktop.Web/src/pages/Sync/index.module.css +++ b/Grayjay.Desktop.Web/src/pages/Sync/index.module.css @@ -9,8 +9,8 @@ padding-right: 20px; padding-bottom: 20px; border-radius: 12px; - border: 1px solid #2E2E2E; - background: #141414; + border: 1px solid var(--grey-color-6); + background: var(--black-color-1); box-shadow: 0px 1.648px 3.148px 0px rgba(0, 0, 0, 0.10), 0px 7.252px 6.519px 0px rgba(0, 0, 0, 0.16), 0px 17.8px 13px 0px rgba(0, 0, 0, 0.21), 0px 34.281px 25.481px 0px rgba(0, 0, 0, 0.26), 0px 57.685px 46.852px 0px rgba(0, 0, 0, 0.32), 0px 89px 80px 0px rgba(0, 0, 0, 0.42); } @@ -45,7 +45,7 @@ width: 40px; height: 40px; border-radius: 48px; - background: #2E2E2E; + background: var(--grey-color-6); cursor: pointer; } .closeButton img { @@ -60,7 +60,7 @@ overflow-y: auto; max-height: 800px; scrollbar-width: thin; - scrollbar-color: #555 #333; + scrollbar-color: var(--grey-color-5) var(--grey-color-6); } .source { @@ -88,7 +88,7 @@ overflow: hidden; font-size: 12px; text-overflow: ellipsis; - color: #8C8C8C + color: var(--grey-color-4) } .source.hasSubs .meta { display: hidden; @@ -111,13 +111,13 @@ .source.enabled { border-radius: 4px; - background: rgba(255, 255, 255, 0.04); + background: rgb(from var(--white-color) r g b / 0.04); } .source.enabled img { display: block; } .source.enabled .name { - color: #F0F0F0; + color: var(--grey-color-0); font-weight: 600; } @@ -135,9 +135,9 @@ align-items: flex-start; overflow: hidden; border-radius: var(--Corner-radius-80, 8px); - border: 1px solid #454545; - background: #1B1B1B; - color: white; + border: 1px solid var(--grey-color-7); + background: var(--black-color-2); + color: var(--white-color); font-family: Inter; font-size: 16px; font-style: normal; diff --git a/Grayjay.Desktop.Web/src/pages/Sync/index.tsx b/Grayjay.Desktop.Web/src/pages/Sync/index.tsx index d479d4f2..71c4460b 100644 --- a/Grayjay.Desktop.Web/src/pages/Sync/index.tsx +++ b/Grayjay.Desktop.Web/src/pages/Sync/index.tsx @@ -41,16 +41,16 @@ const SyncPage: Component = () => { break; } - return (
+ return (
-
{title}
-
{subtitle}
+
{title}
+
{subtitle}
-
+
-
{status}
+
{status}
await SyncBackend.removeDevice(publicKey)} />
); @@ -73,7 +73,7 @@ const SyncPage: Component = () => {
Please enable sync to use this feature - { + { const s = StateGlobal.settings$(); if (s == null) { return; diff --git a/Grayjay.Desktop.Web/src/pages/WatchLater/index.module.css b/Grayjay.Desktop.Web/src/pages/WatchLater/index.module.css index af763e2d..531f7972 100644 --- a/Grayjay.Desktop.Web/src/pages/WatchLater/index.module.css +++ b/Grayjay.Desktop.Web/src/pages/WatchLater/index.module.css @@ -6,7 +6,7 @@ } .header { - color: #FFF; + color: var(--white-color); leading-trim: both; text-edge: cap; font-family: Inter; @@ -17,7 +17,7 @@ } .metadata { - color: rgba(255, 255, 255, 0.60); + color: rgb(from var(--white-color) r g b / 0.60); leading-trim: both; text-edge: cap; font-family: Inter; @@ -69,7 +69,7 @@ -webkit-line-clamp: 2; flex: 1 0 0; overflow: hidden; - color: #F0F0F0; + color: var(--grey-color-0); text-overflow: ellipsis; font-family: Inter; font-size: 16px; diff --git a/Grayjay.Desktop.Web/src/pages/subpages/SourceDetails/index.module.css b/Grayjay.Desktop.Web/src/pages/subpages/SourceDetails/index.module.css index 6155ebf9..85d03eca 100644 --- a/Grayjay.Desktop.Web/src/pages/subpages/SourceDetails/index.module.css +++ b/Grayjay.Desktop.Web/src/pages/subpages/SourceDetails/index.module.css @@ -10,7 +10,7 @@ .header .icon{ height: 80px; width: 80px; - background-color: #1d1d1d; + background-color: var(--grey-color-9); border-radius: 14px; position: relative; flex-shrink: 0; @@ -29,7 +29,7 @@ } .header .descriptor .title{ - color: #FFF; + color: var(--white-color); font-family: "Inter"; leading-trim: both; text-edge: cap; @@ -41,7 +41,7 @@ margin-bottom: 2px; } .header .descriptor .description { - color: #8C8C8C; + color: var(--grey-color-4); font-family: "Inter"; leading-trim: both; text-edge: cap; @@ -53,7 +53,7 @@ margin-bottom: 10px; } .header .descriptor .meta { - color: #FFF; + color: var(--white-color); leading-trim: both; text-edge: cap; font-family: Inter; @@ -63,7 +63,7 @@ line-height: normal; } .header .descriptor .meta > a { - color: #019BE7; + color: var(--blue-color-1); text-decoration: none; }