| 12345678910111213141516171819202122232425262728293031 |
- .left-bar {
- box-sizing: border-box;
- position: fixed;
- width: 300px;
- top: 50%;
- left: 0px;
- transform: translateY(-50%);
- max-height: 80%;
- background-color: var(--left-bar-color);
- border-radius: 0 var(--padding) var(--padding) 0;
- padding: var(--padding);
- color: var(--font-color);
- min-height: calc(var(--padding) * 6.5);
- transition: transform 0.5s, left 0.5s;
- }
- .left-bar .control-button button {
- position: absolute;
- top: calc(var(--padding) * 2);
- left: 100%;
- border: none;
- background-color: var(--left-bar-color);
- color: var(--font-color);
- padding: calc(var(--padding) / 2);
- border-radius: 0 calc(var(--padding) / 2) calc(var(--padding) / 2) 0;
- transition: transform 0.5s;
- }
- .left-bar .control-button button:hover {
- transform: scale(1.2);
- }
|