e39bc61bb9c7f7b89e9064ef5bfbc0fd98a05fd7 New: Dark mode support for DataTables and Bootstrap 5.3+ styling

Sync to source repo @e39bc61bb9c7f7b89e9064ef5bfbc0fd98a05fd7

Author: AllanJard

css/stateRestore.jqueryui.css

@@ -1,95 +1,149 @@
-div.dtsr-confirmation, div.dtsr-creation {
+div.dtsr-confirmation,
+div.dtsr-creation {
   position: fixed;
   top: 20%;
   left: 50%;
   width: 500px;
-  background-color: white;
   margin-left: -250px;
-  border-radius: 6px;
-  box-shadow: 0 0 5px #555;
-  border: 2px solid #444;
+  background-color: white;
+  border-radius: 0.75em;
+  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
   z-index: 2003;
   box-sizing: border-box;
-  padding: 1em;
+  padding: 2em;
+}
+div.dtsr-confirmation button,
+div.dtsr-creation button {
+  display: inline-block;
+  margin: 1em;
+  padding: 0.5em 1em;
+  border-radius: 0.5em;
+  border: 1px solid rgba(0, 0, 0, 0.175);
+  background-color: #f6f6f6;
+  text-align: left;
+  cursor: pointer;
+}
+div.dtsr-confirmation button:hover,
+div.dtsr-creation button:hover {
+  background-color: #ebebeb;
 }
-div.dtsr-confirmation div.dtsr-confirmation-title-row, div.dtsr-creation div.dtsr-confirmation-title-row {
+div.dtsr-confirmation div.dtsr-creation-text,
+div.dtsr-confirmation div.dtsr-confirmation-title-row,
+div.dtsr-creation div.dtsr-creation-text,
+div.dtsr-creation div.dtsr-confirmation-title-row {
   text-align: left;
 }
-div.dtsr-confirmation div.dtsr-confirmation-title-row h2, div.dtsr-creation div.dtsr-confirmation-title-row h2 {
+div.dtsr-confirmation div.dtsr-creation-text h2,
+div.dtsr-confirmation div.dtsr-confirmation-title-row h2,
+div.dtsr-creation div.dtsr-creation-text h2,
+div.dtsr-creation div.dtsr-confirmation-title-row h2 {
   border-bottom: 0px;
   margin-top: 0px;
   padding-top: 0px;
+  margin-bottom: 1rem;
 }
-div.dtsr-confirmation div.dtsr-confirmation-text, div.dtsr-creation div.dtsr-confirmation-text {
+div.dtsr-confirmation div.dtsr-confirmation-text,
+div.dtsr-creation div.dtsr-confirmation-text {
   text-align: center;
 }
-div.dtsr-confirmation div.dtsr-confirmation-buttons, div.dtsr-creation div.dtsr-confirmation-buttons {
+div.dtsr-confirmation div.dtsr-modal-foot,
+div.dtsr-confirmation div.dtsr-confirmation-buttons,
+div.dtsr-creation div.dtsr-modal-foot,
+div.dtsr-creation div.dtsr-confirmation-buttons {
   text-align: right;
   margin-top: 1em;
 }
-div.dtsr-confirmation div.dtsr-confirmation-buttons button.dtsr-confirmation-button, div.dtsr-creation div.dtsr-confirmation-buttons button.dtsr-confirmation-button {
+div.dtsr-confirmation div.dtsr-modal-foot button,
+div.dtsr-confirmation div.dtsr-confirmation-buttons button,
+div.dtsr-creation div.dtsr-modal-foot button,
+div.dtsr-creation div.dtsr-confirmation-buttons button {
   margin: 0px;
 }
-div.dtsr-confirmation div.dtsr-creation-text, div.dtsr-creation div.dtsr-creation-text {
+div.dtsr-confirmation div.dtsr-creation-text,
+div.dtsr-creation div.dtsr-creation-text {
   text-align: left;
   padding: 0px;
   border: none;
 }
-div.dtsr-confirmation div.dtsr-creation-text span, div.dtsr-creation div.dtsr-creation-text span {
+div.dtsr-confirmation div.dtsr-creation-text span,
+div.dtsr-creation div.dtsr-creation-text span {
   font-size: 20px;
 }
-div.dtsr-confirmation div.dtsr-creation-form div.dtsr-left, div.dtsr-confirmation div.dtsr-creation-form div.dtsr-right, div.dtsr-creation div.dtsr-creation-form div.dtsr-left, div.dtsr-creation div.dtsr-creation-form div.dtsr-right {
+div.dtsr-confirmation div.dtsr-creation-form div.dtsr-left, div.dtsr-confirmation div.dtsr-creation-form div.dtsr-right,
+div.dtsr-creation div.dtsr-creation-form div.dtsr-left,
+div.dtsr-creation div.dtsr-creation-form div.dtsr-right {
   display: inline-block;
   width: 50%;
 }
-div.dtsr-confirmation div.dtsr-creation-form div.dtsr-left, div.dtsr-creation div.dtsr-creation-form div.dtsr-left {
+div.dtsr-confirmation div.dtsr-creation-form div.dtsr-left,
+div.dtsr-creation div.dtsr-creation-form div.dtsr-left {
   text-align: right;
 }
-div.dtsr-confirmation div.dtsr-creation-form div.dtsr-right, div.dtsr-confirmation div.dtsr-creation-form div.dtsr-name-row, div.dtsr-creation div.dtsr-creation-form div.dtsr-right, div.dtsr-creation div.dtsr-creation-form div.dtsr-name-row {
+div.dtsr-confirmation div.dtsr-creation-form div.dtsr-right, div.dtsr-confirmation div.dtsr-creation-form div.dtsr-name-row,
+div.dtsr-creation div.dtsr-creation-form div.dtsr-right,
+div.dtsr-creation div.dtsr-creation-form div.dtsr-name-row {
   text-align: left;
 }
-div.dtsr-confirmation div.dtsr-creation-form div.dtsr-form-row label.dtsr-name-label, div.dtsr-creation div.dtsr-creation-form div.dtsr-form-row label.dtsr-name-label {
-  width: 33.3%;
+div.dtsr-confirmation div.dtsr-creation-form div.dtsr-form-row,
+div.dtsr-creation div.dtsr-creation-form div.dtsr-form-row {
+  margin: 0.5em 0;
+}
+div.dtsr-confirmation div.dtsr-creation-form div.dtsr-form-row:first-child,
+div.dtsr-creation div.dtsr-creation-form div.dtsr-form-row:first-child {
+  margin-top: 0;
+}
+div.dtsr-confirmation div.dtsr-creation-form div.dtsr-form-row:last-child,
+div.dtsr-creation div.dtsr-creation-form div.dtsr-form-row:last-child {
+  margin-bottom: 0;
+}
+div.dtsr-confirmation div.dtsr-creation-form div.dtsr-form-row label.dtsr-name-label,
+div.dtsr-creation div.dtsr-creation-form div.dtsr-form-row label.dtsr-name-label {
+  width: 25%;
   display: inline-block;
   text-align: right;
   padding-right: 15px;
   padding-left: 15px;
 }
-div.dtsr-confirmation div.dtsr-creation-form div.dtsr-form-row input.dtsr-name-input, div.dtsr-creation div.dtsr-creation-form div.dtsr-form-row input.dtsr-name-input {
+div.dtsr-confirmation div.dtsr-creation-form div.dtsr-form-row input.dtsr-name-input,
+div.dtsr-creation div.dtsr-creation-form div.dtsr-form-row input.dtsr-name-input {
   width: 66.6%;
   display: inline-block;
 }
-div.dtsr-confirmation div.dtsr-creation-form div.dtsr-form-row input.dtsr-check-box, div.dtsr-creation div.dtsr-creation-form div.dtsr-form-row input.dtsr-check-box {
-  margin-left: 33.3%;
+div.dtsr-confirmation div.dtsr-creation-form div.dtsr-form-row input.dtsr-check-box,
+div.dtsr-creation div.dtsr-creation-form div.dtsr-form-row input.dtsr-check-box {
+  margin-left: 25%;
   margin-right: 14px;
   display: inline-block;
 }
-div.dtsr-confirmation div.dtsr-creation-form div.dtsr-form-row label.dtsr-toggle-title, div.dtsr-creation div.dtsr-creation-form div.dtsr-form-row label.dtsr-toggle-title {
-  margin-right: -33.3%;
-}
-div.dtsr-confirmation div.dtsr-confirmation-text, div.dtsr-creation div.dtsr-confirmation-text {
+div.dtsr-confirmation div.dtsr-confirmation-text,
+div.dtsr-creation div.dtsr-confirmation-text {
   text-align: left;
 }
-div.dtsr-confirmation div.dtsr-confirmation-text label.dtsr-name-label, div.dtsr-creation div.dtsr-confirmation-text label.dtsr-name-label {
+div.dtsr-confirmation div.dtsr-confirmation-text label.dtsr-name-label,
+div.dtsr-creation div.dtsr-confirmation-text label.dtsr-name-label {
   width: auto;
   display: inline-block;
   text-align: right;
   padding-right: 15px;
 }
-div.dtsr-confirmation div.dtsr-confirmation-text input.dtsr-name-input, div.dtsr-creation div.dtsr-confirmation-text input.dtsr-name-input {
+div.dtsr-confirmation div.dtsr-confirmation-text input.dtsr-name-input,
+div.dtsr-creation div.dtsr-confirmation-text input.dtsr-name-input {
   width: 66.6%;
   display: inline-block;
 }
-div.dtsr-confirmation div.dtsr-confirmation-text input.dtsr-check-box, div.dtsr-creation div.dtsr-confirmation-text input.dtsr-check-box {
+div.dtsr-confirmation div.dtsr-confirmation-text input.dtsr-check-box,
+div.dtsr-creation div.dtsr-confirmation-text input.dtsr-check-box {
   margin-left: 33.3%;
   margin-right: 14px;
   display: inline-block;
 }
-div.dtsr-confirmation div.dtsr-modal-foot, div.dtsr-creation div.dtsr-modal-foot {
+div.dtsr-confirmation div.dtsr-modal-foot,
+div.dtsr-creation div.dtsr-modal-foot {
   text-align: right;
   padding-top: 10px;
 }
-div.dtsr-confirmation span.dtsr-modal-error, div.dtsr-creation span.dtsr-modal-error {
+div.dtsr-confirmation span.dtsr-modal-error,
+div.dtsr-creation span.dtsr-modal-error {
   color: red;
   font-size: 0.9em;
 }
@@ -98,26 +152,16 @@ div.dtsr-creation {
   top: 10%;
 }
 
-div.dtsr-form-row {
-  padding: 10px;
-}
-
 div.dtsr-check-row {
   padding-top: 0px;
 }
 
-div.dtsr-creation-text {
-  padding: 10px;
-}
-
 div.dtsr-popover-close {
   position: absolute;
   top: 10px;
   right: 10px;
   width: 22px;
   height: 22px;
-  border: 1px solid #eaeaea;
-  background-color: #f9f9f9;
   text-align: center;
   border-radius: 3px;
   cursor: pointer;
@@ -156,6 +200,28 @@ div.dt-button-collection span.dtsr-emptyStates {
   padding-top: 3px;
 }
 
+html.dark div.dtsr-confirmation,
+html.dark div.dtsr-creation,
+html[data-bs-theme=dark] div.dtsr-confirmation,
+html[data-bs-theme=dark] div.dtsr-creation {
+  background-color: #212529;
+  border: 1px solid rgba(255, 255, 255, 0.15);
+}
+html.dark div.dtsr-confirmation button,
+html.dark div.dtsr-creation button,
+html[data-bs-theme=dark] div.dtsr-confirmation button,
+html[data-bs-theme=dark] div.dtsr-creation button {
+  color: inherit;
+  border: 1px solid rgba(255, 255, 255, 0.175);
+  background-color: #2f3438;
+}
+html.dark div.dtsr-confirmation button:hover,
+html.dark div.dtsr-creation button:hover,
+html[data-bs-theme=dark] div.dtsr-confirmation button:hover,
+html[data-bs-theme=dark] div.dtsr-creation button:hover {
+  background-color: #404549;
+}
+
 div.dt-button-collection {
   z-index: 2002;
 }