Habe in meiner Not schon Zeile 125 von 94 auf 107 vw geändert, damit zumindest die Umrandung passt.
Mal etwas grundsätzliches zu dem Code. Wird der Thread von Anfang an gelesen, so wird jeder erkennen, dass auch ich erst lernen musste damit umzugehen. Und nur über die Hilfe von @2002Andreas und @milupo ist daraus geworden, was es ist.
Jetzt nochmal zur Anpassung für unterschiedliche Bildschirmauflösungen, was überhaupt nicht schlimm ist, wenn ich die entsprechenden Werte anpasse. Wo finde ich sie?
Um die Container nach meinem Geschmack anzupassen gibt es folgenden Block:
addon-list addon-card > .addon.card
{
width: 94vw !important; /* Ausdehnung der Container (weiße Boxen) zum rechten Rand hin */
margin-bottom: 5px !important; /* Abstand zwischen den Containern */
height: 65px !important; /* Höhe der Container */
border: 1px solid grey !important; /* Umrandung der Container mit Farbauswahl */
}
Die 94vw sind bei mir passend für die 1920x1080. An diesem Wert muss geschraubt werden, damit ich die Ausdehnung zum rechten Rand hin verändern kann, so wie ich es haben möchte. Hinter den übrigen Werten habe ich eingefügt was sie bewirken.
So dann kommen wir zu den Button auf der rechten Seite. Wie in die richtige Position bringen? Dazu als Beispiel den Button "Deaktiviern":
/**** Button Deaktivieren ****/
addon-list section addon-card div.card.addon div.addon-card-collapsed div.more-options-menu addon-options panel-list panel-item[action="toggle-disabled"] {
margin-left: -10px !important;
padding-right: 20px !important;
background: gainsboro !important; /* Hintergrundfarbe */
border-radius: 60px !important;
}
addon-list section addon-card div.card.addon div.addon-card-collapsed div.more-options-menu addon-options panel-list panel-item[action="toggle-disabled"]:hover {
background: magenta !important; /* Farbe bei Mauskontakt */
color: white !important; /* Schriftfarbe bei Mauskontakt */
}
Alles anzeigen
Dieses ist der erste Code-Teil dafür (es gibt noch einen zweiten Block). Hier ist eigentlich nur die Farbe anzupassen, ganz nach dem eigenen Geschmack.
Dann zu dem zweiten Block für diesen Button.
addon-list section addon-card .card.addon .addon-card-collapsed .more-options-menu addon-options panel-list panel-item[action="toggle-disabled"]
{
position: absolute !important;
top: 16px !important; /* Abstand vom oberen Rand */
left: 460px !important; /* Entfernung zum rechten Rand hin */
box-shadow: inset 0 0 4px 4px #888; /* innerer Schatten im Button/ 4px die Breite/ #888 die Farbe */
}
In diesem Teil lege ich fest, wo in dem Container der Button erscheinen soll. Hinter den einzelnen Werten steht was sie bewirken.
Nach dieser Verfahrensweise muss ich dementsprechend alle anderen Button ausrichten. Andreas meinte, eine fummelige Angelegenheit. Mit Lust und Laune, und probieren geht es dann schon.
So , ich hoffe, dass es doch nun jeder hinbekommen sollte. Andere Werte habe ich auch nicht verändert.
Grüße
FuchsFan