diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..b98a9e6 --- /dev/null +++ b/.gitignore @@ -0,0 +1,5 @@ +node_modules/ +release/ +package.json +yarn.lock + diff --git a/Makefile b/Makefile new file mode 100644 index 0000000..c8faec5 --- /dev/null +++ b/Makefile @@ -0,0 +1,24 @@ +S=./node_modules/.bin/sass +SFLAGS= + +all: eSixCafe eSixCafeStylus + +eSixCafe: + mkdir -p release/ + ${S} ${SFLAGS} src/eSixCafe.scss release/eSixCafe.css + +eSixCafeStylus: + mkdir -p release/ + +clean: + rm -f release/eSixCafe.css + rm -f release/eSixCafe.user.css + +setup: + yarn add sass@1.42.1 + +setup-clean: + rm -rf node_modules + rm -f package.json + rm -f yarn.lock + diff --git a/release/eSixCafe.user.css b/release/eSixCafe.user.css deleted file mode 100644 index e53a910..0000000 --- a/release/eSixCafe.user.css +++ /dev/null @@ -1,5209 +0,0 @@ -/* ==UserStyle== -@name eSix Café -@namespace mandorinn -@version 2.2.1 -@description A muted and easy on the eyes style for e621. Big credits to Faucet for the bug reports so far, thank you! -@author mandorinn [(www.mandorinn.dev)], faucet [(https://e621.net/users/601225)] -@preprocessor stylus - -@var select themep "Theme Pack" { - "Muted": "muted", - "Classic": "classic", - "Popular": "pThemes" -} -@var select roundness "Profile picture shape" { - "Circle":"circle", - "Square":"square" -} -@var checkbox buttons "Comment Buttons" 1 -@var checkbox borderRank "Name Rank Border Colors ⚠️" 1 - - -==/UserStyle== */ - - -/* Search 'Styling starts now' to skip to content */ - - -@-moz-document domain("e621.net"), domain("e926.net") { - /* e621.net */ - -if roundness == square { - :root { - --avatar-border-radius: 2.5%; - } - .avatar .post-thumbnail { - background-color: var(--elements-highlight); - } -} -if roundness == circle { - :root { - --avatar-border-radius: 50%; - } -} - - -if themep == muted { - :root { - --themeName: "Classic blue"; - --thin-scrollbar: var(--true); - --main-page-background: url(https://static1.e621.net/data/09/f8/09f84e1224df7b3502456589dd75c0c3.jpg)!important; - --artist-credit: "Background by Tom Fischbach"; - --main-font: Segoe UI, Arial; - --bg-300: #364758; - --bg-400: #2c3946; - --bg: #232e38; - --bg-visiting: rgba(200,200,200,1); - --bg-visiting-transition: 100ms; - --bg-editing-transition: 100ms; - --bg-visiting-hover:rgba(255,255,255,1); - --bg-editing: #a0d2d4; - --bg-editing-hover: #a6fffc; - --base-text: #c3ccd4; - --base-text-hover: #d3ddd3; - --base-text-faded: #c3ccd47a; - --base-link: #7bb1bd; - --base-link-hover: #a5eefe; - --header-link: #c3ccd4; - --header-link-hover: #d3ddd3; - --content-link:#BD7BA2; - --content-link-hover:#e493c3; - --header-link-transition: 100ms; - --header-link-editing-transition:100ms; - --header-link-visiting: #232e38; - --header-link-editing: #2c3946; - --header-link-editing-hover: #232e38; - --nav-hover-top-color:#c3ccd4; - --nav-hover-bottom-color: #c3ccd4; - --bg-image: #232e38; - --deleted-bg: #232323; - --deleted-text: #d2d2d2; - --blacklisted-bg: #6e4848; - --blacklisted-text: #d2d2d2; - /*--bg-image: linear-gradient(to right top, #6d327c, #485DA6, #00a1ba, #00BF98, #36C486);*/ - --actions-fav-true:#be7aa1; - --flagged: #6e4848; - --elements-highlight: #BD7BA2; - --mode-edit:#534738; - --mode-add-fav:#36583a; - --mode-remove-fav:#583636; - --mode-blacklist:#171c22; - --mode-download: #553658; - --mode-fullscreen: #365857; - --tag-cat-1:#7cb2bd; - --tag-cat-1-hover:#96d8e5; - --tag-cat-2:#bd987e; - --tag-cat-2-hover:#f2c3a2; - --tag-cat-3:#be7aa1; - --tag-cat-3-hover:#f79fd1; - --tag-cat-4:#7bbe92; - --tag-cat-4-hover:#99eab5; - --tag-cat-5:#c5c387; - --tag-cat-5-hover:#efeda4; - --tag-cat-6:#be7d7d; - --tag-cat-6-hover:#f6a2a2; - --tag-cat-7:#d8e1e9; - --tag-cat-7-hover:#eef7ff; - --tag-cat-8: #60a979; - --tag-cat-8-hover: #93efb3; - --user-member: var(--base-text); - --user-member-hover: var(--base-text-hover); - --user-privileged: #93c190; - --user-privileged-hover: #b0e7ad; - --user-contributor: #93c190; - --user-contributor: #b0e7ad; - --user-admin:#cc946d; - --user-admin-hover: #eeae82; - --user-moderator:#7dafd8; - --user-moderator-hover: #8fc8f7; - --user-former-staff: #6cd5aa; - --user-former-staff-hover: #7ff7c6; - --user-janitor: #7dafd8; - --user-janitor-hover: #8fc8f7; - --user-banned: #d46969; - --user-banned-hover: #ef7676; - --favorite-button: #538163; - --favorite-button-hover: #6dab83; - --remove-favorite: #936060; - --remove-favorite-hover: #bf7e7e; - --warn-button: #a07658; - --warn-button-hover: #e5aa80; - --button-color: #232e38; - --button-color-hover: #2c3946; - --button-text: #c3ccd4; - --button-text-hover: #c3ccd4; - --button-text-hover-secondary: #fff; - --true: thin; - scrollbar-width: var(--thin-scrollbar); - scrollbar-color: #3c3c3c #222; - } - body[data-th-main="pony"] { - --themeName: "Pony"; - --bg-300: #604a67; - --bg-400: #55425a; - --bg: #4b3a50; - --bg-visiting: #ffe4e9; - --bg-visiting-hover:#f6eaec; - --bg-editing: #d4a0ab; - --bg-editing-hover: #ffa6c2; - --base-text: #d4c3cc; - --base-text-hover: #d3ddd3; - --base-text-faded: #d4c3cc7a; - --base-link: #b485cd; - --base-link-hover: #e9a5fe; - --header-link: #d4c3cb; - --header-link-hover: #d3ddd3; - --content-link:#7bbda5; - --content-link-hover:#8dd9bd; - --header-link-visiting: #38232b; - --header-link-editing: #462c34; - --header-link-editing-hover: #38232b; - --nav-hover-top-color:#d4c3cd; - --nav-hover-bottom-color: #d4c3cb; - --bg-image: #38232e; - --deleted-bg: #232323; - --deleted-text: #d2d2d2; - --blacklisted-bg: #6e4848; - --blacklisted-text: #d2d2d2; - /*--bg-image: linear-gradient(to right top, #6d327c, #485DA6, #00a1ba, #00BF98, #36C486);*/ - --actions-fav-true:#a87abe; - --flagged: #6e4854; - --elements-highlight: #7bbda5; - --mode-edit:#534738; - --mode-add-fav:#36583a; - --mode-remove-fav:#583636; - --mode-blacklist:#171c22; - --mode-download: #553658; - --mode-fullscreen: #365857; - --tag-cat-1:#c590b6; - --tag-cat-1-hover:#e6a8cf; - --tag-cat-2:#bd987e; - --tag-cat-2-hover:#f2c3a2; - --tag-cat-3:#7abebe; - --tag-cat-3-hover:#9ff7ee; - --tag-cat-4:#7bbe92; - --tag-cat-4-hover:#99eab5; - --tag-cat-5:#c5c387; - --tag-cat-5-hover:#efeda4; - --tag-cat-6:#be7d7d; - --tag-cat-6-hover:#f6a2a2; - --tag-cat-7:#d8e1e9; - --tag-cat-7-hover:#eef7ff; - --tag-cat-8: #60a979; - --tag-cat-8-hover: #93efb3; - --user-member: var(--base-text); - --user-member-hover: var(--base-text-hover); - --user-privileged: #93c190; - --user-privileged-hover: #b0e7ad; - --user-contributor: #93c190; - --user-contributor: #b0e7ad; - --user-admin:#cc946d; - --user-admin-hover: #eeae82; - --user-moderator:#7dafd8; - --user-moderator-hover: #8fc8f7; - --user-former-staff: #6cd5aa; - --user-former-staff-hover: #7ff7c6; - --user-janitor: #7dafd8; - --user-janitor-hover: #8fc8f7; - --user-banned: #d46969; - --user-banned-hover: #ef7676; - --favorite-button: #538163; - --favorite-button-hover: #6dab83; - --remove-favorite: #936060; - --remove-favorite-hover: #bf7e7e; - --warn-button: #a07658; - --warn-button-hover: #e5aa80; - --button-color: #232e38; - --button-color-hover: #2c3946; - --button-text: #c3ccd4; - --button-text-hover: #c3ccd4; - --button-text-hover-secondary: #fff; - } - body[data-th-main="bloodlust"] { - --themeName: "Discord-esque"; - --bg-300: #36393e; - --bg-400: #282b30; - --bg: #1e2124; - --bg-visiting: #f3f3f3; - --bg-visiting-hover:#f0f0f0; - --bg-editing: #be4343; - --bg-editing-hover: #c62929; - --base-text: #e1e1e1; - --base-text-hover: #e3e3e3; - --base-text-faded: #e1e1e17a; - --base-link: #c39cc5; - --base-link-hover: #ffc9fe; - --header-link: #dedede; - --header-link-hover: #e3e3e3; - --content-link:#bd7b7b; - --content-link-hover:#e49393; - --header-link-visiting: #382323; - --header-link-editing: #462c2c; - --header-link-editing-hover: #382323; - --nav-hover-top-color:#d1d1d1; - --nav-hover-bottom-color: #d1d1d1; - --bg-image: #2f2f2f; - --deleted-bg: #232323; - --deleted-text: #d2d2d2; - --blacklisted-bg: #6e4848; - --blacklisted-text: #d2d2d2; - /*--bg-image: linear-gradient(to right top, #6d327c, #485DA6, #00a1ba, #00BF98, #36C486);*/ - --actions-fav-true:#b4be7a; - --flagged: #6e4848; - --elements-highlight: #ff79c6; - --mode-edit:#534738; - --mode-add-fav:#36583a; - --mode-remove-fav:#583636; - --mode-blacklist:#000; - --mode-download: #553658; - --mode-fullscreen: #365857; - --tag-cat-1:#c17777; - --tag-cat-1-hover:#d79090; - --tag-cat-2:#be7f53; - --tag-cat-2-hover:#f8a66d; - --tag-cat-3:#51c2c2; - --tag-cat-3-hover:#6ffbec; - --tag-cat-4:#50be76; - --tag-cat-4-hover:#60f593; - --tag-cat-5:#c9c659; - --tag-cat-5-hover:#f5f26b; - --tag-cat-6:#bb5d9e; - --tag-cat-6-hover:#f657c3; - --tag-cat-7:#dee1e4; - --tag-cat-7-hover:#eef4f8; - --tag-cat-8: #60a979; - --tag-cat-8-hover: #93efb3; - --user-member: var(--base-text); - --user-member-hover: var(--base-text-hover); - --user-privileged: #93c190; - --user-privileged-hover: #b0e7ad; - --user-contributor: #93c190; - --user-contributor-hover: #b0e7ad; - --user-admin:#cc946d; - --user-admin-hover: #eeae82; - --user-moderator:#7dafd8; - --user-moderator-hover: #8fc8f7; - --user-former-staff: #6cd5aa; - --user-former-staff-hover: #7ff7c6; - --user-janitor: #7dafd8; - --user-janitor-hover: #8fc8f7; - --user-banned: #d46969; - --user-banned-hover: #ef7676; - --favorite-button: #47895f; - --favorite-button-hover: #71d594; - --remove-favorite: #a95454; - --remove-favorite-hover: #e07373; - --warn-button: #a07658; - --warn-button-hover: #e5aa80; - --button-color: #232e38; - --button-color-hover: #2c3946; - --button-text: #c3ccd4; - --button-text-hover: #c3ccd4; - --button-text-hover-secondary: #fff; - } - body[data-th-main="serpent"] { - --themeName: "Forest"; - --bg-300: #3e5341; - --bg-400: #354535; - --bg: #2f382e; - --bg-visiting: #dadada; - --bg-visiting-hover: #fff; - --bg-editing: #a0d2d4; - --bg-editing-hover: #a6fffc; - --base-text: #c3d4c6; - --base-text-hover: #d3ddd3; - --base-text-faded: #c3ccd47a; - --base-link: #bdbd7b; - --base-link-hover: #fafea5; - --header-link: #c3ccd4; - --header-link-hover: #d3ddd3; - --content-link:#dcdc8f; - --content-link-hover:#fafea5; - --header-link-visiting: #232e38; - --header-link-editing: #2c3946; - --header-link-editing-hover: #232e38; - --nav-hover-top-color:#c3ccd4; - --nav-hover-bottom-color: #c3ccd4; - --bg-image: #273823; - --deleted-bg: #232323; - --deleted-text: #d2d2d2; - --blacklisted-bg: #6e4848; - --blacklisted-text: #d2d2d2; - /*--bg-image: linear-gradient(to right top, #6d327c, #485DA6, #00a1ba, #00BF98, #36C486);*/ - --actions-fav-true:#be7a7a; - --flagged: #6e4848; - --elements-highlight: #bdab7b; - --mode-edit:#534738; - --mode-add-fav:#36583a; - --mode-remove-fav:#583636; - --mode-blacklist:#171c22; - --mode-download: #553658; - --mode-fullscreen: #365857; - --tag-cat-1:#7cbdab; - --tag-cat-1-hover:#96e5cc; - --tag-cat-2:#bd987e; - --tag-cat-2-hover:#f2c3a2; - --tag-cat-3:#be7aa1; - --tag-cat-3-hover:#f79fd1; - --tag-cat-4:#7bbe92; - --tag-cat-4-hover:#99eab5; - --tag-cat-5:#c5c387; - --tag-cat-5-hover:#efeda4; - --tag-cat-6:#be7d7d; - --tag-cat-6-hover:#f6a2a2; - --tag-cat-7:#d8e1e9; - --tag-cat-7-hover:#eef7ff; - --tag-cat-8: #60a979; - --tag-cat-8-hover: #93efb3; - --user-member: var(--base-text); - --user-member-hover: var(--base-text-hover); - --user-privileged: #93c190; - --user-privileged-hover: #b0e7ad; - --user-contributor: #93c190; - --user-contributor-hover: #b0e7ad; - --user-admin:#cc946d; - --user-admin-hover: #eeae82; - --user-moderator:#7dafd8; - --user-moderator-hover: #8fc8f7; - --user-former-staff: #6cd5aa; - --user-former-staff-hover: #7ff7c6; - --user-janitor: #7dafd8; - --user-janitor-hover: #8fc8f7; - --user-banned: #d46969; - --user-banned-hover: #ef7676; - --favorite-button: #538163; - --favorite-button-hover: #6dab83; - --remove-favorite: #936060; - --remove-favorite-hover: #bf7e7e; - --warn-button: #a07658; - --warn-button-hover: #e5aa80; - --button-color: #253823; - --button-color-hover: #2f462c; - --button-text: #c3ccd4; - --button-text-hover: #c3ccd4; - --button-text-hover-secondary: #fff; - --true: thin; - scrollbar-width: var(--thin-scrollbar); - } - body[data-th-main="hotdog"] { - --themeName: "Hot Coffee"; - --bg-300: #3c3836; - --bg-400: #323232; - --bg: #282828; - --bg-visiting: #f0cfc0; - --bg-visiting-hover:#ffdccd; - --bg-editing: #a1a0d4; - --bg-editing-hover: #a6beff; - --base-text: #d6bbae; - --base-text-hover: #f0cfc0; - --base-text-faded: #d6bbae7a; - --base-link: #f7e7df; - --base-link-hover: #fffaf8; - --header-link: #d6bbae; - --header-link-hover: #f0cfc0; - --content-link: #75a6b8; - --content-link-hover: #8ac3da; - --header-link-visiting: #474341; - --header-link-editing: #474341; - --header-link-editing-hover: #615c59; - --nav-hover-top-color:#d6bbae; - --nav-hover-bottom-color: #d6bbae; - --bg-image: #38232e; - --deleted-bg: #232323; - --deleted-text: #d2d2d2; - --blacklisted-bg: #6e4848; - --blacklisted-text: #d2d2d2; - /*--bg-image: linear-gradient(to right top, #6d327c, #485DA6, #00a1ba, #00BF98, #36C486);*/ - --actions-fav-true:#a87abe; - --flagged: #6e4848; - --elements-highlight: #7bbcbd; - --mode-edit:#534738; - --mode-add-fav:#36583a; - --mode-remove-fav:#583636; - --mode-blacklist:#171c22; - --mode-download: #553658; - --mode-fullscreen: #365857; - --tag-cat-1:#bdb1ac; - --tag-cat-1-hover:#d6bbae; - --tag-cat-2:#bb8864; - --tag-cat-2-hover:#e7a87d; - --tag-cat-3:#7abebe; - --tag-cat-3-hover:#9ff7ee; - --tag-cat-4:#7bbe92; - --tag-cat-4-hover:#99eab5; - --tag-cat-5:#c5c387; - --tag-cat-5-hover:#efeda4; - --tag-cat-6:#be7d7d; - --tag-cat-6-hover:#f6a2a2; - --tag-cat-7:#d8e1e9; - --tag-cat-7-hover:#eef7ff; - --tag-cat-8: #60a979; - --tag-cat-8-hover: #93efb3; - --user-member: var(--base-text); - --user-member-hover: var(--base-text-hover); - --user-privileged: #93c190; - --user-privileged-hover: #b0e7ad; - --user-contributor: #93c190; - --user-contributor-hover: #b0e7ad; - --user-admin:#cc946d; - --user-admin-hover: #eeae82; - --user-moderator:#7dafd8; - --user-moderator-hover: #8fc8f7; - --user-former-staff: #6cd5aa; - --user-former-staff-hover: #7ff7c6; - --user-janitor: #7dafd8; - --user-janitor-hover: #8fc8f7; - --user-banned: #d46969; - --user-banned-hover: #ef7676; - --favorite-button: #538163; - --favorite-button-hover: #6dab83; - --remove-favorite: #936060; - --remove-favorite-hover: #bf7e7e; - --warn-button: #a07658; - --warn-button-hover: #e5aa80; - --button-color: #232e38; - --button-color-hover: #2c3946; - --button-text: #d6bbae; - --button-text-hover: #d6bbae; - --button-text-hover-secondary: #f0cfc0; - } -} - -if themep == classic { - :root { - --themeName:"Hexagon"; - --thin-scrollbar: var(--true); - --main-page-background: url(https://static1.e621.net/data/d2/ca/d2cacf82e3e5c0f462da7d8753806ec6.jpg)!important; - --artist-credit: "Background by Coffeesoda"; - --main-font: Yu Gothic UI, Arial; - --bg-300: #152f56; - --bg-400: #0e203c; - --bg: #031530; - --bg-visiting: rgba(200,200,200,1); - --bg-visiting-transition: 100ms; - --bg-editing-transition: 100ms; - --bg-visiting-hover:rgba(255,255,255,1); - --bg-editing: #a0d2d4; - --bg-editing-hover: #a6fffc; - --base-text: #fff; - --base-text-hover: #fff; - --base-text-faded: #ffffff7a; - --base-link: #b4c7d9; - --base-link-hover: #e9f2fa; - --header-link: #c3ccd4; - --header-link-hover: #d3ddd3; - --content-link:#fdbe2f; - --content-link-hover:#ffd575; - --header-link-transition: 100ms; - --header-link-editing-transition:100ms; - --header-link-visiting: #232e38; - --header-link-editing: #2c3946; - --header-link-editing-hover: #232e38; - --nav-hover-top-color:#c3ccd4; - --nav-hover-bottom-color: #c3ccd4; - --bg-image: #232e38; - --deleted-bg: #232323; - --deleted-text: #d2d2d2; - --blacklisted-bg: #6e4848; - --blacklisted-text: #d2d2d2; - /*--bg-image: linear-gradient(to right top, #6d327c, #485DA6, #00a1ba, #00BF98, #36C486);*/ - --actions-fav-true:#be7aa1; - --flagged: maroon; - --elements-highlight: #fdbe2f; - --mode-edit: #713a20; - --mode-add-fav: #006400; - --mode-remove-fav: maroon; - --mode-blacklist:#242424; - --mode-download: #4d0054; - --mode-fullscreen: #194f4d; - --tag-cat-1:#b4c7d9; - --tag-cat-1-hover:#e9f2fa; - --tag-cat-2:#f2ac08; - --tag-cat-2-hover:#fbd67f; - --tag-cat-3:#d0d; - --tag-cat-3-hover:#ff5eff; - --tag-cat-4:#0a0; - --tag-cat-4-hover:#2bff2b; - --tag-cat-5:#ed5d1f; - --tag-cat-5-hover:#f6b295; - --tag-cat-6:#ff3d3d; - --tag-cat-6-hover:#ffbdbd; - --tag-cat-7:#fff; - --tag-cat-7-hover:#666; - --tag-cat-8: #228822; - --tag-cat-8-hover: #5fdb5f; - --user-member: var(--base-text); - --user-member-hover: var(--base-text-hover); - --user-privileged: #4afc4a; - --user-privileged-hover: #75fd75; - --user-contributor: #4afc4a; - --user-contributor-hover: #75fd75; - --user-admin:#e69500; - --user-admin-hover: #9d6703; - --user-moderator:#d82828; - --user-moderator-hover: #cc5151; - --user-former-staff: #3fd6ba; - --user-former-staff-hover: #5eebd1; - --user-janitor: #d82828; - --user-janitor-hover: #cc5151; - --user-banned: #a41313; - --user-banned-hover: #df3e3e; - --favorite-button: #006400; - --favorite-button-hover: #004b00; - --remove-favorite: maroon; - --remove-favorite-hover: #670000; - --warn-button: sienna; - --warn-button-hover: #8c4827; - --button-color: #232e38; - --button-color-hover: #2c3946; - --button-text: #fff; - --button-text-hover: #fff; - --button-text-hover-secondary: #fff; - --true: thin; - scrollbar-width: var(--thin-scrollbar); - scrollbar-color: #3c3c3c #222; - } - body[data-th-main="pony"] { - --themeName:"Pony"; - --bg-300: #2f175c; - --bg-400: #250d51; - --bg: #190836; - --bg-visiting: rgba(200,200,200,1); - --bg-visiting-transition: 100ms; - --bg-editing-transition: 100ms; - --bg-visiting-hover:rgba(255,255,255,1); - --bg-editing: #a0d2d4; - --bg-editing-hover: #a6fffc; - --base-text: #fff; - --base-text-hover: #fff; - --base-text-faded: #ffffff7a; - --base-link: #b4c7d9; - --base-link-hover: #e9f2fa; - --header-link: #c3ccd4; - --header-link-hover: #d3ddd3; - --content-link:#ff5eff; - --content-link-hover:#ff8dff; - --header-link-transition: 100ms; - --header-link-editing-transition:100ms; - --header-link-visiting: #232e38; - --header-link-editing: #2c3946; - --header-link-editing-hover: #232e38; - --nav-hover-top-color:#c3ccd4; - --nav-hover-bottom-color: #c3ccd4; - --bg-image: #232e38; - --deleted-bg: #232323; - --deleted-text: #d2d2d2; - --blacklisted-bg: #646464; - --blacklisted-text: #d2d2d2; - /*--bg-image: linear-gradient(to right top, #6d327c, #485DA6, #00a1ba, #00BF98, #36C486);*/ - --actions-fav-true:#be7aa1; - --flagged: maroon; - --elements-highlight: #ff5eff; - --mode-edit: #713a20; - --mode-add-fav: #006400; - --mode-remove-fav: maroon; - --mode-blacklist:#242424; - --mode-download: #4d0054; - --mode-fullscreen: #194f4d; - --tag-cat-1:#b4c7d9; - --tag-cat-1-hover:#e9f2fa; - --tag-cat-2:#f2ac08; - --tag-cat-2-hover:#fbd67f; - --tag-cat-3:#d0d; - --tag-cat-3-hover:#ff5eff; - --tag-cat-4:#0a0; - --tag-cat-4-hover:#2bff2b; - --tag-cat-5:#ed5d1f; - --tag-cat-5-hover:#f6b295; - --tag-cat-6:#ff3d3d; - --tag-cat-6-hover:#ffbdbd; - --tag-cat-7:#fff; - --tag-cat-7-hover:#666; - --tag-cat-8: #228822; - --tag-cat-8-hover: #5fdb5f; - --user-member: var(--base-text); - --user-member-hover: var(--base-text-hover); - --user-privileged: #4afc4a; - --user-privileged-hover: #75fd75; - --user-contributor: #4afc4a; - --user-contributor-hover: #75fd75; - --user-admin:#e69500; - --user-admin-hover: #9d6703; - --user-moderator:#d82828; - --user-moderator-hover: #cc5151; - --user-former-staff: #3fd6ba; - --user-former-staff-hover: #5eebd1; - --user-janitor: #d82828; - --user-janitor-hover: #cc5151; - --user-banned: #a41313; - --user-banned-hover: #df3e3e; - --favorite-button: #006400; - --favorite-button-hover: #004b00; - --remove-favorite: maroon; - --remove-favorite-hover: #670000; - --warn-button: sienna; - --warn-button-hover: #8c4827; - --button-color: #232e38; - --button-color-hover: #2c3946; - --button-text: #fff; - --button-text-hover: #fff; - --button-text-hover-secondary: #fff; - } - body[data-th-main="bloodlust"] { - --themeName:"Bloodlust"; - --bg-300: #333; - --bg-400: #222; - --bg: #111; - --bg-visiting: #ffee95; - --bg-visiting-transition: 100ms; - --bg-editing-transition: 100ms; - --bg-visiting-hover: #f68b00; - --bg-editing: #a0d2d4; - --bg-editing-hover: #a6fffc; - --base-text: #fff; - --base-text-hover: #fff; - --base-text-faded: #ffffff7a; - --base-link: #ffee95; - --base-link-hover: #f68b00; - --header-link: #ffee95; - --header-link-hover: #f68b00; - --content-link: #ffee95; - --content-link-hover:#f68b00; - --header-link-transition: 100ms; - --header-link-editing-transition:100ms; - --header-link-visiting: #232e38; - --header-link-editing: #2c3946; - --header-link-editing-hover: #232e38; - --nav-hover-top-color:#ffee95; - --nav-hover-bottom-color: #ffee95; - --bg-image: #232e38; - --deleted-bg: #232323; - --deleted-text: #d2d2d2; - --blacklisted-bg: #656565; - --blacklisted-text: #d2d2d2; - /*--bg-image: linear-gradient(to right top, #6d327c, #485DA6, #00a1ba, #00BF98, #36C486);*/ - --actions-fav-true:#be7aa1; - --flagged: maroon; - --elements-highlight: #ffee95; - --mode-edit: #713a20; - --mode-add-fav: #006400; - --mode-remove-fav: maroon; - --mode-blacklist:#000; - --mode-download: #4d0054; - --mode-fullscreen: #194f4d; - --tag-cat-1:#ffee95; - --tag-cat-1-hover:#f68b00; - --tag-cat-2:#f2ac08; - --tag-cat-2-hover:#fbd67f; - --tag-cat-3:#d0d; - --tag-cat-3-hover:#ff5eff; - --tag-cat-4:#0a0; - --tag-cat-4-hover:#2bff2b; - --tag-cat-5:#ed5d1f; - --tag-cat-5-hover:#f6b295; - --tag-cat-6:#ff3d3d; - --tag-cat-6-hover:#ffbdbd; - --tag-cat-7:#fff; - --tag-cat-7-hover:#666; - --tag-cat-8: #228822; - --tag-cat-8-hover: #5fdb5f; - --user-member: var(--base-text); - --user-member-hover: var(--base-text-hover); - --user-privileged: #4afc4a; - --user-privileged-hover: #75fd75; - --user-contributor: #4afc4a; - --user-contributor-hover: #75fd75; - --user-admin:#e69500; - --user-admin-hover: #9d6703; - --user-moderator:#d82828; - --user-moderator-hover: #cc5151; - --user-former-staff: #3fd6ba; - --user-former-staff-hover: #5eebd1; - --user-janitor: #d82828; - --user-janitor-hover: #cc5151; - --user-banned: #a41313; - --user-banned-hover: #df3e3e; - --favorite-button: #006400; - --favorite-button-hover: #004b00; - --remove-favorite: maroon; - --remove-favorite-hover: #670000; - --warn-button: sienna; - --warn-button-hover: #8c4827; - --button-color: #232e38; - --button-color-hover: #2c3946; - --button-text: #fff; - --button-text-hover: #fff; - --button-text-hover-secondary: #fff; - } - body[data-th-main="serpent"] { - --themeName:"Serpent"; - --bg: #f6eb86; - --bg-400: #dacf6b; - --bg-300: #44a544; - --bg-visiting: #000; - --bg-visiting-transition: 100ms; - --bg-editing-transition: 100ms; - --bg-visiting-hover:rgba(255,255,255,1); - --bg-editing: #a0d2d4; - --bg-editing-hover: #a6fffc; - --base-text: #000; - --base-text-hover: #000; - --base-text-faded: #0000007a; - --base-link: #000; - --base-link-hover: #222; - --header-link: #000; - --header-link-hover: #222; - --content-link:#504afc; - --content-link-hover:#847fff; - --header-link-transition: 100ms; - --header-link-editing-transition:100ms; - --header-link-visiting: #fff; - --header-link-editing: #2c3946; - --header-link-editing-hover: #232e38; - --nav-hover-top-color:#000; - --nav-hover-bottom-color: #000; - --bg-image: #232e38; - --deleted-bg: #232323; - --deleted-text: #d2d2d2; - --blacklisted-bg: #646464; - --blacklisted-text: #d2d2d2; - /*--bg-image: linear-gradient(to right top, #6d327c, #485DA6, #00a1ba, #00BF98, #36C486);*/ - --actions-fav-true:#be7aa1; - --flagged: maroon; - --elements-highlight: #44a544; - --mode-edit: #713a20; - --mode-add-fav: #006400; - --mode-remove-fav: maroon; - --mode-blacklist:#242424; - --mode-download: #4d0054; - --mode-fullscreen: #194f4d; - --tag-cat-1:#000; - --tag-cat-1-hover:#222; - --tag-cat-2:#f2ac08; - --tag-cat-2-hover:#fbd67f; - --tag-cat-3:#d0d; - --tag-cat-3-hover:#ff5eff; - --tag-cat-4:#0a0; - --tag-cat-4-hover:#2bff2b; - --tag-cat-5:#ed5d1f; - --tag-cat-5-hover:#f6b295; - --tag-cat-6:#ff3d3d; - --tag-cat-6-hover:#ffbdbd; - --tag-cat-7:#fff; - --tag-cat-7-hover:#666; - --tag-cat-8: #228822; - --tag-cat-8-hover: #5fdb5f; - --user-member: var(--base-text); - --user-member-hover: var(--base-text-hover); - --user-privileged: #4afc4a; - --user-privileged-hover: #75fd75; - --user-contributor: #4afc4a; - --user-contributor-hover: #75fd75; - --user-admin:#e69500; - --user-admin-hover: #9d6703; - --user-moderator:#d82828; - --user-moderator-hover: #cc5151; - --user-former-staff: #3fd6ba; - --user-former-staff-hover: #5eebd1; - --user-janitor: #d82828; - --user-janitor-hover: #cc5151; - --user-banned: #a41313; - --user-banned-hover: #df3e3e; - --favorite-button: #006400; - --favorite-button-hover: #004b00; - --remove-favorite: maroon; - --remove-favorite-hover: #670000; - --warn-button: sienna; - --warn-button-hover: #8c4827; - --button-color: #232e38; - --button-color-hover: #2c3946; - --button-text: #000; - --button-text-hover: #222; - --button-text-hover-secondary: #222; - } - body[data-th-main="hotdog"] { - --themeName:"Hotdog"; - --bg: #f00; - --bg-400: #ffff2b; - --bg-300: #ff0; - --bg-visiting: #000; - --bg-visiting-transition: 100ms; - --bg-editing-transition: 100ms; - --bg-visiting-hover:rgba(255,255,255,1); - --bg-editing: #a0d2d4; - --bg-editing-hover: #a6fffc; - --base-text: #000; - --base-text-hover: #000; - --base-text-faded: #0000007a; - --base-link: #000; - --base-link-hover: #222; - --header-link: #000; - --header-link-hover: #222; - --content-link:#504afc; - --content-link-hover:#847fff; - --header-link-transition: 100ms; - --header-link-editing-transition:100ms; - --header-link-visiting: #fff; - --header-link-editing: #2c3946; - --header-link-editing-hover: #232e38; - --nav-hover-top-color:#000; - --nav-hover-bottom-color: #000; - --bg-image: #232e38; - --deleted-bg: #232323; - --deleted-text: #d2d2d2; - --blacklisted-bg: #646464; - --blacklisted-text: #d2d2d2; - /*--bg-image: linear-gradient(to right top, #6d327c, #485DA6, #00a1ba, #00BF98, #36C486);*/ - --actions-fav-true:#be7aa1; - --flagged: maroon; - --elements-highlight: #ff0; - --mode-edit: #713a20; - --mode-add-fav: #006400; - --mode-remove-fav: maroon; - --mode-blacklist:#242424; - --mode-download: #4d0054; - --mode-fullscreen: #194f4d; - --tag-cat-1:#000; - --tag-cat-1-hover:#222; - --tag-cat-2:#f2ac08; - --tag-cat-2-hover:#fbd67f; - --tag-cat-3:#d0d; - --tag-cat-3-hover:#ff5eff; - --tag-cat-4:#0a0; - --tag-cat-4-hover:#2bff2b; - --tag-cat-5:#ed5d1f; - --tag-cat-5-hover:#f6b295; - --tag-cat-6:#ff3d3d; - --tag-cat-6-hover:#ffbdbd; - --tag-cat-7:#fff; - --tag-cat-7-hover:#666; - --tag-cat-8: #228822; - --tag-cat-8-hover: #5fdb5f; - --user-member: var(--base-text); - --user-member-hover: var(--base-text-hover); - --user-privileged: #4afc4a; - --user-privileged-hover: #75fd75; - --user-contributor: #4afc4a; - --user-contributor-hover: #75fd75; - --user-admin:#e69500; - --user-admin-hover: #9d6703; - --user-moderator:#d82828; - --user-moderator-hover: #cc5151; - --user-former-staff: #3fd6ba; - --user-former-staff-hover: #5eebd1; - --user-janitor: #d82828; - --user-janitor-hover: #cc5151; - --user-banned: #a41313; - --user-banned-hover: #df3e3e; - --favorite-button: #006400; - --favorite-button-hover: #004b00; - --remove-favorite: maroon; - --remove-favorite-hover: #670000; - --warn-button: sienna; - --warn-button-hover: #8c4827; - --button-color: #232e38; - --button-color-hover: #2c3946; - --button-text: #000; - --button-text-hover: #222; - --button-text-hover-secondary: #222; - } -} -if themep == pThemes { - :root { - --themeName: "Nord"; - --thin-scrollbar: var(--true); - --main-page-background: url(https://static1.e621.net/data/42/c6/42c6450e4cb046e6b23f9f1a19957e98.png)!important; - --artist-credit: "Background by Zackary911"; - --main-font: Segoe UI, Arial; - --bg-300: #434c5e; - --bg-400: #3b4252; - --bg: #2e3440; - --bg-visiting: #e5e9f0; - --bg-visiting-transition: 100ms; - --bg-editing-transition: 100ms; - --bg-visiting-hover: #eceff4; - --bg-editing: #a0d2d4; - --bg-editing-hover: #a6fffc; - --base-text: #e5e9f0; - --base-text-hover: #eceff4; - --base-text-faded: #e5e9f07a; - --base-link: #88c0d0; - --base-link-hover: #8cdaf1; - --header-link: #d8dee9; - --header-link-hover: #eceff4; - --content-link:#a3be8c; - --content-link-hover:#b6df92; - --header-link-transition: 100ms; - --header-link-editing-transition:100ms; - --header-link-visiting: #2e3440; - --header-link-editing: #393f4c; - --header-link-editing-hover: #4c5363; - --nav-hover-top-color:#e5e9f0; - --nav-hover-bottom-color: #e5e9f0; - --bg-image: #4c5363; - --deleted-bg: #2e333f; - --deleted-text: #4b5669; - --blacklisted-bg: #5e434c; - --blacklisted-text: #b0667f; - /*--bg-image: linear-gradient(to right top, #6d327c, #485DA6, #00a1ba, #00BF98, #36C486);*/ - --actions-fav-true:#bf616a; - --flagged: #bf616a; - --elements-highlight: #8fbcbb; - --mode-edit:#534738; - --mode-add-fav:#36583a; - --mode-remove-fav:#583636; - --mode-blacklist:#171c22; - --mode-download: #553658; - --mode-fullscreen: #365857; - --tag-cat-1:#88c0d0; - --tag-cat-1-hover:#8ad4e9; - --tag-cat-2:#d08770; - --tag-cat-2-hover:#f0a087; - --tag-cat-3:#b48ead; - --tag-cat-3-hover:#e4a4d9; - --tag-cat-4:#8cbe94; - --tag-cat-4-hover:#a8e5b5; - --tag-cat-5:#ebcb8b; - --tag-cat-5-hover:#f9dda4; - --tag-cat-6:#bf616a; - --tag-cat-6-hover:#e05d69; - --tag-cat-7:#d8dee9; - --tag-cat-7-hover:#ecf0f7; - --tag-cat-8: #a3be8c; - --tag-cat-8-hover: #b1d791; - --user-member: var(--base-text); - --user-member-hover: var(--base-text-hover); - --user-privileged: #93c190; - --user-privileged-hover: #b0e7ad; - --user-contributor: #93c190; - --user-contributor-hover: #b0e7ad; - --user-admin:#cc946d; - --user-admin-hover: #eeae82; - --user-moderator:#7dafd8; - --user-moderator-hover: #8fc8f7; - --user-former-staff: #6cd5aa; - --user-former-staff-hover: #7ff7c6; - --user-janitor: #7dafd8; - --user-janitor-hover: #8fc8f7; - --user-banned: #bf616a; - --user-banned-hover: #e05d69; - --favorite-button: #a3be8c; - --favorite-button-hover: #b1d791; - --remove-favorite: #bf616a; - --remove-favorite-hover: #e05d69; - --warn-button: #d08770; - --warn-button-hover: #dc9b86; - --button-color: #232e38; - --button-color-hover: #2c3946; - --button-text: #c3ccd4; - --button-text-hover: #c3ccd4; - --button-text-hover-secondary: #eceff4; - --true: thin; - scrollbar-width: var(--thin-scrollbar); - scrollbar-color: #3c3c3c #222; - } - body[data-th-main="pony"] { - --themeName: "Rosé Pine"; - --bg-300: #393552; - --bg-400: #2a273f; - --bg: #232136; - --bg-visiting: #e0def4; - --bg-visiting-hover:#f5f4ff; - --bg-editing: #c4a7e7; - --bg-editing-hover: #e0c8fc; - --base-text: #e0def4; - --base-text-hover: #f5f4ff; - --base-text-faded: #e0def47a; - --base-link: #ebbcba; - --base-link-hover: #f7dbda; - --header-link: #e0def4; - --header-link-hover: #f5f4ff; - --content-link:#c4a7e7; - --content-link-hover:#c4a7e7; - --header-link-visiting: #38232b; - --header-link-editing: #462c34; - --header-link-editing-hover: #38232b; - --nav-hover-top-color:#e0def4; - --nav-hover-bottom-color: #e0def4; - --bg-image: #38232e; - --deleted-bg: #232136; - --deleted-text: #56526e; - --blacklisted-bg: #36212a; - --blacklisted-text: #eb6f92; - /*--bg-image: linear-gradient(to right top, #6d327c, #485DA6, #00a1ba, #00BF98, #36C486);*/ - --actions-fav-true:#a87abe; - --flagged: #eb6f92; - --elements-highlight: #c4a7e7; - --mode-edit:#534738; - --mode-add-fav:#36583a; - --mode-remove-fav:#583636; - --mode-blacklist:#171c22; - --mode-download: #553658; - --mode-fullscreen: #365857; - --tag-cat-1:#ebbcba; - --tag-cat-1-hover:#f7dbda; - --tag-cat-2:#f6c177; - --tag-cat-2-hover:#fed9a4; - --tag-cat-3:#9ccfd8; - --tag-cat-3-hover:#c3edf4; - --tag-cat-4:#45d07a; - --tag-cat-4-hover:#6aec9c; - --tag-cat-5:#f6f677; - --tag-cat-5-hover:#ffffa8; - --tag-cat-6:#eb6f92; - --tag-cat-6-hover:#ff91b0; - --tag-cat-7:#f4def1; - --tag-cat-7-hover:#fff4fd; - --tag-cat-8: #9cd8a9; - --tag-cat-8-hover: #bef0c9; - --user-member: var(--base-text); - --user-member-hover: var(--base-text-hover); - --user-privileged: #93c190; - --user-privileged-hover: #b0e7ad; - --user-contributor: #45d07a; - --user-contributor-hover: #6aec9c; - --user-admin:#f6c177; - --user-admin-hover: #fed9a4; - --user-moderator:#9ccfd8; - --user-moderator-hover: #c3edf4; - --user-former-staff: #6cd5aa; - --user-former-staff-hover: #7ff7c6; - --user-janitor: #9ccfd8; - --user-janitor-hover: #c3edf4; - --user-banned: #eb6f92; - --user-banned-hover: #fa92af; - --favorite-button: #6cbd75; - --favorite-button-hover: #9effaa; - --remove-favorite: #eb6f92; - --remove-favorite-hover: #cd708a; - --warn-button: #cd974c; - --warn-button-hover: #f4ca91; - --button-color: #232e38; - --button-color-hover: #2c3946; - --button-text: #c3ccd4; - --button-text-hover: #c3ccd4; - --button-text-hover-secondary: #f5f4ff; - } - body[data-th-main="bloodlust"] { - --themeName: "Sonokai - Shusia"; - --bg-300: #37343a; - --bg-400: #2d2a2e; - --bg: #211f21; - --bg-visiting: #e3e1e4; - --bg-visiting-hover:#fafafb; - --bg-editing: #be4343; - --bg-editing-hover: #c62929; - --base-text: #e3e1e4; - --base-text-hover: #fafafb; - --base-text-faded: #e1e1e17a; - --base-link: #7accd7; - --base-link-hover: #78dce8; - --header-link: #e3e1e4; - --header-link-hover: #fafafb; - --content-link:#61bac5; - --content-link-hover:#78dce8; - --header-link-visiting: #382323; - --header-link-editing: #462c2c; - --header-link-editing-hover: #382323; - --nav-hover-top-color:#fafafb; - --nav-hover-bottom-color: #fafafb; - --bg-image: #2f2f2f; - --deleted-bg: #1a181a; - --deleted-text: #615a61; - --blacklisted-bg: #55393d; - --blacklisted-text: #906369; - /*--bg-image: linear-gradient(to right top, #6d327c, #485DA6, #00a1ba, #00BF98, #36C486);*/ - --actions-fav-true:#ff6188; - --flagged: #933c51; - --elements-highlight: #ff6188; - --mode-edit:#534738; - --mode-add-fav:#36583a; - --mode-remove-fav:#583636; - --mode-blacklist:#000; - --mode-download: #553658; - --mode-fullscreen: #365857; - --tag-cat-1:#63acb6; - --tag-cat-1-hover:#7accd7; - --tag-cat-2:#cb764d; - --tag-cat-2-hover:#ef9062; - --tag-cat-3:#61bac5; - --tag-cat-3-hover:#78dce8; - --tag-cat-4:#5fbb8b; - --tag-cat-4-hover:#76dca2; - --tag-cat-5:#c2a54e; - --tag-cat-5-hover:#e5c463; - --tag-cat-6:#8e81cd; - --tag-cat-6-hover:#ab9df2; - --tag-cat-7:#e3e1e4; - --tag-cat-7-hover:#fcfcfc; - --tag-cat-8: #8dbb5f; - --tag-cat-8-hover: #a9dc76; - --user-member: var(--base-text); - --user-member-hover: var(--base-text-hover); - --user-privileged: #a9dc76; - --user-privileged-hover: #b8e986; - --user-contributor: #a9dc76; - --user-contributor-hover: #b8e986; - --user-admin:#ef9062; - --user-admin-hover: #ffa579; - --user-moderator:#78dce8; - --user-moderator-hover: #96f1fc; - --user-former-staff: #78e8ae; - --user-former-staff-hover: #96ffc9; - --user-janitor: #78dce8; - --user-janitor-hover: #96f1fc; - --user-banned: #ff6188; - --user-banned-hover: #ff7798; - --favorite-button: #84ae5a; - --favorite-button-hover: #9ecd6f; - --remove-favorite: #d2496b; - --remove-favorite-hover: #f85e84; - --warn-button: #cb764d; - --warn-button-hover: #ef9062; - --button-color: #232e38; - --button-color-hover: #2c3946; - --button-text: #c3ccd4; - --button-text-hover: #c3ccd4; - --button-text-hover-secondary: #fafafb; - } - body[data-th-main="serpent"] { - --themeName: "Everforest"; - --bg-300: #3d484d; - --bg-400: #343f44; - --bg: #2d353b; - --bg-visiting: #d3c6aa; - --bg-visiting-hover: #eadec2; - --bg-editing: #a0d2d4; - --bg-editing-hover: #a6fffc; - --base-text: #d3c6aa; - --base-text-hover: #eadec2; - --base-text-faded: #d3c6aa7a; - --base-link: #7fbbb3; - --base-link-hover: #9ad2ca; - --header-link: #d3c6aa; - --header-link-hover: #eadec2; - --content-link:#7fbbb3; - --content-link-hover:#9ad2ca; - --header-link-visiting: #2d353b; - --header-link-editing: #343f44; - --header-link-editing-hover: #2d353b; - --nav-hover-top-color:#d3c6aa; - --nav-hover-bottom-color: #d3c6aa; - --bg-image: #273823; - --deleted-bg: #425047; - --deleted-text: #748b7c; - --blacklisted-bg: #543a48; - --blacklisted-text: #7f596e; - /*--bg-image: linear-gradient(to right top, #6d327c, #485DA6, #00a1ba, #00BF98, #36C486);*/ - --actions-fav-true:#e67e80; - --flagged: #c26566; - --elements-highlight: #a7c080; - --mode-edit:#534738; - --mode-add-fav:#36583a; - --mode-remove-fav:#583636; - --mode-blacklist:#171c22; - --mode-download: #553658; - --mode-fullscreen: #365857; - --tag-cat-1:#9da9a0; - --tag-cat-1-hover:#bbd6c2; - --tag-cat-2:#c27c5d; - --tag-cat-2-hover:#e69875; - --tag-cat-3:#b47e98; - --tag-cat-3-hover:#d699b6; - --tag-cat-4:#689d96; - --tag-cat-4-hover:#7fbbb3; - --tag-cat-5:#ba9e68; - --tag-cat-5-hover:#dbbc7f; - --tag-cat-6:#c26567; - --tag-cat-6-hover:#e67e80; - --tag-cat-7:#b3a78e; - --tag-cat-7-hover:#d3c6aa; - --tag-cat-8: #8ba269; - --tag-cat-8-hover: #a7c080; - --user-member: var(--base-text); - --user-member-hover: var(--base-text-hover); - --user-privileged: #83c092; - --user-privileged-hover: #83c092; - --user-contributor: #83c092; - --user-contributor-hover: #83c092; - --user-admin:#c27c5d; - --user-admin-hover: #e69875; - --user-moderator:#689d96; - --user-moderator-hover: #7fbbb3; - --user-former-staff: #b3a78e; - --user-former-staff-hover: #d3c6aa; - --user-janitor: #689d96; - --user-janitor-hover: #7fbbb3; - --user-banned: #c26567; - --user-banned-hover: #e67e80; - --favorite-button: #8ba269; - --favorite-button-hover: #a7c080; - --remove-favorite: #c26567; - --remove-favorite-hover: #e67e80; - --warn-button: #c37d5e; - --warn-button-hover: #e69875; - --button-color: #253823; - --button-color-hover: #2f462c; - --button-text: #c3ccd4; - --button-text-hover: #eadec2; - --button-text-hover-secondary: #eadec2; - --true: thin; - scrollbar-width: var(--thin-scrollbar); - } - body[data-th-main="hotdog"] { - --themeName: "Gruvbox"; - --bg-300: #47403d; - --bg-400: #3c3836; - --bg: #32302f; - --bg-visiting: #ebdbb2; - --bg-visiting-hover:#fbf1c7; - --bg-editing: #a76b7b; - --bg-editing-hover: #d3869b - --base-text: #ebdbb2; - --base-text-hover: #fbf1c7; - --base-text-faded: #ebdbb27a; - --base-link: #a0c1c2; - --base-link-hover: #c0e1e2; - --header-link: #ebdbb2; - --header-link-hover: #fbf1c7; - --content-link: #a0c1c2; - --content-link-hover: #c0e1e2; - --header-link-visiting: #32302f; - --header-link-editing: #32302f; - --header-link-editing-hover: #47403d; - --nav-hover-top-color:#ebdbb2; - --nav-hover-bottom-color: #ebdbb2; - --bg-image: #38232e; - --deleted-bg: #302c2b; - --deleted-text: #665c54; - --blacklisted-bg: #7d0004; - --blacklisted-text: #e5918c; - /*--bg-image: linear-gradient(to right top, #6d327c, #485DA6, #00a1ba, #00BF98, #36C486);*/ - --actions-fav-true:#d3869b; - --flagged: #c83a29; - --elements-highlight: #fabd2f; - --mode-edit:#534738; - --mode-add-fav:#36583a; - --mode-remove-fav:#583636; - --mode-blacklist:#171c22; - --mode-download: #553658; - --mode-fullscreen: #365857; - --tag-cat-1:#ebdbb2; - --tag-cat-1-hover:#fbf1c7; - --tag-cat-2:#fe8019; - --tag-cat-2-hover:#ffa861; - --tag-cat-3:#83a598; - --tag-cat-3-hover:#aaccbf; - --tag-cat-4:#8ec07c; - --tag-cat-4-hover:#b3e3a1; - --tag-cat-5:#fabd2f; - --tag-cat-5-hover:#ffd46f; - --tag-cat-6:#fb4934; - --tag-cat-6-hover:#ff7f70; - --tag-cat-7:#f9f5d7; - --tag-cat-7-hover:#fffce7; - --tag-cat-8: #b8bb26; - --tag-cat-8-hover: #d3d642; - --user-member: var(--base-text); - --user-member-hover: var(--base-text-hover); - --user-privileged: #8ec07c; - --user-privileged-hover: #b3e3a1; - --user-contributor: #8ec07c; - --user-contributor-hover: #b3e3a1; - --user-admin:#fe8019; - --user-admin-hover: #ffa861; - --user-moderator:#83a598; - --user-moderator-hover: #aaccbf; - --user-former-staff: #fabd2f; - --user-former-staff-hover: #ffd46f; - --user-janitor: #83a598; - --user-janitor-hover: #aaccbf; - --user-banned: #fb4934; - --user-banned-hover: #ff7f70; - --favorite-button: #98971a; - --favorite-button-hover: #b4b33e; - --remove-favorite: #cc241d; - --remove-favorite-hover: #d34741; - --warn-button: #d65d0e; - --warn-button-hover: #e07733; - --button-color: #232e38; - --button-color-hover: #2c3946; - --button-text: #d6bbae; - --button-text-hover: #d6bbae; - --button-text-hover-secondary: #fbf1c7; - } -} -if themep == classic { - if borderRank == 1 { - body[data-th-main="hexagon"] { - .author-info:has(.user-member) .post-thumbnail { - border-color: var(--user-member) !important; - } - .avatar .post-thumbnail { - background-color: var(--user-member); - } - } - } -} -::-webkit-scrollbar { - width: 10px; - background: var(--bg); -} - -::-webkit-scrollbar-thumb { - background: var(--bg-300); -} - -if themep == muted { - ::selection { - color: var(--bg); - background: var(--elements-highlight); - } -} -if themep == classic { - ::selection { - color: var(--bg); - background: var(--header-link); - } -} - body { - --color-score-positive: var(--favorite-button); - --color-score-negative: var(--remove-favorite); - --color-rating-safe: var(--favorite-button); - --color-rating-questionable: var(--warn-button); - --color-rating-explicit: var(--remove-favorite) - } - - - -/* -------------- Styling starts now --------------*/ - - -/* Body things */ - body { - background-color: var(--bg-300)!important; - background-image: none!important; - color: var(--base-text)!important; - font-family: var(--main-font); - padding:0; - margin:0; - max-width: 100vw; - } - div#page { - background-color: var(--bg-300)!important; - margin:0!important; - border-radius:0!important; - padding-top: 1.5rem; - padding-bottom: 4rem; - } - #ad-leaderboard { - width:fit-content; - margin-inline:auto; - } - footer#page-footer { - margin: 0rem 0 0 0; - border-radius:0; - background-color: var(--bg)!important; - } - span.logo-container { - a img { - opacity: 0; - } - a { - &::before { - content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5em' height='5em' viewBox='1 0 41 41'%3E%3Cpath id='Ear Tops' fill='%2300000055' d='M 26.73,13.88 C 26.73,13.88 29.44,13.24 29.92,14.20 30.30,14.98 28.55,16.43 28.55,16.43 28.55,16.43 30.06,18.45 30.06,18.45 30.06,18.45 32.06,16.97 33.02,16.18 34.09,15.28 35.85,13.73 35.10,12.43 33.62,9.88 26.95,11.43 25.27,11.96 25.27,11.96 26.73,13.88 26.73,13.88 Z M 14.61,8.32 C 14.61,8.32 15.74,5.77 16.79,5.97 17.65,6.13 17.75,8.41 17.75,8.41 17.75,8.41 20.26,8.41 20.26,8.41 20.26,8.41 20.30,5.92 20.23,4.68 20.16,3.29 19.98,0.94 18.50,0.76 15.57,0.41 12.79,6.68 12.20,8.33 12.20,8.33 14.61,8.32 14.61,8.32 Z' /%3E%3Cpath id='Ear Bottoms' fill='%23ffffff33' d='M 14.61,8.32 C 14.61,8.32 15.74,5.77 16.79,5.97 17.65,6.13 17.75,8.41 17.75,8.41 17.75,8.41 20.26,8.41 20.26,8.41 20.26,8.41 20.30,7.43 20.27,6.17 19.54,4.37 16.52,3.18 15.03,3.00 14.27,3.83 12.79,6.68 12.20,8.33 12.20,8.33 14.61,8.32 14.61,8.32 Z M 26.73,13.88 C 26.73,13.88 29.44,13.24 29.92,14.20 30.30,14.98 28.55,16.43 28.55,16.43 28.55,16.43 30.06,18.45 30.06,18.45 30.06,18.45 31.41,17.50 32.36,16.70 31.56,16.69 32.70,13.48 30.75,11.02 29.57,10.99 26.95,11.43 25.27,11.96 25.27,11.96 26.73,13.88 26.73,13.88 Z' /%3E%3Cpath id='Head' fill='%2300000055' d='M 8.17,9.97 C 10.27,9.96 19.20,10.03 22.22,10.03 22.88,11.15 28.57,20.96 29.24,22.17 28.50,23.45 22.29,34.12 22.22,34.21 21.22,34.25 8.25,34.29 8.25,34.29 8.15,34.13 1.88,23.32 1.17,22.10 1.80,21.20 7.24,11.57 8.17,9.97 Z' /%3E%3Cpath id='e' fill='%23ffffff33' d='M 14.90,14.62 C 21.12,14.31 22.95,19.43 22.81,23.04 22.69,23.05 11.69,23.93 11.53,23.93 14.80,28.95 18.63,25.34 18.81,25.20 18.95,25.34 19.39,25.75 20.85,27.10 17.10,31.38 8.78,30.54 8.02,21.83 8.53,15.14 14.90,14.62 14.90,14.62 Z M 11.21,20.81 C 11.21,20.81 17.95,20.38 19.47,20.28 17.02,15.62 12.25,17.69 11.21,20.81 Z' /%3E%3C/svg%3E%0A"); - position:absolute; - margin-inline: auto; - width: 5em; - z-index: 2; - - } - } - } - a { - color: var(--base-link)!important; - background: none!important; - &:hover { - color: var(--base-link-hover)!important; - background: none!important; - } - } - ul.backtrace { - background: var(--bg); - } -/*Old Header styling */ - /*header#top { - background-color: var(--bg)!important; - background-image: none!important; - margin: 0!important; - text-align: center!important; - top: 0!important; - border-bottom: none!important; - min-height: 60px!important; - menu { - background-color: rgba(0,0,0,0)!important; - margin: 0 auto; - border: none!important; - outline: none!important; - } - } - header#top nav#nav { - border-bottom: none!important; - } - header#top menu.main { - background-color: rgba(0,0,0,0)!important; - } - header#top nav#nav menu.extra:not(.main) { - background: unset; - margin: 0 0.5rem 0 0; - padding: 0.25rem 0; - position: absolute; - margin-left: auto; - right: 0; - top:0; - } - header#top nav#nav a{ - margin: 0 auto; - } - header#top nav#nav menu.main { - border-bottom: 1px solid var(--header-link)!important; - padding: 0 0 0rem 0; - border-radius:0; - } - .fa-solid { - color: var(--header-link); - transition: var(--header-link-transition); - &:hover { - color: var(--header-link-hover); - } - } - header#top nav#nav menu.extra:not(.main) { - background-color: var(--bg-400)!important; - margin-right:.5rem; - border-radius: 0 0 8px 8px; - border-bottom: 2px solid var(--bg-300)!important; - border-left: 2px solid var(--bg-300)!important; - border-right: 2px solid var(--bg-300)!important; - } - .update-notification[data-loading="true"]::after { - bottom: 1rem; - } - header#top nav#nav menu.main.custom li { - padding: 6px 0; - } - nav { - width: 100%; - max-width:100vw; - border-radius: 100%!important; - text-align: center; - color: var(--header-link); - * { - box-sizing: initial; - background-image: none; - } - } - nav menu:nth-child(2) li a::before { - content:''; - position:absolute; - height: 1.5px; - width:100%; - left:0; - top:-4px; - border-radius: 8px; - background-color:var(--nav-hover-top-color); - transition:var(--header-link-transition); - opacity: 0; - } - nav menu:nth-child(2) li a:hover::before { - width:100%; - opacity: 1; - } - nav menu:nth-child(4) li a::after { - content:''; - position:absolute; - height: 2px; - width:100%; - left:0; - bottom:0; - background-color:var(--nav-hover-bottom-color); - transition:var(--header-link-transition); - opacity: 0; - } - nav menu:nth-child(4) li a:hover::after { - width:100%; - opacity: 1; - } - nav a.tab-has-updates::after { - color: var(--warn-button) !important; - } - nav .bg-foreground a::before { - display:none; - } - nav .bg-foreground { - background-color: var(--bg-visiting)!important; - border-radius: 8px 8px 0 0; - height: 90%; - transition:var(--bg-visiting-transition); - } - nav .bg-foreground:hover { - background-color: var(--bg-visiting-hover)!important; - } - nav .bg-foreground a { - color:var(--header-link-visiting)!important; - &:hover { - color: var(--header-link-visiting)!important; - } - } - nav li a:visited { - color: var(--header-link); - } - nav li a { - color: var(--header-link)!important; - position:relative; - height: 100%; - &:hover { - color: var(--header-link-hover)!important; - } - } - .simple_form { - background-color: var(--bg)!important; - border-radius: 2px 8px 8px 2px; - border-left: .25rem solid var(--elements-highlight)!important; - } - form input, .input > input, .input > select{ - border-radius: 3.5px; - color: var(--base-text)!important; - background-color: var(--bg-400)!important; - border: 2px solid var(--bg-300)!important; - padding: 0 .5rem; - }*/ - /* Nav Logo */ - menu.nav-logo { - margin-top: .25rem; - display: flex; - width: 10%; - } - nav .nav-logo #text { - display:none; - } - nav .nav-logo { - position: relative; - height: 100%; - left:.5rem; - display:grid; - place-items:center; - font-size: 1px; - color:var(--logo); - width: fit-content; - margin-right: 1.5rem; - } - body:not([re621="true"]) nav .nav-logo { - top:.35rem; - } - nav.navigation menu.nav-logo a.nav-logo-link { - display:grid !important; - place-items:center !important; - position:relative !important; - margin-right:0 !important; - font-size: 16px; - aspect-ratio: 1/1; - } - nav .nav-logo { - color: rgb(0,0,0,0); - } - nav .nav-logo::before { - pointer-events:none; - content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='0.4in' height='0.4in' viewBox='0 0 36 36'%3E%3Cpath id='Ear Tops' fill='%2300000055' d='M 26.73,13.88 C 26.73,13.88 29.44,13.24 29.92,14.20 30.30,14.98 28.55,16.43 28.55,16.43 28.55,16.43 30.06,18.45 30.06,18.45 30.06,18.45 32.06,16.97 33.02,16.18 34.09,15.28 35.85,13.73 35.10,12.43 33.62,9.88 26.95,11.43 25.27,11.96 25.27,11.96 26.73,13.88 26.73,13.88 Z M 14.61,8.32 C 14.61,8.32 15.74,5.77 16.79,5.97 17.65,6.13 17.75,8.41 17.75,8.41 17.75,8.41 20.26,8.41 20.26,8.41 20.26,8.41 20.30,5.92 20.23,4.68 20.16,3.29 19.98,0.94 18.50,0.76 15.57,0.41 12.79,6.68 12.20,8.33 12.20,8.33 14.61,8.32 14.61,8.32 Z' /%3E%3Cpath id='Ear Bottoms' fill='%23ffffff33' d='M 14.61,8.32 C 14.61,8.32 15.74,5.77 16.79,5.97 17.65,6.13 17.75,8.41 17.75,8.41 17.75,8.41 20.26,8.41 20.26,8.41 20.26,8.41 20.30,7.43 20.27,6.17 19.54,4.37 16.52,3.18 15.03,3.00 14.27,3.83 12.79,6.68 12.20,8.33 12.20,8.33 14.61,8.32 14.61,8.32 Z M 26.73,13.88 C 26.73,13.88 29.44,13.24 29.92,14.20 30.30,14.98 28.55,16.43 28.55,16.43 28.55,16.43 30.06,18.45 30.06,18.45 30.06,18.45 31.41,17.50 32.36,16.70 31.56,16.69 32.70,13.48 30.75,11.02 29.57,10.99 26.95,11.43 25.27,11.96 25.27,11.96 26.73,13.88 26.73,13.88 Z' /%3E%3Cpath id='Head' fill='%2300000055' d='M 8.17,9.97 C 10.27,9.96 19.20,10.03 22.22,10.03 22.88,11.15 28.57,20.96 29.24,22.17 28.50,23.45 22.29,34.12 22.22,34.21 21.22,34.25 8.25,34.29 8.25,34.29 8.15,34.13 1.88,23.32 1.17,22.10 1.80,21.20 7.24,11.57 8.17,9.97 Z' /%3E%3Cpath id='e' fill='%23ffffff33' d='M 14.90,14.62 C 21.12,14.31 22.95,19.43 22.81,23.04 22.69,23.05 11.69,23.93 11.53,23.93 14.80,28.95 18.63,25.34 18.81,25.20 18.95,25.34 19.39,25.75 20.85,27.10 17.10,31.38 8.78,30.54 8.02,21.83 8.53,15.14 14.90,14.62 14.90,14.62 Z M 11.21,20.81 C 11.21,20.81 17.95,20.38 19.47,20.28 17.02,15.62 12.25,17.69 11.21,20.81 Z' /%3E%3C/svg%3E%0A"); - position:absolute; - top: 0; - right:0; - display:grid; - place-items:center; - z-index: 2; - background-color: var(--bg-300); - outline: solid 2px var(--bg-400); - padding: .3rem; - border-radius: 50%; - transition:200ms; - } - nav .nav-logo:hover::before { - outline: solid 2px var(--base-text); - } - - - /* New Header styling */ - - nav.navigation, nav.navigation menu.nav-logo { - background-color: var(--bg); - } - nav menu.nav-primary, nav menu.nav-help { - border-bottom:1px solid var(--header-link) !important; - } - menu.nav-help { - width: fit-content; - } - nav.navigation .nav-secondary { - background-color: var(--bg); - } - nav.navigation i, nav.navigation a:is([id*="nav"], [id*="blacklist"]) { - color: var(--header-link) !important; - } - nav.navigation i:hover, nav.navigation a:is([id*="nav"], [id*="blacklist"]):hover { - color: var(--header-link-hover) !important; - } - nav.navigation menu.nav-tools { - background-color: var(--bg-400) !important; - border-radius: 0 0 4px 4px; - border: 2px solid var(--bg-300); - border-top: 0px solid transparent; - } - /* Re621 menus */ - .ui-widget-content.ui-widget-content { - color: var(--base-text)!important; - } - .ui-widget.ui-widget-content { - border: 2px solid var(--bg-300) !important; - border-radius: 2px 8px 8px 8px; - overflow: hidden!important; - height:fit-content; - color: var(--base-text)!important; - .border-highlight { - border-color: var(--base-text)!important; - } - } - div#modal-container div.re621-ui-dialog.modal-reserve-height div.ui-dialog-content { - min-height: fit-content!important; - color: var(--base-text); - input { - background-color: var(--bg)!important; - } - h3 { - color: var(--base-text)!important; - } - button.btn-neutral[id^="conf-misc-"], .btn-neutral[id^="conf"] { - background-color: var(--bg-300)!important; - &:hover { - background-color: var(--bg)!important; - } - } - } - tabbed.config-tabs ul.ui-tabs-nav { - height:100%; - position:relative; - } - tabbed.config-tabs ul.ui-tabs-nav li:last-child { - margin-bottom: auto; - } - div#modal-container div.re621-ui-dialog { - background-image: none; - color: var(--base-text); - } - div#modal-container .button.btn-neutral { - background-color: var(--bg-400)!important; - } - .border-section { - border: 2px solid var(--bg-400)!important; - } - span.ui-dialog-title { - color: var(--base-text) !important; - } - div.re621-ui-dialog a.delete-link { - background-color: var(--mode-remove-fav) !important; - } - div.re621-ui-dialog tabbed.config-tabs form-section.subscription-settings > form-section input[type="text"] { - margin-left: .5rem; - margin-right:.5rem; - } - /* Displays custom theme name in the theme picker */ - .re621-ui-dialog:has(label[for^="theme-customizer"]) div.ui-dialog-titlebar span::after { - content: " - "var(--themeName); - } - - /* Sidebar */ - div#c-posts div#a-index aside#sidebar, div#c-posts div#a-show aside#sidebar, div#c-favorites div#a-index aside#sidebar { - width: 14.5rem; - } - a#sidebar-collapse::after { - position: absolute; - top: -.5rem; - } - .blacklist-header::before { - border-color: transparent var(--base-text) var(--base-text) transparent !important; - } - body aside#sidebar div#re621-search { - transition:200ms; - border-radius:0em; - width: 15rem; - overflow:hidden; - } - .re621-search-sticky{ - background-color: var(--bg); - overflow:hidden; - } - input:focus, select:focus, textarea:focus { - background-color: var(--bg-400)!important; - color: var(--base-text)!important; - } - .ui-widget.ui-widget-content { - border:2px solid var(--bg-300)!important; - border-radius: 2px 8px 8px 8px; - overflow:hidden; - } - ul.ui-autocomplete li:hover *, .ui-state-active, { - border: none; - background-color: var(--bg)!important; - } - .ui-autocomplete .autocomplete-arrow { - color: var(--base-text-faded)!important; - } - .ui-widget-content { - background-color: var(--bg-400)!important; - margin-top: .2rem; - margin-left: .05rem; - } - #sidebar > div[style="color:darkorange;margin-bottom:0.5rem;"] { - display:none; - } - .color-muted { - color: var(--base-text)!important; - opacity: .5; - } - #sidebar .general-tag-list a { - color:var(--tag-cat-1)!important; - } - #sidebar .general-tag-list a:hover { - color:var(--tag-cat-1-hover)!important; - } - .category-1 a, a.tag-type-1, .dtext-color-art, .dtext-color-artist { - color:var(--tag-cat-2)!important; - } - .category-1 a:hover, a.tag-type-1:hover { - color:var(--tag-cat-2-hover)!important; - } - .category-3 a, a.tag-type-3, .dtext-color-copy, .dtext-color-copyright { - color:var(--tag-cat-3)!important; - } - .category-3 a:hover, a.tag-type-3:hover { - color:var(--tag-cat-3-hover)!important; - } - .category-4 a, a.tag-type-4, .dtext-color-char, .dtext-color-character { - color:var(--tag-cat-4)!important; - } - .category-4 a:hover, a.tag-type-4:hover { - color:var(--tag-cat-4-hover)!important; - } - .category-5 a, a.tag-type-5, .dtext-color-spec, .dtext-color-species { - color:var(--tag-cat-5)!important; - } - .category-5 a:hover, a.tag-type-5:hover { - color:var(--tag-cat-5-hover)!important; - } - .category-6 a, a.tag-type-6, .dtext-color-inv, .dtext-color-invalid { - color:var(--tag-cat-6)!important; - } - .category-6 a:hover, a.tag-type-6:hover { - color:var(--tag-cat-6-hover)!important; - } - .category-7 a, a.tag-type-7, .dtext-color-meta { - color:var(--tag-cat-7)!important; - } - .category-7 a:hover, a.tag-type-7:hover { - color:var(--tag-cat-7-hover)!important; - } - .category-8 a, a.tag-type-8, .dtext-color-lore { - color:var(--tag-cat-8)!important; - } - .category-8 a:hover, a.tag-type-8:hover { - color:var(--tag-cat-8-hover)!important; - } - .source-links .source-link a { - color: var(--content-link)!important; - transition: 100ms; - &:hover { - color: var(--content-link-hover)!important; - background-color: var(--bg)!important; - padding: 0 .5rem; - border-radius: 4px; - } - } - .low-post-count { - color: var(--user-banned) !important; - } - /* Sidebar searchbox */ - div#page aside#sidebar section#search-box form, div#page aside#sidebar section#re621-insearch form, div#page aside#sidebar section#mode-box form { - display:flex; - flex-direction:column; - height: fit-content; - width: 100%; - } - #search-box { - display: flex; - align-items: center; - justify-content: center; - position:relative; - } - #search-box h1 { - position: absolute; - font-size: 0rem!important; - width: 90%; - pointer-events: none; - z-index:9999; - } - #search-box h1 span { - position:relative; - font-size: .75rem; - pointer-events: auto; - right: 1.5rem; - top: .25rem; - display:flex; - } - .search-help a { - width: 0rem; - height: 100%; - overflow:hidden; - margin-top: 1rem; - margin-right: -1rem; - } - .search-help { - display: flex; - align-items: center; - width: 0; - } - .search-help a::before { - content: url("data:image/svg+xml,%3Csvg height='20.0' viewBox='0 0 24.0 24.0' width='20.0' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10 -4.48 10 -10S17.52 2 12 2zM13 19h-2v-2h2v2zM15.07 11.25l-0.9 0.92C13.45 12.9 13 13.5 13 15h-2v-0.5c0 -1.1 0.45 -2.1 1.17 -2.83l1.24 -1.26c0.37 -0.36 0.59 -0.86 0.59 -1.41 0 -1.1 -0.9 -2 -2 -2s-2 0.9 -2 2L8 9c0 -2.21 1.79 -4 4 -4s4 1.79 4 4c0 0.88 -0.36 1.68 -0.93 2.25z' fill='%23ffffff'/%3E%3C/svg%3E"); - height: 1rem; - width: 1rem; - position: absolute; - opacity: .3; - } - .search-help a:hover::before { - opacity: .5; - transition: 100ms; - } - .search-help::before:hover .search-help { - font-size: .75rem; - } - div#page aside#sidebar section#search-box form input[type="text"], div#page aside#sidebar section#re621-insearch form input[type="text"], div#page aside#sidebar section#mode-box form input[type="text"] { - height: 2rem; - width: 100%; - border-radius: 7.5px; - padding: .5rem 2rem .5rem .5rem; - color: var(--base-text); - background-color: var(--bg-400); - border: 2px solid var(--bg-300); - margin-top: 1rem; - margin-inline: auto; - } - #search-box button { - display:none; - } - /* Fixes select box arrows being black */ - select, select:active, select:focus, select:hover, select.button.btn-neutral, select.button.btn-neutral:active, select.button.btn-neutral:focus, select.button.btn-neutral:hover { - background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' style='opacity:.3'%3E%3Cpath fill='%23fff' d='M12 14.975q-.2 0-.375-.062T11.3 14.7l-4.6-4.6q-.275-.275-.275-.7t.275-.7q.275-.275.7-.275t.7.275l3.9 3.9l3.9-3.9q.275-.275.7-.275t.7.275q.275.275.275.7t-.275.7l-4.6 4.6q-.15.15-.325.213t-.375.062Z'/%3E%3C/svg%3E") no-repeat; - background-position: 100% 50% !important; - -moz-appearance: none; - -webkit-appearance: none; - appearance: none; - } - select#image-resize-selector { - padding-right: 20px; - } - - /* Notices */ - - div#c-posts div#a-show div#avoid-posting-notice { - background-color: var(--bg); - border-color: var(--bg); - border-left: 0.25rem solid var(--flagged) !important; - margin:0; - overflow: unset !important; - & * { - margin:0; - min-width: unset; - font-size: 1rem; - } - & h3 { - color: var(--flagged); - font-size:1.25rem; - } - & li * { - display:block ruby !important; - } - & .artist a { - color: var(--tag-cat-2)!important; - &:hover { - color: var(--tag-cat-2-hover)!important; - } - } - } - div#c-posts div#a-show div#avoid-posting-notice ul { - display:flex; - flex-direction: row; - } - div#c-posts div#a-show div#avoid-posting-notice li { - display:flex; - flex-direction: row; - align-items: center; - } - - div#c-posts div.notice.notice-flagged, div#c-posts div.notice.notice-deleted { - background-color: var(--flagged)!important; - border-left: .25rem solid var(--elements-highlight)!important; - border-right: 0px solid pink!important; - border-top: 0px solid pink!important; - border-bottom: 0px solid pink!important; - overflow:hidden; - min-width: fit-content; - } - .notice-flagged a[href*="/post_replacements"] { - font-size: 0; - width: 275px; - position: relative; - margin-left: 135px; - pointer-events: none; - padding-top: .4rem; - &::before { - font-size: 1rem; - content: "View the pending replacements:"; - pointer-events: none!important; - color: var(--base-text); - position:relative; - user-select: inherit; - } - &::after { - font-size: 1rem; - content: " here."; - position:relative; - pointer-events: auto; - } - } - .notice-flagged:nth-child(1) { - display: flex; - flex-direction: column; - } - .notice-pending ~ .notice-flagged { - font-size: 0.85rem; - a { - font-size: 0.85rem; - margin: 0; - pointer-events: auto; - &::before { - font-size: .85rem; - content: "" !important; - pointer-events: none!important; - color: var(--base-text); - position:relative; - user-select: inherit; - } - &::after { - font-size: .85rem; - content: "" !important; - position:relative; - pointer-events: auto; - }} - - } - div#c-posts div.notice ul { - margin-left: .25rem; - } - .notice-flagged:nth-child(1) > p { - color: transparent!important; - position: relative; - display:flex; - align-items: center; - } - .notice-flagged:nth-child(1) > p::before { - content: "This post was flagged for review."; - color: var(--base-text); - position:absolute; - display:flex; - align-items: center; - justify-content: center; - } - .notice-flagged p a[href="/wiki_pages?title=howto%3Aflag"] { - font-size: 0; - } - .notice-flagged p a[href="/wiki_pages?title=howto%3Aflag"]::before { - content: url("data:image/svg+xml,%3Csvg height='20.0' viewBox='0 0 24.0 24.0' width='20.0' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10 -4.48 10 -10S17.52 2 12 2zM13 19h-2v-2h2v2zM15.07 11.25l-0.9 0.92C13.45 12.9 13 13.5 13 15h-2v-0.5c0 -1.1 0.45 -2.1 1.17 -2.83l1.24 -1.26c0.37 -0.36 0.59 -0.86 0.59 -1.41 0 -1.1 -0.9 -2 -2 -2s-2 0.9 -2 2L8 9c0 -2.21 1.79 -4 4 -4s4 1.79 4 4c0 0.88 -0.36 1.68 -0.93 2.25z' fill='%23c3ccd4ff'/%3E%3C/svg%3E"); - opacity: .6; - } - .notice-flagged p a[href="/wiki_pages?title=howto%3Aflag"]:hover::before { - opacity: 1; - } - div#c-posts div.notice.notice-pending { - min-width: fit-content; - min-height: fit-content; - border-right: none!important; - border-bottom: none!important; - border-top: none!important; - } - .bottom-notices { - height: fit-content; - margin-right: auto; - margin-bottom: .5rem; - display: flex; - align-items: self-start; - width: 50ch; - border-radius: .25rem; - } - .bottom-notices * { - margin: 0 .25rem; - } - .bottom-notices:empty { - display:none!important; - } - div#c-posts div.notice.notice-pending::before { - content: "This post is pending moderator approval"; - font-size: 1.1rem; - margin-left: .5rem; - } - div#c-posts div.notice.notice-pending a { - display:flex; - height:0; - width:auto; - place-items:center; - } - div#c-posts div.notice.notice-pending a::after { - content: url("data:image/svg+xml,%3Csvg height='20.0' viewBox='0 0 24.0 24.0' width='20.0' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10 -4.48 10 -10S17.52 2 12 2zM13 19h-2v-2h2v2zM15.07 11.25l-0.9 0.92C13.45 12.9 13 13.5 13 15h-2v-0.5c0 -1.1 0.45 -2.1 1.17 -2.83l1.24 -1.26c0.37 -0.36 0.59 -0.86 0.59 -1.41 0 -1.1 -0.9 -2 -2 -2s-2 0.9 -2 2L8 9c0 -2.21 1.79 -4 4 -4s4 1.79 4 4c0 0.88 -0.36 1.68 -0.93 2.25z' fill='%23ffffff'/%3E%3C/svg%3E"); - opacity: .3; - } - div#c-posts div.notice.notice-pending a:hover::after { - opacity: .5; - } - div#c-posts div.notice.notice-pending { - background-color: var(--bg)!important; - border-left: .25rem solid var(--elements-highlight)!important; - font-size: 0; - height: 100%; - position: relative; - display: flex; - flex-wrap: wrap; - align-items: center; - justify-content: center; - min-width: fit-content; - 0.25rem .25rem 0.25rem - p { - margin-top: .5rem; - font-size: .75rem; - border-top: 1px solid var(--bg-400); - } - } - div#page div.site-notice { - background-color: var(--bg)!important; - border: 2px solid var(--bg-400)!important; - border-radius: 8px; - color: var(--base-text)!important; - margin-inline: auto; - margin-bottom: 1rem; - } - div#page div.site-notice:not(open) { - overflow:hidden; - } - div#notice { - background-color: var(--bg)!important; - /*height: 2rem;*/ - /*width: 20%!important;*/ - top: 3rem!important; - /*left: 40%;*/ - margin-inline: auto; - position: absolute; - display:flex; - align-items: center; - justify-content: center; - border-radius: .5rem; - border: none; - border: .25rem solid var(--favorite-button)!important; - color: var(--base-text)!important; - } - a#close-notice-link { - width: 0; - height: 100%; - font-size: 0; - display:flex; - align-items: center; - justify-content: center; - position: relative; - margin-left: auto; - margin-right: 1.25rem; - } - div#news .closebutton { - display: flex; - align-items: center; - justify-content: center; - width: 0; - margin-top: 0px; - margin-right:.5rem; - font-size: 0; - } - div#news .closebutton::before { - content: url("data:image/svg+xml,%3Csvg height='24.0' viewBox='0 0 18.0 18.0' width='24.0' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 11.87 L11.87 13 L9 10.13 L6.13 13 L5 11.87 L7.87 9 L5 6.13 L6.13 5 L9 7.87 L11.87 5 L13 6.13 L10.13 9 L13 11.87 Z M9 1 C4.58 1 1 4.58 1 9 C1 13.42 4.58 17 9 17 C13.42 17 17 13.42 17 9 C17 4.58 13.42 1 9 1 L9 1 Z' fill='%23ffffff' stroke-width='1.0'/%3E%3C/svg%3E"); - opacity: .3; - height: 2rem; - width: 1.5rem; - position: absolute; - display:flex; - justify-content: center; - align-items: center; - } - div#news .closebutton:hover::before { - opacity: .5; - } - a#close-notice-link::before { - content: url("data:image/svg+xml,%3Csvg height='28.0' viewBox='0 0 18.0 18.0' width='28.0' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 11.87 L11.87 13 L9 10.13 L6.13 13 L5 11.87 L7.87 9 L5 6.13 L6.13 5 L9 7.87 L11.87 5 L13 6.13 L10.13 9 L13 11.87 Z M9 1 C4.58 1 1 4.58 1 9 C1 13.42 4.58 17 9 17 C13.42 17 17 13.42 17 9 C17 4.58 13.42 1 9 1 L9 1 Z' fill='%23ffffff' stroke-width='1.0'/%3E%3C/svg%3E"); - opacity: .3; - height: 2rem; - width: 2rem; - font-size: 4em; - position: absolute; - display:flex; - justify-content: center; - align-items: center; - } - a#close-notice-link:hover::before{ - opacity: .5; - } - div#notice span { - margin: .5rem 1rem; - font-size: 1.1rem; - } - div#page > div#april-fools.site-notice { - border: 0 !important; - } - -/* Posts page stuff */ - search-content > post post-info{ - background-color: var(--bg-400); - } - search-content > post[sound="true"] span.post-sound { - bottom: 2.5rem; - } - .video-duration { - position: absolute; - bottom: 1.45rem!important; - left: 0; - height: fit-content; - background-color: #00000080!important; - font-family: monospace!important; - padding: .1rem .2rem!important; - border-radius: 0 4px 4px 0!important; - z-index: 2!important; - } - .button { - transition: 100ms; - } - .button.score-neutral { - background-color: var(--bg-400)!important; - color: var(--base-text)!important; - } - .button.score-neutral:hover { - background-color: var(--bg)!important; - } - .button.score-positive { - background-color: var(--favorite-button)!important; - color: var(--base-text)!important; - } - .button.score-positive:hover { - background-color: var(--favorite-button-hover)!important; - color: var(--button-text-hover-secondary)!important; - } - .button.score-negative { - background-color: var(--remove-favorite)!important; - color: var(--base-text)!important; - } - .button.score-negative:hover{ - background-color: var(--remove-favorite-hover)!important; - color: var(--button-text-hover-secondary)!important; - } - .button.btn-success { - background-color: var(--favorite-button)!important; - color: var(--base-text)!important; - } - .button.btn-success:hover { - background-color: var(--favorite-button-hover)!important; - color: var(--button-text-hover-secondary)!important; - } - .button.btn-danger { - background-color: var(--remove-favorite)!important; - color: var(--base-text)!important; - } - .button.btn-danger:hover { - background-color: var(--remove-favorite-hover)!important; - color: var(--button-text-hover-secondary)!important; - } - a.subscribe-button-major { - background-color: var(--favorite-button)!important; - color: var(--base-text)!important; - box-shadow: none; - } - a.subscribe-button-major:hover { - background-color: var(--favorite-button-hover)!important; - color: var(--button-text-hover-secondary)!important; - } - a.subscribe-button-major[subscribed="true"] { - background-color: var(--remove-favorite)!important; - color: var(--base-text)!important; - } - a.subscribe-button-major[subscribed="true"]:hover { - background-color: var(--remove-favorite-hover)!important; - color: var(--button-text-hover-secondary!important); - } - .button.btn-warn { - background-color: var(--warn-button)!important; - color: var(--base-text)!important; - } - .button.btn-warn:hover { - background-color: var(--warn-button-hover)!important; - color: var(--button-text-hover-secondary)!important; - } - search-content post[fav="true"] button.button.voteButton.fav { - color: var(--actions-fav-true); - } - search-content post[fav="true"]:not(:hover) button.button.voteButton.fav { - background-color: var(--bg-400)!important; - } - search-content > post post-info{ - background-color: var(--bg-400)!important; - } - search-content post[fav="true"] button.button.voteButton.fav { - color: var(--actions-fav-true); - } - search-content post[fav="true"]:not(:hover) button.button.voteButton.fav { - background-color: var(--bg-400)!important; - } - search-content button.button.voteButton.fav { - display:flex; - justify-content: center; - width: 3.5ch; - max-height: 1.5rem; - } - search-content post[fav="true"] button.button.voteButton.fav::before { - content: url("data:image/svg+xml,%3Csvg height='20.0' viewBox='0 0 17.0 16.0' width='20.0' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.1667 2.6672C10.104 2.6672 9.12 3.2252 8.5 4.0539C7.88 3.2252 6.896 2.6672 5.8333 2.6672C3.9953 2.6672 2.5 4.1626 2.5 6.0006C2.5 9.6612 7.916 13.0886 8.1473 13.2326C8.2553 13.2999 8.378 13.3339 8.5 13.3339C8.622 13.3339 8.7447 13.2999 8.8527 13.2326C9.084 13.0886 14.5 9.6612 14.5 6.0006C14.5 4.1626 13.0047 2.6672 11.1667 2.6672Z' fill='%23be7aa1'/%3E%3C/svg%3E"); - } - search-content post[fav="true"] button.button.voteButton.fav:hover::before { - content: url("data:image/svg+xml,%3Csvg height='20.0' viewBox='0 0 17.0 16.0' width='20.0' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.1667 2.6672C10.104 2.6672 9.12 3.2252 8.5 4.0539C7.88 3.2252 6.896 2.6672 5.8333 2.6672C3.9953 2.6672 2.5 4.1626 2.5 6.0006C2.5 9.6612 7.916 13.0886 8.1473 13.2326C8.2553 13.2999 8.378 13.3339 8.5 13.3339C8.622 13.3339 8.7447 13.2999 8.8527 13.2326C9.084 13.0886 14.5 9.6612 14.5 6.0006C14.5 4.1626 13.0047 2.6672 11.1667 2.6672Z' fill='%23ffa5d9'/%3E%3C/svg%3E"); - } - search-content button.button.voteButton.fav::before { - content: url("data:image/svg+xml,%3Csvg height='20.0' viewBox='0 0 17.0 16.0' width='20.0' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.1667 2.6672C10.104 2.6672 9.12 3.2252 8.5 4.0539C7.88 3.2252 6.896 2.6672 5.8333 2.6672C3.9953 2.6672 2.5 4.1626 2.5 6.0006C2.5 9.6612 7.916 13.0886 8.1473 13.2326C8.2553 13.2999 8.378 13.3339 8.5 13.3339C8.622 13.3339 8.7447 13.2999 8.8527 13.2326C9.084 13.0886 14.5 9.6612 14.5 6.0006C14.5 4.1626 13.0047 2.6672 11.1667 2.6672Z' fill='%23c3ccd4'/%3E%3C/svg%3E"); - display:flex; - align-items: center; - justify-content: center; - } - search-content button.button.voteButton.fav:hover::before { - content: url("data:image/svg+xml,%3Csvg height='20.0' viewBox='0 0 17.0 16.0' width='20.0' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.1667 2.6672C10.104 2.6672 9.12 3.2252 8.5 4.0539C7.88 3.2252 6.896 2.6672 5.8333 2.6672C3.9953 2.6672 2.5 4.1626 2.5 6.0006C2.5 9.6612 7.916 13.0886 8.1473 13.2326C8.2553 13.2999 8.378 13.3339 8.5 13.3339C8.622 13.3339 8.7447 13.2999 8.8527 13.2326C9.084 13.0886 14.5 9.6612 14.5 6.0006C14.5 4.1626 13.0047 2.6672 11.1667 2.6672Z' fill='%23fff'/%3E%3C/svg%3E"); - } - #mode-box form { - border-radius: 8px; - overflow:hidden; - } - #mode-box form select, #set-id { - background-color: var(--bg-400); - border-radius: 8px!important; - padding: .25rem; - color: var(--base-text); - border: 2px solid var(--bg-300); - overflow:hidden; - } - #mode-box form select:focus { - border-radius: 8px 8px 0 0; - } - #page[data-mode-menu="edit"] { - background-color: var(--mode-edit)!important; - } - #page[data-mode-menu="open"] { - background-color: var(--mode-fullscreen)!important; - } - #page[data-mode-menu="add-fav"] { - background-color: var(--mode-add-fav)!important; - } - #page[data-mode-menu="remove-fav"] { - background-color: var(--mode-remove-fav)!important; - } - #page[data-mode-menu="blacklist"] { - background-color: var(--mode-blacklist)!important; - } - #page[data-mode-menu="download"] { - background-color: var(--mode-download)!important; - } - #page[data-mode-menu="add-to-set"] { - background-color: var(--mode-edit)!important; - } - #page[data-mode-menu="remove-from-set"] { - background-color: var(--mode-edit)!important; - } - .button.btn-neutral { - background-color: var(--bg)!important; - color:var(--base-text)!important; - transition: var(--header-link-transition); - } - .button.btn-neutral:hover { - background-color: var(--bg-400)!important; - color:var(--base-text)!important; - } - .bg-foreground { - background-color: var(--bg)!important; - } - #blacklist-box.inline-blacklist { - padding: .15rem; - background-color:var(--bg-400); - border-left: .25rem solid var(--elements-highlight); - color:var(--base-text); - border-radius: .15rem; - overflow: hidden; - min-width: 20%; - transition:200ms; - display:flex; - flex-direction: column; - position: relative; - } - #sidebar #disable-all-blacklists, #sidebar #re-enable-all-blacklists { - position: relative; - top: auto; - left: auto; - } - #disable-all-blacklists, #re-enable-all-blacklists { - position: absolute; - top: .2rem; - left: 17ch; - } - #disable-all-blacklists *, #sidebar #blacklist-box #disable-all-blacklists { - color: var(--remove-favorite)!important; - } - #re-enable-all-blacklists *, #sidebar #blacklist-box #re-enable-all-blacklists { - color: var(--favorite-button)!important; - } - .styled-dtext div.blacklisted { - margin: .5rem 0!important; - } - #image-container.blacklisted, .styled-dtext div.post-thumbnail.blacklisted.dtext[data-status="active"] { - overflow:hidden; - border-radius: 4px!important; - } - .blacklisted { - .picture-container { - position: relative; - display: flex; - align-items: center!important; - justify-content: center!important; - &::before { - content: "Blacklisted"; - font-weight:bold; - background-color: var(--blacklisted-bg); - color: var(--blacklisted-text); - position: absolute; - display: flex; - align-items: center!important; - justify-content: center!important; - font-size: 1.3rem; - width: 100%; - aspect-ratio: 1/1; - } - } - } - #image-container.blacklisted { - position:relative; - &::before { - content: "Blacklisted"; - background-color: var(--blacklisted-bg); - color: var(--blacklisted-text); - font-weight:bold; - position: absolute; - display: flex; - align-items: center!important; - justify-content: center!important; - font-size: 1.3rem; - width: 100%; - height: 100%; - aspect-ratio: 1/1; - } - } - #image-container.blacklisted .styled-dtext div.post-thumbnail.blacklisted.dtext { - border-radius: 0!important; - width: 10rem!important; - margin-right: auto; - } - .post-preview.post-status-deleted a { - overflow: hidden; - display: flex; - align-items: center; - justify-content: center; - position: relative; - img { - opacity: 0; - } - } - .post-preview.post-status-deleted a::before { - content: "Deleted"; - background-color: var(--deleted-bg); - color: var(--deleted-text); - font-weight: bold; - position: absolute; - display: flex; - align-items: center!important; - justify-content: center!important; - font-size: 1.3rem; - bottom: 0; - opacity: 1; - height: 100%; - width: 95%; - aspect-ratio: 1/1; - } - article.thumbnail .desc a::before{ - display: none; - } - /* Link colors */ - #description a, #post-description-container .styled-dtext a, .about-section a, .comment-post-grid .styled-dtext .dtext-link, .dtext-formatter .dtext-link:not([href^="/user/show/"], #c-wiki-pages a) { - color: var(--content-link)!important; - &:hover { - color: var(--content-link-hover)!important; - } - } - - #description a, .comment-post-grid .styled-dtext .dtext-link[href^="/user/show/"] { - color: var(--base-link)!important; - &:hover { - color: var(--base-link-hover)!important; - } - } - a[href^="/tickets/new?disp_id"] { - color: var(--user-banned)!important; - } - a[href^="/tickets/new?disp_id"]:hover { - color: var(--user-banned-hover)!important; - } - - /* This puts a Discord logo in front of any link that contains "discord.com" in it. Not sure if it should be in the main theme. - a[href*="discord.com"] { - &::before { - content: url("data:image/svg+xml,%3Csvg role='img' height='16.0' viewBox='0 -1 25 21' fill='%23ffffff' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EDiscord%3C/title%3E%3Cpath d='M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z'/%3E%3C/svg%3E"); - opacity: .8; - mix-blend-mode: soft-light; - } - } - a[href*="discord"]:hover { - &::before { - opacity: 1; - mix-blend-mode: soft-light; - } - }*/ - /* Popular page */ - #c-popular { - background-color: var(--bg)!important; - padding: 2rem; - border-radius: 8px; - display: flex; - flex-direction: column; - overflow:hidden; - } - #c-popular h1 { - margin-inline: auto; - margin-bottom: 1rem; - } - #c-popular #posts > div { - margin-inline: auto; - width: 90%; - } - #c-popular #posts > div { - display: grid; - grid-template-columns: repeat( auto-fill, minmax(175px, 1fr) ); - max-width: 90vw; - min-height: fit-content; - position:relative; - } - #c-popular #posts > div > article { - min-width: fit-content; - margin-inline: auto; - } - /* New popular page gridification */ - #c-popular #a-index { - display: grid; - grid-template-columns: repeat(10, 1fr); - grid-template-rows: 3rem 3rem 1fr; - grid-column-gap: 0px; - grid-row-gap: 0px; - position:relative; - } - #c-popular #a-index h1 { - grid-area: 1 / 1 / 3 / 5; - height:fit-content; - } - #c-popular #popular-nav-links { - grid-area: 2 / 5 / 3 / 11; - height:fit-content; - margin:none; - } - #c-popular section.blacklist-ui.blacklist-ui.blacklist-inline { - grid-area: 2/2/2/2; - margin-right:auto; - padding: 0 0 1rem 0; - display:flex; - position:relative; - flex-direction: column; - & .blacklist-header { - height:fit-content; - &::before { - border-color: transparent var(--base-text) var(--base-text) transparent !important; - } - } - &[collapsed="true"] .blacklist-filters { - display:none; - } - & .blacklist-filters { - z-index: 99; - display:grid; - grid-template-columns: repeat(4,1fr); - background-color:var(--bg); - border: 2px solid var(--bg-300); - border-radius: 6px; - position:absolute; - padding:.5rem; - top:calc(80% + 1rem); - overflow:unset; - max-width:calc(80ch + 2rem + 20px); - & li[enabled="true"] a { - border-bottom:2px solid var(--favorite-button); - } - & li[enabled=false] a { - border-bottom:2px solid var(--flagged); - } - & a { - height:2rem; - width: 10ch; - padding-inline:.5rem; - margin-inline:auto; - background-color: var(--bg); - white-space:nowrap; - overflow: hidden; - text-overflow: ellipsis; - display:block; - position:relative; - -webkit-line-clamp: 2; - -moz-line-clamp: 2; - -ms-line-clamp: 2; - z-index: 101; - & span { - position:absolute; - bottom:0; - right:0; - } - } - &::before { - content:""; - width: .75rem; - height: .75rem; - position:absolute; - top: calc(-.6rem + 1px); - left: .75rem; - background-color: var(--bg); - border-top: 2px solid var(--bg-300); - border-left: 2px solid var(--bg-300); - transform:rotate(45deg); - z-index: 100; - } - } - & .blacklist-footer { - margin-left: .5rem; - } - } - #c-popular #a-index #posts { - grid-area: 3 / 1 / 11 / 11; - height:fit-content; - & article a { - height:150px; - width:175px; - position:relative; - display:grid; - place-items:center; - overflow:hidden; - border-radius: 6px 6px 0 0; - & picture { - width: 100%; - height:100%; - display:grid; - place-items:center; - } - & img { - height:100%; - width:100%; - max-height:150%; - max-width:150%; - object-fit:cover; - transition:200ms; - transform-origin:top; - position: absolute; - top:0; - left:0; - right:0; - bottom:0; - } - &:hover img { - height:105%; - width:105%; - } - } - } - - - /* Image content page */ - div#image-and-nav { - min-width: 20%; - } - div#c-posts div.nav-notice{ - background-color: var(--bg)!important; - } - div#nav-links-top { - border-radius: 8px 8px 0 0!important; - overflow:clip; - } - div#nav-links-bottom { - border-radius: 0 0 8px 8px!important; - margin-top: -3px; - overflow:clip; - } - div#a-show div#nav-links-left { - background-color: var(--bg-400) !important; - border: 2px solid var(--bg-300) !important; - border-radius:8px; - overflow:clip; - width:calc(100% + .25rem); - position:relative; - margin-inline:auto; - & .nav-name { - width: fit-content !important; - max-width: 20ch; - white-space: wrap !important; - margin-top: .25rem; - } - & .active.post-nav { - display:flex; - flex-direction: column; - height:fit-content; - & .nav-left-down { - display:flex; - gap:1rem; - } - & a.nav-link { - padding: 0; - } - } - & *, .nav-block.search-seq-nav { - background:none !important; - border: none !important; - } - & .nav-left-down { - margin-top: 0; - } - } - div#c-posts div#a-show .pool-nav, div#c-posts div#a-show .search-seq-nav, div#c-posts div#a-show .set-nav { - background-color: var(--bg)!important; - color:var(--base-text)!important; - } - div#c-posts div.notice.notice-parent, div#c-posts div.notice.notice-child { - background-color: var(--bg-400)!important; - border: 2px solid var(--bg-300)!important; - border-radius: .50rem; - } - #posts-container article.thumbnail .desc, #c-post-approvals article.thumbnail .desc, #c-post-flags article.thumbnail .desc,#c-post-replacements article.thumbnail .desc { - border-radius: 0 0 .5rem .5rem; - display: flex; - flex-direction: row; - background-color: var(--bg-400); - } - div#c-posts div.notice.notice-parent article.thumbnail .desc, div#c-posts div.notice.notice-child article.thumbnail .desc, .vertical-section article.thumbnail .desc{ - background-color: var(--bg-300)!important; - border-radius: 0 0 .5rem .5rem; - display: flex; - flex-direction: row; - } - div#c-posts div.notice.notice-parent article.thumbnail .desc div, div#c-posts div.notice.notice-child article.thumbnail .desc div, .vertical-section article.thumbnail .desc div { - display: flex; - justify-content: space-around; - } - div#c-posts div.notice.notice-parent article.thumbnail .desc div *, div#c-posts div.notice.notice-child article.thumbnail .desc div *, .vertical-section article.thumbnail .desc div * { - margin: 0; - } - article.thumbnail[data-tags~="animated"] > a::before, article.thumbnail[data-file-ext~="webm"] > a::before { - background-color: var(--bg-300)!important; - color: var(--base-text)!important; - border: 2px solid var(--bg-400)!important; - right: .5rem; - top: .5rem; - position:absolute; - height: 20px; - width: 20px; - text-align: center; - display:flex; - align-items: center; - justify-content: center; - } - div#c-iqdb-queries div#a-check article.thumbnail{ - border: 0; - background-color: #00000040!important; - border-radius: 6px; - } - article.thumbnail .desc{ - background-color: var(--bg-400) !important; - } - /* Editing mode */ - div#c-posts div#a-show #edit .edit-submit { - background-color: var(--bg)!important; - border-radius: 0px 4px 0px 0px; - border-top: 2px solid var(--bg-300); - border-right: 2px solid var(--bg-300); - } - div#c-posts div#a-show #edit .edit-submit input { - &:hover { - background-color: var(--bg-300)!important; - } - } - - div.related-tags { - background-color: var(--bg-400)!important; - } - div.related-tags { - padding: .25rem !important; - } - div.related-tags .tag-active { - background: var(--bg-300) !important; - border-radius: 4px; - padding: 0 .5rem 0 .5rem; - } - /* Post Description */ - .styled-dtext details, .styled-dtext div.expandable, .styled-dtext pre { - background-color:var(--bg)!important; - border-left-color:var(--elements-highlight)!important; - color:var(--base-text); - border-right: none!important; - border-top: none!important; - border-bottom: none!important; - .styled-dtext div.expandable, details { - border-right: none; - border-top: none; - border-bottom: none; - background-color: var(--bg-400)!important; - } - } - .styled-dtext div.expandable > div.expandable-header { - display: flex; - } - .styled-dtext div.expandable > div.expandable-header > .section-arrow { - margin-right: .3rem; - display:flex; - align-items: center; - justify-content: center; - position: relative; - width: .75rem; - aspect-ratio: 1/1; - height:100%; - } - /* Comments */ - .comment-post-grid { - background-color: var(--bg)!important; - transition: 200ms; - } - .below-threshold { - transition: 200ms; - .dtext-container { - background-color: var(--bg-400); - width: fit-content; - padding: .5rem; - border-radius: 4px; - } - .dtext-container .styled-dtext { - opacity: 0; - user-select: none; - transition: 200ms; - } - } - .below-threshold { - .dtext-container:hover { - background-color: var(--bg); - transition: 200ms; - } - .dtext-container:hover .styled-dtext { - opacity: 1; - user-select: auto; - } - } - .score-positive a, search-content post[vote="1"] button.button.voteButton.vote[action=up] { - color: var(--favorite-button)!important; - } - .score-negative a, search-content post[vote="-1"] button.button.voteButton.vote[action=down] { - color: var(--remove-favorite)!important; - } - div.comments-for-post div.list-of-comments article.comment, div#c-blips article.blip, #p-index-by-comment div.comments article.comment { - border-radius: 8px; - overflow:hidden; - .author-info { - position:relative; - display: flex; - flex-direction: column; - align-items: center; - justify-content: space-between; - border-right: 2px solid var(--bg-300)!important; - height: 100%; - width: 90%; - .name-rank { - width: 100%; - color: var(--base-text-faded); - font-size: .75rem; - text-align: center; - user-select: none; - h4 { - width: fit-content; - margin-inline: auto; - user-select: text; - } - a { - font-size: 1rem; - margin-inline: auto; - width: fit-content; - } - } - } - .avatar, .blacklisted { - display: flex; - align-items: center; - justify-content: center; - margin: .5rem auto; - max-width: 90%; - position: relative; - aspect-ratio: 1/1; - border-radius: var(--avatar-border-radius); - overflow: hidden; - a { - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; - border-radius: var(--avatar-border-radius); - } - .post-thumbnail { - display: flex; - align-items: center; - justify-content: center; - border: 5px solid var(--elements-highlight); - aspect-ratio: 1/1; - } - .post-thumbnail, img { - border-radius: var(--avatar-border-radius); - object-fit: cover; - width: 100%; - margin-inline: auto; - aspect-ratio: 1/1; - user-select: none; - } - .post-thumbnail[data-status="deleted"] { - a { - height: 100%; - aspect-ratio: 1/1; - border-radius: var(--avatar-border-radius); - overflow: hidden; - position: relative; - } - a::before { - content: "Deleted"; - background-color: var(--deleted-bg); - border: 5px solid var(--elements-highlight); - color: var(--deleted-text); - font-weight:bold; - position: absolute; - display: flex; - height: 100%; - aspect-ratio: 1/1; - align-items: center; - justify-content: center; - font-size: 1.5rem; - border-radius: var(--avatar-border-radius); - } - } - - } - .blacklisted { - a::before { - content: "Blacklisted"; - background-color: var(--blacklisted-bg); - color: var(--blacklisted-text); - font-weight: bold; - height: 100%; - width: 100%; - position: absolute; - display: flex; - align-items: center; - justify-content: center; - font-size: 1.25rem; - } - } - .post-time { - width: fit-content; - margin-left: auto; - margin-bottom: .5rem; - margin-top: auto; - bottom: 0; - font-size: .75rem; - user-select: none; - a { - color: var(--base-text-faded)!important; - } - } - } - #c-forum-topics .comment-post-grid .content .content-menu menu{ - gap: .75rem; - ul { - flex-wrap: wrap; - } - .votes { - display:flex; - li { - background-color: var(--bg-400); - margin: .25rem; - height: 28px; - padding: 0 .5rem; - border-radius: 4px; - display:flex; - align-items:center; - justify-content: space-around; - .fa-regular { - margin-right: .25rem; - } - } - li.forum-post-vote-block { - gap: .5rem; - .fa-regular { - margin-right: 0; - } - } - } - } - if buttons { - .blip .content-menu menu { - gap: .25rem; - } - } - .comment-post-grid .content { - margin: .5rem; - color: var(--base-text)!important; - blockquote blockquote { - margin: .5rem; - } - pre { - background-color: var(--bg-400)!important; - } - img { - border-radius: 4px; - } - .forum-post-votes-list { - margin-top: 1.5em !important; - } - - if buttons { - .content-menu { - margin: .5rem 0; - margin-top: 1rem; - width:fit-content; - menu { - display:flex; - align-items: center; - color: transparent!important; - user-select: none; - /*li:nth-child(2), - li:nth-child(6), - li:nth-child(8){ - display:none; - }*/ - li { - margin: 0; - padding: 0; - } - } - } - p.info { - padding-bottom: .5rem; - } - .re621-comment-reply:hover, .re621-forum-post-reply:hover, .reply-link:hover, .blip-reply-link:hover, a.blip-atme-link:hover { - &::before { - background-color: var(--bg-300)!important; - } - } - .re621-comment-reply, .re621-forum-post-reply, .reply-link, .blip-reply-link { - font-size: 0; - display:flex; - align-items: center; - justify-content: center; - width: 26px; - position:relative; - &::before { - content: ""; - aspect-ratio: 1/1; - width: 28px; - position:absolute; - background-color: var(--bg-400); - border-radius: 4px; - } - &::after { - content: url("data:image/svg+xml,%3Csvg height='20.0' viewBox='0 0 24.0 24.0' width='20.0' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 8.2667V4L3 11.4667L10 18.9333V14.56C15 14.56 18.5 16.2667 21 20C20 14.6667 17 9.3333 10 8.2667Z' fill='%23ffffffff'/%3E%3C/svg%3E"); - position:absolute; - mix-blend-mode: soft-light; - } - } - .content-menu a:not([data-bid])[href^="/blips"]:hover{ - &::before { - background-color: var(--bg-300)!important; - } - } - .content-menu a:not([data-bid])[href^="/blips"] { - font-size: 0; - display:flex; - align-items: center; - justify-content: center; - width: 26px; - position:relative; - &::before { - content: ""; - aspect-ratio: 1/1; - width: 28px; - position:absolute; - background-color: var(--bg-400); - border-radius: 4px; - } - &::after { - content: url("data:image/svg+xml,%3Csvg height='24.0' viewBox='0 0 24.0 24.0' width='24.0' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.998,3C2.894,3 1.998,3.895 1.998,5V17C1.998,18.104 2.894,19 3.998,19H6.9981V23L10.998,19H19.998C21.103,19 21.998,18.104 21.998,17V5C21.998,3.895 21.103,3 19.998,3H3.998Z' fill='%23ffffffff'/%3E%3C/svg%3E"); - position:absolute; - mix-blend-mode: soft-light; - } - } - .content-menu a.blip-atme-link { - font-size: 0; - display:flex; - align-items: center; - justify-content: center; - width: 26px; - position:relative; - &::before { - content: ""; - aspect-ratio: 1/1; - width: 28px; - position:absolute; - background-color: var(--bg-400); - border-radius: 4px; - } - &::after { - content: url("data:image/svg+xml,%3Csvg height='24.0' viewBox='0 0 24.0 24.0' width='24.0' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12,2C6.486,2 2,6.486 2,12C2,17.515 6.486,22 12,22C14.039,22 15.993,21.398 17.652,20.259L16.521,18.611C15.195,19.519 13.633,20 12,20C7.589,20 4,16.411 4,12C4,7.589 7.589,4 12,4C16.411,4 20,7.589 20,12V12.782C20,14.17 19.402,15 18.4,15L18.398,15.018C18.338,15.005 18.273,15 18.209,15H18C17.437,15 16.6,14.182 16.6,13.631V12C16.6,9.464 14.537,7.4 12,7.4C9.463,7.4 7.4,9.463 7.4,12C7.4,14.537 9.463,16.6 12,16.6C13.234,16.6 14.35,16.106 15.177,15.313C15.826,16.269 16.93,17 18,17L18.002,16.981C18.064,16.994 18.129,17 18.195,17H18.4C20.552,17 22,15.306 22,12.782V12C22,6.486 17.514,2 12,2ZM12,14.599C10.566,14.599 9.4,13.433 9.4,11.999C9.4,10.565 10.566,9.399 12,9.399C13.434,9.399 14.6,10.565 14.6,11.999C14.6,13.433 13.434,14.599 12,14.599Z' fill='%23ffffffff'/%3E%3C/svg%3E%0A"); - position:absolute; - mix-blend-mode: soft-light; - } - } - .blip-atme-link { - font-size: 0; - margin-inline: .25rem; - } - li[id^="comment-vote-up-"] a { - background-color: var(--bg-400)!important; - height: 28px; - display:flex; - align-items: center; - margin-left: .5rem; - border-radius: 4px 0 0 4px; - padding: 0 .5rem 0 .5rem; - color: var(--base-text)!important; - &:hover { - background-color: var(--favorite-button)!important; - color: var(--base-text)!important; - border-radius: 4px 0 0 4px!important; - } - } - li[id^="comment-vote-up-"].score-positive a { - background-color: var(--favorite-button)!important; - color: var(--base-text)!important; - } - - li[id^="comment-score-"] { - background-color: var(--bg-400); - height: 28px; - display:flex; - align-items: center; - padding: 0 .25rem!important; - user-select:none; - } - li[id^="comment-score-"]:nth-of-type(2) { - border-radius: 4px; - } - li[id^="comment-vote-down-"] a { - background-color: var(--bg-400)!important; - height: 28px; - display:flex; - align-items: center; - margin-right: .5rem; - border-radius: 0 4px 4px 0; - padding: 0 .5rem 0 .5rem; - color: var(--base-text)!important; - &:hover { - background-color: var(--remove-favorite)!important; - color: var(--base-text)!important; - border-radius: 0 4px 4px 0!important; - } - } - li[id^="comment-vote-down-"].score-negative a { - background-color: var(--remove-favorite)!important; - color: var(--base-text)!important; - border-radius: 0 4px 4px 0!important; - } - a[href^="/tickets/new?disp_id"]:hover { - &::before { - background-color: var(--bg-300); - } - } - a[href^="/tickets/new?disp_id"] { - font-size: 0; - display:flex; - align-items: center; - justify-content: center; - width: 26px; - position:relative; - &::before { - content: ""; - aspect-ratio: 1/1; - width: 28px; - position:absolute; - background-color: var(--bg-400); - border-radius: 4px; - } - &::after { - content: url("data:image/svg+xml,%3Csvg height='20.0' viewBox='0 0 24.0 24.0' width='20.0' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 6.002H14V3.002C14 2.45 13.553 2.002 13 2.002H4C3.447 2.002 3 2.45 3 3.002V22.002H5V14.002H10.586L8.293 16.295C8.007 16.581 7.922 17.011 8.076 17.385C8.23 17.759 8.596 18.002 9 18.002H20C20.553 18.002 21 17.554 21 17.002V7.002C21 6.45 20.553 6.002 20 6.002Z' fill='%23f00'/%3E%3C/svg%3E"); - position:absolute; - mix-blend-mode: color-dodge; - opacity: .5; - } - } - .re621-comment-copy-id:hover, .re621-forum-post-copy-id:hover { - &::before { - background-color: var(--bg-300); - } - } - .re621-comment-copy-id, .re621-forum-post-copy-id, .blip { - font-size: 0; - display:flex; - align-items: center; - justify-content: center; - width: 26px; - position:relative; - margin-left: .25rem; - &::before { - content: ""; - aspect-ratio: 1/1; - width: 28px; - position:absolute; - background-color: var(--bg-400); - border-radius: 4px; - } - &::after { - content: url("data:image/svg+xml,%3Csvg height='20.0' viewBox='0 0 24.0 24.0' width='20.0' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.414 1H9C7.897 1 7 1.898 7 3V17C7 18.103 7.897 19 9 19H19C20.103 19 21 18.103 21 17V5.586L16.414 1ZM15 7V2L20 7H15Z' fill='%23ffffffff'/%3E%3Cpath d='M5 5H3V21C3 22.103 3.897 23 5 23H17V21H5V5Z' fill='%23ffffffff'/%3E%3C/svg%3E"); - position:absolute; - mix-blend-mode: soft-light; - } - } - a[class*="-hide-link"]:hover, a[data-confirm^="Are you sure you want to hide this"]:hover { - &::before { - background-color: var(--bg-300); - } - } - a[class*="-hide-link"], a[data-confirm^="Are you sure you want to hide this"] { - font-size: 0; - display:flex; - align-items: center; - justify-content: center; - width: 26px; - position:relative; - &::before { - content: ""; - aspect-ratio: 1/1; - width: 28px; - position:absolute; - background-color: var(--bg-400); - border-radius: 4px; - } - &::after { - content: url("data:image/svg+xml,%3Csvg height='20.0' viewBox='0 0 24.0 24.0' width='20.0' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 7c2.76 0 5 2.24 5 5 0 0.65 -0.13 1.26 -0.36 1.83l2.92 2.92c1.51 -1.26 2.7 -2.89 3.43 -4.75 -1.73 -4.39 -6 -7.5 -11 -7.5 -1.4 0 -2.74 0.25 -3.98 0.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28 0.46 0.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03 -0.3 4.38 -0.84l0.42 0.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-0.05 0.21 -0.08 0.43 -0.08 0.65 0 1.66 1.34 3 3 3 0.22 0 0.44 -0.03 0.65 -0.08l1.55 1.55c-0.67 0.33 -1.41 0.53 -2.2 0.53 -2.76 0 -5 -2.24 -5 -5 0 -0.79 0.2 -1.53 0.53 -2.2zM11.84 9.02l3.15 3.15 0.02 -0.16c0 -1.66 -1.34 -3 -3 -3l-0.17 0.01z' fill='%23ffffff'/%3E%3C/svg%3E") !important; - position:absolute; - mix-blend-mode: soft-light; - } - } - .content-menu a[class*="edit_"]:hover, .content-menu a[href*="edit"]:hover { - &::before { - background-color: var(--bg-300); - } - } - .content-menu a[class*="edit_"], .content-menu a[href*="edit"] { - font-size: 0; - display:flex; - align-items: center; - justify-content: center; - width: 26px; - position:relative; - &::before { - content: ""; - aspect-ratio: 1/1; - width: 28px; - position:absolute; - background-color: var(--bg-400); - border-radius: 4px; - } - &::after { - content: url("data:image/svg+xml,%3Csvg height='24.0' viewBox='0 0 24.0 24.0' width='24.0' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 17.25V21h3.75L17.81 9.94l-3.75 -3.75L3 17.25zM20.71 7.04c0.39 -0.39 0.39 -1.02 0 -1.41l-2.34 -2.34c-0.39 -0.39 -1.02 -0.39 -1.41 0l-1.83 1.83 3.75 3.75 1.83 -1.83z' fill='%23ffffff'/%3E%3C/svg%3E"); - position:absolute; - mix-blend-mode: soft-light; - } - } - } - } - - .post-thumbnail[data-status="deleted"] { - margin: .25rem; - a { - position:relative; - display: flex; - align-items: center!important; - justify-content: center!important; - border-radius: 4px; - overflow:hidden; - } - a::before { - content: "Deleted"; - background-color: var(--deleted-bg); - color: var(--deleted-text); - font-weight:bold; - position: absolute; - display: flex; - height: 100%; - width: 100%; - align-items: center; - justify-content: center; - font-size: 1.5rem; - } - } - .spoiler, .dtext-container .spoiler { - background: #1a1a1a!important; - color: transparent!important; - text-shadow: none!important; - border-radius: 4px; - transition: 100ms; - padding: 0 .25rem; - width: fit-content; - &:hover { - color: var(--base-text)!important; - } - } - .dtext-container .spoiler .dtext-link, .spoiler { - color: #1a1a1a!important; - text-shadow: none!important; - transition: 100ms; - } - .spoiler:hover .dtext-link { - color: var(--content-link)!important; - } - .spoiler:hover .dtext-link:hover { - color: var(--content-link-hover)!important; - } - .user-warning em { - color: var(--flagged); - } - /* Name rank colors */ - a[class^="user-"] { - color: var(--user-member)!important; - &:hover { - color: var(--user-member-hover)!important; - } - } - .user-privileged.with-style { - color: var(--user-privileged)!important; - &:hover { - color: var(--user-privileged-hover)!important; - } - } - .user-contributor.with-style { - color: var(--user-contributor)!important; - &:hover { - color: var(--user-contributor)!important; - } - } - .user-moderator.with-style { - color: var(--user-moderator)!important; - &:hover { - color: var(--user-moderator-hover)!important; - } - } - .user-admin.with-style { - color: var(--user-admin)!important; - &:hover { - color: var(--user-admin-hover)!important; - } - } - .user-former-staff.with-style { - color: var(--user-former-staff)!important; - &:hover { - color: var(--user-former-staff-hover)!important; - } - } - .user-janitor.with-style { - color: var(--user-janitor)!important; - &:hover { - color: var(--user-janitor-hover)!important; - } - } - a.user-blocked, a.user-banned { - color: var(--user-banned)!important; - &:hover { - color: var(--user-banned-hover)!important; - } - } - - if borderRank == 1 { - :root { - --mobileRankOpacity: 0.2; - } - .author-info:has(.user-moderator) .post-thumbnail { - border-color: var(--user-moderator) !important; - background-color: var(--user-moderator) !important; - &::after { - content:''; - height: 100%; - width: 100%; - position:absolute; - z-index: -1; - opacity: var(--mobileRankOpacity); - background-color: var(--user-moderator); - } - @media screen and (max-width: 800px) { - background-color: transparent !important; - } - } - .author-info:has(.user-admin) .post-thumbnail { - border-color: var(--user-admin) !important; - background-color: var(--user-admin) !important; - &::after { - content:''; - height: 100%; - width: 100%; - position:absolute; - z-index: -1; - opacity: var(--mobileRankOpacity); - background-color: var(--user-admin); - } - @media screen and (max-width: 800px) { - background-color: transparent !important; - } - } - .author-info:has(.user-privileged) .post-thumbnail { - border-color: var(--user-privileged) !important; - background-color: var(--user-privileged) !important; - &::after { - content:''; - height: 100%; - width: 100%; - position:absolute; - z-index: -1; - opacity: var(--mobileRankOpacity); - background-color: var(--user-privileged); - } - @media screen and (max-width: 800px) { - background-color: transparent !important; - } - } - .author-info:has(.user-contributor) .post-thumbnail { - border-color: var(--user-contributor) !important; - background-color: var(--user-contributor) !important; - &::after { - content:''; - height: 100%; - width: 100%; - position:absolute; - z-index: -1; - opacity: var(--mobileRankOpacity); - background-color: var(--user-contributor); - } - @media screen and (max-width: 800px) { - background-color: transparent !important; - } - } - .author-info:has(.user-former-staff) .post-thumbnail { - border-color: var(--user-former-staff) !important; - background-color: var(--user-former-staff) !important; - &::after { - content:''; - height: 100%; - width: 100%; - position:absolute; - z-index: -1; - opacity: var(--mobileRankOpacity); - background-color: var(--user-former-staff); - } - @media screen and (max-width: 800px) { - background-color: transparent !important; - } - } - .author-info:has(.user-janitor) .post-thumbnail { - border-color: var(--user-janitor) !important; - background-color: var(--user-janitor) !important; - &::after { - content:''; - height: 100%; - width: 100%; - position:absolute; - z-index: -1; - opacity: var(--mobileRankOpacity); - background-color: var(--user-janitor); - } - @media screen and (max-width: 800px) { - background-color: transparent !important; - } - } - .author-info:has(.user-banned) .post-thumbnail, - .author-info:has(.user-blocked) .post-thumbnail { - border-color: var(--user-banned) !important; - background-color: var(--user-banned) !important; - &::after { - content:''; - height: 100%; - width: 100%; - position:absolute; - z-index: -1; - opacity: var(--mobileRankOpacity); - background-color: var(--user-banned); - } - @media screen and (max-width: 800px) { - background-color: transparent !important; - } - } - } - .comments article { - position:relative; - } - /* fun lil thing for me - suggested by faucet lolll */ - article[data-creator-id="192568"] .author-info { - position:relative; - .name-rank { - font-size: 0!important; - &::after { - content: "Café Dev"; - font-size: .75rem; - } - } - &::after { - content: url("data:image/svg+xml,%3Csvg height='24.0' viewBox='0 0 24.0 24.0' width='24.0' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.58 11.4L17.3 4.01l-0.35 -0.6L7.04 3.41l-0.35 0.6 -4.27 7.39 -0.35 0.6 0.35 0.6 4.27 7.39 0.35 0.6h9.92l0.35 -0.6 4.28 -7.39 0.35 -0.6 -0.36 -0.6zM8.51 10.37L6.88 12l1.63 1.63v2.73L4.15 12l4.37 -4.37v2.74zM11.63 17.3l-2.04 -0.63 3.1 -9.98 2.04 0.64 -3.1 9.97zM15.49 16.37v-2.73L17.12 12l-1.63 -1.63L15.49 7.63L19.85 12l-4.36 4.37z' fill='%23ffffffff'/%3E%3C/svg%3E"); - position: absolute; - display:inline-block; - top:.25rem; - right:.25rem; - mix-blend-mode: soft-light; - opacity:.6; - } - } -/*---- Uncomment this and pull request if you wanna consider yourself a dev faucet, dunno if you want to change your rank from "Priviliged" to "Priviliged Café Dev" or not lolllll - article[data-creator-id="601225"] .author-info { - position:relative; - .name-rank { - font-size: 0!important; - &::after { - content: "Privileged Café Dev"; - font-size: .75rem; - } - }} -----*/ - - - /* Super Secret Helper badges */ - article[data-creator-id="601225"] .author-info, article[data-creator-id="884003"] .author-info{ - position:relative; - &::after { - content: url("data:image/svg+xml,%3Csvg height='16' viewBox='0 0 31.27 29.53' width='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cpath d='M22.8 1 S34.8 9.19 30.24 20.69 S16.61 29 20 25.64 S16 20 11.27 15.64 L22.79 1' fill='%23ffffff7a'/%3E%3Cpath d='M22.07 12.26 C19.54 15.48 15.97 17.09 13.21 16.51 L3.58 28.78 A2 2 0 0 1 0.77 29.12 A2 2 0 0 1 0.42 26.3 L10 14.05 C8.73 11.51 9.43 7.62 12 4.37 C15.19 0.33 20 -1.18 22.79 1 S25.24 8.22 22.07 12.26 Z' fill='%23ffffff'/%3E%3C/g%3E%3C/svg%3E"); - position: absolute; - display:inline-block; - top:.25rem; - right:.25rem; - mix-blend-mode: soft-light; - opacity:.6; - } - } - /* Forums */ - table.striped tr.forum-topic-row { - background-color: transparent!important; - } - table.striped tr.forum-topic-row > td:nth-child(1) { - display: flex; - align-items: center; - .sticky { - margin-left:.25rem; - margin-right:.25rem; - display:flex; - align-items: center; - justify-content: center; - position:relative; - font-size:0!important; - width:20px; - } - .sticky::after { - content:url("data:image/svg+xml,%3Csvg height='24.0' viewBox='0 0 24.0 24.0' width='24.0' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22 12.3698L11.6302 2L10.1479 3.4802L11.6302 4.9625L6.4448 10.1469V10.149L4.9625 8.6667L3.4813 10.149L7.926 14.5927L2 20.5177L3.4813 21.999L9.4073 16.074L13.8521 20.5177L15.3333 19.0365L13.8521 17.5552L19.0365 12.3698H19.0375L20.5188 13.851L22 12.3698Z' fill='%23ffffffff'/%3E%3C/svg%3E"); - position:absolute; - bottom: -.75rem; - mix-blend-mode: soft-light; - } - .new { - margin-left:.25rem; - margin-right: .15rem!important; - display:flex; - align-items: center; - justify-content: center; - position:relative; - font-size:0!important; - width:20px; - } - .new::after { - content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' enable-background='new 0 0 24 24' height='24px' viewBox='0 0 24 24' width='24px' fill='%23ffffff'%3E%3Cg%3E%3Crect fill='none' height='24' width='24'/%3E%3C/g%3E%3Cg%3E%3Cg%3E%3Ccircle cx='19' cy='3' r='3'/%3E%3Cpath d='M6 8V6h9.03c-1.21-1.6-1.08-3.21-0.92-4H4.01c-1.1 0-2 0.89-2 2L2 22l4-4h14c1.1 0 2-0.9 2-2V6.97 C21.16 7.61 20.13 8 19 8H6z M14 14H6v-2h8V14z M18 11H6V9h12V11z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); - position:absolute; - bottom: -.75rem; - mix-blend-mode: soft-light; - } - .locked-topic { - margin-left:.5rem!important; - display:flex; - align-items: center; - justify-content: center; - position:relative; - font-size:0!important; - width:10px; - } - .locked-topic::after { - content:url("data:image/svg+xml,%3Csvg height='20.0' viewBox='0 2 15.0 15.0' width='30.0' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.8 7L10.8 5.5C10.8 4.1 9.4 3 8 3C6.6 3 5.2 4.1 5.2 5.5L5.2 7C4.6 7 4 7.6 4 8.2L4 11.7C4 12.4 4.6 13 5.2 13L10.7 13C11.4 13 12 12.4 12 11.8L12 8.3C12 7.6 11.4 7 10.8 7ZM9.5 7L6.5 7L6.5 5.5C6.5 4.7 7.2 4.2 8 4.2C8.8 4.2 9.5 4.7 9.5 5.5L9.5 7Z' fill='%23ffffff'/%3E%3C/svg%3E"); - position:absolute; - bottom: -.75rem; - mix-blend-mode: soft-light; - } - .forum-post-link { - margin-right: 0rem!important; - margin-left: .25rem!important; - color: var(--content-link)!important; - } - .forum-post-link:hover { - color: var(--content-link-hover)!important; - } - .last-page { - margin-left: .5rem; - position:relative; - display:flex; - align-items: center; - color: var(--base-text-faded)!important; - &:hover { - color: var(--base-text)!important; - } - } - .last-page::after { - content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='20px' viewBox='0 0 20 20' width='20px' fill='%23ffffff'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath d='M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6-6-6zM16 6h2v12h-2z'/%3E%3C/svg%3E"); - opacity: .3; - } - .last-page:hover::after { - opacity: .7; - } - } - table.striped tr.forum-topic-row > td:nth-child(n + 2) { - time { - color: var(--base-text-faded); - } - } - div.list-of-forum-posts { - .comment-post-grid{ - background-color: var(--bg)!important; - border-radius: 8px; - overflow: hidden; - } - .expandable { - background-color: var(--bg-400)!important; - } - pre { - background-color: var(--bg-400)!important; - } - .author-info { - display: flex; - flex-direction: column; - align-items: center; - justify-content: space-between; - border-right: 2px solid var(--bg-300); - height: 100%; - width: 90%; - .name-rank { - width: 100%; - color: var(--base-text-faded); - font-size: .75rem; - text-align: center; - user-select: none; - h4 { - width: fit-content; - margin-inline: auto; - user-select: text; - } - a { - font-size: 1rem; - margin-inline: auto; - width: fit-content; - } - } - } - .avatar, .avatar .blacklisted { - display: flex; - align-items: center; - justify-content: center; - margin: .5rem auto; - max-width: 90%!important; - position: relative; - aspect-ratio: 1/1; - border-radius: var(--avatar-border-radius); - overflow: hidden; - a { - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; - border-radius: var(--avatar-border-radius); - } - .post-thumbnail { - display: flex; - align-items: center; - justify-content: center; - border: 5px solid var(--elements-highlight); - aspect-ratio: 1/1; - } - .post-thumbnail, img { - border-radius: var(--avatar-border-radius); - max-height: 100%!important; - object-fit: cover; - width: 100%!important; - min-width: 124px; /* Magic number, just took the pixel measurement that firefox gave me for avatars that fully filled the space and added it here */ - margin-inline: auto; - aspect-ratio: 1/1; - user-select: none; - } - .post-thumbnail[data-status="deleted"] { - a { - height: 100%; - aspect-ratio: 1/1; - border-radius: var(--avatar-border-radius); - overflow: hidden; - position: relative; - } - a::before { - content: "Deleted"; - background-color: var(--deleted-bg); - border: 5px solid var(--elements-highlight); - color: var(--deleted-text); - font-weight: bold; - position: absolute; - display: flex; - height: 100%; - aspect-ratio: 1/1; - align-items: center; - justify-content: center; - font-size: 1.5rem; - border-radius: var(--avatar-border-radius); - } - } - } - .blacklisted { - a::before { - content: "Blacklisted"; - background-color: var(--blacklisted-bg); - color: var(--blacklisted-text); - font-weight: bold; - height: 100%; - width: 100%; - position: absolute; - display: flex; - align-items: center; - justify-content: center; - font-size: 1.25rem; - } - } - .post-time { - width: fit-content; - margin-left: auto; - margin-bottom: .5rem; - margin-top: auto; - bottom: 0; - font-size: .75rem; - user-select: none; - a { - color: var(--base-text-faded)!important; - } - } - } - .inline-code { - background-color: var(--bg-400)!important; - text-decoration: underline; - } - #new-response-link { - position: relative; - height:0; - width:fit-content; - display:flex; - align-items:center; - gap: .25rem; - padding: 1rem; - font-size:0; - background-color: var(--bg)!important; - border-radius: 2px 8px 8px 8px; - border: 2px solid var(--bg); - &:hover { - background-color: var(--bg-400)!important; - } - &::before { - content: "Reply"; - font-size: 1.2rem; - } - &::after { - content: url("data:image/svg+xml,%3Csvg height='24.0' viewBox='0 0 24.0 24.0' width='24.0' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 8.2667V4L3 11.4667L10 18.9333V14.56C15 14.56 18.5 16.2667 21 20C20 14.6667 17 9.3333 10 8.2667Z' fill='%23c8c8c8'/%3E%3C/svg%3E"); - opacity: 1; - mix-blend-mode: luminosity; - } - } - div.paginator { - max-width: 100vw; - overflow:hidden; - } - div.paginator li a { - transition: 100ms; - } - div.paginator li a:hover { - background-color: var(--bg-400)!important; - border-radius: 4px; - } - table.striped thead tr, table.table thead tr { - background-color: transparent!important; - border-bottom-color: var(--bg-300)!important; - } - table.striped thead th, table.table thead th { - background-color: var(--bg-400)!important; - color: var(--base-text)!important; - } - table.striped, table.table { - border-radius: 8px; - overflow: hidden; - background-color: var(--bg)!important; - } - table.striped tbody tr, table.table tbody tr { - background-color: transparent!Important; - border-color: var(--bg-300)!important; - } - table.striped tbody tr td, table.table tbody tr td { - background-color: var(--bg); - } - .replacement-pending-row td:first-child article { - border: 2px solid var(--bg-400); - border-radius: 0.5rem; - .desc { - border-radius: 0px!important; - } - } - .replacement-pending-row td:nth-child(2) img { - border: 2px solid var(--bg-400); - } - .replacement-pending-row td:nth-child(-n + 2) { - background-color: var(--flagged)!important; - } - .pool-category-series a, .pool-category-collection a, table tr[id^='artist-'] a, #set-index a[href^="/post"] { - color: var(--content-link)!important; - &:hover { - color: var(--content-link-hover)!important; - } - } - /* User feedback table */ - div#c-user-feedbacks #a-index .striped > tbody > tr > td { - background: transparent!important; - } - div#c-moderator-dashboards .feedback-category-negative td, div#c-user-feedbacks .feedback-category-negative { - background: var(--flagged)!important; - } - div#c-moderator-dashboards .feedback-category-neutral td, div#c-user-feedbacks .feedback-category-neutral { - background: var(--bg-400)!important; - } - div#c-moderator-dashboards .feedback-category-positive td, div#c-user-feedbacks .feedback-category-positive { - background: var(--favorite-button)!important; - } - .feedback-category-negative .user-blocked, .feedback-category-negative .user-banned { - color: var(--base-link)!important; - &:hover { - color: var(--base-link-hover)!important; - } - } - /* Takedowns and Tickets */ - .sect_green, .approved-ticket { - color: var(--favorite-button)!important; - font-weight: 900; - } - .sect_red, .redtext, .denied-ticket { - color: var(--flagged)!important; - font-weight: 900; - } - /* Tag Changes */ - #p-revert-listing { - max-width: 90vw; - margin-inline: auto; - position: relative; - margin-top: .5rem; - border-radius: 8px; - overflow:hidden; - } - div#c-post-versions div#a-index .post-version { - border: none; - border-radius: 8px; - overflow: hidden; - } - div#c-post-versions .post-version-row-select { - border-left: .25rem solid var(--elements-highlight)!important; - border-radius: .25rem 0 0 .25rem; - overflow:hidden; - } - div#c-post-versions div#a-index .pv-label { - border-right: 2px solid var(--bg-300)!important; - border-bottom: none; - background-color: var(--bg-400)!important; - } - .pv-sources-labeldiv#c-post-versions div#a-index .pv-sources-label, div#c-post-versions div#a-index .pv-spacer { - border-right: none!important; - } - div#c-post-versions div#a-index .pv-sources-label { - width: 100%; - } - #p-revert-listing div { - background-color: var(--bg)!important; - min-height: fit-content; - max-width: 90vw; - } - div#c-post-versions div#a-index .pv-sources { - overflow:hidden; - overflow-x:scroll; - scrollbar-width: thin; - max-width: 100%; - } - #p-revert-listing div * { - min-height: fit-content; - } -/* Post replacements */ - #c-post-approvals article.thumbnail.captioned, #c-post-flags article.thumbnail.captioned, #c-post-replacements article.thumbnail.captioned { - height: auto; - vertical-align: text-top; - border-radius: 8px; - width: fit-content; - margin-inline: auto; - margin-left: 2rem; - } - #c-post-replacements > #a-index > table > tbody > tr > td:first-child { - border-right: 2px solid var(--bg-300)!important; - padding-right: 2rem; - } - #c-post-replacements > #a-index > table > tbody > tr > td:nth-child(2) { - padding: .5rem 2rem; - } - #c-post-replacements > #a-index > table > tbody > tr > td:nth-child(2) img { - border-radius: 8px; - } -/* Stats page */ - #c-stats { - table.striped { - box-shadow: 0 0 .25rem #000!important; - } - table.striped tbody { - tr:nth-child(2n) td { - background-color: var(--bg-400); - } - tr:last-child { - border-bottom: none!important; - } - } - } -/* Implications page */ - .styled-dtext blockquote { - - div.expandable { - background-color: var(--bg-300)!important; - } - table.striped thead th { - background-color: var(--bg-400)!important; - } - table.striped tbody tr td { - background-color: var(--bg)!important; - } - } -/* Pools page */ -/* article.thumbnail .desc { - background-color: var(--bg-400)!important; - border-radius: 0 0 .5rem .5rem; - } - input[data-disable-with="Search"] { - border-radius: 4px; - background-color: var(--bg); - border: 2px solid var(--bg-400); - color: var(--base-text); - } - div#c-pools div#a-show #blacklist-box { - display: flex; - } - #a-gallery { - background-color: var(--bg)!important; - padding: 2rem; - border-radius: 8px; - display: flex; - flex-direction: column; - .paginator { - min-width: fit-content; - width: 25vw; - position:relative; - margin-inline: auto; - } - } - #a-gallery h2 { - margin-inline: auto; - margin-bottom: 1rem; - } - #a-gallery section { - margin-inline: auto; - width: 90%; - } - #a-gallery section { - display: flex; - flex-direction: row; - max-width: 90vw; - min-height: fit-content; - position: relative; - flex-wrap: wrap; - justify-content: center; - } - #a-gallery #posts > div > article { - min-width: fit-content; - margin-inline: auto; - }*/ -/* Comments page */ - div#c-comments div#a-index .comment-post, div#c-comments div#a-show { - background-color: var(--bg-400)!important; - border-left: .25rem solid var(--elements-highlight); - border-radius: 2px 8px 8px 2px; - overflow:hidden; - padding: .5rem; - } - div#c-comments div#a-index .post-container, div#c-comments div#a-show { - align-items: center; - justify-content: center; - padding: .5rem; - } - div#c-comments div.comments-for-post div.list-of-comments article.comment { - border: 2px solid var(--bg-300)!important; - } - div#c-comments div#a-index .post-container picture, div#c-comments div#a-show .post { - width: fit-content; - margin-inline: auto; - border-radius: 4px; - overflow:hidden; - border: 4px solid var(--bg-300); - } - div#c-comments div#a-show .post { - margin: .5rem auto 1rem auto; - } - .comment-post-grid .styled-dtext .blacklisted { - max-width: 150px !important; - } -/* DText */ - .styled-dtext blockquote { - border: none; - border-left: .25rem solid var(--color-danger); - border-left-color: var(--elements-highlight) !important; - background-color: rgba(255,255,255,.035)!important; - } -/* Settings Page */ - .simple_form { - background: var(--bg) !important; - border-radius: 8px; - border: 4px solid var(--bg-400); - } - a#delete-account { - color: var(--remove-favorite)!important; - } - a#delete-account:hover { - color: var(--remove-favorite-hover)!important; - } - button, input, select, textarea { - background-color: var(--bg-400)!important; - color: var(--base-text)!important; - border-radius: 4px; - } - .dtext-formatter textarea { - margin: 0; - } - div.dtext-formatter[data-editing="true"] div.dtext-formatter-charcount { - color: var(--base-text)!important; - } - a.expand-comment-response { - position: relative; - height:0; - width:fit-content; - display:flex; - align-items:center; - gap: .25rem; - padding: 1rem; - font-size:0; - background-color: var(--bg)!important; - border-radius: 2px 8px 8px 8px; - border: 2px solid var(--bg); - &:hover { - background-color: var(--bg-400)!important; - } - &::before { - content: "Post comment"; - font-size: 1.2rem; - } - &::after { - content: url("data:image/svg+xml,%3Csvg height='24.0' viewBox='0 0 24.0 24.0' width='24.0' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 8.2667V4L3 11.4667L10 18.9333V14.56C15 14.56 18.5 16.2667 21 20C20 14.6667 17 9.3333 10 8.2667Z' fill='%23c8c8c8'/%3E%3C/svg%3E"); - opacity: 1; - mix-blend-mode: luminosity; - } - } -/* Help Pages */ - #c-help { - #sidebar { - position:sticky; - left: 0; - top: 4rem; - padding: .5rem .5rem; - h1 { - width: 75%; - text-align: center; - border-bottom: 1px solid var(--bg-400); - margin-inline: auto; - margin-bottom: .5rem; - padding-bottom: .25rem; - } - div[style="width:240px"] { - width: fit-content!important; - } - ul { - display: flex; - flex-direction: column; - } - } - } -/* Dtext help page */ - - .dtext-container > .styled-dtext > blockquote > .striped > tbody { - tr { - background-color: var(--bg-300)!important; - td { - background-color: var(--bg-400)!important; - } - } - } -/* Upload page */ - .box-section { - background-color: var(--bg)!important; - border-radius: 8px; - } - div#c-uploads div#a-new .border-bottom { - border-bottom: 2px solid var(--bg-300); - } - div#c-uploads div#a-new .col2 .fileinput-wrapper .fileinput { - background: var(--bg-400); - border: 2px dashed var(--bg-400); - } - div#c-uploads div#a-new .col2 .linkinput-wrapper .linkinput { - background: var(--bg-300); - } - input[type="file"] { - background-color: var(--bg-400); - border-radius: 4px; - } - input[type="file"]button { - color: pink; - } - button.active { - background-color: var(--bg-300)!important; - } - button.rating-e.active { - background-color: var(--remove-favorite)!important; - } - button.rating-q.active { - background-color: var(--warn-button)!important; - } - button.rating-s.active { - background-color: var(--favorite-button)!important; - } - form.simple_form div.collection-radio-buttons input + label{ - color: var(--base-text)!important; - } - .radio_buttons:not(:checked)+label { - background-color: var(--bg-300)!important; - } - #post_rating_e:checked+label { - background-color: var(--remove-favorite)!important; - } - #post_rating_q:checked+label { - background-color: var(--warn-button)!important; - } - #post_rating_s:checked+label { - background-color: var(--favorite-button)!important; - } - /* Site map */ - - #a-site-map { - width: 80vw!important; - display: flex; - flex-direction: row!important; - justify-content: space-around; - flex-wrap: wrap; - margin-inline: auto; - background-color: var(--bg)!important; - padding: 2rem; - border-radius: 8px; - gap: .5rem; - section { - width: calc(15% + 1rem)!important; - max-width: calc(15% + 1rem)!important; - background-color: var(--bg-400); - padding: 2rem; - border-radius: 8px; - } - h1 { - border-bottom: 1px solid var(--bg)!important; - margin-inline: auto; - text-align: center; - padding-bottom: .25rem; - font-size: 1.175rem!important; - } - ul li:nth-child(n + 2) { - margin-top: .3rem; - border-bottom: 1px solid var(--base-text-faded); - width: fit-content; - } - } - /* Wiki page */ - button#wiki-page-copy-tag { - border: none; - } - .ui-state-highlight { - background-color: var(--bg)!important; - color: var(--base-text)!important; - border-top: none!important; - border-right: none!important; - border-bottom: none!important; - border-left: .25rem solid var(--elements-highlight)!important; - border-radius: 2px 8px 8px 2px; - font-size: .8rem!important; - width: fit-content; - } - @media screen and (max-width: 800px) { - #c-wiki-page-versions { - #p-global-listing { - width: 90%; - margin-inline: auto; - } - th:nth-child(1) { - width: fit-content !important; - } - table.striped { - td { - word-wrap: break-word; - max-width: 10ch; - max-height: 1rem; - text-overflow: ellipsis; - } - } - } - #c-bulk-update-requests { - - form.simple_form.inline-form div.input.string.optional { - input { - max-width: 80%; - } - } - - th:nth-child(1) { - width: fit-content !important; - } - table.striped { - td { - word-wrap: break-word; - max-width: 10ch; - max-height: 1rem; - text-overflow: ellipsis; - } - } - } - } - /* Guest warning */ - .guest-warning { - background-color: var(--bg); - - .guest-warning-dialog { - background-color: var(--bg-300); - border: 2px solid var(--bg-400); - border-radius: 8px; - overflow: hidden; - } - - .dialog-header { - border-bottom: 1px solid var(--bg); - } - } - /* Cloudflare error page */ - #cf-wrapper { - .code-label { - background-color: var(--remove-favorite); - } - span { - color: var(--base-text); - } - .my-8.bg-gradient-gray { - background-color: var(--bg) !important; - .w-240 { - margin: 0; - background-color: var(--bg); - width: 100%; - padding: 0 20%; - } - } - .cf-error-source::after { - box-shadow: none; - background-color: var(--bg-300); - } - .border-gray-300 { - border-color: var(--base-text-faded); - } - } -/* Server maintenance page */ - #b { - * { - color: var(--base-text); - } - display:flex; - align-items: center; - justify-content: center; - picture { - display: none; - } - .v.ps3.s3.c2 { - &::before { - content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='0.888889in' height='0.888889in' viewBox='0 0 80 80'%3E%3Cpath id='Ears' fill='%230000007a' d='M 59.40,30.84 C 59.40,30.84 65.43,29.43 66.48,31.56 67.34,33.30 63.45,36.52 63.45,36.52 63.45,36.52 66.80,40.99 66.80,40.99 66.80,40.99 71.25,37.71 73.37,35.95 75.76,33.96 79.67,30.51 78.00,27.63 74.71,21.95 59.88,25.40 56.15,26.58 56.15,26.58 59.40,30.84 59.40,30.84 Z M 32.47,18.49 C 32.47,18.49 34.98,12.82 37.31,13.26 39.22,13.62 39.45,18.68 39.45,18.68 39.45,18.68 45.03,18.68 45.03,18.68 45.03,18.68 45.10,13.15 44.96,10.40 44.80,7.30 44.40,2.09 41.10,1.69 34.59,0.90 28.42,14.84 27.11,18.52 27.11,18.52 32.47,18.49 32.47,18.49 Z' /%3E%3Cpath id='Head' fill='%230000007a' d='M 18.16,22.16 C 22.82,22.14 42.66,22.28 49.38,22.28 50.84,24.78 63.48,46.58 64.97,49.27 63.33,52.12 49.54,75.82 49.37,76.03 47.16,76.11 18.34,76.20 18.34,76.20 18.12,75.85 4.17,51.82 2.59,49.11 4.01,47.12 16.09,25.71 18.16,22.16 Z M 50.70,51.17 C 50.52,44.43 49.33,38.74 43.16,34.88 32.70,28.33 18.38,35.78 17.87,48.35 18.38,65.75 36.78,70.96 46.33,60.22 46.33,60.22 41.80,56.02 41.80,56.02 35.65,60.70 30.39,60.13 25.61,53.17 25.61,53.17 50.70,51.17 50.70,51.17 Z M 24.88,46.19 C 28.25,37.38 39.13,36.39 43.22,45.12 43.22,45.12 24.88,46.19 24.88,46.19 Z' /%3E%3C/svg%3E"); - mix-blend-mode: overlay; - height: 100%; - aspect-ratio: 1/1; - margin-inline: auto; - position: relative; - display:flex; - } - } - .v.ps.s.c { - background: var(--bg-300); - } - .ps5.v2.s5 { - display: none; - } - } - /* Confirm you're not a robot page */ - .message { - position:absolute; - left:40%; - top:10%; - display:grid; - place-items: center; - width: 20%; - min-width: fit-content; - max-height: 30%; - min-height: fit-content; - padding: 1rem; - margin-inline: auto; - background-color: var(--bg); - border-radius: 8px; - overflow:hidden; - &::before { - content: ''; - height:100%; - aspect-ratio: 1/1; - position:absolute; - bottom: -40%; - left: -25%; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%2300000055' class='bi bi-gear-fill' viewBox='0 0 16 16'%3E%3Cpath d='M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z'/%3E%3C/svg%3E"); - background-repeat: no-repeat; - background-size: 100%; - z-index: 1; - animation: rotate-gear 15s linear infinite; - } - &::after{ - content: ''; - height:100%; - aspect-ratio: 1/1; - position:absolute; - top: -40%; - right: -25%; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%2300000055' class='bi bi-gear-fill' viewBox='0 0 16 16'%3E%3Cpath d='M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z'/%3E%3C/svg%3E"); - background-repeat: no-repeat; - background-size: 100%; - z-index: 1; - animation: rotate-gear 20s linear infinite; - } - h1, p, form { - z-index: 10; - } - .e6-challenge { - cursor: pointer; - input { - background-color: var(--bg-300)!important; - border-radius: 8px; - transition: 100ms; - padding: .5rem; - &:hover { - background-color: var(--bg-400)!important; - } - } - @keyframes rotate-gear { - from { - transform: rotate(0deg); - } - - to { - transform: rotate(360deg); - } - } - - } - - } - @media screen and (max-width: 800px) { - div#page { - overflow: hidden; - } - header#top nav#nav { - font-size: .76rem; - align-content: center; - } - header#top nav#nav a.logo { - left:auto; - right:auto; - width:fit-content; - } - header#top nav#nav menu.main { - flex-wrap: wrap; - } - header#top nav#nav menu:last-child { - height: fit-content; - } - header#top nav#nav menu.extra:not(.main) { - background-color: var(--bg)!important; - border-radius: 0 0 0 8px; - border-bottom: 2px solid var(--bg-300); - border-left: 2px solid var(--bg-300); - top:unset !important; - right: -8px; - bottom:-1.825rem; - /*Magic number woooooo, 1.83 has a 1 pixel gap, whereas this has 1 pixel overlap with the main nav, funnn */ - border-right: none!important; - z-index: 9970; - display:flex; - align-items: center; - overflow:hidden; - & * { - font-size: 1rem; - } - } - a i#maintoggle-on#maintoggle-on { - display:block !important - } - a i#maintoggle-on#maintoggle-on[style="display: none;"] { - display:none !important; - } - body.resp .comment-post-grid .author-info .avatar .post-thumbnail { - background-color: transparent; - } - body.resp .comment-post-grid .author-info .avatar .post-thumbnail img { - height: 100px; - aspect-ratio:1/1; - margin: 1rem; - } - div#c-posts div#a-index { - flex-direction:column-reverse !important; - } - body.resp div#page > div > div > aside#sidebar { - font-size: inherit; - order: inherit; - } - aside#sidebar > section#search-box { - display:none !important; - } - div.mobile-search { - display:flex !important; - flex-direction:column; - } - a.search-help.search-help { - width: auto !important; - } - div.mobile-search div.search-input input, - div.mobile-search div.search-button button i::before { - display:inline-block; - height: 2rem; - } - - body:not([re621="true"]) div#nav-links-top, - body:not([re621="true"]) div#nav-links-bottom { - border-radius: 8px !important; - } - - body aside#sidebar div#re621-search { - top: -25px!important; - } - section#content search-content search-stats { - right: .5rem; - } - body.resp form select { - font-size: .75rem; - } - aside#sidebar.collapsed { - position: absolute; - left: -1rem; - } - section#content search-content { - width: 100%; - } - body.resp #search-box { - display: flex; - margin-top: .5rem; - } - body.resp form input[type="email"], body.resp form input[type="number"], body.resp form input[type="password"], body.resp form input[type="text"] { - font-size: .75rem; - } - div#c-posts div#a-index section#content, div#c-posts div#a-show section#content, div#c-favorites div#a-index section#content { - max-width: 65vw; - margin-inline:auto; - } - .desktop-only { - display: flex!important; - } - div#c-posts div#a-index aside#sidebar, div#c-posts div#a-show aside#sidebar, div#c-favorites div#a-index aside#sidebar { - width: 14.15rem; - } - div#c-posts div#a-index section#content, div#c-posts div#a-show section#content, div#c-favorites div#a-index section#content { - position:unset!important; - } - div#a-index { - ul:not(#related-list) { - display: grid; - grid-template-columns: 1fr 1fr 1fr; - width: 90%; - margin-inline: auto; - isolation: isolate; - gap: .5rem; - li { - margin-inline: auto; - display: grid; - grid-template-columns: .5fr 1fr; - grid-template-rows: repeat(2, 1.25rem); - grid-column-gap: 0px; - grid-row-gap: 0px; - align-items: center; - justify-content: center; - min-width: 10ch; - left: -.5rem; - position: relative; - z-index: 2; - padding: .25rem; - width: calc(fit-content + 2rem); - &:hover { - .post-count { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - width: 5ch; - display: inline !important; - } - .tag-actions { - background-color: var(--bg); - } - } - &::after { - content: ''; - position: absolute; - height: 100%; - width: 100%; - z-index: -1; - background-color: var(--bg); - border-radius: 4px; - } - } - span.tag-wrap { - display: flex; - flex-direction: column; - } - .tag-actions { - z-index: 3; - height: .75rem; - right: 0 !important; - position: relative !important; - grid-area: 2 / 1 / 3 / 3; - } - span.post-count { - position: absolute; - bottom: 0; - left: 0; - } - a.search-tag { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - max-width: 10ch; - } - a.wiki-link { grid-area: 1 / 1 / 2 / 2; } - a.search-tag { grid-area: 1 / 2 / 2 / 3; } - - .search-inc-tag { - position: absolute; - bottom: 0; - right: 2.5rem; - } - - .search-exl-tag { - position: absolute; - bottom: 0; - right: .5rem; - } - } - } - body[data-action="show"] div#c-posts #a-show, body[data-action="show-seq"] div#c-posts #a-show, div#c-posts div#a-index, div#c-posts div#a-show, div#c-favorites div#a-index { - display: flex!important; - aside#sidebar { - padding: 0!important; - width: calc(100% - .5rem)!important; - margin-inline: auto; - display: flex; - flex-direction: column; - #re621-search { - width: 100%; - } - #blacklist-box { - width: fit-content; - } - - } - a#sidebar-collapse { - display:none; - } - section#image-extra-controls { - margin-inline: auto; - } - .bg-foreground { - background-color: transparent!important; - width: 100%; - } - #content { - width: calc(100% - .5rem)!important; - max-width: unset!important; - } - #tag-list, #post-information, #post-options, #post-related-images { - width: fit-content; - font-size: 1.25rem; - } - #post-options, #post-history { - display: flex; - flex-direction: column; - h1 { - margin-inline: auto; - } - ul { - display: flex; - align-items: center; - gap: .5rem; - width: fit-content; - margin-inline: auto; - } - } - #tag-box > ul li, #tag-list > ul li { - width: fit-content; - font-size: 1.25rem; - div.tag-actions { - right: 0rem; - } - } - - /* aside#sidebar { - margin-top: 45vh; - .bg-foreground { - background-color: transparent!important; - } - } - #image-and-nav { - position: absolute; - max-height: 40vh!important; - top:2rem; - left:1rem; - right: 1rem; - #image, #image-container { - width: auto; - max-height: 49vh; - height:100%; - } - } - #image-extra-controls { - margin-top: 45vh; - }*/ - } - body[data-action="show"] div#c-posts #a-show, body[data-action="show-seq"] div#c-posts #a-show { - flex-direction: column-reverse; - } - .list-of-comments { - margin-top: 2rem; - } - div.comments-for-post div.list-of-comments article.comment .author-info, div.list-of-forum-posts .author-info, .response-list .blip .author-info { - position:relative !important; - overflow:hidden !important; - .blacklisted { - display:none !important; - } - .post-thumbnail[data-status="deleted"] { - display:none !important; - } - .name-rank { - z-index: 1; - margin-top: .25rem !important; - } - .post-time { - z-index: 1; - } - } - div.comments-for-post div.list-of-comments article.comment .avatar, div.list-of-forum-posts .avatar, .response-list .blip .avatar { - position:absolute !important; - top: -50% !important; - display:flex !important; - align-items: center !important; - justify-content: center !important; - z-index: 0 !important; - border-radius: 0%!important; - min-width: 100% !important; - max-width: unset!important; - aspect-ratio: unset!important; - .post-thumbnail { - max-width: unset!important; - aspect-ratio: unset !important; - border: none !important; - border-radius: 0%!important; - height: 200% !important; - width: 100% !important; - pointer-events: none!important; - overflow:hidden !important; - } - a, a img { - border-radius: 0%!important; - max-width: unset!important; - overflow: visible!important; - aspect-ratio: unset !important; - min-height: 100%!important; - min-width: 100%!important; - } - .post-thumbnail img { - outline: none!important; - aspect-ratio: unset!important; - border-radius: 0%!important; - margin: 0!important; - min-height: 100%!important; - min-width: 100%!important; - opacity: .2 !important; - filter: blur(10px) !important; - } - } - div.comments-for-post div.list-of-comments article.comment .author-info, div#c-blips article.blip .author-info, div.list-of-forum-posts .author-info { - width: 100%; - padding: 0rem; - position:relative; - .post-time { - margin-right:.5rem; - user-select: none; - } - } - aside#sidebar { - width: 7rem!important; - font-size: .8rem!important; - } - body.resp div#page #c-help #sidebar { - top: 5rem; - } - body.resp div#page #c-help section#content { - margin-left: 20vw!important; - } - body[data-sticky="true"] aside#sidebar div#re621-search, body[data-sticky="true"] aside#sidebar section#downloader-box, body[data-sticky="true"] aside#sidebar section#fav-downloader-box { - position: -webkit-sticky; - position: sticky; - max-height: 50vh; - width:7.5rem; - overflow: scroll; - scrollbar-width:thin; - } - .stats-section { - overflow:scroll; - } - .profile-avatar { - user-select:none; - } - .profile-stats { - overflow: scroll; - .column { - min-width: 150px; - } - } - body[re621="true"] div#c-users div#a-show .profile-container { - flex-direction: column; - } - body[re621="true"] div#c-users div#a-show .bottom-section.bottom-section { - max-width: unset!important; - } - body[re621="true"] div#c-users div#a-show div.box.user-favorites div.vertical-section, body[re621="true"] div#c-users div#a-show div.box.user-favorites div.vertical-section, body[re621="true"] div#c-users div#a-show div.box.user-uploads div.vertical-section, body[re621="true"] div#c-users div#a-show div.box.user-uploads div.vertical-sectionn { - flex-wrap: unset!important; - gap: .25rem; - } - body.resp article.thumbnail a { - margin: revert; - } - .vertical-section article:nth-child( n + 4 ) { - display: none!important; - justify-content: center!important; - } - #c-help #sidebar, #c-wiki-pages #sidebar { - width: auto!important; - top: auto!important; - h1 { - width: 75%; - text-align: center; - border-bottom: 1px solid var(--bg-400); - margin-inline: auto; - margin-bottom: .5rem; - padding-bottom: .25rem; - } - } - #c-help #sidebar div[style="width:240px"] { - width: 100%!important; - } - #c-help #sidebar ul, #c-wiki-pages #sidebar ul { - width: 100% !important; - display: flex; - flex-direction: row; - flex-wrap: wrap; - gap: .5rem; - margin-bottom: 3rem; - li { - border: 2px solid var(--bg-400); - padding: .25rem; - background-color: var(--bg); - border-radius: 6px; - &:hover { - background-color: var(--bg-300); - } - } - } - - body.resp div#page #c-help section#content, body.resp div#page #c-wiki-pages section#content { - margin-left: 1rem!important; - margin-right: 1rem!important; - } - } - - /* Security page */ - div#c-security div#a-index .settings-section { - background-color: var(--bg-400); - } - } - -@-moz-document url-prefix("https://e621.net/users/"), url-prefix("https://e926.net/users/") { - /* Users page */ - div#c-users div#a-show .profile-stats { - background-color: var(--bg-400)!important; - } - div#c-users div#a-show .posts-section .profile-sample-posts { - background-color: var(--bg-400)!important; - } - div#c-users div#a-show .about-section .profile-about-entry { - background-color: var(--bg-400)!important; - } - body[re621="true"] { - div#c-users div#a-show .bottom-section{ - padding: 1rem; - max-width: 55vw; - } - div#c-users div#a-show .profile-container { - display:flex; - background-color: var(--bg)!important; - border-radius: 1rem; - justify-content: space-around; - } - .profile-avatar { - user-select:none; - } - .post-thumbnail { - display:flex; - align-items: center; - justify-content: center; - width: fit-content; - margin-inline: auto; - } - .post-thumbnail a img { - object-fit: cover; - height: 100%; - border-radius: var(--avatar-border-radius); - aspect-ratio: 1/1; - outline: 5px solid var(--bg-300)!important; - } - div#c-users div#a-show .profile-container .stats-section { - background-color: transparent; - overflow:hidden; - padding: 1rem; - display:flex; - flex-direction: column; - border-radius: 1rem; - width: fit-content; - margin-inline: auto; - } - div#c-users div#a-show .profile-container .stats-section .profile-stats { - width: fit-content; - position: relative; - margin-inline: auto; - margin-top: 1rem; - } - div#c-users div#a-show .profile-stats { - background-color: var(--bg-400)!important; - border-left: .25rem solid var(--elements-highlight)!important; - padding: .5rem; - border-radius: 2px 8px 8px 2px; - overflow:hidden; - word-wrap: break-word; - h1 { - position:relative; - width: 100%; - margin-inline: auto; - margin-bottom: .5rem; - padding-bottom: .5rem; - display: flex; - place-content: center; - border-bottom: 1px solid var(--bg-300); - } - /* fun lil thing for me suggested by faucet - user page */ - a[href="/users/192568"] { - &::after { - content: url("data:image/svg+xml,%3Csvg height='32.0' viewBox='0 0 24.0 20.0' width='30.0' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.58 11.4L17.3 4.01l-0.35 -0.6L7.04 3.41l-0.35 0.6 -4.27 7.39 -0.35 0.6 0.35 0.6 4.27 7.39 0.35 0.6h9.92l0.35 -0.6 4.28 -7.39 0.35 -0.6 -0.36 -0.6zM8.51 10.37L6.88 12l1.63 1.63v2.73L4.15 12l4.37 -4.37v2.74zM11.63 17.3l-2.04 -0.63 3.1 -9.98 2.04 0.64 -3.1 9.97zM15.49 16.37v-2.73L17.12 12l-1.63 -1.63L15.49 7.63L19.85 12l-4.36 4.37z' fill='%23ffffffff'/%3E%3C/svg%3E"); - position: absolute; - right: 0; - top: -.5rem; - mix-blend-mode: soft-light; - opacity: .6; - pointer-events: none; - } - } - /* Secret helpers badge on the user page */ - a[href="/users/601225"], a[href="/users/884003"] { - &::after { - content: url("data:image/svg+xml,%3Csvg height='20' viewBox='0 0 31.27 29.53' width='25' xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cpath d='M22.8 1 S34.8 9.19 30.24 20.69 S16.61 29 20 25.64 S16 20 11.27 15.64 L22.79 1' fill='%23ffffff7a'/%3E%3Cpath d='M22.07 12.26 C19.54 15.48 15.97 17.09 13.21 16.51 L3.58 28.78 A2 2 0 0 1 0.77 29.12 A2 2 0 0 1 0.42 26.3 L10 14.05 C8.73 11.51 9.43 7.62 12 4.37 C15.19 0.33 20 -1.18 22.79 1 S25.24 8.22 22.07 12.26 Z' fill='%23ffffff'/%3E%3C/g%3E%3C/svg%3E"); - position: absolute; - right: 0; - top: -.5rem; - mix-blend-mode: soft-light; - opacity: .6; - pointer-events: none; - } - } - } - .user-statistics { - font-size: .7rem; - } - div#c-users div#a-show .user-statistics .column { - grid-template-columns: max-content minmax(1px,1fr); - } - body[re621="true"] div#c-users div#a-show div.box.user-favorites, body[re621="true"] div#c-users div#a-show div.box.user-uploads { - border-radius: .5rem; - overflow:hidden; - } - .box-section { - background-color: var(--bg-400)!important; - border-radius: 2px 8px 8px 2px; - border-left: .25rem solid var(--elements-highlight)!important; - } - .user-uploads div.vertical-section { - flex-direction: row!important; - } - picture.picture-container { - width: 154px; - } - article.thumbnail.captioned { - display:flex; - align-items: center; - justify-content: center; - flex-direction: column; - width: 154px; - } - article.thumbnail.captioned .desc { - width: 100%; - background-color: var(--bg)!important; - } - article.thumbnail img { - object-fit: cover; - width: 154px; - } - .has-cropped-true { - object-fit:cover; - width: 154px; - } - .profile-avatar .blacklisted { - a { - position: relative; - display: flex; - align-items: center!important; - justify-content: center!important; - &::before { - content: "Blacklisted"; - background-color: var(--blacklisted-bg); - color: var(--blacklisted-text); - position: absolute; - display: flex; - align-items: center!important; - justify-content: center!important; - font-size: 1.3rem; - width: 100%; - aspect-ratio: 1/1; - border-radius: var(--avatar-border-radius); - } - } - } - .post-thumbnail[data-status="deleted"] { - a { - position:relative; - display: flex; - align-items: center!important; - justify-content: center!important; - border-radius: var(--avatar-border-radius); - overflow:hidden; - border: 5px solid var(--bg-300)!important; - } - a::before { - content: "Deleted"; - background-color: var(--deleted-bg); - color: var(--deleted-text); - font-weight: bold; - position: absolute; - display: flex; - height: 100%; - width: 100%; - align-items: center; - justify-content: center; - font-size: 1.5rem; - } - } - .styled-dtext .blacklisted { - a { - position: relative; - display: flex; - align-items: center!important; - justify-content: center!important; - &::before { - content: "Blacklisted"; - background-color: var(--blacklisted-bg); - color: var(--blacklisted-text); - position: absolute; - display: flex; - align-items: center!important; - justify-content: center!important; - font-size: 1.3rem; - width: 100%; - aspect-ratio: 1/1; - } - } - } - .about-section { - .post-thumbnail { - margin-inline: 0; - } - .post-thumbnail a img { - outline: none!important; - border-radius: 4px; - aspect-ratio: unset; - margin: .25rem 0; - } - .post-thumbnail[data-status="deleted"] { - a { - border-radius: 4px; - overflow: hidden; - width:100%; - border: none!important; - } - a::before { - border-radius: 4px; - } - } - a { - border-radius: 4px; - overflow: hidden; - width:100%; - } - a::before { - border-radius: 4px; - } - } - @media (max-width: 800px) { - div#page div#c-users div#a-show .about-section .about-piece { - margin: 0 0 1em 0; - } - } - } - /* Regular userpage */ - body:not([re621="true"]) { - .profile-avatar img { - object-fit: cover; - height: 100%; - border-radius: var(--avatar-border-radius); - aspect-ratio: 1/1; - outline: 5px solid var(--elements-highlight) !important; - } - @media (max-width: 800px) { - div#c-users div#a-show .profile-avatar { - margin: 0.5em auto 1em auto; - width: fit-content; - } - } - } -} - -@-moz-document url("https://e621.net/"), url("https://e926.net/"), url("https://e926.net"), url("https://e621.net") { - /* Home page */ - html { - overflow: hidden; - } - body { - max-height: 100vh; - max-width: 100vw; - overflow: hidden; - background-image: var(--main-page-background)!important; - background-position:center; - background-size: cover; - background-color: var(--bg)!important; - } - div#page { - background: none!important; - } - - #change-mascot { - display:none; - } - #mascot_artist { - display:flex; - align-items: center; - justify-content: center; - width: 0; - height: 100%; - margin-inline: auto; - font-size: 0; - } - #news-excerpt-box { - border-radius: 0; - border-top: var(--bg-400) 2px solid; - border-bottom: var(--bg-400) 2px solid; - background-color: var(--bg-400) !important; - } - #searchbox3 { - display:flex; - flex-direction: column; - align-items: center; - margin-inline: auto; - position: relative; - padding-top: .5rem; - p { - margin-top: 2rem; - } - } - #searchbox3::after { - content: var(--artist-credit); - padding: .2rem; - border-radius: .25rem; - border: 2px solid var(--bg-400); - display:flex; - align-items: center; - justify-content: center; - font-size: .75rem; - width: fit-content; - position: absolute; - } - #searchbox2 { - display:none; - } - body, div#page { - max-height:100vh; - overflow:hidden; - } - #a-home { - width: fit-content; - overflow:hidden; - border-radius: 8px; - margin-inline: auto; - border: 2px solid var(--bg-400); - box-shadow: 0px 0px 40px #232323; - } - #a-home * { - margin: 0; - margin-inline: auto; - box-shadow: none; - background-image: none!important; - } - #searchbox { - border-radius: 0 0!important; - background-color: var(--bg)!important; - padding-bottom: 0; - } - #searchbox3 { - border-radius: 0 0!important; - background-color: var(--bg)!important; - } - form[action="/posts"]:first-child { - margin-bottom: .5rem!important; - } - form[action="/posts"]:first-child input#tags { - margin: .5rem; - } - input:focus, select:focus, textarea:focus { - background-color: var(--bg-400); - color: var(--base-text); - } - .ui-widget.ui-widget-content { - border:none; - border-radius: 2px 8px 8px 8px; - overflow:hidden; - } - ul.ui-autocomplete li:hover * { - border: none; - background-color: var(--bg)!important; - } - .ui-autocomplete .autocomplete-arrow { - color: var(--base-text-faded)!important; - } - .ui-widget-content { - background-color: var(--bg-300); - margin-top: .2rem; - margin-left: .05rem; - } -} - -@-moz-document url-prefix("https://e621.net/extensions") { - /* idem's Sourcing Suite */ - h1 { - background-color: var(--bg); - color: var(--content-link) !important; - } - .setting_section{ - background-color: var(--bg) !important; - } - .setting_description, .setting_values{ - color: var(--base-text); - } - .setting_values > * { - border-bottom: 1px solid var(--base-text-faded); - } - .setting_header, .settings_table_head{ - color: var(--content-link) !important; - } - - button, input { - border: 2px solid var(--bg-300); - } -} diff --git a/src/base/_base.scss b/src/base/_base.scss new file mode 100644 index 0000000..0811f12 --- /dev/null +++ b/src/base/_base.scss @@ -0,0 +1,9 @@ +body { + background-color: var(--bg-300) !important; + background-image: none !important; + color: var(--base-text) !important; + font-family: var(--main-font); + padding: 0; + margin: 0; + max-width: 100vw; +} diff --git a/src/base/_colors.scss b/src/base/_colors.scss new file mode 100644 index 0000000..af3e568 --- /dev/null +++ b/src/base/_colors.scss @@ -0,0 +1,45 @@ +$tag-categories: ( + "0": "general", + "1": "artist", + "2": "contributor", + "3": "copyright", + "4": "character", + "5": "species", + "6": "invalid", + "7": "meta", + "8": "lore" +); + +$tag-categories-short: ( + "0": "gen", + "1": "art", + "2": "cont", + "3": "copy", + "4": "char", + "5": "spec", + "6": "inv", + "7": "meta", + "8": "lor" +); + +$rank-listing: ( + "moderator": "moderator", + "admin": "admin", + "privileged": "privileged", + "contributor": "contributor", + "former-staff": "former-staff", + "janitor": "janitor", + "banned": "banned", + "blocked": "banned" +); + +$mode-menu-functions: ( + "edit": "edit", + "open": "fullscreen", + "add-fav": "add-fav", + "remove-fav": "remove-fav", + "blacklist": "blacklist", + "download": "download", + "add-to-set": "edit", + "remove-from-set": "edit" +); diff --git a/src/base/_links.scss b/src/base/_links.scss new file mode 100644 index 0000000..085e786 --- /dev/null +++ b/src/base/_links.scss @@ -0,0 +1,9 @@ +a { + color: var(--base-link) !important; + background: none !important; + + &:hover { + color: var(--base-link-hover) !important; + background: none !important; + } +} diff --git a/src/base/_themable.scss b/src/base/_themable.scss new file mode 100644 index 0000000..4493c8b --- /dev/null +++ b/src/base/_themable.scss @@ -0,0 +1,19 @@ +@import "../themes/classic/theme_bloodlust"; +@import "../themes/classic/theme_hexagon"; +@import "../themes/classic/theme_hotdog"; +@import "../themes/classic/theme_pony"; +@import "../themes/classic/theme_serpent"; + +/* +@import "../themes/muted/theme_bloodlust"; +@import "../themes/muted/theme_hexagon"; +@import "../themes/muted/theme_hotdog"; +@import "../themes/muted/theme_pony"; +@import "../themes/muted/theme_serpent"; + +@import "../themes/popular/theme_bloodlust"; +@import "../themes/popular/theme_hexagon"; +@import "../themes/popular/theme_hotdog"; +@import "../themes/popular/theme_pony"; +@import "../themes/popular/theme_serpent"; +*/ diff --git a/src/base/_vars.scss b/src/base/_vars.scss new file mode 100644 index 0000000..49e33e6 --- /dev/null +++ b/src/base/_vars.scss @@ -0,0 +1,4 @@ +$theme-pack: "classic"; +$profile-picture-circle: 1; +$comment-buttons: 1; +$name-rank-border-colors: 1; diff --git a/src/common/_comment_container.scss b/src/common/_comment_container.scss new file mode 100644 index 0000000..8b4fb83 --- /dev/null +++ b/src/common/_comment_container.scss @@ -0,0 +1,390 @@ +.comment-post-grid { + background-color: var(--bg) !important; + transition: 200ms; + + .styled-dtext .blacklisted { + max-width: 150px !important; + } + + .content { + margin: .5rem; + color: var(--base-text) !important; + + blockquote blockquote { + margin: .5rem; + } + + pre { + background-color: var(--bg-400) !important; + } + + img { + border-radius: 4px; + } + + .forum-post-votes-list { + margin-top: 1.5em !important; + } + + @if $comment-buttons { + .content-menu { + margin: .5rem 0; + margin-top: 1rem; + width: fit-content; + + menu { + display: flex; + align-items: center; + color: transparent !important; + user-select: none; + + /* + li:nth-child(2), + li:nth-child(6), + li:nth-child(8) { + display: none; + } + */ + + li { + margin: 0; + padding: 0; + } + } + } + + p.info { + padding-bottom: .5rem; + } + + .re621-comment-reply:hover, + .re621-forum-post-reply:hover, + .reply-link:hover, + .blip-reply-link:hover, + a.blip-atme-link:hover { + &::before { + background-color: var(--bg-300) !important; + } + } + + .re621-comment-reply, + .re621-forum-post-reply, + .reply-link, + .blip-reply-link { + font-size: 0; + display: flex; + align-items: center; + justify-content: center; + width: 26px; + position: relative; + + &::before { + content: ""; + aspect-ratio: 1/1; + width: 28px; + position: absolute; + background-color: var(--bg-400); + border-radius: 4px; + } + + &::after { + content: url("data:image/svg+xml,%3Csvg height='20.0' viewBox='0 0 24.0 24.0' width='20.0' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 8.2667V4L3 11.4667L10 18.9333V14.56C15 14.56 18.5 16.2667 21 20C20 14.6667 17 9.3333 10 8.2667Z' fill='%23ffffffff'/%3E%3C/svg%3E"); + position: absolute; + mix-blend-mode: soft-light; + } + } + + .content-menu a:not([data-bid])[href^="/blips"]:hover { + &::before { + background-color: var(--bg-300) !important; + } + } + + .content-menu a:not([data-bid])[href^="/blips"] { + font-size: 0; + display: flex; + align-items: center; + justify-content: center; + width: 26px; + position: relative; + + &::before { + content: ""; + aspect-ratio: 1/1; + width: 28px; + position: absolute; + background-color: var(--bg-400); + border-radius: 4px; + } + + &::after { + content: url("data:image/svg+xml,%3Csvg height='24.0' viewBox='0 0 24.0 24.0' width='24.0' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.998,3C2.894,3 1.998,3.895 1.998,5V17C1.998,18.104 2.894,19 3.998,19H6.9981V23L10.998,19H19.998C21.103,19 21.998,18.104 21.998,17V5C21.998,3.895 21.103,3 19.998,3H3.998Z' fill='%23ffffffff'/%3E%3C/svg%3E"); + position: absolute; + mix-blend-mode: soft-light; + } + } + + .content-menu a.blip-atme-link { + font-size: 0; + display: flex; + align-items: center; + justify-content: center; + width: 26px; + position: relative; + + &::before { + content: ""; + aspect-ratio: 1/1; + width: 28px; + position: absolute; + background-color: var(--bg-400); + border-radius: 4px; + } + + &::after { + content: url("data:image/svg+xml,%3Csvg height='24.0' viewBox='0 0 24.0 24.0' width='24.0' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12,2C6.486,2 2,6.486 2,12C2,17.515 6.486,22 12,22C14.039,22 15.993,21.398 17.652,20.259L16.521,18.611C15.195,19.519 13.633,20 12,20C7.589,20 4,16.411 4,12C4,7.589 7.589,4 12,4C16.411,4 20,7.589 20,12V12.782C20,14.17 19.402,15 18.4,15L18.398,15.018C18.338,15.005 18.273,15 18.209,15H18C17.437,15 16.6,14.182 16.6,13.631V12C16.6,9.464 14.537,7.4 12,7.4C9.463,7.4 7.4,9.463 7.4,12C7.4,14.537 9.463,16.6 12,16.6C13.234,16.6 14.35,16.106 15.177,15.313C15.826,16.269 16.93,17 18,17L18.002,16.981C18.064,16.994 18.129,17 18.195,17H18.4C20.552,17 22,15.306 22,12.782V12C22,6.486 17.514,2 12,2ZM12,14.599C10.566,14.599 9.4,13.433 9.4,11.999C9.4,10.565 10.566,9.399 12,9.399C13.434,9.399 14.6,10.565 14.6,11.999C14.6,13.433 13.434,14.599 12,14.599Z' fill='%23ffffffff'/%3E%3C/svg%3E%0A"); + position: absolute; + mix-blend-mode: soft-light; + } + } + + .blip-atme-link { + font-size: 0; + margin-inline: .25rem; + } + + li[id^="comment-vote-up-"] a { + background-color: var(--bg-400) !important; + height: 28px; + display: flex; + align-items: center; + margin-left: .5rem; + border-radius: 4px 0 0 4px; + padding: 0 .5rem 0 .5rem; + color: var(--base-text) !important; + + &:hover { + background-color: var(--favorite-button) !important; + color: var(--base-text) !important; + border-radius: 4px 0 0 4px !important; + } + } + + li[id^="comment-vote-up-"].score-positive a { + background-color: var(--favorite-button) !important; + color: var(--base-text) !important; + } + + li[id^="comment-score-"] { + background-color: var(--bg-400); + height: 28px; + display: flex; + align-items: center; + padding: 0 .25rem !important; + user-select: none; + } + + li[id^="comment-score-"]:nth-of-type(2) { + border-radius: 4px; + } + + li[id^="comment-vote-down-"] a { + background-color: var(--bg-400) !important; + height: 28px; + display: flex; + align-items: center; + margin-right: .5rem; + border-radius: 0 4px 4px 0; + padding: 0 .5rem 0 .5rem; + color: var(--base-text) !important; + + &:hover { + background-color: var(--remove-favorite) !important; + color: var(--base-text) !important; + border-radius: 0 4px 4px 0 !important; + } + } + + li[id^="comment-vote-down-"].score-negative a { + background-color: var(--remove-favorite) !important; + color: var(--base-text) !important; + border-radius: 0 4px 4px 0 !important; + } + + a[href^="/tickets/new?disp_id"]:hover { + &::before { + background-color: var(--bg-300); + } + } + + a[href^="/tickets/new?disp_id"] { + font-size: 0; + display: flex; + align-items: center; + justify-content: center; + width: 26px; + position: relative; + + &::before { + content: ""; + aspect-ratio: 1/1; + width: 28px; + position: absolute; + background-color: var(--bg-400); + border-radius: 4px; + } + + &::after { + content: url("data:image/svg+xml,%3Csvg height='20.0' viewBox='0 0 24.0 24.0' width='20.0' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 6.002H14V3.002C14 2.45 13.553 2.002 13 2.002H4C3.447 2.002 3 2.45 3 3.002V22.002H5V14.002H10.586L8.293 16.295C8.007 16.581 7.922 17.011 8.076 17.385C8.23 17.759 8.596 18.002 9 18.002H20C20.553 18.002 21 17.554 21 17.002V7.002C21 6.45 20.553 6.002 20 6.002Z' fill='%23f00'/%3E%3C/svg%3E"); + position: absolute; + mix-blend-mode: color-dodge; + opacity: .5; + } + } + + .re621-comment-copy-id:hover, .re621-forum-post-copy-id:hover { + &::before { + background-color: var(--bg-300); + } + } + + .re621-comment-copy-id, .re621-forum-post-copy-id, .blip { + font-size: 0; + display: flex; + align-items: center; + justify-content: center; + width: 26px; + position: relative; + margin-left: .25rem; + + &::before { + content: ""; + aspect-ratio: 1/1; + width: 28px; + position: absolute; + background-color: var(--bg-400); + border-radius: 4px; + } + + &::after { + content: url("data:image/svg+xml,%3Csvg height='20.0' viewBox='0 0 24.0 24.0' width='20.0' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.414 1H9C7.897 1 7 1.898 7 3V17C7 18.103 7.897 19 9 19H19C20.103 19 21 18.103 21 17V5.586L16.414 1ZM15 7V2L20 7H15Z' fill='%23ffffffff'/%3E%3Cpath d='M5 5H3V21C3 22.103 3.897 23 5 23H17V21H5V5Z' fill='%23ffffffff'/%3E%3C/svg%3E"); + position: absolute; + mix-blend-mode: soft-light; + } + } + + a[class*="-hide-link"]:hover, a[data-confirm^="Are you sure you want to hide this"]:hover { + &::before { + background-color: var(--bg-300); + } + } + + a[class*="-hide-link"], a[data-confirm^="Are you sure you want to hide this"] { + font-size: 0; + display: flex; + align-items: center; + justify-content: center; + width: 26px; + position: relative; + + &::before { + content: ""; + aspect-ratio: 1/1; + width: 28px; + position: absolute; + background-color: var(--bg-400); + border-radius: 4px; + } + + &::after { + content: url("data:image/svg+xml,%3Csvg height='20.0' viewBox='0 0 24.0 24.0' width='20.0' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 7c2.76 0 5 2.24 5 5 0 0.65 -0.13 1.26 -0.36 1.83l2.92 2.92c1.51 -1.26 2.7 -2.89 3.43 -4.75 -1.73 -4.39 -6 -7.5 -11 -7.5 -1.4 0 -2.74 0.25 -3.98 0.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28 0.46 0.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03 -0.3 4.38 -0.84l0.42 0.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-0.05 0.21 -0.08 0.43 -0.08 0.65 0 1.66 1.34 3 3 3 0.22 0 0.44 -0.03 0.65 -0.08l1.55 1.55c-0.67 0.33 -1.41 0.53 -2.2 0.53 -2.76 0 -5 -2.24 -5 -5 0 -0.79 0.2 -1.53 0.53 -2.2zM11.84 9.02l3.15 3.15 0.02 -0.16c0 -1.66 -1.34 -3 -3 -3l-0.17 0.01z' fill='%23ffffff'/%3E%3C/svg%3E") !important; + position: absolute; + mix-blend-mode: soft-light; + } + } + + .content-menu a[class*="edit_"]:hover, .content-menu a[href*="edit"]:hover { + &::before { + background-color: var(--bg-300); + } + } + + .content-menu a[class*="edit_"], .content-menu a[href*="edit"] { + font-size: 0; + display: flex; + align-items: center; + justify-content: center; + width: 26px; + position: relative; + + &::before { + content: ""; + aspect-ratio: 1/1; + width: 28px; + position: absolute; + background-color: var(--bg-400); + border-radius: 4px; + } + + &::after { + content: url("data:image/svg+xml,%3Csvg height='24.0' viewBox='0 0 24.0 24.0' width='24.0' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 17.25V21h3.75L17.81 9.94l-3.75 -3.75L3 17.25zM20.71 7.04c0.39 -0.39 0.39 -1.02 0 -1.41l-2.34 -2.34c-0.39 -0.39 -1.02 -0.39 -1.41 0l-1.83 1.83 3.75 3.75 1.83 -1.83z' fill='%23ffffff'/%3E%3C/svg%3E"); + position: absolute; + mix-blend-mode: soft-light; + } + } + } + } +} + +.post-thumbnail[data-status="deleted"] { + margin: .25rem; + + a { + position: relative; + display: flex; + align-items: center !important; + justify-content: center !important; + border-radius: 4px; + overflow: hidden; + } + + a::before { + content: "Deleted"; + background-color: var(--deleted-bg); + color: var(--deleted-text); + font-weight: bold; + position: absolute; + display: flex; + height: 100%; + width: 100%; + align-items: center; + justify-content: center; + font-size: 1.5rem; + } +} + +@if $profile-picture-circle { + :root { + --avatar-border-radius: 50%; + } +} else { + :root { + --avatar-border-radius: 2.5%; + } + + .avatar .post-thumbnail { + background-color: var(--elements-highlight); + } +} + +@if $name-rank-border-colors { + body[data-th-main="hexagon"] { + .author-info:has(.user-member) .post-thumbnail { + border-color: var(--user-member) !important; + } + + .avatar .post-thumbnail { + background-color: var(--user-member); + } + } +} diff --git a/src/common/_footer.scss b/src/common/_footer.scss new file mode 100644 index 0000000..0c0995f --- /dev/null +++ b/src/common/_footer.scss @@ -0,0 +1,20 @@ +footer#page-footer { + margin: 0rem 0 0 0; + border-radius: 0; + background-color: var(--bg) !important; + + .footer-logo { + a img { + opacity: 0; + } + a { + &::before { + content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5em' height='5em' viewBox='1 0 41 41'%3E%3Cpath id='Ear Tops' fill='%2300000055' d='M 26.73,13.88 C 26.73,13.88 29.44,13.24 29.92,14.20 30.30,14.98 28.55,16.43 28.55,16.43 28.55,16.43 30.06,18.45 30.06,18.45 30.06,18.45 32.06,16.97 33.02,16.18 34.09,15.28 35.85,13.73 35.10,12.43 33.62,9.88 26.95,11.43 25.27,11.96 25.27,11.96 26.73,13.88 26.73,13.88 Z M 14.61,8.32 C 14.61,8.32 15.74,5.77 16.79,5.97 17.65,6.13 17.75,8.41 17.75,8.41 17.75,8.41 20.26,8.41 20.26,8.41 20.26,8.41 20.30,5.92 20.23,4.68 20.16,3.29 19.98,0.94 18.50,0.76 15.57,0.41 12.79,6.68 12.20,8.33 12.20,8.33 14.61,8.32 14.61,8.32 Z' /%3E%3Cpath id='Ear Bottoms' fill='%23ffffff33' d='M 14.61,8.32 C 14.61,8.32 15.74,5.77 16.79,5.97 17.65,6.13 17.75,8.41 17.75,8.41 17.75,8.41 20.26,8.41 20.26,8.41 20.26,8.41 20.30,7.43 20.27,6.17 19.54,4.37 16.52,3.18 15.03,3.00 14.27,3.83 12.79,6.68 12.20,8.33 12.20,8.33 14.61,8.32 14.61,8.32 Z M 26.73,13.88 C 26.73,13.88 29.44,13.24 29.92,14.20 30.30,14.98 28.55,16.43 28.55,16.43 28.55,16.43 30.06,18.45 30.06,18.45 30.06,18.45 31.41,17.50 32.36,16.70 31.56,16.69 32.70,13.48 30.75,11.02 29.57,10.99 26.95,11.43 25.27,11.96 25.27,11.96 26.73,13.88 26.73,13.88 Z' /%3E%3Cpath id='Head' fill='%2300000055' d='M 8.17,9.97 C 10.27,9.96 19.20,10.03 22.22,10.03 22.88,11.15 28.57,20.96 29.24,22.17 28.50,23.45 22.29,34.12 22.22,34.21 21.22,34.25 8.25,34.29 8.25,34.29 8.15,34.13 1.88,23.32 1.17,22.10 1.80,21.20 7.24,11.57 8.17,9.97 Z' /%3E%3Cpath id='e' fill='%23ffffff33' d='M 14.90,14.62 C 21.12,14.31 22.95,19.43 22.81,23.04 22.69,23.05 11.69,23.93 11.53,23.93 14.80,28.95 18.63,25.34 18.81,25.20 18.95,25.34 19.39,25.75 20.85,27.10 17.10,31.38 8.78,30.54 8.02,21.83 8.53,15.14 14.90,14.62 14.90,14.62 Z M 11.21,20.81 C 11.21,20.81 17.95,20.38 19.47,20.28 17.02,15.62 12.25,17.69 11.21,20.81 Z' /%3E%3C/svg%3E%0A"); + position:absolute; + margin-inline: auto; + width: 5em; + z-index: 2; + } + } + } +} diff --git a/src/common/_helper_classes.scss b/src/common/_helper_classes.scss new file mode 100644 index 0000000..10c0a69 --- /dev/null +++ b/src/common/_helper_classes.scss @@ -0,0 +1,82 @@ +.color-muted { + color: var(--base-text) !important; + opacity: .5; +} + +.button { + transition: 100ms; + + .score-neutral { + background-color: var(--bg-400) !important; + color: var(--base-text) !important; + } + + .score-neutral:hover { + background-color: var(--bg) !important; + } + + .score-positive { + background-color: var(--favorite-button) !important; + color: var(--base-text) !important; + } + + .score-positive:hover { + background-color: var(--favorite-button-hover) !important; + color: var(--button-text-hover-secondary) !important; + } + + .score-negative { + background-color: var(--remove-favorite) !important; + color: var(--base-text) !important; + } + + .score-negative:hover { + background-color: var(--remove-favorite-hover) !important; + color: var(--button-text-hover-secondary) !important; + } + + .btn-success { + background-color: var(--favorite-button) !important; + color: var(--base-text) !important; + } + + .btn-success:hover { + background-color: var(--favorite-button-hover) !important; + color: var(--button-text-hover-secondary) !important; + } + + .btn-danger { + background-color: var(--remove-favorite) !important; + color: var(--base-text) !important; + } + + .btn-danger:hover { + background-color: var(--remove-favorite-hover) !important; + color: var(--button-text-hover-secondary) !important; + } + + .btn-warn { + background-color: var(--warn-button) !important; + color: var(--base-text) !important; + } + + .btn-warn:hover { + background-color: var(--warn-button-hover) !important; + color: var(--button-text-hover-secondary) !important; + } + + .btn-neutral { + background-color: var(--bg) !important; + color: var(--base-text) !important; + transition: var(--header-link-transition); + } + + .btn-neutral:hover { + background-color: var(--bg-400) !important; + color: var(--base-text) !important; + } +} + +.bg-foreground { + background-color: var(--bg) !important; +} diff --git a/src/common/_scores.scss b/src/common/_scores.scss new file mode 100644 index 0000000..26ce7c6 --- /dev/null +++ b/src/common/_scores.scss @@ -0,0 +1,7 @@ +.score-positive a, search-content post[vote="1"] button.button.voteButton.vote[action=up] { + color: var(--favorite-button) !important; +} + +.score-negative a, search-content post[vote="-1"] button.button.voteButton.vote[action=down] { + color: var(--remove-favorite) !important; +} diff --git a/src/common/ads.scss b/src/common/ads.scss new file mode 100644 index 0000000..ad8ef0f --- /dev/null +++ b/src/common/ads.scss @@ -0,0 +1,4 @@ +#ad-leaderboard { + width: fit-content; + margin-inline: auto; +} diff --git a/src/common/autocomplete.scss b/src/common/autocomplete.scss new file mode 100644 index 0000000..993a813 --- /dev/null +++ b/src/common/autocomplete.scss @@ -0,0 +1,15 @@ +.ui-autocomplete { + .ui-state-active { + border: none; + background-color: var(--bg) !important; + } + + .autocomplete-arrow { + color: var(--base-text-faded) !important; + } + + li:hover * { + border: none; + background-color: var(--bg) !important; + } +} diff --git a/src/common/blacklists.scss b/src/common/blacklists.scss new file mode 100644 index 0000000..1eefeff --- /dev/null +++ b/src/common/blacklists.scss @@ -0,0 +1,58 @@ +.blacklist-ui.blacklist-inline { + .blacklist-header::before { + border-color: transparent var(--base-text) var(--base-text) transparent !important; + } +} + +#image-container.blacklisted, .styled-dtext div.post-thumbnail.blacklisted.dtext[data-status="active"] { + overflow: hidden; + border-radius: 4px !important; +} + +.blacklisted { + .picture-container { + position: relative; + display: flex; + align-items: center !important; + justify-content: center !important; + + &::before { + content: "Blacklisted"; + font-weight: bold; + background-color: var(--blacklisted-bg); + color: var(--blacklisted-text); + position: absolute; + display: flex; + align-items: center !important; + justify-content: center !important; + font-size: 1.3rem; + width: 100%; + aspect-ratio: 1/1; + } + } +} + +#image-container.blacklisted { + position: relative; + + &::before { + content: "Blacklisted"; + background-color: var(--blacklisted-bg); + color: var(--blacklisted-text); + font-weight: bold; + position: absolute; + display: flex; + align-items: center !important; + justify-content: center !important; + font-size: 1.3rem; + width: 100%; + height: 100%; + aspect-ratio: 1/1; + } +} + +#image-container.blacklisted .styled-dtext div.post-thumbnail.blacklisted.dtext { + border-radius: 0 !important; + width: 10rem !important; + margin-right: auto; +} diff --git a/src/common/containers.scss b/src/common/containers.scss new file mode 100644 index 0000000..a98b10f --- /dev/null +++ b/src/common/containers.scss @@ -0,0 +1,5 @@ +.box-section { + background-color: var(--bg-400) !important; + border-radius: 2px 8px 8px 2px; + border-left: .25rem solid var(--elements-highlight) !important; +} diff --git a/src/common/dtext.scss b/src/common/dtext.scss new file mode 100644 index 0000000..fdae291 --- /dev/null +++ b/src/common/dtext.scss @@ -0,0 +1,102 @@ +.dtext-container > .styled-dtext > blockquote > .striped > tbody { + tr { + background-color: var(--bg-300) !important; + + td { + background-color: var(--bg-400) !important; + } + } +} + +.styled-dtext { + @each $tag-category, $tag-category-name in $tag-categories { + .dtext-color-#{$tag-category-name} { + color: var(--tag-cat-#{$tag-category}) !important; + } + } + + @each $tag-category, $tag-category-name in $tag-categories-short { + .dtext-color-#{$tag-category-name} { + color: var(--tag-cat-#{$tag-category}) !important; + } + } + + .blacklisted { + margin: .5rem 0 !important; + + a { + position: relative; + display: flex; + align-items: center !important; + justify-content: center !important; + + &::before { + content: "Blacklisted"; + background-color: var(--blacklisted-bg); + color: var(--blacklisted-text); + position: absolute; + display: flex; + align-items: center !important; + justify-content: center !important; + font-size: 1.3rem; + width: 100%; + aspect-ratio: 1/1; + } + } + } + + blockquote { + border: none; + border-left: .25rem solid var(--color-danger); + border-left-color: var(--elements-highlight) !important; + background-color: rgba(255,255,255,.035) !important; + + div.expandable { + background-color: var(--bg-300) !important; + } + + table.striped thead th { + background-color: var(--bg-400) !important; + } + + table.striped tbody tr td { + background-color: var(--bg) !important; + } + } + + .inline-code { + background-color: var(--bg-400) !important; + text-decoration: underline; + } + + details, div.expandable, pre { + background-color: var(--bg) !important; + border-left-color: var(--elements-highlight) !important; + color: var(--base-text); + border-right: none !important; + border-top: none !important; + border-bottom: none !important; + + div.expandable, details { + border-right: none; + border-top: none; + border-bottom: none; + background-color: var(--bg-400) !important; + } + } + + div.expandable > div.expandable-header { + display: flex; + } + + div.expandable > div.expandable-header > .section-arrow { + margin-right: .3rem; + display: flex; + align-items: center; + justify-content: center; + position: relative; + width: .75rem; + aspect-ratio: 1/1; + height: 100%; + } +} diff --git a/src/common/forms.scss b/src/common/forms.scss new file mode 100644 index 0000000..a037308 --- /dev/null +++ b/src/common/forms.scss @@ -0,0 +1,4 @@ +input:focus, select:focus, textarea:focus { + background-color: var(--bg-400) !important; + color: var(--base-text) !important; +} diff --git a/src/common/jquery_ui_custom.scss b/src/common/jquery_ui_custom.scss new file mode 100644 index 0000000..8c2ee21 --- /dev/null +++ b/src/common/jquery_ui_custom.scss @@ -0,0 +1,17 @@ +.ui-widget-content { + background-color: var(--bg-400) !important; + margin-top: .2rem; + margin-left: .05rem; +} + +.ui-state-highlight { + background-color: var(--bg) !important; + color: var(--base-text) !important; + border-top: none !important; + border-right: none !important; + border-bottom: none !important; + border-left: .25rem solid var(--elements-highlight) !important; + border-radius: 2px 8px 8px 2px; + font-size: .8rem !important; + width: fit-content; +} diff --git a/src/common/main_layout.scss b/src/common/main_layout.scss new file mode 100644 index 0000000..e238c5d --- /dev/null +++ b/src/common/main_layout.scss @@ -0,0 +1,157 @@ +div#page { + background-color: var(--bg-300) !important; + margin: 0 !important; + border-radius: 0 !important; + padding-top: 1.5rem; + padding-bottom: 4rem; + + aside#sidebar { + #search-box { + display: flex; + align-items: center; + justify-content: center; + position: relative; + } + + #search-box h1 { + position: absolute; + font-size: 0rem !important; + width: 90%; + pointer-events: none; + z-index: 9999; + } + + #search-box h1 span { + position: relative; + font-size: .75rem; + pointer-events: auto; + right: 1.5rem; + top: .25rem; + display: flex; + } + + #search-box button { + display: none; + } + + /* Sidebar searchbox */ + /* re621 version -> src/specific/re621/modules/_structure-utilities.scss */ + section#search-box form, section#mode-box form { + display: flex; + flex-direction: column; + height: fit-content; + width: 100%; + } + + section#search-box form input[type="text"], section#mode-box form input[type="text"] { + height: 2rem; + width: 100%; + border-radius: 7.5px; + padding: .5rem 2rem .5rem .5rem; + color: var(--base-text); + background-color: var(--bg-400); + border: 2px solid var(--bg-300); + margin-top: 1rem; + margin-inline: auto; + } + } + + div.site-notice { + background-color: var(--bg) !important; + border: 2px solid var(--bg-400) !important; + border-radius: 8px; + color: var(--base-text) !important; + margin-inline: auto; + margin-bottom: 1rem; + } + + div.site-notice:not(open) { + overflow: hidden; + } +} + +.search-help { + display: flex; + align-items: center; + width: 0; +} + +.search-help a { + width: 0rem; + height: 100%; + overflow: hidden; + margin-top: 1rem; + margin-right: -1rem; +} + +.search-help a::before { + content: url("data:image/svg+xml,%3Csvg height='20.0' viewBox='0 0 24.0 24.0' width='20.0' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10 -4.48 10 -10S17.52 2 12 2zM13 19h-2v-2h2v2zM15.07 11.25l-0.9 0.92C13.45 12.9 13 13.5 13 15h-2v-0.5c0 -1.1 0.45 -2.1 1.17 -2.83l1.24 -1.26c0.37 -0.36 0.59 -0.86 0.59 -1.41 0 -1.1 -0.9 -2 -2 -2s-2 0.9 -2 2L8 9c0 -2.21 1.79 -4 4 -4s4 1.79 4 4c0 0.88 -0.36 1.68 -0.93 2.25z' fill='%23ffffff'/%3E%3C/svg%3E"); + height: 1rem; + width: 1rem; + position: absolute; + opacity: .3; +} + +.search-help a:hover::before { + opacity: .5; + transition: 100ms; +} + +.search-help::before:hover .search-help { + font-size: .75rem; +} + +/* Fixes select box arrows being black */ +select, select:active, select:focus, select:hover, select.button.btn-neutral, +select.button.btn-neutral:active, select.button.btn-neutral:focus, select.button.btn-neutral:hover { + background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' style='opacity:.3'%3E%3Cpath fill='%23fff' d='M12 14.975q-.2 0-.375-.062T11.3 14.7l-4.6-4.6q-.275-.275-.275-.7t.275-.7q.275-.275.7-.275t.7.275l3.9 3.9l3.9-3.9q.275-.275.7-.275t.7.275q.275.275.275.7t-.275.7l-4.6 4.6q-.15.15-.325.213t-.375.062Z'/%3E%3C/svg%3E") no-repeat; + background-position: 100% 50% !important; + -moz-appearance: none; + -webkit-appearance: none; + appearance: none; +} + +select#image-resize-selector { + padding-right: 20px; +} + +#posts-container article.thumbnail .desc, +#c-post-approvals article.thumbnail .desc, +#c-post-flags article.thumbnail .desc, +#c-post-replacements article.thumbnail .desc { + border-radius: 0 0 .5rem .5rem; + display: flex; + flex-direction: row; + background-color: var(--bg-400); +} + +body { + --color-score-positive: var(--favorite-button); + --color-score-negative: var(--remove-favorite); + --color-rating-safe: var(--favorite-button); + --color-rating-questionable: var(--warn-button); + --color-rating-explicit: var(--remove-favorite); +} + +::-webkit-scrollbar { + width: 10px; + background: var(--bg); +} + +::-webkit-scrollbar-thumb { + background: var(--bg-300); +} + +@if $theme-pack == "classic" { + ::selection { + color: var(--bg); + background: var(--header-link); + } +} + +@if $theme-pack == "muted" { + ::selection { + color: var(--bg); + background: var(--elements-highlight); + } +} diff --git a/src/common/navigation.scss b/src/common/navigation.scss new file mode 100644 index 0000000..606ca7e --- /dev/null +++ b/src/common/navigation.scss @@ -0,0 +1,91 @@ +nav.navigation { + background-color: var(--bg); + + .nav-logo { + margin-top: .25rem; + display: flex; + width: 10%; + } + + menu.nav-logo a.nav-logo-link { + display: grid !important; + place-items: center !important; + position: relative !important; + margin-right: 0 !important; + font-size: 16px; + aspect-ratio: 1/1; + } + + .nav-secondary { + background-color: var(--bg); + } + + i, a:is([id*="nav"], [id*="blacklist"]) { + color: var(--header-link) !important; + } + + i:hover, a:is([id*="nav"], [id*="blacklist"]):hover { + color: var(--header-link-hover) !important; + } + + menu.nav-tools { + background-color: var(--bg-400) !important; + border-radius: 0 0 4px 4px; + border: 2px solid var(--bg-300); + border-top: 0px solid transparent; + } +} + +nav { + .nav-logo #text { + display: none; + } + + .nav-logo { + position: relative; + height: 100%; + left: .5rem; + display: grid; + place-items: center; + font-size: 1px; + color: var(--logo); + width: fit-content; + margin-right: 1.5rem; + } + + body:not([re621="true"]) .nav-logo { + top: .35rem; + } + + .nav-logo { + color: rgb(0,0,0,0); + } + + .nav-logo::before { + pointer-events: none; + content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='0.4in' height='0.4in' viewBox='0 0 36 36'%3E%3Cpath id='Ear Tops' fill='%2300000055' d='M 26.73,13.88 C 26.73,13.88 29.44,13.24 29.92,14.20 30.30,14.98 28.55,16.43 28.55,16.43 28.55,16.43 30.06,18.45 30.06,18.45 30.06,18.45 32.06,16.97 33.02,16.18 34.09,15.28 35.85,13.73 35.10,12.43 33.62,9.88 26.95,11.43 25.27,11.96 25.27,11.96 26.73,13.88 26.73,13.88 Z M 14.61,8.32 C 14.61,8.32 15.74,5.77 16.79,5.97 17.65,6.13 17.75,8.41 17.75,8.41 17.75,8.41 20.26,8.41 20.26,8.41 20.26,8.41 20.30,5.92 20.23,4.68 20.16,3.29 19.98,0.94 18.50,0.76 15.57,0.41 12.79,6.68 12.20,8.33 12.20,8.33 14.61,8.32 14.61,8.32 Z' /%3E%3Cpath id='Ear Bottoms' fill='%23ffffff33' d='M 14.61,8.32 C 14.61,8.32 15.74,5.77 16.79,5.97 17.65,6.13 17.75,8.41 17.75,8.41 17.75,8.41 20.26,8.41 20.26,8.41 20.26,8.41 20.30,7.43 20.27,6.17 19.54,4.37 16.52,3.18 15.03,3.00 14.27,3.83 12.79,6.68 12.20,8.33 12.20,8.33 14.61,8.32 14.61,8.32 Z M 26.73,13.88 C 26.73,13.88 29.44,13.24 29.92,14.20 30.30,14.98 28.55,16.43 28.55,16.43 28.55,16.43 30.06,18.45 30.06,18.45 30.06,18.45 31.41,17.50 32.36,16.70 31.56,16.69 32.70,13.48 30.75,11.02 29.57,10.99 26.95,11.43 25.27,11.96 25.27,11.96 26.73,13.88 26.73,13.88 Z' /%3E%3Cpath id='Head' fill='%2300000055' d='M 8.17,9.97 C 10.27,9.96 19.20,10.03 22.22,10.03 22.88,11.15 28.57,20.96 29.24,22.17 28.50,23.45 22.29,34.12 22.22,34.21 21.22,34.25 8.25,34.29 8.25,34.29 8.15,34.13 1.88,23.32 1.17,22.10 1.80,21.20 7.24,11.57 8.17,9.97 Z' /%3E%3Cpath id='e' fill='%23ffffff33' d='M 14.90,14.62 C 21.12,14.31 22.95,19.43 22.81,23.04 22.69,23.05 11.69,23.93 11.53,23.93 14.80,28.95 18.63,25.34 18.81,25.20 18.95,25.34 19.39,25.75 20.85,27.10 17.10,31.38 8.78,30.54 8.02,21.83 8.53,15.14 14.90,14.62 14.90,14.62 Z M 11.21,20.81 C 11.21,20.81 17.95,20.38 19.47,20.28 17.02,15.62 12.25,17.69 11.21,20.81 Z' /%3E%3C/svg%3E%0A"); + position: absolute; + top: 0; + right:0; + display: grid; + place-items: center; + z-index: 2; + background-color: var(--bg-300); + outline: solid 2px var(--bg-400); + padding: .3rem; + border-radius: 50%; + transition: 200ms; + } + + .nav-logo:hover::before { + outline: solid 2px var(--base-text); + } + + menu.nav-primary, menu.nav-help { + border-bottom: 1px solid var(--header-link) !important; + } + + menu.nav-help { + width: fit-content; + } +} diff --git a/src/common/news.scss b/src/common/news.scss new file mode 100644 index 0000000..cfcebe2 --- /dev/null +++ b/src/common/news.scss @@ -0,0 +1,26 @@ +div#page div#news { + .closebutton { + display: flex; + align-items: center; + justify-content: center; + width: 0; + margin-top: 0px; + margin-right: .5rem; + font-size: 0; + } + + .closebutton::before { + content: url("data:image/svg+xml,%3Csvg height='24.0' viewBox='0 0 18.0 18.0' width='24.0' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 11.87 L11.87 13 L9 10.13 L6.13 13 L5 11.87 L7.87 9 L5 6.13 L6.13 5 L9 7.87 L11.87 5 L13 6.13 L10.13 9 L13 11.87 Z M9 1 C4.58 1 1 4.58 1 9 C1 13.42 4.58 17 9 17 C13.42 17 17 13.42 17 9 C17 4.58 13.42 1 9 1 L9 1 Z' fill='%23ffffff' stroke-width='1.0'/%3E%3C/svg%3E"); + opacity: .3; + height: 2rem; + width: 1.5rem; + position: absolute; + display: flex; + justify-content: center; + align-items: center; + } + + .closebutton:hover::before { + opacity: .5; + } +} diff --git a/src/common/notices.scss b/src/common/notices.scss new file mode 100644 index 0000000..2c078ed --- /dev/null +++ b/src/common/notices.scss @@ -0,0 +1,53 @@ +div#notice { + background-color: var(--bg) !important; + /*height: 2rem;*/ + /*width: 20% !important;*/ + top: 3rem !important; + /*left: 40%;*/ + margin-inline: auto; + position: absolute; + display: flex; + align-items: center; + justify-content: center; + border-radius: .5rem; + border: none; + border: .25rem solid var(--favorite-button) !important; + color: var(--base-text) !important; + + span { + margin: .5rem 1rem; + font-size: 1.1rem; + } +} + +a#close-notice-link { + width: 0; + height: 100%; + font-size: 0; + display: flex; + align-items: center; + justify-content: center; + position: relative; + margin-left: auto; + margin-right: 1.25rem; +} + +a#close-notice-link::before { + content: url("data:image/svg+xml,%3Csvg height='28.0' viewBox='0 0 18.0 18.0' width='28.0' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 11.87 L11.87 13 L9 10.13 L6.13 13 L5 11.87 L7.87 9 L5 6.13 L6.13 5 L9 7.87 L11.87 5 L13 6.13 L10.13 9 L13 11.87 Z M9 1 C4.58 1 1 4.58 1 9 C1 13.42 4.58 17 9 17 C13.42 17 17 13.42 17 9 C17 4.58 13.42 1 9 1 L9 1 Z' fill='%23ffffff' stroke-width='1.0'/%3E%3C/svg%3E"); + opacity: .3; + height: 2rem; + width: 2rem; + font-size: 4em; + position: absolute; + display: flex; + justify-content: center; + align-items: center; +} + +a#close-notice-link:hover::before { + opacity: .5; +} + +div#page > div#april-fools.site-notice { + border: 0 !important; +} diff --git a/src/common/page_header.scss b/src/common/page_header.scss new file mode 100644 index 0000000..960b2c7 --- /dev/null +++ b/src/common/page_header.scss @@ -0,0 +1,175 @@ +/*Old Header styling */ + +header#top { + background-color: var(--bg) !important; + background-image: none !important; + margin: 0 !important; + text-align: center !important; + top: 0 !important; + border-bottom: none !important; + min-height: 60px !important; + + menu { + background-color: rgba(0,0,0,0) !important; + margin: 0 auto; + border: none !important; + outline: none !important; + } + + menu.main { + background-color: rgba(0,0,0,0) !important; + } + + nav#nav { + border-bottom: none !important; + + a { + margin: 0 auto; + } + + menu.main { + border-bottom: 1px solid var(--header-link) !important; + padding: 0 0 0rem 0; + border-radius: 0; + } + + menu.extra:not(.main) { + background: unset; + margin: 0 0.5rem 0 0; + padding: 0.25rem 0; + position: absolute; + margin-left: auto; + right: 0; + top: 0; + } + + menu.extra:not(.main) { + background-color: var(--bg-400) !important; + margin-right: .5rem; + border-radius: 0 0 8px 8px; + border-bottom: 2px solid var(--bg-300) !important; + border-left: 2px solid var(--bg-300) !important; + border-right: 2px solid var(--bg-300) !important; + } + + menu.main.custom li { + padding: 6px 0; + } + } +} + +nav { + width: 100%; + max-width: 100vw; + border-radius: 100% !important; + text-align: center; + color: var(--header-link); + + * { + box-sizing: initial; + background-image: none; + } + + menu:nth-child(2) li a::before { + content: ''; + position: absolute; + height: 1.5px; + width: 100%; + left: 0; + top: -4px; + border-radius: 8px; + background-color: var(--nav-hover-top-color); + transition: var(--header-link-transition); + opacity: 0; + } + + menu:nth-child(2) li a:hover::before { + width: 100%; + opacity: 1; + } + + menu:nth-child(4) li a::after { + content: ''; + position: absolute; + height: 2px; + width: 100%; + left: 0; + bottom: 0; + background-color: var(--nav-hover-bottom-color); + transition: var(--header-link-transition); + opacity: 0; + } + + menu:nth-child(4) li a:hover::after { + width: 100%; + opacity: 1; + } + + a.tab-has-updates::after { + color: var(--warn-button) !important; + } + + .bg-foreground a::before { + display: none; + } + + .bg-foreground { + background-color: var(--bg-visiting) !important; + border-radius: 8px 8px 0 0; + height: 90%; + transition: var(--bg-visiting-transition); + } + + .bg-foreground:hover { + background-color: var(--bg-visiting-hover) !important; + } + + .bg-foreground a { + color: var(--header-link-visiting) !important; + + &:hover { + color: var(--header-link-visiting) !important; + } + } + + li a:visited { + color: var(--header-link); + } + + li a { + color: var(--header-link) !important; + position: relative; + height: 100%; + + &:hover { + color: var(--header-link-hover) !important; + } + } +} + +.fa-solid { + color: var(--header-link); + transition: var(--header-link-transition); + + &:hover { + color: var(--header-link-hover); + } +} + +.update-notification[data-loading="true"]::after { + bottom: 1rem; +} + +.simple_form { + background-color: var(--bg) !important; + border-radius: 2px 8px 8px 2px; + border-left: .25rem solid var(--elements-highlight) !important; +} + +form input, .input > input, .input > select { + border-radius: 3.5px; + color: var(--base-text) !important; + background-color: var(--bg-400) !important; + border: 2px solid var(--bg-300) !important; + padding: 0 .5rem; +} diff --git a/src/common/paginator.scss b/src/common/paginator.scss new file mode 100644 index 0000000..b40d453 --- /dev/null +++ b/src/common/paginator.scss @@ -0,0 +1,13 @@ +div.paginator { + max-width: 100vw; + overflow: hidden; + + li a { + transition: 100ms; + } + + li a:hover { + background-color: var(--bg-400) !important; + border-radius: 4px; + } +} diff --git a/src/common/spoiler.scss b/src/common/spoiler.scss new file mode 100644 index 0000000..a7fb352 --- /dev/null +++ b/src/common/spoiler.scss @@ -0,0 +1,27 @@ +.spoiler, .dtext-container .spoiler { + background: #1a1a1a !important; + color: transparent !important; + text-shadow: none !important; + border-radius: 4px; + transition: 100ms; + padding: 0 .25rem; + width: fit-content; + + &:hover { + color: var(--base-text) !important; + } +} + +.dtext-container .spoiler .dtext-link, .spoiler { + color: #1a1a1a !important; + text-shadow: none !important; + transition: 100ms; +} + +.spoiler:hover .dtext-link { + color: var(--content-link) !important; +} + +.spoiler:hover .dtext-link:hover { + color: var(--content-link-hover) !important; +} diff --git a/src/common/tags.scss b/src/common/tags.scss new file mode 100644 index 0000000..e7fad1e --- /dev/null +++ b/src/common/tags.scss @@ -0,0 +1,31 @@ +@each $tag-category, $tag-category-name in $tag-categories { + .category-#{$tag-category} a, a.tag-type-#{$tag-category} { + color: var(--tag-cat-#{$tag-category}) !important; + } + + .category-#{$tag-category} a:hover, a.tag-type-#{$tag-category}:hover { + color: var(--tag-cat-#{$tag-category}-hover) !important; + } +} + +.ui-widget.ui-widget-content { + border: 2px solid var(--bg-300) !important; + border-radius: 2px 8px 8px 8px; + overflow: hidden; +} + +.low-post-count { + color: var(--user-banned) !important; +} + +#sidebar > div[style="color:darkorange;margin-bottom:0.5rem;"] { + display: none; +} + +#sidebar .general-tag-list a { + color: var(--tag-cat-0) !important; +} + +#sidebar .general-tag-list a:hover { + color: var(--tag-cat-0-hover) !important; +} diff --git a/src/common/thumbnails.scss b/src/common/thumbnails.scss new file mode 100644 index 0000000..e144034 --- /dev/null +++ b/src/common/thumbnails.scss @@ -0,0 +1,45 @@ +article.thumbnail.captioned { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + width: 154px; +} + +article.thumbnail.captioned .desc { + width: 100%; + background-color: var(--bg) !important; +} + +article.thumbnail img { + object-fit: cover; + width: 154px; +} + +article.thumbnail .desc { + background-color: var(--bg-400) !important; +} + +article.thumbnail .desc a::before { + display: none; +} + +article.thumbnail[data-tags~="animated"] > a::before, article.thumbnail[data-file-ext~="webm"] > a::before { + background-color: var(--bg-300) !important; + color: var(--base-text) !important; + border: 2px solid var(--bg-400) !important; + right: .5rem; + top: .5rem; + position: absolute; + height: 20px; + width: 20px; + text-align: center; + display: flex; + align-items: center; + justify-content: center; +} + +.has-cropped-true { + object-fit: cover; + width: 154px; +} diff --git a/src/common/z_responsive.scss b/src/common/z_responsive.scss new file mode 100644 index 0000000..21b8cdf --- /dev/null +++ b/src/common/z_responsive.scss @@ -0,0 +1,545 @@ +@media screen and (max-width: 800px) { + div#page { + overflow: hidden; + } + + header#top nav#nav { + font-size: .76rem; + align-content: center; + } + + header#top nav#nav a.logo { + left: auto; + right: auto; + width: fit-content; + } + + header#top nav#nav menu.main { + flex-wrap: wrap; + } + + header#top nav#nav menu:last-child { + height: fit-content; + } + + header#top nav#nav menu.extra:not(.main) { + background-color: var(--bg) !important; + border-radius: 0 0 0 8px; + border-bottom: 2px solid var(--bg-300); + border-left: 2px solid var(--bg-300); + top:unset !important; + right: -8px; + bottom: -1.825rem; + /*Magic number woooooo, 1.83 has a 1 pixel gap, whereas this has 1 pixel overlap with the main nav, funnn */ + border-right: none !important; + z-index: 9970; + display: flex; + align-items: center; + overflow: hidden; + + & * { + font-size: 1rem; + } + } + + a i#maintoggle-on#maintoggle-on { + display: block !important; + } + + a i#maintoggle-on#maintoggle-on[style="display: none;"] { + display: none !important; + } + + body.resp .comment-post-grid .author-info .avatar .post-thumbnail { + background-color: transparent; + } + + body.resp .comment-post-grid .author-info .avatar .post-thumbnail img { + height: 100px; + aspect-ratio: 1/1; + margin: 1rem; + } + + div#c-posts div#a-index { + flex-direction: column-reverse !important; + } + + body.resp div#page > div > div > aside#sidebar { + font-size: inherit; + order: inherit; + } + + aside#sidebar > section#search-box { + display: none !important; + } + + div.mobile-search { + display: flex !important; + flex-direction: column; + } + + a.search-help.search-help { + width: auto !important; + } + + div.mobile-search div.search-input input, + div.mobile-search div.search-button button i::before { + display: inline-block; + height: 2rem; + } + + body:not([re621="true"]) div#nav-links-top, + body:not([re621="true"]) div#nav-links-bottom { + border-radius: 8px !important; + } + + body aside#sidebar div#re621-search { + top: -25px !important; + } + + section#content search-content search-stats { + right: .5rem; + } + + body.resp form select { + font-size: .75rem; + } + + aside#sidebar.collapsed { + position: absolute; + left: -1rem; + } + + section#content search-content { + width: 100%; + } + + body.resp #search-box { + display: flex; + margin-top: .5rem; + } + + body.resp form input[type="email"], + body.resp form input[type="number"], + body.resp form input[type="password"], + body.resp form input[type="text"] { + font-size: .75rem; + } + + div#c-posts div#a-index section#content, + div#c-posts div#a-show section#content, + div#c-favorites div#a-index section#content { + max-width: 65vw; + margin-inline: auto; + } + + .desktop-only { + display: flex !important; + } + + div#c-posts div#a-index aside#sidebar, + div#c-posts div#a-show aside#sidebar, + div#c-favorites div#a-index aside#sidebar { + width: 14.15rem; + } + + div#c-posts div#a-index section#content, + div#c-posts div#a-show section#content, + div#c-favorites div#a-index section#content { + position: unset !important; + } + + div#a-index { + ul:not(#related-list) { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + width: 90%; + margin-inline: auto; + isolation: isolate; + gap: .5rem; + + li { + margin-inline: auto; + display: grid; + grid-template-columns: .5fr 1fr; + grid-template-rows: repeat(2, 1.25rem); + grid-column-gap: 0px; + grid-row-gap: 0px; + align-items: center; + justify-content: center; + min-width: 10ch; + left: -.5rem; + position: relative; + z-index: 2; + padding: .25rem; + width: calc(fit-content + 2rem); + + &:hover { + .post-count { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + width: 5ch; + display: inline !important; + } + + .tag-actions { + background-color: var(--bg); + } + } + + &::after { + content: ''; + position: absolute; + height: 100%; + width: 100%; + z-index: -1; + background-color: var(--bg); + border-radius: 4px; + } + } + + span.tag-wrap { + display: flex; + flex-direction: column; + } + + .tag-actions { + z-index: 3; + height: .75rem; + right: 0 !important; + position: relative !important; + grid-area: 2 / 1 / 3 / 3; + } + + span.post-count { + position: absolute; + bottom: 0; + left: 0; + } + + a.search-tag { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 10ch; + } + + a.wiki-link { grid-area: 1 / 1 / 2 / 2; } + a.search-tag { grid-area: 1 / 2 / 2 / 3; } + + .search-inc-tag { + position: absolute; + bottom: 0; + right: 2.5rem; + } + + .search-exl-tag { + position: absolute; + bottom: 0; + right: .5rem; + } + } + } + + body[data-action="show"] div#c-posts #a-show, + body[data-action="show-seq"] div#c-posts #a-show, + div#c-posts div#a-index, + div#c-posts div#a-show, + div#c-favorites div#a-index { + display: flex !important; + + aside#sidebar { + padding: 0 !important; + width: calc(100% - .5rem) !important; + margin-inline: auto; + display: flex; + flex-direction: column; + + #re621-search { + width: 100%; + } + + #blacklist-box { + width: fit-content; + } + } + + a#sidebar-collapse { + display: none; + } + + section#image-extra-controls { + margin-inline: auto; + } + + .bg-foreground { + background-color: transparent !important; + width: 100%; + } + + #content { + width: calc(100% - .5rem) !important; + max-width: unset !important; + } + + #tag-list, #post-information, #post-options, #post-related-images { + width: fit-content; + font-size: 1.25rem; + } + + #post-options, #post-history { + display: flex; + flex-direction: column; + + h1 { + margin-inline: auto; + } + + ul { + display: flex; + align-items: center; + gap: .5rem; + width: fit-content; + margin-inline: auto; + } + } + + #tag-box > ul li, #tag-list > ul li { + width: fit-content; + font-size: 1.25rem; + + div.tag-actions { + right: 0rem; + } + } + + /* + aside#sidebar { + margin-top: 45vh; + + .bg-foreground { + background-color: transparent !important; + } + } + + #image-and-nav { + position: absolute; + max-height: 40vh !important; + top: 2rem; + left: 1rem; + right: 1rem; + + #image, #image-container { + width: auto; + max-height: 49vh; + height: 100%; + } + } + + #image-extra-controls { + margin-top: 45vh; + } + */ + } + + body[data-action="show"] div#c-posts #a-show, + body[data-action="show-seq"] div#c-posts #a-show { + flex-direction: column-reverse; + } + + .list-of-comments { + margin-top: 2rem; + } + + div.comments-for-post div.list-of-comments article.comment .author-info, + div.list-of-forum-posts .author-info, + .response-list .blip .author-info { + position: relative !important; + overflow: hidden !important; + + .blacklisted { + display: none !important; + } + + .post-thumbnail[data-status="deleted"] { + display: none !important; + } + + .name-rank { + z-index: 1; + margin-top: .25rem !important; + } + + .post-time { + z-index: 1; + } + } + + div.comments-for-post div.list-of-comments article.comment .avatar, + div.list-of-forum-posts .avatar, + .response-list .blip .avatar { + position: absolute !important; + top: -50% !important; + display: flex !important; + align-items: center !important; + justify-content: center !important; + z-index: 0 !important; + border-radius: 0% !important; + min-width: 100% !important; + max-width: unset !important; + aspect-ratio: unset !important; + + .post-thumbnail { + max-width: unset !important; + aspect-ratio: unset !important; + border: none !important; + border-radius: 0% !important; + height: 200% !important; + width: 100% !important; + pointer-events: none !important; + overflow: hidden !important; + } + + a, a img { + border-radius: 0% !important; + max-width: unset !important; + overflow: visible !important; + aspect-ratio: unset !important; + min-height: 100% !important; + min-width: 100% !important; + } + + .post-thumbnail img { + outline: none !important; + aspect-ratio: unset !important; + border-radius: 0% !important; + margin: 0 !important; + min-height: 100% !important; + min-width: 100% !important; + opacity: .2 !important; + filter: blur(10px) !important; + } + } + + div.comments-for-post div.list-of-comments article.comment .author-info, + div#c-blips article.blip .author-info, div.list-of-forum-posts .author-info { + width: 100%; + padding: 0rem; + position: relative; + + .post-time { + margin-right: .5rem; + user-select: none; + } + } + + aside#sidebar { + width: 7rem !important; + font-size: .8rem !important; + } + + body.resp div#page #c-help #sidebar { + top: 5rem; + } + + body.resp div#page #c-help section#content { + margin-left: 20vw !important; + } + + body[data-sticky="true"] aside#sidebar div#re621-search, + body[data-sticky="true"] aside#sidebar section#downloader-box, + body[data-sticky="true"] aside#sidebar section#fav-downloader-box { + position: -webkit-sticky; + position: sticky; + max-height: 50vh; + width: 7.5rem; + overflow: scroll; + scrollbar-width: thin; + } + + .stats-section { + overflow: scroll; + } + + .profile-avatar { + user-select: none; + } + + .profile-stats { + overflow: scroll; + + .column { + min-width: 150px; + } + } + + body[re621="true"] div#c-users div#a-show .profile-container { + flex-direction: column; + } + + body[re621="true"] div#c-users div#a-show .bottom-section.bottom-section { + max-width: unset !important; + } + + body[re621="true"] div#c-users div#a-show div.box.user-favorites div.vertical-section, + body[re621="true"] div#c-users div#a-show div.box.user-favorites div.vertical-section, + body[re621="true"] div#c-users div#a-show div.box.user-uploads div.vertical-section, + body[re621="true"] div#c-users div#a-show div.box.user-uploads div.vertical-sectionn { + flex-wrap: unset !important; + gap: .25rem; + } + + body.resp article.thumbnail a { + margin: revert; + } + + .vertical-section article:nth-child( n + 4 ) { + display: none !important; + justify-content: center !important; + } + + #c-help #sidebar, #c-wiki-pages #sidebar { + width: auto !important; + top: auto !important; + + h1 { + width: 75%; + text-align: center; + border-bottom: 1px solid var(--bg-400); + margin-inline: auto; + margin-bottom: .5rem; + padding-bottom: .25rem; + } + } + + #c-help #sidebar div[style="width:240px"] { + width: 100% !important; + } + + #c-help #sidebar ul, #c-wiki-pages #sidebar ul { + width: 100% !important; + display: flex; + flex-direction: row; + flex-wrap: wrap; + gap: .5rem; + margin-bottom: 3rem; + + li { + border: 2px solid var(--bg-400); + padding: .25rem; + background-color: var(--bg); + border-radius: 6px; + + &:hover { + background-color: var(--bg-300); + } + } + } + + body.resp div#page #c-help section#content, + body.resp div#page #c-wiki-pages section#content { + margin-left: 1rem !important; + margin-right: 1rem !important; + } +} diff --git a/src/eSixCafe.scss b/src/eSixCafe.scss new file mode 100644 index 0000000..0712490 --- /dev/null +++ b/src/eSixCafe.scss @@ -0,0 +1,68 @@ +@import "base/base"; +@import "base/colors"; +@import "base/links"; +@import "base/themable"; +@import "base/vars"; + +@import "common/comment_container"; +@import "common/footer"; +@import "common/helper_classes"; +@import "common/scores"; +@import "common/ads.scss"; +@import "common/autocomplete.scss"; +@import "common/blacklists.scss"; +@import "common/containers.scss"; +@import "common/dtext.scss"; +@import "common/forms.scss"; +@import "common/jquery_ui_custom.scss"; +@import "common/main_layout.scss"; +@import "common/navigation.scss"; +@import "common/news.scss"; +@import "common/notices.scss"; +/*@import "common/page_header.scss";*/ +@import "common/paginator.scss"; +@import "common/spoiler.scss"; +@import "common/tags.scss"; +@import "common/thumbnails.scss"; +/*@import "common/z_responsive.scss";*/ + +@import "specific/misc/challenge.scss"; +@import "specific/misc/cloudflare.scss"; +@import "specific/misc/extensions.scss"; +@import "specific/misc/maintenance.scss"; + +@import "specific/re621/components/_modal.scss"; +@import "specific/re621/modules/_better-search.scss"; +@import "specific/re621/modules/_profile_enhancer.scss"; +@import "specific/re621/modules/_search-utilities.scss"; +@import "specific/re621/modules/_structure-utilities.scss"; +@import "specific/re621/modules/_subscription-manager.scss"; +@import "specific/re621/utilities/_themed.scss"; + +@import "specific/admin_dashboards.scss"; +@import "specific/blips.scss"; +@import "specific/comments.scss"; +@import "specific/error.scss"; +@import "specific/favorites.scss"; +@import "specific/forum.scss"; +@import "specific/guest_warning.scss"; +@import "specific/help.scss"; +/*@import "specific/home.scss";*/ +@import "specific/iqdb_queries.scss"; +@import "specific/pools.scss"; +@import "specific/popular.scss"; +@import "specific/post_index.scss"; +@import "specific/post_replacements.scss"; +@import "specific/post_versions.scss"; +@import "specific/posts.scss"; +@import "specific/related_tags.scss"; +@import "specific/settings.scss"; +@import "specific/site_map.scss"; +@import "specific/stats.scss"; +@import "specific/tickets.scss"; +@import "specific/uploads.scss"; +@import "specific/user_feedback.scss"; +@import "specific/user_warned.scss"; +@import "specific/users.scss"; +@import "specific/wiki_page_versions.scss"; +@import "specific/wiki_pages.scss"; diff --git a/src/specific/admin_dashboards.scss b/src/specific/admin_dashboards.scss new file mode 100644 index 0000000..86cd91f --- /dev/null +++ b/src/specific/admin_dashboards.scss @@ -0,0 +1,3 @@ +div#c-security div#a-index .settings-section { + background-color: var(--bg-400); +} diff --git a/src/specific/blips.scss b/src/specific/blips.scss new file mode 100644 index 0000000..cc75440 --- /dev/null +++ b/src/specific/blips.scss @@ -0,0 +1,9 @@ +div#c-blips { + article.blip { + @if $comment-buttons { + .content-menu menu { + gap: .25rem; + } + } + } +} diff --git a/src/specific/comments.scss b/src/specific/comments.scss new file mode 100644 index 0000000..e788e2e --- /dev/null +++ b/src/specific/comments.scss @@ -0,0 +1,312 @@ +div#c-comments { + div#a-index, div#a-show { + .comment-post { + background-color: var(--bg-400) !important; + border-left: .25rem solid var(--elements-highlight); + border-radius: 2px 8px 8px 2px; + overflow: hidden; + padding: .5rem; + } + + .post-container { + align-items: center; + justify-content: center; + padding: .5rem; + } + } + + div#a-index .post-container picture, div#a-show .post { + width: fit-content; + margin-inline: auto; + border-radius: 4px; + overflow: hidden; + border: 4px solid var(--bg-300); + } +} + +div#c-comments { + div#a-index { + div.comments-for-post div.list-of-comments article.comment { + border: 2px solid var(--bg-300) !important; + } + } + + div#a-show { + .post { + margin: .5rem auto 1rem auto; + } + } +} + +.below-threshold { + transition: 200ms; + + .dtext-container { + background-color: var(--bg-400); + width: fit-content; + padding: .5rem; + border-radius: 4px; + } + + .dtext-container .styled-dtext { + opacity: 0; + user-select: none; + transition: 200ms; + } +} + +.below-threshold { + .dtext-container:hover { + background-color: var(--bg); + transition: 200ms; + } + + .dtext-container:hover .styled-dtext { + opacity: 1; + user-select: auto; + } +} + +div.comments-for-post div.list-of-comments article.comment, +div#c-blips article.blip, +#p-index-by-comment div.comments article.comment { + border-radius: 8px; + overflow: hidden; + + .author-info { + position: relative; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-between; + border-right: 2px solid var(--bg-300) !important; + height: 100%; + width: 90%; + + .name-rank { + width: 100%; + color: var(--base-text-faded); + font-size: .75rem; + text-align: center; + user-select: none; + + h4 { + width: fit-content; + margin-inline: auto; + user-select: text; + } + + a { + font-size: 1rem; + margin-inline: auto; + width: fit-content; + } + } + } + + .avatar, .blacklisted { + display: flex; + align-items: center; + justify-content: center; + margin: .5rem auto; + max-width: 90%; + position: relative; + aspect-ratio: 1/1; + border-radius: var(--avatar-border-radius); + overflow: hidden; + + a { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + border-radius: var(--avatar-border-radius); + } + + .post-thumbnail { + display: flex; + align-items: center; + justify-content: center; + border: 5px solid var(--elements-highlight); + aspect-ratio: 1/1; + } + + .post-thumbnail, img { + border-radius: var(--avatar-border-radius); + object-fit: cover; + width: 100%; + margin-inline: auto; + aspect-ratio: 1/1; + user-select: none; + } + + .post-thumbnail[data-status="deleted"] { + a { + height: 100%; + aspect-ratio: 1/1; + border-radius: var(--avatar-border-radius); + overflow: hidden; + position: relative; + } + + a::before { + content: "Deleted"; + background-color: var(--deleted-bg); + border: 5px solid var(--elements-highlight); + color: var(--deleted-text); + font-weight: bold; + position: absolute; + display: flex; + height: 100%; + aspect-ratio: 1/1; + align-items: center; + justify-content: center; + font-size: 1.5rem; + border-radius: var(--avatar-border-radius); + } + } + } + + .blacklisted { + a::before { + content: "Blacklisted"; + background-color: var(--blacklisted-bg); + color: var(--blacklisted-text); + font-weight: bold; + height: 100%; + width: 100%; + position: absolute; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.25rem; + } + } + + .post-time { + width: fit-content; + margin-left: auto; + margin-bottom: .5rem; + margin-top: auto; + bottom: 0; + font-size: .75rem; + user-select: none; + + a { + color: var(--base-text-faded) !important; + } + } +} + +/* Name rank colors */ +a[class^="user-"] { + color: var(--user-member) !important; + + &:hover { + color: var(--user-member-hover) !important; + } +} + +@each $rank-name, $rank-value in $rank-listing { + .user-#{$rank-name}.with-style { + color: var(--user-#{$rank-value}) !important; + + &:hover { + color: var(--user-#{$rank-value}-hover) !important; + } + } +} + +a.user-blocked, a.user-banned { + color: var(--user-banned) !important; + + &:hover { + color: var(--user-banned-hover) !important; + } +} + +@if $name-rank-border-colors { + :root { + --mobileRankOpacity: 0.2; + } + + @each $rank-name, $rank-value in $rank-listing { + .author-info:has(.user-#{$rank-name}) .post-thumbnail { + border-color: var(--user-#{$rank-value}) !important; + background-color: var(--user-#{$rank-value}) !important; + + &::after { + content: ''; + height: 100%; + width: 100%; + position: absolute; + z-index: -1; + opacity: var(--mobileRankOpacity); + background-color: var(--user-#{$rank-value}); + } + + @media screen and (max-width: 800px) { + background-color: transparent !important; + } + } + } +} + +.comments article { + position: relative; +} + +/* fun lil thing for me - suggested by faucet lolll */ +article[data-creator-id="192568"] .author-info { + position: relative; + + .name-rank { + font-size: 0 !important; + + &::after { + content: "Café Dev"; + font-size: .75rem; + } + } + + &::after { + content: url("data:image/svg+xml,%3Csvg height='24.0' viewBox='0 0 24.0 24.0' width='24.0' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.58 11.4L17.3 4.01l-0.35 -0.6L7.04 3.41l-0.35 0.6 -4.27 7.39 -0.35 0.6 0.35 0.6 4.27 7.39 0.35 0.6h9.92l0.35 -0.6 4.28 -7.39 0.35 -0.6 -0.36 -0.6zM8.51 10.37L6.88 12l1.63 1.63v2.73L4.15 12l4.37 -4.37v2.74zM11.63 17.3l-2.04 -0.63 3.1 -9.98 2.04 0.64 -3.1 9.97zM15.49 16.37v-2.73L17.12 12l-1.63 -1.63L15.49 7.63L19.85 12l-4.36 4.37z' fill='%23ffffffff'/%3E%3C/svg%3E"); + position: absolute; + display: inline-block; + top: .25rem; + right: .25rem; + mix-blend-mode: soft-light; + opacity: .6; + } +} + +/*---- Uncomment this and pull request if you wanna consider yourself a dev faucet, dunno if you want to change your rank from "Priviliged" to "Priviliged Café Dev" or not lolllll +article[data-creator-id="601225"] .author-info { + position: relative; + + .name-rank { + font-size: 0 !important; + + &::after { + content: "Privileged Café Dev"; + font-size: .75rem; + } + } +} +----*/ + +/* Super Secret Helper badges */ +article[data-creator-id="601225"] .author-info, +article[data-creator-id="884003"] .author-info { + position: relative; + + &::after { + content: url("data:image/svg+xml,%3Csvg height='16' viewBox='0 0 31.27 29.53' width='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cpath d='M22.8 1 S34.8 9.19 30.24 20.69 S16.61 29 20 25.64 S16 20 11.27 15.64 L22.79 1' fill='%23ffffff7a'/%3E%3Cpath d='M22.07 12.26 C19.54 15.48 15.97 17.09 13.21 16.51 L3.58 28.78 A2 2 0 0 1 0.77 29.12 A2 2 0 0 1 0.42 26.3 L10 14.05 C8.73 11.51 9.43 7.62 12 4.37 C15.19 0.33 20 -1.18 22.79 1 S25.24 8.22 22.07 12.26 Z' fill='%23ffffff'/%3E%3C/g%3E%3C/svg%3E"); + position: absolute; + display: inline-block; + top: .25rem; + right: .25rem; + mix-blend-mode: soft-light; + opacity: .6; + } +} diff --git a/src/specific/error.scss b/src/specific/error.scss new file mode 100644 index 0000000..6c65103 --- /dev/null +++ b/src/specific/error.scss @@ -0,0 +1,3 @@ +ul.backtrace { + background: var(--bg); +} diff --git a/src/specific/favorites.scss b/src/specific/favorites.scss new file mode 100644 index 0000000..9c518a1 --- /dev/null +++ b/src/specific/favorites.scss @@ -0,0 +1,5 @@ +div#c-favorites { + div#a-index aside#sidebar { + width: 14.5rem; + } +} diff --git a/src/specific/forum.scss b/src/specific/forum.scss new file mode 100644 index 0000000..19c5794 --- /dev/null +++ b/src/specific/forum.scss @@ -0,0 +1,359 @@ +div.list-of-forum-posts { + .comment-post-grid { + background-color: var(--bg) !important; + border-radius: 8px; + overflow: hidden; + } + + .expandable { + background-color: var(--bg-400) !important; + } + + pre { + background-color: var(--bg-400) !important; + } + + .author-info { + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-between; + border-right: 2px solid var(--bg-300); + height: 100%; + width: 90%; + + .name-rank { + width: 100%; + color: var(--base-text-faded); + font-size: .75rem; + text-align: center; + user-select: none; + + h4 { + width: fit-content; + margin-inline: auto; + user-select: text; + } + + a { + font-size: 1rem; + margin-inline: auto; + width: fit-content; + } + } + } + + .avatar, .avatar .blacklisted { + display: flex; + align-items: center; + justify-content: center; + margin: .5rem auto; + max-width: 90% !important; + position: relative; + aspect-ratio: 1/1; + border-radius: var(--avatar-border-radius); + overflow: hidden; + + a { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + border-radius: var(--avatar-border-radius); + } + + .post-thumbnail { + display: flex; + align-items: center; + justify-content: center; + border: 5px solid var(--elements-highlight); + aspect-ratio: 1/1; + } + + .post-thumbnail, img { + border-radius: var(--avatar-border-radius); + max-height: 100% !important; + object-fit: cover; + width: 100% !important; + min-width: 124px; /* Magic number, just took the pixel measurement that firefox gave me for avatars that fully filled the space and added it here */ + margin-inline: auto; + aspect-ratio: 1/1; + user-select: none; + } + + .post-thumbnail[data-status="deleted"] { + a { + height: 100%; + aspect-ratio: 1/1; + border-radius: var(--avatar-border-radius); + overflow: hidden; + position: relative; + } + + a::before { + content: "Deleted"; + background-color: var(--deleted-bg); + border: 5px solid var(--elements-highlight); + color: var(--deleted-text); + font-weight: bold; + position: absolute; + display: flex; + height: 100%; + aspect-ratio: 1/1; + align-items: center; + justify-content: center; + font-size: 1.5rem; + border-radius: var(--avatar-border-radius); + } + } + } + + .blacklisted { + a::before { + content: "Blacklisted"; + background-color: var(--blacklisted-bg); + color: var(--blacklisted-text); + font-weight: bold; + height: 100%; + width: 100%; + position: absolute; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.25rem; + } + } + + .post-time { + width: fit-content; + margin-left: auto; + margin-bottom: .5rem; + margin-top: auto; + bottom: 0; + font-size: .75rem; + user-select: none; + + a { + color: var(--base-text-faded) !important; + } + } +} + +div#c-forum-topics { + table.striped tr.forum-topic-row { + background-color: transparent !important; + } + + table.striped tr.forum-topic-row > td:nth-child(1) { + display: flex; + align-items: center; + + .sticky { + margin-left: .25rem; + margin-right: .25rem; + display: flex; + align-items: center; + justify-content: center; + position: relative; + font-size: 0 !important; + width: 20px; + } + + .sticky::after { + content: url("data:image/svg+xml,%3Csvg height='24.0' viewBox='0 0 24.0 24.0' width='24.0' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22 12.3698L11.6302 2L10.1479 3.4802L11.6302 4.9625L6.4448 10.1469V10.149L4.9625 8.6667L3.4813 10.149L7.926 14.5927L2 20.5177L3.4813 21.999L9.4073 16.074L13.8521 20.5177L15.3333 19.0365L13.8521 17.5552L19.0365 12.3698H19.0375L20.5188 13.851L22 12.3698Z' fill='%23ffffffff'/%3E%3C/svg%3E"); + position: absolute; + bottom: -.75rem; + mix-blend-mode: soft-light; + } + + .new { + margin-left: .25rem; + margin-right: .15rem !important; + display: flex; + align-items: center; + justify-content: center; + position: relative; + font-size: 0 !important; + width: 20px; + } + + .new::after { + content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' enable-background='new 0 0 24 24' height='24px' viewBox='0 0 24 24' width='24px' fill='%23ffffff'%3E%3Cg%3E%3Crect fill='none' height='24' width='24'/%3E%3C/g%3E%3Cg%3E%3Cg%3E%3Ccircle cx='19' cy='3' r='3'/%3E%3Cpath d='M6 8V6h9.03c-1.21-1.6-1.08-3.21-0.92-4H4.01c-1.1 0-2 0.89-2 2L2 22l4-4h14c1.1 0 2-0.9 2-2V6.97 C21.16 7.61 20.13 8 19 8H6z M14 14H6v-2h8V14z M18 11H6V9h12V11z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); + position: absolute; + bottom: -.75rem; + mix-blend-mode: soft-light; + } + + .locked-topic { + margin-left: .5rem !important; + display: flex; + align-items: center; + justify-content: center; + position: relative; + font-size: 0 !important; + width: 10px; + } + + .locked-topic::after { + content: url("data:image/svg+xml,%3Csvg height='20.0' viewBox='0 2 15.0 15.0' width='30.0' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.8 7L10.8 5.5C10.8 4.1 9.4 3 8 3C6.6 3 5.2 4.1 5.2 5.5L5.2 7C4.6 7 4 7.6 4 8.2L4 11.7C4 12.4 4.6 13 5.2 13L10.7 13C11.4 13 12 12.4 12 11.8L12 8.3C12 7.6 11.4 7 10.8 7ZM9.5 7L6.5 7L6.5 5.5C6.5 4.7 7.2 4.2 8 4.2C8.8 4.2 9.5 4.7 9.5 5.5L9.5 7Z' fill='%23ffffff'/%3E%3C/svg%3E"); + position: absolute; + bottom: -.75rem; + mix-blend-mode: soft-light; + } + + .forum-post-link { + margin-right: 0rem !important; + margin-left: .25rem !important; + color: var(--content-link) !important; + } + + .forum-post-link:hover { + color: var(--content-link-hover) !important; + } + + .last-page { + margin-left: .5rem; + position: relative; + display: flex; + align-items: center; + color: var(--base-text-faded) !important; + + &:hover { + color: var(--base-text) !important; + } + } + + .last-page::after { + content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='20px' viewBox='0 0 20 20' width='20px' fill='%23ffffff'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath d='M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6-6-6zM16 6h2v12h-2z'/%3E%3C/svg%3E"); + opacity: .3; + } + + .last-page:hover::after { + opacity: .7; + } + } + + table.striped tr.forum-topic-row > td:nth-child(n + 2) { + time { + color: var(--base-text-faded); + } + } + + .comment-post-grid .content .content-menu menu { + gap: .75rem; + + ul { + flex-wrap: wrap; + } + + .votes { + display: flex; + + li { + background-color: var(--bg-400); + margin: .25rem; + height: 28px; + padding: 0 .5rem; + border-radius: 4px; + display: flex; + align-items: center; + justify-content: space-around; + + .fa-regular { + margin-right: .25rem; + } + } + + li.forum-post-vote-block { + gap: .5rem; + + .fa-regular { + margin-right: 0; + } + } + } + } +} + +#new-response-link { + position: relative; + height: 0; + width: fit-content; + display: flex; + align-items: center; + gap: .25rem; + padding: 1rem; + font-size: 0; + background-color: var(--bg) !important; + border-radius: 2px 8px 8px 8px; + border: 2px solid var(--bg); + + &:hover { + background-color: var(--bg-400) !important; + } + + &::before { + content: "Reply"; + font-size: 1.2rem; + } + + &::after { + content: url("data:image/svg+xml,%3Csvg height='24.0' viewBox='0 0 24.0 24.0' width='24.0' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 8.2667V4L3 11.4667L10 18.9333V14.56C15 14.56 18.5 16.2667 21 20C20 14.6667 17 9.3333 10 8.2667Z' fill='%23c8c8c8'/%3E%3C/svg%3E"); + opacity: 1; + mix-blend-mode: luminosity; + } +} + +table.striped thead tr, table.table thead tr { + background-color: transparent !important; + border-bottom-color: var(--bg-300) !important; +} + +table.striped thead th, table.table thead th { + background-color: var(--bg-400) !important; + color: var(--base-text) !important; +} + +table.striped, table.table { + border-radius: 8px; + overflow: hidden; + background-color: var(--bg) !important; +} + +table.striped tbody tr, table.table tbody tr { + background-color: transparent !important; + border-color: var(--bg-300) !important; +} + +table.striped tbody tr td, table.table tbody tr td { + background-color: var(--bg); +} + +.pool-category-series a, .pool-category-collection a, table tr[id^='artist-'] a, #set-index a[href^="/post"] { + color: var(--content-link) !important; + + &:hover { + color: var(--content-link-hover) !important; + } +} + +#c-bulk-update-requests { + form.simple_form.inline-form div.input.string.optional { + input { + max-width: 80%; + } + } + + th:nth-child(1) { + width: fit-content !important; + } + + table.striped { + td { + word-wrap: break-word; + max-width: 10ch; + max-height: 1rem; + text-overflow: ellipsis; + } + } +} diff --git a/src/specific/guest_warning.scss b/src/specific/guest_warning.scss new file mode 100644 index 0000000..e7603f7 --- /dev/null +++ b/src/specific/guest_warning.scss @@ -0,0 +1,15 @@ +.guest-warning { + background-color: var(--bg); + + .guest-warning-dialog { + background-color: var(--bg-300); + border: 2px solid var(--bg-400); + border-radius: 8px; + overflow: hidden; + } + + .dialog-header { + border-bottom: 1px solid var(--bg); + background-color: var(--bg-400) !important; + } +} diff --git a/src/specific/help.scss b/src/specific/help.scss new file mode 100644 index 0000000..9ddda9d --- /dev/null +++ b/src/specific/help.scss @@ -0,0 +1,26 @@ +#c-help { + #sidebar { + position: sticky; + left: 0; + top: 4rem; + padding: .5rem .5rem; + + h1 { + width: 75%; + text-align: center; + border-bottom: 1px solid var(--bg-400); + margin-inline: auto; + margin-bottom: .5rem; + padding-bottom: .25rem; + } + + div[style="width:240px"] { + width: fit-content !important; + } + + ul { + display: flex; + flex-direction: column; + } + } +} diff --git a/src/specific/home.scss b/src/specific/home.scss new file mode 100644 index 0000000..0c6d885 --- /dev/null +++ b/src/specific/home.scss @@ -0,0 +1,175 @@ +html { + overflow: hidden; +} + +body { + max-height: 100vh; + max-width: 100vw; + overflow: hidden; + background-image: var(--main-page-background) !important; + background-position: center; + background-size: cover !important; + background-color: var(--bg) !important; +} + +body.c-static.a-home nav.navigation { + background: var(--bg); + border: 4px solid var(--bg-400); + border-top: 0px solid transparent; + border-radius: 0 0 8px 8px; + width: fit-content; + margin-inline: auto; + padding-left: 1rem; + padding-right: 1rem; +} + +div#page { + background: none !important; + margin: 25rem auto 0 !important; +} + +body.c-static.a-home .home-section, +body.c-static.a-home section[class^="home-footer"] { + border-radius: 0; + background-color: var(--bg); +} + +.home-section, .home-footer-top { + border-bottom: 2px solid var(--bg-400); +} + +body.c-static.a-home :first-of-type(section.home-section) { + border-radius: 8px 8px 0 0 !important; +} + +body.c-static.a-home .home-footer-bottom { + border-radius: 0 0 8px 8px !important; +} + +body.c-static.a-home i { + color: var(--base-link) !important; +} + +body.c-static.a-home a:hover i { + color: var(--base-link-hover) !important; +} + +body.c-static.a-home .home-footer-counter img { + filter: grayscale(100) brightness(.5); + opacity: .7 +} + +#mascot-swap { + display: none; +} + +#mascot-artist { + display: flex; + align-items: center; + justify-content: center; + width: 0; + height: 100%; + margin-inline: auto; + font-size: 0; +} + +#home-section { + border-radius: 0 !important; + border-top: var(--bg-400) 2px solid; + border-bottom: var(--bg-400) 2px solid; + background-color: var(--bg-400) !important; +} + +.home-footer-top { + display: flex; + flex-direction: column; + align-items: center; + margin-inline: auto; + position: relative; + padding-top: .5rem; + + p { + margin-top: 2rem; + } +} + +.home-footer-top::after { + content: var(--artist-credit); + padding: .2rem; + border-radius: .25rem; + border: 2px solid var(--bg-400); + display: flex; + align-items: center; + justify-content: center; + font-size: 1rem; + width: fit-content; + position: absolute; +} + +#searchbox2 { + display: none; +} + +body, div#page { + max-height: 100vh; + overflow: hidden; +} + +#a-home { + width: fit-content; + overflow: hidden; + border-radius: 8px; + margin-inline: auto; + border: 2px solid var(--bg-400); + box-shadow: 0px 0px 40px #232323; + margin: auto; +} + +#a-home * { + margin: 0; + margin-inline: auto; + box-shadow: none; + background-image: none !important; + backdrop-filter: none !important; +} + +#searchbox { + border-radius: 0 0 !important; + background-color: var(--bg) !important; + padding-bottom: 0; +} + +#searchbox3 { + border-radius: 0 0 !important; + background-color: var(--bg) !important; +} + +form[action="/posts"]:first-child { + margin-bottom: .5rem !important; +} + +input:focus, select:focus, textarea:focus { + background-color: var(--bg-400); + color: var(--base-text); +} + +.ui-widget.ui-widget-content { + border: none; + border-radius: 2px 8px 8px 8px; + overflow: hidden; +} + +ul.ui-autocomplete li:hover * { + border: none; + background-color: var(--bg) !important; +} + +.ui-autocomplete .autocomplete-arrow { + color: var(--base-text-faded) !important; +} + +.ui-widget-content { + background-color: var(--bg-300); + margin-top: .2rem; + margin-left: .05rem; +} diff --git a/src/specific/iqdb_queries.scss b/src/specific/iqdb_queries.scss new file mode 100644 index 0000000..a37e736 --- /dev/null +++ b/src/specific/iqdb_queries.scss @@ -0,0 +1,9 @@ +div#c-iqdb-queries { + div#a-show { + div#a-check article.thumbnail { + border: 0; + background-color: #00000040 !important; + border-radius: 6px; + } + } +} diff --git a/src/specific/misc/challenge.scss b/src/specific/misc/challenge.scss new file mode 100644 index 0000000..e237e0e --- /dev/null +++ b/src/specific/misc/challenge.scss @@ -0,0 +1,75 @@ +/* Confirm you're not a robot page */ + +.message { + position: absolute; + left: 40%; + top: 10%; + display: grid; + place-items: center; + width: 20%; + min-width: fit-content; + max-height: 30%; + min-height: fit-content; + padding: 1rem; + margin-inline: auto; + background-color: var(--bg); + border-radius: 8px; + overflow: hidden; + + &::before { + content: ''; + height: 100%; + aspect-ratio: 1/1; + position: absolute; + bottom: -40%; + left: -25%; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%2300000055' class='bi bi-gear-fill' viewBox='0 0 16 16'%3E%3Cpath d='M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-size: 100%; + z-index: 1; + animation: rotate-gear 15s linear infinite; + } + + &::after { + content: ''; + height: 100%; + aspect-ratio: 1/1; + position: absolute; + top: -40%; + right: -25%; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%2300000055' class='bi bi-gear-fill' viewBox='0 0 16 16'%3E%3Cpath d='M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-size: 100%; + z-index: 1; + animation: rotate-gear 20s linear infinite; + } + + h1, p, form { + z-index: 10; + } + + .e6-challenge { + cursor: pointer; + + input { + background-color: var(--bg-300) !important; + border-radius: 8px; + transition: 100ms; + padding: .5rem; + + &:hover { + background-color: var(--bg-400) !important; + } + } + + @keyframes rotate-gear { + from { + transform: rotate(0deg); + } + + to { + transform: rotate(360deg); + } + } + } +} diff --git a/src/specific/misc/cloudflare.scss b/src/specific/misc/cloudflare.scss new file mode 100644 index 0000000..12d685b --- /dev/null +++ b/src/specific/misc/cloudflare.scss @@ -0,0 +1,31 @@ +/* Cloudflare error page */ + +#cf-wrapper { + .code-label { + background-color: var(--remove-favorite); + } + + span { + color: var(--base-text); + } + + .my-8.bg-gradient-gray { + background-color: var(--bg) !important; + + .w-240 { + margin: 0; + background-color: var(--bg); + width: 100%; + padding: 0 20%; + } + } + + .cf-error-source::after { + box-shadow: none; + background-color: var(--bg-300); + } + + .border-gray-300 { + border-color: var(--base-text-faded); + } +} diff --git a/src/specific/misc/extensions.scss b/src/specific/misc/extensions.scss new file mode 100644 index 0000000..005536d --- /dev/null +++ b/src/specific/misc/extensions.scss @@ -0,0 +1,26 @@ +/* idem's Sourcing Suite */ + +h1 { + background-color: var(--bg); + color: var(--content-link) !important; +} + +.setting_section { + background-color: var(--bg) !important; +} + +.setting_description, .setting_values { + color: var(--base-text); +} + +.setting_values > * { + border-bottom: 1px solid var(--base-text-faded); +} + +.setting_header, .settings_table_head { + color: var(--content-link) !important; +} + +button, input { + border: 2px solid var(--bg-300); +} diff --git a/src/specific/misc/maintenance.scss b/src/specific/misc/maintenance.scss new file mode 100644 index 0000000..790449b --- /dev/null +++ b/src/specific/misc/maintenance.scss @@ -0,0 +1,35 @@ +/* Server maintenance page */ + +#b { + display: flex; + align-items: center; + justify-content: center; + + * { + color: var(--base-text); + } + + picture { + display: none; + } + + .v.ps3.s3.c2 { + &::before { + content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='0.888889in' height='0.888889in' viewBox='0 0 80 80'%3E%3Cpath id='Ears' fill='%230000007a' d='M 59.40,30.84 C 59.40,30.84 65.43,29.43 66.48,31.56 67.34,33.30 63.45,36.52 63.45,36.52 63.45,36.52 66.80,40.99 66.80,40.99 66.80,40.99 71.25,37.71 73.37,35.95 75.76,33.96 79.67,30.51 78.00,27.63 74.71,21.95 59.88,25.40 56.15,26.58 56.15,26.58 59.40,30.84 59.40,30.84 Z M 32.47,18.49 C 32.47,18.49 34.98,12.82 37.31,13.26 39.22,13.62 39.45,18.68 39.45,18.68 39.45,18.68 45.03,18.68 45.03,18.68 45.03,18.68 45.10,13.15 44.96,10.40 44.80,7.30 44.40,2.09 41.10,1.69 34.59,0.90 28.42,14.84 27.11,18.52 27.11,18.52 32.47,18.49 32.47,18.49 Z' /%3E%3Cpath id='Head' fill='%230000007a' d='M 18.16,22.16 C 22.82,22.14 42.66,22.28 49.38,22.28 50.84,24.78 63.48,46.58 64.97,49.27 63.33,52.12 49.54,75.82 49.37,76.03 47.16,76.11 18.34,76.20 18.34,76.20 18.12,75.85 4.17,51.82 2.59,49.11 4.01,47.12 16.09,25.71 18.16,22.16 Z M 50.70,51.17 C 50.52,44.43 49.33,38.74 43.16,34.88 32.70,28.33 18.38,35.78 17.87,48.35 18.38,65.75 36.78,70.96 46.33,60.22 46.33,60.22 41.80,56.02 41.80,56.02 35.65,60.70 30.39,60.13 25.61,53.17 25.61,53.17 50.70,51.17 50.70,51.17 Z M 24.88,46.19 C 28.25,37.38 39.13,36.39 43.22,45.12 43.22,45.12 24.88,46.19 24.88,46.19 Z' /%3E%3C/svg%3E"); + mix-blend-mode: overlay; + height: 100%; + aspect-ratio: 1/1; + margin-inline: auto; + position: relative; + display: flex; + } + } + + .v.ps.s.c { + background: var(--bg-300); + } + + .ps5.v2.s5 { + display: none; + } +} diff --git a/src/specific/pools.scss b/src/specific/pools.scss new file mode 100644 index 0000000..15abaac --- /dev/null +++ b/src/specific/pools.scss @@ -0,0 +1,72 @@ + +/* +article.thumbnail .desc { + background-color: var(--bg-400) !important; + border-radius: 0 0 .5rem .5rem; +} + +input[data-disable-with="Search"] { + border-radius: 4px; + background-color: var(--bg); + border: 2px solid var(--bg-400); + color: var(--base-text); +} + +div#c-pools div#a-show #blacklist-box { + display: flex; +} + +#a-gallery { + background-color: var(--bg) !important; + padding: 2rem; + border-radius: 8px; + display: flex; + flex-direction: column; + + .paginator { + min-width: fit-content; + width: 25vw; + position: relative; + margin-inline: auto; + } +} + +#a-gallery h2 { + margin-inline: auto; + margin-bottom: 1rem; +} + +#a-gallery section { + margin-inline: auto; + width: 90%; +} + +#a-gallery section { + display: flex; + flex-direction: row; + max-width: 90vw; + min-height: fit-content; + position: relative; + flex-wrap: wrap; + justify-content: center; +} + +#a-gallery #posts > div > article { + min-width: fit-content; + margin-inline: auto; +} +*/ + +#blacklist-box.inline-blacklist { + padding: .15rem; + background-color: var(--bg-400); + border-left: .25rem solid var(--elements-highlight); + color: var(--base-text); + border-radius: .15rem; + overflow: hidden; + min-width: 20%; + transition: 200ms; + display: flex; + flex-direction: column; + position: relative; +} diff --git a/src/specific/popular.scss b/src/specific/popular.scss new file mode 100644 index 0000000..d402590 --- /dev/null +++ b/src/specific/popular.scss @@ -0,0 +1,263 @@ +div#c-popular { + background-color: var(--bg) !important; + padding: 2rem; + border-radius: 8px; + display: flex; + flex-direction: column; + overflow: hidden; + + h1 { + margin-inline: auto; + margin-bottom: 1rem; + } + + #posts > div { + margin-inline: auto; + width: 90%; + } + + #posts > div { + display: grid; + grid-template-columns: repeat( auto-fill, minmax(175px, 1fr) ); + max-width: 90vw; + min-height: fit-content; + position: relative; + } + + #posts > div > article { + min-width: fit-content; + margin-inline: auto; + } + + /* New popular page gridification */ + #a-index { + display: grid; + grid-template-columns: repeat(10, 1fr); + grid-template-rows: 3rem 3rem 1fr; + grid-column-gap: 0px; + grid-row-gap: 0px; + position: relative; + + h1 { + grid-area: 1 / 1 / 3 / 5; + height: fit-content; + } + + #posts { + grid-area: 3 / 1 / 11 / 11; + height: fit-content; + + & article a { + height: 150px; + width: 175px; + position: relative; + display: grid; + place-items: center; + overflow: hidden; + border-radius: 6px 6px 0 0; + + & picture { + width: 100%; + height: 100%; + display: grid; + place-items: center; + } + + & img { + height: 100%; + width: 100%; + max-height: 150%; + max-width: 150%; + object-fit: cover; + transition: 200ms; + transform-origin: top; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + } + + &:hover img { + height: 105%; + width: 105%; + } + } + } + } + + #popular-nav-links { + grid-area: 2 / 5 / 3 / 11; + height: fit-content; + margin: none; + } + + section.blacklist-ui.blacklist-ui.blacklist-inline { + grid-area: 2/2/2/2; + margin-right: auto; + padding: 0 0 1rem 0; + display: flex; + position: relative; + flex-direction: column; + + & .blacklist-header { + height: fit-content; + + &::before { + border-color: transparent var(--base-text) var(--base-text) transparent !important; + } + } + + &[collapsed="true"] .blacklist-filters { + display: none; + } + + & .blacklist-filters { + z-index: 99; + display: grid; + grid-template-columns: repeat(4,1fr); + background-color: var(--bg); + border: 2px solid var(--bg-300); + border-radius: 6px; + position: absolute; + padding: .5rem; + top: calc(80% + 1rem); + + #c-popular section.blacklist-ui.blacklist-ui.blacklist-inline { + grid-area: 2/2/2/2; + margin-right: auto; + padding: 0 0 1rem 0; + display: flex; + position: relative; + flex-direction: column; + + & .blacklist-header { + height: fit-content; + + &::before { + border-color: transparent var(--base-text) var(--base-text) transparent !important; + } + } + + &[collapsed="true"] .blacklist-filters { + display: none; + } + + & .blacklist-filters { + z-index: 99; + display: grid; + grid-template-columns: repeat(4,1fr); + background-color: var(--bg); + border: 2px solid var(--bg-300); + border-radius: 6px; + position: absolute; + padding: .5rem; + top: calc(80% + 1rem); + overflow: unset; + max-width: calc(80ch + 2rem + 20px); + + & li[enabled="true"] a { + border-bottom: 2px solid var(--favorite-button); + } + + & li[enabled=false] a { + border-bottom: 2px solid var(--flagged); + } + + & a { + height:2rem; + width: 10ch; + padding-inline:.5rem; + margin-inline:auto; + background-color: var(--bg); + white-space:nowrap; + overflow: hidden; + text-overflow: ellipsis; + display:block; + position:relative; + -webkit-line-clamp: 2; + -moz-line-clamp: 2; + -ms-line-clamp: 2; + z-index: 101; + + & span { + position: absolute; + bottom: 0; + right: 0; + } + } + + &::before { + content: ""; + width: .75rem; + height: .75rem; + position: absolute; + top: calc(-.6rem + 1px); + left: .75rem; + background-color: var(--bg); + border-top: 2px solid var(--bg-300); + border-left: 2px solid var(--bg-300); + transform: rotate(45deg); + z-index: 100; + } + } + + & .blacklist-footer { + margin-left: .5rem; + } + } + + overflow: unset; + max-width: calc(80ch + 2rem + 20px); + + & li[enabled="true"] a { + border-bottom: 2px solid var(--favorite-button); + } + + & li[enabled=false] a { + border-bottom: 2px solid var(--flagged); + } + + & a { + height: 2rem; + width: 10ch; + padding-inline: .5rem; + margin-inline: auto; + background-color: var(--bg); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + position: relative; + -webkit-line-clamp: 2; + -moz-line-clamp: 2; + -ms-line-clamp: 2; + z-index: 101; + + & span { + position: absolute; + bottom: 0; + right: 0; + } + } + + &::before { + content: ""; + width: .75rem; + height: .75rem; + position: absolute; + top: calc(-.6rem + 1px); + left: .75rem; + background-color: var(--bg); + border-top: 2px solid var(--bg-300); + border-left: 2px solid var(--bg-300); + transform: rotate(45deg); + z-index: 100; + } + } + + & .blacklist-footer { + margin-left: .5rem; + } + } +} diff --git a/src/specific/post_index.scss b/src/specific/post_index.scss new file mode 100644 index 0000000..1169e71 --- /dev/null +++ b/src/specific/post_index.scss @@ -0,0 +1,17 @@ +#mode-box form { + border-radius: 8px; + overflow: hidden; +} + +#mode-box form select, #set-id { + background-color: var(--bg-400); + border-radius: 8px !important; + padding: .25rem; + color: var(--base-text); + border: 2px solid var(--bg-300); + overflow: hidden; +} + +#mode-box form select:focus { + border-radius: 8px 8px 0 0; +} diff --git a/src/specific/post_replacements.scss b/src/specific/post_replacements.scss new file mode 100644 index 0000000..5ae611a --- /dev/null +++ b/src/specific/post_replacements.scss @@ -0,0 +1,42 @@ +div#c-post-replacements { + .replacement-pending-row td:first-child article { + border: 2px solid var(--bg-400); + border-radius: 0.5rem; + + .desc { + border-radius: 0px !important; + } + } + + .replacement-pending-row td:nth-child(2) img { + border: 2px solid var(--bg-400); + } + + .replacement-pending-row td:nth-child(-n + 2) { + background-color: var(--flagged) !important; + } +} + +div#c-post-replacements > #a-index > table > tbody > tr > td:first-child { + border-right: 2px solid var(--bg-300) !important; + padding-right: 2rem; +} + +div#c-post-replacements > #a-index > table > tbody > tr > td:nth-child(2) { + padding: .5rem 2rem; +} + +div#c-post-replacements > #a-index > table > tbody > tr > td:nth-child(2) img { + border-radius: 8px; +} + +div#c-post-approvals article.thumbnail.captioned, +div#c-post-flags article.thumbnail.captioned, +div#c-post-replacements article.thumbnail.captioned { + height: auto; + vertical-align: text-top; + border-radius: 8px; + width: fit-content; + margin-inline: auto; + margin-left: 2rem; +} diff --git a/src/specific/post_versions.scss b/src/specific/post_versions.scss new file mode 100644 index 0000000..5e7385a --- /dev/null +++ b/src/specific/post_versions.scss @@ -0,0 +1,55 @@ +div#c-post-versions { + div#a-index { + .post-version { + border: none; + border-radius: 8px; + overflow: hidden; + } + + .pv-label { + border-right: 2px solid var(--bg-300) !important; + border-bottom: none; + background-color: var(--bg-400) !important; + } + + .pv-sources { + overflow: hidden; + overflow-x: scroll; + scrollbar-width: thin; + max-width: 100%; + } + + .pv-sources-label { + width: 100%; + } + + .pv-sources-label, .pv-spacer { + border-right: none !important; + } + } + + .post-version-row-select { + border-left: .25rem solid var(--elements-highlight) !important; + border-radius: .25rem 0 0 .25rem; + overflow: hidden; + } +} + +#p-revert-listing { + max-width: 90vw; + margin-inline: auto; + position: relative; + margin-top: .5rem; + border-radius: 8px; + overflow: hidden; +} + +#p-revert-listing div { + background-color: var(--bg) !important; + min-height: fit-content; + max-width: 90vw; +} + +#p-revert-listing div * { + min-height: fit-content; +} diff --git a/src/specific/posts.scss b/src/specific/posts.scss new file mode 100644 index 0000000..9461b4e --- /dev/null +++ b/src/specific/posts.scss @@ -0,0 +1,518 @@ +div#c-posts { + .source-links, .source-link a { + color: var(--content-link) !important; + transition: 100ms; + + &:hover { + color: var(--content-link-hover) !important; + background-color: var(--bg) !important; + padding: 0 .5rem; + border-radius: 4px; + } + } + + div.notice { + ul { + margin-left: .25rem; + } + + .notice-flagged, .notice-deleted { + background-color: var(--flagged) !important; + border-left: .25rem solid var(--elements-highlight) !important; + border-right: 0px solid pink !important; + border-top: 0px solid pink !important; + border-bottom: 0px solid pink !important; + overflow: hidden; + min-width: fit-content; + } + + .notice-flagged a[href*="/post_replacements"] { + font-size: 0; + width: 275px; + position: relative; + margin-left: 135px; + pointer-events: none; + padding-top: .4rem; + + &::before { + font-size: 1rem; + content: "View the pending replacements:"; + pointer-events: none !important; + color: var(--base-text); + position: relative; + user-select: inherit; + } + + &::after { + font-size: 1rem; + content: " here."; + position: relative; + pointer-events: auto; + } + } + + .notice-flagged:nth-child(1) { + display: flex; + flex-direction: column; + } + + .notice-pending ~ .notice-flagged { + font-size: 0.85rem; + + a { + font-size: 0.85rem; + margin: 0; + pointer-events: auto; + + &::before { + font-size: .85rem; + content: "" !important; + pointer-events: none !important; + color: var(--base-text); + position: relative; + user-select: inherit; + } + + &::after { + font-size: .85rem; + content: "" !important; + position: relative; + pointer-events: auto; + } + } + } + + .notice-flagged:nth-child(1) > p { + color: transparent !important; + position: relative; + display: flex; + align-items: center; + } + + .notice-flagged:nth-child(1) > p::before { + content: "This post was flagged for review."; + color: var(--base-text); + position: absolute; + display: flex; + align-items: center; + justify-content: center; + } + + .notice-flagged p a[href="/wiki_pages?title=howto%3Aflag"] { + font-size: 0; + } + + .notice-flagged p a[href="/wiki_pages?title=howto%3Aflag"]::before { + content: url("data:image/svg+xml,%3Csvg height='20.0' viewBox='0 0 24.0 24.0' width='20.0' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10 -4.48 10 -10S17.52 2 12 2zM13 19h-2v-2h2v2zM15.07 11.25l-0.9 0.92C13.45 12.9 13 13.5 13 15h-2v-0.5c0 -1.1 0.45 -2.1 1.17 -2.83l1.24 -1.26c0.37 -0.36 0.59 -0.86 0.59 -1.41 0 -1.1 -0.9 -2 -2 -2s-2 0.9 -2 2L8 9c0 -2.21 1.79 -4 4 -4s4 1.79 4 4c0 0.88 -0.36 1.68 -0.93 2.25z' fill='%23c3ccd4ff'/%3E%3C/svg%3E"); + opacity: .6; + } + + .notice-flagged p a[href="/wiki_pages?title=howto%3Aflag"]:hover::before { + opacity: 1; + } + + .notice-pending { + min-width: fit-content; + min-height: fit-content; + border-right: none !important; + border-bottom: none !important; + border-top: none !important; + } + + .notice-pending::before { + content: "This post is pending moderator approval"; + font-size: 1.1rem; + margin-left: .5rem; + } + + .notice-pending a { + display: flex; + height: 0; + width: auto; + place-items: center; + } + + .notice-pending a::after { + content: url("data:image/svg+xml,%3Csvg height='20.0' viewBox='0 0 24.0 24.0' width='20.0' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10 -4.48 10 -10S17.52 2 12 2zM13 19h-2v-2h2v2zM15.07 11.25l-0.9 0.92C13.45 12.9 13 13.5 13 15h-2v-0.5c0 -1.1 0.45 -2.1 1.17 -2.83l1.24 -1.26c0.37 -0.36 0.59 -0.86 0.59 -1.41 0 -1.1 -0.9 -2 -2 -2s-2 0.9 -2 2L8 9c0 -2.21 1.79 -4 4 -4s4 1.79 4 4c0 0.88 -0.36 1.68 -0.93 2.25z' fill='%23ffffff'/%3E%3C/svg%3E"); + opacity: .3; + } + + .notice-pending a:hover::after { + opacity: .5; + } + + .notice-pending { + background-color: var(--bg) !important; + border-left: .25rem solid var(--elements-highlight) !important; + font-size: 0; + height: 100%; + position: relative; + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + min-width: fit-content; + /* 0.25rem .25rem 0.25rem */ + + p { + margin-top: .5rem; + font-size: .75rem; + border-top: 1px solid var(--bg-400); + } + } + + .notice-parent, .notice-child { + background-color: var(--bg-400) !important; + border: 2px solid var(--bg-300) !important; + border-radius: .50rem; + } + } + + div.nav-notice { + background-color: var(--bg) !important; + } + + div#a-index aside#sidebar, div#a-show aside#sidebar { + width: 14.5rem; + } + + div#a-show { + #edit { + #post_rating_e:checked+label { + background-color: var(--remove-favorite) !important; + } + + #post_rating_q:checked+label { + background-color: var(--warn-button) !important; + } + + #post_rating_s:checked+label { + background-color: var(--favorite-button) !important; + } + + .edit-submit { + background-color: var(--bg) !important; + border-radius: 0px 4px 0px 0px; + border-top: 2px solid var(--bg-300); + border-right: 2px solid var(--bg-300); + + input { + &:hover { + background-color: var(--bg-300) !important; + } + } + } + } + + .pool-nav, .search-seq-nav, .set-nav { + background-color: var(--bg) !important; + color: var(--base-text) !important; + } + } +} + +div#avoid-posting-notice { + background-color: var(--bg); + border-color: var(--bg); + border-left: 0.25rem solid var(--flagged) !important; + margin: 0; + overflow: unset !important; + + & * { + margin: 0; + min-width: unset; + font-size: 1rem; + } + + & h3 { + color: var(--flagged); + font-size: 1.25rem; + } + + & li * { + display: block ruby !important; + } + + & .artist a { + color: var(--tag-cat-2) !important; + + &:hover { + color: var(--tag-cat-2-hover) !important; + } + } + + ul { + display: flex; + flex-direction: row; + } + + li { + display: flex; + flex-direction: row; + align-items: center; + } +} + +div#image-and-nav { + min-width: 20%; + + div#nav-links-top { + border-radius: 8px 8px 0 0 !important; + overflow: clip; + } + + div#nav-links-bottom { + border-radius: 0 0 8px 8px !important; + margin-top: -3px; + overflow: clip; + } +} + +.bottom-notices { + height: fit-content; + margin-right: auto; + margin-bottom: .5rem; + display: flex; + align-items: self-start; + width: 50ch; + border-radius: .25rem; +} + +.bottom-notices * { + margin: 0 .25rem; +} + +.bottom-notices:empty { + display: none !important; +} + +div#a-show div#nav-links-left { + background-color: var(--bg-400) !important; + border: 2px solid var(--bg-300) !important; + border-radius: 8px; + overflow: clip; + width: calc(100% + .25rem); + position: relative; + margin-inline: auto; + + & .nav-name { + width: fit-content !important; + max-width: 20ch; + white-space: wrap !important; + margin-top: .25rem; + } + + & .active.post-nav { + display: flex; + flex-direction: column; + height: fit-content; + + & .nav-left-down { + display: flex; + gap: 1rem; + } + + & a.nav-link { + padding: 0; + } + } + + & *, .nav-block.search-seq-nav { + background: none !important; + border: none !important; + } + + & .nav-left-down { + margin-top: 0; + } +} + +div#c-posts div.notice.notice-parent article.thumbnail .desc, +div#c-posts div.notice.notice-child article.thumbnail .desc, +.vertical-section article.thumbnail .desc { + background-color: var(--bg-300) !important; + border-radius: 0 0 .5rem .5rem; + display: flex; + flex-direction: row; +} + +div#c-posts div.notice.notice-parent article.thumbnail .desc div, +div#c-posts div.notice.notice-child article.thumbnail .desc div, +.vertical-section article.thumbnail .desc div { + display: flex; + justify-content: space-around; +} + +div#c-posts div.notice.notice-parent article.thumbnail .desc div *, +div#c-posts div.notice.notice-child article.thumbnail .desc div *, +.vertical-section article.thumbnail .desc div * { + margin: 0; +} + +/* Posts page stuff */ +search-content > post post-info { + background-color: var(--bg-400); +} + +search-content > post[sound="true"] span.post-sound { + bottom: 2.5rem; +} + +.video-duration { + position: absolute; + bottom: 1.45rem !important; + left: 0; + height: fit-content; + background-color: #00000080 !important; + font-family: monospace !important; + padding: .1rem .2rem !important; + border-radius: 0 4px 4px 0 !important; + z-index: 2 !important; +} + +search-content post[fav="true"] button.button.voteButton.fav { + color: var(--actions-fav-true); +} + +search-content post[fav="true"]:not(:hover) button.button.voteButton.fav { + background-color: var(--bg-400) !important; +} + +search-content > post post-info { + background-color: var(--bg-400) !important; +} + +search-content post[fav="true"] button.button.voteButton.fav { + color: var(--actions-fav-true); +} + +search-content post[fav="true"]:not(:hover) button.button.voteButton.fav { + background-color: var(--bg-400) !important; +} + +search-content button.button.voteButton.fav { + display: flex; + justify-content: center; + width: 3.5ch; + max-height: 1.5rem; +} + +search-content post[fav="true"] button.button.voteButton.fav::before { + content: url("data:image/svg+xml,%3Csvg height='20.0' viewBox='0 0 17.0 16.0' width='20.0' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.1667 2.6672C10.104 2.6672 9.12 3.2252 8.5 4.0539C7.88 3.2252 6.896 2.6672 5.8333 2.6672C3.9953 2.6672 2.5 4.1626 2.5 6.0006C2.5 9.6612 7.916 13.0886 8.1473 13.2326C8.2553 13.2999 8.378 13.3339 8.5 13.3339C8.622 13.3339 8.7447 13.2999 8.8527 13.2326C9.084 13.0886 14.5 9.6612 14.5 6.0006C14.5 4.1626 13.0047 2.6672 11.1667 2.6672Z' fill='%23be7aa1'/%3E%3C/svg%3E"); +} + +search-content post[fav="true"] button.button.voteButton.fav:hover::before { + content: url("data:image/svg+xml,%3Csvg height='20.0' viewBox='0 0 17.0 16.0' width='20.0' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.1667 2.6672C10.104 2.6672 9.12 3.2252 8.5 4.0539C7.88 3.2252 6.896 2.6672 5.8333 2.6672C3.9953 2.6672 2.5 4.1626 2.5 6.0006C2.5 9.6612 7.916 13.0886 8.1473 13.2326C8.2553 13.2999 8.378 13.3339 8.5 13.3339C8.622 13.3339 8.7447 13.2999 8.8527 13.2326C9.084 13.0886 14.5 9.6612 14.5 6.0006C14.5 4.1626 13.0047 2.6672 11.1667 2.6672Z' fill='%23ffa5d9'/%3E%3C/svg%3E"); +} + +search-content button.button.voteButton.fav::before { + content: url("data:image/svg+xml,%3Csvg height='20.0' viewBox='0 0 17.0 16.0' width='20.0' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.1667 2.6672C10.104 2.6672 9.12 3.2252 8.5 4.0539C7.88 3.2252 6.896 2.6672 5.8333 2.6672C3.9953 2.6672 2.5 4.1626 2.5 6.0006C2.5 9.6612 7.916 13.0886 8.1473 13.2326C8.2553 13.2999 8.378 13.3339 8.5 13.3339C8.622 13.3339 8.7447 13.2999 8.8527 13.2326C9.084 13.0886 14.5 9.6612 14.5 6.0006C14.5 4.1626 13.0047 2.6672 11.1667 2.6672Z' fill='%23c3ccd4'/%3E%3C/svg%3E"); + display: flex; + align-items: center; + justify-content: center; +} + +search-content button.button.voteButton.fav:hover::before { + content: url("data:image/svg+xml,%3Csvg height='20.0' viewBox='0 0 17.0 16.0' width='20.0' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.1667 2.6672C10.104 2.6672 9.12 3.2252 8.5 4.0539C7.88 3.2252 6.896 2.6672 5.8333 2.6672C3.9953 2.6672 2.5 4.1626 2.5 6.0006C2.5 9.6612 7.916 13.0886 8.1473 13.2326C8.2553 13.2999 8.378 13.3339 8.5 13.3339C8.622 13.3339 8.7447 13.2999 8.8527 13.2326C9.084 13.0886 14.5 9.6612 14.5 6.0006C14.5 4.1626 13.0047 2.6672 11.1667 2.6672Z' fill='%23fff'/%3E%3C/svg%3E"); +} + +@each $mode-function, $mode-function-color in $mode-menu-functions { + #page[data-mode-menu="#{$mode-function}"] { + background-color: var(--mode-#{$mode-function-color}) !important; + } +} + +#sidebar #disable-all-blacklists, #sidebar #re-enable-all-blacklists { + position: relative; + top: auto; + left: auto; +} + +#disable-all-blacklists, #re-enable-all-blacklists { + position: absolute; + top: .2rem; + left: 17ch; +} + +#disable-all-blacklists *, #sidebar #blacklist-box #disable-all-blacklists { + color: var(--remove-favorite) !important; +} + +#re-enable-all-blacklists *, #sidebar #blacklist-box #re-enable-all-blacklists { + color: var(--favorite-button) !important; +} + +.post-preview.post-status-deleted a { + overflow: hidden; + display: flex; + align-items: center; + justify-content: center; + position: relative; + + img { + opacity: 0; + } +} + +.post-preview.post-status-deleted a::before { + content: "Deleted"; + background-color: var(--deleted-bg); + color: var(--deleted-text); + font-weight: bold; + position: absolute; + display: flex; + align-items: center !important; + justify-content: center !important; + font-size: 1.3rem; + bottom: 0; + opacity: 1; + height: 100%; + width: 95%; + aspect-ratio: 1/1; +} + +/* Link colors */ +#description a, +#post-description-container .styled-dtext a, +.about-section a, +.comment-post-grid .styled-dtext .dtext-link, +.dtext-formatter .dtext-link:not([href^="/user/show/"], #c-wiki-pages a) { + color: var(--content-link) !important; + + &:hover { + color: var(--content-link-hover) !important; + } +} + +#description a, .comment-post-grid .styled-dtext .dtext-link[href^="/user/show/"] { + color: var(--base-link) !important; + + &:hover { + color: var(--base-link-hover) !important; + } +} + +a[href^="/tickets/new?disp_id"] { + color: var(--user-banned) !important; +} + +a[href^="/tickets/new?disp_id"]:hover { + color: var(--user-banned-hover) !important; +} + +/* This puts a Discord logo in front of any link that contains "discord.com" in it. Not sure if it should be in the main theme. +a[href*="discord.com"] { + &::before { + content: url("data:image/svg+xml,%3Csvg role='img' height='16.0' viewBox='0 -1 25 21' fill='%23ffffff' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EDiscord%3C/title%3E%3Cpath d='M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z'/%3E%3C/svg%3E"); + opacity: .8; + mix-blend-mode: soft-light; + } +} + +a[href*="discord"]:hover { + &::before { + opacity: 1; + mix-blend-mode: soft-light; + } +} +*/ diff --git a/src/specific/re621/components/_modal.scss b/src/specific/re621/components/_modal.scss new file mode 100644 index 0000000..e4b806d --- /dev/null +++ b/src/specific/re621/components/_modal.scss @@ -0,0 +1,58 @@ +div#modal-container { + .ui-widget-content.ui-widget-content { + color: var(--base-text) !important; + } + + .ui-widget.ui-widget-content { + border: 2px solid var(--bg-300) !important; + border-radius: 2px 8px 8px 8px; + overflow: hidden !important; + height: fit-content; + color: var(--base-text) !important; + + .border-highlight { + border-color: var(--base-text) !important; + } + } + + div.re621-ui-dialog.modal-reserve-height div.ui-dialog-content { + min-height: fit-content !important; + color: var(--base-text); + + input { + background-color: var(--bg) !important; + } + + h3 { + color: var(--base-text) !important; + } + + button.btn-neutral[id^="conf-misc-"], .btn-neutral[id^="conf"] { + background-color: var(--bg-300) !important; + + &:hover { + background-color: var(--bg) !important; + } + } + } + + div.re621-ui-dialog { + background-image: none; + color: var(--base-text); + + div.ui-dialog-titlebar { + span.ui-dialog-title { + color: var(--base-text) !important; + } + } + } + + /* Displays custom theme name in the theme picker */ + div.re621-ui-dialog:has(label[for^="theme-customizer"]) div.ui-dialog-titlebar span::after { + content: " - "var(--themeName); + } + + .button.btn-neutral { + background-color: var(--bg-400) !important; + } +} diff --git a/src/specific/re621/modules/_better-search.scss b/src/specific/re621/modules/_better-search.scss new file mode 100644 index 0000000..585154d --- /dev/null +++ b/src/specific/re621/modules/_better-search.scss @@ -0,0 +1,3 @@ +picture.picture-container { + width: 154px; +} diff --git a/src/specific/re621/modules/_profile_enhancer.scss b/src/specific/re621/modules/_profile_enhancer.scss new file mode 100644 index 0000000..78aea75 --- /dev/null +++ b/src/specific/re621/modules/_profile_enhancer.scss @@ -0,0 +1,13 @@ +body[re621="true"] div#c-users div#a-show .bottom-section { + padding: 1rem; + max-width: 55vw; +} + +body[re621="true"] div#c-users div#a-show div.box.user-favorites, body[re621="true"] div#c-users div#a-show div.box.user-uploads { + border-radius: .5rem; + overflow: hidden; +} + +div.box.user-uploads div.vertical-section { + flex-direction: row !important; +} diff --git a/src/specific/re621/modules/_search-utilities.scss b/src/specific/re621/modules/_search-utilities.scss new file mode 100644 index 0000000..7213a3c --- /dev/null +++ b/src/specific/re621/modules/_search-utilities.scss @@ -0,0 +1,4 @@ +a#sidebar-collapse::after { + position: absolute; + top: -.5rem; +} diff --git a/src/specific/re621/modules/_structure-utilities.scss b/src/specific/re621/modules/_structure-utilities.scss new file mode 100644 index 0000000..f3e03f6 --- /dev/null +++ b/src/specific/re621/modules/_structure-utilities.scss @@ -0,0 +1,34 @@ +body { + aside#sidebar div#re621-search { + transition: 200ms; + border-radius: 0em; + width: 15rem; + overflow: hidden; + + .re621-search-sticky { + background-color: var(--bg); + overflow: hidden; + } + } +} + +div#page aside#sidebar { + section#re621-insearch form { + display: flex; + flex-direction: column; + height: fit-content; + width: 100%; + } + + section#re621-insearch form input[type="text"] { + height: 2rem; + width: 100%; + border-radius: 7.5px; + padding: .5rem 2rem .5rem .5rem; + color: var(--base-text); + background-color: var(--bg-400); + border: 2px solid var(--bg-300); + margin-top: 1rem; + margin-inline: auto; + } +} diff --git a/src/specific/re621/modules/_subscription-manager.scss b/src/specific/re621/modules/_subscription-manager.scss new file mode 100644 index 0000000..6439320 --- /dev/null +++ b/src/specific/re621/modules/_subscription-manager.scss @@ -0,0 +1,40 @@ +tabbed.config-tabs { + ul.ui-tabs-nav { + height: 100%; + position: relative; + + li:last-child { + margin-bottom: auto; + } + } +} + +div#modal-container div.re621-ui-dialog a.delete-link { + background-color: var(--mode-remove-fav) !important; +} + +tabbed.config-tabs form-section.subscription-settings > form-section input[type="text"] { + margin-left: .5rem; + margin-right: .5rem; +} + +a.subscribe-button-major { + background-color: var(--favorite-button) !important; + color: var(--base-text) !important; + box-shadow: none; +} + +a.subscribe-button-major:hover { + background-color: var(--favorite-button-hover) !important; + color: var(--button-text-hover-secondary) !important; +} + +a.subscribe-button-major[subscribed="true"] { + background-color: var(--remove-favorite) !important; + color: var(--base-text) !important; +} + +a.subscribe-button-major[subscribed="true"]:hover { + background-color: var(--remove-favorite-hover) !important; + color: var(--button-text-hover-secondary !important); +} diff --git a/src/specific/re621/utilities/_themed.scss b/src/specific/re621/utilities/_themed.scss new file mode 100644 index 0000000..cce44e5 --- /dev/null +++ b/src/specific/re621/utilities/_themed.scss @@ -0,0 +1,3 @@ +.border-section { + border: 2px solid var(--bg-400) !important; +} diff --git a/src/specific/related_tags.scss b/src/specific/related_tags.scss new file mode 100644 index 0000000..5882ff4 --- /dev/null +++ b/src/specific/related_tags.scss @@ -0,0 +1,10 @@ +div.related-tags { + background-color: var(--bg-400) !important; + padding: .25rem !important; + + .tag-active { + background: var(--bg-300) !important; + border-radius: 4px; + padding: 0 .5rem 0 .5rem; + } +} diff --git a/src/specific/settings.scss b/src/specific/settings.scss new file mode 100644 index 0000000..c348183 --- /dev/null +++ b/src/specific/settings.scss @@ -0,0 +1,67 @@ +/* Settings Page */ + +.simple_form { + background: var(--bg) !important; + border-radius: 8px; + border: 4px solid var(--bg-400); +} + +div#c-sessions .session_info, +div#c-maintenance-user-login-reminders .session_info, +div#c-maintenance-user-password-resets .session_info, +div#c-users .session_info { + background-color: var(--bg) !important; + border-radius: 8px; + border: 4px solid var(--bg-400); +} + +a#delete-account { + color: var(--remove-favorite) !important; +} + +a#delete-account:hover { + color: var(--remove-favorite-hover) !important; +} + +button, input, select, textarea { + background-color: var(--bg-400) !important; + color: var(--base-text) !important; + border-radius: 4px; +} + +.dtext-formatter textarea { + margin: 0; +} + +div.dtext-formatter[data-editing="true"] div.dtext-formatter-charcount { + color: var(--base-text) !important; +} + +a.expand-comment-response { + position: relative; + height: 0; + width: fit-content; + display: flex; + align-items: center; + gap: .25rem; + padding: 1rem; + font-size: 0; + background-color: var(--bg) !important; + border-radius: 2px 8px 8px 8px; + border: 2px solid var(--bg); + + &:hover { + background-color: var(--bg-400) !important; + } + + &::before { + content: "Post comment"; + font-size: 1.2rem; + } + + &::after { + content: url("data:image/svg+xml,%3Csvg height='24.0' viewBox='0 0 24.0 24.0' width='24.0' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 8.2667V4L3 11.4667L10 18.9333V14.56C15 14.56 18.5 16.2667 21 20C20 14.6667 17 9.3333 10 8.2667Z' fill='%23c8c8c8'/%3E%3C/svg%3E"); + opacity: 1; + mix-blend-mode: luminosity; + } +} diff --git a/src/specific/site_map.scss b/src/specific/site_map.scss new file mode 100644 index 0000000..4e50865 --- /dev/null +++ b/src/specific/site_map.scss @@ -0,0 +1,36 @@ +div#c-static { + div#a-site-map { + width: 80vw !important; + display: flex; + flex-direction: row !important; + justify-content: space-around; + flex-wrap: wrap; + margin-inline: auto; + background-color: var(--bg) !important; + padding: 2rem; + border-radius: 8px; + gap: .5rem; + + section { + width: calc(15% + 1rem) !important; + max-width: calc(15% + 1rem) !important; + background-color: var(--bg-400); + padding: 2rem; + border-radius: 8px; + } + + h1 { + border-bottom: 1px solid var(--bg) !important; + margin-inline: auto; + text-align: center; + padding-bottom: .25rem; + font-size: 1.175rem !important; + } + + ul li:nth-child(n + 2) { + margin-top: .3rem; + border-bottom: 1px solid var(--base-text-faded); + width: fit-content; + } + } +} diff --git a/src/specific/stats.scss b/src/specific/stats.scss new file mode 100644 index 0000000..641adfd --- /dev/null +++ b/src/specific/stats.scss @@ -0,0 +1,15 @@ +#c-stats { + table.striped { + box-shadow: 0 0 .25rem #000 !important; + } + + table.striped tbody { + tr:nth-child(2n) td { + background-color: var(--bg-400); + } + + tr:last-child { + border-bottom: none !important; + } + } +} diff --git a/src/specific/tickets.scss b/src/specific/tickets.scss new file mode 100644 index 0000000..989beb4 --- /dev/null +++ b/src/specific/tickets.scss @@ -0,0 +1,9 @@ +.sect_green, .approved-ticket { + color: var(--favorite-button) !important; + font-weight: 900; +} + +.sect_red, .redtext, .denied-ticket { + color: var(--flagged) !important; + font-weight: 900; +} diff --git a/src/specific/uploads.scss b/src/specific/uploads.scss new file mode 100644 index 0000000..ec76bab --- /dev/null +++ b/src/specific/uploads.scss @@ -0,0 +1,54 @@ +div#c-uploads { + div#a-new { + .border-bottom { + border-bottom: 2px solid var(--bg-300); + } + + .col2 .fileinput-wrapper .fileinput { + background: var(--bg-400); + border: 2px dashed var(--bg-400); + } + + .col2 .linkinput-wrapper .linkinput { + background: var(--bg-300); + } + + input[type="file"] { + background-color: var(--bg-400); + border-radius: 4px; + } + + input[type="file"]button { + color: pink; + } + + .active { + background-color: var(--bg-300) !important; + } + + .rating-e.active { + background-color: var(--remove-favorite) !important; + } + + .rating-q.active { + background-color: var(--warn-button) !important; + } + + .rating-s.active { + background-color: var(--favorite-button) !important; + } + + form.simple_form div.collection-radio-buttons input + label { + color: var(--base-text) !important; + } + + .radio_buttons:not(:checked)+label { + background-color: var(--bg-300) !important; + } + + .box-section { + background-color: var(--bg) !important; + border-radius: 8px; + } + } +} diff --git a/src/specific/user_feedback.scss b/src/specific/user_feedback.scss new file mode 100644 index 0000000..139d973 --- /dev/null +++ b/src/specific/user_feedback.scss @@ -0,0 +1,23 @@ +div#c-user-feedbacks #a-index .striped > tbody > tr > td { + background: transparent !important; +} + +div#c-moderator-dashboards .feedback-category-negative td, div#c-user-feedbacks .feedback-category-negative { + background: var(--flagged) !important; +} + +div#c-moderator-dashboards .feedback-category-neutral td, div#c-user-feedbacks .feedback-category-neutral { + background: var(--bg-400) !important; +} + +div#c-moderator-dashboards .feedback-category-positive td, div#c-user-feedbacks .feedback-category-positive { + background: var(--favorite-button) !important; +} + +.feedback-category-negative .user-blocked, .feedback-category-negative .user-banned { + color: var(--base-link) !important; + + &:hover { + color: var(--base-link-hover) !important; + } +} diff --git a/src/specific/user_warned.scss b/src/specific/user_warned.scss new file mode 100644 index 0000000..86422fb --- /dev/null +++ b/src/specific/user_warned.scss @@ -0,0 +1,3 @@ +.user-warning em { + color: var(--flagged); +} diff --git a/src/specific/users.scss b/src/specific/users.scss new file mode 100644 index 0000000..c5586f3 --- /dev/null +++ b/src/specific/users.scss @@ -0,0 +1,225 @@ +div#c-users { + div#a-show { + .stats-section { + .profile-stats { + background-color: var(--bg-400) !important; + } + } + + .posts-section .profile-sample-posts { + background-color: var(--bg-400) !important; + } + + .about-section .profile-about-entry { + background-color: var(--bg-400) !important; + } + + .profile-container { + display: flex; + background-color: var(--bg) !important; + border-radius: 1rem; + justify-content: space-around; + } + + .profile-container .stats-section { + background-color: transparent; + overflow: hidden; + padding: 1rem; + display: flex; + flex-direction: column; + border-radius: 1rem; + width: fit-content; + margin-inline: auto; + } + + .profile-container .stats-section .profile-stats { + width: fit-content; + position: relative; + margin-inline: auto; + margin-top: 1rem; + } + + .profile-avatar { + user-select: none; + } + + .post-thumbnail { + display: flex; + align-items: center; + justify-content: center; + width: fit-content; + margin-inline: auto; + } + + .post-thumbnail a img { + object-fit: cover; + height: 100%; + border-radius: var(--avatar-border-radius); + aspect-ratio: 1/1; + outline: 5px solid var(--bg-300) !important; + } + + .post-thumbnail[data-status="deleted"] { + a { + position: relative; + display: flex; + align-items: center !important; + justify-content: center !important; + border-radius: var(--avatar-border-radius); + overflow: hidden; + border: 5px solid var(--bg-300) !important; + } + + a::before { + content: "Deleted"; + background-color: var(--deleted-bg); + color: var(--deleted-text); + font-weight: bold; + position: absolute; + display: flex; + height: 100%; + width: 100%; + align-items: center; + justify-content: center; + font-size: 1.5rem; + } + } + + .profile-stats { + background-color: var(--bg-400) !important; + border-left: .25rem solid var(--elements-highlight) !important; + padding: .5rem; + border-radius: 2px 8px 8px 2px; + overflow: hidden; + word-wrap: break-word; + + h1 { + position: relative; + width: 100%; + margin-inline: auto; + margin-bottom: .5rem; + padding-bottom: .5rem; + display: flex; + place-content: center; + border-bottom: 1px solid var(--bg-300); + } + + /* fun lil thing for me suggested by faucet - user page */ + a[href="/users/192568"] { + &::after { + content: url("data:image/svg+xml,%3Csvg height='32.0' viewBox='0 0 24.0 20.0' width='30.0' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.58 11.4L17.3 4.01l-0.35 -0.6L7.04 3.41l-0.35 0.6 -4.27 7.39 -0.35 0.6 0.35 0.6 4.27 7.39 0.35 0.6h9.92l0.35 -0.6 4.28 -7.39 0.35 -0.6 -0.36 -0.6zM8.51 10.37L6.88 12l1.63 1.63v2.73L4.15 12l4.37 -4.37v2.74zM11.63 17.3l-2.04 -0.63 3.1 -9.98 2.04 0.64 -3.1 9.97zM15.49 16.37v-2.73L17.12 12l-1.63 -1.63L15.49 7.63L19.85 12l-4.36 4.37z' fill='%23ffffffff'/%3E%3C/svg%3E"); + position: absolute; + right: 0; + top: -.5rem; + mix-blend-mode: soft-light; + opacity: .6; + pointer-events: none; + } + } + + /* Secret helpers badge on the user page */ + a[href="/users/601225"], a[href="/users/884003"] { + &::after { + content: url("data:image/svg+xml,%3Csvg height='20' viewBox='0 0 31.27 29.53' width='25' xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cpath d='M22.8 1 S34.8 9.19 30.24 20.69 S16.61 29 20 25.64 S16 20 11.27 15.64 L22.79 1' fill='%23ffffff7a'/%3E%3Cpath d='M22.07 12.26 C19.54 15.48 15.97 17.09 13.21 16.51 L3.58 28.78 A2 2 0 0 1 0.77 29.12 A2 2 0 0 1 0.42 26.3 L10 14.05 C8.73 11.51 9.43 7.62 12 4.37 C15.19 0.33 20 -1.18 22.79 1 S25.24 8.22 22.07 12.26 Z' fill='%23ffffff'/%3E%3C/g%3E%3C/svg%3E"); + position: absolute; + right: 0; + top: -.5rem; + mix-blend-mode: soft-light; + opacity: .6; + pointer-events: none; + } + } + } + + .user-statistics { + font-size: .7rem; + } + + .user-statistics .column { + grid-template-columns: max-content minmax(1px,1fr); + } + + .profile-avatar .blacklisted { + a { + position: relative; + display: flex; + align-items: center !important; + justify-content: center !important; + + &::before { + content: "Blacklisted"; + background-color: var(--blacklisted-bg); + color: var(--blacklisted-text); + position: absolute; + display: flex; + align-items: center !important; + justify-content: center !important; + font-size: 1.3rem; + width: 100%; + aspect-ratio: 1/1; + border-radius: var(--avatar-border-radius); + } + } + } + + .about-section { + .post-thumbnail { + margin-inline: 0; + } + + .post-thumbnail a img { + outline: none !important; + border-radius: 4px; + aspect-ratio: unset; + margin: .25rem 0; + } + + .post-thumbnail[data-status="deleted"] { + a { + border-radius: 4px; + overflow: hidden; + width: 100%; + border: none !important; + } + + a::before { + border-radius: 4px; + } + } + + a { + border-radius: 4px; + overflow: hidden; + width: 100%; + } + + a::before { + border-radius: 4px; + } + } + + @media (max-width: 800px) { + .about-section .about-piece { + margin: 0 0 1em 0; + } + } + + /* Regular userpage */ + body:not([re621="true"]) { + .profile-avatar img { + object-fit: cover; + height: 100%; + border-radius: var(--avatar-border-radius); + aspect-ratio: 1/1; + outline: 5px solid var(--elements-highlight) !important; + } + } + + @media (max-width: 800px) { + .profile-avatar { + margin: 0.5em auto 1em auto; + width: fit-content; + } + } + } +} diff --git a/src/specific/wiki_page_versions.scss b/src/specific/wiki_page_versions.scss new file mode 100644 index 0000000..ed0b509 --- /dev/null +++ b/src/specific/wiki_page_versions.scss @@ -0,0 +1,21 @@ +div#c-wiki-page-versions { + @media screen and (max-width: 800px) { + #p-global-listing { + width: 90%; + margin-inline: auto; + } + + th:nth-child(1) { + width: fit-content !important; + } + + table.striped { + td { + word-wrap: break-word; + max-width: 10ch; + max-height: 1rem; + text-overflow: ellipsis; + } + } + } +} diff --git a/src/specific/wiki_pages.scss b/src/specific/wiki_pages.scss new file mode 100644 index 0000000..50a61ea --- /dev/null +++ b/src/specific/wiki_pages.scss @@ -0,0 +1,3 @@ +button#wiki-page-copy-tag { + border: none; +} diff --git a/src/themes/classic/_theme_bloodlust.scss b/src/themes/classic/_theme_bloodlust.scss new file mode 100644 index 0000000..033578d --- /dev/null +++ b/src/themes/classic/_theme_bloodlust.scss @@ -0,0 +1,86 @@ +body[data-th-main="bloodlust"] { + --themeName:"Bloodlust"; + --bg-300: #333; + --bg-400: #222; + --bg: #111; + --bg-visiting: #ffee95; + --bg-visiting-transition: 100ms; + --bg-editing-transition: 100ms; + --bg-visiting-hover: #f68b00; + --bg-editing: #a0d2d4; + --bg-editing-hover: #a6fffc; + --base-text: #fff; + --base-text-hover: #fff; + --base-text-faded: #ffffff7a; + --base-link: #ffee95; + --base-link-hover: #f68b00; + --header-link: #ffee95; + --header-link-hover: #f68b00; + --content-link: #ffee95; + --content-link-hover:#f68b00; + --header-link-transition: 100ms; + --header-link-editing-transition:100ms; + --header-link-visiting: #232e38; + --header-link-editing: #2c3946; + --header-link-editing-hover: #232e38; + --nav-hover-top-color:#ffee95; + --nav-hover-bottom-color: #ffee95; + --bg-image: #232e38; + --deleted-bg: #232323; + --deleted-text: #d2d2d2; + --blacklisted-bg: #656565; + --blacklisted-text: #d2d2d2; + /*--bg-image: linear-gradient(to right top, #6d327c, #485DA6, #00a1ba, #00BF98, #36C486);*/ + --actions-fav-true:#be7aa1; + --flagged: maroon; + --elements-highlight: #ffee95; + --mode-edit: #713a20; + --mode-add-fav: #006400; + --mode-remove-fav: maroon; + --mode-blacklist:#000; + --mode-download: #4d0054; + --mode-fullscreen: #194f4d; + --tag-cat-1:#ffee95; + --tag-cat-1-hover:#f68b00; + --tag-cat-2:#f2ac08; + --tag-cat-2-hover:#fbd67f; + --tag-cat-3:#d0d; + --tag-cat-3-hover:#ff5eff; + --tag-cat-4:#0a0; + --tag-cat-4-hover:#2bff2b; + --tag-cat-5:#ed5d1f; + --tag-cat-5-hover:#f6b295; + --tag-cat-6:#ff3d3d; + --tag-cat-6-hover:#ffbdbd; + --tag-cat-7:#fff; + --tag-cat-7-hover:#666; + --tag-cat-8: #228822; + --tag-cat-8-hover: #5fdb5f; + --user-member: var(--base-text); + --user-member-hover: var(--base-text-hover); + --user-privileged: #4afc4a; + --user-privileged-hover: #75fd75; + --user-contributor: #4afc4a; + --user-contributor-hover: #75fd75; + --user-admin:#e69500; + --user-admin-hover: #9d6703; + --user-moderator:#d82828; + --user-moderator-hover: #cc5151; + --user-former-staff: #3fd6ba; + --user-former-staff-hover: #5eebd1; + --user-janitor: #d82828; + --user-janitor-hover: #cc5151; + --user-banned: #a41313; + --user-banned-hover: #df3e3e; + --favorite-button: #006400; + --favorite-button-hover: #004b00; + --remove-favorite: maroon; + --remove-favorite-hover: #670000; + --warn-button: sienna; + --warn-button-hover: #8c4827; + --button-color: #232e38; + --button-color-hover: #2c3946; + --button-text: #fff; + --button-text-hover: #fff; + --button-text-hover-secondary: #fff; +} diff --git a/src/themes/classic/_theme_hexagon.scss b/src/themes/classic/_theme_hexagon.scss new file mode 100644 index 0000000..5e461c8 --- /dev/null +++ b/src/themes/classic/_theme_hexagon.scss @@ -0,0 +1,103 @@ +body { + --themeName: "Hexagon"; + + --main-page-background: url(https://static1.e621.net/data/d2/ca/d2cacf82e3e5c0f462da7d8753806ec6.jpg) !important; + --artist-credit: "Background by Coffeesoda"; + + /* Tag Categories */ + --tag-cat-0: #b4c7d9; + --tag-cat-0-hover: #e9f2fa; + --tag-cat-1: #f2ac08; + --tag-cat-1-hover: #fbd67f; + --tag-cat-2: #c0c0c0; + --tag-cat-2-hover: #71706e; + --tag-cat-3: #d0d; + --tag-cat-3-hover: #ff5eff; + --tag-cat-4: #0a0; + --tag-cat-4-hover: #2bff2b; + --tag-cat-5: #ed5d1f; + --tag-cat-5-hover: #f6b295; + --tag-cat-6: #ff3d3d; + --tag-cat-6-hover: #ffbdbd; + --tag-cat-7: #fff; + --tag-cat-7-hover: #666; + --tag-cat-8: #228822; + --tag-cat-8-hover: #5fdb5f; + + + + + + --thin-scrollbar: var(--true); + --main-font: Yu Gothic UI, Arial; + --bg-300: #152f56; + --bg-400: #0e203c; + --bg: #031530; + --bg-visiting: rgba(200,200,200,1); + --bg-visiting-transition: 100ms; + --bg-editing-transition: 100ms; + --bg-visiting-hover:rgba(255,255,255,1); + --bg-editing: #a0d2d4; + --bg-editing-hover: #a6fffc; + --base-text: #fff; + --base-text-hover: #fff; + --base-text-faded: #ffffff7a; + --base-link: #b4c7d9; + --base-link-hover: #e9f2fa; + --header-link: #c3ccd4; + --header-link-hover: #d3ddd3; + --content-link:#fdbe2f; + --content-link-hover:#ffd575; + --header-link-transition: 100ms; + --header-link-editing-transition:100ms; + --header-link-visiting: #232e38; + --header-link-editing: #2c3946; + --header-link-editing-hover: #232e38; + --nav-hover-top-color:#c3ccd4; + --nav-hover-bottom-color: #c3ccd4; + --bg-image: #232e38; + --deleted-bg: #232323; + --deleted-text: #d2d2d2; + --blacklisted-bg: #6e4848; + --blacklisted-text: #d2d2d2; + /*--bg-image: linear-gradient(to right top, #6d327c, #485DA6, #00a1ba, #00BF98, #36C486);*/ + --actions-fav-true:#be7aa1; + --flagged: maroon; + --elements-highlight: #fdbe2f; + --mode-edit: #713a20; + --mode-add-fav: #006400; + --mode-remove-fav: maroon; + --mode-blacklist:#242424; + --mode-download: #4d0054; + --mode-fullscreen: #194f4d; + --user-member: var(--base-text); + --user-member-hover: var(--base-text-hover); + --user-privileged: #4afc4a; + --user-privileged-hover: #75fd75; + --user-contributor: #4afc4a; + --user-contributor-hover: #75fd75; + --user-admin:#e69500; + --user-admin-hover: #9d6703; + --user-moderator:#d82828; + --user-moderator-hover: #cc5151; + --user-former-staff: #3fd6ba; + --user-former-staff-hover: #5eebd1; + --user-janitor: #d82828; + --user-janitor-hover: #cc5151; + --user-banned: #a41313; + --user-banned-hover: #df3e3e; + --favorite-button: #006400; + --favorite-button-hover: #004b00; + --remove-favorite: maroon; + --remove-favorite-hover: #670000; + --warn-button: sienna; + --warn-button-hover: #8c4827; + --button-color: #232e38; + --button-color-hover: #2c3946; + --button-text: #fff; + --button-text-hover: #fff; + --button-text-hover-secondary: #fff; + --true: thin; + scrollbar-width: var(--thin-scrollbar); + scrollbar-color: #3c3c3c #222; +} diff --git a/src/themes/classic/_theme_hotdog.scss b/src/themes/classic/_theme_hotdog.scss new file mode 100644 index 0000000..8050c71 --- /dev/null +++ b/src/themes/classic/_theme_hotdog.scss @@ -0,0 +1,86 @@ +body[data-th-main="hotdog"] { + --themeName:"Hotdog"; + --bg: #f00; + --bg-400: #ffff2b; + --bg-300: #ff0; + --bg-visiting: #000; + --bg-visiting-transition: 100ms; + --bg-editing-transition: 100ms; + --bg-visiting-hover:rgba(255,255,255,1); + --bg-editing: #a0d2d4; + --bg-editing-hover: #a6fffc; + --base-text: #000; + --base-text-hover: #000; + --base-text-faded: #0000007a; + --base-link: #000; + --base-link-hover: #222; + --header-link: #000; + --header-link-hover: #222; + --content-link:#504afc; + --content-link-hover:#847fff; + --header-link-transition: 100ms; + --header-link-editing-transition:100ms; + --header-link-visiting: #fff; + --header-link-editing: #2c3946; + --header-link-editing-hover: #232e38; + --nav-hover-top-color:#000; + --nav-hover-bottom-color: #000; + --bg-image: #232e38; + --deleted-bg: #232323; + --deleted-text: #d2d2d2; + --blacklisted-bg: #646464; + --blacklisted-text: #d2d2d2; + /*--bg-image: linear-gradient(to right top, #6d327c, #485DA6, #00a1ba, #00BF98, #36C486);*/ + --actions-fav-true:#be7aa1; + --flagged: maroon; + --elements-highlight: #ff0; + --mode-edit: #713a20; + --mode-add-fav: #006400; + --mode-remove-fav: maroon; + --mode-blacklist:#242424; + --mode-download: #4d0054; + --mode-fullscreen: #194f4d; + --tag-cat-1:#000; + --tag-cat-1-hover:#222; + --tag-cat-2:#f2ac08; + --tag-cat-2-hover:#fbd67f; + --tag-cat-3:#d0d; + --tag-cat-3-hover:#ff5eff; + --tag-cat-4:#0a0; + --tag-cat-4-hover:#2bff2b; + --tag-cat-5:#ed5d1f; + --tag-cat-5-hover:#f6b295; + --tag-cat-6:#ff3d3d; + --tag-cat-6-hover:#ffbdbd; + --tag-cat-7:#fff; + --tag-cat-7-hover:#666; + --tag-cat-8: #228822; + --tag-cat-8-hover: #5fdb5f; + --user-member: var(--base-text); + --user-member-hover: var(--base-text-hover); + --user-privileged: #4afc4a; + --user-privileged-hover: #75fd75; + --user-contributor: #4afc4a; + --user-contributor-hover: #75fd75; + --user-admin:#e69500; + --user-admin-hover: #9d6703; + --user-moderator:#d82828; + --user-moderator-hover: #cc5151; + --user-former-staff: #3fd6ba; + --user-former-staff-hover: #5eebd1; + --user-janitor: #d82828; + --user-janitor-hover: #cc5151; + --user-banned: #a41313; + --user-banned-hover: #df3e3e; + --favorite-button: #006400; + --favorite-button-hover: #004b00; + --remove-favorite: maroon; + --remove-favorite-hover: #670000; + --warn-button: sienna; + --warn-button-hover: #8c4827; + --button-color: #232e38; + --button-color-hover: #2c3946; + --button-text: #000; + --button-text-hover: #222; + --button-text-hover-secondary: #222; +} diff --git a/src/themes/classic/_theme_pony.scss b/src/themes/classic/_theme_pony.scss new file mode 100644 index 0000000..a694046 --- /dev/null +++ b/src/themes/classic/_theme_pony.scss @@ -0,0 +1,86 @@ +body[data-th-main="pony"] { + --themeName:"Pony"; + --bg-300: #2f175c; + --bg-400: #250d51; + --bg: #190836; + --bg-visiting: rgba(200,200,200,1); + --bg-visiting-transition: 100ms; + --bg-editing-transition: 100ms; + --bg-visiting-hover:rgba(255,255,255,1); + --bg-editing: #a0d2d4; + --bg-editing-hover: #a6fffc; + --base-text: #fff; + --base-text-hover: #fff; + --base-text-faded: #ffffff7a; + --base-link: #b4c7d9; + --base-link-hover: #e9f2fa; + --header-link: #c3ccd4; + --header-link-hover: #d3ddd3; + --content-link:#ff5eff; + --content-link-hover:#ff8dff; + --header-link-transition: 100ms; + --header-link-editing-transition:100ms; + --header-link-visiting: #232e38; + --header-link-editing: #2c3946; + --header-link-editing-hover: #232e38; + --nav-hover-top-color:#c3ccd4; + --nav-hover-bottom-color: #c3ccd4; + --bg-image: #232e38; + --deleted-bg: #232323; + --deleted-text: #d2d2d2; + --blacklisted-bg: #646464; + --blacklisted-text: #d2d2d2; + /*--bg-image: linear-gradient(to right top, #6d327c, #485DA6, #00a1ba, #00BF98, #36C486);*/ + --actions-fav-true:#be7aa1; + --flagged: maroon; + --elements-highlight: #ff5eff; + --mode-edit: #713a20; + --mode-add-fav: #006400; + --mode-remove-fav: maroon; + --mode-blacklist:#242424; + --mode-download: #4d0054; + --mode-fullscreen: #194f4d; + --tag-cat-1:#b4c7d9; + --tag-cat-1-hover:#e9f2fa; + --tag-cat-2:#f2ac08; + --tag-cat-2-hover:#fbd67f; + --tag-cat-3:#d0d; + --tag-cat-3-hover:#ff5eff; + --tag-cat-4:#0a0; + --tag-cat-4-hover:#2bff2b; + --tag-cat-5:#ed5d1f; + --tag-cat-5-hover:#f6b295; + --tag-cat-6:#ff3d3d; + --tag-cat-6-hover:#ffbdbd; + --tag-cat-7:#fff; + --tag-cat-7-hover:#666; + --tag-cat-8: #228822; + --tag-cat-8-hover: #5fdb5f; + --user-member: var(--base-text); + --user-member-hover: var(--base-text-hover); + --user-privileged: #4afc4a; + --user-privileged-hover: #75fd75; + --user-contributor: #4afc4a; + --user-contributor-hover: #75fd75; + --user-admin:#e69500; + --user-admin-hover: #9d6703; + --user-moderator:#d82828; + --user-moderator-hover: #cc5151; + --user-former-staff: #3fd6ba; + --user-former-staff-hover: #5eebd1; + --user-janitor: #d82828; + --user-janitor-hover: #cc5151; + --user-banned: #a41313; + --user-banned-hover: #df3e3e; + --favorite-button: #006400; + --favorite-button-hover: #004b00; + --remove-favorite: maroon; + --remove-favorite-hover: #670000; + --warn-button: sienna; + --warn-button-hover: #8c4827; + --button-color: #232e38; + --button-color-hover: #2c3946; + --button-text: #fff; + --button-text-hover: #fff; + --button-text-hover-secondary: #fff; +} diff --git a/src/themes/classic/_theme_serpent.scss b/src/themes/classic/_theme_serpent.scss new file mode 100644 index 0000000..bb0e875 --- /dev/null +++ b/src/themes/classic/_theme_serpent.scss @@ -0,0 +1,86 @@ +body[data-th-main="serpent"] { + --themeName:"Serpent"; + --bg: #f6eb86; + --bg-400: #dacf6b; + --bg-300: #44a544; + --bg-visiting: #000; + --bg-visiting-transition: 100ms; + --bg-editing-transition: 100ms; + --bg-visiting-hover:rgba(255,255,255,1); + --bg-editing: #a0d2d4; + --bg-editing-hover: #a6fffc; + --base-text: #000; + --base-text-hover: #000; + --base-text-faded: #0000007a; + --base-link: #000; + --base-link-hover: #222; + --header-link: #000; + --header-link-hover: #222; + --content-link:#504afc; + --content-link-hover:#847fff; + --header-link-transition: 100ms; + --header-link-editing-transition:100ms; + --header-link-visiting: #fff; + --header-link-editing: #2c3946; + --header-link-editing-hover: #232e38; + --nav-hover-top-color:#000; + --nav-hover-bottom-color: #000; + --bg-image: #232e38; + --deleted-bg: #232323; + --deleted-text: #d2d2d2; + --blacklisted-bg: #646464; + --blacklisted-text: #d2d2d2; + /*--bg-image: linear-gradient(to right top, #6d327c, #485DA6, #00a1ba, #00BF98, #36C486);*/ + --actions-fav-true:#be7aa1; + --flagged: maroon; + --elements-highlight: #44a544; + --mode-edit: #713a20; + --mode-add-fav: #006400; + --mode-remove-fav: maroon; + --mode-blacklist:#242424; + --mode-download: #4d0054; + --mode-fullscreen: #194f4d; + --tag-cat-1:#000; + --tag-cat-1-hover:#222; + --tag-cat-2:#f2ac08; + --tag-cat-2-hover:#fbd67f; + --tag-cat-3:#d0d; + --tag-cat-3-hover:#ff5eff; + --tag-cat-4:#0a0; + --tag-cat-4-hover:#2bff2b; + --tag-cat-5:#ed5d1f; + --tag-cat-5-hover:#f6b295; + --tag-cat-6:#ff3d3d; + --tag-cat-6-hover:#ffbdbd; + --tag-cat-7:#fff; + --tag-cat-7-hover:#666; + --tag-cat-8: #228822; + --tag-cat-8-hover: #5fdb5f; + --user-member: var(--base-text); + --user-member-hover: var(--base-text-hover); + --user-privileged: #4afc4a; + --user-privileged-hover: #75fd75; + --user-contributor: #4afc4a; + --user-contributor-hover: #75fd75; + --user-admin:#e69500; + --user-admin-hover: #9d6703; + --user-moderator:#d82828; + --user-moderator-hover: #cc5151; + --user-former-staff: #3fd6ba; + --user-former-staff-hover: #5eebd1; + --user-janitor: #d82828; + --user-janitor-hover: #cc5151; + --user-banned: #a41313; + --user-banned-hover: #df3e3e; + --favorite-button: #006400; + --favorite-button-hover: #004b00; + --remove-favorite: maroon; + --remove-favorite-hover: #670000; + --warn-button: sienna; + --warn-button-hover: #8c4827; + --button-color: #232e38; + --button-color-hover: #2c3946; + --button-text: #000; + --button-text-hover: #222; + --button-text-hover-secondary: #222; +} diff --git a/src/themes/muted/_theme_bloodlust.scss b/src/themes/muted/_theme_bloodlust.scss new file mode 100644 index 0000000..ac8b5fd --- /dev/null +++ b/src/themes/muted/_theme_bloodlust.scss @@ -0,0 +1,82 @@ +body[data-th-main="bloodlust"] { + --themeName: "Discord-esque"; + --bg-300: #36393e; + --bg-400: #282b30; + --bg: #1e2124; + --bg-visiting: #f3f3f3; + --bg-visiting-hover:#f0f0f0; + --bg-editing: #be4343; + --bg-editing-hover: #c62929; + --base-text: #e1e1e1; + --base-text-hover: #e3e3e3; + --base-text-faded: #e1e1e17a; + --base-link: #c39cc5; + --base-link-hover: #ffc9fe; + --header-link: #dedede; + --header-link-hover: #e3e3e3; + --content-link:#bd7b7b; + --content-link-hover:#e49393; + --header-link-visiting: #382323; + --header-link-editing: #462c2c; + --header-link-editing-hover: #382323; + --nav-hover-top-color:#d1d1d1; + --nav-hover-bottom-color: #d1d1d1; + --bg-image: #2f2f2f; + --deleted-bg: #232323; + --deleted-text: #d2d2d2; + --blacklisted-bg: #6e4848; + --blacklisted-text: #d2d2d2; + /*--bg-image: linear-gradient(to right top, #6d327c, #485DA6, #00a1ba, #00BF98, #36C486);*/ + --actions-fav-true:#b4be7a; + --flagged: #6e4848; + --elements-highlight: #ff79c6; + --mode-edit:#534738; + --mode-add-fav:#36583a; + --mode-remove-fav:#583636; + --mode-blacklist:#000; + --mode-download: #553658; + --mode-fullscreen: #365857; + --tag-cat-1:#c17777; + --tag-cat-1-hover:#d79090; + --tag-cat-2:#be7f53; + --tag-cat-2-hover:#f8a66d; + --tag-cat-3:#51c2c2; + --tag-cat-3-hover:#6ffbec; + --tag-cat-4:#50be76; + --tag-cat-4-hover:#60f593; + --tag-cat-5:#c9c659; + --tag-cat-5-hover:#f5f26b; + --tag-cat-6:#bb5d9e; + --tag-cat-6-hover:#f657c3; + --tag-cat-7:#dee1e4; + --tag-cat-7-hover:#eef4f8; + --tag-cat-8: #60a979; + --tag-cat-8-hover: #93efb3; + --user-member: var(--base-text); + --user-member-hover: var(--base-text-hover); + --user-privileged: #93c190; + --user-privileged-hover: #b0e7ad; + --user-contributor: #93c190; + --user-contributor-hover: #b0e7ad; + --user-admin:#cc946d; + --user-admin-hover: #eeae82; + --user-moderator:#7dafd8; + --user-moderator-hover: #8fc8f7; + --user-former-staff: #6cd5aa; + --user-former-staff-hover: #7ff7c6; + --user-janitor: #7dafd8; + --user-janitor-hover: #8fc8f7; + --user-banned: #d46969; + --user-banned-hover: #ef7676; + --favorite-button: #47895f; + --favorite-button-hover: #71d594; + --remove-favorite: #a95454; + --remove-favorite-hover: #e07373; + --warn-button: #a07658; + --warn-button-hover: #e5aa80; + --button-color: #232e38; + --button-color-hover: #2c3946; + --button-text: #c3ccd4; + --button-text-hover: #c3ccd4; + --button-text-hover-secondary: #fff; +} diff --git a/src/themes/muted/_theme_hexagon.scss b/src/themes/muted/_theme_hexagon.scss new file mode 100644 index 0000000..db46b1d --- /dev/null +++ b/src/themes/muted/_theme_hexagon.scss @@ -0,0 +1,93 @@ +body { + --themeName: "Classic blue"; + --thin-scrollbar: var(--true); + --main-page-background: url(https://static1.e621.net/data/09/f8/09f84e1224df7b3502456589dd75c0c3.jpg) !important; + --artist-credit: "Background by Tom Fischbach"; + --main-font: Segoe UI, Arial; + --bg-300: #364758; + --bg-400: #2c3946; + --bg: #232e38; + --bg-visiting: rgba(200,200,200,1); + --bg-visiting-transition: 100ms; + --bg-editing-transition: 100ms; + --bg-visiting-hover:rgba(255,255,255,1); + --bg-editing: #a0d2d4; + --bg-editing-hover: #a6fffc; + --base-text: #c3ccd4; + --base-text-hover: #d3ddd3; + --base-text-faded: #c3ccd47a; + --base-link: #7bb1bd; + --base-link-hover: #a5eefe; + --header-link: #c3ccd4; + --header-link-hover: #d3ddd3; + --content-link:#BD7BA2; + --content-link-hover:#e493c3; + --header-link-transition: 100ms; + --header-link-editing-transition:100ms; + --header-link-visiting: #232e38; + --header-link-editing: #2c3946; + --header-link-editing-hover: #232e38; + --nav-hover-top-color:#c3ccd4; + --nav-hover-bottom-color: #c3ccd4; + --bg-image: #232e38; + --deleted-bg: #232323; + --deleted-text: #d2d2d2; + --blacklisted-bg: #6e4848; + --blacklisted-text: #d2d2d2; + /*--bg-image: linear-gradient(to right top, #6d327c, #485DA6, #00a1ba, #00BF98, #36C486);*/ + --actions-fav-true:#be7aa1; + --flagged: #6e4848; + --elements-highlight: #BD7BA2; + --mode-edit:#534738; + --mode-add-fav:#36583a; + --mode-remove-fav:#583636; + --mode-blacklist:#171c22; + --mode-download: #553658; + --mode-fullscreen: #365857; + --tag-cat-1:#7cb2bd; + --tag-cat-1-hover:#96d8e5; + --tag-cat-2:#bd987e; + --tag-cat-2-hover:#f2c3a2; + --tag-cat-3:#be7aa1; + --tag-cat-3-hover:#f79fd1; + --tag-cat-4:#7bbe92; + --tag-cat-4-hover:#99eab5; + --tag-cat-5:#c5c387; + --tag-cat-5-hover:#efeda4; + --tag-cat-6:#be7d7d; + --tag-cat-6-hover:#f6a2a2; + --tag-cat-7:#d8e1e9; + --tag-cat-7-hover:#eef7ff; + --tag-cat-8: #60a979; + --tag-cat-8-hover: #93efb3; + --user-member: var(--base-text); + --user-member-hover: var(--base-text-hover); + --user-privileged: #93c190; + --user-privileged-hover: #b0e7ad; + --user-contributor: #93c190; + --user-contributor: #b0e7ad; + --user-admin:#cc946d; + --user-admin-hover: #eeae82; + --user-moderator:#7dafd8; + --user-moderator-hover: #8fc8f7; + --user-former-staff: #6cd5aa; + --user-former-staff-hover: #7ff7c6; + --user-janitor: #7dafd8; + --user-janitor-hover: #8fc8f7; + --user-banned: #d46969; + --user-banned-hover: #ef7676; + --favorite-button: #538163; + --favorite-button-hover: #6dab83; + --remove-favorite: #936060; + --remove-favorite-hover: #bf7e7e; + --warn-button: #a07658; + --warn-button-hover: #e5aa80; + --button-color: #232e38; + --button-color-hover: #2c3946; + --button-text: #c3ccd4; + --button-text-hover: #c3ccd4; + --button-text-hover-secondary: #fff; + --true: thin; + scrollbar-width: var(--thin-scrollbar); + scrollbar-color: #3c3c3c #222; +} diff --git a/src/themes/muted/_theme_hotdog.scss b/src/themes/muted/_theme_hotdog.scss new file mode 100644 index 0000000..b95018e --- /dev/null +++ b/src/themes/muted/_theme_hotdog.scss @@ -0,0 +1,82 @@ +body[data-th-main="hotdog"] { + --themeName: "Hot Coffee"; + --bg-300: #3c3836; + --bg-400: #323232; + --bg: #282828; + --bg-visiting: #f0cfc0; + --bg-visiting-hover:#ffdccd; + --bg-editing: #a1a0d4; + --bg-editing-hover: #a6beff; + --base-text: #d6bbae; + --base-text-hover: #f0cfc0; + --base-text-faded: #d6bbae7a; + --base-link: #f7e7df; + --base-link-hover: #fffaf8; + --header-link: #d6bbae; + --header-link-hover: #f0cfc0; + --content-link: #75a6b8; + --content-link-hover: #8ac3da; + --header-link-visiting: #474341; + --header-link-editing: #474341; + --header-link-editing-hover: #615c59; + --nav-hover-top-color:#d6bbae; + --nav-hover-bottom-color: #d6bbae; + --bg-image: #38232e; + --deleted-bg: #232323; + --deleted-text: #d2d2d2; + --blacklisted-bg: #6e4848; + --blacklisted-text: #d2d2d2; + /*--bg-image: linear-gradient(to right top, #6d327c, #485DA6, #00a1ba, #00BF98, #36C486);*/ + --actions-fav-true:#a87abe; + --flagged: #6e4848; + --elements-highlight: #7bbcbd; + --mode-edit:#534738; + --mode-add-fav:#36583a; + --mode-remove-fav:#583636; + --mode-blacklist:#171c22; + --mode-download: #553658; + --mode-fullscreen: #365857; + --tag-cat-1:#bdb1ac; + --tag-cat-1-hover:#d6bbae; + --tag-cat-2:#bb8864; + --tag-cat-2-hover:#e7a87d; + --tag-cat-3:#7abebe; + --tag-cat-3-hover:#9ff7ee; + --tag-cat-4:#7bbe92; + --tag-cat-4-hover:#99eab5; + --tag-cat-5:#c5c387; + --tag-cat-5-hover:#efeda4; + --tag-cat-6:#be7d7d; + --tag-cat-6-hover:#f6a2a2; + --tag-cat-7:#d8e1e9; + --tag-cat-7-hover:#eef7ff; + --tag-cat-8: #60a979; + --tag-cat-8-hover: #93efb3; + --user-member: var(--base-text); + --user-member-hover: var(--base-text-hover); + --user-privileged: #93c190; + --user-privileged-hover: #b0e7ad; + --user-contributor: #93c190; + --user-contributor-hover: #b0e7ad; + --user-admin:#cc946d; + --user-admin-hover: #eeae82; + --user-moderator:#7dafd8; + --user-moderator-hover: #8fc8f7; + --user-former-staff: #6cd5aa; + --user-former-staff-hover: #7ff7c6; + --user-janitor: #7dafd8; + --user-janitor-hover: #8fc8f7; + --user-banned: #d46969; + --user-banned-hover: #ef7676; + --favorite-button: #538163; + --favorite-button-hover: #6dab83; + --remove-favorite: #936060; + --remove-favorite-hover: #bf7e7e; + --warn-button: #a07658; + --warn-button-hover: #e5aa80; + --button-color: #232e38; + --button-color-hover: #2c3946; + --button-text: #d6bbae; + --button-text-hover: #d6bbae; + --button-text-hover-secondary: #f0cfc0; +} diff --git a/src/themes/muted/_theme_pony.scss b/src/themes/muted/_theme_pony.scss new file mode 100644 index 0000000..cc0eaf3 --- /dev/null +++ b/src/themes/muted/_theme_pony.scss @@ -0,0 +1,82 @@ +body[data-th-main="pony"] { + --themeName: "Pony"; + --bg-300: #604a67; + --bg-400: #55425a; + --bg: #4b3a50; + --bg-visiting: #ffe4e9; + --bg-visiting-hover:#f6eaec; + --bg-editing: #d4a0ab; + --bg-editing-hover: #ffa6c2; + --base-text: #d4c3cc; + --base-text-hover: #d3ddd3; + --base-text-faded: #d4c3cc7a; + --base-link: #b485cd; + --base-link-hover: #e9a5fe; + --header-link: #d4c3cb; + --header-link-hover: #d3ddd3; + --content-link:#7bbda5; + --content-link-hover:#8dd9bd; + --header-link-visiting: #38232b; + --header-link-editing: #462c34; + --header-link-editing-hover: #38232b; + --nav-hover-top-color:#d4c3cd; + --nav-hover-bottom-color: #d4c3cb; + --bg-image: #38232e; + --deleted-bg: #232323; + --deleted-text: #d2d2d2; + --blacklisted-bg: #6e4848; + --blacklisted-text: #d2d2d2; + /*--bg-image: linear-gradient(to right top, #6d327c, #485DA6, #00a1ba, #00BF98, #36C486);*/ + --actions-fav-true:#a87abe; + --flagged: #6e4854; + --elements-highlight: #7bbda5; + --mode-edit:#534738; + --mode-add-fav:#36583a; + --mode-remove-fav:#583636; + --mode-blacklist:#171c22; + --mode-download: #553658; + --mode-fullscreen: #365857; + --tag-cat-1:#c590b6; + --tag-cat-1-hover:#e6a8cf; + --tag-cat-2:#bd987e; + --tag-cat-2-hover:#f2c3a2; + --tag-cat-3:#7abebe; + --tag-cat-3-hover:#9ff7ee; + --tag-cat-4:#7bbe92; + --tag-cat-4-hover:#99eab5; + --tag-cat-5:#c5c387; + --tag-cat-5-hover:#efeda4; + --tag-cat-6:#be7d7d; + --tag-cat-6-hover:#f6a2a2; + --tag-cat-7:#d8e1e9; + --tag-cat-7-hover:#eef7ff; + --tag-cat-8: #60a979; + --tag-cat-8-hover: #93efb3; + --user-member: var(--base-text); + --user-member-hover: var(--base-text-hover); + --user-privileged: #93c190; + --user-privileged-hover: #b0e7ad; + --user-contributor: #93c190; + --user-contributor: #b0e7ad; + --user-admin:#cc946d; + --user-admin-hover: #eeae82; + --user-moderator:#7dafd8; + --user-moderator-hover: #8fc8f7; + --user-former-staff: #6cd5aa; + --user-former-staff-hover: #7ff7c6; + --user-janitor: #7dafd8; + --user-janitor-hover: #8fc8f7; + --user-banned: #d46969; + --user-banned-hover: #ef7676; + --favorite-button: #538163; + --favorite-button-hover: #6dab83; + --remove-favorite: #936060; + --remove-favorite-hover: #bf7e7e; + --warn-button: #a07658; + --warn-button-hover: #e5aa80; + --button-color: #232e38; + --button-color-hover: #2c3946; + --button-text: #c3ccd4; + --button-text-hover: #c3ccd4; + --button-text-hover-secondary: #fff; +} diff --git a/src/themes/muted/_theme_serpent.scss b/src/themes/muted/_theme_serpent.scss new file mode 100644 index 0000000..313c858 --- /dev/null +++ b/src/themes/muted/_theme_serpent.scss @@ -0,0 +1,84 @@ +body[data-th-main="serpent"] { + --themeName: "Forest"; + --bg-300: #3e5341; + --bg-400: #354535; + --bg: #2f382e; + --bg-visiting: #dadada; + --bg-visiting-hover: #fff; + --bg-editing: #a0d2d4; + --bg-editing-hover: #a6fffc; + --base-text: #c3d4c6; + --base-text-hover: #d3ddd3; + --base-text-faded: #c3ccd47a; + --base-link: #bdbd7b; + --base-link-hover: #fafea5; + --header-link: #c3ccd4; + --header-link-hover: #d3ddd3; + --content-link:#dcdc8f; + --content-link-hover:#fafea5; + --header-link-visiting: #232e38; + --header-link-editing: #2c3946; + --header-link-editing-hover: #232e38; + --nav-hover-top-color:#c3ccd4; + --nav-hover-bottom-color: #c3ccd4; + --bg-image: #273823; + --deleted-bg: #232323; + --deleted-text: #d2d2d2; + --blacklisted-bg: #6e4848; + --blacklisted-text: #d2d2d2; + /*--bg-image: linear-gradient(to right top, #6d327c, #485DA6, #00a1ba, #00BF98, #36C486);*/ + --actions-fav-true:#be7a7a; + --flagged: #6e4848; + --elements-highlight: #bdab7b; + --mode-edit:#534738; + --mode-add-fav:#36583a; + --mode-remove-fav:#583636; + --mode-blacklist:#171c22; + --mode-download: #553658; + --mode-fullscreen: #365857; + --tag-cat-1:#7cbdab; + --tag-cat-1-hover:#96e5cc; + --tag-cat-2:#bd987e; + --tag-cat-2-hover:#f2c3a2; + --tag-cat-3:#be7aa1; + --tag-cat-3-hover:#f79fd1; + --tag-cat-4:#7bbe92; + --tag-cat-4-hover:#99eab5; + --tag-cat-5:#c5c387; + --tag-cat-5-hover:#efeda4; + --tag-cat-6:#be7d7d; + --tag-cat-6-hover:#f6a2a2; + --tag-cat-7:#d8e1e9; + --tag-cat-7-hover:#eef7ff; + --tag-cat-8: #60a979; + --tag-cat-8-hover: #93efb3; + --user-member: var(--base-text); + --user-member-hover: var(--base-text-hover); + --user-privileged: #93c190; + --user-privileged-hover: #b0e7ad; + --user-contributor: #93c190; + --user-contributor-hover: #b0e7ad; + --user-admin:#cc946d; + --user-admin-hover: #eeae82; + --user-moderator:#7dafd8; + --user-moderator-hover: #8fc8f7; + --user-former-staff: #6cd5aa; + --user-former-staff-hover: #7ff7c6; + --user-janitor: #7dafd8; + --user-janitor-hover: #8fc8f7; + --user-banned: #d46969; + --user-banned-hover: #ef7676; + --favorite-button: #538163; + --favorite-button-hover: #6dab83; + --remove-favorite: #936060; + --remove-favorite-hover: #bf7e7e; + --warn-button: #a07658; + --warn-button-hover: #e5aa80; + --button-color: #253823; + --button-color-hover: #2f462c; + --button-text: #c3ccd4; + --button-text-hover: #c3ccd4; + --button-text-hover-secondary: #fff; + --true: thin; + scrollbar-width: var(--thin-scrollbar); +} diff --git a/src/themes/popular/_theme_bloodlust.scss b/src/themes/popular/_theme_bloodlust.scss new file mode 100644 index 0000000..3f3c27c --- /dev/null +++ b/src/themes/popular/_theme_bloodlust.scss @@ -0,0 +1,82 @@ +body[data-th-main="bloodlust"] { + --themeName: "Sonokai - Shusia"; + --bg-300: #37343a; + --bg-400: #2d2a2e; + --bg: #211f21; + --bg-visiting: #e3e1e4; + --bg-visiting-hover:#fafafb; + --bg-editing: #be4343; + --bg-editing-hover: #c62929; + --base-text: #e3e1e4; + --base-text-hover: #fafafb; + --base-text-faded: #e1e1e17a; + --base-link: #7accd7; + --base-link-hover: #78dce8; + --header-link: #e3e1e4; + --header-link-hover: #fafafb; + --content-link:#61bac5; + --content-link-hover:#78dce8; + --header-link-visiting: #382323; + --header-link-editing: #462c2c; + --header-link-editing-hover: #382323; + --nav-hover-top-color:#fafafb; + --nav-hover-bottom-color: #fafafb; + --bg-image: #2f2f2f; + --deleted-bg: #1a181a; + --deleted-text: #615a61; + --blacklisted-bg: #55393d; + --blacklisted-text: #906369; + /*--bg-image: linear-gradient(to right top, #6d327c, #485DA6, #00a1ba, #00BF98, #36C486);*/ + --actions-fav-true:#ff6188; + --flagged: #933c51; + --elements-highlight: #ff6188; + --mode-edit:#534738; + --mode-add-fav:#36583a; + --mode-remove-fav:#583636; + --mode-blacklist:#000; + --mode-download: #553658; + --mode-fullscreen: #365857; + --tag-cat-1:#63acb6; + --tag-cat-1-hover:#7accd7; + --tag-cat-2:#cb764d; + --tag-cat-2-hover:#ef9062; + --tag-cat-3:#61bac5; + --tag-cat-3-hover:#78dce8; + --tag-cat-4:#5fbb8b; + --tag-cat-4-hover:#76dca2; + --tag-cat-5:#c2a54e; + --tag-cat-5-hover:#e5c463; + --tag-cat-6:#8e81cd; + --tag-cat-6-hover:#ab9df2; + --tag-cat-7:#e3e1e4; + --tag-cat-7-hover:#fcfcfc; + --tag-cat-8: #8dbb5f; + --tag-cat-8-hover: #a9dc76; + --user-member: var(--base-text); + --user-member-hover: var(--base-text-hover); + --user-privileged: #a9dc76; + --user-privileged-hover: #b8e986; + --user-contributor: #a9dc76; + --user-contributor-hover: #b8e986; + --user-admin:#ef9062; + --user-admin-hover: #ffa579; + --user-moderator:#78dce8; + --user-moderator-hover: #96f1fc; + --user-former-staff: #78e8ae; + --user-former-staff-hover: #96ffc9; + --user-janitor: #78dce8; + --user-janitor-hover: #96f1fc; + --user-banned: #ff6188; + --user-banned-hover: #ff7798; + --favorite-button: #84ae5a; + --favorite-button-hover: #9ecd6f; + --remove-favorite: #d2496b; + --remove-favorite-hover: #f85e84; + --warn-button: #cb764d; + --warn-button-hover: #ef9062; + --button-color: #232e38; + --button-color-hover: #2c3946; + --button-text: #c3ccd4; + --button-text-hover: #c3ccd4; + --button-text-hover-secondary: #fafafb; +} diff --git a/src/themes/popular/_theme_hexagon.scss b/src/themes/popular/_theme_hexagon.scss new file mode 100644 index 0000000..8714941 --- /dev/null +++ b/src/themes/popular/_theme_hexagon.scss @@ -0,0 +1,93 @@ +body { + --themeName: "Nord"; + --thin-scrollbar: var(--true); + --main-page-background: url(https://static1.e621.net/data/42/c6/42c6450e4cb046e6b23f9f1a19957e98.png) !important; + --artist-credit: "Background by Zackary911"; + --main-font: Segoe UI, Arial; + --bg-300: #434c5e; + --bg-400: #3b4252; + --bg: #2e3440; + --bg-visiting: #e5e9f0; + --bg-visiting-transition: 100ms; + --bg-editing-transition: 100ms; + --bg-visiting-hover: #eceff4; + --bg-editing: #a0d2d4; + --bg-editing-hover: #a6fffc; + --base-text: #e5e9f0; + --base-text-hover: #eceff4; + --base-text-faded: #e5e9f07a; + --base-link: #88c0d0; + --base-link-hover: #8cdaf1; + --header-link: #d8dee9; + --header-link-hover: #eceff4; + --content-link:#a3be8c; + --content-link-hover:#b6df92; + --header-link-transition: 100ms; + --header-link-editing-transition:100ms; + --header-link-visiting: #2e3440; + --header-link-editing: #393f4c; + --header-link-editing-hover: #4c5363; + --nav-hover-top-color:#e5e9f0; + --nav-hover-bottom-color: #e5e9f0; + --bg-image: #4c5363; + --deleted-bg: #2e333f; + --deleted-text: #4b5669; + --blacklisted-bg: #5e434c; + --blacklisted-text: #b0667f; + /*--bg-image: linear-gradient(to right top, #6d327c, #485DA6, #00a1ba, #00BF98, #36C486);*/ + --actions-fav-true:#bf616a; + --flagged: #bf616a; + --elements-highlight: #8fbcbb; + --mode-edit:#534738; + --mode-add-fav:#36583a; + --mode-remove-fav:#583636; + --mode-blacklist:#171c22; + --mode-download: #553658; + --mode-fullscreen: #365857; + --tag-cat-1:#88c0d0; + --tag-cat-1-hover:#8ad4e9; + --tag-cat-2:#d08770; + --tag-cat-2-hover:#f0a087; + --tag-cat-3:#b48ead; + --tag-cat-3-hover:#e4a4d9; + --tag-cat-4:#8cbe94; + --tag-cat-4-hover:#a8e5b5; + --tag-cat-5:#ebcb8b; + --tag-cat-5-hover:#f9dda4; + --tag-cat-6:#bf616a; + --tag-cat-6-hover:#e05d69; + --tag-cat-7:#d8dee9; + --tag-cat-7-hover:#ecf0f7; + --tag-cat-8: #a3be8c; + --tag-cat-8-hover: #b1d791; + --user-member: var(--base-text); + --user-member-hover: var(--base-text-hover); + --user-privileged: #93c190; + --user-privileged-hover: #b0e7ad; + --user-contributor: #93c190; + --user-contributor-hover: #b0e7ad; + --user-admin:#cc946d; + --user-admin-hover: #eeae82; + --user-moderator:#7dafd8; + --user-moderator-hover: #8fc8f7; + --user-former-staff: #6cd5aa; + --user-former-staff-hover: #7ff7c6; + --user-janitor: #7dafd8; + --user-janitor-hover: #8fc8f7; + --user-banned: #bf616a; + --user-banned-hover: #e05d69; + --favorite-button: #a3be8c; + --favorite-button-hover: #b1d791; + --remove-favorite: #bf616a; + --remove-favorite-hover: #e05d69; + --warn-button: #d08770; + --warn-button-hover: #dc9b86; + --button-color: #232e38; + --button-color-hover: #2c3946; + --button-text: #c3ccd4; + --button-text-hover: #c3ccd4; + --button-text-hover-secondary: #eceff4; + --true: thin; + scrollbar-width: var(--thin-scrollbar); + scrollbar-color: #3c3c3c #222; +} diff --git a/src/themes/popular/_theme_hotdog.scss b/src/themes/popular/_theme_hotdog.scss new file mode 100644 index 0000000..34660ba --- /dev/null +++ b/src/themes/popular/_theme_hotdog.scss @@ -0,0 +1,82 @@ +body[data-th-main="hotdog"] { + --themeName: "Gruvbox"; + --bg-300: #47403d; + --bg-400: #3c3836; + --bg: #32302f; + --bg-visiting: #ebdbb2; + --bg-visiting-hover:#fbf1c7; + --bg-editing: #a76b7b; + --bg-editing-hover: #d3869b + --base-text: #ebdbb2; + --base-text-hover: #fbf1c7; + --base-text-faded: #ebdbb27a; + --base-link: #a0c1c2; + --base-link-hover: #c0e1e2; + --header-link: #ebdbb2; + --header-link-hover: #fbf1c7; + --content-link: #a0c1c2; + --content-link-hover: #c0e1e2; + --header-link-visiting: #32302f; + --header-link-editing: #32302f; + --header-link-editing-hover: #47403d; + --nav-hover-top-color:#ebdbb2; + --nav-hover-bottom-color: #ebdbb2; + --bg-image: #38232e; + --deleted-bg: #302c2b; + --deleted-text: #665c54; + --blacklisted-bg: #7d0004; + --blacklisted-text: #e5918c; + /*--bg-image: linear-gradient(to right top, #6d327c, #485DA6, #00a1ba, #00BF98, #36C486);*/ + --actions-fav-true:#d3869b; + --flagged: #c83a29; + --elements-highlight: #fabd2f; + --mode-edit:#534738; + --mode-add-fav:#36583a; + --mode-remove-fav:#583636; + --mode-blacklist:#171c22; + --mode-download: #553658; + --mode-fullscreen: #365857; + --tag-cat-1:#ebdbb2; + --tag-cat-1-hover:#fbf1c7; + --tag-cat-2:#fe8019; + --tag-cat-2-hover:#ffa861; + --tag-cat-3:#83a598; + --tag-cat-3-hover:#aaccbf; + --tag-cat-4:#8ec07c; + --tag-cat-4-hover:#b3e3a1; + --tag-cat-5:#fabd2f; + --tag-cat-5-hover:#ffd46f; + --tag-cat-6:#fb4934; + --tag-cat-6-hover:#ff7f70; + --tag-cat-7:#f9f5d7; + --tag-cat-7-hover:#fffce7; + --tag-cat-8: #b8bb26; + --tag-cat-8-hover: #d3d642; + --user-member: var(--base-text); + --user-member-hover: var(--base-text-hover); + --user-privileged: #8ec07c; + --user-privileged-hover: #b3e3a1; + --user-contributor: #8ec07c; + --user-contributor-hover: #b3e3a1; + --user-admin:#fe8019; + --user-admin-hover: #ffa861; + --user-moderator:#83a598; + --user-moderator-hover: #aaccbf; + --user-former-staff: #fabd2f; + --user-former-staff-hover: #ffd46f; + --user-janitor: #83a598; + --user-janitor-hover: #aaccbf; + --user-banned: #fb4934; + --user-banned-hover: #ff7f70; + --favorite-button: #98971a; + --favorite-button-hover: #b4b33e; + --remove-favorite: #cc241d; + --remove-favorite-hover: #d34741; + --warn-button: #d65d0e; + --warn-button-hover: #e07733; + --button-color: #232e38; + --button-color-hover: #2c3946; + --button-text: #d6bbae; + --button-text-hover: #d6bbae; + --button-text-hover-secondary: #fbf1c7; +} diff --git a/src/themes/popular/_theme_pony.scss b/src/themes/popular/_theme_pony.scss new file mode 100644 index 0000000..3fc71a9 --- /dev/null +++ b/src/themes/popular/_theme_pony.scss @@ -0,0 +1,82 @@ +body[data-th-main="pony"] { + --themeName: "Rosé Pine"; + --bg-300: #393552; + --bg-400: #2a273f; + --bg: #232136; + --bg-visiting: #e0def4; + --bg-visiting-hover:#f5f4ff; + --bg-editing: #c4a7e7; + --bg-editing-hover: #e0c8fc; + --base-text: #e0def4; + --base-text-hover: #f5f4ff; + --base-text-faded: #e0def47a; + --base-link: #ebbcba; + --base-link-hover: #f7dbda; + --header-link: #e0def4; + --header-link-hover: #f5f4ff; + --content-link:#c4a7e7; + --content-link-hover:#c4a7e7; + --header-link-visiting: #38232b; + --header-link-editing: #462c34; + --header-link-editing-hover: #38232b; + --nav-hover-top-color:#e0def4; + --nav-hover-bottom-color: #e0def4; + --bg-image: #38232e; + --deleted-bg: #232136; + --deleted-text: #56526e; + --blacklisted-bg: #36212a; + --blacklisted-text: #eb6f92; + /*--bg-image: linear-gradient(to right top, #6d327c, #485DA6, #00a1ba, #00BF98, #36C486);*/ + --actions-fav-true:#a87abe; + --flagged: #eb6f92; + --elements-highlight: #c4a7e7; + --mode-edit:#534738; + --mode-add-fav:#36583a; + --mode-remove-fav:#583636; + --mode-blacklist:#171c22; + --mode-download: #553658; + --mode-fullscreen: #365857; + --tag-cat-1:#ebbcba; + --tag-cat-1-hover:#f7dbda; + --tag-cat-2:#f6c177; + --tag-cat-2-hover:#fed9a4; + --tag-cat-3:#9ccfd8; + --tag-cat-3-hover:#c3edf4; + --tag-cat-4:#45d07a; + --tag-cat-4-hover:#6aec9c; + --tag-cat-5:#f6f677; + --tag-cat-5-hover:#ffffa8; + --tag-cat-6:#eb6f92; + --tag-cat-6-hover:#ff91b0; + --tag-cat-7:#f4def1; + --tag-cat-7-hover:#fff4fd; + --tag-cat-8: #9cd8a9; + --tag-cat-8-hover: #bef0c9; + --user-member: var(--base-text); + --user-member-hover: var(--base-text-hover); + --user-privileged: #93c190; + --user-privileged-hover: #b0e7ad; + --user-contributor: #45d07a; + --user-contributor-hover: #6aec9c; + --user-admin:#f6c177; + --user-admin-hover: #fed9a4; + --user-moderator:#9ccfd8; + --user-moderator-hover: #c3edf4; + --user-former-staff: #6cd5aa; + --user-former-staff-hover: #7ff7c6; + --user-janitor: #9ccfd8; + --user-janitor-hover: #c3edf4; + --user-banned: #eb6f92; + --user-banned-hover: #fa92af; + --favorite-button: #6cbd75; + --favorite-button-hover: #9effaa; + --remove-favorite: #eb6f92; + --remove-favorite-hover: #cd708a; + --warn-button: #cd974c; + --warn-button-hover: #f4ca91; + --button-color: #232e38; + --button-color-hover: #2c3946; + --button-text: #c3ccd4; + --button-text-hover: #c3ccd4; + --button-text-hover-secondary: #f5f4ff; +} diff --git a/src/themes/popular/_theme_serpent.scss b/src/themes/popular/_theme_serpent.scss new file mode 100644 index 0000000..28532e5 --- /dev/null +++ b/src/themes/popular/_theme_serpent.scss @@ -0,0 +1,84 @@ +body[data-th-main="serpent"] { + --themeName: "Everforest"; + --bg-300: #3d484d; + --bg-400: #343f44; + --bg: #2d353b; + --bg-visiting: #d3c6aa; + --bg-visiting-hover: #eadec2; + --bg-editing: #a0d2d4; + --bg-editing-hover: #a6fffc; + --base-text: #d3c6aa; + --base-text-hover: #eadec2; + --base-text-faded: #d3c6aa7a; + --base-link: #7fbbb3; + --base-link-hover: #9ad2ca; + --header-link: #d3c6aa; + --header-link-hover: #eadec2; + --content-link:#7fbbb3; + --content-link-hover:#9ad2ca; + --header-link-visiting: #2d353b; + --header-link-editing: #343f44; + --header-link-editing-hover: #2d353b; + --nav-hover-top-color:#d3c6aa; + --nav-hover-bottom-color: #d3c6aa; + --bg-image: #273823; + --deleted-bg: #425047; + --deleted-text: #748b7c; + --blacklisted-bg: #543a48; + --blacklisted-text: #7f596e; + /*--bg-image: linear-gradient(to right top, #6d327c, #485DA6, #00a1ba, #00BF98, #36C486);*/ + --actions-fav-true:#e67e80; + --flagged: #c26566; + --elements-highlight: #a7c080; + --mode-edit:#534738; + --mode-add-fav:#36583a; + --mode-remove-fav:#583636; + --mode-blacklist:#171c22; + --mode-download: #553658; + --mode-fullscreen: #365857; + --tag-cat-1:#9da9a0; + --tag-cat-1-hover:#bbd6c2; + --tag-cat-2:#c27c5d; + --tag-cat-2-hover:#e69875; + --tag-cat-3:#b47e98; + --tag-cat-3-hover:#d699b6; + --tag-cat-4:#689d96; + --tag-cat-4-hover:#7fbbb3; + --tag-cat-5:#ba9e68; + --tag-cat-5-hover:#dbbc7f; + --tag-cat-6:#c26567; + --tag-cat-6-hover:#e67e80; + --tag-cat-7:#b3a78e; + --tag-cat-7-hover:#d3c6aa; + --tag-cat-8: #8ba269; + --tag-cat-8-hover: #a7c080; + --user-member: var(--base-text); + --user-member-hover: var(--base-text-hover); + --user-privileged: #83c092; + --user-privileged-hover: #83c092; + --user-contributor: #83c092; + --user-contributor-hover: #83c092; + --user-admin:#c27c5d; + --user-admin-hover: #e69875; + --user-moderator:#689d96; + --user-moderator-hover: #7fbbb3; + --user-former-staff: #b3a78e; + --user-former-staff-hover: #d3c6aa; + --user-janitor: #689d96; + --user-janitor-hover: #7fbbb3; + --user-banned: #c26567; + --user-banned-hover: #e67e80; + --favorite-button: #8ba269; + --favorite-button-hover: #a7c080; + --remove-favorite: #c26567; + --remove-favorite-hover: #e67e80; + --warn-button: #c37d5e; + --warn-button-hover: #e69875; + --button-color: #253823; + --button-color-hover: #2f462c; + --button-text: #c3ccd4; + --button-text-hover: #eadec2; + --button-text-hover-secondary: #eadec2; + --true: thin; + scrollbar-width: var(--thin-scrollbar); +}