User:Irukaza/common.css:修订间差异
跳到导航
跳到搜索
imported>=海豚= 无编辑摘要 |
imported>=海豚= 无编辑摘要 |
||
(未显示同一用户的5个中间版本) | |||
第1行: | 第1行: | ||
.wds-dropdown { | .wds-dropdown { | ||
background-color:grey; | |||
border-color:grey; | |||
display: inline-block; | display: inline-block; | ||
position: relative; | position: relative; | ||
第19行: | 第20行: | ||
} | } | ||
.wds-dropdown__toggle { | .wds-dropdown__toggle { | ||
cursor: | text-decoration: none !important; | ||
border-bottom: 1px dotted gray; | |||
cursor: pointer; | |||
position: relative; | position: relative; | ||
} | } | ||
第53行: | 第56行: | ||
width: 0; | width: 0; | ||
z-index: 2; | z-index: 2; | ||
} | |||
.custom-dropdown { | |||
display: inline-block; | |||
padding: 1px 8px; | |||
} | |||
.custom-dropdown > :first-child:after { | |||
background-image: url("data:image/gif;base64,R0lGODlhAQABAIABAAAAAP///yH5BAEAAAEALAAAAAABAAEAQAICTAEAOw%3D%3D"); | |||
border-color: white transparent transparent; | |||
border-style: solid; | |||
border-width: 4px; | |||
content: ""; | |||
display: inline-block; | |||
height: 1px; | |||
margin-left: 4px; | |||
margin-top: 2px; | |||
position: relative; | |||
vertical-align: middle; | |||
width: 1px; | |||
} | |||
.custom-dropdown:hover { | |||
border-bottom-left-radius: 0; | |||
border-bottom-right-radius: 0; | |||
margin-bottom: -1px; | |||
} | |||
.custom-dropdown ul { | |||
list-style: none outside none; | |||
min-width: 100%; | |||
top: auto; | |||
display: none; | |||
margin: 0; | |||
position: absolute; | |||
z-index: 100; | |||
} | |||
.custom-dropdown:hover ul, | |||
.custom-dropdown.wikia-menu-button:hover ul { | |||
display: block; | |||
} | |||
.custom-dropdown li a { | |||
font-size: 12px; | |||
height: 14px; | |||
line-height: 14px; | |||
} | |||
.WikiaArticle { | |||
overflow: visible; | |||
} | |||
/** | |||
* The following rules approximate legacy styles which are missing from UCP. | |||
* | |||
* Some notes, in no particular order, follow. | |||
* | |||
* - Because of the template, we only need the base styles for `.wikia-menu-button`. | |||
* The `:hover` styles from <buttons-wikia-menu.scss> revert the `:hover` styles from <buttons-wikia.scss> to the base styles. | |||
* We don't need `button`-specific stuff (like `[disabled]`) or variants (like `.secondary` and `.big`). | |||
* Since the `div` has no `tabindex`, we don't need `:focus` either. | |||
* | |||
* For details, see: | |||
* | |||
* - <https://discordapp.com/channels/246075715714416641/246737000189788161/761137290251862037>; | |||
* - <https://github.com/Wikia/app/blob/release-1153.001/skins/shared/styles/buttons/buttons-wikia-menu.scss>; and | |||
* - <https://github.com/Wikia/app/blob/release-1153.001/skins/shared/styles/buttons/buttons-wikia.scss>. | |||
* | |||
*/ | |||
.custom-dropdown.wikia-menu-button { | |||
/* non-overridden declarations from <buttons-wikia.scss> follow: */ | |||
background-color: var(--theme-accent-color); | |||
/* TODO: maybe set `background-image` to `linear-gradient(to bottom, $color-button-highlight 35%, var(--theme-accent-color) 65%)` */ | |||
border: 1px solid var(--theme-accent-color); | |||
border-radius: 4px; | |||
color: var(--theme-accent-label-color); | |||
cursor: pointer; | |||
display: inline-block; | |||
font-family: Helvetica, Arial, sans-serif; | |||
font-size: 12px; | |||
height: 19px; | |||
line-height: 20px; | |||
white-space: nowrap; | |||
/* non-overridden declarations from <buttons-wikia-menu.scss> follow: */ | |||
list-style: none; | |||
margin: 0; | |||
position: relative; | |||
text-align: left; | |||
} | |||
.custom-dropdown.wikia-menu-button a { | |||
text-decoration: none; | |||
} | |||
.custom-dropdown.wikia-menu-button ul { | |||
background: var(--theme-page-background-color); | |||
border: 1px solid var(--theme-accent-color); | |||
display: none; | |||
left: -1px; | |||
margin: 0; | |||
position: absolute; | |||
z-index: 100; | |||
box-shadow: 1px 2px 12px 0 #000; /* TODO: maybe calculate color as `darken(var(--theme-article-background-color), 80%)` */ | |||
} | |||
.custom-dropdown.wikia-menu-button ul a, | |||
.custom-dropdown.wikia-menu-button ul .mw-selflink { | |||
color: var(--theme-page-text-color); | |||
display: block; | |||
padding: 9px 9px 7px; | |||
} | |||
.custom-dropdown.wikia-menu-button ul a:hover { | |||
background-color: var( | |||
--theme-page-background-color--secondary | |||
); /* TODO: compute this properly; for light wikis, `$dropdown-background` is `mix(var(--theme-accent-color), var(--theme-article-background-color), 20%)`, and for dark wikis, it's `lighten($dropdown-background, 8%)` */ | |||
/* extra UCP crap follows: */ | |||
color: var(--theme-page-text-color); | |||
} | |||
.custom-dropdown.wikia-menu-button ul li { | |||
border-top: 1px solid var(--theme-border-color); | |||
line-height: normal; | |||
/* extra UCP crap follows: */ | |||
margin: 0; | |||
} | |||
.custom-dropdown.wikia-menu-button ul li:first-child { | |||
border: 0; | |||
} | |||
.custom-dropdown.wikia-menu-button .WikiaMenuElement { | |||
margin: 0; | |||
} | |||
.client-js .mw-collapsible[id^='mw-customcollapsible'] th:before, .client-js .mw-collapsible[id^='mw-customcollapsible']:before { | |||
content: none !important; | |||
} | |||
*, :after, :before { | |||
box-sizing: inherit; | |||
} | |||
*, :after, :before { | |||
box-sizing: inherit; | |||
} | } |
2021年6月14日 (一) 21:31的版本
.wds-dropdown {
background-color:grey;
border-color:grey;
display: inline-block;
position: relative;
}
.wds-dropdown__content {
background-color: white;
border: 1px grey;
border-radius: 4px;
color: black;
display: none;
left: 50%;
min-width: 70%;
padding: 7px 0;
position: absolute;
top: 100%;
transform: translateX(-50%);
z-index: 1;
}
.wds-dropdown__toggle {
text-decoration: none !important;
border-bottom: 1px dotted gray;
cursor: pointer;
position: relative;
}
.wds-dropdown:before {
border: 9px solid transparent;
border-bottom: 9px solid black;
margin-left: -9px;
}
.wds-dropdown:after, .wds-dropdown:before {
bottom: -1px;
content: "";
display: none;
height: 0;
left: 50%;
pointer-events: none;
position: absolute;
width: 0;
z-index: 2;
}
.wds-dropdown:after {
border: 8px solid transparent;
border-bottom: 8px solid black;
margin-left: -8px;
}
.wds-dropdown:after, .wds-dropdown:before {
bottom: -1px;
content: "";
display: none;
height: 0;
left: 50%;
pointer-events: none;
position: absolute;
width: 0;
z-index: 2;
}
.custom-dropdown {
display: inline-block;
padding: 1px 8px;
}
.custom-dropdown > :first-child:after {
background-image: url("data:image/gif;base64,R0lGODlhAQABAIABAAAAAP///yH5BAEAAAEALAAAAAABAAEAQAICTAEAOw%3D%3D");
border-color: white transparent transparent;
border-style: solid;
border-width: 4px;
content: "";
display: inline-block;
height: 1px;
margin-left: 4px;
margin-top: 2px;
position: relative;
vertical-align: middle;
width: 1px;
}
.custom-dropdown:hover {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
margin-bottom: -1px;
}
.custom-dropdown ul {
list-style: none outside none;
min-width: 100%;
top: auto;
display: none;
margin: 0;
position: absolute;
z-index: 100;
}
.custom-dropdown:hover ul,
.custom-dropdown.wikia-menu-button:hover ul {
display: block;
}
.custom-dropdown li a {
font-size: 12px;
height: 14px;
line-height: 14px;
}
.WikiaArticle {
overflow: visible;
}
/**
* The following rules approximate legacy styles which are missing from UCP.
*
* Some notes, in no particular order, follow.
*
* - Because of the template, we only need the base styles for `.wikia-menu-button`.
* The `:hover` styles from <buttons-wikia-menu.scss> revert the `:hover` styles from <buttons-wikia.scss> to the base styles.
* We don't need `button`-specific stuff (like `[disabled]`) or variants (like `.secondary` and `.big`).
* Since the `div` has no `tabindex`, we don't need `:focus` either.
*
* For details, see:
*
* - <https://discordapp.com/channels/246075715714416641/246737000189788161/761137290251862037>;
* - <https://github.com/Wikia/app/blob/release-1153.001/skins/shared/styles/buttons/buttons-wikia-menu.scss>; and
* - <https://github.com/Wikia/app/blob/release-1153.001/skins/shared/styles/buttons/buttons-wikia.scss>.
*
*/
.custom-dropdown.wikia-menu-button {
/* non-overridden declarations from <buttons-wikia.scss> follow: */
background-color: var(--theme-accent-color);
/* TODO: maybe set `background-image` to `linear-gradient(to bottom, $color-button-highlight 35%, var(--theme-accent-color) 65%)` */
border: 1px solid var(--theme-accent-color);
border-radius: 4px;
color: var(--theme-accent-label-color);
cursor: pointer;
display: inline-block;
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
height: 19px;
line-height: 20px;
white-space: nowrap;
/* non-overridden declarations from <buttons-wikia-menu.scss> follow: */
list-style: none;
margin: 0;
position: relative;
text-align: left;
}
.custom-dropdown.wikia-menu-button a {
text-decoration: none;
}
.custom-dropdown.wikia-menu-button ul {
background: var(--theme-page-background-color);
border: 1px solid var(--theme-accent-color);
display: none;
left: -1px;
margin: 0;
position: absolute;
z-index: 100;
box-shadow: 1px 2px 12px 0 #000; /* TODO: maybe calculate color as `darken(var(--theme-article-background-color), 80%)` */
}
.custom-dropdown.wikia-menu-button ul a,
.custom-dropdown.wikia-menu-button ul .mw-selflink {
color: var(--theme-page-text-color);
display: block;
padding: 9px 9px 7px;
}
.custom-dropdown.wikia-menu-button ul a:hover {
background-color: var(
--theme-page-background-color--secondary
); /* TODO: compute this properly; for light wikis, `$dropdown-background` is `mix(var(--theme-accent-color), var(--theme-article-background-color), 20%)`, and for dark wikis, it's `lighten($dropdown-background, 8%)` */
/* extra UCP crap follows: */
color: var(--theme-page-text-color);
}
.custom-dropdown.wikia-menu-button ul li {
border-top: 1px solid var(--theme-border-color);
line-height: normal;
/* extra UCP crap follows: */
margin: 0;
}
.custom-dropdown.wikia-menu-button ul li:first-child {
border: 0;
}
.custom-dropdown.wikia-menu-button .WikiaMenuElement {
margin: 0;
}
.client-js .mw-collapsible[id^='mw-customcollapsible'] th:before, .client-js .mw-collapsible[id^='mw-customcollapsible']:before {
content: none !important;
}
*, :after, :before {
box-sizing: inherit;
}
*, :after, :before {
box-sizing: inherit;
}