Darkmode by Lowe by meteowrong

/* ==UserStyle==
@name           Fullwidth Dark 2023
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    Fullwidth CSS fix for Dreamwidth.
@author         Me
==/UserStyle== */

@-moz-document domain("dreamwidth.org") {
 
 /*** :::  BASIC FUNCTIONS  ::: ***/
 /*** ::::::::::::::::::::::::: ***/
 :root {
  --light: #c2ceff;
  --lightB: #aab4c8;
  --dark: #27282b;
  --link: #9ab3ff;
  --accentL:#1f2024; 
  --accentD:#374166;
 }
 
 body, body * { box-sizing: border-box; }
 body.tropo #canvas,
 body#page_inbox #canvas,
 body#page_manageprofile #canvas {
  margin: 0 auto;
  width: 100%;
  min-height: 100vh;
 }
 
 body.tropo,
 body.tropo #canvas,
 body.tropo #shim-alpha,
 body.tropo #masthead,
 body#page_inbox,
 body#page_inbox #canvas, 
 body#page_inbox #shim-alpha,
 body#page_inbox #masthead,
 body#page_manageprofile #canvas,
 body#page_manageprofile #shim-alpha,
 body#page_manageprofile #masthead { 
  color: #a5aabd;
  background: #282b33 !important;
 }
 body.tropo #masthead, 
 body#page_inbox #masthead,
 body#page_manageprofile #masthead { border: none; }
 body.tropo #masthead img,
 body#page_inbox #masthead img,
 body#page_manageprofile #masthead img { mix-blend-mode: multiply; }
 body.tropo #shim-alpha,
 body#page_inbox #shim-alpha,
 body#page_manageprofile #shim-alpha { border: none; }
 body.tropo #canvas,
 body#page_inbox #canvas,
 body#page_manageprofile #canvas { border-color: var(--dark); }
 body.tropo footer,
 body#page_inbox footer,
 body#page_manageprofile footer { background: var(--accentD); }
 
 /* ::: EMPHASIS FONT ::: */
 body.tropo h1, 
 body.tropo h2, 
 body.tropo h3, 
 body.tropo h4, 
 body.tropo h5, 
 body.tropo h6, 
 body.tropo legend,
 body#page_inbox h1,
 body#page_inbox h2,
 body#page_inbox h3,
 body#page_inbox h4,
 body#page_inbox h5,
 body#page_inbox h6,
 body#page_inbox legend,
 body#page_manageprofile h1,
 body#page_manageprofile h2,
 body#page_manageprofile h3,
 body#page_manageprofile h4,
 body#page_manageprofile h5,
 body#page_manageprofile h6,
 body#page_manageprofile legend { color:var(--lightB) !important; }
 
 /* ::: GENERAL IMAGE BRIGHTNESS ::: */
 body.tropo img,
 body#page_inbox img,
 body#page_manageprofile img { filter:brightness(0.9) contrast(0.9) }
 
 /* ::: LINKS ::: */
 body.tropo a, 
 body#page_inbox a,
 body#page_manageprofile a,
 body.tropo a:visited,
 body#page_inbox a:visited,
 body#page_manageprofile a:visited { color:var(--link) !important; }
 body.tropo a:hover,
 body#page_inbox a:hover,
 body#page_manageprofile a:hover { color:var(--link)  !important; }
 
 /* ::: SELECT FIELDS ::: */
 body.tropo select,
 body#page_inbox select, 
 body#page_manageprofile select {
  color: var(--lightB);
  background: var(--dark);
  border: 1px solid var(--lightB);
  border-radius: 4px;
 }
 
 /* ::: LABEL FIELDS ::: */
 body.tropo label,
 body#page_inbox label,
 body#page_manageprofile label { color: var(--light); }
 
 /* ::: INPUT FIELDS ::: */
 body.tropo input,
 body#page_inbox input,
 body#page_manageprofile input {
   transition: 0.1s linear all;
 }
 body.tropo input:hover,
 body#page_inbox input:hover,
 body#page_manageprofile input:hover {
   filter:brightness(1.2);
 }
 body.tropo input[type="submit"],
 body#page_inbox input[type="submit"],
 body#page_manageprofile input[type="submit"] {
   background:  #3e569f;
   border:1px solid var(--lightB);
 }
 body.tropo input[type="submit"]:hover,
 body#page_inbox input[type="submit"]:hover,
 body#page_manageprofile input[type="submit"]:hover {
   background: #2e3f71;
   border:1px solid var(--lightB);
 }
 body.tropo input:focus,
 body.tropo textarea:focus,
 body#page_inbox input:focus,
 body#page_inbox textarea:focus,
 body#page_manageprofile input:focus,
 body#page_manageprofile textarea:focus {
   background: #303551 !important;
}
 
 input:not([type]), input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], input[type="color"], textarea, input.submit {
   color: var(--light);
   background: var(--dark);
   border: 1px solid var(--lightB);
   transition: 0.1s linear all;
 }
 
 /* ::: BUTTONS ::: */
 .button, 
 .postfix.button { color:var(--light); background:var(--accentD); border:none; }
 button.secondary:hover, 
 button.secondary:focus, 
 .button.secondary:hover, 
 .button.secondary:focus,
 .button:hover, 
 .postfix.button:hover { 
   color:var(--light); 
   background:var(--accentL); 
   border:none;
 }
 
 button.secondary,
 .button.secondary {
   color: var(--light);
 }
 
 
 input, 
 .panel {
  color: var(--lightB);
  background: var(--dark);
  border: 1px solid #717682;
 }
 .panel * { color: #aab4c8 !important; }
 
 .header { background: var(--accentD); }
 
 
 body.tropo form, 
 body#page_inbox form,
 body#page_manageprofile form,
 body.tropo fieldset, 
 body#page_inbox fieldset,
 body#page_manageprofile fieldset,
 body.tropo legend, 
 body#page_inbox legend,
 body#page_manageprofile legend,
 body.tropo legend span,
 body#page_inbox legend span,
 body#page_manageprofile legend span {
   border-color: var(--lightB);
 }
 
 
 body.tropo .folders a,
 body#page_inbox .folders a {
   padding: 3px 6px !important;
   border: 1px solid var(--lightB);
 }
 body.tropo .folders a.selected,
 body#page_inbox .folders a.selected {
   color: var(--light);
   background: var(--accentD);
 }
 body.tropo .folders a:hover,
 body#page_inbox .folders a:hover {
   background: var(--accentD);
 }
 
 
 /* ::: TABLE ::: */
 body.tropo table,
 body#page_inbox table,
 body#page_manageprofile table { background: transparent !important; }
 body.tropo thead th, 
 body#page_inbox thead th,
 body#page_manageprofile thead th,
 body.tropo tfoot td,
 body#page_inbox tfoot td,
 body#page_manageprofile tfoot td { background: var(--accentD); }
 
 
 .tab-header,
 .action-bar,
 .highlight, 
 .highlight-box,
 .panel.callout,
 footer { background: var(--accentL); }
 .tab-header { border-color: var(--accentD); border-left:none; border-right:none; }
 #canvas { border-color: var(--accentD); }
 h1#content { color: var(--accentD); }
 .tablist .tab a { border:none; background: var(--accentD); }
 #profile_page .username,
 #profile_page .actions li,
 #profile_page .section,
 #profile_page .username { background:var(--accentL) !important; border-bottom:var(--accentD); }
 button { background: var(--accentL); }
 
 
 
  /*** :::   NAVBAR AREA    ::: ***/
 /*** ::::::::::::::::::::::::: ***/
 body.tropo nav,
 body#page_inbox nav,
 body#page_manageprofile nav { 
   background:var(--accentL) !important;
   border-top: 8px solid var(--accentD); 
 }
 
 body.tropo *[role="search"],
 body#page_inbox *[role="search"],
 body#page_manageprofile *[role="search"] {
   display: none !important;
 }
 body.tropo nav[role="navigation"] ul li.hover ul,
 body#page_inbox nav[role="navigation"] ul li.hover ul,
 body#page_manageprofile nav[role="navigation"] ul li.hover ul {
   padding-right: 0;
 }
 
 body.tropo nav li.topnav a,
 body#page_inbox nav li.topnav a,
 body#page_manageprofile nav li.topnav a,
 body.tropo nav li:hover a,
 body#page_inbox nav li:hover a,
 body#page_manageprofile navli:hover a {
   background-color: var(--accentL);
 }
 nav li:hover a {
   box-shadow: 1px 1px var(--accentD), -1px 0 var(--accentD);
 }
 nav li:hover > a {
   background-color: var(--accentD) !important;
 }
 .top-bar-section li:not(.has-form) a:not(.button) {
   background-color: var(--accentL);
 }
 nav li:hover:not(.has-form) a:not(.button):not(:hover),
 nav .top-bar-section li:hover:not(.has-form) a:not(.button):not(:hover) {
   background-color: var(--dark);
 }
 nav li.topnav .dropdown {
   box-shadow: 1px 1px var(--accentD), -1px 0 var(--accentD);
 }
 

 /*** ::::::::::::::::::::::::: ***/
 /*** ::: PROFILE PAGE AREA ::: ***/
 /*** ::::::::::::::::::::::::: ***/
 #profile_page a { text-decoration:none; }
 #profile_page .detail { color:#888fa2 }

 #profile_page .section_head, div.username,
 #profile_page .section,
 #profile_page .section_body_title,
 #profile_page .table th { color: var(--light); }
 
 
 /*** ::: EDIT PROFILE ::: ***/
 body#page_manageprofile .section_head,
 body#page_manageprofile div.username {
  background-color: var(--accentD);
  color: var(--light);
  border-bottom: 3px solid var(--dark);
 }
 
 body#page_manageprofile .field_block {
   border-bottom: 3px solid var(--dark);
 }
 body#page_manageprofile .field_block .field_name {
  color: var(--lightB);
  background-color: #3d4359;
 }
 body#page_manageprofile .section_subhead {
   border-bottom: none;
 }
 body#page_manageprofile textarea {
   width: 100% !important;
 }
 body#page_manageprofile td.field_name + td > div {
   border: none !important;
 }
 
 
 /*** :::   SETTINGS PAGE   ::: ***/
 /*** ::::::::::::::::::::::::: ***/
 #settings_page .tablist .tab a { border:none; background: var(--accentL); }
 #settings_page .tablist .tab a:hover,
 #settings_page .tablist .tab a.active { border:none; background: var(--accentD); }
 
 .odd, 
 tr.odd th, 
 tr.odd td { background: transparent; }
 
 .even, 
 tr.even th, 
 tr.even td { background: var(--accentD); }
 
 #cf-select, #cf-edit, #cf-filtopts, #cf-intro {
   margin: 10px 0;
   padding: 10px;
   background: var(--accentL);
   border: 1px solid var(--lightB);
 }
 
 
  /*** ::: ENTRY & COMMENTS ::: ***/
 /*** ::::::::::::::::::::::::: ***/
 .entry .header {
   background: transparent;
 }
 .entry .action-box .inner {
   background: var(--accentL);
   border: 1px solid var(--lightB);
 }
 .comment-depth-odd > .dwexpcomment .header .comment-info, .comment-depth-odd > .dwexpcomment .header .userpic {
   background: var(--accentL);
   border: 1px solid var(--dark);
 }
 .comment-depth-even > .dwexpcomment .header .comment-info, .comment-depth-even > .dwexpcomment .header .userpic {
   background: var(--accentD);
   border: 1px solid var(--dark);
 }
 
 
  /**...