Popup dialog dark-scheme

This commit is contained in:
Simon Rozman 2024-06-28 14:14:11 +02:00
parent ef2e232813
commit a457f48fbb

View File

@ -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;
// }