User:Lily/global.css

/* All CSS here will be loaded for users of the Vector skin */ /************************************************************************/ /**********         classes and id's for top nav bar          **********/ /************************************************************************/ /* Credit to @GrahamSH for this */ li[id^=pt] { background-color: transparent; }

@media (max-width: 800px) { #p-personal { position: static; } #p-personal a { filter:none; } } @media (min-width: 50rem) { #p-personal a { filter: invert(1); color: black; z-index: 1000; font-weight: bold; } #p-personal { position: fixed; margin-top: 12px; vertical-align: top; top: 0; margin-left: 225px; } } select#languageselector-select-1 { margin-top: 35px; } h1#firstHeading { margin-top: 20px; } a.mw-wiki-logo { margin-top: 60px; } div#mw-head { margin-top: 45px; }

/* wenn die Bildschirmbreite nicht ausreicht */ @media screen and (max-width: 2000px) { #pt-betafeatures, #pt-logout, #pt-sandbox, #pt-uls, #pt-darkmode-link { display: none; } } @media screen and (max-width: 1500px) { .unter-1500 { display: none; } } @media screen and (max-width: 1000px) { .unter-1000 { display: none; } }

.has-children::after { padding-left: .5em; content: "\25BC" } .has-more-children::after { padding-left: .5em; content: "\25BA" }

/* I have learned from here: https://www.w3schools.com/css/css_dropdowns.asp*/ background-image: linear-gradient(120deg, indigo 3%, red 3%, red 3.25%, orange 3.25%, orange 3.5%, gold 3.5%, gold 3.75%, lawngreen 3.75%, lawngreen 4%, lime 4%, lime 4.25%, MediumSpringGreen 4.25%, MediumSpringGreen 4.5%, MediumTurquoise 4.5%, MediumTurquoise 4.75%, RoyalBlue 4.75%, RoyalBlue 5%, MediumBlue 5%); box-shadow: 0 3px 7px #888; }
 * 1) top-bar { position: fixed; background-color: MediumBlue ;
 * 1) top-bar { height: 38px; line-height: 38px; vertical-align: middle; width: 100%; z-index: 100; }
 * 2) top-bar { font-size: 80%; color: #eee; font-family: sans-serif; font-weight: bold; }
 * 3) top-bar a { color: #eee; text-decoration: none; } /* alle Links weiß einfärben */

/* The container - needed to position the dropdown content */ .dropdown { position: relative; display: inline-block; white-space: nowrap; }

.dropbtn { padding: 0 16px; border: none; cursor: pointer; height: 38px; } /* Change the background color of the dropdown button only when hover */
 * 1) top-bar .dropbtn:hover { background-color: #eee; color: MediumBlue ; border-bottom: 2px solid MediumBlue ; }
 * 2) top-bar .dropbtn:hover a { color: MediumBlue ; }

/*	Inhalt des Dropdown Kastens (Hidden by Default); line-height: 2em; verringert die Zeilenhöhe für die Drop Down Boxen wird nicht angezeigt außer der darüberstehende Button wird gehovert .dropdown-content { display: none; position: absolute; background-color: #eee; min-width: 100%; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); border-left: 1px solid #fff; border-bottom: 1px solid #fff; border-right: 1px solid #fff; line-height: 2em; color: MediumBlue ; cursor: pointer; z-index: 1; }
 * 1) top-bar .dropdown-content a { color: MediumBlue }

/* Links inside the dropdown */ .dropdown-content a { display: block; padding: 0 16px; color: MediumBlue ; }

/* Change color of dropdown links on hover */ .dropdown:hover .dropdown-content { display: block; }
 * 1) top-bar .dropdown-content a:hover { background-color: MediumBlue ; color: #eee; border-top: 2px solid #eee; }

/* Definitionen für Submenu */ /* Links inside the dropdown */ .sub-menu a { display: block; padding: 0 16px; color: MediumSlateBlue; } /* Change color of dropdown links on hover */
 * 1) top-bar .sub-menu a { color: MediumSlateBlue }
 * 1) top-bar .sub-menu a:hover { background-color: MediumSlateBlue; color: #eee; }

.dropdown-submenu { position: relative; } .dropdown-submenu .sub-menu { background-color: #eee; display: none; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); border: 1px solid MediumSlateBlue; } .dropdown-submenu:hover .sub-menu { display: block; } /* anzeigen wenn hover */
 * 1) top-bar .sub-menu { position: absolute; left: 100%; top: 0; margin-left: 1px }

/* create a separator line */
 * 1) top-bar .separator-top { border-top: 2px double MediumBlue }

/* show goto save button only when editing */ .action-edit #only-when-edit{ display: inline; }
 * 1) only-when-edit { display: none; } /* wenn nicht editieren dann nicht anzeigen */