A Chrome extension that scrobbles NTS Radio tracks to teal.fm
chadtmiller.com
1body {
2 width: 350px;
3 padding: 0;
4 margin: 0;
5 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
6 font-size: 14px;
7 color: #333;
8}
9
10.container {
11 padding: 20px;
12}
13
14h1 {
15 font-size: 18px;
16 margin: 0 0 20px 0;
17 color: #000;
18}
19
20h2 {
21 font-size: 14px;
22 margin: 0 0 12px 0;
23 color: #666;
24 font-weight: 600;
25}
26
27input[type="text"],
28input[type="password"] {
29 width: 100%;
30 padding: 8px 12px;
31 margin-bottom: 10px;
32 border: 1px solid #ddd;
33 border-radius: 4px;
34 box-sizing: border-box;
35 font-size: 14px;
36}
37
38input[type="text"]:focus,
39input[type="password"]:focus {
40 outline: none;
41 border-color: #4a9eff;
42}
43
44button {
45 width: 100%;
46 padding: 10px;
47 background: #000;
48 color: #fff;
49 border: none;
50 border-radius: 4px;
51 font-size: 14px;
52 cursor: pointer;
53 font-weight: 500;
54}
55
56button:hover {
57 background: #333;
58}
59
60button:disabled {
61 background: #ccc;
62 cursor: not-allowed;
63}
64
65.error {
66 color: #d32f2f;
67 font-size: 12px;
68 margin-top: 8px;
69 min-height: 16px;
70}
71
72#auth-section {
73 margin-bottom: 20px;
74 padding-bottom: 20px;
75 border-bottom: 1px solid #eee;
76}
77
78#settings-section {
79 margin-bottom: 20px;
80}
81
82#settings-section label {
83 display: flex;
84 align-items: center;
85 cursor: pointer;
86}
87
88#settings-section input[type="checkbox"] {
89 margin-right: 8px;
90 cursor: pointer;
91}
92
93.info {
94 font-size: 12px;
95 color: #666;
96 line-height: 1.5;
97}
98
99a {
100 color: #4a9eff;
101 text-decoration: none;
102}
103
104a:hover {
105 text-decoration: underline;
106}
107
108#user-info {
109 font-size: 12px;
110 color: #666;
111 margin-bottom: 12px;
112}
113
114#now-playing-section {
115 margin-bottom: 20px;
116 padding-bottom: 20px;
117 border-bottom: 1px solid #eee;
118}
119
120.track-info {
121 padding: 12px;
122 background: #f5f5f5;
123 border-radius: 4px;
124}
125
126.track-title {
127 font-size: 14px;
128 font-weight: 600;
129 color: #000;
130 margin-bottom: 4px;
131}
132
133.track-artist {
134 font-size: 12px;
135 color: #666;
136}
137
138#recent-scrobbles {
139 margin-top: 16px;
140}
141
142#recent-scrobbles h3 {
143 font-size: 12px;
144 font-weight: 600;
145 color: #999;
146 margin: 0 0 8px 0;
147 text-transform: uppercase;
148 letter-spacing: 0.5px;
149}
150
151#recent-tracks-list {
152 display: flex;
153 flex-direction: column;
154 gap: 6px;
155}
156
157.recent-track {
158 display: flex;
159 flex-direction: column;
160 font-size: 11px;
161 line-height: 1.4;
162 color: #999;
163}
164
165.recent-track-title {
166 color: #666;
167}
168
169.recent-track-artist {
170 color: #999;
171}
172
173.info.small {
174 font-size: 11px;
175 color: #999;
176}