//Cloudogu EcoSystem Docs

Whitelabeling-Archiv

Ein Whitelabeling-Archiv muss von einer vom Whitelabeling-Dogu erreichbaren Netzwerkadresse gehostet werden. Zum Beispiel kann es über das Sonartype Nexus Dogu in einem raw Repository gehostet werden.

Aufbau des Whitelabeling-Archiv

Das Whitelabeling-Archiv besteht aus einem Zip-Archiv, das eine main.css im Root des Archivs besitzt. Optional können Bilder / Logos in einen image-Ordner abgelegt werden. Die Struktur wird dann folgendermaßen aussehen:

whitelabeling.zip
├─ main.css (notwendig)
└─ image/ (optional)
   └─ ihr-eigenes-logo.png (optional, beliebige Dateinamen möglich)

Aufbau von main.css

Die Datei main.css enthält Variablen, um die u.a. Farben und Bilder anzupassen.
Außerdem sind hier auch dogu-spezifische Variablen (z.B. für das CAS-Dogu) enthalten

Eine vollständige main.cssmit allen Variablen ist hier zu finden.

Farben

Diese Variablen geben die allgemeinen Farben an die im CES verwendet werden. Sie ermöglichen Styleänderung u.A. im Warp-Menü, den CAS-Seiten (Login/Logout), oder der Dogu-Starting-Seite.

Farbe Variablenname Beschreibung
Marke --ces-color-brand Farbe wird für Akzente benutzt (z.B. Knöpfe, Trennlinien)
Erfolg --ces-color-success Farbe für die Hervorhebung von Erfolgsstatus
Gefahr --ces-color-danger Farbe für Warnungen und potentiell gefährliche Operationen
Warnung --ces-color-warning Farbe für Fehlermeldungen
Neutral --ces-color-neutral
Hintergrund --ces-color-default-background Normale Hintergrundfarbe
--ces-color-default-focus-inner Ergänzende Fokusfarbe für Kontrast zu Nicht-Standard-Hintergründen
Fokus --ces-color-default-focus-outer Umrandungsfarbe von fokussierten Elementen, z.B Links, Knöpfe
Text --ces-color-default-text Farbe von Standardtext
--ces-color-inverted-text
Bilder

Diese Variablen geben die allgemeinen Bilder an die im CES verwendet werden, wie zum Beispiel das Standard-CES-Logo.

Variablenname Beschreibung
--ces-logo-default Das Standard-Logo im CES. Wird u.a. auf der CAS Login-Seite verwendet.
--ces-logo-default-ratio Das Seitenverhältnis des Standard-Logos.
CAS spezifische Variablen

Diese Variablen ermöglichen eine Styleänderung der CAS-Seiten, wie zum Beispiel die Login- und die Logout-Seite.

Variablenname Beschreibung
--cas-config-logo-background Die Hintergrundfarbe des Logos im CAS.
Fehler-Seiten

Diese Variablen ermöglichen eine Styleänderung der Fehler-Seiten. Dazu gehören die folgenden Seiten:

  • "Dogu startet"-Seite: Wenn ein Dogu zurückmeldet, dass es während des Starts noch nicht betriebsbereit ist
  • "Wartungsmodus"-Seite: Wenn der Wartungsmodus des Ecosystems aktiv ist
  • "Seite nicht gefunden - 404": Wenn eine Seite nicht im Ecosystem vorhanden ist
  • Allgemeine Fehler: weitere Fehlerseiten, u. A. für 401, 403, 500, 502, ...

Einige der Variablen haben als Standardwert wiederum den Verweis auf eine andere Variable. Somit ist es möglich den Wert der Variable allgemein zu verändern, oder spezifisch zu setzen in dem die entsprechende ces-error-Variable verwendet wird.

Variablenname Standardwert Beschreibung
--ces-error-color --ces-color-brand Die Textfarbe der Fehler-Seite.
--ces-error-button-color-bg --ces-error-color Die Farbe des Buttons auf der Fehler-Seite.
--ces-error-button-color-text --ces-color-color-inverted-text Die Textfarbe des Buttons auf der Fehler-Seite.
--ces-error-button-color-hover --ces-color-brand-strong Die Hover-Farbe des Buttons auf der Fehler-Seite.
--ces-error-button-color-active --ces-color-brand-stronger Die Active-Farbe des Buttons auf der Fehler-Seite.
--ces-error-logo url("../img/forbidden.svg") Die URL zum Logo auf der Fehler-Seite.
--ces-error-logo-width 20rem Die Breite des Logos im Desktop-Modus auf der Fehler-Seite.
--ces-error-logo-height-mobile 12rem Die Höhe des Logos im Mobil-Modes auf der Fehler-Seite.
--ces-error-docs-visibility visible Gibt an ob der Doku-Lin auf Fehler-Seite angezeigt wird. (visible / hidden)

Für folgende Fehlerseiten können zusätzlich eigene Logos konfiguriert werden

Dogu-Starting
Variablenname Standardwert Beschreibung
--ces-dogu-starting-logo url("../img/dogu-starting.svg") Die URL zum Logo auf der Dogu-Starting-Seite.
--ces-dogu-starting-logo-animated url("../img/dogu-starting-animated.svg") Die URL zum animierten Logo auf der Dogu-Starting-Seite.
--ces-dogu-starting-logo-width var(--ces-error-logo-width) Die Breite des Logos im Desktop-Modus auf der Dogu-Starting-Seite.
--ces-dogu-starting-logo-height-mobile var(--ces-error-logo-height-mobile) Die Höhe des Logos im Mobil-Modes auf der Dogu-Starting-Seite.
Wartungsmodus
Variablenname Standardwert Beschreibung
--ces-maintenance-logo url("../img/maintenance.svg") Die URL zum Logo auf der Wartungsmodus-Seite.
--ces-maintenance-logo-width var(--ces-error-logo-width) Die Breite des Logos im Desktop-Modus auf der Wartungsmodus-Seite.
--ces-maintenance-logo-height-mobile var(--ces-error-logo-height-mobile) Die Höhe des Logos im Mobil-Modes auf der Wartungsmodus-Seite.
404-Seite
Variablenname Standardwert Beschreibung
--ces-not-floud-logo url("../img/not-floud.svg") Die URL zum Logo auf der "Nicht gefunden"-Seite.
--ces-not-floud-logo-width var(--ces-error-logo-width) Die Breite des Logos im Desktop-Modus auf der "Nicht gefunden"-Seite.
--ces-not-floud-logo-height-mobile var(--ces-error-logo-height-mobile) Die Höhe des Logos im Mobil-Modes auf der "Nicht gefunden"-Seite.
Warp-Menü

Diese Variablen ermöglichen eine Styleänderung des Warp-Menüs. Einige der Variablen haben als Standardwert wiederum den Verweis auf eine andere Variable. Somit ist es möglich den Wert der Variable allgemein zu verändern, oder spezifisch zu setzen in dem die entsprechende ces-warp-Variable verwendet wird.

Variablenname Standardwert Beschreibung
--ces-warp-logo Das Cloudogu-Logo als SVG Die URL zum Logo des Warp-Menüs (z.B.: url("./img/my-logo.svg")).
--ces-warp-logo-bg transparent Die Hintergrundfarbe des Logos im Warp-Menü.
--ces-warp-bg --ces-color-brand Die Hintergrundfarbe des Warp-Menüs.
--ces-warp-bg-hover --ces-color-brand-strong Die Hover-Farbe des Warp-Menüs.
--ces-warp-bg-active --ces-color-brand-stronger Die Active-Farbe des Warp-Menüs.
--ces-warp-border --ces-color-default-background Die Rahmenfarbe des Warp-Menüs.
--ces-warp-border-hover --ces-color-default-background Die Hover-Farbe des Rahmens im Warp-Menü.
--ces-warp-border-active --ces-color-default-background Die Active-Farbe des Rahmens im Warp-Menü.
--ces-warp-text --ces-color-inverted-text Die Textfarbe des Warp-Menüs.
--ces-warp-text-hover --ces-color-inverted-text Die Hover-Farbe des Textes im Warp-Menü.
--ces-warp-text-active --ces-color-inverted-text Die Active-Farbe des Textes im Warp-Menü.
Selector

Bei der Erstellung der eigenen main.css ist darauf zu achten den Selector :root.ces-whitelabel zu verwenden, damit die eigenen Styles eine höhere Spezifität als die default Styles haben.

Beispiel für den Selector in der main.css:

:root.ces-whitelabel {
    --ces-color-brand-stronger: #003250;
    --ces-color-brand-strong: #00426B;
    --ces-color-brand: #00629E;
    --ces-color-brand-weak: #9EDAFF;
    --ces-color-brand-weaker: #D4EDFC;

    /*...*/
} 
Beispiel main.css
:root.ces-whitelabel {

    /*  Colors  */
    --ces-color-brand-stronger: #003250;
    --ces-color-brand-strong: #00426B;
    --ces-color-brand: #00629E;
    --ces-color-brand-weak: #9EDAFF;
    --ces-color-brand-weaker: #D4EDFC;

    --ces-color-success-stronger: #0A2913;
    --ces-color-success-strong: #145226;
    --ces-color-success: #1F7A38;
    --ces-color-success-weak: #85E09E;
    --ces-color-success-weaker: #EBFAEF;

    --ces-color-danger-stronger: #521414;
    --ces-color-danger-strong: #7A1F1F;
    --ces-color-danger: #CC3333;
    --ces-color-danger-weak: #EBADAD;
    --ces-color-danger-weaker: #F8EDED;

    --ces-color-warning-stronger: #3D3700;
    --ces-color-warning-strong: #574E00;
    --ces-color-warning: #707600;
    --ces-color-warning-weak: #FFE500;
    --ces-color-warning-weaker: #FFFACC;

    --ces-color-neutral-stronger: #333333;
    --ces-color-neutral-strong: #4D4D4D;
    --ces-color-neutral: #666666;
    --ces-color-neutral-weak: #CCCCCC;
    --ces-color-neutral-weaker: #F5F5F5;

    --ces-color-default-background: #FFFFFF;
    --ces-color-default-focus-inner: #FFFFFF;
    --ces-color-default-focus-outer: #CC14CC;
    --ces-color-default-text: #0D1C26;
    --ces-color-inverted-text: #FCFCFD;

    /*  Images  */

    /* The base64 encoded default logo */
    --ces-logo-default: url('data:image/svg+xml;base64,PHN2ZyBpZD0iZ2VzY2hsb3NzZW5lc19FbGVtZW50IiBkYXRhLW5hbWU9Imdlc2NobG9zc2VuZXMgRWxlbWVudCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgODM4LjY3IDUxMy43NyI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiMyNGEyZGN9PC9zdHlsZT48L2RlZnM+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNNzIxLjMxIDMyOS4zNmE2MC42NiA2MC42NiAwIDAgMS0xMTcuMSAyMi4yNGwuNTMgMi41MS0xMTguMSAyMy4zN2E2Ny43MyA2Ny43MyAwIDAgMS0xMzUuNC4xN2wtMTE5LTIzLjU0YTYwLjY4IDYwLjY4IDAgMSAxIDUuMjctMjQuNzVsMTE3LjMgMjQuMTRhNjcuODMgNjcuODMgMCAwIDEgNTEuNjQtNDQuNjRoLS4wNnYtNzAuMjVhNjAuNjggNjAuNjggMCAxIDEgMjQuMjUuMTV2NzBhNjguMjEgNjguMjEgMCAwIDEgNTIuMjcgNDQuNjFsMTE2LjUzLTI0IC42IDIuODFjLS4wNS0uOTMtLjA3LTEuODctLjA3LTIuODFhNjAuNjYgNjAuNjYgMCAxIDEgMTIxLjMxIDB6Ii8+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNNzQyIDE3My41MWMtNTUuMzItMjUuODgtMTA2LjUtMjMtMTQ3LjY1LTYuMTgtMi00Mi42Ny0yMC44OC04My43Ni01Ny0xMThDNDY3LjExLTE3LjE4IDM1My44Ni0xMSAyODcuNTUgNjIuNzVjLTI3LjggMzAuOTMtNDIgNjcuNDEtNDQuMiAxMDQuNTYtNDEuMTMtMTYuODQtOTIuMy0xOS42Ny0xNDcuNTkgNi4yLTcwLjI0IDMyLjg2LTEyNS42IDEzNi4xMi03NS4wNyAyMzYuMTQgMzYuODIgNzIuOSAxMjguNDkgMTA3LjU3IDE4NyAxMDEuNjRsNDIzLjU3LjEzQzY4OS44MSA1MTYuNzMgNzgwLjQ2IDQ4MiA4MTcgNDA5LjY1YzUwLjU1LTEwMC4wMi00LjgxLTIwMy4yOC03NS0yMzYuMTR6bTE0LjU5IDIwOS4yM2MtMjEuNTUgMzkuNy01OC43NSA1NC43My0xMDAuNzcgNTguNTRINTA2LjU5Yy0xOS4zOSAyNC40NS00Ny4zNCA0My41OC04Ny41NSA0My41OC0zNS44MyAwLTY2LjQyLTE1LjI1LTg3LjU1LTQzLjU4bC0xNDggLjE0Yy00Mi42Ni0zLjU4LTgwLjUyLTE4LjQ5LTEwMi4zNC01OC42OC0zMS44NC01OC42Ni02LjU4LTEyNS40NSA0OC4zNy0xNTIuMzJzMTIyLTEuODUgMTQ4IDU0LjY3YTExNC4yOCAxMTQuMjggMCAwIDEgNi4xNyAxOC4xNnM0LjIzLTUgNC45My01Ljc3YzIwLjQ2LTIxLjU3IDMzLjUzLTI5IDUzLjMyLTM5LjkyYTkxLjY5IDkxLjY5IDAgMCAxLTEzLjc4LTE2LjM2Yy0uNTctMS0xLTEuODEtMS4yMy0yLjEyLTIzLjE2LTM0LjMyLTI2LjcxLTg5LjgyIDkuMjQtMTMxLjg0QzM3NS41MiA2MS4yIDQ0Mi42OCA1Ni45MyA0OTAgOTUuNjZjMzEuODggMjYuMDggNTIuMTkgNzkuNTYgMjcuNjMgMTMxLjhsLS4wNy4xcy04LjU0IDE3LjkzLTIxLjc4IDMwYzE5Ljc5IDExIDMyLjg2IDE4LjM1IDUzLjMyIDM5LjkyLjcuNzQgNC44OCA1LjczIDQuOTMgNS43N2ExMTUuMyAxMTUuMyAwIDAgMSA2LjE3LTE4LjE2YzI1LjkyLTU2LjUyIDkzLTgxLjU0IDE0Ny45NS01NC42N3M4MC4yMyA5My42NiA0OC4zOSAxNTIuMzJ6Ii8+PC9zdmc+');

    /*
     * The ratio of ces-logo-default image (width/height). This variable is important to scale the image correctly in e.g. cas.
     * Whenever the image is change, the ration variable has to be set as well
     */
    --ces-logo-default-ratio: 1.63;

    /*  CAS specific variables  */
    --cas-config-logo-background: transparent;

    /*  Dogu-Starting-Page specific variables  */
    --ces-dogu-starting-color: var(--ces-color-brand, #00629E);
    --ces-dogu-starting-button-color-bg: var(--ces-dogu-starting-color, #00629E);
    --ces-dogu-starting-button-color-text: var(--ces-color-inverted-text, #FCFCFD);
    --ces-dogu-starting-button-color-hover: var(--ces-color-brand-strong, #00426B);
    --ces-dogu-starting-button-color-active: var(--ces-color-brand-stronger, #003250);

    --ces-dogu-starting-logo-animated: url("./image/dogu-starting-animated.svg");
    --ces-dogu-starting-logo: url("./image/dogu-starting.svg");
    --ces-dogu-starting-logo-width: 20rem;
    --ces-dogu-starting-logo-height-mobile: 12rem;

    --ces-dogu-starting-docs-visibility: visible;

    /*  Warp-Menu specific variables  */
    --ces-warp-logo: url('data:image/svg+xml;base64,PHN2ZyBpZD0iZ2VzY2hsb3NzZW5lc19FbGVtZW50IiBkYXRhLW5hbWU9Imdlc2NobG9zc2VuZXMgRWxlbWVudCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgODM4LjY3IDUxMy43NyI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiNGRkZGRkZ9PC9zdHlsZT48L2RlZnM+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNNzIxLjMxIDMyOS4zNmE2MC42NiA2MC42NiAwIDAgMS0xMTcuMSAyMi4yNGwuNTMgMi41MS0xMTguMSAyMy4zN2E2Ny43MyA2Ny43MyAwIDAgMS0xMzUuNC4xN2wtMTE5LTIzLjU0YTYwLjY4IDYwLjY4IDAgMSAxIDUuMjctMjQuNzVsMTE3LjMgMjQuMTRhNjcuODMgNjcuODMgMCAwIDEgNTEuNjQtNDQuNjRoLS4wNnYtNzAuMjVhNjAuNjggNjAuNjggMCAxIDEgMjQuMjUuMTV2NzBhNjguMjEgNjguMjEgMCAwIDEgNTIuMjcgNDQuNjFsMTE2LjUzLTI0IC42IDIuODFjLS4wNS0uOTMtLjA3LTEuODctLjA3LTIuODFhNjAuNjYgNjAuNjYgMCAxIDEgMTIxLjMxIDB6Ii8+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNNzQyIDE3My41MWMtNTUuMzItMjUuODgtMTA2LjUtMjMtMTQ3LjY1LTYuMTgtMi00Mi42Ny0yMC44OC04My43Ni01Ny0xMThDNDY3LjExLTE3LjE4IDM1My44Ni0xMSAyODcuNTUgNjIuNzVjLTI3LjggMzAuOTMtNDIgNjcuNDEtNDQuMiAxMDQuNTYtNDEuMTMtMTYuODQtOTIuMy0xOS42Ny0xNDcuNTkgNi4yLTcwLjI0IDMyLjg2LTEyNS42IDEzNi4xMi03NS4wNyAyMzYuMTQgMzYuODIgNzIuOSAxMjguNDkgMTA3LjU3IDE4NyAxMDEuNjRsNDIzLjU3LjEzQzY4OS44MSA1MTYuNzMgNzgwLjQ2IDQ4MiA4MTcgNDA5LjY1YzUwLjU1LTEwMC4wMi00LjgxLTIwMy4yOC03NS0yMzYuMTR6bTE0LjU5IDIwOS4yM2MtMjEuNTUgMzkuNy01OC43NSA1NC43My0xMDAuNzcgNTguNTRINTA2LjU5Yy0xOS4zOSAyNC40NS00Ny4zNCA0My41OC04Ny41NSA0My41OC0zNS44MyAwLTY2LjQyLTE1LjI1LTg3LjU1LTQzLjU4bC0xNDggLjE0Yy00Mi42Ni0zLjU4LTgwLjUyLTE4LjQ5LTEwMi4zNC01OC42OC0zMS44NC01OC42Ni02LjU4LTEyNS40NSA0OC4zNy0xNTIuMzJzMTIyLTEuODUgMTQ4IDU0LjY3YTExNC4yOCAxMTQuMjggMCAwIDEgNi4xNyAxOC4xNnM0LjIzLTUgNC45My01Ljc3YzIwLjQ2LTIxLjU3IDMzLjUzLTI5IDUzLjMyLTM5LjkyYTkxLjY5IDkxLjY5IDAgMCAxLTEzLjc4LTE2LjM2Yy0uNTctMS0xLTEuODEtMS4yMy0yLjEyLTIzLjE2LTM0LjMyLTI2LjcxLTg5LjgyIDkuMjQtMTMxLjg0QzM3NS41MiA2MS4yIDQ0Mi42OCA1Ni45MyA0OTAgOTUuNjZjMzEuODggMjYuMDggNTIuMTkgNzkuNTYgMjcuNjMgMTMxLjhsLS4wNy4xcy04LjU0IDE3LjkzLTIxLjc4IDMwYzE5Ljc5IDExIDMyLjg2IDE4LjM1IDUzLjMyIDM5LjkyLjcuNzQgNC44OCA1LjczIDQuOTMgNS43N2ExMTUuMyAxMTUuMyAwIDAgMSA2LjE3LTE4LjE2YzI1LjkyLTU2LjUyIDkzLTgxLjU0IDE0Ny45NS01NC42N3M4MC4yMyA5My42NiA0OC4zOSAxNTIuMzJ6Ii8+PC9zdmc+');
    --ces-warp-logo-bg: transparent;

    --ces-warp-bg: var(--ces-color-brand);
    --ces-warp-bg-hover: var(--ces-color-brand-strong);
    --ces-warp-bg-active: var(--ces-color-brand-stronger);

    --ces-warp-border: var(--ces-color-default-background);
    --ces-warp-border-hover: var(--ces-color-default-background);
    --ces-warp-border-active: var(--ces-color-default-background);

    --ces-warp-text: var(--ces-color-inverted-text);
    --ces-warp-text-hover: var(--ces-color-inverted-text);
    --ces-warp-text-active: var(--ces-color-inverted-text);
}