Verbesserung des Designs


  • Administrator

    Ich mache mal ein neues Thema auf, wo ich das ganze sammle. Auch damit wir einen zentralen Anlaufpunkt haben.

    Swordfish hat einige von mir aus sehr sinnvolle Änderungen vorgeschlagen, welche ich gerne ins Forum einarbeiten möchte. Er hat verschiedene Stylus und Tampermonkey Skripts zur Verfügung gestellt:

    Entsprechende Stylus Skripts würde ich gerne hier sammeln, falls ihr weitere Vorschläge habt.

    Folgende Änderungen habe ich bereits gemacht oder kommen:

    • Bezüglich "No Code Box Scroll" kommt im nächsten Update ein Knopf in Code-Boxen, welche das für die Code-Box umstellt.
    • Bezüglich "Light Code Boxes" habe ich den Stil vorerst auf VS umgestellt. Würde aber gerne in Zukunft es dem Benutzer überlassen.
    • Bezüglich "Alternating Background" werde ich es wahrscheinlich demnächst ins Forum integrieren. Dazu habe ich nun auch die Skins abgeschaltet. Allerdings werde ich wohl die Paddings und Margins etwas reduzieren. Derzeit bin ich bei padding: 10px 10px 10px 10px und margin: 5px 0px 5px 0px;.


  • @dravere sagte in Verbesserung des Designs:

    Bezüglich "No Code Box Scroll" kommt im nächsten Update ein Knopf in Code-Boxen, welche das für die Code-Box umstellt.

    Du meinst einen Knopf pro Code-Box, der die Box zwischen scrolling und non-scrolling toggelt? Wenn ja fände ich eine Benutzereinstellung, die das Verhalten global überschreibt nicht schlecht.

    @dravere sagte in Verbesserung des Designs:

    Bezüglich "Light Code Boxes" habe ich den Stil vorerst auf VS umgestellt.

    Ehrlich gesagt finde ich den weißen Hintergrund auf den grauen Post-backgrounds etwas sehr hart. Mir gefällt

    .hljs {
        border: 1px solid lightgray;
        background: #fafafa;
        tab-size: 4;
    }
    

    besser.

    @dravere sagte in Verbesserung des Designs:

    Allerdings werde ich wohl die Paddings und Margins etwas reduzieren. Derzeit bin ich bei padding: 10px 10px 10px 10px und margin: 5px 0px 5px 0px;.

    Ich wäre für ein bisschen mehr vertikalen Abstand. Mit Deinen Werten wirkt es auf mich leider wieder wie eine Endloswurst.



  • @hustbaer sagte in +1 + (-1) =? -1:

    Würd vielleicht helfen wenn man die [Up-/Downvote-] Buttons kräftiger einfärben würde wenn sie aktiv sind. Speziell dadurch dass das Symbol so klein ist, fällts kaum auf dass es graublau ist (und bleibt) statt grau nachdem man draufgedrückt hat.

    div.topic.col-lg-12 > ul > li:nth-of-type(odd) [component="post/downvote"] > i,
    div.topic.col-lg-12 > ul > li:nth-of-type(odd) [component="post/upvote"] > i  {
        -webkit-text-stroke: 1px #f2f2f2;
    }
    
    div.topic.col-lg-12 > ul > li:nth-of-type(even) [component="post/downvote"] > i,
    div.topic.col-lg-12 > ul > li:nth-of-type(even) [component="post/upvote"] > i {
        -webkit-text-stroke: 1px #f9f9f9;
    }
    
    div.topic.col-lg-12 > ul > li [component="post/downvote"].downvoted > i,
    div.topic.col-lg-12 > ul > li [component="post/upvote"].upvoted > i {
        -webkit-text-stroke: 1px #337ab7;
    }
    


  • Gegen Hässlichkeiten bei Avataren mit Transparenz:

    .account .cover .avatar-wrapper {
        border: 0;
        background-color: white;
        box-shadow: 0 2px 5px 0 rgba(0,0,0,.156863), 0 2px 10px 0 rgba(0,0,0,.117647);
    }
    
    .persona-usercard .usercard-picture {
        background-color: white;
    }
    


  • Letzte Hinweise auf den Chat entfernen:

    #chat_dropdown {
        display: none;
    }
    
    .dropdown-menu > li > a[component="account/chat"],
    .dropdown-menu > li > a[component="account/new-chat"] {
        display: none !important;
    }
    
    #content > div.notifications > div.btn-toolbar > div.dropdown.pull-right.open > ul > li:nth-child(4)
    {
        display: none;
    }
    
    #content > div.account > div.row > div:nth-child(1) > h4:nth-child(3),
    #content > div.account > div.row > div:nth-child(1) > div:nth-child(4)
    {
        display: none;
    }
    
    #content > div.account > div.row > div:nth-child(2) > div:nth-child(6) > div:nth-child(5),
    #content > div.account > div.row > div:nth-child(2) > div:nth-child(6) > label:nth-child(12),
    #content > div.account > div.row > div:nth-child(2) > div:nth-child(6) > div:nth-child(13),
    #content > div.account > div.row > div:nth-child(2) > div:nth-child(6) > label:nth-child(14),
    #content > div.account > div.row > div:nth-child(2) > div:nth-child(6) > div:nth-child(15) {
        display:none;
    }