/** * KI Routendatenbank – Custom Frontend Styles * * Loaded only on pages selected in the plugin settings. * Dark-mode styles are activated when carries the class .kirdb-dark. * Brand colour: #de951b (KI orange) */ /* ============================================================================= CSS Custom Properties ============================================================================= */ :root { --kirdb-orange: #de951b; --kirdb-orange-dim: rgba(222, 149, 27, 0.15); --kirdb-orange-hover: #f0a830; --kirdb-radius: 10px; --kirdb-radius-sm: 6px; --kirdb-transition: 0.18s ease; } /* ============================================================================= Full-width table ============================================================================= */ .kirdb-table-wrap { width: 100%; position: relative; } table.dataTable { width: 100% !important; } /* ============================================================================= Settings-tab card ============================================================================= */ .ki-setting-tab { color: #000; padding: 2em; margin: 1em; border-radius: var(--kirdb-radius); border: 1px solid rgba(0, 0, 0, 0.12); background-color: #fff; } .ki-setting-tab span span { display: block; } /* ============================================================================= Animated blob / pulsing status dot ============================================================================= */ .blob { background: black; border-radius: 50%; box-shadow: 0 0 0 0 rgba(0, 0, 0, 1); margin: 10px; height: 2em; width: 2em; transform: scale(1); animation: kirdb-pulse-black 2s infinite; position: absolute; top: 0.5em; left: 0.5em; } .blob.green { background: rgba(0, 255, 0, 1); box-shadow: 0 0 0 0 rgba(0, 255, 0, 1); animation: kirdb-pulse-green 2s infinite; } @keyframes kirdb-pulse-green { 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 255, 0, 0.7); } 70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(0, 255, 0, 0); } 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 255, 0, 0); } } .blob.purple { background: rgba(255, 0, 249, 1); box-shadow: 0 0 0 0 rgba(255, 0, 249, 1); animation: kirdb-pulse-purple 2s infinite; } @keyframes kirdb-pulse-purple { 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 0, 249, 0.7); } 70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(255, 0, 249, 0); } 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 0, 249, 0); } } /* ============================================================================= DataTables Responsive: dtr-control expand / collapse button ============================================================================= */ table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before, table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before { top: 50%; left: 5px; height: 1em; width: 1em; margin-top: -9px; display: block; position: absolute; color: var(--kirdb-orange); border: 0.15em solid var(--kirdb-orange); border-radius: 1em; box-shadow: none; box-sizing: content-box; text-align: center; text-indent: 0 !important; font-family: "barlow", Courier, monospace; line-height: 1em; content: "+"; background-color: #fff; } table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control:before, table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th.dtr-control:before { content: "-"; background-color: var(--kirdb-orange); color: #fff; } /* ============================================================================= DARK MODE Applied when is set (controlled via plugin settings). ============================================================================= */ /* --- Wrapper & table base -------------------------------------------------- */ body.kirdb-dark .kirdb-table-wrap, body.kirdb-dark .dataTables_wrapper { background-color: #141414; color: #d4d4d4; padding: 1.75rem; border-radius: var(--kirdb-radius); border: 1px solid rgba(255, 255, 255, 0.06); } body.kirdb-dark table.dataTable { background-color: transparent; color: #d4d4d4; border-collapse: separate; border-spacing: 0; border: none; } /* --- Controls row (top: length + search) ---------------------------------- */ body.kirdb-dark .dataTables_wrapper .dataTables_length, body.kirdb-dark .dataTables_wrapper .dataTables_filter { margin-bottom: 1.25rem; } body.kirdb-dark .dataTables_wrapper .dataTables_filter label, body.kirdb-dark .dataTables_wrapper .dataTables_length label { color: #888; font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; display: flex; align-items: center; gap: 0.5rem; } body.kirdb-dark .dataTables_wrapper .dataTables_filter input, body.kirdb-dark .dataTables_wrapper .dataTables_length select { background-color: #1e1e1e; color: #e0e0e0; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 20px; padding: 0.45rem 0.9rem; font-size: 0.875rem; outline: none; transition: border-color var(--kirdb-transition), box-shadow var(--kirdb-transition); -webkit-appearance: none; appearance: none; } body.kirdb-dark .dataTables_wrapper .dataTables_filter input:focus, body.kirdb-dark .dataTables_wrapper .dataTables_length select:focus { border-color: var(--kirdb-orange); box-shadow: 0 0 0 3px var(--kirdb-orange-dim); } body.kirdb-dark .dataTables_wrapper .dataTables_length select { padding-right: 1.8rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23de951b' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.6rem center; } /* --- Header ---------------------------------------------------------------- */ body.kirdb-dark table.dataTable thead th, body.kirdb-dark table.dataTable thead td { background-color: #1a1a1a; color: #999; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; border-bottom: 1px solid rgba(255, 255, 255, 0.08); padding: 0.9rem 1rem; white-space: nowrap; } body.kirdb-dark table.dataTable thead th:first-child { border-radius: var(--kirdb-radius-sm) 0 0 0; } body.kirdb-dark table.dataTable thead th:last-child { border-radius: 0 var(--kirdb-radius-sm) 0 0; } /* --- Sorting icons -------------------------------------------------------- */ body.kirdb-dark table.dataTable thead .sorting:before, body.kirdb-dark table.dataTable thead .sorting:after, body.kirdb-dark table.dataTable thead .sorting_asc:before, body.kirdb-dark table.dataTable thead .sorting_asc:after, body.kirdb-dark table.dataTable thead .sorting_desc:before, body.kirdb-dark table.dataTable thead .sorting_desc:after { color: var(--kirdb-orange); opacity: 0.4; } body.kirdb-dark table.dataTable thead .sorting_asc:before, body.kirdb-dark table.dataTable thead .sorting_desc:after { opacity: 1; } /* --- Footer (filter row) -------------------------------------------------- */ body.kirdb-dark table.dataTable tfoot th, body.kirdb-dark table.dataTable tfoot td { background-color: #1a1a1a; color: #888; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 0.75rem 1rem; } body.kirdb-dark table.dataTable tfoot select { background-color: #1e1e1e; color: #d4d4d4; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 20px; padding: 0.35rem 1.6rem 0.35rem 0.75rem; font-size: 0.8rem; outline: none; transition: border-color var(--kirdb-transition), box-shadow var(--kirdb-transition); -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23de951b' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.5rem center; cursor: pointer; } body.kirdb-dark table.dataTable tfoot select:focus { border-color: var(--kirdb-orange); box-shadow: 0 0 0 3px var(--kirdb-orange-dim); } /* --- Body rows ------------------------------------------------------------ */ body.kirdb-dark table.dataTable tbody tr { background-color: transparent; transition: background-color var(--kirdb-transition); } body.kirdb-dark table.dataTable tbody tr.odd { background-color: rgba(255, 255, 255, 0.025); } body.kirdb-dark table.dataTable tbody tr:hover, body.kirdb-dark table.dataTable tbody tr.odd:hover { background-color: rgba(222, 149, 27, 0.07) !important; } body.kirdb-dark table.dataTable tbody td { border-bottom: 1px solid rgba(255, 255, 255, 0.05); color: #d4d4d4; padding: 0.85rem 1rem; font-size: 0.9rem; vertical-align: middle; } body.kirdb-dark table.dataTable tbody tr:last-child td { border-bottom: none; } /* --- DataTables info text ------------------------------------------------- */ body.kirdb-dark .dataTables_wrapper .dataTables_info { color: #666; font-size: 0.78rem; padding-top: 1rem; } /* --- Pagination ----------------------------------------------------------- */ body.kirdb-dark .dataTables_wrapper .dataTables_paginate { padding-top: 0.75rem; } body.kirdb-dark .dataTables_wrapper .dataTables_paginate .paginate_button { color: #888 !important; background: transparent; border: 1px solid transparent; border-radius: 20px !important; padding: 0.4rem 0.85rem !important; margin: 0 1px; font-size: 0.82rem; font-weight: 500; transition: background var(--kirdb-transition), color var(--kirdb-transition), border-color var(--kirdb-transition); } body.kirdb-dark .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: rgba(255, 255, 255, 0.07) !important; color: #fff !important; border-color: rgba(255, 255, 255, 0.12) !important; } body.kirdb-dark .dataTables_wrapper .dataTables_paginate .paginate_button.current, body.kirdb-dark .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background: var(--kirdb-orange) !important; color: #fff !important; border-color: var(--kirdb-orange) !important; font-weight: 700; box-shadow: 0 2px 10px rgba(222, 149, 27, 0.35); } body.kirdb-dark .dataTables_wrapper .dataTables_paginate .paginate_button.disabled, body.kirdb-dark .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover { color: #444 !important; background: transparent !important; border-color: transparent !important; cursor: default; } body.kirdb-dark .dataTables_wrapper .dataTables_paginate .ellipsis { color: #555; } /* --- dtr-control button overrides for dark mode --------------------------- */ body.kirdb-dark table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before, body.kirdb-dark table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before { background-color: #141414; color: var(--kirdb-orange); border-color: var(--kirdb-orange); } /* --- Responsive child rows ------------------------------------------------ */ body.kirdb-dark table.dataTable > tbody > tr.child { background-color: #1a1a1a; } body.kirdb-dark table.dataTable > tbody > tr.child ul.dtr-details { color: #b0b0b0; } /* --- Select extension ----------------------------------------------------- */ body.kirdb-dark table.dataTable tbody > tr.selected, body.kirdb-dark table.dataTable tbody > tr > .selected { background-color: var(--kirdb-orange-dim) !important; color: #e0e0e0; } /* --- ki-setting-tab dark -------------------------------------------------- */ body.kirdb-dark .ki-setting-tab { background-color: #1e1e1e; color: #d4d4d4; border-color: rgba(255, 255, 255, 0.08); } /* ============================================================================= Loading Spinner Shown over the table wrapper while DataTables fetches data via AJAX. ============================================================================= */ .kirdb-spinner-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(4px); z-index: 10; border-radius: var(--kirdb-radius); min-height: 120px; } .kirdb-spinner-overlay__ring { width: 40px; height: 40px; border: 3px solid rgba(222, 149, 27, 0.2); border-top-color: var(--kirdb-orange); border-radius: 50%; animation: kirdb-spin 0.7s linear infinite; } .kirdb-spinner-overlay__text { font-size: 0.8rem; color: #888; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 600; } @keyframes kirdb-spin { to { transform: rotate(360deg); } } /* Dark mode overlay */ body.kirdb-dark .kirdb-spinner-overlay { background: rgba(20, 20, 20, 0.9); } body.kirdb-dark .kirdb-spinner-overlay__text { color: #666; } /* ============================================================================= Week-Pill Lists – [routendb_boulder] / [routendb_routes] ============================================================================= */ .kirdb-week-pills { display: flex; flex-direction: column; align-items: center; gap: .4em; list-style: none; margin: .3em 0 0; padding: 0; } .kirdb-week-pill { display: inline-block; padding: .25em .9em; background: #e8e8e8; border-radius: 999px; color: #1d1d1b; font-size: .85em; line-height: 1.4; white-space: nowrap; } .kirdb-week-empty { display: inline-block; color: #8a8a8a; font-style: italic; font-size: .9em; } /* ============================================================================= Farb-Patches – Sonderfarbe Holz ============================================================================= */ .kirdb-color--holz { background-image: url('/img/holz.png'); background-size: cover; background-position: center; background-color: transparent; }