100 lines
3.1 KiB
CSS
100 lines
3.1 KiB
CSS
.subpanel section {
|
|
@apply py-1 flex flex-col h-min relative z-0 items-start justify-start
|
|
}
|
|
/* refactor me */
|
|
.subpanel-wrapper {
|
|
@apply flex flex-col justify-between relative flex-shrink overflow-clip;
|
|
}
|
|
.subpanel > h2 {
|
|
@apply text-sm py-4 font-medium text-slate-500 focus:outline-none cursor-pointer px-2
|
|
}
|
|
|
|
.subpanel-header {
|
|
@apply flex py-0.5 pb-1 items-center hover:text-slate-500 text-slate-600 hover:border-primary-300/40 border-mirage-400/60 border-b transition-colors duration-300 ease-in-out z-50
|
|
}
|
|
.subpanel-header h2 {
|
|
@apply text-sm px-1 font-semibold font-display leading-3 select-none text-inherit focus:outline-none cursor-pointer
|
|
}
|
|
.subpanel-header svg {
|
|
@apply h-5 w-5 mr-1 hover:rotate-3 origin-center text-slate-600 ml-auto transform focus:outline-none cursor-pointer
|
|
}
|
|
.subpanel-header:hover svg {
|
|
@apply border-primary-300/40
|
|
}
|
|
.show-header-icon-true {
|
|
@apply !-rotate-180
|
|
}
|
|
|
|
.show-header-icon-false {
|
|
@apply rotate-0;
|
|
}
|
|
|
|
.subpanel-link {
|
|
@apply mb-1 focus:outline-none bg-transparent border rounded-md border-transparent
|
|
hover:ring-slate-700/20 hover:to-mirage-400/30 shadow hover:bg-gradient-to-tl from-10% hover:translate-x-px z-0 transition-transform hover:from-mirage-400/10 w-full flex items-center -translate-x-px relative duration-100 ease-out overflow-hidden
|
|
}
|
|
|
|
|
|
.subpanel-link div:hover .subpanel-label {
|
|
@apply !text-slate-400/95
|
|
}
|
|
|
|
.subpanel-link-true {
|
|
@apply hover:-translate-x-px shadow -translate-x-px ring-slate-600/10 ring-1 ring-inset from-mirage-300/20 to-mirage-300/10 bg-gradient-to-tl from-10% hover:from-mirage-300/20 hover:to-mirage-300/10 hover:bg-gradient-to-tl
|
|
}
|
|
|
|
.subpanel-link div {
|
|
@apply flex w-full p-2.5 pr-0 flex-col items-start mb-0.5 text-slate-400/40 hover:text-slate-400/60
|
|
}
|
|
|
|
|
|
|
|
.subpanel-link div p:nth-child(2) {
|
|
@apply max-h-8 line-clamp-2 leading-4 w-full pr-2 h-full
|
|
}
|
|
.subpanel-link div p:last-child {
|
|
@apply mt-1
|
|
}
|
|
svg.link-icon {
|
|
@apply bg-slate-800/20 border-transparent border ml-auto rounded p-1 h-8 w-8 transition-colors duration-150 hover:text-primary-300 hover:border-mirage-300/20
|
|
}
|
|
svg.link-icon-true {
|
|
@apply !text-primary-300 hover:!text-primary-200 !bg-transparent;
|
|
}
|
|
svg.link-icon-false {
|
|
@apply text-slate-600
|
|
}
|
|
.link-active-true {
|
|
@apply !bg-transparent hover:!bg-slate-800/40 transition-colors duration-200 ;
|
|
}
|
|
|
|
.subpanel-label {
|
|
@apply text-sm leading-4 font-display font-medium line-clamp-1 pb-0.5
|
|
}
|
|
.subpanel-label-true {
|
|
@apply text-slate-400/95;
|
|
}
|
|
.subpanel-label-false {
|
|
@apply text-slate-500/60;
|
|
}
|
|
.subpanel-desc {
|
|
@apply text-xs font-display font-light leading-none text-left;
|
|
}
|
|
.subpanel-desc-true {
|
|
@apply !text-slate-400/80
|
|
}
|
|
|
|
|
|
/* .cyberpunk {
|
|
width: calc(100% - 30px);
|
|
border: 30px solid #000;
|
|
border-left: 5px solid #000;
|
|
border-right: 5px solid #000;
|
|
border-bottom: 15px solid #000;
|
|
clip-path: polygon(0px 25px, 26px 0px, calc(60% - 25px) 0px, 60% 25px, 100% 25px, 100% calc(100% - 10px), calc(100% - 15px) calc(100% - 10px), calc(80% - 10px) calc(100% - 10px), calc(80% - 15px) calc(100% - 0px), 10px calc(100% - 0px), 0% calc(100% - 10px));
|
|
margin-bottom: 10px;
|
|
padding: 12px;
|
|
font-size: 1.7rem;
|
|
font-weight: 700;
|
|
} */
|