#12 - form live preview

assets/css/components/RsvCalendarStyles.css

@@ -74,6 +74,21 @@
     overflow: hidden;
 }
 
+/* The component renders inside the host page (e.g. wp-admin in the form editor
+   preview), whose form/table stylesheets restyle bare table cells and reveal
+   the day radios that only carry the [hidden] attribute. Assert the calendar's
+   own appearance here, scoped tightly enough to win that cascade. */
+.rsv-calendar input[type="radio"] {
+    display: none;
+}
+
+.rsv-calendar table,
+.rsv-calendar th,
+.rsv-calendar td {
+    border: 0;
+    background: none;
+}
+
 /*.calendar button {
     border: none;
     background-color: transparent;
@@ -115,6 +130,7 @@
 
 .rsv-calendar td {
     -webkit-user-select:none;user-select:none;
+    padding: 0;
     z-index: -1;
 }
 

assets/css/components/RsvFormStyles.css

@@ -211,6 +211,7 @@
 .rsv-timetable-selector {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
+    background-color: white;
 }
 
 @media (max-width: 768px) {