630 lines
9.3 KiB
CSS
630 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: var(--theme-fusion-900); 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); }
|
|
|
|
@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);
|
|
}
|