`default.css` – Beispiele¶

Diese Seite zeigt konkrete default.css-Beispiele in aufsteigender Einfachheit. Zu jedem Beispiel sind zwei Screenshots (TOC und Tools) sowie ein CSS-Snippet angeführt.

Modern: Primärfarbe plus Header-Akzent¶

Nur die Primärfarbe wird gesetzt, die helle Variante wird automatisch berechnet.

body, .webgis-container {
    --webgis-brand-primary:       #3b8cef;
}

Modern: nur Primär und Lightfarbe¶

(STMK)

Hier wird die Helle Farbe nicht automatisch berechnet, sondern explizit gesetzt.

Beispiel modern_with_custom_light - Tools

body, .webgis-container {
    --webgis-brand-primary:       #1f744f;
    --webgis-brand-primary-light: #a5c9b7;
    
    /* Text */
    --webgis-ui-text-selected: #000;
    
    /* Border */
    --webgis-ui-border-width-item-selected: 2px;
}

Flat: Kein Underline bei selektieren Items¶

(BGL)

Primär- und Light-Farbe werden gleich gesetzt. Dadurch entsteht ein reduzierter, flacher Look.

body, .webgis-container {
    --webgis-brand-primary:       #85abc4;
    --webgis-brand-primary-light: var(--webgis-brand-primary);
    
    /* Text */
    --webgis-ui-text-selected: #000;
    
    /* Border */
    --webgis-ui-border-width-item-selected: 0px;
}

Zwei Primärfarben¶

(NÖ)

Die helle Variante wird explizit gesetzt und nicht automatisch berechnet. Das gibt mehr Kontrolle über Lesbarkeit und Kontrast.

Beispiel modern_two_primary_colors - TOC

Beispiel modern_two_primary_colors - Tools

body, .webgis-container {
    --webgis-brand-primary:       #ffd500;
	--webgis-brand-primary2:      #005a9a;
    --webgis-brand-primary-light: #eee;
    
    /* Text */
    --webgis-ui-text-selected: #000;
    --webgis-ui-text-header: var(--webgis-brand-primary2);

    /* Border */
    --webgis-ui-border-width-item-selected: 3px;
}

.webgis-tabs-tab-selected,
.webgis-ui-option-selected,
.webgis-toolbar-tabs .webgis-toolbar-tab.selected,
.webgis-toolbox-tool-item.selected {
    border-color: var(--webgis-brand-primary2);
}

.webgis-modal-title, 
.webgis-modal-title, 
.webgis-dockpanel-title, 
.webgis-dockpanel-title {
   border-color: var(--webgis-brand-primary2);
}

Textfarbe von selektierten Items anpassen¶

(OÖ)

Neben Brand-Farben wird hier auch --webgis-ui-text-selected angepasst, um die Lesbarkeit auf hellen Flächen zu verbessern.

Beispiel modern_with_custom_light2 - TOC

Beispiel modern_with_custom_light2 - Tools

body, .webgis-container {
    --webgis-brand-primary:       #ef3b42;
    --webgis-brand-primary-light: #ccc;
    
    /* Text */
    --webgis-ui-text-selected: #414753;
    /* Header (optional) */
    /* --webgis-ui-text-header: #414753; */
    
    /* Border */
    --webgis-ui-border-width-item-selected: 2px;
}

Dialog Header anpassen¶

(VBG)

Zusätzlich zur Brand-Farbe werden Dialog-/Panel-Header gezielt über --webgis-ui-surface-header und --webgis-ui-text-header gestaltet.

Beispiel modern_with-custom-headers - TOC

Beispiel modern_with-custom-headers - Tools

body, .webgis-container {
    --webgis-brand-primary:       #e60000;
    --webgis-brand-primary-light: #ddd/*#aaa*/;
    
    /* Text */
    --webgis-ui-text-selected: #000;
    
    /* Border */
    --webgis-ui-border-width-item-selected: 2px;
	
	/* optional: headers of dialogs */
	--webgis-ui-surface-header: var(--webgis-brand-primary-light);
    --webgis-ui-text-header: #333;
}

Presentation-Container hervorheben¶

(KTN)

Dieses Beispiel ergänzt die Standard-Variablen um ein gezieltes Styling für nicht selektierte Presentation-Container (.webgis-presentation_toc-title).

Beispiel modern_with_presention_containers - TOC

Bemerkung

Für dieses Beispiel liegt derzeit kein *_tools.jpg vor. Das ist optional.

body, .webgis-container {
    --webgis-brand-primary:       #6a7981;
    --webgis-brand-primary-light: #ffdc00;
    
    /* Text */
    --webgis-ui-text-selected: #000;
    
    /* Border */
    --webgis-ui-border-width-item-selected: 2px;
}

/* optional: different color for unselected presention containers */
.webgis-presentation_toc-title {
    background-color: #ffffb3;
}

default.css – Beispiele¶