diff --git a/manifest/chrome-manifest-extra.json b/manifest/chrome-manifest-extra.json index 20ab269d..8c1fa586 100644 --- a/manifest/chrome-manifest-extra.json +++ b/manifest/chrome-manifest-extra.json @@ -32,7 +32,11 @@ "icons/logo-64.png", "icons/logo-128.png", "icons/logo-256.png", - "icons/logo-2r.svg" + "icons/logo-2r.svg", + "icons/logo-casual.svg", + "icons/close.png", + "icons/add.svg", + "icons/remove.svg" ], "matches": [""] }], diff --git a/manifest/manifest-v2-extra.json b/manifest/manifest-v2-extra.json index 02403652..d408c9ba 100644 --- a/manifest/manifest-v2-extra.json +++ b/manifest/manifest-v2-extra.json @@ -14,7 +14,11 @@ "icons/logo-64.png", "icons/logo-128.png", "icons/logo-256.png", - "icons/logo-2r.svg" + "icons/logo-2r.svg", + "icons/logo-casual.svg", + "icons/close.png", + "icons/add.svg", + "icons/remove.svg" ], "permissions": [ "https://sponsor.ajay.app/*", diff --git a/public/_locales b/public/_locales index 1853c78f..eb92858b 160000 --- a/public/_locales +++ b/public/_locales @@ -1 +1 @@ -Subproject commit 1853c78fc2f7206d6041d65dee598b8c68191b48 +Subproject commit eb92858b64249acf2f94790106af5c9a532b567b diff --git a/public/casual.css b/public/casual.css new file mode 100644 index 00000000..93cf6628 --- /dev/null +++ b/public/casual.css @@ -0,0 +1,217 @@ +.embed [data-type="react-CasualChoiceComponent"] { + display: none; +} + +.casualChoiceContainer { + display: flex; + flex-direction: column; + align-items: center; + padding: 20px; + font-size: 14px; + --container-gap: 20px; + gap: var(--container-gap); + color: #dfdfdf; + + height: auto; + + border-radius: 10px; + border-width: 10px; + border: solid; + + width: 300px; + cursor: pointer; + + transition: border-color ease-in-out 0.2s, background-color ease-in-out 0.2s; +} + +.casualChoiceContainer.casualMode { + border-color: rgba(121, 215, 152, 0.5); +} +.casualChoiceContainer.casualMode.selected { + border-color: rgba(121, 215, 152, 1); + background-color: rgba(0, 118, 31, 0.2); +} + +.casualChoiceContainer.classicMode { + border-color: rgba(136, 201, 249, 0.5); +} +.casualChoiceContainer.classicMode.selected { + border-color: rgba(136, 201, 249, 1); + background-color: rgba(18, 19, 189, 0.2); +} + +.casualChoiceTitle { + font-size: 24px; + font-weight: bold; +} + +.casualChoiceLogo { + padding-left: 35%; + padding-right: 35%; + + box-sizing: border-box; +} + +.casualChoiceDescription { + font-size: 14px; +} + +.casualChoiceDescription div { + margin-top: 10px; + margin-bottom: 10px; + line-height: 1.3; +} +.casualChoiceDescription div:first-child { + margin-top: 0px; +} +.casualChoiceDescription div:last-child { + margin-bottom: 0px; +} + +.casualChoicesContainer { + display: flex; + justify-content: center; + gap: 10%; + max-width: 800px; +} + +.casualChoiceCategories { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + --container-gap: 20px; + gap: var(--container-gap); + width: 100%; +} + +.casualChoiceContainer:not(.selected) .casualChoiceCategories { + display: none; +} + +.casualCategoryPill { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + + cursor: default; + width: 80%; + border-radius: 25px; + background-color: rgba(121, 215, 152, 0.5); + + position: relative; +} + +.casualCategoryPillContent { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 5px; + + width: 100%; + + padding: 5px; + font-size: 16px; +} + +.addButton { + width: 25px; + height: 25px; + font-size: 20px; + background-color: rgba(121, 215, 152, 0.5); + cursor: pointer; +} + +.minimumVotes { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 5px; +} + +.minimumVotesText { + font-size: 11px; + opacity: 0.8; +} + +.minimumVotesButton { + border: solid 1px; + cursor: pointer; + + --font-size: 14px; + + font-size: var(--font-size); + width: var(--font-size); + height: var(--font-size); + + display: flex; + justify-content: center; + align-items: center; + line-height: 1; + + border-radius: 100%; +} + +.casualCategoryPill .closeButton { + cursor: pointer; + position: absolute; + right: 5px; + + padding: 5px; +} + +.casualCategorySelectionAnchor { + position: relative; + width: 100%; + + /* Undo gap */ + margin-top: calc(var(--container-gap) * -1); +} + +.casualCategorySelectionParent { + position: absolute; + background-color: rgba(28, 28, 28, 0.9); + padding: 5px; + border-radius: 25px; + + top: 5px; + left: 0; + right: 0; + width: fit-content; + margin: auto; +} + +.casualCategorySelection { + font-size: 14px; + padding: 5px; + margin: 10px; + + border-radius: 25px; + text-align: center; +} + +[data-theme="light"] .casualCategorySelection { + color: white; +} + +.casualCategorySelection:hover { + background-color: rgba(235, 235, 235, 0.2); +} + +.casualChoicesContainer input:checked + .sb-slider { + background-color: rgba(121, 215, 152, 0.5); +} + +.casualChoicesContainer .sb-switch-container { + width: 100%; + display: flex; + + --sb-slider-color: #495c49; +} + +.casualChoicesContainer .sb-switch-container .sb-switch-label { + text-align: center; +} \ No newline at end of file diff --git a/public/content.css b/public/content.css index 55551d1a..d8b0963e 100644 --- a/public/content.css +++ b/public/content.css @@ -4,6 +4,7 @@ --skip-notice-margin: 5px; --cb-forground-button-color: #0e79cac2; + --cb-foreground-button-disabled-color: #0e78ca63; } .cbCustomThumbnailCanvas.ytd-img-shadow:not(.ytp-autonav-endscreen-upnext-thumbnail, .ytp-videowall-still-image) { @@ -185,6 +186,13 @@ ytd-compact-playlist-renderer .ytd-compact-playlist-renderer #video-title:not(.c --sb-grey-bg-color: #64646470; } +.casualVoteMenuInner { + padding: 10px; + + --cb-forground-button-color: #1a6c30; + --cb-foreground-button-disabled-color: #00380f; +} + .cbThumbnailImg { width: 100%; @@ -379,7 +387,7 @@ ytd-compact-playlist-renderer .ytd-compact-playlist-renderer #video-title:not(.c .cbNoticeButton:disabled { cursor: default; - background-color: #0e78ca63 !important; + background-color: var(--cb-foreground-button-disabled-color) !important; } .cbNoticeButton { @@ -397,7 +405,6 @@ ytd-compact-playlist-renderer .ytd-compact-playlist-renderer #video-title:not(.c } .cbNoticeButton:hover { - background-color: rgba(235, 235, 235, 0.2); background-color: #0e78ca; } @@ -496,8 +503,14 @@ ytd-compact-playlist-renderer .ytd-compact-playlist-renderer #video-title:not(.c height: 24px; border: 2px solid #bfbfc0; border-radius: 50%; - transition: all 0.2s ease; - } + transition: all 0.2s ease, visibility 0s; +} +.cbChecklistBox.cbSquare input { + border-radius: 3px; +} +.cbChecklistBox.cbNoAnim input:checked { + background: var(--cb-forground-button-color); +} .cbChecklistBox:hover input { border-color: #b0b0b1; } @@ -529,9 +542,9 @@ ytd-compact-playlist-renderer .ytd-compact-playlist-renderer #video-title:not(.c stroke-linejoin: round; stroke-dasharray: 19; stroke-dashoffset: 19; - transition: all 0.4s ease; + transition: all 0.4s ease, visibility 0s; } -.cbChecklistBox input:checked + label { +.cbChecklistBox:not(.cbNoAnim) input:checked + label { animation: splash 0.6s ease forwards; } .cbChecklistBox input:checked + label + svg path { @@ -606,7 +619,7 @@ ytd-compact-playlist-renderer .ytd-compact-playlist-renderer #video-title:not(.c filter: grayscale(1); } -.cbShowOriginal img.cbAutoFormat:not(.cbOriginalShown) { +.cbShowOriginal img.cbAutoFormat:not(.cbOriginalShown), .cbShowOriginal img.cbCasualTitle:not(.cbOriginalShown) { filter: saturate(0.5); } @@ -625,20 +638,83 @@ ytd-compact-playlist-renderer .ytd-compact-playlist-renderer #video-title:not(.c display: inline !important; } -.cbMobileButton.cbSubmitButton { +.cbMobileButton.cbTitleButton { margin-right: 0; } -.cbSubmitButton svg { +.cbTitleButton svg { fill: var(--yt-spec-text-primary); display: block; } -.cbShowOriginal img.cbShowOriginalImage, .cbSubmitButton svg { +.cbShowOriginal img.cbShowOriginalImage, .cbTitleButton svg { /* Max height also set in js */ height: 20px; } +.cbCasualVoteButton { + margin-right: 0; +} + +.cbCasualVoteTitle { + font-size: 22px; + + display: flex; + justify-content: center; + align-items: center; +} + +.cbCasualVoteTitleLogo { + height: 25px; + padding: 5px; +} + +.cbCasualVoteOriginalTitle { + font-size: 18px; + text-align: center; + margin: 5px; +} + +.cbCasualYesOrNo { + display: flex; + justify-content: space-around; +} + +.cbCasualVoteLogoContainer { + display: flex; + justify-content: center; +} + +.cbCasualVoteLogoContainer img { + width: 50%; +} + +.cbCasualVoteDescription { + font-size: 14px; + padding-left: 15px; + padding-right: 15px; +} + +.cbCasualVoteDescription > div { + padding: 5px; +} + +.cbCasualVoteDescription a { + color: inherit; +} + +.casualOnboarding .cbVoteButton { + font-size: 18px; +} + +.casualVoteMenuInner .cbNoticeButton:hover { + background-color: #22893e; +} + +.casualOnboarding .cbCasualVoteTitle { + padding-top: 10px; +} + /* For autoplay */ .ytp-autonav-endscreen-video-info .cbShowOriginal img.cbShowOriginalImage { height: 18px; diff --git a/public/help.css b/public/help.css index 0229c2e5..044cbe8d 100644 --- a/public/help.css +++ b/public/help.css @@ -171,7 +171,7 @@ p, li, a, span, -div { +div:not(.casualChoicesContainer *) { color: var(--text); } @@ -397,4 +397,9 @@ svg { .redeem-box { margin-bottom: 10px; +} + +.casualChoicesContainer { + margin-top: 10px; + margin-bottom: 10px; } \ No newline at end of file diff --git a/public/help.html b/public/help.html index 06ee2285..57c2ad7b 100644 --- a/public/help.html +++ b/public/help.html @@ -1,6 +1,8 @@ + + diff --git a/public/icons/add.svg b/public/icons/add.svg new file mode 100644 index 00000000..6390aad5 --- /dev/null +++ b/public/icons/add.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/icons/logo-casual.svg b/public/icons/logo-casual.svg new file mode 100644 index 00000000..b6b6739e --- /dev/null +++ b/public/icons/logo-casual.svg @@ -0,0 +1 @@ + diff --git a/public/icons/remove.svg b/public/icons/remove.svg new file mode 100644 index 00000000..dfeef4db --- /dev/null +++ b/public/icons/remove.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/options/options.css b/public/options/options.css index bc70bca4..31f28c96 100644 --- a/public/options/options.css +++ b/public/options/options.css @@ -377,13 +377,6 @@ input[type='number'] { width: inherit; } -.sb-switch { - position: relative; - display: inline-block; - width: 40px; - height: 24px; -} - .sb-switch input { opacity: 0; width: 0; diff --git a/public/options/options.html b/public/options/options.html index 250cecfe..6da94cf5 100644 --- a/public/options/options.html +++ b/public/options/options.html @@ -8,6 +8,8 @@ + + @@ -72,6 +74,8 @@