TVDSB Outlook v3 by michael_harwood

/* ==UserStyle==
@name           TVDSB Outlook v3
@namespace      USO Archive
@author         Michael Harwood
@description    `Style to make TVDSB's version of Microsoft Office Outlook (OWA) look more readable than the various shades of gray that it comes with.`
@version        20211116.0.15
@license        NO-REDISTRIBUTION
@preprocessor   uso
==/UserStyle== */
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain('outlook.office365.com'), domain('outlook.office.com') {
/* User friendly, legible theme for TVDSB Outlook OWA.
 * by Michael Harwood
 * 
 * Most of the changes are to colours: background colours and font colours.
 * Borders were added to separate the various panels more clearly.
 * A few fonts were enlarged a bit.
 * Note the TVDSB top colour bar is #28549b   
 */


/************************************************************/
/*  Outlook renamed all of their classes in 2019 and again a year later.
    This version si 
It has all changed again and I can't remember what I called the different sections of the email screen.

<TOP HEADER> -- ignore this
<LEFT-TOOLBAR>LEFT-PANE <SEPARATOR> RIGHT-PANE

RIGHT-PANE:
    HEADER-BUTTONS
    <separator>
    EMAIL LIST
    <separator>
    EMAIL TEXT
*/


/* LEFT-PANE */
/******* EMAIL : FOLDERS (left most pane) *****
  I'm not other stuff from V2: font, searches, number of unread ...
*/

/* outer background:*/
html[dir] ._1pt2s8kmwigdIS44ocdqXr {
    background: #ffecb3;
 }
/* inner background */
._3C_8ayHGXNsdPaNlFMjknh, ._27ez0T3rFyDxSyrYsEcbPL, ._24FpkalvW30l66zFUdkI8G {
     background-color: #ffecb3;
    }

/* favourites | folders | groups */
._1PkXPyxM3Hhk5H6YNvwMa1 {
    background-color: #eca345;
 }

/* left section SEPARATOR */
html[dir="ltr"] ._1mmhFz6xbEHFv6FfTUKPW2 {
    border-right: 0;
}
/* right section SEPARATOR */
html[dir="ltr"]  ._3O5VW6cr2qOqPhMqw-gxyk, .css-159{
    border-left: darkred solid 2px;
}

/****************************************/
/* RIGHT PANE */

/* top separator */
.root-179 {
    border-bottom: 1px solid darkblue;
}
/* email list */

/******* EMAIL : LISTING (top right pane) -- begin ******/
/* border around whole pane*/
/*
html[dir] ._103OfEN9Q5mN9TrgGsjrrT {
    border-top: 3px solid #28549b;
    border-bottom: 3px solid #28549b;
  }
*/
/* border under "INBOX"  heading */
html[dir="ltr"] ._1uc9W37WlJx6L-bgiuqIhO._38GuSEuICuQLi2_ckojayK {
    border-bottom: 1px solid  #28549b;
}

._2N-cXOVWPZqKM7jluVGWgY, ._1MyMHb7xeJNcCw4zVXpyUf {
    font-weight:bold;
    color: #197b19;
}
/* for new, unread email UNCONFIRMED */
  .ms-bgc-ts
  {
    background-color: red;
  }

/* line to indicate that email is in thread. click to expand thread. NO, there is already an icon there */
/*._lvv_G{
    border-top: 1px solid green;
}*/

/* try and separate emails in this pane */
  ._lvv_w, ._lvv_A, ._lvv_B, ._lvv_x
  {
    border-bottom: 1px solid #666;
  }
/* ._lvv_w, ._lvv_A, ._lvv_B, ._lvv_x, .listItemDefaultBackground { */

/* subjects of emails in list, and author of emails in groups */
/* ... subject in email only */
  ._lvv_J .ms-font-l
  {
  /* or ._lvv_S */
 /*   font-size: 17px; */
    font-size: inherit;
    color: #119;
  }

/* delete items: add separator */
  ._lvv_H1, ._lvv_I1, ._lvv_J1
  {
    border-bottom: 1px solid #666;
  }

/*...... EMAIL : LISTING (top right pane) -- end    .....*/


/* separator*/
._3PlNpKPPQchwjIYfcUSrwi, ._103OfEN9Q5mN9TrgGsjrrT {
 /*   border-bottom: 1px solid #666; */
}
html[dir] ._103OfEN9Q5mN9TrgGsjrrT {
  /*  border-bottom: 1px solid #28549b; */
}
._3PlNpKPPQchwjIYfcUSrwi {
     border-bottom: 1px solid #666;
}

/* EMAIL TEXT: BOTTOM RIGHT PANE  */  

/* un-read email */
html[dir="ltr"] ._1n2-cmjz7wai2ImcUAHRgH._1yeTnoNkSL8TQYVNlv8s43 {
 border-left-color:red;
}

/* Email text - bottom right pane */
/* remove margin for email title */
html[dir="ltr"] ._1sKGlG3BuP76PgghrpL-7A._26ceFS08dxvERKBMQpnbYx {
    margin: 0px 20px 0 0px;
}
/* and for email body */
html[dir="ltr"] ._3e6avngts6lCp_IMAb2zlZ {
    margin: 0; 
    /* doesn't work because they use a style="" attribute */

}

/****************************************************/
/* IF Reading pane is on the RIGHT (instead of below) */
/* separator on left side of the right pane */
html[dir="ltr"] ._2qM5JFJlSDFbw17aZw2PSp, html[dir="rtl"] ._2qM5JFJlSDFbw17aZw2PSp {
    border-left: 1px solid #666;
}
/* or on the right of the middle pane */
html[dir="ltr"] ._3TShXKcugWppOYRofyKkhd, html[dir="ltr"] ._2ZzIEsVWXP6qn3zS_o2QEr {
   /* border-right: 1px solid #ff8409;*/
}
/* set font for title */
._2bnn4NUZa-NanNIO4GItP0._3FNHkYLZYD6Y3-QNc7ZBo2 {
    color: darkgreen;
    border-bottom: 1px solid #666;
}

/* now the email listing is in the middle. Set the font of titles there too */
._1y3FkDsOHuxLnfkzQ8Dx7o {
    font-weight: 600;
    color: darkgreen;
}
/* and the background colour (only works for topmost element ("Inbox" label) */
html[dir="ltr"] ._3TShXKcugWppOYRofyKkhd, html[dir="ltr"] ._2ZzIEsVWXP6qn3zS_o2QEr {
    background-color: lemonchiffon;
}

/****************************************************/
/* Formatting emails in separate popup window */
/* sender */
/* * This is the flexbox. We need to make it narrower as it's wider than the "main text" section */
html[dir] ._3BhETwd_gm-1r4F5l6tY1P._3ugbQtWof-e4-8rgAmgncA {
    margin-right:15px;
    
}
._1NHH-FGAZfdicEopEr7y36 { 
   margin-right:10px;
}

html[dir="ltr"] ._3BhETwd_gm-1r4F5l6tY1P {
    background-color: #FEF7DB;
    padding-left:5px;
    
}
/* all MS tool buttons there */
.body-160, .body-155, .body-154 {
   background-color: #FEF7DB;
}
/* othertop - not working */
/*  this is too big an element! 
._2B6rOKCNnchpb1GyT5hPGU {
    background-color: #FEF7DB;
    }
*/
/* dividing line */
._1-UcMe9FxdTvTnrB4dmn8k {  
    background-color: #FEF7DB;
    width:98%;
}
/* To: */
html[dir] ._2z1krfLATpxXoXIkaWMKrg._30BNtptrv6TdhKPPlo3ufF {
    background-color: #FEF7DB;
    padding-left:5px;
    margin-right:15px;
  
}
/* main text */
html[dir="ltr"] .Vzh05neKQu87GUy5UviOc {
    background-color: #FEFECB;
    padding:5px;

}

/*  colour the mail and calendar buttons on the left */
#LeftRailItem_Mail {
    border:1px solid #fdcb03;
    background-color:#ffff76;
}
#LeftRailItem_Calendar{
    border: 1px solid #119;
    background-color:#8ff4f4ba;
}
}