Newer
Older
2020_intr / public / css / main.css
@mamadoka mamadoka on 17 Aug 2020 2 KB create intr
/* 再生ボタン */
/* 円 */
.play {
	font-size: 70px;
	position: relative;
	width: 1.4em;
	height: 1.4em;
	border: 0.1em solid #39a9d6;
	border-radius: 100%;
}
/* マーク */
.play::before {
	content: "";
	position: absolute;
	top: 0.20em;
	left: 0.38em;
	width: 0;
	height: 0;
	border-top: 0.4em solid transparent;
	border-left: 0.6em solid #39a9d6;
	border-bottom: 0.4em solid transparent;
}

/* 停止ボタン */
/* 円 */
.stop {
	font-size: 70px;
	position: relative;
	width: 1.4em;
	height: 1.4em;
	border: 0.1em solid #39a9d6;
	border-radius: 100%;
}
/* マーク */
.stop::before {
	content: "";
	position: absolute;
	top: 0.25em;
	left: 0.25em;
	width: 0.7em;
	height: 0.7em;
	background-color: #39a9d6;
}

/* サビボタン */
/* 円 */
.sabi{
	font-size: 70px;
	position: relative;
	width: 1.4em;
	height: 1.4em;
	border: 0.1em solid #39a9d6;
	border-radius: 100%;
}

.sabi::before{
    content: "♪";
    color: #39a9d6;
    position: absolute;
    top: -0.2em;
	left: 0.1em;
	width: 0.7em;
    height: 0.7em;
}

/* テーブル */

table{
    width: 100%;
    border-collapse:separate;
    border-spacing: 0;
  }
  
  table th:first-child{
    border-radius: 5px 0 0 0;
  }
  
  table th:last-child{
    border-radius: 0 5px 0 0;
    border-right: 1px solid #3c6690;
  }
  
  table th{
    text-align: center;
    color:white;
    background: linear-gradient(#829ebc,#225588);
    border-left: 1px solid #3c6690;
    border-top: 1px solid #3c6690;
    border-bottom: 1px solid #3c6690;
    box-shadow: 0px 1px 1px rgba(255,255,255,0.3) inset;
    width: 25%;
    padding: 10px 0;
  }

  table td{
    text-align: center;
    border-left: 1px solid #a8b7c5;
    border-bottom: 1px solid #a8b7c5;
    border-top: 1px solid #a8b7c5;
    box-shadow: 0px -3px 5px 1px #eee inset;
    width: 25%;
    padding: 10px 0;
  }
  
  table td:last-child{
    border-right: 1px solid #a8b7c5;
  }
  
  table tr:last-child td:first-child {
    border-radius: 0 0 0 5px;
  }
  
  table tr:last-child td:last-child {
    border-radius: 0 0 5px 0;
  }