body{ background: $body-bg; } .circle-btn{ width: 75px; height: 75px; border-radius: 50%; background: $secondary-color-panel; backdrop-filter: blur(4px); border: 0; box-shadow: 0px 3px 5px #11111177, inset 0 0 0 0 darkred; user-select: none; cursor: pointer; transition: 500ms; &:hover{ box-shadow: 0px 3px 5px #11111177, inset 0 0 0 40px darkred; } } .custom-tooltip { --bs-tooltip-bg: var(--bs-indigo); --bs-tooltip-color: var(--bs-white); } .grid-equal { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; } a.btn,a.action-btn,a.circle-btn{ &:hover{ color:white; i{ color: white; } } } .action-btn{ display: block; font-size: 47px; text-align: center; i{ color: white; } position: fixed; inset-inline-start: 4.2rem; bottom: 1rem; } .general-form{ background: $lighter-color; border-radius: 7px; margin-bottom: 4rem; position: relative; h1{ font-size: 25px; font-weight: 200; background: #00000011; padding: 1rem; text-align: center; margin: 0 -1rem; } .row{ padding: 0 1rem 2rem ; } input[type='submit']{ position: absolute ; bottom: -1rem; left: 50%; transform: translateX(-50%); min-width: 200px; } } .group-control{ list-style: none; overflow-y: auto; padding: 0 .5rem; height: 12rem; ul{ list-style: none; } input{ margin: 0 .5rem; } } .model-status{ width: 15px; height: 15px; margin: auto; border-radius: 3px; } .status-0,.status-CLOSED { background: red; } .status-1,.status-ANSWERED{ background: lime; } .status-PENDING{ background: gold; } .image-x64{ height: 64px; width: 64px; object-fit: cover; border-radius: 5px; } .img-squire{ display: block; max-width: 100%; margin: auto; } .rm-img{ position: relative; z-index: 1; margin-bottom: -75px; } .section-group{ .section-group-item{ display: block; padding: .5rem; background: #ffffff11; border-bottom: 1px solid #00000022; color: white; &.active{ background: $primary-color-panel; } &:hover{ background: rgba($primary-color-panel,.7); } } } #setting-sections{ section{ display: none; background: $lighter-color; padding: 1rem; .setting-field{ padding: 5px; } } } .ol-sortable { padding-right: 1rem; padding-left: 1rem; list-style: none; border-radius: 5px; li { border: 1px solid grey; background: #ffffff11; margin-bottom: .25rem; border-radius: 5px; span { display: block; padding: 7px; } } } .area-list-item{ background: #00000022; height: 125px; text-align: center; display: block; color: $text-muted; &:hover{ color: lighten($primary-color-panel,10); } i{ font-size: 45px; display: block; margin: 1rem auto; } } [data-open-file]{ cursor: pointer; } .avatar-x64{ background: $body-bg; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 3px rgba($primary-color-panel,127) solid ; } .skewed-container{ overflow: hidden; position: relative; min-height: 128px; } .skewed-icon{ font-size: 128px; opacity: .3; position: absolute; transform: rotateZ(27deg); inset-inline-end: 1%; top: -30px; } .order-card{ background: rgba(255, 196, 0, 0.8) !important; .card-header{ background: #ffffff22 !important; color: $secondary-color-panel; } .card-body{ background: #00000011; text-align: center; } i{ font-size: 100px; } a,a:visited{ color: white; } } .ticket-card{ background: rgba(0, 255, 166, 0.8) !important; .card-header{ background: #ffffff22 !important; color: $secondary-color-panel; } .card-body{ background: #00000011; text-align: center; } i{ font-size: 100px; } a,a:visited{ color: white; } } .equal-height { display: flex; display: -webkit-flex; flex-wrap: wrap; } @media (min-width: 768px) { .row.equal { display: flex; flex-wrap: wrap; } } #panel-preloader{ transition: 490ms; position: fixed; z-index: 9999999; left: 0; top: 0; right: 0; bottom: 0; background: #00000099; backdrop-filter: blur(7px); display: flex; align-items: center; justify-content: center; color: lighten($primary-color-panel,15); .loader { position: relative; width: 100px; height: 100px; &:before { content: ''; border-radius: 50%; position: absolute; inset: 0; box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.3) inset; } &:after { content: ''; border-radius: 50%; position: absolute; inset: 0; box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.3) inset; box-shadow: 0 2px 0 #FF3D00 inset; animation: rotate 2s linear infinite; } } } @keyframes rotate { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }