src/style/anim.css · bridge

git.iko.soy/bridge

on 6bf0691 help sign in

bridge/src/style/anim.css

458 lines 7.0 kB history raw

1/* @for $i from 0 through 13 {

2 .anim-s#{$i} {

3 animation: s#{$i} #{$i*50}ms steps(#{$i}, end) forwards;

5} */

6.step-h-0 {

7 animation: frame-h-0 0ms steps(0, end) forwards;

10.step-h-1 {

11 animation: frame-h-1 50ms steps(1, end) forwards;

12}

14.step-h-2 {

15 animation: frame-h-2 100ms steps(2, end) forwards;

16}

18.step-h-3 {

19 animation: frame-h-3 150ms steps(3, end) forwards;

20}

22.step-h-4 {

23 animation: frame-h-4 200ms steps(4, end) forwards;

24}

26.step-h-5 {

27 animation: frame-h-5 250ms steps(5, end) forwards;

28}

30.step-h-6 {

31 animation: frame-h-6 300ms steps(6, end) forwards;

32}

34.step-h-7 {

35 animation: frame-h-7 350ms steps(7, end) forwards;

36}

38.step-h-8 {

39 animation: frame-h-8 400ms steps(8, end) forwards;

40}

42.step-h-9 {

43 animation: frame-h-9 450ms steps(9, end) forwards;

44}

46.step-h-10 {

47 animation: frame-h-10 500ms steps(10, end) forwards;

48}

50.step-h-11 {

51 animation: frame-h-11 550ms steps(11, end) forwards;

52}

54.step-h-12 {

55 animation: frame-h-12 600ms steps(12, end) forwards;

56}

58.step-h-13 {

59 animation: frame-h-13 650ms steps(13, end) forwards;

60}

62.step-h-14 {

63 animation: frame-h-14 700ms steps(14, end) forwards;

64}

66.step-v-0 {

67 animation: frame-v-0 0ms steps(0, end) forwards;

68}

70.step-v-1 {

71 animation: frame-v-1 50ms steps(1, end) forwards;

72}

74.step-v-2 {

75 animation: frame-v-2 100ms steps(2, end) forwards;

76}

78.step-v-3 {

79 animation: frame-v-3 150ms steps(3, end) forwards;

80}

82.step-v-4 {

83 animation: frame-v-4 200ms steps(4, end) forwards;

84}

86.step-v-5 {

87 animation: frame-v-5 250ms steps(5, end) forwards;

88}

90.step-v-6 {

91 animation: frame-v-6 300ms steps(6, end) forwards;

92}

94.step-v-7 {

95 animation: frame-v-7 350ms steps(7, end) forwards;

96}

98.step-v-8 {

99 animation: frame-v-8 400ms steps(8, end) forwards;

100}

101

102.step-v-9 {

103 animation: frame-v-9 450ms steps(9, end) forwards;

104}

105

106.step-v-10 {

107 animation: frame-v-10 500ms steps(10, end) forwards;

108}

109

110.step-v-11 {

111 animation: frame-v-11 550ms steps(11, end) forwards;

112}

113

114.step-v-12 {

115 animation: frame-v-12 600ms steps(12, end) forwards;

116}

117

118.step-v-13 {

119 animation: frame-v-13 650ms steps(13, end) forwards;

120}

121

122.step-v-14 {

123 animation: frame-v-14 700ms steps(14, end) forwards;

124}

125

126.slide-h-0 {

127 animation: frame-h-0 0ms forwards;

128}

129

130.slide-h-1 {

131 animation: frame-h-1 100ms forwards;

132}

133

134.slide-h-2 {

135 animation: frame-h-2 200ms forwards;

136}

137

138.slide-h-3 {

139 animation: frame-h-3 300ms forwards;

140}

141

142.slide-h-4 {

143 animation: frame-h-4 400ms forwards;

144}

145

146.slide-h-5 {

147 animation: frame-h-5 500ms forwards;

148}

149

150.slide-h-6 {

151 animation: frame-h-6 600ms forwards;

152}

153

154.slide-h-7 {

155 animation: frame-h-7 700ms forwards;

156}

157

158.slide-h-8 {

159 animation: frame-h-8 800ms forwards;

160}

161

162.slide-h-9 {

163 animation: frame-h-9 900ms forwards;

164}

165

166.slide-h-10 {

167 animation: frame-h-10 1000ms forwards;

168}

169

170.slide-h-11 {

171 animation: frame-h-11 1100ms forwards;

172}

173

174.slide-h-12 {

175 animation: frame-h-12 1200ms forwards;

176}

177

178.slide-h-13 {

179 animation: frame-h-13 1300ms forwards;

180}

181

182.slide-h-14 {

183 animation: frame-h-14 1400ms forwards;

184}

185

186.slide-v-0 {

187 animation: frame-v-0 0ms forwards;

188}

189

190.slide-v-1 {

191 animation: frame-v-1 200ms forwards;

192}

193

194.slide-v-2 {

195 animation: frame-v-2 400ms forwards;

196}

197

198.slide-v-3 {

199 animation: frame-v-3 600ms forwards;

200}

201

202.slide-v-4 {

203 animation: frame-v-4 800ms forwards;

204}

205

206.slide-v-5 {

207 animation: frame-v-5 1000ms forwards;

208}

209

210.slide-v-6 {

211 animation: frame-v-6 1200ms forwards;

212}

213

214.slide-v-7 {

215 animation: frame-v-7 1400ms forwards;

216}

217

218.slide-v-8 {

219 animation: frame-v-8 1600ms forwards;

220}

221

222.slide-v-9 {

223 animation: frame-v-9 1800ms forwards;

224}

225

226.slide-v-10 {

227 animation: frame-v-10 2000ms forwards;

228}

229

230.slide-v-11 {

231 animation: frame-v-11 2200ms forwards;

232}

233

234.slide-v-12 {

235 animation: frame-v-12 2400ms forwards;

236}

237

238.slide-v-13 {

239 animation: frame-v-13 2600ms forwards;

240}

241

242.slide-v-14 {

243 animation: frame-v-14 2800ms forwards;

244}

245

246@keyframes s0 {

247 to {

248 background-position: 0px 0px;

249 }

250}

251@keyframes frame-h-0 {

252 to {

253 background-position: -0px 0px;

254 }

255}

256@keyframes frame-h-1 {

257 to {

258 background-position: -12px 0px;

259 }

260}

261@keyframes frame-h-2 {

262 to {

263 background-position: -24px 0px;

264 }

265}

266@keyframes frame-h-3 {

267 to {

268 background-position: -36px 0px;

269 }

270}

271@keyframes frame-h-4 {

272 to {

273 background-position: -48px 0px;

274 }

275}

276@keyframes frame-h-5 {

277 to {

278 background-position: -60px 0px;

279 }

280}

281@keyframes frame-h-6 {

282 to {

283 background-position: -72px 0px;

284 }

285}

286@keyframes frame-h-7 {

287 to {

288 background-position: -84px 0px;

289 }

290}

291@keyframes frame-h-8 {

292 to {

293 background-position: -96px 0px;

294 }

295}

296@keyframes frame-h-9 {

297 to {

298 background-position: -108px 0px;

299 }

300}

301@keyframes frame-h-10 {

302 to {

303 background-position: -120px 0px;

304 }

305}

306@keyframes frame-h-11 {

307 to {

308 background-position: -132px 0px;

309 }

310}

311@keyframes frame-h-12 {

312 to {

313 background-position: -144px 0px;

314 }

315}

316@keyframes frame-h-13 {

317 to {

318 background-position: -156px 0px;

319 }

320}

321@keyframes frame-h-14 {

322 to {

323 background-position: -168px 0px;

324 }

325}

326@keyframes frame-v-14 {

327 to {

328 background-position: 0px 0px;

329 }

330}

331@keyframes frame-v-13 {

332 to {

333 background-position: 0px 12px;

334 }

335}

336@keyframes frame-v-12 {

337 to {

338 background-position: 0px 24px;

339 }

340}

341@keyframes frame-v-11 {

342 to {

343 background-position: 0px 36px;

344 }

345}

346@keyframes frame-v-10 {

347 to {

348 background-position: 0px 48px;

349 }

350}

351@keyframes frame-v-9 {

352 to {

353 background-position: 0px 60px;

354 }

355}

356@keyframes frame-v-8 {

357 to {

358 background-position: 0px 72px;

359 }

360}

361@keyframes frame-v-7 {

362 to {

363 background-position: 0px 84px;

364 }

365}

366@keyframes frame-v-6 {

367 to {

368 background-position: 0px 96px;

369 }

370}

371@keyframes frame-v-5 {

372 to {

373 background-position: 0px 108px;

374 }

375}

376@keyframes frame-v-4 {

377 to {

378 background-position: 0px 120px;

379 }

380}

381@keyframes frame-v-3 {

382 to {

383 background-position: 0px 132px;

384 }

385}

386@keyframes frame-v-2 {

387 to {

388 background-position: 0px 144px;

389 }

390}

391@keyframes frame-v-1 {

392 to {

393 background-position: 0px 156px;

394 }

395}

396@keyframes frame-v-0 {

397 to {

398 background-position: 0px 168px;

399 }

400}

401

402.blink {

403 animation: s0 1s steps(2, forwards) infinite;

404 -webkit-animation: s0 1s steps(2, forwards) infinite;

405}

406

407/* @keyframes blink-animation {

408 to {

409 visibility: hidden;

410 }

411}

412@-webkit-keyframes blink-animation {

413 to {

414 visibility: hidden;

415 }

416} */

417

418button:not([class]) {

419 border: 1px solid #a6a6a6;

420 padding: 5px 5px;

421 margin-bottom: 2px;

422 border-radius: 7px;

423 font-family: Inter;

424 outline: none;

425}

426

427button:not([class]):hover {

428 cursor: pointer;

429 /* border: 2px solid #E6E6E6;

430 background-color: #E6E6E6; */

431}

432

433/*

434button:active {

435 background-color: #4330FC;

436 border: 1px solid #4330FC;

437 color: white;

438} */

439

440button:not([class]):active {

441 background-color: #000;

442 border: 1px solid #000;

443 color: white;

444}

445

446button:not([class]):disabled {

447 cursor: default;

448 pointer-events: none;

449}

450

451p {

452 font-size: 12px;

453}

454

455* {

456 -moz-osx-font-smoothing: grayscale;

457 font-smoothing: grayscale;

458}