121 lines
No EOL
3 KiB
CSS
121 lines
No EOL
3 KiB
CSS
body{background-color: rgb(60,50,70); color: silver; margin: 0px }
|
|
#ui{ display: flex; }
|
|
#site{ height: 100vh; overflow-y: auto; flex: 1 }
|
|
|
|
.categoryList{
|
|
padding-block: 1em;
|
|
box-sizing: border-box;
|
|
border-inline-end: 1px solid gold;
|
|
background-color: rgb(60,60,70);
|
|
max-height: 100vh;
|
|
overflow-y: auto;
|
|
min-width: 22ch
|
|
}
|
|
|
|
.categoryList.blurred{
|
|
background-color: rgb(20,20,30);
|
|
opacity: 0.5;
|
|
margin-inline-end: -13ch;
|
|
}
|
|
|
|
#secondaryCategories{
|
|
position: relative;
|
|
z-index:1;
|
|
}
|
|
|
|
.categoryList:hover{
|
|
position: relative;
|
|
z-index: 2;
|
|
background-color: rgb(60,60,70);
|
|
opacity: 1;
|
|
box-shadow: 0 0 26px 0 black;
|
|
}
|
|
|
|
a{ color: rgb(100,150,200); margin-inline-end: 0.4ch }
|
|
pre a{ margin: 0 }
|
|
a:visited{ color: rgb(150,100,200) }
|
|
a:hover{ color: rgb(200,150,100) }
|
|
pre:empty{ display: none }
|
|
.category{ padding: 0.2em 1em; cursor: pointer; text-transform: capitalize }
|
|
#categories > .category[data-value]::after{ content: " (" attr(data-value) ")"; float: right}
|
|
|
|
.currentCategory,
|
|
.category:hover{ background-color: grey }
|
|
|
|
.currentCategory::before{ content: "» " }
|
|
|
|
.target{
|
|
margin: 0.1em;
|
|
background-color: rgb(60,60,70);
|
|
padding: 0.3em;
|
|
border: 1px solid rgb(40,40,40);
|
|
border-radius: 4px;
|
|
max-width: 30%;
|
|
cursor: pointer;
|
|
white-space:nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.target > a{
|
|
display:inline-block;
|
|
width: 1.2em;
|
|
height: 80%;
|
|
background-image: url("ext.svg");
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
}
|
|
.target:hover{ background-color: rgb(80,80,90) }
|
|
.target.selected{ background-color: rgb(80,80,120) }
|
|
.target > a:hover{ filter: drop-shadow(0 0 3px fuchsia) }
|
|
/*#targets{ display: grid; grid-template-columns: 1fr 1fr 1fr }*/
|
|
#targets{
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-wrap: wrap;
|
|
max-height: calc(var(--grid-rows) * 2.4rem);
|
|
}
|
|
|
|
pre{
|
|
white-space: pre-wrap;
|
|
margin: 1em;
|
|
border: 2px inset;
|
|
padding: 0 0 0 2em;
|
|
background-color: rgb(30,30,40);
|
|
}
|
|
|
|
pre > div{
|
|
background-color: rgb(40,37,43);;
|
|
padding: 1em 0.5em;
|
|
border-inline-start: 1px solid rgb(90,90,90)
|
|
}
|
|
|
|
.categoryList:not(.blurred)+.categoryList,
|
|
.hidden{ display: none !important }
|
|
|
|
.comment{ color: rgb(50,180,90) }
|
|
.selector{ color: lavenderblush }
|
|
.pseudo{ color: rgb(200,180,250) }
|
|
.id{ color: rgb(240, 148, 138) }
|
|
.class{ color: skyblue }
|
|
.attribute{ color: rgb(120,230,170) }
|
|
.atrule{ color: lime }
|
|
.atvalue{ color: lightblue }
|
|
.property{ color: palegoldenrod }
|
|
.value{ color: skyblue }
|
|
.curly{ color: magenta }
|
|
.function{ color: silver }
|
|
.important-tag{ color: orange }
|
|
|
|
@keyframes showDelayed{ from{ visibility: hidden } to{ visibility: visibile }}
|
|
|
|
@keyframes loadingBar{ from{ background-size: 0% } to{ background-size: 100% } }
|
|
#placeholder{
|
|
margin: 2em;
|
|
border: 2px solid darkslateblue;
|
|
border-radius: 3px;
|
|
background-image: linear-gradient(90deg,slateblue,purple);
|
|
background-repeat: no-repeat;
|
|
background-position: left;
|
|
animation: loadingBar 1500ms linear
|
|
}
|
|
.placeholder-text{ animation: showDelayed 2s steps(1) } |