User:HM100/monobook.css

/* Keep it syncronized with http://afoundations-revmap.referata.com/w/index.php?title=MediaWiki:Monobook.css If you want to use different styles, add images into this folder and edit image and color metadata by editing the variables below or use our Theme Designer that Requires Explore Scratch Mod */ /* Revmaped Monobook Skin - Named Besto */

/* Variables

NOTE: Color for disabled buttons is ineigable for customizing. Use MediaWiki:Mpisto.css or User:@/mpisto.css where @ is your account name More things will soon be changable with theme designer




 * root {

--background-image:url("https://vignette3.wikia.nocookie.net/candy-crush-saga/images/5/50/Wiki-background/revision/latest?cb=20170108131136") no-repeat; --background-color:#e995ca; --background-size:2200px 1000px; --link-color:#6f027c; --content-bg:#ffffff; --content-color:#020202; --content-border:#580033; --personal-color:#eeeeee; --personal-border:#ffffff; --button-color:#a81b79; --button-color-med:#9c1970; --button-color-dark:#8f1767; --button-color-darker:#82155e; --elements-opacity:0.9; --footer-color:97,0,56; }

/* Portrait Mode */ @media only screen and (min-width: 1px) and (max-width: 1023px) { /*Make cactions smaller size*/

/* Make logo Smaller */ width:135px !important; height:145px!important; background-size:85%!important; }
 * 1) p-logo a, #p-logo a:hover {

/* Make content smaller a bit */ div#content { font-size:98%!important; margin-left: 10.9em; /*min-width:610px; max-width:610px;*/ }

.portlet { size:98%; width: 10.9em; }

margin-left:-19px; padding-right: 0.5em; }
 * 1) p-cactions {

/* Smaller Personal Links */ font-size: 98% !important; margin-left: 2px; }
 * 1) p-personal {

h1,h2,h3,h4,h5,h6 { margin-top: 0.4em !important; margin-left: -0.03em !important; } }

/* Tablet Mode */ @media only screen and (min-width: 1024px) and (max-width: 1083px) { /*Make cactions smaller size*/

/* Make logo Smaller */ width:150px !important; height:155px!important; }
 * 1) p-logo a, #p-logo a:hover {

/* Make content smaller a bit */ margin-left:-0.6px; padding-right: 0.45em; }
 * 1) p-cactions {

/* Smaller Personal Links */ margin-left: 2px; }
 * 1) p-personal {

h1,h2,h3,h4,h5,h6 { margin-left: -0.15em !important; } }

/* Hiding Background from non-desktop mode */ @media only screen and (min-width: 1px) and (max-width: 1083px) { body { background-image:none!important; } }

/* Body */ body { background: var(--background-color) var(--background-image) center top fixed; background-size:var(--background-size); }

/* Διαφάνεια στο Footer */ div#footer { margin-top: 55px; background-color:rgba(var(--footer-color),var(--elements-opacity)); }

/* The main portlet */ .generated-sidebar .pBody, #p-tb .pBody, #p-wikicities-nav .pBody, #p-lang .pBody, #p-search .pBody { background-color:var(--content-bg); color:var(--content-color); border:1px solid var(--content-border); opacity:var(--elements-opacity); }

.generated-sidebar .pBody:hover, #p-tb .pBody:hover, #p-wikicities-nav .pBody:hover, #p-lang .pBody:hover, #p-search .pBody:hover { background-color:var(--content-border); color:inherit!important; border:1px solid var(--content-bg); opacity:var(--elements-opacity); transition:480ms; }

/* Personal Tools */ opacity:var(--elements-opacity); transition:480ms; }
 * 1) p-personal .pBody:hover {

font-weight:bold; transition:500ms; }
 * 1) pt-logout a:hover {

font-size: 14px; text-transform: capitalize; }  text-decoration:none; color:var(--link-color); transition:0.05s; background-color:var(--content-bg); }
 * 1) p-personal a {
 * 1) p-personal a:hover{

/* Cactions */ div#content { background-color:var(--content-bg) ; color:var(--content-color); font-family:'Arial Nova', Arial; opacity:var(--elements-opacity); border-color:var(--content-border); }

div#content img { opacity:1!important; }

background-color:var(--content-bg); color:var(--link-color); border-color:var(--link-color); font-family:'Arial Nova', Arial; opacity:var(--elements-opacity); } background-color:var(--content-bg); color:var(--link-color); border-color:var(--link-color); font-family:'Arial Nova', Arial; opacity:var(--elements-opacity); }
 * 1) p-cactions li.selected a, #p-cactions li.selected{
 * 1) p-cactions li.selected a, #p-cactions li a.selected{

background-color:var(--content-bg); color:var(--link-color); border-color:var(--content-border); font-family:'Arial Nova', Arial; opacity:var(--elements-opacity); }
 * 1) p-cactions li a {

background-color:var(--content-border); color:var(--link-color); border-color:var(--content-bg); font-family:'Arial Nova', Arial; opacity:var(--elements-opacity); transition:opacity 480ms;
 * 1) p-cactions li a:hover,#p-cactions li:hover {

}

background-color:var(--content-bg); color:var(--link-color); border-color:var(--content-border); font-family:'Arial Nova', Arial; opacity:var(--elements-opacity); }
 * 1) p-cactions li {

font-family:'Arial Nova', Arial; border-color:var(--content-border); }
 * 1) p-cactions ul {

/* Headings */ font-size:221%; font-family:'Arial Nova', Arial; font-weight:bold; margin-top:1px; }
 * 1) firstHeading {

h1, h2, h3, h4, h5, h6 { color:var(--content-color); }

.skin-mpisto .mw-notification, .skin-monobook .mw-notification { background-color:var(--content-bg); color:var(--content-color); }

/* Checkmarks */ /* Buttons */ /** Buttons **/

.mpisto-btn { background-color: var(--button-color); background: linear-gradient(to bottom, var(--button-color) 35%, var(--button-color-med) 65%); border:none; color: #FFF; cursor: pointer; display: inline-block; font: bold 12px/17px "Arial Nova", Arial; height: 17px; margin: 0; padding: 0 7px; text-decoration: none; white-space: nowrap; border-radius:5px 5px 5px 5px; opacity:1!important; }

.mpisto-btn-2nd { background-color: transparent; color: var(--button-color); border:1px solid var(--button-color); cursor: pointer; display: inline-block; font: bold 12px/17px "Arial Nova", Arial; height: 17px; margin: 0; padding: 0 7px; text-decoration: none; white-space: nowrap; border-radius:5px 5px 5px 5px; opacity:1!important; }

/* Big Buttons*/ .mpisto-btn.big { height: 30px; font-size: 15px; line-height: 30px; padding: 0 15px; border-radius:5px 5px 5px 5px; opacity:1!important; }

/* Border-box model: Inputs and buttons count border as part of height. Increase height. */ input[type="submit"], input[type="reset"], input[type="button"], button, .mpisto-btn { height: 19px; } input[type="submit"].big, input[type="reset"].big, input[type="button"].big, button.big, .mpisto-btn.big { height: 32px; }

/* Fix Mozilla Button Sizing */ input[type="submit"]::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, button::-moz-focus-inner { padding: 0; border: 0; }

/* Hover and Active states */ /* Disabled styling */ .mpisto-btn-off, .mpisto-btn[disabled] { cursor: default; opacity: .55; background-color:#c4c4c4; display: inline-block; font: bold 12px/17px "Arial Nova", Arial; height: 17px; margin: 0; padding: 0 7px; text-decoration: none; white-space: nowrap; color: #FFF; background: linear-gradient(to bottom, #c4c4c4 35%, #b8b8b8 65%); border-radius:5px 5px 5px 5px; } .mpisto-btn-off:hover, .mpisto-btn[disabled]:hover { background-color:#aaa; background: linear-gradient(to bottom, #aaa 35%, #9e9e9e 65%); }

.mpisto-btn-2nd-off, .mpisto-btn-2nd[disabled] { color:#c4c4c4; border:1px solid #c4c4c4; opacity:.55; display: inline-block; font: bold 12px/17px "Arial Nova", Arial; height: 17px; margin: 0; padding: 0 7px; text-decoration: none; white-space: nowrap; border-radius:5px 5px 5px 5px; }

a.wikia-button.secondary[disabled]:hover, span.wikia-button.secondary a[disabled]:hover, input.secondary[type="submit"][disabled]:hover, input.secondary[type="reset"][disabled]:hover, input.secondary[type="button"][disabled]:hover, button.secondary[disabled]:hover, .mpisto-btn-2nd-off:hover, .mpisto-btn-2nd[disabled]:hover { color:#aaa; border:1px solid #aaa; } .mpisto-btn-off:active, .mpisto-btn[disabled]:active { background-color:#9e9e9e; background: linear-gradient(to bottom, #9e9e9e 35%, #aaa 65%); } .mpisto-btn-2nd-off:active, .mpisto-btn-2nd[disabled]:active { color:#9e9e9e; border:1px solid #9e9e9e;

}

.mpisto-btn:hover { background-color:var(--button-color-dark); background: linear-gradient(to bottom, var(--button-color-dark) 35%, var(--button-color-darker) 65%); opacity:1!important; } a.wikia-button.secondary:hover, span.wikia-button.secondary a:hover, input[type="submit"].secondary:hover, input[type="reset"].secondary:hover, input[type="button"].secondary:hover, button.secondary:hover, .mpisto-btn-2nd:hover { color:var(--button-color-dark); border:1px solid var(--button-color-dark); opacity:1!important; }

.mpisto-btn:active { background-color:var(--button-color-darker); background: linear-gradient(to bottom, var(--button-color-darker) 35%, var(--button-color-dark) 65%); opacity:1!important; } .mpisto-btn-2nd:active { color:var(--button-color-darker); border:1px solid var(--button-color-darker); opacity:1!important; }

/* Dynamic Navbar Styles */ .collapsible_pile #p-navigation { margin-top:18px !important; margin-bottom: 0 !important; } .collapsible_pile #p-navigation h3 { display: none !important; } .collapsible_pile .visible h3, .collapsible_pile .hidden h3 { background-position: center top; margin: 0; padding: 8px 0 5px 24px; cursor: pointer; } .collapsible_pile .visible .pBody, .collapsible_pile .hidden .pBody { padding: 0 0 0 26px; margin: 0; } .collapsible_pile .hidden h3 { color: #123456; } .collapsible_pile .hidden h3:hover { color:#654321; } /** arrows **/ .collapsible_pile .visible { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAFCAYAAACTphZWAAAAAXNSR0IArs4c6QAAAAlwSFlzAAAO6wAADpwBEbNupAAAAAd0SU1FB9sGDg0pGmpOMR0AAAAdaVRYdENvbW1lbnQAAAAAAENyZWF0ZWQgd2l0aCBHSU1QZC5lBwAAAE9JREFUCNd9yzENgDAARNFH6gIBGGCuAwx161ZDSOiKAQzUBhMkTVpuvLy/pJR2ZBzmO5FDrbXFGG+s2GawlHIF+Ak+COF9B0EHOzwIOggPO/8lOmDjOrAAAAAASUVORK5CYII=) no-repeat 14px 13px; } .collapsible_pile .hidden { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAAAXNSR0IArs4c6QAAAAlwSFlzAAAOnAAADusBZ+q87AAAAAd0SU1FB9sGDg4fNUrFI2gAAAAdaVRYdENvbW1lbnQAAAAAAENyZWF0ZWQgd2l0aCBHSU1QZC5lBwAAAFRJREFUGNNjYEAClZWVxgx4ABMavwGfBnTFPvg0MGERw6mBCYeNWDWw4PGPD5T2JWQyAwMDwxYGBoYGYpyxhYGBoaG9vf0sIcVYFWJTjFMhBiAUgwB5exk8MN/AIQAAAABJRU5ErkJggg==) no-repeat 14px 10px; } /* */ opacity:0.55; transition:0.33s; }
 * 1) p-logo, .mpisto-logo {

opacity:1; transition:0.55s; }
 * 1) p-logo:hover, .mpisto-logo:hover {

/* Other Design System */

/* Rounder */

/* Normal */

.mpisto-rounder { border-radius:100%; }

/* Plus */

.mpisto-rounder-plus { border-radius:150%; }

/* Desktop XL */

.mpisto-rounder-xl { border-radius:200%; }

/* Standard */

.mpisto-rounder-stand { border-radius:75%; }

/* Small */

.mpisto-rounder-small { border-radius:66%; }

/* Module Styles */ .mpisto-module { border:1px solid var(--personal-border); background-color:var(--personal-color); opacity:0.99!important; /* Should not accuire Elements opacity in this */ }

.mpisto-module h1 { size:107%; font-weight:bold; float:left!important; line-height:27px; color:var(--personal-border);

}

.mpisto-module h2 { size:98%; font-weight:bold; float:left!important; color:var(--personal-border); margin-top:0.5px; line-height:27px; }

/* Preventing rounding the mpisto modules */ .mpisto-module .mpisto-rounder, .mpisto-rounder .mpisto-module { border-radius:0px!important; }

/* Buttons II */ /** General Big **/ a.wikia-button.big, span.wikia-button.big a, input[type="submit"].big, input[type="reset"].big, input[type="button"].big, button.big, .mpisto-buttons2 { color:white; background-color:var(--button-color); border:1px solid var(--button-color); transition:500ms; text-transform:uppercase; font-weight:bold; cursor: pointer; display: inline-block; padding: 8px 4px 8px; }

.mpisto-buttons2:hover { color:white; background-color:var(--button-color-dark); border:1px solid var(--button-color-dark); transition:500ms; text-transform:uppercase; font-weight:bold; cursor: pointer; display: inline-block; padding:8px 4px 8px; }

/** Τσαλαπατημένοι ή Normal use **/

a.wikia-button, span.wikia-button a, input[type="submit"], input[type="reset"], input[type="button"], button, .mpisto-buttons2.squashed { color:white; background-color:var(--button-color); border:1px solid var(--button-color); transition:500ms; text-transform:uppercase; font-weight:bold; cursor: pointer; display: inline-block; padding: 5px 4px 5px; }

a.wikia-button:hover, span.wikia-button a:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover, button:hover, .mpisto-buttons2.squashed:hover { color:white; background-color:var(--button-color-dark); border:1px solid var(--button-color-dark); transition:500ms; text-transform:uppercase; font-weight:bold; cursor: pointer; display: inline-block; padding:5px 4px 5px; }

.mpisto-buttons2-2nd { color:var(--button-color); background-color:none; border:1px solid var(--button-color); transition:500ms; text-transform:uppercase; font-weight:bold; cursor: pointer; display: inline-block; padding: 8px 4px 8px; }

.mpisto-buttons2-2nd:hover { color:var(--button-color-dark); background-color:none; border:1px solid var(--button-color-dark); transition:500ms; text-transform:uppercase; font-weight:bold; cursor: pointer; display: inline-block; padding: 8px 4px 8px; }

a.wikia-button.secondary, span.wikia-button.secondary a, input[type="submit"].secondary, input[type="reset"].secondary, input[type="button"].secondary, button.secondary,.mpisto-buttons2-2nd.squashed { color:var(--button-color); background-color:transparent; border:1px solid var(--button-color); transition:500ms; text-transform:uppercase; font-weight:bold; cursor: pointer; display: inline-block; padding: 5px 4px 5px; }

a.wikia-button.secondary:hover, span.wikia-button.secondary a:hover, input.secondary[type="submit"]:hover, input.secondary[type="reset"]:hover, input.secondary[type="button"]:hover, button:hover, .mpisto-buttons2-2nd.squashed:hover { color:var(--button-color-dark); background-color:transparent; border:1px solid var(--button-color-dark); transition:500ms; text-transform:uppercase; font-weight:bold; cursor: pointer; display: inline-block; padding: 5px 4px 5px; } /** Disabled Styles **/ a.wikia-button[disabled], span.wikia-button a[disabled], input[type="submit"][disabled], input[type="reset"][disabled], input[type="button"][disabled], button[disabled]{ background-color:#c4c4c4; color:#fff; border:1px solid #c4c4c4; transition:500ms; text-transform:uppercase; font-weight:bold; cursor: pointer; display: inline-block; padding: 5px 4px 5px; opacity:.5; } a.wikia-button[disabled]:hover, span.wikia-button a[disabled]:hover, input[type="submit"][disabled]:hover, input[type="reset"][disabled]:hover, input[type="button"][disabled]:hover, button[disabled]:hover{ background-color:#aaa; color:#fff; border:1px solid aaa; }

a.wikia-button.secondary[disabled], span.wikia-button.secondary a[disabled], input.secondary[type="submit"][disabled], input.secondary[type="reset"][disabled], input.secondary[type="button"][disabled], button.secondary[disabled]{ color:#c4c4c4; background-color:transparent; border:1px solid #c4c4c4; transition:500ms; text-transform:uppercase; font-weight:bold; cursor: pointer; display: inline-block; padding: 5px 4px 5px; opacity:.5; }

a.wikia-button.secondary[disabled]:hover, span.wikia-button.secondary a[disabled]:hover, input.secondary[type="submit"][disabled]:hover, input.secondary[type="reset"][disabled]:hover, input.secondary[type="button"][disabled]:hover, button.secondary[disabled]:hover{ background-color:transparent; color:#aaa; border:1px solid aaa; }

/** ACTUAL CSS **/ /* Lowering logo size */ background-image:url("https://vignette2.wikia.nocookie.net/candy-crush-saga/images/b/bf/Wiki-small.png/revision/latest?cb=20170727150931")!important; }
 * 1) p-logo, #p-logo:hover {