mobilizon/src/assets/oruga-tailwindcss.css

381 lines
7.7 KiB
CSS

body {
@apply bg-body-background-color dark:bg-zinc-800 dark:text-white;
}
.out {
@apply underline hover:decoration-2 hover:decoration-mbz-yellow-alt-600;
}
/* Button */
.btn {
@apply font-bold py-2 px-4 bg-mbz-bluegreen hover:bg-mbz-bluegreen-600 text-white rounded h-10 outline-none focus:ring ring-offset-1 ring-offset-slate-50 ring-blue-300;
}
.btn:hover {
@apply text-slate-200;
}
.btn-rounded {
@apply rounded-full;
}
.btn-size-large {
@apply text-2xl py-6;
}
.btn-size-small {
@apply text-sm py-1 px-2;
}
.btn-disabled {
@apply opacity-50 cursor-not-allowed;
}
.btn-danger {
@apply border-2 bg-mbz-danger hover:bg-mbz-danger/90 text-white;
}
.btn-success {
@apply border-2 bg-mbz-success text-white;
}
.btn-warning {
@apply border-2 bg-mbz-warning text-black hover:bg-mbz-warning/90 hover:text-slate-800;
}
.btn-text {
@apply bg-transparent border-transparent text-black dark:text-white font-normal underline hover:bg-zinc-200 hover:text-black;
}
.btn-outlined-,
.btn-outlined-primary {
@apply bg-transparent text-black dark:text-white font-semibold py-2 px-4 border border-mbz-bluegreen dark:border-violet-3;
}
.btn-outlined-success {
@apply border-2 border-mbz-success bg-transparent text-mbz-success hover:bg-mbz-success hover:text-white;
}
.btn-outlined-warning {
@apply bg-transparent border dark:text-white hover:dark:text-slate-900 hover:bg-mbz-warning border-mbz-warning;
}
.btn-outlined-danger {
@apply border-2 bg-transparent border-mbz-danger text-mbz-danger hover:bg-mbz-danger hover:text-white;
}
.btn-outlined-text {
@apply bg-transparent hover:text-slate-900;
}
.btn-outlined-:hover,
.btn-outlined-primary:hover {
@apply font-semibold py-2 px-4 bg-mbz-bluegreen dark:bg-violet-3 text-white rounded;
}
/* Field */
.field {
margin-top: 0.5rem;
}
.field-label {
@apply block text-gray-700 dark:text-gray-100 text-base font-bold mb-2;
}
.o-field--horizontal.field {
@apply items-center;
}
.o-field__horizontal-label .field-label {
@apply mb-0;
}
.o-field__horizontal-body > .field {
@apply mt-0;
}
.field-danger {
@apply text-red-500;
}
.o-field.o-field--addons .control:last-child:not(:only-child) .button {
@apply inline-flex text-gray-800 bg-gray-200 h-9 mt-[1px] rounded text-center px-2 py-1.5;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}
.field-message-info {
@apply text-mbz-info;
}
.field-message-danger {
@apply text-mbz-danger;
}
/* Input */
.input {
@apply appearance-none box-border rounded border w-full py-2 px-3 text-black leading-tight dark:bg-zinc-600 dark:placeholder:text-zinc-400 dark:text-zinc-50;
}
.input-size-small {
@apply text-sm;
}
.input-size-medium {
@apply text-base;
}
.input-size-large {
@apply text-xl;
}
.input-danger {
@apply border-red-500;
}
.input-icon-right {
right: 0.5rem;
}
.input[type="text"]:disabled,
.input[type="email"]:disabled {
@apply bg-zinc-200 dark:bg-zinc-400;
}
.icon-warning {
@apply text-amber-600;
}
.icon-danger {
@apply text-red-500;
}
.icon-success {
@apply text-mbz-success;
}
.icon-grey {
@apply text-gray-500;
}
.o-input__icon-left {
@apply dark:text-black h-10 w-10;
}
.o-input-iconspace-left {
@apply pl-10;
}
/* TagInput */
.taginput {
@apply rounded bg-white dark:bg-zinc-700;
}
.taginput-item {
@apply bg-primary mr-2;
}
.taginput-item:first-child {
@apply ml-2;
}
/* Autocomplete */
.autocomplete {
@apply max-h-[200px] drop-shadow-md text-black z-10;
}
.autocomplete-item {
@apply py-1.5 px-4 text-start;
}
.autocomplete-item-group-title {
@apply opacity-50 py-0 px-2;
}
/* Dropdown */
.dropdown {
@apply inline-flex relative;
}
.dropdown-menu {
min-width: 12em;
@apply bg-white dark:bg-zinc-700 shadow-lg rounded text-start py-2;
}
.dropdown-item {
@apply relative inline-flex gap-1 no-underline p-2 cursor-pointer w-full;
}
.dropdown-item-active {
@apply bg-mbz-yellow-500 dark:bg-mbz-yellow-900 dark:text-zinc-100 text-black;
}
.dropdown-button {
@apply inline-flex gap-1;
}
/* Checkbox */
.checkbox {
margin-inline-end: 1rem;
}
.checkbox-check {
@apply appearance-none bg-primary border-primary;
}
.checkbox-checked {
@apply bg-primary text-primary;
}
.checkbox-label {
margin-left: 0.2rem;
}
/* Modal */
.modal-content {
@apply bg-white dark:bg-zinc-800 rounded px-2 py-4 w-full z-0;
}
/* Switch */
.switch {
@apply cursor-pointer inline-flex items-center relative mr-2;
}
.switch-label {
@apply pl-2;
}
.switch-check-checked {
@apply bg-primary;
}
/* Select */
.select {
@apply dark:bg-zinc-600 dark:placeholder:text-zinc-400 dark:text-zinc-50 pl-2 pr-8 border-2 border-transparent h-10 shadow-none rounded w-full;
}
/* Radio */
.radio {
@apply mr-2;
}
.form-radio {
@apply bg-none text-primary accent-primary;
}
.radio-label {
@apply pl-2;
}
.o-field--addons .o-radio:not(:only-child) input {
@apply rounded-full;
}
/* Editor */
button.menubar__button {
@apply dark:text-white;
}
/* Notification */
.notification {
@apply p-7 bg-mbz-yellow-alt-200 dark:bg-mbz-purple-600 text-black dark:text-white rounded;
}
.notification-primary {
@apply bg-primary;
}
.notification-info {
@apply bg-mbz-info text-black;
}
.notification-warning {
@apply bg-amber-600 text-black;
}
.notification-danger {
@apply bg-mbz-danger text-white;
}
/* Table */
.table tr {
@apply odd:bg-white dark:odd:bg-zinc-600 last:border-b-0 even:bg-gray-50 dark:even:bg-zinc-700 border-b rounded;
}
.table-td {
@apply py-4 px-2 whitespace-nowrap;
}
.table-th {
@apply p-2;
}
.table-root {
@apply mt-4;
}
/* Snackbar */
.notification-dark {
@apply text-white;
background: #363636;
}
/** Pagination */
.pagination {
@apply flex items-center text-center justify-between;
}
.pagination-link {
@apply inline-flex items-center relative justify-center cursor-pointer rounded h-10 m-1 p-2 bg-white dark:bg-zinc-300 text-lg text-black;
}
.pagination-list {
@apply flex items-center text-center list-none flex-wrap grow shrink justify-start;
}
.pagination-next,
.pagination-previous {
@apply px-3 dark:text-black;
}
.pagination-link-current {
@apply bg-primary dark:bg-primary cursor-not-allowed pointer-events-none border-primary text-white;
}
.pagination-ellipsis {
@apply text-center m-1 text-gray-300;
}
.pagination-link-disabled {
@apply bg-gray-200 dark:bg-gray-400;
}
/** Tabs */
.tabs-nav {
@apply flex items-center justify-start pb-0.5;
}
.tabs-nav-item-boxed {
@apply flex items-center justify-center px-2 py-2 rounded-t border-transparent;
}
.tabs-nav-item-active-boxed {
@apply bg-white border-gray-300 text-primary;
}
/** Tooltip */
.tooltip-content {
@apply bg-zinc-800 text-white dark:bg-zinc-300 dark:text-black rounded py-1 px-2;
}
.tooltip-arrow {
@apply text-zinc-800 dark:text-zinc-200;
}
.tooltip-content-success {
@apply bg-mbz-success text-white;
}
/** Tiptap editor */
.menubar__button {
@apply hover:bg-[rgba(0,0,0,.05)];
}
/** Datepicker */
.o-drop__menu--active {
@apply z-50;
}
.o-dpck__box {
@apply px-4 py-1;
}
.o-dpck__header {
@apply pb-2 mb-2;
border-bottom: 1px solid #dbdbdb;
}
.o-dpck__header__next,
.o-dpck__header__previous {
@apply justify-center text-center no-underline cursor-pointer items-center shadow-none inline-flex relative select-none leading-6 border rounded h-10 p-2 m-1 dark:text-white;
min-width: 2.25em;
}
.o-dpck__header__list {
@apply order-2 items-center flex justify-center text-center list-none flex-wrap my-0 p-0 -mx-0.5;
}
.o-dpck__header__list > * {
@apply mx-0.5;
}
.o-dpck__month__cell,
.o-dpck__table__cell {
@apply rounded py-2 px-3;
}
.o-dpck__table__cell--selectable {
@apply dark:text-zinc-50;
}
.o-dpck__month__head-cell,
.o-dpck__table__head-cell {
@apply font-semibold;
}
/** Timepicker */
.o-tpck__select {
@apply dark:bg-zinc-700 dark:placeholder:text-zinc-400 dark:text-zinc-50;
}