CSS fieldset

by lpugin

HTML

<div class="vrv-wrapper">
  <div class="vrv-view">
  
  <div class="vrv-editor-tool-panel" style="display: block;"><div class="vrv-tab-group" style="display: block; min-height: 662px; max-height: 662px;"><div class="vrv-tab-selectors"><div class="vrv-tab-selector" data-tab="90981bde9e237000" data-app-el-id="b493f6a016683000">Score</div><div class="vrv-tab-selector selected" data-tab="6ff8713fb5180000" data-app-el-id="d6157ade3e964000">Content</div></div><div class="vrv-tab-content" style="display: none;"><div class="vrv-tab-content-panel" style="display: none;"><div class="vrv-legend">Score structure<span class="icon">▼</span></div><div class="vrv-field-set" style="flex-grow: 3;"><div class="vrv-field-set-panel" style="display: none;"><div class="vrv-tree-breadcrumbs-wrapper"><div class="vrv-tree-breadcrumbs"></div></div></div></div></div></div><div class="vrv-tab-content" style="display: block;"><div class="vrv-tab-content-panel" style="display: flex;"><div class="vrv-legend">Content tree<span class="icon">▼</span></div><div class="vrv-field-set" style="flex-grow: 3;"><div class="vrv-field-set-panel" style="display: flex;"><div class="vrv-tree-breadcrumbs-wrapper"><div class="vrv-tree-breadcrumbs"><div class="vrv-tree-breadcrumb"></div><div class="vrv-tree-breadcrumb" data-id="section-0000000631718026" data-element="section" data-app-el-id="03128633930bd000">section</div><div class="vrv-tree-breadcrumb" data-id="measure-0000001685792065" data-element="measure" data-app-el-id="e5f30b597ae18000">measure</div><div class="vrv-tree-breadcrumb" data-id="staff-0000000658016858" data-element="staff" data-app-el-id="dac0d29ef4f58000">staff</div><div class="vrv-tree-breadcrumb" data-id="layer-0000000866733422" data-element="layer" data-app-el-id="a1e41757de968000">layer</div><div class="vrv-tree-breadcrumb" data-id="beam-0000000271270556" data-element="beam" data-app-el-id="75daffbf4bf50000">beam</div></div></div><div class="vrv-tree-root open"...

SCSS

////////////////////////////////////////////////////////////////////////
// To change dark / light theme - also rename icons directories
////////////////////////////////////////////////////////////////////////
$dark-theme: true;

$background: lightgrey;
$background-light: lighten($background, 10%);
$background-extra-light: lighten($background, 20%);
$background-active: darken($background, 20%);
$background-toggled: darken($background, 10%);
$background-border: darken($background, 10%);
$text-color: black;
$dialog-color: lighten($background, 10%);
$dialog-background: rgba(245, 245, 245, 0.8);
$doc-background: whitesmoke;
$disabled-opacity: 0.2;
$primary: #8B0000;

$hover-filter: invert(100%);
$filtered-primary: invert($primary);
$filtered-background-grey-active: invert($background-active);

@if $dark-theme ==true {
    $background: rgb(60, 60, 60);
    $background-light: lighten($background, 10%);
    $background-extra-light: lighten($background, 20%);
    $background-active: darken($background, 15%);
    $background-toggled: darken($background, 10%);
    $background-border: lighten($background, 10%);
    $text-color: white;
    $dialog-color: rgb(50, 50, 50);
    $dialog-background: rgba(95, 95, 95, 0.8);
    $doc-background: grey;
    $disabled-opacity: 0.5;

    $hover-filter: invert(0%);
    $filtered-primary: $primary;
    $filtered-background-grey-active: $background-active;
}

////////////////////////////////////////////////////////////////////////
// Some dimensions
////////////////////////////////////////////////////////////////////////

$toolbar-height: 36px;
$menu-height: 18px;
$statusbar-height: 20px;
$editor-tool-panel-width: 300px;
$editor-keyboard-height: 110px;
$btn-height: 40px;
$dialog-gh-list-height: 350px;

$z-index-valid: 5;
$z-index-menu: 6;
$z-index-dialog: 7;
$z-index-notification: 8;
$z-index-tooltip: 9;

$font-family: Helvetica Neue, Helvetica, Arial, sans-serif;

////////////////////////////////////////////////////////////////////////
//...