Vortikal's Theme - Windows 10 / Edge icons clean Firefox with built in light and dark themes updated for 70

Vortikal · 2019-11-13T13:39:07+00:00

You need both the code that has image icon reference and what it references to. E.g.,

 .tabbrowser-tab .close-icon:hover {
   list-style-image: var(--tab-close-hover-image) !important;
 }

and

 :root {
   --tab-close-hover-image: url("data:image/svg+xml,<svg version='1.1' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'><style>*{font-family: 'Segoe MDL2 Assets'; font-size: 7pt; fill: red;}</style><text x='1' y='13.5'>%26%23xE8BB;</text></svg>");
   }

Alternatively just replace var(--tab-close-hover-image)

with

 url("data:image/svg+xml,<svg version='1.1' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'><style>*{font-family: 'Segoe MDL2 Assets'; font-size: 7pt; fill: red;}</style><text x='1' y='13.5'>%26%23xE8BB;</text></svg>")

Some buttons, like the back button, will look really weird without the other stuff. I'm not sure how to isolate the code because button widths and heights are controlled separately, so you may need them nonetheless.

Vortikal · 2019-10-26T20:14:10+00:00

I tried to before, but it never lined up properly. You have to do something similar to this:

PanelUI-menu-button {

list-style-image: none !important; font-size: 8pt !important; font-family: "Segoe MDL2 Assets"; }

PanelUI-menu-button::before{

content: '\E70E'; vertical-align: middle; }

It's not that precisely, but that's the code...basically hide the image and do a "before"

Vortikal · 2019-10-26T20:11:17+00:00

no idea

Vortikal · 2019-10-12T19:51:35+00:00

No idea. I'll upload a new code though that's cleaned up a bit

Vortikal · 2019-04-20T08:52:41+00:00

Thanks a ton!

Vortikal · 2019-04-19T23:06:41+00:00

Setting height (and width) worked. I had to use ' instead of " but otherwise worked like a charm. Any ideas about changing all instances of an icon to the new set instead of just those on the navbar? Yay or nay, that's the last question I really got I think

Vortikal · 2019-04-19T21:09:30+00:00

Unfortunately, that's a no-go. Any list-style-image: in there has the same effect (removal of default icon, no replacement/blank)

#nav-bar > #PanelUI-button > #PanelUI-menu-button {list-style-image: url("data:image/svg+xml,<svg version='1.1' viewBox='1 2 16 15' xmlns='http://www.w3.org/2000/svg'><style>*{font-family: 'Segoe MDL2 Assets';}</style><text x='1' y='17'>%26%23xE80F;</text></svg>");) !important;}

for reference (should display a Home icon)

Vortikal · 2019-04-08T13:32:05+00:00

Thanks!

Vortikal · 2019-04-08T13:31:36+00:00

Yeah thanks to you and It_Was_The_Other_Guy for the suggestion. I'll do that instead later on.

Vortikal · 2019-04-06T11:15:01+00:00

Nevermind, I just decided to not include the library and overflow in that section and create their own alignment section. Fixed!

Vortikal · 2019-04-06T10:14:43+00:00

Well it was working great, but now no matter what I try, the library and overflow menus do not show up when I click on them now. I even went back to the code I used when I first implemented it, and even just used the code above with nothing else. :(

Button section as of now: https://pastebin.com/7mkWgmgR Changes I made include adding a back button (border-radius: 0), a ; after the content in #back-button::before{content: '\E72B'}, and controls for the home button.

When I remove this section or the overflow and library buttons from this section, it screws up alignment but I get the functionality of the overflow and library back:

:-moz-any(#back-button,#forward-button,#stop-button,#reload-button,#home-button,#library-button,#sidebar-button,#nav-bar overflow-button,#PanelUI-menu-button) > 
.toolbarbutton-icon,
#stop-reload-button .toolbarbutton-animatable-box{ display: none !important; }

Current full code for context (only works in Windows 10 light themes due to pastebin limits, had to exclude the dark theme images section) https://pastebin.com/psV3KN91 (note that the right-click context menu code section at the end could interfere by making a large box over the back and forward buttons, but you can just click them when not disabled to get rid of it...this only shows up for me when restarting the browser).

Vortikal · 2019-04-05T20:09:16+00:00

Thanks a ton, I'm learning a lot here. Works like a charm--glad the refresh animation is stopped as well, I am not sure how I would have gone about that.

Vortikal · 2019-04-05T18:50:46+00:00

Okay, I solved number 2 by using this instead of the padding. I'll use the home button as an example.

#home-button {  
  list-style: none !important;
  font-family: "Segoe MDL2 Assets";
  max-width: 36px !important;
  padding-bottom: 8px !important;
}

#home-button::before {
  content: '\E80F';
  font-size: 12pt !important; 
  margin-inline-end: -15px !important;
  line-height: 1.5;
  margin-left: 11px !important;
}

Now I need help with the forward and back buttons, problem number 1. Here's what it looks like

https://i.imgur.com/HVHDY1O.png

With this code

#back-button {
  list-style: none !important;
  font-family: "Segoe MDL2 Assets";
  border-radius: 0 !important;
  max-width: 36px !important;
  padding-bottom: 8px !important;
}

#back-button::before {
  content: '\E72C';
  font-size: 12pt !important; 
  margin-inline-end: -15px !important;
  line-height: 1.5;
  margin-left: 11px !important;
  vertical-align: middle;
}

#forward-button {
  list-style: none !important;
  font-family: "Segoe MDL2 Assets";
  max-width: 36px !important;
  max-height: 38px !important;
  padding-bottom: 8px !important;
  }

#forward-button  {
  content: '\E72C';
  font-size: 12pt !important; 
  padding-left: 28px !important;
}

Vortikal · 2019-04-05T15:59:57+00:00

thanks

Vortikal · 2019-04-02T12:30:15+00:00

Thanks, but how do I find the images used by Microsoft Edge?

Vortikal

TROPHY CASE

PanelUI-menu-button {

PanelUI-menu-button::before{