cal.pub0.org/styles/globals.css

387 lines
11 KiB
CSS
Raw Blame History

This file contains invisible Unicode characters!

This file contains invisible Unicode characters that may be processed differently from what appears below. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to reveal hidden characters.

@tailwind base;
@tailwind components;
@tailwind utilities;
:root {
--brand-color: #292929;
--brand-text-color: #ffffff;
}
/* PhoneInput dark-mode overrides (it would add a lot of boilerplate to do this in JavaScript) */
.PhoneInputInput {
@apply text-sm border-0 focus:ring-0;
}
.dark .PhoneInputInput {
@apply bg-black;
}
.PhoneInputCountrySelect {
@apply text-black;
}
/* DateRangePicker */
.react-daterange-picker > .react-daterange-picker__wrapper {
/* border consistent with other inputs */
@apply px-2 py-1.5 lg:py-1 border-gray-300 rounded-sm sm:text-sm;
}
.react-daterange-picker > .react-daterange-picker__wrapper input {
/* Makes sure the on-focus behaviour is like Cal.com's */
@apply rounded-sm focus:ring-primary-500 focus:border-primary-500 h-auto py-0.5 my-0.5;
}
/* note(PeerRich): TODO move @layer components into proper React Components: <Button color="primary" size="xs" /> */
@layer components {
/* Primary buttons */
.btn-xs.btn-primary {
@apply inline-flex items-center px-2.5 py-1.5 border border-transparent text-xs font-medium rounded shadow-sm text-white bg-neutral-900 hover:bg-neutral-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;
}
.btn-sm.btn-primary {
@apply inline-flex items-center px-3 py-2 text-sm font-medium leading-4 text-white border border-transparent rounded-sm shadow-sm bg-neutral-900 hover:bg-neutral-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;
}
.btn.btn-primary {
@apply inline-flex items-center px-4 py-2 text-sm font-medium text-white border border-transparent rounded-sm shadow-sm bg-neutral-900 hover:bg-neutral-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;
}
.btn-lg.btn-primary {
@apply inline-flex items-center px-4 py-2 text-base font-medium text-white border border-transparent rounded-sm shadow-sm bg-neutral-900 hover:bg-neutral-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;
}
.btn-xl.btn-primary {
@apply inline-flex items-center px-6 py-3 text-base font-medium text-white border border-transparent rounded-sm shadow-sm bg-neutral-900 hover:bg-neutral-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;
}
.btn-wide.btn-primary {
@apply w-full px-4 py-2 text-sm font-medium text-center text-white border border-transparent rounded-sm shadow-sm bg-neutral-900 hover:bg-neutral-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;
}
/* Secondary buttons */
.btn-xs.btn-secondary {
@apply inline-flex items-center px-2.5 py-1.5 border border-transparent text-xs font-medium rounded text-neutral-700 bg-neutral-100 hover:bg-neutral-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;
}
.btn-sm.btn-secondary {
@apply inline-flex items-center px-3 py-2 text-sm font-medium leading-4 border border-transparent rounded-sm text-neutral-700 bg-neutral-100 hover:bg-neutral-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;
}
.btn.btn-secondary {
@apply inline-flex items-center px-4 py-2 text-sm font-medium border border-transparent rounded-sm text-neutral-700 bg-neutral-100 hover:bg-neutral-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;
}
.btn-lg.btn-secondary {
@apply inline-flex items-center px-4 py-2 text-base font-medium border border-transparent rounded-sm text-neutral-700 bg-neutral-100 hover:bg-neutral-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;
}
.btn-xl.btn-secondary {
@apply inline-flex items-center px-6 py-3 text-base font-medium border border-transparent rounded-sm text-neutral-700 bg-neutral-100 hover:bg-neutral-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;
}
.btn-wide.btn-secondary {
@apply w-full px-4 py-2 text-sm font-medium text-center border border-transparent rounded-sm text-neutral-700 bg-neutral-100 hover:bg-neutral-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;
}
/* White buttons */
.btn-xs.btn-white {
@apply inline-flex items-center px-2.5 py-1.5 border border-gray-300 shadow-sm text-xs font-medium rounded text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;
}
.btn-sm.btn-white {
@apply inline-flex items-center px-3 py-2 text-sm font-medium leading-4 text-gray-700 bg-white border border-gray-300 rounded-sm shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;
}
.btn.btn-white {
@apply inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-sm shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;
}
.btn-lg.btn-white {
@apply inline-flex items-center px-4 py-2 text-base font-medium text-gray-700 bg-white border border-gray-300 rounded-sm shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;
}
.btn-xl.btn-white {
@apply inline-flex items-center px-6 py-3 text-base font-medium text-gray-700 bg-white border border-gray-300 rounded-sm shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;
}
.btn-wide.btn-white {
@apply w-full px-4 py-2 text-sm font-medium text-center text-gray-700 bg-white border border-gray-300 rounded-sm shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;
}
/* btn icon */
.btn-icon {
@apply p-2 border border-transparent rounded-sm cursor-pointer hover:border-gray-300 text-neutral-500 hover:text-neutral-900;
}
/* slider */
.slider {
@apply relative flex items-center w-40 h-4 select-none;
}
.slider > .slider-track {
@apply relative flex-grow h-1 rounded-md bg-neutral-400;
}
.slider .slider-range {
@apply absolute h-full rounded-full bg-neutral-700;
}
.slider .slider-thumb {
@apply block w-3 h-3 transition-all rounded-full shadow-sm cursor-pointer bg-neutral-700;
}
.slider .slider-thumb:hover {
@apply bg-neutral-600;
}
.slider .slider-thumb:focus {
box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.2);
}
}
/* !important to style multi-email input */
::-moz-selection {
color: white;
background: black;
}
::selection {
color: white;
background: black;
}
/* add padding bottom to bottom nav on standalone mode */
@media all and (display-mode: standalone) {
.bottom-nav {
padding-bottom: 24px;
}
}
/* hide intercom chat bubble on mobile */
@media only screen and (max-width: 768px) {
.intercom-launcher-frame {
display: none !important;
}
}
/* add padding bottom to bottom nav on standalone mode */
@media all and (display-mode: standalone) {
.bottom-nav {
padding-bottom: 24px;
}
}
/* hide intercom chat bubble on mobile */
@media only screen and (max-width: 768px) {
.intercom-launcher-frame {
display: none !important;
}
}
.react-multi-email > [type="text"] {
@apply block w-full border-gray-300 rounded-md shadow-sm dark:bg-gray-700 dark:text-white dark:border-gray-900 focus:ring-black focus:border-brand sm:text-sm;
}
.react-multi-email [data-tag] {
box-shadow: none !important;
@apply inline-flex items-center px-2 py-1 my-1 mr-2 text-sm font-medium text-gray-900 border border-transparent rounded-md dark:text-white bg-neutral-200 hover:bg-neutral-100 dark:bg-brand focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;
}
.react-multi-email > span[data-placeholder] {
display: none;
position: absolute;
left: 0.8rem;
top: 0.75rem;
line-height: 1.25rem;
font-size: 0.875rem;
}
.react-multi-email.empty > span[data-placeholder] {
display: inline;
color: #646b7a;
}
.react-multi-email.focused > span[data-placeholder] {
display: none;
}
.react-multi-email > input {
width: 100% !important;
display: inline-block !important;
@apply mt-1;
}
.react-multi-email [data-tag] {
@apply inline-flex items-center px-2 py-1 my-1 mr-2 text-sm font-medium text-gray-900 border border-transparent rounded-md shadow-sm dark:text-white bg-neutral-200 hover:bg-neutral-100 dark:bg-neutral-900 dark:hover:bg-neutral-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;
}
.react-multi-email [data-tag] [data-tag-item] {
max-width: 100%;
overflow: hidden;
}
.react-multi-email [data-tag] [data-tag-handle] {
margin-left: 0.833em;
cursor: pointer;
}
/* !important to override react-select */
.react-select__value-container {
border: 0 !important;
}
.react-select__input input {
border: 0 !important;
box-shadow: none !important;
}
.react-select__option--is-focused {
background: #000 !important;
color: #fff !important;
}
.react-select__control {
border: 2px solid transparent !important;
box-shadow: none !important;
}
.react-select__control.react-select__control--is-focused {
border: 2px solid #000 !important;
border-color: #000 !important;
box-shadow: none !important;
margin: -1px;
padding: 1px;
}
/* !important to override react-dates */
.DateRangePickerInput__withBorder {
border: 0 !important;
}
.DateInput_input {
border: 1px solid #d1d5db !important;
border-radius: 2px !important;
font-size: inherit !important;
font-weight: inherit !important;
color: #000;
padding: 11px 11px 9px !important;
line-height: 16px !important;
}
.DateInput_input__focused {
border: 2px solid #000 !important;
border-radius: 2px !important;
box-shadow: none !important;
padding: 10px 10px 9px !important;
}
.DateRangePickerInput_arrow {
padding: 0px 10px;
}
.loader {
display: block;
width: 30px;
height: 30px;
margin: 60px auto;
position: relative;
border-width: 4px;
border-style: solid;
animation: loader 2s infinite ease;
}
.loader-inner {
vertical-align: top;
display: inline-block;
width: 100%;
animation: loader-inner 2s infinite ease-in;
}
@keyframes loader {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(180deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(360deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes loader-inner {
0% {
height: 0%;
}
25% {
height: 0%;
}
50% {
height: 100%;
}
75% {
height: 100%;
}
100% {
height: 0%;
}
}
nav#nav--settings > a {
@apply flex items-center px-3 py-2 text-sm font-medium text-gray-900 border-l-4 border-transparent hover:bg-gray-50 hover:text-gray-900;
}
nav#nav--settings > a svg {
@apply flex-shrink-0 w-6 h-6 mr-3 -ml-1 text-gray-400 group-hover:text-gray-500;
}
nav#nav--settings > a.active {
@apply bg-neutral-50 border-neutral-500 text-neutral-700 hover:bg-neutral-50 hover:text-neutral-700;
}
nav#nav--settings > a.active svg {
@apply text-neutral-500;
}
body {
background-color: #f3f4f6;
}
hr {
@apply border-gray-200;
}
.text-white-important {
color: white !important;
}
@layer utilities {
.transition-max-width {
-webkit-transition-property: max-width;
transition-property: max-width;
}
}
#timeZone input:focus {
box-shadow: none;
}
.weekdaySelect button.active {
background: #000;
color: #fff;
}
/* react-date-picker forces a border upon us, cast it away */
.react-date-picker__wrapper {
border: none !important;
}