TmMolStar/src/mol-plugin/skin/base/variables.scss

// measures

$control-label-width:   110px;
$control-label-short-width:   70px;
$row-height:            32px;
$control-spacing:       10px;
$entity-subtree-offset: 8px;
$info-vertical-padding: 6px;
$slider-border-radius-base: 6px;

// layout
$expanded-top-height:    100px;
$expanded-bottom-height: 3 * $row-height + 2;
$expanded-right-width:   300px;
$expanded-left-width:    300px;

$expanded-portrait-bottom-height: 10 * ($row-height + 1) + 3 * $control-spacing + 1;
$expanded-portrait-top-height:    3 * $row-height + 1;

$standard-bottom-height: 8 * ($row-height + 1) + 3 * $control-spacing + 1;
$standard-top-height:    3 * $row-height + 1;

//////////////////////////////////////////////////
// ENTITY COLORS


// entity colors are "somewhat orthogonal" on the RGB cube
// TypeClass = 'Root' | 'Group' | 'Data' | 'Object' | 'Visual' | 'Selection' | 'Action' | 'Behaviour'

// DO NOT CHANGE THESE!!
$entity-color-Root:      $default-background;
$entity-color-Data:      color-lower-contrast(#95a5a6, 15%);
$entity-color-Selection: color-lower-contrast(#e74c3c, 15%);
$entity-color-Action:    color-lower-contrast(#34495e, 10%);
$entity-color-Object:    color-lower-contrast(#2ecc71, 10%);
$entity-color-Behaviour: color-lower-contrast(#9b59b6, 10%);
$entity-color-Visual:    color-lower-contrast(#3498db, 5%);
$entity-color-Group:     color-lower-contrast(#e67e22, 5%);

//////////////////////////////////////////////////
// COLORS and COMPUTED COLORS

$slider-disabledColor: #ccc;

$control-background: color-increase-contrast($default-background, 6.5%);
$border-color: color-increase-contrast($default-background, 15%);
$msp-form-control-background: color-lower-contrast($default-background, 2.5%);

// buttons
$msp-btn-link-font-color: $font-color;
$msp-btn-link-toggle-on-font-color: $font-color;
$msp-btn-link-toggle-off-font-color: color-lower-contrast($font-color, 33%);

// used for "actions" -- i.e. + in selection
$msp-btn-remove-font-color: $font-color;

$msp-btn-action-background: $msp-form-control-background;

// update selection etc
//!! $msp-btn-commit-on-font-color: $entity-current-font-color;
$msp-btn-commit-on-hover-font-color: color-lower-contrast($msp-btn-commit-on-font-color, 20%); //!!Change
$msp-btn-commit-on-background: color-lower-contrast($default-background, 2%);
$msp-btn-commit-off-background:  color-lower-contrast($default-background, 4%); //$control-background;
$msp-btn-commit-off-font-color: $font-color;

// log
$log-font-color: color-lower-contrast($font-color, 5%);
$log-timestamp-font-color: color-lower-contrast($font-color, 20%);

// highlight
$highlight-info-font-color: $hover-font-color;
$highlight-info-additional-font-color: color-lower-contrast($hover-font-color, 20%);

// entity state
$entity-color-fully-visible: $font-color;
$entity-color-not-visible: color-lower-contrast($font-color, 66%);
$entity-color-partialy-visible: color-lower-contrast($font-color, 33%);
$entity-tag-color: color-lower-contrast($font-color, 20%);

// sequence
$sequence-background: $default-background;
$sequence-select-width: 300px;