mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/MinervaNeue
synced 2024-11-15 18:29:50 +00:00
Merge "Update Minerva skin to use Codex icons"
This commit is contained in:
jenkins-bot
Gerrit Code Review
commit
e3de4dc0c7
|
|
@ -13,11 +13,11 @@
|
|||
},
|
||||
{
|
||||
"resourceModule": "skins.minerva.icons.wikimedia",
|
||||
"maxSize": "0.8KB"
|
||||
"maxSize": "0.95KB"
|
||||
},
|
||||
{
|
||||
"resourceModule": "skins.minerva.mainMenu.icons",
|
||||
"maxSize": "0.3KB"
|
||||
"maxSize": "0.8KB"
|
||||
},
|
||||
{
|
||||
"resourceModule": "skins.minerva.mainMenu.styles",
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@ class LanguageSelectorEntry implements IMenuEntry {
|
|||
$this->title = $title;
|
||||
$this->doesPageHaveLanguages = $doesPageHaveLanguages;
|
||||
$this->messageLocalizer = $messageLocalizer;
|
||||
$this->icon = $doesPageHaveLanguages ? 'language-base20' : 'language-disabled';
|
||||
$this->icon = 'language-base20';
|
||||
$this->label = $label;
|
||||
$this->classes = $classes;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
<form action="{{form-action}}" method="get" class="minerva-search-form">
|
||||
<div class="search-box">
|
||||
<input type="hidden" name="title" value="{{page-title}}"/>
|
||||
<input class="search minerva-icon--search skin-minerva-search-trigger" id="searchInput"
|
||||
<input class="search skin-minerva-search-trigger" id="searchInput"
|
||||
{{{html-input-attributes}}}>
|
||||
{{#data-btn.data-icon}}<span class="search-box-icon-overlay">{{>Icon}}</span>{{/data-btn.data-icon}}
|
||||
</div>
|
||||
{{!
|
||||
A button when clicked will submit the form
|
||||
|
|
|
|||
|
|
@ -85,13 +85,6 @@
|
|||
// Night mode
|
||||
@media screen {
|
||||
html.skin-theme-clientpref-night {
|
||||
// The following icons use background-image instead of mask-image.
|
||||
// These can be removed if a fix for T358246 is found.
|
||||
.minerva-icon.minerva-icon--search-base20,
|
||||
.minerva-icon.minerva-icon--search,
|
||||
.page-actions-menu__list .minerva-icon,
|
||||
.mw-editsection .minerva-icon,
|
||||
.toggle-list .minerva-icon,
|
||||
.branding-box img {
|
||||
.night-mode-invert-image();
|
||||
}
|
||||
|
|
@ -100,11 +93,6 @@
|
|||
|
||||
@media screen and ( prefers-color-scheme: dark ) {
|
||||
html.skin-theme-clientpref-os {
|
||||
.minerva-icon.minerva-icon--search-base20,
|
||||
.minerva-icon.minerva-icon--search,
|
||||
.page-actions-menu__list .minerva-icon,
|
||||
.mw-editsection .minerva-icon,
|
||||
.toggle-list .minerva-icon,
|
||||
.branding-box img {
|
||||
.night-mode-invert-image();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,29 +2,67 @@
|
|||
|
||||
// NOTE: @param-is-button-icon lets us change the icon color
|
||||
// with background-color by using mask-image.
|
||||
.minerva-icon--modified-history {
|
||||
// over specified so that it overrides the minerva-icon default.
|
||||
.minerva-icon.minerva-icon--modified-history {
|
||||
.cdx-mixin-css-icon( @cdx-icon-history, @param-is-button-icon: true );
|
||||
}
|
||||
|
||||
.minerva-icon--expand {
|
||||
.minerva-icon.minerva-icon--expand {
|
||||
.cdx-mixin-css-icon( @cdx-icon-next, @param-is-button-icon: true );
|
||||
}
|
||||
|
||||
.minerva-icon {
|
||||
.cdx-mixin-css-icon-background();
|
||||
.cdx-mixin-css-icon-size( @size-icon-medium );
|
||||
.cdx-mixin-css-icon-alignment();
|
||||
|
||||
// Temporary fix for https://phabricator.wikimedia.org/T356540
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: ~'calc( max( @{size-icon-medium}, @{min-size-icon-medium} ) )';
|
||||
.minerva-icon.minerva-icon--newspaper {
|
||||
.cdx-mixin-css-icon(@cdx-icon-newspaper, @param-is-button-icon: true);
|
||||
}
|
||||
|
||||
.minerva-icon-size-small {
|
||||
.minerva-icon.minerva-icon-size-small {
|
||||
.cdx-mixin-css-icon-background( @size-icon-small );
|
||||
.cdx-mixin-css-icon-size( @size-icon-small );
|
||||
|
||||
// Temporary fix for https://phabricator.wikimedia.org/T356540
|
||||
background-size: ~'calc( max( @{size-icon-small}, @{min-size-icon-small} ) )';
|
||||
}
|
||||
|
||||
// Start T374145
|
||||
@transparentPNG: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=);
|
||||
|
||||
.minerva-icon {
|
||||
// By default use a transparent PNG. This is important for icons loaded via JavaScript, as without this
|
||||
// the icon will appear as a black square until loaded.
|
||||
-webkit-mask-image: @transparentPNG;
|
||||
mask-image: @transparentPNG;
|
||||
.cdx-mixin-css-icon('none');
|
||||
background-color: @color-subtle;
|
||||
}
|
||||
|
||||
.minerva-icon--language-disabled {
|
||||
background-color: @color-disabled;
|
||||
}
|
||||
|
||||
// Dark mode adjustments
|
||||
@media screen {
|
||||
html.skin-theme-clientpref-night {
|
||||
// Disable inversion for icons in dark mode, except where explicitly defined
|
||||
.toggle-list .minerva-icon {
|
||||
filter: none;
|
||||
}
|
||||
|
||||
// Invert only branding images (e.g., logo) inside the branding-box in dark mode
|
||||
.branding-box img {
|
||||
filter: invert( 1 );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and ( prefers-color-scheme: dark ) {
|
||||
html.skin-theme-clientpref-os {
|
||||
// Disable inversion for OS-level dark mode as well
|
||||
.toggle-list .minerva-icon {
|
||||
filter: none;
|
||||
}
|
||||
|
||||
// Branding image inversion for OS-level dark mode
|
||||
.branding-box img {
|
||||
filter: invert( 1 );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// End T374145
|
||||
|
|
|
|||
|
|
@ -37,6 +37,10 @@
|
|||
display: flex;
|
||||
height: @size-icon * 2;
|
||||
justify-content: space-between;
|
||||
|
||||
.disabled .minerva-icon {
|
||||
background: @color-disabled;
|
||||
}
|
||||
}
|
||||
|
||||
.page-actions-menu__list-item {
|
||||
|
|
|
|||
|
|
@ -91,6 +91,10 @@ main {
|
|||
}
|
||||
}
|
||||
|
||||
.search-box {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// Search input
|
||||
// Used in minerva header and search overlay header
|
||||
.search-box .search {
|
||||
|
|
@ -100,9 +104,6 @@ main {
|
|||
@padding-vertical-search: 8px - @border-width-base;
|
||||
@padding-start-search-icon: @size-icon-search + ( 2 * @size-icon-search-gutter ) - @size-modifier-border;
|
||||
background-color: @background-color-base; // Support Fennec, Opera Mini: Remove default background, see T38490.
|
||||
background-position: left @size-icon-search-gutter center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: @size-icon-search;
|
||||
// Support Safari: Get rid of rounded corners.
|
||||
-webkit-appearance: none;
|
||||
width: 100%;
|
||||
|
|
@ -117,6 +118,8 @@ main {
|
|||
transition-property: border-color, box-shadow;
|
||||
transition-duration: @transition-duration-medium;
|
||||
font: inherit;
|
||||
// Disable search background for cached HTML.
|
||||
mask-image: none;
|
||||
|
||||
// [T139928] Hide all pseudo-elements added to search inputs in WebKit.
|
||||
&::-webkit-search-decoration,
|
||||
|
|
@ -127,6 +130,15 @@ main {
|
|||
}
|
||||
}
|
||||
|
||||
.search-box-icon-overlay {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
left: 8px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
// Provide focus styles only in non-JS and overlay to prevent double transition.
|
||||
.client-nojs .search-box .search:focus,
|
||||
.search-overlay .search-box .search:focus {
|
||||
|
|
|
|||
|
|
@ -7,11 +7,11 @@
|
|||
@import 'Toolbar.less';
|
||||
|
||||
.minerva-icon--download {
|
||||
.cdx-mixin-css-icon( @cdx-icon-download, #54595d );
|
||||
.cdx-mixin-css-icon( @cdx-icon-download, @color-subtle );
|
||||
}
|
||||
|
||||
.minerva-icon--listBullet {
|
||||
.cdx-mixin-css-icon( @cdx-icon-list-bullet, #54595d );
|
||||
.cdx-mixin-css-icon( @cdx-icon-list-bullet, @color-subtle );
|
||||
}
|
||||
|
||||
.mw-mf-page-center__mask {
|
||||
|
|
|
|||
28
skin.json
28
skin.json
|
|
@ -372,6 +372,7 @@
|
|||
"useDataURI": false,
|
||||
"defaultColor": "#54595d",
|
||||
"class": "MediaWiki\\ResourceLoader\\OOUIIconPackModule",
|
||||
"useMaskImage": true,
|
||||
"icons": [
|
||||
"block",
|
||||
"ellipsis",
|
||||
|
|
@ -395,29 +396,11 @@
|
|||
]
|
||||
},
|
||||
"skins.minerva.icons.wikimedia": {
|
||||
"selectorWithVariant": ".minerva-icon--{name}-{variant}",
|
||||
"selectorWithoutVariant": ".minerva-icon--{name}-base20, .minerva-icon--{name}",
|
||||
"selectorWithoutVariant": ".minerva-icon--{name}-base20, .minerva-icon--{name}-disabled, .minerva-icon--{name}",
|
||||
"useDataURI": false,
|
||||
"defaultColor": "#54595d",
|
||||
"variants": {
|
||||
"progressive": {
|
||||
"color": "#36c",
|
||||
"global": true
|
||||
},
|
||||
"invert": {
|
||||
"color": "#fff",
|
||||
"global": true
|
||||
},
|
||||
"warning": {
|
||||
"color": "#fc3",
|
||||
"global": true
|
||||
},
|
||||
"disabled": {
|
||||
"color": "#72777d",
|
||||
"global": true
|
||||
}
|
||||
},
|
||||
"class": "MediaWiki\\ResourceLoader\\OOUIIconPackModule",
|
||||
"useMaskImage": true,
|
||||
"icons": [
|
||||
"edit",
|
||||
"wikiText",
|
||||
|
|
@ -445,16 +428,17 @@
|
|||
},
|
||||
"skins.minerva.personalMenu.icons": {
|
||||
"class": "MediaWiki\\ResourceLoader\\OOUIIconPackModule",
|
||||
"useMaskImage": true,
|
||||
"selectorWithoutVariant": ".minerva-icon--{name}",
|
||||
"defaultColor": "#54595d",
|
||||
"icons": [
|
||||
"sandbox"
|
||||
],
|
||||
"variants": [],
|
||||
"useDataURI": false
|
||||
},
|
||||
"skins.minerva.mainMenu.advanced.icons": {
|
||||
"class": "MediaWiki\\ResourceLoader\\OOUIIconPackModule",
|
||||
"useMaskImage": true,
|
||||
"selectorWithoutVariant": ".minerva-icon--{name}",
|
||||
"defaultColor": "#54595d",
|
||||
"icons": [
|
||||
|
|
@ -467,7 +451,7 @@
|
|||
},
|
||||
"skins.minerva.mainMenu.icons": {
|
||||
"class": "MediaWiki\\ResourceLoader\\OOUIIconPackModule",
|
||||
"variants": [],
|
||||
"useMaskImage": true,
|
||||
"selectorWithoutVariant": ".minerva-icon--{name}",
|
||||
"defaultColor": "#54595d",
|
||||
"useDataURI": false,
|
||||
|
|
|
|||
Loading…
Reference in a new issue