gtsocial-umbx

status.css (7004B)

---

 /*
 	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 "photoswipe/dist/photoswipe.css";
 @import "photoswipe-dynamic-caption-plugin/photoswipe-dynamic-caption-plugin.css";
 @import "plyr/dist/plyr.css";
 
 main {
 	background: transparent;
 	grid-auto-rows: auto;
 }
 
 .thread {
 	display: flex;
 	flex-direction: column;
 	border-radius: $br;
 }
 
 .toot {
 	background: $toot-bg;
 	box-shadow: $boxshadow;
 	border: $boxshadow-border;
 	border-radius: $br;
 	position: relative;
 	margin-bottom: $br;
 	padding-top: 0.75rem;
 
 	a {
 		position: relative;
 		z-index: 1;
 		color: inherit;
 		text-decoration: none;
 	}
 
 	.author > a {
 		padding: 0 0.75rem;
 		display: grid;
 		grid-template-columns: 3.5rem 1fr auto;
 		grid-template-rows: auto auto;
 		grid-template-areas:
 			"avatar display date"
 			"avatar user .";
 		gap: 0 0.5rem;
 
 		.avatar {
 			grid-area: avatar;
 			height: 3.5rem;
 			width: 3.5rem;
 			object-fit: cover;
 
 			border: 0.15rem solid $avatar-border;
 			border-radius: $br;
 			overflow: hidden; /* hides corners from img overflowing */
 
 			img {
 				height: 100%;
 				width: 100%;
 				object-fit: cover;
 				background: $bg;
 			}
 		}
 
 		.displayname, .username {
 			justify-self: start;
 			align-self: start;
 		
 			max-width: 100%;
 			white-space: nowrap;
 			overflow: hidden;
 			text-overflow: ellipsis;
 		}
 	
 		.displayname {
 			grid-area: display;
 			font-weight: bold;
 			font-size: 1rem;
 			line-height: 1.3rem;
 			/* margin-top: -0.5rem; */
 		}
 
 		.username {
 			grid-area: user;
 			color: $link-fg;
 			font-size: 1rem;
 			line-height: 1.3rem;
 		}
 
 		.timestamp {
 			grid-area: date;
 			color: $fg-reduced;
 		}
 	}
 
 	.body {
 		padding: 0.5rem 0.75rem;
 		display: flex;
 		flex-direction: column;
 		gap: 0.5rem;
 	}
 
 	details > summary {
 		display: inline-block;
 		list-style: none;
 
 		&::-webkit-details-marker {
 			display: none; /* Safari */
 		}
 
 		.button {
 			white-space: nowrap;
 			cursor: pointer;
 		}
 	}
 
 	.text {
 		margin: 0;
 		grid-row: span 1;
 		grid-column: 1 / span 3;
 
 		position: relative;
 		z-index: 2;
 
 		width: 100%;
 
 		details > summary {
 			padding-bottom: 0.5rem;
 
 			.button {
 				padding: 0.2rem 0.3rem;
 				font-size: 1rem;
 			}
 		}
 
 		a {
 			color: $link-fg;
 			text-decoration: underline;
 		}
 
 		.content {
 			word-break: break-word;
 
 			blockquote {
 				padding: 0.5rem 0 0.5rem 0.5rem;
 				border-left: 0.2rem solid $border-accent;
 				margin: 0;
 				font-style: italic;
 			}
 
 			hr {
 				border: 1px dashed $border-accent;
 			} 
 
 			pre, code {
 				background-color: $gray2;
 			}
 
 			code {
 				padding: 0.25rem;
 				border-radius: $br-inner;
 			}
 
 			pre {
 				display: flex;
 				border-radius: $br;
 				padding: 0.5rem;
 
 				code {	
 					padding: 0.5rem;
 					white-space: pre;
 					border-radius: 0;
 					overflow-x: auto;
 					-webkit-overflow-scrolling: touch;
 				}
 			}
 
 			img {
 				max-width: 100%;
 				margin: 5px auto;
 			}
 			img[alt~="!center"] {
 				display: block;
 			}
 		}
 
 		.emoji {
 			transition: 0.1s;
 		}
 
 		.emoji:hover, .emoji:active {
 			transform: scale(2);
 			background-color: $bg;
 			box-shadow: $boxshadow;
 			border: $boxshadow-border;
 			border-radius: $br-inner;
 		}
 	}
 
 	.media {
 		grid-column: span 3;
 		display: grid;
 		grid-template-columns: 50% 50%;
 		grid-auto-rows: 10rem;
 		overflow: hidden;
 
 		.media-wrapper {
 			height: 100%;
 			width: 100%;
 			box-sizing: border-box;
 			border: 0.15rem solid $gray1;
 			border-radius: $br;
 			position: relative;
 			overflow: hidden;
 			z-index: 2;
 
 			details {
 				position: absolute;
 				height: 100%;
 				width: 100%;
 
 				&[open] summary {
 					height: auto;
 					width: auto;
 					margin: 1rem;
 					padding: 0;
 
 					.show, video, img {
 						display: none;
 					}
 
 					.eye.button .hide {
 						display: inline-block;
 						grid-column: 1 / span 3;
 						grid-row: 1 / span 2;
 					}
 				}
 
 				summary {
 					position: absolute;
 					height: 100%;
 					width: 100%;
 					z-index: 3;
 					overflow: hidden;
 					
 					display: grid;
 					padding: 1rem;
 					grid-template-columns: 1fr auto 1fr;
 					grid-template-rows: 1fr 1fr;
 					grid-template-areas: 
 						"eye sensitive ."
 						".   sensitive  .";
 
 					.eye.button {
 						grid-area: eye;
 						align-self: start;
 						justify-self: start;
 						margin: 0;
 						padding: 0.4rem;
 
 						.fa-fw {
 							line-height: $fa-fw;
 						}
 
 						.hide {
 							display: none;
 						}
 					}
 
 					.show.sensitive {
 						grid-area: sensitive;
 						align-self: center;
 
 						.button {
 							cursor: pointer;
 							align-self: center;
 						}
 					}
 
 					video, img {
 						z-index: -1;
 						position: absolute;
 						height: calc(100% + 1.2rem);
 						width: calc(100% + 1.2rem);
 						top: -0.6rem;
 						left: -0.6rem;
 						filter: blur(1.2rem);
 					}
 				}
 
 				video.plyr-video, .plyr {
 					position: absolute;
 					height: 100%;
 					width: 100%;
 					object-fit: contain;
 					background: $gray1;
 				}
 			}
 		}
 
 		&.single .media-wrapper {
 			grid-column: span 2;
 		}
 
 		&.odd .media-wrapper:first-child, &.double .media-wrapper {
 			grid-row: span 2;
 		}
 
 		img {
 			width: 100%;
 			height: 100%;
 			object-fit: cover;
 		}
 	}
 
 	.info {
 		display: flex;
 		background: $toot-info-bg;
 		color: $fg-reduced;
 		border-top: 0.15rem solid $toot-info-border;
 		padding: 0.5rem 0.75rem;
 
 		div, time {
 			padding-right: 1rem;
 		}
 
 		.stats {
 			display: flex;
 		}
 
 		grid-column: span 3;
 		flex-wrap: wrap;
 	}
 
 	.toot-link {
 		top: 0;
 		right: 0;
 		bottom: 0;
 		left: 0;
 		overflow: hidden;
 		text-indent: 100%;
 		white-space: nowrap;
 
 		position: absolute;
 		z-index: 0;
 	}
 
 	&:first-child {
 		/* top left, top right */
 		border-top-left-radius: $br;
 		border-top-right-radius: $br;
 	}
 
 	&:last-child, &:last-child .info {
 		/* bottom left, bottom right */
 		border-bottom-left-radius: $br;
 		border-bottom-right-radius: $br;
 		margin-bottom: 0;
 	}
 
 	&.expanded {
 		background: $toot-focus-bg;
 		padding-bottom: 0;
 
 		.info {
 			background: $toot-focus-info-bg;
 		}
 	}
 }
 
 .plyr--video {
 	flex-direction: column-reverse;
 
 	.plyr__video-wrapper {
 		position: relative;
 	}
 
 	.plyr__controls {
 		align-self: stretch;
 		position: initial;
 		padding: 0.1rem;
 		padding-top: 0.2rem;
 	}
 
 	.plyr__control {
 		box-shadow: none;
 	}
 
 	.plyr__control--overlaid {
 		top: calc(50% - 18px);
 	}
 }
 
 .pswp__content {
 	padding: 2rem;
 
 	.plyr {
 		max-height: 100%;
 	}
 }