12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182 |
- .backdrop {
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- visibility: hidden;
- background: rgba(0, 0, 0, 0.2);
- z-index: 1000;
- cursor: pointer;
- }
- .backdrop--open {
- visibility: visible;
- }
- .panel {
- position: fixed;
- top: 0;
- left: 0;
- bottom: 0;
- width: 25vw;
- background-color: var(--background-color);
- z-index: 1001;
- padding: 1.5rem;
- transform: translateX(-100%);
- transition: transform 0.3s ease-in-out;
- overflow: hidden;
- }
- .panel--open {
- transform: translateX(0);
- }
- ul {
- padding: 0;
- list-style: none;
- }
- .navigation-entry {
- font-size: 1.25rem;
- font-weight: 500;
- margin-bottom: 1rem;
- padding-left: 2rem;
- padding: 0.5rem 0 0.5rem 2rem;
- border: solid 1px var(--border-color);
- background-color: var(--field-background-color);
- box-shadow: var(--shadow-small);
- border-radius: 10px;
- transition: transform 0.2s ease-in-out;
- }
- .navigation-entry:hover {
- background-color: var(--primary-color);
- transform: scale(1.05);
- cursor: pointer;
- }
- .settings-container {
- display: flex;
- justify-content: space-between;
- position: absolute;
- bottom: 2rem;
- width: calc(25vw - 3rem);
- }
- .settings-button {
- font-size: 1.25rem;
- width: 9rem;
- font-weight: 500;
- padding: 0.5rem;
- border: solid 1px var(--border-color);
- background-color: var(--field-background-color);
- box-shadow: var(--shadow-small);
- border-radius: 10px;
- transition: transform 0.2s ease-in-out;
- }
- .settings-button:hover {
- background-color: var(--primary-color);
- transform: scale(1.05);
- }
|