MediaWiki:FandomizedPCSSP/dark.css

/**
 * @Installation:   Add this to https://c.fandom.com/wiki/Special:Mypage/global.css —
 *                  @import url("/load.php?mode=articles&only=styles&articles=u:dev:MediaWiki:FandomizedPCSSP/dark.css");
 * @Name:           Fandomized PortableCSSPad
 * @Description:    Fork of Leafy's WDSPortableCSSPad
                    Updates PortableCSSPad styling with Fandom Design System colors and icons, a streamlined interface, and a redesigned text area
                    Dark theme stylesheet (light theme coming soon)
                    Requires <https://dev.fandom.com/wiki/PortableCSSPad>
 * @Differences:    Buttons have been fixed
                    More elegant & unobtrusive styling
                    Text area is improved with better font, scrollbar, & FDS colors
 * @Author:         Banarama <https://community.fandom.com/wiki/User:Banarama>
 * @Attribution:    <https://dev.fandom.com/wiki/PortableCSSPad>
                    <https://dev.fandom.com/wiki/MediaWiki:WDSPortableCSSPad.css>
 * @Scope:          Personal, Sitewide
 * @Stability:      Stable & regularly maintained
 * @Changelog:      December 22nd, 2019 — Created script
                    December 23rd, 2019 — Added script to Dev & replaced personal fonts w/ system fonts for universality
 */
 
/* Hide useless buttons */
#PortableCSSPad-important-button,
#PortableCSSPad-unimportant-button,
#PortableCSSPad-beautify-button,
#PortableCSSPad-minify-button,
#PortableCSSPad-validate-button,
.PortableCSSPad-vertical-bar {
    display: none;
}/**/
 
/* Container */
div#PortableCSSPad-container {
    border: none;
    border-radius: 3px;
    background: #002A32;
    box-shadow: rgba(0, 0, 0, 0.2) 3px 3px 15px, rgba(0, 0, 0, 0.4) 12px 12px 60px;
}/**/
 
/* Title */
a#PortableCSSPad-title {
    color: white;
    font: bold 20px Menlo, Consolas, 'Ubuntu Mono', monospace;
    transition: all 0.25s;
}/**/
 
/* Modernize useful buttons */
div#PortableCSSPad-buttons {
    width: 56px;
}

#PortableCSSPad-buttons div.PortableCSSPad-button {
    margin-left: 8px;
    width: 20px;
    height: 20px;
    background: #FFF;
    background-image: none;
    background-repeat: no-repeat;
}

div#PortableCSSPad-close-button {
    -webkit-mask-image: url('/extensions/wikia/DesignSystem/node_modules/design-system/dist/svg/wds-icons-cross-small.svg');
            mask-image: url('/extensions/wikia/DesignSystem/node_modules/design-system/dist/svg/wds-icons-cross-small.svg');
}
 
div#PortableCSSPad-onoff-button {
    -webkit-mask-image: url('/extensions/wikia/DesignSystem/node_modules/design-system/dist/svg/wds-icons-eye-small.svg');
            mask-image: url('/extensions/wikia/DesignSystem/node_modules/design-system/dist/svg/wds-icons-eye-small.svg');
}
 
div#PortableCSSPad-onoff-button.PortableCSSPad-onoff-button-state-off {
    -webkit-mask-image: url('/extensions/wikia/DesignSystem/node_modules/design-system/dist/svg/wds-icons-eye-crossed-small.svg');
            mask-image: url('/extensions/wikia/DesignSystem/node_modules/design-system/dist/svg/wds-icons-eye-crossed-small.svg');
}/**/
 
/* Text box & scrollbar (both WebKit & Firefox supported) */
textarea#PortableCSSPad-textarea {
    background: #0E191A;
    color: #FFF;
    font: 13px Menlo, Consolas, 'Ubuntu Mono', monospace;
 
    scrollbar-color: rgba(127, 153, 152, 0.3) transparent;
}
 
#PortableCSSPad-textarea::-webkit-scrollbar {
    width: 8px;
}
 
#PortableCSSPad-textarea::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(127, 153, 152, 0.3);
}
 
#PortableCSSPad-textarea::-webkit-scrollbar-thumb:hover {
    background-color: rgba(127, 153, 152, 0.4);
}
 
#PortableCSSPad-textarea::-webkit-scrollbar-track {
    background-color: transparent;
}/**/
 
/* Hover styles */
a#PortableCSSPad-title:hover {
    color: #00D6D6;
    text-decoration: none;
}
 
#PortableCSSPad-buttons div.PortableCSSPad-button:hover {
    background-color: #00D6D6;
}/**/