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; }

span.railwam-smalltext { font-size: 0.8em; line-height: 1em; margin-left: 5px; text-align: left; text-transform: uppercase; }

span.railwam-smalltext-lowercase { font-size: 0.8em; line-height: 1em; margin-left: 5px; text-align: left; text-transform: lowercase; }

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

/* getTextWidth element */ .railwam-getTextWidth { display: none; } /* Log element */ .railwam-data-element { display:none; }

/* Rail Module Styles */ 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: 1.5em; }

.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 {

.railwam-module-main-link { display: inline-block; }

/* Log alert styles */ background: linear-gradient(to right,rgba(255, 97, 97, 0.15) 55%, transparent); border-radius: 3px; cursor: pointer; margin-bottom: 5px; padding: 5px; }
 * 1) railwam-log-alert {

display: flex; }
 * 1) railwam-log-alert-header {

.railwam-log-alert-header-element { align-items: center; display: flex; }

fill: #ff6161; margin-right: 7px; width: 18px; }
 * 1) railwam-log-alert-icon-container {

font-size:1.1em; }
 * 1) railwam-log-alert-header-text {

fill: currentColor; flex: 1 1; flex-basis: 12px; margin-left: 7px; }
 * 1) railwam-log-alert-drop-container {

display: none; padding: 2px 5px; }
 * 1) railwam-log-alert-body {

font-weight: bold; }
 * 1) railwam-log-alert-body-importanttext {

display: flex; justify-content: space-evenly; margin-top: 7px; }
 * 1) railwam-log-alert-button-container {

font-size: 0.9em; padding: 3px 9px; min-width: 60px; }
 * 1) railwam-log-alert-button-container .wds-button {

/* 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, #railwam-vertRank-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; }

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

border-radius:.2em; cursor:pointer; display:inline-block; font-size:0.8em; font-weight:bold; margin:0; margin-left: 10px; padding:5px 10px; text-transform:uppercase; }
 * 1) railwam-util-cancel {

.railwam-util-error { color: #ff4949; display:none; font-size: 0.9em; }

.railwam-util-spinner { vertical-align: middle; margin-top: -3px; margin-right: 5px; } .railwam-util-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-util-filter-input { background: transparent; border-radius: 8px; color: inherit; height: 25px; padding: 0 10px; padding-top: 15px; }

.railwam-util-placeholder { display: block; font-size: 0.93em; margin-left: 10px; pointer-events: none; position: absolute; text-transform: lowercase; top: 0; transition: all .3s ease; }

.railwam-util-input:focus ~ .railwam-util-placeholder, .railwam-util-input:not(:focus):valid ~ .railwam-util-placeholder, .railwam-util-hasVal ~ .railwam-util-placeholder { font-size: .85em; height: 0; line-height: 25px; }

.railwam-util-filter { display: inline-block; position: relative; }

.railwam-util-heading { display: block; font-size: 1.5em; font-weight: bold; margin-bottom: 10px; }

.railwam-util-input:focus { outline: none; }

.railwam-util-input-error { border-color: #ff4949!important; }

.railwam-util-tab { border-bottom: 2px solid transparent; cursor: pointer; display: inline-block; margin-bottom: -1px; padding: 5px 15px; text-transform: lowercase; transition: all .2s; }

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

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

.railwam-util-input:focus ~ .railwam-datepicker { opacity: 1; pointer-events: auto; visibility: visible; }

/* Dashboard Styles */ .railwam-dashboard-indiv-data-container { display: inline-block; padding: 10px 50px; }

.railwam-dashboard-data-flex-item { flex: 1 1; padding: 15px; text-align: center; }

align-items: flex-start; }
 * 1) railwam-dashboard-util-section-container .railwam-flex-container {

.railwam-dashboard-card { border-radius: 5px; box-shadow: 0 1px 3px rgba(128, 128, 128, 0.12), 0 1px 2px rgba(128, 128, 128, 0.10); margin: 20px 10px 5px; transition: all .3s ease-in; }

.railwam-dashboard-card:hover { box-shadow: 0 5px 28px rgba(128, 128, 128, 0.12), 0 5px 10px rgba(128, 128, 128, 0.22); }

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

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

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

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

.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; }

flex: 2 2; padding: 0 0 10px 10px; }
 * 1) railwam-dashboard-wam-graph-container {

.railwam-dashboard-nograph { align-items: center; display: flex; justify-content: center; }

opacity: 0.75; }
 * 1) railwam-dashboard-nograph-text {

align-items: center; display: flex; flex: 1 1; flex-direction: column; justify-content: center; padding: 50px; }
 * 1) railwam-dashboard-graph-link-container {

text-align: center; }
 * 1) railwam-dashboard-graph-link-container .railwam-dashboard-jumbo-desc {

background-size: cover; padding: 50px; }
 * 1) railwam-dashboard-database-container {

/* Datepicker Styles */ .railwam-datepicker { box-shadow: 0 3px 10px rgb(64, 64, 64); opacity: 0; pointer-events: none; position: absolute; top: 42px; transition: visibility 0s, opacity .2s ease; visibility: hidden; width: 215px; z-index: 1; }

.railwam-datepicker-scroll-container { height: 250px; overflow-y: scroll; }

.railwam-datepicker-month-container { display: block; font-size: 0.86em; height: 2.25em; line-height: 2.25em; text-align: center; }

.railwam-datepicker-monthname { font-weight: bold; text-transform: uppercase; }

.railwam-datepicker-day-table, .railwam-datepicker-week-header { border-collapse: collapse; table-layout: fixed; width: 100%; }

.railwam-datepicker-days th:not(:empty) { cursor: pointer; }

.railwam-datepicker-day-table th { font-size: 0.79em; font-weight: normal; height: 25px; }

.railwam-datepicker-week-header thead th { font-size: 0.79em; font-weight: bold; }

.railwam-datepicker-year-selector { font-size: 0.86em; height: auto; margin: 10px; padding: 5px; }

.railwam-datepicker-year-select-cont { display: flex; justify-content: center; }

/* Database Styles */ .railwam-util-disabled, .railwam-util-disabled * { cursor: not-allowed; }

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

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

.railwam-database-entrytable-column { box-sizing:border-box; display:table-cell; flex:1 1; padding:7px 0; padding-left:10px; text-align:left; vertical-align:middle; }

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

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

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

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

.railwam-database-tablehead { align-items: center; cursor: pointer; display: flex; flex: 1 1; padding: 7px 10px; padding-right: 15px; transition: all .3s ease; -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; width: auto!important; }

.railwam-database-sort-icon-container { flex: 1 1; height: 1em; text-align: right; }

.railwam-database-tablehead > span > svg { height: 1em; }

background: transparent; border-bottom: 1px solid; color: inherit; display: flex; font-weight:bold; padding:0; text-align:left; text-transform:lowercase; }
 * 1) railwam-database-tablehead-container {

font-size: .75em; font-weight: bold; margin-top: 15px; text-align: center; text-transform:uppercase; transition:all .3s; }
 * 1) railwam-database-search {

.railwam-database-searchfield-container { display: flex; margin-top: 15px; position: relative; }

background: transparent; border: none; box-sizing: border-box; color: inherit; display: inline-block; height: 30px; min-width: 200px; padding: 0 15px; }
 * 1) railwam-database-searchfield {

margin-right: 10px; text-transform: lowercase; }
 * 1) railwam-database-searchtype {

.railwam-database-searcharea-container { flex: 1 1; padding: 25px; }

.railwam-database-searchfield-ph, .railwam-util-filter-ph { line-height: 43px; }

.railwam-database-filter-container { margin-bottom: 20px; }

.railwam-database-lastavailable { display: block; margin-top: 10px; }

margin-left: 0; transition: all 0.2s; }
 * 1) railwam-database-searchfield-errors {

.railwam-database-searchfield-container .railwam-util-filter-input { box-sizing: initial; }

margin-top: 15px; }
 * 1) railwam-database-daterange-filter-cont {

flex: 1 1; margin-top: 15px; }
 * 1) railwam-database-loggedonly-container {

height: initial; margin: 3px 3px 3px 0; }
 * 1) railwam-database-loggedonly {

display: inline-block; font-size: 0.93em; -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; }
 * 1) railwam-database-loggedonly ~ label {

/* Graph Styles */ margin-top: 5px; }
 * 1) railwam-graph-errors {

.railwam-graph-nograph { align-items: center; display: flex!important; justify-content: center; }

font-size: 0.93em; margin-top: 20px; }
 * 1) railwam-graph-loggedonly-container {

height: initial; }
 * 1) railwam-graph-loggedonly {

-moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; }
 * 1) railwam-graph-loggedonly ~ label {

.railwam-graph-filter { display: block; margin-top: 20px; }

.railwam-graph-main-cont { padding: 25px; }

text-transform: lowercase; }
 * 1) railwam-graph-graphtype {

display: block; flex: 1 1; }
 * 1) railwam-graph-options {

display: block; flex: 2 2; }
 * 1) railwam-graph-container {

.railwam-graph-notlogged-text { font-style: italic; text-align: center; }

/* Logger Styles */ .railwam-log-entry-date { font-weight: bold; margin-right: 25px; }

display: none; margin-top: 25px; text-align: center; }
 * 1) railwam-log-cancel-confirmation {

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

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

font-size: 0.9em; }
 * 1) railwam-log-notlogged-warning {

max-height: 250px; overflow-y: auto; }
 * 1) railwam-log-console-entries {

.railwam-log-console-entry-found { background: rgba(127, 201, 20, 0.1); border-top: 2px solid rgba(127, 201, 20, 0.5); }

.railwam-log-console-entry-missing { background: rgba(234, 133, 0, 0.1); border-top: 2px solid rgba(234 ,133, 0, 0.5); }

.railwam-log-console-entry { display: none; padding: 10px; }

margin-top: 5px; }
 * 1) railwam-log-errors {

margin-left: 25px; margin-top: 0; }
 * 1) railwam-log-log-btn {

padding: 25px; }
 * 1) railwam-log-options, #railwam-log-console {

height: auto; }
 * 1) railwam-log-overwrite {

align-items: center; display: inline-flex; margin-left: 25px; }
 * 1) railwam-log-overwrite-cont {