MediaWiki:Gadget-navpop.css: Difference between revisions
Appearance
Content deleted Content added
Per request |
|||
Line 7: | Line 7: | ||
ins.popupDiff { |
ins.popupDiff { |
||
background: #afe; |
background: #afe; |
||
⚫ | |||
} |
} |
||
del.popupDiff { |
del.popupDiff { |
||
background: #ffe6e6; |
background: #ffe6e6; |
||
⚫ | |||
} |
} |
||
#selectionPreview { |
#selectionPreview { |
||
border: 2px solid # |
border: 2px solid var(--border-color-subtle, #c8ccd1); |
||
background-color: # |
background-color: var(--background-color-progressive-subtle, #eaf3ff); |
||
padding: 6px; |
padding: 6px; |
||
} |
} |
||
.navpopup { |
.navpopup { |
||
border: 1px solid # |
border: 1px solid var(--border-color-base, #a2a9b1); |
||
background-color: #fff; |
background-color: var(--background-color-base, #fff); |
||
color: var(--color-base, #202122); |
|||
padding: 10px; |
padding: 10px; |
||
padding-bottom: 5px; |
padding-bottom: 5px; |
||
Line 60: | Line 63: | ||
z-index: 2; |
z-index: 2; |
||
width: 10em; |
width: 10em; |
||
background: |
background: var(--background-color-base, #fff); |
||
border: 1px solid grey; |
border: 1px solid grey; |
||
padding: 0 !important; |
padding: 0 !important; |
||
Line 76: | Line 79: | ||
display: block; |
display: block; |
||
padding: 3px; |
padding: 3px; |
||
⚫ | |||
} |
} |
||
Line 97: | Line 99: | ||
margin: 0; |
margin: 0; |
||
font-weight: bold; |
font-weight: bold; |
||
⚫ | |||
} |
} |
||
Line 103: | Line 104: | ||
.popup_drop .popup_menu:hover { |
.popup_drop .popup_menu:hover { |
||
display: inline; |
display: inline; |
||
background: white; |
|||
padding: 2px; |
padding: 2px; |
||
⚫ | |||
} |
} |
||
Line 126: | Line 125: | ||
.popup_mainlink a { |
.popup_mainlink a { |
||
color: #000; |
color: var(--color-emphasized, #000); |
||
} |
} |
||
a.popup_change_title_link { |
a.popup_change_title_link { |
||
color: #152; |
color: #152; |
||
} |
|||
/* Dark mode fixes */ |
|||
html.skin-theme-clientpref-night a.popup_change_title_link { |
|||
⚫ | |||
} |
|||
@media (prefers-color-scheme: dark) { |
|||
html.skin-theme-clientpref-os a.popup_change_title_link { |
|||
color: #25b84a; |
|||
} |
|||
} |
} |
||
Line 143: | Line 152: | ||
.popup_history_row_even { |
.popup_history_row_even { |
||
background: # |
background: var(--background-color-neutral, #eaecf0); |
||
} |
} |
||
Line 195: | Line 204: | ||
/* eye guide suggestion */ |
/* eye guide suggestion */ |
||
.popup_menu:hover |
.popup_menu:hover { |
||
⚫ | |||
{ |
|||
} |
|||
⚫ | |||
/* Dark mode fixes */ |
|||
html.skin-theme-clientpref-night .popup_menu:hover { |
|||
box-shadow: 0 0 5px 5px rgba(0, 0, 90, 0.3); |
|||
} |
|||
@media (prefers-color-scheme: dark) { |
|||
html.skin-theme-clientpref-os .popup_menu:hover { |
|||
box-shadow: 0 0 5px 5px rgba(0, 0, 90, 0.3); |
|||
} |
|||
} |
} |
||
Revision as of 01:55, 27 May 2024
.popupMoreLink {
display: block;
text-align: right;
cursor: pointer;
}
ins.popupDiff {
background: #afe;
color: #202122;
}
del.popupDiff {
background: #ffe6e6;
color: #202122;
}
#selectionPreview {
border: 2px solid var(--border-color-subtle, #c8ccd1);
background-color: var(--background-color-progressive-subtle, #eaf3ff);
padding: 6px;
}
.navpopup {
border: 1px solid var(--border-color-base, #a2a9b1);
background-color: var(--background-color-base, #fff);
color: var(--color-base, #202122);
padding: 10px;
padding-bottom: 5px;
font-size: 11px;
box-shadow: 0 3px 8px rgba( 50, 50, 50, 0.35 );
word-wrap: break-word;
}
.navpopup hr {
color: #aaa !important;
background-color: #aaa !important;
}
/* Configure Drag bar color */
.popupDrag {
background-color: #ffbe20;
height: 5px;
margin-top: -5px;
margin-bottom: 5px;
}
.popupDragHandle {
cursor: move;
position: relative;
}
/* menu magic - many thanks to [[User:Zocky]]! */
/* popups */
.popup_menu {
display: none;
position: absolute;
left: 0;
margin: 0;
margin-top: 1.4em;
line-height: 1.25em;
top: 0;
z-index: 2;
width: 10em;
background: var(--background-color-base, #fff);
border: 1px solid grey;
padding: 0 !important;
margin-left: -6px;
border-width: 1px 1px 1px 6px;
}
.popup_menu li { /* both: popup_menu_row and popup_menu_item */
list-style: none;
margin:0;
padding:0;
}
.popup_menu a {
display: block;
padding: 3px;
}
.popup_menu_row a {
display: inline-block;
}
.popup_menu_row {
color: #aaa;
}
.popup_drop {
display: inline;
position: relative;
}
.popup_drop a,
.popup_drop a:visited {
padding: 3px;
margin: 0;
font-weight: bold;
}
.popup_drop:hover .popup_menu,
.popup_drop .popup_menu:hover {
display: inline;
padding: 2px;
}
.popup_drop:hover {
background: #ccf;
color: #44f;
}
/* other colours, styles and so on */
.popup_menu a:hover {
background: grey;
color: #fff;
text-decoration: none;
}
.popup_mainlink {
font-size: 140%;
font-weight: bold;
}
.popup_mainlink a {
color: var(--color-emphasized, #000);
}
a.popup_change_title_link {
color: #152;
}
/* Dark mode fixes */
html.skin-theme-clientpref-night a.popup_change_title_link {
color: #25b84a;
}
@media (prefers-color-scheme: dark) {
html.skin-theme-clientpref-os a.popup_change_title_link {
color: #25b84a;
}
}
.popup_diff_dates {
font-style: italic;
background: none;
}
.popup_menu_item a {
display: block;
}
.popup_history_row_even {
background: var(--background-color-neutral, #eaecf0);
}
.popup_history_date {
font-weight: bold;
font-size: 120%;
}
.popup_history_row_odd,
.popup_history_row_even {
display: flex;
}
.popup_history_row_even td:nth-child(3),
.popup_history_row_odd td:nth-child(3) {
flex: 3;
word-break: break-word;
}
.popup_history_row_even td:nth-child(4),
.popup_history_row_odd td:nth-child(4) {
flex: 7;
word-break: break-word;
}
.popup_history_row_even > td:not(:last-child),
.popup_history_row_odd > td:not(:last-child) {
margin-right: 2px;
}
/* disable interwiki styling */
.popupPreview a.extiw,
.popupPreview a.extiw:active {
color: #36b;
background: none;
padding: 0;
}
.popupPreview .external {
color: #36b;
}
/* this can be used in the content area to switch off
special external link styling */
.popupPreview .plainlinks a {
background: none !important;
padding: 0 !important;
}
/*
Mouse safe zones for popup menu.
*/
/* eye guide suggestion */
.popup_menu:hover {
box-shadow: 0 0 5px 5px rgba(179, 179, 255, 0.3);
}
/* Dark mode fixes */
html.skin-theme-clientpref-night .popup_menu:hover {
box-shadow: 0 0 5px 5px rgba(0, 0, 90, 0.3);
}
@media (prefers-color-scheme: dark) {
html.skin-theme-clientpref-os .popup_menu:hover {
box-shadow: 0 0 5px 5px rgba(0, 0, 90, 0.3);
}
}
/* trapezoid guide for the cursor */
.popup_menu::before {
content: '';
display: block;
position: absolute;
height: 1.5em;
top: -1.4em;
left: -1.2em;
width: calc(2 * var(--navpop-m-len, 6ch));
transform: perspective(1px) rotateX(1deg);
}
/* make the trapezoid go behing menu items */
.popup_menu::before {
z-index: 1;
}
.popup_menu li {
position: relative;
z-index: 2;
}
/* additional hover margin on the sides */
.popup_menu li::before {
content: '';
display: block;
position: absolute;
top: 0;
height: calc(100% + .5em);
left: -1.7em;
width: 1.7em;
}
.popup_menu li::after {
content: '';
display: block;
position: absolute;
top: 0;
height: calc(100% + .5em);
left: calc(10em - 1px); /* depends on the width of the menu */
width: 1em;
}