diff options
author | Pedro Pinto Silva <pedro.silva@collabora.com> | 2020-09-23 12:25:50 +0200 |
---|---|---|
committer | Pedro Silva <pedro.silva@collabora.com> | 2020-09-23 14:24:06 +0200 |
commit | fb6157b65fe96e4966f9d47f6d43660bfbff2d94 (patch) | |
tree | 09c5f43e3cb26fb5ce5fae0bc7d4c06ca194d0c8 | |
parent | LokDialog: Remember tooltip position (diff) | |
download | online-fb6157b65fe96e4966f9d47f6d43660bfbff2d94.tar.gz online-fb6157b65fe96e4966f9d47f6d43660bfbff2d94.zip |
Top Menu: improve resolution of menu marks by
using svg instead of unicode content
Change-Id: I66629ef6cfade8c24701bace3f172e28fd5243ae
Reviewed-on: https://gerrit.libreoffice.org/c/online/+/103241
Tested-by: Jenkins CollaboraOffice <jenkinscollaboraoffice@gmail.com>
Reviewed-by: Pedro Silva <pedro.silva@collabora.com>
-rw-r--r-- | loleaflet/css/menubar.css | 18 | ||||
-rw-r--r-- | loleaflet/images/lc_menu_chevron.svg | 31 |
2 files changed, 45 insertions, 4 deletions
diff --git a/loleaflet/css/menubar.css b/loleaflet/css/menubar.css index df58c5fcc2..b630141ba2 100644 --- a/loleaflet/css/menubar.css +++ b/loleaflet/css/menubar.css @@ -146,7 +146,13 @@ .lo-menu ul a span.sub-arrow { right: 0; margin-right: 5px; - background: transparent; /* we want them to be transparent always whether mobile or desktop */ + background: transparent url('images/lc_menu_chevron.svg') no-repeat center right; /* we want them to be transparent always whether mobile or desktop */ + color: transparent; + /*transform: rotate(180deg);*/ +} +.lo-menu ul a:hover > span.sub-arrow { + -webkit-filter: brightness(100); + filter: brightness(100); } .lo-menu ul > li { border-left: 0; @@ -245,13 +251,17 @@ /* The smartmenus plugin doesn't seem to have support for icons, so implement our own pseudo-elements */ .lo-menu-item-checked::before { position: absolute; - content: '\2713'; - left: 5px; - top: 5px; + content: ' '; + left: 2px; + background: url('images/lc_listitem-selected.svg') no-repeat left -2px; + width: 20px; + height: 20px; } .lo-menu-item-checked:hover::before { color: #fff; + -webkit-filter: brightness(100); + filter: brightness(100); } .writer-icon-img { diff --git a/loleaflet/images/lc_menu_chevron.svg b/loleaflet/images/lc_menu_chevron.svg new file mode 100644 index 0000000000..ad7ae2be78 --- /dev/null +++ b/loleaflet/images/lc_menu_chevron.svg @@ -0,0 +1,31 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<svg + xmlns:dc="http://purl.org/dc/elements/1.1/" + xmlns:cc="http://creativecommons.org/ns#" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns="http://www.w3.org/2000/svg" + height="9" + width="9" + id="svg4" + version="1.1" + viewBox="0 0 9 9"> + <metadata + id="metadata10"> + <rdf:RDF> + <cc:Work + rdf:about=""> + <dc:format>image/svg+xml</dc:format> + <dc:type + rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> + <dc:title></dc:title> + </cc:Work> + </rdf:RDF> + </metadata> + <defs + id="defs8" /> + <path + id="path2" + d="M 2.8222656,0.22851562 A 0.70006999,0.70006999 0 0 0 2.3027344,1.4160156 L 5.2265625,4.5 2.3027344,7.5839844 A 0.70006999,0.70006999 0 1 0 3.3183594,8.546875 L 6.6992188,4.9824219 a 0.70006999,0.70006999 0 0 0 0,-0.9648438 L 3.3183594,0.453125 A 0.70006999,0.70006999 0 0 0 2.8222656,0.22851562 Z" + style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#bbbbbb;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.39999998;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" /> +</svg> |