MediaWiki:Wikia.css


 * root {

--main-purple: #bc98f6; /* light purple */ --main-dark: rgba(31, 27, 36, 0.8); /* the background's dark color */ --pride: #7BAAF7; --greed: #EDC84E; --envy: #FC9846; --wrath: #50B539; --lust: #F064A0; --gluttony: #EA5353; --sloth: #AA62CE; }

/* cursor */

body { cursor: url('https://vignette.wikia.nocookie.net/obey-me/images/4/4c/Cursor.png/revision/latest?cb=20200112045419'), pointer; }

a:hover { cursor: url('https://vignette.wikia.nocookie.net/obey-me/images/4/4c/Cursor.png/revision/latest?cb=20200112045419'), pointer; }

/* Article Table */

.article-table { border-radius: 5px !important; overflow: hidden !important; background-color: var(--main-dark) !important; }

.article-table th { background-color: var(--main-purple) !important; color: var(--main-dark) !important; border-bottom: none !important; }

.article-table td { border-bottom: 1px solid var(--main-purple) !important; }

/* om tables */

.om-table th { background-color: var(--main-purple); text-align: center; border-bottom: 2px solid var(--main-dark); color: var(--main-dark); }

.om-table td { border-bottom: 1px solid var(--main-purple); }

.om-table > tr:last-child > td { border-bottom: none; }

[class^="om-table-"], .om-table { border-radius: 5px !important; overflow: hidden !important; background-color: var(--main-dark) !important; }

[class^="om-table-"] th { color: black !important; border: 0 solid !important; }

.om-table-pride th { background-color: var(--pride) !important; }

.om-table-pride td { border-bottom: 1px solid var(--pride) !important; }

.om-table-greed th { background-color: var(--greed) !important; }

.om-table-greed td { border-bottom: 1px solid var(--greed) !important; }

.om-table-envy th { background-color: var(--envy) !important; }

.om-table-envy td { border-bottom: 1px solid var(--envy) !important; }

.om-table-wrath th { background-color: var(--wrath) !important; }

.om-table-wrath td { border-bottom: 1px solid var(--wrath) !important; }

.om-table-lust th { background-color: var(--lust) !important; }

.om-table-lust td { border-bottom: 1px solid var(--lust) !important; }

.om-table-gluttony th { background-color: var(--gluttony) !important; }

.om-table-gluttony td { border-bottom: 1px solid var(--gluttony) !important; }

.om-table-sloth th { background-color: var(--sloth) !important; }

.om-table-sloth td { border-bottom: 1px solid var(--sloth) !important; }

/* Scroll Bar */


 * -webkit-scrollbar {

width: 10px; height: 10px; }


 * -webkit-scrollbar-track {

background: var(--main-dark); }


 * -webkit-scrollbar-thumb {

background: var(--main-purple); border-radius: 2px; }


 * -webkit-scrollbar-corner {

background: var(--main-dark); }

/* Tabs */

.active-tab { min-width: 5.0em; max-width: 12em; float: left; border: none; border-radius: 4px 4px 0 0; padding: 2px 5px; height: auto; margin-bottom: 10px; color: var(--main-dark); font-size: 100%; }

.inactive-tab { min-width: 5.0em; max-width: 12em; float: left; border: none; border-radius: 4px 4px 0 0; padding: 2px 5px; height: auto; margin-bottom: 10px; background-color: var(--main-dark); }

/* Portable Infobox */

.portable-infobox { width: 290px; border-radius: 10px; padding: 8px; }

.portable-infobox .pi-title { border-radius: 5px; color: black; padding-top: 5px!important; padding-bottom: 5px!important; }

.portable-infobox .pi-header { border-radius: 5px; color: black; padding-top: 3px!important; padding-bottom: 3px!important; margin-top: 2px; margin-bottom: 2px; }

.portable-infobox .pi-image { border-radius: 5px; overflow: hidden; margin-top: 8px; margin-bottom: 8px; }

.pi-background { background-color: var(--main-dark); }

.portable-infobox .pi-item-spacing { padding: 0; }

.portable-infobox .pi-data-label, .portable-infobox .pi-data-value { padding: 4px 6px; margin-top: 2px; margin-bottom: 2px; vertical-align: center; }

.pi-data-label { border-radius: 5px 0 0 5px; }

/* Portable Infobox: Colors */

.pi-theme-Lucifer .pi-data-label { background-color: var(--pride); color: black; }

.pi-theme-Mammon .pi-data-label { background-color: #EDC84E; color: black; }

.pi-theme-Leviathan .pi-data-label { background-color: #FC9846; color: black; }

.pi-theme-Satan .pi-data-label { background-color: #50B539; color: black; }

.pi-theme-Asmodeus .pi-data-label { background-color: #F064A0; color: black; }

.pi-theme-Beelzebub .pi-data-label { background-color: #EA5353; color: black; }

.pi-theme-Belphegor .pi-data-label { background-color: #AA62CE; color: black; }

.pi-theme-Diavolo .pi-data-label { background-color: #BB4F39; color: black; }

.pi-theme-Barbatos .pi-data-label { background-color: #35A49A; color: black; }

.pi-theme-Luke .pi-data-label { background-color: #C6995D; color: black; }

.pi-theme-Simeon .pi-data-label { background-color: #7dc7a7; color: black; }

.pi-theme-Solomon .pi-data-label { background-color: #AAA1CC; color: black; }

.pi-theme-Lilith .pi-data-label { background-color: #CBC3CD; color: black; }

.pi-theme-Main .pi-data-label { background-color: #bc98f6; color: black; }

.pi-theme-Cerberus .pi-data-label { background-color: #e9700a; color: black; }

.pi-theme-Helene .pi-data-label { background-color: #FC9846; color: black; }

.pi-theme-Henry .pi-data-label { background-color: #41CFDE; color: black; }

.pi-theme-Little .pi-data-label { background-color: #EDC84E; color: black; }

.pi-theme-Ruri .pi-data-label { background-color: #f1868c; color: black; }

/* Spoiler Blur */

.spoilerblur { filter: blur(2px); -webkit-filter: blur(2px); opacity: .60; display: inline-block; -webkit-transition: ease-in-out 1s linear; -moz-transition: ease-in-out 1s 0 linear; -o-transition: ease-in-out 1s 0 linear; -ms-transition: ease-in-out 1s 0 linear; transition: ease-in-out 1s 0 linear; }

.spoilerblur:hover { filter: blur(0px); -webkit-filter: blur(0px); opacity: 1; text-shadow: 0 0 0 transparent; -webkit-transition: ease-in-out 1s linear; -moz-transition: ease-in-out 1s 0 linear; -o-transition: ease-in-out 1s 0 linear; -ms-transition: ease-in-out 1s 0 linear; transition: ease-in-out 1s 0 linear; }

/*_________________ AUDIO PLAYER _________________*/

.audio-button { background-color: #bc98f6; }

.audio-button:active { background-color: #000; }

.audio-buttonaudio-button .now-playing { background-color: black }

.audio-buttonaudio-button .mammon-audio { background-color: #edc84e !important; }

.wds-button { text-transform: capitalize !important; }

/* Tabber */

[class$="tabber"] .tabbertab, .tabbertab { border: none !important; padding: 0 !important; }

[class$="tabber"] .tabbernav, .tabbernav { background-color: var(--main-dark); border: none !important; padding: 0 !important; text-align: center; font-family: Helvetica Neue, Helvetica, Arial, sans-serif !important; border-radius: 4px; font-size: 15px !important; line-height: 15px !important; justify-content: space-between; display: flex; }

[class$="tabber"] .tabbernav li, .tabbernav li { font-size: 15px !important; line-height: 15px !important; width: 100%; padding: 0 !important; }

[class$="tabber"] .tabbernav li a, .tabbernav li a { border: none !important; margin: 0 !important; padding: 10px 0 !important; background: transparent !important; color: #bc98f6 !important; font-size: 14px; font-weight: 900 !important; transition-duration: 0.15s; cursor: default; font-weight: normal !important; font-size: 15px !important; line-height: 15px !important; width: 100%; display: inline-block; }

[class$="tabber"] .tabbernav li a:hover, .tabbernav li a:hover { color: #000000 !important; background-color: #bc98f6 !important; border-radius: 4px !important; }

[class$="tabber"] .tabbernav:hover, .tabbernav:hover { border-radius: 4px !important; }

[class$="tabber"] .tabbernav .tabberactive a, .tabbernav .tabberactive a { color: #000000 !important; background-color: #bc98f6 !important; border-radius: 4px !important; }

/* Tabber: Attribute */

.pridetabber .tabbernav li a { color: var(--pride) !important; }

.pridetabber .tabbernav li a:hover { background-color: var(--pride) !important; }

.pridetabber .tabbernav .tabberactive a { background-color: var(--pride) !important; }

.greedtabber .tabbernav li a { color: var(--greed) !important; }

.greedtabber .tabbernav li a:hover { background-color: var(--greed) !important; }

.greedtabber .tabbernav .tabberactive a { background-color: var(--greed) !important; }

.envytabber .tabbernav li a { color: var(--envy) !important; }

.envytabber .tabbernav li a:hover { background-color: var(--envy) !important; }

.envytabber .tabbernav .tabberactive a { background-color: var(--envy) !important; }

.wrathtabber .tabbernav li a { color: var(--wrath) !important; }

.wrathtabber .tabbernav li a:hover { background-color: var(--wrath) !important; }

.wrathtabber .tabbernav .tabberactive a { background-color: var(--wrath) !important; }

.lusttabber .tabbernav li a { color: var(--lust) !important; }

.lusttabber .tabbernav li a:hover { background-color: var(--lust) !important; }

.lusttabber .tabbernav .tabberactive a { background-color: var(--lust) !important; }

.gluttonytabber .tabbernav li a { color: var(--gluttony) !important; }

.gluttonytabber .tabbernav li a:hover { background-color: var(--gluttony) !important; }

.gluttonytabber .tabbernav .tabberactive a { background-color: var(--gluttony) !important; }

.slothtabber .tabbernav li a { color: var(--sloth) !important; }

.slothtabber .tabbernav li a:hover { background-color: var(--sloth) !important; }

.slothtabber .tabbernav .tabberactive a { background-color: var(--sloth) !important; }

/* Tabber: Other */

.arcadiatabber .tabbernav li a { border: none !important; margin: 0 !important; padding: 10px 0 !important; background: transparent !important; color: #5B4BE9 !important; font-size: 14px; font-weight: 900 !important; transition-duration: 0.15s; cursor: default; font-weight: normal !important; font-size: 15px !important; line-height: 15px !important; width: 100%; display: inline-block; }

.arcadiatabber .tabbernav li a:hover { color: #000000 !important; background: #5B4BE9 !important; border-radius: 4px !important; }

.arcadiatabber .tabbernav:hover { border-radius: 4px !important; }

.arcadiatabber .tabbernav .tabberactive a { color: #000000 !important; background: #5B4BE9 !important; border-radius: 4px !important; }

/*_________ ruready __________*/

.rureadytabber .tabbertab { border: none !important; padding: 0 !important; }

.rureadytabber .tabbernav { background-color: rgba(31, 27, 36, 0.87); border: none !important; padding: 0 !important; text-align: center; font-family: Helvetica Neue, Helvetica, Arial, sans-serif !important; border-radius: 4px; font-size: 15px !important; line-height: 15px !important; justify-content: space-between; display: flex; }

.rureadytabber .tabbernav li { font-size: 15px !important; line-height: 15px !important; width: 100%; }

.rureadytabber .tabbernav li a { border: none !important; margin: 0 !important; padding: 10px 0 !important; background: transparent !important; color: #FFC600 !important; font-size: 14px; font-weight: 900 !important; transition-duration: 0.15s; cursor: default; font-weight: normal !important; font-size: 15px !important; line-height: 15px !important; width: 100%; display: inline-block; }

.rureadytabber .tabbernav li a:hover { color: #000000 !important; background: #FFC600 !important; border-radius: 4px !important; }

.rureadytabber .tabbernav:hover { border-radius: 4px !important; }

.rureadytabber .tabbernav .tabberactive a { color: #000000 !important; background: #FFC600 !important; border-radius: 4px !important; }

/*_________ mychance __________*/

.mychancetabber .tabbertab { border: none !important; padding: 0 !important; }

.mychancetabber .tabbernav { background-color: rgba(31, 27, 36, 0.87); border: none !important; padding: 0 !important; text-align: center; font-family: Helvetica Neue, Helvetica, Arial, sans-serif !important; border-radius: 4px; font-size: 15px !important; line-height: 15px !important; justify-content: space-between; display: flex; }

.mychancetabber .tabbernav li { font-size: 15px !important; line-height: 15px !important; width: 100%; }

.mychancetabber .tabbernav li a { border: none !important; margin: 0 !important; padding: 10px 0 !important; background: transparent !important; color: #FF7E00 !important; font-size: 14px; font-weight: 900 !important; transition-duration: 0.15s; cursor: default; font-weight: normal !important; font-size: 15px !important; line-height: 15px !important; width: 100%; display: inline-block; }

.mychancetabber .tabbernav li a:hover { color: #000000 !important; background: #FF7E00 !important; border-radius: 4px !important; }

.mychancetabber .tabbernav:hover { border-radius: 4px !important; }

.mychancetabber .tabbernav .tabberactive a { color: #000000 !important; background: #FF7E00 !important; border-radius: 4px !important; }