datguypiko / Firefox-Mod-Blur

Firefox Theme - For dark theme lovers / More compact / Modular / Blur
1.24k stars 59 forks source link

Some details... #116

Closed yiiyahui closed 6 months ago

yiiyahui commented 6 months ago

userChrome.css Hide Tab: D

/* ------------- Hide Tab bar with only one Tab  ----------------- */
#tabbrowser-tabs .tabbrowser-tab:only-of-type,
#tabbrowser-tabs .tabbrowser-tab:only-of-type + #tabbrowser-arrowscrollbox-periphery{
  display: none !important;
}
 /* ------------------ Downloads Panel Color-------------------- */
#downloadsPanel-mainView {
  --arrowpanel-background: var(--firefoxcss-main-bg-color) !important;

Find bar: f

/* ------------------------- Move find bar ------------------------ */
.browserContainer > findbar {
   position: absolute;
   top: -2px;
   right: 0px;
   contain: content;
   border-radius: 0 0 var(--toolbarbutton-border-radius) var(--toolbarbutton-border-radius);
   border-top: none !important;
}
/* press ESC to exit or remove ".findbar-closebutton"*/
findbar .findbar-find-status, findbar .checkbox-check, .findbar-closebutton {
   display: none !important;
}
findbar checkbox {
   border: 1px solid var(--input-border-color);
   border-radius: var(--toolbarbutton-border-radius);
   padding: 2px 4px !important;
   margin: -2px 4px !important;
   transition: 0.1s ease-in-out;
}
findbar checkbox[checked="true"] {
   background: var(--button-active-bgcolor);
   transition: 0.1s ease-in-out;
}

Sidebar: S

/* ------------------------- Sidebar  ----------------------------- */
#sidebar-header {border: none !important;}
search-textbox, search-box {
  appearance: none !important;
  padding: 3px;
  border: 1px solid var(--arrowpanel-border-color);
  border-radius: 4px;
  &:focus {border: 1px solid var(--firefoxcss-non-active-tabs) !important;}
}
/*Optional
#sidebar-splitter,#sidebar-close,{
  display: none !important;
} */
#viewButton {
  background-color: var(--firefoxcss-main-bg-color);
  border-radius: 4px;
  &:focus {background-color: var(--button-active-bgcolor) !important;}
}

Fullscreen Warning: ff

/* ------------------- Fullscreen Warning ------------------------- */
#fullscreen-warning {
  background-color: rgba(0, 0, 0, 0.5) !important;
  max-height: 48px !important;
  border: none !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

================================================================================================================================================================================ userContent.css

/* ------------------- About page color ------------------------- */
@-moz-document url-prefix("about:") {
  :root {
    --in-content-page-background: var(--firefoxcss-main-bg-color) !important;
       --in-content-box-background: var(--firefoxcss-search-bar-bg-color) !important;
       --in-content-table-background: var(--firefoxcss-search-bar-bg-color) !important;
       --newtab-primary-action-background: var(--firefoxcss-search-bar-bg-color) !important;
  }
}

I hope to improve some details for this theme

yiiyahui commented 6 months ago

and if set "browser.newtabpage.activity-stream.improvesearch.handoffToAwesomebar=false" in "about:config" After: s

@-moz-document url("about:home"),url("about:newtab") {
  body {
    --newtab-background-color: var(--firefoxcss-main-bg-color) !important;
    --newtab-primary-action-background: transparent !important;
    --newtab-primary-action-background-dimmed: transparent !important;
    .search-wrapper input { 
      border-radius: 20px !important;
      background-color: var(--firefoxcss-search-bar-bg-color) !important;
      box-shadow: none !important;
      border: 1px solid var(--firefoxcss-search-text-fill) !important;
      &:focus {box-shadow: var(--firefoxcss-search-box-shadow) !important;
  }
} 

add to userContent.css line 216

datguypiko commented 6 months ago

I will look into adding some of these on the next full rework version.