Benutzer:Martin Kraft/sidebar.css
Hinweis: Leere nach dem Veröffentlichen den Browser-Cache, um die Änderungen sehen zu können.
- Firefox/Safari: Umschalttaste drücken und gleichzeitig Aktualisieren anklicken oder entweder Strg+F5 oder Strg+R (⌘+R auf dem Mac) drücken
- Google Chrome: Umschalttaste+Strg+R (⌘+Umschalttaste+R auf dem Mac) drücken
- Edge: Strg+F5 drücken oder Strg drücken und gleichzeitig Aktualisieren anklicken
@charset utf-8;
#sidebar,
#sidebar * {
box-sizing: border-box;
}
#sidebar {
position: fixed;
top: 0;
left: 100%;
bottom: 0;
width: 14em;
padding: 1em 1em 2em;
overflow-y: 100vh;
background-color: #333;
color: #FFF;
font-size: 1rem;
}
#sidebar .content {
line-height: 1.125em;
padding: 0.25em 0;
font-size: 0.8rem;
}
#sidebar .content > * {
max-width: 100%;
}
#sidebar .content > :first-child {
margin-top: 0;
}
#sidebar a{
color:#FFF;
}
#sidebar h1,
#sidebar h2,
#sidebar h3,
#sidebar h4 {
font-size: 1rem;
color: #FFF;
font-weight: bold;
letter-spacing: .01em;
padding-bottom: .5em;
margin-bottom: .5em;
margin-top: 1.4rem;
}
#sidebar a {
color: #FFF;
text-decoration: none;
}
#sidebar .sidebar-toggle {
display: block;
font-size: 1em;
font-weight: bold;
background-color: #333;
border-radius: .3em 0 0 0;
line-height: 1;
padding: .66em;
position: absolute;
right: 100%;
bottom: 0;
text-decoration: none;
margin: 0;
}
#sidebar .sidebar-toggle:hover {
background-color: #555;
}
#mw-navigation {
/* Workaround gegen verspringendes Layout */
width: 100%;
position: absolute;
top: 0;
}
#logo-label {
display: block;
padding: .2em .4em .3em .4em;
overflow: hidden;
background-color: #333;
color: #FFF;
border-radius: 0 0 .3em .3em;
position: fixed;
top: -5em;
left: 1.5em;
transition: top .3s ease-in-out;
}
html.sidebar-open #sidebar {
box-shadow: 0 .5em 1em rgba(0, 0, 0, .5);
}
html.sidebar-open #logo-label {
top: 0;
}
html body > *:not(#logo-label) {
transition: transform .5s ease-in-out, box-shadow .5s ease-in-out, opacity .5s ease-in-out;
}
html.sidebar-open body > *:not(#logo-label) {
transform: translateX(-11em);
}
/* Buttons */
#sidebar .sidebar-button:not(:hover) {
background-color: transparent!important;
}
#sidebar .sidebar-button {
display: inline-block;
margin: 0;
width: calc( (100% - .2em) / 2);
position: relative;
transition: background-color .2s ease-in-out;
border-radius: .1rem;
color: #FFF;
}
#sidebar .sidebar-button::before {
width: calc((100% - .5em)/2);
height: 0;
display: block;
content: '';
padding: 100% 0 0;
}
#sidebar .sidebar-button > * {
background-color: transparent!important;
position: absolute;
display: block;
}
#sidebar .sidebar-button * {
width: 100%;
height: 100%;
}
#sidebar .sidebar-button a {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
text-align: center;
}
#sidebar .sidebar-button img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50%;
height: auto;
}
#sidebar .sidebar-button a {
color: #FFF;
}
#sidebar .mw-editsection{
display: none;
}
#sidebar .sidebar-button .sidebar-button-label {
position: absolute;
background-color: #000;
color: #FFF;
top: 50%;
transform: translate(-100%, -50%);
left: -.5em;
padding: .7em;
line-height: 1.1;
height: auto;
width: 10em;
font-weight: bold;
max-width: 0;
display: flex;
opacity: 0;
transition: all .1s;
pointer-events: none;
font-size: .9rem;
text-align:left;
font-weight: 500;
}
#sidebar .sidebar-button:hover .sidebar-button-label {
max-width: 10em;
opacity: 1;
}
#sidebar .sidebar-button .sidebar-button-label::before {
display: block;
content: '';
position: absolute;
left: 100%;
top: 50%;
transform: translateY(-50%);
border: 1em solid transparent;
border-left-color: #000;
}