/* * Kalejdo modern design system — partner backend (propietary_partner layout) ONLY. * * IMPORTANT: loaded LAST by app/views/layouts/propietary_partner.html.erb (partner * backend) and by app/views/layouts/login.html.erb (login page, where login.css loads * after it for the login-box specifics). It restyles the legacy rules in layout.css / * styles.css / nav.css / provider.css by winning the cascade through source order. * Do NOT edit the shared legacy stylesheets — they are used by the admin/provider/ * order-assistant sections which must keep their current look. */ /* ---------------------------------------------------------------- 1. Tokens */ :root { --k-green: #14713F; --k-green-dark: #004D20; --k-green-deep: #126432; --k-sage: #94B7A3; --k-gray: #8C8B8B; --k-gray-light: #DEDEDE; --k-text: #000; --k-text-2nd: #606060; --k-bg: #F7F8F7; --k-surface: #FFF; --k-tint: #F3F6F4; /* soft green-gray row tint */ --k-tint-hover: #EEF4F0; --k-tint-selected: #E7F0EA; --k-red: #B3261E; --k-red-bg: #FDECEA; --k-amber: #8A5A00; --k-amber-bg: #FBF3E0; --k-radius: 6px; --k-radius-sm: 4px; --k-shadow: 0 1px 3px rgba(0, 0, 0, .08); --k-shadow-lift: 0 2px 8px rgba(0, 0, 0, .10); --k-sp-1: 4px; --k-sp-2: 8px; --k-sp-3: 12px; --k-sp-4: 16px; --k-sp-5: 24px; --k-sp-6: 32px; --k-font: 'PT Sans', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; } /* ------------------------------------------------------ 2. Base / typography */ /* Scoped box-sizing: jQuery UI widgets (datepicker, dialog) are appended to and must keep content-box, so no universal selector here. */ #header, #header *, #leftside *, #rightside * { box-sizing: border-box; } body { font-family: var(--k-font); font-size: 14px; color: var(--k-text); background: var(--k-bg); } h1, h2, h3, h4 { color: var(--k-green-dark); font-weight: 700; } #rightside h1 { font-size: 22px; margin: var(--k-sp-3) 0; } #rightside h2 { font-size: 18px; margin: var(--k-sp-3) 0; } #rightside h3 { font-size: 15px; } .provider_content { font-size: 14px; } .provider_content input, .provider_content textarea { font-size: 14px; } #rightside { margin: var(--k-sp-5); min-width: 1000px; } #rightside a { color: var(--k-green-deep); } #rightside a:hover { color: var(--k-green-dark); } .muted { color: var(--k-text-2nd); } /* ---------------------------------------------------------------- 3. Header */ #header { height: 64px; background: var(--k-surface); border-bottom: 3px solid var(--k-green); display: flex; align-items: center; padding: 0 var(--k-sp-5); } .logo { float: none; padding: 0; } #header img.logo { height: 40px; width: auto; display: block; } /* ------------------------------------------------------------------- 4. Nav */ /* Reskins the nav.css caramel widgets. Dropdown show/hide mechanics stay in nav.css — only colors/metrics are overridden here. */ #leftside { height: auto; padding: 0; border-right: none; background: var(--k-green); } .smallpanel { height: auto; margin-top: 0; } .smallpanel .pcont-1, .smallpanel .pcont-2, .smallpanel .pcont-3 { background-image: none; height: auto; padding: 0; } /* Flex context: the menu partial's inline float:right user block becomes a flex item (floats are ignored on flex children) — no markup edit needed. */ .smallpanel .pcont-3 { display: flex; align-items: center; justify-content: space-between; height: 40px; padding: 0 var(--k-sp-4); } #nav { height: auto; float: none; } #nav li { height: 40px; line-height: 39px; } #nav a { font-family: var(--k-font); font-size: 14px; color: #FFF; padding: 0 var(--k-sp-4); } /* Mirror nav.css's compound hover selectors and neutralize its 1px margin/border metric hacks. */ #nav a:hover, #nav li:hover a, #nav li.iehover a { color: #FFF; background-color: var(--k-green-dark); border: none; margin: 0; padding: 0 var(--k-sp-4); } #nav li.active a, #nav li.active a:hover { color: #FFF; } #nav ul { width: 220px; top: 40px; padding-top: 0; } #nav ul li { width: 220px; height: auto; line-height: 36px; } #nav li:hover li a, #nav li.iehover li a { background-color: var(--k-surface); border: 1px solid var(--k-gray-light); border-top: none; color: var(--k-text); font-size: 13px; line-height: 36px; padding: 0 var(--k-sp-2); text-indent: 5px; } #nav li:hover li a:hover, #nav li:hover li:hover a, #nav li.iehover li a:hover, #nav li.iehover li.iehover a { background-color: var(--k-tint-selected); color: var(--k-green-dark); text-shadow: none; } #adminbar { height: auto; line-height: inherit; font-family: var(--k-font); font-size: 13px; color: rgba(255, 255, 255, .85); } #adminbar span { color: #FFF; } #adminbar a { color: #FFF; } #adminbar a:hover { color: var(--k-gray-light); } /* --------------------------------------------------------------- 5. Buttons */ /* Replaces the sliding-doors GIF buttons; the markup keeps working. ID-scoped duplicates beat the #rightside link color rule. */ a.button, .sb { background: var(--k-green); border: none; border-radius: var(--k-radius-sm); color: #FFF; display: inline-block; float: none; height: auto; font: 700 13px/1 var(--k-font); margin-right: var(--k-sp-2); padding: 0; text-decoration: none; cursor: pointer; box-shadow: var(--k-shadow); } a.button span { background: none; display: inline-block; line-height: 1; padding: 9px 14px; } a.button:hover, #rightside a.button:hover { background-color: var(--k-green-deep); color: #FFF; } #rightside a.button { color: #FFF; } /* Re-pin :active — provider.css shifts background-position and padding 1px. */ a.button:active { background: var(--k-green-dark); background-position: 0 0; color: #FFF; outline: none; } a.button:active span { background: none; background-position: 0 0; padding: 9px 14px; } /* Secondary (outline) variant, e.g. back links. */ a.button.button-secondary, #rightside a.button.button-secondary { background: var(--k-surface); border: 1px solid var(--k-green); color: var(--k-green); box-shadow: none; } a.button.button-secondary:hover, #rightside a.button.button-secondary:hover { background: var(--k-tint-selected); color: var(--k-green-dark); } a.button.button-secondary span { padding: 8px 13px; } input[type="submit"], input[type="button"], button { font-family: var(--k-font); font-size: 13px; font-weight: 700; color: #FFF; background: var(--k-green); border: none; border-radius: var(--k-radius-sm); padding: 8px 14px; cursor: pointer; } input[type="submit"]:hover, input[type="button"]:hover, button:hover { background: var(--k-green-deep); } /* JS toggles disabled on several action buttons — keep the state visible. */ input[type="submit"]:disabled, input[type="button"]:disabled, button:disabled { background: var(--k-gray); cursor: default; } /* provider.css floats every submit right (fieldset.channel_packages a, input[type='submit'] rule) — neutralize; views re-add .u-right where needed. */ input[type="submit"] { float: none; margin: 0 var(--k-sp-2) 0 0; } fieldset.channel_packages a { float: right; } /* ---------------------------------------------------------------- 6. Tables */ table.listing { width: 100%; margin-top: var(--k-sp-3); background: var(--k-surface); border: 1px solid var(--k-gray-light); border-radius: var(--k-radius); border-collapse: separate !important; border-spacing: 0; overflow: hidden; box-shadow: var(--k-shadow); font-size: 13px; } table.listing th { background: var(--k-green-dark); background-color: var(--k-green-dark); color: #FFF; font-weight: 700; padding: 9px 12px; border: none; text-align: left; } table.listing td { padding: 8px 12px; border: none; border-top: 1px solid var(--k-gray-light); } table.listing tr:first-child td { border-top: none; } table.listing tr.odd { background-color: var(--k-tint); } table.listing tr:hover td { background-color: var(--k-tint-hover); } table.listing tr.selected td { background-color: var(--k-tint-selected); box-shadow: inset 3px 0 0 var(--k-green); } table.listing td a { font-weight: 700; } /* ------------------------------------------------- 7. Label / value pairs */ /* Modernized emphasis: muted normal-weight label, bold value. Float mechanics kept — these appear as loose sibling pairs in ~15 files incl. users views. */ div.left_column { font-weight: 400; color: var(--k-text-2nd); float: left; clear: left; width: 200px; text-align: left; margin-right: var(--k-sp-4); padding-top: var(--k-sp-2); line-height: 20px; } div.right_column { float: left; padding-top: var(--k-sp-2); line-height: 20px; font-weight: 700; color: var(--k-text); } /* Opt-in grid version, applied per-container during the view cleanup. */ .kv-grid { display: grid; grid-template-columns: 200px 1fr; column-gap: var(--k-sp-4); row-gap: var(--k-sp-1); } .kv-grid > div.left_column, .kv-grid > div.right_column { float: none; clear: none; width: auto; margin: 0; padding-top: 0; } .kv-grid > *:not(.left_column):not(.right_column) { grid-column: 1 / -1; } /* ----------------------------------------------------------------- 8. Cards */ div.customer_information_container { float: left; clear: left; width: 100%; margin: var(--k-sp-3) 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--k-sp-5); align-items: flex-start; } div.customer_information { float: none; background: var(--k-surface); border: 1px solid var(--k-gray-light); border-radius: var(--k-radius); box-shadow: var(--k-shadow); padding: var(--k-sp-4) var(--k-sp-5); font-size: 14px; } div.left_container { width: auto; flex: 1 1 380px; min-width: 350px; } div.right_container { width: auto; flex: 1 1 520px; margin-left: 0; } .customer_information_title { color: var(--k-green-dark); font-size: 15px; } .card { background: var(--k-surface); border: 1px solid var(--k-gray-light); border-radius: var(--k-radius); box-shadow: var(--k-shadow); padding: var(--k-sp-4) var(--k-sp-5); } .subscription_data_left_col { width: auto; } /* ----------------------------------------------------------------- 9. Forms */ fieldset { border: 1px solid var(--k-gray-light); border-radius: var(--k-radius); background: var(--k-surface); padding: var(--k-sp-4) var(--k-sp-5); margin-bottom: var(--k-sp-4); } div.provider_content legend, legend { font-weight: 700; color: var(--k-green-dark); padding: 0 var(--k-sp-2); } div.provider_content label { font-style: normal; color: var(--k-text-2nd); } input[type="text"], input[type="password"], textarea, select { font-family: var(--k-font); font-size: 14px; color: var(--k-text); padding: 7px 10px; border: 1px solid var(--k-gray-light); border-radius: var(--k-radius-sm); background: var(--k-surface); } input[type="text"]:focus, input[type="password"]:focus, textarea:focus, select:focus { border-color: var(--k-green); outline: 2px solid rgba(20, 113, 63, .15); } /* .error is added by JS form validation (scheduled task form). */ input.error, select.error, textarea.error { border-color: var(--k-red); } .errorExplanation { background-color: var(--k-red-bg); border-left: 4px solid var(--k-red); border-radius: 0; box-shadow: none; padding: var(--k-sp-3); } div.fieldWithErrors label { color: var(--k-red); } .inline-edit-field { width: 100%; padding: 4px 7px; border: 1px solid var(--k-gray-light); border-radius: var(--k-radius-sm); } /* ------------------------------------------------------- 10. Flash messages */ /* Override at both specificities: styles.css (h3.x) and provider.css (.provider_content h3.x). Existing icons are kept. */ h3.success_message, .provider_content h3.success_message { color: var(--k-green-dark); background: var(--k-tint-selected) url(/images/admin/icons/icon_success.png) no-repeat 12px 50%; border: none; border-left: 4px solid var(--k-green); border-radius: 0; font-size: 14px; padding: var(--k-sp-3) var(--k-sp-3) var(--k-sp-3) 40px; margin-bottom: var(--k-sp-3); } h3.warning_message, .provider_content h3.warning_message { color: var(--k-amber); background: var(--k-amber-bg) url(/images/admin/icons/icon_warning.png) no-repeat 12px 50%; border: none; border-left: 4px solid var(--k-amber); border-radius: 0; font-size: 14px; padding: var(--k-sp-3) var(--k-sp-3) var(--k-sp-3) 40px; margin-bottom: var(--k-sp-3); } h3.error_message, .provider_content h3.error_message { color: var(--k-red); background: var(--k-red-bg) url(/images/admin/icons/icon_error.png) no-repeat 12px 50%; border: none; border-left: 4px solid var(--k-red); border-radius: 0; font-size: 14px; padding: var(--k-sp-3) var(--k-sp-3) var(--k-sp-3) 40px; margin-bottom: var(--k-sp-3); } .provider_content p.notice_message { color: var(--k-red); font-size: 13px; } .security_error { color: var(--k-red); } /* --------------------------------------------------------- 11. Status badges */ span.ok, span.not_ok, span.failure, span.waiting, span.running, span.created { display: inline-block; width: auto; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; } span.ok { color: var(--k-green-dark); background: var(--k-tint-selected); } span.not_ok, span.failure { color: var(--k-red); background: var(--k-red-bg); } span.waiting { color: var(--k-amber); background: var(--k-amber-bg); } span.running, span.created { color: #0C447C; background: #E6F1FB; } /* ----------------------------------------------------- 12. Diagnostics cards */ /* Lifted from the embedded