MediaWiki:Mobile.css: Difference between revisions
No edit summary |
No edit summary |
||
| (One intermediate revision by the same user not shown) | |||
| Line 1: | Line 1: | ||
.catlinks{display:none;} | /* Hide category links */ | ||
.catlinks { | |||
display: none; | |||
} | |||
/* Ensure no top margin for h2 elements inside .listcontent */ | |||
.listcontent h2 { | .listcontent h2 { | ||
margin-top: 0 !important; | margin-top: 0 !important; | ||
} | } | ||
.mw-page-container{max-width: 100vw} | /* Make the maximum width of the page container full width */ | ||
.mw-page-container { | |||
max-width: 100vw; | |||
} | |||
/* Styling for .listentry */ | |||
.listentry { | .listentry { | ||
display: grid; | display: grid; | ||
| Line 12: | Line 20: | ||
grid-template-rows: auto auto; | grid-template-rows: auto auto; | ||
gap: 1rem; | gap: 1rem; | ||
} | |||
/* Remove top padding from .mw-page-container-inner */ | |||
.mw-page-container-inner { | |||
padding-top: 0rem; | |||
} | } | ||
img{margin-bottom: 0.5rem} | /* Set margin and size for images */ | ||
img { | |||
margin-bottom: 0.5rem; | |||
} | |||
/* Ensure images inside .listentry take full width and auto height */ | |||
.listentry img { | .listentry img { | ||
width: 100%; | width: 100%; | ||
| Line 23: | Line 38: | ||
} | } | ||
vector-user-links-dropdown-label{display: none | /* Hide user links dropdown label */ | ||
#vector-user-links-dropdown-label { | |||
display: none; | |||
} | |||
/* Styling for .introwithimage */ | |||
.introwithimage { | |||
display: grid; | |||
grid-template-columns: 1fr; | |||
grid-template-rows: auto auto; | |||
gap: 1rem; | |||
margin-top: 1rem; | |||
} | |||
/* Ensure no top margin for paragraphs inside .introwithimage */ | |||
.introwithimage p { | |||
margin-top: 0rem; | |||
} | |||
/* Ensure images inside .introwithimage take full width and auto height */ | |||
.introwithimage img { | |||
width: 100%; | |||
height: auto; | |||
} | |||
Latest revision as of 08:08, 13 June 2024
/* Hide category links */
.catlinks {
display: none;
}
/* Ensure no top margin for h2 elements inside .listcontent */
.listcontent h2 {
margin-top: 0 !important;
}
/* Make the maximum width of the page container full width */
.mw-page-container {
max-width: 100vw;
}
/* Styling for .listentry */
.listentry {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto auto;
gap: 1rem;
}
/* Remove top padding from .mw-page-container-inner */
.mw-page-container-inner {
padding-top: 0rem;
}
/* Set margin and size for images */
img {
margin-bottom: 0.5rem;
}
/* Ensure images inside .listentry take full width and auto height */
.listentry img {
width: 100%;
height: auto;
}
/* Hide user links dropdown label */
#vector-user-links-dropdown-label {
display: none;
}
/* Styling for .introwithimage */
.introwithimage {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto auto;
gap: 1rem;
margin-top: 1rem;
}
/* Ensure no top margin for paragraphs inside .introwithimage */
.introwithimage p {
margin-top: 0rem;
}
/* Ensure images inside .introwithimage take full width and auto height */
.introwithimage img {
width: 100%;
height: auto;
}
/* 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%)}
body.cat-Excursion .mw-editsection a{border: 1px solid darkorange}
body.cat-Excursion {
box-shadow: inset -2em -5em 4em darkorange !important;
}
body.cat-Excursion a {
color: darkorange !important;
}
body.cat-HiddenNetworks .mw-editsection a{border: 1px solid #00cc00}
body.cat-HiddenNetworks {
box-shadow: inset -2em -5em 4em #00ff00 !important;
}
body.cat-HiddenNetworks a {
color: #00cc00 !important;
}
.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;
}
/* 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 {
border: none;
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-pinnable-header-label
#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;}
.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% !important;
height: auto !important;
margin-bottom: 0.5rem;
margin-bottom: 0.5rem;
}
.half-width img {
width: 100% !important;
height: auto !important;
margin-bottom: 0.5rem;
margin-bottom: 0.5rem;
}
.third-width img {
width: 100% !important;
height: auto !important;
margin-bottom: 0.5rem;
margin-bottom: 0.5rem;
}
.quarter-width img {
width: 100% !important;
height: auto !important;
margin-bottom: 0.5rem;
margin-bottom: 0.5rem;
}
@media (max-width: 1000px) {
.half-width img {
width: 100% !important;
height: auto !important;
margin-bottom: 0.5rem;
margin-bottom: 0.5rem;
}
.third-width img {
width: 100% !important;
height: auto !important;
margin-bottom: 0.5rem;
margin-bottom: 0.5rem;
}
.quarter-width img {
width: 100% !important;
height: auto !important;
margin-bottom: 0.5rem;
margin-bottom: 0.5rem;
}
}
/*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;
}
/*MOBILE*/
/* Hide vector page tools */
#vector-page-tools {
display: none;
}
/* Hide edit sections */
.mw-editsection {
display: none !important;
}
/* Hide table of contents checkbox in the title bar */
#vector-page-titlebar-toc-checkbox {
display: none;
}
.vector-toc-landmark{display: none;}
/* Hide main menu checkbox */
.vector-menu-checkbox {
display: none;
}
@media screen and (max-width: 999px)
.client-js .vector-page-titlebar .vector-toc-landmark {
display: none;
}
.vector-toc-landmark .mw-ui-icon-element.mw-ui-button {display: none; padding:0;}
/* Hide unchecked submenus of the main menu */
:not(:checked) > .vector-menu-checkbox {
display: none;
}
.mw-ui-icon-listBullet{display: none;}
/* Adjust logo styles */
.mw-logo {
min-width: initial !important;
}
.mw-logo-container {
max-width: initial;
}
/* Styles for dropdown menus in page tools
.vector-feature-page-tools-enabled .vector-dropdown .vector-dropdown-content,
.vector-feature-page-tools-enabled .vector-dropdown > .vector-menu-content {
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0;
position: fixed;
width: 100vw;
display: grid;
place-content: center;
max-width: 100vw;
}
*/
.vector-feature-page-tools-disabled .vector-main-menu; .vector-feature-page-tools-disabled .vector-main-menu-group, .vector-feature-page-tools-disabled .vector-main-menu-group .vector-menu-content{background-color: transparent; padding: 0; margin: 0}
.vector-feature-page-tools-disabled #mw-sidebar-button:before {
background-image: url(/skins/Vector/resources/skins.vector.styles/images/chevronHorizontal-ltr.svg?c223c);
}
@media (max-width: 1000px) {
.vector-feature-page-tools-disabled .vector-main-menu {padding: 0; background-color: transparent; background: none;}
.vector-feature-page-tools-disabled .vector-main-menu-group{margin: 0;}
}
