@fui-org/fui-cli 1.3.2 → 2.1.0

package/skills/fui-skill/assets/projectdefaultstyle.css

@@ -1,67 +1,39 @@
-.space-x-1>*:not(:first-child) {
-    margin-left: 0.25rem !important;
+.ga-1{
+    gap: 4px;
 }
-
-.space-x-2>*:not(:first-child) {
-    margin-left: 0.5rem !important;
+.ga-2{
+    gap: 8px;
 }
-
-.space-x-3>*:not(:first-child) {
-    margin-left: 0.75rem !important;
+.ga-3{
+    gap: 12px;
 }
-
-.space-x-4>*:not(:first-child) {
-    margin-left: 1rem !important;
+.ga-4{
+    gap: 16px;
 }
-
-.space-x-5>*:not(:first-child) {
-    margin-left: 1.25rem !important;
+.ga-5{
+    gap: 20px;
 }
-
-.space-x-6>*:not(:first-child) {
-    margin-left: 1.5rem !important;
+.ga-6{
+    gap: 24px;
 }
-
-.space-x-7>*:not(:first-child) {
-    margin-left: 1.75rem !important;
+.ga-7{
+    gap: 28px;
 }
-
-.space-x-8>*:not(:first-child) {
-    margin-left: 2rem !important;
+.ga-8{
+    gap: 32px;
 }
-
-.space-y-1>*:not(:first-child) {
-    margin-top: 0.25rem !important;
+.ga-9{
+    gap: 36px;
 }
-
-.space-y-2>*:not(:first-child) {
-    margin-top: 0.5rem !important;
+.ga-10{
+    gap: 40px;
 }
-
-.space-y-3>*:not(:first-child) {
-    margin-top: 0.75rem !important;
+.ga-11{
+    gap: 44px;
 }
-
-.space-y-4>*:not(:first-child) {
-    margin-top: 1rem !important;
-}
-
-.space-y-5>*:not(:first-child) {
-    margin-top: 1.25rem !important;
-}
-
-.space-y-6>*:not(:first-child) {
-    margin-top: 1.5rem !important;
-}
-
-.space-y-7>*:not(:first-child) {
-    margin-top: 1.75rem !important;
-}
-
-.space-y-8>*:not(:first-child) {
-    margin-top: 2rem !important;
+.ga-12{
+    gap: 48px;
 }
-
 /* ------------------------------------------------------------------------ */
 .mw-200 {
     max-width: 200px;
@@ -110,7 +82,8 @@
 .hidden-container{
     display: none;
 }
-/* ========== for FUI home page ================================================= */
+
+/* ============================================================= */
 html {
     overflow-y: auto;
     font-family: Roboto, sans-serif;
@@ -135,278 +108,255 @@ input[type=number] {
 }
 
 /* ================================================================================================= */
-.v-list-item__spacer{
-    width: 10px !important;
-}
-
-.v-btn {
-    font-weight: 400;
-}
-
-.v-input--density-compact{
-    --v-input-control-height:36px;
-    --v-input-padding-top: 6px;
-}
-
-.v-input--density-compact .v-field--no-label, .v-input--density-compact .v-field--single-line, .v-input--density-compact .v-field--variant-outlined {
-    --v-field-padding-bottom: 6px;
-}
-
-.v-alert--density-compact {
-    padding-bottom: 6px;
-    padding-top: 6px;
+/* json ace_editor  */
+.ace_editor.ace-jsoneditor {
+    font-size: 0.9em !important;
 }
 
-.v-textarea .v-field__input {
-    height: auto;
+.jsoneditor-poweredBy {
+    display: none;
 }
 
-.v-container {
-    padding: 12px;
+.jsoneditor {
+    border: none !important;
 }
 
-/* ========================= grid ======================================================================== */
-
-.v-container.grid-list-none .v-row .v-col {
-    padding: 0px
+.jsoneditor-menu {
+    background-color: #1976d2 !important;
+    border: none !important;
 }
 
-.v-container.grid-list-none .v-row:only-child {
-    margin: 0px
+/* jconfirm  */
+@media only screen and (min-width: 600px) {
+    .jconfirm .jconfirm-box {
+        min-width: 460px;
+        max-width: 500px;
+    }
 }
 
-.v-container.grid-list-none .v-row:not(:only-child) {
-    margin: auto 0px
+.jconfirm .jconfirm-box {
+    font-family: Roboto, sans-serif !important;
+    border-top: 0 !important;
 }
 
-.v-container.grid-list-none :not(:only-child) .v-row:first-child {
-    margin-top: 0px
+.jconfirm.jconfirm-white .jconfirm-box .jconfirm-buttons button,
+.jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons button {
+    font-weight: 400 !important;
+    font-size: .9rem !important;
 }
 
-.v-container.grid-list-none :not(:only-child) .v-row:last-child {
-    margin-bottom: 0px
+.jconfirm .jconfirm-box-container {
+    margin: auto;
+    max-width: none;
 }
 
-.v-container.grid-list-xs .v-row .v-col {
-    padding: 1px
-}
+.jconfirm .jconfirm-box .jconfirm-buttons>button {
+    margin-left: 10px !important;
+    margin-right: 10px !important;
 
-.v-container.grid-list-xs .v-row:only-child {
-    margin: -1px
 }
 
-.v-container.grid-list-xs .v-row:not(:only-child) {
-    margin: auto -1px
+.jconfirm.jconfirm-white .jconfirm-box .jconfirm-title-c .jconfirm-icon-c,
+.jconfirm.jconfirm-light .jconfirm-box .jconfirm-title-c .jconfirm-icon-c {
+    font-size: 2.9em !important;
+    margin: 0 0 15px 0 !important;
 }
 
-.v-container.grid-list-xs :not(:only-child) .v-row:first-child {
-    margin-top: -1px
+.jconfirm .jconfirm-box div.jconfirm-title-c {
+    display: grid;
+    line-height: inherit;
+    text-align: center;
+    font-size: 1.1rem !important;
 }
 
-.v-container.grid-list-xs :not(:only-child) .v-row:last-child {
-    margin-bottom: -1px
+.jconfirm .jconfirm-box .jconfirm-content-pane .jconfirm-content,
+.jconfirm .jconfirm-box .jconfirm-buttons{
+    text-align: center;
+    float: inherit;
 }
 
-.v-container.grid-list-sm .v-row .v-col {
-    padding: 2px
-}
 
-.v-container.grid-list-sm .v-row:only-child {
-    margin: -2px
-}
+/* ============================================================== */
 
-.v-container.grid-list-sm .v-row:not(:only-child) {
-    margin: auto -2px
+.ck.ck-editor {
+    overflow-x: hidden;
+    font-size: initial;
 }
 
-.v-container.grid-list-sm :not(:only-child) .v-row:first-child {
-    margin-top: -2px
-}
 
-.v-container.grid-list-sm :not(:only-child) .v-row:last-child {
-    margin-bottom: -2px
+/* =========== menu for mobile =================================================== */
+@media only screen and (max-width: 959px) {
+    .v-application .hidden-sm-and-down {
+        display: none !important;
+    }
 }
 
-.v-container.grid-list-md .v-row .v-col {
-    padding: 4px
-}
 
-.v-container.grid-list-md .v-row:only-child {
-    margin: -4px
+/*================== Custom style ===================================================*/
+.v-text-field--filled.v-input--dense.v-text-field--outlined.v-text-field--filled>.v-input__control>.v-input__slot,
+.v-text-field--filled.v-input--dense.v-text-field--outlined>.v-input__control>.v-input__slot,
+.v-text-field--filled.v-input--dense.v-text-field--single-line>.v-input__control>.v-input__slot,
+.v-text-field--full-width.v-input--dense.v-text-field--outlined.v-text-field--filled>.v-input__control>.v-input__slot,
+.v-text-field--full-width.v-input--dense.v-text-field--outlined>.v-input__control>.v-input__slot,
+.v-text-field--full-width.v-input--dense.v-text-field--single-line>.v-input__control>.v-input__slot,
+.v-text-field--outlined.v-input--dense.v-text-field--outlined.v-text-field--filled>.v-input__control>.v-input__slot,
+.v-text-field--outlined.v-input--dense.v-text-field--outlined>.v-input__control>.v-input__slot,
+.v-text-field--outlined.v-input--dense.v-text-field--single-line>.v-input__control>.v-input__slot {
+    min-height: 36px;
 }
 
-.v-container.grid-list-md .v-row:not(:only-child) {
-    margin: auto -4px
+.v-select.v-text-field--outlined:not(.v-text-field--single-line).v-input--dense .v-select__selections {
+    padding: 0px 0;
 }
 
-.v-container.grid-list-md :not(:only-child) .v-row:first-child {
-    margin-top: -4px
+.v-text-field--enclosed.v-input--dense:not(.v-text-field--solo).v-text-field--outlined .v-input__append-inner,
+.v-text-field--enclosed.v-input--dense:not(.v-text-field--solo).v-text-field--outlined .v-input__append-outer,
+.v-text-field--enclosed.v-input--dense:not(.v-text-field--solo).v-text-field--outlined .v-input__prepend-inner,
+.v-text-field--enclosed.v-input--dense:not(.v-text-field--solo).v-text-field--outlined .v-input__prepend-outer,
+.v-text-field--full-width.v-input--dense:not(.v-text-field--solo).v-text-field--outlined .v-input__append-inner,
+.v-text-field--full-width.v-input--dense:not(.v-text-field--solo).v-text-field--outlined .v-input__append-outer,
+.v-text-field--full-width.v-input--dense:not(.v-text-field--solo).v-text-field--outlined .v-input__prepend-inner,
+.v-text-field--full-width.v-input--dense:not(.v-text-field--solo).v-text-field--outlined .v-input__prepend-outer {
+    margin-top: 6px;
 }
-
-.v-container.grid-list-md :not(:only-child) .v-row:last-child {
-    margin-bottom: -4px
+.v-text-field--outlined.v-input--dense .v-label {
+    top: 8px;
 }
 
-.v-container.grid-list-lg .v-row .v-col {
-    padding: 8px
+.v-text-field input {
+    padding: 9px 0 7px 0;
 }
 
-.v-container.grid-list-lg .v-row:only-child {
-    margin: -8px
+.v-btn {
+    font-weight: 400;
 }
 
-.v-container.grid-list-lg .v-row:not(:only-child) {
-    margin: auto -8px
+.v-textarea textarea {
+    line-height: 1.5;
 }
 
-.v-container.grid-list-lg :not(:only-child) .v-row:first-child {
-    margin-top: -8px
+/*=================== v-data-table ======================================================= */
+.v-data-table>.v-data-table__wrapper>table>tbody>tr>td,
+.v-data-table>.v-data-table__wrapper>table>tbody>tr>th,
+.v-data-table>.v-data-table__wrapper>table>tfoot>tr>td,
+.v-data-table>.v-data-table__wrapper>table>tfoot>tr>th,
+.v-data-table>.v-data-table__wrapper>table>thead>tr>td,
+.v-data-table>.v-data-table__wrapper>table>thead>tr>th {
+    padding: 0 12px;
 }
 
-.v-container.grid-list-lg :not(:only-child) .v-row:last-child {
-    margin-bottom: -8px
+.v-select__selection--comma,
+.theme--light.v-data-table thead tr th,
+.theme--light.v-data-table,
+.theme--light.v-input input {
+    /* color: #000 !important; */
+    font-weight: 400;
 }
 
-.v-container.grid-list-xl .v-row .v-col {
-    padding: 12px
+.theme--light.v-data-table thead tr th {
+    font-size: .85rem !important;
+    font-weight: 500;
+    color: #505050 !important;
+    height: 36px !important;
 }
 
-.v-container.grid-list-xl .v-row:only-child {
-    margin: -12px
+.v-data-table .v-text-field>.v-input__control>.v-input__slot:before {
+    border-width: 0 0 0 0 !important;
 }
 
-.v-container.grid-list-xl .v-row:not(:only-child) {
-    margin: auto -12px
+.v-data-table .v-data-table__wrapper .v-input {
+    font-size: inherit !important;
 }
 
-.v-container.grid-list-xl :not(:only-child) .v-row:first-child {
-    margin-top: -12px
+.tTable {
+    border-top: thin solid rgba(0, 0, 0, .08) !important;
 }
 
-.v-container.grid-list-xl :not(:only-child) .v-row:last-child {
-    margin-bottom: -12px
+.tTable table th {
+    white-space: nowrap !important;
+    background-color: #f9f9f9 !important;
+    border-bottom: thin solid rgba(0, 0, 0, .08) !important;
 }
 
-/* ----------------------------------------------------------------- */
-.grow {
-    flex-grow: 1;
-    flex-shrink: 0;
-    flex-basis: content;
+.tTable table td {
+    border-bottom: thin solid rgba(0, 0, 0, .08) !important;
 }
 
-.shrink {
-    flex-grow: 0;
-    flex-shrink: 1;
-    flex-basis: content;
+.theme--light.v-data-table .v-data-footer {
+    border-top: none !important;
 }
 
-/* ================================================================================================= */
-/* json ace_editor  */
-
-.ace_editor.ace-jsoneditor {
-    font-size: 1em !important;
-    line-height: 1.5em !important
+.theme--light.v-data-table .v-data-table__divider {
+    border-right: thin solid rgba(0, 0, 0, .08) !important;
 }
 
-.jsoneditor-poweredBy {
+.tTable table th .v-icon.v-data-table-header__icon {
     display: none;
 }
 
-
-/* jconfirm  */
-@media only screen and (min-width: 600px) {
-    .jconfirm .jconfirm-box {
-        min-width: 460px;
-        max-width: 500px;
-    }
-}
-
-.jconfirm .jconfirm-box {
-    font-family: Roboto, sans-serif !important;
-    border-top: 0 !important;
+.tTable table th.sortable.active .v-icon.v-data-table-header__icon {
+    display: inline-flex;
 }
 
-.jconfirm.jconfirm-white .jconfirm-box .jconfirm-buttons button,
-.jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons button {
-    font-weight: 400 !important;
-    font-size: .9rem !important;
+.tTable tbody tr:hover {
+    background-color: #f5f5f5 !important;
 }
 
-.jconfirm .jconfirm-box-container {
-    margin: auto;
+.tTableNoHover tbody tr:hover {
+    background: transparent !important;
 }
 
-.jconfirm .jconfirm-box .jconfirm-buttons>button {
-    margin-left: 10px !important;
-    margin-right: 10px !important;
-
+.v-data-table .v-data-table-header-mobile {
+    display: none !important;
 }
 
-.jconfirm.jconfirm-white .jconfirm-box .jconfirm-title-c .jconfirm-icon-c,
-.jconfirm.jconfirm-light .jconfirm-box .jconfirm-title-c .jconfirm-icon-c {
-    font-size: 2.9em !important;
-    margin: 0 !important;
+.v-data-table .v-data-table__mobile-row {
+    min-height: 34px;
+    height: 34px !important;
 }
 
-.jconfirm .jconfirm-box div.jconfirm-title-c {
-    display: grid;
-    line-height: inherit;
-    text-align: center;
-    font-size: 1.1rem !important;
-}
-
-.jconfirm .jconfirm-box div.jconfirm-content-pane.no-scroll,
-.jconfirm.jconfirm-white .jconfirm-box .jconfirm-buttons,
-.jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons {
-    text-align: center;
-    float: inherit;
-}
-
-
-/* ============================================================== */
-
-.ck.ck-editor {
-    overflow-x: hidden;
-    font-size: initial;
-}
-
-/* =================================================================================================== */
-.tTable {
-    border-top: thin solid rgba(0, 0, 0, .12) !important;
-    border-radius: 0;
-}
-
-.tTable .divider {
-    border-right: 1px solid rgba(0, 0, 0, .12);
-}
-
-
 /* ===================================================================================================
 =============== scrollbar Style ============================================================================
 ===================================================================================================  */
+/* Thanh cuộn mảnh, ẩn khi không hover, hiện dần khi rê chuột vào (giống #content-left-box của ME).
+   Màu thumb đi qua biến --fp-scrollbar; phải đăng ký @property thì biến mới transition được
+   (biến chưa đăng ký chỉ nhảy giá trị, không có hiệu ứng mờ dần). */
+@property --fp-scrollbar {
+    syntax: '<color>';
+    inherits: false;
+    initial-value: transparent;
+}
+
 .fpScrollbar, .v-navigation-drawer__content {
     overflow-y: auto;
+    --fp-scrollbar: transparent;
+    /* Firefox */
+    scrollbar-width: thin;
+    scrollbar-color: var(--fp-scrollbar) transparent;
+    /* CHỈ transition biến. Thêm "scrollbar-color" vào đây thì mỗi khung hình biến đổi màu lại khởi động lại
+       transition của scrollbar-color từ đầu ⇒ màu đổi từng nấc, chậm gấp 2–3 lần (đo trên lhu-docs). */
+    transition: --fp-scrollbar 600ms ease;
 }
 
-.fpScrollbar::-webkit-scrollbar, .v-navigation-drawer__content::-webkit-scrollbar {
-    width: 6px;
+.fpScrollbar:hover, .v-navigation-drawer__content:hover {
+    --fp-scrollbar: rgba(0, 0, 0, 0.25);
+    transition: --fp-scrollbar 300ms ease;
 }
 
-/* Track */
-.fpScrollbar::-webkit-scrollbar-track,.v-navigation-drawer__content::-webkit-scrollbar-track {
-    background: #f1f1f1;
-
+/* Chrome/Edge/Safari cũ. Từ Chrome 121, đã khai scrollbar-color thì Chrome BỎ QUA ::-webkit-scrollbar
+   ⇒ thanh thực tế rộng ~10px (mức "thin" của trình duyệt), không phải 5px. */
+.fpScrollbar::-webkit-scrollbar, .v-navigation-drawer__content::-webkit-scrollbar {
+    width: 5px;
+    height: 5px;
 }
 
-/* Handle */
-.fpScrollbar::-webkit-scrollbar-thumb,.v-navigation-drawer__content::-webkit-scrollbar-thumb {
-    background: #bbb;
-    border-radius: 4px;
+.fpScrollbar::-webkit-scrollbar-track, .v-navigation-drawer__content::-webkit-scrollbar-track {
+    background: transparent;
 }
 
-/* Handle on hover */
-.fpScrollbar::-webkit-scrollbar-thumb:hover, .v-navigation-drawer__content::-webkit-scrollbar-thumb:hover {
-    background: #bbb;
+.fpScrollbar::-webkit-scrollbar-thumb, .v-navigation-drawer__content::-webkit-scrollbar-thumb {
+    background-color: var(--fp-scrollbar);
+    border-radius: 4px;
 }
 
 /* ===================================================================================================
@@ -511,8 +461,30 @@ input[type=number] {
         /* Firefox 16+, IE 10+, Opera */
     }
 }
-
-
+/* ==============================================================================*/
+.fui-loading {
+    --color-1: #1867c0;
+    --size: 0.8px;
+  
+    width: calc(48 * var(--size));
+    height: calc(48 * var(--size));
+    border: calc(5 * var(--size)) dotted var(--color-1);
+    border-radius: 50%;
+    display: inline-block;
+    position: relative;
+    box-sizing: border-box;
+    animation: rotation 4s linear infinite;
+  }
+  
+  @keyframes rotation {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+  
 /* ===================================================================================================
 =============== Loader ============================================================================
 ===================================================================================================  */