MediaWiki:RailWAM.css

/** * RAILWAM CSS * * CSS styles for RailWAM. See w:c:dev:RailWAM for documentation. * * @author User:Blaster Niceshot */ /* Universal */ .railwam-bold { font-weight: bold; }

.railwam-flex-container { display: flex; }

.railwam-inline-block { display: inline-block; }

.railwam-ol { list-style: decimal; margin-left: 30px; }

.railwam-math { display: block; font-family: serif; margin-bottom: 10px; }

.railwam-math sub { vertical-align: sub; } /* Log element */ .railwam-data-element { display:none; }

/* Rail Module Styles */ box-sizing:border-box; display:inline-block; font-size:14px; font-weight:bold; padding:5px 10px; text-align:center; width:80%; }
 * 1) railwam-data-container {

display:block; margin-bottom:10px; }
 * 1) railwam-today-title {

text-align: center; }
 * 1) railwam-module-center {

display: inline-block; padding-right: 10px; text-align: left; }
 * 1) railwam-score-container {

display: inline-block; padding-left: 10px; text-align: left; /* See JS for left border */ }
 * 1) railwam-rank-container {

.railwam-module-label { font-weight: bold; text-transform: lowercase; }

.railwam-module-val { font-size: 18px; }

.railwam-module-data-container { display: inline-block; margin-left: 10px; }

display:block; font-weight:normal; margin-top:5px; text-align:center; }
 * 1) railwam-score-difference, #railwam-rank-difference {

display:inline-block; left:50%; margin-top:10px; position:relative; text-align:center; transform:translateX(-50%); }
 * 1) railwam-link-container {

cursor:pointer; margin-right:10px; }
 * 1) railwam-faq {

margin-right:10px; }
 * 1) railwam-offical-page {

display:none; font-size:.8em; font-weight:normal; margin-top:3px; text-align:center; }
 * 1) railwam-not-logged {

font-size:.9em; margin-bottom:5px; padding: 4px; text-align: center; text-align: center; }
 * 1) railwam-log-alert {

display:block; }
 * 1) railwam-notlogged-text {

display:block; font-size:.85em; }
 * 1) railwam-notlogged-text-warning {

border-radius:.2em; cursor:pointer; display:inline-block; font-size:.8em; font-weight:bold; margin:4px; padding:5px 10px; text-transform:uppercase; }
 * 1) railwam-log-link, #railwam-database-cancel {

border-radius:.2em; cursor:pointer; display:inline-block; font-size:.8em; font-weight:bold; margin:4px; padding:5px 10px; text-transform:uppercase; }
 * 1) railwam-close-link {

.railwam-done-link { border-radius:.2em; cursor:pointer; display:inline-block; font-size:.8em; font-weight:bold; margin:4px; padding:5px 10px; text-transform:uppercase; }

background:transparent; border:none; box-shadow:none; box-sizing:border-box; height:30px; padding:5px 0; padding-right:3px; text-align:right; width:20%; }
 * 1) railwam-time-num {

outline:none; }
 * 1) railwam-time-num:focus {

background:transparent; border:none; box-shadow:none; box-sizing:border-box; height:30px; padding:5px 0; padding-left:3px; width:30%; }
 * 1) railwam-time-type {

outline:none; }
 * 1) railwam-time-type:focus {

color:#000000; }
 * 1) railwam-time-type option {

display:block; font-size: .85em; margin-top:5px; }
 * 1) railwam-cookie-warning {

/* Arrow styles */ .railwam-arrow { height: 13px; margin-top:-3px; vertical-align:middle; width: 11px; }

margin-right: 3px; transform: translateY(-50%); }
 * 1) railwam-score-difference .railwam-arrow, #railwam-rank-difference .railwam-arrow {

display: none; }
 * 1) railwam-svg-defs {

/* Modal Styles */ align-items:center; bottom:0; display:-ms-flexbox; display:-webkit-flex; display:flex; justify-content:center; left:0; overflow:hidden; position:fixed; right:0; top:0; z-index:99999998; }
 * 1) railwam-modal-overlay {

box-shadow:0 0 20px rgba(0,0,0,0.75); min-height:500px; position:fixed; z-index:99999999; }
 * 1) railwam-modal-body {

height:100%; overflow:auto; position:absolute; width:20%; }
 * 1) railwam-modal-sidebar {

.railwam-modal-sidehead { cursor:pointer; list-style:none; margin:0; padding:0; }

.railwam-modal-sidehead-container { width:100%; }

.railwam-modal-sidebar-item { background:rgba(255,255,255,0.1); cursor:pointer; display:block; font-weight:bold; padding:10px; transition:all .3s; }

.railwam-modal-sidebar-item:hover { background:rgba(255,255,255,.4); }

.railwam-modal-sidehead-sub:hover { background:rgba(255,255,255,.3); }

.railwam-modal-sidehead-sub { background:transparent; display:block; font-size:.9em; padding:10px; transition:all .3s; }

.railwam-modal-sidehead-sub-active { background:rgba(255,255,255,0.4); }

margin-left:20%; }
 * 1) railwam-modal-content-container {

display:block; font-size:2em; font-weight:bold; margin:0; padding:20px; padding-bottom:10px; padding-left:30px; }
 * 1) railwam-modal-title {

.railwam-modal-navlink { cursor:pointer; }

display:block; font-size:1.1em; padding-left:30px; }
 * 1) railwam-modal-navlink-container {

display: block; font-size: 1.2em; line-height: 2em; overflow:auto; padding: 10px 20px; }
 * 1) railwam-modal-content-area {

margin-top: 10px; }
 * 1) railwam-modal-content-area h2, #railwam-modal-content-mobile h2 {

margin-bottom: 10px; }
 * 1) railwam-modal-content-area p, #railwam-modal-content-mobile p {

display:block; font-size:1.4em; margin:0; margin-top:10px; padding:10px; padding-left:30px; }
 * 1) railwam-modal-content-banner {

bottom:0; box-sizing:border-box; font-size:0.9em; height:50px; left:20%; line-height:10px; padding:20px; position:absolute; right:0; text-align:center; }
 * 1) railwam-modal-footer {

cursor:pointer; height:15px; position:absolute; right:20px; top:20px; transition:all .3s; }
 * 1) railwam-modal-close {

opacity:0.4; }
 * 1) railwam-modal-close:hover {

.railwam-modal-dropdown-arrow { height:7px; margin-left:5px; transition:all .2s; vertical-align:middle; }

.railwam-param-label { font-family: monospace; font-weight: bold; text-transform: lowercase; }

/* Mobile Modal Styles */ .railwam-modal-sidebar-item-mobile { cursor:pointer; display:block; font-weight:bold; padding:10px; transition:all .3s; }

.railwam-modal-sidehead-container-mobile { display:inline-block; margin-bottom:5px; }

.railwam-modal-sidehead-sub-mobile { font-size: 1.6em; font-weight:bold; margin-bottom:5px; margin-top:10px; }

/* Database Styles */ input[name="railwam-database"] { height:1.5em; margin:0; position:absolute; top:0; visibility:hidden; width:1.5em; }

input[name="railwam-database"] ~ label { cursor:pointer; display:inline-block; padding:0 1.75em; position:relative; }

margin: 0; margin-left: 10px; }
 * 1) railwam-database-cancel {

.railwam-database-check { border-radius:50%; cursor:pointer; display:block; height:.6em; margin-left:0.3em; position:absolute; top:.45em; transition:all .3s; width:.6em; z-index:-1; }

border:none; box-sizing:border-box; display:none; height:30px; padding:0 10px; width:15%; }
 * 1) railwam-database-custom-input {

.railwam-database-disabled, .railwam-database-disabled * { cursor: not-allowed; }

.railwam-database-entrytable { display:table; width:100%; }

.railwam-database-entrytable:nth-child(odd) { background:transparent; }

.railwam-database-entrytable-column { box-sizing:border-box; display:table-cell; float:none!important; padding:10px 0; text-align:center; vertical-align:middle; width:25%; }

.railwam-database-entrytable-column:nth-of-type(even) { background:rgba(191, 191, 191, 0.15); }

.railwam-database-entrytable-diff { display:block; font-size:.8em; }

.railwam-database-error { display:none; padding:5px 10px; }

cursor:pointer; }
 * 1) railwam-database-faq {

display:block; height:30px; margin-top:10px; position:relative; }
 * 1) railwam-database-fields {

border:none; box-sizing:border-box; display:inline-block; height:30px; padding:0 15px; transition:all .3s; text-transform:lowercase; width:90%; }
 * 1) railwam-database-field {

width:65%; }
 * 1) railwam-database-field.railwam-database-custom-shown {

width: 70% }
 * 1) railwam-database-field.railwam-database-custom-hidden {

display:none; font-size:0.9em; padding:10px 0; text-align:center; }
 * 1) railwam-database-loading {

display:none; }
 * 1) railwam-database-noentry {

display: block; padding: 10px; text-align: center; }
 * 1) railwam-database-noentry-text {

display: flex; list-style:none; margin:0; padding:5px 0; width:90%; }
 * 1) railwam-database-radio {

flex: auto; text-align:center; }
 * 1) railwam-database-radio li {

.railwam-database-radio-container { display:inline-block; position:relative; text-transform:lowercase; }

.railwam-database-radio-center { display:inline-block; margin:0 auto; }

font-size: .75em; font-weight: bold; height: 30px; line-height:30px; position:absolute; right:0; text-align: center; text-transform:uppercase; top:0; transition:all .3s; width:10%; }
 * 1) railwam-database-searchbtn {

display:inline-block; font-size:.9em; position:relative; }
 * 1) railwam-database-searchby {

border:none; box-sizing:border-box; display:none; height:30px; width:20%; }
 * 1) railwam-database-select {

width:10%; }
 * 1) railwam-database-select.railwam-database-custom-shown {

width: 20%; }
 * 1) railwam-database-select.railwam-database-custom-hidden {

.railwam-database-spinner { vertical-align: middle; margin-top: -3px; margin-right: 5px; }

.railwam-database-spinner > g > circle { animation: railwam-spinner 1s linear infinite; stroke-dasharray: 187; stroke-dashoffset: 0; }

@keyframes railwam-spinner { 0% {       stroke-dashoffset: 187; }   60% {        transform: rotate(450deg); stroke-dashoffset: 140.25; -webkit-transform: rotate(450deg); }   100% {        transform: rotate(720deg); stroke-dashoffset: 180; -webkit-transform: rotate(720deg); } }

.railwam-database-tablehead { display:inline-block; width:25%; }

font-weight:bold; padding:7px 0; text-align:center; text-transform:lowercase; }
 * 1) railwam-database-tablehead-container {

/* Dashboard */ display: inline-block; padding: 10px; text-align: left; }
 * 1) railwam-dashboard-score-container {

display: inline-block; padding: 10px; text-align: left; }
 * 1) railwam-dashboard-rank-container {

flex: 3 3; padding: 25px; }
 * 1) railwam-dashboard-graph-container {

flex: 1 1; padding: 25px; text-align: center; }
 * 1) railwam-dashboard-wam-container {

.railwam-dashboard-util-container { box-sizing: border-box; flex: 1 1; padding: 25px; text-align: center; }

.railwam-dashboard-util-icon-container { display: block; height: 100px; margin: 0 auto; width: 100px; }

.railwam-dashboard-util-desc { margin: 0 auto; margin-top: 25px; width: 75%; }

.railwam-dashboard-jumbo-heading { display: block; font-size: 1.75em; font-weight: bold; }

.railwam-dashboard-jumbo-desc { display: block; margin-top: 25px; }

.railwam-dashboard-sidebar-heading { display: block; font-size: 1.25em; font-weight: bold; margin-bottom: 15px; text-align: center; }

.railwam-wds { margin-top: 25px; }

/* Database v3 */ flex: 1 1; font-size: .75em; font-weight: bold; height: 30px; line-height:30px; text-align: center; text-transform:uppercase; transition:all .3s; }
 * 1) railwam-database-search {

border:none; box-sizing:border-box; display:inline-block; flex: 4 1; height:30px; padding:0 15px; transition:all .3s; text-transform:lowercase; }
 * 1) railwam-database-searchfield {

.railwam-database-filter { border-radius: 25px; box-sizing: border-box; height: 25px; padding: 0 15px; }

text-transform: lowercase; }
 * 1) railwam-database-searchtype {

margin-left: 10px; }
 * 1) railwam-database-daterange {