不喜欢Filament的默认样式。所以小改了一下。
resources/css/filament/admin/theme.scss的CSS代码放在这里：
@import "../../../../vendor/filament/filament/resources/css/theme.css";
@import '../../../../vendor/awcodes/filament-tiptap-editor/resources/css/plugin.css';
@config './tailwind.config.js';
.fi-body {
background-color: #f1f5f9;
}
.fi-page section {
@apply gap-4 !important;
}
.fi-sidebar-item-icon {
width: 1rem;
height: 1rem;
}
.fi-sidebar-item-active .fi-sidebar-item-button,
.fi-sidebar-item-button:hover {
background-color: #f8f9fa;
}
.fi-sidebar-group-items {
row-gap: 0.5rem;
}
.fi-main {
padding-left: 0 !important;
padding-right: 0 !important;
.fi-form>div:not(:has(section)) {
background-color: white;
padding: 30px 50px;
border-radius: 0.25rem;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05);
background-clip: border-box;
}
.fi-form {
@apply gap-0 !important;
}
/* .fi-form > div:has(section) ~ .fi-form-actions {
width: calc((100% - 2 * 1.5rem) / 3 * 2 + 1.5rem);
margin-left: calc((100% - 2 * 1.5rem) / 3 + 1.5rem);
} */
.fi-form-actions {
@apply mt-4
}
}
.settings-page .custom-settings-section {
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05);
}
.settings-page .fi-fo-component-ctn {
background-color: transparent !important;
padding: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
.fi-ta-table thead {
background-color: white;
}
.divide-gray-200> :not([hidden])~ :not([hidden]) {
--tw-divide-opacity: 1;
border-color: #f2f5f9;
}
.fi-pagination span,
.fi-select-input {
color: #cbd5e1 !important;
}
.fi-sidebar-group-label {
padding-left: 26px;
color: #a1a5b7;
}
.fi-header-heading {
margin-top: 20px;
}
.fi-simple-page .fi-form,
.fi-in-repeatable-item {
box-shadow: none;
}
:is(.dark) .fi-form {
background-color: #171719;
}
.fi-simple-main {
border-radius: 0.25rem !important;
}
.fi-section,
.fi-ta-ctn,
.fi-section-content,
.fi-btn,
.filepond--root,
.fi-in-tabs,
.fi-modal-window,
.fi-wi-stats-overview-stat,
.fi-no-notification,
.fi-dropdown-panel,
.fi-in-repeatable-item,
.fi-fo-repeater-item,
.settings-page .custom-settings-section,
.fi-fieldset {
@apply !rounded;
}
.fi-fo-builder-item {
@apply rounded-sm;
}
.fi-dropdown-panel {
@apply shadow-md;
}
.fi-section-content,
.settings-page .custom-settings-section,
.fi-dropdown-panel {
@apply ring-0;
}
.fi-fo-repeater-item {
@apply rounded-none ring-0 border-t-0;
}
.fi-input-wrp {
@apply rounded-sm;
}
.fi-ta-ctn,
.fi-section,
.fi-simple-main,
.fi-in-tabs,
.fi-wi-stats-overview-stat {
@apply ring-0;
}
.fi-logo {
@apply h-6;
}
.progress span {
@apply px-4 py-2 mr-2 text-xs bg-[#F5F5F5] cursor-pointer;
}
.progress span.done {
@apply bg-[#F0F8F5] text-[#1BAA6E];
}
.progress span.lost {
@apply bg-[#FB3640] text-white;
}
.progress span.invalid {
@apply bg-[#A9BCD0] text-white;
}
.progress span.closed {
@apply bg-green-500 text-white;
}
.fi-dropdown-panel {
@apply w-auto;
}
.p-order-base .fi-section-content-ctn .fi-section-content {
@apply p-0;
}
.fi-header-heading {
@apply hidden;
}
.fi-ac {
@apply !mt-0;
}
.fi-breadcrumbs {
@apply !mb-0;
}
.follow-type span {
text-align: center;
}
.follow-type span.active {
color: #1baa6e;
}
.customer_actions .fi-ac {
@apply justify-end;
}
.contact-action .fi-icon-btn svg {
@apply w-4;
}
.badge-list span:not(.grid):not(.truncate) {
@apply px-1 py-1 rounded mr-4 text-xs;
}
.overview-button {
margin-top: -70px;
}
/* 定义滚动条 */
.custom-scrollbar {
-ms-overflow-style: none;
/* IE 和 Edge */
scrollbar-width: none;
/* Firefox */
}
.custom-scrollbar::-webkit-scrollbar {
width: 0;
/* 默认情况下隐藏滚动条 */
}
.country_code {
.choices__list--single {
display: inline;
}
}
.fi-wi-widget,.fi-wi-widget .fi-section,.fi-wi-stats-overview-stats-ctn {
@apply !h-full
}
/* 插件列表 */
.plugins {
.btn:hover .icon-wrapper .icon {
--tw-translate-x: 100% !important;
transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important
}
.btn:hover .icon-wrapper .icon:first-child {
opacity: 1
}
.btn:hover .icon-wrapper .icon:last-child {
opacity: 0
}
.btn:hover .icon:last-child {
transition-property: opacity,transform;
transition-duration: .15s;
transition-duration: .6s;
transition-timing-function: cubic-bezier(.4,0,.2,1)
}
.btn .icon-wrapper {
display: flex;
height: 3rem;
width: 3rem;
justify-content: flex-end;
overflow: hidden;
border-radius: 9999px;
transition-property: all;
transition-timing-function: cubic-bezier(.4,0,.2,1);
transition-duration: .3s
}
.btn .icon-wrapper .icon {
display: flex;
height: 3rem;
min-width: 3rem;
align-items: center;
justify-content: center;
-moz-column-gap: 0px;
column-gap: 0px;
vertical-align: middle;
--tw-text-opacity: 1;
color: rgb(29 29 29 / var(--tw-text-opacity));
transition-property: all;
transition-timing-function: cubic-bezier(.4,0,.2,1);
transition-duration: .15s;
transition-duration: .4s
}
.btn .icon-wrapper .icon svg {
height: 1.25rem;
width: 1.25rem
}
.btn .icon-wrapper .icon:first-child {
--tw-translate-x: 50%;
transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
opacity: 0
}
}
.ec-event {@apply m-1}
#calendar {
.ec-header {
.ec-days {
.ec-day {
@apply min-h-10 leading-10 text-sm font-medium
}
}
}
.ec-body {
.ec-days {
.ec-day {
@apply !min-h-36
}
time {@apply !text-xs}
}
}
}
.ec-all-day, .ec-body, .ec-day, .ec-day-head, .ec-days, .ec-header {
@apply !border-slate-200 border
}
.ec-day.ec-today {
@apply bg-[#e9f3ff];
}
.fc .fc-daygrid-day-number {
@apply text-gray-700
}
提供