160 lines
2.8 KiB
SCSS
160 lines
2.8 KiB
SCSS
.container {
|
|
padding: 2rem;
|
|
background: #1e1e1e;
|
|
color: #ffffff;
|
|
border-radius: 1rem;
|
|
max-width: 60rem;
|
|
margin: 0 auto;
|
|
flex-shrink: 0;
|
|
height: 100%;
|
|
overflow: auto;
|
|
|
|
h1 {
|
|
font-size: 2.4rem;
|
|
margin-bottom: 1.5rem;
|
|
text-align: center;
|
|
}
|
|
|
|
label {
|
|
display: block;
|
|
font-size: 1.6rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
input,
|
|
select {
|
|
font-size: 1.6rem;
|
|
padding: 0.5rem;
|
|
border-radius: 0.5rem;
|
|
border: 0.1rem solid #ccc;
|
|
background: #333;
|
|
color: #fff;
|
|
}
|
|
|
|
input[type="file"] {
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
// ボタンの基本スタイル
|
|
button {
|
|
font-size: 1.8rem;
|
|
padding: 1rem 2rem;
|
|
border: none;
|
|
border-radius: 0.5rem;
|
|
cursor: pointer;
|
|
transition: background 0.3s;
|
|
margin-right: 1rem;
|
|
|
|
&:focus {
|
|
outline: none;
|
|
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
|
|
}
|
|
}
|
|
|
|
// 再生開始用ボタン（通常時）
|
|
.primary {
|
|
background: #007bff;
|
|
color: #fff;
|
|
&:hover {
|
|
background: #0056b3;
|
|
}
|
|
}
|
|
|
|
// 再生停止用ボタン
|
|
.secondary {
|
|
background: #dc3545;
|
|
color: #fff;
|
|
&:hover {
|
|
background: #a71d2a;
|
|
}
|
|
}
|
|
|
|
// ファイルクリア用ボタン
|
|
.file-clear {
|
|
background: #6c757d;
|
|
color: #fff;
|
|
&:hover {
|
|
background: #5a6268;
|
|
}
|
|
}
|
|
|
|
// 「再生中」状態（クリック不可）用のスタイル
|
|
.is_playing {
|
|
background: #6c757d;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
// カウントダウン表示用エリア
|
|
.countdown {
|
|
margin-top: 1rem;
|
|
font-size: 1.6rem;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
|
|
span {
|
|
font-weight: bold;
|
|
}
|
|
|
|
button {
|
|
font-size: 1.6rem;
|
|
padding: 0.5rem 1rem;
|
|
border: none;
|
|
border-radius: 0.4rem;
|
|
background: #28a745;
|
|
color: #fff;
|
|
cursor: pointer;
|
|
transition: background 0.3s;
|
|
|
|
&:hover {
|
|
background: #218838;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 再生モードや時刻指定の select 関連（横並びの場合などに調整）
|
|
.time-selects {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
// 字幕一覧のテーブル
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin-top: 2rem;
|
|
|
|
th,
|
|
td {
|
|
padding: 1rem;
|
|
border: 0.1rem solid #444;
|
|
text-align: left;
|
|
font-size: 1.4rem;
|
|
}
|
|
|
|
th {
|
|
background: #555;
|
|
}
|
|
|
|
tbody {
|
|
tr {
|
|
cursor: pointer;
|
|
transition: background 0.2s;
|
|
|
|
&:nth-child(even) {
|
|
background: #2a2a2a;
|
|
}
|
|
|
|
&:hover {
|
|
background: #444;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.subtitle_lists {
|
|
font-size: 1.4rem;
|
|
}
|
|
}
|