Template:Memo/icons.css: Difference between revisions

Latest revision as of 22:47, 19 December 2024

/* 

/​* memo-<class name> *​/
.memorandum.memo-<class name> {
    background-color: <background color>;
}
.memorandum.memo-<class name> .content::before {
    background-color: <border color>;
}
.memorandum.memo-<class name> .content::after {
    /​* File:<file name>: <page url> *​/
    background-image: url(<file url>);
}

Attention: The styles should be filled in according to the above-mentioned format.

There are two points you need to note:
1. All you need to do is substitute for "<>".
2. You have to use icons from Wikimedia Commons.

Thank you for your kind co-operation.

*/

/* memo-bookmark */
.memorandum.memo-bookmark {
    background-color: #fae196;
}
.memorandum.memo-bookmark .content::before {
    background-color: #faaf00;
}
.memorandum.memo-bookmark .content::after {
    /* File:OOjs UI icon reference 20 ac6600.svg: https://commons.wikimedia.org/wiki/File:OOjs_UI_icon_reference_20_ac6600.svg */
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/d/d5/OOjs_UI_icon_reference_20_ac6600.svg);
}

/* memo-alert */
.memorandum.memo-alert {
    background-color: #fac8c8;
}
.memorandum.memo-alert .content::before {
    background-color: #fa7d7d;
}
.memorandum.memo-alert .content::after {
    /* File:OOjs UI icon alert-destructive.svg: https://commons.wikimedia.org/wiki/File:OOjs_UI_icon_alert-destructive.svg */
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/f/f6/OOjs_UI_icon_alert-destructive.svg);
}

/* memo-notice */
.memorandum.memo-notice {
    background-color: #fae1af;
}
.memorandum.memo-notice .content::before {
    background-color: #fac84b;
}
.memorandum.memo-notice .content::after {
    /* File:OOjs UI icon notice-warning.svg: https://commons.wikimedia.org/wiki/File:OOjs_UI_icon_notice-warning.svg */
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/4/4c/OOjs_UI_icon_notice-warning.svg);
}

/* memo-error */
.memorandum.memo-error {
    background-color: #fac8c8;
}
.memorandum.memo-error .content::before {
    background-color: #fa7d7d;
}
.memorandum.memo-error .content::after {
    /* File:OOjs UI icon error-destructive.svg: https://commons.wikimedia.org/wiki/File:OOjs_UI_icon_error-destructive.svg */
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/4/4e/OOjs_UI_icon_error-destructive.svg);
}

/* memo-check */
.memorandum.memo-check {
    background-color: #96e1c8;
}
.memorandum.memo-check .content::before {
    background-color: #00af7d;
}
.memorandum.memo-check .content::after {
    /* File:OOjs UI icon check-constructive.svg: https://commons.wikimedia.org/wiki/File:OOjs_UI_icon_check-constructive.svg */
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/f/f6/OOjs_UI_icon_check-constructive.svg);
}