SampleTap/content.css at main · nisesimadao/SampleTap · GitHub

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
/* サイト自身のダウンロードボタンを複製して使うので、寸法・余白・角丸・波紋は
   本家のまま。ここで変えるのは色と、行末の角丸の付け替えだけ。 */

.sf-card-action > .sfdl-btn,
.sf-card-action > .sfdl-btn i {
  color: #ff5252 !important;
}

.sf-card-action > .sfdl-btn:hover,
.sf-card-action > .sfdl-btn:hover i {
  color: #ff1744 !important;
}

/* 3つ並ぶので、右下の角丸は本家のダウンロードボタンから末尾のこちらへ移す */
.sf-card-action > [aria-label='Download']:not(:last-child) {
  border-bottom-right-radius: 0 !important;
}

.sf-card-action > .sfdl-btn:last-child {
  border-bottom-right-radius: 5px !important;
}

/* 状態表示 */
.sf-card-action > .sfdl-btn[data-sfdl-state='busy'] {
  cursor: progress;
}

.sf-card-action > .sfdl-btn[data-sfdl-state='done'],
.sf-card-action > .sfdl-btn[data-sfdl-state='done'] i {
  color: #26a69a !important;
}

.sf-card-action > .sfdl-btn[data-sfdl-state='error'],
.sf-card-action > .sfdl-btn[data-sfdl-state='error'] i {
  color: #b71c1c !important;
}

/* Font Awesome の fa-spin が無い環境向けの保険 */
@keyframes sfdl-spin {
  to {
    transform: rotate(360deg);
  }
}

.sf-card-action > .sfdl-btn[data-sfdl-state='busy'] i {
  animation: sfdl-spin 1s linear infinite;
}

/* Catalog buttons inherit each site's real button classes, scoped styles,
   icon wrapper, hover surface and focus treatment. Do not paint a shared skin. */
.sfdl-catalog-btn { flex-shrink: 0; }
.sfdl-catalog-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.sfdl-catalog-btn[data-sfdl-state="busy"] { cursor: progress; }
.sfdl-catalog-btn[data-sfdl-state="busy"] .sfdl-status-icon { animation: sfdl-spin 1s linear infinite; }
.sfdl-catalog-btn[data-sfdl-state="error"] { color: #ef6b73 !important; }

/* Unexpanded Noiiz rows have no action column. Fit the native icon button
   beside the filename using the same 32px / 18px sizing as its compact player. */
.nz-table__cell--name > .sfdl-noiiz-compact {
  float: right;
  width: 32px;
  min-width: 32px;
  height: 32px;
  margin: 0 0 0 8px;
}
.sfdl-noiiz-compact svg { width: 18px; height: 18px; }

@media (prefers-reduced-motion: reduce) {
  .sfdl-catalog-btn[data-sfdl-state="busy"] .sfdl-status-icon { animation: none; }
}