mirror of
https://github.com/gensokyo-zone/infrastructure.git
synced 2026-02-09 12:29:19 -08:00
SASS substitutor based stylesheet proof of concept
This commit is contained in:
kat witch
parent
d921f4a839
commit
6a992e012c
5 changed files with 153 additions and 139 deletions
|
|
@ -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 ];
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
'';
|
||||
}
|
||||
19
config/users/kat/gui/firefox-tst/default.nix
Normal file
19
config/users/kat/gui/firefox-tst/default.nix
Normal file
|
|
@ -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)
|
||||
129
config/users/kat/gui/firefox-tst/tst.sass
Normal file
129
config/users/kat/gui/firefox-tst/tst.sass
Normal file
|
|
@ -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
|
||||
|
||||
|
||||
|
|
@ -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";
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue