You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
xshop/resources/sass/panel/_common.scss

384 lines
6.5 KiB
SCSS

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,.status-FAILED,.status-PROCESSING {
background: red;
}
.status-1,.status-ANSWERED,.status-COMPLETED{
background: lime;
}
.status-PENDING{
background: gold;
}
.status-CANCELED{
background: orange;
}
.status-PAID{
background: white;
}
.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;
}
}
}
#avatar-input{
display: none;
}
.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);
}
}
.btn-light,a.btn-light{
color: black !important;
}
.table-list td .btn{
margin-bottom: 5px;
margin-top: 5px;
}
/* -620px width */
@media (max-width: 620px) {
.table-list {
position: relative; /* Ensure this is the direct container */
overflow: auto; /* Allow scrolling */
}
tr, td, th {
display: block;
width: 100% !important;
text-align: end;
}
td{
display: flex;
justify-content: space-between;
align-items: center;
}
td:last-child{
justify-content: center;
}
div.float-start, div.float-end {
float: none !important;
}
.dropdown{
min-width: 75%;
.btn{
width: 100%;
}
}
thead {
display: none;
}
}