alex/yomichan
1
Fork 0
Code Releases Activity

Material style updates (#1294)

Browse Source 
* Add more icons

* Update menu stylings
This commit is contained in:
toasted-nutbread 2021-01-23 13:01:19 -05:00 committed by GitHub
parent e999db0f10
commit a24f3f5347
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 17 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
ext/mixed/css/material.css
View File

@ -171,6 +171,7 @@
mask-size: var(--icon-size); mask-size: var(--icon-size);
mask-image: var(--icon-image); mask-image: var(--icon-image);
} }
.icon[data-icon=none] { --icon-image: linear-gradient(transparent, transparent); }
.icon[data-icon=profile] { --icon-image: url(/mixed/img/profile.svg); } .icon[data-icon=profile] { --icon-image: url(/mixed/img/profile.svg); }
.icon[data-icon=cog] { --icon-image: url(/mixed/img/cog.svg); } .icon[data-icon=cog] { --icon-image: url(/mixed/img/cog.svg); }
.icon[data-icon=palette] { --icon-image: url(/mixed/img/palette.svg); } .icon[data-icon=palette] { --icon-image: url(/mixed/img/palette.svg); }
@ -196,6 +197,9 @@
.icon[data-icon=window] { --icon-image: url(/mixed/img/window.svg); } .icon[data-icon=window] { --icon-image: url(/mixed/img/window.svg); }
.icon[data-icon=cross] { --icon-image: url(/mixed/img/cross.svg); } .icon[data-icon=cross] { --icon-image: url(/mixed/img/cross.svg); }
.icon[data-icon=sentence-parsing] { --icon-image: url(/mixed/img/sentence-parsing.svg); } .icon[data-icon=sentence-parsing] { --icon-image: url(/mixed/img/sentence-parsing.svg); }
.icon[data-icon=question-mark] { --icon-image: url(/mixed/img/question-mark.svg); }
.icon[data-icon=question-mark-circle] { --icon-image: url(/mixed/img/question-mark-circle.svg); }
.icon[data-icon=question-mark-thick] { --icon-image: url(/mixed/img/question-mark-thick.svg); }
.icon[data-icon=material-down-arrow] { .icon[data-icon=material-down-arrow] {
--icon-image: url(/mixed/img/material-down-arrow.svg); --icon-image: url(/mixed/img/material-down-arrow.svg);
--icon-size: var(--material-arrow-dimension2) var(--material-arrow-dimension1); --icon-size: var(--material-arrow-dimension2) var(--material-arrow-dimension1);
@ -925,8 +929,11 @@ button.popup-menu-item {
border: none; border: none;
width: 100%; width: 100%;
text-align: left; text-align: left;
font-size: 1em;
font-weight: normal; font-weight: normal;
font-family: inherit; font-family: inherit;
display: flex;
align-items: center;
} }
button.popup-menu-item:hover:not(:disabled), button.popup-menu-item:hover:not(:disabled),
button.popup-menu-item:focus:not(:disabled) { button.popup-menu-item:focus:not(:disabled) {
@ -940,14 +947,21 @@ button.popup-menu-item:active:not(:disabled) {
button.popup-menu-item:disabled { button.popup-menu-item:disabled {
color: var(--text-color-light); color: var(--text-color-light);
} }
:root[data-page-type=popup] .popup-menu, .popup-menu-item-icon {
display: block;
width: calc(16em / 14);
height: calc(16em / 14);
background-color: var(--text-color);
margin-right: 0.5em;
}
:root[data-page-type=popup] .popup-menu.popup-menu-auto-size,
.popup-menu.popup-menu-small { .popup-menu.popup-menu-small {
border-radius: calc(var(--menu-border-radius) * 0.75); border-radius: calc(var(--menu-border-radius) * 0.75);
padding: 0.25em 0; padding: 0.25em 0;
min-width: 6em; min-width: 6em;
} }
:root[data-page-type=popup] button.popup-menu-item, :root[data-page-type=popup] .popup-menu.popup-menu-auto-size button.popup-menu-item,
.popup-menu-small button.popup-menu-item { .popup-menu.popup-menu-small button.popup-menu-item {
padding: 0.5em 0.75em; padding: 0.5em 0.75em;
font-size: var(--font-size-small); font-size: var(--font-size-small);
} }