frame-styles.css

 :root {
    --active-tab: #3A3A3A;
    --tab-bar-background: #262626;
    --frame-background: #121212;
    --title-bar: #000000;
    --tab-text: #FFFFFF;


    --title-bar-height: 22px;
    --corners-radius: 5px;
    --splitter-width: 4px;

    --body-container-padding-left: 4px;

    --layout-container-padding-top: 0px;
    --layout-container-padding-bottom: 5px;
    --layout-container-padding-left: 4px;
    --layout-container-padding-right: 5px;

    --sidebar-width: 120px;

    --layout-container-width: calc(100% - var(--layout-container-padding-left) - var(--layout-container-padding-right) - var(--sidebar-width));

    --frame-background-color: var(--frame-background);
    --title-bar-background-color: var(--title-bar);
    --tabs-bar-background-color: var(--tab-bar-background);
    --tab-background-color: var(--frame-background);
    --tab-background-color-active: var(--active-tab);
    --tab-text-color: var(--tab-text);
    --splitter-color: var(--frame-background);
    --color-behind-views: var(--active-tab); /* only seen if there's a problem with the view */
}

body {
    height: 100%;
    min-height: 100%;
    width: 100%;
    margin: 0;
    padding: 0px;
    overflow: hidden;
}

#body-container {
    display:flex;
}

.left-menu ul {
    list-style: none;
    padding-inline-start: 0px;
    width: 100%;
    margin-block-start: 20px;
}

.left-menu li {
    width: 100%;
}

.left-menu button {
    width: var(--sidebar-width);
    padding: 4px;
    height: 40px;
    background-color: var(--active-tab);
    color: var(--tab-text);
    border-color: var(--frame-background);
}

.left-menu button:hover {
    cursor: pointer;
    background-color: var(--tab-bar-background);
}

#lock-button {
    margin-right: 12px;
    height: 16px;
    width: 16px;
}

#lock-button img {
    width: 100%;
    height: auto;
}