| #customcontrols { |
| z-index: 40; |
| position: fixed; |
| left: 70px; |
| bottom: 30px; |
| text-align: center; |
| font-size: 24px; |
| } |
| |
| #customcontrols button { |
| background: none; |
| color: var(--r-link-color); |
| border: none; |
| padding: 0; |
| font: inherit; |
| cursor: pointer; |
| outline: inherit; |
| z-index: 40; |
| } |
| |
| #customcontrols button:hover { |
| color: var(--r-link-color-hover); |
| } |
| |
| #customcontrols > ul { |
| position: fixed; |
| left: 54px; |
| bottom: 64px; |
| list-style-type: none; |
| overflow: hidden; |
| margin: 0; |
| padding: 0; |
| border: 1px solid var(--r-link-color); |
| border-radius: 5px; |
| padding: 10px; |
| background-color: var(--r-background-color) |
| } |
| |
| #customcontrols ul > li { |
| margin: 0px 5px; |
| padding: 0px 5px; |
| float: left; |
| } |
| |
| #customcontrols.collapsed #collapse-customcontrols, #customcontrols.collapsed > ul { |
| display: none; |
| } |
| |
| #customcontrols:not(.collapsed) #expand-customcontrols { |
| display: none; |
| } |
| |
| @media only screen and (min-width: 500px) { |
| #customcontrols > button { |
| display: none; |
| } |
| #customcontrols > ul { |
| bottom: 20px; |
| border: none; |
| background: none; |
| } |
| } |