styled-components/macro#createGlobalStyle TypeScript Examples

The following examples show how to use styled-components/macro#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: styles.ts    From covid-19 with MIT License 6 votes vote down vote up 
GlobalStyles = createGlobalStyle`
  html {
    font-family: ${props => props.theme.fontFamily}
  }

  body {
    margin: 0;
    background-color: ${props => props.theme.colors.background};
    font-weight: 300;
    color: ${props => props.theme.colors.text};
  }
  a {
    color: ${props => props.theme.colors.secondary};
    text-decoration: underline;
    transition: opacity ease-in-out 150ms;
    :hover {
      opacity: 0.5;
    }
    :active {
      opacity: 0.75;
    }
  }

  html,
  body,
  #root {
    height: 100%;
    width: 100%;
    position: fixed;
    overflow: hidden;
  }
`
Example #2
Source File: Theme.tsx    From revite with GNU Affero General Public License v3.0 6 votes vote down vote up 
GlobalTheme = createGlobalStyle<{ theme: Theme }>`
:root {
	${(props) => generateVariables(props.theme)}
}

${(props) =>
    props.theme["min-opacity"] === 1 &&
    `
        * {
            backdrop-filter: unset !important;
        }
    `}
`
Example #3
Source File: base.ts    From datart with Apache License 2.0 6 votes vote down vote up 
Base = createGlobalStyle`
  body {
    font-family: ${FONT_FAMILY};
    font-size: ${FONT_SIZE_BODY};
    background-color: ${p => p.theme.bodyBackground};

    h1,h2,h3,h4,h5,h6 {
      margin: 0;
      font-weight: inherit;
      color: inherit;
    }

    p, figure {
      margin: 0;
    }

    ul {
      padding: 0;
      margin: 0;
    }

    li {
      list-style-type: none;
    }

    input {
      padding: 0;
    }

    table th {
      padding: 0;
      text-align: center;
    }

    * {
      -webkit-overflow-scrolling: touch;
    }
  }
`
Example #4
Source File: viz.ts    From datart with Apache License 2.0 6 votes vote down vote up 
Viz = createGlobalStyle`
  /* 覆盖antd 默认样式 */
  @media (max-width: 575px) {
    .datart-viz .ant-form .ant-form-item .ant-form-item-label,
    .datart-viz .ant-form .ant-form-item .ant-form-item-control {
      flex: 1;
    }
  }
`
Example #5
Source File: loading.ts    From netflix-clone with MIT License 5 votes vote down vote up 
LockBody = createGlobalStyle`
    body {
        overflow: hidden;
    }
`
Example #6
Source File: loading.ts    From netflix-clone with MIT License 5 votes vote down vote up 
ReleaseBody = createGlobalStyle`
    body {
        overflow: visible;
    }
`
Example #7
Source File: LoadingMask.tsx    From datart with Apache License 2.0 5 votes vote down vote up 
LoadingMaskStyle = createGlobalStyle`
  .blur {
    filter: blur(2px);
  }
`
Example #8
Source File: DashboardTabStyle.ts    From datart with Apache License 2.0 5 votes vote down vote up 
DashboardTabStyle = createGlobalStyle`
  .ant-tabs{
    padding: 0 ${SPACE_XS};
    user-select: none;
    background-color: ${p => p.theme.componentBackground};
    border-bottom: 1px solid ${p => p.theme.borderColorSplit};

    &.ant-tabs-top > .ant-tabs-nav,
    &.ant-tabs-bottom > .ant-tabs-nav,
    &.ant-tabs-top > div > .ant-tabs-nav,
    &.ant-tabs-bottom > div > .ant-tabs-nav {
      margin: 0;
    }

    &.ant-tabs-top > .ant-tabs-nav::before,
    &.ant-tabs-bottom > .ant-tabs-nav::before,
    &.ant-tabs-top > div > .ant-tabs-nav::before,
    &.ant-tabs-bottom > div > .ant-tabs-nav::before {
      border-bottom: 0;
    }

    .ant-tabs-tab-remove {
      margin-right: -${SPACE_SM};
      visibility: hidden;
    }

    &.ant-tabs-card {
      &.ant-tabs-card > .ant-tabs-nav .ant-tabs-tab,
      &.ant-tabs-card > div > .ant-tabs-nav .ant-tabs-tab {
        padding: ${SPACE_XS} ${SPACE_MD};
        margin: ${SPACE_SM} ${SPACE};
        font-weight: ${FONT_WEIGHT_MEDIUM};
        color: ${p => p.theme.textColorSnd};
        background-color: ${p => p.theme.componentBackground};
        border: none;
        border-radius: 0;

        &:hover {
          background-color: ${p => p.theme.bodyBackground};

          .ant-tabs-tab-remove {
            visibility: visible;
          }
        }
      }

      &.ant-tabs-card > .ant-tabs-nav .ant-tabs-tab-active,
      &.ant-tabs-card > div > .ant-tabs-nav .ant-tabs-tab-active {
        background-color: ${p => p.theme.bodyBackground};
      }
    }
  }
`
Example #9
Source File: EditorTabStyle.ts    From datart with Apache License 2.0 5 votes vote down vote up 
EditorTabsStyle = createGlobalStyle`
  .ant-tabs {
    user-select: none;
    background-color: ${p => p.theme.bodyBackground};

    & > .ant-tabs-nav,
    & > div > .ant-tabs-nav {
      .ant-tabs-nav-more {
        padding: ${SPACE_XS} ${SPACE_SM};
      }
    }

    &.ant-tabs-top > .ant-tabs-nav,
    &.ant-tabs-bottom > .ant-tabs-nav,
    &.ant-tabs-top > div > .ant-tabs-nav,
    &.ant-tabs-bottom > div > .ant-tabs-nav {
      margin: 0;
    }

    &.ant-tabs-top > .ant-tabs-nav::before,
    &.ant-tabs-bottom > .ant-tabs-nav::before,
    &.ant-tabs-top > div > .ant-tabs-nav::before,
    &.ant-tabs-bottom > div > .ant-tabs-nav::before {
      border-bottom: 0;
    }

    &.ant-tabs-card {
      .ant-tabs-tab {
        min-width: ${SPACE_TIMES(30)};
      }

      .ant-tabs-tab-btn {
        flex: 1;
      }

      .ant-tabs-tab-btn:active,
      .ant-tabs-tab-btn:focus,
      .ant-tabs-tab-remove:active,
      .ant-tabs-tab-remove:focus {
        color: ${p => p.theme.textColor};
      }

      &.ant-tabs-card > .ant-tabs-nav .ant-tabs-tab,
      &.ant-tabs-card > div > .ant-tabs-nav .ant-tabs-tab {
        padding: ${SPACE_SM} ${SPACE_XS} ${SPACE_SM} ${SPACE_SM};
        margin: 0 !important;
        color: ${p => p.theme.textColorLight};
        background-color: ${p => p.theme.bodyBackground};
        border: none;
        border-radius: 0;
      }

      &.ant-tabs-card > .ant-tabs-nav .ant-tabs-tab-active,
      &.ant-tabs-card > div > .ant-tabs-nav .ant-tabs-tab-active {
        background-color: ${p => p.theme.componentBackground};
      }

      .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
        color: ${p => p.theme.textColor};
      }
    }
  }
`
Example #10
Source File: globalOverlays.ts    From datart with Apache License 2.0 5 votes vote down vote up 
GlobalOverlays = createGlobalStyle`
  /* app/components/Popup */
  .datart-popup {
    z-index: ${LEVEL_1000 - 1};

    &.on-modal {
      z-index: ${LEVEL_1000 + 30};
    }

    .ant-popover-arrow {
      display: none;
    }
    .ant-popover-inner-content {
      padding: 0;
    }
    .ant-dropdown-menu {
      box-shadow: none;
    }
    &.ant-popover-placement-bottom,
    &.ant-popover-placement-bottomLeft,
    &.ant-popover-placement-bottomRight {
      padding-top: 0;
    }
  }
  

  /* schema table header action dropdown menu */
  .datart-schema-table-header-menu {
    min-width: ${SPACE_TIMES(40)};

    .ant-dropdown-menu-submenu-selected {
      .ant-dropdown-menu-submenu-title {
        color: ${p => p.theme.textColor};
      }
    }
  }

  /* config panel */
  .datart-config-panel {
    &.ant-collapse >
    .ant-collapse-item >
    .ant-collapse-header {
      padding: ${SPACE_XS} 0;
      color: ${p => p.theme.textColor};

      .ant-collapse-arrow {
        margin-right: ${SPACE_XS};
      }
    }

    .ant-collapse-content >
    .ant-collapse-content-box {
      padding: ${SPACE_XS} 0 ${SPACE_SM} !important;
    }
  }

  /* data config section dropdown */
  .datart-data-section-dropdown {
    z-index: ${LEVEL_1000 - 1};
  }

  /* color popover */
  .datart-aggregation-colorpopover{
    .ant-popover-arrow{
      display:none;
    }
  }
`
Example #11
Source File: hardcoded.ts    From datart with Apache License 2.0 5 votes vote down vote up 
Hardcoded = createGlobalStyle`
  body {
    .ant-form-item-label > label {
      color: ${p => p.theme.textColorLight};
    }

    .ant-form-item-label-left > label {
      padding-left: ${SPACE_SM};

      &:before {
        position: absolute;
        left: 0;
      }
    }

    .ant-popover-inner {
      box-shadow: ${p => p.theme.shadow3};
    }
    .ant-popover.ant-popconfirm {
      z-index: 1060;
    }

    /* fix antd bugs #32919 */
    .ant-tabs-dropdown-menu-item {
      display: flex;
      align-items: center;

      > span {
        flex: 1;
        white-space: nowrap;
      }

      &-remove {
        flex: none;
        margin-left: ${SPACE_SM};
        font-size: ${FONT_SIZE_LABEL};
        color: ${p => p.theme.textColorLight};
        cursor: pointer;
        background: 0 0;
        border: 0;

        &:hover {
          color: ${p => p.theme.primary};
        }
      }
    }
  }

  /* react-grid-layout */
  .react-grid-item.react-grid-placeholder {
    background-color: ${p => p.theme.textColorDisabled} !important;
  }
`
Example #12
Source File: reactSplit.ts    From datart with Apache License 2.0 5 votes vote down vote up 
ReactSplit = createGlobalStyle`
  /* react-split */
  .datart-split {
    min-width: 0;
    min-height: 0;

    .gutter-horizontal {
      &:before {
        width: 2px;
        height: 100%;
        transform: translate(-50%, 0);
      }
      &:after {
        width: ${SPACE_TIMES(2)};
        height: 100%;
        cursor: ew-resize;
        transform: translate(-50%, 0);
      }
    }

    .gutter-vertical {
      &:before {
        width: 100%;
        height: 2px;
        transform: translate(0, -50%);
      }
      &:after {
        width: 100%;
        height: ${SPACE_TIMES(2)};
        cursor: ns-resize;
        transform: translate(0, -50%);
      }
    }

    .gutter-horizontal,
    .gutter-vertical{
      position: relative;

      &:before {
        position: absolute;
        z-index: ${LEVEL_10};
        content: '';
      }
      &:after {
        position: absolute;
        z-index: ${LEVEL_10};
        content: '';
      }
      &:hover,
      &:active {
        &:before {
          background-color: ${p => p.theme.primary};
        }
      }
    }
  }
`
Example #13
Source File: GlobalStyle.ts    From baidu-pan-downloader with MIT License 4 votes vote down vote up 
GlobalStyle = createGlobalStyle`
  @import url(https://fonts.googleapis.com/css?family=Noto+Sans);
  body {
    background-color: #2f3439;
    font-family: "Noto Sans", sans-serif;
  }

  .wrap {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  /* -------------------------------------
   * Bar container
   * ------------------------------------- */
  .progress-radial {
    float: left;
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid #2f3439;
    background-color: tomato;
    transition: all 1s ease-out;
    cursor: pointer;
  }
  .progress-radial:hover {
    background: #2e6da4;
  }

  /* -------------------------------------
   * Optional centered circle w/text
   * ------------------------------------- */
  .progress-radial .overlay {
    position: absolute;
    width: 30px;
    height: 30px;
    background-color: #fffde8;
    border-radius: 50%;
    margin-left: 10px;
    margin-top: 10px;
    text-align: center;
    line-height: 2rem;
    font-size: 12px;
  }

  /* -------------------------------------
   * Mixin for progress-% class
   * ------------------------------------- */
  .progress-0 {
    background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(90deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-1 {
    background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(93.6deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-2 {
    background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(97.2deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-3 {
    background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(100.8deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-4 {
    background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(104.4deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-5 {
    background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(108deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-6 {
    background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(111.6deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-7 {
    background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(115.2deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-8 {
    background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(118.8deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-9 {
    background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(122.4deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-10 {
    background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(126deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-11 {
    background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(129.6deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-12 {
    background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(133.2deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-13 {
    background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(136.8deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-14 {
    background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(140.4deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-15 {
    background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(144deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-16 {
    background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(147.6deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-17 {
    background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(151.2deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-18 {
    background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(154.8deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-19 {
    background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(158.4deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-20 {
    background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(162deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-21 {
    background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(165.6deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-22 {
    background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(169.2deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-23 {
    background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(172.8deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-24 {
    background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(176.4deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-25 {
    background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(180deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-26 {
    background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(183.6deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-27 {
    background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(187.2deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-28 {
    background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(190.8deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-29 {
    background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(194.4deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-30 {
    background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(198deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-31 {
    background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(201.6deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-32 {
    background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(205.2deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-33 {
    background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(208.8deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-34 {
    background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(212.4deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-35 {
    background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(216deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-36 {
    background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(219.6deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-37 {
    background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(223.2deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-38 {
    background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(226.8deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-39 {
    background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(230.4deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-40 {
    background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(234deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-41 {
    background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(237.6deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-42 {
    background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(241.2deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-43 {
    background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(244.8deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-44 {
    background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(248.4deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-45 {
    background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(252deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-46 {
    background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(255.6deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-47 {
    background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(259.2deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-48 {
    background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(262.8deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-49 {
    background-image: linear-gradient(90deg, #2f3439 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(266.4deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-50 {
    background-image: linear-gradient(-90deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-51 {
    background-image: linear-gradient(-86.4deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-52 {
    background-image: linear-gradient(-82.8deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-53 {
    background-image: linear-gradient(-79.2deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-54 {
    background-image: linear-gradient(-75.6deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-55 {
    background-image: linear-gradient(-72deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-56 {
    background-image: linear-gradient(-68.4deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-57 {
    background-image: linear-gradient(-64.8deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-58 {
    background-image: linear-gradient(-61.2deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-59 {
    background-image: linear-gradient(-57.6deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-60 {
    background-image: linear-gradient(-54deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-61 {
    background-image: linear-gradient(-50.4deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-62 {
    background-image: linear-gradient(-46.8deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-63 {
    background-image: linear-gradient(-43.2deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-64 {
    background-image: linear-gradient(-39.6deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-65 {
    background-image: linear-gradient(-36deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-66 {
    background-image: linear-gradient(-32.4deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-67 {
    background-image: linear-gradient(-28.8deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-68 {
    background-image: linear-gradient(-25.2deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-69 {
    background-image: linear-gradient(-21.6deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-70 {
    background-image: linear-gradient(-18deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-71 {
    background-image: linear-gradient(-14.4deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-72 {
    background-image: linear-gradient(-10.8deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-73 {
    background-image: linear-gradient(-7.2deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-74 {
    background-image: linear-gradient(-3.6deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-75 {
    background-image: linear-gradient(0deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-76 {
    background-image: linear-gradient(3.6deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-77 {
    background-image: linear-gradient(7.2deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-78 {
    background-image: linear-gradient(10.8deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-79 {
    background-image: linear-gradient(14.4deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-80 {
    background-image: linear-gradient(18deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-81 {
    background-image: linear-gradient(21.6deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-82 {
    background-image: linear-gradient(25.2deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-83 {
    background-image: linear-gradient(28.8deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-84 {
    background-image: linear-gradient(32.4deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-85 {
    background-image: linear-gradient(36deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-86 {
    background-image: linear-gradient(39.6deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-87 {
    background-image: linear-gradient(43.2deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-88 {
    background-image: linear-gradient(46.8deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-89 {
    background-image: linear-gradient(50.4deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-90 {
    background-image: linear-gradient(54deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-91 {
    background-image: linear-gradient(57.6deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-92 {
    background-image: linear-gradient(61.2deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-93 {
    background-image: linear-gradient(64.8deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-94 {
    background-image: linear-gradient(68.4deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-95 {
    background-image: linear-gradient(72deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-96 {
    background-image: linear-gradient(75.6deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-97 {
    background-image: linear-gradient(79.2deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-98 {
    background-image: linear-gradient(82.8deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-99 {
    background-image: linear-gradient(86.4deg, #ff6347 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }

  .progress-100 {
    background-image: linear-gradient(90deg, #ff6347 52%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
  }


  table {
    border: 1px solid #ccc;
    border-collapse: collapse;
    margin: 0;
    padding: 0;
    width: 100%;
    table-layout: fixed;
  }

  table caption {
    font-size: 1.5em;
    margin: .5em 0 .75em;
  }

  table tr {
    background-color: #f8f8f8;
    border: 1px solid #ddd;
    padding: .35em;
  }

  table th,
  table td {
    padding: .625em;
    text-align: center;
  }

  table th {
    font-size: .85em;
    letter-spacing: .1em;
    text-transform: uppercase;
  }

  @media screen and (max-width: 600px) {
    table {
      border: 0;
    }

    table caption {
      font-size: 1.3em;
    }

    table thead {
      border: none;
      clip: rect(0 0 0 0);
      height: 1px;
      margin: -1px;
      overflow: hidden;
      padding: 0;
      position: absolute;
      width: 1px;
    }

    table tr {
      border-bottom: 3px solid #ddd;
      display: block;
      margin-bottom: .625em;
    }

    table td {
      border-bottom: 1px solid #ddd;
      display: block;
      font-size: .8em;
      text-align: right;
    }

    table td::before {
      /*
      * aria-label has no advantage, it won't be read inside a table
      content: attr(aria-label);
      */
      content: attr(data-label);
      float: left;
      font-weight: bold;
      text-transform: uppercase;
    }

    table td:last-child {
      border-bottom: 0;
    }
  }
  pre.code {
    text-align: left;
    background: rgb(250, 250, 250);
    border-radius: 3px;
    border: 0px;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 5px inset;
    color: #4d4d4d;
    font-family: Monaco, Consolas, "Courier New", Courier, monospace, sans-serif;
    font-size: 13px;
    outline: 0px;
    overflow: auto;
    max-height: 55vh;
    padding: 10px;
    vertical-align: baseline;
    line-height: normal;
  }

  #floating-button{
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: #db4437;
    position: fixed;
    bottom: 55px;
    right: 32px;
    cursor: pointer;
    box-shadow: 0px 2px 5px #666;
  }

  .plus{
    color: white;
    position: absolute;
    top: 0;
    display: block;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    padding: 0;
    margin: 0;
    line-height: 55px;
    font-size: 38px;
    font-family: 'Roboto';
    font-weight: 300;
    animation: plus-out 0.3s;
    transition: all 0.3s;
  }

  #container-floating{
    position: fixed;
    width: 70px;
    height: 70px;
    bottom: 30px;
    right: 30px;
    z-index: 50;
  }

  #container-floating:hover{
    height: 400px;
    width: 90px;
    padding: 30px;
  }

  #container-floating:hover .plus{
    animation: plus-in 0.15s linear;
    animation-fill-mode: forwards;
  }

  .edit{
    position: absolute;
    top: 0;
    display: block;
    bottom: 0;
    left: 0;
    display: block;
    right: 0;
    padding: 0;
    opacity: 0;
    margin: auto;
    line-height: 65px;
    transform: rotateZ(-70deg);
    transition: all 0.3s;
    animation: edit-out 0.3s;
  }

  #container-floating:hover .edit{
    animation: edit-in 0.2s;
    animation-delay: 0.1s;
    animation-fill-mode: forwards;
  }

  @keyframes edit-in{
    from {opacity: 0; transform: rotateZ(-70deg);}
    to {opacity: 1; transform: rotateZ(0deg);}
  }

  @keyframes edit-out{
    from {opacity: 1; transform: rotateZ(0deg);}
    to {opacity: 0; transform: rotateZ(-70deg);}
  }

  @keyframes plus-in{
    from {opacity: 1; transform: rotateZ(0deg);}
    to {opacity: 0; transform: rotateZ(180deg);}
  }

  @keyframes plus-out{
    from {opacity: 0; transform: rotateZ(180deg);}
    to {opacity: 1; transform: rotateZ(0deg);}
  }
  .nds{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    position: fixed;
    z-index: 300;
    transform:  scale(0);
    cursor: pointer;
  }

  .nd1{
    background: #d3a411;
    right: 40px;
    bottom: 120px;
    animation-delay: 0.2s;
    animation: bounce-out-nds 0.3s linear;
    animation-fill-mode:  forwards;
  }
  @keyframes bounce-nds{
    from {opacity: 0;}
    to {opacity: 1; transform: scale(1);}
  }

  @keyframes bounce-out-nds{
    from {opacity: 1; transform: scale(1);}
    to {opacity: 0; transform: scale(0);}
  }

  #container-floating:hover .nds{

    animation: bounce-nds 0.1s linear;
    animation-fill-mode:  forwards;
  }
  .reminder{
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: 0;
    bottom: 0;
    line-height: 40px;
  }

  .module-yun-tip {
    z-index: 999 !important;
  }
`
Example #14
Source File: global.ts    From tezos-academy with MIT License 4 votes vote down vote up 
GlobalStyle = createGlobalStyle`
* {
  box-sizing: border-box;
}

.img-git-diff {
  height: 300px;
}

:root {
  --glitch-height: 100vh;
  --gap-horizontal: 10px;
  --gap-vertical: 5px;
  --time-anim: 6s;
  --delay-anim: 0s;
  --blend-mode-1: none;
  --blend-mode-2: none;
  --blend-mode-3: none;
  --blend-mode-4: none;
  --blend-mode-5: overlay;
  --blend-color-1: transparent;
  --blend-color-2: transparent;
  --blend-color-3: transparent;
  --blend-color-4: transparent;
  --blend-color-5: #af4949;
}

body {
  font-family: 'Electrolize', Helvetica, Arial, sans-serif;
  font-display: optional;
  margin: 0;
  padding: 0;
  background-color: ${backgroundColor};
  color: ${textColor};
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1 {
  font-size: 40px;
  font-weight: 700;
  display: inline-block;
  margin: 20px 0px;
}

h2 {
  font-size: 20px;
  font-weight: normal;
  display: block;
  margin: 0;
}

h3 {
  font-size: 30px;
  font-weight: normal;
  display: block;
  margin: 0;
}

input {
  color: ${textColor};
  font-size: 14px;
}

::placeholder {
  color: ${placeholderColor};
  font-size: 14px;
}

*:focus {
  outline: none;
}

a {
  color: #42edf8;
  text-decoration: none !important;
  opacity: 1;
  transition: opacity 0.15s ease-in-out-out;
  will-change: opacity;
}

a:visited {
  color: inherit;
}

a:hover {
  opacity: 0.9;
}

p {
    font-family: "Proxima Nova", sans-serif;
    display: block;
    margin-block-start: 10px;
    margin-block-end: 10px;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}


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

@keyframes autofill {
    0%,100% {
        color: ${textColor};
        background: ${backgroundColor};
    }
}

/* Change Autocomplete styles in Chrome*/
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    animation-delay: 300ms;
    animation-name: autofill;
    animation-fill-mode: both;
}

.appear {
  opacity: 0;
  will-change: transform, opacity;
  animation: ${fadeInFromLeft} ease-in-out 1;
  animation-fill-mode: forwards;
  animation-duration: 0.3s;
}

.slide-right-enter {
  opacity: 0;
}
.slide-right-enter-active {
  opacity: 1;
  transition: opacity 200ms;
}
.slide-right-exit {
  opacity: 1;
}
.slide-right-exit-active {
  opacity: 0;
  transition: opacity 200ms;
}

.slide-left-enter {
  opacity: 0;
}
.slide-left-enter-active {
  opacity: 1;
  transition: opacity 200ms;
}
.slide-left-exit {
  opacity: 1;
}
.slide-left-exit-active {
  opacity: 0;
  transition: opacity 200ms;
}

/* .slide-right-enter-active {
  animation-name: ${slideRightEnter};
  animation-duration: 300ms;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
}

.slide-right-exit-active {
  animation-name: ${slideRightExit};
  animation-duration: 300ms;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
}

.slide-left-enter-active {
  animation-name: ${slideLeftEnter};
  animation-duration: 300ms;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
}

.slide-left-exit-active {
  animation-name: ${slideLeftExit};
  animation-duration: 300ms;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
} */

.grecaptcha-badge {
  visibility: hidden;
}


*::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  background: transparent;
}

*::-webkit-scrollbar-track, ::-webkit-scrollbar-corner, ::-webkit-scrollbar-track-piece {
  background: #00000000;
}

*::-webkit-scrollbar-thumb {
  background: #08658b;
}

*::-webkit-scrollbar-thumb:hover {
  background: #08658b;
}

.rc-slider {
  margin: 10px 0 23px 5px;
}

.rc-slider-handle {
  background-color: #0a456d !important;
}

.rc-slider-rail {
  background-color: #0a456d !important;
}

.rc-slider-track {
  background-color: #42edf8 !important;
  box-shadow: 0px 0px 25px rgba(11, 183, 226, 0.65), 0px 0px 15px rgba(0, 112, 202, 0.6);
}

.rc-slider-dot {
  background-color: #0a456d !important;
  border: 2px solid #0a456d !important;
}

.rc-slider-dot-active {
  background-color: #42edf8 !important;
  border-color: #42edf8 !important;
  drop-shadow: 0px 0px 25px rgba(11, 183, 226, 0.65), 0px 0px 15px rgba(0, 112, 202, 0.6);
}

.rc-slider-mark-text {
  display: none !important;
}

`
Example #15
Source File: global.ts    From tezos-link with Apache License 2.0 4 votes vote down vote up 
GlobalStyle = createGlobalStyle`
  @font-face {
  font-family: 'Proxima Nova';
  src: url('/fonts/ProximaNova-Thin.woff2') format('woff2'), url('/fonts/ProximaNova-Thin.woff') format('woff');
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: 'Proxima Nova';
  src: url('/fonts/ProximaNova-Light.woff2') format('woff2'), url('/fonts/ProximaNova-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Proxima Nova';
  src: url('/fonts/ProximaNova-Regular.woff2') format('woff2'), url('/fonts/ProximaNova-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Proxima Nova';
  src: url('/fonts/ProximaNova-Semibold.woff2') format('woff2'), url('/fonts/ProximaNova-Semibold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'Proxima Nova';
  src: url('/fonts/ProximaNova-Bold.woff2') format('woff2'), url('/fonts/ProximaNova-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}

* {
  box-sizing: border-box;
}

body {
  font-family: 'Proxima Nova', Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: ${backgroundColor};
  background-image: url("/bg.svg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: inherit;
  background-position: top center;
  color: ${textColor};
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1 {
  font-family: 'Proxima Nova', Helvetica, Arial, sans-serif;
  font-size: 40px;
  font-weight: 700;
  display: block;
  margin: 20px 0px;
}

h3 {
  font-family: 'Proxima Nova', Helvetica, Arial, sans-serif;
  font-size: 20px;
  font-weight: 300;
  display: block;
  margin: 0px;
}

input {
  color: ${textColor};
  font-size: 14px;
}

::placeholder {
  color: ${placeholderColor};
  font-size: 14px;
}

*:focus {
  outline: none;
}

a, a:visited {
  color: ${textColor};
  text-decoration: none !important;
  opacity: 1;
  transition: opacity 0.15s ease-in-out;
  will-change: opacity;
}

a:hover {
  opacity: 0.9;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
}
 
.appear {
  opacity: 0;
  will-change: transform, opacity;
  animation: ${fadeInFromLeft} ease-in 1;
  animation-fill-mode: forwards;
  animation-duration: 0.2s;
}

#confetis {
  z-index: -1;
  position: fixed;
  margin-top: -100px;
  margin-left: 70px;
}

blockquote {
  margin: 0 10px 0 10px;
  padding: 2px 10px 2px 10px;
  border-left: 5px solid ${primaryColor};
}

.markdown code {
  background-color: ${backgroundColor};
  border-radius: 2px;
  color: ${primaryColor};
  -moz-osx-font-smoothing: auto;
  -webkit-font-smoothing: auto;
  font-family: monospace;
  padding: 0.25em 0.5em;
  font-size: 0.9em;
}

.markdown pre {
  background-color: ${backgroundColor};
  border-radius: 2px;
  margin-bottom: 1.5rem;
  padding: 1rem;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.markdown pre code {
  background-color: transparent;
  color: #d4d4d4;
}

.markdown th {
  font-size: .875rem;
  text-transform: uppercase;
  background-color: ${primaryColor};
  color: black;
  padding: .5rem;
}

.markdown td {
  padding: .5rem;
}

[data-tooltip]:hover {
  position: absolute;
  overflow-y: visible !important;
}

[data-tooltip]:hover::before {
  all: initial;
  font-family: Arial, Helvetica, sans-serif;
  display: inline-block;
  border-radius: 5px;
  padding: 10px;
  background-color: ${backgroundColor};
  content: attr(data-tooltip);
  color: ${secondaryColor};
  position: absolute;
  bottom: 100%;
  width: auto;
  left: 50%;
  transform: translate(-50%, 0);
  margin-bottom: 15px;
  text-align: center;
  font-size: 14px;
}

[data-tooltip]:hover::after {
  all: initial;
  display: inline-block;
  width: 0; 
  height: 0; 
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid ${backgroundColor};
  position: absolute;
  bottom: 100%;
  content: '';
  left: 50%;
  transform: translate(-50%, 0);
  margin-bottom: 5px;
}

`
Example #16
Source File: form.ts    From datart with Apache License 2.0 4 votes vote down vote up 
Form = createGlobalStyle`
  .datart-ant-input {
    &.ant-input {
      color: ${p => p.theme.textColorSnd};
      background-color: ${p => p.theme.bodyBackground};
      border-color: ${p => p.theme.bodyBackground};
      box-shadow: none;

      &:hover,
      &:focus {
        border-color: ${p => p.theme.bodyBackground};
        box-shadow: none;
      }

      &:focus {
        background-color: ${p => p.theme.emphasisBackground};
      }
    }
  }

  .datart-ant-select {
    &.ant-select {
      color: ${p => p.theme.textColorSnd};
    }

    &.ant-select:not(.ant-select-customize-input) .ant-select-selector {
      background-color: ${p => p.theme.bodyBackground};
      border-color: ${p => p.theme.bodyBackground} !important;
      border-radius: ${BORDER_RADIUS};
      box-shadow: none !important;
    }
  }

  .datart-ant-input-number {
    &.ant-input-number {
      width: 100%;
      background-color: ${p => p.theme.bodyBackground};
      border-color: ${p => p.theme.bodyBackground};
      border-radius: ${BORDER_RADIUS};
      box-shadow: none;

      &:hover,
      &:focus {
        border-color: ${p => p.theme.bodyBackground};
        box-shadow: none;
      }

      &:focus {
        background-color: ${p => p.theme.bodyBackground};
      }
    }

    .ant-input-number-input {
      color: ${p => p.theme.textColorSnd};
    }

    .ant-input-number-handler-wrap {
      background-color: ${p => p.theme.bodyBackground};
    }

    .ant-input-number-disabled {
      background-color: ${p => p.theme.textColorDisabled};
    }
  }

  .datart-ant-upload {
    &.ant-upload.ant-upload-drag {
      background-color: ${p => p.theme.bodyBackground} !important;
      border-color: transparent !important;
      border-radius: ${BORDER_RADIUS};
    }
  }

  .datart-modal-button {
    &.ant-btn {
      color: ${p => p.theme.textColorSnd};
      background-color: ${p => p.theme.bodyBackground};
      border: 0;
      border-radius: ${BORDER_RADIUS};

      &:hover,
      &:active {
        color: ${p => p.theme.textColorSnd};
        background-color: ${p => p.theme.emphasisBackground};
      }
    }
  }
`