MediaWiki:Gadget-HydradarkVectorTabs.css

/************** div.vectorTabs { background: none; height: 2.35em; padding-left:0; }
 * Vector Tabs *

margin-top: 3em; }
 * 1) left-navigation,
 * 2) right-navigation {

margin-left: 11.4em; }
 * 1) left-navigation {

margin-right: 0.5em; }
 * 1) right-navigation {

/* clear backgrounds */ div#mw-head div.vectorTabs span, div#mw-head div.vectorTabs ul, div#mw-head div.vectorTabs ul li, div#mw-head div.vectorTabs ul li.selected, div#mw-head div.vectorMenu h3, div.vectorMenu div.menu ul { background: none; }

div#mw-head div.vectorTabs ul li { margin-right: 4px; }

div#mw-head div.vectorTabs ul li a, div#mw-head div#p-cactions div.menu ul li a, h3#p-sharing-label span, h3#p-cactions-label span { color: #f3f8fc; text-shadow: 1px 1px 1px rgba(0,0,0,0.8); font-family: "Exo2-Medium"; font-size: 17.6px; text-decoration: none; height: 1.3em; }

div#mw-head div.vectorTabs ul li:not(.icon.mw-watchlink) span { padding-right: 1px; padding-left: 1px; }

div#mw-head div.vectorTabs ul li:not(.mw-watchlink) a { padding: 0.2em 0.3em 0.1em 0.3em; margin-top: 0.45em; border: 2px transparent solid; border-radius: 8px; position: relative; top: -2px; left: -2px; transition: background-color 0.1s, border-color 0.1s; }

div#mw-head div.vectorTabs ul li.new a { color: #ff0000; border-bottom: #ff0000 2px dashed; border-radius: 6px 6px 0 0 !important; }

div#mw-head div.vectorTabs ul li.selected a { color: #f3f8fc; background-color: rgba(var(--blood-orange), 1); border-color: rgba(0, 0, 0, 0.6); text-shadow: 1px 1px 1px rgba(0,0,0,0.8); }

/* Watchlist star */ div#mw-head .vectorTabs .icon.mw-watchlink span { position: relative; left: -2px; margin-top: calc(0.45em - 1px); padding: 2px; border: 2px transparent solid; height: auto; } div#mw-head .vectorTabs .icon.mw-watchlink span a { background-position: center center; color: transparent; text-shadow: none; padding: 4px; height: 16px; width: 16px; }

/* background for vector tabs and menu */ div#mw-head div.vectorMenu input[type="checkbox"] + h3 { position: relative; top: -2px; left: -2px; border: 2px transparent solid; width: calc(100% - 0.6em); }

div#mw-head div.vectorMenu:hover input[type="checkbox"] + h3, div#mw-head div.vectorMenu:not(:hover) input[type="checkbox"]:checked + h3, div#mw-head div.vectorTabs ul li:not(.selected):not(.icon) a:hover, div#mw-head div.vectorTabs ul li:not(.selected):not(.icon) a:focus, div#mw-head .vectorTabs .icon.mw-watchlink span:hover { background-color: rgba(var(--blood-orange), 0.65); border-color: rgba(0, 0, 0, 0.6); border-radius: 6px; }

div#mw-head div.vectorMenu { font-size: 17.6px; /* needed for em */ margin-top: 0.45em; border-radius: 6px 6px 0 0 !important; }

div#mw-head div.vectorMenu h3 { height: auto; padding: 0.2em 0.3em 0.1em 0.3em; border-radius: 6px 6px 0 0 !important; margin-right: 0; }

/* remove blue outline */ div#mw-head div.vectorMenu input[type="checkbox"]:focus, div#mw-head div.vectorMenu h3 { outline: 0; }

div#mw-head div.vectorMenu h3 span { padding: 0 16px 0 0; }

div#mw-head div.vectorMenu h3 span::after { top: 0; background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%20%3Cpath%20d%3D%22m0.80904%2C5.98755l5.19096%2C-5.17353l5.19096%2C5.17353l-2.59548%2C0l0%2C5.19842l-5.19096%2C0l0%2C-5.19842l-2.59548%2C0z%22%20fill%3D%22%2523222%22%20transform%3D%22rotate%28180%206%2C5.999995231628418%29%22%2F%3E%20%3C%2Fsvg%3E); }

div#mw-head div.vectorMenu div.menu { top: 1.5em; left: 0; background-color: var(--orange-txt); border: 2px solid #000; cursor: default; }

div#mw-head div#p-sharing div.menu { margin: 0 -1px 0 1px; left: -3px; min-width: unset; width: 100%; }

div#mw-head div#p-sharing div#socialIconImages a { margin: 6px; box-shadow: 2px 1px 4px #454545; }

div#mw-head div#p-sharing div#socialIconImages a:hover { box-shadow: none; cursor: pointer; }

div#mw-head div#p-cactions div.menu { left: -2px; }

div#mw-head div#p-cactions div.menu > ul { margin: 3px; }

div#mw-head div#p-cactions div.menu a { display: inline-block; padding: 0.3em 0.3em 0.1em 0.3em; }

div#mw-head div#p-cactions div.menu li:not(.selected) a:hover, div#mw-head div#p-cactions div.menu li:not(.selected) a:focus { box-shadow: 0 0 5px 1em rgba(0,0,0,0.5) inset; border-radius: 6px; }

div#mw-head div#p-cactions div.menu li.selected a { color:#000; font-weight: bold; text-decoration: underline; text-shadow: 1px 1px 1px #343934; cursor: default; }

/* search bar */ div#right-navigation div#p-search { margin-right: 10.5px; }

div#simpleSearch { /*! margin-top: -0.5em; */ margin-top: 0.45em; border: 2px rgba(var(--blood-orange), 1) solid; border-radius: 6px; height: 1.58em; }

div#simpleSearch:hover { border-color: var(--orange-txt); }

div#simpleSearch #searchInput { font-size: 0.97em; line-height: 1.58em; padding: 0 0 0 5px; font-family: "Exo2-Medium"; }

div#simpleSearch #searchButton { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2213%22%3E %3Cg fill=%22none%22 stroke=%22orange%22 stroke-width=%222%22%3E %3Cpath d=%22M11.29 11.71l-4-4%22/%3E %3Ccircle cx=%225%22 cy=%225%22 r=%224%22/%3E %3C/g%3E %3C/svg%3E"); } /******************
 * End Vector Tabs *