Template:Trigate Major Sophont Summary: Difference between revisions

Template page
No edit summary
Tag: Reverted
No edit summary
 
(15 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* Tooltips
<includeonly>
**************************************************************/
    <!--    <templatestyles src="Trigate_Major_Sophont_Summary/styles.css" /> -->
.tooltipcursor {
    <div class="infobox">
cursor: help;
        <div class="summary_header"><span class="header_text">Summary</span></div>
}
            <table class="table" id="trigate_planar_sophont_summary">
 
                <tr style="text-align:left;vertical-align:middle">
.tooltip {
                    <td style="vertical-align: middle; font-weight: bold; width: 14rem;"><span style="vertical-align:middle;padding-right:2.5rem;"><i class="fa-duotone fa-handshake-angle fa-fw"></i> Status</span></td>
text-decoration-line: underline;
                    <td style="color: {{{factioncolor}}}; align: center;"> <img src="{{{image}}}" style="width: 64px; height: 64px;" class="tooltip" title="{{{status}}}" /> </td>
text-decoration-style: dotted;
                </tr>
text-decoration-skip-ink: auto;
                <tr>
font-weight: bold;
                    <td class="table_noborder" colspan="2" style="padding: 0.5rem 0px 0.5rem 0px;"></td>
}
                </tr>
 
                <tr style="text-align:left;vertical-align:middle">
/* Infobox
                    <td style="vertical-align:middle; font-weight: bold;"><span style="vertical-align:middle;padding-right:2.5rem;"><i class="fa-duotone fa-language fa-fw"></i> Xenonym</span></td>
**************************************************************/
                    <td style="vertical-align:middle; font-style: oblique;">{{{xenonym}}}</td>
div.mw-parser-output > div.infobox {
                </tr>
min-width: 316px;
                <tr style="text-align:left;vertical-align:middle">
max-width: 28vw;
                    <td style="vertical-align:middle; font-weight: bold;"><span style="vertical-align:middle;padding-right:2.5rem;"><i class="fa-duotone fa-signature fa-fw"></i> Autonym</span></td>
box-sizing: border-box;
                    <td style="vertical-align:middle; font-weight: bold; font-style: oblique;">{{{autonym}}}</td>
margin: 0 0.2rem 0.4rem 1.4rem;
                </tr>
background-color: var( --color-surface-1 );
                <tr>
border-radius: var( --border-radius--medium );
                    <td class="table_noborder" colspan="2" style="padding: 0.5rem 0px 0.5rem 0px;"></td>
box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.03 ), 0 1px 2px rgba( 0, 0, 0, 0.06 );
                </tr>
font-size: 0.875rem;
                <tr style="text-align:left;vertical-align:middle">
transition: box-shadow 0.2s ease;
                    <td style="vertical-align:middle; font-weight: bold;"><span style="vertical-align:middle;padding-right:2.5rem;"><i class="fa-duotone fa-globe fa-fw"></i> Home Plane</span></td>
clear: right;
                    <td style="vertical-align:middle; font-style: oblique;">{{{homeplane}}}</td>
float: right;
                </tr>
overflow: hidden;
                <tr>
 
                    <td class="table_noborder" colspan="2" style="padding: 0.5rem 0px 0.5rem 0px;"></td>
    &:first-child {
                </tr>
        margin-top: 0;  
                <tr style="text-align:left;vertical-align:middle">
    }
                    <td style="vertical-align:middle; font-weight: bold;"><span style="vertical-align:middle;padding-right:2.5rem;"><i class="fa-duotone fa-person-walking fa-fw"></i> Morphology</span></td>
    &:last-child {
                    <td style="vertical-align:middle; font-style: oblique;">{{{morphology}}}</td>
        margin-bottom: 0;  
                </tr>
    }
                <tr style="text-align:left;vertical-align:middle">
    &:hover {
                    <td style="vertical-align:middle; font-weight: bold;"><span style="vertical-align:middle;padding-right:2.5rem;"><i class="fa-duotone fa-person-circle-question fa-fw"></i> Typoid</span></td>
    box-shadow: 0 10px 20px rgba( 0, 0, 0, 0.0475 ), 0 6px 6px rgba( 0, 0, 0, 0.0575 );
                    <td style="vertical-align:middle; font-style: oblique;">{{{typoid}}}</td>
     }
                </tr>
                <tr>
                    <td class="table_noborder" colspan="2" style="padding: 0.5rem 0px 0.5rem 0px;"></td>
                </tr>
                <tr style="text-align:left;vertical-align:middle">
                    <td style="vertical-align:middle; font-weight: bold;"><span style="vertical-align:middle;padding-right:2.5rem;"><i class="fa-duotone fa-hourglass-end fa-fw"></i> Lifespan</span></td>
                    <td style="vertical-align:middle; font-style: oblique;">{{{lifespan}}}</td>
                </tr>
                <tr>
                    <td class="table_noborder" colspan="2" style="padding: 0.5rem 0px 0.5rem 0px;"></td>
                </tr>
                <tr style="text-align:left;vertical-align:middle">
                    <td style="font-weight: bold;"><span style="vertical-align:middle;padding-right:2.5rem;"><i class="fa-duotone fa-ruler-vertical fa-fw"></i> Height Data</span></td>
                    <td style="vertical-align:middle; font-style: oblique;">{{{height}}}</td>
                </tr>
                <tr>
                    <td class="table_noborder" colspan="2" style="padding: 0.5rem 0px 0.5rem 0px;"></td>
                </tr>
                <tr style="text-align:left;vertical-align:middle">
                    <td style="vertical-align:middle; font-weight: bold;"><span style="vertical-align:middle;padding-right:2.5rem;"><i class="fa-duotone fa-weight-hanging fa-fw"></i> Weight Data</span></td>
                    <td style="vertical-align:middle; font-style: oblique;">{{{weight}}}</td>
                </tr>
                <tr>
                    <td class="table_noborder" colspan="2" style="padding: 0.5rem 0px 0.5rem 0px;"></td>
                </tr>
                <tr style="text-align:left;vertical-align:middle">
                    <td style="vertical-align:middle; font-weight: bold;"><span style="vertical-align:middle;padding-right:2.5rem;"><i class="fa-duotone fa-palette fa-fw"></i> {{{skintype}}} Colors</span></td>
                    <td style="vertical-align:middle; font-style: oblique;">{{{skincolors}}}</td>
                </tr>
                <tr>
                    <td class="table_noborder" colspan="2" style="padding: 0.5rem 0px 0.5rem 0px;"></td>
                </tr>
                <tr>
                    <td style="vertical-align:middle; font-weight: bold;"><span style="vertical-align:middle;padding-right:2.5rem;"><i class="fa-duotone fa-palette fa-fw"></i> {{{hairtype}}} Colors</span></td>
                    <td style="vertical-align:middle; font-style: oblique;">{{{haircolors}}}</td>
                </tr>
                <tr>
                    <td class="table_noborder" colspan="2" style="padding: 0.5rem 0px 0.5rem 0px;"></td>
                </tr>
                <tr>
                    <td style="vertical-align:middle; font-weight: bold;"><span style="vertical-align:middle;padding-right:2.5rem;"><i class="fa-duotone fa-palette fa-fw"></i> Eye Colors</span></td>
                    <td style="vertical-align:middle; font-style: oblique;">{{{eyecolors}}}</td>
                </tr>
                <tr>
                    <td class="table_noborder" colspan="2" style="padding: 0.5rem 0px 0.5rem 0px;"></td>
                </tr>
                <tr>
                    <td style="vertical-align:middle; font-weight: bold;"><span style="vertical-align:middle;padding-right:2.5rem;"><i class="fa-duotone fa-fingerprint fa-fw"></i> Physical Distinctions</span></td>
                    <td style="vertical-align:middle; font-style: oblique;">{{{distinctions}}}</td>
                </tr>
                <tr>
                    <td class="table_noborder" colspan="2" style="padding: 0.5rem 0px 0.5rem 0px;"></td>
                </tr>
                <tr>
                    <td style="vertical-align:middle; font-weight: bold;"><span style="vertical-align:middle;padding-right:2.5rem;"><i class="fa-duotone fa-magnifying-glass fa-fw"></i> Properties</span></td>
                    <td style="vertical-align:middle; font-style: oblique;">{{{properties}}}</td>
                </tr>
            </table>
        </div>
     </includeonly>
      
      
     table.trigate_major_sophont_summary {
     <noinclude>
        background: none;
        <pre>
        margin: 1.25rem auto auto auto;
            {{Trigate Major Sophont Summary
 
            |image            = enter the link to an image here as [[Image:imagename|thumb]]
        tr.even, tr.alt, tr:nth-of-type(even) {
            |xenonym          = enter the actual name of the sophont (e.g. Karayib Elf, etc.) [Xenonym = Foreign Name]
             background: none;
             |autonym          = enter the names that the sophont refers to themselves as [Autonym = Self Name]
        }
             |factioncolor    = enter the color for the faction (e.g. #598CBF)
 
            |bgcolor          = enter hex code to use for table's colored backgrounds (e.g. #77bbff)
        td:first-child {
             |status          = enter the sophont's standing with the council or other status
             border-right: 0.1em solid #ccc;
            |homeplane        = enter the sophont's home plane
        }
            |morphology      = enter the sophont's morphology (e.g. bilateral mammalian tetrapodal biped) <!-- https://wiki.travellerrpg.com/Category:Lifeform -->
 
            |typoid          = enter the sophont's typoid classification (e.g. mammaloid), you can see more on the [:Category:Typoid] page.
        td.table_noborder {
            |lifespan         = enter the sophont's typical lifespan, and periods (e.g. child, mature, elder, etc.)
             border-right: none;
             |height          = enter the sophont's average height, followed by min/max
        }
             |weight          = enter the sophont's average weight, followed by min/max
 
             |skintype        = type of skin (skin, bark, scales, shell, etc.)
    }
             |skincolors      = colors of skin type
 
             |hairtype         = type of hair (hair, feathers, leaves, etc.)
    /* Summary Header
             |haircolors      = colors of hair type
    **************************************************************/
             |eyecolors        = eye colors
    & > div.summary_header {
             |distinctions    = enter appearance distinctions here
        background-attachment: scroll, scroll;
             |properties      = link to the SemanticWiki properties page
        background-clip: border-box, border-box;
             }}
        background-color: rgba(0, 0, 0, 0);
         </pre>
        background-image: linear-gradient( to right, rgba(255, 255, 255, 0), rgb(255, 255, 255) ), url(https://www.zd10.net/images/mediawiki/summary_header.jpg);
     </noinclude>
        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;
    }
}

Latest revision as of 16:19, 18 August 2022


            {{Trigate Major Sophont Summary
            |image            = enter the link to an image here as [[Image:imagename|thumb]]
            |xenonym          = enter the actual name of the sophont (e.g. Karayib Elf, etc.) [Xenonym = Foreign Name]
            |autonym          = enter the names that the sophont refers to themselves as [Autonym = Self Name]
            |factioncolor     = enter the color for the faction (e.g. #598CBF)
            |bgcolor          = enter hex code to use for table's colored backgrounds (e.g. #77bbff)
            |status           = enter the sophont's standing with the council or other status
            |homeplane        = enter the sophont's home plane
            |morphology       = enter the sophont's morphology (e.g. bilateral mammalian tetrapodal biped) <!-- https://wiki.travellerrpg.com/Category:Lifeform -->
            |typoid           = enter the sophont's typoid classification (e.g. mammaloid), you can see more on the [:Category:Typoid] page.
            |lifespan         = enter the sophont's typical lifespan, and periods (e.g. child, mature, elder, etc.)
            |height           = enter the sophont's average height, followed by min/max
            |weight           = enter the sophont's average weight, followed by min/max
            |skintype         = type of skin (skin, bark, scales, shell, etc.)
            |skincolors       = colors of skin type
            |hairtype         = type of hair (hair, feathers, leaves, etc.)
            |haircolors       = colors of hair type
            |eyecolors        = eye colors
            |distinctions     = enter appearance distinctions here
            |properties       = link to the SemanticWiki properties page
            }}
        
We collect cookies to analyze our website traffic and performance; we never collect any personal data.