gotosocial/web/source/css/base.css

/*
	GoToSocial
	Copyright (C) GoToSocial Authors admin@gotosocial.org
	SPDX-License-Identifier: AGPL-3.0-or-later

	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/>.
*/

/***************************************
***** SECTION 0: IMPORTS AND FONTS *****
****************************************/

@import "modern-normalize/modern-normalize.css";
@import "./_prism.css";
@import "./_fonts.css";

/*************************************
***** SECTION 1: HANDY VARIABLES *****
**************************************/

/*
	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, etc.
*/
$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;

/*
	Outline to give links when they're
	focused (ie., by clicking or tabbing to them).
*/
$link-focus-outline: 0.25rem dotted $link-fg;

/*
	Outline to give buttons when they're
	focused (ie., by clicking or tabbing to them).
*/
$button-focus-outline: 0.25rem dashed $button-focus-border;

/*
	Outline to give input elements like radio buttons
	and checkboxes when they're focused (ie., by clicking
	or tabbing to them).
*/
$input-clickable-focus-outline: 0.25rem dashed $input-focus-border;

/*
	Outline to give summary elements when they're
	focused (ie., by clicking or tabbing to them).
*/
$summary-focus-outline: 0.25rem dotted $link-fg;

/*
	Outline to give <pre> elements when they're
	focused (ie., by clicking or tabbing to them).

	This is used when we've got a preformatted
	code block with a scroll bar inside of it.
*/
$pre-focus-outline: 0.25rem dashed $link-fg;

/******************************************
***** SECTION 2: BASIC GLOBAL STYLING *****
*******************************************/

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;
}

a {
	color: $link-fg;
	&:focus-visible {
		outline: $link-focus-outline;
	}
}

/*
	Normalize margins of first and last children.
	We generally don't want to open a paragraph or
	paragraph-like element with a top margin or
	close it with a bottom margin.
*/
main {
	p:first-child, ol:first-child, ul:first-child {
		margin-top: 0;
	}

	p:last-child, ol:last-child, ul:last-child {
		margin-bottom: 0;
	}
}

.button, button {
	border-radius: $br-inner;
	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,
	&.disabled {
		color: $white2;
		background: $gray2;
		cursor: not-allowed;

		&:hover {
			background: $gray3;
		}
	}

	&:hover {
		background: $button-hover-bg;
	}

	&:focus-visible {
		outline: $button-focus-outline;
	}
}

summary:focus-visible {
	outline: $summary-focus-outline;
}

/*
	Form styling - used in settings frontend as well.
*/
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;
	}

	&[type=checkbox]:focus-visible,
	&[type=radio]:focus-visible {
		outline: $input-clickable-focus-outline;
	}

	&:invalid, .invalid & {
		border-color: $input-error-border;
	}

	&:disabled {
		background: transparent;
	}

	&::placeholder {
		opacity: 1;
		color: $fg-reduced
	}
}

select {
	/*
		By default this looks awful on Gnome
		Web so restyle a bit to try to make
		it consistent with firefox + chrome.
	*/
	appearance: none;
	line-height: 1.5rem;
}

/*
	Squeeze emojis so they fit inline in text.
*/
.emoji {
	width: 1.45em;
	height: 1.45em;
	margin: -0.2em 0.02em 0;
	object-fit: contain;
	vertical-align: middle;
	
	@media (prefers-reduced-motion: no-preference) {
		/*
			Enlarge emojis on hover to give
			viewer a good look at them.
		*/
		transition: 0.1s;
		&:hover, &:active {
			transform: scale(2);
			background-color: $bg;
			box-shadow: $boxshadow;
			border: $boxshadow-border;
			border-radius: $br-inner;
		}
	}
}

/*
	Restyle unordered lists; outdent
	and replace dot with orange dot.
*/
ul {
	padding-left: 2.5rem;
	list-style: none;

	li::before {
		content: "\2022";
		color: $border-accent;
		font-weight: bold;
		display: inline-block;
		width: 1.5rem;
		margin-left: -1.5rem;
	}
}

/*
	Mirror the same styling a little bit
	for ordered lists by making marker bold.
*/ 
ol {
	padding-left: 2.5rem;

	li::marker {
		font-weight: bold;
	}
}

/*
	Outdent block quotes a bit; use
	orange strip for left border.
*/
blockquote {
	padding: 0.5rem;
	border-left: 0.2rem solid $border-accent;
	margin: 0;
	font-style: normal;

	/*
		Same background color we
		use for code blocks
	*/
	background-color: $gray2;
	border-radius: 0;
}

/*
	Nice dashed orange line
	for horizontal rules.
*/
hr {
	border: 0;
	border-top: 1px dashed $border-accent;
}

/*
	Don't indent definition
	lists and definitions.
*/
dl {
	margin: 0;

	dd {
		margin-left: 0;
	}
}

label {
	cursor: pointer;
}

/*
	Set our own nice background and
	font for monospace code and pre blocks.
*/
pre, pre[class*="language-"],
code, code[class*="language-"] {
	font-family: "Noto Sans Mono", monospace;
	background-color: $gray2;
}

/*
	Just code on its own inside status
	content, ie, `here is some code`.
*/
code {
	padding: 0.25rem;
	border-radius: $br-inner;
	white-space: pre-wrap;
}

/*
	Restyle Prism code highlighting toolbar
	plugin buttons to our own button style.
	
	We have to use really specific selectors
	because of how specific prism.css is.
*/
div.code-toolbar > div.toolbar {
	margin-right: 0.5rem;
	display: flex;
	gap: 0.25rem;

	> div.toolbar-item {
		> span, > button {
			color: $button-fg;
			background: $button-bg;
			font-weight: bold;
			box-shadow: $boxshadow;

			&:hover, &:focus {
				color: $button-fg;
			}
		}

		.copy-to-clipboard-button:hover {
			background: $button-hover-bg;
		}
	}
}

pre, pre[class*="language-"] {
	border-radius: $br;
	padding: 0.5rem;
	white-space: pre;
	overflow-x: auto;

	&:focus {
		outline: $pre-focus-outline;
	}

	/* 
		Code inside a pre block, ie.,
		
		```
		here is some code
		```
	*/
	code {
		width: 100%;
		padding: 0;
		white-space: pre;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

/*************************************
***** SECTION 3: UTILITY CLASSES *****
**************************************/

/*
	Column header that appears at the top
	of threads, at the top of sections of
	profiles (About, Pinned Posts, etc).
*/
.col-header {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1rem;

	justify-content: start;
	align-items: center; 

	margin: 0;
	background: $profile-bg;
	border-top-left-radius: $br;
	border-top-right-radius: $br;
	padding: 0.75rem;

	a {
		justify-self: end;
	}

	h1, h2, h3, h4 {
		font-size: 1.2rem;
		line-height: 1.3rem;
		margin: 0;
	}
}

.hidden {
	display: none;
}

.nounderline {
	text-decoration: none;
}

.accent {
	color: $acc1;
}

.text-cutoff {
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

/* 
	Class for lists that don't
	want the orange dot.
*/
.nodot {
	li::before {
		content: initial;
	}
}

/*
	Forms and sign-in / sign-up / confirm pages.
*/
section.with-form {
	form {
		display: flex;
		flex-direction: column;
		gap: 1rem;

		padding-bottom: 1rem;
		padding-top: 1rem;

		p {
			/*
				We use gap so we don't
				need top + bottom margins.
			*/
			margin-top: 0;
			margin-bottom: 0;
		}

		label, input {
			padding-left: 0.2rem;
		}

		.labelinput {
			display: flex;
			flex-direction: column;
			gap: 0.4rem;
		}

		.checkbox {
			display: flex;
			flex-direction: row-reverse;
			gap: 0.4rem;

			& > input {
				height: 1rem;
				width: 1rem;
				align-self: center;
			}
		}

		.btn {
			/* Visually separate buttons a bit */
			margin-top: 1rem;
		}
	}
}

/***********************************
***** SECTION 4: SHAMEFUL MESS *****
************************************/

/*
	EVERYTHING BELOW THIS POINT:
	Should be moved somewhere else
	to avoid cluttering up this file.
*/

/*
	Below section stylings are used
	in transient pages + error templates.
*/

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;
	}
}

/*
	TODO: list and blocklist are only used
	in settings panel and on blocklist page;
	consider moving them somewhere else.
*/
.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;
	}
}

@media screen and (max-width: 30rem) {
	.domain-blocklist .entry {
		grid-template-columns: 1fr;
		gap: 0;
	}
}

/*
	TODO: this is only used on About
	page and in settings application;
	consider moving it somewhere else.
*/
.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;
	}
}