frame-styles.css

 :root {
    --sidebar-width: 120px;

    --layout-locked-icon: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik03IDJDNy41NTIyOCAyIDggMi40NDc3MiA4IDNWMjlDOCAyOS41NTIzIDcuNTUyMjggMzAgNyAzMEM2LjQ0NzcyIDMwIDYgMjkuNTUyMyA2IDI5VjNDNiAyLjQ0NzcyIDYuNDQ3NzIgMiA3IDJaIiBmaWxsPSIjRjRGNUY4Ii8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMjEuNSAxNEMyMC4xMTkzIDE0IDE5IDE1LjExOTMgMTkgMTYuNVYyMkgxN1YxNi41QzE3IDE0LjAxNDcgMTkuMDE0NyAxMiAyMS41IDEyQzIzLjk4NTMgMTIgMjYgMTQuMDE0NyAyNiAxNi41VjIySDI0VjE2LjVDMjQgMTUuMTE5MyAyMi44ODA3IDE0IDIxLjUgMTRaIiBmaWxsPSIjRjRGNUY4Ii8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMjUgMkMyNS41NTIzIDIgMjYgMi40NDc3MiAyNiAzVjEwLjVDMjYgMTEuMDUyMyAyNS41NTIzIDExLjUgMjUgMTEuNUMyNC40NDc3IDExLjUgMjQgMTEuMDUyMyAyNCAxMC41VjNDMjQgMi40NDc3MiAyNC40NDc3IDIgMjUgMloiIGZpbGw9IiNGNEY1RjgiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yIDdDMiA2LjQ0NzcyIDIuNDQ3NzIgNiAzIDZMMjkgNkMyOS41NTIzIDYgMzAgNi40NDc3MiAzMCA3QzMwIDcuNTUyMjggMjkuNTUyMyA4IDI5IDhMMyA4QzIuNDQ3NzIgOCAyIDcuNTUyMjggMiA3WiIgZmlsbD0iI0Y0RjVGOCIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTIgMjVDMiAyNC40NDc3IDIuNDQ3NzIgMjQgMyAyNEgxMUMxMS41NTIzIDI0IDEyIDI0LjQ0NzcgMTIgMjVDMTIgMjUuNTUyMyAxMS41NTIzIDI2IDExIDI2SDNDMi40NDc3MiAyNiAyIDI1LjU1MjMgMiAyNVoiIGZpbGw9IiNGNEY1RjgiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNSAyMUMxNC40NDc3IDIxIDE0IDIxLjQ0NzcgMTQgMjJWMjlDMTQgMjkuNTUyMyAxNC40NDc3IDMwIDE1IDMwSDI4QzI4LjU1MjMgMzAgMjkgMjkuNTUyMyAyOSAyOVYyMkMyOSAyMS40NDc3IDI4LjU1MjMgMjEgMjggMjFIMTVaTTIxLjUgMjdDMjIuMzI4NCAyNyAyMyAyNi4zMjg0IDIzIDI1LjVDMjMgMjQuNjcxNiAyMi4zMjg0IDI0IDIxLjUgMjRDMjAuNjcxNiAyNCAyMCAyNC42NzE2IDIwIDI1LjVDMjAgMjYuMzI4NCAyMC42NzE2IDI3IDIxLjUgMjdaIiBmaWxsPSIjRjRGNUY4Ii8+Cjwvc3ZnPgo=');
    --layout-unlocked-icon: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik03IDJDNy41NTIyOCAyIDggMi40NDc3MiA4IDNWMjlDOCAyOS41NTIzIDcuNTUyMjggMzAgNyAzMEM2LjQ0NzcyIDMwIDYgMjkuNTUyMyA2IDI5VjNDNiAyLjQ0NzcyIDYuNDQ3NzIgMiA3IDJaIiBmaWxsPSIjRjRGNUY4Ii8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMjUgMkMyNS41NTIzIDIgMjYgMi40NDc3MiAyNiAzVjI5QzI2IDI5LjU1MjMgMjUuNTUyMyAzMCAyNSAzMEMyNC40NDc3IDMwIDI0IDI5LjU1MjMgMjQgMjlWM0MyNCAyLjQ0NzcyIDI0LjQ0NzcgMiAyNSAyWiIgZmlsbD0iI0Y0RjVGOCIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTIgN0MyIDYuNDQ3NzIgMi40NDc3MiA2IDMgNkwyOSA2QzI5LjU1MjMgNiAzMCA2LjQ0NzcyIDMwIDdDMzAgNy41NTIyOCAyOS41NTIzIDggMjkgOEwzIDhDMi40NDc3MiA4IDIgNy41NTIyOCAyIDdaIiBmaWxsPSIjRjRGNUY4Ii8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMiAyNUMyIDI0LjQ0NzcgMi40NDc3MiAyNCAzIDI0SDI5QzI5LjU1MjMgMjQgMzAgMjQuNDQ3NyAzMCAyNUMzMCAyNS41NTIzIDI5LjU1MjMgMjYgMjkgMjZIM0MyLjQ0NzcyIDI2IDIgMjUuNTUyMyAyIDI1WiIgZmlsbD0iI0Y0RjVGOCIvPgo8L3N2Zz4K');
    --menu-icon: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMjQgNmgtMjR2LTRoMjR2NHptMCA0aC0yNHY0aDI0di00em0wIDhoLTI0djRoMjR2LTR6Ii8+PC9zdmc+');
 }

#body-container {
    display: flex;
}

.hidden {
    display: none;
}

left-menu {
    padding-left: 4px;
    margin-top: 4px;
    padding-right: 4px;
    border-right: 1px solid var(--tab-button-hover-color);
}

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

left-menu button {
    width: var(--sidebar-width);
    border: none;
    background-color: var(--main-background-color);
    color: var(--body-font-color);
    text-align: left;
}

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

left-menu button:focus {
    outline: 1px solid var(--tab-button-active-color);
}

fieldset button {
    width: var(--sidebar-width);
    border: 1px solid var(--tab-button-active-color);
    background-color: var(--tab-button-hover-color);
    color: var( --body-font-color);
    text-align: center;
    padding: 3px 0px;
    margin: 5px 0px;
}

fieldset button:hover {
    cursor: pointer;
    background-color: var(--main-background-color);
}

fieldset button:focus {
    outline: 1px solid var(--tab-button-hover-color);
}

fieldset input {
    margin: 5px 0px;
}

fieldset label {
    font-size: 14px;
}

.two-sided-container {
    transition: 0.8s;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    height: 100%;
    width: 100%;
}

.face {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.layout-button, .snapshot-button {
    background-color: var(--of-highlight);
}

.layout-button:hover, .snapshot-button:hover {
    background-color: var(--of-dark-theme);
}

#theme-button:after {
    content: "";
    background-color: var(--of-default-grey-light);
    padding: 5px;
    display: inline-block;
    margin-left: 10px;
    margin-top: 10px;
}

#menu-button {
    background-image: var(--menu-icon);
    background-size: 12px;
}

#lock-button {
    background-size: 16px;
    background-image: var(--layout-unlocked-icon);
}

#lock-button.layout-locked {
    background-image: var(--layout-locked-icon);
}

.center-form {
    color: #eee;
    display: flex;
    height: 100%;
    margin: 0;
    justify-content: center;
    align-items: center;
    font-family: Arial, Helvetica, sans-serif;
}