MediaWiki:Gadget-CurrencyConverter.css: различия между версиями

Текущая версия от 08:20, 6 декабря 2025

/* JavaScript: https://wiki.demovio.love/MediaWiki:Gadget-CurrencyConverter.js */

#currency-converter-root {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}.convert.svelte-1rrj40a {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  background-color: #eee;
  padding: 16px;
  border-radius: 8px;
  width: fit-content;
}
html[class*=skin-theme-clientpref-night] .convert[class*=svelte] {
	background-color: #202029;
}
@media (prefers-color-scheme: dark) {
	html[class*=skin-theme-clientpref-os] .convert[class*=svelte] {
		background-color: #202029;
	}
}

.convert.svelte-1rrj40a .coins:where(.svelte-1rrj40a) {
  display: flex;
}
.convert.svelte-1rrj40a .coins:where(.svelte-1rrj40a) .coin:where(.svelte-1rrj40a) {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 10px;
  gap: 4px;
}
.convert.svelte-1rrj40a .coins:where(.svelte-1rrj40a) .coin:where(.svelte-1rrj40a) input:where(.svelte-1rrj40a) {
  width: 24px;
  padding: 2px 0px;
  text-align: center;
  border: 1px solid black;
}
.convert.svelte-1rrj40a .coins:where(.svelte-1rrj40a) .coin:where(.svelte-1rrj40a) input.invalid:where(.svelte-1rrj40a) {
  border: 1px solid red;
}
.convert.svelte-1rrj40a .result:where(.svelte-1rrj40a) {
  font-size: 24px;
  font-variant-numeric: tabular-nums;
  display: flex;
  gap: 6px;
}
.convert.svelte-1rrj40a .result:where(.svelte-1rrj40a) .diamonds:where(.svelte-1rrj40a) {
  display: flex;
  align-items: center;
  gap: 4px;
}

.icon.svelte-1rrj40a {
  image-rendering: pixelated;
}

.icon32px.svelte-1rrj40a {
  width: 32px;
  height: 32px;
}

.icon24px.svelte-1rrj40a {
  width: 24px;
  height: 24px;
  margin-bottom: 4px;
}.convert.svelte-1u7m319 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  background-color: #eee;
  padding: 16px;
  border-radius: 8px;
  width: fit-content;
}
.convert.svelte-1u7m319 .coins:where(.svelte-1u7m319) {
  display: flex;
}
.convert.svelte-1u7m319 .coins:where(.svelte-1u7m319) .coin:where(.svelte-1u7m319) {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 10px;
  gap: 4px;
}
.convert.svelte-1u7m319 .coins:where(.svelte-1u7m319) .coin:where(.svelte-1u7m319) .result:where(.svelte-1u7m319) {
  font-size: 24px;
  font-variant-numeric: tabular-nums;
}
.convert.svelte-1u7m319 .coins:where(.svelte-1u7m319) .coin:where(.svelte-1u7m319) .result.bold:where(.svelte-1u7m319) {
  font-weight: 600;
}
.convert.svelte-1u7m319 .input:where(.svelte-1u7m319) {
  font-size: 24px;
  font-variant-numeric: tabular-nums;
  display: flex;
  gap: 6px;
}
.convert.svelte-1u7m319 .input:where(.svelte-1u7m319) .diamonds:where(.svelte-1u7m319) {
  display: flex;
  align-items: center;
  gap: 4px;
}
.convert.svelte-1u7m319 .input:where(.svelte-1u7m319) .diamonds:where(.svelte-1u7m319) input:where(.svelte-1u7m319) {
  width: 48px;
  padding: 2px 0px;
  text-align: center;
  border: 1px solid black;
}
.convert.svelte-1u7m319 .input:where(.svelte-1u7m319) .diamonds:where(.svelte-1u7m319) input.invalid:where(.svelte-1u7m319) {
  border: 1px solid red;
}

.icon.svelte-1u7m319 {
  image-rendering: pixelated;
}

.icon32px.svelte-1u7m319 {
  width: 32px;
  height: 32px;
}

.icon24px.svelte-1u7m319 {
  width: 24px;
  height: 24px;
  margin-bottom: 4px;
}