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 { .popup-text {
font-size: 0.93rem; font-size: 0.93rem;
max-width: 160px; max-width: 160px;
color: black; color: #333;
text-align: center; text-align: center;
padding: 8px 0; padding: 8px 0;
z-index: 1; z-index: 1;
@ -1800,9 +1800,9 @@ class BesPopup extends HTMLElement {
padding: 8px; padding: 8px;
z-index: 1; z-index: 1;
font-family: Arial, sans-serif; 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); box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
border-radius: 5px; border-radius: 10px;
} }
.bes-toolbar { .bes-toolbar {
display: flex; display: flex;
@ -1813,11 +1813,12 @@ class BesPopup extends HTMLElement {
margin-right: 2px; margin-right: 2px;
} }
.bes-popup-title { .bes-popup-title {
color: #333;
flex-grow: 1; flex-grow: 1;
cursor: grab; cursor: grab;
} }
.bes-text-div{ .bes-text-div{
background-color: white; background-color: #eee;
padding: 10px; padding: 10px;
border-radius: 5px; border-radius: 5px;
} }
@ -1827,7 +1828,7 @@ class BesPopup extends HTMLElement {
border: none; border: none;
border-radius: 5px; border-radius: 5px;
background-color: #239aff; background-color: #239aff;
color: white; color: #eee;
cursor: pointer; cursor: pointer;
} }
.bes-replacement-btn:hover{ .bes-replacement-btn:hover{
@ -1844,6 +1845,24 @@ class BesPopup extends HTMLElement {
from {opacity: 0;} from {opacity: 0;}
to {opacity:1 ;} 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> </style>
<div class="bes-popup-container"> <div class="bes-popup-container">
<div class="bes-toolbar"> <div class="bes-toolbar">
@ -2021,7 +2040,7 @@ customElements.define('bes-popup-el', BesPopup)
// } // }
// .popup-text { // .popup-text {
// max-width: 160px; // max-width: 160px;
// color: black; // color: #333;
// text-align: center; // text-align: center;
// padding: 8px 0; // padding: 8px 0;
// z-index: 1; // z-index: 1;
@ -2029,7 +2048,7 @@ customElements.define('bes-popup-el', BesPopup)
// .bes-popup-container { // .bes-popup-container {
// visibility: hidden; // visibility: hidden;
// max-width: 300px; // max-width: 300px;
// background-color: rgb(241, 243, 249); // background-color: #f1f3f9;
// box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); // box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
// border-radius: 5px; // border-radius: 5px;
// padding: 8px; // padding: 8px;
@ -2047,7 +2066,7 @@ customElements.define('bes-popup-el', BesPopup)
// flex-grow: 1; // flex-grow: 1;
// } // }
// .bes-text-div{ // .bes-text-div{
// background-color: white; // background-color: #eee;
// padding: 10px; // padding: 10px;
// border-radius: 5px; // border-radius: 5px;
// } // }