MrOtherGuy / color-tag-tabs

experimental web-extension for Firefox
MIT License
0 stars 0 forks source link

Not an issue - how to make it smaller? #1

Open mimteatr opened 2 years ago

mimteatr commented 2 years ago

Hey,

Very nice css!

Is it possible to make it smaller?

Thanks!

MrOtherGuy commented 2 years ago

Smaller how? The style sheet doesn't do anything to size of tabs, it only changes some background colors. So anything that works with normal Firefox should work fine here.

Except for the fact that I made the selected tab to highlighted with inset outline since normal selected colors can't really work when every tab is slessentially highlighted by some random color.

mimteatr commented 2 years ago

I think I understand now, after looking at a capture of both, without and with this CSS, side by side, why it looks big; it's the bolded outline, if I can call it like that, that gives that impression!

But it's clear to me now that the one without this CSS is already too big for my eye, and it is the one that needs to be shrunk a little (height?) - is it possible?

https://imgur.com/a/d2IVtHz

mimteatr commented 2 years ago

?

MrOtherGuy commented 2 years ago

Please clearly describe what exactly you are trying to do, then maybe I can help.

mimteatr commented 2 years ago

As I wrote, explained and asked in my previous messages:

When using the color-tag-tabs.css I had the impression that tabs got bigger but after taking a capture of the tabs with and without this specific CSS and comparing both (link of the capture is on my previous message) I realized that this CSS only outlined the tabs which ALREADY ARE a bit too big for my taste.

So what I asked was if it's there's a code/CSS that can "shrink" the tab a bit, I guess, its height?

MrOtherGuy commented 2 years ago

You can maybe just set :root{ --tab-min-height: 29px !important }

I can't say if or how it would work with the other custom styles you seem to be using though.

mimteatr commented 2 years ago

Thank you! Which size would make even a little smaller (in height)?

My userChrome.css:

/* MrOtherGuy CSS */
@import "./iconized_menubar_items.css"; /**/
@import "./vertical_popup_menubar.css"; /**/
@import "./autohide_menubar.css"; /**/
@import "./compact_urlbar_megabar.css"; /**/
@import "./curved_tabs.css"; /**/
@import "./tab_close_button_always_on_hover.css"; /**/
@import "./toolbars_below_content.css"; /**/
/* @import "./multi-row_bookmarks.css"; /**/
/* @import "./ch_contextual-menu.css"; /**/
@import "./tab_loading_progress_bar.css"; /**/
/* @import "./colorize_tab_from_prefix.css"; /**/

/* MrOtherGuy: Remove bookmark star button on Page Actions/URL */
#star-button-box { display:none !important; }

/* MrOtherGuy: Make status bar draggable */
#status-text{ -moz-window-dragging: drag !important }

/* It_Was_The_Other_Guy: Reduce vertical size of menus */
:root{  --arrowpanel-menuitem-padding: 0.2em !important; }

/* Remove Facebook Container on Page Actions/URL */
#userContext-icons { display:none !important; }

/* Iconize bookmarks */
toolbarbutton.bookmark-item:not(.subviewbutton){ margin-inline: 0 !important; border-inline: 2px solid transparent }
toolbarbutton.bookmark-item:not(.subviewbutton):not(:hover) > .toolbarbutton-text{ display: none !important; }

/* It_Was_The_Other_Guy: limit how wide the tabs can grow */
.tabbrowser-tab[fadein]:not([pinned]){ max-width: 150px !important; }

/* It_Was_The_Other_Guy: Sidebar tree the icon to be aligned with the twisty */
.sidebar-placesTreechildren::-moz-tree-twisty,
.sidebar-placesTreechildren::-moz-tree-indentation {
  width: 0em !important; 
  padding-inline: 0 !important;
}
.sidebar-placesTreechildren::-moz-tree-twisty(container){
  width: 12px !important;
  padding-inline: 4px !important;
}

/* MrOtherGuy: shrink tabs height */
:root{ --tab-min-height: 29px !important }