MediaWiki:Tabber.css

/* -- Tabbers -- */

/*general tabber styles*/ .tabber__tabs, .tabber__tab:hover, .tabber__tab--active, .tabber__tabs { box-shadow:none; }

.tabber__header { justify-content:center; }

.tabber__tabs { display: flex; flex-wrap: wrap; justify-content:center; -webkit-mask-image: unset; mask-image: unset; }

.tabber__tab { padding: 3px 0.5em; margin-left: 3px; margin-bottom: 0.4em; border: 1px solid #ccc; border-bottom: none; background: #f2f7ff; text-decoration: none; font: bold 12px 'Verdana',sans-serif; }

.tabber__section { height: auto !important; }

.inside .tabber__panel { height: max-content !important; }

.center .tabber__section { align-items: center; }

/*specific tabber styles*/ /*themed tabber*/ .themedtabber .tabber__panel { padding: 0; border:none; }

.themedtabber .tabber__header { border-bottom: 2px solid #b39f73; padding: 1.0em; width:100%; }

.themedtabber .tabber__header__prev, .themedtabber .tabber__header__next { display: none; }

.themedtabber .tabber__tab { background-color: black; transition: background-color 0.2s; border: 1px solid #b39f73; line-height:1em; padding: 5px; border-radius: 0; color:white; }

.themedtabber .tabber__tab:hover, .themedtabber .tabber__tab--active, .themedtabber .tabber__tab--active:visited { background-color: #C29C48; border: 1px solid #b39f73; }

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

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

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

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

.Heartslabyul .tabber__tab--active, .Savanaclaw .tabber__tab--active, .Octavinelle .tabber__tab--active, .Scarabia .tabber__tab--active, .Pomefiore .tabber__tab--active, .Ignihyde .tabber__tab--active, .Diasomnia .tabber__tab--active, .Heartslabyul .tabber__tab--active:visited, .Savanaclaw .tabber__tab--active:visited, .Octavinelle .tabber__tab--active:visited, .Scarabia .tabber__tab--active:visited, .Pomefiore .tabber__tab--active:visited, .Ignihyde .tabber__tab--active:visited, .Diasomnia .tabber__tab--active:visited, .Heartslabyul .tabber__tab--active:hover, .Savanaclaw .tabber__tab--active:hover, .Octavinelle .tabber__tab--active:hover, .Scarabia .tabber__tab--active:hover, .Pomefiore .tabber__tab--active:hover, .Ignihyde .tabber__tab--active:hover, .Diasomnia .tabber__tab--active:hover { 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; }

/*misc tabber*/ .imgtabber .tabber__panel { padding: 5px 0; border:none; }

.servertab .tabber__panel { padding: 20px ; border: none ; }

.servertab .tabber__header { position:sticky; top: 15px; border-bottom: none; }

.servertab .tabber__tab { height:20px; }

.servertab .tabber__tab { padding: 10px 10px; background-color: #1C3323; border-radius: 7px; border: none; color: white; }

.servertab .tabber__tab:hover, .servertab .tabber__tab--active { background-color: #2E533A; }