Newer
Older
IntroQuiz2019 / public / css / main.css
/* Pushボタンのレイアウト */
div.pushbutton {
  text-align: center;
}
button#push {
  width: 92%;
  height: 65vh;
  font-size: 5em;
  font-weight: bold;
  padding: 10px 30px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  border: 1px solid #15aeec;
  background-color: #49c0f0;
  background-image: -webkit-linear-gradient(top, #49c0f0, #2cafe3);
  background-image: linear-gradient(to bottom, #49c0f0, #2cafe3);
  border-radius: 10px;
  color: #fff;
  line-height: 50px;
  -webkit-transition: none;
  transition: none;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
  /* テキストのコピーを禁止する */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
button#push:hover {
  border:1px solid #1090c3;
  background-color: #1ab0ec;
  background-image: -webkit-linear-gradient(top, #1ab0ec, #1a92c2);
  background-image: linear-gradient(to bottom, #1ab0ec, #1a92c2);
}
button#push:active {
  background: #1a92c2;
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, .2);
  color: #1679a1;
  text-shadow: 0 1px 1px rgba(255, 255, 255, .5);
}
button#push:disabled {
  color: #000;
  background-color:#f7d034;
  border: 1px solid #f7d034;
  background-image: -webkit-linear-gradient(top, #f7d034, #f7ba59);
  background-image: linear-gradient(to bottom, #f7d034, #f7ba59);
}


/* チームの早押しリスト */
ol {
  counter-reset:number; /*数字をリセット*/
  list-style-type: none!important; /*数字を一旦消す*/
  counter-reset:li;
  font: 14px/1.6 'arial narrow', sans-serif;
  list-style: none;
  padding:0;
}
ol li {
  position: relative;
  font-weight: bold;
  line-height: 28px;
  padding: 20px;
  padding-left: 70px;
  margin: 10px 0;
}
ol li:nth-child(6n+1){
  border:dashed 2px #ff7f7f;
}
ol li:nth-child(6n+2){
  border:dashed 2px #ffbf7f;
}
ol li:nth-child(6n+3){
  border:dashed 2px #7fbfff;
}
ol li:nth-child(6n+4){
  border:dashed 2px #7fff7f;
}
ol li:nth-child(6n+5){
  border:dashed 2px #ff7fff;
}
ol li:nth-child(6n+6){
  border:dashed 2px #bf7fff;
}
ol li:before{
  counter-increment: li;
  content: counter(li);
  position: absolute;
  left: 10px;
  color: #fff;
  text-align: center;
  line-height: 50px;
  width: 50px;
  height: 50px;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
ol li:nth-child(6n+1):before{
  background: #ff7f7f;
}
ol li:nth-child(6n+2):before{
  background: #ffbf7f;
}
ol li:nth-child(6n+3):before{
  background: #7fbfff;
}
ol li:nth-child(6n+4):before{
  background: #7fff7f;
}
ol li:nth-child(6n+5):before{
  background: #ff7fff;
}
ol li:nth-child(6n+6):before{
  background: #bf7fff;
}


/* チームの早押し順位を非表示にする */
#team-list-none{
  display:none;
}


/* 曲リスト */
div#playListArea{
  overflow:auto;
  height:50vh;
}
li.list-group-item:hover {
  background: #a9a9a9;
  cursor:pointer;
}


/* footer */
footer{
  font-size: 90%;
  width: 100%;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: #343A40;
}
footer p.copyright{
  color: #fff;
}


/* footerを最下部に表示する */
html {
  height: 100%;
}
body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.contents {
  flex: 1;
}