LiteXiv/main.css

/* color scheme */

:root {
	--switch-ball: whitesmoke;
	--text-on-colored-bg: white;
}

.dark {
	--bg: #1a2328;
	--nav-bg: #283136;
	--card-bg: #283136;
	--text: #d0d0d0;
	--text-dim: #a0a0a0;
	--text-lit: #f0f0f0;
	--accent: #58a6ff;
	--division: #ffffff30;

	--widget-bg: #ffffff10;
	--widget-bg-hovered: #ffffff20;
	--widget-bg-selected: #ffffff30;
	--widget-bg-accent: #3a88e1;
	--widget-bg-accent-hovered: #3479c9;
	--widget-bg-warning: #ae3c47;
	--widget-bg-warning-hovered: #9c3540;

	--img-unloaded-bg: #00000020;
	--content-warning-bg: #ff384c;
	--page-count-bg: #00000080;

	color-scheme: dark;
}

.light {
	--bg: #f0f0f0;
	--nav-bg: #f8f8f8;
	--card-bg: #f8f8f8;
	--text: #303030;
	--text-dim: #606060;
	--text-lit: #101010;
	--accent: #4492eb;
	--division: #00000020;

	--widget-bg: #0000000c;
	--widget-bg-hovered: #00000018;
	--widget-bg-selected: #00000024;
	--widget-bg-accent: #3a88e1;
	--widget-bg-accent-hovered: #3479c9;
	--widget-bg-warning: #f65463;
	--widget-bg-warning-hovered: #de4a58;

	--img-unloaded-bg: #00000010;
	--content-warning-bg: #ff384c;
	--page-count-bg: #00000080;

	color-scheme: light;
}

/* base components */

body {
	margin: 0;
	min-height: 100vh;
    display: flex;
    flex-direction: column;
	background-color: var(--bg);
	font-family: sans-serif;
	color: var(--text);
}

nav {
	background-color: var(--nav-bg);
}

nav .container {
	padding: .5rem 1rem;
	max-width: 64rem;
	margin: auto;
	display: flex;
	gap: 1rem;
	align-items: center;
	justify-content: space-between;
}

nav a {
	color: var(--accent);
	text-decoration: none;
}

nav .title {
	font-size: 1.25rem;
}

nav .search-bar {
	flex: 0 1 16rem;
}

input[type=text], textarea {
	width: 100%;
	color: var(--text);
	background-color: var(--widget-bg);
	padding: .5rem 1rem;
	border: none;
	border-radius: 100vw;
	box-sizing: border-box;
	transition: background-color .2s;
}

input[type=text]:hover, textarea:hover {
	background-color: var(--widget-bg-hovered);
}

input[type=text]:focus, textarea:focus {
	background-color: var(--widget-bg);
	outline: 2px solid var(--widget-bg-accent);
}

main {
	flex: 1 1 auto;
	width: 100%;
	word-break: break-word;
}

main a {
	color: var(--text-lit);
	text-decoration: none;
}

main .container {
	max-width: 48rem;
	margin: auto;
	padding: 0 .5rem;
}

main .container-card {
	background-color: var(--card-bg);
	border-radius: 1rem;
	margin: 1rem auto;
	padding: 0;
	overflow: hidden;
}

main .container-big {
	max-width: 64rem;
}

main .container-small {
	padding: 0 1rem;
	max-width: 24rem;
}

footer {
	margin-top: auto;
	color: var(--text-dim);
}

footer a {
	color: var(--text-dim);
	text-decoration: none;
	transition: .2s;
}

footer a:hover {
	color: var(--text-lit);
}

footer .container {
	padding: .5rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0 1rem;
	justify-content: center;
}

/* widgets */

.center {
	text-align: center;
}

hr {
	border: none;
	height: 1px;
	background: var(--division);
}

h1, h2 {
	color: var(--text-lit);
}

.container-card hr {
	margin: 0;
}

.container-card h1 {
	font-size: 1.5rem;
}

.container-card h2 {
	font-size: 1.25rem;
}

.button, button, .collapsed > summary {
	color: var(--text);
	background-color: var(--widget-bg);
	display: inline-block;
	padding: .5rem 1.5rem;
	border-radius: 100vw;
	font-weight: bold;
	transition: .2s;
}

.button:hover, button:hover, .collapsed > summary:hover {
	color: var(--text-lit);
	background-color: var(--widget-bg-hovered);
}

button {
	cursor: pointer;
	border: none;
	font-size: 1rem;
}

.collapsed {
	text-align: center;
}

.collapsed > summary {
	cursor: pointer;
	list-style: none;
	margin: 1rem 0;
}

.collapsed > summary::-webkit-details-marker {
	display: none;
}

.collapsed[open] > summary {
	display: none;
}

label[for] {
	cursor: pointer;
}

.switch {
	appearance: none;
	width: 4rem;
	height: 2rem;
	background-color: var(--widget-bg-hovered);
	border-radius: 100vw;
	cursor: pointer;
	margin: 0;
	transition: .2s;
}

.switch:hover {
	background-color: var(--widget-bg-selected);
}

.switch:checked {
	background-color: var(--widget-bg-accent);
}

.switch:checked:hover {
	background-color: var(--widget-bg-accent-hovered);
}

.switch::after {
	content: '';
	position: relative;
	display: block;
	width: 1.5rem;
	height: 1.5rem;
	top: .25rem;
	left: .25rem;
	border-radius: 100vw;
	background-color: var(--switch-ball);
	transition: 0.3s;
}

.switch:checked::after {
	left: calc(100% - 1.75rem);
}

select {
	color: var(--text-lit);
	background-color: var(--widget-bg);
	border: none;
	padding: 0 .75rem;
	border-radius: 100vw;
	cursor: pointer;
	text-align: center;
	height: 2rem;
	transition: .2s;
}

select:hover {
	background-color: var(--widget-bg-hovered);
}

option {
	background-color: var(--bg);
}

img {
	background-color: var(--img-unloaded-bg);
	color: var(--text);
}

.avatar {
	width: 3rem;
	height: 3rem;
	border-radius: 100vw;
	object-fit: cover;
	object-position: center top;
}

.img-with-text {
	display: flex;
	gap: 0 .5rem;
	align-items: center;
}

.paginator {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem .5rem;
	align-items: center;
	justify-content: center;
	line-height: 2.5rem;
}

.paginator > a {
	box-sizing: border-box;
	color: var(--text);
	background-color: var(--widget-bg);
	min-width: 2.5rem;
	text-align: center;
	padding: 0 .5rem;
	border-radius: 100vw;
	font-weight: bold;
	transition: .2s;
}

.paginator a:hover {
	color: var(--text-lit);
	background-color: var(--widget-bg-hovered);
}

.paginator a.selected {
	color: var(--text-lit);
	background-color: var(--widget-bg-selected);
	cursor: default;
}

.grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
	gap: 1rem .5rem;
	text-align: left;
}

.collapsed > .grid {
	margin-top: 1rem;
}

.grid > div {
	display: flex;
	flex-direction: column;
	gap: .3rem;
}

.thumbnail {
	position: relative;
	aspect-ratio: 1;
	border-radius: .5rem;
	background-color: var(--img-unloaded-bg);
	overflow: hidden;
	transition: .2s;
}

.thumbnail:hover {
	opacity: .8;
}

.thumbnail .extra-info {
	position: absolute;
	left: 0;
	right: 0;
	display: flex;
	padding: 4px;
	font-size: .75rem;
	line-height: 1.25rem;
	color: var(--text-on-colored-bg);
	pointer-events: none;
}

.thumbnail .content-warning {
	box-sizing: border-box;
	background-color: var(--content-warning-bg);
	padding: 0 .3rem;
	border-radius: .5rem;
	font-weight: bold;
}

.thumbnail .page-count {
	margin-left: auto;
	box-sizing: border-box;
	background-color: var(--page-count-bg);
	min-width: 1.25rem;
	text-align: center;
	padding: 0 .3rem;
	border-radius: 100vw;
	font-weight: bold;
}

.thumbnail img {
	background-color: transparent;
	width: 100%;
}

.grid .title, .grid .username {
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.grid .username {
	color: var(--text);
}

.grid .author {
	display: flex;
	gap: 0 .3rem;
	align-items: center;
}

.grid .avatar {
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 100vw;
	object-fit: cover;
	object-position: center top;
}

.expand-checkbox {
	display: none;
}

.truncated {
	max-height: 8rem;
	overflow: hidden;
	mask-image: linear-gradient(white 25%, transparent 100%);
	-webkit-mask-image: linear-gradient(white 25%, transparent 100%);
}

.expand-checkbox:checked + .truncated {
	max-height: inherit;
	mask-image: none;
	-webkit-mask-image: none;
}

.expand-checkbox:checked ~ .center {
	display: none;
}

.expand-button {
	user-select: none;
	cursor: pointer;
	color: var(--accent);
	font-weight: bold;
}

/* /artworks */

.artwork-images {
	text-align: center;
}

.artwork-images a {
	display: block;
}

.artwork-images img {
	margin-bottom: 1rem;
	text-align: center;
	display: inline-block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100vh;
}

.artwork-images summary {
	margin: 0;
}

.artwork-info {
	max-width: 36rem;
	margin: auto;
	padding: 1rem;
}

.description {
	margin: 1rem 0;
}

.description a {
	color: var(--accent);
}

.tags, .stats {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 1rem 0;
}

.tags a {
	color: var(--text);
	background-color: var(--widget-bg);
	padding: .3rem .75rem;
	border-radius: 100vw;
	font-size: .9rem;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	transition: .2s;
}

.tags a:hover {
	color: var(--text-lit);
	background-color: var(--widget-bg-hovered);
}

.tags a span {
	color: var(--accent);
	vertical-align: middle;
}

.tags .warning {
	background-color: var(--widget-bg-warning);
	color: var(--text-on-colored-bg);
}

.tags .warning:hover {
	background-color: var(--widget-bg-warning-hovered);
}

.comments {
	max-width: 36rem;
	margin: auto;
	padding: 1rem;
}

.comment {
	display: flex;
	gap: 0 .5rem;
	margin-bottom: 1rem;
}

.comment > :first-child {
	flex: 0 0 auto;
}

.comment > :last-child {
	flex: 1;
}

.comment-info a {
	font-weight: bold;
	vertical-align: middle;
	margin-right: .3rem;
}

.comment-content {
	margin: .3rem 0;
}

.comment .button {
	margin-left: -.5rem;
}

.emoji {
	width: 1.25rem;
	height: 1.25rem;
	vertical-align: -.25rem;
	margin: 0 .1rem;
	background-color: transparent;
}

.stamp {
	width: 6rem;
	height: 6rem;
	border-radius: .5rem;
}

.comment-view-replies {
	margin-left: 3rem;
}

/* /users */

.category-selector {
	width: 100%;
	display: flex;
}

.category-selector a {
	border-top: 2px solid var(--division);
	color: var(--text-dim);
	padding: 1rem .5rem;
	flex: 1 1 auto;
	text-align: center;
	font-weight: bold;
	transition: .2s;
}

.category-selector a:hover {
	color: var(--text);
}

.category-selector a.selected {
	border-top: 2px solid var(--accent);
	color: var(--text-lit);
}

.category-selector + h2 {
	margin-top: 0;
}

.frequent-tags {
	display: flex;
	gap: .5rem;
	margin: 1rem 0;
	overflow-x: scroll;
	scrollbar-width: thin;
	padding-bottom: .5rem;
}

.frequent-tags a {
	color: var(--text);
	background-color: var(--widget-bg);
	padding: .3rem 1rem;
	border-radius: .5rem;
	font-size: .9rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	transition: .2s;
}

.frequent-tags a:hover {
	color: var(--text-lit);
	background-color: var(--widget-bg-hovered);
}

.frequent-tags b {
	color: var(--accent);
}

/* /tags */

.tag-bar {
	margin: 1rem 0;
}

.tag-icon {
	width: 5rem;
	height: 5rem;
	border-radius: .5rem;
	object-fit: cover;
	object-position: center top;
}

.tag-bar h1, .tag-bar p {
	margin: 0;
}

/* /settings */

.notice {
	background-color: var(--widget-bg);
	border-radius: .5rem;
	padding: 1rem;
	text-align: left;
}

.notice p {
	margin: 0;
}

.options > div {
	margin: 1rem 0;
	display: flex;
	gap: 1rem;
	align-items: center;
	justify-content: space-between;
}