/* Candle Form Layout CSS - v1.3.0 (Minimal + Bootstrap Base) */ #candle-form-plugin-wrapper * { box-sizing: border-box; } #candle-form-plugin-wrapper body { font-family: sans-serif; font-size: 14px; line-height: 1.42857143; color: #333; background-color: #fff; } #candle-form-plugin-wrapper a { color: #337ab7; text-decoration: none; } #candle-form-plugin-wrapper a:hover { color: #23527c; text-decoration: underline; } /* Grundlegendes Verstecken */ #candle-form-plugin-wrapper .cf-hidden { display: none !important; } /* --- Basis Bootstrap Grid (Extrahiert & Angepasst) --- */ #candle-form-plugin-wrapper .row { margin-left: -15px; margin-right: -15px; } #candle-form-plugin-wrapper .row:before, #candle-form-plugin-wrapper .row:after { content: " "; display: table; } #candle-form-plugin-wrapper .row:after { clear: both; } #candle-form-plugin-wrapper [class*="col-"] { position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px; float: left; } #candle-form-plugin-wrapper [class*="col-"] { width: 100%; } /* Mobile First */ @media (min-width: 768px) { #candle-form-plugin-wrapper .col-sm-1 { width: 8.33333333%; } #candle-form-plugin-wrapper .col-sm-2 { width: 16.66666667%; } #candle-form-plugin-wrapper .col-sm-3 { width: 25%; } #candle-form-plugin-wrapper .col-sm-4 { width: 33.33333333%; } #candle-form-plugin-wrapper .col-sm-5 { width: 41.66666667%; } #candle-form-plugin-wrapper .col-sm-6 { width: 50%; } #candle-form-plugin-wrapper .col-sm-7 { width: 58.33333333%; } #candle-form-plugin-wrapper .col-sm-8 { width: 66.66666667%; } #candle-form-plugin-wrapper .col-sm-9 { width: 75%; } #candle-form-plugin-wrapper .col-sm-10 { width: 83.33333333%; } #candle-form-plugin-wrapper .col-sm-11 { width: 91.66666667%; } #candle-form-plugin-wrapper .col-sm-12 { width: 100%; } } @media (min-width: 992px) { #candle-form-plugin-wrapper .col-md-1 { width: 8.33333333%; } #candle-form-plugin-wrapper .col-md-2 { width: 16.66666667%; } #candle-form-plugin-wrapper .col-md-3 { width: 25%; } #candle-form-plugin-wrapper .col-md-4 { width: 33.33333333%; } #candle-form-plugin-wrapper .col-md-5 { width: 41.66666667%; } #candle-form-plugin-wrapper .col-md-6 { width: 50%; } #candle-form-plugin-wrapper .col-md-7 { width: 58.33333333%; } #candle-form-plugin-wrapper .col-md-8 { width: 66.66666667%; } #candle-form-plugin-wrapper .col-md-9 { width: 75%; } #candle-form-plugin-wrapper .col-md-10 { width: 83.33333333%; } #candle-form-plugin-wrapper .col-md-11 { width: 91.66666667%; } #candle-form-plugin-wrapper .col-md-12 { width: 100%; } } @media (min-width: 1200px) { #candle-form-plugin-wrapper .col-lg-1 { width: 8.33333333%; } #candle-form-plugin-wrapper .col-lg-2 { width: 16.66666667%; } #candle-form-plugin-wrapper .col-lg-3 { width: 25%; } #candle-form-plugin-wrapper .col-lg-4 { width: 33.33333333%; } #candle-form-plugin-wrapper .col-lg-5 { width: 41.66666667%; } #candle-form-plugin-wrapper .col-lg-6 { width: 50%; } #candle-form-plugin-wrapper .col-lg-7 { width: 58.33333333%; } #candle-form-plugin-wrapper .col-lg-8 { width: 66.66666667%; } #candle-form-plugin-wrapper .col-lg-9 { width: 75%; } #candle-form-plugin-wrapper .col-lg-10 { width: 83.33333333%; } #candle-form-plugin-wrapper .col-lg-11 { width: 91.66666667%; } #candle-form-plugin-wrapper .col-lg-12 { width: 100%; } } #candle-form-plugin-wrapper .col-xs-1 { width: 8.33333333%; } #candle-form-plugin-wrapper .col-xs-2 { width: 16.66666667%; } #candle-form-plugin-wrapper .col-xs-3 { width: 25%; } #candle-form-plugin-wrapper .col-xs-4 { width: 33.33333333%; } #candle-form-plugin-wrapper .col-xs-5 { width: 41.66666667%; } #candle-form-plugin-wrapper .col-xs-6 { width: 50%; } #candle-form-plugin-wrapper .col-xs-7 { width: 58.33333333%; } #candle-form-plugin-wrapper .col-xs-8 { width: 66.66666667%; } #candle-form-plugin-wrapper .col-xs-9 { width: 75%; } #candle-form-plugin-wrapper .col-xs-10 { width: 83.33333333%; } #candle-form-plugin-wrapper .col-xs-11 { width: 91.66666667%; } #candle-form-plugin-wrapper .col-xs-12 { width: 100%; } /* --- Basis Bootstrap Panel --- */ #candle-form-plugin-wrapper .panel { margin-bottom: 20px; background-color: #fff; border: 1px solid #ddd; border-radius: 4px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); } #candle-form-plugin-wrapper .panel-body { padding: 15px; } #candle-form-plugin-wrapper .panel-body:before, #candle-form-plugin-wrapper .panel-body:after { content: " "; display: table; } #candle-form-plugin-wrapper .panel-body:after { clear: both; } #candle-form-plugin-wrapper .panel-heading { padding: 10px 15px; border-bottom: 1px solid #ddd; border-top-left-radius: 3px; border-top-right-radius: 3px; background-color: #f5f5f5; color: #333; } #candle-form-plugin-wrapper .panel-heading > h3, #candle-form-plugin-wrapper .panel-heading > h4 { margin-top: 0; margin-bottom: 0; font-size: 16px; color: inherit; } #candle-form-plugin-wrapper .panel-title { font-size: 16px; } #candle-form-plugin-wrapper .panel-default { border-color: #ddd; } #candle-form-plugin-wrapper .panel-default > .panel-heading { color: #333; background-color: #f5f5f5; border-color: #ddd; } /* --- Basis Bootstrap Formulare --- */ #candle-form-plugin-wrapper .form-group { margin-bottom: 15px; } #candle-form-plugin-wrapper .radio, #candle-form-plugin-wrapper .checkbox { position: relative; display: block; margin-top: 10px; margin-bottom: 10px; } #candle-form-plugin-wrapper .radio label, #candle-form-plugin-wrapper .checkbox label { min-height: 20px; padding-left: 20px; margin-bottom: 0; font-weight: normal; cursor: pointer; display: inline-block; } #candle-form-plugin-wrapper .radio input[type="radio"], #candle-form-plugin-wrapper .checkbox input[type="checkbox"] { position: absolute; margin-left: -20px; margin-top: 4px \9; margin-top: 0; line-height: normal; } #candle-form-plugin-wrapper input[type="radio"], #candle-form-plugin-wrapper input[type="checkbox"] { margin: 4px 0 0; } #candle-form-plugin-wrapper .form-control { display: block; width: 100%; height: 34px; padding: 6px 12px; font-size: 14px; line-height: 1.42857143; color: #555; background-color: #fff; background-image: none; border: 1px solid #ccc; border-radius: 4px; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; } #candle-form-plugin-wrapper .form-control:focus { border-color: #66afe9; outline: 0; box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6); } #candle-form-plugin-wrapper select.form-control { height: 34px; line-height: 34px; } #candle-form-plugin-wrapper select[multiple].form-control { height: auto; } #candle-form-plugin-wrapper textarea.form-control { height: auto; } #candle-form-plugin-wrapper label { display: inline-block; max-width: 100%; margin-bottom: 5px; font-weight: bold; } /* Label alignment for horizontal forms (using simple row/col structure) */ @media (min-width: 768px) { #candle-form-plugin-wrapper .form-group .col-sm-1, /* ... etc ... */ #candle-form-plugin-wrapper .form-group .col-sm-12 { padding-top: 7px; /* Align labels vertically with controls */ } } /* --- Basis Bootstrap Button --- */ #candle-form-plugin-wrapper .btn { display: inline-block; margin-bottom: 0; font-weight: normal; text-align: center; vertical-align: middle; cursor: pointer; background-image: none; border: 1px solid transparent; white-space: nowrap; padding: 6px 12px; font-size: 14px; line-height: 1.42857143; border-radius: 4px; user-select: none; } #candle-form-plugin-wrapper .btn:focus, #candle-form-plugin-wrapper .btn:active:focus { outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } #candle-form-plugin-wrapper .btn:hover, #candle-form-plugin-wrapper .btn:focus { color: #333; text-decoration: none; } #candle-form-plugin-wrapper .btn:active, #candle-form-plugin-wrapper .btn.active { outline: 0; background-image: none; box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); } #candle-form-plugin-wrapper .btn-success { color: #fff; background-color: #5cb85c; border-color: #4cae4c; } #candle-form-plugin-wrapper .btn-success:hover, #candle-form-plugin-wrapper .btn-success:focus, #candle-form-plugin-wrapper .btn-success:active, #candle-form-plugin-wrapper .btn-success.active { color: #fff; background-color: #449d44; border-color: #398439; } #candle-form-plugin-wrapper .btn-lg { padding: 10px 16px; font-size: 18px; line-height: 1.3333333; border-radius: 6px; } #candle-form-plugin-wrapper .btn:disabled { cursor: not-allowed; opacity: 0.65; } /* --- Basis Bootstrap Alert --- */ #candle-form-plugin-wrapper .alert { padding: 15px; margin-bottom: 20px; border: 1px solid transparent; border-radius: 4px; } #candle-form-plugin-wrapper .alert-info { color: #31708f; background-color: #d9edf7; border-color: #bce8f1; } #candle-form-plugin-wrapper .alert-danger { color: #a94442; background-color: #f2dede; border-color: #ebccd1; } #candle-form-plugin-wrapper .alert-success { color: #3c763d; background-color: #dff0d8; border-color: #d6e9c6; } #candle-form-plugin-wrapper .alert ul { margin-top: 5px; margin-bottom: 0; padding-left: 20px; } #candle-form-plugin-wrapper .alert li { list-style: disc; } /* --- Basis Bootstrap List Group --- */ #candle-form-plugin-wrapper .list-group { padding-left: 0; margin-bottom: 20px; } #candle-form-plugin-wrapper .list-group-item { position: relative; display: block; padding: 10px 15px; margin-bottom: -1px; background-color: #fff; border: 1px solid #ddd; } #candle-form-plugin-wrapper .list-group-item:first-child { border-top-left-radius: 4px; border-top-right-radius: 4px; } #candle-form-plugin-wrapper .list-group-item:last-child { margin-bottom: 0; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } /* --- Plugin-spezifische Stile (Beispiele aus deiner app.scss) --- */ #candle-form-plugin-wrapper .cf-module { padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px dashed #eee; } #candle-form-plugin-wrapper .cf-module:last-child { border-bottom: none; } #candle-form-plugin-wrapper .cf-inner-panel { margin-top: 10px; margin-bottom: 10px; border: 1px solid #eee !important; box-shadow: none !important; border-radius: 3px; padding: 10px; background: #fdfdfd; } #candle-form-plugin-wrapper .well.cf-candle-well { background-color: #f9f9f9; border: 1px solid #e3e3e3; padding: 15px; margin-top: 10px; margin-bottom: 10px; border-radius: 3px; } #candle-form-plugin-wrapper .cf-praylist-wrapper .form-control { border:0; box-shadow: none; border-bottom: 1px dashed #00acee; padding: 5px; height: auto; margin: 0 0 5px 0; font-size: 15px; font-weight:700; color: #006e96; background: transparent; } #candle-form-plugin-wrapper .cf-praylist-wrapper h4 { text-align: center; font-weight: bold; margin-bottom: 10px;} #candle-form-plugin-wrapper #cf-order-summary .sidebar-desc { font-size: 14px; } #candle-form-plugin-wrapper #cf-order-summary .sidebar-amount { font-weight: bold; font-size: 14px; text-align: right; display: block; } #candle-form-plugin-wrapper .donation-result { margin-top: 10px; padding-top: 10px; border-top: 1px solid #ddd; } #candle-form-plugin-wrapper .donation-result strong { font-size: 16px; } #candle-form-plugin-wrapper #cf-submit-button { width: 100%; padding: 15px !important; font-size: 20px !important; } #candle-form-plugin-wrapper .payment-methods .radio label { font-weight: normal; display: block; width: 100%; } #candle-form-plugin-wrapper .payment-methods .radio input[type="radio"] { margin-right: 8px; } #candle-form-plugin-wrapper .cf-payment-details { margin-left: 25px; margin-top: 10px; } #candle-form-plugin-wrapper .cf-required-indicator { color: red; margin-left: 3px; } #candle-form-plugin-wrapper input:required, #candle-form-plugin-wrapper select:required, #candle-form-plugin-wrapper textarea:required { } #candle-form-plugin-wrapper input[type="text"].cf-input-name { margin-bottom: 5px; } #candle-form-plugin-wrapper .cf-sepa-min-hint { color: #777; font-size: 0.9em; display: block; margin-left: 25px; margin-top: 5px;} #candle-form-plugin-wrapper .cf-iban-error { color: red; font-size: 0.9em; display: block; } #candle-form-plugin-wrapper #cf-loading-indicator { display: inline-block; margin-left: 10px; vertical-align: middle;} #candle-form-plugin-wrapper #cf-loading-indicator .fa-spinner { } #candle-form-plugin-wrapper .cf-validation-error { border-color: red !important; } #candle-form-plugin-wrapper label.cf-validation-error { color: red !important; } /* --- Sticky Sidebar --- */ @media (min-width: 992px) { #candle-form-plugin-wrapper .candleform-main { padding-right: 30px; } #candle-form-plugin-wrapper .candleform-sidebar { position: -webkit-sticky; position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow-y: auto; } } /* --- Honeypot --- */ #candle-form-plugin-wrapper .cf-hp-field { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } /* Bild unter dem Titel */ .cf-main-image { display: block; /* Verhindert extra Leerraum darunter */ max-width: 100%; /* Stellt sicher, dass es nicht überläuft */ height: auto; /* Behält Proportionen bei */ margin-left: auto; /* Optional: Zentrieren, falls Container breiter */ margin-right: auto; /* Optional: Zentrieren */ } /* Icons für Zahlungsmethoden */ .cf-payment-icon { height: 80px; /* Höhe anpassen nach Bedarf */ width: auto; float: right; /* Nach rechts verschieben */ margin-left: 8px; /* Kleiner Abstand zum Text */ vertical-align: middle; /* Vertikal versuchen zu zentrieren */ position: relative; /* Ermöglicht kleine Anpassungen */ top: -1px; /* Kleine Korrektur nach oben/unten, ggf. anpassen */ } /* Sicherstellen, dass Label genug Platz hat */ .payment-methods .list-group-item .radio label { display: block; /* Stellt sicher, dass das Label die volle Breite einnimmt */ overflow: hidden; /* Verhindert, dass der Float das Layout stört */ } /* --- Hintergrundbild zuerst deaktivert-nicht schoen--- #candle-form-plugin-wrapper { background-image: url('https://www.ukrainian-church.de/wp-content/plugins/candle-form/images/paper-back.jpg.pagespeed.ce.TzqRhgdmGQ.jpg'); /* Relativer Pfad von CSS zu Images */ background-repeat: repeat; /* Kacheln, falls das Bild klein ist */ /* Alternative Optionen: background-repeat: no-repeat; background-size: cover; // Dehnt das Bild, um den Bereich zu füllen background-position: center center; */ padding: 10px; /* Innenabstand, damit der Inhalt nicht direkt am Rand klebt */ border: 1px solid #ddd; /* Optional: Ein leichter Rahmen um den Bereich */ border-radius: 4px; /* Optional: Abgerundete Ecken */ }*/