Contrib: Style Fixes for Some Plugins

[Miro-Collas]

Below are CSS fixes I made for a few plugins. I made these specifically for the darkly theme, and I hope they will work for others. Insert standard disclaimer here. Submitted as-is, hoping it helps someone.

I no longer use wrap, btw, but it took a while to convert all of the uses of wrap to callouts, so in the meantime, I cleaned up the look.

One thing I have no yet been able to fix is that with Edittable, when the table is wider than screen width, a scroll bar is added at the bottom, and that covers the edit button, making it unclickable.

/*************************************************************************
 * Used by Bureaucracy
 * https://www.dokuwiki.org/plugin:bureaucracy
 ************************************************************************/
/* left-align bureaucracy labels */
.dokuwiki form.bureaucracy__plugin label {
    text-align:left;
}

.dokuwiki form.bureaucracy__plugin p {
    font-size: 100%;
    font-weight: bold;
}

/*************************************************************************
 * Tagcloud
 * https://www.dokuwiki.org/plugin:cloud
 ************************************************************************/
@sF: 1.5;
.dokuwiki div.cloud { margin-bottom: 1em; line-height: 145% * @sF; }

/*************************************************************************
 * Tags / Pagelist
 * https://www.dokuwiki.org/plugin:tag
 * https://www.dokuwiki.org/plugin:pagelist
 ************************************************************************/
div.dokuwiki td.desc {
    color: inherit;
}

/*************************************************************************
 * EditTable
 * https://www.dokuwiki.org/plugin:edittable
 ************************************************************************/
.handsontable td {
  background-color: inherit;
  color: #010101;
};

/*************************************************************************
 * Text
 * https://www.dokuwiki.org/plugin:plaintext
 ************************************************************************/
div.dokuwiki pre.plaintext {
    background-color: inherit;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    border: 0;
}

/*************************************************************************
 * nspages
 * https://www.dokuwiki.org/plugin:nspages
 ************************************************************************/
div.catpagechars {
font-size: 2.0em;
margin-top: 1.3em;
}

/*************************************************************************
 * Wrap
 * Bundled
 ************************************************************************/
.dokuwiki {
.wrap_box {
    background: @ini_background_alt;
    color: #FFFFFF;
}

/* general styles for all note divs */
div.wrap_info,
div.wrap_important,
div.wrap_alert,
div.wrap_tip,
div.wrap_help,
div.wrap_todo,
div.wrap_download {
    padding: 1em 1em .5em 70px;
    margin-bottom: 1.5em;
    min-height: 68px;
    background-position: 10px 50%;
    background-repeat: no-repeat;
    color: #FFFFFF;
    overflow: hidden;
}
/* info */
.wrap_info { background-color: #d1d7df; }
.wrap__dark.wrap_info { background-color: #343e4a;  color: #FFFFFF; }

/* important */
.wrap_important { background-color: #ffd39f; }
.wrap__dark.wrap_important { background-color: #6c3b00; color: #FFFFFF; }

/* alert */
.wrap_alert { background-color: #ffbcaf; color: #FFFFFF; }
.wrap__dark.wrap_alert { background-color: #6b1100; }

/* tip */
.wrap_tip { background-color: #fff79f; }
.wrap__dark.wrap_tip { background-color: #4a4400; color: #FFFFFF; }

/* help */
.wrap_help { background-color: #dcc2ef; }
.wrap__dark.wrap_help { background-color: #3c1757; color: #FFFFFF; }

/* todo */
.wrap_todo { background-color: #c2efdd; }
.wrap__dark.wrap_todo { background-color: #17573e; color: #FFFFFF; }

/* download */
.wrap_download { background-color: #d6efc2; }
.wrap__dark.wrap_download { background-color: #345717; color: #FFFFFF; }

.wrap__dark.wrap_hi {
    background-color: #4e4e0d ;
    color: #FFFFFF;
}
}

[suedunham]

dwp-forge helped me puzzle one out for BatchEdit over here.

Here's one for the Configuration Manager.

/*Configuration Manager in bootstrap3 */
body.darkly {
    /* Gear icon in h1 */
    .dw-content #configuration_manager svg path {
        fill: #ffffff;
    }
    /* Setting description labels */
    #config__manager .table-responsive table .label .control-label {
        color: #ffffff;
    }
}

[Miro-Collas]

Very cool - thanks!

[suedunham]

I couldn't figure out how to format the selected radio buttons and the images are still not ideal, but this makes the Fullscreen Media Manager more usable.

/* Media Manager with bootstrap3  (Darkly theme) */
body.darkly #mediamanager__page {
    /* Main icon */
    h1 svg path {
        fill: #ffffff;
    }
    /* Headers */
    h2, .panelHeader {
        background:     #222222;
        color:          #ffffff;
        border-color:   #464545;
    }
    /* List of namespaces */
    .namespaces ul .selected {      /* needed to override default */
        background-color:  #464545;
        li {background:    #464545}
    }
    /* Panel resize bar */
    .ui-resizable-e:hover {
        background-color: #464545;
    }
    .panelHeader form.options {
    /*                                 Couldn't get this to work */
        /* :checked + span { */
            /* background-color: #375a7f; */
            /* border-color: #375a7f; */
            /* font-weight: bold;    */
        /* } */
        label {
            /* background: #464545; */
            margin-right: 0em;
            /* border-color: #303030; */
            /* color: #ffffff; */
        }
    }
    /* File list by thumbnail */
    .thumbs {
        li {
            background:     #464545;
            color:          #ffffff;
        }
        li:hover {background: #222222}
    }
    /* File list by row */
    .rows {
        li:nth-child(odd)   {background: #464545}
        li:nth-child(even)  {background: #303030}
        li                  {color:      #ffffff}
    }
    /* Selected file info */
    .file dl dt {
        background-color:   #464545;
    }
    .file dl dd {
        background-color:   #303030;
    }
}
body.darkly [dir=rtl] #mediamanager__page .ui-resizable-w:hover {
    background-color: #464545;
}

[Miro-Collas]

Thanks too! I'm really bad at CSS, so I just did very basic, simple stuff.

[suedunham]

Trying out a general rule for all of the icons in h1. They're all still black. Hopefully this doesn't mess anything else up.

/* General svg icons in page headers */
body.darkly h1 svg path {
    fill: #ffffff;
}

[suedunham]

Just did something about fixing the monospaced type and code blocks, based on the theme button colors as rendered by the Bootstrap Wrapper plugin. I haven't gone too far into different languages, with only css as of now. The code snippet is from here at GithubDark.

/* Darken monospaced font backgrounds in dark themes*/
body.darkly {
    code {
        color:                  #f39c12;    /* warning color*/
        background-color:       #222222;    /* outer panel color*/
    }
    /* Darken generic code blocks*/
    pre.code, pre.file {
        color:                  #fff;       /* text*/
        background-color:       #222222;    /* outer panel color*/
        border-color:           #464545;    /* panel border*/
    }
    /* CSS code block based on theme button colors.*/
    pre.code.css, pre.file.css {
        color:                  #fff;       /* text*/
        background-color:       #222222;    /* outer panel*/
        border-color:           #464545;    /* panel border */
        span.br0    {color:     #00bc8c;}   /* success*/
        span.co2    {color:     #0ce3a0;}   /* link text*/
        span.coMULTI{color:     #7a7777;}   /* default btn, lightened*/
        span.kw1    {color:     #4774a3;}   /* primary, lightened*/
        span.kw2    {color:     #fff;}      /* text*/
        span.kw3    {color:     #f39c12;}   /* warning*/
        span.nu0    {color:     #c87f0a;}   /* warning, active*/
        span.re0    {color:     #5faee3;}   /* info, lightened*/
        span.re1    {color:     #e74c3c;}   /* danger*/
        span.re3    {color:     #f39c12;}   /* warning*/
        span.st0    {color:     #f39c12;}   /* warning*/
        span.sy0    {color:     #00bc8c;}   /* success*/
    }
}