MediaWiki:Gadget-artTab.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

.artTab {
    position:relative;

    background-color: rgba(100,100,100,0.7); 
    margin: 2px;
    padding: 5px 0;
    display: flex;
    flex-grow: 1;
}

.artTab .variantswitcher {
  position: absolute;
  width: 95%;
  z-index: 500;
}

/* Style the buttons inside the tab */
.artTab .variantswitcher button {
    padding: 3px 6px;
    margin: 2px 2px;
    border-radius: 15px;
    border: none;
    text-shadow:none;
    z-index:5;
    font-family: arial;
    font-weight: bold;
    font-size: 1em;
    opacity:0.5;
    background-color: #4E443C;
    color:#F0b000;

    -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
    opacity:0.5;
}

.artTab .variantswitcher button.right {
  float: right;
}

.artTab .variantswitcher button.enabled {
  border: thin solid #F0b000;
}

/* Change background color of buttons on hover */
.artTab .variantswitcher button:hover {
    opacity:1;
}

/* Create an active/current tablink class */
.artTab .variantswitcher button.active {
    color:#4E443C;
    background-color: #F0b000;
    border-radius: 15px;
    border: none;
    text-shadow:none;
    z-index:5;
}

.artTabContent {
  margin: auto;
  max-width: 420px;
  max-height: 420px;
  justify-content: center;
  align-items: center;
  width: 420px;
  height: 420px;
  display: flex;
}

.artTab .live2dstage {
  flex-shrink: 0;
}

.artTab.loading {
    background-image: url('/images/8/88/gfloading.gif');
    background-repeat: no-repeat;
    background-attachment: local;
    background-position: bottom right;
    background-size: 50px;
}

.artTab .live2dloadingprogress { width: 80%; position: absolute; margin-right: 20px;}
.artTab .live2dprogress {float:left; width: 15%; }
.artTab .live2dprogress span {color:orange; height: 24px; vertical-align: middle; display: table-cell; font-family: Courier New, Courier, Lucida Sans Typewriter, Lucida Typewriter, monospace; }
.artTab .live2dprogressbarcontainer {margin-left:20%;width:80%;border-radius:16px;background-color:gray;}
.artTab .live2dprogressbar {background-color:orange;height:24px;width:20%;border-radius:16px}