Template:Trigate Major Sophont Summary

/* Tooltips

• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • /

.tooltipcursor { cursor: help; }

.tooltip { text-decoration-line: underline; text-decoration-style: dotted; text-decoration-skip-ink: auto; font-weight: bold; }

/* Infobox

• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • /

div.mw-parser-output > div.infobox { min-width: 316px; max-width: 28vw; box-sizing: border-box; margin: 0 0.2rem 0.4rem 1.4rem; background-color: var( --color-surface-1 ); border-radius: var( --border-radius--medium ); box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.03 ), 0 1px 2px rgba( 0, 0, 0, 0.06 ); font-size: 0.875rem; transition: box-shadow 0.2s ease; clear: right; float: right; overflow: hidden;

   &:first-child {
       margin-top: 0; 
   }
   &:last-child {
       margin-bottom: 0; 
   }
   &:hover {

box-shadow: 0 10px 20px rgba( 0, 0, 0, 0.0475 ), 0 6px 6px rgba( 0, 0, 0, 0.0575 );

   }
   
   table.trigate_major_sophont_summary {
       background: none;
       margin: 1.25rem auto auto auto;

       tr.even, tr.alt, tr:nth-of-type(even) {
           background: none;
       }

       td:first-child {
           border-right: 0.1em solid #ccc;
       }

       td.table_noborder {
           border-right: none;
       }

   }

   /* Summary Header
   **************************************************************/
   & > div.summary_header {
       background-attachment: scroll, scroll;
       background-clip: border-box, border-box;
       background-color: rgba(0, 0, 0, 0);
       background-image: linear-gradient( to right, rgba(255, 255, 255, 0), rgb(255, 255, 255) ), url();
       background-origin: padding-box, padding-box;
       background-position-x: 0%, 30%;
       background-position-y: 0%, 60%;
       background-size: auto, auto;
       box-sizing: border-box;
       color: var(--color-base--emphasized);
       cursor: auto;
       direction: ltr;
       display: flex;
       font-size: 40px;
       font-style: normal;
       font-weight: 600;
       height: 70px;
       line-height: 40px;
       margin-block-end: 16px;
       margin-block-start: 0px;
       margin-bottom: 16px;
       margin-inline-end: 0px;
       margin-inline-start: 0px;
       margin-left: 0px;
       margin-right: 0px;
       margin-top: 0px;
       padding-bottom: 15px;
       padding-left: 75px;
       padding-right: 25px;
       padding-top: 15px;
       position: relative;
       text-align: left;
       text-rendering: optimizelegibility;
       text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
       text-size-adjust: 100%;
   }

}

@media screen and (max-width: 960px) {

   div.mw-parser-output > div.infobox {
       float: none;
       clear: right;        
       margin: 0 auto 0.4rem auto;
       max-width: 100%;
   }

}

/* Blockquotes

• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • /

@media screen and (max-width: 960px) {

   div.mw-parser-output > blockquote {
       margin-left: auto;
       margin-right: auto;
       max-width: 100%;
   }

}

div.mw-parser-output > blockquote { min-width: 8vw; margin: 0 0 1.25rem; padding: 0.5625rem 1.25rem 0 1.1875rem; border-left: 1px solid #DDDDDD; background-color: var(--color-surface-1); border-radius: var(--border-radius--medium); box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.03 ), 0 1px 2px rgba( 0, 0, 0, 0.06 ); transition: box-shadow 0.2s ease;

   cite {
       display: block;
       font-size: 0.8125rem; 
       
       &:before {
           content: "\2014 \0020"; 
       }

       p {
           line-height: 1.6; 
       }
   }

   &.zak_blockquote {
       display: flex;
       flex-flow: column wrap;
       padding: 15px 20px 15px 45px;
       margin: 0 0 20px;
       position: relative;
       color: var(--color-base);
       /* font-family: Merriweather, serif; */
       line-height: 1.2;
       text-align: justify;
       border-left: 15px solid #697060;

       &:before {

content: "\201C"; /*Unicode for Left Double Quote*/

           font-family: Italic Times, serif;
           font-size: 60px;
           font-weight: bold;
           color: var(--color-base);
           position: absolute;
           left: 10px;
           top: 5px;
       }

       &:after {

/*Reset to make sure*/ content: "";

       }

       &:hover {
           box-shadow: 0 10px 20px rgba( 0, 0, 0, 0.0475 ), 0 6px 6px rgba( 0, 0, 0, 0.0575 );
       }

       em {

font-style: oblique;

       }

       cite {
           display: block;
           margin-top: 5px;
           font-size: 1.1em;

           &:before {

content: "\2014 \2009";

           }
       }
   
       * {

font-size: 0.8em;

       }
   }

   /* Faction Specific Overrides for Blockquotes
   **************************************************************/

   &.zak_blockquote_council {
       /*Borders - (Optional)*/
       border-left: 15px solid #77bbff;
   }

   &.zak_blockquote_friendly_third_party {
       /*Borders - (Optional)*/
       border-left: 15px solid #a2bc13;
   }

   &.zak_blockquote_neutral_third_party {
       /*Borders - (Optional)*/
       border-left: 15px solid #bdb76b;
   }

   &.zak_blockquote_aggressive_third_party {
       /*Borders - (Optional)*/
       border-left: 15px solid #eead0e;
   }

   &.zak_blockquote_recreancy {
       /*Borders - (Optional)*/
       border-left: 15px solid #db2645;
   }

   /* Concept Specific Overrides for Blockquotes
   **************************************************************/

   &.zak_blockquote_concept_mc {
       /*Borders - (Optional)*/
       border-left: 15px solid #8f4700;
   }

   &.zak_blockquote_concept_rc {
       /*Borders - (Optional)*/
       border-left: 15px solid #5cacee;
   }

   &.zak_blockquote_concept_tog {
       /*Borders - (Optional)*/
       border-left: 15px solid #64627f;
   }

   &.zak_blockquote_concept_mu {
       /*Borders - (Optional)*/
       border-left: 15px solid #adadad;
   }

   &.zak_blockquote_concept_potd {
       /*Borders - (Optional)*/
       border-left: 15px solid #ffcc00;
   }

   &.zak_blockquote_concept_motm {
       /*Borders - (Optional)*/
       border-left: 15px solid #ff0066;
   }

   &.zak_blockquote_concept_sn {
       /*Borders - (Optional)*/
       border-left: 15px solid #3385dd;
   }

   &.zak_blockquote_concept_mm {
       /*Borders - (Optional)*/
       border-left: 15px solid #006b6b;
   }

   &.zak_blockquote_concept_tot {
       /*Borders - (Optional)*/
       border-left: 15px solid #ff3300;
   }

   &.zak_blockquote_concept_eaa {
       /*Borders - (Optional)*/
       border-left: 15px solid #00b200;
   }

   &.zak_blockquote_concept_dbd {
       /*Borders - (Optional)*/
       border-left: 15px solid #6600cc;
   }

   &.zak_blockquote_concept_ooo {
       /*Borders - (Optional)*/
       border-left: 15px solid #000000;
   }

   &.zak_blockquote_concept_h {
       /*Borders - (Optional)*/
       border-left: 15px solid #d3d3d3;
   }

}