95 lines
2.0 KiB
CSS
95 lines
2.0 KiB
CSS
@property --jsl-dialog-bgcolor {
|
|
syntax: "<color>";
|
|
inherits: true;
|
|
initial-value: #fff;
|
|
}
|
|
@property --jsl-dialog-bordercolor {
|
|
syntax: "<color>";
|
|
inherits: true;
|
|
initial-value: #444;
|
|
}
|
|
|
|
.jsl-dialog {
|
|
|
|
background: var(--jsl-dialog-bgcolor);
|
|
box-shadow: 0px 5px 15px rgba(0,0,0,0.5);
|
|
max-width: min(90vw, 500px);
|
|
border: solid 2px var(--jsl-dialog-bordercolor);
|
|
border-radius: 0.5rem;
|
|
padding: 0px;
|
|
font-family: system-ui;
|
|
|
|
&.-style-msgbox, &.-style-info {
|
|
--jsl-dialog-bgcolor: #dfd;
|
|
--jsl-dialog-bordercolor: #1a8310;
|
|
.-title::before {
|
|
content: '🛈 ';
|
|
}
|
|
}
|
|
&.-style-confirm {
|
|
--jsl-dialog-bgcolor: #ffd;
|
|
--jsl-dialog-bordercolor: #835f10;
|
|
.-title::before {
|
|
content: '✔ ';
|
|
}
|
|
}
|
|
&.-style-error {
|
|
--jsl-dialog-bgcolor: #fcc;
|
|
--jsl-dialog-bordercolor: #bb3434;
|
|
.-title::before {
|
|
content: '⚠️ ';
|
|
}
|
|
}
|
|
&.-style-warning {
|
|
--jsl-dialog-bgcolor: #ffc;
|
|
--jsl-dialog-bordercolor: #c93b03;
|
|
.-title::before {
|
|
content: '⚠️ ';
|
|
}
|
|
}
|
|
|
|
.-header {
|
|
border-top-left-radius: 0.5rem;
|
|
border-top-right-radius: 0.5rem;
|
|
/* background: rgba(0, 0, 0, 0.2); */
|
|
display: flex;
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
.-title {
|
|
font-weight: bold;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.-close-btn {
|
|
border: 0px;
|
|
background: transparent;
|
|
color: red;
|
|
}
|
|
|
|
.-content {
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
.-buttons {
|
|
padding: 0.5rem;
|
|
padding-top: 0.2rem;
|
|
text-align: center;
|
|
|
|
.action {
|
|
border: solid 1px #666;
|
|
border-radius: 0.25rem;
|
|
padding: 0.35rem 0.6rem;
|
|
margin: 0px 0.25rem;
|
|
background: #eee;
|
|
|
|
&.default-action {
|
|
outline: solid 1px #666;
|
|
}
|
|
|
|
&:active {
|
|
outline: solid 1px #444;
|
|
}
|
|
}
|
|
}
|
|
} |