Skip to content

Instantly share code, notes, and snippets.

@ncla
Last active January 24, 2017 15:48
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ncla/ae8fdc4340da9a3d8ea1cf126e7418e5 to your computer and use it in GitHub Desktop.
Save ncla/ae8fdc4340da9a3d8ea1cf126e7418e5 to your computer and use it in GitHub Desktop.
/*
Version 1.0.0
Apicem CSS Theme
By /u/Cereal_Addict
Stock photos via unsplash.com
Icons via icons8.com
==============================================================================*/
*, :before, :after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-text-size-adjust: none !important;
-moz-text-size-adjust: none !important;
-ms-text-size-adjust: none !important;
text-decoration: none !important;
outline: none !important
}
a, body .generic-table, .res #srList a, #searchexpando a {
color: #fff
}
label, .search-expando-button {
color: #999
}
input[type=text], textarea, .hover-bubble.multi-selector .create-multi input[type="text"], input#url {
box-shadow: none !important;
border: 1px solid transparent !important;
border-radius: 0 !important;
background: #383F47;
color: #fff;
transition: 0 !important
}
input[type=text]:focus, textarea:focus, input#url:focus {
border-color: #ffb6af !important
}
input[type="checkbox"], input[type=radio], #rem-login-main, .side .titlebox h1.redditname + div:before {
-webkit-appearance: none;
-moz-appearance: none;
display: inline-block;
vertical-align: middle;
margin-top: 1px !important;
margin-bottom: 1px !important;
width: 20px;
height: 20px;
border: 0;
border-radius: 0;
background: #383F47 url(%%spritesheet%%) no-repeat 4px -106px/105px 150px;
content: ""
}
#rem-login-main {
margin-right: 5px
}
input[type="checkbox"]:not(:checked), input[type=radio]:not(:checked), #rem-login-main:not(:checked) {
background: #383F47
}
input[type=radio] {
margin: 0 5px;
border-radius: 50%
}
select {
-webkit-appearance: none;
-moz-appearance: none;
box-shadow: none;
border: 0;
border-radius: 0;
padding: 5px 22px 5px 8px;
background: #383F47 url(%%spritesheet%%) no-repeat 0/105px 150px;
background-position: right -88px top -130px;
font-size: 13px;
color: #fff
}
button, .usertext .help-toggle a, .usertext a.reddiquette, .flair-jump button, body #userTaggerToolTip input[type=submit], body #editShortcutDialog [name=shortcut-save], .wiki-page .wiki-page-content .wiki_button {
border: 1px solid #fff;
border-radius: 0;
padding: 5px 10px;
background: #fff;
letter-spacing: 1px;
text-transform: uppercase;
font-size: 10px;
font-weight: 700;
color: #32383f;
transition: .2s
}
button:hover, .flair-jump button:hover {
border: 1px solid transparent;
background-color: rgba(255, 255, 255, 0.8)
}
button.cancel, button[name="preview"], .usertext .help-toggle a, .usertext a.reddiquette {
color: #fff;
background: none;
transition: .2s
}
button.cancel:hover, button[name="preview"]:hover, .usertext .help-toggle a:hover, .usertext a.reddiquette:hover, .content button.RESBigEditorPop:hover {
border: 1px solid #fff;
background-color: rgba(255, 255, 255, .1)
}
body {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
background: url(%%body%%) fixed center top/cover
}
body, div#RESSubredditGroupDropdown, #search input[type="text"], textarea {
font-family: -apple-system, BlinkMacSystemFont, "Roboto", Helvetica, Arial, "Lucida Grande", sans-serif
}
#header {
-webkit-order: -1;
-ms-flex-order: -1;
order: -1;
margin: 60px 30px 0;
width: 100%;
height: 160px;
border: 0;
background-color: #323a47;
background-image: linear-gradient(rgba(50, 58, 71, .65), rgba(50, 58, 71, .65)), url(%%header%%);
background-position: center top;
background-size: cover
}
#header:after {
position: absolute;
z-index: -1;
left: 0;
bottom: 0;
width: 100%;
height: 80px;
background: rgba(255, 255, 255, .05);
content: ""
}
#sr-header-area {
position: absolute;
top: -60px;
left: -30px;
width: calc(100% - -60px);
height: 30px;
border: 0;
background: #fff;
white-space: nowrap;
font-size: 9px;
color: #32383f
}
#sr-header-area #srLeftContainer {
margin: 0;
padding: 0
}
#sr-header-area .separator, #sr-header-area .srSep {
display: none
}
#sr-header-area #srLeftContainer, #sr-header-area #RESShortcutsViewport, #sr-header-area #RESShortcutsEditContainer {
max-height: none
}
#sr-header-area #srLeftContainer {
display: inline-block;
float: none
}
#sr-header-area .sr-list {
height: 30px
}
#sr-header-area ul.flat-list.sr-bar, #sr-header-area #srLeftContainer {
display: inline-block;
position: relative;
top: 5px;
height: 20px;
line-height: 20px
}
#sr-header-area ul.flat-list.sr-bar:nth-of-type(1), #sr-header-area #srLeftContainer {
margin-right: 12px;
border-right: 1px solid rgba(0, 0, 0, .1);
padding-right: 12px
}
#sr-header-area #RESShortcutsViewport {
display: inline-block;
position: relative;
top: 5px
}
#sr-header-area #RESShortcuts {
padding: 0
}
#sr-header-area .dropdown.srdrop {
padding: 0
}
#sr-header-area .dropdown.srdrop .selected {
margin-top: 5px;
margin-right: 0;
height: 20px;
padding: 0 6px;
background: none;
line-height: 20px
}
.dropdown.lightdrop .selected {
padding-right: 0
}
#sr-header-area .dropdown.srdrop .selected, #sr-header-area #srDropdown {
margin-left: 12px;
font-size: 0 !important;
vertical-align: top
}
#sr-header-area .dropdown.srdrop .selected:after, #sr-header-area #srDropdown #srDropdownContainer a:after {
vertical-align: middle;
font-size: 18px;
content: "≡"
}
#sr-header-area #srDropdown #srDropdownContainer a {
letter-spacing: inherit
}
#sr-header-area a {
display: inline-block;
height: 20px;
padding: 0 6px;
line-height: 20px;
letter-spacing: .5px;
color: #32383f
}
#sr-header-area a:not(#sr-more-link):hover, #sr-header-area .dropdown.srdrop .selected:hover, #header #sr-header-area .selected a, .res #sr-header-area a.RESShortcutsCurrentSub {
background: rgba(50, 58, 71, .1);
font-weight: 400;
color: #32383f !important
}
#header #sr-header-area .sr-bar a.gold:hover {
font-weight: 700
}
#sr-header-area .sr-bar .separator {
display: none
}
.drop-choices, .res .RESDialogSmall:not(.livePreview), .res #RESNotifications .RESNotification, body #editShortcutDialog, div.guider {
box-shadow: 0 0 10px rgba(0, 0, 0, .5);
border: 1px solid #434b55;
border-radius: 0;
background: #32383F;
letter-spacing: .5px
}
body #editShortcutDialog {
top: 30px
}
.drop-choices {
padding: 10px;
font-size: 9px
}
.drop-choices:not(.flairselector) a {
text-transform: uppercase
}
.drop-choices.lightdrop {
margin-left: -20px
}
.dropdown.lightdrop .selected {
letter-spacing: .5px
}
.drop-choices a.choice {
height: 30px;
padding: 0 10px;
line-height: 30px
}
#sr-header-area .drop-choices.srdrop, .res #srList, .res #RESSubredditGroupDropdown {
top: 30px !important;
margin-left: 0;
box-shadow: 0 0 10px rgba(0, 0, 0, .5);
border: 0;
padding: 10px !important;
background: #32383F;
text-transform: uppercase;
letter-spacing: .5px;
font-size: 9px
}
#sr-header-area .drop-choices.srdrop {
top: 30px !important
}
.res #srList {
position: fixed;
left: calc(50% - 250px);
width: 500px;
height: calc(100vh - 60px);
padding-top: 0;
overflow: visible;
max-height: none !important;
opacity: 1;
pointer-events: auto;
transition: .2s;
z-index: 2147483647
}
.res #RESSubredditGroupDropdown {
transition: .2s
}
.res #srList tbody {
display: block;
max-height: calc(100% - 50px);
overflow: scroll
}
.res #srList:before {
position: fixed;
left: 50%;
margin-left: -250px;
top: 30px;
width: 500px;
height: calc(100vh - 60px);
background: #32383F;
content: "";
z-index: -1;
transition: .2s opacity
}
.res #srList:after {
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
padding: 50px 70px 0 0;
background-image: url(%%crosshatch%%), url(%%overlay%%), linear-gradient(45deg, rgba(196, 145, 138, 0.75) 20%, rgba(96, 147, 196, 0.985) 80%);
background-size: auto 100%, 100px 100px, cover;
background-position: center, center, center;
content: "✕";
text-align: right;
text-transform: lowercase;
font-size: 40px;
font-weight: 100;
color: #fff;
z-index: -2;
transition: .2s opacity;
pointer-events: none
}
.sortAsc, .sortDesc {
margin-top: 18px;
margin-right: 10px;
height: 12px;
line-height: 12px
}
div#RESSubredditGroupDropdown ul {
border: 0
}
#sr-header-area .drop-choices.srdrop a, .res #srList tr, .res #RESSubredditGroupDropdown li a {
height: 30px;
padding: 0 10px;
border-top: solid 1px #434b55;
border-bottom: 0;
line-height: 30px;
color: #fff
}
.res #srList thead {
display: block;
height: 50px
}
#sr-header-area .drop-choices.srdrop:before, .res #srList thead td:nth-of-type(1) {
height: 50px;
line-height: 50px;
font-size: 18px;
font-weight: 700;
color: #fff;
content: "YOUR SUBREDDITS"
}
#sr-header-area .drop-choices.srdrop:before {
padding: 0 50px 0 10px
}
.res #srList thead td:nth-of-type(1):before {
content: "YOUR "
}
.res #srList thead td:nth-of-type(1):after {
margin-left: -5px;
content: "S"
}
.res #srList thead tr {
height: 50px;
line-height: 50px;
white-space: nowrap
}
.res #srList td {
padding: 0
}
.res #srList tr td:nth-of-type(1) {
width: 300px
}
.res #srList td.RESvisited {
width: 120px
}
.res #srList td.RESshortcut {
width: 60px
}
.res #srList td.RESvisited, .res #srList td.RESshortcut {
text-transform: uppercase
}
#sr-header-area .drop-choices.srdrop a, .res #RESSubredditGroupDropdown li a {
display: block;
min-width: 50%
}
.res #srList thead tr, .res #RESSubredditGroupDropdown li:nth-of-type(1) a, .res #RESSubredditGroupDropdown a.res-icon {
border: 0
}
.res #RESSubredditGroupDropdown ul {
padding: 0
}
.res #RESSubredditGroupDropdown li + .RESShortcutsEditButtons, .res #RESSubredditGroupDropdown > .RESShortcutsEditButtons {
margin: 0;
border-top: solid 1px #434b55;
padding: 0
}
.res #RESSubredditGroupDropdown .RESShortcutsEditButtons {
white-space: nowrap
}
.res #RESSubredditGroupDropdown .RESShortcutsEditButtons .res-icon {
display: inline-block;
margin: 0;
color: #fff
}
.res #RESSubredditGroupDropdown li + .RESShortcutsEditButtons a.delete {
text-align: right
}
.res #RESSubredditGroupDropdown li {
margin: 0;
padding: 0
}
.res #srList tr:hover, .res #RESSubredditGroupDropdown li:hover {
background: none
}
body #header #sr-header-area .srdrop + .drop-choices.srdrop a.choice:hover, .res #srList tbody tr:hover a, .res #RESSubredditGroupDropdown li a:hover, .res #RESSubredditGroupDropdown .RESShortcutsEditButtons .res-icon:hover, .res #RESSubredditGroupDropdown .RESShortcutsCurrentSub a, #autocomplete_dropdown .selectedItem {
font-weight: 400;
color: #ffb6af !important
}
.res #RESSubredditGroupDropdown li a:hover, #autocomplete_dropdown .selectedItem {
background: none
}
a#sr-more-link, .res #RESShortcutsEditContainer {
display: flex;
margin-top: 5px;
width: auto;
height: 20px;
border-left: 1px solid rgba(0, 0, 0, .1);
padding-left: 12px;
background: #fff
}
.res #RESShortcutsEditContainer div {
position: static;
display: inline-block;
margin-right: 12px;
width: auto;
background: none;
line-height: 18px;
font-weight: 400;
color: #32383f
}
#RESShortcutsRight {
order: 2
}
#sort-menu p {
margin-bottom: 5px;
color: #fff
}
#header .pagename {
position: absolute;
top: 25px;
left: 25px;
margin: 0;
width: auto;
height: 30px;
line-height: 30px;
text-align: center;
letter-spacing: -10px;
text-transform: uppercase;
font-size: 0;
font-weight: 700
}
#header .pagename a {
font-size: 24px;
letter-spacing: 10px;
color: #fff
}
#header .pagename:after {
margin-left: 25px;
white-space: nowrap;
letter-spacing: 6px;
font-size: 12px;
font-weight: 400;
vertical-align: top;
color: #fff;
content: "subtitle goes here"
}
#header #header-img {
position: absolute;
left: 25px;
bottom: 25px;
margin: 0;
width: 30px;
height: 30px;
padding-left: 30px;
background: url(%%spritesheet%%) -87px -33px/126px 180px;
opacity: .8
}
#header .tabmenu {
position: absolute;
left: 70px;
top: 90px;
margin: 0;
min-width: 210px;
padding-top: 50px;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 11px;
transition: box-shadow .5s
}
#header .tabmenu:hover, #header:target .tabmenu {
box-shadow: 0 0 10px rgba(0, 0, 0, .5)
}
#header .tabmenu li {
display: block;
margin: 0;
padding: 0 10px;
background: #fff;
font-weight: 400;
opacity: 0;
transition: .3s
}
#header .tabmenu li:last-of-type {
padding-bottom: 10px
}
#header .tabmenu:hover li, #header:target .tabmenu li, #header .tabmenu li.selected:not(.res-tabmenu-button) {
opacity: 1
}
#header .tabmenu li a {
display: block;
overflow: hidden;
height: 0;
border: 0;
padding: 0 10px;
line-height: 0;
background: #fff;
color: transparent;
-webkit-transition: .3s;
transition: .3s;
-webkit-transition-property: height, line-height, color;
transition-property: height, line-height, color
}
#header .tabmenu:hover li a, #header:target .tabmenu li a {
height: 40px;
border-top: 1px solid rgba(0, 0, 0, .1);
line-height: 40px;
color: #32383f
}
#header .tabmenu li a:hover, #header .tabmenu:hover li.selected a:hover, #header:target .tabmenu li.selected a:hover {
background: rgba(50, 58, 71, .1)
}
#header .tabmenu li.selected:not(.res-tabmenu-button) {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding-top: 10px;
background: none
}
#header .tabmenu li.selected:not(.res-tabmenu-button) a {
width: 100%;
height: 40px;
border: 0;
background: none;
line-height: 40px;
color: #fff;
opacity: 1;
transition: .3s color
}
#header .tabmenu:hover li.selected, #header:target .tabmenu li.selected {
background: #fff
}
#header .tabmenu:hover li.selected a, #header:target .tabmenu li.selected a {
color: #32383f
}
#header .tabmenu li.selected a:after {
content: " ▾"
}
#header .tabmenu:hover li.selected a:after, #header:target .tabmenu li.selected a:after {
color: transparent
}
#header #header-bottom-right {
top: auto;
bottom: 0;
height: 80px;
padding: 0 0 0 35px;
background: none;
text-transform: uppercase;
font-size: 11px;
color: #fff
}
#header:hover #header-bottom-right:after, #header:target #header-bottom-right:after {
opacity: 0;
transition: .2s
}
#header #header-bottom-right .user, #header-bottom-right.res-userbar-toggle > .user {
margin-left: 0;
font-size: 0
}
#header-bottom-right #userbarToggle, #header-bottom-right .separator {
display: none !important
}
.res.res-accountSwitcher-dropDownStyle-alien #RESAccountSwitcherIconOverlay {
display: none !important
}
#header .beta-hint > a, #header-bottom-right .user > a, .res .res #RESAccountSwitcherIcon, #header-bottom-right #mail, #header-bottom-right #modmail, #header-bottom-right #new_modmail, .ChatApp__reddit-icon, #header-bottom-right .pref-lang, #header-bottom-right #openRESPrefs .gearIcon, #header-bottom-right .logout a, a#RESAnnouncementAlert {
display: inline-block !important;
position: relative;
top: 0 !important;
overflow: visible;
vertical-align: top;
width: 25px !important;
height: 25px;
background: url(%%spritesheet%%);
font-size: 0 !important;
transition: .2s
}
#header-bottom-right .user > a {
background-position: -40px -160px
}
#header-bottom-right #mail.nohavemail {
background-position: -40px -90px
}
#header-bottom-right #mail.havemail {
background-position: -40px -125px
}
#header-bottom-right #modmail {
background-position: -5px -55px
}
#header-bottom-right .pref-lang {
background-position: -110px -55px
}
#header-bottom-right #openRESPrefs .gearIcon {
background-position: -110px -125px
}
#header-bottom-right .logout a {
background-position: -40px -55px
}
.beta-hint, #header-bottom-right .user, #header-bottom-right .flat-list.hover, #header-bottom-right #openRESPrefs, #header-bottom-right .logout {
position: static;
display: inline-block !important;
opacity: 1;
vertical-align: top;
margin: 25px 35px 0 0;
height: auto
}
#header-bottom-right .user {
margin: 0
}
#header-bottom-right .user > a, .res .res #RESAccountSwitcherIcon, #header-bottom-right #mail, #header-bottom-right #modmail, #header-bottom-right #new_modmail, .ChatApp__reddit-icon, a#RESAnnouncementAlert {
margin: 25px 35px 0 0 !important
}
#header #header-bottom-right .beta-hint > a {
margin: 0
}
.res .res #RESAccountSwitcherIcon, #header #header-bottom-right .beta-hint > a, #header-bottom-right #new_modmail, .ChatApp__reddit-icon {
background: url(%%spritesheet2%%)
}
.res .res #RESAccountSwitcherIcon {
background-position: 0 -50px
}
#header-bottom-right #new_modmail {
background-position: 0 -100px
}
.ChatApp__reddit-icon {
background-position: 0 -150px
}
#header .beta-hint > a:before, #header-bottom-right .user > a:before, .res .res #RESAccountSwitcherIcon:before, #header-bottom-right #mail:before, #header-bottom-right #modmail:before, #header-bottom-right #new_modmail:before, .ChatApp__reddit-icon:before, #header-bottom-right .pref-lang:before, #header-bottom-right #openRESPrefs .gearIcon:before, #header-bottom-right .logout a:before, a#RESAnnouncementAlert:before {
position: absolute;
pointer-events: none;
opacity: 0;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
transform: translateX(-50%);
top: -52px;
box-shadow: 0 0 10px rgba(0, 0, 0, .5);
padding: 0 20px;
background: #fff;
white-space: nowrap;
line-height: 30px;
text-indent: 0;
font-family: inherit;
font-size: 12px;
font-weight: 400;
letter-spacing: 1px;
color: #32383f;
transition: .2s
}
#header .beta-hint > a:hover:before, #header-bottom-right .user > a:hover:before, .res .res #RESAccountSwitcherIcon:hover:before, #header-bottom-right #mail:hover:before, #header-bottom-right #modmail:hover:before, #header-bottom-right #new_modmail:hover:before, .ChatApp__reddit-icon:hover:before, #header-bottom-right .pref-lang:hover:before, #header-bottom-right #openRESPrefs .gearIcon:hover:before, #header-bottom-right .logout a:hover:before, a#RESAnnouncementAlert:hover:before {
opacity: 1;
top: -55px
}
#header .beta-hint > a:before {
content: "/r/Beta"
}
#header-bottom-right .user > a:before {
content: "User Page"
}
.res .res #RESAccountSwitcherIcon:before {
content: "Switch Accounts"
}
#header-bottom-right #mail:before {
content: "Mail"
}
#header-bottom-right #modmail:before {
content: "Mod Mail"
}
#header-bottom-right #new_modmail:before {
content: "New Mod Mail"
}
.ChatApp__reddit-icon:before {
content: "Orange Chat"
}
#header-bottom-right .pref-lang:before {
content: "Preferences"
}
#header-bottom-right #openRESPrefs .gearIcon:before {
content: "RES Settings"
}
#header-bottom-right .logout a:before {
content: "Logout"
}
a#RESAnnouncementAlert:before {
content: "RES Announcement"
}
#header .beta-hint > a:after, #header-bottom-right .user > a:after, .res .res #RESAccountSwitcherIcon:after, #header-bottom-right #mail:after, #header-bottom-right #modmail:after, #header-bottom-right #new_modmail:after, .ChatApp__reddit-icon:after, #header-bottom-right .pref-lang:after, #header-bottom-right #openRESPrefs .gearIcon:after, #header-bottom-right .logout a:after, a#RESAnnouncementAlert:after {
position: absolute;
pointer-events: none;
opacity: 0;
top: -22px;
left: calc(50% - 6px);
width: 12px;
height: 1px;
border: 6px solid transparent;
border-bottom-width: 0;
border-top-color: #fff;
content: "";
transition: .2s
}
#header .beta-hint > a:hover:after, #header-bottom-right .user > a:hover:after, .res .res #RESAccountSwitcherIcon:hover:after, #header-bottom-right #mail:hover:after, #header-bottom-right #modmail:hover:after, #header-bottom-right #new_modmail:hover:after, .ChatApp__reddit-icon:hover:after, #header-bottom-right .pref-lang:hover:after, #header-bottom-right #openRESPrefs .gearIcon:hover:after, #header-bottom-right .logout a:hover:after, a#RESAnnouncementAlert:hover:after {
opacity: 1;
top: -25px
}
a#RESAnnouncementAlert {
margin: 22.5px 35px 0 0;
width: 30px;
height: 30px;
background-position: -5px -88px
}
a#RESAnnouncementAlert > span {
font-size: 0
}
#header-bottom-right a.message-count {
position: relative;
margin: 15px 20px 0 -40px;
z-index: 1;
width: 20px;
border-radius: 50%;
text-align: center;
line-height: 20px;
font-size: 11px;
font-weight: 400;
background: #c4918a
}
#RESMainGearOverlay.RESGearOverlay, #header .gilded-icon {
display: none !important
}
.res .RESDropdownList {
margin-top: 10px !important;
width: auto;
box-shadow: 0 0 10px rgba(0, 0, 0, .5);
border: 0;
border-radius: 0;
padding: 10px;
background: #fff;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 11px
}
.res .RESDropdownList li {
height: 40px;
border-bottom: 1px solid rgba(0, 0, 0, .1);
line-height: 39px;
font-weight: 400;
color: #32383f
}
.RESDropdownList li:last-of-type {
border: 0
}
.res .RESDropdownList li:hover {
background: rgba(50, 58, 71, .1);
color: #32383f
}
.res .RESDropdownList a:hover {
background: none;
color: #32383f
}
.RESDropdownList ul > * {
padding: 0 10px
}
.res #RESSearchMenuItem {
position: static;
margin: 9px;
border: 0;
border-radius: 50%;
background-color: rgba(50, 58, 71, .1)
}
.res #RESSearchMenuItem:hover {
background-color: rgba(50, 58, 71, .2)
}
.moduleToggle::before, .toggleButton::before {
display: none
}
.res .moduleToggle .toggleOn, .res .toggleButton .toggleOn, .res .moduleToggle .toggleOff, .res .toggleButton .toggleOff {
border: 0
}
.res .moduleToggle:not(.enabled) .toggleOff, .res .toggleButton:not(.enabled) .toggleOff {
background: #c4918a
}
.res .moduleToggle.enabled .toggleOn, .res .toggleButton.enabled .toggleOn {
background: #6093c4
}
.RESDropdownList .toggleButton {
margin-right: 10px
}
.res .moduleToggle span, .res .toggleButton span {
margin-top: 0;
height: 20px;
padding: 0;
line-height: 20px
}
.side {
margin: 10px 30px 0 0;
width: 321px;
border-left: 1px solid #434b55;
padding: 10px;
background: #32383f
}
.side .spacer {
margin: 0
}
#search {
overflow: hidden;
margin-bottom: 10px;
width: 300px
}
#search input[type=text] {
width: 299px;
height: 40px;
padding: 0 38px 0 15px;
font-size: 14px;
color: #fff !important
}
#search input[type="text"]::-webkit-input-placeholder {
text-transform: capitalize;
color: #fff
}
#search input[type=submit], #search input[type=submit]:hover {
margin-left: 0;
width: 25px;
height: 25px;
background: url(%%spritesheet%%) -75px -125px;
transition: .2s
}
#search:hover input[type=submit] {
margin-left: -33px
}
#searchexpando {
margin: 0;
margin-top: 10px;
border: 0;
padding: 0;
background: none;
line-height: 25px;
text-align: center;
color: #fff
}
#searchexpando label {
position: relative;
display: inline-block;
height: 20px;
line-height: 20px
}
#searchexpando p {
margin: 0
}
label + #moresearchinfo {
border: 0
}
.sponsor-300-250 {
margin-bottom: 10px
}
.linkinfo, .login-form-side {
margin-bottom: 10px;
border: 0;
border-top: 1px solid #434b55;
border-bottom: 1px solid #434b55;
border-radius: 0;
padding: 10px;
background: none;
color: #fff
}
div.linkinfo .upvotes {
color: #ffb6af
}
div.linkinfo .downvotes {
color: #6093c4
}
.login-form-side {
font-size: 12px
}
.login-form-side input[type=text], .login-form-side input[type=password] {
margin: 0;
width: 135px
}
.login-form-side input[type=text] {
margin-right: 9px
}
.login-form-side #remember-me {
margin-left: 0
}
.sidebox.submit {
position: relative;
margin-bottom: 10px
}
.morelink, .sidecontentbox a.helplink, .account-activity-box {
height: 40px;
border: 0;
background: none !important;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 0;
font-weight: 700
}
.sidecontentbox a.helplink, .account-activity-box {
letter-spacing: 1px
}
.submit-text .morelink {
margin-top: -50px;
float: right
}
.sidebox.submit.submit-link {
margin-bottom: -50px !important
}
.sidebox.submit.submit-text {
margin-top: 60px
}
.submit-link .morelink {
margin-bottom: 60px
}
.morelink a, .sidecontentbox a.helplink, .account-activity-box a {
position: relative;
width: 145px;
height: 40px;
border: 1px solid #fff;
background: #fff;
text-align: center;
line-height: 40px;
color: #32383f;
transition: .4s;
z-index: 1
}
.account-activity-box {
margin-top: 10px
}
.account-activity-box a {
background: none;
color: #fff
}
.morelink:hover a, .morelink a:hover {
color: #32383f
}
.morelink a:hover, .sidecontentbox a.helplink:hover, .account-activity-box a:hover {
text-indent: -15px
}
.sidebox.submit.disabled .morelink a {
width: 300px
}
.sidebox.submit.disabled .morelink a:hover {
text-indent: 0
}
.sidebox .subtitle {
display: none
}
.morelink a:before {
display: inline-block;
width: 145px;
font-size: 10px;
letter-spacing: 1px
}
.submit-link .morelink a:before {
content: "submit a link"
}
.submit-text .morelink a:before {
content: "submit text"
}
.sidebox.submit.disabled .morelink a:before {
width: 300px;
content: "submissions restricted"
}
.morelink a:after, .sidecontentbox a.helplink:after, .account-activity-box a:after {
position: absolute;
top: 6px;
right: -25px;
width: 25px;
height: 25px;
background: url(%%spritesheet%%);
content: "";
transition: .4s
}
.submit-link .morelink a:after {
background-position: -75px -55px
}
.submit-text .morelink a:after {
background-position: -110px -90px
}
.sidecontentbox a.helplink:after {
background-position: -40px -90px
}
.morelink a:hover:after, .sidecontentbox a.helplink:hover:after, .account-activity-box a:hover:after {
right: 8px
}
.sidebox.submit.disabled .morelink a:hover:after {
right: -25px
}
.morelink .nub {
display: none
}
.submit .morelink:after {
position: absolute;
top: 0;
width: 144px;
height: 40px;
background: rgba(255, 255, 255, .5);
line-height: 40px;
font-size: 11px;
color: #32383f;
content: "- - -"
}
.submit-link .morelink:after {
left: 155px
}
.submit-text .morelink:after {
left: -154px
}
.side .titlebox {
border-top: 1px solid #434b55;
color: #999
}
.side h1.redditname {
margin-bottom: 10px;
width: 100%;
height: 50px;
border-bottom: 1px solid #434b55
}
.titlebox h1 a {
color: inherit
}
.side h1.redditname a {
display: inline-block;
line-height: 49px;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 14px;
font-weight: 700;
color: #fff
}
.side .fancy-toggle-button {
display: block;
margin: 0
}
.side .fancy-toggle-button a.option.active {
position: relative;
float: right;
margin-top: -50px;
font-size: 0;
z-index: 1;
transition: .2s
}
.side .fancy-toggle-button a.option.active, #authorInfoToolTip .fancy-toggle-button a.option.active, .fancy-toggle-button .add.active, .res #RESHoverInfoSubscriptionButton {
display: inline-block;
vertical-align: middle;
border: 0;
border-radius: 0;
width: auto;
height: 30px;
padding: 0 10px;
background: #c4918a;
line-height: 30px;
text-transform: uppercase
}
#authorInfoToolTip .fancy-toggle-button {
margin-bottom: 0
}
.side .fancy-toggle-button a.option:after {
letter-spacing: 1px;
font-size: 10px;
content: "subscribe"
}
.side .fancy-toggle-button a.option:before {
display: inline-block;
letter-spacing: 1px;
font-size: 10px;
content: "un";
margin-right: 0
}
.side .fancy-toggle-button a.option.add:before {
margin-right: -15px;
opacity: 0
}
.side .fancy-toggle-button a.option.add:active:before {
-webkit-animation: remove 10s linear;
-moz-animation: remove 10s linear;
animation: remove 10s linear
}
@-webkit-keyframes remove {
0% {
opacity: 0
}
1% {
margin-right: 8px
}
2% {
margin-right: 0;
opacity: 1
}
100% {
margin-right: 0;
opacity: 1
}
}
@-moz-keyframes remove {
0% {
opacity: 0
}
1% {
margin-right: 8px
}
2% {
margin-right: 0;
opacity: 1
}
100% {
margin-right: 0;
opacity: 1
}
}
@keyframes remove {
0% {
opacity: 0
}
1% {
margin-right: 8px
}
2% {
margin-right: 0;
opacity: 1
}
100% {
margin-right: 0;
opacity: 1
}
}
.res .side .fancy-toggle-button a.option.active {
margin-top: -83px
}
.fancy-toggle-button a.option.active.remove, .res .res-fancy-toggle-button.remove, .res .RESFilterToggle.remove {
background: #434b55 !important
}
.hover-bubble {
border: 1px solid #434b55;
background: #32383f;
color: #fff
}
.hover-bubble.multi-selector {
margin-top: -120px
}
.hover-bubble.multi-selector strong {
color: #fff
}
.hover-bubble.multi-selector label:hover, .drop-choices a.choice:hover {
background: #434b55
}
.hover-bubble.multi-selector label a {
margin-top: 3px;
border: 0;
background: none
}
.hover-bubble.anchor-right:before {
border-left-color: #434b55
}
.hover-bubble.anchor-right:after {
border-left-color: #32383f
}
.hover-bubble.anchor-top:before {
border-bottom-color: #434b55
}
.hover-bubble.anchor-top:after {
border-bottom-color: #32383f
}
.side .titlebox h1.redditname + div {
padding: 5px 0;
text-transform: lowercase
}
.res .RESshortcutside {
margin-right: 10px;
margin-bottom: 5px
}
.res .res .RESshortcutside, .res .res .RESDashboardToggle, .RESHoverBody #subTooltipButtons .res-fancy-toggle-button, .res #subTooltipButtons .RESFilterToggle {
width: auto;
border: 0;
padding: 0;
background: none !important;
text-transform: lowercase;
font-size: 12px;
font-weight: 400;
color: #999
}
.side .subscribers {
display: inline-block;
margin-top: 5px;
margin-right: 10px
}
.side .users-online {
display: inline-block
}
.side .users-online:before {
display: none
}
.leavemoderator, .toggle.leavecontributor-button {
display: none
}
.titlebox form.toggle {
padding: 5px 0;
background: none;
text-transform: lowercase;
font-size: 12px;
color: #999
}
.titlebox .tagline {
margin-left: 0;
color: #999
}
.titlebox .tagline a {
color: #999
}
.side .flairselector.drop-choices.active {
position: static;
margin-top: 10px;
box-shadow: none;
width: 300px !important;
border: 0;
border-top: 1px solid #434b55;
padding-top: 0 !important;
padding-bottom: 0 !important
}
.flairselector .flairthrobber {
margin-top: 5px
}
.flairselector h2 {
margin-bottom: 10px;
background: none
}
.side .flairselector h2 {
text-align: left
}
.flairselector .error {
text-align: left
}
.flairoptionpane {
margin-bottom: 10px;
text-align: left
}
.content .flairselector ul {
width: 100% !important;
max-width: none;
padding: 6px
}
.content .flairselector .linkflair {
text-align: center
}
.flairselector li, body .entry .buttons .flairselector li, .flairselector li:hover, .flairselector li.selected {
border: 0;
padding: 5px
}
.flairselector li:hover {
background: #434b55
}
.flairoptionpane a.title, .flairselector li a.author {
display: none
}
.flair, .linkflairlabel {
vertical-align: middle;
margin: 0 6px;
max-width: none;
border: 0;
border-radius: 0;
padding: 1px 6px;
background: #383F47;
color: #fff
}
.flair {
font-size: 11px !important
}
.linkflairlabel {
font-size: 14px;
font-weight: 700
}
.flair-red, .flair-green, .flair-blue {
padding: 0;
padding-right: 6px
}
.flair-red, .linkflair-red .title > .linkflairlabel, .flairselector .linkflair-red > .linkflairlabel {
background: #c4918a
}
.flair-green, .linkflair-green .title > .linkflairlabel, .flairselector .linkflair-green > .linkflairlabel {
background: #61c095
}
.flair-blue, .linkflair-blue .title > .linkflairlabel, .flairselector .linkflair-blue > .linkflairlabel {
background: #6093c4
}
.flair-red:before, .flair-green:before, .flair-blue:before {
display: inline-block;
margin-right: 6px;
padding: 1px 6px;
background: rgba(0, 0, 0, .4)
}
.flair-red:before {
content: "Red flair"
}
.flair-green:before {
content: "Green flair"
}
.flair-blue:before {
content: "Blue flair"
}
.flairselector form {
border-top: 1px solid #434b55
}
.side .usertext {
margin-top: 10px;
border-top: 1px solid #434b55;
font-size: 12px;
color: #fff
}
.titlebox .bottom {
border-top: 1px solid #434b55;
border-bottom: 1px solid #434b55;
padding: 6px 0;
font-size: 12px;
color: #999
}
.titlebox .age {
display: block;
margin-top: 5px;
float: none
}
.sidecontentbox .collapse-button, .icon-menu a:before, img.tb-moderation-tools-icons {
display: none !important
}
.icon-menu a {
background: none
}
.sidecontentbox {
border-bottom: 1px solid #434b55
}
.sidecontentbox .content {
border: 0;
padding: 0;
padding-bottom: 10px
}
#moderation_tools {
margin-bottom: 10px
}
body span.score {
color: #fff
}
.sidebox.create {
margin-bottom: 10px
}
.sidebox.create .morelink, .sidecontentbox a.helplink, .account-activity-box {
font-size: 10px
}
.sidebox.create .morelink a, .sidecontentbox a.helplink, .account-activity-box a {
width: 300px
}
.sidecontentbox a.helplink {
float: none;
margin: 0;
margin-bottom: 10px;
color: #fff
}
.sidebox.create .morelink a:after {
background-position: -75px -90px
}
.sidebox.create .morelink + .spacer {
display: none
}
.sidecontentbox a.helplink, .account-activity-box a {
display: inline-block;
overflow: hidden
}
.account-activity-box a:after {
background-position: -5px -160px
}
.side:after {
display: block;
margin-top: 10px;
border-top: 1px solid #434b55;
padding-top: 10px;
font-size: 12px;
color: #999;
content: "subreddit theme: /r/Apicem by /u/Cereal_Addict"
}
.error {
font-size: 12px !important;
color: #c4918a !important
}
.morechildren .entry a.button[style*="color: red"] {
color: #c4918a !important
}
.buttons li .error {
font-size: 11px !important
}
body > .content, .res.res-commentBoxes body > .content, .modtools-page > div.content {
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-webkit-order: -1;
-ms-flex-order: -1;
order: -1;
margin: 0 0 0 30px;
width: calc(100% - 381px);
padding: 0 10px !important;
background: #32383f;
color: #fff
}
body > .content > .content {
margin: 0
}
:not(.side) + a[name=content] + .content {
margin-right: 30px
}
body > .content:before, .reddit-infobar {
display: block;
overflow: hidden;
margin-top: 0;
height: 45px;
border: 0;
line-height: 45px;
white-space: nowrap;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1px;
color: #fff;
content: ""
}
body > .content > .spacer:nth-of-type(1) {
display: none
}
body > .content:before {
height: 10px;
padding: 0 20px;
background: url(%%overlay%%), linear-gradient(45deg, #c4918a 20%, #6093c4 80%);
margin-left: -10px;
margin-right: -331px
}
:not(.side) + a[name=content] + .content:before {
margin-right: -10px
}
.reddit-infobar {
margin-bottom: -1px;
border-bottom: 1px solid #434b55;
padding: 0 10px;
background: none
}
.reddit-infobar .md {
display: inline-block;
margin: auto 0;
color: #fff
}
.reddit-infobar.md-container-small .md p {
font-size: 11px
}
.content .spacer {
margin: 0
}
#siteTable_organic.organic-listing {
border: 0;
border-bottom: 1px solid #434b55;
background: none !important
}
.link, .link.last-clicked {
overflow: visible;
margin: 0;
padding: 10px 0;
border: 0;
border-top: 1px solid #434b55;
vertical-align: top
}
.link .rank {
display: none
}
body > .content .link.thing .midcol {
margin-top: 0;
margin-left: -3px;
width: 35px
}
.comment .midcol {
width: 35px
}
.gadget .midcol {
width: 35px
}
.arrow {
width: 25px;
height: 25px;
background: url(%%spritesheet%%) !important
}
.arrow.up {
background-position: -145px -115px !important
}
.arrow.upmod {
background-position: -110px -160px !important
}
.arrow.down {
background-position: -180px -115px !important
}
.arrow.downmod {
background-position: -75px -160px !important
}
.link .score {
width: 35px
}
.link .score.likes {
color: #c4918a
}
.link .score.dislikes {
color: #6093c4
}
.thumbnail {
position: relative
}
.thumbnail, .thumbnail.self, .search-result.has-thumbnail > .thumbnail, .link .entry:before {
-webkit-flex: none;
flex: none;
margin: 0;
width: 80px;
height: 80px !important
}
.search-result.has-thumbnail > .thumbnail {
margin-right: 10px
}
.link .thumbnail img {
width: auto !important;
height: 80px !important
}
.thumbnail:after {
position: absolute;
top: 30px;
left: 0;
width: 80px;
height: 20px;
line-height: 20px;
text-align: center;
text-transform: uppercase;
font-size: 11px;
font-weight: 700;
color: rgba(0, 0, 0, .4);
pointer-events: none
}
a.thumbnail[href*="reddit.com"] {
background: #6093c4
}
.thing.stickied .thumbnail, .link.stickied :not(.thumbnail) + .entry:before {
background: #61c095
}
.thumbnail.self, .link :not(.thumbnail) + .entry:before, .thumbnail.default {
background: #434b55
}
.over18 .thumbnail.nsfw {
background: #c4918a
}
body:not(.comments-page) .link :not(.thumbnail) + .entry:before {
position: absolute;
top: 0;
left: -90px;
line-height: 80px;
text-align: center;
text-transform: uppercase;
font-size: 25px;
font-weight: 700;
color: rgba(0, 0, 0, .4);
pointer-events: none;
content: "•••"
}
.thumbnail.default:after {
font-size: 25px;
content: "•••"
}
.link a.thumbnail[href*="reddit.com"]:after {
font-size: 11px;
content: "reddit"
}
body .self.thumbnail:after {
content: "self" !important
}
.link.over18 a.thumbnail:after {
content: "nsfw" !important
}
.link.thing.stickied .thumbnail:after {
content: "stickied" !important
}
.self .thumbnail img, .thing.stickied .thumbnail img, .comments-page .thing.stickied .thumbnail, .comments-page .thumbnail.self, .comments-page .over18 .thumbnail, a.thumbnail[href*="reddit.com"] img {
display: none
}
.link .entry {
position: relative;
overflow: visible;
margin-left: 130px;
min-height: 80px;
padding: 10px
}
.comments-page .link.self .entry, .comments-page .link.over18 .entry {
margin-left: 39px
}
.res .RES-keyNav-activeElement, .subreddit-rule-item:hover {
background-color: #434b55 !important
}
.res .commentarea .RES-keyNav-activeElement .md, .res .RES-keyNav-activeElement .md-container {
background-color: transparent !important
}
.thing p.title {
margin-bottom: 7px
}
.thing a.title, .search-result-header > a {
margin: 0;
font-size: 14px;
font-weight: 700;
color: #fff
}
.spam .domain, .spam .domain a {
color: #999
}
.thing a.title:hover {
color: #c4918a
}
.thing.stickied.link a.title, .tagline .stickied-tagline, .stickied.link .entry .buttons li a:hover, .stickied.link .redditSingleClick:hover, .stickied.link .entry .buttons li a.comments {
color: #61c095
}
.thing a.title:visited, .thing.visited a.title, .thing .title.visited, .search-result :visited, .search-result :visited > mark, .search-result.visited .search-title, .search-result.visited .search-link, .search-result.visited .search-title > mark, .search-result.visited .search-link > mark {
color: #999 !important
}
body.mod-toolbox .tb-general-button, body.mod-toolbox li a.tb-general-button, body.mod-toolbox .tb-bracket-button {
border: 0;
padding: 3px;
background: #383F47
}
.md h1:after {
display: block;
margin: 7px 0;
width: 50px;
height: 1px;
background: #fff;
content: "";
transition: .2s
}
.title + .expando-button + .expando-button {
display: none
}
html body .content .expando-button {
position: relative;
margin-right: 4px;
width: 28px;
height: 28px;
max-width: none;
max-height: none;
border: 0;
border-radius: 20px;
background: rgba(0, 0, 0, .3) !important;
transition: .2s
}
.usertext-body .md .expando-button, .wiki-page .expando-button, .messages-page .expando-button {
margin-top: 0;
margin-bottom: 0;
vertical-align: middle !important
}
.expando-button:before, .res-highlight-nsfw-expando .thing.over18 .expando-button:before, .res.res-showImages-highlightNSFWButton .thing.over18 .expando-button:before, .expando-button:after {
position: absolute;
left: 8px;
top: 13.5px;
width: 12px;
height: 1px;
background: #fff;
content: "";
transition: .3s
}
.expando-button:after {
transform: rotate(90deg)
}
.expando-button.expanded:before {
transform: rotate(180deg)
}
html body .expando-button.expanded:after {
transform: rotate(180deg)
}
.link.self .entry > .expando-button.collapsed:after {
top: 10px;
height: 9px;
border: 1px solid #fff;
border-left: 0;
border-right: 0;
background: none;
transform: rotate(0)
}
.link.self .entry > .expando-button.expanded:after {
top: 14px;
height: 0;
border: 0
}
.nsfw-stamp {
border: 0;
font-weight: 700;
color: #c4918a
}
.link .entry .tagline, .tagline a, .entry .buttons li a, .entry .buttons li a.nonbutton, .link .redditSingleClick {
font-size: 11px;
font-weight: 400;
letter-spacing: 0;
color: #999
}
.stamp {
border-radius: 0
}
.entry .buttons li.reported-stamp, ul.report-reasons {
border: 0 !important;
color: #000
}
a.pretty-button {
border: 0;
border-radius: 0;
padding: 0 6px;
line-height: 1.6em;
color: #fff
}
.pretty-button.negative {
background: #c4918a
}
.pretty-button.neutral {
background: none;
border: 1px solid rgba(255, 255, 255, .1)
}
.pretty-button.positive {
background: #61c095
}
body .content a.pretty-button.pressed {
background: #21252a
}
a.pretty-button + li {
margin-left: 5px
}
ul.report-reasons {
width: 100%
}
.rounded {
border-radius: 0
}
body .thing .tagline .author.moderator, body .thing .tagline .author.submitter, body .thing .tagline .author.friend, body .thing .tagline .author.admin, .tagline .userattrs a {
display: inline-block;
margin: 0 5px;
border-radius: 0;
padding: 1px 6px;
font-weight: 400;
color: #fff !important
}
body .thing .tagline .author.submitter, body .thing .tagline .author.submitter:hover, .tagline .userattrs a.submitter {
background-color: #6093c4 !important
}
body .thing .tagline .author.moderator, body .thing .tagline .author.moderator:hover, .tagline .userattrs a.moderator {
background-color: #61c095 !important
}
body .thing .tagline .author.admin, body .thing .tagline .author.admin:hover, .tagline .userattrs a.admin {
background-color: #c4918a !important
}
.res .RESUserTagImage {
margin-right: 5px;
border: 0;
background: none
}
.res .RESUserTagImage::after {
display: inline-block;
vertical-align: middle;
width: 19px;
height: 16px;
background: url(%%spritesheet%%) -4px -95px/158px 225px;
content: ""
}
.res a.voteWeight {
background: none !important;
color: #fff
}
.tagline .userattrs a.moderator:hover:after {
content: "oderator, speaking officially"
}
.tagline .userattrs a.submitter:hover:after {
content: "ubmitter"
}
.tagline .userattrs a.admin:hover:after {
content: "dmin, speaking officially"
}
.tagline .userattrs {
font-size: 0
}
.tagline .userattrs a {
color: #fff
}
.link .entry .buttons li a:hover, .link .redditSingleClick:hover {
color: #c4918a
}
.link .entry .buttons li a.comments {
font-weight: 700;
color: #c4918a
}
span.newComments, form.state-button.approve-button {
font-size: 11px;
color: #999
}
.expando + ul.flat-list.buttons {
margin-top: 10px
}
.link .expando {
margin-bottom: 0
}
.link .usertext-body .md {
margin-bottom: 0;
border: 0;
border-radius: 0;
padding: 10px;
background: #32383f
}
.nav-buttons {
border-top: 1px solid #434b55;
padding: 10px 0;
font-size: 0
}
.nextprev a, .next-suggestions a {
display: inline-block;
margin-right: 10px;
border: 0;
border-radius: 0;
padding: 10px;
background: #fff;
text-transform: uppercase;
font-size: 11px;
color: #32383f;
transition: .2s
}
.nextprev a:hover, .next-suggestions a:hover {
border: 0;
background: rgba(255, 255, 255, .8)
}
.res #progressIndicator, .res .NERPageMarker {
margin: 0;
width: 100%;
height: auto;
border: 0;
border-top: 1px solid #434b55;
border-radius: 0;
padding: 10px;
background: none;
color: #fff
}
.res #progressIndicator p.NERWidgetText {
margin: 8px
}
.res #NERFail {
width: 100%;
border: 0
}
#NERFail .nextprev {
margin-bottom: 10px
}
#NERFail .nextprev a, .next-suggestions a {
display: inline-block;
border: 0;
border-radius: 0;
padding: 5px;
background: #c4918a;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 12px
}
.footer-parent {
margin-top: 30px
}
.footer-parent, .footer-parent ~ .debuginfo {
width: 100%;
background: rgba(36, 42, 48, 0.9)
}
.footer, .footer .col {
border: 0
}
.footer {
display: inline-block;
max-width: none
}
.footer .col {
padding: 0 50px
}
.footer .flat-vert.title {
letter-spacing: 2px;
text-transform: uppercase;
font-size: 14px;
font-weight: 700;
color: #fff
}
.footer .col li {
padding: 5px;
font-size: 12px
}
.footer-parent p.bottommenu {
text-transform: uppercase;
letter-spacing: 2px;
font-size: 10px;
opacity: .4;
color: #fff
}
.footer-parent p.bottommenu:nth-of-type(1) {
border-top: solid 1px #434b55;
padding-top: 25px;
padding-bottom: 25px
}
.bottommenu a, .bottommenu .updated {
border-bottom: 1px dotted #fff;
color: #fff
}
.footer-parent + img#hsts_pixel {
display: none
}
.md {
color: #fff
}
h1, h2, h3, h4, h5, h6 {
margin: 10px 0;
letter-spacing: 2px;
text-transform: uppercase;
font-size: 11px !important;
font-weight: 700 !important;
color: #fff !important
}
.res .RESNotificationHeader h3 {
margin-top: 0;
padding-top: 0
}
.res .RESNotificationHeader h3 .gearIcon {
display: inline-block;
margin-top: 12.5px;
height: 15px;
line-height: 15px
}
.res .RESNotificationHeader h3 + .RESCloseButton {
top: 0;
margin-top: 10px
}
.res .RESNotificationContent {
padding-bottom: 10px
}
.md h1 {
font-size: 17px !important
}
h2, .sidecontentbox .title h1 {
margin: 10px 0;
font-size: 14px !important
}
.sidecontentbox .title h1 {
display: inline-block
}
.sidecontentbox a.helplink + .title {
border-top: 1px solid #434b55
}
.md del {
text-decoration: line-through !important;
color: #999
}
.new-comment .md :not(pre) > code, .link .md :not(pre) > code, .usertext.border .md :not(pre) > code, .new-comment .md pre, .link .md pre, .usertext.border .md pre, .md code, .md pre {
border: 0;
padding: 5px;
background: #383F47;
font-family: "Courier New", monospace
}
.md a, .search-result .search-result-body :link, .search-result .search-result-body :link > mark {
border-bottom: dotted 1px rgba(255, 255, 255, 0.35);
color: #fff;
transition: .2s
}
.md a:hover {
border-bottom-color: transparent;
color: #ffb6af
}
body .comment .md p > a:visited, body h2 a:visited {
color: #999
}
.md hr, .content hr {
height: 1px;
border: 0;
background: #434b55
}
.md blockquote {
border-left: solid 4px #434b55;
padding: 10px;
padding-left: 30px;
font-style: italic;
color: #fff
}
.md a[href="#bigbutton"] + a, .md a[href="#button"] + a, .md a[href="#specialbutton"] + a, .md a[href="#bigspecialbutton"] + a {
display: inline-block;
margin: 10px;
border: 1px solid #fff;
padding: 10px 20px;
letter-spacing: 1px;
text-align: center;
text-transform: uppercase;
font-size: 10px;
font-weight: 700
}
.md a[href="#bigbutton"] + a, .md a[href="#button"] + a {
color: #fff !important
}
.md a[href="#bigbutton"] + a:hover, .md a[href="#button"] + a:hover {
background-color: rgba(255, 255, 255, 0.1)
}
.md a[href="#specialbutton"] + a, .md a[href="#bigspecialbutton"] + a {
background: #fff;
color: #32383f !important
}
.md a[href="#specialbutton"] + a:hover, .md a[href="#bigspecialbutton"] + a:hover {
border: 1px solid transparent;
background-color: rgba(255, 255, 255, 0.8)
}
.side .md a[href="#button"] + a, .side .md a[href="#specialbutton"] + a {
margin: 5px 0;
width: 145px;
padding: 11.5px 10px
}
.side .md a[href="#rightalign"] + a[href="#button"] + a, .side .md a[href="#rightalign"] + a[href="#specialbutton"] + a {
margin-left: 10px
}
.side .md a[href="#bigbutton"] + a, .side .md a[href="#bigspecialbutton"] + a {
margin: 5px 0;
width: 300px;
padding: 11.5px 10px
}
.md table tr {
border-bottom: 1px solid #434b55
}
.md table tr:nth-of-type(odd) {
background: #383F47
}
.md table thead tr {
background: none !important
}
.md table th, .md table td {
border: 0;
padding: 10px
}
.md a[href$="/spoiler"], .md a[href$="#spoiler"], .md a[href$="/s"], .md a[href$="#s"] {
border: 0;
padding: 0 5px;
background: #262b31 !important;
color: #262b31 !important
}
.md a[href$="/spoiler"]:hover, .md a[href$="#spoiler"]:hover, .md a[href$="/s"]:hover, .md a[href$="#s"]:hover {
color: #fff !important
}
.wiki-page > .content[role="main"] > span {
display: block;
margin-top: 10px
}
.wiki-page .wikititle {
display: inline-block;
margin-left: 10px
}
.wiki-page .wiki-page-content {
display: block;
margin: 10px
}
.res.wiki-page .RESBigEditorPop {
margin-right: 0
}
.wiki-page .pageactions {
border: 0
}
.wiki-page .pageactions .wikiaction {
border-radius: 0
}
.wiki-page .pageactions .wikiaction-current, .wiki-page .pageactions .wikiaction:hover {
background: #434b55
}
.wiki-page .wiki-page-content .wiki > .toc > ul {
border: 1px solid #434b55
}
.search-page #header .tabmenu {
box-shadow: none;
min-width: 0;
padding-top: 0;
background: none
}
.search-page #header .tabmenu li {
padding-bottom: 0;
background: none;
opacity: 1
}
.search-page #header .tabmenu li a {
height: 60px;
border: 0;
background: none;
line-height: 60px;
color: #fff
}
.searchpane {
margin: 0;
border: 0;
border-bottom: 1px solid #434b55;
padding: 0;
padding-bottom: 10px;
background: none
}
.searchfacets {
margin: 0;
box-shadow: none;
border: 0;
border-bottom: 1px solid #434b55;
background: none
}
.search-page .content > .sitetable > .link:nth-of-type(1) {
border-top: 0
}
.search-page #search {
width: auto
}
button.search-submit-button.c-btn.c-btn-primary {
height: 40px;
border: 0;
border-radius: 0;
background: #c4918a
}
.search-result-group {
max-width: none
}
.search-result-group-header {
border-bottom: 1px solid #434b55
}
.search-expando.collapsed:before {
display: none
}
.search-result :link, .search-result :link > mark {
color: #fff
}
.archived-infobar.with-icon:before {
background-color: transparent
}
.panestack-title {
border-top: 1px solid #434b55
}
.panestack-title, .menuarea {
vertical-align: middle;
margin: 0;
padding: 9.5px;
border-bottom: 1px solid #434b55;
color: #fff
}
.panestack-title a.title-button.gold {
border: 0;
background: none;
color: #cd9930
}
.commentarea .menuarea {
margin-top: 10px;
margin-right: 0
}
.commentarea .menuarea, .commentarea .menuarea .toggle a {
font-size: 12px;
font-weight: 400;
color: #fff
}
.dropdown.lightdrop .selected {
background: none;
text-transform: uppercase;
font-size: 9px;
font-weight: 400;
color: #fff
}
.dropdown.lightdrop .selected:after {
content: " ▾"
}
.res .RESSubscriptionButton, .res .RESSubscriptionButton:hover {
width: auto;
border: 0;
border-radius: 0;
padding: 5px;
background: #c4918a;
text-transform: uppercase;
color: #fff
}
.res .RESSubscriptionButton.unsubscribe {
background: #434b55;
color: #fff
}
.commentarea .commentNavSortType {
margin-right: 8px;
font-weight: 400
}
.commentarea .commentNavSortType + .commentNavSortType {
border: 0;
padding: 0;
margin: 0;
margin-right: 8px
}
#REScommentNavToggle span:not(:first-of-type) {
display: none
}
.gold-accent, .gold-accent.comment-visits-box {
border: 0;
background: none;
color: #cd9930
}
.new-comment .usertext-body, .usertext.border .usertext-body {
border: 0;
background: #434b55
}
.infobar {
margin-right: 0;
border: 0 !important;
padding: 5px 0;
background: none !important
}
.res.res-commentBoxes.res-commentBoxes-rounded .comment {
border-radius: 0 !important
}
.commentarea > .sitetable > .comment {
margin-left: 0 !important;
margin-right: 0 !important
}
.res.res-commentBoxes .comment, .comment {
overflow: hidden;
margin-bottom: 0 !important;
border: 1px solid #434b55 !important;
border-right: 0 !important;
border-bottom: 0 !important;
padding: 0 !important;
padding-top: 8px !important
}
.res.res-commentBoxes .comment .comment, .res.res-commentBoxes .comment .comment .comment, .res.res-commentBoxes .comment .comment .comment .comment, .res.res-commentBoxes .comment .comment .comment .comment .comment, .res.res-commentBoxes .comment .comment .comment .comment .comment .comment, .res.res-commentBoxes .comment .comment .comment .comment .comment .comment .comment, .res.res-commentBoxes .comment .comment .comment .comment .comment .comment .comment .comment, .res.res-commentBoxes .comment .comment .comment .comment .comment .comment .comment .comment .comment, .res.res-commentBoxes .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
background: none !important
}
.comment .midcol {
margin-right: 0
}
.comment .entry {
padding: 5px
}
.morechildren, .deleted.comment {
margin-left: 10px;
border: 1px solid #434b55;
border-right: 0;
border-bottom: 0;
padding-bottom: 8px
}
.commentarea > .sitetable > .morechildren {
margin-left: 0;
padding: 8px;
padding-right: 0
}
.commentarea > .sitetable > .morechildren > .entry {
padding: 5px
}
.comment .morechildren > .entry {
margin: 8px 0 0 8px
}
.comment .morechildren > .child {
margin-top: 0
}
.collapsed .midcol {
display: none
}
.morecomments a, .deepthread a {
font-size: 11px !important;
font-weight: 400 !important;
color: #999 !important
}
.deepthread:after {
display: none
}
.deleted.comment > .entry, .collapsed .entry {
margin: 0 0 8px 8px
}
.noncollapsed.morerecursion .entry {
margin-left: -7px;
margin-bottom: 8px
}
.deleted.comment > .entry > .tagline {
font-size: 11px
}
.comment.collapsed .tagline :not(.expand), .comment.collapsed .tagline a :not(.expand), .comment.collapsed .search-result-meta :not(.expand), .comment.collapsed .search-result-meta a :not(.expand) {
font-style: normal
}
.comment.deleted > .midcol {
display: none
}
.comment .child, .comment .showreplies {
border: 0
}
.sitetable > .thing.noncollapsed.morerecursion > .child {
margin-top: 0
}
#noresults {
padding: 10px 10px 10px 0
}
.usertext.grayed .usertext-body {
background: none
}
.submit-page .content > h1 {
margin-top: 15px;
margin-left: 10px
}
.formtabs-content {
width: auto;
border: 0
}
.content ul.tabmenu.formtab li a {
margin-right: 10px;
border: 0;
padding: 0;
background: none;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 11px;
font-weight: 700
}
.tabmenu.formtab .selected a {
color: #c4918a
}
.formtabs-content .infobar, .content.submit .info-notice {
border: 0;
margin-left: 5px;
background: none;
font-size: 12px
}
.roundfield, .linefield, .linefield.mobile, .linefield .usertext-edit {
width: auto;
border: 0;
background: none;
color: #fff
}
.roundfield span.title, .linefield .title {
text-transform: uppercase;
letter-spacing: 1px;
font-size: 11px;
font-weight: 700;
color: #fff
}
#newlink-with-image-upload div#new-link-preview, #newlink-with-image-upload span.clear-input-button {
background: #434b55
}
#newlink-with-image-upload div#suggest-title {
position: static;
display: inline-block;
margin-bottom: 5px
}
#newlink-with-image-upload div#new-link-preview {
position: relative;
z-index: 1;
margin-top: -2px
}
#newlink-with-image-upload div#new-link-preview:before {
position: absolute;
top: -25px;
left: calc(50% - 12.5px);
width: 25px;
height: 25px;
border: 12.5px solid transparent;
border-bottom-color: #434b55;
content: ""
}
div#newlink-with-image-upload .image-upload-drop-target {
background: none
}
.roundfield .usertext-edit {
width: 100%
}
.roundfield .usertext-edit .md {
max-width: none
}
.roundfield textarea, .roundfield input[type=text], .roundfield input[type=url] {
width: 100%
}
.roundfield label {
font-size: 12px
}
.submit-page button[type="submit"] {
margin-left: 10px
}
.linefield textarea, .linefield input[type=text] {
width: 100%
}
.linefield .md {
max-width: none
}
.gray {
color: #999
}
.linefield .title + .gray, .linefield span {
font-size: 11px
}
body .markdownEditor-wrapper {
width: 100%
}
.commentingAs {
color: #fff
}
body .markdownEditor .edit-btn:not(.btn-macro) {
border: 0;
background-color: #434b55;
background-image: url(%%editbuttons%%)
}
a.edit-btn {
vertical-align: bottom
}
.help-toggle.toggle .option.active {
display: inline-block
}
.usertext .help-toggle, .usertext .help-toggle a, .usertext a.reddiquette {
margin-left: 0;
border-right: 0 !important
}
body:not(.res) .usertext .help-toggle a {
border-right: 1px solid #fff !important
}
.content button.RESBigEditorPop {
margin-top: 5px;
margin-left: 0;
border-color: #fff;
padding: 5px 10px;
background: none;
text-indent: 0;
color: #fff
}
div.BEFoot button {
margin-right: 10px
}
.RESDialogSmall.livePreview {
margin-top: 15px
}
.res .RESDialogSmall {
border: 1px solid #434b55;
border-radius: 0
}
.res .RESDialogSmall > h3, .res .RESNotificationHeader, .res #RESConsoleTopBar.RESDialogTopBar {
margin-bottom: 0;
height: 40px;
border-bottom: 1px solid #434b55;
padding-top: 0;
padding-bottom: 0;
line-height: 40px;
background: #434b55
}
.res #RESConsoleTopBar.RESDialogTopBar {
height: 50px
}
body .livePreview .md {
margin: 0;
padding-top: 10px;
background: repeating-linear-gradient(-45deg, #32383f, #32383f 40px, #2e333a 40px, #2e333a 80px)
}
body .viewSource textarea[readonly] {
background: repeating-linear-gradient(-45deg, #32383f, #32383f 40px, #2e333a 40px, #2e333a 80px)
}
.pretty-form .save-button button, .submit.content button[type="submit"] {
margin-bottom: 15px
}
#subreddit_stylesheet > .sheets:before {
display: block;
margin-bottom: 20px;
font-size: 12px;
color: #999;
content: "Thanks for choosing Apicem! Visit /r/Apicem to leave feedback and check for updates."
}
.res #RESStyleSheetTipPane {
margin-top: 20px;
margin-bottom: 20px;
width: 100%;
border: 0;
color: #999
}
.res #RESStyleSheetTipPane * {
border: 0;
padding: 0
}
.res #RESStyleSheetTipPane-header, .res #RESStyleSheetTipPane-header span.details {
font-size: 11px;
letter-spacing: 1px
}
.res #RESStyleSheetTipPane .RESCloseButton {
position: static;
display: inline-block;
margin-left: 20px
}
.res .RESCloseButton {
width: 20px;
height: 20px;
border: 0;
border-radius: 50%;
background: #383F47;
line-height: 20px;
color: #fff
}
.res .RESCloseButton:hover {
border: 0;
background: #434b55
}
.sheets {
margin-right: 0
}
.stylesheet-customize-container #images {
color: #fff
}
form#image-upload.image-upload {
font-size: 12px
}
.image-upload span {
padding: 0
}
ul.image-preview-list.image-list {
margin: 10px -0 30px;
width: 100%;
padding-bottom: 10px
}
ul.image-preview-list li {
display: inline-block;
float: none;
margin: 0;
width: 50%;
height: auto;
border-top: 1px solid #434b55;
padding: 10px;
background: #32383f
}
ul.image-preview-list li:nth-of-type(even) {
border-right: 1px solid #434b55
}
ul.image-preview-list li:nth-of-type(odd) {
margin-left: -1px;
border-left: 1px solid #434b55
}
ul.image-preview-list .description pre {
color: #fff
}
.subreddit-rules-page:before {
display: none
}
.subreddit-rules-page {
padding-left: 0;
padding-bottom: 10px
}
.subreddit-rule-form .c-form-group .label.required:after {
color: #fff
}
.subreddit-rule-form .form-buttons > button {
margin-bottom: 12px
}
.subreddit-rule-item {
margin-left: 0
}
.subreddit-rules-page .md-container .md .subreddit-rule-description {
color: #999
}
.messages-page > .content {
color: #fff
}
.message .subject .correspondent {
border: 0;
border-radius: 0;
padding: 5px 8px;
background: #434b55
}
.flat-list li.selected a {
color: #c4918a
}
.message .tagline, .message.message-parent > .entry, .message.message-reply > .entry {
color: #61c095
}
.message.recipient > .entry {
color: #fff
}
.message.message-reply.recipient > .entry .head, .message.message-parent.recipient > .entry .head {
color: #999
}
.message.threaded .child {
border-left: 1px dashed #434b55
}
.thing.spam {
border-left: 3px solid #c4918a;
background: none
}
.message.new > .entry {
border: 0;
background: #434b55
}
.flair-settings + .tabmenu {
font-size: 12px
}
.flair-settings + .tabmenu li {
font-weight: 400
}
.flair-settings + .tabmenu li a {
background: none
}
.flair-settings + .tabmenu li.selected a {
border: 0;
color: #ffb6af
}
.tabpane-content {
border: 0
}
.flair-jump button {
vertical-align: top;
margin-left: 10px
}
.usertable > .toggle {
border: 0;
background: none
}
.usertable > .toggle .togglebutton, .usertable > .toggle .error {
margin: 0;
border: 0;
padding: 0
}
.res #RESShortcutsAddFormContainer {
top: 30px;
box-shadow: 0 0 10px rgba(0, 0, 0, .5);
border: 0;
border-radius: 0;
background: #32383f;
color: #fff
}
.res #addSubreddit {
border-radius: 0;
background: none
}
.res .res #authorInfoToolTip:before, .res .res #authorInfoToolTip:after {
border-color: transparent #434b55
}
.res .RESDialogSmall .RESDialogContents {
padding-top: 12px
}
.res .res #RESHoverContainer:before, .res .RESHoverInfoCard:before {
border-color: transparent #434b55
}
.res .res #RESHoverContainer:after, .res .RESHoverInfoCard:after {
border-color: transparent #434b55
}
div.guider .guider_content p, .res .RESNotificationContent {
color: #999
}
.res .RESNotificationContent {
border-top: 1px solid #434b55;
border-bottom: 1px solid #434b55
}
input#disableDailyTipsCheckbox {
margin-right: 5px
}
body .blueButton, a.guider_button {
border: 0;
border-radius: 0;
background: #6093c4
}
.pageNavigator[href="#header"] {
display: none
}
body.res-voteEnhancements-highlightScores span.score {
color: #fff
}
.side .md > blockquote:nth-of-type(1) {
display: none
}
@media ( max-width: 1100px) {
#header {
margin: 0;
height: 190px;
padding-top: 30px
}
#sr-header-area {
top: 0;
left: 0;
width: 100%
}
#header .pagename, #header .tabmenu {
margin-top: 30px
}
body > .content {
margin: 0 !important;
max-width: calc(100vw - 320px) !important
}
.side {
margin-right: 0
}
.side .md > blockquote:nth-of-type(1) {
display: block;
position: absolute;
z-index: 100;
left: 90px;
top: 20px;
margin: 0;
box-shadow: 0 0 10px rgba(0, 0, 0, .3);
width: 280px;
border: 0;
padding: 15px;
background: #fff;
text-align: center;
line-height: 15px;
font-style: normal
}
.footer-parent {
margin-top: 0;
border-top: 1px solid #434b55;
background: #32383f
}
.footer-parent ~ .debuginfo {
background: #32383f
}
#header:target + .side .md > blockquote:nth-of-type(1) {
top: 45px
}
#header:not(:target) + .side .md > blockquote:nth-of-type(1):before {
display: block;
margin-bottom: 10px;
font-weight: 700;
color: #32383f;
content: "Using a mobile device?"
}
#header + .side .md > blockquote:nth-of-type(1):after {
position: absolute;
left: 0;
bottom: -20px;
border-top: 10px solid #fff;
border-right: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid #fff;
content: ""
}
.side .md > blockquote:nth-of-type(1) a {
color: #6093c4
}
.side .md > blockquote:nth-of-type(1) a[href="#header"], #header:target + .side .md > blockquote:nth-of-type(1) a[href="#null"] {
display: block
}
#header:target + .side .md > blockquote:nth-of-type(1) a[href="#header"], .side .md > blockquote:nth-of-type(1) a[href="#null"] {
display: none
}
.side .md > blockquote:nth-of-type(1) a[href="#header"]:after {
content: "Tap here to view the tab menu."
}
.side .md > blockquote:nth-of-type(1) a[href="#null"]:after {
content: "Tap here to hide the tab menu."
}
}
/*============================================================================
ADD ADDONS/CUSTOMIZATIONS BELOW
==============================================================================*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment