selfthinker / dokuwiki_plugin_wrap

Wrap Plugin for DokuWiki: Universal plugin which combines functionalities of many other plugins. Wrap wiki text inside containers (divs or spans) and give them a class (choose from a variety of preset classes), a width and/or a language with its associated text direction.
http://www.dokuwiki.org/plugin:wrap
GNU General Public License v2.0
41 stars 33 forks source link

Suggestion: CSS background colors used in emojis #276

Open davidjimenez75 opened 8 months ago

davidjimenez75 commented 8 months ago

The use of emojis in Dokuwiki is increasing, in Windows10 you can easy use emojis pressing ( WIN + . )

There are some colored emojis than can be used in Dokuwiki.

๐ŸŸฅ๐Ÿ”ดโค ๐ŸŸง๐ŸŸ ๐Ÿงก ๐ŸŸจ๐ŸŸก๐Ÿ’› ๐ŸŸฆ๐Ÿ”ต๐Ÿ’™ ๐ŸŸฉ๐ŸŸข๐Ÿ’š ๐ŸŸช๐ŸŸฃ๐Ÿ’œ ๐ŸŸซ๐ŸŸค๐ŸคŽ โฌœโšช๐Ÿค โฌ›โšซ๐Ÿ–ค

I propose to enable this colors by default as backgrounds.

<wrap red>color red</wrap>
<wrap orange>color orange</wrap>
<wrap yellow>color yellow</wrap>
...

COLORS= red orange yellow blue green purple brown white black

2024-01-14--103744--

This could be the code for the CSS in the style.less

/*____________ color notes ____________*/

span.wrap_red,
span.wrap_orange,
span.wrap_yellow,
span.wrap_blue,
span.wrap_green,
span.wrap_purple,
span.wrap_brown,
span.wrap_white,
span.wrap_black, {
    padding: 0 .3em;
}

.wrap_red {
    background-color: #e81224;
    color: #fff;
}
.wrap_orange {
    background-color: #f7630c;
    color: #000;
}
.wrap_yellow {
    background-color: #fff100;
    color: #000;
}
.wrap_blue {
    background-color: #0078d7;
    color: #fff;
}
.wrap_green {
    background-color: #16c60c;
    color: #fff;
}
.wrap_purple {
    background-color: #886ce4;
    color: #fff;
}
.wrap_brown {
    background-color: #8e562e;
    color: #fff;
}
.wrap_white {
    background-color: #f2f2f2;
    color: #000;
    border:1px solid black;
}
.wrap_black {
    background-color: #383838;
    color: #fff;
}

.wrap_red *,
.wrap_orange *,
.wrap_yellow *,
.wrap_blue *,
.wrap_green *,
.wrap_purple *,
.wrap_brown *,
.wrap_white *,
.wrap_black * {
    color: inherit !important;
}