MediaWiki:Common.css

Note: After saving, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Internet Explorer: Hold Ctrl while clicking Refresh, or press Ctrl-F5
• Opera: Go to Menu → Settings (Opera → Preferences on a Mac) and then to Privacy & security → Clear browsing data → Cached images and files.

@import url('https://fonts.googleapis.com/css?family=Nunito+Sans:400,400i,700,700i|Source+Code+Pro');

/* Custom CSS code for content and/or templates */

.imageBlock, .textBlock { 
    display: inline-flex; flex-flow: column nowrap; 
    justify-content: flex-start; align-content: center; text-align: center;
    padding: 0.5em; margin: 1em .5em;
    border: 2px solid black; border-radius: 0.5em;
    box-shadow: 5px 5px 20px rgba(0,0,0,0.3);
}
.textBlock { border-color:silver; background-color: #f9f9f9; }
.blockTitle, .noteTitle { font-weight: bold; font-size: 120%; margin: 5px auto; }
.blockImg { margin: 1em auto; }
.blockDesc {  font-style: italic; }

.row, .playerBlocks{ 
    display:flex; flex-flow: row wrap; 
    justify-content: space-evenly; align-content: space-around;
   margin: 2em auto;
}

.reverse { flex-direction: column-reverse; }
.diva { border-color:#265b8f; }
.legacy { border-color:silver; }

.bold { font-weight: bold; }
.right { float: right; margin: 0 0 1.3em 1.3em !important; }
.left { float: left; margin: 0 1.3em 1.3em 0 !important;}
.note, .mw-highlight { display: table; margin: 1.3em 0; }
.note .icon { float: left; margin-right: 10px; display:table-column; }
.note .content, .mw-highlight pre { display:flow-root; margin:0; }
.note ul { list-style: initial; }
.info, .warn, .tech , .download{
    border-radius:8px;
    min-height: 40px;
    line-height:40px;
    padding: 5px 10px 5px 60px;
    vertical-align: middle;
}
.info {
    background: #f3ffff url('images/css/info.png') no-repeat 10px 50%;
    border:1px solid #A7D7F9;
}
.warn { 
    background: #fff9ee url('images/css/warn.png') no-repeat 10px 50%;
    border: 1px solid #F28500;
}
.download {
    background: #f9f9f9 url('images/css/download.png') no-repeat 10px 50%;
    border:1px solid #86bf38;
    padding-left: 52px;
}
.download.big {
    background-image: url('images/css/download_64.png');
    min-height: 64px;
    padding-left: 84px;
}
.tech {
    background: #f9f9f9 url('images/css/tech.png') no-repeat 10px 50%;
    border:1px solid #b5bdc8;
}
.tech.big {
    background-image: url('images/css/tech_64.png');
    min-height: 64px;
    padding-left: 84px;
}
.info.big, .warn.big, .tech.big, .download.big { line-height: 1.5em }
.widget { display:block; margin: 23px auto; border: none}
table.numbers td { text-align: right }
table.wikitable td code { background-color: #FBFCF6 }

.codeBlock  { display:inline-flex; align-items: center; padding: .3em; margin-top: 1em; border-radius: .3em }
.codeBlock .title { 
    color: white; padding: .3em 1em; text-align: center; font-weight: bold; 
    border-radius: .2em; text-shadow: 0 1px 0 rgba(0,0,0,.1); min-width: 4em 
}
.codeBlock .desc { padding: 0 .6em; font-weight: 600;  }
.op-get { border-color: #61affe; background: rgba(97,175,254,.1) }
.op-get .title { background: #61affe }
.op-post { border-color: #49cc90; background: rgba(73,204,144,.1) }
.op-post .title { background: #49cc90 }
.op-put { border-color: #fca130; background: rgba(252,161,48,.1) }
.op-put .title { background: #fca130 }
.op-del { border-color: #f93e3e; background: rgba(249,62,62,.1) }
.op-del .title { background: #f93e3e}
.code-examples .floatright { margin-top:1em }

.led{
    border:1px solid #eee; border-radius:50%; 
    display:inline-block; width:18px; height:18px; vertical-align:middle
}
.led.off{background-color: silver }
.led.green{background-color: limegreen }
.led.red{background-color: red }
.led.blue{background-color: dodgerblue }
.led.yellow{background-color: yellow }
.led.orange{background-color: orange }
.led.amber{background-color: #FFBF00}
.led.blink{animation: blinking 1s ease infinite}
.led.blink.fast{animation-duration:0.25s}
.blink.reverse{animation-direction: alternate-reverse;}
.led.red2green{animation: red2green 1s linear infinite alternate;}
@keyframes blinking { 50% {background: none} }
@keyframes red2green {
    0% {background-color: red}
    47% {background-color: red}
    50% {background: none}
    53% {background-color: limegreen}
    100% {background-color: limegreen}
}

/* cookie policy banner */
.cc-window{opacity:1;transition:opacity 1s ease}.cc-window.cc-invisible{opacity:0}.cc-animate.cc-revoke{transition:transform 1s ease}.cc-animate.cc-revoke.cc-top{transform:translateY(-2em)}.cc-animate.cc-revoke.cc-bottom{transform:translateY(2em)}.cc-animate.cc-revoke.cc-active.cc-bottom,.cc-animate.cc-revoke.cc-active.cc-top,.cc-revoke:hover{transform:translateY(0)}.cc-grower{max-height:0;overflow:hidden;transition:max-height 1s}
.cc-link,.cc-revoke:hover{text-decoration:underline}.cc-revoke,.cc-window{position:fixed;overflow:hidden;box-sizing:border-box;font-family:Helvetica,Calibri,Arial,sans-serif;font-size:16px;line-height:1.5em;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;z-index:9999}.cc-window.cc-static{position:static}.cc-window.cc-floating{padding:2em;max-width:24em;-ms-flex-direction:column;flex-direction:column}.cc-window.cc-banner{padding:1em 1.8em;width:100%;-ms-flex-direction:row;flex-direction:row}.cc-revoke{padding:.5em}.cc-header{font-size:18px;font-weight:700}.cc-btn,.cc-close,.cc-link,.cc-revoke{cursor:pointer}.cc-link{opacity:.8;display:inline-block;padding:.2em}.cc-link:hover{opacity:1}.cc-link:active,.cc-link:visited{color:initial}.cc-btn{display:block;padding:.4em .8em;font-size:.9em;font-weight:700;border-width:2px;border-style:solid;text-align:center;white-space:nowrap}.cc-banner .cc-btn:last-child{min-width:140px}.cc-highlight .cc-btn:first-child{background-color:transparent;border-color:transparent}.cc-highlight .cc-btn:first-child:focus,.cc-highlight .cc-btn:first-child:hover{background-color:transparent;text-decoration:underline}.cc-close{display:block;position:absolute;top:.5em;right:.5em;font-size:1.6em;opacity:.9;line-height:.75}.cc-close:focus,.cc-close:hover{opacity:1}
.cc-revoke.cc-top{top:0;left:3em;border-bottom-left-radius:.5em;border-bottom-right-radius:.5em}.cc-revoke.cc-bottom{bottom:0;left:3em;border-top-left-radius:.5em;border-top-right-radius:.5em}.cc-revoke.cc-left{left:3em;right:unset}.cc-revoke.cc-right{right:3em;left:unset}.cc-top{top:1em}.cc-left{left:1em}.cc-right{right:1em}.cc-bottom{bottom:1em}.cc-floating>.cc-link{margin-bottom:1em}.cc-floating .cc-message{display:block;margin-bottom:1em}.cc-window.cc-floating .cc-compliance{-ms-flex:1;flex:1}.cc-window.cc-banner{-ms-flex-align:center;align-items:center}.cc-banner.cc-top{left:0;right:0;top:0}.cc-banner.cc-bottom{left:0;right:0;bottom:0}.cc-banner .cc-message{-ms-flex:1;flex:1}.cc-compliance{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:justify;align-content:space-between}.cc-compliance>.cc-btn{-ms-flex:1;flex:1}.cc-btn+.cc-btn{margin-left:.5em}
@media print{.cc-revoke,.cc-window{display:none}}@media screen and (max-width:900px){.cc-btn{white-space:normal}}@media screen and (max-width:414px) and (orientation:portrait),screen and (max-width:736px) and (orientation:landscape){.cc-window.cc-top{top:0}.cc-window.cc-bottom{bottom:0}.cc-window.cc-banner,.cc-window.cc-left,.cc-window.cc-right{left:0;right:0}.cc-window.cc-banner{-ms-flex-direction:column;flex-direction:column}.cc-window.cc-banner .cc-compliance{-ms-flex:1;flex:1}.cc-window.cc-floating{max-width:none}.cc-window .cc-message{margin-bottom:1em}.cc-window.cc-banner{-ms-flex-align:unset;align-items:unset}}
.cc-floating.cc-theme-classic{padding:1.2em;border-radius:5px}.cc-floating.cc-type-info.cc-theme-classic .cc-compliance{text-align:center;display:inline;-ms-flex:none;flex:none}.cc-theme-classic .cc-btn{border-radius:5px}.cc-theme-classic .cc-btn:last-child{min-width:140px}.cc-floating.cc-type-info.cc-theme-classic .cc-btn{display:inline-block}
.cc-theme-edgeless.cc-window{padding:0}.cc-floating.cc-theme-edgeless .cc-message{margin:2em 2em 1.5em}.cc-banner.cc-theme-edgeless .cc-btn{margin:0;padding:.8em 1.8em;height:100%}.cc-banner.cc-theme-edgeless .cc-message{margin-left:1em}.cc-floating.cc-theme-edgeless .cc-btn+.cc-btn{margin-left:0}