/*--------------------------------------------------------------------------------------------------------------------*/ /* Design der Karten-Apps von Bocholt Maps: unveränderte Kopie von geoportal/apps/main/bocholt.css */ /* (Farben, Kopf-/Fußzeile, Kartenknöpfe, Panels, Widgets, Popups, Darkmode). Bei Änderungen am Geoportal-Design */ /* die Datei erneut kopieren; Ergänzungen nur für Bocholt Maps stehen in bocholtMapsApp.css. */ /*--------------------------------------------------------------------------------------------------------------------*/ /* Inter mit optischen Größen: große Schriftgrade nutzen automatisch den kompakteren Display-Schnitt */ @import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400..800&display=swap'); :root{ --headerHeight: 52px; --footerHeight: 44px; --headerFooterBackground: rgba(30, 77, 58, 1); --headerFooterTextColor1: rgba(250,250,250,1); --headerFooterTextColor2: rgba(225,223,223,1); --tableRowBackground1: rgb(237,237,237); --tableRowBackground2: rgb(251,251,251); --tableRowBackgroundHeader: rgba(30, 77, 58, 1); --tableRowHeaderTextColor: rgba(255,255,255,1); --tableHover: rgb(221,221,221); --sidebarBottomBackground: rgba(255,255,255,1); --sidebarBottomButtontOver: rgba(240,240,240,1); --cSketchWidget_Width: 450px; --cSketchWidget_button1: 57px; --cSketchWidget_button2: 52px; --cSketchWidget_button3: 79px; --cSketchWidget_button4: 53px; --cSketchWidget_button5: 73px; --cSketchWidget_button6: 47px; --cSketchWidget_buttonHeight: 38px; --cMeasurementWidget_Width: 250px; --cMeasurementWidget_button1: 68px; --cMeasurementWidget_button2: 64px; --cMeasurementWidget_buttonHeight: 38px; --cAerialImageArchiveWidget_ButtonBG: #eef2f6; /* Jahrgangs-Chips (vom Widget inline gesetzt) */ --cAerialImageArchiveWidget_ButtonBG_hover: #d3e8cf; /* gewählter Jahrgang */ --cPlotWidget_Width: 300px; --cPlotWidget_button1: 75px; --cPlotWidget_button2: 93px; --cPlotWidget_borderWidth: 15px; --cPlotWidget_buttonHeight: 38px; --cDownloadWidget_Width: 310px; --cDownloadWidget_button1: 79px; --cDownloadWidget_button2: 73px; --cDownloadWidget_button3: 46px; --cDownloadWidget_buttonHeight: 38px; /* --- Design-Tokens (abgestimmt auf portal.html / login.html) --- */ --accent: #3a7d2c; /* Buchengrün (Knöpfe, Auswahl, Hervorhebungen) – passend zum Logo */ --accent-light: #468f37; --accent-soft: rgba(58, 125, 44, 0.1); --surface: #ffffff; --page-bg: #eef1f4; --border-soft: rgba(15, 23, 42, 0.12); --text-main: #1c2733; --text-muted: #64748b; --radius-lg: 18px; --radius-md: 12px; --radius-sm: 8px; --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.08); --shadow-md: 0 4px 14px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.06); --shadow-lg: 0 18px 40px rgba(15, 23, 42, 0.14); --transition: 180ms cubic-bezier(.4,0,.2,1); /* Kopf- und Fußzeile: Tannengrün mit weißer Schrift (im Darkmode dunkel, siehe unten) */ --bar-bg: #1e4d3a; --bar-border: rgba(0, 0, 0, 0.12); --bar-text: #ffffff; --bar-muted: rgba(255, 255, 255, 0.78); --bar-line: rgba(255, 255, 255, 0.3); --bar-hover: rgba(255, 255, 255, 0.15); --bar-hover-text: #ffffff; --bar-chip: rgba(255, 255, 255, 0.14); --bar-chip-border: rgba(255, 255, 255, 0.28); --bar-chip-text: #ffffff; --bar-danger: #ffd2d2; --bar-danger-soft: rgba(255, 90, 90, 0.28); --bar-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); /* Kartenbedienelemente */ --control-bg: #ffffff; --control-icon: #334155; --control-size: 36px; --control-hover: #eef5ec; --control-ring: rgba(15, 23, 42, 0.08); --danger: #c62828; --danger-soft: rgba(198, 40, 40, 0.1); /* ausgeklappte Widgets (Panels), Eingabefelder, Reiter */ --panel-bg: #ffffff; --panel-inset: #f1f4f8; --field-bg: #ffffff; --field-border: #d3dae3; --segment-active: #ffffff; --on-accent: #ffffff; --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a97a6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); } /* --- Darkmode Design-Tokens (identisch zu portal.html / login.html) --- */ :root[data-theme="dark"]{ --headerFooterBackground: rgba(18, 34, 27, 1); --tableRowBackground1: #172a21; --tableRowBackground2: #12211a; --tableRowBackgroundHeader: rgba(36, 84, 63, 1); --tableHover: #1e3529; --sidebarBottomBackground: #12221b; /* wie Fußzeile und Griff (--bar-bg) */ --sidebarBottomButtontOver: #1e3529; --cAerialImageArchiveWidget_ButtonBG: #1a2e24; --cAerialImageArchiveWidget_ButtonBG_hover: #2c4a33; --accent: #7cc56b; --accent-light: #95d385; --accent-soft: rgba(124, 197, 107, 0.16); --surface: #0c1611; --page-bg: #0e1a14; --border-soft: rgba(255, 255, 255, 0.14); --text-main: #e6eee9; --text-muted: #98aca1; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.45); --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.4); --shadow-lg: 0 18px 40px rgba(0, 0, 0, 0.55); --bar-bg: #12221b; --bar-border: rgba(255, 255, 255, 0.14); --bar-text: #e6eee9; --bar-muted: #98aca1; --bar-line: rgba(255, 255, 255, 0.14); --bar-hover: rgba(124, 197, 107, 0.16); --bar-hover-text: #7cc56b; --bar-chip: rgba(124, 197, 107, 0.16); --bar-chip-border: rgba(255, 255, 255, 0.14); --bar-chip-text: #7cc56b; --bar-danger: #f08a8a; --bar-danger-soft: rgba(240, 138, 138, 0.16); --bar-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237cc56b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); --control-bg: #13241c; --control-icon: #d8e7df; --control-hover: #1c362a; --control-ring: rgba(255, 255, 255, 0.08); --danger: #f08a8a; --danger-soft: rgba(240, 138, 138, 0.16); --panel-bg: #13241c; --panel-inset: #0d1c15; --field-bg: #0d1c15; --field-border: rgba(255, 255, 255, 0.14); --segment-active: #243b2f; --on-accent: #0c1611; } * { box-sizing: border-box; } html,body,#mainDiv { padding: 0; margin: 0; height: 100%; width: 100%; overflow: hidden; font-family: 'Inter', Arial, sans-serif; color: var(--text-main); background-color: var(--page-bg); -webkit-font-smoothing: antialiased; transition: background-color var(--transition), color var(--transition); } input,textarea,select { background-color: var(--surface); color: var(--text-main); font-family: 'Inter', Arial, sans-serif; transition: background-color var(--transition), color var(--transition), border-color var(--transition); } input[disabled],textarea[disabled],select[disabled] { background-color: #e9e9ed; } :root[data-theme="dark"] input[disabled], :root[data-theme="dark"] textarea[disabled], :root[data-theme="dark"] select[disabled] { background-color: #1e3128; color: var(--text-muted); } /*--------------------------------------------------------------------------------------------------------------------*/ /*Header*/ /*--------------------------------------------------------------------------------------------------------------------*/ /* Kopfzeile in Stadtblau (Darkmode: dunkel): Logo + Titel links, Bereich daneben, Schaltflächen rechts */ #headerDiv{ position: relative; z-index: 20; display: flex; align-items: center; gap: 14px; height: var(--headerHeight); width: 100%; padding: 0 12px 0 16px; background-color: var(--bar-bg); border-bottom: 1px solid var(--bar-border); box-shadow: 0 2px 10px rgba(15, 23, 42, 0.12); transition: background-color var(--transition), border-color var(--transition); -webkit-user-select: none; user-select: none; } #headerDivMarke{ display: flex; align-items: center; gap: 10px; min-width: 0; } /* Logo der Stadt (Buche im Umring, transparentes PNG) – liegt direkt auf der Farbe der Kopfzeile */ .kopf-logo{ display: block; flex: none; width: 40px; height: 40px; } /* "Geoportal Stadt Bocholt" in einer Zeile und einer Größe */ .kopf-titel{ overflow: hidden; min-width: 0; color: var(--bar-text); font-size: 20px; font-weight: 700; line-height: 24px; letter-spacing: -0.01em; white-space: nowrap; text-overflow: ellipsis; } /* Bereich (z. B. "Auskunft"): schlichter Zusatz hinter einem senkrechten Trennstrich, kein Knopf-Look; ohne Text ausgeblendet */ #headerDivBereich{ position: relative; overflow: hidden; min-width: 0; padding-left: 15px; color: var(--bar-muted); font-size: 18px; font-weight: 500; line-height: 24px; letter-spacing: -0.01em; white-space: nowrap; text-overflow: ellipsis; } #headerDivBereich::before{ content: ""; position: absolute; top: 2px; bottom: 2px; left: 0; width: 1.5px; border-radius: 1px; background: var(--bar-line); } #headerDivBereich:empty{ display: none; } /*--------------------------------------------------------------------------------------------------------------------*/ /*Header: Darkmode-Toggle + Logout (rechtsbündig)*/ /*--------------------------------------------------------------------------------------------------------------------*/ .kopf-aktionen{ display: flex; flex: none; align-items: center; gap: 4px; margin-left: auto; } .kopf-knopf{ display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: none; border-radius: 50%; background: transparent; color: var(--bar-muted); cursor: pointer; transition: background-color var(--transition), color var(--transition); } .kopf-knopf:hover{ background: var(--bar-hover); color: var(--bar-hover-text); } .kopf-knopf:focus-visible{ outline: 2px solid var(--bar-text); outline-offset: 1px; } .kopf-knopf svg{ width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .kopf-knopf--abmelden:hover{ background: var(--bar-danger-soft); color: var(--bar-danger); } #headerDivThemeToggle .icon-sun{ display: none; } #headerDivThemeToggle .icon-moon{ display: block; } :root[data-theme="dark"] #headerDivThemeToggle .icon-sun{ display: block; } :root[data-theme="dark"] #headerDivThemeToggle .icon-moon{ display: none; } /* Trennstrich zwischen Darkmode und Abmelden */ .kopf-trenner{ width: 1px; height: 20px; margin: 0 4px; background: var(--bar-line); } /* schmale Fenster: Titel etwas kleiner, auf sehr schmalen Fenstern ohne Bereichs-Chip */ @media (max-width: 560px){ .kopf-titel, #headerDivBereich{ font-size: 16px; } } @media (max-width: 440px){ #headerDivBereich{ display: none; } } /*--------------------------------------------------------------------------------------------------------------------*/ /*Kartenfenster*/ /*--------------------------------------------------------------------------------------------------------------------*/ #viewDiv{ /*Kartenfenster (abzüglich 2 px für die zugeklappte Auswahl-Tabelle darunter)*/ height: calc(100% - var(--headerHeight) - var(--footerHeight) - 2px); width: 100%; padding: 0; margin: 0; position: relative; background-color: #ffffff; } /*--------------------------------------------------------------------------------------------------------------------*/ /*Footer*/ /*--------------------------------------------------------------------------------------------------------------------*/ /* Statusleiste in Stadtblau (Darkmode: dunkel): Maßstab links, Koordinaten rechts */ #footerDiv{ position: relative; z-index: 2; display: flex; align-items: center; gap: 24px; height: var(--footerHeight); width: 100%; padding: 0 10px 0 20px; background-color: var(--bar-bg); color: var(--bar-muted); font-size: 13.5px; font-variant-numeric: tabular-nums; transition: background-color var(--transition), border-color var(--transition); } /*Massstab anzeigen*/ #scaleText{ display: flex; align-items: baseline; gap: 6px; white-space: nowrap; } #scaleText .fuss-wert{ color: var(--bar-text); font-weight: 600; } /* schmale Fenster: Beschriftung "Maßstab" weglassen, damit die Koordinaten Platz haben */ @media (max-width: 640px){ #footerDiv{ gap: 10px; padding-left: 12px; overflow: hidden; } #scaleText > span:first-child{ display: none; } #coordShow .esri-coordinate-conversion__display{ min-width: 0; } } /*--------------------------------------------------------------------------------------------------------------------*/ /*Basemaps*/ /*--------------------------------------------------------------------------------------------------------------------*/ .esri-basemap-gallery__item-title{ font-size: 14px; } /*--------------------------------------------------------------------------------------------------------------------*/ /*Layerliste*/ /*--------------------------------------------------------------------------------------------------------------------*/ #layerlisteLayerAusschalten{ background-color: var(--page-bg); border-top: 1px solid var(--border-soft); padding: 0px 7px 7px; } #layerlisteLayerAusschaltenButton{ margin-top: 5px; background-color: var(--surface); border-radius: var(--radius-sm); transition: background-color var(--transition), color var(--transition); } #layerlisteLayerAusschaltenButton:hover{ background-color: var(--accent); color: white; } #layerlisteLayerAusschaltenButton, #layerlisteLayerAusschaltenButton::before, #layerlisteLayerAusschaltenButton::after, #layerlisteLayerAusschaltenButton:hover, #layerlisteLayerAusschaltenButton:focus, #layerlisteLayerAusschaltenButton:focus-visible, #layerlisteLayerAusschaltenButton:active { outline: none !important; outline-offset: 0 !important; box-shadow: none !important; border: none !important; border-radius: var(--radius-sm) !important; -webkit-tap-highlight-color: transparent; } #layerlisteLayerAusschalten span{ padding-right: 5px; } /*--------------------------------------------------------------------------------------------------------------------*/ /*Widget: Coordinate-conversion*/ /*--------------------------------------------------------------------------------------------------------------------*/ /* in der Statusleiste: Format als kleiner Chip, Koordinate in Tabellenziffern, Werkzeug als runder Knopf */ #coordShow{ width: auto; margin-left: auto; background: transparent; box-shadow: none; color: var(--bar-text); } #coordShow .esri-coordinate-conversion__conversions-view{ margin: 0; } #coordShow .esri-coordinate-conversion__row{ display: flex; align-items: center; gap: 8px; height: 32px; border: none; background: transparent; } #coordShow .esri-coordinate-conversion__select-row{ flex: none; width: auto; height: 26px; padding: 0 26px 0 11px; border: 1px solid var(--bar-chip-border); border-radius: 999px; background-color: var(--bar-chip); background-image: var(--bar-chevron); background-repeat: no-repeat; background-position: right 8px center; background-size: 13px; -webkit-appearance: none; appearance: none; color: var(--bar-chip-text); font-size: 12px; font-weight: 600; cursor: pointer; } /* aufgeklappte Liste der Formate: normale Panel-Farben (sonst weiße Schrift auf weißem Grund) */ #coordShow .esri-coordinate-conversion__select-row option{ background-color: var(--panel-bg); color: var(--text-main); } #coordShow .esri-coordinate-conversion__display{ display: flex; align-items: center; height: 32px; min-width: 190px; padding: 0 4px; border: none; background: transparent; color: var(--bar-text); font-size: 13.5px; font-variant-numeric: tabular-nums; white-space: nowrap; } #coordShow .esri-coordinate-conversion__tools .esri-widget--button{ width: 32px; height: 32px; background: transparent; color: var(--bar-muted); } #coordShow .esri-coordinate-conversion__tools .esri-widget--button:hover{ background: var(--bar-hover); color: var(--bar-hover-text); } .esri-coordinate-conversion__popup{ /*In Zwischenablage kopiert Koordinate*/ height: 40px; width: 350px; } /*--------------------------------------------------------------------------------------------------------------------*/ /*Widget: Search(Breite) ändern*/ /*--------------------------------------------------------------------------------------------------------------------*/ .esri-search{ width: 300px; } /*--------------------------------------------------------------------------------------------------------------------*/ /*Widget: Popup Breite an Inhalt anpassen (statt feste Breite)*/ /*--------------------------------------------------------------------------------------------------------------------*/ .esri-popup__main-container.esri-widget.esri-popup--shadow.esri-popup--is-collapsible { width: auto !important; max-width: 1000px !important; min-width: 300px; max-height: 750px !important; } /*--------------------------------------------------------------------------------------------------------------------*/ /*Widget: Tabelle Buchdaten*/ /*--------------------------------------------------------------------------------------------------------------------*/ .tableScrollDiv { width: 100% !important; overflow-y: auto !important; overflow-x: visible !important; border-radius: var(--radius-sm); border: 1px solid var(--border-soft); } .tableScroll { width: 100% !important; border-collapse: collapse !important; -ms-user-select: none !important; -moz-user-select: none !important; -webkit-user-select: none !important; font-family: 'Inter', Arial, sans-serif; font-size: 13px; } .tableScroll th { position: -webkit-sticky !important; position: sticky !important; top: 0 !important; color: var(--tableRowHeaderTextColor); background-color: var(--tableRowBackgroundHeader) !important; text-align: left !important; font-weight: 600; font-size: 12px; letter-spacing: 0.2px; } .tableScroll th,td { padding: 8px 9px !important; } .tableScroll tr:nth-child(odd) { background: var(--tableRowBackground1) !important; } .tableScroll tr:nth-child(even) { background: var(--tableRowBackground2) !important; } .tableScroll tr:hover { background-color: var(--tableHover) !important; } /*--------------------------------------------------------------------------------------------------------------------*/ /*Widget: MeasurementWidget Bocholt*/ /*--------------------------------------------------------------------------------------------------------------------*/ #cMeasurementWidget { width: var(--cMeasurementWidget_Width); background-color: var(--page-bg); padding: 6px 7px; display: inline-block; font-size: 14px; border-radius: var(--radius-md); box-shadow: var(--shadow-md); cursor: default; } #cMeasurementWidget_inner { background-color: var(--surface); border-radius: var(--radius-sm); overflow: hidden; } /* Style the tab */ .cMeasurementWidget_tab { overflow: hidden; background-color: var(--surface); } /* Style the buttons that are used to open the tab content */ .cMeasurementWidget_tab button { background-color: inherit; float: left; outline: none; cursor: pointer; padding: 10px 10px; font-size: 14px; font-family: 'Inter', Arial, sans-serif; border: none; border-right: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); height: var(--cMeasurementWidget_buttonHeight); transition: background-color var(--transition); } .cMeasurementWidget_tab button:nth-child(1) { width: var(--cMeasurementWidget_button1); } .cMeasurementWidget_tab button:nth-child(2) { width: var(--cMeasurementWidget_button2); } .cMeasurementWidget_tab div { width: calc(var(--cMeasurementWidget_Width) - 14px - var(--cMeasurementWidget_button1) - var(--cMeasurementWidget_button2)); height: var(--cMeasurementWidget_buttonHeight); border-bottom: 1px solid var(--border-soft); float: right; } /* Change background color of buttons on hover */ .cMeasurementWidget_tab button:hover { background-color: var(--accent-soft); border-top: 3px solid var(--accent-light); padding-top: 7px; } /* Create an active/current tablink class */ .cMeasurementWidget_tab button.active { background-color: var(--surface); border-top: 3px solid var(--accent-light); border-bottom: 1px solid var(--surface); padding-top: 7px; } /* Style the tab content */ .cMeasurementWidget_tabcontent { display: none; padding: 6px 12px 5px; border-bottom: 1px solid var(--border-soft); height: auto; color: var(--text-main); position: relative; } .cMeasurementWidget_tablinks { font-family: inherit; color: var(--text-main); } .cMeasurementWidget_greyDiv{ background-color: var(--page-bg); width: 100%; margin: 10px 0px; padding: 6px 3px; border-radius: var(--radius-sm); } .cMeasurementWidget_bold{ font-weight: 700; margin: 3px 0px; } .cMeasurementWidget_objektfang{ margin-bottom: 3px; } .cMeasurementWidget_objektfangButtons{ display: none; } .cMeasurementWidget_erklaerung{ font-size: 13px; line-height: 1.3em; margin-top: 5px; color: var(--text-muted); } #cMeasurementWidget_buttonDiv{ padding-top: 6px; display: none; } #cMeasurementWidget_undoButton{ display: none; } #cMeasurementWidget_element{ background-color: var(--surface); border-bottom: 1px solid var(--border-soft); width: 90px; padding: 0.25em 0.75em; float: left; margin: 2.9px 7px 2.9px 0px; border-radius: var(--radius-sm); } .cMeasurementWidget_auswahlButton{ height: 32px; width: 32px; border: none; border-radius: var(--radius-sm); background-color: inherit; color: var(--text-muted); margin-left: 2px; transition: background-color 125ms ease-in-out, color 125ms ease-in-out; } .cMeasurementWidget_auswahlButton:hover{ background-color: var(--accent-soft); color: var(--accent); cursor: pointer; outline: none; } .cMeasurementWidget_messenButton{ margin-top: 5px; background-color: var(--surface); border-radius: var(--radius-sm); } .cMeasurementWidget_onoffswitch { float: right; position: relative; width: 40px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } .cMeasurementWidget_onoffswitch-checkbox { display: none; } .cMeasurementWidget_onoffswitch-label { display: block; overflow: hidden; cursor: pointer; height: 16px; padding: 0; line-height: 16px; border: 2px solid #999999; border-radius: 16px; background-color: var(--surface); transition: background-color 0.1s ease-in; } .cMeasurementWidget_onoffswitch-label:before { content: ""; display: block; width: 16px; margin: 0px; background: var(--surface); position: absolute; top: 0; bottom: 0; right: 22px; border: 2px solid #999999; border-radius: 16px; left: 0px; } .cMeasurementWidget_onoffswitch-checkbox:checked + .cMeasurementWidget_onoffswitch-label { background-color: var(--accent); } .cMeasurementWidget_onoffswitch-checkbox:checked + .cMeasurementWidget_onoffswitch-label, .cMeasurementWidget_onoffswitch-checkbox:checked + .cMeasurementWidget_onoffswitch-label:before { border-color: var(--accent); } .cMeasurementWidget_onoffswitch-checkbox:checked + .cMeasurementWidget_onoffswitch-label:before { right: 0px; left: unset; } /*--------------------------------------------------------------------------------------------------------------------*/ /*Widget: Custom SketchWidget*/ /*--------------------------------------------------------------------------------------------------------------------*/ #cSketchWidget { width: var(--cSketchWidget_Width); background-color: var(--page-bg); padding: 6px 7px; display: inline-block; font-size: 14px; border-radius: var(--radius-md); box-shadow: var(--shadow-md); cursor: default; } #csketchWidget_Inner { background-color: var(--surface); border-radius: var(--radius-sm); overflow: hidden; } /* Style the tab */ .csketchWidget_tab { overflow: hidden; background-color: var(--surface); } /* Style the buttons that are used to open the tab content */ .csketchWidget_tab button { background-color: inherit; float: left; outline: none; cursor: pointer; padding: 10px 10px; font-size: 14px; font-family: 'Inter', Arial, sans-serif; border: none; border-right: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); height: var(--cSketchWidget_buttonHeight); transition: background-color var(--transition); } .csketchWidget_tab button:nth-child(1) { width: var(--cSketchWidget_button1); } .csketchWidget_tab button:nth-child(2) { width: var(--cSketchWidget_button2); } .csketchWidget_tab button:nth-child(3) { width: var(--cSketchWidget_button3); } .csketchWidget_tab button:nth-child(4) { width: var(--cSketchWidget_button4); } .csketchWidget_tab button:nth-child(5) { width: var(--cSketchWidget_button5); } .csketchWidget_tab button:nth-child(6) { width: var(--cSketchWidget_button6); } .csketchWidget_tab div { width: calc(var(--cSketchWidget_Width) - 14px - var(--cSketchWidget_button1) - var(--cSketchWidget_button2) - var(--cSketchWidget_button3) - var(--cSketchWidget_button4) - var(--cSketchWidget_button5) - var(--cSketchWidget_button6)); border-bottom: 1px solid var(--border-soft); height: var(--cSketchWidget_buttonHeight); float: right; } /* Change background color of buttons on hover */ .csketchWidget_tab button:hover { background-color: var(--accent-soft); border-top: 3px solid var(--accent-light); padding-top: 7px; } .csketchWidget_tab button:nth-child(7):hover { background-color: inherit; border: none; border-bottom: 1px solid var(--border-soft); cursor: default; } /* Create an active/current tablink class */ .csketchWidget_tab button.active { background-color: var(--surface); border-top: 3px solid var(--accent-light); border-bottom: 1px solid var(--surface); padding-top: 7px; } /* Style the tab content */ .csketchWidget_tabcontent { display: none; padding: 6px 12px; border-bottom: 1px solid var(--border-soft); height: 275px; color: var(--text-main); position: relative; } .csketchWidget_tablinks { font-family: inherit; color: var(--text-main); } #csketchWidget_svgTablePoint td div:hover, #csketchWidget_svgTableLine td div:hover, #csketchWidget_svgTableRectangle td div:hover, #csketchWidget_svgTableCircle td div:hover, #csketchWidget_svgTablePolygon td div:hover, #csketchWidget_svgTableText td div:hover { background-color: var(--accent-soft); border-radius: var(--radius-sm); cursor: pointer; } .csketchWidget_symbol-div-item.activeSvg{ background-color: var(--accent-soft); border-radius: var(--radius-sm); } .csketchWidget_scroll, .csketchWidget_scrollText { width: auto; overflow-x: auto; overflow-y: hidden; border: 1px solid; border-color: var(--border-soft); border-radius: var(--radius-sm); } .csketchWidget_scroll { height: auto; } .csketchWidget_status { background-color: var(--page-bg); height: auto; width: 412px; padding: 3px; position: absolute; bottom: 0; margin-bottom: 12px; } .csketchWidget_statusFloat { float: left; margin-top: 6.9px; } .csketchWidget_copyButton{ float: right; height: 32px; width: 32px; border: none; border-radius: var(--radius-sm); background-color: inherit; color: var(--text-muted); transition: background-color 125ms ease-in-out, color 125ms ease-in-out; } .csketchWidget_copyButton:hover{ background-color: var(--accent-soft); color: var(--accent); cursor: pointer; outline: none; } #csketchWidget_svgTextValue { width: 412px; height: 27px; border: 1px solid; border-color: var(--border-soft); border-radius: var(--radius-sm); margin: 5px 0px; font-family: 'Inter', "Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 14px; color: var(--text-main); } #csketchWidget_svgPointSizeInput, #csketchWidget_svgTextSizeInput, #csketchWidget_lineStyle{ height: 24px; border: none; background-color: var(--surface); font-size: 14px; margin-left: 2px; font-family: 'Inter', "Helvetica Neue",Helvetica,Arial,sans-serif; color: var(--text-main); } #csketchWidget_svgPointSizeInput{ width: 30px; } #csketchWidget_svgTextSizeInput{ width: 35px; } #csketchWidget_lineStyle{ width: 200px; } #csketchWidget_svgPointSize, #csketchWidget_svgTextSize{ width: 412px; margin: 5px 0px 0px; } .csketchWidget_rangeLabelMin{ float: left; } .csketchWidget_rangeLabelMax{ float: right; } .csketchWidget_rangeLabelMin, .csketchWidget_rangeLabelMax{ font-size: 12px; position: relative; top: -6px; } #csketchWidget_ElementDiv{ padding-top: 6px; display: none; } #csketchWidget_element{ background-color: var(--surface); border-bottom: 1px solid var(--border-soft); width: 90px; padding: 0.25em 0.75em; float: left; margin: 2.9px 7px 2.9px 0px; border-radius: var(--radius-sm); } .csketchWidget_AuswahlButton{ height: 32px; width: 32px; border: none; border-radius: var(--radius-sm); background-color: inherit; color: var(--text-muted); margin-left: 2px; transition: background-color 125ms ease-in-out, color 125ms ease-in-out; } .csketchWidget_AuswahlButton:hover{ background-color: var(--accent-soft); color: var(--accent); cursor: pointer; outline: none; } .csketchWidget_AuswahlButton.active{ background: var(--accent); color: #fff; } .csketchWidget_redLineButton{ float: left; width: 32%; background-color: var(--surface); border-radius: var(--radius-sm); } .csketchWidget_redLineButton:hover{ padding: 0.25em 0.75em; } #csketchWidget_Change{ margin-left: 2%; margin-right: 2%; } #csketchWidget_Change_redLineButtonDiv { margin-top: 6px; } /*--------------------------------------------------------------------------------------------------------------------*/ /*Widget: Custom sidebarbottom*/ /*--------------------------------------------------------------------------------------------------------------------*/ #sidebarbottom { height: 0px; width: 100%; z-index: 1; bottom: calc(var(--footerHeight) + 20px); left: 0px; background-color: var(--sidebarBottomBackground); overflow-x: hidden; border-style: solid !important; border-width: 1px 0px 0px 0px !important; border-color: var(--border-soft) !important; } /* Griff zum Aufziehen der Auswahl-Tabelle: kleiner Reiter über der Statusleiste */ #sidebarbottom_openbutton { position: absolute; left: 50%; width: 72px; height: 20px; margin-left: -36px; bottom: var(--footerHeight); display: flex; align-items: center; justify-content: center; font-size: 15px; font-family: 'Inter', Arial, sans-serif; font-weight: 600; line-height: 1; cursor: pointer; /* nur Klicken (auf/zu), kein Ziehen */ background-color: var(--sidebarBottomBackground); /* aufgeklappt: Farbe der Tabelle; zugeklappt: Fußzeilenfarbe (s. u.) */ color: var(--text-muted); padding: 0; border-top-left-radius: 10px; border-top-right-radius: 10px; box-shadow: 0 -2px 8px rgba(15, 23, 42, 0.08); border-style: solid !important; border-width: 1px 1px 0px 1px !important; border-color: var(--border-soft) !important; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; outline: 0; z-index: 2; transition: background-color var(--transition); } #sidebarbottom_openbutton:hover { color: var(--accent); } /*---------------------------------------------------------------------------------*/ /*Grid-Test*/ /*---------------------------------------------------------------------------------*/ .cSelectGridWidget_SelectButton{ height: 32px; width: 32px; border: none; border-radius: var(--radius-sm); background-color: inherit; color: var(--text-muted); margin-left: 2px; transition: background-color 125ms ease-in-out, color 125ms ease-in-out; } .cSelectGridWidget_SelectButton:hover{ background-color: var(--accent-soft); color: var(--accent); cursor: pointer; outline: none; } .cSelectGridWidget_SelectButton.active{ background: var(--accent); color: #fff; } #sbGridSelectGroup.dgrid{ height: calc(100% - 38px); width: 250px; float: left; margin-right: 5px; margin-left: 5px; } .field-layername{ width: 125px; } .field-Anzahl{ width: 40px; } #cSelectGridWidget{ height: 100%; } #sbGridDetail.dgrid{ height: calc(100% - 38px); margin-right: 5px; } /* dgrid.css liefert eigene, fest hinterlegte Hell-Farben mit; im Darkmode werden die gängigsten dgrid-Klassen daher überschrieben */ :root[data-theme="dark"] .dgrid, :root[data-theme="dark"] .dgrid-header, :root[data-theme="dark"] .dgrid-scroller, :root[data-theme="dark"] .dgrid-content { background-color: var(--surface); color: var(--text-main); border-color: var(--border-soft) !important; } :root[data-theme="dark"] .dgrid-header-row, :root[data-theme="dark"] .dgrid-cell { background-color: var(--surface); color: var(--text-main); border-color: var(--border-soft) !important; } :root[data-theme="dark"] .dgrid-row:hover .dgrid-cell, :root[data-theme="dark"] .dgrid-row-odd, :root[data-theme="dark"] .dgrid-row-even { background-color: var(--surface); } :root[data-theme="dark"] .dgrid-selected .dgrid-cell { background-color: var(--accent-soft) !important; } .dgrid-header{ font-size: 14px; font-family: 'Inter', "Helvetica Neue",Helvetica,Arial,sans-serif; color: var(--text-main); } .dgrid-row{ font-size: 12px; font-family: 'Inter', "Helvetica Neue",Helvetica,Arial,sans-serif; color: var(--text-main); } .dgrid-selected{ background-color: var(--accent-soft); } .field-first{ width: 200px; } .field-age{ width: 80px; } .field-last{ width: 80px; } /*---------------------------------------------------------------------------------*/ /*AerialImageArchiveSlider*/ /*---------------------------------------------------------------------------------*/ #cAerialImageArchive{ position: absolute; top: 108px; left: 50px; height: 115px; width: 0px; background-color: var(--surface); border-radius: var(--radius-md); box-shadow: var(--shadow-md); visibility: hidden; } #cAerialImageArchiveJahrgang > div{ position: relative; display: flex; float: left; font-size: 12px; width: 50px; height: 20px; background-color: var(--cAerialImageArchiveWidget_ButtonBG); color: var(--headerFooterTextColor2); justify-content: center; /* align horizontal */ align-items: center; /* align vertical */ margin-top: -6px; } #cAerialImageArchiveJahrgang > div:hover{ background-color: var(--cAerialImageArchiveWidget_ButtonBG_hover); cursor: pointer; user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; } #cAerialImageArchiveJahrgang > div:first-child{ margin-left: 10px; } #cAerialImageArchiveSlider > input{ position: relative; margin-left: 35px; margin-top: 20px; outline: none; } #cAerialImageArchiveActualText{ position: relative; display: flex; width: 100%; left: 0px; top: 10px; justify-content: center; /* align horizontal */ align-items: center; /* align vertical */ font-size: 14px; color: var(--text-main); } .cAerialImageArchivePlay{ position: relative; justify-content: left; height: 32px; width: 32px; border: none; border-radius: var(--radius-sm); background-color: inherit; color: var(--text-muted); margin-left: 10px; transition: background-color 125ms ease-in-out, color 125ms ease-in-out; } .cAerialImageArchivePlay:hover{ background-color: var(--accent-soft); color: var(--accent); cursor: pointer; outline: none; } .cAerialImageArchivePlay.active{ background: var(--accent); color: #fff; } .divAerialImageArchivePlay{ display: flex; width: 50px; float: left; position: relative; } #divAerialImageArchiveClose{ position: absolute; top: 0; right: 0; } #cAerialImageArchiveSG{ display: flex; justify-content: center; align-items: center; float: left; font-size: 12px; position: relative; margin-top: 5px; width: 90%; } .cAerialImageArchiveSG_Button{ height: 32px; width: 32px; border: none; border-radius: var(--radius-sm); background-color: inherit; color: var(--text-muted); margin-left: 2px; } .cAerialImageArchiveSG_Button:hover{ background-color: var(--accent-soft); color: var(--accent); cursor: pointer; outline: none; } .cAerialImageArchiveSG_Button.active{ background: var(--accent); color: #fff; } /*---------------------------------------------------------------------------------*/ /*Plotwidget*/ /*---------------------------------------------------------------------------------*/ #cPlotWidget { width: var(--cPlotWidget_Width); background-color: var(--page-bg); padding: 6px 7px; display: inline-block; font-size: 14px; border-radius: var(--radius-md); box-shadow: var(--shadow-md); cursor: default; } #cPlotWidget_innerBox { background-color: var(--surface); border-bottom: 1px solid var(--border-soft); margin-bottom: 5px; padding: 6px 12px 5px; border-radius: var(--radius-sm); } .cPlotWidget_Sections{ background-color: var(--surface); border-bottom: 1px solid var(--border-soft); } /* Style the tab */ #cPlotWidget_tab { overflow: hidden; background-color: var(--surface); } /* Style the buttons that are used to open the tab content */ #cPlotWidget_tab button { background-color: inherit; float: left; outline: none; cursor: pointer; padding: 10px 10px; font-size: 14px; font-family: 'Inter', Arial, sans-serif; border: none; border-right: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); height: var(--cPlotWidget_buttonHeight); transition: background-color var(--transition); } #cPlotWidget_tab button:nth-child(1) { width: var(--cPlotWidget_button1); } #cPlotWidget_tab button:nth-child(2) { width: var(--cPlotWidget_button2); } #cPlotWidget_tab div { width: calc(var(--cPlotWidget_Width) - 14px - var(--cPlotWidget_button1) - var(--cPlotWidget_button2)); height: var(--cPlotWidget_buttonHeight); border-bottom: 1px solid var(--border-soft); float: right; } /* Change background color of buttons on hover */ #cPlotWidget_tab button:hover { background-color: var(--accent-soft); border-top: 3px solid var(--accent-light); padding-top: 7px; } /* Create an active/current tablink class */ #cPlotWidget_tab button.active { background-color: var(--surface); border-top: 3px solid var(--accent-light); border-bottom: 1px solid var(--surface); padding-top: 7px; } /* Style the tab content */ .cPlotWidget_tabcontent{ display: none; height: auto; color: var(--text-main); position: relative; } .cPlotWidget_tablinks { font-family: inherit; color: var(--text-main); } .cPlotWidget_tabcontentButton{ display: none; } .cPlotWidget_select, .cPlotWidget_input{ width: 100%; height: 27px; border: 1px solid; border-color: var(--border-soft); border-radius: var(--radius-sm); margin: 5px 0px; font-family: inherit; font-size: 14px; color: var(--text-main); } .cPlotWidget_elementDivReady{ display: none; } .cPlotWidget_elementDivLoading{ display: none; color: var(--text-muted); } .cPlotWidget_error{ display: none; color: #8c2907b3; } :root[data-theme="dark"] .cPlotWidget_error{ color: #ff9466; } .cPlotWidget_statusDiv{ float: left; padding-right: 0.75em; } .cPlotWidget_element{ background-color: var(--surface); border-bottom: 1px solid var(--border-soft); width: auto; max-width: calc(var(--cPlotWidget_Width) - 55px); overflow: hidden; padding: 0.25em 0.75em; float: left; margin: 2.9px 7px 2.9px 0px; border-radius: var(--radius-sm); } #cPlotWidget_dateiname{ max-width: calc(var(--cPlotWidget_Width) - 103px); float: left; } .cPlotWidget_auswahlButtonReady{ height: 32px; width: 32px; border: none; border-radius: var(--radius-sm); background-color: inherit; color: var(--text-muted); margin-left: 2px; transition: background-color 125ms ease-in-out, color 125ms ease-in-out; } .cPlotWidget_auswahlButtonReady:hover{ background-color: var(--accent-soft); color: var(--accent); cursor: pointer; outline: none; } .cPlotWidget_auswahlButtonLoading{ height: 32px; width: 32px; visibility: hidden; } .cPlotWidget_button{ margin-top: 5px; background-color: var(--surface); border-radius: var(--radius-sm); width: 100%; } #cPlotWidget_plotBox{ border-width: var(--cPlotWidget_borderWidth); border-style: solid; border-color: rgba(58, 125, 44, 0.85); position: fixed; pointer-events: none; visibility: hidden; z-index: 0; } #cPlotWidget_maskDiv{ position: absolute; background: rgba(58, 125, 44, 0.20); border: 2px solid rgb(58, 125, 44); } .cPlotWidget_hide{ display: none; } .cPlotWidget_screenshotCursor{ cursor: crosshair; } /* Ausgeklappte Expand-Widgets (Basiskarten, Layerliste, Legende, Skizzen, Messen, Plotten, Download): dezent abgerundete Ecken statt eckig, aber KEIN overflow:hidden am äußeren Rand, damit interne Scrollbereiche (z.B. Layerliste) nicht abgeschnitten werden */ .esri-expand__container--expanded { border-radius: var(--radius-lg) !important; overflow: visible; } .esri-widget--panel.esri-expand__panel { border-radius: var(--radius-lg) !important; overflow: visible; /* geändert: schneidet keine Inhalte (z.B. Button) mehr ab */ } /* Basiskarten und Legende: eigenständige Widgets ohne angehängten Button, normal abrunden */ .esri-basemap-gallery, .esri-legend { border-radius: var(--radius-lg); overflow: hidden; } /* Layerliste + "Alle Layer ausschalten"-Button: EIN durchgehender Block. Die Rundung sitzt am äußeren Wrapper, nicht an der Liste selbst - dadurch bleiben Liste und Button optisch verschmolzen, und der interne Scrollbalken der Liste wird an der Rundung des Wrappers sauber geclippt. */ .layerListWrapper { border-radius: var(--radius-lg); overflow: hidden; background-color: var(--surface); } /* Icon-Button zum Wieder-Einklappen (oben rechts im ausgeklappten Widget) */ .esri-expand__container--expanded .esri-widget--button, .esri-expand__collapse-button { border-radius: 50% !important; } /*---------------------------------------------------------------------------------*/ /*Overview*/ /*---------------------------------------------------------------------------------*/ #cOverview_div { position: absolute; right: 2px; bottom: 3px; width: 339px; height: 250px; border: 1px solid var(--border-soft); border-radius: var(--radius-md); z-index: 1; overflow: hidden; background-color: var(--surface); visibility: hidden; box-shadow: var(--shadow-lg); } #cOverview_closeOverview{ height: 26px; width: 26px; margin: 6px 0 0 6px; } /*---------------------------------------------------------------------------------*/ /*Kartendownload*/ /*---------------------------------------------------------------------------------*/ #cDownloadWidget { width: var(--cDownloadWidget_Width); background-color: var(--page-bg); padding: 6px 7px; font-size: 14px; border-radius: var(--radius-md); box-shadow: var(--shadow-md); cursor: default; display: none; } /* Style the tab */ .cDownloadWidget_tab { overflow: hidden; background-color: var(--surface); } /* Style the buttons that are used to open the tab content */ .cDownloadWidget_tab button { background-color: inherit; float: left; outline: none; cursor: pointer; padding: 10px 10px; font-size: 14px; font-family: 'Inter', Arial, sans-serif; border: none; border-right: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); height: var(--cDownloadWidget_buttonHeight); transition: background-color var(--transition); } .cDownloadWidget_tab button:nth-child(1) { width: var(--cDownloadWidget_button1); } .cDownloadWidget_tab button:nth-child(2) { width: var(--cDownloadWidget_button2); } .cDownloadWidget_tab button:nth-child(3) { width: var(--cDownloadWidget_button3); } .cDownloadWidget_tab div { width: calc(var(--cDownloadWidget_Width) - 14px - var(--cDownloadWidget_button1) - var(--cDownloadWidget_button2) - var(--cDownloadWidget_button3)); height: var(--cDownloadWidget_buttonHeight); border-bottom: 1px solid var(--border-soft); float: right; } /* Change background color of buttons on hover */ .cDownloadWidget_tab button:hover { background-color: var(--accent-soft); border-top: 3px solid var(--accent-light); padding-top: 7px; } /* Create an active/current tablink class */ .cDownloadWidget_tab button.active { background-color: var(--surface); border-top: 3px solid var(--accent-light); border-bottom: 1px solid var(--surface); padding-top: 7px; } /* Style the tab content */ .cDownloadWidget_tabcontent { display: none; height: auto; color: var(--text-main); position: relative; } .cDownloadWidget_tablinks { font-family: inherit; color: var(--text-main); } .cDownloadWidget_select, .cDownloadWidget_input{ width: 100%; height: 27px; border: 1px solid; border-color: var(--border-soft); border-radius: var(--radius-sm); margin: 5px 0px; font-family: inherit; font-size: 14px; color: var(--text-main); } .cDownloadWidget_innerBox { background-color: var(--surface); border-bottom: 1px solid var(--border-soft); margin-bottom: 5px; padding: 6px 12px 5px; border-radius: var(--radius-sm); } .cDownloadWidget_greyDiv{ background-color: var(--page-bg); width: 100%; margin: 10px 0px; padding: 6px; border-radius: var(--radius-sm); display: table; } .cDownloadWidget_aktualisierenButton{ height: 32px; width: 32px; border: none; border-radius: var(--radius-sm); background-color: inherit; color: var(--text-muted); margin-left: 2px; transition: background-color 125ms ease-in-out, color 125ms ease-in-out; float: right; } .cDownloadWidget_aktualisierenButtonHover:hover{ background-color: var(--accent-soft); color: var(--accent); cursor: pointer; outline: none; } .cDownloadWidget_input { -moz-appearance: textfield; } #cDownloadWidget_koordinatenTextarea{ resize: none; width: 100%; font-family: inherit; font-size: 14px; height: 186px; margin: 8px 0px; border: 1px solid; border-color: var(--border-soft); border-radius: var(--radius-sm); color: var(--text-main); } #cDownloadWidget_ausschnittButton{ margin-right: 2%; } .cDownloadWidget_element{ background-color: var(--surface); border-bottom: 1px solid var(--border-soft); width: auto; max-width: calc(var(--cDownloadWidget_Width) - 55px); overflow: hidden; padding: 0.25em 0.75em; float: left; margin: 2.9px 7px 2.9px 0px; border-radius: var(--radius-sm); } #cDownloadWidget_loading{ padding-top: 6px; color: var(--text-muted); display: none; float: left; width: 100%; } #cDownloadWidget_ready{ padding-top: 6px; color: var(--text-main); display: none; float: left; width: 100%; } #cDownloadWidget_error{ padding-top: 6px; color: #8c2907b3; display: none; float: left; width: 100%; } :root[data-theme="dark"] #cDownloadWidget_error{ color: #ff9466; } .cDownloadWidget_elementButton{ float: left; height: 32px; width: 32px; border: none; border-radius: var(--radius-sm); background-color: inherit; color: var(--text-muted); margin-left: 2px; transition: background-color 125ms ease-in-out, color 125ms ease-in-out; } .cDownloadWidget_elementButton:hover{ background-color: var(--accent-soft); color: var(--accent); cursor: pointer; outline: none; } .cDownloadWidget_statusDiv{ float: left; padding-right: 0.75em; } .cDownloadWidget_button{ margin-top: 5px; float: left; width: 49%; background-color: var(--surface); border-radius: var(--radius-sm); } .cDownloadWidget_buttonDisabled{ color: #acacac; border-color: #acacac; cursor: unset; } .cDownloadWidget_buttonDisabled:hover{ background-color: var(--surface); color: #acacac; border-color: #acacac; } #cDownloadWidget_alert { padding: 8px 10px; background-color: #d46464; border-radius: var(--radius-sm); color: white; width: max-content; display: none; } .cDownloadWidget_closebtn { margin: 3px; color: white; font-weight: bold; font-size: 22px; line-height: 20px; cursor: pointer; transition: 0.3s; vertical-align: middle; } .cDownloadWidget_closebtn:hover { color: #1c2733; } .cDownloadWidget_alertText{ vertical-align: sub; } #cDownloadWidget_protokollDiv{ overflow: scroll; resize: none; width: 100%; font-family: inherit; font-size: 14px; height: 300px; margin: 8px 0px; border: 1px solid; border-color: var(--border-soft); border-radius: var(--radius-sm); color: var(--text-main); } /*--------------------------------------------------------------------------------------------------------------------*/ /*Globale Schriftart: gezielt statt pauschal, damit Icon-Fonts unberührt bleiben*/ /*--------------------------------------------------------------------------------------------------------------------*/ .esri-widget:not([class*="icon"]), .esri-widget input:not([class*="icon"]), .esri-widget select, .esri-widget textarea, .esri-widget button:not([class*="icon"]), .esri-widget label:not([class*="icon"]), .esri-search__input, .esri-search__suggestions-menu, .esri-popup__main-container, .esri-popup__header-title, .esri-popup__content, .esri-popup__content *:not([class*="icon"]), .esri-layer-list__item-title, .esri-legend, .esri-legend *:not([class*="icon"]), .esri-basemap-gallery__item-title, .dgrid, .dgrid-header, .dgrid-row, .dgrid-cell { font-family: 'Inter', Arial, sans-serif !important; } /*--------------------------------------------------------------------------------------------------------------------*/ /*Scrollbalken im Darkmode*/ /*--------------------------------------------------------------------------------------------------------------------*/ :root[data-theme="dark"] * { scrollbar-width: thin; /* Firefox */ scrollbar-color: #364a40 #12211a; /* Firefox: thumb, track */ } :root[data-theme="dark"] *::-webkit-scrollbar { width: 10px; height: 10px; } :root[data-theme="dark"] *::-webkit-scrollbar-track { background: #12211a; } :root[data-theme="dark"] *::-webkit-scrollbar-thumb { background-color: #364a40; border-radius: 6px; border: 2px solid #12211a; } :root[data-theme="dark"] *::-webkit-scrollbar-thumb:hover { background-color: #455d50; } /*--------------------------------------------------------------------------------------------------------------------*/ /*Fokus-Rahmen der Karte deaktivieren*/ /*--------------------------------------------------------------------------------------------------------------------*/ .esri-view .esri-view-surface--inset-outline:focus::after { outline: none !important; } #viewDiv:focus, #viewDiv *:focus { outline: none !important; } /* Auch Esris eigener View-Container/Canvas soll immer weiß bleiben */ :root[data-theme="dark"] #viewDiv, :root[data-theme="dark"] .esri-view-root, :root[data-theme="dark"] .esri-view-surface { background-color: #ffffff !important; } /*--------------------------------------------------------------------------------------------------------------------*/ /*Runde Widget-Buttons (Home, Compass, Expand-Icons, Trash, LayerOff, Overview, Zoom)*/ /*--------------------------------------------------------------------------------------------------------------------*/ .esri-widget--button, #idTrash, #idAllLayerOff, #cOverview_openOverview, #cOverview_closeOverview { border-radius: 50% !important; overflow: hidden; } /* .esri-component rund (50%) für Expand-Widgets, aber NICHT für Suche und Popup */ .esri-component:not(:has(.esri-expand__container--expanded)):not(.esri-search):not(.esri-popup):not(.esri-popup__main-container):not(:has(.esri-popup__main-container)):not(.esri-attribution) { border-radius: 50% !important; overflow: hidden; } /* Sicherheitsnetz: Popup darf nie rund werden, unabhängig von der generischen Regel oben */ .esri-view-root .esri-popup, .esri-view-root .esri-popup__main-container { border-radius: var(--radius-sm) !important; overflow: visible !important; } /* Popups im Darkmode: dunkelgrüne Fläche wie die Widgets statt Esri-Grau (#242424 / #303030) */ :root[data-theme="dark"] .esri-popup { /* Calcite-Bausteine im Popup (z. B. calcite-flow-item, sonst #2b2b2b) lesen diese Variablen */ --calcite-ui-background: var(--panel-bg); --calcite-ui-foreground-1: var(--panel-bg); --calcite-ui-foreground-2: var(--control-hover); --calcite-ui-foreground-3: var(--segment-active); } /* Inhalt (esri-feature, Suchergebnis usw. sind ebenfalls .esri-widget mit Esri-Grau) */ :root[data-theme="dark"] .esri-popup .esri-widget, :root[data-theme="dark"] .esri-popup__main-container, :root[data-theme="dark"] .esri-popup__pointer-direction, :root[data-theme="dark"] .esri-popup__actions, :root[data-theme="dark"] .esri-popup__feature-menu { background-color: var(--panel-bg); } :root[data-theme="dark"] .esri-popup__navigation, :root[data-theme="dark"] .esri-popup__collapse-button { background-color: var(--segment-active); } :root[data-theme="dark"] .esri-popup__button:hover, :root[data-theme="dark"] .esri-popup__header-container--button:hover, :root[data-theme="dark"] .esri-popup__feature-menu-button:hover, :root[data-theme="dark"] .esri-popup__feature-menu-button:focus, :root[data-theme="dark"] .esri-popup--feature-menu-open .esri-popup__feature-menu-button, :root[data-theme="dark"] .esri-popup__actions .esri-popup__button[class*=esri-popup__action]:hover, :root[data-theme="dark"] .esri-popup__footer .esri-popup__actions-menu-button:hover, :root[data-theme="dark"] .esri-popup--actions-menu-open .esri-popup__footer .esri-popup__actions-menu-button, :root[data-theme="dark"] .esri-popup__feature-menu-item:hover, :root[data-theme="dark"] .esri-popup__feature-menu-item:focus { background-color: var(--control-hover); } /* Suche: moderater Radius, kein overflow:hidden (Dropdown bleibt sichtbar) */ .esri-search { border-radius: var(--radius-lg) !important; } .esri-search__input { border-radius: var(--radius-lg) !important; } /* Popup: nur ganz leicht abgerundet */ .esri-popup__main-container { border-radius: var(--radius-sm) !important; } /* Zoom-Widget (+/-): eigener Container, Buttons einzeln rund mit Abstand */ .esri-zoom { background: transparent !important; box-shadow: none !important; border-radius: 0 !important; overflow: visible !important; } .esri-zoom .esri-widget--button { border-radius: 50% !important; margin-bottom: 6px; box-shadow: var(--shadow-sm); } .esri-zoom .esri-widget--button:last-child { margin-bottom: 0; } /* Abstand zwischen gestapelten Expand-Icons rechts, sonst verschmelzen die Kreise */ .esri-ui-top-right .esri-component + .esri-component { margin-top: 6px; } /*--------------------------------------------------------------------------------------------------------------------*/ /*Layerliste: Checkboxen statt Augen-Symbole anzeigen (Codepoint-Swap in der esri-icons-Font)*/ /*--------------------------------------------------------------------------------------------------------------------*/ /* Nur innerhalb der Layerliste: Checkboxen statt Augen */ .esri-layer-list .esri-icon-non-visible::before { content: "\e610" !important; } .esri-layer-list .esri-icon-visible::before { content: "\e611" !important; } /*--------------------------------------------------------------------------------------------------------------------*/ /*Rahmen bei Hover/Focus auf runden Widget-Buttons komplett entfernen (Sammelregel)*/ /*--------------------------------------------------------------------------------------------------------------------*/ .esri-widget--button, .esri-widget--button *, .esri-widget--button::before, .esri-widget--button::after, .esri-widget--button:hover, .esri-widget--button:focus, .esri-widget--button:focus-visible, .esri-widget--button:active { outline: none !important; box-shadow: none !important; border: none !important; } /*--------------------------------------------------------------------------------------------------------------------*/ /*Kartenbedienelemente: einheitlich 36 px, weiche Schatten, Zoom und Suche als Pille*/ /*(mit #viewDiv, damit diese Regeln die allgemeinen Rund-/Rahmen-Regeln oben sicher übersteuern)*/ /*--------------------------------------------------------------------------------------------------------------------*/ #viewDiv .esri-ui-corner .esri-widget--button { width: var(--control-size); height: var(--control-size); } /* einzelne Knöpfe (Home, Löschen, Layer aus, Kompass, Übersicht) und Expand-Knöpfe rechts */ #viewDiv .esri-ui-corner > .esri-component.esri-widget--button, #viewDiv .esri-ui-corner .esri-expand__panel > .esri-widget--button, #viewDiv .esri-ui-corner .esri-zoom .esri-widget--button { background-color: var(--control-bg); color: var(--control-icon); transition: background-color var(--transition), color var(--transition); } #viewDiv .esri-ui-corner > .esri-component.esri-widget--button:hover, #viewDiv .esri-ui-corner .esri-expand__panel > .esri-widget--button:hover, #viewDiv .esri-ui-corner .esri-zoom .esri-widget--button:hover { background-color: var(--control-hover); color: var(--accent); } /* Schatten am Kreis selbst (auch bei ausgeklapptem Widget kein eckiger Schatten) */ #viewDiv .esri-ui-corner > .esri-component.esri-widget--button, #viewDiv .esri-ui-corner > .esri-component.esri-expand { border-radius: 50% !important; background-color: var(--control-bg); box-shadow: 0 0 0 1px var(--control-ring), 0 2px 8px rgba(15, 23, 42, 0.14) !important; } /* gleichmäßige Abstände links und rechts */ #viewDiv .esri-ui-corner .esri-component { margin-bottom: 10px; } #viewDiv .esri-ui-top-right .esri-component + .esri-component { margin-top: 0; } /* Zoom (+/−) als eine Pille mit Trennlinie */ #viewDiv .esri-ui-corner .esri-zoom.esri-component { border-radius: 999px !important; overflow: hidden !important; background: var(--control-bg) !important; box-shadow: 0 0 0 1px var(--control-ring), 0 2px 8px rgba(15, 23, 42, 0.14) !important; } #viewDiv .esri-ui-corner .esri-zoom .esri-widget--button { margin: 0; border-radius: 0 !important; } #viewDiv .esri-ui-corner .esri-zoom .esri-widget--button + .esri-widget--button { border-top: 1px solid var(--border-soft) !important; } /* Suche als Pille in Knopfhöhe */ #viewDiv .esri-ui-corner .esri-search { width: min(320px, calc(100vw - 92px)); /* schmale Fenster: Platz für die Knöpfe rechts lassen */ border-radius: 999px !important; background-color: var(--control-bg); box-shadow: 0 0 0 1px var(--control-ring), 0 2px 8px rgba(15, 23, 42, 0.14) !important; } #viewDiv .esri-search .esri-search__container, #viewDiv .esri-search .esri-search__input-container, #viewDiv .esri-search .esri-search__form { min-height: var(--control-size); background: transparent; } #viewDiv .esri-search .esri-search__input { height: var(--control-size); padding: 0 4px; border: none !important; border-radius: 999px !important; background: transparent; color: var(--text-main); font-size: 14px; } #viewDiv .esri-search .esri-search__input::placeholder { color: var(--text-muted); opacity: 1; } #viewDiv .esri-search .esri-widget--button { background: transparent; color: var(--text-muted); } #viewDiv .esri-search .esri-widget--button:hover { color: var(--accent); } /* Layerliste: ruhige Liste mit Trennlinien statt einzelner Kästen */ #viewDiv .esri-layer-list { padding: 6px; background-color: var(--surface); } #viewDiv .esri-layer-list__item { margin: 0; border: none; border-bottom: 1px solid var(--border-soft); background-color: transparent; } #viewDiv .esri-layer-list__item:last-child { border-bottom: none; } #viewDiv .esri-layer-list__item-container { border-radius: var(--radius-sm); transition: background-color var(--transition); } #viewDiv .esri-layer-list__item-container:hover { background-color: var(--accent-soft); } #viewDiv .esri-layer-list__item-title { font-size: 14px; font-weight: 500; } /* Übersichtskarte: Schließen-Knopf kleiner */ #viewDiv #cOverview_closeOverview { width: 28px; height: 28px; } /*--------------------------------------------------------------------------------------------------------------------*/ /*Ausgeklappte Widgets: ein einheitliches Panel (Titel, Reiter, Felder, Knöpfe) für Basiskarten, Layer, Legende,*/ /*Drucken, Skizzen, Messen und Download. Nur Darstellung – Aufbau und Funktionen der Widgets bleiben unverändert.*/ /*--------------------------------------------------------------------------------------------------------------------*/ /* Panel-Rahmen */ #viewDiv .esri-ui-corner .esri-expand__content { border: 1px solid var(--border-soft); border-radius: 14px; background-color: var(--panel-bg); box-shadow: var(--shadow-lg); color: var(--text-main); } /* Esri begrenzt die Panel-Höhe (je nach Fenstergröße): Titel + Inhalt als Spalte, der Inhalt scrollt innerhalb */ #viewDiv .esri-ui-corner .esri-expand__content--expanded { display: flex; flex-direction: column; } #viewDiv .esri-expand__content--expanded > * { flex: 0 1 auto; min-height: 0; } #viewDiv #cPlotWidget, #viewDiv #cSketchWidget, #viewDiv #cMeasurementWidget, #viewDiv #cDownloadWidget { overflow-x: hidden; overflow-y: auto; } #viewDiv .layerListWrapper { display: flex; flex-direction: column; } #viewDiv .layerListWrapper > div:first-child { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; } #viewDiv .layerListWrapper .esri-layer-list { flex: 1 1 auto; min-height: 0; } /* Panel-Titel (aus dem Inhalt abgeleitet, damit kein Widget umgebaut werden muss) */ #viewDiv .esri-expand__content::before { display: block; padding: 14px 16px 2px; color: var(--text-main); font-size: 15px; font-weight: 700; line-height: 20px; letter-spacing: -0.01em; } #viewDiv .esri-expand__content:has(.esri-basemap-gallery)::before { content: "Basiskarten"; } #viewDiv .esri-expand__content:has(.layerListWrapper)::before { content: "Layer"; } #viewDiv .esri-expand__content:has(.esri-legend)::before { content: "Legende"; } #viewDiv .esri-expand__content:has(#cPlotWidget)::before { content: "Drucken"; } #viewDiv .esri-expand__content:has(#cSketchWidget)::before { content: "Skizzen"; } #viewDiv .esri-expand__content:has(#cMeasurementWidget)::before { content: "Messen"; } #viewDiv .esri-expand__content:has(#cDownloadWidget)::before { content: "Kartendownload"; } /* Inhalte liegen direkt auf dem Panel (keine eigenen Kästen, Schatten oder Hintergründe mehr) */ #viewDiv .esri-expand__content .esri-basemap-gallery, #viewDiv .esri-expand__content .esri-legend, #viewDiv .esri-expand__content .layerListWrapper, #viewDiv .esri-expand__content .esri-layer-list, #viewDiv #cPlotWidget, #viewDiv #cSketchWidget, #viewDiv #cMeasurementWidget, #viewDiv #cDownloadWidget, #viewDiv #cPlotWidget_inner, #viewDiv #csketchWidget_Inner, #viewDiv #cMeasurementWidget_inner, #viewDiv #cDownloadWidget_inner { border-radius: 0; background-color: transparent; box-shadow: none; } #viewDiv #cPlotWidget, #viewDiv #cSketchWidget, #viewDiv #cMeasurementWidget, #viewDiv #cDownloadWidget { padding: 10px 14px 14px; font-size: 14px; color: var(--text-main); } /* --- Reiter als Segment-Schalter (Drucken/Screenshot, Punkt/Linie/…, Strecke/Fläche, Rechteck/Polygon/Log) --- */ #viewDiv #cPlotWidget_tab, #viewDiv .csketchWidget_tab, #viewDiv .cMeasurementWidget_tab, #viewDiv .cDownloadWidget_tab { display: flex; gap: 2px; margin-bottom: 12px; padding: 3px; overflow: visible; border-radius: 10px; background-color: var(--panel-inset); } #viewDiv #cPlotWidget_tab button, #viewDiv .csketchWidget_tab button, #viewDiv .cMeasurementWidget_tab button, #viewDiv .cDownloadWidget_tab button { flex: 1 1 0; float: none; width: auto; min-width: 0; height: 32px; padding: 0 6px; border: none; border-radius: 8px; background-color: transparent; color: var(--text-muted); font-size: 13.5px; font-weight: 600; white-space: nowrap; transition: background-color var(--transition), color var(--transition), box-shadow var(--transition); } #viewDiv #cPlotWidget_tab button:hover, #viewDiv .csketchWidget_tab button:hover, #viewDiv .cMeasurementWidget_tab button:hover, #viewDiv .cDownloadWidget_tab button:hover { padding-top: 0; border: none; background-color: transparent; color: var(--text-main); } #viewDiv #cPlotWidget_tab button.active, #viewDiv .csketchWidget_tab button.active, #viewDiv .cMeasurementWidget_tab button.active, #viewDiv .cDownloadWidget_tab button.active { padding-top: 0; border: none; background-color: var(--segment-active); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.16); color: var(--text-main); } /* Platzhalter-Element am Ende der alten Reiterleiste wird nicht mehr gebraucht */ #viewDiv #cPlotWidget_tab > div, #viewDiv .csketchWidget_tab > div, #viewDiv .cMeasurementWidget_tab > div, #viewDiv .cDownloadWidget_tab > div { display: none; } /* --- Abschnitte: Beschriftung klein und gedämpft, Felder darunter --- */ #viewDiv #cPlotWidget_innerBox, #viewDiv .cDownloadWidget_innerBox, #viewDiv .cPlotWidget_Sections { margin: 0; padding: 0; border: none; border-radius: 0; background-color: transparent; color: var(--text-muted); font-size: 12.5px; font-weight: 600; } #viewDiv #cPlotWidget_innerBox ~ #cPlotWidget_innerBox { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-soft); } #viewDiv .cPlotWidget_tabcontent, #viewDiv .cDownloadWidget_tabcontent, #viewDiv .cMeasurementWidget_tabcontent, #viewDiv .csketchWidget_tabcontent { border: none; color: var(--text-main); } #viewDiv .cMeasurementWidget_tabcontent { padding: 0; } #viewDiv .csketchWidget_tabcontent { padding: 0; } /* --- Eingabefelder und Auswahllisten --- */ #viewDiv .cPlotWidget_select, #viewDiv .cPlotWidget_input, #viewDiv .cDownloadWidget_select, #viewDiv .cDownloadWidget_input, #viewDiv #csketchWidget_svgTextValue, #viewDiv #csketchWidget_svgPointSizeInput, #viewDiv #csketchWidget_svgTextSizeInput, #viewDiv #csketchWidget_lineStyle, #viewDiv #cDownloadWidget_koordinatenTextarea, #viewDiv #cDownloadWidget_protokollDiv { height: 36px; margin: 4px 0 6px; padding: 0 10px; border: 1px solid var(--field-border); border-radius: 8px; background-color: var(--field-bg); color: var(--text-main); font-family: 'Inter', Arial, sans-serif; font-size: 14px; font-weight: 400; transition: border-color var(--transition), box-shadow var(--transition); } #viewDiv .cPlotWidget_select, #viewDiv .cDownloadWidget_select, #viewDiv #csketchWidget_lineStyle { -webkit-appearance: none; appearance: none; padding-right: 32px; background-image: var(--chevron); background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; cursor: pointer; } /* Aufgeklappte Auswahlliste (Drucken, Kartendownload, Skizzen) als moderne Karte statt der blauen System-Liste. Nutzt "appearance: base-select" (Chrome/Edge ab Version 135); ältere Browser zeigen weiter die System-Liste. Es bleibt ein normales