MediaWiki:Gadget-calc-cooking.css

From Idle Clans wiki
Revision as of 19:45, 10 June 2024 by Uraxys (talk | contribs) (Created page with "→‎* Calculators: .idle-calculator { display: flex; flex-direction: column; align-items: center; width: 25%; padding: 0.7rem; color: #505050; background-color: #0000000F; border: 1px solid #00000038; } @media (max-width: 850px) { .idle-calculator { width: 90%; float: none !important; margin-left: auto !important; margin-right: auto !important; } } @media (min-width: 851px) and (max-width: 1099px) { .idle-calculator { width: 50%; } } @media...")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Press Ctrl-F5.
/*
 * Calculators
 */

.idle-calculator {
	display: flex;
	flex-direction: column;
	align-items: center;

	width: 25%;
	padding: 0.7rem;

	color: #505050;
	background-color: #0000000F;
	border: 1px solid #00000038;
}

@media (max-width: 850px) {
	.idle-calculator {
		width: 90%;
		float: none !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
}

@media (min-width: 851px) and (max-width: 1099px) {
	.idle-calculator {
		width: 50%;
	}
}

@media (min-width: 1100px) and (max-width: 1650px) {
	.idle-calculator {
		width: 35%;
	}
}

.idle-calculator .calc-title {
	width: 100%;
	margin-top: -0.5rem;
	margin-bottom: 0.5rem;
	text-align: center;
	font-size: x-large;
	color: black;
}

.calc-label-left {
	font-style: italic;
	text-align: left;
	padding-left: 0.5rem;
}

.calc-label-right {
	font-style: italic;
	text-align: right;
	padding-right: 0.5rem;
}

.calc-label-center {
	font-style: italic;
	text-align: center;
}

.idle-calculator .calc-category {
	width: 100%;
	padding: 0.25rem;
	background-color: #0000000d;
}

.calc-category.calc-plain-category {
	background-color: unset;
	border: unset;
}

.idle-calculator .calc-header {
	width: 100%;

	line-height: 1rem;
	margin-top: 1rem;

	text-align: center;
	font-size: large;
	color: #303030;
}

.idle-calculator .calc-header:first-child {
	margin-top: 0;
	line-height: unset;
}

.idle-calculator .oo-ui-dropdownWidget,
.idle-calculator .oo-ui-dropdownWidget:last-child {
	margin-right: unset;
}

.idle-calculator .calc-enchantments {
	display: flex;
	justify-content: space-around;
	width: 100%;
}

.idle-calculator .calc-enchantments-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: calc(50% - 0.2rem);
}

.idle-calculator .calc-enchantments-container:first-child {
	margin-right: 0.1rem;
}

.idle-calculator .calc-enchantments-container:last-child {
	margin-left: 0.1rem;
}

.idle-calculator .calc-button {
	display: flex;
	justify-content: center;
	margin-top: 0.5em;
}

.idle-calculator .calc-result {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

.calc-result .calc-result-spacer {
	width: 50%;
	border-bottom: 1px dashed #0000004d;
}

.calc-result .calc-result-entry {
	display: flex;
	width: 100%;
}

.calc-result .calc-result-entry .label {
	width: 50%;
	text-align: right;
	border-right: 1px dashed #0000004d;
}

.calc-result .calc-result-entry .value {
	width: 50%;
	text-align: left;
}

.calc-result-entry .label > span {
	padding-right: 0.5rem;
	font-style: italic;
}

.calc-result-entry .value > span {
	padding-left: 0.5rem;
}

.calc-result .calc-result-footer {

}