MediaWiki:Gadget-rtrc.css

/** * Real-Time Recent Changes * https://github.com/Krinkle/mw-gadget-rtrc * * @license http://krinkle.mit-license.org/ * @author Timo Tijhof, 2010–2013 */

/* Minimise MediaWiki frame */

.mw-rtrc-available #siteNotice, .mw-rtrc-available .firstHeading, .mw-rtrc-available #bodyContent { visibility: hidden; }

.mw-rtrc-available #ca-talk, .mw-rtrc-available #p-views, .mw-rtrc-available #p-cactions, .mw-rtrc-available #footer, .mw-rtrc-available #contentSub, .mw-rtrc-available #catlinks, .mw-rtrc-available #p-tb, .mw-rtrc-available .mw-revdelundel-link { display: none; }

/* Wrapper */

.mw-rtrc-wrapper { position: relative; background: rgb(247, 246, 248); border-top: 30px solid #343434; padding: 0 1em; font-size: 13px; line-height: 1.4; color: #343434; opacity: 0; -webkit-transition: opacity 250ms ease-out 255ms; transition: opacity 250ms ease-out 255ms; }

.mw-rtrc-ready .mw-rtrc-wrapper { opacity: 1; }

.mw-rtrc-wrapper .inline-block { display: inline-block; }

.mw-rtrc-available #content { background: rgb(247, 246, 248); padding: 0; }

.mw-rtrc-head { position: absolute; top: -30px; left: 20%; right: 10%; line-height: 30px; text-align: center; color: #ccc; }

.mw-rtrc-foot { position: fixed; left: 0; bottom: 0; right: 0; opacity: 0.5; background: rgba(255, 255, 255, 0.7); padding: 6px 15px 6px 15px; border-top: 1px solid #a1cef5; text-align: center; color: #343434; -webkit-transition: all 250ms ease-out; -webkit-transition-property: opacity, background; transition: all 250ms ease-out; transition-property: opacity, background; }

.mw-rtrc-foot:hover { opacity: 1; }

/* MediaWiki nav sidebar toggle */

.mw-rtrc-available #mw-panel, .mw-rtrc-available #left-navigation, .mw-rtrc-available #content, .mw-rtrc-navtoggle-logo, .mw-rtrc-navtoggle { -webkit-transition: all 250ms ease-out; -webkit-transition-property: margin-left, left; transition: all 250ms ease-out; transition-property: margin-left, left; }

.mw-rtrc-available #mw-panel { -webkit-transition-property: -webkit-transform, opacity; -webkit-transition-property: transform, opacity; transition-property: -webkit-transform, opacity; transition-property: transform, opacity; }

.mw-rtrc-navtoggle-logo { position: absolute; top: 0; left: -50px; }

.mw-rtrc-navtoggle-logo a { display: block; width: 40px; height: 40px; background-size: contain; background-repeat: no-repeat; background-position: 0 50%; }

.mw-rtrc-navtoggle { position: absolute; top: 10px; left: 11em; margin-left: 0; border: 0 solid #aaa; border-width: 0 0 0 5px; width: 10px; height: 15px; cursor: pointer; }

/* Triangle pointing inwards */ .mw-rtrc-navtoggle:after { content: " "; width: 0; height: 0; position: absolute; right: 0; pointer-events: none;

border: 5px solid transparent; border-right-color: #333; top: 50%; margin-top: -5px; }

.mw-rtrc-navtoggle-collapsed .mw-rtrc-navtoggle-logo { left: 5px; }

.mw-rtrc-navtoggle-collapsed .mw-rtrc-navtoggle { left: 0; border-width: 0 5px 0 0; margin-left: 55px; }

/* Triangle pointing outwards */ .mw-rtrc-navtoggle-collapsed .mw-rtrc-navtoggle:after { left: 0; border-right-color: transparent; border-left-color: #333; }

.mw-rtrc-navtoggle-collapsed #left-navigation { margin-left: 1em; }

.mw-rtrc-navtoggle-collapsed #content { margin-left: 0; }

.mw-rtrc-navtoggle-collapsed #mw-panel { opacity: 0; pointer-events: none; -webkit-transform: translate(-12em, 0); transform: translate(-12em, 0); }

/* Buttons / Links */

.mw-rtrc-head-links { float: right; }

.mw-rtrc-head-links a { display: inline-block; padding: 0 0.6em; color: #ccc; }

.mw-rtrc-head-links a:hover { color: #fff; text-decoration: none; background: #555; }

.mw-rtrc-wrapper .button:active { position: relative; top: 1px; }

.mw-rtrc-wrapper select { /* Reset Vector's select { vertical-align: top; } */ vertical-align: baseline; }

.mw-rtrc-wrapper .helpicon { display: inline-block; margin-left: 0.3em; vertical-align: middle; width: 18px; height: 18px; background: url(//upload.wikimedia.org/wikipedia/commons/5/51/Question-helpbutton.png) no-repeat; }

.mw-rtrc-nohelp .helpicon { display: none; }

.mw-rtrc-wrapper .button:hover, .mw-rtrc-wrapper .helpicon:hover { cursor: pointer; }

/* Settings */

.mw-rtrc-settings { margin: 0 auto; min-width: 1000px; text-align: center; }

.mw-rtrc-settings fieldset { display: inline-block; background: #fff; border-bottom-left-radius: 11px; border-bottom-right-radius: 11px; box-shadow: rgba(200, 200, 200, 1) 0 5px 15px; text-align: left; /* reset mw/fieldset */ margin: 0; padding: 0; border: 0; }

.mw-rtrc-settings .panel-group { display: table; }

.mw-rtrc-settings .panel-group:first-child { border-bottom: 1px solid #ddd; }

.mw-rtrc-settings .panel { display: table-cell; width: 1px; /* auto doesn't work, cells will grow now from 1px */ vertical-align: top; border-right: 1px solid #ddd; padding: 3px 5px; white-space: nowrap; text-align: center; }

.mw-rtrc-settings .panel-last { border-right: 0; }

.mw-rtrc-settings .panel .head { display: block; font-weight: bold; }

.mw-rtrc-settings .panel-group-mini .head { display: inline-block; }

.mw-rtrc-settings .button { padding: 6px 12px; border-width: 1px; border-style: solid; border-radius: 4px; font-weight: bold; font-size: 14px; line-height: 1.42; color: #fff; background-color: #357ebd; border-color: #3071a9; } .mw-rtrc-settings .button-small { padding: 3px 6px; font-size: 11px; line-height: 1.5; border-radius: 3px; } .mw-rtrc-settings .button:hover { background-color: #428bca; border-color: #428bca; cursor: pointer; } .mw-rtrc-settings .button:active { box-shadow: inset 0 4px 6px rgba(0, 0, 0, 0.250); } .mw-rtrc-settings .button-green { background-color: #4cae4c; border-color: #449d44; } .mw-rtrc-settings .button-green:hover	{ background-color: #5cb85c; border-color: #5cb85c; } .mw-rtrc-settings .button-red { background-color: #d43f3a; border-color: #c9302c; } .mw-rtrc-settings .button-red:hover { background-color: #d9534f; border-color: #d9534f; } .mw-rtrc-settings .button[disabled]:hover { cursor: default; }

/* Diff frame */

.mw-rtrc-diff { position: relative; width: 97%; margin: 20px auto 15px auto; padding: 1em; overflow: hidden; background: #fff; border-radius: 11px; box-shadow: rgba(200, 200, 200, 1) 0 5px 15px; }

.mw-rtrc-diff h3 { margin: 0 1em 0.5em 0; border-bottom: 1px solid rgb(247, 246, 248); font-size: 21px; font-weight: normal; white-space: nowrap; overflow: hidden; }

.mw-rtrc-diff table.diff { margin: 0; width: 100%; }

.mw-rtrc-diff-tools { position: absolute; top: 0; right: 2em; width: 80%; }

.mw-rtrc-diff-tools .tab { float: right; font-weight: bold; margin-left: 3px; padding: 3px 10px; background-color:rgb(247, 246, 248); border-bottom-left-radius: 11px; border-bottom-right-radius: 11px; }

.mw-rtrc-diff-tools .tab a:hover { cursor: pointer; }

/*	RC OUTPUT .mw-rtrc-body { position: relative; width: 100%; margin: 20px auto 70px auto; }

.mw-rtrc-body.placeholder { width: 100%; height: 600px; background: transparent url(//upload.wikimedia.org/wikipedia/commons/9/9d/RTRC_Placeholder.png) top center no-repeat; }

.mw-rtrc-body.placeholder > * { display: none; }

.mw-rtrc-feed { position: relative; padding: 2em 0; background: #fff; font-size: 14px; border-top-left-radius: 11px; border-top-right-radius:11px; box-shadow: rgba(200, 200, 200, 1) 0 5px 15px; }

.mw-rtrc-feed-update { position: absolute; top: 0.5em; left: 10%; width: 80%; font-size: smaller; text-align: center; }

position: absolute; top: 0; right: 0; }
 * 1) krRTRC_loader {

.mw-rtrc-feed-cvninfo { position: absolute; bottom: -3em; right: 5px; text-align: right; }

.mw-rtrc-feed-content { margin: 0 0 -1.5em 0; width: 100%; }

.mw-rtrc-feed-content .item { padding: 0 5px; white-space: nowrap; }

.mw-rtrc-feed-content .item:nth-child(odd) { background: #f3f3f3; }

/* Acts like a table with table-rows, using divs to avoid fixed table-layout with forced width and oveflow issues */ .mw-rtrc-feed-content .item div { display: inline-block; overflow: hidden; padding: 3px 0; vertical-align: middle; } .mw-rtrc-feed-content .item div[first] { width: 38% } .mw-rtrc-feed-content .item div[user] { width: 21% } .mw-rtrc-feed-content .item div[other] { width: 35% } .mw-rtrc-feed-content .item div[size] { width: 6%;font-size: smaller; text-align: right }

/* item classes */ .item.aes { background: #fff0f0 } .item.aes .comment { font-weight: bold }

.item.skipped { background: #d6d9e9 !important } .item.patrolled { background: #d9e9d6 !important } .item.indiff { background: #ffce7b !important; border: 1px solid orange }

.item .user.blacklisted	{ font-weight: bold; color: red; background: url(//upload.wikimedia.org/wikipedia/commons/thumb/f/f7/Nuvola_apps_important.svg/18px-Nuvola_apps_important.svg.png) 0 50% no-repeat; padding-left: 20px; }

.mw-rtrc-legend { margin: 5px auto; padding: 5px 13px; background: #fff; border-bottom-left-radius: 11px; border-bottom-right-radius: 11px; box-shadow: rgba(200, 200, 200, 1) 0 5px 15px; }

/* Diff pre-wrap (partially from wikibits/diff.css but there only adds pre-wrap for diffchange */

.mw-rtrc-available .diffchange, .mw-rtrc-available table.diff td { white-space: -moz-pre-wrap; white-space: pre-wrap; }

/** * On/Off switch checboxes. * Based on "iOS 6 style switch checkboxes" by Lea Verou http://lea.verou.me */

.mw-rtrc-settings .switch { position: absolute; opacity: 0; }

.mw-rtrc-settings .switch + div { display: inline-block; vertical-align: middle; margin: 0 .5em; width: 3em; height: 1em; overflow: hidden; background: #fff; background-image: -webkit-linear-gradient(rgba(0, 0, 0, .1), transparent), -webkit-linear-gradient(0, #357ebd 50%, transparent 50%); background-image: linear-gradient(rgba(0, 0, 0, .1), transparent), linear-gradient(90deg, #357ebd 50%, transparent 50%); background-size: 200% 100%; background-position: 100% 0; background-origin: border-box; background-clip: border-box; border: 1px solid rgba(0, 0, 0, .3); border-radius: 999px; box-shadow: 0 .1em .1em rgba(0, 0, 0, .2) inset, 0 .45em 0 .1em rgba(0, 0, 0, .05) inset; font-size: 150%; text-align: left; transition-duration: .4s; transition-property: padding, width, background-position, text-indent; }

.mw-rtrc-settings .switch:checked + div { padding-left: 2em; width: 1em; background-position: 0 0; }

.mw-rtrc-settings .switch + div:before { content: 'On'; float: left; margin: -.1em; width: 1.65em; height: 1.65em; background: #fff; background-image: -webkit-linear-gradient(rgba(0, 0, 0, .2), transparent); background-image: linear-gradient(rgba(0, 0, 0, .2), transparent); border: 1px solid rgba(0,0,0,.35); border-radius: inherit; box-shadow: 0 .1em .1em .1em hsla(0, 0%, 100%, .8) inset, 0 0 .5em rgba(0, 0, 0, .3); color: white; text-shadow: 0 -1px 1px rgba(0, 0, 0, .3); text-indent: -2.5em; }

.mw-rtrc-settings .switch:active + div:before { background-color: #eee; }

.mw-rtrc-settings .switch:focus + div { box-shadow: 0 .1em .1em rgba(0, 0, 0, .2) inset, 0 .45em 0 .1em rgba(0, 0, 0, .05) inset, 0 0 .4em 1px rgba(255, 0, 0, .5); }

.mw-rtrc-settings .switch + div:before, .mw-rtrc-settings .switch + div:after { font: bold 60%/1.9 sans-serif; text-transform: uppercase; }

.mw-rtrc-settings .switch + div:after { content: 'Off'; text-align: left; float: left; text-indent: .5em; color: rgba(0, 0, 0, .45); text-shadow: none; }