tridactly: use photon theme

2 files changed, 285 insertions, 52 deletions

diff --git a/.config/tridactyl/themes/r.css b/.config/tridactyl/themes/r.css
index 525f1f4..95d02f2 100644
--- a/.config/tridactyl/themes/r.css
+++ b/.config/tridactyl/themes/r.css
@@ -1,22 +1,250 @@
 /* vim: fdm=marker
  * */
 :root.TridactylThemeR {
-    --r-accent: #FAD689; /* rgb(250,214,137) */
+    /* {{{ photon-colours */
+
+    /* From https://github.com/overdodactyl/ShadowFox/blob/7dbe9343da87bde804e8fb88dd3b5eaaeb4817b2/css/common-files/color_variables.css */
+    --tridactyl-photon-colours-magenta-50: #ff1ad9;
+    --tridactyl-photon-colours-magenta-60: #ed00b5;
+    --tridactyl-photon-colours-magenta-70: #b5007f;
+    --tridactyl-photon-colours-magenta-80: #7d004f;
+    --tridactyl-photon-colours-magenta-90: #440027;
+    --tridactyl-photon-colours-purple-50: #9400ff;
+    --tridactyl-photon-colours-purple-60: #8000d7;
+    --tridactyl-photon-colours-purple-70: #6200a4;
+    --tridactyl-photon-colours-purple-80: #440071;
+    --tridactyl-photon-colours-purple-90: #25003e;
+    --tridactyl-photon-colours-blue-40: #45a1ff;
+    --tridactyl-photon-colours-blue-50: #0a84ff;
+    --tridactyl-photon-colours-blue-60: #0060df;
+    --tridactyl-photon-colours-blue-70: #003eaa;
+    --tridactyl-photon-colours-blue-80: #002275;
+    --tridactyl-photon-colours-blue-90: #000f40;
+    --tridactyl-photon-colours-teal-50: #00feff;
+    --tridactyl-photon-colours-teal-60: #00c8d7;
+    --tridactyl-photon-colours-teal-70: #008ea4;
+    --tridactyl-photon-colours-teal-80: #005a71;
+    --tridactyl-photon-colours-teal-90: #002d3e;
+    --tridactyl-photon-colours-green-50: #30e60b;
+    --tridactyl-photon-colours-green-60: #12bc00;
+    --tridactyl-photon-colours-green-70: #058b00;
+    --tridactyl-photon-colours-green-80: #006504;
+    --tridactyl-photon-colours-green-90: #003706;
+    --tridactyl-photon-colours-yellow-50: #ffe900;
+    --tridactyl-photon-colours-yellow-60: #d7b600;
+    --tridactyl-photon-colours-yellow-70: #a47f00;
+    --tridactyl-photon-colours-yellow-80: #715100;
+    --tridactyl-photon-colours-yellow-90: #3e2800;
+    --tridactyl-photon-colours-red-50: #ff0039;
+    --tridactyl-photon-colours-red-60: #d70022;
+    --tridactyl-photon-colours-red-70: #a4000f;
+    --tridactyl-photon-colours-red-80: #5a0002;
+    --tridactyl-photon-colours-red-90: #3e0200;
+    --tridactyl-photon-colours-orange-50: #ff9400;
+    --tridactyl-photon-colours-orange-60: #d76e00;
+    --tridactyl-photon-colours-orange-70: #a44900;
+    --tridactyl-photon-colours-orange-80: #712b00;
+    --tridactyl-photon-colours-orange-90: #3e1300;
+    --tridactyl-photon-colours-grey-10: #f9f9fa;
+    --tridactyl-photon-colours-grey-20: #ededf0;
+    --tridactyl-photon-colours-grey-30: #d7d7db;
+    --tridactyl-photon-colours-grey-40: #b1b1b3;
+    --tridactyl-photon-colours-grey-50: #737373;
+    --tridactyl-photon-colours-grey-60: #4a4a4f;
+    --tridactyl-photon-colours-grey-70: #38383d;
+    --tridactyl-photon-colours-grey-80: #2a2a2e;
+    --tridactyl-photon-colours-grey-90: #0c0c0d;
+    --tridactyl-photon-colours-code-green: #86de74 !important;
+    --tridactyl-photon-colours-warning-color: #fce19f;
+    --tridactyl-photon-colours-warning-background-color: #44391f;
+    --tridactyl-photon-colours-theme-highlight-green: #86de74;
+    --tridactyl-photon-colours-theme-highlight-blue: #75bfff;
+    --tridactyl-photon-colours-theme-highlight-purple: #b98eff;
+    --tridactyl-photon-colours-theme-highlight-red: #ff7de9;
+    --tridactyl-photon-colours-theme-highlight-yellow: #fff89e;
+    --tridactyl-photon-colours-theme-highlight-bluegrey: #5e88b0;
+    --tridactyl-photon-colours-theme-highlight-lightorange: #d99b28;
+    --tridactyl-photon-colours-theme-highlight-orange: #d96629;
+    --tridactyl-photon-colours-theme-highlight-pink: #df80ff;
+    --tridactyl-photon-colours-tone-1: var(--tridactyl-photon-colours-grey-10);
+    --tridactyl-photon-colours-tone-2: var(--tridactyl-photon-colours-grey-20);
+    --tridactyl-photon-colours-tone-3: var(--tridactyl-photon-colours-grey-30);
+    --tridactyl-photon-colours-tone-4: var(--tridactyl-photon-colours-grey-40);
+    --tridactyl-photon-colours-tone-5: var(--tridactyl-photon-colours-grey-50);
+    --tridactyl-photon-colours-tone-6: var(--tridactyl-photon-colours-grey-60);
+    --tridactyl-photon-colours-tone-7: var(--tridactyl-photon-colours-grey-70);
+    --tridactyl-photon-colours-tone-8: var(--tridactyl-photon-colours-grey-80);
+    --tridactyl-photon-colours-tone-9: var(--tridactyl-photon-colours-grey-90);
+    --tridactyl-photon-colours-accent-1: var(
+        --tridactyl-photon-colours-blue-40
+    );
+    --tridactyl-photon-colours-accent-2: var(
+        --tridactyl-photon-colours-blue-50
+    );
+    --tridactyl-photon-colours-accent-3: var(
+        --tridactyl-photon-colours-blue-60
+    );
+    --tridactyl-photon-colours-in-content-page-color: var(
+        --tridactyl-photon-colours-tone-4
+    ) !important;
+    --tridactyl-photon-colours-in-content-page-background: var(
+        --tridactyl-photon-colours-tone-7
+    ) !important;
+    --tridactyl-photon-colours-in-content-text-color: var(
+        --tridactyl-photon-colours-tone-3
+    ) !important;
+    --tridactyl-photon-colours-in-content-selected-text: var(
+        --tridactyl-photon-colours-tone-1
+    ) !important;
+    --tridactyl-photon-colours-in-content-box-background: var(
+        --tridactyl-photon-colours-tone-6
+    ) !important;
+    --tridactyl-photon-colours-in-content-box-background-odd: #f3f6fa;
+    --tridactyl-photon-colours-in-content-box-background-hover: var(
+        --tridactyl-photon-colours-tone-6
+    ) !important;
+    --tridactyl-photon-colours-in-content-box-background-active: var(
+        --tridactyl-photon-colours-tone-6
+    ) !important;
+    --tridactyl-photon-colours-in-content-box-border-color: var(
+        --tridactyl-photon-colours-tone-5
+    ) !important;
+    --tridactyl-photon-colours-in-content-item-hover: rgba(0, 149, 221, 0.25);
+    --tridactyl-photon-colours-in-content-item-selected: var(
+        --tridactyl-photon-colours-tone-8
+    ) !important;
+    --tridactyl-photon-colours-in-content-border-highlight: var(
+        --tridactyl-photon-colours-accent-1
+    ) !important;
+    --tridactyl-photon-colours-in-content-border-focus: var(
+        --tridactyl-photon-colours-accent-1
+    ) !important;
+    --tridactyl-photon-colours-in-content-border-color: var(
+        --tridactyl-photon-colours-tone-6
+    ) !important;
+    --tridactyl-photon-colours-in-content-category-outline-focus: 1px dotted
+        #0a84ff;
+    --tridactyl-photon-colours-in-content-category-text: var(
+        --tridactyl-photon-colours-tone-4
+    ) !important;
+    --tridactyl-photon-colours-in-content-category-text-active: #0c0c0d;
+    --tridactyl-photon-colours-in-content-category-text-selected: var(
+        --tridactyl-photon-colours-accent-1
+    ) !important;
+    --tridactyl-photon-colours-in-content-category-text-selected-active: #0060df;
+    --tridactyl-photon-colours-in-content-category-background-hover: rgba(
+        12,
+        12,
+        13,
+        0.1
+    );
+    --tridactyl-photon-colours-in-content-category-background-active: rgba(
+        12,
+        12,
+        13,
+        0.15
+    );
+    --tridactyl-photon-colours-in-content-category-background-selected-hover: rgba(
+        12,
+        12,
+        13,
+        0.15
+    );
+    --tridactyl-photon-colours-in-content-category-background-selected-active: rgba(
+        12,
+        12,
+        13,
+        0.2
+    );
+    --tridactyl-photon-colours-in-content-tab-color: #424f5a;
+    --tridactyl-photon-colours-in-content-link-color: var(
+        --tridactyl-photon-colours-accent-1
+    ) !important;
+    --tridactyl-photon-colours-in-content-link-color-hover: var(
+        --tridactyl-photon-colours-accent-2
+    ) !important;
+    --tridactyl-photon-colours-in-content-link-color-active: #003eaa;
+    --tridactyl-photon-colours-in-content-link-color-visited: #0a8dff;
+    --tridactyl-photon-colours-in-content-primary-button-background: var(
+        --tridactyl-photon-colours-accent-2
+    ) !important;
+    --tridactyl-photon-colours-in-content-primary-button-background-hover: var(
+        --tridactyl-photon-colours-accent-3
+    ) !important;
+    --tridactyl-photon-colours-in-content-primary-button-background-active: var(
+        --tridactyl-photon-colours-accent-3
+    ) !important;
+    --tridactyl-photon-colours-in-content-table-border-dark-color: var(
+        --tridactyl-photon-colours-tone-7
+    ) !important;
+    --tridactyl-photon-colours-in-content-table-header-background: var(
+        --tridactyl-photon-colours-accent-2
+    ) !important;
+    --tridactyl-photon-colours-theme-selection-background: var(
+        --tridactyl-photon-colours-accent-2
+    ) !important;
+    --tridactyl-photon-colours-theme-selection-background-hover: var(
+        --tridactyl-photon-colours-accent-1
+    ) !important;
+    --tridactyl-photon-colours-in-content-category-header-background: var(
+        --tridactyl-photon-colours-tone-8
+    ) !important;
+    --tridactyl-photon-colours-selected-icon-fill-color: var(
+        --tridactyl-photon-colours-tone-2
+    ) !important;
+    --tridactyl-photon-colours-in-content-dark-header-background: var(
+        --tridactyl-photon-colours-tone-9
+    ) !important;
+    --tridactyl-photon-colours-secure-connection-color: var(
+        --tridactyl-photon-colours-accent-1
+    );
+    --tridactyl-photon-colours-theme-sidebar-background: #1b1b1d !important;
+    --tridactyl-photon-colours-cm-background: var(
+        --tridactyl-photon-colours-tone-8
+    ) !important;
+    --tridactyl-photon-colours-cm-selection: #353b48 !important;
+    --tridactyl-photon-colours-cm-marker: #555 !important;
+    --tridactyl-photon-colours-cm-linenumber: #58575c !important;
+    --tridactyl-photon-colours-cm-cursor: #fff !important;
+    --tridactyl-photon-colours-cm-active-line-background: rgba(
+        185,
+        215,
+        253,
+        0.15
+    ) !important;
+    --tridactyl-photon-colours-cm-matching-bracket: rgba(
+        255,
+        255,
+        255,
+        0.25
+    ) !important;
+    --tridactyl-photon-colours-cm-search-background: rgba(
+        24,
+        29,
+        32,
+        1
+    ) !important;
+    --tridactyl-photon-colours-cm-red: #de7474 !important;
+    --tridactyl-photon-colours-start-indicator-for-updater-scripts: black;
+    --tridactyl-photon-colours-end-indicator-for-updater-scripts: black;
+    --tridactyl-photon-colours-dummy-variable-for-updater-scripys: black;
+
+    /* }}} */
+
+    --tridactyl-fg: var(--tridactyl-photon-colours-in-content-page-color);
+    --tridactyl-bg: var(--tridactyl-photon-colours-in-content-page-background);
+
+    --tridactyl-scrollbar-color: var(--tridactyl-photon-colours-tone-8)
+        var(--tridactyl-fg);
 
-    --tridactyl-bg: #1c1c1c;
-    --tridactyl-bg-second: #38383d;
-    --tridactyl-fg: #f9f9fa;
-    --tridactyl-of-bg: #005CAF;
-    --tridactyl-of-fg: #f9f9fa;
-
-    --tridactyl-font-family: "Iosevka Sparkle", monospace;
-    --tridactyl-font-family-sans: sans-serif;
-    --tridactyl-font-size: 12pt !important;
-    --tridactyl-small-font-size: 12pt;
-    --tridactyl-cmdl-bg: var(--tridactyl-bg);
-    --tridactyl-cmdl-small-font-size: 12pt;
-    --tridactyl-cmplt-bg: var(--tridactyl-bg);
-    --tridactyl-cmplt-small-font-size: 12pt;
+    --tridactyl-cmdl-fg: var(--tridactyl-photon-colours-in-content-text-color);
+    --tridactyl-cmdl-bg: var(
+        --tridactyl-photon-colours-in-content-category-header-background
+    );
+
+    /* --tridactyl-header-first-bg: var(--tridactyl-photon-colours-in-content-category-header-background); */
+    /* --tridactyl-header-second-bg: var(--tridactyl-photon-colours-in-content-category-header-background); */
+    /* --tridactyl-header-third-bg: var(--tridactyl-header-first-bg); */
 
     --tridactyl-header-first-bg: #333;
     --tridactyl-header-second-bg: #222;
@@ -25,24 +253,45 @@
     --tridactyl-cmplt-border-top: 1px solid
         var(--tridactyl-photon-colours-in-content-category-header-background);
 
-    --tridactyl-url-fg: var(--tridactyl-of-bg);
+    --tridactyl-url-fg: var(--tridactyl-photon-colours-code-green);
     --tridactyl-url-bg: var(--tridactyl-bg);
-    --tridactyl-url-text-decoration: none;
+
+    --tridactyl-of-fg: var(--tridactyl-photon-colours-warning-color);
+    --tridactyl-of-bg: var(--tridactyl-photon-colours-warning-background-color);
 
     /* Hints are not photon coloured. Feel free to experiment with that */
 
-    --tridactyl-hintspan-fg: var(--tridactyl-of-fg);
-    --tridactyl-hintspan-bg: var(--tridactyl-of-bg);
+    --tridactyl-hintspan-fg: white;
+    --tridactyl-hintspan-bg: #204e8a;
 
-    --tridactyl-hint-active-fg: var(--tridactyl-fg);
-    --tridactyl-hint-active-bg: rgba(250,214,137, 0.75);
-    --tridactyl-hint-active-outline: 1px solid var(--r-accent);
+    --tridactyl-hint-active-fg: #333;
+    --tridactyl-hint-active-bg: #88ff00;
+    --tridactyl-hint-active-outline: 1px solid #000;
 
     --tridactyl-hint-bg: rgba(13, 31, 54, 0.25);
     --tridactyl-hint-outline: 1px solid var(--tridactyl-hintspan-bg);
 
-    --tridactyl-highlight-box-bg: none;
-    --tridactyl-highlight-box-fg: none;
+    --tridactyl-highlight-box-bg: var(
+        --tridactyl-photon-colours-in-content-box-background
+    );
+    --tridactyl-highlight-box-fg: var(
+        --tridactyl-photon-colours-in-content-text-color
+    );
+
+    --r-accent: #FAD689; /* rgb(250,214,137) */
+}
+
+:root.TridactylThemeR.TridactylOwnNamespace input[id^="spoiler"] ~ .spoiler {
+    border-color: var(--tridactyl-photon-colours-in-content-box-border-color);
+}
+
+:root.TridactylThemeR.TridactylOwnNamespace {
+  scrollbar-color: var(--tridactyl-scrollbar-color);
+  scrollbar-width: thin;
+}
+
+:root.TridactylThemeR.TridactylOwnNamespace a {
+    color: var(--tridactyl-photon-colours-accent-1);
 }
 
 :root.TridactylThemeR #command-line-holder {
@@ -58,18 +307,17 @@
     display: none;
 }
 
-/* :root.TridactylThemeR #tridactyl-colon { */
-/*     margin-left: 2px; */
-/* } */
 :root.TridactylThemeR #tridactyl-colon::before {
+    margin-left: 2px;
     content: " > ";
 }
 
-/* :root.TridactylThemeR #completions .focused, */
-/* :root.TridactylThemeR #completions .focused .url { */
-/*     background: var(--tridactyl-bg-second); */
-/*     text-decoration: italic; */
-/* } */
+:root.TridactylThemeR #completions .focused,
+:root.TridactylThemeR #completions .focused .url {
+    background: var(--r-accent);
+    color: var(--tridactyl-bg);
+    text-decoration: italic;
+}
 
 :root.TridactylThemeR #cmdline_iframe {
     position: fixed !important;
@@ -83,16 +331,3 @@
 :root.TridactylThemeR.TridactylOwnNamespace input[id^="spoiler"] ~ .spoiler {
     border-color: var(--r-accent);
 }
-
-/* These rules have greater specificity than the rules applying the variables
- * above, which causes *issues*. */
-
-/* :root.TridactylThemeR.TridactylOwnNamespace */
-/* a:link { */
-/*     color: var(--tridactyl-photon-colours-in-content-link-color); */
-/* } */
-
-/* :root.TridactylThemeR.TridactylOwnNamespace */
-/* a:link:visited { */
-/*     --tridactyl-photon-colours-in-content-link-color-visited: #0a8dff; */
-/* } */
diff --git a/.config/tridactyl/tridactylrc b/.config/tridactyl/tridactylrc
index 62a2753..458b635 100644
--- a/.config/tridactyl/tridactylrc
+++ b/.config/tridactyl/tridactylrc
@@ -102,13 +102,11 @@ unbindurl reddit.com h
 unbindurl reddit.com x
 unbindurl reddit.com l
 
-unbindurl 4chan.org t
-unbindurl 4chan.org T
-unbindurl 4chan.org j
-unbindurl 4chan.org k
-unbindurl 4chan.org x
-unbindurl 4chan.org B
-unbindurl 4chan.org G
+unbindurl 4chan.*.org T
+unbindurl 4chan.*.org j
+unbindurl 4chan.*.org k
+unbindurl 4chan.*.org x
+unbindurl 4chan.*.org B
 
 set leavegithubalone false
 set blacklistkeys ["/","<Space>",";"]