149 lines
2.9 KiB
CSS
149 lines
2.9 KiB
CSS
|
/* @settings
|
||
|
|
|
||
|
|
name: Buttons
|
||
|
|
id: buttons-styles
|
||
|
|
settings:
|
||
|
|
-
|
||
|
|
id: button-background
|
||
|
|
title: Background
|
||
|
|
type: variable-themed-color
|
||
|
|
format: hex
|
||
|
|
opacity: false
|
||
|
|
default-light: '#f5f6f8'
|
||
|
|
default-dark: '#1b1b1b'
|
||
|
|
-
|
||
|
|
id: button-text
|
||
|
|
title: Text
|
||
|
|
type: variable-themed-color
|
||
|
|
format: hex
|
||
|
|
opacity: false
|
||
|
|
default-light: '#1b1b1b'
|
||
|
|
default-dark: '#f5f6f8'
|
||
|
|
-
|
||
|
|
id: button-border
|
||
|
|
title: Border
|
||
|
|
type: variable-themed-color
|
||
|
|
format: hex
|
||
|
|
opacity: false
|
||
|
|
default-light: '#7a9486'
|
||
|
|
default-dark: '#84a83a'
|
||
|
|
-
|
||
|
|
id: button-box-shadow
|
||
|
|
title: Box Shadow
|
||
|
|
type: variable-themed-color
|
||
|
|
format: rgb
|
||
|
|
opacity: true
|
||
|
|
default-light: '#1b1b1b'
|
||
|
|
default-dark: '#f5f6f8'
|
||
|
|
-
|
||
|
|
id: button-border-radius
|
||
|
|
title: Border Radius
|
||
|
|
type: variable-number
|
||
|
|
format: px
|
||
|
|
default: 5
|
||
|
|
-
|
||
|
|
id: button-size
|
||
|
|
title: Font Size
|
||
|
|
type: variable-number
|
||
|
|
format: em
|
||
|
|
default: 1
|
||
|
|
|
||
|
|
*/
|
||
|
|
|
||
|
|
.block-language-button {
|
||
|
|
padding: 5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
button.button-default {
|
||
|
|
border: 0.5px solid var(--button-border, #7a9486);
|
||
|
|
border-radius: var(--button-border-radius, 5px);
|
||
|
|
background-color: var(--button-background);
|
||
|
|
padding: 10px 30px;
|
||
|
|
color: var(--button-text);
|
||
|
|
text-decoration: none;
|
||
|
|
font-size: var(--button-size);
|
||
|
|
margin: 0 5px;
|
||
|
|
box-shadow: 0 1px 3px var(--button-box-shadow, rgba(0, 0, 0, 0.12)),
|
||
|
|
0 1px 2px var(--button-box-shadow, rgba(0, 0, 0, 0.24));
|
||
|
|
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
|
||
|
|
}
|
||
|
|
|
||
|
|
button.button-default:hover {
|
||
|
|
z-index: 100;
|
||
|
|
box-shadow: 0 4px 4px var(--button-box-shadow, rgba(0, 0, 0, 0.25)),
|
||
|
|
0 10px 10px var(--button-box-shadow, rgba(0, 0, 0, 0.22));
|
||
|
|
transform: translate3d(0px, -1.5px, 0px);
|
||
|
|
background-color: var(--button-background);
|
||
|
|
}
|
||
|
|
|
||
|
|
.theme-dark button.button-default {
|
||
|
|
border: 0.5px solid var(--button-border, #84a83a);
|
||
|
|
}
|
||
|
|
|
||
|
|
.theme-dark button.button-default:hover {
|
||
|
|
z-index: 100;
|
||
|
|
box-shadow: 0 4px 4px var(--button-box-shadow, rgba(210, 210, 210, 0.25)),
|
||
|
|
0 10px 10px var(--button-box-shadow, rgba(210, 210, 210, 0.22));
|
||
|
|
transform: translate3d(0px, -1.5px, 0px);
|
||
|
|
}
|
||
|
|
|
||
|
|
button.button-inline {
|
||
|
|
width: unset;
|
||
|
|
height: unset;
|
||
|
|
padding: 0 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
button.blue {
|
||
|
|
background: #76b3fa;
|
||
|
|
color: black;
|
||
|
|
}
|
||
|
|
|
||
|
|
button.red {
|
||
|
|
background-color: red;
|
||
|
|
}
|
||
|
|
|
||
|
|
button.green {
|
||
|
|
background: green;
|
||
|
|
}
|
||
|
|
|
||
|
|
button.yellow {
|
||
|
|
background: yellow;
|
||
|
|
color: black;
|
||
|
|
}
|
||
|
|
|
||
|
|
button.purple {
|
||
|
|
background: #725585;
|
||
|
|
}
|
||
|
|
|
||
|
|
button.blue:hover {
|
||
|
|
background: #76b3fa;
|
||
|
|
color: black;
|
||
|
|
}
|
||
|
|
|
||
|
|
button.red:hover {
|
||
|
|
background: red;
|
||
|
|
}
|
||
|
|
|
||
|
|
button.green:hover {
|
||
|
|
background: green;
|
||
|
|
}
|
||
|
|
|
||
|
|
button.yellow:hover {
|
||
|
|
background: yellow;
|
||
|
|
color: black;
|
||
|
|
}
|
||
|
|
|
||
|
|
button.purple:hover {
|
||
|
|
background: #725585;
|
||
|
|
}
|
||
|
|
|
||
|
|
.button-maker {
|
||
|
|
max-width: 35rem;
|
||
|
|
width: 35rem;
|
||
|
|
overflow-y: auto;
|
||
|
|
max-height: 30rem;
|
||
|
|
padding-left: 0.5rem;
|
||
|
|
padding-right: 0.5rem;
|
||
|
|
overflow-x: hidden;
|
||
|
|
}
|