/* * This is a manifest file that'll be compiled into application.css, which will include all the files * listed below. * * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets, * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path. * * You're free to add application-wide styles to this file and they'll appear at the bottom of the * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS * files in this directory. Styles in this file should be added after the last require_* statement. * It is generally better to create a new file per style scope. * *= require_tree . *= require_self */ html { width: 100%; height: 100%; margin: 0; padding: 0; --grey-50: #F9FAFB; --grey-100: #F3F4F6; --grey-200: #E5E7EB; --grey-400: #9CA3AF; --grey-500: #6B7280; --grey-700: #374151; --grey-900: #111827; --red-400: #F87171; --red-500: #EF4444; --red-600: #DC2626; --yellow-400: #FBBF24; --yellow-500: #F59E0B; --green-300: #6EE7B7; --green-400: #34D399; --green-500: #10B981; --blue-400: #60A5FA; --blue-500: #3B82F6; --main-width: 1056px; --primary: var(--red-600); --border-color: var(--grey-200); --text-color: var(--grey-900); font-family: 'Open Sans', sans-serif; } body { width: 100%; height: 100%; margin: 0; padding: 0; color: var(--text-color) } h1 { padding: 2rem 0 1rem; } button { border: none; border-radius: .25rem; padding: 0.5em .5em; text-align: center; text-decoration: none; display: inline-block; font-size: 1rem; cursor: pointer; } button:hover { box-shadow: 0 .25rem .25rem 0 var(--grey-50); } /* --------------------------------------- */ .text-left { text-align: left; } .text-right { text-align: right; } /* --------------------------------------- */ .pill { margin: .2rem 0; padding: .1rem .4rem; border-radius: 5px; font-size: .9rem; font-weight: 600; letter-spacing: .1rem; background: var(--grey-200); } /* --------------------------------------- */ .popover { display: flex; flex-direction: column; width: 600px; padding: 1em; color: black; } .popover-header { display: flex; padding-bottom: 1em; flex-direction: row; justify-content: space-between; align-items: center; } .popover-description { margin: 0; padding: 0; } .popover-close { background: transparent; padding: 0; font-weight: 700; font-size: 20px; color: var(--grey-400); } .popover-body { padding: 1em 0; } .popover-footer { border-top: 1px solid var(--grey-50); } .tippy-box[data-theme~='rmp'] { background: white; box-shadow: 8px 0 30px 4px rgba(0, 0, 0, .2), 8px 4px 10px 0 rgba(0, 0, 0, .05); border-radius: 3px; transition: all cubic-bezier(.19,1,.22,1) .2s; } .tippy-box[data-theme~='rmp'][data-placement^='top'] > .tippy-arrow::before { border-top-color: white; } .tippy-box[data-theme~='rmp'][data-placement^='bottom'] > .tippy-arrow::before { border-bottom-color: white; } .tippy-box[data-theme~='rmp'][data-placement^='left'] > .tippy-arrow::before { border-left-color: white; } .tippy-box[data-theme~='rmp'][data-placement^='right'] > .tippy-arrow::before { border-right-color: white; }