/* ==UserStyle== @name eSix Café @namespace mandorinn @version 2.2.8 @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; } body[data-th-extra] div#page div[id*="c-"] { isolation: isolate; } body[data-th-extra] div#page div[id*="c-"]::before { content:''; position:absolute; top: 0; left: 0; right: 0; background-repeat: repeat-x; height: 10%; background-position: top; z-index: -1; } body[data-th-extra="spring"] div#page div[id*="c-"]::before { background-image: url('packs/static/spring_top-264aa75af9d983fe396a.png'), url("packs/static/spring_top_sky-5f08767e7576e85cd4d8.png"); background-repeat: no-repeat, repeat-x; background-position: top right, top; } body[data-th-extra="winter"] div#page div[id*="c-"]::before { background-image: url("packs/static/snow_top-993aff352a5f50cd1673.png"); } body[data-th-extra="aurora"] div#page div[id*="c-"]::before { background-image: url("packs/static/aurora-351b89e14fb8c01956d2.png"); } body[data-th-extra="hexagons"] div#page div[id*="c-"]::before { background-image: url("packs/static/hex-b4fc28b5d7c3eb96e7b0.png"); } body[data-th-extra="space"] div#page div[id*="c-"]::before { background-image: url("packs/static/space-6250f9c96a58586bf97c.png"); } body[data-th-extra="stars"] div#page div[id*="c-"]::before { background-image: url("packs/static/stars-d60a76a33afd5f7a498a.png"); } body[data-th-extra] div#page div[id*="c-"]::after { content:''; position:absolute; bottom: 0; left: 0; right: 0; background-repeat: repeat-x; height: 10%; background-position: bottom; z-index: -1; } body[data-th-extra="spring"] div#page div[id*="c-"]::after { background-image: url("packs/static/spring_bottom-35c3afb217009911e2a9.png"), url('packs/static/spring_bottom_fox-b885e26f5a2f59d4372f.png'); background-repeat: repeat-x,no-repeat; background-position: bottom, right; } body[data-th-extra="autumn"] div#page div[id*="c-"]::after { background-image: url("packs/static/leaves_bottom-937df1c91ac26693dab2.png"); } body[data-th-extra="winter"] div#page div[id*="c-"]::after { background-image: url("packs/static/snow_bottom-816f2a5c6b7d50f9e8f5.png"); } div#page { background-color: var(--bg-300)!important; margin:0!important; border-radius:0!important; padding-top: 1.5rem; padding-bottom: 4rem; position:relative; } div#page div#news { z-index: 999 !important; border-radius: 8px; border: 3px solid var(--bg-300); &.open #news-header { background: var(--bg-400); margin-bottom: .5rem; } & #news-body p { font-size: 1rem !important; } & #news-body p:has(a[href="https://www.defendonlineprivacy.com/az/action.php"]) { font-size: 1.25rem !important; font-style: italic; font-weight: bold; } & a[href="https://www.defendonlineprivacy.com/az/action.php"] { font-weight: bold; font-style: italic; color: var(--remove-favorite) !important; font-size: 1.5rem !important; &:hover { color: var(--remove-favorite-hover) !important; } } } .post-index .content { border-radius: 0 !important; background: none !important; } #ad-leaderboard { width:fit-content; margin-inline:auto; } footer.footer-wrapper { margin: 0rem 0 0 0; border-radius:0; background-color: var(--bg)!important; } footer.footer-wrapper .footer-left { border-right-color: var(--base-text) } span.footer-logo { a img { opacity: 0; } a { display:grid; place-items:center; position:relative; &::before { content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6em' height='6em' 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; top:.025rem; 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 svg, nav.navigation a:is([id*="nav"], [id*="blacklist"]) { color: var(--header-link) !important; } nav.navigation i:hover, nav.navigation a:hover svg 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: 4px; border: 2px solid var(--bg-300); } nav.navigation .nav-controls { background: none !important; } nav.navigation .nav-controls a.simple-avatar .simple-avatar-button .simple-avatar-image { background-color: transparent !important; display:grid; place-items: center; border: 2px solid var(--bg-300); border-radius: var(--avatar-border-radius); transition: 200ms; &:hover { border-color: var(--base-text); } & img { width: 100%; height: 100%; border-radius: var(--avatar-border-radius); } } /* 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 */ .post-index .sidebar.sidebar { background-color: transparent !important; box-shadow: none !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.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;"], .search > .post-search ~ div[style="color: darkorange;"] { 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 */ .post-index .search { background: none !important; box-shadow: none !important; } div#page aside#sidebar section.post-search form, div#page aside#sidebar section#re621-insearch form, div#page aside#sidebar section#mode-box form { display:flex; width: 100%; } .post-search { display: flex; align-items: center; justify-content: center; position:relative; border-radius:4px; } .post-search h3 { position: absolute; font-size: 0rem!important; width: 90%; pointer-events: none; z-index:9999; } .post-search span { position:absolute; font-size: .75rem; pointer-events: auto; right: 2rem; top:.5rem; display:flex; } .post-search-help a { width: 0rem; height: 100%; overflow:hidden; margin-top: .75rem; margin-right: -1rem; } .post-search-help { display: flex; align-items: center; width: 0; } .post-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; } .post-search-help a:hover::before { opacity: .5; transition: 100ms; } .post-search-help::before:hover .search-help { font-size: .75rem; } div#page section.post-search form textarea, div#page section#re621-insearch form textarea, div#page section#mode-box form textarea { 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; scrollbar-width:none !important; } .post-search form.post-search-form textarea::placeholder { color: transparent !important; } .post-search button { display:none !important; } .search-controls { background: transparent !important; & button { height: fit-content !important; display:grid; place-items: center; border: 2px solid var(--bg-300); margin-top: .25rem; } } /* 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 */ /* Commenting this suboptimal fix out because the issue that required this seems to not be happening anymore, might have been an e6 thing rather than a userstyle issueeee? Anyway, will try again later and reenable it if the issue pops back up*/ /*New search results fix */ /*body:not([re621="true"]).post-index .content { width:85vw; }*/ 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 *, #blacklist-box #disable-all-blacklists { color: var(--remove-favorite)!important; } #re-enable-all-blacklists *, #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; background-color: var(--bg-400); } div.paginator li a { transition: 100ms; } div.paginator li a:hover { background-color: var(--bg-400)!important; border-radius: 4px; } div.paginator > span.current:hover { background-color: var(--bg-300) !important; } 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); } 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; } } /* 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); background-color: var(--bg-400) !important; } } /* 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.c-static { max-height: 100vh; max-width: 100vw; background-image: var(--main-page-background)!important; background-position:center; background-size: cover !important; background-color: var(--bg)!important; position:relative; } 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; min-height: 4.5rem !important; width: fit-content; margin-inline:auto; padding-left: 1rem; padding-right: 1rem; & .simple-avatar-image { margin-top: 1.75rem; } } div#page { background: none!important; max-width: none !important; display:grid; place-items: center; width: 100vw; margin-top: auto !important; margin-inline: auto !important; margin-bottom: auto !important; padding-top: 4rem !important; & div#c-static { max-width: 480px; margin-top: clamp(10px, 40vh, 40vh); margin-bottom: auto; } } div#c-static::before, div#c-static::after { content: none !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; } #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; } } @-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); } }