uncia/uncia/frontend/layout.css

/* general */
body {
	font-family: "Noto Sans", Sans-Serif;
	font-size: 12pt;
	margin: 0px;
}

input, textarea, select, div.placeholder {
	height: 22px;
	padding: 2px 7px;
	-moz-border-radius: var(--border-radius);
	border-radius: var(--border-radius);
	margin: 5px;
}

select {
	height: 28px !important;
}

summary:hover {
	cursor: pointer;
}

#content {
	width: 1000px;
	margin: 0 auto;
	padding-bottom: 1px;
	border-radius: var(--border-radius);
}

#header h1 {
	margin: 0px;
	padding-top: 20px;
	padding-bottom: 15px;
	text-align: center;
}

#footer {
	grid-template-columns: auto auto auto;
	font-size: 10px;
}

#footer .col2 {
	text-align: right;
}

#footer p {
	margin: 0;
}

.section {
	margin: 15px auto;
	padding: 10px;
	width: calc(100% - 45px);
	border-radius: var(--border-radius);
}

.section .title {
	margin-top: 0;
	margin-bottom: 10px;
	text-align: center;
}

input.placeholder {
	height: 21px;
}

label.placeholder {
	height: 19px;
}

table {
	width: 100%;
	border-spacing: 0;
}

td {
	padding: 5px;
}

.instance {
	text-align: left;
}

.timestamp {
	text-align: right;
	width: 135px;
}

tr:nth-child(2) .col1 {
	border-top-left-radius: var(--border-radius);
}

tr:nth-child(2) .col2 {
	border-top-right-radius: var(--border-radius);
}

tr:last-child .col1 {
	border-bottom-left-radius: var(--border-radius);
}

tr:last-child .col2 {
	border-bottom-right-radius: var(--border-radius);
}

.indent1 {
	padding-left: 20px;
}

.indent2 {
	padding-left: 40px;
}

.indent3 {
	padding-left: 60px;
}


/* Grids */
.grid-container {
	display: grid;
	grid-gap: 0;
	grid-template-columns: 50% auto;
}

.grid-item {
	display: inline-grid;
}

/* Dropdown menu */
.menu {
	position: fixed;
	display: block;
	right: 0;
	padding: 5px;
	text-align: center;
	z-index: 10;
	top: 0;
	border-radius: 0 0 0 5px;
	}

.menu a {
	padding: 5px;
}

.menu .title {
	font-weight: bold;
	font-size: 14pt;
	text-transform: uppercase;
}

.menu .item {
	padding: 5px 0;
	text-transform: uppercase;
	font-size: 14pt;
}

.menu-right details[open] summary ~ * {
	animation: sweep-left .5s ease-in-out;
}


/* home */
#home_instances table .header {
	font-size: 18pt;
	font-weight: bold;
}


/* auth stuff */
#auth {
	text-align: center;
}


/* admin */
.sec-header {
	font-size: 36px;
	margin: 0px;
	font-weight: bold;
	text-align: center;
	width: 100%;
}

.admin summary {
	font-size: 18pt;
	text-align: center;
}

.admin td:not(.header) {
	padding: 0 5px;
}

.admin table .header td {
	padding: 5px;
}

.admin table .header {
	font-size: 16pt;
	font-weight: bold;
}

.admin table .col1 a {
	line-height: 100%;
}

.admin table .col2, .admin table .action {
	width: 75px;
	text-align: center;
}

.admin table .col2 input {
	width: 90%;
}

.admin .domain {
	width: 35%;
}

.admin .domain:hover {
	width: 45%;
}

.admin .domain:focus {
	width: calc(100% - 30px);
}

.admin .mainban input {
	height: calc(100px - 30px);
}

.settings textarea {
	width: calc(100% - 20px);
	height: 4em;
	resize: none;
}

.settings textarea:focus {
	height: 16em;
}

#network input {
	width: calc(100% - 20px);
}

#submit {
	text-align: center;
}

.settings .submit {
	width: 50%;
}

#code .col2 {
	text-align: right;
}


/* Admin menu */
#setmenu {
	padding: 0px;
	text-align: center;
	display: block;
}

.setmenu-item {
	padding: 10px;
	font-weight: bold;
	display: inline-block;
}

.retries textarea {
	min-width: 200px;
}

.retries textarea:focus {
	height: 200px;
}

#code input[type="submit"] {
	display: inline-block;
	width: 100px;
}


/* info page */
.stats .title, .info .title {
	font-size: 16pt;
	font-weight: bold;
	text-align: center;
}

.stats .sub-title, .info .sub-title {
	font-weight: bold;
	text-align: center;
}

.info .grid-container {
	grid-template-columns: 50% auto;
}

.stats .grid-container {
	grid-template-columns: 25% 25% 25% auto;
}

.stats .grid-item, .info .grid-item {
	min-height: 150px;
	margin: 10px;
	border-radius: var(--border-radius);
	padding: 10px;
}

.relay-info .indent {
	display: inline;
}

.relay-info .whitelist {
	text-align: center;
}

#footer .acct {
	text-align: center;
}

#footer .col1, #footer .col2 {
	min-width: 200px;
}


/* cache page */
.cache .cache-item textarea {
	width: calc(100% - 20px);
	height: 200px;
	resize: vertical;
}


/* setup page */
.error {
	text-align: center;
	font-weight: bold;
}


/* account page */
.account {
	text-align: center;
}

.account input:not([type="submit"]) {
	width: calc(50% - 20px);
}

.account input[type="submit"] {
	min-width: 200px;
}

.account .tokens .col1 {
	text-align: left;
	min-width: 100px;
}

.account .tokens .col2 {
	width: 50px;
}

.account .tokens .col2 input[type="submit"] {
	min-width: 50px;
}


/* mobile/small screen */
@media (max-width : 1000px) {
	#content {
		width: 100%;
		border-radius: 0;
	}

	.grid-container:not(#footer) {
		grid-template-columns: auto;
	}
}

@media (max-width : 1000px) {
	.stats .grid-container {
		grid-template-columns: 33% 33% auto;
	}

	.account input[type="submit"] {
		min-width: auto;
	}
}

@media (max-width : 800px) {
	.stats .grid-container {
		grid-template-columns: 50% auto;
	}

	.relay-info .indent {
		padding-left: 20px;
		display: block;
	}
}

@media (max-width : 600px) {
	.stats .grid-container {
		grid-template-columns: auto;
	}
}

@media (max-width : 600px) {
	.info .grid-container {
		grid-template-columns: auto;
	}
}

/* Horizontal swipe animations */
@keyframes sweep-right {
	0%    {opacity: 0; margin-left: -10px}
	100%  {opacity: 1; margin-left: 0px}
}

@keyframes sweep-left {
	0%    {opacity: 0; margin-right: -10px}
	100%  {opacity: 1; margin-right: 0px}
}