gtsocial-umbx

base.css (8549B)

---

 /*
 	GoToSocial
 	Copyright (C) 2021-2023 GoToSocial Authors admin@gotosocial.org
 
 	This program is free software: you can redistribute it and/or modify
 	it under the terms of the GNU Affero General Public License as published by
 	the Free Software Foundation, either version 3 of the License, or
 	(at your option) any later version.
 
 	This program is distributed in the hope that it will be useful,
 	but WITHOUT ANY WARRANTY; without even the implied warranty of
 	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 	GNU Affero General Public License for more details.
 
 	You should have received a copy of the GNU Affero General Public License
 	along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 @import "modern-normalize/modern-normalize.css";
 
 /* noto-sans-regular - latin */
 @font-face {
   font-family: "Noto Sans";
   font-weight: 400;
   font-display: swap;
   font-style: normal;
   src: url('../fonts/noto-sans-v27-latin-regular.woff2') format('woff2'),
        url('../fonts/noto-sans-v27-latin-regular.woff') format('woff');
 }
 
 /* noto-sans-700 - latin */
 @font-face {
   font-family: "Noto Sans";
   font-weight: 700;
   font-display: swap;
   font-style: normal;
   src: url('../fonts/noto-sans-v27-latin-700.woff2') format('woff2'),
        url('../fonts/noto-sans-v27-latin-700.woff') format('woff');
 }
 
 /* standard border radius for nice squircles */
 $br: 0.4rem;
 /* border radius for items that are framed/bordered
    inside something with $br, eg avatar, header img */
 $br-inner: 0.2rem; 
 
 /* Fork-Awesome 'fa-fw' fixed icon width 
    keep in sync with https://github.com/ForkAwesome/Fork-Awesome/blob/a99579ae3e735ee70e51ed62dfcee3172b5b2db7/css/fork-awesome.css#L50
 */
 $fa-fw: 1.28571429em;
 
 html, body {
 	padding: 0;
 	margin: 0;
 	background: $bg;
 	color: $fg;
 	font-family: "Noto Sans", sans-serif;
 	scrollbar-color: $orange1 $gray3;
 }
 
 body {
 	line-height: 1.5em;
 	position: relative;
 }
 
 .hidden {
 	display: none;
 }
 
 .page {
 	display: grid;
 	min-height: 100vh;
 
 	grid-template-columns: 1fr minmax(auto, 50rem) 1fr;
 	grid-template-columns: 1fr min(92%, 50rem) 1fr;
 	grid-template-rows: auto 1fr auto;
 }
 
 h1 {
 	margin: 0;
 	line-height: 2.4rem;
 }
 
 a {
 	color: $link-fg;
 }
 
 header, footer {
 	grid-column: 1 / span 3;
 }
 
 .content {
 	grid-column: 2;
 	align-self: start;
 }
 
 header {
 	display: flex;
 	justify-content: center;
 }
 
 header a {
 	display: flex;
 	flex-wrap: wrap;
 	margin: 1.5rem;
 	gap: 1rem;
 	justify-content: center;
 
 	img {
 		align-self: center;
 		height: 3rem;
 	}
 
 	h1 {
 		flex-grow: 1;
 		align-self: center;
 		text-align: center;
 
 		font-size: 1.5rem;
 		word-wrap: anywhere;
 		color: $fg;
 	}
 }
 
 .excerpt-top {
 	margin-bottom: 2rem;
 	font-style: italic;
 	font-weight: normal;
 	text-align: center;
 	font-size: 1.2rem;
 
 	.count {
 		font-weight: bold;
 		color: $fg-accent;
 	}
 }
 
 main {
 	p:first-child {
 		margin-top: 0;
 	}
 
 	p:last-child {
 		margin-bottom: 0;
 	}
 }
 
 .button, button {
 	border-radius: 0.2rem;
 	color: $button-fg;
 	background: $button-bg;
 	box-shadow: $boxshadow;
 	border: $button-border;
 	text-decoration: none;
 	font-size: 1.2rem;
 	font-weight: bold;
 	padding: 0.5rem;
 	border: none;
 	cursor: pointer;
 	text-align: center;
 	font-family: 'Noto Sans', sans-serif;
 
 	&.danger {
 		color: $button-danger-fg;
 		background: $button-danger-bg;
 
 		&:hover {
 			background: $button-danger-hover-bg;
 		}
 	}
 
 	&:disabled {
 		color: $white2;
 		background: $gray2;
 		cursor: auto;
 
 		&:hover {
 			background: $gray3;
 		}
 	}
 
 	&:hover {
 		background: $button-hover-bg;
 	}
 }
 
 .nounderline {
 	text-decoration: none;
 }
 
 .accent {
 	color: $acc1;
 }
 
 .logo {
 	justify-self: center;
 	img {
 		height: 30vh;
 	}
 }
 
 section.apps {
 	align-self: start;
 
 	.applist {
 		display: grid;
 		grid-template-columns: 1fr 1fr;
 		grid-gap: 0.5rem;
 		align-content: start;
 
 		.entry {
 			display: grid;
 			grid-template-columns: 25% 1fr;
 			gap: 1.5rem;
 			padding: 0.5rem;
 			background: $bg-accent;
 			border-radius: 0.5rem;
 
 			.logo {
 				align-self: center;
 				width: 100%;
 				object-fit: contain;
 				flex: 1 1 auto;
 			}
 
 			.logo.redraw {
 				fill: $fg;
 				stroke: $fg;
 			}
 
 			a {
 				font-weight: bold;
 			}
 
 			div {
 				padding: 0;
 				h3 {
 					margin-top: 0;
 				}
 			}
 		}
 	}
 }
 
 section.login {
 	form {
 		display: flex;
 		flex-direction: column;
 		gap: 1rem;
 
 
 		padding-bottom: 1rem;
 		padding-top: 1rem;
 
 		label, input {
 			padding-left: 0.2rem;
 		}
 
 		.labelinput {
 			display: flex;
 			flex-direction: column;
 			gap: 0.4rem;
 		}
 
 		.btn {
 			margin-top: 1rem;
 		}
 	}
 }
 
 section.error {
 	word-break: break-word;
 	margin-bottom: 0.5rem;
 
 	pre {
 		border: 1px solid #ff000080;
 		padding: 0.5rem;
 		border-radius: 0.5em;
 		background-color: #ff000010;
 		font-size: 1.3em;
 		white-space: pre-wrap;
 	}
 }
 
 section.oob-token {
 	code {
 		background: $gray1;
 		padding: 0.5rem;
 		margin: 0;
 		border-radius: 0.3rem;
 	}
 }
 
 .error-text {
 	color: $error1;
 	background: $error2;
 	border-radius: 0.1rem;
 	font-weight: bold;
 }
 
 input, select, textarea, .input {
 	box-sizing: border-box;
 	border: 0.15rem solid $input-border;
 	border-radius: 0.1rem;
 	color: $fg;
 	background: $input-bg;
 	width: 100%;
 	font-family: 'Noto Sans', sans-serif;
 	font-size: 1rem;
 	padding: 0.3rem;
 
 	&:focus, &:active {
 		border-color: $input-focus-border;
 	}
 
 	&:invalid, .invalid & {
 		border-color: $input-error-border;
 	}
 
 	&:disabled {
 		background: transparent;
 	}
 }
 
 ::placeholder {
 	opacity: 1;
 	color: $fg-reduced
 }
 
 hr {
 	color: transparent;
 	width: 100%;
 	border-bottom: 0.02rem solid $border-accent;
 }
 
 footer {
 	align-self: end;
 	padding: 2rem 0 1rem 0;
 
 	display: flex;
 	flex-wrap: wrap;
 	justify-content: center;
 
 	div {
 		text-align: center;
 		padding: 1rem;
 		flex-grow: 1;
 	}
 
 	a {
 		font-weight: bold;
 	}
 }
 
 @media screen and (max-width: 600px) {
 	header {
 		text-align: center;
 	}
 
 	footer {
 		grid-template-columns: 1fr;
 
 		div {
 			text-align: initial;
 			width: 100%;
 		}
 	}
 
 	section.apps .applist {
 		grid-template-columns: 1fr;
 	}
 }
 
 .emoji {
 	width: 1.45em;
 	height: 1.45em;
 	margin: -0.2em 0.02em 0;
 	object-fit: contain;
 	vertical-align: middle;
 }
 
 .monospace {
 	font-family: monospace;
 }
 
 .callout {
 	margin: 1.5rem 0;
 	border: .05rem solid $border-accent;
 	border-radius: .2rem;
 	padding: 0 .6rem .6rem;
 	.callout-title {
 		margin: 0 -.6rem;
 		padding: .6rem;
 		font-weight: bold;
 		background-color: $border-accent;
 		color: $gray1;
 	}
 }
 
 label {
 	cursor: pointer;
 }
 
 @media (prefers-reduced-motion) {
 	.fa-spin {
 		animation: none;
 	}
 }
 
 .text-cutoff {
 	text-overflow: ellipsis;
 	overflow: hidden;
 	white-space: nowrap;
 }
 
 .list {
 	display: flex;
 	flex-direction: column;
 
 	.header, .entry {
 		padding: 0.5rem;
 	}
 
 	.header {
 		border: 0.1rem solid transparent !important; /* for alignment with .entry border padding */
 		background: $gray1 !important;
 		display: flex;
 		font-weight: bold;
 	}
 
 	.entries {
 		display: flex;
 		flex-direction: column;
 
 		&.scrolling {
 			height: 20rem;
 			max-height: 20rem;
 			overflow: auto;
 		}
 	}
 
 	input[type=checkbox] {
 		margin-left: 0.5rem;
 	}
 
 	.entry {
 		display: flex;
 		flex-wrap: wrap;
 		background: $list-entry-bg;
 		border: 0.1rem solid transparent;
 
 		&:nth-child(even) {
 			background: $list-entry-alternate-bg;
 		}
 	
 		&:hover {
 			background: $list-entry-hover-bg;
 		}
 	
 		&:active, &:focus, &:hover, &:target {
 			border-color: $fg-accent;
 		}
 	}
 }
 
 .domain-blocklist {
 	box-shadow: $boxshadow;
 
 	.entry {
 		display: grid;
 		grid-template-columns: max(30%, 10rem) 1fr;
 		gap: 0.5rem;
 		align-items: start;
 		border: $boxshadow-border;
 		border-top-color: transparent;
 
 		& > div {
 			display: flex;
 			align-items: center
 		}
 
 		.domain a {
 			font-weight: bold;
 			text-decoration: none;
 			display: inline-block; /* so it wraps properly */
 		}
 
 		.public_comment p {
 			margin: 0;
 		}
 	}
 
 	.header .domain {
 		color: $fg;
 	}
 }
 
 .about {
 	display: flex;
 	flex-direction: column;
 	gap: 1rem;
 
 	h2 {
 		margin: 0.5rem 0;
 	}
 
 	ul {
 		margin-bottom: 0;
 	}
 
 }
 
 .account-card {
 	display: inline-grid;
 	grid-template-columns: auto 1fr;
 	grid-template-rows: auto auto;
 	text-decoration: none;
 	gap: 0.5rem 1rem;
 	border-radius: $br;
 	padding: 0.5rem;
 	min-width: 40%;
 	margin-bottom: 0.3rem;
 
 	background: $list-entry-bg;
 
 	&:hover {
 		background: $list-entry-alternate-bg;
 	}
 
 	h3 {
 		align-self: end;
 		margin: 0;
 		color: $fg;
 	}
 
 	img.avatar {
 		border-radius: 0.5rem;
 		width: 5rem;
 		height: 5rem;
 		object-fit: cover;
 		grid-row: 1 / span 2;
 	}
 }
 
 @media screen and (max-width: 30rem) {
 	.domain-blocklist .entry {
 		grid-template-columns: 1fr;
 		gap: 0;
 	}
 }