[tile-style] Kachel-Skin für f18

[schwatter]

Du darfst diesen Dateianhang nicht ansehen.
Du darfst diesen Dateianhang nicht ansehen.

Tag,

ich habe mir Gedanken über die Nutzung des Bildschirms gemacht. Für die Administration ist die aktuelle Standarddarstellung sehr sinnvoll.
Für die gelegentliche Bedienung und Visualisierung auf dem Tablet halte ich die aktuelle Aufteilung jedoch für eine weitgehende Platzverschwendung.
Trotzdem ist der Style auch für Desktop und Mobile geeignet.

Der Style wird einfach in "Additional CSS" eingefügt.
Es gibt eine helle und dunkle Farbrichtung. Bei modernen Browsern würde es reichen,
:root, direkt über dem Farbstil zu platzieren. Da Fully das nicht unter Android9
händeln kann, habe ich den hellen Farbstil für mich auskommentiert.

Der Skin sortiert alles nach der Größe in den Gruppen und packt es in Kacheln. Möchte man ein Device mit in die
Sortierung packen, muss der subType identisch sein. Dazu in global subType hinzufügen.

Code Auswählen Erweitern

attr global userattr subType
Danach kann in jedem Device der subType mit attr angepasst und individuell gesetzt werden.

Tip, durch

Code Auswählen Erweitern

  im subType, kann dieser versteckt werden und es sieht noch cleaner aus.

How to setup

• Der f18-Skin muss jungfräulich sein.
• Wenn er es nicht ist, im betreffenden FHEMWEB-Device einmal das attr styleData löschen.
• Das Seitenmenü links muss versteckt werden. Select style --> "Hide pin" aus. Oben am Seitenmenü die Stecknadel ziehen.
• Jetzt den CSS-Code unter f18 special --> Additional CSS einfügen.
• Für kleine  Bildschirme wie z.B Handy muss "Wrap columms on small screen" an sein.

Code Auswählen Erweitern

/* ==========================================================================
   1. VARIABLES & THEME CONFIGURATION
   ========================================================================== */


/* Base Body Styles */
body {
    background-color: var(--bg-main) !important;
    color: var(--myMenuText) !important;
    overflow-y: auto !important;
}

:root,
body.theme-dark {
    /* Accent & Brand Colors */
    --accentColors: #d97300;

    /* Backgrounds */
    --bg-main: #121214;
    --bg-card: #1c1c1c;
    --bg-card-hover: #252528;
    --bg-card-active: #222224;
    --bg-sidebar: #141416;
    --bg-button: #383838;

    /* Borders */
    --border-card: #3d3d3d;
    --border-button: #555555;

    /* Typography */
    --myTitle: #ffffff;
    --myMenuText: #dddddd;
    --text-muted: #888888;

    /* Dialogs / Modals */
    --bg-dialog: #1c1c1c;
    --btn-dialog-bg: #ffffff;
    --btn-dialog-text: #000000;

    /* Shadows & Transitions */
    --shadow-card: 0 4px 10px rgba(0, 0, 0, 0.15);
    --shadow-hover: 0 6px 14px rgba(0, 0, 0, 0.20);
    --transition-default: all 0.2s ease;
   
    /*Scrollbar*/
    --scrollbar-thumb: #7D7D7D;
}

/*body.theme-white,
body.theme-light {
    /* Accent & Brand Colors */
    --accentColors: #d97300;     
    --bg-main: #e5e7eb;
    --bg-card: #f0f2f5;
    --bg-card-hover: #e2e5ea;
    --bg-card-active: #dbe4f0;
    --bg-sidebar: #dadde2;
    --bg-button: #d4d8de;
    --border-card: #c4c8d0;
    --border-button: #a3a8b2;
    --myTitle: #111827;
    --myMenuText: #1f2937;
    --text-muted: #4b5563;
    --bg-dialog: #f0f2f5;
    --btn-dialog-bg: #d4d8de;
    --btn-dialog-text: #111827;
    --shadow-card: 0 4px 10px rgba(0, 0, 0, 0.06);
    --shadow-hover: 0 6px 14px rgba(0, 0, 0, 0.12);
    --transition-default: all 0.2s ease;
    --scrollbar-thumb: #333333;
}*/

/* ==========================================================================
   2. CONTENT CONTAINER & TILE GRID
   ========================================================================== */

div#content {
    padding-left: 0 !important;
    padding-right: 4px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

/* Reset standard FHEM table blocks */
div#content div.makeTable,
div#content fieldset,
div#content table.block,
div#content table.block.wide,
div#content .block {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

div#content table.room,
div#content table.block.wide {
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    border: none !important;
    background: transparent !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    width: 100% !important;
}

/* Convert table rows to Flexbox Grid */
div#content table.room > tbody,
div#content table.block.wide > tbody {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: 100% !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    background: transparent !important;
    box-sizing: border-box !important;
}

/* ==========================================================================
   3. TILE CARDS (DEVICE ITEMS)
   ========================================================================== */

div#content table.room > tbody > tr,
div#content table.block.wide > tbody > tr {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 55px;
    background-color: var(--bg-card) !important;
    border-radius: 12px !important;
    border: 1px solid var(--border-card) !important;
    padding: 8px 12px !important;
    box-shadow: var(--shadow-card) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    transition: var(--transition-default) !important;
}

/* Tile Hover & Active States */
div#content table.room > tbody > tr:not(.header):not(:has(.col_header)):not(:has(.pinHeader)):hover,
div#content table.block.wide > tbody > tr:not(.header):not(:has(.col_header)):not(:has(.pinHeader)):hover,
div#content table.room > tbody > tr:not(.header):not(:has(.col_header)):not(:has(.pinHeader)):active,
div#content table.block.wide > tbody > tr:not(.header):not(:has(.col_header)):not(:has(.pinHeader)):active {
    border-color: var(--accentColors) !important;
    background-color: var(--bg-card-hover) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-hover) !important;
}

/* Tile Content Cells (td) */
div#content table.room tr > td {
    max-width: 100% !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    border: none !important;
    background: transparent !important;
    box-sizing: border-box !important;
}

/* Column 1: Device Name & Icon */
div#content table.room tr > td:nth-child(1) {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-weight: 500 !important;
    color: var(--myTitle) !important;
    font-size: 14px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex: 0 1 auto !important;
}

div#content table.room tr > td:nth-child(1) svg {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    padding-right: 0 !important;
    flex-shrink: 0 !important;
    fill: var(--myTitle) !important;
}

/* Column 2+: Controls & Readings */
div#content table.room tr > td:nth-child(n+2) {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
    color: var(--myMenuText) !important;
}

@media screen and (min-width: 601px) {
    div#content table.room tr > td:nth-child(n+2) {
        margin-left: auto !important;
        padding-left: 10px !important;
    }
}

/* Mobile Adjustments for Tiles */
@media screen and (max-width: 600px) {
    div#content table.room > tbody > tr,
    div#content table.block.wide > tbody > tr {
        width: 100% !important;
        flex: 1 1 100% !important;
        padding: 8px 10px !important;
    }

    div#content table.room tr > td:nth-child(n+2) {
        margin-left: 0 !important;
        padding-left: 0 !important;
    }
}

/* ==========================================================================
   4. FORM ELEMENTS & INTERACTIVE BUTTONS
   ========================================================================== */

div#content input[type="submit"],
div#content select,
div#content input[type="text"],
div#content .set,
div#content a.btn {
    background-color: var(--bg-button) !important;
    color: var(--myTitle) !important;
    border: 1px solid var(--border-button) !important;
    border-radius: 6px !important;
    padding: 3px 8px !important;
    font-size: 12px !important;
    cursor: pointer;
    max-width: 100% !important;
    box-sizing: border-box !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    transition: var(--transition-default) !important;
}

/* Form Hover States */
div#content select:hover,
div#content input[type="text"]:focus,
div#content .set:hover,
div#content a.btn:hover,
div#content select:active,
div#content .set:active,
div#content a.btn:active {
    border-color: var(--accentColors) !important;
    background-color: var(--bg-card-hover) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
}

/* Submit Button Specifics */
div#content input[type="submit"]:hover,
div#content input[type="submit"]:active {
    background-color: var(--accentColors) !important;
    border-color: var(--accentColors) !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
}

/* ==========================================================================
   5. HEADERS, PLOTS & MEDIA OVERRIDES
   ========================================================================== */

div#content table.room tr.header,
div#content table.room tr:has(.col_header),
div#content table.room tr:has(.pinHeader) {
    width: 100% !important;
    flex: 1 1 100% !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    font-weight: bold;
    font-size: 18px;
    padding: 10px 0 0 0 !important;
    overflow: visible !important;
}

.pinHeader,
.col_header,
div.fileList.col_header {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--myTitle) !important;
}

div#content table.room tr:has(svg.SVGplot),
div#content table.room tr:has(.echarts),
div#content table.room tr:has(iframe),
div#content table.room tr:has(embed) {
    width: 100% !important;
    flex: 1 1 100% !important;
    flex-direction: column !important;
    align-items: stretch !important;
    overflow: hidden !important;
}

.SVGplot, .echarts, iframe, embed {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
}

/* ==========================================================================
   6. SLIDERS & COLORPICKER FIXES
   ========================================================================== */

.colorpicker_bri .slider,
div#content table.room .colorpicker_bri .slider {
    background-image: linear-gradient(to right, rgb(0, 0, 0), rgb(255, 255, 255)) !important;
}

.colorpicker_ct .slider,
div#content table.room .colorpicker_ct .slider {
    background-image: linear-gradient(to right, rgb(255, 180, 107), rgb(255, 255, 255)) !important;
}

.colorpicker_hue .slider,
div#content table.room .colorpicker_hue .slider {
    background-image: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00) !important;
}

.slider,
div#content table.room .slider {
    background-color: var(--accentColors) !important;
    border-radius: 5px !important;
    height: 6px !important;
    margin: 8px 10px !important;
    min-width: 120px !important;
    max-width: 200px !important;
    flex: 1 1 auto !important;
    position: relative !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

.slider .handle,
.slider .ui-slider-handle,
div#content table.room .slider .handle {
    min-width: 40px !important;
    height: 22px !important;
    top: -8px !important;
    padding: 0 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #000000 !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    line-height: 1 !important;
    text-align: center !important;
    background-color: #ffffff !important;
    border: 1px solid var(--accentColors) !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3) !important;
    cursor: pointer !important;
    z-index: 10 !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
}

/* ==========================================================================
   7. POPUP & DIALOG SKINNING (.ui-dialog)
   ========================================================================== */

.ui-dialog {
    background-color: var(--bg-dialog) !important;
    border: 1px solid var(--border-card) !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
    padding: 15px !important;
    color: var(--myTitle) !important;
    box-sizing: border-box !important;
    min-width: 300px !important;
    min-height: 180px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
    position: absolute !important;
}

.ui-dialog .ui-dialog-titlebar {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    min-height: 0 !important;
    height: 0 !important;
    margin: 0 !important;
}

.ui-dialog .ui-dialog-title {
    display: none !important;
}

.ui-dialog .ui-dialog-titlebar-close {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    background: var(--bg-button) !important;
    border: 1px solid var(--border-button) !important;
    border-radius: 50% !important;
    width: 26px !important;
    height: 26px !important;
    cursor: pointer !important;
    z-index: 20 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.ui-dialog .ui-dialog-titlebar-close:hover {
    background-color: var(--accentColors) !important;
    border-color: var(--accentColors) !important;
}

.ui-dialog .ui-dialog-content {
    background: transparent !important;
    color: var(--myTitle) !important;
    padding: 10px 5px !important;
    text-align: center !important;
    flex: 1 1 auto !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: 100% !important;
    width: 100% !important;
    max-height: none !important;
}

.ui-dialog .ui-dialog-content p {
    margin: 6px 0 !important;
}

.ui-dialog .ui-dialog-buttonpane {
    background: transparent !important;
    border: none !important;
    margin: 10px 0 0 0 !important;
    padding: 0 !important;
    text-align: center !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.ui-dialog .ui-dialog-buttonset {
    float: none !important;
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

.ui-dialog .ui-dialog-buttonpane button,
.ui-dialog .ui-button {
    background-color: var(--btn-dialog-bg) !important;
    border: 1px solid var(--border-button) !important;
    border-radius: 20px !important;
    color: var(--btn-dialog-text) !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    padding: 6px 20px !important;
    min-width: 70px !important;
    cursor: pointer !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
    transition: var(--transition-default) !important;
}

.ui-dialog .ui-dialog-buttonpane button .ui-button-text,
.ui-dialog .ui-button .ui-button-text {
    color: var(--btn-dialog-text) !important;
    font-weight: 700 !important;
}

.ui-dialog .ui-dialog-buttonpane button:hover {
    background-color: var(--accentColors) !important;
    border-color: var(--accentColors) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}

.ui-dialog input[type="text"],
.ui-dialog select,
.ui-dialog .select_widget {
    background-color: var(--bg-button) !important;
    color: var(--myTitle) !important;
    border: 1px solid var(--border-button) !important;
    border-radius: 20px !important;
    padding: 5px 12px !important;
    font-size: 13px !important;
    outline: none !important;
    text-align: center !important;
}

.ui-dialog select option {
    background-color: var(--bg-card) !important;
    color: var(--myTitle) !important;
}

.ui-dialog .ui-resizable-handle {
    z-index: 30 !important;
}

/* ==========================================================================
   8. NAVIGATION SIDEBAR (#menu)
   ========================================================================== */

div#menu {
    background: var(--bg-sidebar) !important;
    border-right: 1px solid var(--border-card) !important;
    padding: 12px 8px !important;
    box-sizing: border-box !important;
    max-height: 100vh !important;
    overflow-y: scroll !important;
    overflow-x: hidden !important;
}

/* Custom Scrollbars */
::-webkit-scrollbar,
div#menu::-webkit-scrollbar {
    width: 6px !important;
}

::-webkit-scrollbar-track,
div#menu::-webkit-scrollbar-track {
    background: transparent !important;
}

::-webkit-scrollbar-thumb,
div#menu::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb) !important;
    border-radius: 4px !important;
}

::-webkit-scrollbar-thumb:hover,
div#menu::-webkit-scrollbar-thumb:hover {
    background: var(--accentColors) !important;
}

html,
body,
div#menu {
    scrollbar-width: thin !important;
    scrollbar-color: var(--scrollbar-thumb) transparent !important;
}

div#menu table,
div#menu table td,
div#menu tbody,
div#menu tr {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    display: block !important;
}

div#menu a,
div#menu table td a {
    display: flex !important;
    align-items: center !important;
    padding: 10px 14px !important;
    margin: 0 0 6px 0 !important;
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-card) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
    color: var(--myTitle) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    transition: var(--transition-default) !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

@media screen and (min-width: 601px) {
    div#menu a:hover,
    div#menu table td a:hover {
        border-color: var(--accentColors) !important;
        background-color: var(--bg-card-hover) !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15) !important;
    }
}

div#menu a.sel,
div#menu table td.sel a,
div#menu td.sel a {
    background-color: var(--bg-card-active) !important;
    border: 1px solid var(--accentColors) !important;
    color: var(--myTitle) !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 15px rgba(217, 115, 0, 0.2) !important;
}

div#menu a.sel::before,
div#menu table td.sel a::before {
    content: "" !important;
    display: inline-block !important;
    width: 8px !important;
    height: 8px !important;
    background-color: var(--accentColors) !important;
    border-radius: 50% !important;
    margin-right: 10px !important;
    box-shadow: 0 0 8px var(--accentColors) !important;
    flex-shrink: 0 !important;
}

/* Category Headers */
div#menu .menuHeader,
div#menu td.header,
div#menu tr.header td {
    color: var(--text-muted) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    padding: 14px 6px 4px 6px !important;
    background: transparent !important;
}

/* Command Line Input */
div#menu input[type="text"] {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-card) !important;
    border-radius: 12px !important;
    color: var(--myTitle) !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 10px !important;
    outline: none !important;
    transition: var(--transition-default) !important;
}

div#menu input[type="text"]:focus {
    border-color: var(--accentColors) !important;
    box-shadow: 0 0 10px rgba(217, 115, 0, 0.2) !important;
}

/* Mobile Sidebar Layout */
@media screen and (max-width: 600px) {
    div#menu {
        padding: 6px 4px !important;
    }

    div#menu table,
    div#menu tbody,
    div#menu tr,
    div#menu td,
    div#menu div {
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        line-height: 1 !important;
        display: block !important;
    }

    div#menu br,
    div#menu table tr:empty,
    div#menu table td:empty {
        display: none !important;
    }

    div#menu a,
    div#menu table td a {
        padding: 8px 10px !important;
        margin: 0 0 4px 0 !important;
        height: auto !important;
    }

    div#menu .menuHeader,
    div#menu td.header,
    div#menu tr.header td {
        padding: 8px 4px 2px 4px !important;
        margin: 0 !important;
    }
}

/* ==========================================================================
   9. DEVICE DETAILS OVERRIDES (READINGS, INTERNALS, ATTRIBUTES)
   ========================================================================== */

/* Main Detail Table Containers */
div#content div.makeTable.wide.readings,
div#content div.makeTable.wide.internals,
div#content div.makeTable.wide.attributes {
    display: block !important;
    flex: 1 1 100% !important;
    width: 100% !important;
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-card) !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    box-shadow: var(--shadow-card) !important;
    box-sizing: border-box !important;
    margin-bottom: 15px !important;
}

/* Detail Section Headers */
div#content div.makeTable.wide.readings > .detail_Readings,
div#content div.makeTable.wide.internals > .detail_Internals,
div#content div.makeTable.wide.attributes > .detail_Attributes {
    font-weight: bold !important;
    color: var(--accentColors) !important;
    font-size: 15px !important;
    padding-bottom: 8px !important;
    margin-bottom: 8px !important;
    border-bottom: 1px solid var(--border-card) !important;
}

/* Force standard table rendering inside details */
div#content div.makeTable.wide.readings > table.readings,
div#content div.makeTable.wide.internals > table.internals,
div#content div.makeTable.wide.attributes > table.attributes {
    display: table !important;
    width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

div#content div.makeTable.wide.readings > table.readings > tbody,
div#content div.makeTable.wide.internals > table.internals > tbody,
div#content div.makeTable.wide.attributes > table.attributes > tbody {
    display: table-row-group !important;
}

div#content div.makeTable.wide.readings > table.readings > tbody > tr,
div#content div.makeTable.wide.internals > table.internals > tbody > tr,
div#content div.makeTable.wide.attributes > table.attributes > tbody > tr {
    display: table-row !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    transform: none !important;
    min-height: 0 !important;
}

/* Disable Hover on Detail Table Rows */
div#content div.makeTable.wide.readings > table.readings > tbody > tr:hover,
div#content div.makeTable.wide.readings > table.readings > tbody > tr:active,
div#content div.makeTable.wide.internals > table.internals > tbody > tr:hover,
div#content div.makeTable.wide.internals > table.internals > tbody > tr:active,
div#content div.makeTable.wide.attributes > table.attributes > tbody > tr:hover,
div#content div.makeTable.wide.attributes > table.attributes > tbody > tr:active {
    background: transparent !important;
    border-color: transparent !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Detail Cell Formatting & Text Wrap */
div#content div.makeTable.wide.readings > table.readings td,
div#content div.makeTable.wide.internals > table.internals td,
div#content div.makeTable.wide.attributes > table.attributes td {
    display: table-cell !important;
    padding: 6px 8px !important;
    vertical-align: middle !important;
    color: var(--myMenuText) !important;
    font-size: 13px !important;
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}

div#content div.makeTable.wide.readings > table.readings td *,
div#content div.makeTable.wide.internals > table.internals td *,
div#content div.makeTable.wide.attributes > table.attributes td * {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}

div#content div.makeTable.wide.readings > table.readings > tbody > tr:last-child > td,
div#content div.makeTable.wide.internals > table.internals > tbody > tr:last-child > td,
div#content div.makeTable.wide.attributes > table.attributes > tbody > tr:last-child > td {
    border-bottom: none !important;
}

/* Reading Names & Links */
div#content div.makeTable.wide.readings > table.readings td .dname,
div#content div.makeTable.wide.internals > table.internals td .dname,
div#content div.makeTable.wide.attributes > table.attributes td .dname,
div#content div.makeTable.wide.internals > table.internals td a {
    font-weight: 600 !important;
    color: var(--myTitle) !important;
}

Gruß schwatter

[schwatter]

Update

• Kachelstyle für INTERNALS, READINGS & ATTRIBUTES deaktiviert

Gruß schwatter

[schwatter]

Update

• Sidebarfix für Handy und Desktop

Fully auf meinem Tablet funktioniert noch nicht. Etwas zickig.

Gruß schwatter