123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200 |
- body {
- margin: 0;
- }
- #container {
- padding: 10px;
- }
- .hide {
- display: none;
- }
- #config-screen,
- #level-screen {
- display: none;
- }
- .loaded #open-screen {
- display: none;
- }
- .loaded #config-screen {
- display: block;
- }
- .editing #config-screen {
- display: none;
- }
- .editing #level-screen {
- display: flex;
- flex-direction: column;
- gap: 5px;
- }
- #config-navigation {
- display: inline-flex;
- gap: 5px;
- }
- #levels {
- display: flex;
- flex-direction: column;
- gap: 20px;
- }
- .level-set .header {
- display: flex;
- align-items: center;
- gap: 5px;
- }
- table.level-list {
- border-collapse: collapse;
- width: 100%;
- }
- .level-list tbody tr:hover {
- background: #eee;
- }
- .level-list th,
- .level-list td {
- border: solid 1px black;
- padding: 0px 5px;
- }
- .level-list input {
- width: 80%;
- }
- .lyrics {
- padding-bottom: 200px;
- display: grid;
- grid-template-columns: auto auto auto 1fr 1fr [end];
- grid-gap: 2px;
- }
- .lyrics .header {
- font-weight: bold;
- }
- .lyrics .header.span {
- grid-column: span 2;
- }
- .lyrics input {
- height: 30px;
- border-radius: 2px;
- border-color: silver;
- border-style: solid;
- border-width: 1px;
- padding: 0px 8px;
- }
- .lyrics input:disabled {
- background: lightgrey;
- }
- .lyrics input.time {
- width: 100px;
- }
- .lyrics .time:invalid,
- .lyrics .kana:invalid {
- border-color: red;
- }
- .no-audio .lyrics {
- grid-template-columns: 1fr 1fr;
- }
- .no-audio .lyrics .time,
- .no-audio .lyrics .play-section,
- .no-audio .lyrics .remove-section {
- display: none;
- }
- #level-screen .playback {
- display: flex;
- position: fixed;
- width: calc(100% - 20px);
- bottom: 5px;
- background: white;
- gap: 5px;
- box-shadow: 0px 0px 9px 0px gray;
- }
- #level-screen .controls {
- flex-grow: 1;
- display: flex;
- flex-direction: column;
- gap: 5px;
- margin: 5px 0px;
- }
- #level-screen .scrubber {
- display: grid;
- grid-template-rows: 10px 20px;
- background: lightgrey;
- }
- #level-screen .bar {
- grid-row: 1 / 2;
- }
- #level-screen .bar-overlay {
- background: red;
- height: 100%;
- }
- #level-screen .markers {
- grid-row: 2 / 3;
- position: relative;
- }
- #level-screen .marker {
- position: absolute;
- box-sizing: border-box;
- border-left: solid 2px black;
- border-bottom: solid 5px black;
- height: 100%;
- width: 5px;
- }
- #level-screen .waveform-container {
- position: relative;
- height: 60px;
- background: lightgrey;
- }
- #waveform,
- #waveform-overlay {
- position: absolute;
- height: 100%;
- width: 100%;
- }
- #level-screen.no-waveform .waveform-container {
- display: none;
- }
- #display {
- flex-grow: 1;
- font-size: 150%;
- min-height: 2em;
- }
- #youtube {
- flex-grow: 0;
- }
- #youtube iframe {
- width: 240px;
- height: 135px;
- }
- #level-screen.no-audio .playback {
- display: none;
- }
|