MediaWiki: Tweeki.css

Latest revision as of 09:04, 1 September 2021

/* Responsive table CSS */
.table {
  width: auto;
  height: auto;
  max-width: 100%;
  position: relative;
  display: inline-block;
}

.table table {
  width: max-content;
  position: relative;
  border-collapse: collapse;
  margin: 0;
}

.table div:first-child table {
    margin-left: 1px;
}

.table div:nth-child(2) table {
  border-right: 1px solid #CCC;
  border-left: 1px solid #CCC;
}

.table td,
.table th {
  padding: 0.25em;
  width: max-content;
  max-width: 400px;
  text-align: center;
  border-bottom: 1px solid #CCC; 
}

.table td {
    position: relative;
}

.table tr:nth-child(n+2) th {
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  left: 0;
  background: #FFF;
  z-index: 2;
}

.table tr:nth-child(n+2) th span {
  display: block;
  height: 100%;
  width: 1px;
  position: absolute;
  top: 0;
  right: 0;
  background: #CCC;
}

.table tr:first-child th {
  background: #507529;
  color: #FFF;
}

.table.mx-auto div.syncscroll:first-child {
    overflow-x: hidden;
    position: sticky;
    top: 50px;
    z-index: 3;
}

.table.mx-auto div.syncscroll:nth-child(2) {
    overflow-x: auto;
    margin-top: -26px;
}

/* Wiki coloring */
body {
    background-color: #b2dab8;
    background-image: url(//s3-main.serenesforest.net/Site-background.jpg);
    background-position: center top;
    background-size: auto;
    background-repeat: repeat-x;
    background-attachment: fixed;
}

.mw-body {
    background-color: #effbe3;
}

.panel-body {
    background: #d6eebb url(//s3-main.serenesforest.net/Leaf_Decoration.png) no-repeat scroll right top;
}

.panel-footer {
    color: white;
    background-color: #507529;
}

.panel-default {
    border-color: #485f30;
}

.panel-default>.panel-heading {
    color: white;
    background-image: -webkit-linear-gradient(top,#63863f 0,#485f30 100%);
    background-image: -o-linear-gradient(top,#63863f 0,#485f30 100%);
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#63863f),to(#485f30));
    background-image: linear-gradient(to bottom,#63863f 0,#485f30 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5',endColorstr='#ffe8e8e8',GradientType=0);
    background-repeat: repeat-x;
}

.navbar-default {
    background-image: -webkit-linear-gradient(top,#63863f 0,#485f30 100%);
    background-image: -o-linear-gradient(top,#63863f 0,#485f30 100%);
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#63863f),to(#485f30));
    background-image: linear-gradient(to bottom,#63863f 0,#485f30 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#fff8f8f8',GradientType=0);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 1px 5px rgba(0,0,0,0.075);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 1px 5px rgba(0,0,0,0.075);
}

#footer {
    background: #507529;
}

#footer a {
    color: #84b733;
}

.navbar-brand {
    font-size: calc(.7em + 0.7vw);
}

.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus {
    color: #add470;
    background-color: transparent;
}

.navbar-default .navbar-nav>li>a {
    color: #84b733;
}

.navbar-default .navbar-brand {
    color: #effbe3;
}

.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {
    color: #84b733;
}

a {
    color: #507529;
}

a.new {
    color: #0396ff;
}

a:hover, a:focus {
    color: #507529;
}

#content a.external, #content a.external[href^="gopher://"] {
    background: url(https://s3-main.serenesforest.net/External_Link.png) center right no-repeat;
}

.btn-primary {
    background-image: -webkit-linear-gradient(top,#63863f 0,#485f30 100%);
    background-image: -o-linear-gradient(top,#63863f 0,#485f30 100%);
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#63863f),to(#485f30));
    background-image: linear-gradient(to bottom,#63863f 0,#485f30 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7',endColorstr='#ff265a88',GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
    background-repeat: repeat-x;
    border-color: #485f30;
    background-color: #507529;
}

.btn-primary:hover, .btn-primary:focus {
    background-color: #485f30;
}

.btn-primary:hover {
    border-color: #307420;
}

.btn-primary:active, .btn-primary.active, .btn-primary:active:focus {
    background-color: #485f30;
    border-color: #485f30;
}

pre, .mw-code {
    background-color: #d6eebb;
    border: 1px solid #507529;
}

.tab-content div.active:first-child pre {
    border-top-left-radius: 0px;
}

.nav-tabs {
    border-bottom: none;
}

.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus {
    border-top-color: #507529;
    border-right-color: #507529;
    border-left-color: #507529;
    border-bottom-width: 0px;
}

.nav-tabs>li>a:hover {
    border-color: #507529 #507529 #507529;
}

.nav>li>a:hover, .nav>li>a:focus {
    text-decoration: none;
    background-color: transparent;
}

.mw-datatable tr:hover td {
    background-color: #f3ffea;
}

.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button {
    color: #fff;
    background-color: #456b1f;
    border-color: #456b1f;
}

.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:hover {
    background-color: #7eb93f;
    border-color: #7eb93f;
}

.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked + span {
    background-color: #456b1f;
    border-color: #456b1f;
}

.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked:hover + span {
    background-color: #7eb93f;
    border-color: #7eb93f;
}

#wpSave {
    color: #fff;
    background-color: #456b1f;
    border-color: #65a42e;
}

.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked:focus + span {
    background-color: #456b1f;
    border-color: #456b1f;
    box-shadow: inset 0 0 0 1px #456b1f, inset 0 0 0 2px #fff;
}

.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:focus + span {
    border-color: #456b1f;
    box-shadow: inset 0 0 0 1px #456b1f;
}

.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:active + span {
    background-color: #485f30;
    border-color: #485f30;
    box-shadow: inset 0 0 0 1px #485f30;
}

.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
    background-color: #d6eebb;
}

.mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle {
    background-color: #d6eebb;
}

.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined {
    background-color: #d6eebb;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.row-center {
    display: flex;
    align-items: center;
}

/* Game overview styles */
.game-overview .panel-body div.row:first-child {
    border-bottom: 1px solid #485f30;
}

.game-overview .panel-body div.row:nth-child(2) {
    padding-top: 15px;
}

.game-overview .panel-body div.row:not(:last-child) {
    padding-bottom: 15px;
}

.game-overview .panel-body div.row:nth-child(n+2) div p {
    margin: auto;
}

.center-overflowed-25 {
    margin-top: calc(-25%);
}

.center-overflowed-30 {
    margin-top: calc(-30%);
}

.center-overflowed-35 {
    margin-top: calc(-35%);
}

.center-overflowed-40 {
    margin-top: calc(-40%);
}

.center-overflowed-45 {
    margin-top: calc(-45%);
}

/* Frontpage news styles */
.news-panel {
    height: 150px;
    display: flex;
    background-size: cover;
    background-position: center;
}

.news-heading {
    align-self: flex-end;
    background-color: rgba(0,0,0,.65);
    color: white;
    font-size: 14px;
    font-weight: bold;
    padding: 2px;
    width: 100%;
}

.wordpress-news a:hover {
    text-decoration: none;
}

.loader {
    border: 16px solid #ebebeb;
    border-top: 16px solid #507529;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    margin-top: 25px;
    margin-bottom: 25px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Frontpage Game Blocks */
.games-list a:hover {
    text-decoration: none;
}

.game-block-panel {
    border: 1px solid #485f30;
    border-radius: 4px;
    display: flex;
    background-size: cover;
    background-position: center;
}

.game-block-name {
    align-self: flex-start;
    background-image: linear-gradient(to bottom,rgba(99, 134, 63, .85), rgb(72, 95, 48, .85));
    color: white;
    font-size: 14px;
    font-weight: bold;
    padding: 6px 2px;
    width: 100%;
}

.game-block-nickname {
    align-self: flex-end;
    background-image: linear-gradient(to bottom,rgba(99, 134, 63, .85), rgb(72, 95, 48, .85));
    color: white;
    font-size: 14px;
    font-weight: bold;
    padding: 2px;
    width: 100%;
}

.game-block-name.hidden-xs a {
    text-decoration: none;
    color: white;
    font-size: 14px;
    font-weight: bold;
}

.game-block-nickname.visible-xs a {
    text-decoration: none;
    color: white;
    font-size: 14px;
    font-weight: bold;
}

div.games-list .flex-row.row {
    margin-bottom: 20px;
}