haskell-spotlight/browser-extension/popup/Popup.module.css

91 lines
1.6 KiB
CSS

.popup {
background: #f6eedc;
color: #777;
width: inherit;
height: inherit;
display: flex;
flex-direction: column;
justify-content: space-between;
font-size: 16px;
}
.header {
font-weight: bold;
font-size: 18px;
padding: 12px 18px;
text-align: center;
background: #5e5086;
margin-bottom: 18px;
color: #fff;
text-shadow: 1px 3px 2px rgba(0, 0, 0, 0.27);
box-shadow: 0 0 4px rgba(0, 0, 0, 0.27);
}
.kbdKeys {
display: flex;
overflow: hidden;
margin: 12px 18px;
padding: 18px 12px;
border-radius: 12px;
background-color: #aaa;
justify-content: center;
align-items: center;
transition: var(--transition-short);
}
.kbdKeys:hover {
cursor: pointer;
}
.kbdKeys:focus,
.kbdKeys:active {
outline: none;
}
.kbdKeysAwaiting {
background-color: #5e5086;
transition: var(--transition-short);
}
.kbdKey {
margin: 4px;
font-weight: bold;
font-size: 12px;
background: #5e5086;
color: #fff;
padding: 0 12px 0 14px;
border-radius: 8px;
display: flex;
justify-content: center;
align-items: center;
height: 32px;
min-width: 32px;
white-space: nowrap;
border-bottom: 6px solid #453a62;
border-right: 4px solid #453a62;
filter: grayscale(1);
}
.kbdKeyActive {
filter: grayscale(0);
}
.resetKeyBindingsButton {
text-align: center;
background-color: #5e5086;
color: #fff;
border-radius: 8px;
display: inline-flex;
margin: auto;
padding: 4px 8px;
filter: grayscale(1);
border-bottom: 6px solid #453a62;
border-right: 4px solid #453a62;
transition: var(--transition-short);
}
.resetKeyBindingsButton:hover {
cursor: pointer;
filter: grayscale(0);
}