Skip to content

Instantly share code, notes, and snippets.

@elken

elken/redditNord.css

Created February 8, 2020 13:19
Show Gist options
  • Save elken/1d0b3b59e32976b17c002eb29f2f815c to your computer and use it in GitHub Desktop.
Save elken/1d0b3b59e32976b17c002eb29f2f815c to your computer and use it in GitHub Desktop.
Download ZIP
Raw
redditNord.css
:root {
--nord0: #2e3440;
--nord1: #3b4252;
--nord2: #434c5e;
--nord3: #4c566a;
--nord4: #d8dee9;
--nord5: #e5e9f0;
--nord6: #eceff4;
--nord7: #8fbcbb;
--nord8: #88c0d0;
--nord9: #81a1c1;
--nord10: #5e81ac;
--nord11: #bf616a;
--nord12: #d08770;
--nord13: #ebcb8b;
--nord14: #a3be8c;
--nord15: #b48ead;
--nord3-4: #929AAA;
}
body {
background: var(--nord0) !important;
}
body,
.search-result-meta {
color: var(--nord2) !important;
}
.res-nightmode .tagline,
.res-nightmode .entry .buttons li a,
.res-nightmode .trending-subreddits strong {
color: var(--nord4) !important;
}
.organic-listing,
.footer-parent,
.grippy,
.listing-chooser .contents,
#header-img,
.rank {
display: none;
}
.thumbnail.self {
background-position: 0px -1211px;
height: 50px;
}
.title a,
.search-title,
.tagline {
color: var(--nord7) !important;
}
.search-title mark {
background: var(--nord1);
color: var(--nord5) !important;
}
.domain {
color: var(--nord7) !important;
}
li a {
color: var(--nord7) !important;
}
.subreddit {
color: var(--nord7) !important;
}
.md {
background: var(--nord0) !important;
border: 0px solid var(--nord10) !important;
border-radius: 10px !important;
padding-left: 5px !important;
}
.comment .child {
border: none !important;
}
#header {
background: none !important;
border: none !important;
}
.tabmenu li a,
.redditname a {
background: none !important;
color: var(--nord15) !important;
}
.tabmenu li.selected a {
border: none !important;
font-size: x-large !important;
}
#header-bottom-right,
#sr-header-area {
background: none !important;
}
#sr-header-area a {
color: var(--nord15) !important;
}
.title a:visited {
color: var(--nord3-4) !important;
}
#sr-header-area,
.beta-hint {
display: none !important;
padding: 0 !important;
margin: 0 !important;
}
#header-img.default-header {
background-image: url("https://www.redditstatic.com/desktop2x/img/favicon/favicon-96x96.png") !important;
background-position: 0 15px;
background-size: 24px;
width: 30px;
margin-left: 20px;
}
.content {
margin: 5px !important;
}
.tabmenu > li:not(:nth-child(1)):not(:nth-child(3)) {
display: none;
}
.trending-subreddits-content strong,
.trending-subreddits-content ul {
display: none !important;
}
.trending-subreddits-content a {
visibility: hidden !important;
}
.res-nightmode .sidebox,
.res-nightmode .subreddit-info,
.res-nightmode .raisedbox,
.res-nightmode .login-form-side,
.res-nightmode .interstitial-subreddit-description {
background-color: var(--nord1) !important;
color: var(--nord4);
}
.res-nightmode html.res-nightmode,
.res-nightmode body,
.res-nightmode body .content,
.res-nightmode .modal-body,
.res-nightmode .side,
.res-nightmode .icon-menu a,
.res-nightmode .side .leavemoderator,
.res-nightmode .side .leavecontributor-button,
.res-nightmode .side .titlebox,
.res-nightmode .side .spacer .titlebox .redditname,
.res-nightmode .side .titlebox .flairtoggle,
.res-nightmode .side .usertext-body .md ol,
.res-nightmode .side .usertext-body .md ol ol,
.res-nightmode .side .usertext-body .md ol ol li,
.res-nightmode .modactionlisting table *,
.res-nightmode .side .recommend-box .rec-item,
.res-nightmode .crosspost-preview,
.res-nightmode .crosspost-thing-preview,
.res-nightmode .side .titlebox form.flairtoggle,
.res-nightmode .trophy-area .content,
.res-nightmode .side .md ol,
.res-nightmode .side .md ul,
.res-nightmode .link,
.res-nightmode .helpcenter-form .section-content {
background-color: var(--nord0) !important;
color: var(--nord4) !important;
}
.res-nightmode .entry.res-selected,
.res-nightmode .entry.res-selected .md-container {
background: var(--nord2) !important;
}
.res-nightmode .morelink {
background: var(--nord3) !important;
border-color: var(--nord1) !important;
}
.res-nightmode .morelink:hover a {
color: var(--nord10) !important;
}
.res-nightmode a,
.res-nightmode .md a,
.res-nightmode .share-button .option,
.res-nightmode #subscribe a,
.res-nightmode .share .option,
.res-nightmode .wired a,
.res-nightmode .side a,
.res-nightmode .link .score.dislikes,
.res-nightmode .linkcompressed .score.dislikes,
.res-nightmode a[rel="tag"],
.res-nightmode .dsq-help,
.res-nightmode #authorInfoToolTip h3 a,
.res-nightmode .reddiquette,
.res-nightmode .parent .author,
.res-nightmode .parent .subreddit,
.res-nightmode .combined-search-page .search-result a,
.res-nightmode .combined-search-page .search-result a > mark,
.res-nightmode .hoverHelp,
.res-nightmode .deepthread a,
.res-nightmode .policy-page .md h1 a,
.res-nightmode .policy-page .md h3 a {
color: var(--nord8) !important;
}
.res-nightmode .flair,
.res-nightmode .linkflairlabel {
background-color: var(--nord1) !important;
color: var(--nord4) !important;
border-color: var(--nord3) !important;
}
.res-nightmode input[type="number"],
.res-nightmode input[type="text"],
.res-nightmode input[type="password"],
.res-nightmode .c-form-control {
background: var(--nord2) !important;
color: var(--nord4) !important;
}
.res-nightmode button,
.res-nightmode input[type="button"],
.res-nightmode input[type="submit"],
.res-nightmode input[type="reset"] {
background: var(--nord3) !important;
color: var(--nord4) !important;
}
.c-btn-primary:hover,
.c-btn-primary:focus,
.c-btn-primary:active,
.c-btn-primary.disabled,
.c-btn-primary[disabled] {
background: var(--nord8) !important;
}
.res-nightmode .sidebox,
.res-nightmode .subreddit-info,
.res-nightmode .raisedbox,
.res-nightmode .login-form-side,
.res-nightmode .interstitial-subreddit-description {
color: var(--nord4) !important;
}
.res-nightmode ul.res-search-tabs li a {
background: var(--nord3) !important;
color: var(--nord4) !important;
}
.res-nightmode.res-searchHelper-searchPageTabs ul.res-search-tabs li.res-search-tab-active a,
.res-nightmode.res-searchHelper-searchPageTabs .combined-search-page #previoussearch .res-search-pane,
.res-nightmode #RESConsoleContainer,
.res-nightmode #SearchRES-results-container li,
.res-nightmode #SearchRES-results-container li:hover,
.res-nightmode #REScommentSubToggle {
background: var(--nord2) !important;
}
.res-searchHelper-searchPageTabs .res-search-options dd {
color: var(--nord9) !important;
}
.res-searchHelper-searchPageTabs .res-search-options dt {
color: var(--nord4) !important;
}
.fancy-toggle-button .remove {
background-image: unset;
background-color: var(--nord11) !important;
}
.res-nightmode .comment .md p a[href="/spoiler"]:hover,
.res-nightmode .comment .md p a[href="/spoiler"]:active,
.res-nightmode .comment .md p a[href="#spoiler"]:hover,
.res-nightmode .comment .md p a[href="#spoiler"]:active,
.res-nightmode .addNewWidget,
.res-nightmode .editWidget,
.res-nightmode #authorInfoToolTip .option,
.res-nightmode .updateTime,
.res-nightmode #RESSubmitOptions ~ div a,
.res-nightmode #shortlink-text,
.res-nightmode .guiders_button,
.res-nightmode .blueButton,
.res-nightmode .gold-accent a,
.res-nightmode .snoovatar-page .gold-accent a,
.res-nightmode .combined-search-page .search-result-subreddit .search-subscribe-button .add.active,
.res-nightmode .combined-search-page .search-result-subreddit .search-subscribe-button .remove.active,
.res-nightmode .fancy-toggle-button a,
.res-nightmode .fancy-toggle-button .multi-count,
.res-nightmode body,
.res-nightmode .sidebar .md,
.res-nightmode .side,
.res-nightmode .side *,
.res-nightmode .side .spacer,
.res-nightmode .content,
.res-nightmode .traffic-tables .traffic-table tr,
.res-nightmode .parentComment .md,
.res-nightmode .post-body.entry-content,
.res-nightmode .dsq-auth-header,
.res-nightmode .instructions .preftable th,
.res-nightmode #BigEditor .markdownEditor a,
.res-nightmode #BigEditor .markdownEditor .RESMacroDropdownTitle,
.res-nightmode #REScommentSubToggle,
.res-nightmode #alert_message,
.res-nightmode #report-action-form {
color: var(--nord4) !important;
}
span.multi-count,
.res-fancy-toggle-button {
background-image: linear-gradient(to bottom, var(--nord15), var(--nord15)) !important;
}
.res-nightmode.res-searchHelper-searchPageTabs .combined-search-page .search-result .search-expando.collapsed::before {
background: linear-gradient(to bottom, var(--nord0) 0%, var(--nord1) 100%) !important;
}
div.noncollapsed.thing.comment,
div.noncollapsed.thing.comment div.noncollapsed.thing.comment div.noncollapsed.thing.comment,
div.noncollapsed.thing.comment div.noncollapsed.thing.comment div.noncollapsed.thing.comment div.noncollapsed.thing.comment div.noncollapsed.thing.comment,
div.noncollapsed.thing.comment div.noncollapsed.thing.comment div.noncollapsed.thing.comment div.noncollapsed.thing.comment div.noncollapsed.thing.comment div.noncollapsed.thing.comment div.noncollapsed.thing.comment,
div.noncollapsed.thing.comment div.noncollapsed.thing.comment div.noncollapsed.thing.comment div.noncollapsed.thing.comment div.noncollapsed.thing.comment div.noncollapsed.thing.comment div.noncollapsed.thing.comment div.noncollapsed.thing.comment div.noncollapsed.thing.comment,
div.noncollapsed.thing.comment div.noncollapsed.thing.comment div.noncollapsed.thing.comment div.noncollapsed.thing.comment div.noncollapsed.thing.comment div.noncollapsed.thing.comment div.noncollapsed.thing.comment div.noncollapsed.thing.comment div.noncollapsed.thing.comment div.noncollapsed.thing.comment div.noncollapsed.thing.comment
{
background: var(--nord1) !important;
}
div.noncollapsed.thing.comment div.noncollapsed.thing.comment,
div.noncollapsed.thing.comment div.noncollapsed.thing.comment div.noncollapsed.thing.comment div.noncollapsed.thing.comment,
div.noncollapsed.thing.comment div.noncollapsed.thing.comment div.noncollapsed.thing.comment div.noncollapsed.thing.comment div.noncollapsed.thing.comment div.noncollapsed.thing.comment,
div.noncollapsed.thing.comment div.noncollapsed.thing.comment div.noncollapsed.thing.comment div.noncollapsed.thing.comment div.noncollapsed.thing.comment div.noncollapsed.thing.comment div.noncollapsed.thing.comment div.noncollapsed.thing.comment,
div.noncollapsed.thing.comment div.noncollapsed.thing.comment div.noncollapsed.thing.comment div.noncollapsed.thing.comment div.noncollapsed.thing.comment div.noncollapsed.thing.comment div.noncollapsed.thing.comment div.noncollapsed.thing.comment div.noncollapsed.thing.comment div.noncollapsed.thing.comment,
div.noncollapsed.thing.comment div.noncollapsed.thing.comment div.noncollapsed.thing.comment div.noncollapsed.thing.comment div.noncollapsed.thing.comment div.noncollapsed.thing.comment div.noncollapsed.thing.comment div.noncollapsed.thing.comment div.noncollapsed.thing.comment div.noncollapsed.thing.comment div.noncollapsed.thing.comment div.noncollapsed.thing.comment
{
background: var(--nord2) !important;
}
.res-nightmode .submit textarea, .res-nightmode .submit #url, .res-nightmode .submit #sr-autocomplete, .res-nightmode .usertext-edit textarea, .res-nightmode .RESDialogSmall, .res-nightmode .c-close, .res-nightmode #BigEditor #BigText, .res-nightmode #liveupdate-statusbar, .res-nightmode #liveupdate-statusbar.complete, .res-nightmode #alert_message input {
background: var(--nord2) !important;
color: var(--nord4) !important;
}
.res-nightmode .sidebox .spacer, .res-nightmode .side .linkinfo {
background: var(--nord2) !important;
}
.res-nightmode #alert_message, .res-nightmode #report-action-form {
background: var(--nord2) !important;
}
.res-nightmode .report-modal .report-form-bottom-panel .report-form-content-policy p, .res-nightmode .report-modal .report-reason-item .report-reason-display, .res-nightmode .report-modal .report-form-last-step-text, .res-nightmode .report-modal .report-form-last-step-text-custom-rules, .res-nightmode .report-modal .report-form-big-content-policy {
color: var(--nord4) !important;
}
.md {
background: unset !important;
}
.tabmenu .choice {
color: var(--nord15) !important;
}
.side {
display: none;
}
Raw
userChrome.css
:root {
--urlbar-primary-colour: #434c5e;
--urlbar-invert-colour: #2e3440;
}
.browser-toolbar:not(.titlebar-color) {
background: var(--urlbar-invert-colour) !important;
}
#TabsToolbar {
background-color: var(--urlbar-invert-colour) !important;
margin-bottom: 0px !important;
margin-top: 0px !important;
margin-left: 35vw !important;
max-height: 35px !important;
height: 30px !important;
}
#nav-bar {
margin-top: -30px !important;
margin-left: 0px !important;
margin-right: 65vw !important;
height: 30px;
background-color: var(--urlbar-invert-colour) !important;
}
#PersonalToolbar {
--uc-bm-height: 23px;
--uc-bm-padding: 3px;
}
:root[uidensity="compact"] #PersonalToolbar {
--uc-bm-padding: 1px;
}
:root[uidensity="touch"] #PersonalToolbar {
--uc-bm-padding: 6px;
}
#PersonalToolbar:not([customizing]) {
margin-bottom: calc(2px - var(--uc-bm-height) - 2 * var(--uc-bm-padding));
transform: rotateX(90deg);
transform-origin: top;
transition: transform 135ms linear 48ms !important;
z-index: 1;
}
#PlacesToolbarItems > .bookmark-item {
padding-block: var(--uc-bm-padding) !important;
}
#nav-bar:focus-within + #PersonalToolbar,
#navigator-toolbox:hover > #PersonalToolbar {
transform: rotateX(0);
}
#PanelUI-button,
.panel-arrow {
-moz-box-ordinal-group: 0 !important;
}
#navigator-toolbox {
border-bottom: 0px solid var(--chrome-content-separator-color) !important;
}
#urlbar-container,
#search-container {
padding-block: 0px !important;
margin-inline: 0px !important;
}
.tab-background[selected="true"] {
background-color: var(--urlbar-primary-colour) !important;
background-image: none !important;
}
.tab-background:not([selected]) {
background-color: var(--urlbar-invert-colour) !important;
}
.tab-line {
height: 0px !important;
}
#navigator-toolbox {
--tabs-border-color: var(--urlbar-invert-colour) !important;
}
#urlbar,
#urlbar[focused="true"],
.searchbar-textbox,
#urlbar:hover,
.searchbar-textbox:hover {
background: var(--urlbar-primary-colour) !important;
color: white !important;
padding: 0 0px !important;
border-radius: 0 !important;
outline: none !important;
box-shadow: 0 0 0 !important;
border: 0 solid transparent !important;
height: 30px !important;
-moz-appearance: none;
margin: 0px 0px !important;
cursor: default;
}
#star-button-box,
#reader-mode-button,
#pageActionSeparator,
#pocket-button-box,
.autocomplete-history-dropmarker,
.urlbar-history-dropmarker.urlbar-icon.chromeclass-toolbar-additional,
#TabsToolbar .titlebar-placeholder[type="pre-tabs"],
#identity-icon-labels {
display: none !important;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment