/* App specific CSS for Visual Styles */ /* New High Contrast */ /* ** This only includes additional code the Evelution Skin requires for the Standard High Contrast Styling. ** Code for Standard High Contrast Styling that affects the CPE Language Core and OOUI must be put in CPE.css and VisualStyles.css respectively, not in this one */ .visualmode-contrast .qortex-updater { /* Base Container */ --desk-background:var(--canvas-secondary-background-color); --desk-image-display:none; /* Smoke Backplate */ --smoke-border:var(--canvas-text-secondary-background-color); /* Cards */ --card-border:var(--canvas-text-background-color); } .visualmode-contrast .evelution-content .evelution-article-wrapper .evelution-article-actions > li:hover > .link, .visualmode-contrast .evelution-content .evelution-article-wrapper .evelution-article-actions .cactions >li:hover > a { background-color:var(--highlight-text-background-color); color:var(--highlight-background-color); } .visualmode-contrast .evelution-content .evelution-article-wrapper .evelution-article-actions > li:active > .link, .visualmode-contrast .evelution-content .evelution-article-wrapper .evelution-article-actions .cactions >li:active > a, .visualmode-contrast .evelution-content .evelution-article-wrapper .evelution-article-actions .cactions >li > a:focus, .visualmode-contrast .evelution-content .evelution-article-wrapper .evelution-article-actions .cactions >li.selected > a { color:var(--highlight-text-background-color); background-color:var(--highlight-background-color); } .visualmode-contrast .evelution-page-header-main { background:transparent; } .visualmode-contrast .evelution-content .evelution-page-header .toggle-rail-button:hover, .visualmode-contrast .evelution-module .rail-buttons .rail-button:hover { background-color:var(--highlight-text-background-color); border-color:var(--highlight-background-color); color:var(--highlight-background-color); } .visualmode-contrast .evelution-content .evelution-page-header .toggle-rail-button:active, .visualmode-contrast .evelution-module .rail-buttons .rail-button:active { background-color:var(--highlight-background-color); border-color:var(--highlight-background-color); color:var(--highlight-text-background-color); } .visualmode-contrast .evelution-content .evelution-page-header .evelution-page-header-subtitle > span, .visualmode-contrast .evelution-header .counters .text, .visualmode-contrast .evelution-header .counters .cpe-icon, .visualmode-contrast .evelution-taskbar .upper-links .is-widget-style .widget-text .upper-text, .visualmode-contrast .evelution-taskbar .upper-links .is-widget-style .widget-text .bottom-text { opacity:1; } .visualmode-contrast .evelution-sidebar { /* Colors */ --global-nav-link-color-active:var(--highlight-text-background-color); --global-nav-link-background-active:var(--highlight-background-color); /* Automated */ --global-nav-link-color-hover:var(--global-nav-link-background-active); --global-nav-link-background-hover:var(--global-nav-link-color-active); --global-nav-link-border-hover:var(--global-nav-link-background-active); --global-nav-link-border-active:var(--global-nav-link-background-active); --global-nav-link-opacity:2!important; --global-nav-link-border-opacity:2!important; } .visualmode-contrast .evelution-sidebar .link:hover { background-color:var(--global-nav-link-background-hover); } .visualmode-contrast .evelution-sidebar .link:active, .visualmode-contrast .evelution-sidebar .link:focus, .visualmode-contrast .evelution-sidebar .link.active, .visualmode-contrast .evelution-sidebar .cpe-dropdown.opens-on-hover:hover > .link, .visualmode-contrast .evelution-sidebar .cpe-dropdown:focus > .link, .visualmode-contrast .evelution-sidebar .cpe-dropdown:focus-within > .link { background-color:var(--global-nav-link-background-active); } .visualmode-contrast .evelution-sidebar .link:focus-visible, .visualmode-contrast .evelution-sidebar .cpe-dropdown:focus-visible > .link { background-color:var(--global-nav-link-background-focus); } .visualmode-contrast .evelution-header-navigation-background { box-shadow:0 1px 0 0 var(--canvas-foreground-color)!important; } .visualmode-contrast .evelution-header .link:hover, .visualmode-contrast .evelution-content .evelution-page-header .evelution-middle-actions a:hover, .visualmode-contrast .evelution-top-actions .link:hover { -webkit-animation:none; animation:none; color:var(--highlight-background-color); border-color:var(--highlight-background-color); background-color:var(--highlight-text-background-color); } .visualmode-contrast .evelution-top-actions .link .cpe-icon { filter:none; } .visualmode-contrast .evelution-header .link:active, .visualmode-contrast .evelution-header .link:focus, .visualmode-contrast .evelution-header .cpe-dropdown.opens-on-hover:hover > .link, .visualmode-contrast .evelution-header .cpe-dropdown:focus > .link, .visualmode-contrast .evelution-header .cpe-dropdown:focus-within > .link, .visualmode-contrast .evelution-header .link.active, .visualmode-contrast .evelution-content .evelution-page-header .evelution-middle-actions a:active, .visualmode-contrast .evelution-content .evelution-page-header .evelution-middle-actions a:focus, .visualmode-contrast .evelution-content .evelution-page-header .evelution-middle-actions .selected a, .visualmode-contrast .evelution-top-actions .link:active, .visualmode-contrast .evelution-top-actions .link:focus, .visualmode-contrast .evelution-top-actions .cpe-dropdown.opens-on-hover:hover > .link, .visualmode-contrast .evelution-top-actions .cpe-dropdown:focus > .link, .visualmode-contrast .evelution-top-actions .cpe-dropdown:focus-within > .link, .visualmode-contrast .evelution-top-actions .link.active { -webkit-animation:none; animation:none; color:var(--highlight-text-background-color); border-color:var(--highlight-background-color); background-color:var(--highlight-background-color); } .visualmode-contrast .evelution-header .link:focus-visible, .visualmode-contrast .evelution-header .cpe-dropdown:focus-visible > .link, .visualmode-contrast .evelution-content .evelution-page-header .evelution-middle-actions a:focus-visible { border-color:var(--luna-foreground-color); } .visualmode-contrast .evelution-top-actions .link:focus-visible, .visualmode-contrast .evelution-top-actions .cpe-dropdown:focus-visible > .link { border-color:var(--desktop-foreground-color); } @media (orientation:portrait) { .visualmode-contrast .evelution-taskbar { box-shadow:inset 0 1px var(--inactive-text-background-color)!important; } } @media (orientation:landscape) { .visualmode-contrast .evelution-taskbar { box-shadow:inset -1px 0 var(--inactive-text-background-color)!important; } } .visualmode-contrast .evelution-content .evelution-article-wrapper .evelution-article-container, .visualmode-contrast .evelution-module { border-color:var(--canvas-foreground-color); } .visualmode-contrast .preview-window-window, .visualmode-contrast .preview-theme-wrapper .window { box-shadow:0px 0px 0 1px var(--luna-border-background-color)!important; } .visualmode-contrast .preview-window-window h2 button:hover { background-color:var(--highlight-text-background-color); color:var(--highlight-background-color); border-color:var(--highlight-background-color); } .visualmode-contrast .preview-window-window h2 button:active { background-color:var(--highlight-background-color); color:var(--highlight-text-background-color); border-color:var(--highlight-background-color); } .visualmode-contrast .preview-window-window h2 button.close:hover { background-color:var(--highlight-text-background-color); color:var(--highlight-background-color); border-color:var(--highlight-background-color); } .visualmode-contrast .preview-window-window h2 button.close:active { background-color:var(--highlight-background-color); color:var(--highlight-text-background-color); border-color:var(--highlight-background-color); } .visualmode-contrast .preview-window-window .menu > li > a:hover { background-color:var(--dropdown-hyperlink-background-color); color:var(--dropdown-hyperlink-text-color); border-color:var(--dropdown-hyperlink-border-color); } .visualmode-contrast .preview-window-window .menu > li > a:active, .visualmode-contrast .preview-window-window .menu > li > a:focus, .visualmode-contrast .preview-window-window .menu > li.selected > a, .visualmode-contrast .preview-window-window .menu > .cpe-dropdown.opens-on-hover:hover > a, .visualmode-contrast .preview-window-window .menu > .cpe-dropdown:focus > a, .visualmode-contrast .preview-window-window .menu > .cpe-dropdown:focus-within > a { background-color:var(--dropdown-active-hyperlink-background-color); color:var(--dropdown-active-hyperlink-text-color); border-color:var(--dropdown-active-hyperlink-border-color); } /*** Basic Theme ***/ /** Standard **/ .visualstyle-basic .evelution-content .evelution-page-header .toggle-rail-button, .visualstyle-basic .evelution-module .rail-buttons .rail-button { border-color:var(--luna-foreground-color); color:var(--luna-foreground-color); } .visualstyle-basic .evelution-content .evelution-page-header .toggle-rail-button:hover, .visualstyle-basic .evelution-module .rail-buttons .rail-button:hover { color:var(--luna-foreground-color-hover); border-color:var(--luna-foreground-color-hover); background-color:rgb(from var(--luna-hyperlink-background-color) r g b / 0.2); } .visualstyle-basic .evelution-content .evelution-page-header .toggle-rail-button:active, .visualstyle-basic .evelution-module .rail-buttons .rail-button:active { color:var(--luna-foreground-color-hover); border-color:var(--luna-foreground-color-hover); background-color:rgb(from var(--luna-hyperlink-background-color) r g b / 0.4); } .visualstyle-basic .evelution-sidebar .link { border-color:var(--global-nav-text-color); } .visualstyle-basic .evelution-sidebar .link:hover, .visualstyle-basic .evelution-sidebar .link:active, .visualstyle-basic .evelution-sidebar .link:focus, .visualstyle-basic .evelution-sidebar .link.active, .visualstyle-basic .evelution-sidebar .cpe-dropdown.opens-on-hover:hover > .link, .visualstyle-basic .evelution-sidebar .cpe-dropdown:focus > .link, .visualstyle-basic .evelution-sidebar .cpe-dropdown:focus-within > .link { border-color:var(--global-nav-link-color-hover); color:var(--global-nav-link-color-hover); background-color:rgb(from var(--luna-hyperlink-background-color) r g b / 0.2); } .visualstyle-basic .evelution-sidebar .link:active, .visualstyle-basic .evelution-sidebar .link:focus, .visualstyle-basic .evelution-sidebar .link.active, .visualstyle-basic .evelution-sidebar .cpe-dropdown.opens-on-hover:hover > .link, .visualstyle-basic .evelution-sidebar .cpe-dropdown:focus > .link, .visualstyle-basic .evelution-sidebar .cpe-dropdown:focus-within > .link { background-color:rgb(from var(--luna-hyperlink-background-color) r g b / 0.4); } .visualstyle-basic .evelution-sidebar .link:focus-visible, .visualstyle-basic .evelution-sidebar .cpe-dropdown:focus-visible > .link { border-color:var(--global-nav-link-color-focus); color:var(--global-nav-link-color-focus); background-color:rgb(from var(--luna-hyperlink-background-color) r g b / 0.4); } .visualstyle-basic .evelution-content .evelution-page-header a, .visualstyle-basic .evelution-content .evelution-page-header a:visited { color:var(--luna-foreground-color); } .visualstyle-basic .evelution-content .evelution-page-header a:hover, .visualstyle-basic .evelution-content .evelution-page-header a:visited:hover { color:var(--luna-foreground-color-hover); } .visualstyle-basic .evelution-content .evelution-page-header a.new, .visualstyle-basic .evelution-content .evelution-page-header a.new:visited, .visualstyle-basic .evelution-content .evelution-page-header .new a, .visualstyle-basic .evelution-content .evelution-page-header .new a:visited { color:var(--luna-alternative-foreground-color); } .visualstyle-basic .evelution-content .evelution-page-header a.new:hover, .visualstyle-basic .evelution-content .evelution-page-header a.new:visited:hover, .visualstyle-basic .evelution-content .evelution-page-header .new a:hover, .visualstyle-basic .evelution-content .evelution-page-header .new a:visited:hover { color:var(--luna-alternative-foreground-color-hover); } .visualstyle-basic .evelution-header .link, .visualstyle-basic .evelution-content .evelution-page-header .evelution-middle-actions a, .visualstyle-basic .evelution-top-actions .link { transition:background-color var(--transition-duration) var(--transition-timing-function) 0ms; } .visualstyle-basic .evelution-header .link, .visualstyle-basic .evelution-content .evelution-page-header .evelution-middle-actions a { border:1px solid var(--luna-foreground-color); } .visualstyle-basic .evelution-header .link:hover, .visualstyle-basic .evelution-content .evelution-page-header .evelution-middle-actions a:hover { background-color:rgb(from var(--luna-hyperlink-background-color) r g b / 0.2); color:var(--luna-foreground-color-hover); border:1px solid var(--luna-foreground-color-hover); } .visualstyle-basic .evelution-header .link.active, .visualstyle-basic .evelution-header .link:active, .visualstyle-basic .evelution-header .link:focus, .visualstyle-basic .evelution-header .cpe-dropdown.opens-on-hover:hover > .link, .visualstyle-basic .evelution-header .cpe-dropdown:focus > .link, .visualstyle-basic .evelution-header .cpe-dropdown:focus-within > .link, .visualstyle-basic .evelution-content .evelution-page-header .evelution-middle-actions a:active, .visualstyle-basic .evelution-content .evelution-page-header .evelution-middle-actions a:focus, .visualstyle-basic .evelution-content .evelution-page-header .evelution-middle-actions .selected a { border:1px solid var(--luna-foreground-color-hover); background-color:rgb(from var(--luna-hyperlink-background-color) r g b / 0.4); color:rgb(from var(--luna-foreground-color) r g b / 0.8); } .visualstyle-basic .evelution-header .link:focus-visible, .visualstyle-basic .evelution-content .evelution-page-header .evelution-middle-actions a:focus-visible, .visualstyle-basic .evelution-header .cpe-dropdown:focus-visible > .link { border:1px solid var(--luna-hyperlink-background-color); background-color:rgb(from var(--luna-hyperlink-background-color) r g b / 0.4); color:var(--luna-hyperlink-background-color); } .visualstyle-basic .evelution-top-actions .link { border:1px solid var(--header-foreground-color); } .visualstyle-basic .evelution-top-actions .link:hover { background-color:rgb(from var(--hyperlink-quaternary-background-color) r g b / 0.2); color:var(--header-foreground-color-hover); border:1px solid var(--header-foreground-color-hover); } .visualstyle-basic .evelution-top-actions .link.active, .visualstyle-basic .evelution-top-actions .link:active, .visualstyle-basic .evelution-top-actions .link:focus, .visualstyle-basic .evelution-top-actions .cpe-dropdown.opens-on-hover:hover > .link, .visualstyle-basic .evelution-top-actions .cpe-dropdown:focus > .link, .visualstyle-basic .evelution-top-actions .cpe-dropdown:focus-within > .link { border:1px solid var(--header-foreground-color-hover); background-color:rgb(from var(--hyperlink-quaternary-background-color) r g b / 0.4); color:rgb(from var(--header-foreground-color-hover) r g b / 0.8); } .visualstyle-basic .evelution-top-actions .link:focus-visible, .visualstyle-basic .evelution-top-actions .cpe-dropdown:focus-visible > .link { border-color:var(--hyperlink-quaternary-background-color); color:var(--hyperlink-quaternary-background-color); } .visualstyle-basic .preview-window-window { color:var(--luna-foreground-color); background-color:var(--luna-background-color); } .visualstyle-basic .preview-theme-wrapper .window { color:var(--luna-foreground-color); background-color:var(--luna-background-color); border-color:transparent; } .visualstyle-basic .preview-window-window h2 button { --button-background-hover:rgb(from var(--luna-hyperlink-background-color) r g b / 0.2); --button-background-active:rgb(from var(--luna-hyperlink-background-color) r g b / 0.4); --button-background-color:inherit; border-color:currentColor; } .visualstyle-basic .preview-window-window h2 button.close { --button-background-hover:rgb(from var(--luna-alert-background-color) r g b / 0.2); --button-background-active:rgb(from var(--luna-alert-background-color) r g b / 0.4); --button-background-color:inherit; } .visualstyle-basic .preview-window-window .menu { border-bottom-color:var(--luna-foreground-color); } .visualstyle-basic .preview-window-window .menu > li > a:hover { border-color:rgb(from var(--canvas-text-background-color) r g b / 0.5); } .visualstyle-basic .preview-window-window .menu > li > a:active, .visualstyle-basic .preview-window-window .menu > li > a:focus, .visualstyle-basic .preview-window-window .menu > li.selected > a, .visualstyle-basic .preview-window-window .menu > .cpe-dropdown.opens-on-hover:hover > a, .visualstyle-basic .preview-window-window .menu > .cpe-dropdown:focus > a, .visualstyle-basic .preview-window-window .menu > .cpe-dropdown:focus-within > a { background-color:var(--hyperlink-fadeout-color); border-color:var(--hyperlink-background-color); color: var(--hyperlink-background-color); } .visualstyle-basic .evelution-page-header { --border-color:var(--luna-foreground-color); } .visualstyle-basic .evelution-page-header .evelution-page-header-main { border:0; } .visualstyle-basic .evelution-content .evelution-article-wrapper .evelution-article-actions .cactions >li.selected > a { color:var(--luna-foreground-color); } /* Thick Borders */ .visualstyle-basic .evelution-content:not(.evelution-discussions-content) .evelution-article-container, .visualstyle-basic .evelution-module { box-shadow:-4px 0 0 0 var(--luna-background-color), 4px 0 0 0 var(--luna-background-color), 0 4px 0 0 var(--luna-background-color), 4px 4px 0 0 var(--luna-background-color), -4px 4px 0 0 var(--luna-background-color), -5px 0 0 0 var(--luna-foreground-color), 5px 0 0 0 var(--luna-foreground-color), 0 5px 0 0 var(--luna-foreground-color), 5px 5px 0 0 var(--luna-foreground-color), -5px 5px 0 0 var(--luna-foreground-color), 0 -1px 0 0 var(--luna-foreground-color), -5px -1px 0 0 var(--luna-foreground-color), 5px -1px 0 0 var(--luna-foreground-color)!important; border-top-color:var(--luna-background-color); } .visualstyle-basic .evelution-content:not(.evelution-discussions-content) .evelution-article-container { border-color:var(--luna-foreground-color); } .visualstyle-basic .evelution-module .evelution-module-content { border-color:var(--luna-foreground-color); } .visualstyle-basic .evelution-module .buttons { border-color:var(--luna-foreground-color); border-top:0; } .visualstyle-basic .evelution-sidebar { box-shadow: -1px 0 0 0 var(--luna-foreground-color), 1px 0 0 0 var(--luna-foreground-color), 0 -1px 0 0 var(--luna-foreground-color), 1px -1px 0 0 var(--luna-foreground-color), -1px -1px 0 0 var(--luna-foreground-color), 0 1px 0 0 var(--luna-foreground-color), 1px 1px 0 0 var(--luna-foreground-color), -1px 1px 0 0 var(--luna-foreground-color), 0 -1px 0 0 var(--luna-foreground-color), -1px -1px 0 0 var(--luna-foreground-color), 1px -1px 0 0 var(--luna-foreground-color)!important; } .visualstyle-basic .evelution-header { box-shadow:-4px 0 0 0 var(--luna-background-color), 4px 0 0 0 var(--luna-background-color), 0 -4px 0 0 var(--luna-background-color), 4px -4px 0 0 var(--luna-background-color), -4px -4px 0 0 var(--luna-background-color), 0 4px 0 0 var(--luna-background-color), 4px 4px 0 0 var(--luna-background-color), -4px 4px 0 0 var(--luna-background-color), -5px 0 0 0 var(--luna-foreground-color), 5px 0 0 0 var(--luna-foreground-color), 0 -5px 0 0 var(--luna-foreground-color), 5px -5px 0 0 var(--luna-foreground-color), -5px -5px 0 0 var(--luna-foreground-color), 0 5px 0 0 var(--luna-foreground-color), 5px 5px 0 0 var(--luna-foreground-color), -5px 5px 0 0 var(--luna-foreground-color), 0 -1px 0 0 var(--luna-foreground-color), -5px -1px 0 0 var(--luna-foreground-color), 5px -1px 0 0 var(--luna-foreground-color)!important; border-top-color:var(--luna-foreground-color); border-bottom-color:var(--luna-foreground-color); } .visualstyle-basic .evelution-module { background-color:var(--luna-mica-background-color); border-color:var(--luna-background-color); color:var(--luna-foreground-color); } .visualstyle-basic .evelution-module .evelution-module-content { border-color:var(--luna-foreground-color); } .visualstyle-basic .evelution-page-header .cpe-button { --button-background-color: var(--luna-foreground-color); --button-background-color-hover: var(--luna-foreground-color-hover); --button-foreground-color: var(--luna-background-color); --button-foreground-color-inverted: var(--luna-background-color); --secondary-button-background-color:transparent; --secondary-button-foreground-color: var(--luna-foreground-color); --secondary-button-foreground-color-hover: var(--luna-foreground-color-hover); --tertiary-button-background-color:rgb(from var(--luna-foreground-color) r g b / var(--fadeout-opacity)); --tertiary-button-foreground-color:var(--luna-foreground-color); } .visualstyle-basic .evelution-page-header .cpe-button.is-alert-color, .visualstyle-basic .evelution-page-header .cpe-button.is-pause-color, .visualstyle-basic .evelution-page-header .cpe-button.is-warning-color, .visualstyle-basic .evelution-page-header .cpe-button.is-success-color, .visualstyle-basic .evelution-page-header .cpe-button.is-progress-color, .visualstyle-basic .evelution-page-header .cpe-button.is-message-color, .visualstyle-basic .evelution-page-header li.stub .cpe-button, .visualstyle-basic .evelution-page-header li.new .cpe-button { --button-background-color: var(--luna-alternative-foreground-color); --button-background-color-hover: var(--luna-alternative-foreground-color-hover); --button-foreground-color: var(--luna-background-color); --button-foreground-color-inverted: var(--luna-background-color); --secondary-button-background-color:transparent; --secondary-button-foreground-color: var(--luna-alternative-foreground-color); --secondary-button-foreground-color-hover: var(--luna-alternative-foreground-color-hover); --tertiary-button-background-color:rgb(from var(--luna-alternative-foreground-color) r g b / var(--fadeout-opacity)); --tertiary-button-foreground-color:var(--luna-alternative-foreground-color); } .visualstyle-basic .evelution-header { color:var(--luna-foreground-color); } .visualstyle-basic .evelution-header .title a:hover, .visualstyle-basic .evelution-header .title a:focus, .visualstyle-basic .evelution-header .wordmark:hover .icon-logo, .visualstyle-basic .evelution-header .wordmark:focus .icon-logo { color:var(--luna-foreground-color-hover); } .visualstyle-basic .evelution-content .evelution-article-container { background-color:var(--canvas-background-color); border-top-color:transparent; } /* Thick Borders */ .visualstyle-basic .evelution-content .evelution-page-header { background-image:none; color:var(--luna-foreground-color); border-bottom:1px solid var(--luna-foreground-color); background-color:var(--luna-mica-background-color); } /* Thick Borders */ .visualstyle-basic .evelution-content .evelution-page-footer .evelution-page-header { border-top:1px solid var(--luna-foreground-color); border-bottom:0; } /* Thick Borders */ .visualstyle-basic .preview-window-window, .visualstyle-basic .preview-theme-wrapper .window { box-shadow:-4px 0 0 0 var(--luna-background-color), 4px 0 0 0 var(--luna-background-color), 0 4px 0 0 var(--luna-background-color), 4px 4px 0 0 var(--luna-background-color), -4px 4px 0 0 var(--luna-background-color), -5px 0 0 0 var(--luna-foreground-color), 5px 0 0 0 var(--luna-foreground-color), 0 5px 0 0 var(--luna-foreground-color), 5px 5px 0 0 var(--luna-foreground-color), -5px 5px 0 0 var(--luna-foreground-color), 0 -1px 0 0 var(--luna-foreground-color), -5px -1px 0 0 var(--luna-foreground-color), 5px -1px 0 0 var(--luna-foreground-color)!important; } .visualstyle-basic .preview-window-window section, .visualstyle-basic .preview-theme-wrapper .window .content { border-color:var(--luna-foreground-color); } /* Thick Borders */ .visualstyle-basic .evelution-content .evelution-page-header { border-top-color:var(--luna-background-color); } .visualstyle-basic .evelution-content .evelution-page-header { box-shadow:-2px 0 0 0 var(--luna-background-color),2px 0 0 0 var(--luna-background-color), -2px -1px 0 0 var(--luna-background-color),2px -1px 0 0 var(--luna-background-color), 0 -0.5px 0 0 var(--luna-background-color), -1px 1px 0 var(--luna-foreground-color),1px 1px 0 var(--luna-foreground-color)!important; border-bottom:0; } /* Thick Borders */ .visualstyle-basic .evelution-content .evelution-page-footer { border-bottom:1px solid var(--luna-background-color); box-shadow:0 -1px 0 var(--luna-foreground-color), 0px 1px 0 0 var(--luna-background-color), 1px 0px 0 0 var(--luna-background-color), 1px 1px 0 0 var(--luna-background-color), 0px -1px 0 0 var(--luna-background-color), -1px 0px 0 0 var(--luna-background-color), -1px 1px 0 0 var(--luna-background-color), 1px -1px 0 var(--luna-foreground-color), -1px -1px 0 var(--luna-foreground-color)!important; border:transparent 1px; } /* Title */ .visualstyle-basic .evelution-content .evelution-page-header .evelution-title .cpe-midlight-color, .visualstyle-basic .evelution-module h2 { --midlight-color:var(--canvas-foreground-color-hover); } /** High Contrast **/ .visualstyle-basic.visualmode-contrast .evelution-content .evelution-page-header .toggle-rail-button, .visualstyle-basic.visualmode-contrast .evelution-module .rail-buttons .rail-button { background-clip:padding-box; background-color:var(--canvas-background-color); border-color:transparent; color:var(--canvas-text-background-color); } .visualstyle-basic.visualmode-contrast .evelution-content .evelution-page-header .toggle-rail-button:hover, .visualstyle-basic.visualmode-contrast .evelution-module .rail-buttons .rail-button:hover { background-color:var(--canvas-secondary-background-color); border-color:var(--canvas-text-secondary-background-color); color:var(--canvas-text-secondary-background-color); } .visualstyle-basic.visualmode-contrast .evelution-content .evelution-page-header .toggle-rail-button:active, .visualstyle-basic.visualmode-contrast .evelution-module .rail-buttons .rail-button:active { background-color:var(--highlight-background-color); border-color:var(--canvas-text-secondary-background-color); color:var(--highlight-text-background-color); } .visualstyle-basic.visualmode-contrast .evelution-sidebar { /* Regular */ --global-nav-color:var(--luna-background-color); --global-nav-text-color:var(--luna-text-background-color); /* Hovered Links */ --global-nav-link-color-hover:var(--canvas-text-secondary-background-color); --global-nav-link-background-hover:var(--canvas-secondary-background-color); --global-nav-link-border-hover:var(--canvas-text-secondary-background-color); /* Active Links */ --global-nav-link-color-active:var(--highlight-text-background-color); --global-nav-link-background-active:var(--highlight-background-color); --global-nav-link-border-active:var(--canvas-text-secondary-background-color); /* Keybord-Focused Links */ --global-nav-link-color-focus:var(--canvas-secondary-background-color); --global-nav-link-background-focus:var(--canvas-text-secondary-background-color); --global-nav-link-border-focus:var(--canvas-text-secondary-background-color); /* Misc */ --global-nav-link-opacity:1; --global-nav-link-border-opacity:1; } .visualstyle-basic.visualmode-contrast .evelution-content .evelution-article-wrapper .evelution-article-actions > li:hover > .link, .visualstyle-basic.visualmode-contrast .evelution-content .evelution-article-wrapper .evelution-article-actions > li:active > .link, .visualstyle-basic.visualmode-contrast .evelution-content .evelution-article-wrapper .evelution-article-actions .cactions >li:hover > a, .visualstyle-basic.visualmode-contrast .evelution-content .evelution-article-wrapper .evelution-article-actions .cactions >li:active > a, .visualstyle-basic.visualmode-contrast .evelution-content .evelution-article-wrapper .evelution-article-actions .cactions >li > a:focus, .visualstyle-basic.visualmode-contrast .evelution-content .evelution-article-wrapper .evelution-article-actions .cactions >li.selected > a { color:var(--highlight-text-background-color); background-color:var(--highlight-background-color); } .visualstyle-basic.visualmode-contrast .evelution-header .link, .visualstyle-basic.visualmode-contrast .evelution-content .evelution-page-header .evelution-middle-actions a, .visualstyle-basic.visualmode-contrast .evelution-top-actions .link { transition:background-color var(--transition-duration) var(--transition-timing-function) 0ms, color 10ms var(--transition-timing-function) 10ms, border-color 10ms var(--transition-timing-function) 10ms, transform var(--transition-duration) var(--transition-timing-function) 0ms; } .visualstyle-basic.visualmode-contrast .evelution-sidebar .link, .visualstyle-basic.visualmode-contrast .evelution-header .link, .visualstyle-basic.visualmode-contrast .evelution-content .evelution-page-header .evelution-middle-actions a, .visualstyle-basic.visualmode-contrast .evelution-top-actions .link { background-clip:padding-box; background-color:var(--canvas-background-color); border-color:transparent; color:var(--canvas-text-background-color); } .visualstyle-basic.visualmode-contrast .evelution-header .link:hover, .visualstyle-basic.visualmode-contrast .evelution-content .evelution-page-header .evelution-middle-actions a:hover, .visualstyle-basic.visualmode-contrast .evelution-top-actions .link:hover { -webkit-animation:none; animation:none; color:var(--canvas-text-secondary-background-color); border-color:var(--canvas-text-secondary-background-color); background-color:var(--canvas-secondary-background-color); } .visualstyle-basic.visualmode-contrast .evelution-header .link:active, .visualstyle-basic.visualmode-contrast .evelution-header .link:focus, .visualstyle-basic.visualmode-contrast .evelution-header .cpe-dropdown.opens-on-hover:hover > .link, .visualstyle-basic.visualmode-contrast .evelution-header .cpe-dropdown:focus > .link, .visualstyle-basic.visualmode-contrast .evelution-header .cpe-dropdown:focus-within > .link, .visualstyle-basic.visualmode-contrast .evelution-header .link.active, .visualstyle-basic.visualmode-contrast .evelution-content .evelution-page-header .evelution-middle-actions a:active, .visualstyle-basic.visualmode-contrast .evelution-content .evelution-page-header .evelution-middle-actions a:focus, .visualstyle-basic.visualmode-contrast .evelution-content .evelution-page-header .evelution-middle-actions .selected a, .visualstyle-basic.visualmode-contrast .evelution-top-actions .link:active, .visualstyle-basic.visualmode-contrast .evelution-top-actions .link:focus, .visualstyle-basic.visualmode-contrast .evelution-top-actions .cpe-dropdown.opens-on-hover:hover > .link, .visualstyle-basic.visualmode-contrast .evelution-top-actions .cpe-dropdown:focus > .link, .visualstyle-basic.visualmode-contrast .evelution-top-actions .cpe-dropdown:focus-within > .link, .visualstyle-basic.visualmode-contrast .evelution-top-actions .link.active { -webkit-animation:none; animation:none; color:var(--highlight-text-background-color); border-color:var(--canvas-text-secondary-background-color); background-color:var(--highlight-background-color); } .visualstyle-basic.visualmode-contrast .evelution-header .link:focus-visible, .visualstyle-basic.visualmode-contrast .evelution-header .cpe-dropdown:focus-visible > .link, .visualstyle-basic.visualmode-contrast .evelution-content .evelution-page-header .evelution-middle-actions a:focus-visible, .visualstyle-basic.visualmode-contrast .evelution-top-actions .link:focus-visible, .visualstyle-basic.visualmode-contrast .evelution-top-actions .cpe-dropdown:focus-visible > .link { color:var(--canvas-secondary-background-color); border-color:var(--canvas-text-secondary-background-color); background-color:var(--canvas-text-secondary-background-color); } .visualstyle-basic.visualmode-contrast .evelution-taskbar { box-shadow:inset 0 1px var(--inactive-text-background-color)!important; } .visualstyle-basic.visualmode-contrast .evelution-sidebar .link:hover { background-color:var(--global-nav-link-background-hover); border-color:var(--global-nav-link-border-hover); color:var(--global-nav-link-color-hover); } .visualstyle-basic.visualmode-contrast .evelution-sidebar .link:active, .visualstyle-basic.visualmode-contrast .evelution-sidebar .link:focus, .visualstyle-basic.visualmode-contrast .evelution-sidebar .link.active, .visualstyle-basic.visualmode-contrast .evelution-sidebar .cpe-dropdown.opens-on-hover:hover > .link, .visualstyle-basic.visualmode-contrast .evelution-sidebar .cpe-dropdown:focus > .link, .visualstyle-basic.visualmode-contrast .evelution-sidebar .cpe-dropdown:focus-within > .link { background-color:var(--global-nav-link-background-active); border-color:var(--global-nav-link-border-active); color:var(--global-nav-link-color-active); } .visualstyle-basic.visualmode-contrast .evelution-sidebar .link:focus-visible, .visualstyle-basic.visualmode-contrast .evelution-sidebar .cpe-dropdown:focus-visible > .link { background-color:var(--global-nav-link-background-focus); border-color:var(--global-nav-link-border-focus); color:var(--global-nav-link-color-focus); } .visualstyle-basic.visualmode-contrast .preview-window-window h2 button { background-clip:padding-box; background-color:var(--canvas-background-color); border-color:transparent; color:var(--canvas-text-background-color); } .visualstyle-basic.visualmode-contrast .preview-window-window h2 button:hover { background-color:var(--canvas-secondary-background-color); color:var(--canvas-text-secondary-background-color); border-color:var(--canvas-text-secondary-background-color); } .visualstyle-basic.visualmode-contrast .preview-window-window h2 button.close:hover { background-color:var(--canvas-secondary-background-color); color:var(--canvas-text-secondary-background-color); border-color:var(--canvas-text-secondary-background-color); } .visualstyle-basic.visualmode-contrast .preview-window-window h2 button:active { background-color:var(--highlight-background-color); color:var(--highlight-text-background-color); border-color:var(--canvas-text-secondary-background-color); } .visualstyle-basic.visualmode-contrast .preview-window-window h2 button.close:active { background-color:var(--highlight-background-color); color:var(--highlight-text-background-color); border-color:var(--canvas-text-secondary-background-color); } .visualstyle-basic.visualmode-contrast .preview-window-window .menu > li > a:hover { background-color:var(--dropdown-hyperlink-background-color); color:var(--dropdown-hyperlink-text-color); border-color:var(--dropdown-hyperlink-border-color); } .visualstyle-basic.visualmode-contrast .preview-window-window .menu > li > a:active, .visualstyle-basic.visualmode-contrast .preview-window-window .menu > li > a:focus, .visualstyle-basic.visualmode-contrast .preview-window-window .menu > li.selected > a, .visualstyle-basic.visualmode-contrast .preview-window-window .menu > .cpe-dropdown.opens-on-hover:hover > a, .visualstyle-basic.visualmode-contrast .preview-window-window .menu > .cpe-dropdown:focus > a, .visualstyle-basic.visualmode-contrast .preview-window-window .menu > .cpe-dropdown:focus-within > a { background-color:var(--dropdown-active-hyperlink-background-color); color:var(--dropdown-active-hyperlink-text-color); border-color:var(--dropdown-active-hyperlink-border-color); } .visualstyle-basic.visualmode-contrast .evelution-content .evelution-page-footer .evelution-page-header { box-shadow:none!important; border-color:var(--luna-background-color)!important; } .visualstyle-basic .evelution-content .evelution-page-footer .evelution-page-header { box-shadow:none!important; } /*** Simple Theme ***/ /** Standard **/ .visualstyle-simple .evelution-header { color:var(--luna-text-background-color); } .visualstyle-simple .evelution-header .title a:hover, .visualstyle-simple .evelution-header .title a:focus, .visualstyle-simple .evelution-header .wordmark:hover .icon-logo, .visualstyle-simple .evelution-header .wordmark:focus .icon-logo { color:var(--luna-text-background-color-hover); } .visualstyle-simple .evelution-sidebar { --global-nav-color:var(--luna-background-color)!important; --global-nav-text-color:var(--luna-foreground-color)!important; --global-nav-link-color-hover:var(--luna-foreground-color-inverted)!important; --global-nav-link-background-hover:rgb(from var(--luna-background-color-hover) r g b / var(--acrylic-opacity))!important; --global-nav-link-color-active:var(--global-nav-link-color-hover)!important; --global-nav-link-background-active:var(--global-nav-link-background-hover)!important; --global-nav-link-color-focus:var(--global-nav-link-color-active)!important; --global-nav-link-background-focus:var(--global-nav-link-background-active)!important; } .visualstyle-simple .evelution-header .link.active, .visualstyle-simple .evelution-header .link:hover, .visualstyle-simple .evelution-header .link:active, .visualstyle-simple .evelution-header .link:focus, .visualstyle-simple .evelution-header .cpe-dropdown.opens-on-hover:hover > .link, .visualstyle-simple .evelution-header .cpe-dropdown:focus > .link, .visualstyle-simple .evelution-header .cpe-dropdown:focus-within > .link, .visualstyle-simple .evelution-content .evelution-page-header .evelution-middle-actions a:hover, .visualstyle-simple .evelution-content .evelution-page-header .evelution-middle-actions a:active, .visualstyle-simple .evelution-content .evelution-page-header .evelution-middle-actions a:focus, .visualstyle-simple .evelution-content .evelution-page-header .evelution-middle-actions .selected a { background-color:rgb(from var(--luna-background-color-hover) r g b / var(--mica-opacity-2)); color:var(--luna-foreground-color-inverted); animation:none; border-color:rgb(from var(--canvas-foreground-color) r g b / 0.2); } .visualstyle-simple.has-accents .evelution-header .link.active, .visualstyle-simple.has-accents .evelution-header .link:hover, .visualstyle-simple.has-accents .evelution-header .link:active, .visualstyle-simple.has-accents .evelution-header .link:focus, .visualstyle-simple.has-accents .evelution-header .cpe-dropdown.opens-on-hover:hover > .link, .visualstyle-simple.has-accents .evelution-header .cpe-dropdown:focus > .link, .visualstyle-simple.has-accents .evelution-header .cpe-dropdown:focus-within > .link, .visualstyle-simple.has-accents .evelution-content .evelution-page-header .evelution-middle-actions a:hover, .visualstyle-simple.has-accents .evelution-content .evelution-page-header .evelution-middle-actions a:active, .visualstyle-simple.has-accents .evelution-content .evelution-page-header .evelution-middle-actions a:focus, .visualstyle-simple.has-accents .evelution-content .evelution-page-header .evelution-middle-actions .selected a { border-color:rgb(from var(--luna-foreground-color) r g b / 0.2); } .visualstyle-simple .evelution-header .link:focus-visible, .visualstyle-simple .evelution-header .cpe-dropdown:focus-visible > .link, .visualstyle-simple .evelution-content .evelution-page-header .evelution-middle-actions a:focus-visible, .visualstyle-simple.has-accents .evelution-header .link:focus-visible, .visualstyle-simple.has-accents .evelution-header .cpe-dropdown:focus-visible > .link, .visualstyle-simple.has-accents .evelution-content .evelution-page-header .evelution-middle-actions a:focus-visible { border-color:var(--luna-foreground-color); } .visualstyle-simple .evelution-top-actions .link.active, .visualstyle-simple .evelution-top-actions .link:hover, .visualstyle-simple .evelution-top-actions .link:active, .visualstyle-simple .evelution-top-actions .link:focus, .visualstyle-simple .evelution-top-actions .cpe-dropdown.opens-on-hover:hover > .link, .visualstyle-simple .evelution-top-actions .cpe-dropdown:focus > .link, .visualstyle-simple .evelution-top-actions .cpe-dropdown:focus-within > .link { --desktop-filter:none; background-color:rgb(from var(--desktop-background-color-hover) r g b / var(--acrylic-opacity)); color:var(--desktop-foreground-color-inverted); animation:none; border-color:rgb(from var(--canvas-foreground-color) r g b / 0.2); } .visualstyle-simple .evelution-top-actions .link:focus-visible, .visualstyle-simple .evelution-top-actions .cpe-dropdown:focus-visible > .link { border-color:var(--desktop-foreground-color); } .visualstyle-simple .evelution-sidebar .link:hover, .visualstyle-simple .evelution-sidebar .link:active, .visualstyle-simple .evelution-sidebar .link:focus, .visualstyle-simple .evelution-sidebar .link.active, .visualstyle-simple .evelution-sidebar .cpe-dropdown.opens-on-hover:hover > .link, .visualstyle-simple .evelution-sidebar .cpe-dropdown:focus > .link, .visualstyle-simple .evelution-sidebar .cpe-dropdown:focus-within > .link { background-color:var(--global-nav-link-background-active); border-color:rgb(from var(--canvas-foreground-color) r g b / 0.2); } .visualstyle-simple.has-accents .evelution-sidebar .link:hover, .visualstyle-simple.has-accents .evelution-sidebar .link:active, .visualstyle-simple.has-accents .evelution-sidebar .link:focus, .visualstyle-simple.has-accents .evelution-sidebar .link.active, .visualstyle-simple.has-accents .evelution-sidebar .cpe-dropdown.opens-on-hover:hover > .link, .visualstyle-simple.has-accents .evelution-sidebar .cpe-dropdown:focus > .link, .visualstyle-simple.has-accents .evelution-sidebar .cpe-dropdown:focus-within > .link { border-color:rgb(from var(--luna-foreground-color) r g b / 0.2); } .visualstyle-simple .evelution-sidebar .link:focus-visible, .visualstyle-simple .evelution-sidebar .cpe-dropdown:focus-visible > .link { background-color:var(--global-nav-link-background-focus); border-color:var(--luna-foreground-color); } .visualstyle-simple.has-accents .evelution-sidebar .link:focus-visible, .visualstyle-simple.has-accents .evelution-sidebar .cpe-dropdown:focus-visible > .link { border-color:var(--luna-foreground-color); } .visualstyle-simple .evelution-content .evelution-page-header .evelution-title { text-shadow:none; color:inherit; } .visualstyle-simple .preview-window-window h2 button { --button-background-hover:rgb(from var(--luna-background-color-hover) r g b / var(--acrylic-opacity)); --button-background-active:rgb(from var(--luna-background-color-hover) r g b / var(--acrylic-opacity)); --button-background-color:var(--luna-foreground-color-inverted); border-color:transparent; } .visualstyle-simple .preview-window-window h2 button:hover { border-color:rgb(from var(--canvas-foreground-color) r g b / 0.2); } .visualstyle-simple.has-accents .preview-window-window h2 button:hover { border-color:rgb(from var(--luna-foreground-color) r g b / 0.2); } .visualstyle-simple .preview-window-window h2 button:active { color:var(--button-background-color); } .visualstyle-simple .preview-window-window h2 button.close { --button-background-hover:var(--alert-background-color); --button-background-active:var(--alert-background-color); --button-background-color:var(--alert-foreground-color); } .visualstyle-simple .preview-window-window h2 button.close:hover { border-color:rgb(from var(--canvas-foreground-color) r g b / 0.2); } .visualstyle-simple.has-accents .preview-window-window h2 button.close:hover { border-color:rgb(from var(--canvas-foreground-color) r g b / 0.2); } .visualstyle-simple .preview-window-window .menu > li > a { color:var(--canvas-foreground-color); } .visualstyle-simple .preview-window-window .menu > li > a:hover, .visualstyle-simple .preview-window-window .menu > li > a:active, .visualstyle-simple .preview-window-window .menu > li > a:focus, .visualstyle-simple .preview-window-window .menu > li.selected > a, .visualstyle-simple .preview-window-window .menu > .cpe-dropdown.opens-on-hover:hover > a, .visualstyle-simple .preview-window-window .menu > .cpe-dropdown:focus > a, .visualstyle-simple .preview-window-window .menu > .cpe-dropdown:focus-within > a { color:var(--canvas-foreground-color-inverted); background-color:var(--canvas-background-color-hover); border-color:rgb(from var(--canvas-foreground-color) r g b / 0.2); } .visualstyle-simple .evelution-content .evelution-page-header .toggle-rail-button:hover, .visualstyle-simple .evelution-content .evelution-page-header .toggle-rail-button:active, .visualstyle-simple .evelution-module .rail-buttons .rail-button:hover, .visualstyle-simple .evelution-module .rail-buttons .rail-button:active { color:var(--luna-foreground-color-inverted); border-color:rgb(from var(--canvas-foreground-color) r g b / 0.2); background-color:rgb(from var(--luna-background-color-hover) r g b / var(--mica-opacity-2)); } .visualstyle-simple.has-accents .evelution-content .evelution-page-header .toggle-rail-button:hover, .visualstyle-simple.has-accents .evelution-content .evelution-page-header .toggle-rail-button:active, .visualstyle-simple.has-accents .evelution-module .rail-buttons .rail-button:hover, .visualstyle-simple.has-accents .evelution-module .rail-buttons .rail-button:active { border-color:rgb(from var(--luna-foreground-color) r g b / 0.2); } .visualstyle-simple .evelution-header .local-navigation .cpe-dropdown__content .local-navigation__button > .edit-button .cpe-button, .visualstyle-simple .search .cpe-dropdown__content .cpe-list .pageheader-search .cpe-button { --tabs-color:var(--simple-luna-tabs-background-color); --tabs-opacity:var(--simple-luna-active-tabs-opacity); --button-background-color: var(--simple-luna-foreground-color); --button-background-color-hover: var(--simple-luna-foreground-color-hover); --button-foreground-color: var(--simple-luna-background-color); --button-foreground-color-hover: var(--simple-luna-background-color); --button-foreground-color-inverted: var(--simple-luna-background-color-hover); --secondary-button-background-color:rgb(var(--tabs-color) / var(--tabs-opacity)); --secondary-button-foreground-color: var(--simple-luna-foreground-color); --secondary-button-foreground-color-hover: var(--simple-luna-foreground-color-hover); } .visualstyle-simple .search .cpe-dropdown__content .cpe-list .pageheader-search .cpe-input { --tabs-color:var(--simple-luna-tabs-background-color); --tabs-opacity:var(--simple-luna-active-tabs-opacity); --input-box-color-contrast:var(--simple-luna-background-color); --input-box-text:var(--simple-luna-foreground-color); --input-box-border:currentColor; --input-box-focus:var(--simple-luna-foreground-color); --input-box-solid:var(--simple-luna-foreground-color-hover); } /* Search Button */ .visualstyle-simple .evelution-taskbar .search .cpe-button.search-button { --tabs-color:var(--luna-tabs-background-color); --tabs-opacity:var(--luna-active-tabs-opacity); --button-background-color: var(--luna-foreground-color); --button-background-color-hover: var(--luna-foreground-color-hover); --button-foreground-color: var(--luna-background-color); --button-foreground-color-hover: var(--luna-background-color); --button-foreground-color-inverted: var(--luna-background-color-hover); --secondary-button-background-color:rgb(var(--tabs-color) / var(--tabs-opacity)); --secondary-button-foreground-color: var(--luna-foreground-color); --secondary-button-foreground-color-hover: var(--luna-foreground-color-hover); } /* Search Box */ @media only screen and (min-width:1020px) { /*@FIXME: Should use lower size*/ .visualstyle-simple .evelution-header .search .cpe-dropdown__content .cpe-list>li .cpe-button { --button-background-color: var(--luna-foreground-color); --button-background-color-hover: var(--luna-foreground-color-hover); --button-foreground-color: var(--luna-background-color); --button-foreground-color-hover:var(--luna-background-color); --button-foreground-color-inverted: var(--luna-background-color); } .visualstyle-simple .search .cpe-dropdown__content .cpe-list .pageheader-search .cpe-input { --tabs-color:var(--luna-tabs-background-color); --tabs-opacity:var(--luna-active-tabs-opacity); --input-box-color-contrast:var(--luna-background-color); --input-box-text:var(--luna-foreground-color); --input-box-border:currentColor; --input-box-focus:var(--luna-foreground-color); --input-box-solid:var(--luna-foreground-color-hover); } } .visualstyle-simple body .evelution-sidebar #pt-notifications-alert .mw-echo-notifications-badge:after, .visualstyle-simple body .evelution-sidebar #pt-notifications-notice .mw-echo-notifications-badge:after { color:var(--alert-background-color)!important; border-radius:100px; border-color:var(--alert-alternative-foreground-color)!important; background-color:var(--alert-alternative-foreground-color)!important; } /** High Contrast **/ .visualstyle-simple.visualmode-contrast .evelution-content .evelution-article-wrapper .evelution-article-actions > li:hover > .link, .visualstyle-simple.visualmode-contrast .evelution-content .evelution-article-wrapper .evelution-article-actions > li:active > .link, .visualstyle-simple.visualmode-contrast .evelution-content .evelution-article-wrapper .evelution-article-actions .cactions >li:hover > a, .visualstyle-simple.visualmode-contrast .evelution-content .evelution-article-wrapper .evelution-article-actions .cactions >li:active > a, .visualstyle-simple.visualmode-contrast .evelution-content .evelution-article-wrapper .evelution-article-actions .cactions >li > a:focus, .visualstyle-simple.visualmode-contrast .evelution-content .evelution-article-wrapper .evelution-article-actions .cactions >li.selected > a { color:var(--luna-background-color); background-color:var(--luna-text-background-color); } .visualstyle-simple.visualmode-contrast .evelution-sidebar { --global-nav-link-color-hover:var(--global-nav-color)!important; --global-nav-link-background-hover:var(--global-nav-text-color)!important; --global-nav-link-color-active:var(--global-nav-color)!important; --global-nav-link-background-active:var(--global-nav-text-color)!important; --global-nav-link-color-focus:var(--global-text-color)!important; --global-nav-link-background-focus:var(--global-nav-color)!important; --global-nav-opacity:2!important; } .visualstyle-simple.visualmode-contrast .evelution-taskbar { box-shadow:inset 0 1px var(--inactive-text-background-color)!important; } .visualstyle-simple.visualmode-contrast .evelution-header { box-shadow:inset 0 -1px var(--inactive-text-background-color)!important; } .visualstyle-simple.visualmode-contrast .evelution-header .link.active, .visualstyle-simple.visualmode-contrast .evelution-header .link:hover, .visualstyle-simple.visualmode-contrast .evelution-header .link:active, .visualstyle-simple.visualmode-contrast .evelution-header .link:focus, .visualstyle-simple.visualmode-contrast .evelution-header .cpe-dropdown.opens-on-hover:hover > .link, .visualstyle-simple.visualmode-contrast .evelution-header .cpe-dropdown:focus > .link, .visualstyle-simple.visualmode-contrast .evelution-header .cpe-dropdown:focus-within > .link, .visualstyle-simple.visualmode-contrast .evelution-content .evelution-page-header .evelution-middle-actions a:hover, .visualstyle-simple.visualmode-contrast .evelution-content .evelution-page-header .evelution-middle-actions a:active, .visualstyle-simple.visualmode-contrast .evelution-content .evelution-page-header .evelution-middle-actions a:focus, .visualstyle-simple.visualmode-contrast .evelution-content .evelution-page-header .evelution-middle-actions .selected a { background-color:var(--luna-foreground-color); color:var(--luna-background-color); box-shadow:none; animation:none; border-color:rgb(from var(--luna-background-color) r g b / 0.5); } .visualstyle-simple.visualmode-contrast .evelution-header .link:focus-visible, .visualstyle-simple.visualmode-contrast .evelution-header .cpe-dropdown:focus-visible > .link, .visualstyle-simple.visualmode-contrast .evelution-content .evelution-page-header .evelution-middle-actions a:focus-visible { background-color:var(--luna-background-color); border-color:var(--luna-foreground-color); color:var(--luna-foreground-color); } .visualstyle-simple.visualmode-contrast .evelution-top-actions .link.active, .visualstyle-simple.visualmode-contrast .evelution-top-actions .link:hover, .visualstyle-simple.visualmode-contrast .evelution-top-actions .link:active, .visualstyle-simple.visualmode-contrast .evelution-top-actions .link:focus, .visualstyle-simple.visualmode-contrast .evelution-top-actions .cpe-dropdown.opens-on-hover:hover > .link, .visualstyle-simple.visualmode-contrast .evelution-top-actions .cpe-dropdown:focus > .link, .visualstyle-simple.visualmode-contrast .evelution-top-actions .cpe-dropdown:focus-within > .link { --desktop-filter:none; background-color:var(--desktop-foreground-color); color:var(--desktop-background-color); box-shadow:none; animation:none; border-color:rgb(from var(--desktop-background-color) r g b / 0.5); } .visualstyle-simple.visualmode-contrast .evelution-top-actions .link:focus-visible, .visualstyle-simple.visualmode-contrast .evelution-top-actions .cpe-dropdown:focus-visible > .link { color:var(--desktop-foreground-color); border-color:var(--desktop-foreground-color); background-color:var(--desktop-background-color); } .visualstyle-simple.visualmode-contrast .evelution-sidebar .link:hover, .visualstyle-simple.visualmode-contrast .evelution-sidebar .link:active, .visualstyle-simple.visualmode-contrast .evelution-sidebar .link:focus, .visualstyle-simple.visualmode-contrast .evelution-sidebar .link.active, .visualstyle-simple.visualmode-contrast .evelution-sidebar .cpe-dropdown.opens-on-hover:hover > .link, .visualstyle-simple.visualmode-contrast .evelution-sidebar .cpe-dropdown:focus > .link, .visualstyle-simple.visualmode-contrast .evelution-sidebar .cpe-dropdown:focus-within > .link { background-color:var(--global-nav-link-background-active); border-color:rgb(from var(--global-nav-color) r g b / 0.5); } .visualstyle-simple.visualmode-contrast .evelution-sidebar .link:focus-visible, .visualstyle-simple.visualmode-contrast .evelution-sidebar .cpe-dropdown:focus-visible > .link { background-color:var(--global-nav-link-background-focus); border-color:var(--luna-foreground-color); } .visualstyle-simple.visualmode-contrast .preview-window-window h2 button { --button-background-hover:var(--luna-foreground-color); --button-background-active:var(--luna-foreground-color); --button-background-color:var(--luna-background-color); } .visualstyle-simple.visualmode-contrast .preview-window-window h2 button:hover { color:var(--button-background-color); background:var(--button-background-hover); border-color:rgb(from var(--luna-background-color) r g b / 0.5); } .visualstyle-simple.visualmode-contrast .preview-window-window h2 button.close { --button-background-hover:var(--luna-foreground-color); --button-background-active:var(--luna-foreground-color); --button-background-color:var(--luna-background-color); } .visualstyle-simple.visualmode-contrast .preview-window-window .menu > li > a:hover, .visualstyle-simple.visualmode-contrast .preview-window-window .menu > li > a:active, .visualstyle-simple.visualmode-contrast .preview-window-window .menu > li > a:focus, .visualstyle-simple.visualmode-contrast .preview-window-window .menu > li.selected > a, .visualstyle-simple.visualmode-contrast .preview-window-window .menu > .cpe-dropdown.opens-on-hover:hover > a, .visualstyle-simple.visualmode-contrast .preview-window-window .menu > .cpe-dropdown:focus > a, .visualstyle-simple.visualmode-contrast .preview-window-window .menu > .cpe-dropdown:focus-within > a { color:var(--canvas-background-color)!important; background-color:var(--canvas-foreground-color); border-color:rgb(from var(--canvas-background-color) r g b / 0.5); } .visualstyle-simple.visualmode-contrast .evelution-content .evelution-page-header .toggle-rail-button:hover, .visualstyle-simple.visualmode-contrast .evelution-content .evelution-page-header .toggle-rail-button:active, .visualstyle-simple.visualmode-contrast .evelution-module .rail-buttons .rail-button:hover, .visualstyle-simple.visualmode-contrast .evelution-module .rail-buttons .rail-button:active { color:var(--luna-background-color); border-color:rgb(from var(--luna-foreground-color) r g b / 0.2); background-color:var(--luna-foreground-color); } .visualstyle-simple.visualmode-contrast .evelution-header .local-navigation .cpe-dropdown__content .local-navigation__button > .edit-button .cpe-button, .visualstyle-simple.visualmode-contrast .search .cpe-dropdown__content .cpe-list .pageheader-search .cpe-button { --button-background-color-hover: var(--button-foreground-color); --button-foreground-color-hover: var(--button-background-color); --button-foreground-color-inverted: var(--button-background-color); --secondary-button-background-color-hover:var(--button-foreground-color); --secondary-button-foreground-color-hover: var(--button-background-color); } /* Search Button */ .visualstyle-simple.visualmode-contrast .evelution-taskbar .search .cpe-button.search-button { --button-background-color-hover: var(--button-foreground-color); --button-foreground-color-hover: var(--button-background-color); --button-foreground-color-inverted: var(--button-background-color); --secondary-button-background-color-hover:var(--button-foreground-color); --secondary-button-foreground-color-hover: var(--button-background-color); } /*** General Visual Style ***/ /** Standard **/ .visualstyle-general .evelution-content .evelution-page-header .toggle-rail-button:hover, .visualstyle-general .evelution-module .rail-buttons .rail-button:hover { background-color:var(--hyperlink-background-color); border-color:var(--hyperlink-background-color); color:var(--hyperlink-foreground-color); } .visualstyle-general .evelution-content .evelution-page-header .toggle-rail-button:active, .visualstyle-general .evelution-module .rail-buttons .rail-button:active { background-color:var(--hyperlink-background-color-hover); border-color:var(--hyperlink-background-color-hover); color:var(--hyperlink-foreground-color-inverted); } .visualstyle-general .evelution-sidebar { --global-nav-link-color-hover:var(--hyperlink-foreground-color); --global-nav-link-background-hover:var(--hyperlink-background-color); --global-nav-link-border-hover:var(--hyperlink-background-color); --global-nav-link-color-active:var(--hyperlink-foreground-color-inverted); --global-nav-link-background-active:var(--hyperlink-background-color-hover); --global-nav-link-border-active:var(--hyperlink-background-color-hover); /* Keybord-Focused Links */ --global-nav-link-color-focus:var(--canvas-text-foreground-color); --global-nav-link-background-focus:var(--canvas-text-background-color); --global-nav-link-border-focus:var(--hyperlink-background-color); --global-nav-link-opacity:1; --global-nav-link-border-opacity:1; } .visualstyle-general .evelution-header .link:hover, .visualstyle-general .evelution-content .evelution-page-header .evelution-middle-actions a:hover, .visualstyle-general .evelution-top-actions .link:hover { --desktop-filter:none; -webkit-animation:none; animation:none; color:var(--hyperlink-foreground-color); border-color:var(--hyperlink-background-color); background-color:var(--hyperlink-background-color); } .visualstyle-general .evelution-header .link:active, .visualstyle-general .evelution-header .link:focus, .visualstyle-general .evelution-header .cpe-dropdown.opens-on-hover:hover > .link, .visualstyle-general .evelution-header .cpe-dropdown:focus > .link, .visualstyle-general .evelution-header .cpe-dropdown:focus-within > .link, .visualstyle-general .evelution-header .link.active, .visualstyle-general .evelution-content .evelution-page-header .evelution-middle-actions a:active, .visualstyle-general .evelution-content .evelution-page-header .evelution-middle-actions a:focus, .visualstyle-general .evelution-content .evelution-page-header .evelution-middle-actions .selected a, .visualstyle-general .evelution-top-actions .link:active, .visualstyle-general .evelution-top-actions .link:focus, .visualstyle-general .evelution-top-actions .cpe-dropdown.opens-on-hover:hover > .link, .visualstyle-general .evelution-top-actions .cpe-dropdown:focus > .link, .visualstyle-general .evelution-top-actions .cpe-dropdown:focus-within > .link, .visualstyle-general .evelution-top-actions .link.active { --desktop-filter:none; -webkit-animation:none; animation:none; color:var(--hyperlink-foreground-color-inverted); border-color:var(--hyperlink-background-color-hover); background-color:var(--hyperlink-background-color-hover); } .visualstyle-general .evelution-header .link:focus-visible, .visualstyle-general .evelution-header .cpe-dropdown:focus-visible > .link, .visualstyle-general .evelution-content .evelution-page-header .evelution-middle-actions a:focus-visible, .visualstyle-general .evelution-top-actions .link:focus-visible, .visualstyle-general .evelution-top-actions .cpe-dropdown:focus-visible > .link { color:var(--canvas-text-foreground-color); border-color:var(--hyperlink-background-color); background-color:var(--canvas-text-background-color); } /* Search Button */ .visualstyle-general.has-accents .evelution-taskbar .search .cpe-button.search-button { --button-background-color: var(--luna-hyperlink-background-color); --button-background-color-hover: var(--luna-hyperlink-background-color-hover); --button-foreground-color: var(--luna-background-color); --button-foreground-color-inverted: var(--luna-background-color); } /* Search Box */ @media only screen and (min-width:1020px) { /*@FIXME: Should use lower size*/ .visualstyle-general.has-accents .evelution-header .search .cpe-dropdown__content .cpe-list>li .cpe-button { --button-background-color: var(--luna-hyperlink-background-color); --button-background-color-hover: var(--luna-hyperlink-background-color-hover); --button-foreground-color: var(--luna-background-color); --button-foreground-color-inverted: var(--luna-background-color); } .visualstyle-general .search .cpe-dropdown__content .cpe-list .pageheader-search .cpe-input { --tabs-color:var(--luna-tabs-background-color); --tabs-opacity:var(--luna-active-tabs-opacity); --input-box-color-contrast:var(--luna-background-color); --input-box-text:var(--luna-text-background-color); --input-box-border:currentColor; } .visualstyle-general.has-accents .search .cpe-dropdown__content .cpe-list .pageheader-search .cpe-input { --input-box-focus:var(--luna-hyperlink-background-color); --input-box-solid:var(--luna-hyperlink-background-color); } } .visualstyle-general .preview-window-window h2 button:hover { background-color:var(--hyperlink-background-color); color:var(--hyperlink-foreground-color); border-color:var(--hyperlink-background-color); } .visualstyle-general .preview-window-window h2 button:active { background-color:var(--hyperlink-background-color-hover); color:var(--hyperlink-foreground-color-inverted); border-color:var(--hyperlink-background-color-hover); } .visualstyle-general .preview-window-window h2 button.close:hover { background-color:var(--alert-background-color); border-color:var(--alert-background-color); color:var(--alert-foreground-color); } .visualstyle-general .preview-window-window h2 button.close:active { background-color:var(--alert-background-color-hover); border-color:var(--alert-background-color-hover); color:var(--alert-foreground-color-inverted); } .visualstyle-general .preview-window-window .menu > li > a:hover { background-color:var(--dropdown-hyperlink-background-color); color:var(--dropdown-hyperlink-text-color); border-color:var(--dropdown-hyperlink-border-color); } .visualstyle-general .preview-window-window .menu > li > a:active, .visualstyle-general .preview-window-window .menu > li > a:focus, .visualstyle-general .preview-window-window .menu > li.selected > a, .visualstyle-general .preview-window-window .menu > .cpe-dropdown.opens-on-hover:hover > a, .visualstyle-general .preview-window-window .menu > .cpe-dropdown:focus > a, .visualstyle-general .preview-window-window .menu > .cpe-dropdown:focus-within > a { background-color:var(--dropdown-active-hyperlink-background-color); color:var(--dropdown-active-hyperlink-text-color); border-color:var(--dropdown-active-hyperlink-border-color); } /** High Contrast **/ .visualstyle-general.visualmode-contrast .evelution-sidebar { --global-nav-link-background-hover:var(--hyperlink-background-color); --global-nav-link-opacity:1; --global-nav-link-border-opacity:1; } .visualstyle-general.visualmode-contrast .evelution-content .evelution-article-wrapper .evelution-article-actions > li:hover > .link, .visualstyle-general.visualmode-contrast .evelution-content .evelution-article-wrapper .evelution-article-actions > li:active > .link, .visualstyle-general.visualmode-contrast .evelution-content .evelution-article-wrapper .evelution-article-actions .cactions >li:hover > a, .visualstyle-general.visualmode-contrast .evelution-content .evelution-article-wrapper .evelution-article-actions .cactions >li:active > a, .visualstyle-general.visualmode-contrast .evelution-content .evelution-article-wrapper .evelution-article-actions .cactions >li > a:focus, .visualstyle-general.visualmode-contrast .evelution-content .evelution-article-wrapper .evelution-article-actions .cactions >li.selected > a { color:var(--canvas-background-color); background-color:var(--hyperlink-background-color); } .visualstyle-general.visualmode-contrast .preview-window-window h2 button.close:hover { background-color:var(--hyperlink-background-color); color:var(--hyperlink-foreground-color); border-color:var(--hyperlink-background-color); } .visualstyle-general.visualmode-contrast .preview-window-window h2 button.close:active { background-color:var(--hyperlink-background-color); color:var(--hyperlink-foreground-color); border-color:var(--hyperlink-background-color); }