:root { --distm-background-color: #333; --distm-label-color: #FFF;
--distm-icon-color:#777; --distm-featured-background-color: #446084;
--distm-featured-icon-color: #FFF; --distm-addon-bg-color:#000000;
--distm-addon-label-color: #FFF;
--distm-addon-icon-color:#FFFFFF;
--distm-addon-icon-bg:#446084;
}
body{
padding-bottom: 80px;
}
.the-menu{
transition:ease-in-out .3s all;
}
.the-menu.icon-only #tm-fixed-mobile-menu .menu img, .the-menu.icon-only #tm-fixed-mobile-menu .menu svg{
max-height: 35px;
}  .pill{
padding: 0 10px;
bottom: 10px;
}
.pill #tm-fixed-mobile-menu {
border-radius: 100px;
overflow: hidden;
box-shadow: 0 3px 3px rgba(0,0,0,0.3);
} .rounded, .flat{
bottom: 0;
}
.rounded #tm-fixed-mobile-menu{
border-radius: 20px 20px 0 0;
}
.rounded #tm-fixed-mobile-menu, .flat #tm-fixed-mobile-menu{
max-height:70px;
}
.rounded #tm-fixed-mobile-menu li a, .flat #tm-fixed-mobile-menu li a{
padding: 10px 0 0 0;
}
.rounded #tm-fixed-mobile-menu li a:nth-last-of-type(1), .flat #tm-fixed-mobile-menu li a:nth-last-of-type(1){
padding:3px 0 0 0;
}  .tm-fixed-mobile-menu-wrapper{
position: fixed;
width:100%;
z-index: 1003;
left: 50%;
transform: translateX(-50%);
}
.tm-scrolling{
z-index: 1003;
}
#tm-fixed-mobile-menu{
display: flex;
flex-grow: 1;
background-color: var(--distm-background-color);
width: 100%;
position: relative; max-height: 60px;
background: linear-gradient(to right, 
var(--distm-background-color) 0%, 
var(--distm-background-color) calc(50% - 69px), 
transparent calc(50% - 69px), 
transparent calc(50% + 69px), 
var(--distm-background-color) calc(50% + 69px), 
var(--distm-background-color) 100%);
transition:ease-in-out 1s;
}
#tm-fixed-mobile-menu .tm-left-menu, #tm-fixed-mobile-menu .tm-right-menu {
overflow: hidden;
isolation: isolate;
width: 100%;
color: var(--distm-label-color);
text-align: center;
display: flex;
justify-content: space-around;
z-index: 999;
}
#tm-fixed-mobile-menu .tm-left-menu ul, #tm-fixed-mobile-menu .tm-right-menu ul{
display: flex;
justify-content: center;
margin: 0;
width:100%;
height: 100%;
padding: 0;
}
#tm-fixed-mobile-menu li{
list-style: none;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: relative;
width: 100%;
border:none;
}
#tm-fixed-mobile-menu .menu img, #tm-fixed-mobile-menu .menu svg{
height: 25px;
object-fit: contain;
margin: 0 auto;
}
#tm-fixed-mobile-menu .menu svg :is(path,rect,circle,ellipse,polygon,polyline,line){
fill:var(--distm-icon-color);
}
#tm-fixed-mobile-menu .menu-right-container, #tm-fixed-mobile-menu .menu-left-container{
width:100%;
}
#tm-fixed-mobile-menu .tm-featured-bg {
width: 140px;
min-width: 140px!important;
height: 70px;
overflow: hidden;
color: var(--distm-label-color);
z-index: 5;
display: flex;
flex-direction: column;
transition: all .5s ease-in-out;
}
#tm-fixed-mobile-menu .tm-featured-bg path {
fill: var(--distm-background-color);
}
#tm-fixed-mobile-menu .tm-featured-bg svg {
width: 100%;
height: 100%;
max-height: 70px;
transition: all .5s ease-in-out; flex-grow: 1;
}
#tm-fixed-mobile-menu .tm-featured-bg .tm-filler {
display: block;
width: 100%;
height: 0;
min-height: 0;
background-color: var(--distm-background-color);
flex-grow: 0;
margin-top: -1px;
transition: all .5s ease-in-out;
}
#tm-fixed-mobile-menu .tm-featured-bg.expanded{
margin: 0 -70px;
}
#tm-fixed-mobile-menu .tm-featured-bg.expanded .tm-filler {
height: 100%;
min-height: 70px;
}
#tm-fixed-mobile-menu .tm-featured-bg.expanded svg {
height: 0;
min-height: 0;
}
#tm-fixed-mobile-menu a {
color: var(--distm-label-color);
padding: 10px 0;
text-decoration: none;
font-size: 0.7em;
line-height: 1em;
display: flex;
justify-content: center;
text-align: center;
flex-direction: column;
width: 100%;
transition-duration: .3s;
max-height: 70px;
height: 100%;
gap: 5px;
}
#tm-fixed-mobile-menu li:hover a{
background: rgba(0,0,0,0.1);
}
#tm-fixed-mobile-menu .icon :is(path,rect,circle,ellipse,polygon,polyline,line){
fill:var(--distm-icon-color);
} .tm-addon-menu-wrapper{
display: none; position: fixed;
bottom: 0;
width: 100%;
min-height: 100svh;
background: var(--distm-addon-bg-color);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
z-index: 1002;
transform: scale(0); transition: transform 0.5s ease, opacity 0.5s linear;
}
.tm-addon-menu-wrapper.show {
display: flex;
flex-direction: column;
justify-content: center;
transform: scale(1); opacity: 1;
}
#tm-addon-menu{
display: flex;
align-items: start;
width:100%;
height: 100svh;
overflow-y: scroll;
}
#tm-addon-menu ul{
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 90%;
column-gap: 5%;
row-gap: 20px;
padding-left: 0;
padding: 70px 0 150px!important;
height: auto;
margin: 0 auto;
}
.list #tm-addon-menu ul{
width:100%;
display: block;
}
#tm-addon-menu li{
border:none;
display: flex;
align-items: start;
justify-content: start;
position: relative;
text-align: center;
width:12.5%;
font-size: .7em;
}
#tm-addon-menu li .tm-cart-count{
width: fit-content;
left: calc(50% + 20px);
}
#tm-addon-menu *, #tm-addon-menu :after,#tm-addon-menu :before,#tm-addon-menu html :before{ }
#tm-addon-menu span{
width: 100%;
display: block;
}
#tm-addon-menu a{
width:90px;
}
#tm-addon-menu img{
object-fit: cover;
height: 90px;
width: 90px;
background-color: var(--distm-addon-icon-bg);
}
#tm-addon-menu svg, #tm-addon-menu .dashicons{
width: 60px ;
height: 60px;
padding: 15px;
background-color: var(--distm-addon-icon-bg);
font-size: 60px;
}
#tm-addon-menu a:hover svg, #tm-addon-menu a:hover img,#tm-addon-menu a:hover .dashicons{
background: var(--distm-featured-background-color);
}
#tm-addon-menu svg :is(path,rect,circle,ellipse,polygon,polyline,line){
fill: var(--distm-addon-icon-color);
}
#tm-addon-menu a .dashicons{
color: var(--distm-addon-icon-color);
}
#tm-addon-menu a{
display: flex;
flex-direction: column;
align-items: center;
justify-content: start;
text-decoration: none;
margin: 0 auto 10px auto;
padding-bottom: 0;
padding-top: 0;
}
#tm-addon-menu .tm-menu-item-title{
margin-top: 10px;
line-height: 1em;
width: 100%;
color: var(--distm-addon-label-color);
} .icon #tm-addon-menu svg, .icon #tm-addon-menu img, .icon #tm-addon-menu .dashicons{
border-radius: 0;
background-color: transparent!important;
padding: 0!important;
width: 70px;
height: 70px;
line-height: 70px;
object-fit: cover;
border-radius: 25%;
margin-bottom: 7px;
}
.icon #tm-addon-menu svg:hover :is(path,rect,circle,ellipse,polygon,polyline,line), .icon #tm-addon-menu .dashicons:hover{
fill: var(--distm-featured-background-color);
color: var(--distm-featured-background-color);
}
.icon #tm-addon-menu img:hover{
opacity: 0.8;
}
.icon #tm-addon-menu .tm-menu-item-title{
margin-top: 0!important;
line-height: 1.2em;
font-size: 1em;
}
.app-icon #tm-addon-menu svg, .app-icon #tm-addon-menu img, .app-icon #tm-addon-menu .dashicons{ 
border-radius: 25%;
width: 90px;
height: 90px;
box-sizing: border-box;
}
.app-icon #tm-addon-menu img{
object-fit: cover;
background-color: var(--distm-addon-icon-bg);
}
.app-icon #tm-addon-menu img:hover{
opacity: 0.8;
cursor: pointer;
}
.list #tm-addon-menu li{
border-bottom:1px solid var(--distm-addon-label-color);
margin: 0;
width: 100%;
}
.list #tm-addon-menu li:last-of-type{
border-bottom: none;
}
.list #tm-addon-menu li a{
display: flex;
align-items: center;
text-decoration: none;
color: var(--distm-addon-label-color);
transition: all 0.3s ease;
padding: 20px 0;
height: 100%;
}
.list #tm-addon-menu li a:hover{
background: var(--distm-featured-background-color);
}
.list #tm-addon-menu li a img, .list #tm-addon-menu li a svg, .list #tm-addon-menu li a .dashicons{
display: none!important; }
.list #tm-addon-menu li .tm-menu-item-title{
margin-top: 0!important;
text-align: center;
display: inline-block!important;
margin: 0!important;
}
.list #tm-addon-menu li a{
margin: 0!important;
width: 100%;
}
@media screen and (max-width: 768px) {
#tm-addon-menu li{
width:21.25%;
}
#tm-addon-menu img{
height: 70px;
width: 70px;
object-fit: cover;
}
#tm-addon-menu svg, #tm-addon-menu .dashicons{
width: 40px;
height: 40px;
font-size: 40px;
}
#tm-addon-menu .tm-menu-item-title{
margin-top: 10px;
}
.app-icon #tm-addon-menu svg, .app-icon #tm-addon-menu img, .app-icon #tm-addon-menu .dashicons {
border-radius: 25%;
width: 70px;
height: 70px;
}
} .tm-featured svg :is(path,rect,circle,ellipse,polygon,polyline,line){
fill:var(--distm-featured-icon-color);
}
.tm-featured .tm-menu-item .tm-icon-wrapper{
background-color: var(--distm-featured-background-color);
width:70px;
height: 70px;
border-radius: 50%;
box-shadow:inset -5px -5px 10px rgba(0,0,0,0.3), inset 5px 5px 10px rgba(255,255,255,0.3), 0 5px 10px rgba(0,0,0,0.3);
display: flex;
flex-direction: column;
justify-content: center;
align-items: stretch;
transition-duration: .5s;
overflow: hidden;
}
.tm-featured .tm-icon-wrapper img{
object-fit: cover;
height: 70px;
width: 70px;
max-width: 100%;
box-shadow:inset -5px -5px 10px rgba(0,0,0,0.3), inset 5px 5px 10px rgba(255,255,255,0.3), 0 5px 10px rgba(0,0,0,0.3)
}
.tm-featured .tm-icon-wrapper svg{
padding:15px;
}
.tm-featured.active .tm-menu-close{
padding: 15px !important;;
}
.tm-featured.active  .tm-icon-wrapper{
width:50px;
height: 50px;
}
.tm-featured .tm-menu-item .tm-icon-wrapper:before{
content: '';
position: absolute;
width: 5px;
height: 25px;
transform: rotate(45deg);
background: rgba(255,255,255,0.5);
left: 25%;
top: 0;
filter: blur(2px);
border-radius: 100%;
opacity: .8;
}
.tm-featured .tm-menu-item:hover .tm-icon-wrapper{
box-shadow:inset -5px -5px 10px rgba(255,255,255,0.3), inset 5px 5px 10px rgba(0,0,0,0.3), 0 0 5px rgba(0,0,0,0.3);
}
.tm-featured a{
display: flex;
justify-content: center; 
text-decoration: none;
}
.tm-featured{
padding: 0 7px;
position: fixed;
bottom: 25px;
left:50%;
transform: translateX(-50%);
z-index: 1004;
transition: all .5s ease-in-out;
}
.tm-featured.active {
bottom: 78px!important; }
.tm-featured .tm-menu-item:first-of-type .tm-featured-icon{
display: flex;
flex-direction: column;
justify-content: center;
}
.tm-featured .tm-menu-close{
display: none;
}
.tm-featured.active .tm-menu-item:first-of-type .tm-featured-icon{
display: none;
}
.tm-featured.active .tm-menu-close{
display: block;
}  @keyframes slideIn {
0% {
transform: translateY(100%);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
@keyframes slideOut {
0% {
transform: translateY(0);
opacity: 1;
}
100% {
transform: translateY(100%);
opacity: 0;
}
}
@media only screen and (max-width: 520px) { #tm-fixed-mobile-menu .tm-featured-bg{
margin: 0 -30px;
}
} .custom-loader {
width: 150px;
height: 150px;
border-radius: 50%;
border:5px solid #f2f2f2;
position: relative;
box-shadow: 0 0 30px 4px rgba(0, 0, 0, 0.3) inset;
overflow: hidden;
display:block;
} .custom-loader.wave:before,
.custom-loader.wave:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 45%;
top: -40%;
background-color: #fff;
animation: wave 5s linear infinite;
}
.custom-loader.wave:before {
border-radius: 30%;
background: rgba(255, 255, 255, 0.4);
animation: wave 5s linear infinite;
} .custom-loader.spinner {
border: 5px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
border-top: 5px solid #fff;
animation: spin 1s linear infinite;
} .custom-loader.pulse {
background: rgba(255, 255, 255, 0.1);
animation: pulse 1.5s ease-in-out infinite;
} .custom-loader.dots {
background: transparent;
border: none;
box-shadow: none;
display: flex;
align-items: center;
justify-content: center;
}
.custom-loader.dots:before,
.custom-loader.dots:after {
content: '';
position: absolute;
width: 30px;
height: 30px;
border-radius: 50%;
background: #fff;
animation: dots 1.5s infinite ease-in-out;
}
.custom-loader.dots:before {
left: 25%;
animation-delay: 0s;
}
.custom-loader.dots:after {
right: 25%;
animation-delay: 0.5s;
}
.custom-loader.dots::before,
.custom-loader.dots::after {
content: '';
}
.custom-loader.dots::after {
animation-delay: 0.3s;
} .custom-loader.circle {
border: 5px solid transparent;
border-radius: 50%;
border-top: 5px solid #fff;
border-bottom: 5px solid #fff;
animation: circle 2s ease infinite;
}
#tm-pageLoader {
display:none;
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
background:var(--distm-addon-bg-color);
z-index:1005; 
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
}
#tm-pageLoader div {
position:absolute; 
top:50%; 
left:50%; 
transform:translate(-50%, -50%);
} @keyframes wave {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes pulse {
0% { transform: scale(0.8); opacity: 0.5; }
50% { transform: scale(1); opacity: 1; }
100% { transform: scale(0.8); opacity: 0.5; }
}
@keyframes dots {
0%, 100% { transform: scale(0.2); opacity: 0.2; }
50% { transform: scale(1); opacity: 1; }
}
@keyframes circle {
0% { transform: rotate(0deg); }
50% { transform: rotate(180deg); }
100% { transform: rotate(360deg); }
}  #tm-fixed-mobile-menu .dashicons {
width: 25px;
height: 25px;
font-size: 25px;
display: flex;
align-items: center;
justify-content: center;
color: var(--distm-icon-color);
margin: 0 auto;
}
#tm-fixed-mobile-menu img.tm-menu-icon,
#tm-fixed-mobile-menu svg {
width: 30px;
height: 30px;
object-fit: contain;
} .icon-only .tm-menu-item a {
justify-content: center;
}
.icon-only .tm-menu-item .dashicons {
margin: 0;
} @media (max-width: 768px) {
#tm-fixed-mobile-menu .dashicons {
width: 24px;
height: 24px;
font-size: 24px;
}
#tm-fixed-mobile-menu img.tm-menu-icon,
#tm-fixed-mobile-menu svg {
width: 24px;
height: 24px;
}
}
.tm-featured .tm-featured-icon .dashicons {
font-size: 40px;
width: 40px;
height: 40px;
color: var(--distm-featured-icon-color);
display: flex;
align-items: center;
justify-content: center;
text-decoration: none!important;
margin: 0 auto;
}
.tm-featured.active .tm-featured-icon .dashicons {
font-size: 30px;
width: 30px;
height: 30px;
} .tm-cart-count {
position: absolute;
top: 2px;
left: calc(50% + 10px);
background: #d00;
color: #fff;
border-radius: 18px;
min-width: 18px;
height: 18px;
padding: 0 5px;
font-size: 11px;
line-height: 18px;
text-align: center;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
z-index: 999;
}
.tm-cart-count[hidden] {
display: none !important;
}
.tm-menu-item a {
position: relative;
}
.tm-menu-item-title {
z-index: 1;
margin-bottom: 20px;
}
.pill .tm-left-menu .tm-menu-item-title, .pill .tm-right-menu .tm-menu-item-title {
margin-bottom: 0;
}
.rounded .tm-left-menu .tm-menu-item-title, .rounded .tm-right-menu .tm-menu-item-title,
.flat .tm-left-menu .tm-menu-item-title, .flat .tm-right-menu .tm-menu-item-title {
margin-bottom: 10px;
}
.preview-content .menu-item-type-cart .tm-menu-item-title:before {
position: absolute;
top: 2px;
left: calc(50% + 10px);
background: #d00;
color: #fff;
border-radius: 18px;
min-width: 8px;
height: 18px;
padding: 0 5px;
font-size: 11px;
line-height: 18px;
text-align: center;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
z-index: 999;
content: '1';
}
.app-icon #tm-addon-menu img:hover{
opacity: 0.8;
cursor: pointer;
} .tm-folder-item {
position: relative;
cursor: pointer;
}
.tm-folder-container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: start;
width: 100%;
border-radius: 25%;
transition: all 0.3s ease;
padding: 0;
}
.tm-folder-background {
position: relative;
background-color: var(--distm-addon-bg-color);
border-radius: 25%;
box-sizing: border-box;
padding: 10px;
z-index: 1;
}
.tm-folder-preview {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 3px;
width: 70px;
height: 70px;
z-index: 2;
}
.tm-folder-preview-icon {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
overflow: hidden;
border-radius: 25%;
}
.tm-folder-preview-icon img,
.tm-folder-preview-icon svg,
.tm-folder-preview-icon .dashicons {
width: 100%;
color: var(--distm-addon-icon-color);
}
.tm-folder-preview-icon img{
width: 15px!important;
height: 15px!important;
}
.tm-folder-preview-icon svg{
padding: 5px!important;
}
.tm-folder-preview-icon .dashicons {
display: flex;
align-items: center;
justify-content: center;
font-size: 1em !important;
line-height: 20px !important;
width: 100% !important;
height: 100% !important;
padding: 0!important;
}
.tm-folder-title {
position: relative;
width: 100%;
margin-top: 5px;
text-align: center;
color: var(--distm-addon-label-color);
z-index: 2;
max-width: 100%;
} .tm-folder-content-wrapper {
position: fixed;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.1);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
-moz-backdrop-filter: blur(8px);
-o-backdrop-filter: blur(8px);
z-index: 1005;
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
top: 0;
left: 0;
opacity: 0;
transition: opacity 0.3s ease;
cursor: pointer;
}
.tm-folder-content {
position: relative;
width: 80%;
height: auto;
max-width: 600px;
max-height: 50svh;
background-color: var(--distm-addon-bg-color);
border-radius: 70px;
z-index: 1005;
display: flex;
flex-direction: column;
align-items: start;
justify-content: start;
transition: transform 0.3s ease, max-height 0.3s ease, max-width 0.3s ease;
cursor: default;
overflow-y: scroll;
transform-origin: center;
animation: folder-content-zoom 0.5s ease forwards;
}
@keyframes folder-content-zoom {
0% {
transform: scale(0.8);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 1;
}
}
.tm-folder-content-wrapper.active .tm-folder-content:hover {
transform: scale(1.02);
}
.tm-folder-content-wrapper.closing .tm-folder-content {
transform: scale(0.9);
opacity: 0;
}
.tm-folder-content * {
cursor: default;
}
.tm-folder-item-link {
cursor: pointer;
}
.tm-folder-content-wrapper.active {
display: flex;
opacity: 1;
}
.tm-folder-header {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
width: 100%;
padding: 15px;
color: var(--distm-addon-label-color);
cursor: pointer;
position: relative;
}
.tm-folder-header-title {
font-size: 2em;
font-weight: bold;
pointer-events: none;
line-height: 1em;
}
.tm-folder-close {
background: none;
border: none;
font-size: 3em;
cursor: pointer;
padding: 0;
margin: 0;
min-height: unset;
line-height: 1em!important;
color: var(--distm-addon-label-color);
}
.tm-folder-items {
width: 100%;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
pointer-events: auto;
cursor: default;
padding: 10%;
box-sizing: border-box;
}
.tm-folder-item-link {
cursor: pointer;
}
.tm-folder-item-icon {
display: flex;
align-items: center;
justify-content: center;
width: 90px;
height: 90px;
margin-bottom: 10px;
cursor: pointer;
}
.tm-folder-item-icon img,
.tm-folder-item-icon svg,
.tm-folder-item-icon .dashicons {
width: 100%;
height: 100%;
color: var(--distm-addon-icon-color);
}
.tm-folder-item-icon .dashicons {
font-size: 12px;
width: 12px;
height: 12px;
}
.tm-folder-item-title {
font-size: 14px;
text-align: center;
max-width: 100%;
color: var(--distm-addon-label-color);
line-height: 1em;
} @media (max-width: 768px) {
.tm-folder-preview {
width: 50px!important;
height: 50px!important;
gap: 3px;
box-sizing: border-box;
}
.tm-folder-preview-icon{
width: 15px!important;
height: 15px!important;
}
.tm-folder-preview-icon img,
.tm-folder-preview-icon svg,
.tm-folder-preview-icon .dashicons {
min-width: 8px;
min-height: 8px;
font-size: 8px!important;
line-height: 15px!important;
}
.tm-folder-preview-icon img{
width: 15px!important;
height: 15px!important;
padding: 0!important;
}
.tm-folder-items {
grid-template-columns: repeat(3, 1fr)!important;
gap: 10px!important;
}
.tm-folder-title {
margin-top: 5px;
}
.tm-addon-menu-wrapper.icon .tm-folder-preview-icon img, .tm-addon-menu-wrapper.icon .tm-folder-preview-icon svg, .tm-addon-menu-wrapper.icon .tm-folder-preview-icon .dashicons{
width: 9px!important;
height: 9px!important;
min-width: 9px!important;
min-height: 9px!important;
font-size: 9px!important;
line-height: 9px!important;
}
.tm-addon-menu-wrapper.icon .tm-folder-preview-icon{
display: flex;
align-items: center;
justify-content: center;
}
.tm-addon-menu-wrapper.icon .tm-folder-preview-icon svg{
width: 9px!important;
height: 9px!important;
} .tm-folder-items {
grid-template-columns: repeat(4, 1fr);
gap: 12px;
padding: 0;
width: 100%;
box-sizing: border-box;
}
.tm-folder-item-icon{
margin-bottom: 0;
}
.tm-folder-item-icon img, .tm-folder-item-icon svg, .tm-folder-item-icon .dashicons{
width: 15px;
height: 15px;
}
.tm-folder-item-icon img{
padding: 0!important;
}
.tm-folder-header{
font-size: .7em;
margin-top: -80px;
}
.tm-folder-item-title {
font-size: 12px;
margin-top: 5px;
}
.tm-folder-content-wrapper.active{
align-items: center;
justify-content: center;
flex-direction: column;
margin-bottom: 160px;
}
.tm-folder-content{
border-radius: 40px;
width: calc(100% - 60px);
height: auto;
max-width: 60svh;
padding: 10px;
box-sizing: border-box;
}
} .tm-addon-menu-wrapper.opening {
animation: slideIn 0.5s forwards;
}
.tm-addon-menu-wrapper.closing {
animation: slideOut 0.5s forwards;
}
@keyframes slideIn {
0% {
transform: translateY(100%);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
@keyframes slideOut {
0% {
transform: translateY(0);
opacity: 1;
}
100% {
transform: translateY(100%);
opacity: 0;
}
} .icon .tm-folder-container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: start;
width: 100%;
transition: all 0.3s ease;
padding: 0;
}
.icon .tm-folder-background {
position: relative;
background-color: var(--distm-addon-bg-color);
box-sizing: border-box;
padding: 10px;
z-index: 1;
}
.icon .tm-folder-preview {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 3px;
width: 70px;
height: 70px;
z-index: 2;
}
.icon .tm-folder-preview-icon {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
overflow: hidden;
}
.icon .tm-folder-preview-icon img,
.icon .tm-folder-preview-icon svg,
.icon .tm-folder-preview-icon .dashicons {
width: 100%;
color: var(--distm-addon-icon-color);
}
.icon .tm-folder-preview-icon img{
width: 20px!important;
height: 20px!important;
}
.icon .tm-folder-preview-icon svg{
padding: 3px!important;
}
.icon .tm-folder-preview-icon .dashicons {
display: flex;
align-items: center;
justify-content: center;
font-size: 15px!important;
line-height: 15px!important;
width: 15px!important;
height: 15px!important;
padding: 5px!important;
}
.icon .tm-folder-title {
position: relative;
width: 100%;
margin-top: 5px;
text-align: center;
color: var(--distm-addon-label-color);
z-index: 2;
max-width: 100%;
} @media (max-width: 768px) {
.icon .tm-folder-preview {
width: 51px;
height: 51px;
gap: 3px;
box-sizing: border-box;
}
.icon .tm-folder-preview-icon{
width: 15px!important;
height: 15px!important;
}
.icon .tm-folder-preview-icon img,
.icon .tm-folder-preview-icon svg,
.icon .tm-folder-preview-icon .dashicons {
width: 8px;
height: 8px;
min-width: 8px;
min-height: 8px;
font-size: 8px!important;
}
.icon .tm-folder-preview-icon img{
width: 15px!important;
height: 15px!important;
}
} .list #tm-addon-menu ul {
width: 100%;
display: block;
padding: 120px 0 120px!important;
max-width: 600px;
margin: 0 auto;
}
.tm-accordion-item {
margin: 0 15px 8px;
padding: 0;
overflow: hidden;
transition: all 0.3s ease;
}
.tm-accordion-item:last-child {
margin-bottom: 0;
}
.tm-accordion-header {
display: flex;
align-items: center;
padding: 18px 20px;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
}
.tm-accordion-header:hover {
background-color: var(--distm-addon-bg-color);
}
.tm-accordion-icon {
margin-right: 15px;
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
background-color: var(--distm-addon-icon-bg);
border-radius: 8px;
transition: all 0.3s ease;
}
.tm-accordion-icon .dashicons,
.tm-accordion-icon img,
.tm-accordion-icon svg {
width: 20px;
height: 20px;
color: var(--distm-addon-icon-color);
}
.tm-accordion-title {
flex-grow: 1;
color: var(--distm-addon-label-color);
}
.tm-accordion-toggle {
margin-left: 15px;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
}
.tm-accordion-toggle .dashicons {
color: var(--distm-addon-icon-color);
transition: transform 0.3s ease;
font-size: 20px;
width: 20px;
height: 20px;
opacity: 0.7;
}
.tm-accordion-item.active {
background-color: rgba(255, 255, 255, 0.08);
margin-bottom: 16px;
}
.tm-accordion-item.active .tm-accordion-header {
background-color: rgba(255, 255, 255, 0.05);
}
.tm-accordion-item.active .tm-accordion-toggle .dashicons {
transform: rotate(180deg);
opacity: 1;
}
.tm-accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
background-color: transparent;
}
.tm-accordion-item.active .tm-accordion-content {
max-height: 500px;
padding-bottom: 8px;
}
.tm-accordion-item-link {
display: flex;
align-items: center;
padding: 12px 20px 12px 67px;
text-decoration: none;
color: var(--distm-addon-label-color);
transition: all 0.2s ease;
position: relative;
opacity: 0.8;
}
.tm-accordion-item-link:hover {
opacity: 1;
}
.tm-accordion-item-icon {
margin-right: 12px;
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
background-color: var(--distm-addon-icon-bg);
border-radius: 6px;
transition: all 0.2s ease;
}
.tm-accordion-item-icon .dashicons,
.tm-accordion-item-icon img,
.tm-accordion-item-icon svg {
width: 16px;
height: 16px;
color: var(--distm-addon-icon-color);
}
.tm-accordion-item-title {
flex-grow: 1;
font-size: 14px;
letter-spacing: 0.2px;
}
@media (max-width: 768px) {
.tm-accordion-item {
margin: 0 12px 6px;
}
.tm-accordion-header {
padding: 15px 16px;
}
.tm-accordion-icon {
width: 28px;
height: 28px;
border-radius: 7px;
}
.tm-accordion-icon .dashicons,
.tm-accordion-icon img,
.tm-accordion-icon svg {
width: 18px;
height: 18px;
}
.tm-accordion-title {
font-size: 15px;
}
.tm-accordion-toggle {
width: 20px;
height: 20px;
}
.tm-accordion-toggle .dashicons {
font-size: 18px;
width: 18px;
height: 18px;
}
.tm-accordion-item-link {
padding: 10px 16px 10px 56px;
}
.tm-accordion-item-icon {
width: 22px;
height: 22px;
border-radius: 5px;
}
.tm-accordion-item-icon .dashicons,
.tm-accordion-item-icon img,
.tm-accordion-item-icon svg {
width: 14px;
height: 14px;
}
.tm-accordion-item-title {
font-size: 13px;
}
} .list #tm-addon-menu li.tm-accordion-item {
border-bottom: none;
width: 100%;
display: block;
}
.list #tm-addon-menu li.tm-accordion-item:last-child {
margin-bottom: 0;
}
.list #tm-addon-menu .tm-accordion-header {
display: flex;
align-items: center;
padding: 14px 20px;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
justify-content: space-between;
border-bottom: 1px solid var(--distm-addon-label-color);
}
.list #tm-addon-menu .tm-accordion-icon {
display: none !important;
}
.list #tm-addon-menu .tm-accordion-title {
margin: 0 !important;
display: block !important;
color: var(--distm-addon-label-color);
margin-right: -35px!important;
}
.list #tm-addon-menu .tm-accordion-toggle {
margin-left: 15px;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
box-sizing: content-box!important;
}
.list #tm-addon-menu .tm-accordion-toggle .dashicons {
color: var(--distm-addon-label-color);
transition: transform 0.3s ease;
font-size: 16px;
width: 16px;
height: 16px;
opacity: 0.7;
background: none;
}
.list #tm-addon-menu .tm-accordion-item.active .tm-accordion-toggle .dashicons {
transform: rotate(180deg);
opacity: 1;
}
.list #tm-addon-menu .tm-accordion-item-link {
display: flex !important;
align-items: center !important;
padding: 12px 25px !important;
margin: 0 !important;
height: auto !important;
width: 100% !important;
box-sizing: border-box;
text-align: left !important;
text-decoration: none;
color: var(--distm-addon-label-color);
transition: all 0.2s ease;
position: relative;
opacity: 0.8;
}
.list #tm-addon-menu .tm-accordion-item-icon {
display: none !important;
}
.list #tm-addon-menu .tm-accordion-item-title {
margin: 0 !important;
text-align: left !important;
display: block !important;
font-size: 14px !important;
letter-spacing: 0.2px;
}
.list #tm-addon-menu .tm-accordion-content {
background-color: var(--distm-addon-bg-color);
}
@media (max-width: 768px) {
.list #tm-addon-menu .tm-accordion-header {
padding: 20px;
}
.list #tm-addon-menu .tm-accordion-title {
font-size: 14px !important;
}
.list #tm-addon-menu .tm-accordion-toggle {
width: 20px;
height: 20px;
}
.list #tm-addon-menu .tm-accordion-toggle .dashicons {
font-size: 14px;
width: 14px;
height: 14px;
}
.list #tm-addon-menu .tm-accordion-item-link {
padding: 10px 20px !important;
}
.list #tm-addon-menu .tm-accordion-item-title {
font-size: 13px !important;
}
}