lunakurame / firefox-gnome-theme

A theme for Firefox 57+ matching GNOME Adwaita.
The Unlicense
201 stars 15 forks source link

csd buttons left option? #46

Closed kerry-s closed 6 years ago

kerry-s commented 6 years ago

i'm using elementary os-> https://elementary.io/

they have the close button on the left & maximize on the right. i can't do nothing to change that. it kinda bothers me that only firefox has the button layouts on the right in csd mode. is it possible to get the buttons split like that?

for now i been able to move the buttons to the left but they don't line up right(centered in button) could you help me get them to line up?

my customChrome.css:

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

#nav-bar {
    margin-left: 82px;
}

#titlebar-max {
  -moz-box-ordinal-group: 0;
}

#titlebar-content {
  direction: rtl;
}

#TabsToolbar {
  direction: rtl;
}

#tabbrowser-tabs {
  direction: ltr;
}

my userChrome.css:

/*
 * In this file you can enable styles which apply to Firefox' user interface.
 * To enable a specific feature, uncomment its @import line by removing "/*" at
 * the beginning of the line. To disable it, put the "/*" back.
 */

/*******************************************************************************
 * GNOME Theme
 * Pick whichever variant you like, it doesn't have to match your GNOME version,
 * but it will probably look better if it does. Remember that your GTK theme
 * variant must match the variant you pick here, eg. if you pick a light
 * variant, you must also run Firefox using the light variant by either
 * disabling global dark theme in GNOME Tweak Tool or running Firefox explicity
 * with the light theme:
 *   $ GTK_THEME=Adwaita:light firefox
 * The opposite applies to the dark variant, you must either enable global dark
 * theme or run Firefox like this:
 *   $ GTK_THEME=Adwaita:dark firefox
 */

/* GNOME 3.18 light theme */
@import "ui/gnome-3.18-light.css"; /**/
/* GNOME 3.18 dark theme */
/*@import "ui/gnome-3.18-dark.css"; /**/
/* GNOME 3.26 light theme */
/*@import "ui/gnome-3.26-light.css"; /**/
/* GNOME 3.26 dark theme */
/*@import "ui/gnome-3.26-dark.css"; /**/

/*******************************************************************************
/* Client-side decorations (optional)
 */

/* Auto-detect CSD support (experimental)
 * Do not enable anything else in the CSD section of this file if you want to
 * use this. It should automatically detect and enable CSD for you. Note that
 * this option is experimental, if it doesn't work for you, please report a bug
 * on our GitHub. You can still use the options below to enable CSD manually. */
/*@import "ui/experimental-auto-csd.css"; /**/

/* Enable CSD manually
 * If you enable this, you also need to pick how many window buttons you have
 * below. */
@import "ui/csd.css"; /**/

/* Window controls: just 1 button */
/*@import "ui/csd-1-button.css"; /**/
/* Window controls: 2 buttons */
/*@import "ui/csd-2-buttons.css"; /**/
/* Window controls: 3 buttons */
/*@import "ui/csd-3-buttons.css"; /**/

/*******************************************************************************
 * Other features (optional)
 */

/* Hide the tab bar when only one tab is open
 * Warning: This also hides the private browsing indicator in private windows.
 * If you are using it, you might wanna enable the next feature too. Also you
 * should move the new tab button somewhere else for this to work, because by
 * default it is on the tab bar too. */
@import "ui/hide-single-tab.css"; /**/

/* Replace the private browsing indicator with a colored URL bar */
@import "ui/private-urlbar.css"; /**/

/* Limit the URL bar's autocompletion popup's width to the URL bar's width */
@import "ui/matching-autocomplete-width.css"; /**/

/* Make all tab icons look kinda like symbolic icons */
@import "ui/symbolic-tab-icons.css"; /**/

/* Import a custom stylesheet
 * Everything you add in your customChrome.css file (it doesn't exist by
 * default) will be included here and preserved between updates, so you can move
 * your configuration to that file if you don't like setting it up after every
 * update. You can also apply your own custom styles in that file. */
@import "customChrome.css"; /**/
lunakurame commented 6 years ago

Hi! That looks interesting, thanks for sharing that code. I took your customChrome.css and experimented with it a bit, I managed to move the close and maximize buttons to separate sides. It seems to work nicely, so I thought I might as well just add that option to the repo.

We don't have a theme variant for elementary yet, so I used Adwaita from GNOME 3.18 instead (it works with other theme variants too, of course), looks like this on my elementary Live CD (the window above is Epiphany and below is Firefox with that elementary support I just added):

Screenshot

You need to enable those in your userChrome.css:

@import "ui/experimental-auto-csd.css";
@import "ui/csd-elementary.css";

It doesn't work with the manual CSD option you have enabled in your config, so disable it. It only works with the experimental auto CSD option (which will become enabled by default soon, since it works really good tbh).

If you're curious how does it work, see commit ab2d48a19aa3ede0fc053a099ccaf4038ec05d28. Feel free to comment if it doesn't work as you expected.

kerry-s commented 6 years ago

omg, that is fricken perfect. you are the bomb!

On Thu, Jun 7, 2018 at 5:49 PM, Sai Kurogetsu notifications@github.com wrote:

Hi! That looks interesting, thanks for sharing that code. I took your customChrome.css and experimented with it a bit, I managed to move the close and maximize buttons to separate sides. It seems to work nicely, so I thought I might as well just add that option to the repo.

We don't have a theme variant for elementary yet, so I used Adwaita from GNOME 3.18 instead (it works with other theme variants too, of course), looks like this on my elementary Live CD (the window above is Epiphany and below is Firefox with that elementary support I just added):

You need to enable those in your userChrome.css:

@import "ui/experimental-auto-csd.css"; @import "ui/csd-elementary.css"; It doesn't work with the manual CSD option you have enabled in your config, so disable it. It only works with the experimental auto CSD option (which will become enabled by default soon, since it works really good tbh).

If you're curious how does it work, see commit ab2d48a. Feel free to comment if it doesn't work as you expected.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or mute the thread.