supabase/apps/reference/src/css/custom.scss

/* stylelint-disable docusaurus/copyright-header */
/**
 * Any CSS included here will be global. The classic template
 * bundles Infima by default. Infima is a CSS framework designed to
 * work well for content-centric websites.
 */

/* You can override the default Infima variables here. */

@use './fonts';
@use './main';
@use './components/methodLists';
@use './components/menu';
@use './components/button-card';
@use './components/doc-item';
@use './components/doc-page';
@use './components/doc-sidebar';
@use './components/nav-bar';
@use './components/toc';

:root {
  --ifm-background-color: var(--token-primary-bg-c);

  --ifm-navbar-link-hover-color: initial;
  --ifm-navbar-padding-vertical: 0;
  --ifm-navbar-item-padding-vertical: 0;

  --ifm-font-family-base: -apple-system, BlinkMacSystemFont, Inter, Helvetica,
    Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI emoji';
  --ifm-font-family-monospace: 'SFMono-Regular', 'Roboto Mono', Consolas,
    'Liberation Mono', Menlo, Courier, monospace;

  // --ifm-menu-link-sublist-icon: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNiIgdmlld0JveD0iMCAwIDEwIDYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik04Ljk5OTg4IDVMNC45OTk4OCAxTDAuOTk5ODc4IDUiIHN0cm9rZT0iIzAzMDYwQiIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K');

  //#region ----------- Z Indices ------------
  --z-sidebar: 2000;
  --z-backdrop: 1100;
  //#endregion
}

html[data-theme='light'] {
  --token-primary-bg-c: #fff;
  --token-secondary-bg-c: #fff;

  --ifm-link-color: var(--c-blue-90);
  //rgb value is c-blue-90
  --ifm-link-hover-color: rgba(27, 109, 255, 0.8);

  --ifm-background-surface-color: var(--token-primary-bg-c);

  --ifm-navbar-background-color: var(--token-primary-bg-c);
  --ifm-navbar-shadow: 0 1px 0 0 var(--c-gray-0);

  --ifm-heading-color: var(--c-carbon-100);
  --ifm-code-background: var(--c-indigo-10);
  --ifm-font-color-base: var(--c-carbon-90);
}

html[data-theme='dark'] {
  --token-primary-bg-c: #03060b;
  --token-secondary-bg-c: #13171c;

  --ifm-link-color: var(--c-blue-70);
  //rgb value is c-blue-70
  --ifm-link-hover-color: rgba(77, 141, 255, 0.8);

  --ifm-background-surface-color: var(--token-primary-bg-c);

  --ifm-navbar-background-color: var(--token-primary-bg-c);
  --ifm-navbar-shadow: 0 1px 0 0 var(--c-gray-90);

  --ifm-heading-color: #fff;
  --ifm-font-color-base: var(--c-carbon-10);
  --ifm-background-color: var(--token-primary-bg-c);
  --ifm-dropdown-background-color: var(--token-secondary-bg-c);

  --ifm-menu-link-sublist-icon-filter: invert(100%);
}

html {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-smoothing: antialiased;
  scroll-padding-top: calc(var(--ifm-navbar-height) + 16px);
}

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

a {
  text-decoration: none;

  &:hover {
    text-decoration: none;
  }
}

body {
  margin: 0;
}

.theme-doc-version-banner {
  display: none;
}

.theme-doc-version-badge {
  display: none;
}

ion-grid {
  margin: 1em 0;
}

figure {
  margin: 0;
}

figure > * {
  display: block;
  margin: 0 auto;
}

figure.device {
  max-width: 400px;
  margin: 0 auto;
}

figcaption {
  text-align: center;
}

img {
  display: block;
  max-width: 100%;
}

iframe {
  background-color: rgba(0, 0, 0, 0.02);
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.1);
}

.git-link svg {
  height: 1em;
  width: 1em;
  vertical-align: -0.1em;
}
.git-link path {
  fill: currentColor;
}

.cordova-ee-card {
  max-width: 100%;
}

.cordova-ee-img {
  width: 50px;
  float: left;
  margin-right: 20px;
}

.native-ee-detail {
  float: right;
  cursor: pointer;
}

.cordova-ee-card p {
  margin: 1rem 0 0;
}

.video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;

  iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }
}