lesswrong-gruboxdark.user.css

/* ==UserStyle==
@name           LessWrong Dark Theme 
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    better dark theme for lesswrong.com
@author         heybilalazhar@gmail.com
==/UserStyle== */

@-moz-document domain("www.lesswrong.com") {
    
    :root

{
    /* 0 is for darkest 
    1 is for hard 
    higher values for hard  */


    /* 2.1 Dark theme color variables */
    --bg0-dh:       #1d2021;
    --bg1-dark:       #3c3836;
    --bg-dark:        #282828;
    --bg2-dark:       #504945;
    --bg3-dark:       #665c54;
    --bg4-dark:       #7c6f64;
    --bg5-dark:       #928374;
    --bg_visual:      #503946;
    --bg_red:         #cc241d;
    --bg_green:       #98971a;
    --bg_blue:        #458588;
    --bg_yellow:      #d79921;
    --shadow:         #16181a;
    --shadow-var1:         #17191b;
    --shadow-cur:         #1a1b1d;

    --fg-dark:        #ebdbb2;
    --grey0-dark:     #7f897d;
    --grey1-dark:     #859289;
    --grey2-dark:     #9aa79d;

    --faded-red:     #fb4934;
    --faded-orange:  #fe8019;
    --faded-yellow:  #fabd2f;
    --faded-green:   #b8bb26;
    --faded-aqua:    #8ec07c;
    --faded-blue:    #83a598;
    --faded-purple:  #d3869b;

    --dim-red:       #cc241d;
    --dim-orange:    #d65d0e;
    --dim-yellow:    #d79921;
    --dim-green:     #98971a;
    --dim-aqua:      #689d6a;
    --dim-blue:      #458588;
    --dim-purple:    #b16286;


    /* 2.2 Light theme color variables */
    --bg0-light:     #f0edd8;
    --bg1-light:     #f6f1dd;
    --bg-light:      #fdf6e3;
    --bg2-light:     #f3efda;
    --bg3-light:     #edead5;
    --bg4-light:     #e4e1cd;
    --bg5-light:     #dfdbc8;
    --grey0-light:   #a4ad9e;
    --grey1-light:   #939f91;
    --grey2-light:   #879686;
    --shadow-light:  #3c474d20;


    --text-offwhite: #fbf1c7;
    --text-offyellowish: #f2e5bc;
    --text-white: #f9f5d7;
    --text-offwhite-faded: #ebdbb2;
    --text--faded: #d5c4a1;
    --text--veryfade: #928374;

    

    



    --bg_visual_light:      #eaedc8;
    --bg_red_light:         #fbe3da;
    --bg_green_light:       #f0f1d2;
    --bg_blue_light:        #e9f0e9;
    --bg_yellow_light:      #faedcd;

    --fg-light:       #5c6a72;

    --light-red:     #f85552;
    --light-orange:  #f57d26;
    --light-yellow:  #bf983d;
    --light-green:   #899c40;
    --light-aqua:    #569d79;
    --light-blue:    #5a93a2;
    --light-purple:  #b87b9d;

    --light-dim-red:    #f1706f;
    --light-dim-orange: #f39459;
    --light-dim-yellow: #e4b649;
    --light-dim-green:  #a4bb4a;
    --light-dim-aqua:   #6ec398;
    --light-dim-blue:   #6cb3c6;
    --light-dim-purple: #e092be;



 --dark-red: #9d0006;    /* faded_red: #9d0006 [red] 88 [9] 157-0-6 137-0-9 #890009 */
  --dark-green: #79740e;  /* faded_green: #79740e [green] 100 [10] 121-116-14 102-98-13 #66620d */
  --dark-yellow: #b57614; /* faded_yellow: #b57614 [yellow] 136 [11] 181-118-20 165-99-17 #a56311 */
  --dark-blue: #076678;   /* faded_blue: #076678 [blue] 24 [12] 7-102-120 14-83-101 #0e5365 */
  --dark-purple: #8f3f71; /* faded_purple: #8f3f71 [purple] 96 [13] 143-63-113 123-43-94 #7b2b5e */
  --dark-aqua: #427b58;   /* faded_aqua: #427b58 [aqua] 66 [14] 66-123-88 53-106-70 #356a46 */
  --dark-orange: #af3a03;


/* light colors */
  --interface-light0-hard: #f9f5d7; /* light0_hard: #f9f5d7 [h0] 230 [ ] 249-245-215 248-244-205 #f8f4cd */
  --interface-light0: #fbf1c7; /* light0: #fbf1c7 [fg0][bg0] 229 [0] 251-241-199 250-238-187 #faeebb */
  --interface-light0-soft: #f2e5bc; /* light0_soft: #f2e5bc [s0] 228 [ ] 242-229-188 239-223-174 #efdfae */
  --interface-light1: #ebdbb2; /* light1: #ebdbb2 [fg1][bg1] 223 [15] 235-219-178 230-212-163 #e6d4a3 */
  --interface-light2: #d5c4a1; /* light2: #d5c4a1 [fg2][bg2] 250 [ ] 213-196-161 203-184-144 #cbb890 */
  --interface-light3: #bdae93; /* light3: #bdae93 [fg3][bg3] 248 [ ] 189-174-147 175-159-129 #af9f81 */
  --interface-light4: #a89988; /* light4: #a89988 */


   
}
    
/*   SIDE BARRR    */
/* ALL STYLES GO HERE      */

/*SIde bar bg       */  
    
    .MuiPaper-root {
    background-color: #427b58 !important;
}
    
/*Links ON Side Panel       */
    .TabNavigationSubItem-root {
    color: #f2e5bc !important;
    width: 172px;
    display: block;
    overflow: hidden;
    font-size: 1rem;
    box-sizing: content-box;
    font-weight: 400;
    font-family: GreekFallback,Calibri,"Gill Sans","Gill Sans MT",Myriad Pro,Myriad,"Liberation Sans","Nimbus Sans L",Tahoma,Geneva,"Helvetica Neue",Helvetica,Arial,sans-serif;
    line-height: 1.5rem;
    white-space: nowrap;
    padding-left: 62px;
    padding-bottom: 8px;
}

/*  Home tab color */
    .TabNavigationItem-selected .TabNavigationItem-navText {
    color: #1d2021;
    font-weight: 600;
}
    
    
    
/*ALL MAIN PAGE STYLES GO HERE       */
/*   BG COLOR OF MAIN PAGE    */
    
    
/*   MAIN PAGE background     */
    .Layout-main {
    grid-area: main;
    background: #1d2021 !important;
    min-height: calc(100vh - 64px);
    padding-top: 50px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 15px;
}
    
/*   MAin page bottom tabs   */
    
    .TabNavigationFooterItem-navButton {
        background-color :#16181a !important;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 8px 8px 2px;
    flex-direction: column;
    justify-content: space-around;
}
    /*   MAin page bottom SELECTED TAB   */
    
    .TabNavigationFooterItem-selected {
    background-color: #427b58 !important;
}
    
/*POST COMMENTS CONTAINER       */
    
    .LWPostsItem-postsItem {
        background-color :#282828 !important;
    display: flex;
    padding: 10px;
    position: relative;
    flex-wrap: nowrap;
    align-items: center;
}
    
    
    
    
    .FilterMode-tag {
    color: #ebdbb2;
    border: solid 1px #ebdbb2;
    display: inline-block;
    flex-grow: 1;
    text-align: center;
    box-shadow: 0 1px 5px rgba(0,0,0,.025);
    font-weight: 400;
    margin-right: 4px;
    padding: 8px 10px;
    border-radius: 20px;
    margin-bottom: 4px;
    background-color: #f2e5bc;
}
    

    .FilterMode-tagLabel {
        color:#16181a !important;
    display: flex;
    align-items: center;
    font-weight: 600;
    justify-content: center;
}
    
    /* Main bg color change      */
/*This was changed to be one main panel and we changee th ebg color of it       */
    
    element.style {
    background-color: #1a1b1d !important;
}
    
    
.Layout-spacedGridActivated {
     background-color: #1a1b1d !important;
    
    display: grid;
    grid-template-areas: "navSidebar ... main ... sunshine";
    grid-template-columns: minmax(0,min-content) minmax(0,1fr) minmax(0,min-content) minmax(0,1.4fr) minmax(0,min-content);
}
    
    
/* Main Page commenets */
    
    .RecentDiscussionThread-post {
    background-color:#1a1b1d!important;
        padding-top: 18px;
    padding-left: 16px;
    padding-right: 16px;
    border-radius: 3px;
    margin-bottom: 4px;
}
    
    .RecentDiscussionThread-content {
    background-color:#282828!important;
            margin-left: 4px;
    margin-right: 4px;
    padding-bottom: 1px;
}
    
/*Weird Issue With the Fucking Page upadte*/
    
    .ContentStyles-commentBody * {
        background-color :#16181a !important;
    pointer-events: auto;
    color: #79740e!important;
}
    
    
    .CommentFrame-condensed.comments-node-root {
       background-color:#16181a !important;
    margin-bottom: 4px;
}
    .SingleLineComment-root {
 background-color:#3c3836 !important;
    cursor: pointer;
    position: relative;
}
    
    .CommentsNode-parentScroll {
        background-color:#427b58!important;
    top: 0;
    left: 0;
    width: 8px;
    height: 100%;
    cursor: pointer;
    position: absolute;
}
    
    
    
    
    
    
    
    
    
    
    
    
/*Tag Pages */
    
/*Tag Page Header      */
    
    .TagPage-header {
    background: #17191b !important;
    padding: 19px 42px 5px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
    
    
    .TagPage-wikiSection {
   background: #17191b !important;
    margin-bottom: 24px;
    padding: 5px 42px 12px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
    
    
    
    .LWPostsItem-bottomBorder {
        background-color:#3c3836 !important;
    border-bottom: 2px solid #98971a;
}
    
/*Year of Article Written       */
    
.PostsItemDate-postedAt.PostsItemDate-postedAt {
    width: 38px;
    color: #98971a !important;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 300;
}
    
/*Last Iten Color for some Twisted Reason       */
    .LWPostsItem-background {
    width: 100%;
    background: #3c3836 !important;
}
    
    .TagContributorsList-contributorsHeading {
        color :#689d6a !important;
        
    padding-top: 4px;
    padding-bottom: 12px;
}
    
    
    
    
    
   
    
    
/*Search Bar */
    
    .SearchPageTabbed-searchInputArea .ais-SearchBox-input {
    width: 100%;
    color: #fabd2f;
    height: 100%;
    cursor: text;
    font-size: 1.16rem;
    box-shadow: none;
    font-weight: 400;
    font-family: GreekFallback,Calibri,"Gill Sans","Gill Sans MT",Myriad Pro,Myriad,"Liberation Sans","Nimbus Sans L",Tahoma,Geneva,"Helvetica Neue",Helvetica,Arial,sans-serif;
    line-height: 1.5rem;
    border-style: none;
    padding-right: 0;
    vertical-align: bottom;
    background-color: transparent;
    -webkit-appearance: none;
}
    .SearchPageTabbed-funnelIconLW {
    fill: #6ec398;
}
    
    .MuiSelect-selectMenu {
        color:#98971a!important;
    width: auto;
    overflow: hidden;
    min-height: 1.1875em;
    white-space: nowrap;
    padding-left: 8px;
    text-overflow: ellipsis;
}
    
    .MuiList-padding {
        background-color:#3c3836!important;
    padding-top: 8px;
    padding-bottom: 8px;
}
    
    .ais-Snippet-highlighted{
        color:#fbf1c7 !important;
        background-color:#9d0006 !important;
    }
    
    .ExpandedPostsSearchHit-snippet {
    color: #d5c4a1;
    font-size: 14px;
    word-break: break-word;
    margin-top: 7px;
    font-family: warnock-pro,Palatino,"Palatino Linotype","Palatino LT STD","Book Antiqua",Georgia,serif;
    line-height: 22px;
    overflow-wrap: break-word;
}
    
    .SearchPageTabbed-pagination, .SearchPageTabbed-resultCount, .SearchPagination-root {
        color:#b8bb26 !important; 
    font-family: GreekFallback,Calibri,"Gill Sans","Gill Sans MT",Myriad Pro,Myriad,"Liberation Sans","Nimbus Sans L",Tahoma,Geneva,"Helvetica Neue",Helvetica,Arial,sans-serif;
}
    
    
    .UsersMenu-userButtonContents{
        color:#b8bb26 !important;
    }
    
    .Dropdownitem-title{
        background-color : white !important;
    }
    
    
    
    
/*  Top bar styles    */
    
/*  Less Wrong Text*/
    
    .Header-titleLink {
       color: var(--dark-green);
    display: flex;
    font-size: 19px;
    align-items: center;
}
        .Header-titleLink:hover{
       color: var(--dark-green);
    display: flex;
    font-size: 19px;
    align-items: center;
}
    
    
.MuiToolbar-root.MuiToolbar-root {
  background-color: #303030 !important; /* replace 'newColor' with the color you want */
}


    
    /*  MAIN background color   inside the article ig   */
  .Layout-whiteBackground {
    background: var(--bg0-dh) !important;
}
    
/*  Your User Name     */
 
   .UsersMenu-userButtonContents {
    color: #fe8019;
    font-size: 16px;
    word-break: break-word;
    font-weight: 400;
    text-transform: none;
}
/*  Star nect to the name     */
    .KarmaChangeNotifier-starIcon {
    color: #fe8019;
}

/*All the svg elements       */
    .MuiSvgIcon-root {
       color: #fe8019 !important;
    fill: currentColor;
    width: 1em;
    height: 1em;
    display: inline-block;
    font-size: 24px;
    transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    user-select: none;
    flex-shrink: 0;
}
    
.intercom-lightweight-app-launcher-icon-open svg path {
    fill: #9d0006;
}
    
    
    
/*  React Section     */
/*  React to SNIPPET dialogue box */
    
    .AddInlineReactionButton-palette {
    max-width: 350px;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 5px 0px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 3px 1px -2px;
    font-family: GreekFallback, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
    padding-top: 12px;
    background-color:#689d6a !important;
}
    
/*Quotations colors       */
/*  PARAGRPAH TAG that is reponsible for the Quotation colors as well     */
     p:first-child {
    margin-top: 0px;
         color:#ebdbb2 !important;
         
}
    
    
    img {
  border-radius: 10px !important;
}
    
    
    
    
/*  Footnote    */
    
    
    .FootnotePreview-hovercard{
        background-color:#fb4934!important;
    }
    
    
/*Code related styles*/  
    
.ContentStyles-base code, .PostVersionHistory-selectedRevisionDisplay code, .PostVersionHistoryButton-selectedRevisionDisplay code, .SpotlightItem-description code, .SpotlightItem-editDescription .ck.ck-content.ck-editor__editable code, .TagVersionHistory-selectedRevisionDisplay code, .TagVersionHistoryButton-selectedRevisionDisplay code {
    font-size: 0.7em;
    font-family: "Liberation Mono", Menlo, Courier, monospace;
    font-weight: 400;
    padding-top: 3px;
    line-height: 1.42;
    padding-bottom: 3px;
    background-color: #3c3836;
    border-radius: 2px;
}
    
    

/*   Links in white in the side as well    */
 a {
 color: #d5c4a1;
 }
    
/*   Side bar links    */
    
    a:-webkit-any-link {
        
    color: #faedcd !important ;
    cursor: pointer;
    text-decoration: underline;
}
    
/*   HEADINGS   */
    
    h1{
        color : #fb4934 !important ; 
    }
    
     h2{
        color : #fabd2f !important ; 
    }
    
    h3{
        color : #b8bb26 !important ; 
    }
    
        h4{
        color : #8ec07c !important ; 
    }
    

    
/*Actual text color     */
    .ContentStyles-base, .ContentStyles-base blockquote, .ContentStyles-base li {
  
         color: #d5c4a1 !important;
        
    
    
        
        
    font-size: 1.4rem;
/*   Line height --defualt was 2        */
    line-height: 2rem;
}
    
    
    /*Text HOVER   */
    .ContentStyles-base:hover, .ContentStyles-base blockquote:hover, .ContentStyles-base li :hover {
  
         color: #f2e5bc !important;


}
    
/*  SIDE BAR     */
    .TableOfContentsRow-level0 .TableOfContentsRow-link {
    color : #928374 !important
}
    
    
/* By and Author  (BOX)    */
    
    .PostsPagePostHeader-authors {
        
    background-color: black;
}
    
/* Author Name      */
    .LWTooltip-root { 
        color: var(--fg-dark);
    }
    
    
/*   CHANGES COLOR OF THE BY BUTTON IN THE POST    */
    .Typography-root.Typography-body1.PostsAuthors-root {
  /* Change the following styles to your desired values */
  color: #fcfcfc;
  font-size: 16px;
  font-family: Arial, sans-serif;
  line-height: 1.5;
}   
    /* Background of the personl blog text   */
    .FooterTagList-frontpageOrPersonal{
        background-color:var(--dark-orange);:
        color: var(--text-offwhite);
    }
/* Actual  Color of the text inside the blog button     */
    .FooterTagList-frontpageOrPersonal {
    color: var(--text-offwhite);

}
/* TAGS on article page      */
    .FooterTag-root {
    color: rgba(210, 153, 153, .9) !important;
    cursor: pointer;
    border: solid 1px #eee;
    display: inline-block;
    font-family: GreekFallback,Calibri,"Gill Sans","Gill Sans MT",Myriad Pro,Myriad,"Liberation Sans","Nimbus Sans L",Tahoma,Geneva,"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 400;
    margin-right: 3px;
    padding: 5px 6px;
    margin-bottom: 8px;
    border-radius: 3px;
    background-color: #1d2021 !important;
}
    
    
    .FooterTagList-frontpageOrPersonal {
    color: var(--text-offwhite)!important;
}
    
    
    .TableOfContentsRow-link {
    /* styles for the link */
         color: var(--text-offwhite);
}

.TableOfContentsRow-title {
    /* styles for the title (make it like the backgound color*/
     background-color: var(--bg0-dh);
}
/* Color of for teh side bars      */
    .TableOfContentsRow-link:hover {
    color: #d79921 !important;
    opacity: 1;
}
    
    .TableOfContentsRow-highlightDot{
        color:var(--text-offwhite);
    }
    
.TableOfContentsRow-highlightDot {
    /* styles for the highlight dot */
     color: var(--text-offwhite);
}
    
    
    
    
    
/* Comments     */
    
    .CommentsNewForm-form {
        background-color:#282828;
    padding: 10px;
}
/* New COmment text      */
    .CommentsListSection-newCommentLabel {
    color: #98971a;
    font-size: 1.16rem;
    margin-top: 12px;
    font-weight: 600;
    line-height: 1.5rem;
}
/*   Buttons    */
    
    .MuiButtonBase-root {
    color: #689d6a;
    border: 0;
    margin: 0;
    cursor: pointer;
    display: inline-flex;
    outline: 0;
    padding: 0;
    position: relative;
    align-items: center;
    user-select: none;
    border-radius: 0;
    vertical-align: middle;
    justify-content: center;
    -moz-appearance: none;
    text-decoration: none;
    background-color: transparent;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
}
    
/*   Moderation comment    */
    .ModerationGuidelinesBox-root {
        color:#d79921 !important;
    padding: 16px;
    position: relative;
}
    
    .ContentStyles-commentBody * {
    pointer-events: auto;
    color: #a4bb4a!important;
}
  
    
    

    
    .ModerationGuidelinesBox-root {
         background-color:#1d2021 !important; 
    }
   
    
/*  Main bigger commment part theme     */
    
 .CommentsListSection-maxWidthRoot {
    background-color: #282828 !important;
    max-width: 720px;
}
    
    
    .CommentsItem-root {
    background-color:#282828 !important ;
    position: relative;
    padding-left: 12px;
    padding-right: 12px;
}
    
    .UsersNameDisplay-noColor {
        color:#f57d26 !important;
        background-color :#16181a !important;
        
        
    .UsersNameDisplay-noColor {
      color:#fb4934 !important;
        background-color :white !important;
}
    
    


        
    }
/*   EXtras        */
        .CommentsListSection-clickToHighlightNewSince, .CommentsListSection-inline {
    color: #7c6f64 !important;
    display: inline;
}
    
    
/*Review Button   */
/*Changed the button to be more rounded      */
    .PostBodyPrefix-reviewButton {
    border: solid 1px #8ec07c;
    display: inline-block;
    margin-top: 8px;
    border-radius: 20px;
    padding: 8px 16px;
}
    
    
    
/*   Reply button    */
.CommentsItem-replyLink {
    color: #fabd2f;
    display: inline;
    font-weight: 400;
    margin-right: 8px;
}

}