|
|
|
|
|
|
|
|
button::selection { |
|
|
button::selection { |
|
|
background-color: transparent; |
|
|
background-color: transparent; |
|
|
} |
|
|
} |
|
|
#main-button-container { |
|
|
|
|
|
|
|
|
.main-button-container { |
|
|
display: flex; |
|
|
display: flex; |
|
|
flex-flow: column; |
|
|
flex-flow: column; |
|
|
|
|
|
border-bottom: 1px solid #ddd; |
|
|
} |
|
|
} |
|
|
#main-button-container button { |
|
|
|
|
|
|
|
|
button.main-button { |
|
|
padding: 10px; |
|
|
padding: 10px; |
|
|
font-size: 6rem; |
|
|
font-size: 6rem; |
|
|
display: flex; |
|
|
display: flex; |
|
|
|
|
|
|
|
|
color: #ccc; |
|
|
color: #ccc; |
|
|
font-family: Font Awesome; |
|
|
font-family: Font Awesome; |
|
|
} |
|
|
} |
|
|
#main-button-container button.active { |
|
|
|
|
|
|
|
|
button.main-button.active { |
|
|
color: #000; |
|
|
color: #000; |
|
|
} |
|
|
} |
|
|
#main-button-container button:hover { |
|
|
|
|
|
|
|
|
button.main-button:hover { |
|
|
text-shadow: |
|
|
text-shadow: |
|
|
0 0 1px #fff, |
|
|
0 0 1px #fff, |
|
|
0 0 3px #fff, |
|
|
0 0 3px #fff, |
|
|
0 0 5px #fff; |
|
|
0 0 5px #fff; |
|
|
} |
|
|
} |
|
|
#main-button-container button:hover { |
|
|
|
|
|
|
|
|
button.main-button:hover { |
|
|
color: #999; |
|
|
color: #999; |
|
|
} |
|
|
} |
|
|
#main-button-container button::before { |
|
|
|
|
|
|
|
|
button.main-button::before { |
|
|
content: "\F08D"; |
|
|
content: "\F08D"; |
|
|
font-weight: 900; |
|
|
font-weight: 900; |
|
|
position: relative; |
|
|
position: relative; |
|
|
top: 3px; |
|
|
top: 3px; |
|
|
} |
|
|
} |
|
|
#main-button-container button::after { |
|
|
|
|
|
|
|
|
button.main-button::after { |
|
|
content: "\F05E"; |
|
|
content: "\F05E"; |
|
|
position: absolute; |
|
|
position: absolute; |
|
|
font-weight: 300; |
|
|
font-weight: 300; |
|
|
|
|
|
|
|
|
opacity: 0.0; |
|
|
opacity: 0.0; |
|
|
transform: scaleX(-1) scale(1.5); |
|
|
transform: scaleX(-1) scale(1.5); |
|
|
} |
|
|
} |
|
|
#main-button-container button.active::after { |
|
|
|
|
|
|
|
|
button.main-button.active::after { |
|
|
opacity: 1.0; |
|
|
opacity: 1.0; |
|
|
} |
|
|
} |
|
|
#aux-button-container { |
|
|
|
|
|
|
|
|
.aux-button-container { |
|
|
display: flex; |
|
|
display: flex; |
|
|
|
|
|
flex-flow: column; |
|
|
border-top: 1px solid #ddd; |
|
|
border-top: 1px solid #ddd; |
|
|
} |
|
|
} |
|
|
.options-button { |
|
|
|
|
|
|
|
|
button.options-button { |
|
|
font-size: 1.125rem; |
|
|
font-size: 1.125rem; |
|
|
padding: 10px; |
|
|
padding: 10px; |
|
|
color: #777; |
|
|
color: #777; |
|
|
width: 100%; |
|
|
width: 100%; |
|
|
|
|
|
height: 3rem; |
|
|
font-family: Font Awesome, Inconsolata, sans-serif; |
|
|
font-family: Font Awesome, Inconsolata, sans-serif; |
|
|
} |
|
|
} |
|
|
.options-button:hover { |
|
|
|
|
|
|
|
|
button.options-button:hover { |
|
|
color: #000; |
|
|
color: #000; |
|
|
} |
|
|
} |
|
|
.options-button::before { |
|
|
|
|
|
|
|
|
button.options-button::before { |
|
|
content: "\F1DE"; |
|
|
content: "\F1DE"; |
|
|
font-family: Font Awesome; |
|
|
font-family: Font Awesome; |
|
|
font-size: 0.875em; |
|
|
font-size: 0.875em; |
|
|
margin: 0 6px 0 0; |
|
|
margin: 0 6px 0 0; |
|
|
} |
|
|
} |
|
|
.options-button::after { |
|
|
|
|
|
|
|
|
button.options-button::after { |
|
|
content: "Options"; |
|
|
content: "Options"; |
|
|
margin: 0 3px 0 0; |
|
|
margin: 0 3px 0 0; |
|
|
} |
|
|
} |
|
|
|
|
|
button.reload-button { |
|
|
|
|
|
background-color: #ffd; |
|
|
|
|
|
margin: 4px; |
|
|
|
|
|
border-radius: 6px; |
|
|
|
|
|
color: #777; |
|
|
|
|
|
max-height: 0; |
|
|
|
|
|
padding: 0; |
|
|
|
|
|
overflow: hidden; |
|
|
|
|
|
position: absolute; |
|
|
|
|
|
width: calc(100% - 8px); |
|
|
|
|
|
top: -4rem; |
|
|
|
|
|
} |
|
|
|
|
|
button.reload-button.active { |
|
|
|
|
|
max-height: 1000px; |
|
|
|
|
|
padding: 8px; |
|
|
|
|
|
border: 1px solid #ddd; |
|
|
|
|
|
top: 1px; |
|
|
|
|
|
} |
|
|
|
|
|
button.reload-button:hover { |
|
|
|
|
|
color: #000; |
|
|
|
|
|
} |
|
|
|
|
|
button.reload-button::before { |
|
|
|
|
|
content: "\F2F1"; |
|
|
|
|
|
font-family: Font Awesome; |
|
|
|
|
|
font-size: 2rem; |
|
|
|
|
|
font-weight: 900; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.misc { |
|
|
|
|
|
height: 4rem; |
|
|
|
|
|
position: relative; |
|
|
|
|
|
} |