Update README.md, Styles/Mastodon/MastoPurpleLight.css, Styles/Firefox/README.md, LICENSE.md, Styles/Firefox/FFUltraSlim.css

2022-05-19 16:15:40 +00:00 · 2022-05-19 16:15:40 +00:00 · a4350d6b86
parent 710507dc3e
commit a4350d6b86
5 changed files with 513 additions and 2 deletions
--- a/LICENSE.md
+++ b/LICENSE.md
@ -657,4 +657,4 @@ the specific requirements.
 You should also get your employer (if you work as a programmer) or
 school, if any, to sign a "copyright disclaimer" for the program, if
 necessary. For more information on this, and how to apply and follow
-the GNU AGPL, see <https://www.gnu.org/licenses/>.
+the GNU AGPL, see <https://www.gnu.org/licenses/>.
--- a/README.md
+++ b/README.md
@ -4,4 +4,5 @@ A collection for all my UserCSS styles.

 I suggest using the [Stylus](https://github.com/openstyles/stylus) extension to apply them in your browser.

-All my styles are licensed under the AGPL-3.0 license.
+Only my 100% original styles are licensed under the AGPL-3.0 license.  
+This means, not every style in this repo: for those not made from scratch, but starting from someone else's code, proper credits are indicated in the source files and I don't change the license.
--- a/Styles/Firefox/FFUltraSlim.css
+++ b/Styles/Firefox/FFUltraSlim.css
@ -0,0 +1,495 @@
+/*==============================================================================================*
+   ___  ___           ___  __        __               
+  |__  |__  |  | |     |  |__)  /\  /__` |    |  |\/| 
+  |    |    \__/ |___  |  |  \ /~~\ .__/ |___ |  |  | 
+  v0.1
+
+  FFUltraSlim:   Extremely minimalist Firefox usertheme.
+                 Wastes just about 25px of vertical space.
+
+  Note:          Requires "Compact" toolbar density.
+
+  By OctoSpacc:  https://gitlab.com/octospacc/UserCSS
+
+  Below is the original header for Cascade,
+  which this theme is mostly based off.
+
+*==============================================================================================*/
+
+/*==============================================================================================*
+
+  +-----+-----+-----+-----+-----+-----+-----+
+  | █▀▀ | ▄▀█ | █▀▀ | █▀▀ | ▄▀█ | █▀▄ | █▀▀ |
+  | █▄▄ | █▀█ | ▄▄█ | █▄▄ | █▀█ | █▄▀ | ██▄ |
+  +-----+-----+-----+-----+-----+-----+-----+
+
+  Description:    Minimalist, Simple, Keyboard Centered and based on SimpleFox. 🦊
+                  What you get is a really simple responsive one-line layout using the new Proton UI.
+
+                  > SimpleFox: https://github.com/migueravila/SimpleFox
+
+  Author:         Andreas Grafen
+                  (https://andreas.grafen.info)
+
+  Repository:     https://github.com/andreasgrafen/ag.proton
+
+                  Thank you Nick, Abdallah and Benyamin for all the great suggestions for improvements! ♡
+                  Nick:     https://github.com/nicksundermeyer)
+                  Abdallah: https://github.com/HeiWiper)
+                  Benyamin: https://github.com/benyaminl)
+
+                  If you're looking for a **mouse-friendly** clone please check out Waterfall.
+                  https://github.com/crambaud/waterfall
+
+*==============================================================================================*/
+
+/* Ultra slim config */
+
+.tab-content,
+.toolbarbutton-1,
+.tab-loading-burst,
+.tab-background,
+#nav-bar,
+#nav-bar-customization-target,
+#urlbar,
+#urlbar-container,
+#urlbar-input-container,
+#urlbar-background {
+    Max-Height: 25px !important;
+    Font-Size: 10pt !important;
+}
+
+.tab-text, .tab-label {
+    Min-Height: 28px !important;
+}
+
+.scrollbox-clip {
+    Position: Fixed;
+    // Max-Height: 24px !important;
+}
+
+#identity-icon, .tab-icon-image, .tab-icon-stack {
+    Max-Height: 11px !important;
+    Max-Width: 11px !important;
+}
+
+.toolbarbutton-icon, .toolbarbutton-1 {
+    Max-Height: 20px !important;
+    Max-Width: 20px !important;
+}
+
+@media (max-width: 640px) {
+    #TabsToolbar,
+    #nav-bar,
+    #urlbar-input-container {
+        Max-Height: 24px !important;
+    }
+}
+
+/* Reposition some keys here */
+
+/* transition to oneline */
+@media (min-width: 640px) {
+    /* move tabs bar over */
+    #TabsToolbar { 
+    	margin-left: var(--uc-urlbar-width) !important;
+    }
+
+    /* move entire nav bar  */
+    #nav-bar { margin: calc((var(--urlbar-min-height) * -1) - 8px) calc(100vw - var(--uc-urlbar-width)) 0 0 !important; }
+}
+
+/*=============================================================================================*/
+
+/*---+---+---+---+---+---+
+ | C | O | N | F | I | G |
+ +---+---+---+---+---+---*/
+
+/* Feel free to tweak the following
+ * config settingsto your own liking. */
+
+    /*---+---+---+---+---+---+---+
+     | C | O | L | O | U | R | S |
+     +---+---+---+---+---+---+---*/
+
+    /* Comment this block out if you want to keep the default theme colour. */
+    /* This will also work with custom colours from color.firefox.com. */
+
+    @media (prefers-color-scheme: dark) { :root {
+
+        --window-colour:                     #1E2021;
+        --secondary-colour:                  #191B1C;
+        --inverted-colour:                   #FAFAFC;
+
+        /* Containter Tab Colours */
+        --uc-identity-color-blue:            #7ED6DF;
+        --uc-identity-color-turquoise:       #55E6C1;
+        --uc-identity-color-green:           #B8E994;
+        --uc-identity-color-yellow:          #F7D794;
+        --uc-identity-color-orange:          #F19066;
+        --uc-identity-color-red:             #FC5C65;
+        --uc-identity-color-pink:            #F78FB3;
+        --uc-identity-color-purple:          #786FA6;
+
+        --uc-identity-color-blue-muted:      #7ED6DF99;
+        --uc-identity-color-turquoise-muted: #55E6C199;
+        --uc-identity-color-green-muted:     #B8E99499;
+        --uc-identity-color-yellow-muted:    #F7D794CC;
+        --uc-identity-color-orange-muted:    #F19066FF;
+        --uc-identity-color-red-muted:       #FC5C65FF;
+        --uc-identity-color-pink-muted:      #F78FB399;
+        --uc-identity-color-purple-muted:    #786FA6FF;
+
+    }}
+
+    @media (prefers-color-scheme: light) { :root {
+
+        --window-colour:                     #FAFAFC;
+        --secondary-colour:                  #EAEAEC;
+        --inverted-colour:                   #1E2021;
+
+        /* Containter Tab Colours */
+        --uc-identity-color-blue:            #1D65F5;
+        --uc-identity-color-turquoise:       #209FB5;
+        --uc-identity-color-green:           #40A02B;
+        --uc-identity-color-yellow:          #E49320;
+        --uc-identity-color-orange:          #FE640B;
+        --uc-identity-color-red:             #FC5C65;
+        --uc-identity-color-pink:            #EC83D0;
+        --uc-identity-color-purple:          #822FEE;
+
+        --uc-identity-color-blue-muted:      #1D65F5FF;
+        --uc-identity-color-turquoise-muted: #209FB5FF;
+        --uc-identity-color-green-muted:     #40A02BFF;
+        --uc-identity-color-yellow-muted:    #E49320FF;
+        --uc-identity-color-orange-muted:    #FE640BFF;
+        --uc-identity-color-red-muted:       #FC5C65FF;
+        --uc-identity-color-pink-muted:      #EC83D0FF;
+        --uc-identity-color-purple-muted:    #822FEEFF;
+
+    }}
+
+:root {
+
+    /* URL colour in URL bar suggestions */
+    --urlbar-popup-url-color: var(--uc-identity-color-purple) !important;
+
+    /*---+---+---+---+---+---+---+
+     | V | I | S | U | A | L | S |
+     +---+---+---+---+---+---+---*/
+
+    /* global border radius */
+    --uc-border-radius: 0;
+
+    /* dynamic url bar width settings */
+    --uc-urlbar-width: clamp(200px, 40vw, 500px);
+
+    /* dynamic tab width settings */
+    --uc-active-tab-width:   clamp(100px, 20vw, 300px);
+    --uc-inactive-tab-width: clamp( 50px, 15vw, 200px);
+
+    /* if active always shows the tab close button */
+    --show-tab-close-button: none; /* DEFAULT: -moz-inline-box; */
+
+    /* if active only shows the tab close button on hover*/
+    --show-tab-close-button-hover: none; /* DEFAULT: -moz-inline-box; */
+
+    /* adds left and right margin to the container-tabs indicator */
+    --container-tabs-indicator-margin: 10px;
+
+}
+
+    /*---+---+---+---+---+---+---+
+     | B | U | T | T | O | N | S |
+     +---+---+---+---+---+---+---*/
+
+     #back-button,
+     #forward-button { display: none !important; }
+
+     /* bookmark icon */
+     #star-button{ display: none !important; }
+
+     /* zoom indicator */
+     #urlbar-zoom-button { display: none !important; }
+
+     /* Make button small as Possible, hidden out of sight */
+     #PanelUI-button { margin-top: -5px; margin-bottom: 44px; }
+
+     #PanelUI-menu-button {
+
+        padding: 0px !important;
+        max-height: 1px;
+
+        list-style-image: none !important;
+
+     }
+
+     #PanelUI-menu-button .toolbarbutton-icon { width: 1px !important; }
+     #PanelUI-menu-button .toolbarbutton-badge-stack { padding: 0px !important; }
+
+     #reader-mode-button{ display: none !important; }
+
+     /* tracking protection shield icon */
+     #tracking-protection-icon-container { display: none !important; }
+
+     /* #identity-box { display: none !important } /* hides encryption AND permission items */
+     #identity-permission-box { display: none !important; } /* only hides permission items */
+
+     /* e.g. playing indicator (secondary - not icon) */
+     .tab-secondary-label { display: none !important; }
+
+     #pageActionButton { display: none !important; }
+     #page-action-buttons { display: none !important; }
+
+     #urlbar-go-button { display: none !important; }
+
+/*=============================================================================================*/
+
+/*---+---+---+---+---+---+
+ | L | A | Y | O | U | T |
+ +---+---+---+---+---+---*/
+
+/* No need to change anything below this comment.
+ * Just tweak it if you want to tweak the overall layout. c: */
+
+:root {
+
+    --OneLinerMinWidth: 0px;
+    
+    --uc-theme-colour:                          var(--window-colour,    var(--toolbar-bgcolor));
+    --uc-hover-colour:                          var(--secondary-colour, rgba(0, 0, 0, 0.2));
+    --uc-inverted-colour:                       var(--inverted-colour,  var(--toolbar-color));
+
+    --button-bgcolor:                           var(--uc-theme-colour)    !important;
+    --button-hover-bgcolor:                     var(--uc-hover-colour)    !important;
+    --button-active-bgcolor:                    var(--uc-hover-colour)    !important;
+
+    --toolbarbutton-border-radius:              var(--uc-border-radius)   !important;
+
+    --tab-border-radius:                        var(--uc-border-radius)   !important;
+    --lwt-text-color:                           var(--uc-inverted-colour) !important;
+    --lwt-tab-text:                             var(--uc-inverted-colour) !important;
+
+    --arrowpanel-border-radius:                 var(--uc-border-radius)   !important;
+
+    --tab-block-margin: 2px !important;
+
+}
+
+window,
+#main-window,
+#toolbar-menubar,
+#TabsToolbar,
+#PersonalToolbar,
+#navigator-toolbox,
+#sidebar-box,
+#nav-bar {
+
+    -moz-appearance: none !important;
+
+    border: none !important;
+    box-shadow: none !important;
+    background: var(--uc-theme-colour) !important;
+
+}
+
+/* grey out ccons inside the toolbar to make it
+ * more aligned with the Black & White colour look */
+#PersonalToolbar toolbarbutton:not(:hover),
+#bookmarks-toolbar-button:not(:hover) { filter: grayscale(1) !important; }
+
+/* remove window control buttons */
+.titlebar-buttonbox-container { display: none !important; }
+
+/* remove "padding" left and right from tabs */
+.titlebar-spacer { display: none !important; }
+
+/* remove gap after pinned tabs */
+#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs])
+    > #tabbrowser-arrowscrollbox
+    > .tabbrowser-tab[first-visible-unpinned-tab] { margin-inline-start: 0 !important; }
+
+/* remove tab shadow */
+.tabbrowser-tab
+    >.tab-stack
+    > .tab-background { box-shadow: none !important;  }
+
+/* tab background */
+.tabbrowser-tab
+    > .tab-stack
+    > .tab-background { background: var(--uc-theme-colour) !important; }
+
+/* active tab background */
+.tabbrowser-tab[selected]
+    > .tab-stack
+    > .tab-background { background: var(--uc-hover-colour) !important; }
+
+/* multi tab selection */
+#tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab:is([visuallyselected=true], [multiselected]) > .tab-stack > .tab-background:-moz-lwtheme { background: var(--uc-hover-colour) !important; }
+
+/* tab close button options */
+.tabbrowser-tab:not([pinned]) .tab-close-button { display: var(--show-tab-close-button) !important; }
+.tabbrowser-tab:not([pinned]):hover .tab-close-button { display: var(--show-tab-close-button-hover) !important }
+
+/* adaptive tab width */
+.tabbrowser-tab[selected][fadein]:not([pinned]) { max-width: var(--uc-active-tab-width) !important; }
+.tabbrowser-tab[fadein]:not([selected]):not([pinned]) { max-width: var(--uc-inactive-tab-width) !important; }
+
+/* container tabs indicator */
+.tabbrowser-tab[usercontextid]
+    > .tab-stack
+    > .tab-background
+    > .tab-context-line {
+
+        margin: -1px var(--container-tabs-indicator-margin) 0 var(--container-tabs-indicator-margin) !important;
+        height: 1px !important;
+
+        border-radius: var(--tab-border-radius) !important;
+        box-shadow: 0 1px 10px 1px var(--uc-identity-gradient-color) !important;
+
+}
+
+/* show favicon when media is playing but tab is hovered */
+.tab-icon-image:not([pinned]) { opacity: 1 !important; }
+
+/* Makes the speaker icon to always appear if the tab is playing (not only on hover) */
+.tab-icon-overlay:not([crashed]),
+.tab-icon-overlay[pinned][crashed][selected] {
+
+  top: 5px !important;
+  z-index: 1 !important;
+
+  padding: 1.5px !important;
+  inset-inline-end: -8px !important;
+  width: 16px !important; height: 16px !important;
+
+  border-radius: 10px !important;
+
+}
+
+
+/* style and position speaker icon */
+.tab-icon-overlay:not([sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) {
+
+  stroke: transparent !important;
+  background: transparent !important;
+  opacity: 1 !important; fill-opacity: 0.8 !important;
+
+  color: currentColor !important;
+
+  stroke: var(--uc-theme-colour) !important;
+  background-color: var(--uc-theme-colour) !important;
+
+}
+
+/* change the colours of the speaker icon on active tab to match tab colours */
+.tabbrowser-tab[selected] .tab-icon-overlay:not([sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) {
+
+  stroke: var(--uc-hover-colour) !important;
+  background-color: var(--uc-hover-colour) !important;
+
+}
+
+.tab-icon-overlay:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) { margin-inline-end: 9.5px !important; }
+
+.tabbrowser-tab:not([image]) .tab-icon-overlay:not([pinned], [sharing], [crashed]) {
+
+  top: 0 !important;
+
+  padding: 0 !important;
+  margin-inline-end: 5.5px !important;
+  inset-inline-end: 0 !important;
+
+}
+
+.tab-icon-overlay:not([crashed])[soundplaying]:hover,
+.tab-icon-overlay:not([crashed])[muted]:hover,
+.tab-icon-overlay:not([crashed])[activemedia-blocked]:hover {
+
+    color: currentColor !important;
+    stroke: var(--uc-inverted-colour) !important;
+    background-color: var(--uc-inverted-colour) !important;
+    fill-opacity: 0.95 !important;
+
+}
+
+.tabbrowser-tab[selected] .tab-icon-overlay:not([crashed])[soundplaying]:hover,
+.tabbrowser-tab[selected] .tab-icon-overlay:not([crashed])[muted]:hover,
+.tabbrowser-tab[selected] .tab-icon-overlay:not([crashed])[activemedia-blocked]:hover {
+
+    color: currentColor !important;
+    stroke: var(--uc-inverted-colour) !important;
+    background-color: var(--uc-inverted-colour) !important;
+    fill-opacity: 0.95 !important;
+
+}
+
+/* speaker icon colour fix */
+#TabsToolbar .tab-icon-overlay:not([crashed])[soundplaying],
+#TabsToolbar .tab-icon-overlay:not([crashed])[muted],
+#TabsToolbar .tab-icon-overlay:not([crashed])[activemedia-blocked] { color: var(--uc-inverted-colour) !important; }
+
+/* speaker icon colour fix on hover */
+#TabsToolbar .tab-icon-overlay:not([crashed])[soundplaying]:hover,
+#TabsToolbar .tab-icon-overlay:not([crashed])[muted]:hover,
+#TabsToolbar .tab-icon-overlay:not([crashed])[activemedia-blocked]:hover { color: var(--uc-theme-colour) !important; }
+
+#nav-bar {
+
+    border:     none !important;
+    box-shadow: none !important;
+    background: transparent !important;
+
+}
+
+/* remove border below whole nav */
+#navigator-toolbox { border-bottom: none !important; }
+
+#urlbar,
+#urlbar * {
+
+    outline: none !important;
+    box-shadow: none !important;
+
+}
+
+#urlbar-background { border: var(--uc-hover-colour) !important; }
+
+#urlbar[focused="true"]
+    > #urlbar-background,
+#urlbar:not([open])
+    > #urlbar-background { background: transparent !important; }
+
+
+#urlbar[open]
+    > #urlbar-background { background: var(--uc-theme-colour) !important; }
+
+.urlbarView-row:hover
+    > .urlbarView-row-inner,
+.urlbarView-row[selected]
+    > .urlbarView-row-inner { background: var(--uc-hover-colour) !important; }
+
+#statuspanel {
+
+    position: absolute !important;
+    bottom: 12px !important; left: 12px !important;
+
+}
+
+#statuspanel #statuspanel-label {
+
+    border: none !important;
+    border-radius: var(--uc-border-radius) !important;
+    background: var(--uc-theme-colour) !important;
+
+}
+
+/* Container Tabs */
+.identity-color-blue      { --identity-tab-color: var(--uc-identity-color-blue)      !important; --identity-icon-color: var(--uc-identity-color-blue)      !important; --uc-identity-gradient-color: var(--uc-identity-color-blue-muted) !important; }
+.identity-color-turquoise { --identity-tab-color: var(--uc-identity-color-turquoise) !important; --identity-icon-color: var(--uc-identity-color-turquoise) !important; --uc-identity-gradient-color: var(--uc-identity-color-turquoise-muted) !important;  }
+.identity-color-green     { --identity-tab-color: var(--uc-identity-color-green)     !important; --identity-icon-color: var(--uc-identity-color-green)     !important; --uc-identity-gradient-color: var(--uc-identity-color-green-muted) !important;  }
+.identity-color-yellow    { --identity-tab-color: var(--uc-identity-color-yellow)    !important; --identity-icon-color: var(--uc-identity-color-yellow)    !important; --uc-identity-gradient-color: var(--uc-identity-color-yellow-muted) !important;  }
+.identity-color-orange    { --identity-tab-color: var(--uc-identity-color-orange)    !important; --identity-icon-color: var(--uc-identity-color-orange)    !important; --uc-identity-gradient-color: var(--uc-identity-color-orange-muted) !important;  }
+.identity-color-red       { --identity-tab-color: var(--uc-identity-color-red)       !important; --identity-icon-color: var(--uc-identity-color-red)       !important; --uc-identity-gradient-color: var(--uc-identity-color-red-muted) !important;  }
+.identity-color-pink      { --identity-tab-color: var(--uc-identity-color-pink)      !important; --identity-icon-color: var(--uc-identity-color-pink)      !important; --uc-identity-gradient-color: var(--uc-identity-color-pink-muted) !important;  }
+.identity-color-purple    { --identity-tab-color: var(--uc-identity-color-purple)    !important; --identity-icon-color: var(--uc-identity-color-purple)    !important; --uc-identity-gradient-color: var(--uc-identity-color-purple-muted) !important;  }
--- a/Styles/Firefox/README.md
+++ b/Styles/Firefox/README.md
@ -0,0 +1,15 @@
+Note: Download your desired CSS file from this repo and rename it as `userChrome.css` (important).
+
+## How to use a userChrome.css theme
+
+1. Type `about:config` into your URL bar. Click on the **I accept the risk** button if you're shown a warning.
+2. Seach for **`toolkit.legacyUserProfileCustomizations.stylesheets`**, **`layers.acceleration.force-enabled`**, **`gfx.webrender.all`** and **`svg.context-properties.content.enabled`** and set them to **`true`**.
+3. Go to your profile folder:
+    - Linux: `$HOME/.mozilla/firefox/######.default-release/`
+    - MacOS: `Users/[USERNAME]/Library/Application Support/Firefox/Profiles/######.default-release`
+    - Windows: `C:\Users\[USERNAME]\AppData\Roaming\Mozilla\Firefox\Profiles\######.default-release`
+4. If it doesn't exist already create a folder called `chrome`.
+5. Copy your desired `userChrome.css` into that folder.
+6. *optional* Customise everything to your liking.
+
+_This guide is borrowed from Cascade repo. Credits: [github.com/andreasgrafen/cascade](https://github.com/andreasgrafen/cascade/blob/main/README.md#how-to-use-a-userchromecss-theme)_
--- a/Styles/Mastodon/MastoPurpleLight.css
+++ b/Styles/Mastodon/MastoPurpleLight.css