[Showcase] Jarvis - just another remarkable vis

MCU

@miswak Zeig mal Deine Styles.

Miswak

@mcu

Bildschirmfoto 2023-03-30 um 21.14.18.png

Bildschirmfoto 2023-03-30 um 21.15.00.png

MCU

@miswak Bitte in CodeTags.

Miswak

@MCU, sorry auch gerade gemerkt, dass das etwas unpraktisch ist.

.jarvis-page-container,
.jarvis-sidebar-container,
.jarvis-sidebar-container .q-toolbar,
.jarvis-popup,
.jarvis-popup .jarvis-StateList {
	background-color: #0cbaba;
	background-image: linear-gradient(315deg, #0cbaba 0%, #380036 74%);
}

.body--dark .jarvis-header {
	background-color: rgba(0,0,0,0.2) !important;
}

.jarvis-tabs-container {
	background-color: rgba(56,0,54,0.9) !important;
}

.jarvis-widget-container {
	background-color: rgba(0,0,0,0.2) !important;
}

.body--dark .jarvis-widget {
	background: rgba(0,0,0,0.2);
}

.body--light .jarvis-widget {
	background: rgba(255,255,255,1);
}

.body--dark .jarvis-tabs-container {
	background-color: rgba(56,0,54,0.9) !important;
}

.q-table__container {
	background-color: transparent !important;
} 





/*halbtransparente Sidebar*/

.jarvis-sidebar {
	background-color: #0cbaba;
	background-image: linear-gradient(315deg, #0cbaba 0%, #661f64 74%);
	/* #661f64 old #380036*/
}

.jarvis-sidebar .items-center {
	background-color: #0cbaba;
	background-image: linear-gradient(315deg, #0cbaba 0%, #661f64 74%);
	/* #661f64 old #380036*/
}




/*runde Ecken der Widgets*/

.paper {
	border-radius: 20px;
}

.jarvis-widget {
	border-radius: 20px;
}

.jarvis-widget-container {
	border-radius: 20px;
}




/* Jalousie Schalter umkehren */

.mdi-chevron-down {
	color: transparent;
	background: url('https://api.iconify.design/mdi/chevron-up.svg?color=white') no-repeat center center / contain;
}

.mdi-chevron-up {
	color: transparent;
	background: url('https://api.iconify.design/mdi/chevron-down.svg?color=white') no-repeat center center / contain;
}




/* obere Leiste im Popup unterbinden */

.jarvis-popup .row.items-center.q-card__section.q-card__section--vert {
 display: none;
}




/* Popup Ecken runder */

.q-dialog__inner .jarvis-popup {
	border-radius: 20px;
}

MCU

@miswak Wie soll es denn im Popup aussehen?
Kannst die beiden raus nehmen:

.jarvis-popup,
.jarvis-popup .jarvis-StateList

Miswak

@mcu

eigentlich erstmal ein schlichter einfarbiger Hintergrund, eben kein Farbverlauf. Die obere Leiste im Popup habe ich ja ausgeblendet.
Sprich der mittlere Teil und die untere "Schließen Leiste" sollten ein Farbton haben. Sagen wir dunkles grau. Wenn ich die Syntax habe, kann ich den Farbton ja selbst nachträglich ändern.

Miswak

@mcu

dann verschwindet aber mein gesamter Farbverlauf im "Haupthintergrund". Den wollte ich ja eigentlich behalten. Will ja nur den Farbverlauf im Popup auschalten.

MCU

@miswak So sollte es nach dem Löschen der beiden Einträge aussehen.


.jarvis-page-container,
.jarvis-sidebar-container,
.jarvis-sidebar-container .q-toolbar {
	background-color: #0cbaba;
	background-image: linear-gradient(315deg, #0cbaba 0%, #380036 74%);
}

Miswak

@mcu
Fast am Ziel, jetzt ist die Geräte Leiste schwarz und die Schließen Leiste grau. Wo gebe ich jetzt meine Wunschfarbe ein?

Miswak

Die Farbe der Geräteleiste kann ich ändern, habe ich in Deinem Tutorial gefunden.
Jedoch noch nicht die Farbe der unteren Schließen Leiste

MCU

@miswak

.jarvis-StateListItem-Popup {
	background-color: yellow;
}

.jarvis-popup .q-card__actions {
	background-color: red;
}

Miswak

@mcu Top!! Passt, vielen Dank.

TyrionWarMage

Ich bin vor einer Weile über dieses: https://docs.theme-park.dev/ Projekt gestoplert, welches versucht vereinheitlichte Themes für diverse Self-Hosted services anzubieten. Daher habe ich mal versucht, das auch für Jarvis anzuwenden:

Nord Theme

Aquamarine:

Maroon:

Da meine CSS Skills aber eher begrenzt sind, sollte das eher als "erster Versuch gesehen werden", aber vielleicht hat ja jemand mit mehr Ahnung Lust das Template zu verfeinern? Template anbei - da ich es nicht hinbekommen hab, den import Tag zum laufen zu bekommen, muss das root template (von hier https://github.com/GilbN/theme.park/tree/master/css/theme-options) reinkopiert werden.

Jarvis Theme-Park.css