moon

2.88.0

2.90.5 retired 2.90.4 2.90.3 2.90.2 2.90.1 2.90.0 2.89.4 2.89.1 2.89.0 2.88.0 2.87.11 2.87.10 2.87.9 2.87.8 2.87.7 2.87.6 2.87.5 2.87.4 2.87.3 2.87.2 2.87.1 2.87.0 2.86.1 2.86.0 2.85.1 2.85.0 2.84.0 2.83.0 2.82.0 2.81.4 2.81.3 2.81.2 2.81.1 2.81.0 2.80.2 2.80.1 2.80.0 2.79.13 2.79.12 2.79.11 2.79.10 2.79.9 2.79.8 2.79.7 2.79.6 2.79.5 2.79.4 2.79.3 2.79.2 2.79.1 2.79.0 2.78.4 2.78.3 2.78.2 2.78.1 2.78.0 2.77.0 2.76.5 2.76.4 2.76.3 2.76.2 2.76.1 2.76.0 2.75.0 2.74.1 2.74.0 2.73.8 2.73.7 2.73.6 2.73.5 2.73.4 2.73.3 2.73.2 2.73.1 2.73.0 2.72.5 2.72.4 2.72.3 2.72.2 2.72.1 2.72.0 2.71.1 2.71.0 2.70.0 2.69.2 2.69.1 2.69.0 2.68.11 2.68.10

Components-based design system written in elixir

HexDocs

Current section

Files

Jump to

Readme 89 Versions 17 Dependencies 0 Dependants Files Activity

moon assets css app.css

Raw

assets/css/app.css

/*
This file will be removed!
 
Please do not add CSS here. Instead use Tailwind classes!
*/

/* Import scoped CSS rules for components 
   import "./_components.css"; */

@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind variants;

html,
body {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
    Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  text-size-adjust: none; /* Prevent automatic zooming of fonts on some mobile devices. */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased; /* Consistent font display behavior on OSX. */
  -moz-osx-font-smoothing: grayscale; /* Consistent font display behavior on OSX. */
  
  --base--space: 16px;
  --base--font-size: 16px;
  --base--line-height: 20px;

  --border-style: solid;
  --border-width: 1px;
  --border-i-width: 2px;
  --border: 1px solid;
  --box-shadow: 0px 2.4px 7.2px rgba(0, 0, 0, 0.18), 0px 12.8px 28.8px rgba(0, 0, 0, 0.22);

  --breakpoint--small: 500px;
  --breakpoint--medium: 800px;
  --breakpoint--large: 1080px;
  --breakpoint--xlarge: 1200px;

  --font-face--regular--font-family: DM Sans;
  --font-face--regular--font-style: normal;
  --font-face--regular--font-display: swap;
  --font-face--regular--unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  --font-face--regular--font-weight: 400;
  --font-face--regular--src: local("DMSans-Regular"), local("DM Sans Regular"), url("/moon/assets/fonts/DMSans-Regular.woff2") format("woff2");

  --font-face--semibold--font-family: DM Sans;
  --font-face--semibold--font-style: normal;
  --font-face--semibold--font-display: swap;
  --font-face--semibold--unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  --font-face--semibold--font-weight: 500;
  --font-face--semibold--src: local("DMSans-Semibold"), local("DM Sans Semibold"), url("/moon/assets/fonts/DMSans-Semibold.woff2") format("woff2");
          
  --font-family: DM Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  --font-size: 14;
  --font-weight--normal: 400;
  --font-weight--semibold: 500;

  --max-width--default: 1024;
  --max-width--large: 1440;

  --opacity--disabled: 0.35;

  --radius--small: 4px;
  --radius--default: 8px;
  --radius--largest: 100px;

  --space--xsmall: 4px;
  --space--small: 8px;
  --space--default: 16px;
  --space--medium: 24px;
  --space--large: 32px;
  --space--xlarge: 40px;

  --transition-duration--slow: 0.4s;
  --transition-duration--default: 0.2s;

  --z-index--carousel-control: 5;
  --z-index--dialog: 5;
  --z-index--toggle: 1;
  
  color: rgba(var(--bulma));
  background-color: rgba(var(--goku));
}

@layer components {
  .moon-input-group.horizontal > div:first-child input {
    @apply ltr:rounded-tr-none ltr:rounded-br-none ltr:input-rsb-hidden ;
  }
  .moon-input-group.horizontal > div:first-child input:hover {
    @apply ltr:rounded-moon-i-md ltr:rounded-moon-i-md;
  }
  .moon-input-group.horizontal > div:last-child input {
    @apply ltr:rounded-tl-none ltr:rounded-bl-none ltr:input-lsb-hidden ;
  }
  .moon-input-group.horizontal > div:last-child input:hover {
    @apply ltr:rounded-moon-i-md ltr:rounded-moon-i-md;
  }

  .moon-input-group.horizontal.rtl-aware > div:first-child input {
    @apply rtl:rounded-tl-none rtl:rounded-bl-none rtl:input-lsb-hidden;
  }
  .moon-input-group.horizontal.rtl-aware > div:first-child input:hover {
    @apply rtl:rounded-moon-i-md rtl:rounded-moon-i-md;
  }
  .moon-input-group.horizontal.rtl-aware > div:last-child input {
    @apply rtl:rounded-tr-none rtl:rounded-br-none rtl:input-rsb-hidden;
  }
  .moon-input-group.horizontal.rtl-aware > div:last-child input:hover {
    @apply rtl:rounded-moon-i-md rtl:rounded-moon-i-md;
  }

  .moon-input-group.vertical > div:first-child input {
    @apply rounded-bl-none rounded-br-none input-bbb-hidden;
  }
  .moon-input-group.vertical > div:first-child input:hover {
    @apply rounded-moon-i-md;
  }
  .moon-input-group.vertical > div:last-child input {
    @apply rounded-tl-none rounded-tr-none input-tbb-hidden;
  }
  .moon-input-group.vertical > div:last-child input:hover {
    @apply rounded-moon-i-md;
  }
  .carousel-item {
    scroll-snap-type: x;
    scroll-snap-align: start;
    overflow: hidden;
    white-space: normal;
    vertical-align: top;
  }
  .moon-icon {
    @apply inline-block align-middle h-[1em] w-[1em];
  }
  .moon-logo {
    @apply inline-block align-middle h-[1em] w-[1em];
  }
  .moon-country-flag {
    @apply inline-block align-middle h-[1em] w-[1em];
  }
  .moon-currency {
    @apply inline-block align-middle h-[1em] w-[1em];
  }
  .moon-asset {
    @apply inline-block align-middle h-[1em] w-[1em];
  }
  .moon-duotone {
    @apply inline-block align-middle text-piccolo;
  }
  .moon-pattern {
    @apply inline-block align-middle text-piccolo;
  }
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }
  .no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .scroll-snap-x-mandatory {
    scroll-snap-type: x mandatory;
  }
  .scroll-snap-align-start {
    scroll-snap-align: start;
  }
  .radio-button-checked-outline {
    box-shadow: inset 0 0 0 0.1rem var(--piccolo);   
  }  
  .radio-button-unchecked-outline {
    box-shadow: inset 0 0 0 0.1rem var(--trunks);  
  }
  .radio-button-hover {
    background-color: rgba(0, 0, 0, 0.08)
  }
}

@layer utilities {
  .animation-delay-minus-45 {
    animation-delay: -0.45s;
  }
  .animation-delay-minus-30 {
    animation-delay: -0.3s;
  }
  .animation-delay-minus-15 {
    animation-delay: -0.15s;
  }
  .hide-visually {   
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  } 
}

[x-cloak] {
  display: none !important;
}

input.date-icon-hidden[type="date"]::-webkit-inner-spin-button,
input.date-icon-hidden[type="date"]::-webkit-calendar-picker-indicator,
input.date-icon-hidden[type="datetime-local"]::-webkit-inner-spin-button,
input.date-icon-hidden[type="datetime-local"]::-webkit-calendar-picker-indicator {
  display: none;
  -webkit-appearance: none;
}

input:-webkit-autofill,
input:-webkit-autofill:focus {
  transition: background-color 600000s 0s, color 600000s 0s;
}

@font-face {
  font-family: DM Sans;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  font-weight: 400;
  src: local("DMSans-Regular"), local("DM Sans Regular"), url("/moon/assets/fonts/DMSans-Regular.woff2") format("woff2");
}

@font-face {
  font-family: DM Sans;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  font-weight: 500;
  src: local("DMSans-Semibold"), local("DM Sans Semibold"), url("/moon/assets/fonts/DMSans-Semibold.woff2") format("woff2");
}

/* @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500&display=swap'); */
/* vietnamese */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/spacegrotesk/v16/V8mDoQDjQSkFtoMM3T6r8E7mPb54C_k3HqUtEw.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/spacegrotesk/v16/V8mDoQDjQSkFtoMM3T6r8E7mPb94C_k3HqUtEw.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/spacegrotesk/v16/V8mDoQDjQSkFtoMM3T6r8E7mPbF4C_k3HqU.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/spacegrotesk/v16/V8mDoQDjQSkFtoMM3T6r8E7mPb54C_k3HqUtEw.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/spacegrotesk/v16/V8mDoQDjQSkFtoMM3T6r8E7mPb94C_k3HqUtEw.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/spacegrotesk/v16/V8mDoQDjQSkFtoMM3T6r8E7mPbF4C_k3HqU.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Operator	Description	Example
name:	Match package name. Supports * wildcards and repo/package form	name:phx* or name:hexpm/phoenix
description:	Full-text search of package descriptions	description:auth
depends:	Packages depending on a given package. Supports repo:package form	depends:ecto or depends:hexpm:ecto
build_tool:	Filter by build tool	build_tool:mix
updated_after:	Packages updated after an ISO8601 datetime	updated_after:2025-01-01T00:00:00Z
extra:	Match custom metadata (key,value). Nested keys are separated by commas	extra:license,MIT