Popup dialog dark-scheme
This commit is contained in:
parent
ef2e232813
commit
a457f48fbb
35
service.js
35
service.js
@ -1787,7 +1787,7 @@ class BesPopup extends HTMLElement {
|
||||
.popup-text {
|
||||
font-size: 0.93rem;
|
||||
max-width: 160px;
|
||||
color: black;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
padding: 8px 0;
|
||||
z-index: 1;
|
||||
@ -1800,9 +1800,9 @@ class BesPopup extends HTMLElement {
|
||||
padding: 8px;
|
||||
z-index: 1;
|
||||
font-family: Arial, sans-serif;
|
||||
background-color: rgb(241, 243, 249);
|
||||
background-color: #f1f3f9;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
|
||||
border-radius: 5px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.bes-toolbar {
|
||||
display: flex;
|
||||
@ -1813,11 +1813,12 @@ class BesPopup extends HTMLElement {
|
||||
margin-right: 2px;
|
||||
}
|
||||
.bes-popup-title {
|
||||
color: #333;
|
||||
flex-grow: 1;
|
||||
cursor: grab;
|
||||
}
|
||||
.bes-text-div{
|
||||
background-color: white;
|
||||
background-color: #eee;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
@ -1827,7 +1828,7 @@ class BesPopup extends HTMLElement {
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
background-color: #239aff;
|
||||
color: white;
|
||||
color: #eee;
|
||||
cursor: pointer;
|
||||
}
|
||||
.bes-replacement-btn:hover{
|
||||
@ -1844,6 +1845,24 @@ class BesPopup extends HTMLElement {
|
||||
from {opacity: 0;}
|
||||
to {opacity:1 ;}
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.popup-text {
|
||||
font-weight: lighter;
|
||||
color: #eee;
|
||||
}
|
||||
.bes-popup-container {
|
||||
font-weight: lighter;
|
||||
background-color: #57585A;
|
||||
}
|
||||
.bes-popup-title {
|
||||
font-weight: lighter;
|
||||
color: #eee;
|
||||
}
|
||||
.bes-text-div {
|
||||
font-weight: lighter;
|
||||
background-color: #333;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class="bes-popup-container">
|
||||
<div class="bes-toolbar">
|
||||
@ -2021,7 +2040,7 @@ customElements.define('bes-popup-el', BesPopup)
|
||||
// }
|
||||
// .popup-text {
|
||||
// max-width: 160px;
|
||||
// color: black;
|
||||
// color: #333;
|
||||
// text-align: center;
|
||||
// padding: 8px 0;
|
||||
// z-index: 1;
|
||||
@ -2029,7 +2048,7 @@ customElements.define('bes-popup-el', BesPopup)
|
||||
// .bes-popup-container {
|
||||
// visibility: hidden;
|
||||
// max-width: 300px;
|
||||
// background-color: rgb(241, 243, 249);
|
||||
// background-color: #f1f3f9;
|
||||
// box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
|
||||
// border-radius: 5px;
|
||||
// padding: 8px;
|
||||
@ -2047,7 +2066,7 @@ customElements.define('bes-popup-el', BesPopup)
|
||||
// flex-grow: 1;
|
||||
// }
|
||||
// .bes-text-div{
|
||||
// background-color: white;
|
||||
// background-color: #eee;
|
||||
// padding: 10px;
|
||||
// border-radius: 5px;
|
||||
// }
|
||||
|
Loading…
x
Reference in New Issue
Block a user