@fui-org/fui-cli 1.3.2 → 2.0.0

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

@@ -0,0 +1,555 @@
+.space-x-1>*:not(:first-child) {
+    margin-left: 0.25rem !important;
+}
+
+.space-x-2>*:not(:first-child) {
+    margin-left: 0.5rem !important;
+}
+
+.space-x-3>*:not(:first-child) {
+    margin-left: 0.75rem !important;
+}
+
+.space-x-4>*:not(:first-child) {
+    margin-left: 1rem !important;
+}
+
+.space-x-5>*:not(:first-child) {
+    margin-left: 1.25rem !important;
+}
+
+.space-x-6>*:not(:first-child) {
+    margin-left: 1.5rem !important;
+}
+
+.space-x-7>*:not(:first-child) {
+    margin-left: 1.75rem !important;
+}
+
+.space-x-8>*:not(:first-child) {
+    margin-left: 2rem !important;
+}
+
+.space-y-1>*:not(:first-child) {
+    margin-top: 0.25rem !important;
+}
+
+.space-y-2>*:not(:first-child) {
+    margin-top: 0.5rem !important;
+}
+
+.space-y-3>*:not(:first-child) {
+    margin-top: 0.75rem !important;
+}
+
+.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;
+}
+
+/* ------------------------------------------------------------------------ */
+.mw-200 {
+    max-width: 200px;
+}
+
+.mw-300 {
+    max-width: 300px;
+}
+
+.mw-400 {
+    max-width: 400px;
+}
+
+.mw-500 {
+    max-width: 500px;
+}
+
+.mw-600 {
+    max-width: 600px;
+}
+
+.mw-700 {
+    max-width: 700px;
+}
+
+.mw-800 {
+    max-width: 800px;
+}
+
+.mw-900 {
+    max-width: 900px;
+}
+
+.mw-1000 {
+    max-width: 1000px;
+}
+
+.mw-1200 {
+    max-width: 1200px;
+}
+
+.mw-1400 {
+    max-width: 1400px;
+}
+
+.hidden-container{
+    display: none;
+}
+/* ========== for FUI home page ================================================= */
+html {
+    overflow-y: auto;
+    font-family: Roboto, sans-serif;
+}
+
+b {
+    font-weight: 500;
+}
+
+.wrs_editor .wrs_tickContainer {
+    display: none;
+}
+
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+
+input[type=number] {
+    -moz-appearance: textfield;
+}
+
+/* ================================================================================================= */
+.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;
+}
+
+.v-textarea .v-field__input {
+    height: auto;
+}
+
+.v-container {
+    padding: 12px;
+}
+
+/* ========================= grid ======================================================================== */
+
+.v-container.grid-list-none .v-row .v-col {
+    padding: 0px
+}
+
+.v-container.grid-list-none .v-row:only-child {
+    margin: 0px
+}
+
+.v-container.grid-list-none .v-row:not(:only-child) {
+    margin: auto 0px
+}
+
+.v-container.grid-list-none :not(:only-child) .v-row:first-child {
+    margin-top: 0px
+}
+
+.v-container.grid-list-none :not(:only-child) .v-row:last-child {
+    margin-bottom: 0px
+}
+
+.v-container.grid-list-xs .v-row .v-col {
+    padding: 1px
+}
+
+.v-container.grid-list-xs .v-row:only-child {
+    margin: -1px
+}
+
+.v-container.grid-list-xs .v-row:not(:only-child) {
+    margin: auto -1px
+}
+
+.v-container.grid-list-xs :not(:only-child) .v-row:first-child {
+    margin-top: -1px
+}
+
+.v-container.grid-list-xs :not(:only-child) .v-row:last-child {
+    margin-bottom: -1px
+}
+
+.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
+}
+
+.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
+}
+
+.v-container.grid-list-md .v-row .v-col {
+    padding: 4px
+}
+
+.v-container.grid-list-md .v-row:only-child {
+    margin: -4px
+}
+
+.v-container.grid-list-md .v-row:not(:only-child) {
+    margin: auto -4px
+}
+
+.v-container.grid-list-md :not(:only-child) .v-row:first-child {
+    margin-top: -4px
+}
+
+.v-container.grid-list-md :not(:only-child) .v-row:last-child {
+    margin-bottom: -4px
+}
+
+.v-container.grid-list-lg .v-row .v-col {
+    padding: 8px
+}
+
+.v-container.grid-list-lg .v-row:only-child {
+    margin: -8px
+}
+
+.v-container.grid-list-lg .v-row:not(:only-child) {
+    margin: auto -8px
+}
+
+.v-container.grid-list-lg :not(:only-child) .v-row:first-child {
+    margin-top: -8px
+}
+
+.v-container.grid-list-lg :not(:only-child) .v-row:last-child {
+    margin-bottom: -8px
+}
+
+.v-container.grid-list-xl .v-row .v-col {
+    padding: 12px
+}
+
+.v-container.grid-list-xl .v-row:only-child {
+    margin: -12px
+}
+
+.v-container.grid-list-xl .v-row:not(:only-child) {
+    margin: auto -12px
+}
+
+.v-container.grid-list-xl :not(:only-child) .v-row:first-child {
+    margin-top: -12px
+}
+
+.v-container.grid-list-xl :not(:only-child) .v-row:last-child {
+    margin-bottom: -12px
+}
+
+/* ----------------------------------------------------------------- */
+.grow {
+    flex-grow: 1;
+    flex-shrink: 0;
+    flex-basis: content;
+}
+
+.shrink {
+    flex-grow: 0;
+    flex-shrink: 1;
+    flex-basis: content;
+}
+
+/* ================================================================================================= */
+/* json ace_editor  */
+
+.ace_editor.ace-jsoneditor {
+    font-size: 1em !important;
+    line-height: 1.5em !important
+}
+
+.jsoneditor-poweredBy {
+    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;
+}
+
+.jconfirm.jconfirm-white .jconfirm-box .jconfirm-buttons button,
+.jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons button {
+    font-weight: 400 !important;
+    font-size: .9rem !important;
+}
+
+.jconfirm .jconfirm-box-container {
+    margin: auto;
+}
+
+.jconfirm .jconfirm-box .jconfirm-buttons>button {
+    margin-left: 10px !important;
+    margin-right: 10px !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;
+}
+
+.jconfirm .jconfirm-box div.jconfirm-title-c {
+    display: grid;
+    line-height: inherit;
+    text-align: center;
+    font-size: 1.1rem !important;
+}
+
+.jconfirm .jconfirm-box .jconfirm-content-pane .jconfirm-content,
+.jconfirm .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:hover, .v-navigation-drawer__content:hover {
+    --fp-scrollbar: rgba(0, 0, 0, 0.25);
+    transition: --fp-scrollbar 300ms ease;
+}
+
+/* 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;
+}
+
+.fpScrollbar::-webkit-scrollbar-track, .v-navigation-drawer__content::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.fpScrollbar::-webkit-scrollbar-thumb, .v-navigation-drawer__content::-webkit-scrollbar-thumb {
+    background-color: var(--fp-scrollbar);
+    border-radius: 4px;
+}
+
+/* ===================================================================================================
+=============== Loader ============================================================================
+===================================================================================================  */
+
+.loader-wrapper {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 100000;
+}
+
+.loader-wrapper .loader {
+    display: block;
+    position: relative;
+    left: 50%;
+    top: 50%;
+    width: 111px;
+    height: 111px;
+    margin: -59px 0 0 -59px;
+    border-radius: 50%;
+    border: 3px solid transparent;
+    border-top-color: #3498db;
+    -webkit-animation: fui-loader-spin 2s linear infinite;
+    /* Chrome, Opera 15+, Safari 5+ */
+    animation: fui-loader-spin 2s linear infinite;
+    /* Chrome, Firefox 16+, IE 10+, Opera */
+    z-index: 1001;
+}
+
+.loader-wrapper .loader:before {
+    content: "";
+    position: absolute;
+    top: 5px;
+    left: 5px;
+    right: 5px;
+    bottom: 5px;
+    border-radius: 50%;
+    border: 3px solid transparent;
+    border-top-color: #e74c3c;
+    -webkit-animation: fui-loader-spin 3s linear infinite;
+    /* Chrome, Opera 15+, Safari 5+ */
+    animation: fui-loader-spin 3s linear infinite;
+    /* Chrome, Firefox 16+, IE 10+, Opera */
+}
+
+.loader-wrapper .loader:after {
+    content: "";
+    position: absolute;
+    top: 15px;
+    left: 15px;
+    right: 15px;
+    bottom: 15px;
+    border-radius: 50%;
+    border: 3px solid transparent;
+    border-top-color: #f9c922;
+    -webkit-animation: fui-loader-spin 1.5s linear infinite;
+    /* Chrome, Opera 15+, Safari 5+ */
+    animation: fui-loader-spin 1.5s linear infinite;
+    /* Chrome, Firefox 16+, IE 10+, Opera */
+}
+
+@-webkit-keyframes fui-loader-spin {
+    0% {
+        -webkit-transform: rotate(0deg);
+        /* Chrome, Opera 15+, Safari 3.1+ */
+        -ms-transform: rotate(0deg);
+        /* IE 9 */
+        transform: rotate(0deg);
+        /* Firefox 16+, IE 10+, Opera */
+    }
+
+    100% {
+        -webkit-transform: rotate(360deg);
+        /* Chrome, Opera 15+, Safari 3.1+ */
+        -ms-transform: rotate(360deg);
+        /* IE 9 */
+        transform: rotate(360deg);
+        /* Firefox 16+, IE 10+, Opera */
+    }
+}
+
+@keyframes fui-loader-spin {
+    0% {
+        -webkit-transform: rotate(0deg);
+        /* Chrome, Opera 15+, Safari 3.1+ */
+        -ms-transform: rotate(0deg);
+        /* IE 9 */
+        transform: rotate(0deg);
+        /* Firefox 16+, IE 10+, Opera */
+    }
+
+    100% {
+        -webkit-transform: rotate(360deg);
+        /* Chrome, Opera 15+, Safari 3.1+ */
+        -ms-transform: rotate(360deg);
+        /* IE 9 */
+        transform: rotate(360deg);
+        /* 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 ============================================================================
+===================================================================================================  */