MediaWiki:Gadget-CurrencyConverter.css: различия между версиями
Hloth (обсуждение | вклад) Новая страница: «#currency-converter-root{display:flex;gap:8px}.convert.svelte-pswajn{display:flex;align-items:center;gap:16px;background-color:#eee;padding:16px;border-radius:8px;width:fit-content}.convert.svelte-pswajn .coins:where(.svelte-pswajn){display:flex}.convert.svelte-pswajn .coins:where(.svelte-pswajn) .coin:where(.svelte-pswajn){display:flex;flex-direction:column;align-items:center;margin-bottom:10px;gap:4px}.convert.svelte-pswajn .coins:where(.svelte-pswajn) .co...» |
Hloth (обсуждение | вклад) Нет описания правки |
||
| Строка 1: | Строка 1: | ||
#currency-converter-root{display:flex;gap:8px}.convert.svelte-pswajn{display:flex;align-items:center;gap:16px;background-color:#eee;padding:16px;border-radius:8px;width:fit-content}.convert.svelte-pswajn .coins:where(.svelte-pswajn){display:flex}.convert.svelte-pswajn .coins:where(.svelte-pswajn) .coin:where(.svelte-pswajn){display:flex;flex-direction:column;align-items:center;margin-bottom:10px;gap:4px}.convert.svelte-pswajn .coins:where(.svelte-pswajn) .coin:where(.svelte-pswajn) input:where(.svelte-pswajn){width:24px;padding:2px | #currency-converter-root { | ||
display: flex; | |||
gap: 8px; | |||
}.convert.svelte-pswajn { | |||
display: flex; | |||
align-items: center; | |||
gap: 16px; | |||
background-color: #eee; | |||
padding: 16px; | |||
border-radius: 8px; | |||
width: fit-content; | |||
} | |||
.convert.svelte-pswajn .coins:where(.svelte-pswajn) { | |||
display: flex; | |||
} | |||
.convert.svelte-pswajn .coins:where(.svelte-pswajn) .coin:where(.svelte-pswajn) { | |||
display: flex; | |||
flex-direction: column; | |||
align-items: center; | |||
margin-bottom: 10px; | |||
gap: 4px; | |||
} | |||
.convert.svelte-pswajn .coins:where(.svelte-pswajn) .coin:where(.svelte-pswajn) input:where(.svelte-pswajn) { | |||
width: 24px; | |||
padding: 2px 0px; | |||
text-align: center; | |||
border: 1px solid black; | |||
} | |||
.convert.svelte-pswajn .coins:where(.svelte-pswajn) .coin:where(.svelte-pswajn) input.invalid:where(.svelte-pswajn) { | |||
border: 1px solid red; | |||
} | |||
.convert.svelte-pswajn .result:where(.svelte-pswajn) { | |||
font-size: 24px; | |||
font-variant-numeric: tabular-nums; | |||
display: flex; | |||
gap: 6px; | |||
} | |||
.convert.svelte-pswajn .result:where(.svelte-pswajn) .diamonds:where(.svelte-pswajn) { | |||
display: flex; | |||
align-items: center; | |||
gap: 4px; | |||
} | |||
.icon.svelte-pswajn { | |||
image-rendering: pixelated; | |||
} | |||
.icon32px.svelte-pswajn { | |||
width: 32px; | |||
height: 32px; | |||
} | |||
.icon24px.svelte-pswajn { | |||
width: 24px; | |||
height: 24px; | |||
margin-bottom: 4px; | |||
}.convert.svelte-mzgtwq { | |||
display: flex; | |||
align-items: center; | |||
gap: 16px; | |||
background-color: #eee; | |||
padding: 16px; | |||
border-radius: 8px; | |||
width: fit-content; | |||
} | |||
.convert.svelte-mzgtwq .coins:where(.svelte-mzgtwq) { | |||
display: flex; | |||
} | |||
.convert.svelte-mzgtwq .coins:where(.svelte-mzgtwq) .coin:where(.svelte-mzgtwq) { | |||
display: flex; | |||
flex-direction: column; | |||
align-items: center; | |||
margin-bottom: 10px; | |||
gap: 4px; | |||
} | |||
.convert.svelte-mzgtwq .coins:where(.svelte-mzgtwq) .coin:where(.svelte-mzgtwq) .result:where(.svelte-mzgtwq) { | |||
font-size: 24px; | |||
font-variant-numeric: tabular-nums; | |||
} | |||
.convert.svelte-mzgtwq .coins:where(.svelte-mzgtwq) .coin:where(.svelte-mzgtwq) .result.bold:where(.svelte-mzgtwq) { | |||
font-weight: 600; | |||
} | |||
.convert.svelte-mzgtwq .input:where(.svelte-mzgtwq) { | |||
font-size: 24px; | |||
font-variant-numeric: tabular-nums; | |||
display: flex; | |||
gap: 6px; | |||
} | |||
.convert.svelte-mzgtwq .input:where(.svelte-mzgtwq) .diamonds:where(.svelte-mzgtwq) { | |||
display: flex; | |||
align-items: center; | |||
gap: 4px; | |||
} | |||
.convert.svelte-mzgtwq .input:where(.svelte-mzgtwq) .diamonds:where(.svelte-mzgtwq) input:where(.svelte-mzgtwq) { | |||
width: 48px; | |||
padding: 2px 0px; | |||
text-align: center; | |||
border: 1px solid black; | |||
} | |||
.convert.svelte-mzgtwq .input:where(.svelte-mzgtwq) .diamonds:where(.svelte-mzgtwq) input.invalid:where(.svelte-mzgtwq) { | |||
border: 1px solid red; | |||
} | |||
.icon.svelte-mzgtwq { | |||
image-rendering: pixelated; | |||
} | |||
.icon32px.svelte-mzgtwq { | |||
width: 32px; | |||
height: 32px; | |||
} | |||
.icon24px.svelte-mzgtwq { | |||
width: 24px; | |||
height: 24px; | |||
margin-bottom: 4px; | |||
} | |||