styled-components#createGlobalStyle JavaScript Examples

The following examples show how to use styled-components#createGlobalStyle. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: index.js    From uniswap-v1-frontend with GNU General Public License v3.0 6 votes vote down vote up 
GlobalStyle = createGlobalStyle`
  @import url('https://rsms.me/inter/inter.css');
  html { font-family: 'Inter', sans-serif; }
  @supports (font-variation-settings: normal) {
    html { font-family: 'Inter var', sans-serif; }
  }
  
  html,
  body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;    
  }

  body > div {
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

  html {
    font-size: 16px;
    font-variant: none;
    color: ${({ theme }) => theme.textColor};
    background-color: ${({ theme }) => theme.backgroundColor};
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
`
Example #2
Source File: GlobalStyles.js    From foster-together-fe with MIT License 6 votes vote down vote up 
GlobalStyle = createGlobalStyle`
  ${normalize}
 
  * {
    box-sizing: border-box;
    font-size: 62.5%;
    max-width: 100%;
    -webkit-font-smoothing: antialiased;
  }

  body {
    font-family: 'Roboto', sans-serif;
  }

  span,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  a,
  address,
  ol,
  ul,
  li,
  form,
  label,
  table,
  caption {
    font-size: 1.6rem;
}
`
Example #3
Source File: GlobalStyle.js    From roomie-frontend with MIT License 6 votes vote down vote up 
GlobalStyle = createGlobalStyle`

:root {
  --accent-color: #BACD25;
}

* {
  box-sizing: border-box;
}

body {
    margin: 0;
    font-family: 'Montserrat', sans-serif;;
    background-color: white;
  }

  ::-webkit-scrollbar {
    display: none;
  }
  
  input:-webkit-autofill,
  input:-webkit-autofill:hover, 
  input:-webkit-autofill:focus, 
  input:-webkit-autofill:active  {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
  

`
Example #4
Source File: globalStyles.js    From Lightspeed-react with MIT License 6 votes vote down vote up 
GlobalStyle = createGlobalStyle`
    *{
        padding: 0;
        margin:0;
        border: 0;
        font-family: 'Poppins', sans-serif;
        font-style: normal;
        text-align:center;
    }

    body{
        background-color: #1f2128;
    }

    .App{
        text-align:center;
    }

    h4 {
  font-weight: 500;
  font-size: 32px;
  line-height: 48px;
  letter-spacing: -0.5px;
}

h6 {
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
}
`
Example #5
Source File: _app.js    From website with MIT License 6 votes vote down vote up 
GlobalStyle = createGlobalStyle`
  body {
    margin: 0 auto;
    font-family: 'Trebuchet MS';
  }

  pre {
    font-family: 'Trebuchet MS';
    margin: 0;
    word-wrap: break-word;
    white-space: pre-wrap; 
    word-break: break-word;
  }

  .default-avatar {
    width: 40px;
    height: 40px;
  }

  #scrollableCategory::-webkit-scrollbar, .scrollableDonation::-webkit-scrollbar {
    display: none;
  }

  .carousel .slide {
    background: ${colors.white};
  }

  .control-dots {
    padding-inline-start: 0px; 
  }

  .ql-editor li {
    padding-bottom: 15px;
  }
`
Example #6
Source File: _app.jsx    From clipface with MIT License 6 votes vote down vote up 
GlobalStyle = createGlobalStyle`
  html {
    font-family: "Roboto", sans-serif;
  }

  body {
    position: relative;
    font-family: inherit;
    min-height: 100vh;
    box-sizing: border-box;
    padding-bottom: 33px;
  }
`
Example #7
Source File: global-styles.js    From QiskitFlow with Apache License 2.0 6 votes vote down vote up 
GlobalStyle = createGlobalStyle`
  html,
  body {
    height: 100%;
    width: 100%;
    line-height: 1.5;
  }

  body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  }

  body.fontLoaded {
    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  }

  #app {
    background-color: #fafafa;
    min-height: 100%;
    min-width: 100%;
  }

  p,
  label {
    font-family: Georgia, Times, 'Times New Roman', serif;
    line-height: 1.5em;
  }
`
Example #8
Source File: globalStyles.js    From saasgear with MIT License 6 votes vote down vote up 
GlobalStyle = createGlobalStyle`
  .public-DraftEditor-content {
    min-height: 500px;
    overflow: auto;
  }
  * {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    box-sizing: border-box;
    letter-spacing: 0.5px;
  }
  a {
    color: ${COLORS.PRIMARY};
    text-decoration: none;
  }
  html, body {
    margin: 0;
    padding: 0;
    position: relative;
  }

  h1, h2, h3, h4, h5, h6, ul, li, p {
    margin: 0;
    padding: 0;
  }
`
Example #9
Source File: globalStyle.js    From js-docs with MIT License 6 votes vote down vote up 
GlobalStyle = createGlobalStyle`
  body {
    height: calc(100vh - 15px);
    font-family: 'Open Sans', 'Helvetica Neue', Ubuntu;
    background: rgb(40, 44, 53);
  }

  * {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
  }

  div {
    width: 100%;
  }

  #___gatsby > * {
    display:flex;
    background: rgb(40, 44, 53);
  }

  h1, h2, h3, h4, h5 {
    text-decoration: none !important;
    color: #ff9900;
    font-weight: 700;
  }
`
Example #10
Source File: index.js    From apps-ng with Apache License 2.0 6 votes vote down vote up 
GlobalStyle = createGlobalStyle`
  body, html {
    padding: 0;
    margin: 0;
    ${({ isMobile }) => !isMobile && `
      min-width: ${constants.PAGE_MIN_WIDTH}px;
    `}
  }
  
  html {
    overflow-x: auto;
  }

  * {
    box-sizing: border-box;
  }
  
  #__next {
    ${({ isMobile }) => !isMobile && `
      min-width: ${constants.PAGE_MIN_WIDTH}px;
    `}
    overflow-x: auto;
    min-height: 100vh;
  }

  #zeit-ui-modal .content footer button.btn {
    min-width: unset;
  }

  #zeit-ui-modal .content .wrapper {
    max-width: calc(100vw - 24px);
  }
`
Example #11
Source File: global.js    From web with GNU General Public License v3.0 6 votes vote down vote up 
GlobalStyle = createGlobalStyle`
  html {
    font-size: 16px;
  }
  * {
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
  }
`
Example #12
Source File: style.js    From svg-to-jsx-electron with MIT License 6 votes vote down vote up 
Styles = createGlobalStyle`
  html, body {
    padding: 0;
    margin: 0;
    background-color: rgb(1, 22, 39);
    color: white;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  }

  label {
    font-weight: 500;
    font-size: 12px;
    line-height: 14px;
    text-transform: uppercase;
    white-space: nowrap;
    color: #888888;
    margin-bottom: 8px;
  }

  #root {
    max-width: 90%;
    position: relative;
    margin: auto;
    margin-top: 80px;
  }

  div[role="tabpanel"] {
    outline: none;
  }
`
Example #13
Source File: global.js    From gnosis-safe-delegate-dapp with MIT License 6 votes vote down vote up 
GlobalStyle = createGlobalStyle`
    @font-face {
        font-family: 'Averta';
        font-display: swap;
        src: local('Averta'), local('Averta Bold'),
        url(${avertaFont}) format('woff2'),
        url(${avertaBoldFont}) format('woff');
    }
`
Example #14
Source File: global.js    From portfolio with MIT License 6 votes vote down vote up 
GlobalStyles = createGlobalStyle`
  *,
  *::after,
  *::before {
    box-sizing: border-box;
  }

  body {
    align-items: center;
    background: ${({ theme }) => theme.body};
    color: ${({ theme }) => theme.text};
    display: flex;
    // flex-direction: column;
    // justify-content: center;
    // height: 100vh;
    // margin: 0;
    // padding: 0;
    font-family: BlinkMacSystemFont, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    transition: all 0.25s linear;
  }`
Example #15
Source File: _app.js    From lightning-address with MIT License 6 votes vote down vote up 
GlobalStyle = createGlobalStyle`
  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;700;900&display=swap');

  body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
  }

  ::selection {
    background-color: rgba(0,118,255,0.9);
    color: #fff;
  }
`
Example #16
Source File: global.js    From truvisory with MIT License 6 votes vote down vote up 
GlobalStyles = createGlobalStyle`
  *,
  *::after,
  *::before {
    box-sizing: border-box;
  }

  #root{
     box-shadow:inset 0 0 0 4000px ${({ theme }) => theme.body};
    // background: ${({ theme }) => theme.body};
  }

  html {
    height: 100%;
  }

  body {
    height: 100%;
    // align-items: center;
    // background: ${({ theme }) => theme.body};
    // background: ${require("./assets/images/website_background.jpg")};
    color: ${({ theme }) => theme.text};
    display: flex;
    flex-direction: column;
    // justify-content: center;
    height: 100vh;
    margin: 0;
    padding: 0;
    font-family: BlinkMacSystemFont, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    transition: all 0.25s linear;
  }
  `
Example #17
Source File: global-style.js    From derivcrypto-com with Apache License 2.0 6 votes vote down vote up 
GlobalStyle = createGlobalStyle`
    ${reset}

    * {
        font-family: 'IBM Plex Sans', sans-serif;

        &, &::before, &::after {
            box-sizing: border-box;
        }
    }
    html {
        font-size: 16px;
        color: ${({ theme }) => theme.colors.text_primary};
        box-sizing: border-box;
    }
    body {
        font-family: 'IBM Plex Sans', sans-serif;
        line-height: 1.5;
        letter-spacing: 0;
        background: ${({ theme }) => theme.colors.background_dark};
    }
`
Example #18
Source File: App.jsx    From relay_15 with MIT License 6 votes vote down vote up 
GlobalStyle = createGlobalStyle`
  body{ 
    margin: 0;
    padding: 0;
  }
  @font-face {
    font-family: 'yg-jalnan';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/JalnanOTF00.woff')
      format('woff');
    font-weight: normal;
    font-style: normal;
  }
  @font-face {
    font-family: 'MapoPeacefull';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/MapoPeacefullA.woff')
      format('woff');
    font-weight: normal;
    font-style: normal;
  }
`
Example #19
Source File: index.js    From boring-avatars with MIT License 6 votes vote down vote up 
BaseStyles = createGlobalStyle`
  :root {
    ${cssVariables}
  }

  *, *:before, *:after {
    box-sizing: border-box;
  }

  body {
    background-color: var(--c-background);
    color: var(--c-body);
  }
`
Example #20
Source File: CSSReset.jsx    From Edlib with GNU General Public License v3.0 6 votes vote down vote up 
GlobalStyle = createGlobalStyle`
  html {
    font-size: ${(props) => props.theme.fontSize}px;
  }

  body .edlib-components {
    code {
      font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
      monospace;
    }

    label {
      color: inherit;
    }

    strong {
      font-weight: bold;
    }
  }
`
Example #21
Source File: fonts.js    From ThreatMapper with Apache License 2.0 6 votes vote down vote up 
Fonts = createGlobalStyle`
  /* stylelint-disable sh-waqar/declaration-use-variable */
  @font-face {
    font-family: 'proxima-nova';
    src: url(${ProximaNova});
  }

  @font-face {
    font-family: 'Roboto Mono';
    src: url(${RobotoMono});
  }
  /* stylelint-enable sh-waqar/declaration-use-variable */
`
Example #22
Source File: globalStyles.js    From urlShortner with GNU General Public License v3.0 6 votes vote down vote up 
GlobalStyles = createGlobalStyle`
  body {
    background: ${({ theme }) => theme.body};
    color: ${({ theme }) => theme.text};
    navbar: ${({ theme }) => theme.navbarColor};
    font-family: Tahoma, Helvetica, Arial, Roboto, sans-serif;
    transition: all 0.50s linear;
  }

  `
Example #23
Source File: fonts.js    From nft-minting-dapp with MIT License 6 votes vote down vote up 
GlobalStyle = createGlobalStyle`
    @font-face {
        font-family: 'Upheaval';
        src: url(${Upheaval}) format('truetype');
    }

    @font-face {
        font-family: 'Renomono';
        src: url(${RenoMono}) format('opentype');
    }
`
Example #24
Source File: Layout.js    From ingress-cycle-stats with MIT License 6 votes vote down vote up 
GlobalStyle = createGlobalStyle`
* {box-sizing: border-box}
  body {
    font-size: 14px;
    font-family: 'oswald', serif;
    background-color: #111111;
    color: #04eaf5;
    margin: 0;
    padding: 0;
  }
`
Example #25
Source File: index.js    From sorbet-finance with GNU General Public License v3.0 6 votes vote down vote up 
GlobalStyle = createGlobalStyle`
  @import url('https://rsms.me/inter/inter.css');
  html { font-family: 'Inter', sans-serif; }
  @supports (font-variation-settings: normal) {
    html { font-family: 'Inter var', sans-serif; }
  }

  html,
  body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  body > div {
    height: 100%;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
}

  html {
    font-size: 16px;
    font-variant: none;
    color: ${({ theme }) => theme.textColor};
    background-color: ${({ theme }) => theme.backgroundColor};
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
`
Example #26
Source File: GlobalStyle.js    From indeplot with GNU General Public License v3.0 6 votes vote down vote up 
GlobalStyles = createGlobalStyle`
  body {
    background: ${({ theme }) => theme.body};
    color: ${({ theme }) => theme.text};
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue;
    transition: all 0.50s linear;
  }
  `
Example #27
Source File: App.js    From react-router-scroll-memory with MIT License 6 votes vote down vote up 
GlobalStyle = createGlobalStyle`
  body {
    font-family: Helvetica, Arial, sans-serif;
    margin: 0;
  }
  nav {
    display: flex;
    padding:1rem;
    a {
      margin: .5rem;
    }
  }
`
Example #28
Source File: GlobalStyle.js    From friendbank-markey with MIT License 6 votes vote down vote up 
GlobalStyle = createGlobalStyle`
  body,
  h1,
  h2,
  h3,
  h4,
  p,
  ul[class],
  ol[class],
  li,
  figure,
  figcaption,
  blockquote,
  dl,
  dd {
    margin: 0;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  ul[class],
  ol[class] {
    list-style: none;
    padding: 0;
  }

  @media (prefers-reduced-motion: reduce) {
    * {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
`
Example #29
Source File: Popup.jsx    From acid-tabs-extension with MIT License 6 votes vote down vote up 
GlobalStyle = createGlobalStyle`
  html {
    background-color: #282C34;
  }

  body {
    width: 40rem;
    min-height: 20rem;
    color: white;
  }
`