User:Bluemorpho/common.css

/* -- Tabbers -- */

/*general tabber styles*/ ul.tabbernav { display: flex; flex-wrap: wrap; justify-content:center; }

ul.tabbernav { margin: 0; padding: 3px 0; border-bottom: 1px solid #ccc; font: bold 12px 'Verdana', sans-serif; }

ul.tabbernav li { list-style: none; margin: 0; display: inline; }

ul.tabbernav li a { padding: 3px 0.5em; margin-left: 3px; border: 1px solid #ccc; border-bottom: none; background: #f2f7ff; text-decoration: none; }

ul.tabbernav li a:link { color: #448; }

ul.tabbernav li a:visited { color: #667; }

ul.tabbernav li a:hover { color: #000; background: #fff9f2; border-color: #ccc; }

ul.tabbernav li.tabberactive a { background-color: #fff; border-bottom: 1px solid #fff; }

ul.tabbernav li.tabberactive a:hover { color: #000; background: #fff; border-bottom: 1px solid #fff; }

.tabber .tabbertab { padding: 5px; border: 1px solid #ccc; border-top: 0; }

/*specific tabber styles*/ .themedtabber div.tabbertab { padding: 0!important; border:none!important; }

.themedtabber ul.tabbernav { border-bottom: 2px solid #b39f73!important; padding: 1.0em!important; }

.themedtabber ul.tabbernav li a { background-color: black!important; transition: background-color 0.2s!important; border: 1px solid #b39f73!important; line-height:2em!important; margin: 0 0.2em 0!important; padding: 3px 0.5em!important; border-radius: 0!important; }

.themedtabber ul.tabbernav li a:link, .themedtabber ul.tabbernav li a:hover { color:white!important; }

.themedtabber ul.tabbernav li a:hover, .themedtabber ul.tabbernav li.tabberactive a { background-color: #C29C48!important; border: 1px solid #b39f73!important; }

.Heartslabyul div.tabbertab, .Savanaclaw div.tabbertab, .Octavinelle div.tabbertab, .Scarabia div.tabbertab, .Pomefiore div.tabbertab, .Ignihyde div.tabbertab, .Diasomnia div.tabbertab { padding: 5px; box-sizing: border-box; width: 100%; border: 1px solid var(--active-color, initial); }

.Heartslabyul ul.tabbernav, .Savanaclaw ul.tabbernav, .Octavinelle ul.tabbernav, .Scarabia ul.tabbernav, .Pomefiore ul.tabbernav, .Ignihyde ul.tabbernav, .Diasomnia ul.tabbernav { padding: 1.0em; border-bottom: 2px solid var(--active-color, initial); }

.Heartslabyul ul.tabbernav li a:link, .Savanaclaw ul.tabbernav li a:link, .Octavinelle ul.tabbernav li a:link, .Scarabia ul.tabbernav li a:link, .Pomefiore ul.tabbernav li a:link, .Ignihyde ul.tabbernav li a:link, .Diasomnia ul.tabbernav li a:link { transition: background-color 0.2s; color: white; background-color: var(--tab-color, initial); border:none; }

.Heartslabyul ul.tabbernav li a:hover, .Savanaclaw ul.tabbernav li a:hover, .Octavinelle ul.tabbernav li a:hover, .Scarabia ul.tabbernav li a:hover, .Pomefiore ul.tabbernav li a:hover, .Ignihyde ul.tabbernav li a:hover, .Diasomnia ul.tabbernav li a:hover { background-color: var(--hover-color, initial); }

.Heartslabyul ul.tabbernav li.tabberactive a, .Savanaclaw ul.tabbernav li.tabberactive a, .Octavinelle ul.tabbernav li.tabberactive a, .Scarabia ul.tabbernav li.tabberactive a, .Pomefiore ul.tabbernav li.tabberactive a, .Ignihyde ul.tabbernav li.tabberactive a, .Diasomnia ul.tabbernav li.tabberactive a { background-color: var(--active-color, initial); }

.Heartslabyul .tabber { --tab-color: #d50000; --hover-color: #A51002; --active-color: #8A1305; }

.Savanaclaw .tabber { --tab-color: #F5C663; --hover-color: #ebab1c; --active-color: #EFA406; }

.Octavinelle .tabber { --tab-color: #8A80BB; --hover-color: #A7A0CC; --active-color: #493470; }

.Scarabia .tabber { --tab-color: #9a1719; --hover-color: #7E1402; --active-color: #611710; }

.Pomefiore .tabber { --tab-color: #352687; --hover-color: #7C6E66; --active-color: #241d48; }

.Ignihyde .tabber { --tab-color: #147AEE; --hover-color: #403e43; --active-color: #516EDD; }

.Diasomnia .tabber { --tab-color: #85c02e; --hover-color: #698740; --active-color: #375F00; }

.imgtabber div.tabbertab { padding: 5px 0; border:none; }

.servertab .tabbertab { padding: 20px ; border: none ; } .servertab ul.tabbernav { position:sticky; top: 15px; border-bottom: none; } .servertab ul.tabbernav li { height:20px; } .servertab ul.tabbernav li a:link { padding: 10px 10px; background-color: #1C3323; border-radius: 7px; border: none; color: white; } .servertab ul.tabbernav li.tabberactive a { background-color: #2E533A; } /**End tabber styles**/

.fc-scroller { height: auto !important; }

.fc-unthemed td.fc-today { background: green; } .fc-widget-header { background: #b39f73; color:black; } /*.fc-content { color:black; }*/

/* CSS for Audio button */

.audio-vil { width: 50px; height: 50px; background-color: transparent; border: none; background-image: url('https://static.miraheze.org/twistedwonderlandwiki/d/d1/Lilia_Music_1.png'); display: inline-block; background-size: 50px auto; filter: grayscale(50%); transition: filter 1s, background-image 1s, } .audio-vil.playing, .audio-vil:hover, .audio-vil-parent:hover > .click-parent { background-color: transparent !important; background-image: url('https://static.miraheze.org/twistedwonderlandwiki/7/71/Lilia_Music_2.png'); background-size: 50px auto; filter: none;} .audio-vil.playing { animation-duration: 3s; animation-name: wiggle; animation-iteration-count: infinite; animation-timing-function: linear; }

@keyframes wiggle { 0% {transform: rotate(0deg);} 25% {transform: rotate(10deg);} 75% {transform: rotate(-20deg);} } .audio-vil.no-audio { background-color: transparent; background-size: 50px auto; background-image: url('https://static.miraheze.org/twistedwonderlandwiki/d/d1/Lilia_Music_1.png'); filter: grayscale(100%); }

.audio-vil>*{ display: none; } /* Audio Button CSS End */