-
Notifications
You must be signed in to change notification settings - Fork 6
/
index.css
129 lines (105 loc) · 6.1 KB
/
index.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
/* Author: Corentin Guichaoua, Philipp Legner */
@font-face {
font-family: 'Quicksand';
font-style: normal;
font-weight: normal;
src: url('fonts/quicksand-book.woff') format('woff');
}
@font-face {
font-family: 'Quicksand';
font-style: normal;
font-weight: 700;
src: url('fonts/quicksand-bold.woff') format('woff');
}
html, body { margin: 0; padding: 0; font-family: 'Quicksand'; color: #323248; }
[v-cloak] { display: none; }
.header { display: flex; }
.header > * { width: 8%; flex-grow: 1; height: 20px; }
h1 { text-align: center; text-transform: uppercase; margin: 12px 0 4px; font-size: 40px; }
h2 { text-align: center; text-transform: uppercase; color: #aaa; margin: 0 0 20px; }
div { /* No reason for anything to be selectable */
-webkit-user-select: none; /* Safari 3.1+ */
-moz-user-select: none; /* Firefox 2+ */
-ms-user-select: none; /* IE 10+ */
user-select: none; /* Standard syntax */
}
.reset { cursor: pointer; position: fixed; top: 30px; right: 10px; font-size: 14px; color: #aaa; }
.reset:hover { text-decoration: underline; }
.languageSwitcher { cursor: pointer; position: fixed; top: 30px; left: 10px; font-size: 14px; color: #aaa; }
.languageSwitcher div:hover { text-decoration: underline; }
.columns { display: flex; flex-wrap: wrap; justify-content: center; }
.col-1 { max-width: 1000px; margin: 20px; flex: 3 1 450px; }
.col-2 { max-width: 320px; margin: 20px; flex: 1 1 135px; }
button { cursor: pointer; outline: none; font-size: 18px; font-family: inherit;
line-height: 1.5em; padding: 0 10px; }
.button-row { display: flex; margin: 0 0 0 1px; }
.options { flex-grow: 1; display: flex; flex-wrap: wrap; }
.button-row button { width: 16%; border: 1px solid #323248; margin: -1px 0 0 -1px; flex-grow: 1;
transition: background .2s, color .2s; }
.button-row button:hover { background-color: #ccc; }
.button-row button.active { background-color: #323248; color: #fff; }
.options + button { flex-shrink: 0; border-bottom-right-radius: 6px; width: 14%; }
.button-row button:nth-child(7) { border-bottom-left-radius: 6px; }
@media screen and (max-width: 820px) { button { font-size: 14px; } }
@media screen and (max-width: 490px) { button { font-size: 12px; } }
.warning { text-align: center; color: #aaa; font-style: italic; margin: 10px 0 0; }
circle { fill: white; stroke: #aaa; }
line { stroke: #aaa; }
polygon { stroke: #aaa; fill : white; }
text { fill: #aaa; font-size: 14px; text-anchor: middle; dominant-baseline: mathematical; }
.tonnetz, .clock { display: block; user-select: none; max-width: 100%; height: auto; }
.tonnetz { border: 1px solid #323248; border-radius: 6px 6px 0 0; box-sizing: border-box; }
.clock { stroke-width: 2px; margin-bottom: 10px; }
.clock text { font-weight: 700; font-size: 24px}
.noteClock circle { r: 24 }
.activeDichord, .activeTrichord { stroke: #323248; stroke-width: 2; fill: #ccc; }
.activeNode + text { fill: white; }
.activeTrichord + text { fill: #323248; }
.clockPolygon { fill: #ccc; stroke: #323248; stroke-width: 3; }
.visitedNode { fill: lightyellow; }
.visitedDichord { stroke-width : 2; }
.visitedTrichord { fill : lightgreen; }
/*Tonnetz-specific stylings */
.tonnetzNote circle { r: 12 }
.tonnetzDichord circle { r: 2}
/* .tonnetzTrichord */
/* CWT-specific stylings*/
/* .chickenNote */
.chickenDichord circle { r: 2}
.chickenTrichord circle { r: 10 }
.chickenTrichord text {font-size: 70%}
.key-selector { display: flex; flex-wrap: wrap; justify-content: center; }
.key-selector button { background: white; width: 28px; height: 28px; border: 2px solid #aaa;
color: #aaa; padding: 0; margin: 2px; line-height: 25px; font-size: 14px;
border-radius: 20px; font-weight: 700; }
.key-selector .activeNode { color: white; }
.activeNode[data-key="3"] { fill: #b30469; stroke: #b30469; background: #b30469; border-color: #b30469; }
.activeNode[data-key="4"] { fill: #822b9b; stroke: #822b9b; background: #822b9b; border-color: #822b9b; }
.activeNode[data-key="5"] { fill: #5053cd; stroke: #5053cd; background: #5053cd; border-color: #5053cd; }
.activeNode[data-key="6"] { fill: #1f7aff; stroke: #1f7aff; background: #1f7aff; border-color: #1f7aff; }
.activeNode[data-key="7"] { fill: #258dab; stroke: #258dab; background: #258dab; border-color: #258dab; }
.activeNode[data-key="8"] { fill: #2ba058; stroke: #2ba058; background: #2ba058; border-color: #2ba058; }
.activeNode[data-key="9"] { fill: #31b304; stroke: #31b304; background: #31b304; border-color: #31b304; }
.activeNode[data-key="10"] { fill: #76a90d; stroke: #76a90d; background: #76a90d; border-color: #76a90d; }
.activeNode[data-key="11"] { fill: #e6bd00; stroke: #e6bd00; background: #e6bd00; border-color: #e6bd00; }
.activeNode[data-key="0"] { fill: #ff941f; stroke: #ff941f; background: #ff941f; border-color: #ff941f; }
.activeNode[data-key="1"] { fill: #e66438; stroke: #e66438; background: #e66438; border-color: #e66438; }
.activeNode[data-key="2"] { fill: #cc3450; stroke: #cc3450; background: #cc3450; border-color: #cc3450; }
.record { width: 100%; margin: 12px 20px 32px; text-align: center; }
.record button { border: none; background: #ddd; border-radius: 4px; line-height: 32px;
padding: 0 16px; margin: 4px; font-size: 16px; transition: background .2s; }
.record button:hover, .record button:focus { background: #bbb; }
.record button[disabled] { display: none; } /* Don't buttons when disabled. */
.modal-background { position: fixed; top: 0; left: 0; bottom: 0; right: 0;
background: rgba(0,0,0,0.6); z-index: 1; }
.modal { position: fixed; z-index: 1; background: white; border-radius: 16px; font-size: 18px;
width: 480px; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: calc(100% - 40px);
padding: 10px 20px; }
.modal p, .modal form { margin: .8em 0; }
.modal hr { border: 0; border-bottom: 1px solid #ccc; }
.modal input { max-width: 100%; box-sizing: border-box; font-family: inherit; text-align: center;
font-size: 16px; }
.song-select { width: 100%; }
.piano-wrap { position: relative; height: 151px; overflow: hidden; }
#piano { position: absolute; left: 50%; margin-left: -740px; }
#piano .inner { text-align: center; display: block; font-size: 14px; margin-top: 4px; }