Toggle search
Toggle menu
1K
1K
32
6.2K
The Petit Planet Wiki
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

MediaWiki:Gadget-MessageBox.css: Difference between revisions

MediaWiki interface page
More actions
Browse history interactively
← Older edit
m Stevium moved page MediaWiki:MessageBox.css to Template:MessageBox/styles.css without leaving a redirect: Changing how the MessageBox stylesheet is loaded: now uses TemplateStyles instead of @import
m Stevium moved page MediaWiki:MessageBox.css to MediaWiki:Gadget-MessageBox.css without leaving a redirect
 
(3 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* See [[MediaWiki:Common.css]] for CSS variable definitions. */
.mbox {
.mbox {
    --type-important: 185, 102, 102;
    --type-moderate: 228, 159, 109;
    --type-minor: 231, 202, 95;
    --stub: 235, 220, 150;        /* softer warm yellow */
    --cbt: 122, 160, 145;        /* muted green-teal */
    --mild: 225, 155, 130;      /* gentle coral */
    --removed: 160, 85, 105;    /* dusty rose-wine */
    --cleanup: 185, 105, 115;    /* muted raspberry */
    --construct: 235, 190, 145;  /* peachy tan */
    --upcoming: 150, 135, 175;  /* soft lavender purple */
    --unofficialtl: 115, 210, 205; /* calm aqua */
    --lua: 135, 150, 220;        /* muted periwinkle */
    --css: 125, 160, 230;        /* softened sky blue */
    --js: 245, 230, 140;        /* pastel golden yellow */
    --sandbox: 185, 215, 205;    /* pale misty mint */
    --names: 190, 225, 225;      /* very light cyan tint */
    --changehistory: 135, 155, 200; /* softened steel blue */
    --opacity: 0.15;
     display: flex;
     display: flex;
     position: relative;
     position: relative;
     background-color: var(--custom-mbox-bg);
     background-color: var(--background-color-2);
     border: 1px solid var(--background-color-10);
     border: 1px solid var(--border-color-base);
     border-radius: 10px;
     border-radius: 10px;
     margin-bottom: 5px;
     margin-bottom: 5px;
Line 29: Line 10:
}
}


.mbox{
.mbox {
     .mbox-type-important { border-color: var(--type-important); }
     .mbox-type-important { border-color: var(--type-important); }
     .mbox-type-moderate { border-color: var(--type-moderate); }
     .mbox-type-moderate { border-color: var(--type-moderate); }
     .mbox-type-minor { border-color: var(--type-minor);}
     .mbox-type-minor { border-color: var(--type-minor);}
}
}


.mbox__content {
.mbox__content {
Line 76: Line 56:
     text-align: center;
     text-align: center;
     padding-left: 15px;
     padding-left: 15px;
     border-left: 1px solid #d6d6d6;
     border-left: 1px solid var(--border-color-base);
}
}


Line 86: Line 66:
     font-weight: bold;
     font-weight: bold;
     font-size: 16px;
     font-size: 16px;
    color: var(--page-text-color);
     cursor: pointer;
     cursor: pointer;
     transition: all .15s ease-in;
     transition: all .15s ease-in;
      
      
     &:hover {
     &:hover {
         color: var(--theme-color-9);
         color: var(--color-progressive);
     }
     }
      
      
Line 111: Line 90:
/* Styling */
/* Styling */
.mbox__content__text {
.mbox__content__text {
padding-right: 10px;
    padding-right: 10px;
}
}


.mbox__content__aside , .mbox__content__text__comment {
.mbox__content__aside,
line-height: 18px;
.mbox__content__text__comment {
    line-height: 18px;
}
}


/* STUB */
/* Stub */
.mbox.stub {
.mbox.stub {
border-color: rgb(var(--stub));
    border-color: rgb(var(--stub));
background-color: rgba(var(--stub), var(--opacity));
    background-color: rgba(var(--stub), var(--opacity));
      
      
     .mbox__content__aside {
     .mbox__content__aside {
Line 128: Line 108:
}
}


/* CBT CONTENT */
/* CBT content */
.mbox.CBT {
.mbox.CBT {
border-color: rgb(var(--cbt));
    border-color: rgb(var(--cbt));
background-color: rgba(var(--cbt), var(--opacity));
    background-color: rgba(var(--cbt), var(--opacity));
}
}


/* CHINA ONLY */
/* China only */
.mbox.chinaonly {
.mbox.chinaonly {
   border-color: rgb(var(--construct));
   border-color: rgb(var(--construct));
Line 140: Line 120:
}
}


/* CLEANUP */
/* Clean up */
.mbox.cleanup {
.mbox.cleanup {
border-color: rgb(var(--cleanup));
    border-color: rgb(var(--cleanup));
background-color: rgba(var(--cleanup), var(--opacity));
    background-color: rgba(var(--cleanup), var(--opacity));
      
      
     .mbox__content__aside {
     .mbox__content__aside {
Line 151: Line 131:


.mbox.cleanup-mild {
.mbox.cleanup-mild {
border-color: rgb(var(--mild));
    border-color: rgb(var(--mild));
background-color: rgba(var(--cleanup), var(--opacity));
    background-color: rgba(var(--cleanup), var(--opacity));
      
      
     .mbox__content__aside {
     .mbox__content__aside {
Line 160: Line 140:


.mbox.cleanup-top {
.mbox.cleanup-top {
border-color: rgb(var(--mild));
    border-color: rgb(var(--mild));
background-color: rgba(var(--cleanup), var(--opacity));
    background-color: rgba(var(--cleanup), var(--opacity));
      
      
     .mbox__content__aside {
     .mbox__content__aside {
Line 168: Line 148:
}
}


/* REMOVED */
/* Removed */
.mbox.removed {
.mbox.removed {
border-color: rgb(var(--removed));
    border-color: rgb(var(--removed));
background-color: rgba(var(--removed), var(--opacity));
    background-color: rgba(var(--removed), var(--opacity));
}
}


/* SPOILER */
/* Spoiler */
.mbox.spoiler {
.mbox.spoiler {
border-color: rgb(var(--cleanup));
    border-color: rgb(var(--cleanup));
background-color: rgba(var(--cleanup), var(--opacity));
    background-color: rgba(var(--cleanup), var(--opacity));
}
}


/* UNDER CONSTRUCTION */
/* Under construction */
.mbox.underconstruction {
.mbox.underconstruction {
border-color: rgb(var(--construct));
    border-color: rgb(var(--construct));
background-color: rgba(var(--construct), var(--opacity));
    background-color: rgba(var(--construct), var(--opacity));
}
}


.mbox.underconstruction .mbox__content__aside {
.mbox.underconstruction .mbox__content__aside {
border-color: rgb(var(--construct));
    border-color: rgb(var(--construct));
}
}


/* UPCOMING */
/* Upcoming */
.mbox.upcoming {
.mbox.upcoming {
border-color: rgb(var(--upcoming));
    border-color: rgb(var(--upcoming));
background-color: rgba(var(--upcoming), var(--opacity));
    background-color: rgba(var(--upcoming), var(--opacity));
}
}


/* UNOFFICIAL TL */
/* Unofficial translation */
.mbox.unofficial-tl {
.mbox.unofficial-tl {
border-color: rgb(var(--unofficialtl));
    border-color: rgb(var(--unofficialtl));
background-color: rgba(var(--unofficialtl), var(--opacity));
    background-color: rgba(var(--unofficialtl), var(--opacity));
}
}


/* LUA */
/* Lua */
.mbox.lua {
.mbox.lua {
border-color: rgb(var(--lua));
    border-color: rgb(var(--lua));
background-color: rgba(var(--lua), var(--opacity));
    background-color: rgba(var(--lua), var(--opacity));
}
}


/* CSS */
/* CSS */
.mbox.css {
.mbox.css {
border-color: rgb(var(--css));
    border-color: rgb(var(--css));
background-color: rgba(var(--css), var(--opacity));
    background-color: rgba(var(--css), var(--opacity));
}
}


/* JS */
/* JS */
.mbox.js {
.mbox.js {
border-color: rgb(var(--js));
    border-color: rgb(var(--js));
background-color: rgba(var(--js), var(--opacity));
    background-color: rgba(var(--js), var(--opacity));
}
}


/* SANDBOX */
/* Sandbox */
.mbox.sandbox {
.mbox.sandbox {
border-color: rgb(var(--sandbox));
    border-color: rgb(var(--sandbox));
background-color: rgba(var(--sandbox), var(--opacity));
    background-color: rgba(var(--sandbox), var(--opacity));
}
}


Line 230: Line 210:
}
}


/* High Risk */
/* High risk */
.mbox.highrisk {
.mbox.highrisk {
border-color: rgb(var(--type-important));
    border-color: rgb(var(--type-important));
background-color: rgba(var(--type-important), var(--opacity));
    background-color: rgba(var(--type-important), var(--opacity));
}
}


.mbox.highrisk .mbox__content__aside {
.mbox.highrisk .mbox__content__aside {
border-color: rgb(var(--type-important));
    border-color: rgb(var(--type-important));
}
}


/* NAMEORDER */
/* Name order */
.mbox.nameorder {
.mbox.nameorder {
border-color: rgb(var(--names));
    border-color: rgb(var(--names));
background-color: rgba(var(--names), var(--opacity));
    background-color: rgba(var(--names), var(--opacity));
}
}


/* Change History */
/* Change history */
.mbox.changehistory {
.mbox.changehistory {
border-color: rgb(var(--changehistory));
    border-color: rgb(var(--changehistory));
background-color: rgba(var(--changehistory), var(--opacity));
    background-color: rgba(var(--changehistory), var(--opacity));
}
}


/* Broken media */
.mbox .mw-broken-media {
.mbox .mw-broken-media {
     display: inline-flex;
     display: inline-flex;
Retrieved from "https://petitplanet.wiki/MediaWiki:Gadget-MessageBox.css"