|
Tags: Replaced Manual revert |
| Line 2: |
Line 2: |
| li.not-available{ | | li.not-available{ |
| filter: opacity(0.4); | | filter: opacity(0.4); |
| }
| |
|
| |
| /* All CSS here will be loaded for users of the Citizen skin */
| |
|
| |
| /*Main Section*/
| |
| h1.home-header__title, p.home-header__subtitle {
| |
| text-align: center;
| |
| font-size: 2.00rem;
| |
| }
| |
|
| |
| .citizen-body img {
| |
| max-width: 100%;
| |
| }
| |
|
| |
| .not-available {
| |
| filter: opacity(0.4);
| |
| }
| |
|
| |
| #siteSub {
| |
| display: none;
| |
| }
| |
|
| |
| :root {
| |
| --width-layout: 1680px;
| |
| --border-radius--small: 2px;
| |
| --border-radius--medium: 4px;
| |
| --border-radius--large: 8px;
| |
| }
| |
|
| |
| li.gallerybox{
| |
| position: relative;
| |
| padding: 5px;
| |
| background: var(--color-surface-1);
| |
| border-radius: 4px;
| |
| box-shadow: 0 3px 6px rgb(0 0 0 / 4%), 0 3px 6px rgb(0 0 0 / 6%);
| |
| margin-bottom: 5px;
| |
| font-weight: 500;
| |
| }
| |
|
| |
| div.gallerytext {
| |
| color: none !important;
| |
| font-size: inherit !important;
| |
| font-style: normal !important;
| |
| }
| |
|
| |
| div.gallerytext > pre {
| |
| margin-top: -20px !important;
| |
| margin-bottom: -15px !important;
| |
| font-size: 13px !important;
| |
| font-family: inherit;
| |
| color: gray;
| |
| border: none;
| |
| background: none;
| |
| }
| |
|
| |
| /* Infobox section */
| |
| @media screen and (max-width: 720px) {
| |
| table.infobox {
| |
| display: inline-table !important;
| |
| }
| |
| }
| |
|
| |
| .citizen-body ul {
| |
| margin: 0.5rem 0 0.5rem 1.5rem;
| |
| }
| |
|
| |
| table.infobox {
| |
| margin-left: 1.4rem;
| |
| clear: right;
| |
| float: right;
| |
| z-index: 3!important;
| |
| overflow: hidden;
| |
| width: 350px;
| |
| padding: 5px;
| |
| max-width: 100%;
| |
| margin-bottom: 1.6rem;
| |
| padding-bottom: 20px!important;
| |
| background: var(--color-surface-2);
| |
| border-radius: var(--border-radius--medium);
| |
| border-spacing: 0;
| |
| border: 1px solid #62626226;
| |
| box-shadow: var(--box-shadow-card);
| |
| font-size: 0.875rem;
| |
| }
| |
|
| |
|
| |
| th.infobox-title{
| |
| padding-top: 10px;
| |
| width: 100%;
| |
| margin-top: 20px;
| |
| margin-bottom: 5px;
| |
| color: var(--color-base--emphasized);
| |
| font-size: 1.4rem;
| |
| line-height: 1.4;
| |
| }
| |
|
| |
| th.infobox-header{
| |
| width: 100%;
| |
| padding-top: 15px;
| |
| border-top: 1px solid;
| |
| border-color: var(--border-color-base);
| |
| margin-top: 15px;
| |
| color: var(--color-base--emphasized);
| |
| font-size: 1rem;
| |
| }
| |
|
| |
| table.infobox>tbody {
| |
| text-align: center;
| |
| }
| |
|
| |
| /* LinkBar CSS */
| |
| .hbmenu {
| |
| list-style: none;
| |
| text-align: center;
| |
| margin: auto !important;
| |
| }
| |
|
| |
| .hbmenu > li {
| |
| display: inline-flex;
| |
| border: none;
| |
| text-align: center;
| |
| background: #00448bb0;
| |
| padding: 8px 24px 8px 24px;
| |
| font-weight: 600;
| |
| margin-right: 0px;
| |
| margin-bottom: 10px;
| |
| border-radius: 4px;
| |
| box-shadow: none;
| |
| }
| |
| .hbmenu > li > a {
| |
| color: aliceblue !important;
| |
| }
| |
|
| |
| .hbmenu > li > a:hover {
| |
| color: var(--color-primary--hover);
| |
| }
| |
|
| |
| /* Main Page Browser Homebrews Section*/
| |
| ul.small-block-grid-2.large-block-grid-4 {
| |
| display: inline-flex;
| |
| list-style: none;
| |
| }
| |
|
| |
|
| |
| /* Home Grid Section*/
| |
| .home-grid {
| |
| display: grid;
| |
| grid: auto-flow dense/repeat( auto-fit, minmax( 9.375rem, 1fr ) );
| |
| /*grid-auto-rows: minmax( 3rem, auto );*/
| |
| grid-gap: 0.625rem;
| |
| }
| |
|
| |
| .home-grid--col2 {
| |
| grid-template-columns: 1fr 1fr;
| |
| }
| |
|
| |
| .home-grid a.external {
| |
| background-image: none;
| |
| }
| |
|
| |
| .home-card {
| |
| position: relative;
| |
| padding: 15px;
| |
| background: var( --color-surface-2 );
| |
| border-radius: 4px;
| |
| box-shadow: none;
| |
| font-size: 0.875rem;
| |
| }
| |
|
| |
| /*box-shadow: 0 3px 6px rgba( 0, 0, 0, 0.04 ), 0 3px 6px rgba( 0, 0, 0, 0.0575 );*/
| |
|
| |
|
| |
| .home-card table.timeline {
| |
| margin-top: 0.2rem;
| |
| }
| |
|
| |
| .home-card--col2 {
| |
| grid-column: span 2;
| |
| }
| |
|
| |
| .home-card--row3 {
| |
| grid-row: span 3;
| |
| }
| |
|
| |
| .home-card--row4 {
| |
| grid-row: span 4;
| |
| }
| |
|
| |
| .home-card--row8 {
| |
| grid-row: span 8 / auto;
| |
| }
| |
|
| |
| .home-card__label {
| |
| color: var( --color-base--subtle );
| |
| font-size: 0.8125rem;
| |
| letter-spacing: 0.75px;
| |
| }
| |
|
| |
| h3.home-card__header {
| |
| margin-top: 0;
| |
| font-size: 1rem;
| |
| }
| |
|
| |
| .home-card__header a {
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: space-between;
| |
| }
| |
|
| |
| .home-card__header a:after {
| |
| content: '▶';
| |
| font-size: 0.8125rem;
| |
| }
| |
|
| |
| .home-card__background {
| |
| position: absolute;
| |
| top: 0;
| |
| right: 0;
| |
| bottom: 0;
| |
| left: 0;
| |
| border-radius: 4px;
| |
| }
| |
|
| |
| .home-card__background1 {
| |
| background: transparent;
| |
| }
| |
|
| |
| .home-card__background2 {
| |
| background: transparent;
| |
| }
| |
|
| |
| .home-card__background3 {
| |
| background: transparent;
| |
| }
| |
|
| |
| .home-card__background4 {
| |
| background: transparent;
| |
| }
| |
|
| |
| .home-card__background5 {
| |
| background: transparent;
| |
| }
| |
|
| |
| .home-card__background6 {
| |
| background: transparent;
| |
| }
| |
|
| |
|
| |
| .home-card__background img {
| |
| width: 100%;
| |
| height: 100%;
| |
| object-fit: scale-down;
| |
| object-position: center;
| |
| transition: transform 0.2s ease;
| |
| }
| |
|
| |
| /*.home-card:hover .home-card__background img {
| |
| transform: scale( 1.1 );
| |
| }*/
| |
|
| |
| .home-card--button:hover {
| |
| transform: scale( 1.05 );
| |
| }
| |
|
| |
| .home-card__foreground {
| |
| position: absolute;
| |
| }
| |
|
| |
| .home-card__foreground .home-card__label {
| |
| color: #bababa;
| |
| }
| |
|
| |
| .home-card__foreground .home-card__header {
| |
| color: #fff;
| |
| }
| |
|
| |
| .home-card p {
| |
| margin-top: 0.2rem;
| |
| font-size: 0.875rem;
| |
| }
| |
|
| |
| .home-card.home-card--button {
| |
| overflow: hidden;
| |
| padding: 5px 5px 10px 5px;
| |
| height: 60px;
| |
| }
| |
|
| |
| .home-card--button a {
| |
| display: flex;
| |
| height: 100%;
| |
| align-items: center;
| |
| padding: 0 15px;
| |
| background: transparent;
| |
| color: #fff;
| |
| font-weight: 500;
| |
| }
| |
|
| |
| .home-card--button .home-card__background a {
| |
| padding: 0;
| |
| }
| |
|
| |
| .home-link {
| |
| display: grid;
| |
| margin-top: 6px;
| |
| font-size: 0.875rem;
| |
| font-weight: 500;
| |
| grid-gap: 6px;
| |
| text-align: center;
| |
| }
| |
|
| |
| .home-link__button {
| |
| display: flex;
| |
| }
| |
|
| |
| .home-link__button a {
| |
| flex-grow: 1;
| |
| padding: 0.3rem 0.6rem;
| |
| border: 1px solid;
| |
| border-color: var( --border-color-base );
| |
| background: var( --background-color-framed );
| |
| border-radius: 4px;
| |
| color: var( --color-base--emphasized );
| |
| }
| |
|
| |
| .home-link__button a:hover {
| |
| background: var( --background-color-framed--hover );
| |
| }
| |
|
| |
| .home-link__button a:active {
| |
| background: var( --background-color-framed--active );
| |
| }
| |
|
| |
| #home-content {
| |
| margin-top: 1.6rem;
| |
| }
| |
|
| |
| .home-stats {
| |
| flex-grow: 1;
| |
| line-height: 1;
| |
| }
| |
|
| |
| .home-stats__value {
| |
| font-size: 1.0rem;
| |
| font-weight: 600;
| |
| }
| |
|
| |
| .home-stats__unit {
| |
| margin-top: 0.2rem;
| |
| color: var( --color-base--subtle );
| |
| font-size: 0.8125rem;
| |
| }
| |
|
| |
| #home-card-discord {
| |
| background: #5865f2;
| |
| border-radius: var(--border-radius--medium);
| |
| }
| |
|
| |
| #home-card-patreon {
| |
| background: #ff424d;
| |
| }
| |
|
| |
| #home-card-reddit {
| |
| background: #ff4500;
| |
| }
| |
|
| |
| #home-card-discord a,
| |
| #home-card-patreon a,
| |
| #home-card-reddit a {
| |
| justify-content: center;
| |
| }
| |
|
| |
| #home-card-discord img,
| |
| #home-card-patreon img,
| |
| #home-card-reddit img {
| |
| transition: transform 0.2s ease;
| |
| }
| |
|
| |
| #home-card-discord:hover img,
| |
| #home-card-patreon:hover img,
| |
| #home-card-reddit:hover img {
| |
| transform: scale( 1.1 );
| |
| }
| |
|
| |
| .home-footer {
| |
| font-size: 0.8125rem;
| |
| font-family: monospace;
| |
| text-align: center;
| |
| }
| |
|
| |
| #home-card-editor {
| |
| margin-top: 5px;
| |
| border: 1px solid #62626226;
| |
| }
| |
|
| |
| /*.home-header {
| |
| margin-top: 2rem;
| |
| margin-bottom: 2rem;
| |
| padding-top: 1rem;
| |
| }*/
| |
|
| |
| .home-header__title {
| |
| margin-top: 0;
| |
| font-size: 1.5rem;
| |
| }
| |
|
| |
| .home-header .home-header__subtitle {
| |
| margin-top: 0.4rem;
| |
| color: var( --color-base--subtle );
| |
| font-size: 0.875rem;
| |
| }
| |
|
| |
| .home-header__search {
| |
| max-width: 600px;
| |
| padding: 0.6rem 0.8rem;
| |
| margin: 0.8rem auto 0 auto;
| |
| background: none;
| |
| border-radius: none;
| |
| box-shadow: none;
| |
| color: none;
| |
| font-size: 0.875rem;
| |
| text-align: center;
| |
| }
| |
|
| |
| .home-header__searchIcon img {
| |
| margin-right: 0.5rem;
| |
| opacity: var( --opacity-icon-base );
| |
| }
| |
|
| |
| .keyboard-text {
| |
| padding: 0 5px;
| |
| border: 1px solid;
| |
| margin: 0 2px;
| |
| border-radius: 4px;
| |
| }
| |
|
| |
| html.skin-citizen-dark .home-header__searchIcon img {
| |
| filter: invert( 1 );
| |
| }
| |
|
| |
| @media ( min-width: 682px ) {
| |
| .home-header {
| |
| text-align: center;
| |
| }
| |
| }
| |
|
| |
| @media ( hover: none ) {
| |
| .desktoponly {
| |
| display: none;
| |
| }
| |
| }
| |
|
| |
| /* Cargo Table Css*/
| |
| table.dataTable.stripe tbody tr.odd, table.dataTable.display tbody tr.odd {
| |
| background-color: transparent;
| |
| }
| |
|
| |
| table.dataTable.display tbody tr.odd > .sorting_1, table.dataTable.order-column.stripe tbody tr.odd > .sorting_1 {
| |
| background-color: transparent;
| |
| }
| |
|
| |
| table.dataTable.display tbody tr.even > .sorting_1, table.dataTable.order-column.stripe tbody tr.even > .sorting_1 {
| |
| background-color: transparent;
| |
| }
| |
|
| |
| table.dataTable tbody tr {
| |
| background-color: transparent;
| |
| }
| |
|
| |
| tr.even:hover, tr.odd:hover {
| |
| background-color:var(--background-color-quiet--hover) !important;
| |
| }
| |
|
| |
| table.dataTable, table.dataTable th, table.dataTable td {
| |
| text-align: left;
| |
| }
| |
|
| |
| .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate {
| |
| color: var(--color-base--subtle);
| |
| font-weight: 500;
| |
| }
| |
|
| |
| table.dataTable tbody th, table.dataTable tbody td {
| |
| padding: 6px 10px;
| |
| }
| |
|
| |
| /*Footer*/
| |
|
| |
| #footer-sitetitle {
| |
| margin: none !important;
| |
| }
| |
|
| |
| #footer-bottom {
| |
| margin-top: none !important;
| |
| }
| |
|
| |
| /*Main*/
| |
| .heading-main1{
| |
| border: none;
| |
| background: #00448bb0;
| |
| border-radius: 4px;
| |
| color: aliceblue;
| |
| padding: 8px;
| |
| font-size:125%;
| |
| font-weight:bold;
| |
| text-align: center;
| |
| }
| |
|
| |
| /*Table CSS*/
| |
| td, th {
| |
| padding: 5px;
| |
| }
| |
|
| |
| tr:hover {
| |
| background-color:var(--background-color-quiet--hover)
| |
| }
| |
|
| |
| /*table border top and bottom*/
| |
| table.dataTable tfoot th, table.dataTable tfoot td {
| |
| display: none;
| |
| }
| |
|
| |
| table.dataTable thead th, table.dataTable thead td {
| |
| border-bottom: 2px solid #8a8a8a8f;
| |
| padding: 5px 10px;
| |
| }
| |
|
| |
| /*toc bar*/
| |
| table#toc2 {
| |
| width: auto;
| |
| margin-right: 0px;
| |
| margin-left: auto;
| |
| border: solid 1px #999fba75;
| |
| border-radius: 4px;
| |
| padding: 0px 20px 0px 20px;
| |
| color: #858585;
| |
| }
| |
|
| |
| /*button page*/
| |
| .dataTables_wrapper .dataTables_paginate .paginate_button.current {
| |
| background: #ededed9e;
| |
| border-radius: 4px;
| |
| border: none;
| |
| }
| |
|
| |
| /*link text*/
| |
| a {
| |
| color: hsl(213deg 45% 52%);
| |
| }
| |
|
| |
|
| |
| /*input box margin fix*/
| |
| .dataTables_wrapper .dataTables_filter input {
| |
| margin-bottom: 8px;
| |
| }
| |
|
| |
| input, select, textarea {
| |
| padding: 8px;
| |
| border-radius: 4px;
| |
| }
| |
|
| |
|
| |
| /*hide heading ^*/
| |
| .section-indicator {
| |
| display: none;
| |
| }
| |
|
| |
|
| |
| /*wikitable fix*/
| |
| table.wikitable tr th {
| |
| background-color: rgb(167 175 184 / 10%);
| |
| text-align: center;
| |
| vertical-align: middle;
| |
| }
| |
|
| |
| table.wikitable tr th, table.wikitable tr td {
| |
| padding: 8px 12px 2px 12px;
| |
| border: 1px solid var(--border-color-base);
| |
| }
| |
|
| |
| table.wikitable {
| |
| max-width: -webkit-fill-available;
| |
|
| |
| }
| |
|
| |
| /*apptable*/
| |
| table.apptable tr th, table.apptable tr td {
| |
| border: 1px solid var(--border-color-base);
| |
| padding: 2px 4px;
| |
| }
| |
|
| |
| table.apptable tr th {
| |
| background-color: rgb(207 221 236 / 10%);
| |
| }
| |
|
| |
|
| |
| /*grey*/
| |
| :root {
| |
| --color-surface-0: hsl(0deg 0% 96% / 90%);
| |
| }
| |
|
| |
| /*Ads*/
| |
| div#mw-content-text-auto-1, #mw-content-text-auto-2, #mw-content-text-auto-3, #mw-content-text-auto-4, #mw-content-text-auto-5, #mw-content-text-auto-6, #mw-content-text-auto-7, #mw-content-text-auto-8, #mw-content-text-auto-9, #mw-content-text-auto-10, #mw-content-text-auto-11, #mw-content-text-auto-12, #mw-content-text-auto-13, #mw-content-text-auto-14, #mw-content-text-auto-15, #mw-content-text-auto-16, #mw-content-text-auto-17, #mw-content-text-auto-18, #mw-content-text-auto-19, #mw-content-text-auto-20 {
| |
| width: 337px;
| |
| }
| |
|
| |
| /*div#anchorTop-DesktopIpad {
| |
| width: 900px !important;
| |
| right: 500px;
| |
| background-color: transparent !important;
| |
| }
| |
|
| |
| header.mw-body-header {
| |
| height: auto;
| |
| }*/
| |
|
| |
| div#stickyTopBanner {
| |
| left: 50%;
| |
| position: fixed !important;
| |
| top: 5%;
| |
| z-index: 9999;
| |
| transform: translate(-50%, -50%);
| |
| }
| |
|
| |
| /*Heading Fix*/
| |
| h2.section-heading {
| |
| display: block !important;
| |
| border-bottom: 1px solid #9f9f9f3d;
| |
| }
| |
|
| |
| /*image*/
| |
| .citizen-body img {
| |
| margin: 3px;
| |
| }
| |
|
| |
| @media (min-width:801px) { /* tablet, landscape iPad, lo-res laptops ands desktops */
| |
|
| |
| .ra-read-more {
| |
| max-width: var(--width-layout);
| |
| margin-left: auto;
| |
| margin-right: auto;
| |
| padding-right: var(--width-toc);
| |
| }
| |
|
| |
| .ra-read-more h2 {
| |
| max-width: var(--width-layout);
| |
| margin-right: auto;
| |
| margin-left: auto;
| |
| padding-right: var(--width-toc);
| |
| }
| |
|
| |
| /*footer...*/
| |
| .citizen-footer__container {
| |
| max-width: var(--width-layout);
| |
| margin-right: auto !important;
| |
| margin-left: auto !important;
| |
| }
| |
|
| |
| /*footer & ads*/
| |
| .citizen-footer, #siteNotice, #anchorTop-DesktopIpad {
| |
| padding-right: var(--width-toc);
| |
| }
| |
|
| |
| /*.citizen-body-header--sticky .mw-body-header {
| |
| height: 60px;
| |
| }*/
| |
|
| |
| }/* End here*/
| |
|
| |
| /*Mobile*/
| |
| @media screen and (max-device-width: 480px) and (orientation: portrait){
| |
| div#mw-category-media > ul {
| |
| margin: 0 !important;
| |
| padding: none;
| |
| }
| |
|
| |
| .citizen-body-header--sticky .mw-body-header {
| |
| position: relative !important;
| |
| }
| |
|
| |
| #sidebar-sticky {
| |
| display:none;
| |
| }
| |
|
| |
| .table.infobox {
| |
| width: 100%;
| |
| max-width: 400px;
| |
| }
| |
|
| |
| /* ad blocking toc box*/
| |
| @media screen and (max-width: 1300px) {
| |
| .citizen-animations-ready .toctogglelabel, .citizen-animations-ready .toctitle h2, .citizen-animations-ready .toc > ul {
| |
| margin: 50px 0px;
| |
| }
| |
|
| |
| }
| |
|
| |
| /* ad or title blocking toc box
| |
| @media screen and (min-width: 1300px) {
| |
| .citizen-animations-ready .toc {
| |
| margin: 15px 0px;
| |
| }
| |
|
| |
| }*/
| |
|
| |
| @media screen and (min-width: 1300px) {
| |
| .toc {
| |
| margin: 15px 0px;
| |
| }
| |
|
| |
| }
| |
|
| |
| /*bigger logo*/
| |
| @media screen and (min-width: 720px) {
| |
| .citizen-drawer__logo img {
| |
| height: 7rem;
| |
| }
| |
| }
| |
|
| |
| .citizen-drawer__logo img {
| |
| height: 5rem;
| |
| padding-right: 5px;
| |
| }
| |
|
| |
|
| |
| /* left side bar */
| |
| @media screen and (min-width: 1000px) {
| |
| .citizen-header {
| |
| background-color: transparant;
| |
| border-right: none;
| |
| }
| |
|
| |
| #siteNotice, .mw-body, .parsoid-body, .citizen-footer, #mw-data-after-content {
| |
| margin-left: calc(6 * var(--space-unit));
| |
| margin-right: calc(6 * var(--space-unit));
| |
| }
| |
|
| |
| div#siteNotice {
| |
| margin-left: 200px;
| |
| }
| |
|
| |
| /*.citizen-header__button {
| |
| height: auto;
| |
| }
| |
|
| |
| html{
| |
| --header-size: 160px;
| |
| }
| |
|
| |
| #citizen-pref-toggle:after, #citizen-personalMenu__buttonCheckbox:after, .citizen-header__buttonIcon, .citizen-header__button--icon:after {
| |
| width: 20px;
| |
| height: 50px;
| |
| }*/
| |
|
| |
| }
| |
|
| |
| /* gallery box size not really important*/
| |
| div.gallerytext p {
| |
| min-height: 52px;
| |
| }
| |
|
| |
| /* obsolete box */
| |
| table.metadata.plainlinks.ambox.ambox-content {
| |
| background: var(--color-surface-2);
| |
| border-radius: var(--border-radius--medium);
| |
| border: 1px solid #62626226;
| |
| }
| |
|
| |
| div#small-banner-top {
| |
| padding-left: 20px;
| |
| }
| |
|
| |
| /* fix for update 2022 Dec */
| |
| .wikiEditor-ui .wikiEditor-ui-top:before {
| |
| background-color: transparent;
| |
| }
| |
|
| |
| .citizen-header__logo {
| |
| display: none;
| |
| border-bottom: none;
| |
| }
| |
|
| |
| .citizen-body-header--sticky .mw-body-header:before {
| |
| background-color: var(--color-surface-0);
| |
| }
| |
|
| |
| :root {
| |
| --color-primary__h: 212;
| |
| --color-primary__s: 38%;
| |
| --color-primary__l: 50%;
| |
| }
| |
|
| |
| h1, h2, h3, h4, h5, h6 {
| |
| font-weight: var(--font-weight-bold);
| |
| }
| |
|
| |
| h1, h2 {
| |
| margin-top: 1.50rem;
| |
| }
| |
|
| |
| th.infobox-title {
| |
| font-size: 1.3rem;
| |
| font-weight: var(--font-weight-bold);
| |
| }
| |
|
| |
| :root {
| |
| --color-base--emphasized: #202122f2;
| |
| }
| |
|
| |
| pre, code, .mw-code {
| |
| color: var(--color-base--subtle);
| |
| overflow-wrap: break-word;
| |
| background-color: var(--color-surface-3);
| |
| } | | } |
