TwainFrame

MediaWiki:Common.css: Difference between revisions

← Older edit
No edit summary
Tag: Reverted
mNo edit summary
 
(4 intermediate revisions by 3 users not shown)
Line 1: Line 1:
/* MediaWiki:Common.css */
/* MediaWiki:Common.css */
/*Styling for CharacterInsert toolbar*/
#mw-edittools-charinsert {
margin: 10px 0;
padding: 5px;
background: #f8f9fa;
border: 1px solid #ccc;
box-shadow: 0 2px 1px 0 rgba(0,0,0,0.1);
}
#mw-edittools-charinsert input, #mw-edittools-charinsert select {
margin: 2px;
padding: 4px 8px;
border: 1px solid #a2a9b1;
font-size: 0.7em;
color: #54595d;
}
/*Styling for tutorial page "Arbeiten mit DPL3"; KANN ANSCHLIEßEND ENTFERT WERDEN*/
.page-Arbeiten_mit_DPL3 #page-content > .row {
max-width:90%;
}


/* Tabelle mit ID 'example' */
/* Tabelle mit ID 'example' */
Line 23: Line 46:
/* Alle Tabellen mit Klasse 'display' (DataTables-Standardklasse) */
/* Alle Tabellen mit Klasse 'display' (DataTables-Standardklasse) */
table.display {
table.display {
   font-size: 1.5em;
   font-size: 1em;
   width: 100%;
   width: 100%;
   border-collapse: collapse;
   border-collapse: collapse;
Line 45: Line 68:
   background-color: #fcffcc;
   background-color: #fcffcc;
}
}
/* ================================
  Custom CSS for #styling-test table
  MediaWiki with Vector 2022 skin
  ================================ */


/* --- Base table styling --- */
#styling-test {
    width: 100%;                /* Make table span full container width */
    border-collapse: collapse;  /* Remove space between borders */
    background-color: #ffffff;  /* Background color for the table */
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: #333;
    margin-bottom: 1em;
}


/* ============================
/* --- Table headers --- */
  DataTables Custom Styling
#styling-test thead th {
  Ziel: Optisch ansprechendes Design für Tabelle mit ID #stylingtext
    background-color: #f8f9fa;  /* Light gray background */
  ============================ */
    color: #202122;            /* Dark text for contrast */
    padding: 10px;
    border: 1px solid #a2a9b1;
    text-align: left;
    font-weight: bold;
}


/* --- Grundlegende Tabellenstruktur --- */
/* --- Table body cells --- */
#stylingtext {
#styling-test tbody td {
     width: 100%; /* Tabelle nimmt gesamte Breite des Containers ein */
     padding: 8px;
     border-collapse: collapse; /* Entfernt doppelte Rahmen zwischen Zellen */
     border: 1px solid #ddd;    /* Light border */
     font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; /* Moderner, gut lesbarer Font */
     vertical-align: top;
     font-size: 14px;
    background-color: #ffffff; /* Heller Hintergrund für bessere Lesbarkeit */
}
}


/* --- Tabellenkopf (thead) --- */
/* --- Row hover effect --- */
#stylingtext thead {
#styling-test tbody tr:hover {
     background-color: #005288; /* Dunkelblauer Hintergrund für den Header */
     background-color: #eef6ff; /* Light blue highlight */
    color: white; /* Weißer Text für guten Kontrast */
    text-align: left;
}
}


#stylingtext thead th {
/* --- Alternating row colors (zebra striping) --- */
    padding: 12px 8px; /* Innenabstand oben/unten und rechts/links */
#styling-test tbody tr:nth-child(even) {
     border-bottom: 2px solid #ccc; /* Dezente Trennlinie unter dem Header */
     background-color: #f5f5f5;
}
}


/* --- Tabellenkörper (tbody) --- */
/* --- Sorting indicators (DataTables) --- */
#stylingtext tbody tr:nth-child(even) {
#styling-test thead th.sorting,
     background-color: #f2f2f2; /* Abwechselnde Zeilenfarbe (Zebra-Streifen) */
#styling-test thead th.sorting_asc,
#styling-test thead th.sorting_desc {
     cursor: pointer;
    position: relative;
    padding-right: 25px;
}
}


#stylingtext tbody tr:hover {
#styling-test thead th.sorting::after,
     background-color: #e0f0ff; /* Hover-Effekt bei Mouseover */
#styling-test thead th.sorting_asc::after,
#styling-test thead th.sorting_desc::after {
     position: absolute;
    right: 8px;
    top: 50%;
    margin-top: -6px;
    content: "";
    border: 6px solid transparent;
}
}


#stylingtext td {
/* Ascending arrow */
    padding: 10px 8px;
#styling-test thead th.sorting_asc::after {
     border-bottom: 1px solid #ddd; /* Trennung der Zeilen */
     border-bottom-color: #000;
}
}


/* --- Suchfeld und Buttons (DataTables UI) --- */
/* Descending arrow */
.dataTables_wrapper .dataTables_filter input {
#styling-test thead th.sorting_desc::after {
    border: 1px solid #ccc;
     border-top-color: #000;
    padding: 6px;
     border-radius: 4px;
    margin-left: 0.5em;
}
}


.dataTables_wrapper .dataTables_length select {
/* --- Pagination, info, and filter (DataTables UI) --- */
     border: 1px solid #ccc;
.dataTables_wrapper {
    padding: 6px;
     font-size: 14px;
     border-radius: 4px;
     margin-top: 10px;
}
}


/* --- Paginierung unten rechts --- */
/* Pagination controls */
.dataTables_wrapper .dataTables_paginate {
.dataTables_wrapper .dataTables_paginate {
    text-align: right;
     margin-top: 10px;
     margin-top: 10px;
    text-align: right;
    font-size: 13px;
}
}


.dataTables_wrapper .dataTables_paginate .paginate_button {
.dataTables_wrapper .dataTables_paginate a {
     padding: 6px 12px;
     margin: 0 3px;
     margin: 0 2px;
     padding: 5px 10px;
     border: 1px solid #ddd;
     border: 1px solid #ccc;
    background-color: #f9f9f9;
    color: #333;
    cursor: pointer;
     border-radius: 3px;
     border-radius: 3px;
    text-decoration: none;
    color: #202122;
    background-color: #f8f9fa;
}
}


.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
.dataTables_wrapper .dataTables_paginate a.current {
     background-color: #005288;
     background-color: #36c;
     color: white;
     color: white;
     border-color: #005288;
     border-color: #36c;
}
}


.dataTables_wrapper .dataTables_paginate .paginate_button.current {
/* Filter box (search) */
     background-color: #005288;
.dataTables_wrapper .dataTables_filter input {
     color: white !important;
     padding: 5px;
     border-color: #005288;
     border: 1px solid #ccc;
     border-radius: 3px;
}
}


/* --- Info unten links (z.B. "Zeige 1 bis 10 von 20 Einträgen") --- */
/* Length menu (show X entries) */
.dataTables_wrapper .dataTables_length select {
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 3px;
}
 
/* Info text (Showing X to Y of Z entries) */
.dataTables_wrapper .dataTables_info {
.dataTables_wrapper .dataTables_info {
     margin-top: 10px;
     margin-top: 10px;
    font-size: 13px;
     color: #555;
     color: #666;
}
 
/* --- Responsives Verhalten (wenn DataTables responsive Extension aktiv ist) --- */
@media screen and (max-width: 768px) {
    #stylingtext thead {
        display: none; /* Header ausblenden auf kleinen Bildschirmen */
    }
 
    #stylingtext td {
        display: block;
        width: 100%;
        box-sizing: border-box;
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 50%; /* Platz für Label */
    }
 
}
}
Retrieved from "https://twainframe.org/MediaWiki:Common.css"