110 lines
2.5 KiB
CSS
110 lines
2.5 KiB
CSS
@property --jsl-dialog-bgcolor {
|
|
syntax: "<color>";
|
|
inherits: true;
|
|
initial-value: #fff;
|
|
}
|
|
@property --jsl-dialog-bordercolor {
|
|
syntax: "<color>";
|
|
inherits: true;
|
|
initial-value: #444;
|
|
}
|
|
@property --jsl-dialog-button-normal {
|
|
syntax: "<color>";
|
|
inherits: true;
|
|
initial-value: #e0e0e0;
|
|
|
|
}
|
|
@property --jsl-dialog-button-hover {
|
|
syntax: "<color>";
|
|
inherits: true;
|
|
initial-value: #f0f0f0;
|
|
}
|
|
|
|
.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.75rem;
|
|
}
|
|
|
|
.-title {
|
|
font-weight: bold;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.-close-btn {
|
|
border: 0px;
|
|
background: transparent;
|
|
color: red;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.-content {
|
|
padding: 0px 0.75rem;
|
|
}
|
|
|
|
.-buttons {
|
|
padding: 0.75rem;
|
|
text-align: right;
|
|
|
|
.action {
|
|
font-size: 102%;
|
|
border: solid 1px #666;
|
|
border-radius: 0.25rem;
|
|
padding: 0.45rem 0.8rem;
|
|
margin: 0px 0.25rem;
|
|
background: var(--jsl-dialog-button-normal);
|
|
box-shadow: inset -1px -1px 1px 0px #bbb, inset 1px 1px 1px 0px #fff;
|
|
&.default-action {
|
|
outline: solid 1px #666;
|
|
}
|
|
&:hover {
|
|
background: var(--jsl-dialog-button-hover);
|
|
text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
|
|
}
|
|
&:active {
|
|
outline: solid 1px #444;
|
|
}
|
|
}
|
|
}
|
|
} |