Evelution 98

This anniversary update brings up updating theming on more OOUI Parts across visual styles and modes Merges some Icons CSS rules with others Reverts the Search UI back to its original version but with a new icon when dropdown is opened
AWikia · Jul 13, 2022 · 040681f · 040681f
1 parent ebf7e1a
commit 040681f
Show file tree

Hide file tree

Showing 7 changed files with 99 additions and 59 deletions.
diff --git a/resources/CPE.css b/resources/CPE.css
@@ -807,8 +807,9 @@ body {
 		--icon-filter-hover:opacity(1)!important;
 		--icon-filter-duration:0ms!important;
 		--icon-filter-delay:0ms!important;
-		--system-visual-style:contrast;
 		--system-acryllic-opacity:0.6!important;
+		--system-generic-color-hue-shift:0!important;
+		--system-generic-color-saturation:100%!important;
 	}
 
 	.fc-selecteditem {
@@ -859,11 +860,12 @@ body {
 		--custom-secondary-font:""!important;
 		--border-radius:5px!important;
 		--icon-filter:opacity(1)!important;
-		--icon-filter-hover:opacity(1)!important;
+		--icon-filter-hover:opacity(0.8)!important;
 		--icon-filter-duration:0ms!important;
 		--icon-filter-delay:0ms!important;
-		--system-visual-style:contrast;
 		--system-acryllic-opacity:0.6!important;
+		--system-generic-color-hue-shift:0!important;
+		--system-generic-color-saturation:100%!important;
 	}
 
 

diff --git a/resources/Evelution.css b/resources/Evelution.css
@@ -413,24 +413,28 @@ container > .main {
 
 .evelution-taskbar .upper-links {
 	justify-content:center;
-	padding-left:calc(var(--explore-link-size) * 2);
+	padding-left:calc(var(--explore-link-size) * 1);
 }
 
 .evelution-taskbar .upper-links .is-widget-style { /* This will cause issues when more are added. Be sure to add additional code when adding a new widget-style entry point which makes it align to the left */
 	position:absolute;
 	left:0;
 }
 
+/*
 .evelution-taskbar .upper-links .explore-menu {
 	left:var(--explore-link-size);
 }
+*/
 
-
-.evelution-taskbar .upper-links .explore-menu .link[cpe-tooltip-position="top"][cpe-tooltip]:after,
-.evelution-taskbar .upper-links .search .link[cpe-tooltip-position="top"][cpe-tooltip]:after {
+.evelution-taskbar .upper-links .explore-menu .link[cpe-tooltip-position="top"][cpe-tooltip]:after {
 	left:25%;
 }
 
+.evelution-taskbar .upper-links .search .cpe-dropdown__content {
+	left:calc(0px - var(--toolbar-link-size));
+}
+
 .evelution-taskbar .upper-links .is-widget-style .link {
 	width:var(--explore-link-size);
 	justify-content:flex-start;
@@ -474,9 +478,11 @@ container > .main {
 	left:0;
 }
 
+/*
 .evelution-taskbar .upper-links .explore-menu .cpe-dropdown__content.is-left-aligned {
 	left:calc(0px - var(--toolbar-link-size));
 }
+*/
 
 
 /* Left Aligned Taskbar */
@@ -554,11 +560,6 @@ container > .main {
 		left:calc(0px - var(--toolbar-link-size) - var(--toolbar-link-size));
 	}
 
-	.evelution-taskbar.left-links .upper-links .search .cpe-dropdown__content.is-left-aligned,
-	.evelution-taskbar.v-taskbar .upper-links .search .cpe-dropdown__content.is-left-aligned {
-		left:calc(0px - var(--toolbar-link-size));
-	}
-
 
 
 
@@ -661,6 +662,7 @@ container > .main {
 		--explore-link-size:var(--toolbar-link-size);
 	}
 
+	/* Most code taken from left-aligned taskbar behavior */
 	.evelution-taskbar .upper-links .is-widget-style .link {
 		padding-left:0;
 		padding-right:0;

diff --git a/resources/OOUI.css b/resources/OOUI.css
@@ -64,12 +64,22 @@ body .oo-ui-fieldsetLayout.oo-ui-iconElement > .oo-ui-fieldsetLayout-header .oo-
 }
 
 body .oo-ui-decoratedOptionWidget.oo-ui-widget-enabled .oo-ui-iconElement-icon, 
-body .oo-ui-decoratedOptionWidget.oo-ui-widget-enabled .oo-ui-indicatorElement-indicator {
+body .oo-ui-decoratedOptionWidget.oo-ui-widget-enabled .oo-ui-indicatorElement-indicator,
+body .oo-ui-tool .oo-ui-iconElement-icon,
+body .oo-ui-tool .oo-ui-indicatorElement-indicator,
+body .oo-ui-popupToolGroup-handle .oo-ui-iconElement-icon,
+body .oo-ui-popupToolGroup-handle .oo-ui-indicatorElement-indicator/*,
+body .oo-ui-buttonElement-framed.oo-ui-iconElement > .oo-ui-buttonElement-button > .oo-ui-iconElement-icon*/ {
     top: 5px;
 }
 
 body .oo-ui-decoratedOptionWidget.oo-ui-widget-enabled .oo-ui-buttonElement .oo-ui-iconElement-icon, 
-body .oo-ui-decoratedOptionWidget.oo-ui-widget-enabled .oo-ui-buttonElement .oo-ui-indicatorElement-indicator {
+body .oo-ui-decoratedOptionWidget.oo-ui-widget-enabled .oo-ui-buttonElement .oo-ui-indicatorElement-indicator,
+body .ve-init-mw-editSwitch .oo-ui-popupToolGroup.oo-ui-iconElement .oo-ui-popupToolGroup-handle .oo-ui-iconElement-icon,
+body .ve-init-mw-editSwitch .oo-ui-popupToolGroup.oo-ui-iconElement .oo-ui-popupToolGroup-handle .oo-ui-indicatorElement-indicator,
+body .oo-ui-buttonElement-framed.oo-ui-iconElement.oo-ui-labelElement > .oo-ui-buttonElement-button > .oo-ui-iconElement-icon, 
+body .oo-ui-buttonElement-framed.oo-ui-iconElement.oo-ui-indicatorElement > .oo-ui-buttonElement-button > .oo-ui-iconElement-icon,
+body .oo-ui-buttonElement-framed.oo-ui-iconElement > .oo-ui-buttonElement-button > .oo-ui-iconElement-icon {
     top: 0;
 }
 
@@ -100,35 +110,15 @@ body .oo-ui-iconWidget:before {
 	visibility:hidden;
 }
 
-body .oo-ui-tool .oo-ui-iconElement-icon,
-body .oo-ui-tool .oo-ui-indicatorElement-indicator,
-body .oo-ui-popupToolGroup-handle .oo-ui-iconElement-icon,
-body .oo-ui-popupToolGroup-handle .oo-ui-indicatorElement-indicator/*,
-body .oo-ui-buttonElement-framed.oo-ui-iconElement > .oo-ui-buttonElement-button > .oo-ui-iconElement-icon*/ {
-	top:5px;
-}
-
-body .ve-init-mw-editSwitch .oo-ui-popupToolGroup.oo-ui-iconElement .oo-ui-popupToolGroup-handle .oo-ui-iconElement-icon,
-body .ve-init-mw-editSwitch .oo-ui-popupToolGroup.oo-ui-iconElement .oo-ui-popupToolGroup-handle .oo-ui-indicatorElement-indicator {
-	top:0;
-}
-
 body .oo-ui-buttonElement-framed.oo-ui-iconElement > .oo-ui-buttonElement-button > .oo-ui-iconElement-icon {
     left: calc(50% - 3px);
-    top:0;
-}
-
-body .oo-ui-buttonElement-framed.oo-ui-iconElement.oo-ui-labelElement > .oo-ui-buttonElement-button > .oo-ui-iconElement-icon, 
-body .oo-ui-buttonElement-framed.oo-ui-iconElement.oo-ui-indicatorElement > .oo-ui-buttonElement-button > .oo-ui-iconElement-icon {
-	top:0;
 }
 
 body .oo-ui-textInputWidget.oo-ui-widget-enabled > .oo-ui-iconElement-icon,
 body .oo-ui-textInputWidget.oo-ui-widget-enabled > .oo-ui-indicatorElement-indicator {
 	top:2.5px;
 }
 
-
 body .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover > .oo-ui-iconElement-icon:not(.oo-ui-image-invert), 
 body .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover > .oo-ui-indicatorElement-indicator:not(.oo-ui-image-invert),
 body .oo-ui-buttonElement.oo-ui-widget-enabled > .oo-ui-buttonElement-button > .oo-ui-iconElement-icon:not(.oo-ui-image-invert), 

diff --git a/resources/Visual_Styles.css b/resources/Visual_Styles.css
@@ -188,7 +188,9 @@ filter:none!important;
 .visualmode-contrast .oo-ui-menuOptionWidget.oo-ui-optionWidget-selected,
 .visualmode-contrast .oo-ui-menuOptionWidget.oo-ui-optionWidget-selected.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted, 
 .visualmode-contrast .oo-ui-menuOptionWidget.oo-ui-optionWidget-pressed.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted,
-.visualmode-contrast .wikiEditor-ui-toolbar .booklet > .index > .current {
+.visualmode-contrast .wikiEditor-ui-toolbar .booklet > .index > .current,
+.visualmode-contrast .oo-ui-outlineOptionWidget.oo-ui-optionWidget-pressed, 
+.visualmode-contrast .oo-ui-outlineOptionWidget.oo-ui-optionWidget-selected {
   background-color:var(--highlight-background-color);
   color:var(--highlight-text-background-color);
 }
@@ -1677,6 +1679,36 @@ color:inherit;
 --dropdown-hyperlink-text-color:rgb(var(--dropdown-background-color));
 }
 
+.visualstyle-simple .oo-ui-menuOptionWidget.oo-ui-optionWidget-selected,
+.visualstyle-simple .oo-ui-menuOptionWidget.oo-ui-optionWidget-selected.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted, 
+.visualstyle-simple .oo-ui-menuOptionWidget.oo-ui-optionWidget-pressed.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted,
+.visualstyle-simple .wikiEditor-ui-toolbar .booklet > .index > .current {
+  background-color:var(--canvas-secondary-background-color-hover);
+  color:var(--canvas-secondary-foreground-color);
+}
+
+
+.visualstyle-simple .oo-ui-outlineOptionWidget.oo-ui-optionWidget-pressed, 
+.visualstyle-simple .oo-ui-outlineOptionWidget.oo-ui-optionWidget-selected {
+  background-color:var(--canvas-background-color-hover);
+  color:var(--canvas-foreground-color);
+}
+
+.visualstyle-simple.visualmode-contrast .oo-ui-menuOptionWidget.oo-ui-optionWidget-selected,
+.visualstyle-simple.visualmode-contrast .oo-ui-menuOptionWidget.oo-ui-optionWidget-selected.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted, 
+.visualstyle-simple.visualmode-contrast .oo-ui-menuOptionWidget.oo-ui-optionWidget-pressed.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted,
+.visualstyle-simple.visualmode-contrast .wikiEditor-ui-toolbar .booklet > .index > .current {
+  background-color:var(--canvas-secondary-foreground-color);
+  color:var(--canvas-secondary-background-color);
+}
+
+.visualstyle-simple.visualmode-contrast .oo-ui-outlineOptionWidget.oo-ui-optionWidget-pressed, 
+.visualstyle-simple.visualmode-contrast .oo-ui-outlineOptionWidget.oo-ui-optionWidget-selected {
+  background-color:var(--canvas-foreground-color);
+  color:var(--canvas-background-color);
+}
+
+
 
 .visualstyle-simple body .mw-rcfilters-ui-filterMenuOptionWidget.oo-ui-flaggedElement-muted:not(.oo-ui-optionWidget-selected) {
 	border-color:var(--hyperlink-background-color-hover);
@@ -2404,16 +2436,6 @@ color:inherit;
 	--canvas-secondary-foreground-color-inverted:var(--canvas-foreground-color-inverted)!important;
 	--canvas-secondary-foreground-color-rgb:var(--canvas-foreground-color-rgb)!important;
 	--canvas-secondary-foreground-color-hover-rgb:var(--canvas-foreground-color-hover-rgb)!important;
-	--canvas-text-secondary-alternative-foreground-color:var(--canvas-text-alternative-foreground-color)!important;
-	--canvas-text-secondary-alternative-foreground-color-rgb:var(--canvas-text-alternative-foreground-color-rgb)!important;
-	--canvas-text-secondary-background-color:var(--canvas-text-background-color)!important;
-	--canvas-text-secondary-background-color-hover:var(--canvas-text-background-color-hover)!important;
-	--canvas-text-secondary-background-color-rgb:var(--canvas-text-background-color-rgb)!important;
-	--canvas-text-secondary-foreground-color:var(--canvas-text-foreground-color)!important;
-	--canvas-text-secondary-foreground-color-hover:var(--canvas-text-foreground-color-hover)!important;
-	--canvas-text-secondary-foreground-color-inverted:var(--canvas-text-foreground-color-inverted)!important;
-	--canvas-text-secondary-foreground-color-rgb:var(--canvas-text-foreground-color-rgb)!important;
-	--canvas-text-secondary-foreground-color-hover-rgb:var(--canvas-text-foreground-color-hover-rgb)!important;
 	--mica-background-color:var(--canvas-background-color)!important;
 	--tabbed-background-color:var(--canvas-background-color)!important;
 }
@@ -2904,6 +2926,11 @@ border-color:var(--highlight-background-color);
 }
 
 
+.visualstyle-classic .evelution-content:not(.evelution-discussions-content) .evelution-article-container .evelution-article-content {
+	color:var(--canvas-text-background-color)!important;
+}
+
+
 .visualstyle-classic .evelution-content .evelution-article-wrapper .evelution-article-actions .separator,
 .visualstyle-classic .evelution-content .evelution-article-wrapper .evelution-article-actions .cactions > li > a,
 .visualstyle-classic .evelution-content .evelution-article-wrapper .evelution-article-actions > li > .link,
@@ -2925,6 +2952,17 @@ border-color:var(--highlight-background-color);
 
 
 
+.visualstyle-classic .oo-ui-menuOptionWidget.oo-ui-optionWidget-selected,
+.visualstyle-classic .oo-ui-menuOptionWidget.oo-ui-optionWidget-selected.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted, 
+.visualstyle-classic .oo-ui-menuOptionWidget.oo-ui-optionWidget-pressed.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted,
+.visualstyle-classic .wikiEditor-ui-toolbar .booklet > .index > .current,
+.visualstyle-classic .oo-ui-outlineOptionWidget.oo-ui-optionWidget-pressed, 
+.visualstyle-classic .oo-ui-outlineOptionWidget.oo-ui-optionWidget-selected {
+  background-color:var(--highlight-background-color);
+  color:var(--highlight-text-background-color);
+}
+
+
 .visualstyle-classic .evelution-content:not(.evelution-discussions-content) .evelution-article-container {
 	border-top-width:2px!important;
 }
@@ -3214,6 +3252,16 @@ background-color:var(--hyperlink-background-color);
 	border-color:var(--hyperlink-background-color);
 }
 
+.visualstyle-general .oo-ui-menuOptionWidget.oo-ui-optionWidget-selected,
+.visualstyle-general .oo-ui-menuOptionWidget.oo-ui-optionWidget-selected.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted, 
+.visualstyle-general .oo-ui-menuOptionWidget.oo-ui-optionWidget-pressed.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted,
+.visualstyle-general .wikiEditor-ui-toolbar .booklet > .index > .current,
+.visualstyle-general .oo-ui-outlineOptionWidget.oo-ui-optionWidget-pressed, 
+.visualstyle-general .oo-ui-outlineOptionWidget.oo-ui-optionWidget-selected {
+  background-color:var(--hyperlink-background-color);
+  color:var(--hyperlink-foreground-color);
+}
+
 
 
 /* Selection Styles per B19 */

diff --git a/skin.json b/skin.json
@@ -1,6 +1,6 @@
 {
   "name": "Evelution",
-  "version": "97.0.0",
+  "version": "98.0.0",
   "namemsg": "skinname-evelution",
   "descriptionmsg": "evelution-skin-desc",
   "url": "https://www.mediawiki.org/wiki/Skin:Evelution",

diff --git a/templates/OldServelutionEmulation.mustache b/templates/OldServelutionEmulation.mustache
@@ -32,10 +32,11 @@
 			--custom-secondary-font:""!important;
 			--border-radius:5px!important;
 			--icon-filter:opacity(1)!important;
-			--icon-filter-hover:opacity(1)!important;
+			--icon-filter-hover:opacity(0.8)!important;
 			--icon-filter-duration:0ms!important;
 			--icon-filter-delay:0ms!important;
-			--system-visual-style:standard;
 			--system-acryllic-opacity:0.6!important;
+			--system-generic-color-hue-shift:0!important;
+			--system-generic-color-saturation:100%!important;
 		}
 	{{/has-no-color-management}}
diff --git a/templates/Taskbar.mustache b/templates/Taskbar.mustache
@@ -13,19 +13,16 @@
 			</svg>
 		</a>
 		<!-- Search -->
-		<div class="cpe-dropdown is-flipped has-dark-shadow search is-widget-style">
-			<div class="link cpe-dropdown__toggle" cpe-tooltip-position="top" cpe-tooltip={{msg-search}}>
-				<div class="v-on">
-					<span class="cpe-icon material-icons">
+		<div class="cpe-dropdown is-flipped has-dark-shadow search">
+			<div class="link cpe-dropdown__toggle" cpe-tooltip-position="top" cpe-tooltip="{{msg-search}}">
+				<span class="cpe-icon material-icons">
+					<span class="focused-dropdown-off">
 						search
 					</span>
-				</div>
-				<div class="dyna-on">
-					<span class="cpe-icon material-icons">
-						search
+					<span class="focused-dropdown-on">
+						saved_search
 					</span>
-					<span class="widget-text"><span class="bottom-text">{{msg-search}}</span></span>
-				</div>
+				</span>
 			</div>
 		    <div class="cpe-dropdown__content is-left-aligned">
 				<ul class="cpe-list">
@@ -95,7 +92,7 @@
 						</a>
 					</li>
 					{{#has-smw}}
-					<li class="ivilution">
+					<li class="smw">
 						<a href="https://www.semantic-mediawiki.org" title="Semantic MediaWiki">
 							<svg xmlns="http://www.w3.org/2000/svg" style="transform:scale(1.1)" class="cpe-icon">
 								<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#smw-logo" />