mirror of
				https://github.com/superseriousbusiness/gotosocial.git
				synced 2025-10-31 15:02:24 -05:00 
			
		
		
		
	* [chore/frontend] Tweak threading a bit, inform about hidden replies * whoops * round off bottom of replies col-header if no replies visible
		
			
				
	
	
		
			101 lines
		
	
	
		
			No EOL
		
	
	
		
			1.9 KiB
		
	
	
	
		
			CSS
		
	
	
	
	
	
			
		
		
	
	
			101 lines
		
	
	
		
			No EOL
		
	
	
		
			1.9 KiB
		
	
	
	
		
			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/>.
 | |
| */
 | |
| 
 | |
| .thread,
 | |
| .thread-wrapper {
 | |
| 	display: flex;
 | |
| 	flex-direction: column;
 | |
| 	gap: 0.4rem;
 | |
| }
 | |
| 
 | |
| .thread {
 | |
| 	/*
 | |
| 		This column header might contain
 | |
| 		quite some info, so let it wrap.
 | |
| 	*/
 | |
| 	.col-header {
 | |
| 		display: flex;
 | |
| 		flex-direction: row;
 | |
| 		flex-wrap: wrap;
 | |
| 		column-gap: 1rem;
 | |
| 		row-gap: 0.5rem;
 | |
| 
 | |
| 		box-shadow: $boxshadow;
 | |
| 		border: $boxshadow-border;
 | |
| 
 | |
| 		h2 {
 | |
| 			margin-right: auto;
 | |
| 		}
 | |
| 
 | |
| 		&.replies.hidden-only {
 | |
| 			/*
 | |
| 				No visible replies below this column
 | |
| 				header, so round off the bottom.
 | |
| 			*/
 | |
| 			border-bottom-left-radius: $br;
 | |
| 			border-bottom-right-radius: $br;
 | |
| 		}
 | |
| 	}
 | |
| 
 | |
| 	.status {
 | |
| 
 | |
| 
 | |
| 		&.indent-1 {
 | |
| 			margin-left: 0.5rem;
 | |
| 		}
 | |
| 
 | |
| 		&.indent-2 {
 | |
| 			margin-left: 1rem;
 | |
| 		}
 | |
| 
 | |
| 		&.indent-3 {
 | |
| 			margin-left: 1.5rem;
 | |
| 		}
 | |
| 
 | |
| 		&.indent-4 {
 | |
| 			margin-left: 2rem;
 | |
| 		}
 | |
| 
 | |
| 		&.indent-5 {
 | |
| 			margin-left: 2.5rem;
 | |
| 		}
 | |
| 
 | |
| 		&.indent-1,
 | |
| 		&.indent-2,
 | |
| 		&.indent-3,
 | |
| 		&.indent-4,
 | |
| 		&.indent-5 {
 | |
| 			.status-link {
 | |
| 				margin-left: -0.5rem;
 | |
| 				border-left: 0.1rem dashed $border-accent;
 | |
| 			}
 | |
| 		}
 | |
| 
 | |
| 		border-radius: 0;
 | |
| 		&:last-child {
 | |
| 			border-bottom-left-radius: $br;
 | |
| 			border-bottom-right-radius: $br;
 | |
| 
 | |
| 			.status-info {
 | |
| 				border-bottom-left-radius: $br;
 | |
| 				border-bottom-right-radius: $br;
 | |
| 			}
 | |
| 		}
 | |
| 	}
 | |
| } |