src/walletgen/style/index.css · bridge

git.iko.soy/bridge

on 1ec514b help sign in

bridge/src/walletgen/style/index.css

474 lines 6.6 kB history raw

1walletgen {}

3@import './base.css';

4@import './type.css';

6html {

7 margin: 0;

8 padding: 0;

9 overflow-x: hidden;

10 background-color: black;

11}

13body {

14 margin: 0;

15 padding: 0;

16 color: white;

17 line-height: 6rem;

18}

20a {

21 color: white;

22}

24button:hover, .btn:hover {

25 cursor: pointer;

26}

27button, .btn {

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

29 font-weight: 500;

30 font-size: 4rem;

31 line-height: 4rem;

32 padding: 3rem 6rem;

33 user-select: none;

34}

36.btn-success {

37 background-color: #6FDC74;

38 font-family: "Source Code Pro";

39}

41.wrapper {

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

43}

45header {

46 width: 100%;

47 height: 106px;

48}

50footer,

51.push {

52 height: 52px;

53}

55.d-none {

56 display: none;

57}

59.d-block {

60 display: block;

61}

63.d-inline {

64 display: inline-block;

65}

67.flex {

68 display: flex;

69}

71.flex-between {

72 justify-content: space-between;

73}

75.w-100 {

76 width: 100%;

77}

79.align-baseline {

80 align-items: baseline;

81}

83.align-center {

84 align-items: center;

85}

87/*

88RADIO

89*/

91.radio p {

92 user-select: none;

93}

95.radio p:first-child {

96 font-weight: 600;

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

98 margin-bottom: 2rem;

99}

100

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

102 font-weight: 400;

103}

104

105.radio div {

106 display: flex;

107 flex-direction: column;

108 margin-left: 6rem;

109 flex: 1;

110}

111

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

113 display: none;

114}

115

116.radio label:before {

117 content: '';

118 position: absolute;

119 width: 6rem;

120 height: 6rem;

121 border-radius: 999px;

122}

123

124.radio.isNotChecked label:before {

125 border: 2px solid white;

126 background-color: transparent;

127}

128

129.radio.isChecked label:before {

130 background-color: #4330FC;

131 border: 2px solid #4330FC;

132}

133

134.radio label {

135 width: 6rem;

136 height: 6rem;

137 margin:0;

138 border-radius: 999px;

139 position: relative;

140}

141

142.radio label:hover {

143 cursor: pointer;

144}

145

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

147 border-radius: 999px;

148 width: 8px;

149 height: 8px;

150 display: block;

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

152 background-color: none;

153}

154

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

156 background-color: black;

157}

158

159

160

161/*

162CHECKBOX

163*/

164.checkbox p {

165 user-select: none;

166 margin-top: 0;

167 margin-bottom: 0;

168}

169

170.checkbox p:first-child {

171 font-weight: 600;

172 margin-bottom: 2rem;

173}

174

175.checkbox p:first-child:hover {

176 /* cursor: pointer; */

177}

178

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

180 font-weight: 400;

181}

182

183.checkbox div {

184 display: flex;

185 flex-direction: column;

186 margin-left: 6rem;

187 flex: 1;

188}

189

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

191 display: none;

192}

193

194.checkbox label:before {

195 content: '';

196 position: absolute;

197 width: 4rem;

198 height: 4rem;

199}

200

201.checkbox.isNotChecked label:before {

202 border: 2px solid white;

203 background-color: transparent;

204}

205

206.checkbox.isChecked label:before {

207 background-color: #4330FC;

208 border: 2px solid #4330FC;

209}

210

211.checkbox label {

212 width: 4rem;

213 height: 4rem;

214 margin:0;

215 position: relative;

216}

217

218.checkbox label:hover {

219 cursor: pointer;

220}

221

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

223 transform: translate(0, 0);

224 opacity: 0;

225}

226

227

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

229 opacity: 1;

230}

231

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

233 background-color: black;

234}

235

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

237

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

239

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

241

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

243

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

245

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

247

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

249

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

251

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

253

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

255

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

257

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

259

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

261

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

263

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

265

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

267

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

269

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

271

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

273

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

275

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

277

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

279

280.bg-darkGreen {

281 background-color: #0ea155;

282}

283

284.c-darkGreen {

285 color: #0ea155;

286}

287

288.bg-very-high {

289 background-color: #FCC440;

290}

291

292.bg-high {

293 background-color: #76B9FC;

294}

295

296.bg-medium {

297 background-color: #3279FC;

298}

299

300.bg-low {

301 background-color: #4330FC;

302}

303

304.spinner-pending {

305 position: relative;

306 content: "";

307 border-radius: 100%;

308 height: 10rem;

309 width: 10rem;

310

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

312}

313

314.spinner-pending::after {

315 left: 0;

316 top: 0;

317 content: "";

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

319 width: 10rem;

320 height: 10rem;

321 position: absolute;

322 border-radius: 100%;

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

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

325}

326

327

328@keyframes spin {

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

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

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

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

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

334 }

335

336.spinner-nostart {

337 width: 8px;

338 height: 8px;

339 border-radius: 100%;

340 content:'';

341 background-color: white;

342}

343

344.spinner-done {

345

346}

347

348.upload-button {

349 label > * {

350 pointer-events: none;

351 }

352}

353

354.hidden {

355 width: 0.1;

356 height: 0.1;

357 opacity: 0;

358 overflow: hidden;

359 position: absolute;

360 z-index: -100000000;

361}

362

363.full {

364 display: block;

365 content: '';

366 width: 100%;

367 flex: 1;

368}

369

370.flex-shrink-0 {

371 flex-shrink: 0;

372}

373

374.table {

375 display: table;

376}

377

378.btn-tray {

379 margin-top: 8rem;

380}

381

382

383code, pre {

384 background-color: #222;

385}

386

387.flex {

388 flex-wrap: nowrap;

389}

390

391.extremely-hidden {

392 position: fixed;

393 top: -99999;

394 left: -99999;

395 visibility: hidden;

396 opacity:0;

397}

398

399.b-r-1-black {

400 border-right: 1px solid black;

401}

402

403.bg-lightBlue {

404 background-color: #6C5CFF;

405}

406

407.bg-lightBlue-pending {

408 background-color: #6C5CFF;

409 animation-name: blinking-load;

410 animation-duration: 0.5s;

411 transition: background-color 0.5s;

412 animation-iteration-count: infinite;

413}

414

415@keyframes blinking-load {

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

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

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

419}

420

421

422.f-1 {

423 flex: 0.1;

424}

425

426.f-2 {

427 flex: 0.2;

428}

429

430.f-3 {

431 flex: 0.3;

432}

433

434.f-4 {

435 flex: 0.4;

436}

437

438.f-5 {

439 flex: 0.5;

440}

441

442.noClick {

443 pointer-events: none;

444}

445

446.legal ol {

447 counter-reset: item;

448}

449

450.legal ol li {

451 display: block;

452}

453

454.legal ol ol li {

455 padding-left: 8rem;

456}

457

458.legal ol li:before {

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

460 counter-increment: item;

461 display: inline-block;

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

463}

464

465.legal .ls-alpha {

466 counter-reset: item;

467}

468

469.legal .ls-alpha li:before {

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

471 counter-increment: item;

472 display: inline-block;

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

474}