noeditmode.css | Ab Version 3.0 nicht mehr notwendig
In dieser Datei werden die Styles definiert, die dem User präsentiert werden und für die es besondere Styles für die Darstellung im Editor gibt.
Die Spezial-Formatierungen, die z. B. unterschiedlich reagieren, je nachdem ob dem Setzen von Cookies durch den User zugestimmt wurde oder nicht, oder einen Maus-Over-Effekt enthalten sind in der stylesheet.css definiert für die symbolische Darstellung im Editorfenster.
Diese Definition muss für die Front-End-Darstellung, also das, was der normale User zu sehen bekommt, zurückgenommen werden und durch die eigentliche, gewünschte Spezial-Effekt-Formatierung ersetzt werden.
Das erfolgt in der noeditmode.css, die nach der stylesheet.css geladen wird, wenn sich die Seite nicht im Editier-Modus befindet.
Dateiname: ./userfiles/diverse-files/noeditmode.css
/* krl-3col-flex-V2 - last update 14.11.2021 */
/* Die folgenden Formatierungen sind zur Front-End-Darstellung als Korrektur der
Editormodus-Formatierung vorhanden.
Die Formatierungen für die Back-End - Darstellung befinden sich in der stylesheet.css. */
div.body {
margin: 0px auto 0px auto;
}
p.no_cookies_text {
background-color:unset;
}
p.no_cookies_text::before {
content: unset;
vertical-align: unset;
font-weight: unset;
font-size: unset;
color: unset;
}
p.cookies_text {
background-color: unset;
}
p.cookies_text::before {
content: unset;
vertical-align: unset;
font-weight: unset;
font-size: unset;
color: unset;
}
/* Start - Tooltip CCS3: www.w3schools.com/css/css_tooltip.asp */
span.tooltip, span.t-tiptext-unten, span.t-tiptext-oben {}
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
}
/* Tooltip text */
.tooltip .t-tiptext-unten, .tooltip .t-tiptext-oben {
visibility: hidden;
/* Breite des Tooltips */
max-width: 80%;
height: auto;
text-align: center; /* Textausrichtung in der Box */
padding: 1ex; /* damit der Text nicht am inneren Rand klebt */
margin: 1.25ex; /* damit die Toolbox nicht am unteren Wortrand klebt, und der Pfeil evtl im Buchstaben darüber verschwindet */
border-radius: 6px;
/* Position the tooltip text */
position: absolute;
z-index: 1;
}
/* Tooltip unterhalb des Wortes */
.tooltip .t-tiptext-unten, .tooltip .t-tiptext-oben {
opacity: 0;
transition: opacity .7s;
top: 100%;
left: 50%;
margin-left: -30%; /* Nutze die halbe Weite (120/2 = 60 oder 100%/2 = 50%), um den Tooltipp zu zentrieren. Bei max-width: auto; kann man mit den % spielen. -70% ist näher nach links; -30 % weiter nach rechts */
}
/* Tooltip oberhalb des Wortes */
.tooltip .t-tiptext-oben {
top: unset;
bottom: 100%;
}
.tooltip .t-tiptext-unten::after, .tooltip .t-tiptext-oben::after {
content: " ";
position: absolute;
bottom: 100%; /* Pfeil oberhalb der Tooltip-Box */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent #0057b0 transparent;
}
.tooltip .t-tiptext-oben::after {
bottom: unset;
top: 100%; /* Pfeil unterhalb der Tooltip-Box */
border-color: #0057b0 transparent transparent transparent;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .t-tiptext-unten, .tooltip:hover .t-tiptext-oben {
visibility: visible;
opacity: 1;
}
/* Ende - Tooltip CCS3: www.w3schools.com/css/css_tooltip.asp */
/* Bild einblenden beim hovern eines Textes innerhalb eines Blindlinks (<a href="#">) */
span.mausbild img {
display: none;
width: unset;
max-width: 95%;
height: auto;
}
a:hover span.mausbild img{
display:block;
width: unset;
position: absolute;
z-index: 1;
}