Fullwidth by Lowe by meteowrong

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

@-moz-document domain("dreamwidth.org") {
 
 /*** this is a super garbage fix overall
      don't look at me
      also this style currently only works on tropo red or tropo blue 
      so watch out ***/
 
 body, body * { box-sizing: border-box; }
 body.tropo { background: #e6e6e6; }
 body.tropo #canvas, #page_inbox #canvas,
 body.tropo #page, #page_inbox #page, 
 body.tropo #content, #page_inbox #content, 
 body.tropo .row, #page_inbox .row, 
 body.tropo .entry, #page_inbox .entry, 
 body.tropo #comments, #page_inbox #comments, 
 body.tropo .reply-page-wrapper, #page_inbox .reply-page-wrapper, 
 body.tropo #talkpost-wrapper, #page_inbox #talkpost-wrapper,
 body.tropo nav, #page_inbox nav,
 body.tropo footer, #page_inbox footer { margin:0 auto; max-width: 100% !important; }
 
 body.tropo #canvas, #page_inbox #canvas {
  width: 100%;
  padding: 0;
  background: #e6e6e6;
 }
 body.tropo #page > div,
 #page_inbox #page > div { padding: 0 5%; }
 body.tropo #page .entry,
 #page_inbox  #page .entry { margin: 2.5rem auto 0 !important; }
 body.tropo #content,
 #page_inbox #content { margin: 3.5rem auto 2.5rem !important; }
 
 body.tropo.tropo-red { --accentL:#d7a8ac; --accentD:#b5464b; }
 body.tropo .tab-header,
 body.tropo .action-bar,
 body.tropo footer { background: var(--accentL); }
 body.tropo .tab-header { border-color: var(--accentD); border-left:none; border-right:none; }
 body.tropo #canvas { border-color: var(--accentD); }
 body.tropo h1#content { color: var(--accentD); }
 body.tropo .tablist .tab a { border:none; background: var(--accentD); }
 body.tropo #profile_page .username,
 body.tropo #profile_page .actions li,
 body.tropo #profile_page .section,
 body.tropo #profile_page .username { background:#ccc !important; border-bottom:var(--accentD); }
 
 body.tropo.tropo-purple { --accentL:#bebcd9; --accentD:#31326a; }
 body.tropo .tab-header,
 body.tropo .action-bar,
 body.tropo .highlight, 
 body.tropo .highlight-box,
 body.tropo .panel.callout,
 body.tropo footer { background: var(--accentL); }
 body.tropo .tab-header { border-color: var(--accentD); border-left:none; border-right:none; }
 body.tropo #canvas { border-color: var(--accentD); }
 body.tropo h1#content { color: var(--accentD); }
 body.tropo .tablist .tab a { border:none; background: var(--accentD); }
 body.tropo #profile_page .username,
 body.tropo #profile_page .actions li,
 body.tropo #profile_page .section,
 body.tropo #profile_page .username { background:var(--accentL) !important; border-bottom:var(--accentD); }
 

 /*** the worst part
      why are there two different codes for the header 
      based on what page i'm on??? ***/
 body.tropo #account-links-text,
 body.tropo #account-links-text .row,
 #page_inbox #account-links-text,
 #page_inbox #account-links-text .row { padding: 0; }
 
 body.tropo #account-links.row,
 #page_inbox #account-links.row { padding: 0 !important; }
 body.tropo #account-links,
 #page_inbox #account-links {
  display: flex;
  flex-flow: row-reverse nowrap;
  gap: 10px;
  padding: 1rem !important;
 }
 body.tropo #account-links-userpic img,
 #page_inbox #account-links-userpic img { margin: 0; }
 body.tropo #account-links-text,
 #page_inbox #account-links-text { max-width: 70% !important; }
 
 body.tropo #account-links-text ul,
 #page_inbox #account-links-text ul {
  float: right;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-end;
  width: 70%;
 }
 body.tropo #account-links-userpic,
 #page_inbox #account-links-userpic { margin: 0; }
    
 body.tropo .row .row,
 #page_inbox .row .row { margin: 0; }
 
 body.tropo #page > #account-links {
  right: 5%;
 }
 
 
 /*** aesthetic stuff and also bugfixing because
      dreamwidth code is actually the absolute worst, christ ***/
 nav div[role="search"] { display: none; }
    
 body.tropo nav {
  padding: 0 5%;
  background: #ddd !important;
  border-top: .5em solid var(--accentD);
 }
 body.tropo.tropo-red nav { background: #ddd !important; }
 body.tropo.tropo-purple nav { background: var(--accentL) !important; }
 #page_inbox nav { padding: 0 5%; }
    
 body.tropo nav, 
 body.tropo nav.top-bar, 
 body.tropo footer,
 #page_inbox nav,
 #page_inbox nav.top-bar,
 #page_inbox footer {
  height: auto;
  background-image: none;
 }

 body.tropo.tropo-purple nav[role="navigation"] ul li.hover ul { padding-right: 0; }
 section.top-bar-section ul > li { background: transparent !important; }
 body.tropo.tropo-red section.top-bar-section ul.left > li > a { background: #ddd; }
 body.tropo.tropo-purple section.top-bar-section ul.left > li > a { background: var(--accentL); }
 section.top-bar-section ul.left > li > a:hover { background: var(--accentD) !important; }

 body.tropo footer,
 #page_inbox footer { padding: 1rem; }
 body.tropo footer ul,
 #page_inbox footer ul { display: flex; flex-flow: row wrap; justify-content: center; }
 body.tropo footer p,
 #page_inbox footer p { text-align: center; }
 
 body.tropo nav .appwidget,
 #page_inbox nav .appwidget {
  display: grid;
  align-items: center;
  height: 2.5em;
  margin-bottom: 0;
 }
 body.tropo #masthead,
 #page_inbox #masthead { 
  display:grid; 
  align-items:center; 
  padding:0 0 0 5%; 
  border: none; 
  background:#e6e6e6; 
 }
    
 body.tropo #shim-alpha,
 #page_inbox #shim-alpha { border: none; }
    
 body.tropo #masthead #logo,
 #page_inbox #masthead #logo { 
   margin-left: 5%;
   mix-blend-mode:multiply;
 }
    

 .odd, tr.odd th, tr.odd td { background: #eaeaea; }
 .even, tr.even th, tr.even td { background: #dfdfdf; }
 
    
 @media screen and ( max-width: 600px ) {
  body.tropo #masthead #logo,
  #page_inbox #masthead #logo { display: none; }
 }
    
    
 
 /*** extra stuff for my own amusement ***/
 #updateForm { max-width: 100%; }
 button, .button { box-shadow: none; text-transform: capitalize; }
 ul.right.nav-search { display: none; }
 
 
 
 
}