sgtrains.com — enhanced design by thomasrettig

/* ==UserStyle==
@name         sgtrains.com — enhanced design
@version      20220824.00.56
@namespace    userstyles.world/user/thomasrettig
@description  Design improvements.
@author       thomasrettig
@license      MIT
==/UserStyle== */

@-moz-document domain("sgtrains.com") {
* {
    font-family: system-ui !important;
}

::selection {
    background-color: white;
    color: black;
    text-shadow: none;
}

html {
    color-scheme: dark;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
}

h1 {
    letter-spacing: -0.5px;
}

p {
    font-size: 15px;
}

a {
    text-decoration: none;
}

dd {
    border-left: 1.5px solid #444;
    padding-left: 18px;
}

td {
    font-variant: proportional-nums;
}

a.p-name {
    font-weight: 500 !important;
}

.clear-margin-bottom > h2 {
    color: black;
}

.lead {
    font-size: clamp(18px, 6vw, 22px);
    line-height: clamp(24px, 6vw, 28px);
}

.col-xs-12 > p {
    max-width: 650px;
}

.line-mrt:last-child {
    padding-left: 0;
}

.line {
    user-select: none;
}

.container {
    max-width: revert;
}

.topmenu, .title {
    backdrop-filter: blur(25px) saturate(1.3) brightness(0.7);
    border-radius: 15px;
}

.topmenu {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

@media screen and (min-width: 1100px) {
    .topmenu {
        padding: 0 40px;
    }
    
    .container {
            margin: auto 8vmin;
    }
}

.nav .sm span {
    vertical-align: bottom;
}

.title {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-top: 270px;
}

.footer h3 {
    font-weight: 600;
    letter-spacing: 0.5px;
}

.nav a {
    font-size: 14.5px;
    text-transform: capitalize;
    letter-spacing: 0.2px;
    opacity: 0.8;
    padding: 0 5px;
}

.nav a:hover {
    opacity: 1;
}

.nav a:hover, .nav a:active, .index .index, .about .about, .train .train, .network .network, .technology .technology, .community .community, .guide .guide, .bvesg .bvesg, .ftlt .ftlt, .trainnetworkmap .trainnetworkmap {
    border-bottom: none;
}

.technology-overlay {
    padding: 25px;
}

.mfp-title {
    letter-spacing: 0.1px;
    font-size: 13px;
}

#linediagram, .wrapper:nth-of-type(2n+1) {
    background-color: transparent;
}

ul.tab.tab-tabs {
    display: flex;
    gap: 10px;
}

.tab > li > a:hover, .tab > li > a:focus {
    background-color: #282828;
    color: white;
}

.tab-tabs > .active > a, .tab-tabs > .active > a:hover, .tab-tabs > .active > a:focus, .tab > li > a, .svcstatus thead.delay.no-delay, .newer-posts, .older-posts, .post-content img {
    border-radius: 6px;
    margin: 0;
}

.post-content img {
    -webkit-user-drag: none;
   user-drag: none;
}

.newer-posts, .older-posts {
    border-color: #666;
    border-width: 1.5px;
    padding: 0 15px;
}

:is(.newer-posts, .older-posts):hover {
    border-color: #666;
    background-color: #222;
}

article[id] {
    background-color: #262626;
    border-radius: 10px;
    padding: 30px 35px;
}

.hentry {
    border-color: transparent;
}

.hentry::after {
    display: none;
}

.site-footer {
    border-color: #555;
    border-width: 1.5px;
}

.svcstatus thead.delay.no-delay {
    display: block;
}

.tab-tabs > .active > a {
    letter-spacing: 0.2px;
}

.tab-tabs > li {
    width: 100%;
    padding-right: 0;
}

.tab > li > a {
    color: white;
}

a:not(.rollingstock-list a, .navmenu > ul > li > a, .network-list a, .spot-list > a, .meta-list > a, .community-list > a, td > strong > a, .back-link a, .technology-list a, .guide-list, .col-xs-12 > p[style="text-align: right;"] > a, .project-list a, .tab-tabs > .active > a, a[data-toggle="tab"], a.a2a_i, i.a2a_i, a.tile) {
    color: #87ceeb !important;
    font-weight: 400;
}

a:hover:not(.rollingstock-list a, .navmenu > ul > li > a, .network-list a, .spot-list > a, .meta-list > a, .community-list > a, td > strong > a, .back-link a, .technology-list a, .guide-list, .col-xs-12 > p[style="text-align: right;"] > a, .project-list a, .tab-tabs > .active > a, a[data-toggle="tab"], a.a2a_i, i.a2a_i, a.tile) {
    color: #b0d7e7 !important;
}

.tile {
    border-radius: 6px;
    text-transform: revert;
    font-variant: all-small-caps;
    letter-spacing: 1px;
    font-size: 20px;
    filter: grayscale(1);
    transition: filter 0.15s;
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
}

.tile:hover {
    font-weight: 400;
    filter: grayscale(0) saturate(1.2);
}

.scrollprompt-arrow {
    background-position: -32px 0px;
}

.post-title a.p-name[rel="bookmark"], .post-title a.p-name[rel="bookmark"]:hover {
    color: white !important;
}

.fullbleed-text > .scrollprompt[href], .fullbleed-text > .scrollprompt[href]:hover {
    color: white !important;
}

.back-link a {
    letter-spacing: 1px;
}

.fullbleed-credits {
    backdrop-filter: blur(25px) brightness(0.9);
}

a.button {
    border-color: #85a3b0;
    border-width: 1.5px;
    border-radius: 6px;
}

a.button:hover {
    background-color: #363d3f;
    border-color: #9dc0cf;
}

div[style="margin:10px 0"].col-xs-12, hr {
    display: none;
}

.col-xs-12.img-group.img-gallery, .row-scroll {
    scroll-snap-type: x mandatory;
    padding: 0;
}

.img-gallery-item, .event, .year {
    scroll-snap-align: start;
}

:is(.rollingstock-list, .technology-list, .guide-list, .network-list, .project-list) a:hover {
    position: static;
}

.rollingstock-overlay {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.rollingstock-overlay {
    border-radius: 10px;
}

.line-mrt {
    background-size: 1.3em;
}

.line-mrt:not(.line-mini) {
    background-position: 6px 3px;;
}

.line-mini {
    background-position: 3px 2.5px;
}

.line:not(.line-mini) {
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    text-indent: 25px;
}

.network-overlay {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.network-overlay > .line {
    padding-left: 17px;
}

.rollingstock-overlay h4, .technology-overlay h4 {
    font-size: 19px;
    margin-bottom: 0.75vmin;
}

:is(span.line.line-mrt.tel, span.line.line-cga.cga, .line-lrt, .line-mrt, .ccl):not(.stncode, .destcode) {
    width: fit-content;
    padding-right: 7px;
}

:is(span.line.line-mrt.tel, span.line.line-cga.cga, .line-lrt, .line-mrt):not(:first-child, div > p[title]) {
    margin-left: 7px;
}

h2 > small {
    font-weight: 500;
}

.img-responsive, .network-overlay, .guide-overlay, .project-overlay {
    border-radius: 6px;
}

.img-lightbox {
    display: block;
    overflow: hidden;
}

.img-lightbox img:hover {
    transform: scale(1.02);
}

.img-lightbox img {
    transition: transform 0.2s;
}

.footer {
    padding: 6vmin 0;
}

.guide-overlay {
    background-color: #333;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-bottom: 0;
    transition: background-color 0.07s;
}

.guide-overlay:hover {
    background-color: #444;
}

.guide-overlay > h3 {
    margin: 0;
}

.train-car {
    border-color: #666;
    border-width: 1.5px;
}

.train-legend {
    font-size: 14px;
    max-width: 100% !important;
}

.table thead > tr > th, .table tbody > tr > td {
    border-color: #333;
}

.table {
    max-width: 500px;
}

.select2-container--default .select2-selection--single {
    background-color: #444;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #ddd;
}

.select2-container--default .select2-results__option[aria-disabled=true] {
    color: #eee;
}

.select2-dropdown {
    background-color: #555;
}

.select2-container--default .select2-results>.select2-results__options {
    color: white;
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #5897fb;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #666;
}

.select2-container--default .select2-results__option[aria-selected=true]:hover {
    background-color: #5897fb;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border-radius: 6px;
    border: none;
    outline: none;
}

.select2-container--default.select2-container--open.select2-container--below .select2-selection--single, .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple, .select2-dropdown {
    border: none;
}

.survey {
    background-color: #222;
}

.post-title, .post p {
    color: #eee;
}

.post-content > h1, h2, h3, h4, h5 {
    color: white;
    letter-spacing: -0.2px;
}

.code-block-3, .code-block-6, .code-block-8, .code-block-10 {
    display: none !important;
}

section.post-content p a, section.post-content table a {
    border-bottom: none;
}

.wp-embed {
    background-color: #222;
    border: none;
    border-radius: 6px;
}

.wp-embed-site-icon[src="https://blog.sgtrains.com/wp-content/uploads/2018/01/cropped-badge_512_dark-32x32.png"] {
    filter: invert(1);
}

.wp-embed-share-input {
    font-family: monospace !important;
}

.site-head {
    border-bottom: none;
}

.wp-caption {
    border: none;
    background-color: transparent;
}

.wp-caption img[class*=wp-image-] {
    border: none;
    border-radius: 6px;
}

.about > .wrapper:last-of-type {
    padding-bottom: 6vmin;
}

.code-block-11 {
    border-color: #555;
    border-width: 1.5px;
    padding-bottom: 0;
}
}