MediaWiki:Common.css: Difference between revisions
No edit summary |
No edit summary |
||
| Line 165: | Line 165: | ||
margin-right: auto; | margin-right: auto; | ||
margin-left: auto; | margin-left: auto; | ||
margin-left: | margin-left: 0; | ||
} | } | ||
Revision as of 16:18, 6 March 2024
#fullscreenDiv {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: green;
animation: fadeIn 0.5s ease-in-out;
z-index: 9999;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#fullscreenDiv:focus {
display: none;
}
#fullscreenDiv:active {
display: none;
}
#fullscreenDiv:hover {
display: none;
}
#fullscreenDiv:not(:focus):not(:active):not(:hover) {
display: block;
}
.mw-content-container{display: grid; place-content: center; justify-content: start;}
.vector-body, p, ul, li{font-size: 0.95em}
/* FONTS */
@font-face {
font-family: "AuthenticRegular";
src: url("http://digitalgarden.hs-mainz.de/fonts/AUTHENTICSans-90.woff2")
format("woff2");
}
@font-face {
font-family: "AuthenticBold";
src: url("http://digitalgarden.hs-mainz.de/fonts/AUTHENTICSans-130.woff2")
format("woff2");
}
@font-face {
font-family: "DINdong";
src: url("http://digitalgarden.hs-mainz.de/fonts/DINdong.woff") format("woff");
}
@font-face {
font-family: "Necto";
src: url("http://digitalgarden.hs-mainz.de/fonts/NectoMono-Regular.woff2")
format("woff2");
}
/* DIFFERENT COLOURS */
body {
height: initial;
box-shadow: inset -2em -5em 4em #2a818d !important;
overflow-y: auto;
}
a {
color: #2a818d !important;
}
.mw-editsection a{border: 1px solid #2a818d}
body.cat-Human-Environment_Relations {
box-shadow: inset -2em -5em 4em #e31a21 !important;
}
body.cat-Human-Environment_Relations a {
color: #e31a21 !important;
}
body.cat-Human-Environment_Relations .mw-editsection a{border: 1px solid #e31a21}
body.cat-Flora {
box-shadow: inset -2em -5em 4em #0e9c07 !important;
}
body.cat-Flora a {
color: #0e9c07 !important;
}
body.cat-Flora .mw-editsection a{border: 1px solid #0e9c07}
body.cat-Ocean {
box-shadow: inset -2em -5em 4em #2065d4 !important;
}
body.cat-Ocean a {
color: #2065d4 !important;
}
body.cat-Ocean .mw-editsection a{border: 1px solid #2065d4}
body.cat-Cloud {
box-shadow: inset -2em -5em 4em hsl(278, 100%, 47%) !important;
}
body.cat-Cloud a {
color: hsl(278, 100%, 47%) !important;
}
body.cat-Cloud .mw-editsection a{border: 1px solid hsl(278,100%,47%)}
.mw-page-container {
background-color: transparent;
background: linear-gradient(0deg, white, transparent);
}
/* REPAIRING COLOURS */
.mwe-popups a {
color: black !important;
}
oo-ui-toolbar-bar a {
color: black !important;
}
.oo-ui-tool-title a {
color: white !important;
}
/* HIDING THINGS */
#left-navigation, .vector-page-toolbar, #p-tb, .mw-indicators, .vector-limited-width-toggle, div.patrollink, #footer-info, #footer-icons {
display: none;
}
.vector-page-tools-pinnable-header .vector-page-tools-pinnable-header{display: none;}
/* BODY */
.mw-page-container {
margin: 0;
display: block;
justify-content: center;
max-width: unset;
overflow: hidden;
}
.mw-page-container-inner {
max-width: 1400px;
margin-right: auto;
margin-left: auto;
margin-left: 0;
}
/* TYPOGRAPHY */
body {
height: initial;
background-color: transparent;
font-family: "AuthenticRegular", sans-serif;
}
.vector-body p,
.vector-body ul,
.vector-body li {
letter-spacing: 0.01rem;
}
.mw-body h1,
.mw-body-content h1,
.mw-body-content h2 {
font-family: "DINdong", sans-serif;
/* Adjust 'sans-serif' to your fallback font */
border: none;
line-height: 1;
}
strong,
b,
.vector-body h3,
.vector-body h4 {
font-family: "AuthenticBold", sans-serif !important;
font-weight: normal;
/* Adjust 'sans-serif' to your fallback font */
}
.mw-body h1 {
font-size: 3.5em;
}
.mw-body h2 {
font-size: 2.3em;
}
.mw-body h2, .mw-body h3, .mw-body h4{
display: flex;
align-items: flex-start;
border: none;
overflow: visible;
}
/* LISTS */
.mw-content-ltr ul,
.mw-content-ltr ul,
.mw-content-ltr ol,
.mw-content-ltr ol {
margin-left: 1.2em;
}
.mw-content-ltr ul,
.mw-content-ltr ul {
list-style: disc;
}
/* UNSTYLING */
.mw-logo-wordmark {
color: black !important;
}
.vector-page-titlebar {
box-shadow: none;
}
.vector-page-toolbar-container {
box-shadow: none;
}
.vector-menu-checkbox:focus {
outline: none;
border: none;
}
/* GENERAL LAYOUT */
.mw-page-container-inner {
min-height: 100svh;
flex-direction: column;
}
.mw-content-container {
flex-grow: 1;
}
.mw-footer-container {
padding-top: 50px;
padding-bottom: 10px;
}
.vector-page-titlebar {
display: flex;
justify-content: space-around;
align-items: flex-start;
flex-direction: row-reverse;
}
.mw-footer {
border-top: none;
}
.mw-body-content {
margin-top: 0;
}
.vector-feature-page-tools-enabled .mw-body {
grid-template-areas:
"toolbar columnEnd"
"titlebar-cx ."
"titlebar columnEnd"
"content columnEnd";
}
#content{max-width: 60em}
#vector-page-titlebar-toc {
margin-right: 6px;
}
.mw-editable .vector-page-toolbar {
display: block;
}
#right-navigation {
margin-left: -8px;
}
.vector-menu-tabs .mw-list-item.vector-tab-noicon > a,
.vector-page-toolbar-container .vector-menu-dropdown > .vector-menu-heading {
padding-top: 9px;
padding-bottom: 4px;
}
/* UNPINNED MENUS */
#right-navigation .vector-menu-content {
left: 1px;
right: auto;
}
.vector-toc-landmark .vector-menu-dropdown > .vector-menu-content {
left: unset;
max-width: 15em;
right: 0;
}
.vector-feature-page-tools-enabled
.vector-unpinned-container
.vector-toc
.vector-toc-contents {
max-width: 15em;
}
.vector-feature-page-tools-enabled
.vector-unpinned-container
.vector-pinnable-header-unpinned {
display: flex;
flex-direction: column;
align-items: flex-start;
padding-top: 1em;
}
.vector-feature-page-tools-enabled .vector-pinnable-header-pinned{
display: flex;
flex-direction: row;
align-items: flex-end;
padding-top: 1em;
min-height: 2em;
gap: 0.5em;
}
.vector-feature-page-tools-enabled
.vector-unpinned-container
.vector-toc
.vector-toc-contents {
padding-right: 14px;
padding-left: 12px;
}
.vector-feature-page-tools-enabled
.vector-unpinned-container
.vector-toc
.vector-pinnable-header {
padding-left: 12px;
}
.vector-dropdown .vector-dropdown-content,
.vector-dropdown > .vector-menu-content {
box-shadow: 0 0 10px rgba(0,0,0,0.1);
top: 150%;
box-shadow: none;
border-radius: 0.3rem;
border-radius: 0.5rem;
}
/* PINNED MENUS */
#vector-toc-pinned-container .vector-toc:after {
background: transparent;
}
@media screen and (min-width: 1000px) {
#vector-toc-pinned-container .vector-toc:after {
background: transparent;
}
}
#vector-toc {
background: none;
}
.mw-body
#vector-main-menu {
background-color: transparent !important;
}
.vector-feature-page-tools-enabled #vector-main-menu-pinned-container .vector-main-menu {background-color: transparent !important;}
.mw-body #vector-main-menu-pinned-container .vector-main-menu {background-color: transparent !important;}
.vector-feature-page-tools-disabled .vector-main-menu {background-color: transparent !important;}
.mw-body .vector-pinnable-header-label {
display: inline-block;
color: black;
font-size: 1.7rem;
margin: 0;
padding: 0;
border: 0;
margin-right: 0.2rem;
}
.vector-dropdown-content > *:not(:last-child) {
border-bottom: none;
}
.vector-feature-page-tools-enabled
.vector-pinnable-element
> *:not(:last-child) {
border-bottom: none;
}
.vector-feature-page-tools-enabled
.vector-pinnable-element
.vector-menu-heading {
display: none;
}
.vector-pinnable-header-toggle-button:before,
.vector-pinnable-header-toggle-button:after {
display: none;
content: "";
}
.vector-feature-page-tools-disabled
.vector-main-menu-group
.vector-menu-heading,
.vector-feature-page-tools-disabled
.vector-main-menu-action-item
.vector-menu-heading {
border-color: transparent;
}
.vector-feature-page-tools-disabled
.vector-main-menu-group
.vector-menu-heading,
.vector-feature-page-tools-disabled
.vector-main-menu-action-item
.vector-menu-heading {
display: none;
}
.vector-feature-page-tools-disabled
.vector-main-menu-group
.vector-menu-content
li,
.vector-feature-page-tools-disabled
.vector-main-menu-action-item
.vector-menu-content
li {
padding: 4px 0;
margin-bottom: 0.1em;
line-height: initial;
}
/* BUTTONS */
.vector-pinnable-header-pinned .vector-pinnable-header-toggle-button, .mw-editsection a, .vector-pinnable-header-pin-button {
background-color: #ddd !important;
padding: 0.2rem 0.4rem;
border-radius: 0.4rem;
margin-left: 0.4em;
}
.vector-pinnable-header-pinned .vector-pinnable-header-toggle-button, .vector-pinnable-header-pin-button {color: #222 !important;
}
.mw-editsection a{
margin-right: 0.8em;
margin-left: 0;
background-color: transparent !important;
}
.vector-pinnable-header-pin-button{
margin-left: 0;
margin: 0;
margin-top: 0.5em;
}
.mw-editsection-bracket,
.mw-editsection-divider {
display: none;
}
h2 > .mw-editsection, h3 > .mw-editsection{
margin-top: 1em;
display: block;
}
h2 > .mw-editsection,
h3 > .mw-editsection,
h4 > .mw-editsection,
h5 > .mw-editsection,
.client-js .vector-pinnable-header-pinned .vector-pinnable-header-unpin-button {
display: none;
}
h2:hover > .mw-editsection,
h3:hover > .mw-editsection,
h4:hover > .mw-editsection,
h5:hover > .mw-editsection,
.client-js .vector-pinnable-header-pinned:hover .vector-pinnable-header-unpin-button {
display: initial;
}
/* STICKY HEADER */
.vector-pinnable-header-label,
.vector-sticky-header-context-bar-primary {
font-family: "DINdong", sans-serif;
font-size: 1.7rem;
color: black;
}
.vector-sticky-header {
background: none;
background-color: transparent;
border-bottom: none;
}
.client-js.vector-sticky-header-enabled .vector-sticky-header {
display: none !important;
}
/*SEARCH BAR*/
.cdx-button:enabled:focus:not(:active):not(.cdx-button--is-active) {
border-color: transparent;
color: black;
box-shadow: none;
}
.cdx-button:hover {
background-color: transparent;
border-color: transparent;
}
.cdx-button:not(.cdx-button--type-quiet):enabled {
background-color: transparent;
border-color: transparent;
}
.cdx-button:not(.cdx-button--type-quiet):enabled:hover {
background-color: transparent;
border-color: transparent !important;
box-shadow: none;
}
.cdx-search-input {
border-radius: 3rem;
}
.cdx-text-input__input {
border-color: transparent;
box-shadow: none;
outline: none;
background-color: transparent;
}
.cdx-text-input__input:enabled {
border-color: transparent;
background-color: transparent;
}
.cdx-text-input__input:enabled:focus {
border-color: transparent !important;
box-shadow: none;
}
.cdx-text-input__input:enabled:focus:hover {
border-color: transparent;
background-color: transparent;
}
.cdx-text-input__input:enabled:hover {
border-color: transparent;
}
.cdx-typeahead-search--auto-expand-width:not(.cdx-typeahead-search--expanded) {
margin-left: 24px;
}
.cdx-typeahead-search--show-thumbnail:not(
.cdx-typeahead-search--auto-expand-width
),
.cdx-typeahead-search--show-thumbnail.cdx-typeahead-search--auto-expand-width.cdx-typeahead-search--expanded {
margin-left: 24px;
}
.cdx-typeahead-search--show-thumbnail:not(
.cdx-typeahead-search--auto-expand-width
)
.cdx-text-input__input,
.cdx-typeahead-search--show-thumbnail.cdx-typeahead-search--auto-expand-width.cdx-typeahead-search--expanded
.cdx-text-input__input {
padding-left: 36px;
}
.cdx-typeahead-search--show-thumbnail:not(
.cdx-typeahead-search--auto-expand-width
)
.cdx-text-input__start-icon,
.cdx-typeahead-search--show-thumbnail.cdx-typeahead-search--auto-expand-width.cdx-typeahead-search--expanded
.cdx-text-input__start-icon {
left: 9px;
}
.vector-search-box-input {
border-radius: 3rem;
}
.vector-typeahead-search--active {
border-color: transparent;
}
/*COLUMNS*/
.div-col {
margin-top: 0.3em;
column-width: 30em;
}
.div-col dl,
.div-col ol,
.div-col ul {
margin-top: 0;
}
.div-col li,
.div-col dd {
page-break-inside: avoid; /* Removed from CSS in favor of break-inside c. 2020 */
break-inside: avoid-column;
}
.div-col-rules {
column-rule: 1px solid #aaa;
}
.vector-body .div-col h2:first-of-type {
/* Your styles for the first h2 element inside .div-col go here */
margin-top: 0;
}
/*CUSTOM IMAGE SIZES*/
.full-width img {
width: 100%;
height: auto;
}
.half-width img {
width: 49.6%;
height: auto;
}
.third-width img {
width: 32.8%;
height: auto;
}
.quarter-width img {
width: 24.5%;
height: auto;
}
@media (max-width: 1000px) {
.half-width img {
width: 100%;
height: auto;
}
.third-width img {
width: 100%;
height: auto;
}
.quarter-width img {
width: 100%;
height: auto;
}
}
/*Play arount*/
#rotatingDiv {
position: absolute;
transform: translate(0%, 0%);
transition: transform 0.1s ease;
}
div.gallerytext > p {
font-size: 1px !important;
color: transparent !important;
line-height: 1% !important;
}
div.gallerytext > p a {
font-size: initial !important;
line-height: initial !important;
color: initial !important;
}
