Vorlage:Wahldiagramm einfach/Style.css: Unterschied zwischen den Versionen

Keine Bearbeitungszusammenfassung
Markierung: Manuelle Zurücksetzung
Keine Bearbeitungszusammenfassung
Zeile 22: Zeile 22:
     flex-direction: row;
     flex-direction: row;
     margin: 0;
     margin: 0;
}
/* Wrapper für dd/dt Paare */
.bar-container {
    display: contents;
}
}


Zeile 72: Zeile 77:
     }
     }


    /* Container für Diagramm mit Hintergrund */
     dl.vertical {
     dl.vertical {
         justify-content: space-between;
         justify-content: space-between;
Zeile 83: Zeile 87:
     }
     }


     /* Balken ohne eigenen Hintergrund */
     /* Wrapper wird zu Flex-Container */
    .bar-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
    }
 
     dl.vertical dd {
     dl.vertical dd {
         background: none;
         background: none;
         overflow: visible;
         overflow: visible;
         position: relative;
         position: relative;
        margin: 0;
     }
     }


    /* Labels neu positionieren */
     dl.vertical dt {
     dl.vertical dt {
         position: absolute;
         position: static;
        top: 200px;
        left: 50%;
        transform: translateX(-50%);
         margin: 5px 0 0 0;
         margin: 5px 0 0 0;
         width: auto;
         width: auto;
Zeile 102: Zeile 110:
         font-size: 85%;
         font-size: 85%;
         white-space: nowrap;
         white-space: nowrap;
         z-index: 10;
         transform: none;
     }
     }


    /* Spans (Balken) anpassen */
     dl.vertical dd span {
     dl.vertical dd span {
         min-width: 100%;
         min-width: 100%;
Zeile 111: Zeile 118:
     }
     }


    /* Trenner */
     .divider {
     .divider {
         width: 1em;
         width: 1em;