Skip to content

Notion customizations - Shi Institute by jackbuehner

Details

Authorjackbuehner

LicenseNo License

Categorynotion.so/shi-institute

Created

Updated

Size10 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Customize fonts, colors, and headings for the Shi Institute's notion workspace.

Notes

Userstyle doesn't have notes.

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.
/* ==UserStyle==
@name           Notion customizations - Shi Institute
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    A new userstyle
@author         Jack Buehner
@homepageURL    https://userstyles.world/style/12061/notion-customizations-shi-institute
@preprocessor   default
@var            text    bodyFont              "Body font"       "Lato, sans-serif"
@var            text    codeFont              "Code font"                   "monospace"
@var            text    headingFont           "Heading font"                "Rubik"
@var            number  headingFontWeight     "Heading font weight"         600
@var            text    titlebarBackground    "Titlebar background color"   "#4f2883"
@var            text    titlebarColor         "Titlebar text color"         "#e0e0e0"
@var            text    sidebarBackgound      "Sidebar background color"    ""
@var            text    sidebarColor          "Sidebar text color"          ""
@var            text    sidebarBorderColor    "Sidebar border color"        ""
@var            text    pageBackground        "Page background color (dark mode only)"       ""
@var            text    overlayBackground     "Side peak background color (dark mode only)"       ""
@var            text    printMargin           "Print margin"                "0.5in"
==/UserStyle== */
@-moz-document url-prefix("https://www.notion.so/shi-institute/") {
  /* Page Backgrounds */
  
  /* page background */
  *[style*='background: rgb(25, 25, 25);'] {
    background-color: var(--pageBackground) !important;
  }

  /* side peak background */
  [style*='background: rgb(32, 32, 32);'] {
    background-color: var(--overlayBackground) !important;
  }

  /* callout block outlines to increase contrast since we do not
     change the background */
  .note > div {
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 8%);
  }
}

@-moz-document url-prefix("https://www.notion.so/shi-institute/") {
  /* Fonts */
  
  /* set font everywehre */
  .notion-app-inner {
    font-family: var(--bodyFont, serif) !important;
  }

  /* restore serif font option */
  .notion-page-content[style*='font-family: Lyon-Text'] {
    font-family: Lyon-Text, Georgia, ui-serif, serif !important;
  }

  /* set font in code blocks back to a code font */
  .notion-code-block .notranslate * {
    font-family: var(--codeFont, monospace);
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--headingFont, var(--bodyFont, sans-serif)) !important;
    font-stretch: normal;
    font-optical-sizing: auto;
    -webkit-font-smoothing: antialiased;
    font-weight: var(--headingFontWeight, 600) !important;
  }

  .shadow-cursor-breadcrumb * {
    font-family: var(--headingFont, var(--bodyFont, sans-serif)) !important;
    font-stretch: normal;
    font-optical-sizing: auto;
    -webkit-font-smoothing: antialiased;
    line-height: 14px;
  }
}
@-moz-document url-prefix("https://www.notion.so/shi-institute/") {
  /* Titlebar */
  
  html,
  header[style],
  .notion-topbar,
  html:not([data-wco="true"]) .notion-sidebar-switcher {
    background: var(--titlebarBackground) !important;
  }
  html:not([data-wco="true"]) .notion-sidebar-switcher {
    margin: 0 !important;
    width: 100% !important;
    height: 45px !important;
  }

  html[data-wco="true"] .notion-sidebar-switcher {
    background-color: var(--sidebarBackgound) !important;
  }

  html:not([data-wco="true"]) .notion-sidebar-switcher {
    margin-bottom: 20px !important;
  }

  .notion-topbar *,
  html:not([data-wco="true"]) .notion-sidebar-switcher :is(.notranslate, .notion-close-sidebar, .notion-open-sidebar) * {
    color: var(--titlebarColor) !important;
    fill: currentColor !important;
  }
  
  .notion-topbar [role="button"] {
    padding: 0 2px !important;
  }
}
@-moz-document url-prefix("https://www.notion.so/shi-institute/") {
  /* Sidebar */
  
  /* make the entire sidebar scrollable */
  .notion-sidebar > div:nth-child(3) {
    overflow: auto !important;
  }
  .notion-sidebar .notion-scroller {
    overflow: inherit !important;
  }
  .notion-sidebar > div:nth-child(3) > div:nth-child(1) > div:nth-child(1) {
    position: sticky;
    top: 0;
  }
  *:has(> .notion-sidebar-switcher) {
    z-index: 10;
  }

  /* change the background color if it is defined */
  .notion-sidebar,
  .notion-sidebar > div:first-child {
    background-color: var(--sidebarBackgound) !important;
  }

  /* change the text color if it is defined */
  .notion-sidebar .notion-scroller * {
    color: var(--sidebarColor) !important;
    fill: var(--sidebarColor) !important;
  }
  .notion-sidebar > div:nth-child(3) {
    /* global links section section */
    color: var(--sidebarColor) !important;
  }
  .notion-sidebar > div:nth-child(3) svg {
    /* global links section section */
    fill: var(--sidebarColor) !important;
  }

  .notion-frame {
    border-left: 1px solid var(--sidebarBorderColor);
  }
}

@-moz-document url-prefix("https://www.notion.so/shi-institute/") {
  /* iFrames */
  
  iframe {
    background-color: white !important;
  }
}

@-moz-document url-prefix("https://www.notion.so/shi-institute/") {
  /* Printing */
  
  @media print {
    /* header image */
    :is(.layout-full, .whenContentEditable) > .pseudoSelection[style="user-select: none; --pseudoSelection--background: transparent; width: 100%; display: flex; flex-direction: column; align-items: center; flex-shrink: 0; flex-grow: 0; z-index: 2;"] {
      display: none !important
    }

    /* title area icon */
    :is(.layout-content, div[style="width: 100%; display: flex; flex-direction: column; align-items: center; flex-shrink: 0; flex-grow: 0;"]) .notion-record-icon[aria-label*='Change page icon'] {
      display: none !important
    }

    /* metadata */
    .layout :is(.layout-header-detailSections, .notion-page-details-controls),
    div[style="width: 100%; display: flex; flex-direction: column; align-items: center; flex-shrink: 0; flex-grow: 0;"]:has([aria-label="Page properties"]) {
      display: none !important;
    }

    /* remove padding on sides */
    .layout {
      --margin-width: 0;
      --content-width: 100%;
    }
    .notion-frame [style*='padding-left: calc(96px + env(safe-area-inset-left));'] {
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
    
    /* remove empty block placeholder */
  /*div[placeholder*="Press"] {
      display: none !important;
    } */
  }

  /* half-inch page margins */
  @page {
    margin: var(--printMargin, 0.5in);
  }
}
@-moz-document regexp("^https:\\/\\/furman\\.app\\.box\\.com(\\/(folder)\\/(.*)(\\?notion-embed))?$") {
  /* Box Folder Embeds */
  
  /* hide header */
  header.header, .bdl-CollapsibleSidebar-wrapper, .action-bar {
    display: none !important;
  }

  /* hide sidebar */
  aside.sidebar, button.SidebarToggleButton {
    display: none !important;
  }
  .ItemListLayout-mainContent {
    padding-right: 0 !important;
  }

  /* remove space around file list */
  .files-list {
    padding: 0 !important;
  }
  .ItemListLayout {
    margin: 0 !important;
  }

  /* make table rows shorter */
  .ReactVirtualized__Table__row {
    height: 32px !important;
    top: 0 !important;
    position: relative !important;
  }
  .ReactVirtualized__Table__row svg {
    height: 22px;
  }
  .ReactVirtualized__Table__row .file-list-icon {
    flex: 0 0 22px !important;
    margin: 0 4px 0 1px !important;
  }
  .ListView-item-metadata {
    display: none !important;
  }
}

@-moz-document url-prefix("https://www.notion.so/shi-institute/") {
  /* PWA Window Controls Overlay */
  
  html[data-wco="true"] .notion-topbar, html[data-wco="true"] .notion-topbar > div:nth-child(1) {
    height: env(titlebar-area-height, 45px) !important;
    width: env(titlebar-area-width, 100%);
  }
  
  html[data-wco="true"] .notion-topbar {
    position: absolute !important;
    top: env(titlebar-area-y, 0);
    left: env(titlebar-area-x, 0);
    z-index: 999999999999;
    -webkit-app-region: drag;
    app-region: drag;  
  }
  
  html[data-wco="true"] .notion-topbar [role="button"], html[data-wco="true"] .notion-topbar a {
    -webkit-app-region: no-drag;
    app-region: no-drag;
  }
  
  .notion-peek-renderer {
    -webkit-app-region: no-drag;
    app-region: no-drag;
    --theme--page_preview-padding: 0;
  }
  
  html[data-wco="true"] header[style] {
    margin-bottom: env(titlebar-area-height, 45px);
  }
  
  html[data-wco="true"] .notion-sidebar-container, html[data-wco="true"] .notion-peek-renderer {
    margin-top: env(titlebar-area-height, 45px);
  }
    
    
    
    
    
    
  html[data-wco="true"] .notion-topbar svg {
    width: 16px !important;
    height: 16px !important;
  }
  
  html[data-wco="true"] .notion-topbar * {
    font-family: 'Segoe UI Variable', 'Segoe UI', sans-serif !important;
    font-size: 12px !important;
  }
  
  html[data-wco="true"] .notion-topbar .notion-record-icon {
    display: none !important;
  }
  
  html[data-wco="true"] .notion-topbar .shadow-cursor-breadcrumb > *:first-child::before {
    content: '';
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/e/e9/Notion-logo.svg/100px-Notion-logo.svg.png?20220918151013);
    width: 16px;
    height: 16px;
    background-size: contain;
    margin-right: 14px;
    margin-left: 2px;
  }

}
@-moz-document url-prefix("https://www.notion.so/shi-institute/") {
  /* Miscellaneous fixes */
  
  /*  The hidden groups dropdown on the board view (at the bottom of the view) has a large min-width applied to it that makes the view so wide that some elements are shifted extremely far to the right */
  div[style='display: flex; min-width: 2800px;'], div[style='display: flex; min-width: 1400px;'] {
    min-width: 200px !important;
  }
  
  /*  The hidden groups label on the board view (at the right of the view) has a large left applied to it that makes it too far right */
  .notion-board-view > .notion-collection_view_page-block:first-child > div:first-c...

Reviews

No reviews yet.