User:Super Mikal/vector.css: Difference between revisions
Jump to navigation
Jump to search
Super Mikal (talk | contribs) (Created page with " →===== Menu tabs =====: div#mw-head .vector-menu-dropdown label { color: var(--link-color); } div#mw-head .vector-menu-dropdown label { background-color: transparent; background-image: url("https://www.poewiki.net/w/images/c/c1/Vector_tab_left.png"), url("https://www.poewiki.net/w/images/0/07/Vector_tab_right.png"); background-position: left top, right top; background-repeat: no-repeat; background-size: auto; } div#mw-head .vector-menu-dropd...") |
Super Mikal (talk | contribs) (width: fit-content; for the menu dropdown) |
||
(3 intermediate revisions by the same user not shown) | |||
Line 2: | Line 2: | ||
/* ===== Menu tabs ===== */ | /* ===== Menu tabs ===== */ | ||
div#mw-head .vector-menu-dropdown label { | div#mw-head .vector-menu-dropdown label.vector-menu-heading { | ||
color: var(--link-color); | color: var(--link-color); | ||
} | } | ||
div#mw-head .vector-menu-dropdown label { | div#mw-head .vector-menu-dropdown label.vector-menu-heading { | ||
background-color: transparent; | background-color: transparent; | ||
background-image: url("https://www.poewiki.net/w/images/c/c1/Vector_tab_left.png"), url("https://www.poewiki.net/w/images/0/07/Vector_tab_right.png"); | background-image: url("https://www.poewiki.net/w/images/c/c1/Vector_tab_left.png"), url("https://www.poewiki.net/w/images/0/07/Vector_tab_right.png"); | ||
Line 12: | Line 12: | ||
background-size: auto; | background-size: auto; | ||
} | } | ||
div#mw-head .vector-menu-dropdown label { | div#mw-head .vector-menu-dropdown label.vector-menu-heading { | ||
margin: 0; | margin: 0; | ||
padding: 0; | padding: 0; | ||
height: 100%; | height: 100%; | ||
} | } | ||
div#mw-head .vector-menu-dropdown label::after { | div#mw-head .vector-menu-dropdown label.vector-menu-heading::after { | ||
content: none; | content: none; | ||
display: none; | display: none; | ||
} | } | ||
div#mw-head .vector-menu-dropdown:hover label, | div#mw-head .vector-menu-dropdown:hover label.vector-menu-heading, | ||
div#mw-head .vector-menu-dropdown .vector-menu-checkbox:checked + label { | div#mw-head .vector-menu-dropdown .vector-menu-checkbox:checked + label.vector-menu-heading { | ||
background-position: left bottom, right bottom; | background-position: left bottom, right bottom; | ||
} | } | ||
div#mw-head .vector-menu-dropdown:hover label span, | div#mw-head .vector-menu-dropdown:hover label.vector-menu-heading span, | ||
div#mw-head .vector-menu-dropdown .vector-menu-checkbox:checked + label span { | div#mw-head .vector-menu-dropdown .vector-menu-checkbox:checked + label.vector-menu-heading span { | ||
background-position: center bottom; | background-position: center bottom; | ||
} | } | ||
div#mw-head .vector-menu-dropdown label span { | div#mw-head .vector-menu-dropdown label.vector-menu-heading span { | ||
display: inline-block; | display: inline-block; | ||
float: none; | float: none; | ||
Line 46: | Line 46: | ||
background-size: auto; | background-size: auto; | ||
} | } | ||
div#mw-head .vector-menu-dropdown label span::after { | div#mw-head .vector-menu-dropdown label.vector-menu-heading span::after { | ||
content: ""; | content: ""; | ||
display: inline-block; | display: inline-block; | ||
Line 56: | Line 56: | ||
transition: transform 0.15s ease-in; | transition: transform 0.15s ease-in; | ||
} | } | ||
div#mw-head .vector-menu-dropdown .vector-menu-checkbox:checked + label span::after { | div#mw-head .vector-menu-dropdown .vector-menu-checkbox:checked + label.vector-menu-heading span::after { | ||
transform: rotate(-0.5turn); | transform: rotate(-0.5turn); | ||
} | |||
div#mw-head .vector-menu-dropdown .vector-menu-content { | |||
width: fit-content; | |||
} | } |
Latest revision as of 21:32, 30 September 2023
/* ===== Menu tabs ===== */
div#mw-head .vector-menu-dropdown label.vector-menu-heading {
color: var(--link-color);
}
div#mw-head .vector-menu-dropdown label.vector-menu-heading {
background-color: transparent;
background-image: url("https://www.poewiki.net/w/images/c/c1/Vector_tab_left.png"), url("https://www.poewiki.net/w/images/0/07/Vector_tab_right.png");
background-position: left top, right top;
background-repeat: no-repeat;
background-size: auto;
}
div#mw-head .vector-menu-dropdown label.vector-menu-heading {
margin: 0;
padding: 0;
height: 100%;
}
div#mw-head .vector-menu-dropdown label.vector-menu-heading::after {
content: none;
display: none;
}
div#mw-head .vector-menu-dropdown:hover label.vector-menu-heading,
div#mw-head .vector-menu-dropdown .vector-menu-checkbox:checked + label.vector-menu-heading {
background-position: left bottom, right bottom;
}
div#mw-head .vector-menu-dropdown:hover label.vector-menu-heading span,
div#mw-head .vector-menu-dropdown .vector-menu-checkbox:checked + label.vector-menu-heading span {
background-position: center bottom;
}
div#mw-head .vector-menu-dropdown label.vector-menu-heading span {
display: inline-block;
float: none;
padding: 0 18px;
height: 100%;
font-family: var(--stylized-smallcaps-font);
font-size: 16px;
line-height: 26px;
font-variant-ligatures: none;
background-color: transparent;
text-decoration: none;
background-image: url("https://www.poewiki.net/w/images/a/ad/Vector_tab_center.png");
background-position: center top;
background-repeat: repeat-x;
background-clip: content-box;
background-size: auto;
}
div#mw-head .vector-menu-dropdown label.vector-menu-heading span::after {
content: "";
display: inline-block;
margin-right: -6px;
width: 1em;
height: 1em;
vertical-align: middle;
background-image: url("data:image/svg+xml;utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 320 512'><path d='M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z' fill='%23f2c462'/></svg>");
transition: transform 0.15s ease-in;
}
div#mw-head .vector-menu-dropdown .vector-menu-checkbox:checked + label.vector-menu-heading span::after {
transform: rotate(-0.5turn);
}
div#mw-head .vector-menu-dropdown .vector-menu-content {
width: fit-content;
}