#crystools-root-easyuse{ /*background-color: red;*/ /*display: none;*/ flex-direction: row; /*flex-grow: 5;*/ justify-content: center; /*flex: auto;*/ flex-shrink: 1; width: min-content; min-width: max-content; height: 100%; /*max-width: 40vw;*/ /*min-width: 10vw;*/ /*gap: 5px;*/ margin: 0 auto; /*align-items: center;*/ /*align-self: center;*/ .crystools-monitor-container { /*background-color: var(--comfy-menu-bg);*/ width: 100%; cursor: crosshair; /*margin: 4px 0;*/ display: flex; /* by progress bar base */ flex-wrap: wrap; flex-direction: row; justify-content: flex-end; /*align-items: center;*/ gap: 5px; height: 100%; /*min-width: 200px;*/ .crystools-monitor { background-color: var(--comfy-input-bg); position: relative; align-items: center; flex-direction: row; width: 40px; height: 100%; .crystools-text { font-size: 10px; text-align: right; margin-left: 3px; position: absolute; font-weight: 100; bottom: 2px; z-index: 10; /*&:hover {*/ /* font-weight: 600;*/ /* color: var(--input-text);*/ /*}*/ } /*.crystools-label {*/ /* &:hover {*/ /* font-weight: 800;*/ /* color: var(--input-text);*/ /* }*/ /*}*/ } .crystools-content { position: relative; height:100%; } .crystools-slider { position: absolute; height: 100%; width: 0; box-shadow: inset 2px 2px 10px rgba(0, 0, 0, 0.2); } .crystools-label { position: relative; width: 100%; color: var(--input-text); font-weight: 500; font-size: 11px; left: 2px; top: 4px; text-align: right; } } }