MediaWiki:FandomizedThemeDesigner.css

/* Redesigning Theme Designer */

/* Light */

.Navigation { background-image: none; }

.Navigation li { background-color: #f0f0f0; border-bottom: none; background-image: none; border-left: 1px #e9e9e9 solid; }

.WikiaSlider { border-bottom: none; border-top: none; background-image: none; margin-top: -60px; margin-left: 60px; }

.ThemeTab img { border: none; }

.ThemeDesignerPicker h1 { font-weight: bold; }

.Designer h1 { font-weight: bold; }

.ThemeDesignerPicker { box-shadow: none; background: #f8f8f8; border: 1px solid #c1c1c1; border-radius: 4px; }

img#swatch-community-header-image-background { border: 1px #c1c1c1 solid; }

.CustomizeTab li img { border: none; }

input#CommunityHeaderBackgroundImageUploadFile { padding-bottom: 5px; }

.Toolbar { background-color: #ededed; border-bottom: none; background-image: none; }

.Toolbar .inner .history { font-weight: bold; text-transform: uppercase; color: black; }

.Toolbar .inner .history .revisions { background: none; border: none; color: black; font-size: 11px; margin-right: 0; padding: 0; }

.Toolbar .inner .history .chevron { border-color: #000000 transparent transparent; }

.Toolbar .inner .history ul { box-shadow: none; background-color: #f8f8f8; border: 1px solid #cccccc; border-radius: 4px; }

.Toolbar .inner button.cancel { background-color: transparent; background-image: none; color: black !important; border-color: black !important; text-transform: uppercase; font-weight: bold; border-radius: 0; font-size: x-small; }

.Toolbar .inner button.save { background-image: none; text-transform: uppercase; font-weight: bold; border-radius: 0; font-size: x-small; }

.WordmarkTab h2 { font-weight: bold; }

.Toolbar .mode { color: black; font-weight: bold; font-size: 18px; }

.Navigation li.selected a:hover { color: #444444; }

.Navigation li.selected a { color: black; text-transform: uppercase; font-size: x-small; }

.Navigation a { color: black; text-transform: uppercase; font-size: x-small; }

.Designer { background-color: white; }

.Designer h2 { font-weight: bold; }

.Designer section { border-right: none; }

section#CustomizeTab { background-color: #f5f5f5; }

section#ThemeTab { background-color: #f5f5f5; }

section#WordmarkTab { background-color: #f5f5f5; border-bottom: none; }

.Navigation li.selected { box-shadow: none; background-color: #f5f5f5; }

.ThemeTab .next { border-color: transparent transparent transparent black; }

.ThemeTab .previous { border-color: transparent black transparent transparent; } .Toolbar .inner .history ul li:hover { background-color: #f1f1f1; }

/* Fixes */

/* Applying some fixes to the modernized Theme Designer */

/* Re-adding borders to swatch color squares */

.CustomizeTab li img { border: 1px #cecece solid; }

/* Dropdowns */

.Toolbar .inner .history ul { border-radius: 0; border: none !important; padding: 0 !important; }

.Toolbar .inner .history ul li { border-top: none; padding: 8px; }

.ThemeDesignerPicker { border: none !important; border-radius: 0; box-shadow: 0 0 10px 0 #000; background: rgba(0,0,0,0.9); }

/* Tooltips */

.tooltip-inner { color: white !important; background-color: rgba(0,0,0,0.9) !important; border: none !important; transition: .3s; }

body .tooltip.right .tooltip-arrow { border-right: 5px solid rgba(0,0,0,0.9); }

/* Slider */

div#OpacitySlider { border-bottom: none; border-top: none; background-color: #888 !important; background-image: none; height: 4px; margin: 12px 0 0 0; }

.WikiaSlider:before, .WikiaSlider:after { display: none; }

.WikiaSlider .ui-slider-handle { box-shadow: none !important; border-radius: 3px; height: 25px; background-color: #666 !important; margin-top: -3px; border: none !important; background-image: none !important; }

/* Buttons */

.Toolbar .inner button.cancel { padding: 7px 12px; height: 35px; margin-top: -7px; }

.Toolbar .inner button.cancel:hover { transition: .3s; color: #333; border-color: #333; }

.Toolbar .inner button.cancel:focus { outline: none; }

.Toolbar .inner button.save { padding: 7px 12px; height: 35px; margin-top: -7px; }

.Toolbar .inner button.save:hover { transition: .3s; }

.Toolbar .inner button.save:focus { outline: none; }

form#CommunityHeaderBackgroundImageForm > input[type="submit"], .WordmarkTab button, .WordmarkTab input[type='submit'] { padding: 7px 12px; height: 35px; background-image: none; text-transform: uppercase; font-size: 10px; font-weight: bold; border-radius: 0; }
 * 1) BackgroundImageForm > input[type="submit"],

form#CommunityHeaderBackgroundImageForm > input[type="submit"]:hover, .WordmarkTab button:hover, .WordmarkTab input[type='submit']:hover, transition: .3s; background-image: none !important; }
 * 1) BackgroundImageForm > input[type="submit"]:hover {

form#CommunityHeaderBackgroundImageForm > input[type="submit"]:focus, .WordmarkTab button:focus, .WordmarkTab input[type='submit']:focus, outline: none; }
 * 1) BackgroundImageForm > input[type="submit"]:focus {

/* Removing text decoration on hover for the tabs */

.Navigation a:hover { text-decoration: none; color: #555; transition: .2s; }

.Navigation li.selected { box-shadow: none; }

.Navigation li { border-left: none; }

/* Miscellaneous */

.Toolbar .inner .history ul li .wikia-chiclet-button img { background: url(https://images.wikia.nocookie.net/__cb1512666205/common/extensions/wikia/ThemeDesigner/images/icon-return.png) top left black no-repeat !important; }

.WordmarkTab .graphic .preview a { transition: .3s; background-color: rgba(0,0,0,0.9) !important; color: white !important; font-size: 10px; font-weight: bold; padding: 4px !important; text-transform: uppercase; }

.WordmarkTab .favicon .preview a { width: 65px; font-weight: bold; text-transform: uppercase; background-color: transparent; font-size: 10px; color: white; padding: 2px; }

.WordmarkTab .graphic .preview .wordmark.selected { box-shadow: none; border-color: transparent; }

.WordmarkTab .graphic .preview span, .WordmarkTab .favicon .preview { font-weight: bold; text-transform: uppercase; font-size: 10px; }

div#wordmark-edit > input[type="text"] { border: none; background: none; border-bottom: 1px #666 solid; color: black; }

div#wordmark-edit > input[type="text"]:focus { border-bottom: 1px #000 solid; transition: .3s; outline: none; }

/* Dark */

.oasis-dark-theme .Designer { background-color: #111111; }

.oasis-dark-theme .Navigation { background-image: none; }

.oasis-dark-theme .Navigation li { background-color: #222222; border-bottom: none; background-image: none; }

.oasis-dark-theme .WikiaSlider { border-bottom: none; border-top: none; background-image: none; margin-top: -60px; margin-left: 60px; }

.oasis-dark-theme .ThemeTab img { border: none; }

.oasis-dark-theme .ThemeDesignerPicker h1 { font-weight: bold; color: white }

.oasis-dark-theme .Designer h1 { font-weight: bold; color: #ffffff }

.oasis-dark-theme .ThemeDesignerPicker { box-shadow: none; background: #000000; border: 1px solid #c1c1c1; border-radius: 4px; }

.oasis-dark-theme img#swatch-community-header-image-background { border: 1px #c1c1c1 solid; }

.oasis-dark-theme .CustomizeTab li img { border: none; }

.oasis-dark-theme input#CommunityHeaderBackgroundImageUploadFile { padding-bottom: 5px; }

.oasis-dark-theme .Toolbar { background-color: #222222; border-bottom: none; background-image: none; }

.oasis-dark-theme .Toolbar .inner .history { font-weight: bold; text-transform: uppercase; color: white;

}

.oasis-dark-theme .Toolbar .inner .history .revisions { background: none; border: none; color: white; font-size: 11px; margin-right: 0; padding: 0;

}

.oasis-dark-theme .Toolbar .inner .history .chevron { border-color: #ffffff transparent transparent; }

.oasis-dark-theme .Toolbar .inner .history ul { box-shadow: none; background-color: #000000; border: 1px solid #cccccc; border-radius: 4px; }

.oasis-dark-theme .Toolbar .inner button.cancel { background-color: transparent; background-image: none; color: #fff; border-color: #fff; text-transform: uppercase; font-weight: bold; border-radius: 0; font-size: x-small; }

.oasis-dark-theme .Toolbar .inner button.save { background-image: none; text-transform: uppercase; font-weight: bold; border-radius: 0; font-size: x-small; }

.oasis-dark-theme .Toolbar .inner .history ul li:hover { background-color: #666666; }

.oasis-dark-theme .WordmarkTab h2 { font-weight: bold; }

.oasis-dark-theme .Toolbar .mode { color: white; font-weight: bold; font-size: 18px; }

.oasis-dark-theme .Navigation li.selected a:hover { color: #bbbbbb; }

.oasis-dark-theme .Navigation li.selected a { color: white; text-transform: uppercase; font-size: x-small; }

.oasis-dark-theme .Navigation a { color: white; text-transform: uppercase; font-size: x-small; }

.oasis-dark-theme .Designer h2 { font-weight: bold; color: #ffffff }

.oasis-dark-theme .Designer section { border-right: none; }

.oasis-dark-theme section#CustomizeTab { background-color: #000000; }

.oasis-dark-theme section#ThemeTab { background-color: #000000; }

.oasis-dark-theme section#WordmarkTab { background-color: #000000; border-bottom: none; }

.oasis-dark-theme .Navigation li.selected { box-shadow: none; background-color: black; }

.oasis-dark-theme .ThemeTab .next { border-color: transparent transparent transparent white; }

.oasis-dark-theme .ThemeTab .previous { border-color: transparent white transparent transparent; }

/* Fixes */

/* Applying some fixes to the modernized Theme Designer */

/* Re-adding borders to swatch color squares */

.oasis-dark-theme .CustomizeTab li img { border: 1px #cecece solid; }

/* Dropdowns */

.oasis-dark-theme .Toolbar .inner .history ul { border-radius: 0; border: none !important; padding: 0 !important; }

.oasis-dark-theme .Toolbar .inner .history ul li { border-top: none; padding: 8px; }

.oasis-dark-theme .ThemeDesignerPicker { border: none !important; border-radius: 0; box-shadow: 0 0 10px 0 #000; background: rgba(0,0,0,0.9); }

/* Tooltips */

.oasis-dark-theme .tooltip-inner { color: white !important; background-color: rgba(0,0,0,0.9) !important; border: none !important; transition: .3s; }

.oasis-dark-theme body .tooltip.right .tooltip-arrow { border-right: 5px solid rgba(0,0,0,0.9); }

/* Slider */

.oasis-dark-theme div#OpacitySlider { border-bottom: none; border-top: none; background-color: #888 !important; background-image: none; height: 4px; margin: 12px 0 0 0; }

.oasis-dark-theme .WikiaSlider:before, .oasis-dark-theme .WikiaSlider:after { display: none; }

.oasis-dark-theme .WikiaSlider .ui-slider-handle { box-shadow: none !important; border-radius: 3px; height: 25px; background-color: #666 !important; margin-top: -3px; border: none !important; background-image: none !important; }

/* Buttons */

.oasis-dark-theme .Toolbar .inner button.cancel { padding: 7px 12px; height: 35px; margin-top: -7px; }

.oasis-dark-theme .Toolbar .inner button.cancel:hover { transition: .3s; color: #ccc; border-color: #ccc; }

.oasis-dark-theme .Toolbar .inner button.cancel:focus { outline: none; }

.oasis-dark-theme .Toolbar .inner button.save { padding: 7px 12px; height: 35px; margin-top: -7px; }

.oasis-dark-theme .Toolbar .inner button.save:hover { transition: .3s; }

.oasis-dark-theme .Toolbar .inner button.save:focus { outline: none; }

.oasis-dark-theme form#CommunityHeaderBackgroundImageForm > input[type="submit"], .oasis-dark-theme #BackgroundImageForm > input[type="submit"], .oasis-dark-theme .WordmarkTab button, .oasis-dark-theme .WordmarkTab input[type='submit'] { padding: 7px 12px; height: 35px; background-image: none; text-transform: uppercase; font-size: 10px; font-weight: bold; border-radius: 0; }

.oasis-dark-theme form#CommunityHeaderBackgroundImageForm > input[type="submit"]:hover, .oasis-dark-theme .WordmarkTab button:hover, .oasis-dark-theme .WordmarkTab input[type='submit']:hover, .oasis-dark-theme #BackgroundImageForm > input[type="submit"]:hover { transition: .3s; background-image: none !important; }

.oasis-dark-theme form#CommunityHeaderBackgroundImageForm > input[type="submit"]:focus, .oasis-dark-theme .WordmarkTab button:focus, .oasis-dark-theme .WordmarkTab input[type='submit']:focus, .oasis-dark-theme #BackgroundImageForm > input[type="submit"]:focus { outline: none; }

/* Removing text decoration on hover for the tabs */

.oasis-dark-theme .Navigation a:hover { text-decoration: none; color: #ccc; transition: .2s; }

/* Miscellaneous */

.oasis-dark-theme .WordmarkTab .graphic .preview a { transition: .3s; background-color: rgba(0,0,0,0.9) !important; color: white !important; font-size: 10px; font-weight: bold; padding: 4px !important; text-transform: uppercase; }

.oasis-dark-theme .WordmarkTab .favicon .preview a { width: 65px; font-weight: bold; text-transform: uppercase; background-color: transparent; font-size: 10px; color: white; padding: 2px; }

.oasis-dark-theme .WordmarkTab .graphic .preview .wordmark.selected { box-shadow: none; border-color: transparent; }

.oasis-dark-theme .WordmarkTab .graphic .preview span, .oasis-dark-theme .WordmarkTab .favicon .preview { font-weight: bold; text-transform: uppercase; font-size: 10px; }

.oasis-dark-theme div#wordmark-edit > input[type="text"] { border: none; background: none; border-bottom: 1px #666 solid; color: white; }

.oasis-dark-theme div#wordmark-edit > input[type="text"]:focus { border-bottom: 1px #fff solid; transition: .3s; outline: none; }