Template:Mbox/wikitext/styles.css: Difference between revisions

Latest revision as of 13:48, 18 July 2022

/* == Template:mbox/wikitext == */

/* 
* ||- CSS Vars (light)
*/
.mbox-w {
    /*
    * ||| Mbox 
    * The base styling of mbox
    */
    --pre: #f2f2f29a;
    
    --mbox-w-basic-border: #36c;
    --mbox-w-background: #ffffff1a;
    --mbox-w-background--speedy: #fee7e6;
    --mbox-w-border--speedy: #b32424;
    
    --mbox-w-border--delete: #b32424;
    
    --mbox-w-border--content: #f28500;
    
    --mbox-w-border--style: #fc3;
    
    --mbox-w-border--move: #93c;
    
    --mbox-w-border--protection: #a2a9b1;
    
    --mbox-w-border--license: #88a;
    
    --mbox-w-border--featured: #cba135;
    
    /* 
    *  Ambox
    * Article Message BOX
    */
    --ambox-w-border: #a2a9b1;
    --ambox-w-border-left: #36c;
    
    --ambox-w-border-left--speedy: #b32424;
    
    --ambox-w-border-left--delete: #b32424;
    
    --ambox-w-border-left--content: #f28500;
    
    --ambox-w-border-left--style: #fc3;
    
    --ambox-w-border-left--notice: #36c;
    
    --ambox-w-border-left--move: #93c;
    
    --ambox-w-border-left--protection: #a2a9b1;
    
    /* Featured Mbox */
    --ambox-w-border-left--featured: #cba135;
    
    /* 
    * ||| Cmbox
    * Category Message BOX
    */
    --cmbox-w-border: #a2a9b1;
    --cmbox-w-background: #dfe8ff;
    
    /* No speedy, default mbox speedy */
    
    --cmbox-w-background--delete: #fee7e6;
    
    --cmbox-w-background--content: #ffe7ce;
    
    --cmbox-w-background--style:  #fff9db;
    
    --cmbox-w-background--notice: #d8e8ff;
    
    --cmbox-w-background--move: #e4d8ff;
    
    --cmbox-w-background--protection: #efefe1;
    
    /* */
    --tmbox-w-background: #f8eaba;
    
    /*
    * ||| Other mboxes
    * Uses the default styling
    */
}

/* 
* ||- CSS Vars (dark)
*/
.theme-fandomdesktop-dark .mbox-w {
    /*
    * ||| Mbox 
    * The base styling of mbox
    */
    --pre: #585858b5;
    
    --mbox-w-basic-border: #183266;
    --mbox-w-background--speedy: #231515;
    --mbox-w-border--speedy: #661414;
    
    --mbox-w-border--delete: #661414;
    
    --mbox-w-border--content: #ab6005;
    
    --mbox-w-border--style: #ba9422;
    
    --mbox-w-border--notice: #183266;
    --mbox-w-border--move: #6a248c;
    
    --mbox-w-border--protection: #5e6369;
    
    --mbox-w-border--license: #505063;
    
    --mbox-w-border--featured: #9c7b27;
    
    /* 
    *  Ambox
    * Article Message BOX
    */
    --ambox-w-border: #474e57;
    --ambox-w-border-left: #21448a;
    
    --ambox-w-border-left--speedy: #661414;
    
    --ambox-w-border-left--delete: #661414;
    
    --ambox-w-border-left--content: #ab6005;
    
    --ambox-w-border-left--style: #ba9422;
    
    --ambox-w-border-left--notice: #21448a;
    
    --ambox-w-border-left--move: #6a248c;
    
    --ambox-w-border-left--protection: #474e57;
    
    /* Featured Mbox */
    --ambox-w-border-left--featured: #cba135;
    
    /* 
    * ||| Cmbox
    * Category Message BOX
    */
    --cmbox-w-border: #474e57;
    --cmbox-w-background: #363228;
    
    /* No speedy, default mbox speedy */
    
    --cmbox-w-background--delete: #422d2c;
    
    --cmbox-w-background--content: #4f4336;
    
    --cmbox-w-background--style:  #4a4630;
    
    --cmbox-w-background--notice: #252f3d;
    
    --cmbox-w-background--move: #392f4f;
    
    --cmbox-w-background--protection: #3d3d23;
    
    /* |||Tmbox */
    --tmbox-w-background: #3d3003;
    
    /*
    * ||| Other mboxes
    * Uses the default styling
    */
}

/* 
* ||- Main mbox styling
*
*/
.mbox-w {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: auto;
    box-sizing: border-box;
    margin: 4px 5%;
    border-width: 1px;
    border-style: solid;
    background: transparent;
    padding: 0.25em;
    font-size: 95%;
}
 
.mbox-w-small {
    clear: right;
    float: right;
    margin: 4px 0 2px 1em;
    box-sizing: border-box;
    width: 238px;
    font-size: 88%;
    line-height: 1.25em;
}
 
.mbox-w-small.ambox-w {
    clear: left;
    float: left;
    margin: 4px 1em 2px 0;
}
 
.mbox-w pre {
    background-color: var(--pre);
}
 
.mbox-w div.mbox-w-message {
    flex-basis: 100%;
    padding: 0.25em;
    text-align: left;
}
 
.mbox-w .mbox-w-date,
.mbox-w .mbox-w-info {
    font-size:85%;
}
 
.mbox-w div.mbox-w-image {
    padding: 0.25em;
}
 
.ambox-w {
    margin: 0 5%;
    border-color: var(--ambox-w-border);
    border-left: 10px solid var(--ambox-w-border-left);
    background-color: var(--mbox-w-background);
}
 
.cmbox-w {
    border-color: var(--cmbox-w-border);
    background-color: var(--cmbox-w-border);
}
 
.imbox-w {
    border-width: 3px;
    border-color: var(--mbox-w-basic-border);
    background-color: var(--mbox-w-background);
}
 
.xmbox-w {
    border-width: 2px;
    border-color: var(--mbox-w-basic-border);
    border-style: dotted;
    background-color: var(--mbox-w-background);
}
 
.tmbox-w {
    border-width: 2px;
    border-color: var(--mbox-w-basic-border);
    background: var(--tmbox-w-background);
}
 
.ombox-w {
    border-color: var(--mbox-w-basic-border);
    background-color: var(--mbox-w-background);
}
 
.fmbox-w {
    margin: 4px 0;
    background-color: var(--mbox-w-background);
}
 
.mbox-w-small.imbox-w,
.mbox-w-small.xmbox-w,
.mbox-w-small.tmbox-w {
    border-width: 1px;
}
 
.mbox-w-speedy,
.mbox-w-warning {
    border-color: var(--mbox-w-border--speedy);
}
 
.ambox-w.mbox-w-speedy {
    border-color: var(--ambox-w-border);
    border-left-color: var(--ambox-w-border-left--speedy);
}
 
.cmbox-w.mbox-w-speedy,
.xmbox-w.mbox-w-speedy,
.xmbox-w.mbox-w-delete,
.ombox-w.mbox-w-speedy,
.ombox-w.mbox-w-delete {
    border-width: 3px;
}
 
.mbox-w-delete {
    border-color: var(--mbox-w-border--delete);
}
 
.ambox-w.mbox-w-delete {
    border-color: var(--ambox-w-border);
    border-left-color: var(--ambox-w-border-left--delete);
}
 
.cmbox-w.mbox-w-delete {
    border-color: var(--cmbox-w-border);
    background: var(--cmbox-w-background--delete);
}
 
.mbox-w-content {
    border-color: var(--mbox-w-border--content);
}
 
.ambox-w.mbox-w-content {
    border-color: var(--ambox-w-border);
    border-left-color: var(--ambox-w-border-left--content);
}
 
.cmbox-w.mbox-w-content {
    border-color: var(--cmbox-w-border);
    background: var(--cmbox-w-background--content);
}
 
.mbox-w-style {
    border-color: var(--mbox-w-border--style);
}
 
.ambox-w.mbox-w-style {
    border-color: var(--ambox-w-border);
    border-left-color: var(--ambox-w-border-left--style);
}
 
.cmbox-w.mbox-w-style {
    border-color: var(--cmbox-w-border);
    background: var(--cmbox-w-background--style);
}
 
.mbox-w-notice {
    border-color: var(--mbox-w-border--notice);
}
 
.ambox-w.mbox-w-notice {
    border-color: var(--ambox-w-border);
    border-left-color: var(--ambox-w-border-left--notice);
}
 
.cmbox-w.mbox-w-notice {
    border-color: var(--cmbox-w-border);
    background: var(--cmbox-w-background--notice);
}
 
.mbox-w-move {
    border-color: var(--mbox-w-border--move);
}
 
.ambox-w.mbox-w-move {
    border-color: var(--ambox-w-border);
    border-left-color: var(--ambox-w-border-left--move);
}
 
.cmbox-w.mbox-w-move {
    border-color: var(--cmbox-w-border);
    background: var(--cmbox-w-background--move);
}
 
.mbox-w-protection {
    border-color: var(--mbox-w-border--protection);
}
 
.ambox-w.mbox-w-protection {
    border-color: var(--ambox-w-border);
    border-left-color: var(--ambox-w-border-left--protection);
}
 
.cmbox-w.mbox-w-protection {
    border-color: var(--cmbox-w-border);
    background: var(--cmbox-w-background--protection);
}
 
.mbox-w-license {
    border-color: var(--mbox-w-border--license);
}
 
.mbox-w-featured {
    border-color: var(--mbox-w-border--featured);
}
 
.ambox-w.mbox-w-featured {
    border-color: var(--ambox-w-border);
    border-left-color: var(--ambox-w-border-color--featured);
}
 
.ambox-w + .ambox-w {
    margin-top: -1px;
}

@media print {
    .mbox-w { 
        display: none;
    }
} /* no mbox when printing */