feat: initial commit

browser.css

@@ -0,0 +1,20 @@
+#appcontent {
+  margin: 8px;
+  border: var(--border-width) solid var(--border);
+  border-radius: var(--rounding);
+  padding: 8px;
+  &:hover {
+    color: var(--accent);
+    border-color: var(--accent) !important;
+  }
+}
+#tabbrowser-tabbox::before {
+  content: "main";
+  background-color: var(--lwt-accent-color);
+  position: absolute;
+  margin: -20px 4px;
+  padding: 0 4px;
+  z-index: 9;
+  font-size: 1.15em;
+}
+

content/sidebery.css

@@ -0,0 +1,170 @@
+/*== ShyFox Sidebery ===============================================================================================================================
+
+Styles for Sidebery extension
+
+
+--- VARIABLES ---------------------------------------------------------------------------------------------------------------------------------------
+
+*/
+
+@-moz-document regexp("^moz-extension://.*?/sidebar/sidebar.html")
+{
+  /* wrap start */
+
+  #root.root {
+    --general-border-radius: var(--rounding) !important;
+    --general-margin: 8px !important;
+    --tabs-font: 1rem "SF Mono" !important;
+
+    --button-size: 35px;
+    --pin-favicon-size: 30px;
+
+    --nav-btn-margin: calc(var(--margin) / 2) !important;
+    --nav-btn-width: var(--button-size) !important;
+    --nav-btn-height: var(--button-size) !important;
+    --nav-btn-len-margin: calc(var(--rounding) / 4) !important;
+
+    --audio-btn-round-margin: calc(var(--rounding) / 2) !important;
+
+    --tabs-audio-btn-width: 22px !important;
+    --tabs-margin: 6px !important;
+    --tabs-height: var(--button-size) !important;
+    --tabs-inner-gap: calc(var(--margin) / 2) !important;
+    --tabs-border-radius: var(--rounding) !important;
+
+    --frame-el-overlay-selected-border: var(--s-toolbar-fg) !important;
+    --toolbar-el-overlay-selected-border: var(--s-toolbar-fg) !important;
+    --status-notice: var(--s-toolbar-fg) !important;
+  }
+
+
+  /*
+   * ─[ pinned tabs ]──────────────────────────────────────────────────────
+  */
+
+  /* size calculation */
+  .PinnedTabsBar .tab-wrapper .Tab {
+    --n: 3;
+    --m: 1;
+
+    width: calc(
+      100vw / var(--n) - var(--tabs-margin) * (1 / var(--n) + 1)
+    ) !important;
+
+    height: calc(((100vw - var(--tabs-margin)) / 3.6) / var(--m)) !important;
+  }
+
+  /* 1 pinned tab */
+  .PinnedTabsBar .tab-wrapper:nth-child(1):last-child .Tab {
+    --n: 1;
+    --m: 1.4;
+  }
+
+  /* 2 tabs in bottom row */
+  .PinnedTabsBar:has(.tab-wrapper:nth-child(3n + 2):last-child)
+    .tab-wrapper:nth-last-child(-n + 2)
+    .Tab {
+    --n: 2;
+    --m: 1.2;
+  }
+
+  /* 4 tabs in bottom row */
+  .PinnedTabsBar:has(.tab-wrapper:nth-child(3n + 4):last-child)
+    .tab-wrapper:nth-last-child(-n + 4)
+    .Tab {
+    --n: 4;
+    --m: 1.3;
+  }
+
+  /* audio icon */
+  .Tab[data-pin="true"] > .body > .audio {
+    background: transparent !important;
+    box-shadow: none !important;
+    right: var(--audio-btn-round-margin) !important;
+    top: var(--audio-btn-round-margin) !important;
+  }
+
+  /* bigger favicon */
+  .Tab[data-pin="true"] :is(.fav, .fav-icon) {
+    width: var(--pin-favicon-size) !important;
+    height: var(--pin-favicon-size) !important;
+  }
+
+  /* shadow, outline and background */
+  .Tab[data-pin="true"] .body {
+    background-color: var(--toolbar-bg) !important;
+  }
+
+  /* remove bottom margin */
+  .PinnedTabsBar {
+    margin-bottom: 0px !important;
+  }
+
+  /*
+   * ─[ general tab stuff ]────────────────────────────────────────────────
+  */
+  .Tab[data-active="true"] .body {
+    box-shadow: none !important;
+    background-color: color-mix(in hsl, currentColor 8%, var(--toolbar-bg)) !important;
+  }
+
+  .Tab .body {
+    text-transform: lowercase;
+  }
+
+  /*
+   * ─[ other ]────────────────────────────────────────────────────────────
+  */
+
+  /* consistent navbar background */
+  #nav_bar {
+    background-color: transparent !important;
+  }
+
+  /* padding */
+  #nav_bar {
+    padding-top: var(--nav-btn-margin) !important;
+    padding-bottom: var(--general-margin) !important;
+  }
+
+  .BottomBar {
+    padding: var(--nav-btn-margin) !important;
+  }
+
+  /* popup */
+  .popup {
+    margin: var(--tabs-margin) !important;
+  }
+  .popup-container {
+    background-color: transparent !important;
+  }
+
+  /* search */
+  #search_bar {
+    margin: 4px !important;
+  }
+  #search_bar[data-showed="false"] {
+    display: none !important;
+  }
+  #search_bar .clear-btn {
+    margin-inline-end: var(--general-margin);
+  }
+
+  .NavigationBar {
+    box-shadow: none !important;
+  }
+
+  /* accent colored selection */
+  ::selection {
+    background: var(--s-toolbar-fg) !important;
+  }
+
+  /* notification */
+  .notification {
+    border-radius: var(--rounding) !important;
+    &::after {
+      top: calc(var(--rounding) / 4 + 3px) !important;
+      right: calc(var(--rounding) / 4 + 3px) !important;
+    }
+  }
+} /* wrap end */