Created
July 16, 2021 09:49
-
-
Save Admicos/61f67d37cd0e0ad9dd494c87ec8fe6b8 to your computer and use it in GitHub Desktop.
Tilweaks Tildes Theme
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* ==UserStyle== | |
| @name Tilweaks | |
| @namespace https://ecmelberk.com | |
| @version 1.1.0 | |
| @description Tweaks to Tildes' user interface | |
| @author admicos | |
| @homepageURL https://tild.es/q0z | |
| @updateURL https://git.ebc.li/_/snippets/raw/branch/master/css/tildes.net/tilweaks.user.styl | |
| @license MIT | |
| @preprocessor stylus | |
| @var text fontSize "Font Size" 18px | |
| @var text fontFamily "Font Family" system-ui | |
| @var checkbox thinLogoFont "Thin Logo Font" 1 | |
| @var checkbox themedLogos "Themed Logos" 1 | |
| @var checkbox noSidebarBg "No Sidebar Background" 1 | |
| @var checkbox donationBox "Donation Box Layout" 1 | |
| @var checkbox sideBtnClear "Clear Sidebar Button" 1 | |
| @var checkbox noZebraStripe "No Alternating Topic Colors" 1 | |
| @var checkbox mainBorder "Add Border To Main Element" 1 | |
| @var checkbox extraSpacing "Add Extra Spacing" 1 | |
| @var checkbox noCommentBorder "No Comment Borders" 1 | |
| @var checkbox depthIndicator "Comment Depth Indicator" 1 | |
| @var checkbox commentBackground "Comment Background" 1 | |
| ==/UserStyle== */ | |
| @-moz-document domain("tildes.net") { | |
| /* | |
| * Theme specific logos (except Solarized Dark) by Bauke | |
| * https://gitlab.com/Bauke/tildes-logos | |
| */ | |
| body.theme-atom-one-dark { | |
| /* handpicked */ | |
| --tw-semitransparent: rgba(222, 222, 255, .075); | |
| --tw-logo: url("https://gitlab.com/Bauke/tildes-logos/-/raw/master/png/tildes-atom-one-dark.png"); | |
| } | |
| body.theme-black { | |
| /* handpicked */ | |
| --tw-semitransparent: rgba(255, 255, 255, .075); | |
| --tw-logo: url("https://gitlab.com/Bauke/tildes-logos/-/raw/master/png/tildes-black.png"); | |
| } | |
| body.theme-white { | |
| /* handpicked */ | |
| --tw-semitransparent: rgba(0, 0, 0, .035); | |
| --tw-logo: url("https://gitlab.com/Bauke/tildes-logos/-/raw/master/png/tildes-white.png"); | |
| } | |
| body.theme-dracula { | |
| /* handpicked */ | |
| --tw-semitransparent: rgba(200, 200, 255, .075); | |
| --tw-logo: url("https://gitlab.com/Bauke/tildes-logos/-/raw/master/png/tildes-dracula.png"); | |
| } | |
| body.theme-gruvbox-dark { | |
| /* handpicked */ | |
| --tw-semitransparent: rgba(255, 200, 200, .05); | |
| --tw-logo: url("https://gitlab.com/Bauke/tildes-logos/-/raw/master/png/tildes-gruvbox-dark.png"); | |
| } | |
| body.theme-gruvbox-light { | |
| /* handpicked */ | |
| --tw-semitransparent: rgba(200, 150, 128, .125); | |
| --tw-logo: url("https://gitlab.com/Bauke/tildes-logos/-/raw/master/png/tildes-gruvbox-light.png"); | |
| } | |
| body.theme-solarized-dark { | |
| /* handpicked */ | |
| --tw-semitransparent: rgba(200, 255, 255, .035); | |
| /* Default tildes logo is already "solarized" */ | |
| --tw-logo: url("https://tildes.net/favicon-32x32.png"); | |
| } | |
| body.theme-solarized-light { | |
| /* handpicked */ | |
| --tw-semitransparent: rgba(0, 0, 0, .035); | |
| /* Default tildes logo is already "solarized" */ | |
| --tw-logo: url("https://gitlab.com/Bauke/tildes-logos/-/raw/master/png/tildes-solarized-light.png"); | |
| } | |
| body.theme-zenburn { | |
| /* handpicked */ | |
| --tw-semitransparent: rgba(200, 200, 200, .05); | |
| --tw-logo: url("https://gitlab.com/Bauke/tildes-logos/-/raw/master/png/tildes-zenburn.png"); | |
| } | |
| /* Change font size */ | |
| html { | |
| font-size: fontSize; | |
| } | |
| /* Change font family */ | |
| body { | |
| font-family: fontFamily; | |
| } | |
| .site-header-logo { | |
| /* Use custom logo */ | |
| if themedLogos { | |
| background-image: var(--tw-logo); | |
| background-size: contain; | |
| } | |
| if thinLogoFont { | |
| font-weight: 300; | |
| letter-spacing: 0.05rem; | |
| } | |
| } | |
| #sidebar { | |
| /* Hide sidebar background, make it appear "floating" */ | |
| if noSidebarBg { | |
| background-color: transparent !important; | |
| } | |
| /* | |
| * Make the "browse the list of groups" button border-only | |
| * to make it less distracting. | |
| */ | |
| if sideBtnClear { | |
| & > .btn-primary:not(:hover) { | |
| background-color: transparent !important; | |
| color: var(--button-color); | |
| } | |
| } | |
| } | |
| /* | |
| * Give the sidebar some sort of background at smaller screens | |
| * so the sidebar text doesn't clash with the text of the page | |
| */ | |
| if noSidebarBg { | |
| @media (max-width: 840px) { | |
| #sidebar { | |
| background-color: inherit !important; | |
| } | |
| } | |
| } | |
| /* | |
| * Donation goal looks out of place without a background | |
| * So let's just tweak it a little to make it look better | |
| */ | |
| if donationBox { | |
| .donation-goal { | |
| border: 0; | |
| padding: 0; | |
| align-items: start; | |
| text-align: left; | |
| } | |
| /* Reverse the progress bar ordering so the percent value is first */ | |
| .donation-goal-progress { | |
| flex-direction: row-reverse; | |
| /* Fix spacing from the previous change */ | |
| & > span { | |
| margin-left: 0; | |
| margin-right: 0.4rem; | |
| } | |
| /* Make the donation progress meter smaller */ | |
| & > meter { | |
| height: .1rem; | |
| /* Change color of donation progress meter (webkit untested) */ | |
| &::-moz-meter-bar, | |
| &::-webkit-meter-bar { | |
| background: var(--button-color) !important; | |
| } | |
| } | |
| } | |
| } | |
| /* Give the main element a little border to make it appear a little more "contained" */ | |
| if mainBorder { | |
| main { | |
| border: 1px solid var(--border-color); | |
| } | |
| } | |
| .topic-listing { | |
| /* | |
| * Disable the "zebra striping" of topics, | |
| * we add spacing to differentiate them instead | |
| */ | |
| if noZebraStripe { | |
| & > li:nth-of-type(2n) { | |
| background-color: transparent !important; | |
| } | |
| } | |
| /* Give topics extra spacing */ | |
| if extraSpacing { | |
| & > li { | |
| margin-top: 0.4rem; | |
| } | |
| } | |
| } | |
| if extraSpacing { | |
| /* Add some padding to text posts */ | |
| .topic-full-text { | |
| padding: 0.75rem 0.25rem; | |
| } | |
| /* Pull divider closer to post */ | |
| .topic-comments, | |
| .topic-comments > .divider { | |
| margin-top: 0.25rem | |
| } | |
| } | |
| /* Disable the default comment borders */ | |
| if noCommentBorder { | |
| .comment { | |
| border: 0; | |
| border-bottom: 0 !important; | |
| } | |
| } | |
| /* Add indicators to nested comments */ | |
| if depthIndicator { | |
| .comment-tree:not([id="comments"]) { | |
| border-left: 2px dotted var(--background-secondary-color); | |
| } | |
| /* Switch the margin and padding around to make nesting indicators nicer */ | |
| .comment-tree-replies { | |
| margin-left: 0; | |
| padding-left: 1rem; | |
| } | |
| } | |
| /* Give the comment text some extra padding to seperate it from the header and actions */ | |
| .comment-text { | |
| if extraSpacing { | |
| padding: 0.5rem; | |
| /* Put a little padding on code blocks */ | |
| & pre { | |
| padding: .5rem; | |
| } | |
| } | |
| if commentBackground { | |
| /* Make quotes and code blocks stand out */ | |
| & blockquote, | |
| & pre, | |
| & code { | |
| background-color: var(--background-primary-color) !important; | |
| } | |
| } | |
| } | |
| /* Give comments their own backgrounds to make them stand out */ | |
| if commentBackground { | |
| .comment-itself { | |
| background-color: var(--tw-semitransparent); | |
| } | |
| } | |
| /* | |
| * Add Tilweaks notice to the footer | |
| * Feel free to add your own name if you want :) | |
| */ | |
| .site-footer-theme-selection:after { | |
| display: block; | |
| content: "(Tilweaks by @admicos)"; | |
| margin-top: .25rem; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment