plugin upload

native/wordpress/maple-calc/assets/css/frontend.css

@@ -0,0 +1,211 @@
+/* assets/css/frontend.css */
+.maple-calc {
+    margin: 0 auto 20px;
+    padding: 20px;
+    background: white;
+    border-radius: 8px;
+    font-family: Arial, sans-serif;
+    color: #222222;
+    border: 1px solid #e0e0e0;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    animation: fadeIn 0.5s ease-in-out;
+    max-width: 100%;
+    box-sizing: border-box;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.maple-calc h2 {
+    color: #222222;
+    text-align: center;
+    font-size: 24px;
+}
+
+.maple-calc h3 {
+    color: #222222;
+    font-size: 24px;
+}
+
+.maple-calc label {
+    color: #222222;
+}
+
+.maple-calc p {
+    color: #222222;
+}
+
+.form-group {
+    margin-bottom: 15px;
+}
+
+.form-group label {
+    display: block;
+    margin-bottom: 5px;
+    font-weight: bold;
+    color: #222222;
+    font-size: 24px;
+}
+
+.form-group input {
+    width: 100%;
+    padding: 12px;
+    border: 1px solid #ccc;
+    border-radius: 8px;
+    transition: all 0.3s ease;
+    color: #222222;
+    font-size: 24px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    box-sizing: border-box;
+}
+
+.form-group input:focus {
+    border-color: #02066f;
+    box-shadow: 0 0 8px rgba(2, 6, 111, 0.3);
+}
+
+.calculate-button {
+    background: #02066f;
+    color: white;
+    border: none;
+    padding: 12px 15px;
+    border-radius: 8px;
+    cursor: pointer;
+    font-size: 24px;
+    width: 100%;
+    transition: all 0.3s ease;
+}
+
+.calculate-button:hover {
+    background: #000040;
+    transform: translateY(-2px);
+}
+
+.results {
+    margin-top: 20px;
+    padding: 15px;
+    background: white;
+    border-radius: 8px;
+    border: 1px solid #ddd;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    color: #222222;
+}
+
+.results p {
+    margin: 10px 0;
+    color: #222222;
+    font-size: 24px;
+}
+
+/* Chart container styling */
+.chart-container {
+    margin: 10px auto;
+    width: 100%;
+    max-width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+/* Target Chart.js canvas and legend */
+.chart-container canvas {
+    max-width: 100% !important;
+    margin: 0 auto !important;
+}
+
+/* Override Chart.js legend styles */
+div.chart-container + ul {
+    display: flex !important;
+    flex-wrap: wrap !important;
+    justify-content: center !important;
+    margin: 10px auto 0 !important;
+    padding: 0 !important;
+    list-style: none !important;
+    width: 100% !important;
+}
+
+div.chart-container + ul li {
+    display: flex !important;
+    align-items: center !important;
+    margin: 5px 10px !important;
+    font-size: 18px !important;
+    color: #222222 !important;
+}
+
+/* Gutenberg Alignment Classes */
+.alignleft {
+    float: left;
+    max-width: 50%;
+    margin: 0 2em 1em 0;
+}
+
+.alignright {
+    float: right;
+    max-width: 50%;
+    margin: 0 0 1em 2em;
+}
+
+.aligncenter {
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.alignwide {
+    max-width: none;
+    width: auto;
+}
+
+.alignfull {
+    max-width: none;
+    width: 100vw;
+    margin-left: calc(-50vw + 50%);
+    margin-right: calc(-50vw + 50%);
+}
+
+/* Side-by-side layout for desktop */
+@media (min-width: 768px) {
+    .maple-calc {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 20px;
+    }
+
+    .maple-calc > h2 {
+        grid-column: 1 / -1;
+    }
+
+    .maple-calc form {
+        grid-column: 1;
+    }
+
+    .maple-calc .results {
+        grid-column: 2;
+    }
+
+    .wp-block[class*="align"] {
+        max-width: 100%;
+    }
+}
+
+/* Clear floats for alignment classes */
+.maple-calc:after {
+    content: "";
+    display: table;
+    clear: both;
+}
+
+/* Ensure blocks respect alignment classes */
+.wp-block-maple-mortgage-calculator,
+.wp-block-maple-datacenter-calculator,
+.wp-block-maple-roi-calculator {
+    max-width: 100%;
+    width: auto;
+}