Mon 21 Jul 22:43:21 CEST 2025
This commit is contained in:
parent
42d3a38186
commit
040eab2914
221
js/ui/dialog/css/prompt-boxes.scss
Normal file
221
js/ui/dialog/css/prompt-boxes.scss
Normal file
|
@ -0,0 +1,221 @@
|
|||
/** Variables **/
|
||||
$white: #FFF;
|
||||
$black: #252525;
|
||||
|
||||
$light-grey: #EEE;
|
||||
$grey: #CCC;
|
||||
$dark-grey: #999;
|
||||
|
||||
$light-blue: #79bde6;
|
||||
$blue: #4591bf;
|
||||
$dark-blue: #366988;
|
||||
|
||||
$light-red: #ff7575;
|
||||
$red: #da4242;
|
||||
$dark-red: #af3535;
|
||||
|
||||
$light-green: #6ed06c;
|
||||
$green: #51cc50;
|
||||
$dark-green: #409c3f;
|
||||
|
||||
$br: 2px;
|
||||
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#pb-container, .pb-backdrop {
|
||||
transition: ease 0.25s;
|
||||
|
||||
a, button, input, textarea, select, div {
|
||||
transition: ease 0.25s;
|
||||
}
|
||||
}
|
||||
|
||||
.pb-toast {
|
||||
transition: ease 0.25s;
|
||||
|
||||
a, button, input, textarea, select, div {
|
||||
transition: ease 0.25s;
|
||||
}
|
||||
}
|
||||
|
||||
.pb-backdrop {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 97;
|
||||
opacity: 0;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
|
||||
&[data-show] {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
#pb-container {
|
||||
display: inline-block;
|
||||
position: fixed;
|
||||
top: 40vh;
|
||||
left: 0;
|
||||
right: 0;
|
||||
max-width: 375px;
|
||||
transform: scale(0);
|
||||
|
||||
margin: {
|
||||
top: -50px;
|
||||
right: auto;
|
||||
left: auto;
|
||||
}
|
||||
padding: 1em;
|
||||
border-radius: $br;
|
||||
|
||||
background: $white;
|
||||
border-bottborder-bottom: 4px solid $grey;
|
||||
|
||||
z-index: 99;
|
||||
|
||||
&.absolute {
|
||||
margin-top: 40vh;
|
||||
}
|
||||
|
||||
input {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0.5em;
|
||||
margin-bottom: 1em;
|
||||
border: 1px solid $light-grey;
|
||||
font-size: 1em;
|
||||
border-radius: $br;
|
||||
|
||||
&:focus, &:active {
|
||||
outline: none;
|
||||
border-color: $grey;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-show] {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.pb-toast {
|
||||
display: inline-block;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
transform: scale(0);
|
||||
width: 400px;
|
||||
margin: {
|
||||
right: auto;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
padding: 1em;
|
||||
color: $white;
|
||||
border-radius: $br;
|
||||
text-align: center;
|
||||
|
||||
z-index: 98;
|
||||
|
||||
&.top {
|
||||
top: 0.25em;
|
||||
}
|
||||
|
||||
&.bottom {
|
||||
bottom: 0.25em;
|
||||
}
|
||||
|
||||
&.success {
|
||||
background: $blue;
|
||||
}
|
||||
|
||||
&.error {
|
||||
background: $red;
|
||||
}
|
||||
|
||||
&.info {
|
||||
color: $black;
|
||||
background: $light-grey;
|
||||
}
|
||||
|
||||
&.show {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
&.gone {
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
&[data-close="true"] {
|
||||
padding-right: 3em;
|
||||
}
|
||||
|
||||
.toast-close {
|
||||
position: absolute;;
|
||||
right: 0.75em;
|
||||
top: 50%;
|
||||
margin-top: -13.5px;
|
||||
text-decoration: none;
|
||||
font-size: 24px;
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.pb-message {
|
||||
font-size: 1.05em;
|
||||
margin: 0 0 0.75em;
|
||||
}
|
||||
|
||||
.pb-buttons {
|
||||
button {
|
||||
display: inline-block;
|
||||
background: $light-grey;
|
||||
border-radius: $br;
|
||||
border: none;
|
||||
padding: 0.5em 1em;
|
||||
color: #222;
|
||||
font-size: 1em;
|
||||
outline: none;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
box-shadow: none;
|
||||
font-size: 14px;
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 3px #FFFFFF, 0 0 0px 5px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $grey;
|
||||
}
|
||||
|
||||
&:not(:only-of-type):last-of-type {
|
||||
float: right;
|
||||
background: $blue;
|
||||
color: $white;
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 3px #FFFFFF, 0 0 0px 5px rgba(69, 145, 191, 0.5);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $dark-blue;
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
opacity: 0.5;
|
||||
background: none;
|
||||
border-color: $grey;
|
||||
color: $dark-grey;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user