src/walletgen/styles/index.css · bridge

git.iko.soy/bridge

on 05c1914 help sign in

bridge/src/walletgen/styles/index.css

487 lines 7.0 kB history raw

1@import './base.css';

3/* SF */

4@import './fonts64/SF-Pro-Text-Light.css';

5@import './fonts64/SF-Pro-Text-Regular.css';

6@import './fonts64/SF-Pro-Text-Medium.css';

7@import './fonts64/SF-Pro-Text-Semibold.css';

9/* Source Code Pro */

10@import './fonts64/SourceCodePro-Regular.css';

11@import './fonts64/SourceCodePro-Bold.css';

13/* Work Sans */

14@import './fonts64/WorkSans-SemiBold.css';

15@import './fonts64/WorkSans-Medium.css';

17@import './type.css';

19html {

20 margin: 0;

21 padding: 0;

22 overflow-x: hidden;

23 background-color: black;

24}

26body {

27 margin: 0;

28 padding: 0;

29 color: white;

30 line-height: 6rem;

31}

33a {

34 color: white;

35}

37button:hover, .btn:hover {

38 cursor: pointer;

39}

40button, .btn {

41 font-family: "Work Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

42 font-weight: 500;

43 font-size: 4rem;

44 line-height: 4rem;

45 padding: 3rem 6rem;

46 user-select: none;

47}

49.btn-success {

50 background-color: #6FDC74;

51 font-family: "Source Code Pro";

52}

54.wrapper {

55 min-height: calc(100vh - 52px - 106px - 80px);

56}

58header {

59 width: 100%;

60 height: 106px;

61}

63footer,

64.push {

65 height: 52px;

66}

68.d-none {

69 display: none;

70}

72.d-block {

73 display: block;

74}

76.d-inline {

77 display: inline-block;

78}

80.flex {

81 display: flex;

82}

84.flex-between {

85 justify-content: space-between;

86}

88.w-100 {

89 width: 100%;

90}

92.align-baseline {

93 align-items: baseline;

94}

96.align-center {

97 align-items: center;

98}

100/*

101RADIO

102*/

103

104.radio p {

105 user-select: none;

106}

107

108.radio p:first-child {

109 font-weight: 600;

110 /* line-height: 4rem; */

111 margin-bottom: 2rem;

112}

113

114.radio p:nth-child(2) {

115 font-weight: 400;

116}

117

118.radio div {

119 display: flex;

120 flex-direction: column;

121 margin-left: 6rem;

122 flex: 1;

123}

124

125.radio input[type='radio'] {

126 display: none;

127}

128

129.radio label:before {

130 content: '';

131 position: absolute;

132 width: 6rem;

133 height: 6rem;

134 border-radius: 999px;

135}

136

137.radio.isNotChecked label:before {

138 border: 2px solid white;

139 background-color: transparent;

140}

141

142.radio.isChecked label:before {

143 background-color: #4330FC;

144 border: 2px solid #4330FC;

145}

146

147.radio label {

148 width: 6rem;

149 height: 6rem;

150 margin:0;

151 border-radius: 999px;

152 position: relative;

153}

154

155.radio label:hover {

156 cursor: pointer;

157}

158

159.radio label input[type='radio']+span {

160 border-radius: 999px;

161 width: 8px;

162 height: 8px;

163 display: block;

164 transform: translate(2.5rem, 2.5rem);

165 background-color: none;

166}

167

168.radio label input[type='radio']:checked+span {

169 background-color: black;

170}

171

172

173

174/*

175CHECKBOX

176*/

177.checkbox p {

178 user-select: none;

179 margin-top: 0;

180 margin-bottom: 0;

181}

182

183.checkbox p:first-child {

184 font-weight: 600;

185 margin-bottom: 2rem;

186}

187

188.checkbox p:first-child:hover {

189 /* cursor: pointer; */

190}

191

192.checkbox p:nth-child(2) {

193 font-weight: 400;

194}

195

196.checkbox div {

197 display: flex;

198 flex-direction: column;

199 margin-left: 6rem;

200 flex: 1;

201}

202

203.checkbox input[type='checkbox'] {

204 display: none;

205}

206

207.checkbox label:before {

208 content: '';

209 position: absolute;

210 width: 4rem;

211 height: 4rem;

212}

213

214.checkbox.isNotChecked label:before {

215 border: 2px solid white;

216 background-color: transparent;

217}

218

219.checkbox.isChecked label:before {

220 background-color: #4330FC;

221 border: 2px solid #4330FC;

222}

223

224.checkbox label {

225 width: 4rem;

226 height: 4rem;

227 margin:0;

228 position: relative;

229}

230

231.checkbox label:hover {

232 cursor: pointer;

233}

234

235.checkbox label input[type='checkbox']+svg {

236 transform: translate(0, 0);

237 opacity: 0;

238}

239

240

241.checkbox label input[type='checkbox']:checked+svg {

242 opacity: 1;

243}

244

245.checkbox label input[type='checkbox']:checked+span {

246 background-color: black;

247}

248

249.c-blue { color: #4330FC; }

250

251.c-red { color: #EE3124; }

252

253.c-green { color: #6FDC74; }

254

255.c-orange { color: #FFC440; }

256

257.c-gray { color: #333333; }

258

259.c-gray-60 { color: #666666; }

260

261.c-gray-30 { color: #B3B3B3; }

262

263.c-gray-10 { color: #F2F2F2; }

264

265.c-black { color: #111111; }

266

267.c-white { color: #FFFFFF; }

268

269.c-gray-30 { color: #B3B3B3; }

270

271.br-blue { border-color: #4330FC; }

272

273.br-red { border-color: #EE3124; }

274

275.br-green { border-color: #6FDC74; }

276

277.br-orange { border-color: #FFC440; }

278

279.br-gray { border-color: #333333; }

280

281.br-gray-60 { border-color: #666666; }

282

283.br-gray-30 { border-color: #B3B3B3; }

284

285.br-gray-10 { border-color: #F2F2F2; }

286

287.br-black { border-color: #111111; }

288

289.br-white { border-color: #FFFFFF; }

290

291.br-gray-30 { border-color: #B3B3B3; }

292

293.bg-darkGreen {

294 background-color: #0ea155;

295}

296

297.c-darkGreen {

298 color: #0ea155;

299}

300

301.bg-very-high {

302 background-color: #FCC440;

303}

304

305.bg-high {

306 background-color: #76B9FC;

307}

308

309.bg-medium {

310 background-color: #3279FC;

311}

312

313.bg-low {

314 background-color: #4330FC;

315}

316

317.spinner-pending {

318 position: relative;

319 content: "";

320 border-radius: 100%;

321 height: 10rem;

322 width: 10rem;

323

324 background-color: rgba(255,255,255,0.66);

325}

326

327.spinner-pending::after {

328 left: 0;

329 top: 0;

330 content: "";

331 background-color: rgba(255,255,255,1);

332 width: 10rem;

333 height: 10rem;

334 position: absolute;

335 border-radius: 100%;

336 clip: rect(0, 10rem, 10rem, 5rem);

337 animation: spin 1.2s cubic-bezier(0.645, 0.045, 0.355, 1.000) infinite;

338}

339

340

341@keyframes spin {

342 0% {transform:rotate(0deg)}

343 25% {transform:rotate(90deg)}

344 50% {transform:rotate(180deg)}

345 75% {transform:rotate(270deg)}

346 100% {transform:rotate(360deg)}

347 }

348

349.spinner-nostart {

350 width: 8px;

351 height: 8px;

352 border-radius: 100%;

353 content:'';

354 background-color: white;

355}

356

357.spinner-done {

358

359}

360

361.upload-button {

362 label > * {

363 pointer-events: none;

364 }

365}

366

367.hidden {

368 width: 0.1;

369 height: 0.1;

370 opacity: 0;

371 overflow: hidden;

372 position: absolute;

373 z-index: -100000000;

374}

375

376.full {

377 display: block;

378 content: '';

379 width: 100%;

380 flex: 1;

381}

382

383.flex-shrink-0 {

384 flex-shrink: 0;

385}

386

387.table {

388 display: table;

389}

390

391.btn-tray {

392 margin-top: 8rem;

393}

394

395

396code, pre {

397 background-color: #222;

398}

399

400.flex {

401 flex-wrap: nowrap;

402}

403

404.extremely-hidden {

405 position: fixed;

406 top: -99999;

407 left: -99999;

408 visibility: hidden;

409 opacity:0;

410}

411

412.b-r-1-black {

413 border-right: 1px solid black;

414}

415

416.bg-lightBlue {

417 background-color: #6C5CFF;

418}

419

420.bg-lightBlue-pending {

421 background-color: #6C5CFF;

422 animation-name: blinking-load;

423 animation-duration: 0.5s;

424 transition: background-color 0.5s;

425 animation-iteration-count: infinite;

426}

427

428@keyframes blinking-load {

429 0% {top: 0px;background-color: #6C5CFF;}

430 50% {top: 100px;background-color: #4330FC;}

431 100% {top: 0px;background-color: #6C5CFF;}

432}

433

434

435.f-1 {

436 flex: 0.1;

437}

438

439.f-2 {

440 flex: 0.2;

441}

442

443.f-3 {

444 flex: 0.3;

445}

446

447.f-4 {

448 flex: 0.4;

449}

450

451.f-5 {

452 flex: 0.5;

453}

454

455.noClick {

456 pointer-events: none;

457}

458

459.legal ol {

460 counter-reset: item;

461}

462

463.legal ol li {

464 display: block;

465}

466

467.legal ol ol li {

468 padding-left: 8rem;

469}

470

471.legal ol li:before {

472 content: counters(item, ".") ".";

473 counter-increment: item;

474 display: inline-block;

475 transform: translate(-10rem,5.825rem);

476}

477

478.legal .ls-alpha {

479 counter-reset: item;

480}

481

482.legal .ls-alpha li:before {

483 content: counter(item, lower-alpha) ".";

484 counter-increment: item;

485 display: inline-block;

486 transform: translate(-10rem,5.825rem);

487}