From ca3f9c3648f07480707a3b02e4ad70e3fd0a3d81 Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Sat, 23 Jan 2021 13:48:54 -0500 Subject: Update icons (#1295) * Update icons * Simplify sidebar-button-icon styles --- ext/mixed/css/display.css | 30 ++---------------------------- ext/mixed/css/material.css | 3 +++ ext/mixed/img/checkmark.svg | 1 + ext/mixed/img/cross.svg | 2 +- 4 files changed, 7 insertions(+), 29 deletions(-) create mode 100644 ext/mixed/img/checkmark.svg (limited to 'ext/mixed') diff --git a/ext/mixed/css/display.css b/ext/mixed/css/display.css index a7c3e368..0c6ab336 100644 --- a/ext/mixed/css/display.css +++ b/ext/mixed/css/display.css @@ -494,17 +494,11 @@ button.sidebar-button.danger:active:not(:disabled) { background-color: var(--sidebar-button-danger-background-color-active); } .sidebar-button-icon { + --icon-size: var(--sidebar-button-icon-size) var(--sidebar-button-icon-size); + display: block; width: 100%; height: 100%; - mask-repeat: no-repeat; - mask-position: center center; - mask-mode: alpha; - mask-size: var(--sidebar-button-icon-size) var(--sidebar-button-icon-size); - -webkit-mask-repeat: no-repeat; - -webkit-mask-position: center center; - -webkit-mask-mode: alpha; - -webkit-mask-size: var(--sidebar-button-icon-size) var(--sidebar-button-icon-size); background-color: var(--sidebar-button-icon-color); transition: background-color 0.125s ease-in-out; } @@ -518,26 +512,6 @@ button.sidebar-button.danger:focus .sidebar-button-icon { button.sidebar-button.sidebar-button-highlight>.sidebar-button-icon { background-color: var(--accent-color); } -.sidebar-button-icon[data-icon=cross] { - mask-image: url(/mixed/img/cross.svg); - -webkit-mask-image: url(/mixed/img/cross.svg); -} -.sidebar-button-icon[data-icon=left-chevron] { - mask-image: url(/mixed/img/left-chevron.svg); - -webkit-mask-image: url(/mixed/img/left-chevron.svg); -} -.sidebar-button-icon[data-icon=right-chevron] { - mask-image: url(/mixed/img/right-chevron.svg); - -webkit-mask-image: url(/mixed/img/right-chevron.svg); -} -.sidebar-button-icon[data-icon=kebab-menu] { - mask-image: url(/mixed/img/kebab-menu.svg); - -webkit-mask-image: url(/mixed/img/kebab-menu.svg); -} -.sidebar-button-icon[data-icon=profile] { - mask-image: url(/mixed/img/profile.svg); - -webkit-mask-image: url(/mixed/img/profile.svg); -} /* Search page */ diff --git a/ext/mixed/css/material.css b/ext/mixed/css/material.css index 259d6460..6846c187 100644 --- a/ext/mixed/css/material.css +++ b/ext/mixed/css/material.css @@ -196,10 +196,13 @@ .icon[data-icon=expand] { --icon-image: url(/mixed/img/expand.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=checkmark] { --icon-image: url(/mixed/img/checkmark.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=left-chevron] { --icon-image: url(/mixed/img/left-chevron.svg); } +.icon[data-icon=right-chevron] { --icon-image: url(/mixed/img/right-chevron.svg); } .icon[data-icon=material-down-arrow] { --icon-image: url(/mixed/img/material-down-arrow.svg); --icon-size: var(--material-arrow-dimension2) var(--material-arrow-dimension1); diff --git a/ext/mixed/img/checkmark.svg b/ext/mixed/img/checkmark.svg new file mode 100644 index 00000000..14504166 --- /dev/null +++ b/ext/mixed/img/checkmark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/ext/mixed/img/cross.svg b/ext/mixed/img/cross.svg index 9b3d6a5c..9ea89e51 100644 --- a/ext/mixed/img/cross.svg +++ b/ext/mixed/img/cross.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file -- cgit v1.2.3