159 lines
6.6 KiB
CSS
159 lines
6.6 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
|
|
/* 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 border border-transparent text-sm leading-4 font-medium rounded-sm 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.btn-primary {
|
|
@apply inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-sm 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-lg.btn-primary {
|
|
@apply inline-flex items-center px-4 py-2 border border-transparent text-base font-medium rounded-sm 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-xl.btn-primary {
|
|
@apply inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-sm 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-wide.btn-primary {
|
|
@apply w-full text-center px-4 py-2 border border-transparent text-sm font-medium rounded-sm 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;
|
|
}
|
|
|
|
/* 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 border border-transparent text-sm leading-4 font-medium 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 border border-transparent text-sm font-medium 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 border border-transparent text-base font-medium 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 border border-transparent text-base font-medium 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 text-center px-4 py-2 border border-transparent text-sm font-medium 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 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-sm text-gray-700 bg-white 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 border border-gray-300 shadow-sm text-sm font-medium rounded-sm text-gray-700 bg-white 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 border border-gray-300 shadow-sm text-base font-medium rounded-sm text-gray-700 bg-white 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 border border-gray-300 shadow-sm text-base font-medium rounded-sm text-gray-700 bg-white 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 text-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-sm text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;
|
|
}
|
|
}
|
|
|
|
.loader {
|
|
margin: 80px auto;
|
|
border: 8px solid #f3f3f3; /* Light grey */
|
|
border-top: 8px solid #039be5; /* neutral */
|
|
border-radius: 50%;
|
|
width: 60px;
|
|
height: 60px;
|
|
animation: spin 2s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
nav#nav--settings > a {
|
|
@apply border-transparent text-gray-900 hover:bg-gray-50 hover:text-gray-900 border-l-4 px-3 py-2 flex items-center text-sm font-medium;
|
|
}
|
|
|
|
nav#nav--settings > a svg {
|
|
@apply text-gray-400 group-hover:text-gray-500 flex-shrink-0 -ml-1 mr-3 h-6 w-6;
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
|
|
table tbody tr:nth-child(odd) {
|
|
@apply bg-gray-50;
|
|
}
|
|
|
|
|
|
body {
|
|
background-color: #f3f4f6;
|
|
}
|
|
|
|
.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 {
|
|
font-family: "Courier New", sans-serif;
|
|
}
|
|
|
|
.weekdaySelect button.active:first-child {
|
|
margin-left: -1px !important;
|
|
}
|
|
|
|
.weekdaySelect button:not(.active) {
|
|
padding-left: calc(0.5rem + 0px);
|
|
margin-right: 1px;
|
|
}
|
|
|
|
.weekdaySelect button.active + button.active {
|
|
border-color: rgba(3, 169, 244, var(--tw-border-opacity))
|
|
rgba(3, 169, 244, var(--tw-border-opacity))
|
|
rgba(3, 169, 244, var(--tw-border-opacity))
|
|
white;
|
|
}
|