abundance/assets/css/finder.css

a CMS based on tre

.tre-finder {
    border: 1px solid #222;
    margin: .5em .5em;
    position: relative;
    width: calc( 100% - 1em );
    height: calc( 100% - 1em );
    overflow-x: hidden;
    
    background: #555;
    color: #bbb;
    font-size: 12px;
    text-shadow: 1px 1px 1px  rgba(0,0,0,.4);
}

.tre-finder > .tre-sortable-list {
    padding-left: 1.4em;
}

.tre-finder [data-key] {
    height: 100%;
    display: inline-block;
    filter: contrast(140%);
    padding: 0;
    margin-left: -1.5em;
    padding-left: 1.5em;
    border-radius: 4px 0 0 0;
    border-bottom: 1px solid #888;
    mix-blend-mode: hard-light;
}

.tre-finder [data-key]:hover {
    background: rgba(120,255,120,0.1);
}

.tre-finder .indicators,
.tre-finder .actions {
    display: inline-block;
    height: 1.4em
}

.tre-finder .indicators>img,
.tre-finder .actions >img {
    height: 70%;
    width: auto;
    opacity: 0;
    padding: 2px;
    margin: 2px 0px;
}

.tre-finder [data-key]:hover .actions >img {
    opacity: 0.4;
}

.tre-finder .indicators>img {
    opacity: 0.9;
    margin-right: .3em;
    margin-bottom: -.25em;
    height: 60%;
    background: white;
    box-shadow: 0px 0px 1px rgba(0,0,0,.7);
}

.tre-finder .summary .actions>img:hover {
    opacity: 1;
    background: white;
    filter: contrast(150%);
}

.tre-finder .summary .actions {
    position: absolute;
    right: 0px;
    padding-right: 10px;
    padding-left: 5px;
    margin: 0;
    height: 1.6em;
}
.tre-finder .summary:hover .actions {
    background: #aaa;
}

.tre-finder summary {
    height: 1.6em;
}

.tre-finder .summary>span {
    display: inline-block;
    min-width: 2em;
    max-width: 4em;
    padding-top: 0.35em;
    height: 100%;
}