CSS-Code verkleinern

2002Andreas

Zitat von Boersenfeger

versuche ich die anderen Menüs zu entschlacken

Es geht auch noch kürzer

Wenn alle Abstände der Icons gleich sind, dann kannst du das auch pauschal in einem Code einmalig einfügen.

CSS

/*Pauschal für alle Popups in der Menübar*/
#main-menubar menupopup :is(menuitem,menu) { 
  min-height: 24px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;    
  border-width: thin !important;
  border-color: transparent !important;
  border-style: solid !important; 
  background-repeat: no-repeat !important;
  background-position: 10px 3px !important;
  padding-left: 33px !important;
}

#main-menubar menupopup :is(menuitem,menu):hover {
  border-width: thin !important;
  border-radius: 4px !important;
  border-color: #aecff7 !important;
  border-style: solid !important; 
  background-color: #ecf0f6 !important;
}

#menu_openHelp {
  background-image: url("..//Icons/2.png") !important;
}

#feedbackPage {
  background-image: url("..//Icons/1.png") !important;
}

#helpSafeMode {
  background-image: url("..//Icons/2.png") !important;
}

#troubleShooting {
  background-image: url("..//Icons/1.png") !important;
}

#help_reportSiteIssue {
  background-image: url("..//Icons/2.png") !important;
}

#troubleShooting {
  background-image: url("..//Icons/1.png") !important;
}

#menu_HelpPopup_reportPhishingtoolmenu {
  background-image: url("..//Icons/2.png") !important;
}

#aboutName {
  background-image: url("..//Icons/1.png") !important;
}

Alles anzeigen

Zeile 9 - 11 ist dann für die Icons.

FuchsFan

Zitat von 2002Andreas

Es geht auch noch kürzer

Danke auch, da habe ich wenigstens wieder Arbeit.

2002Andreas

Zitat von FuchsFan

da habe ich wenigstens wieder Arbeit

Ich bin auch am überlegen, ob ich hier auch alles auf diese kurze Form ändere.

FuchsFan

Zitat von 2002Andreas

Ich bin auch am überlegen, ob ich hier auch alles auf diese kurze Form ändere.

Also, die Arbeit mache ich mir, das hättest Du schon längst anbieten können.

Es kommt ja wieder Schmuddelwetter, genau passgerecht.

2002Andreas

Zitat von FuchsFan

die Arbeit mache ich mir

Ich bin auch schon dabei

grisu2099

Zitat von 2002Andreas

Ich bin auch am überlegen, ob ich hier auch alles auf diese kurze Form ändere.

Ich auch...

2002Andreas

Zitat von 2002Andreas

Ich bin auch schon dabei

Ich musste den ersten Teil vom pauschalen Code noch weiter anpassen.

CSS

 menupopup :is(menuitem, menu, menuitem label.menu-text, menu label.menu-text) { 
  padding-left: 21px !important;
  background-repeat: no-repeat !important;
  background-position: 9px 3px ;
  background-size: 15px 15px !important;  
}

In Zeile 4 darf außerdem kein !important rein, damit man für einzelne Einträge auch einen eigenen anderen Abstand einfügen kann.

Machbar ist das also alles mit dem ganz kurzen Code.

Ob sich der Aufwand lohnt, muss jeder selber entscheiden.

1456 Zeilen hat mein Original Code, der neue dann nur noch 597.

FuchsFan

Zitat von 2002Andreas

Machbar ist das also alles mit dem ganz kurzen Code.

Ja, aber da gibt es hier auch die ersten Probleme. Beim Menü "Ansicht" hier:

Das bekomme ich nicht gebacken mit der neuen Schreibweise. Hast Du eine Idee, wie das aussehen könnte?

CSS

/*=== Submenü zu "Lesezeichen-Symbolleiste" / für alle drei Bereiche zuständig ====*/

/* aktive Box */
#toggle_PersonalToolbar menuitem[type="radio"][checked="true"] >.menu-iconic-left::before {
    margin-right: 10px !important; 
    margin-left: -28px !important;
    content: '' !important;
    display: block !important;
    width: 19px !important;
    height: 15px !important;
    background: url("file:///C:/FoxIcons/0126.png") no-repeat !important;
    background-position: 0px 0px !important;
    background-size: 16px 16px !important;
    }

/* inaktive Box */
#toggle_PersonalToolbar menuitem[type="radio"][checked="false"] >.menu-iconic-left::before {
    margin-right: 10px !important; 
    margin-left: -19px !important;
    content: '' !important;
    display: block !important;
    width: 19px !important;
    height: 15px !important;
    background: url("file:///C:/FoxIcons/0127.png") no-repeat !important;
    background-repeat: no-repeat !important;
    background-position: -1px 0px !important;
    background-size: 16px 16px !important; }

/* Text bei aktiver Box verlagert */
#view-menu-popup menu#toggle_PersonalToolbar menupopup menuitem[type="radio"][checked="true"] >.menu-iconic-text,
#toolbar-context-menu menu#toggle_PersonalToolbar menupopup menuitem[type="radio"][checked="true"] >.menu-iconic-text,
#placesContext menu#toggle_PersonalToolbar menupopup menuitem[type="radio"][checked="true"] >.menu-iconic-text {
    appearance: none !important;
    margin-left: -18px !important;}
    
/* Text bei inaktiver Box verlagert */
#view-menu-popup menu#toggle_PersonalToolbar menupopup menuitem[type="radio"][checked="false"] >.menu-iconic-text,
#toolbar-context-menu menu#toggle_PersonalToolbar menupopup menuitem[type="radio"][checked="false"] >.menu-iconic-text,
#placesContext menu#toggle_PersonalToolbar menupopup menuitem[type="radio"][checked="false"] >.menu-iconic-text    {
    appearance: none !important;
    margin-left: -4px !important;}
        
/* originale Icon ausgeblendet */    
#toggle_PersonalToolbar menuitem[type="radio"][checked="true"] > .menu-iconic-left .menu-iconic-icon {
    display: none !important; }    
    
#toggle_PersonalToolbar menupopup menuitem hbox.menu-accel-container label.menu-iconic-accel {
    display: none !important; }
    
/* Submenü ** ENDE */

Alles anzeigen

2002Andreas

Zitat von FuchsFan

Beim Menü "Ansicht" hier:

Hier sieht das mit deinem und meinem Code so aus:

PS:

Ich habe die Beiträge mal aus dem anderen Thread abgetrennt.

FuchsFan

Zitat von 2002Andreas

Hier sieht das mit deinem und meinem Code so aus

Ja, Andreas, so ist es hier auch, aber der Code dafür soll ja verkleinert werden (minimal bis auf zwei Zeilen). wenn ich das mache, so wie in deinem Beispiel im Menü "Hilfe", dann bekomme ich kein Icon mehr angezeigt, egal welche Bezeichnung ich wähle.

2002Andreas

Zitat von FuchsFan

soll ja verkleinert werden

Teste bitte mal:

CSS

/*=== Submenü zu "Lesezeichen-Symbolleiste" / für alle drei Bereiche zuständig ====*/

#toggle_PersonalToolbar :is(menuitem[type="radio"][checked="true"] >.menu-iconic-left) {
    background-repeat: no-repeat !important;
    margin-left: -14px !important;
    padding-left: 30px !important;
    width: 19px !important;
    height: 15px !important;
}

#toggle_PersonalToolbar :is(menuitem[type="radio"][checked="false"] >.menu-iconic-left) {
    background-repeat: no-repeat !important;
    margin-left: -14px !important;
    padding-left: 23px !important;
    width: 19px !important;
    height: 15px !important;
}

/* aktive Box */
#toggle_PersonalToolbar menuitem[type="radio"][checked="true"] >.menu-iconic-left {
    background-image: url("file:///C:/FoxIcons/0126.png") !important;    
 }

/* inaktive Box */
#toggle_PersonalToolbar menuitem[type="radio"][checked="false"] >.menu-iconic-left {
    background-image: url("file:///C:/FoxIcons/0127.png")  !important;
 }

/* Text bei aktiver Box verlagert */
#view-menu-popup menu#toggle_PersonalToolbar menupopup menuitem[type="radio"][checked="true"] >.menu-iconic-text,
#toolbar-context-menu menu#toggle_PersonalToolbar menupopup menuitem[type="radio"][checked="true"] >.menu-iconic-text,
#placesContext menu#toggle_PersonalToolbar menupopup menuitem[type="radio"][checked="true"] >.menu-iconic-text {
    appearance: none !important;
    margin-left: -18px !important;}
    
/* Text bei inaktiver Box verlagert */
#view-menu-popup menu#toggle_PersonalToolbar menupopup menuitem[type="radio"][checked="false"] >.menu-iconic-text,
#toolbar-context-menu menu#toggle_PersonalToolbar menupopup menuitem[type="radio"][checked="false"] >.menu-iconic-text,
#placesContext menu#toggle_PersonalToolbar menupopup menuitem[type="radio"][checked="false"] >.menu-iconic-text    {
    appearance: none !important;
    margin-left: -4px !important;}
        
/* originale Icon ausgeblendet */    
#toggle_PersonalToolbar menuitem[type="radio"][checked="true"] > .menu-iconic-left .menu-iconic-icon {
    display: none !important; }    
    
#toggle_PersonalToolbar menupopup menuitem hbox.menu-accel-container label.menu-iconic-accel {
    display: none !important; }
    
/* Submenü ** ENDE */

Alles anzeigen

Wobei in diesem Fall der Code nicht wirklich kürzer ist

FuchsFan

Zitat von 2002Andreas

Teste bitte mal:

Sehr schön, Andreas, damit lässt sich was machen. Danke!

2002Andreas

Zitat von FuchsFan

damit lässt sich was machen

Die Frage ist, ob sich das lohnt für jegliche Icons so zu machen

2002Andreas

Zitat von FuchsFan

damit lässt sich was machen

Das kannst du auch entfernen:

CSS

/* Text bei aktiver Box verlagert */
#view-menu-popup menu#toggle_PersonalToolbar menupopup menuitem[type="radio"][checked="true"] >.menu-iconic-text,
#toolbar-context-menu menu#toggle_PersonalToolbar menupopup menuitem[type="radio"][checked="true"] >.menu-iconic-text,
#placesContext menu#toggle_PersonalToolbar menupopup menuitem[type="radio"][checked="true"] >.menu-iconic-text {
    appearance: none !important;
    margin-left: -18px !important;}
    
/* Text bei inaktiver Box verlagert */
#view-menu-popup menu#toggle_PersonalToolbar menupopup menuitem[type="radio"][checked="false"] >.menu-iconic-text,
#toolbar-context-menu menu#toggle_PersonalToolbar menupopup menuitem[type="radio"][checked="false"] >.menu-iconic-text,
#placesContext menu#toggle_PersonalToolbar menupopup menuitem[type="radio"][checked="false"] >.menu-iconic-text    {
    appearance: none !important;
    margin-left: -4px !important;}

Alles anzeigen

Und dann oben die Abstände wieder neu erstellen.

FuchsFan

Zitat von 2002Andreas

Die Frage ist, ob sich das lohnt für jegliche Icons so zu machen

Nöö, denn was ich jetzt sagen kann, dass es speziell nur für diese mit Checkbox gemacht werden muss. Alles Andere ist mit zwei Zeilen gemacht, bin zwar erst am Anfang, aber das funktioniert.

wenn Du noch etwas Spezielles machen solltest, so lass es uns bitte wissen.

2002Andreas

Zitat von FuchsFan

dass es speziell nur für diese mit Checkbox gemacht werden muss.

Ich habe ja im extras_config_menu.uc.js auch eigene Icons.

Entweder wie oben im Code anpassen, oder im pauschalen Code ausschließen:

CSS

menupopup:not(#ExtraConfigMenu-popup) :is(menuitem, menu, menuitem label.menu-text, menu label.menu-text) { 
  padding-left: 21px ;
  background-repeat: no-repeat !important;
  background-position: 9px 3px ;
  background-size: 15px 15px !important;  
}

Nur mal so, in Zeile 2 + 4 darf kein !important sein, dann kann man einzelne Icons unabhängig verschieben wenn nötig.

FuchsFan

Zitat von 2002Andreas

Das kannst du auch entfernen:

Das ist jetzt übrig geblieben, perfekt.

CSS

/*=== Submenü zu "Lesezeichen-Symbolleiste" / für alle drei Bereiche zuständig ====*/

#toggle_PersonalToolbar :is(menuitem[type="radio"][checked="true"] >.menu-iconic-left) {
    background-repeat: no-repeat !important;
    margin-left: -30px !important;
    padding-left: 15px !important;
    width: 19px !important;
    height: 15px !important;
}

#toggle_PersonalToolbar :is(menuitem[type="radio"][checked="false"] >.menu-iconic-left) {
    background-repeat: no-repeat !important;
    margin-left: -30px !important;
    padding-left: 27px !important;
    width: 19px !important;
    height: 15px !important;
}

/* aktive Box */
#toggle_PersonalToolbar menuitem[type="radio"][checked="true"] >.menu-iconic-left {
    background-image: url("file:///C:/FoxIcons/0126.png") !important; 
}

/* inaktive Box */
#toggle_PersonalToolbar menuitem[type="radio"][checked="false"] >.menu-iconic-left {
    background: url("file:///C:/FoxIcons/0127.png") no-repeat  !important;
}

/* originale Icon ausgeblendet */    
#toggle_PersonalToolbar menuitem[type="radio"][checked="true"] > .menu-iconic-left .menu-iconic-icon {
    display: none !important; }    
    
#toggle_PersonalToolbar menupopup menuitem hbox.menu-accel-container label.menu-iconic-accel {
    display: none !important; }
    
/* Submenü ** ENDE */

Alles anzeigen

2002Andreas

Zitat von FuchsFan

Das ist jetzt übrig geblieben

Jetzt ist er wenigstens etwas kürzer geworden

Freut mich, wenn es dir so gefällt.

FuchsFan

Zitat von 2002Andreas

Entweder wie oben im Code anpassen, oder im pauschalen Code ausschließen:

Deinen zusätzlichen Code musste ich wieder entfernen, hat das Kontext-Menü zerbröselt. Ich bediene größtenteils alles mit diesem Code:

CSS

/* Buttons in den Popup-Menüs / Hintergrund */
#toolbar-context-menu menuitem.customize-context-moveToPanel,
#toolbar-context-menu menuitem.customize-context-removeFromToolbar,
#toolbar-context-menu menuitem.viewCustomizeToolbar,
#mainPopupSet menupopup#toolbar-context-menu menuitem.customize-context-reportExtension,
#mainPopupSet menupopup#toolbar-context-menu menuitem.customize-context-removeExtension,
#mainPopupSet menupopup#toolbar-context-menu menuitem.customize-context-manageExtension,
#placesContext menuitem,
#view-menu-popup menuitem#menu_customizeToolbars,
#mainPopupSet menupopup#toolbar-context-menu menuitem,
#history-menu menupopup#historyMenuPopup menu#historyUndoWindowMenu,
#tabContextMenu menuitem#context_closeLeftTabs,
#bookmarksMenu menupopup#bookmarksMenuPopup menuitem,
#historyMenuPopup  menu#historyUndoMenu,
menupopup > menu ,menupopup > menuitem,popup > menu ,popup > menuitem {
    appearance: none !important;
    background-color: #fefefc !important;
    min-height: 24px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important; 
    margin: 0.5px !important;  
    border-width: thin !important;
    border: 1px solid silver !important;
    border-radius: 5px !important;
    background-repeat: no-repeat !important;
    background-position: 10px 3px !important;
    padding-left: 40px !important;

}

Alles anzeigen

Bin erst mal offline!

2002Andreas

Zitat von FuchsFan

größtenteils alles mit diesem Code:

Naja, der spricht auch einiges pauschal an.

Beispiel:

menupopup > menu ,menupopup > menuitem,popup > menu ,popup > menuitem

und das ist ja auch in diesem/meinem Code schon mit enthalten:

menupopup :is(menuitem, menu, menuitem label.menu-text, menu label.menu-text)

Also müsstest du dann deinen Code auch wieder anpassen.

Ansonsten auch, diesen Zusatz solltest du nur benutzen, wenn es gar nicht ohne geht.

appearance: none !important;

Selbst nur !important sollte man nur nutzen, wenn unbedingt nötig.

Zitat von FuchsFan

Bin erst mal offline!

Ok.