Stilig Dark

gistfile1.css

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("reddit.com") {

/* FYI this style is, more or less, a port of the Stilig Style
 * for 4chan (https://github.com/RiDeag/Stilig). This userstyle
 * is also based on the userstyle for reddit by falac
 * (https://github.com/phallus/user-styles/tree/master/styles-clean).
 * If you like this userstyle, Go check them out! ;)
 */

/* PS : Don't forget to read the installation instructions here :
 * https://github.com/octomwm/dotfiles/tree/master/userstyles
 */

/* body */

html{
    width:100% !important
}
/*f4f5f5*/
body {
    width: 99% !important;
    left: 14px !important;
    right: 0px !important;
    background-attachment: fixed !important;
    background-color: #000 !important;
    font-family: "Open Sans", sans-serif !important;
    font-size: 10px !important;
    margin-left: 0% !important;
}

/*
====================
Header + navigation
====================
*/

.listing-chooser.initialized {
    display: none;
    visibility: hidden;
}

#header-img.default-header {
    background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QYFCQ8Wpncy0gAAAA1JREFUCNdjYGBgYAAAAAUAAV7zKjoAAAAASUVORK5CYII=") !important;
    height:28px !important;
    width: 0px !important;
    top:0px !important;
    margin-bottom: -1px !important;
}


#header {
    background: transparent!important;
    border-bottom: none !important;
}
/*fff*/
#sr-header-area{
    position:fixed !important;
    width:159px !important;
    height:100% !important;
    background : #151515 !important;
    /*border-right: 1px solid #ddd !important;*/
    margin-top:-35px !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    display: block !important;
}

#sr-header-area .flat-list li,
#sr-header-area .flat-list form,
#sr-header-area .flat-list {
    display: block !important;
    overflow: hidden;
}
#sr-header-area .sr-list {
    overflow: inherit !important;
    margin-left:1.2em !important;
    margin-top: 33px !important;
    font-size:1.1em !important;
}

#sr-header-area .separator, #sr-more-link, #header-img-a{
    display:none !important
}

.dropdown.srdrop .selected {
    background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QYFCQ8Wpncy0gAAAA1JREFUCNdjYGBgYAAAAAUAAV7zKjoAAAAASUVORK5CYII=") !important;
    color:#aaa !important;
    font-size:12px;
    width:100px
}

#sr-header-area .dropdown.srdrop {
    height : 25px !important;
    width:154px !important;
    background:#f4f4f4 !important;
    padding:8px 0 0 5px !important
}
/*subreddit dropdown*/
.drop-choices a.choice {
    font-size:1em !important
}
.drop-choices {
    white-space: normal !important;
}

#sr-header-area .drop-choices.srdrop {
    margin-top: -26px !important;
    width: 180px !important;
    height:100%;
    z-index: -1 !important;
    padding:33px 1em !important;
    margin-left: -300px !important;
    display:block !important;
/*I don't know why, but the transition is laggy for the moment :/ */ 
/*    transition-duration:0.4s !important;*/
}
.drop-choices.srdrop.inuse{
    left:460px !important;
}
.drop-choices a.choice {
    display: inline-block !important;
    border-radius:2px;
    color:#888 !important;
}
.drop-choices a.choice:hover {
    background-color:#eee !important;
}

.drop-choices.inuse {
    width: 180px !important;
}
.srdrop .choice.bottom-option {
    border-top: 0px solid rgb(51, 102, 153) !important;
}
.srdrop .choice.bottom-option {
    font-style: normal !important;
    position: absolute;
    top: 0px;
    width: 198px;
    background: none repeat scroll 0% 0% #eee;
    left: 0px;
    height: 9px;
    padding: 10px 0 15px 0 !important;
    border-radius:0px !important;
    text-align: center
}
.srdrop .choice.bottom-option:hover {
    background-color:#eee !important;
}
.srdrop .choice:last-child {
    font-size:1.3em !important;
    color:#aaa !important
}

.drop-choices {
    border: 0px solid transparent !important;
    box-shadow: rgba(0,0,0,0.25) 0 0 5px !important;
}

/*left sidebar*/
.sr-bar a {
    color: #999 !important;
    text-decoration:none !important;
}
.sr-bar a:hover {
    color: #444 !important;
}
#sr-header-area .selected a {
    color: orangered !important;
}
/*header*/
/*3d444e*/
#header-bottom-left{
    width:100% !important;
    background:#303030 !important;
    top:0 !important;
    height:30px !important;
    position:fixed !important;
    font-size:11px !important;
}
.pagename{
    word-wrap: break-word;
    max-width:20px !important
}
.redditname{
    height:30px !important;
    
}
.redditname a{
    color:white !important;
    font-size : 1.5em !important;
    font-weight:normal !important;
    padding-left:10px !important;
    height:30px !important;
    top:0px !important;
}
.pagename{
    color:white !important;
    font-weight:normal !important;
}

.tabmenu{
    margin:-23px 0px 0px 160px !important;
    display:block !important;
}
.tabmenu li {
    font-weight: normal !important;
    height:30px !important;
    margin:0px !important;
}
/*3d444e*/
.tabmenu li a {
    padding: 7px 6px 8px !important;
    background-color: transparent !important;
    height:30px !important;
    margin-top:-13px !important;
    color:#aaa !important;
    background-color: #303030  !important;
}
/*30363e*/
.tabmenu li.selected a{
    background-color: #000 !important;
    color:white !important;
    border-width:0px !important;
}

#header-bottom-right{
    background : transparent !important;
    position: fixed !important;
    top:4px !important;
    margin-right:40px !important;
    font-size:10px !important;
    height:30px !important;
}
#header-bottom-right a{
    color:#aaa !important;
}

/* turn the sidebar into a drop-down menu */

.side {
    background: #FFF !important;
    box-shadow: rgba(0,0,0,0.25) 0 0 5px !important;
    border: 0px solid #888 !important;
    position: fixed !important;
    padding: 10px 20px 10px 10px !important;
    float: right !important;
    width: 300px !important;
    right: -400px !important;
    z-index: 1000 !important;
    transition-duration:0.4s !important;
    top: 30px !important;
    overflow-y:auto !important;
    height:100% !important;
}

.side::before {
    content: "◨";
    color:#aaa;
    text-align: center !important;
    background: transparent!important;
    height: 27px !important;
    max-width: 30px !important;
    min-width: 30px !important;
    position: fixed !important;
    top: -3px !important;
    right: 0% !important;
    padding-top: 8px !important;
    padding-left: 0px !important;
    padding-right: 5px !important;
    margin-right: 0px !important;
    z-index: 5;
    transition: 0.5s color ease;
    font-size: 14px !important
}

.side:hover::before {
    color:#888;
    background: #fff !important;
    transition: 0.5s color ease;
}

.side:hover {
    position: fixed !important;
    right: -20px !important;
}

.link.promotedlink, .organic-listing .link, .organic-listing .link.promotedlink,.organic-listing .promoted,.organic-listing {
    padding: 12px 0px !important;
    margin-bottom: -10px !important;
    border-right: none !important;
    border-top: 0px solid transparent !important;
}
.organic-listing {
    border: 0px solid transparent !important;
    background: transparent !important;
}

.organic-listing .link{
  border-left:5px solid rgb(252, 237, 145) !important;
}
.sr-interest-bar{
    margin:0 20px 0 30px !important;
}

.sidebox .subtitle {
    background: transparent !important;
    font-size: 1em !important
}

.sidebox .spacer {
    position: relative;
    margin-top: 10px;
    padding: 5px 0px 0px 44px;
    min-height: 41px;
    background: transparent !important;
}

.titlebox {
    font-size : 1.4em !important;
    text-align: center !important;
}

.sidebox a {
    color: #1a1a1a !important;
    font-weight: normal !important;
    text-decoration: none !important;
}

.md {
    max-width: 100% !important;
    font-size: 1em !important;
    font-family: "Open Sans", sans-serif !important;
    color: #646464 !important;
    background-color:transparent !important;
    padding : 0 !important;
    border:1px solid transparent !important;
    margin-right:30px !important;
    text-align:justify
}

.panestack-title {
    width: 100% !important;
    text-align: center !important;
}

.menuarea .spacer {
    font-size:1em !important;
}
#noresults {
    margin-left: 30px !important;
}
.comment {
    width: 99% !important;
}

.commentarea {
    margin-left:20px !important;
}

.titlebox h1 {
    color: black !important;
    font-family: "Open Sans", sans-serif !important;
    text-align: center !important;
    width: 100% !important;
    position: absolute;
    top: 5px;
    left: 11px;
}
.side .titlebox h1 {
    display:none
}

.titlebox h1 a {
    display: none !important;
    color: black !important;
    font-family: "Open Sans", sans-serif !important;
    text-align: center !important;
    width: 100% !important;
    position: absolute;
    top: -3px;
    left: -5px !important;
}

.morelink {
    text-align: center;
    font-size: 1.4em !important;
    font-weight: normal !important;
    line-height: 29px;
    letter-spacing: 0px !important;
}

.linkinfo {
    padding: 5px;
    border: 1px solid rgb(95, 153, 207);
    background-color: #f5f5f5 !important;
    color: #3f3f3f;
    font-size: 1.1em !important;
    border-radius: 3px 3px 3px 3px;
    text-align: center !important;
}

    .linkinfo .date {
        font-family: "Open Sans", sans-serif !important;
    }
    
    .linkinfo .score .word {
        font-family: "Open Sans", sans-serif !important;
        font-size: 1.4em !important;
        font-weight: bold;
        color: #1c1c1c !important;
    }

    .linkinfo .score .number {
        font-size: 1.4em !important;
        font-weight: bold;
        color: #1c1c1c !important;
    }

    .linkinfo .upvotes, .linkinfo .downvotes {
        font-family: "Open Sans", sans-serif !important;
        font-size: 1.1em !important;
        color: #646464 !important;
    }


    .linkinfo .shortlink input {
        border: 1px solid gray;
        padding: 3px 3px;
        width: 140px !important;
    }
/*
================
Content
================
*/

.content {
margin-left:155px !important;
margin-top :65px !important;
/*big screen options*/
}

.sidecontentbox .content {
margin-left:0px !important;
margin-top :0px !important;
}

/*InfoBar*/

.content .infobar{
    margin-left:27px !important;
}

.infobar{
    border: 1px solid rgb(251, 231, 108) !important;
    border-radius:3px;
    background : #fcf0a6!important; 

}
.content .infobar .md{
    padding-left:10px !important
}
.content .infobar .md:before{
    content:"!";
    float:left;
    margin:5px 10px 0 0;
    font-size:1.6em;
    font-family:sans-serif;
    font-weight:bold
}

/*This part is basically a copy pasta of the reddit style of /u/falac */
/* links */

.link {
    color: #777 !important;
    border-bottom: 1px solid #c3c3c3 !important;
    min-height: 30px;
    padding: 12px 0 !important;
    position: relative !important;
    background: transparent !important;
    border-bottom: none !important;
}

/*.link.last-clicked {
    color: #3f3f3f !important;
    border-right: none !important;
    //border-top: 0px dashed gray !important;
    background-color:#fdfdfd !important
}*/

.link.last-clicked {
    border: none !important;
}

.link .title {
    font-weight: normal !important;
    margin-left: 0px !important;
    font-size : 1.4em !important;
}

    .lk .thumbnail {
        margin-right: auto!important;
        width: auto !important;
    }

        .link .thumbnail img {
            border: none!important;
            width: auto !important;
            margin-right: 3px !important;
        }

    .thing p.title {
        padding-bottom: 0px !important;
    }
     
    .thing .title.loggedin, .thing.p.title a, .title a , p.title a.title {
            color: #bbb !important;
            line-height: 14px !important;
            text-indent: 155px;
            text-shadow: none !important;
            transition: 0.5s ease all;
            font-size: 0.9em !important;
            font-weight:normal !important;
    }
       
        .thing .title.loggedin:visited, .link .title a:visited {
            color: #777 !important;
        }
        
        .domain, .domain a {
            font-family: "Open Sans", sans-serif !important;
            font-weight: normal !important;
            font-size: 0.9em !important;
            color: #bf7c83 !important;
            display: inline !important;
        }
    
    .tagline {

        color: #888 !important;
        font-size: 1em !important;
        font-family: "Open Sans", sans-serif !important;
        margin-top: 8px !important;
    }
    
    .link .flat-list {
        margin-top: 4px !important;
        margin-left: 0px !important;
    }
    
    .entry {
        border: none !important;
        padding-left: 10px !important;
    }
    
        .entry .buttons li a {
            color: #999 !important;
            font-size: 1em !important;
            font-weight: normal !important;
            padding: 0 10px 3px !important;
            transition: 0.5s ease all;
            margin-left:-10px
        }
        
            .entry .buttons li a:hover {
                color: #1c1c1c !important;
                text-decoration: none !important;
                transition: 0.5s color ease;
            }

.expando-button.video {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QYFCQ8Wpncy0gAAAA1JREFUCNdjYGBgYAAAAAUAAV7zKjoAAAAASUVORK5CYII=") !important;
    background:transparent !important;
    width:1em !important;
    height:1em!important;
    position:static !important;
    margin: 7px 7px 0 0 !important;
    padding: 0px !important;
    cursor:pointer !important

}
.expando-button.video.collapsed::before {
    content :"[+]";
    font-size:1em !important;
    color:#777;
    text-shadow:0 0 0px #fff
}
.expando-button.video.expanded::before {
    content :"[-]";
    font-size:1em !important;
    color:#777;
    text-shadow:0 0 0px #fff
}

.expando-button.selftext {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QYFCQ8Wpncy0gAAAA1JREFUCNdjYGBgYAAAAAUAAV7zKjoAAAAASUVORK5CYII=") !important;
    background:transparent !important;
    width:1em !important;
    height:1em!important;
    position:static !important;
    margin: 7px 7px 0 0 !important;
    padding: 0px !important;
    cursor:pointer !important

}
.expando-button.selftext.collapsed::before {
    content :"[+]";
    font-size:1em !important;
    color:#777;
    text-shadow:0 0 0px #fff
}
.expando-button.selftext.expanded::before {
    content :"[-]";
    font-size:1em !important;
    color:#777;
    text-shadow:0 0 0px #fff
}
/*
If you don't want to display the text of redditor's posts
Uncomment this line :*/

/*
.self .expando-button{
    display:none
}*/

.organic-listing .nextprev, .organic-listing .help {
    display: none !important;
}

.nextprev {
    text-align: center;
}

.title {
    color: #677996 !important;
    background: none !important;
    text-align: left;
    margin-left: 2px !important;
}

.title.click {
    color: #1c1c1c !important;
    background: none !important;
}

.comment .author {
    font-weight: normal;
    color: #666 !important;
}

a.author {
    margin-right: 0.5em;
    font-weight: normal;
    color: #7b80a2 !important;
    transition: 0.5s color ease;
}

a.author:hover, a .author:hover {
    color: #444 !important;
    text-decoration: none !important;
    transition: 0.5s color ease;
}

.tagline .submitter {
    color: #999;
}
/*normal posts has a blue line on the left*/
/*ffffff*/
.link {
background: -moz-radial-gradient(center, ellipse cover,  rgba(69,72,77,1) 0%, rgba(33,32,32,1) 100%) !important; /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(69,72,77,1)), color-stop(100%,rgba(33,32,32,1))) !important; /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover,  rgba(69,72,77,1) 0%,rgba(33,32,32,1) 100%) !important; /* Chrome10+,Safari5.1+ */



  /*background: #303030 !important;*/
  margin: 2em 2em 0em 3em !important;
  border-radius: 5px !important;
  box-shadow: -1px 1px 1px rgba(0,0,0,.08);
}

/*image fix*/
.link img {
    background-color: #fff !important;
}
/*the nsfw posts has a red line on the left*/
.over18 {
  border-left:5px solid #A40D0D !important
}

/* Since this theme requires to enable all thumbnail,
 * I desided to hide the NSFW thumbnail by reducing
 * theire opacity.
 * If you don't like this option, you should delete
 * these two lines :
 */

.over18 .thumbnail{
    opacity:0.15
}
.over18 .thumbnail:hover{
    opacity:1
}

/*I tweeked a bit the rank number, If you want to use it, delete the display:none line*/
.rank {
    margin-left:11px;
    text-align:center !important;
    position: relative;
    margin-left: -17px;
    background: linear-gradient(rgb(238, 238, 238), rgb(221, 221, 221)) repeat scroll 0% 0% red;
    padding: 5px;
    min-height: 19px;
    min-width: 19px;
    border-radius: 20px;
    background-image: linear-gradient(#eee, #ddd);
    box-shadow: 0px 1px 2px #aaa;
    display:none
}

/*Footer*/

.col:nth-child(4) > ul:nth-child(1) > li:nth-child(1){
    color:transparent !important;
}

.col:nth-child(4) > ul:nth-child(1) > li:nth-child(1):before{
    color:#cc9999 !important;
    content: "❤";
}

/*
====================
Scripts
====================
*/

/*NSFW toggle button : https://userscripts.org/scripts/show/106810*/
/*Include the nsfw posts toggle to the top bar */
 
#nsfwSpan,#nsfwButton{
    color:#aaa;
    background:transparent;
}
#nsfwButton{
    margin: 0px -5px 0px -6px !important;
}
/*Colorfull reddit username CRU : https://userscripts.org/scripts/show/156297*/
/*Colorizes usernames on reddit comments */
 
.author span {
    padding : 0 5px !important;
    border-radius: 2px !important
}

/*Other pages*/
.raisedbox {
    background-color: transparent !important;
    border: 0px solid transparent !important
}
.searchfacets{
margin:0 10px 0 30px !important
}
.search-page .pagename{
    color:white !important;
}
.message .md {
    font-size:13px !important
}
/*Reddit Gold*/
.error, .gold-form .roundfield{
    margin-left:30px !important
}

.flat-list li a.gold {
    font-weight:normal !important
}
.rounded {
    border-radius: 3px !important;
}
.gold-accent.comment-visits-box{
    margin-left:10px !important
}
.new-comment .usertext-body{
    margin-top:5px !important;
    padding-left: 5px !important;
}
/*Reddit BETA*/

.with-listing-chooser  .tabmenu{
    margin:-23px 0px 0px 160px !important;
}

#beta-settings{
    margin-left: auto !important;
    margin-left: auto !important
}
.beta-notice {
    top: -27px !important;
    right: 25px !important;
    z-index: 10 !important;
    display:block !important
}
.listing-chooser {
    top: 30px !important;
    margin-left:160px !important;
    display:block !important;
    position:fixed !important;
    z-index:100 !important;
    box-shadow:1px 0px 3px rgba(0,0,0,0.25) !important;
    border-right:0px solid transparent !important;
    padding-right:0px !important
}
.listing-chooser:after{
    box-shadow:0px 0 0px 0px transparent inset !important;
}
body.with-listing-chooser.listing-chooser-collapsed .listing-chooser{
    opacity:0;
}
.with-listing-chooser #sr-header-area .dropdown .selected:after {
    content:" +";
    left: 125px;
    top:30px;
    width: 24px;
    height: 28px;
    display:block;
    position: fixed;  
    border-left: 1px solid #ddd !important;
    background:#eee !important;
    font-size:2em;
    padding:6px 0 0 9px;
}
.grippy {
    position: fixed !important;
    left: 120px !important;
    display: block !important;
    width: 35px !important;
    height: 35px !important;
    border: 0px solid transparent !important;
    background:transparent !important
}
.grippy:after {
    border:0px solid transparent !important
}
.with-listing-chooser {
    margin-left:-14px !important
}
.with-listing-chooser #sr-header-area .width-clip {
    margin-top: 32px !important;
    margin-bottom :0px !important
}
.with-listing-chooser #sr-header-area {
    bottom :0px !important
}
.hover-bubble.multi-add-notice{
    top: 50px !important;
    right: 0px !important;
    margin-right: 20px !important;
}
.anchor-right{
    z-index:2000 !important;
}
.multi-page .anchor-right{
    z-index:1 !important;
}
}