206 lines
7.1 KiB
CSS
206 lines
7.1 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 {
|
|
display: block;
|
|
width: 30px;
|
|
height: 30px;
|
|
margin: 60px auto;
|
|
position: relative;
|
|
border: 4px solid #000;
|
|
animation: loader 2s infinite ease;
|
|
}
|
|
|
|
.loader-inner {
|
|
vertical-align: top;
|
|
display: inline-block;
|
|
width: 100%;
|
|
background-color: #000;
|
|
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 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;
|
|
}
|