From 6a992e012c319a15acc6559ca3de77a902d71224 Mon Sep 17 00:00:00 2001 From: kat witch Date: Thu, 26 Aug 2021 02:10:02 +0100 Subject: [PATCH] SASS substitutor based stylesheet proof of concept --- config/users/kat/gui/default.nix | 2 +- config/users/kat/gui/firefox-tst.nix | 138 ------------------- config/users/kat/gui/firefox-tst/default.nix | 19 +++ config/users/kat/gui/firefox-tst/tst.sass | 129 +++++++++++++++++ config/users/kat/gui/firefox.nix | 4 + 5 files changed, 153 insertions(+), 139 deletions(-) delete mode 100644 config/users/kat/gui/firefox-tst.nix create mode 100644 config/users/kat/gui/firefox-tst/default.nix create mode 100644 config/users/kat/gui/firefox-tst/tst.sass diff --git a/config/users/kat/gui/default.nix b/config/users/kat/gui/default.nix index 91172e42..3b071028 100644 --- a/config/users/kat/gui/default.nix +++ b/config/users/kat/gui/default.nix @@ -1,5 +1,5 @@ { config, ... }: { - imports = [ ./firefox.nix ./firefox-tst.nix ./packages.nix ./gtk.nix ./foot.nix ./xdg.nix ./ranger.nix ./fonts.nix ./qt.nix ]; + imports = [ ./firefox.nix ./packages.nix ./gtk.nix ./foot.nix ./xdg.nix ./ranger.nix ./fonts.nix ./qt.nix ]; } diff --git a/config/users/kat/gui/firefox-tst.nix b/config/users/kat/gui/firefox-tst.nix deleted file mode 100644 index dc52deee..00000000 --- a/config/users/kat/gui/firefox-tst.nix +++ /dev/null @@ -1,138 +0,0 @@ -{ config, ... }: - -{ - home.file.".mozilla/tst.css".text = let base16 = config.kw.hexColors; in - '' - /* Hide border on tab bar, force its state to 'scroll', adjust margin-left for width of scrollbar. */ - #tabbar { - margin-top: calc(var(--pinned-tabs-area-size) - .15em); - position: absolute; - border: none !important; - overflow-y: scroll !important; - margin-left: -.5em; - } - - /* Hide .twisty and adjust margins so favicons have 7px on left. */ - .tab .twisty, .tab.pinned .twisty { - margin-left: -16px; - } - - /* Push tab labels slightly to the right so they're completely hidden in collapsed state */ - .tab .label, .tab.pinned .label { - margin-left: 7px; - } - /* Hide close buttons on tabs. */ - .tab .closebox { - visibility: collapse; - } - - /* Hide sound playing/muted button. */ - .sound-button::before { - display: none !important; - } - - /* Hide 'new tab' button. */ - .newtab-button { - display: none; - } - - /* ################################################ */ - /* ##### COLOR THEME ############################## */ - /* ################################################ */ - @keyframes spin { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(360deg); - } - } - @keyframes pulse { - 0% { - opacity: 0.75; - } - 100% { - opacity: 0.25; - } - } - * { - font-family: "Cozette", monospace !important; - } - :root { - background-color: ${base16.base00} !important; - } - #tabbar, #tabbar-container { - background-color: ${base16.base00} !important; - border-right: 1px solid ${base16.base01}; - box-shadow: none !important; - } - .tab { - background-color: ${base16.base01}; - color: ${base16.base05} !important; - box-shadow: none !important; - margin: 0.125em; - border-radius: 0.125em; - } - .tab.pinned { - background-color: ${base16.base0D}; - color: ${base16.base07} !important; - } - - .tab .favicon { - margin-left: 0.25em; - } - - .tab .label { - margin: 0.25em; - } - .tab:hover { - background-color: ${base16.base0C}FF !important; - color: ${base16.base07} !important; - } - .tab.discarded { - background-color: ${base16.base00}; - color: ${base16.base02} !important; - } - .tab.discarded:hover { - background-color: ${base16.base01} !important; - color: ${base16.base03} !important; - } - - :root .tab .highlighter::before { - display: none; - } - - .tab.active { - background-color: ${base16.base0D}FF; - color: ${base16.base07} !important; - } - .tab.active:hover { - background-color: ${base16.base0D}FF !important; - } - - @keyframes rainbow_animation { - 0% { - background-position: 0 0; - } - - 100% { - background-position: 100% 0; - } - } - /* Adjust style for tab that has sound playing. */ - .tab.sound-playing .label { - background: linear-gradient(to right, #6666ff, #0099ff , #00ff00, #ff3399, #6666ff); - -webkit-background-clip: text; - background-clip: text; - color: transparent; - animation: rainbow_animation 3s linear infinite; - animation-direction: alternate-reverse; - background-size: 400% 100%; - } - - /* Adjust style for tab that is muted. */ - .tab.muted { - opacity: 0.5; - } - ''; -} diff --git a/config/users/kat/gui/firefox-tst/default.nix b/config/users/kat/gui/firefox-tst/default.nix new file mode 100644 index 00000000..84f3ee89 --- /dev/null +++ b/config/users/kat/gui/firefox-tst/default.nix @@ -0,0 +1,19 @@ +{ stdenv, sass, base16 }: + +stdenv.mkDerivation ({ + pname = "firefox-tst-css"; + version = "0.0.1"; + + phases = [ "buildPhase" ]; + + src = ./tst.sass; + + buildInputs = [ + sass + ]; + + buildPhase = '' + substituteAll $src firefox-tst-substituted.sass + sass firefox-tst-substituted.sass $out --sourcemap=none + ''; +} // base16) diff --git a/config/users/kat/gui/firefox-tst/tst.sass b/config/users/kat/gui/firefox-tst/tst.sass new file mode 100644 index 00000000..86967bd9 --- /dev/null +++ b/config/users/kat/gui/firefox-tst/tst.sass @@ -0,0 +1,129 @@ +// Colours +$base00: @base00@ +$base01: @base01@ +$base02: @base02@ +$base03: @base03@ +$base04: @base04@ +$base05: @base05@ +$base06: @base06@ +$base07: @base07@ +$base08: @base08@ +$base09: @base09@ +$base0A: @base0A@ +$base0B: @base0B@ +$base0C: @base0C@ +$base0D: @base0D@ +$base0E: @base0E@ +$base0F: @base0F@ +// Fonts +$font_0: "Cozette" +$font_1: "monospace !important" + +#tabbar + margin-top: calc(var(--pinned-tabs-area-size) - .15em) + position: absolute + border: none !important + overflow-y: scroll !important + margin-left: -.5em + background-color: $base00 !important + border-right: 1px solid $base01 + box-shadow: none !important + +.tab + background-color: $base01 + color: $base05 !important + box-shadow: none !important + margin: 0.125em + border-radius: 0.125em + .twisty + margin-left: -16px + .highlighter::before + display: none + + &.pinned + background-color: $base0D + color: $base07 !important + .twisty + margin-left: -16px + + .label + margin-left: 7px + + + .label + margin-left: 7px + margin: 0.25em + + .closebox + visibility: collapse + + .favicon + margin-left: 0.25em + + &:hover + background-color: $base0C !important + color: $base07 !important + + &.discarded + background-color: $base00 + color: $base02 !important + &:hover + background-color: $base01 !important + color: $base03 !important + + + &.active + background-color: $base0D + color: $base07 !important + &:hover + background-color: $base0D !important + + + &.muted + opacity: 0.5 + + &.sound-playing .label + background: linear-gradient(to right, #6666ff, #0099ff , #00ff00, #ff3399, #6666ff) + background-clip: text + color: transparent + animation: rainbow_animation 3s linear infinite + animation-direction: alternate-reverse + background-size: 400% 100% + + +.sound-button::before + display: none !important + +.newtab-button + display: none + +* + font-family: $font_0, $font_1 + +#tabbar-container + background-color: $base00 !important + border-right: 1px solid $base01 + box-shadow: none !important + +@keyframes rainbow_animation + 0% + background-position: 0 0 + + 100% + background-position: 100% 0 +@keyframes spin + 0% + transform: rotate(0deg) + + 100% + transform: rotate(360deg) + + +@keyframes pulse + 0% + opacity: 0.75 + + 100% + opacity: 0.25 + + diff --git a/config/users/kat/gui/firefox.nix b/config/users/kat/gui/firefox.nix index c496169e..b23793fa 100644 --- a/config/users/kat/gui/firefox.nix +++ b/config/users/kat/gui/firefox.nix @@ -10,8 +10,12 @@ let "toolkit.legacyUserProfileCustomizations.stylesheets" = true; "svg.context-properties.content.enabled" = true; }; + firefox-tst = pkgs.callPackage ./firefox-tst { base16 = config.kw.hexColors; }; in { + + home.file.".mozilla/tst.css".source = firefox-tst; + programs.zsh.shellAliases = { ff-pm = "firefox --ProfileManager"; ff-main = "firefox -P main";