Dunkles und modernes Design
- About
- Screenshots
- Unterstützte Schulen
- Installation
- Einstellungen
5.1 Optionen - Updates
- Deaktivieren/Aktivieren des DarkModes
- Technische Details
8.1 Allgemeines
8.2 Variablen
8.3 Dateinamen
Dies ist ein alternatives dunkles Design für das RaMa-Portal (und weitere Schulen). Das ganze basiert auf Vorgaben des Material-Themes und ist in CSS und JS geschrieben.
Der DarkMode wird über das Browser-Addon Custom Style Script eingebunden, mit welchem der DarkMode einfach aktiviert und deaktiviert werden kann. Es werden einige Grafik-Bugs der normalen Oberfläche behoben und das Design ist moderner und runder. Sowohl die normale Oberfläche, als auch die Lernumgebung sind in dunklem Design.
Bugreports und Vorschläge können unter Issues geäußert werden. Support/Hilfe bei der Installation biete ich über Discord an: LoxxoHD#9204
-
Rabanus-Maurus-Gymnasium Mainz (https://portal.rama-mainz.de)
-
Maria Ward-Schule Mainz (https://portal.mws-mainz.de)
-
Otto-Schott-Gymnasium Mainz-Gonsenheim (https://portal.osg-mainz.de)
-
Gymnasium am Kurfürstlichen Schloss Mainz (https://portal.schloss-online.de)
-
Gymnasium Mainz-Oberstadt (https://portal.gymnasium-oberstadt.de)
-
Gymnasium Theresianum Mainz (https://portal.theresianum-mainz.de)
-
IGS Mainz-Bretzenheim (https://portal.igsmz.net)
-
IGS Anna Seghers Mainz (https://portal.igsas.de)
Hinweis: Kursiv geschriebener Text markiert immer Eigennamen oder Text, den du eingeben sollst.
-
Installiere das Addon Custom Style Script für deinen Browser (Firefox, Chrome, Opera)
-
Gehe in deinem Browser oben rechts bei den Addons auf das Symbol </> (das Addon-Menü)
-
Gehe auf Open Options Page
-
Trage bei III. Code folgendes in die Spalten ein. Wichtig: Wähle die Links aus und kopiere sie. Drag&Drop erzeugt einen Fehler! (siehe Bild)
| URL | SCRIPT | STYLE (CSS) |
|---|---|---|
| https://portal.rama-mainz.de | - | - |
- Klicke auf das graue Plus unter der Tabelle
- Füge nun bei Item #1 die Links in die folgenden Spalten ein. Wichtig: Wähle die Links aus und kopiere sie. Drag&Drop erzeugt einen Fehler!
- Wiederhole die Schritte 4-6 mit den folgenden Links
| URL | SCRIPT LINK / CODE | STYLE LINK / CODE |
|---|---|---|
| https://portal.rama-mainz.de/edu | - | https://cdn.statically.io/gh/HackerFrosch/RaMa-Portal/master/Lernumgebung%20DarkMode.css |
Der DarkMode verfügt über einige Einstellungen, mit dem sich der DarkMode individuell gestalten lässt. Diese werden auch nach dem schließen der Website und des Browsers lokal gespeichert. Es werden keine Daten an irgendwelche Server weitergeleitet!
Die Einstellungen lassen sich unten in der Referenz-Leiste öffnen und entweder mit dem Kreuz oder per esc schließen.
1. Hintergrund-Bild
Wenn aktiviert, wird das Hintergrund-Bild angezeigt, ansonsten wird nur eine Farbe angezeigt.
Standardwert: aktiviert
2. Hintergrund-Bild Link
Link zu einem belibigen Hintergrund-Bild.
Standardwert: https://i.ibb.co/sKLNP49/rama-bkgr.png
2. Primärfarbe
Legt die Farbe für alle Elemente mit einer Akzentfarbe fest.
Standardwert: #9c2132
3. Hoverfarbe
Legt die Farbe für Elemente mit einer Akzentfarbe beim darüberfahren fest.
Standardwert: #d2545b
4. Eigene Nachrichten-Farbe
Legt die Farbe für eigene Chat-Nachrichten fest.
Standardwert: #43a047
5. Schüler Nachrichten-Farbe
Legt die Farbe für Chat-Nachrichten von Schülern fest.
Standardwert: #424242
6. Lehrer Nachrichten-Farbe
Legt die Farbe für Chat-Nachrichten von Lehrern fest.
Standardwert: #0277bd
Der DarkMode aktualisiert sich vollautomatisch, sobald eine neue Version auf GitHub veröffentlicht wird.
- Gehe in deinem Browser auf das Symbol des Addons (</>)
- Klicke auf das große </>-Symbol
- Lade die Website neu
Das Addon Custom Style Script bindet die neusten CSS- und JS-Scripte über ein CDN direkt von GitHub ein. Die CSS-Scripte sind ein weitestgehend vollwertiger Ersatz für die normalen Portal-Scripte.
Durch die Einbindung per CDN-Links wird automatisch die neuste Version eingebunden, was manuelle Updates überflüssig macht.
Einige Regeln müssen mit der Eigenschaft !important überschrieben werden, damit sie angewendet werden.
primary-color
Standardwert: #9c2132
Definiert die primäre Design-Farbe.
primary-hover-color
Standardwert: #d2545b
Definiert die Farbe einer Hover-Animation von einem Primärfarbenen Element.
message-self-color
Standardwert: #43a047
Definiert die Hintergrundfarbe für eigene Chat-Nachrichten.
message-student-color
Standardwert: #424242
Definiert die Hintergrundfarbe für Chat-Nachrichten von Schülern.
message-teacher-color
Standardwert: #0277bd
Definiert die Hintergrundfarbe für Chat-Nachrichten von Lehrern.
chat-input-color
Standardwert: #484848
Definiert die Hintergrundfarbe für das Nachrichten-Eingabefeld.
success-color
Standardwert: #09af00
Definiert die Hintergrundfarbe für Success-Dialoge.
transition-duration
Standardwert: 0.5s
Definiert die normale Übergangsdauer für Animationen.
1dp-shadow
Standardwert: 2px 4px 4px hsl(0deg 0% 0% / 0.6)
Definiert den Box-Shadow für die erste Elevation-Stufe.
1dp-shadow-hover
Standardwert: 2px 4px 8px hsl(0deg 0% 0% / 0.6)
Definiert den Box-Shadow für die erste Elevation-Stufe bei einer Hover-Animation.
2dp-shadow
Standardwert: 4px 8px 8px hsl(0deg 0% 0% / 0.5)
Definiert den Box-Shadow für die zweite Elevation-Stufe.
Portal DarkMode.css
Code, der für die normale Portal-Oberfläche gilt.
Lernumgebung DarkMode.css
Code, der nur für das Design der Lernumgebung gilt.
Portal add.js
Code, der den HTML-DOM des Logins bearbeitet, um bestimmte Elemente zu ändern.