322 lines
9.3 KiB
CSS
322 lines
9.3 KiB
CSS
|
|
:root { --yt-main-gray: #c2c7d0; --yt-main-black: #212529; --yt-main-gray-hover: #c2c7d0; --yt-gray: #505050; --yt-gray-hover: #3c3c3c; --yt-gray-2: #8f8c8c; --yt-gray-2-hover: #646060; --yt-gray-3: #ededed; --yt-gray-4: #dddddd; --yt-pink: #ff95d0; --yt-pink-hover: #ef84c0; --yt-red-2: #d34949; --yt-yellow-1: #ffc902; }
|
|
|
|
|
|
.mod-skin-dark:not(.mod-skin-light) .panel-hdr, .mod-skin-dark:not(.mod-skin-light) .card-header { background: rgba(0, 0, 0, 0.03); }
|
|
|
|
.btn-sm-2 { padding: 2px 19px; }
|
|
|
|
.table td { word-break: break-all; }
|
|
|
|
label[id$='-error'].error { color: var(--yt-red-2); }
|
|
|
|
/*[id^=yt_tooltip] { min-width: 650px !important; }*/
|
|
|
|
.circle-light { display: inline-block; width: 25px; height: 25px; border-radius: 50px; }
|
|
|
|
.light-flash { --flash-color-1: #ffa100; --flash-color-2: #26272b; animation: flashing-bg 0.5s linear infinite; }
|
|
|
|
.light-flash-c { --flash-color-1: #ffa100; --flash-color-2: #26272b; animation: flashing-c 0.5s linear infinite; }
|
|
|
|
.light-flash-c-bd { --flash-color-1: #ffa100; --flash-color-2: #26272b; animation: flashing-c-bd 0.5s linear infinite; }
|
|
|
|
/* checkbox switch */
|
|
input.toggle:checked::before { content: ''; position: absolute; top: 2px; left: 24px; display: block; border-radius: 25px; width: 20px; height: 20px; background: #3f8635; }
|
|
|
|
input.toggle::before { content: ''; position: absolute; top: 2px; left: 3px; display: block; border-radius: 25px; width: 20px; height: 20px; background: #656565; transition: 0.2s; }
|
|
|
|
input.toggle { cursor: pointer; appearance: none; position: relative; width: 48px; height: 24px; background: #464646; border-radius: 50px; align-content: center; }
|
|
|
|
input.toggle:checked { background: #97c193; }
|
|
|
|
.loading-bg { background: #0000009c; background-repeat: no-repeat; opacity: 0; width: 100%; height: 100vh; position: fixed; z-index: 3000; }
|
|
|
|
.dropdown-menu { z-index: 3000; }
|
|
|
|
.adsk-viewing-viewer { top: 0px; }
|
|
|
|
.lds-ring { display: inline-block; position: relative; width: 25px; height: 25px; margin-right: 0.8rem; }
|
|
|
|
.lds-ring div { top: -4px; box-sizing: border-box; display: block; position: absolute; width: 25px; height: 25px; margin: 6px; border: 6px solid #fff; border-radius: 50%; animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; border-color: #fff transparent transparent transparent; }
|
|
|
|
.lds-ring div:nth-child(1) { animation-delay: -0.45s; }
|
|
|
|
.lds-ring div:nth-child(2) { animation-delay: -0.3s; }
|
|
|
|
.lds-ring div:nth-child(3) { animation-delay: -0.15s; }
|
|
|
|
/* js-tree */
|
|
.jstree-node { padding-bottom: 3px; }
|
|
.jstree-default-dark { background-color: transparent; }
|
|
.jstree a.jstree-anchor { color: #d6d6d6 !important; }
|
|
|
|
.dropzone .dz-preview.dz-file-preview .dz-image { background: linear-gradient(to bottom, #675d72, #4d4a56) !important; }
|
|
|
|
.dz-remove { position: absolute; top: -8px; right: -8px; z-index: 100; }
|
|
|
|
.dz-remove span { width: 30px; height: 30px; font-size: 24px; border-radius: 10px; color: white; cursor: pointer !important; padding-top: 3px; transition: 0.2s; }
|
|
|
|
.dz-remove span.mi-delete { background: var(--danger); }
|
|
|
|
.dz-remove span.mi-cancel { font-size: 30px; color: var(--color_grey); }
|
|
|
|
.dz-remove:hover span { transform: scale(1.1); transition: 0.2s; }
|
|
.dropzone .dz-preview.dz-image-preview { background-color: transparent !important; }
|
|
|
|
input:-webkit-autofill { background-color: rgba(0, 0, 0, 0.15) !important; }
|
|
|
|
.d-grid { display: grid; }
|
|
|
|
.grid-gap-1 { grid-gap: 1px; }
|
|
.grid-gap-2 { grid-gap: 2px; }
|
|
.grid-gap-3 { grid-gap: 3px; }
|
|
.grid-gap-4 { grid-gap: 4px; }
|
|
.grid-gap-5 { grid-gap: 5px; }
|
|
.grid-gap-c { grid-gap: var(--c-grid-gap); }
|
|
|
|
.grid-temp-col-c { grid-template-columns: var(--c-grid-temp-col); }
|
|
|
|
.vakata-context, .vakata-context ul { background-color: #3f3f3f; box-shadow: 2px 2px 2px #111111; }
|
|
.vakata-context li > a { color: white; text-shadow: 1px 1px 0 #4b4b4b; }
|
|
.vakata-context .vakata-context-hover > a { background-color: #666666; box-shadow: 0 0 2px #2f2f2f; }
|
|
.vakata-context li > a:hover { background-color: #636363; box-shadow: 0 0 2px #2f2f2f; }
|
|
|
|
.yt-left-navbar { position: fixed; left: 0; top: 0; height: 100%; z-index: 10; background-color: rgb(25 25 25 / 95%); width: auto; max-width: 300px; margin-top: 4.125rem; }
|
|
.yt-navbar-content ul { padding: 1rem 0rem; list-style-type: none; }
|
|
.yt-navbar-content ul li { position: relative; display: flex; flex-wrap: wrap; }
|
|
.yt-navbar-content ul li a { font-size: 0.9rem; padding: 0.75rem 2rem; position: relative; width: 100%; }
|
|
.yt-navbar-content ul li a:hover { background-color: var(--theme-fusion-600); }
|
|
.yt-navbar-content ul li a:active, .yt-navbar-content ul li a.active { background-color: var(--theme-fusion-500); }
|
|
|
|
.card-header.p-3.ui-draggable-handle:hover { cursor: move; }
|
|
|
|
.device-wrap .card-body #info, .device-wrap .card-body #errRec, .device-wrap .card-body #opeRec { min-width: 500px; }
|
|
.scrolledTable { overflow-y: auto; clear: both; max-height:100%;}
|
|
|
|
#toast-container > div {
|
|
width:330px !important;
|
|
}
|
|
/*a[data-tabname="topFunBtn"] { color: #fff }
|
|
|
|
a[data-tabname="topFunBtn"].active { color: #886ab5 }
|
|
a[data-tabname="topFunBtn"]:hover { color: var(--theme-primary-50); }
|
|
|
|
.userblock {
|
|
color:#fff;
|
|
}
|
|
.userblock:hover { color: var(--theme-primary-50); }
|
|
.dropdown.show .userblock { color: var(--theme-primary-50) !important; }*/
|
|
.page-header a { color: #fff !important; }
|
|
.page-header a:hover { color: var(--theme-primary-50) !important; }
|
|
.page-header a.active { color: var(--theme-primary-500) !important; }
|
|
.dropdown.show a { color: var(--theme-primary-50) !important; }
|
|
@media screen and (max-width: 576px) { .yt-left-navbar { width: 100%; max-width: 100%; margin-top: 0; }
|
|
}
|
|
|
|
@keyframes lds-ring {
|
|
0% { transform: rotate(0deg); }
|
|
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
@keyframes flashing-c {
|
|
0% { color: var(--flash-color-1); }
|
|
|
|
49% { color: var(--flash-color-1); }
|
|
|
|
50% { color: var(--flash-color-2); }
|
|
|
|
99% { color: var(--flash-color-2); }
|
|
}
|
|
|
|
@keyframes flashing-bg {
|
|
0% { background: var(--flash-color-1); }
|
|
|
|
49% { background: var(--flash-color-1); }
|
|
|
|
50% { background: var(--flash-color-2); }
|
|
|
|
99% { background: var(--flash-color-2); }
|
|
}
|
|
|
|
@keyframes flashing-c-bd {
|
|
0% { border-color: var(--flash-color-1); }
|
|
|
|
49% { border-color: var(--flash-color-1); }
|
|
|
|
50% { border-color: var(--flash-color-2); }
|
|
|
|
99% { border-color: var(--flash-color-2); }
|
|
}
|
|
/* ================================================================ */
|
|
/* 單一方法 */
|
|
/* ================================================================ */
|
|
/* cursor */
|
|
.cur-def { cursor: default !important; }
|
|
|
|
.cur-poi { cursor: pointer !important; }
|
|
|
|
/*left 距離*/
|
|
.left-05 { left: 0.5rem !important; }
|
|
|
|
.left-04 { left: 0.4rem !important; }
|
|
|
|
.left-03 { left: 0.3rem !important; }
|
|
|
|
.left-02 { left: 0.2rem !important; }
|
|
|
|
.left-01 { left: 0.1rem !important; }
|
|
|
|
/*right 距離*/
|
|
.right-05 { right: 0.5rem !important; }
|
|
|
|
.right-04 { right: 0.4rem !important; }
|
|
|
|
.right-03 { right: 0.3rem !important; }
|
|
|
|
.right-02 { right: 0.2rem !important; }
|
|
|
|
.right-01 { right: 0.1rem !important; }
|
|
|
|
/*bottom 0.5rem*/
|
|
.bm-05 { bottom: 0.5rem !important; }
|
|
|
|
.bm-04 { bottom: 0.4rem !important; }
|
|
|
|
.bm-03 { bottom: 0.3rem !important; }
|
|
|
|
.bm-02 { bottom: 0.2rem !important; }
|
|
|
|
.bm-01 { bottom: 0.1rem !important; }
|
|
|
|
/*top 0.5rem*/
|
|
.tp-05 { top: 0.5rem !important; }
|
|
|
|
.tp-04 { top: 0.4rem !important; }
|
|
|
|
.tp-03 { top: 0.3rem !important; }
|
|
|
|
.tp-02 { top: 0.2rem !important; }
|
|
|
|
.tp-01 { top: 0.1rem !important; }
|
|
|
|
/* font-weight */
|
|
.fw-1 { font-weight: 100; }
|
|
|
|
.fw-2 { font-weight: 200; }
|
|
|
|
.fw-3 { font-weight: 300; }
|
|
|
|
.fw-4 { font-weight: 400; }
|
|
|
|
.fw-5 { font-weight: 500; }
|
|
|
|
.fw-6 { font-weight: 600; }
|
|
|
|
.fw-7 { font-weight: 700; }
|
|
|
|
.fw-8 { font-weight: 800; }
|
|
|
|
.fw-9 { font-weight: 900; }
|
|
|
|
/* font-size */
|
|
.fs-05 { font-size: 0.5rem; }
|
|
|
|
.fs-075 { font-size: 0.75rem; }
|
|
|
|
.fs-09 { font-size: 0.9rem; }
|
|
|
|
.fs-1 { font-size: 1rem; }
|
|
|
|
.fs-1-05 { font-size: 1.05rem; }
|
|
|
|
.fs-1-1 { font-size: 1.1rem; }
|
|
|
|
.fs-1-2 { font-size: 1.2rem; }
|
|
|
|
.fs-1-3 { font-size: 1.3rem; }
|
|
|
|
.fs-1-5 { font-size: 1.5rem; }
|
|
|
|
.fs-2 { font-size: 2rem; }
|
|
|
|
.fs-2-5 { font-size: 2.5rem; }
|
|
|
|
/* border width */
|
|
.bd-0 { border-width: 0px; }
|
|
|
|
.bd-1 { border-width: 1px; }
|
|
|
|
.bd-2 { border-width: 2px; }
|
|
|
|
/* border direction */
|
|
.bd-l { border-left-style: solid; }
|
|
|
|
.bd-r { border-right-style: solid; }
|
|
|
|
.bd-t { border-top-style: solid; }
|
|
|
|
.bd-b { border-bottom-style: solid; }
|
|
|
|
/* border radius */
|
|
.br-1 { border-radius: 1px; }
|
|
|
|
.br-2 { border-radius: 2px; }
|
|
|
|
.br-3 { border-radius: 3px; }
|
|
|
|
.br-4 { border-radius: 4px; }
|
|
|
|
.br-5 { border-radius: 5px; }
|
|
|
|
/* flex-gap */
|
|
.gap-1 { gap: 1px; }
|
|
|
|
.gap-2 { gap: 2px; }
|
|
|
|
.gap-3 { gap: 3px; }
|
|
|
|
.gap-4 { gap: 4px; }
|
|
|
|
.gap-5 { gap: 5px; }
|
|
|
|
.gap-6 { gap: 6px; }
|
|
|
|
.gap-7 { gap: 7px; }
|
|
|
|
.gap-8 { gap: 8px; }
|
|
|
|
/* vertical-align */
|
|
.va-t { vertical-align: top; }
|
|
|
|
.va-m { vertical-align: middle; }
|
|
|
|
.va-b { vertical-align: bottom; }
|
|
|
|
.bg-orange { background-color: #ffa100; }
|
|
|
|
/* text color */
|
|
.t-main-purple { color: #623c80 !important; }
|
|
|
|
.t-black { color: #000 !important; }
|
|
|
|
.t-white { color: #fff !important; }
|
|
|
|
.t-fb-blue { color: #466ac2 !important; }
|
|
|
|
.t-line-green { color: #54C814 !important; }
|
|
|
|
.t-red { color: #db0000 !important; }
|
|
|
|
.t-red-2 { color: var(--yt-red-2) !important; }
|
|
|
|
.t-gray { color: var(--yt-gray); }
|
|
|
|
.t-main-gray { color: var(--yt-main-gray); }
|
|
|
|
.t-gray-2 { color: var(--yt-gray-2) !important; }
|
|
|
|
.t-gray-3 { color: var(--yt-gray-3); }
|
|
|
|
.t-yellow { color: var(--yt-yellow-1); }
|