forked from cory/tildefriends
		
	
		
			
				
	
	
		
			116 lines
		
	
	
		
			1.5 KiB
		
	
	
	
		
			CSS
		
	
	
	
	
	
			
		
		
	
	
			116 lines
		
	
	
		
			1.5 KiB
		
	
	
	
		
			CSS
		
	
	
	
	
	
| /*
 | |
|  * Tilde Friends core stylesheet
 | |
|  * This is a prototype; things may change based on feedback.
 | |
|  *
 | |
|  * This Software is an external library that is part of
 | |
|  * Tilde Friends and is shared under the MIT license.
 | |
|  *
 | |
|  * Inject this file in your app at tildefriends.css
 | |
|  * and use this tag to import it:
 | |
|  * <link rel="stylesheet" href="tildefriends.css"/>
 | |
|  *
 | |
|  * Revision 0 / 2024 M02 19
 | |
|  */
 | |
| 
 | |
| body {
 | |
| 	color: white;
 | |
| 	font-family: sans-serif;
 | |
| }
 | |
| 
 | |
| button,
 | |
| .button,
 | |
| input[type='button'],
 | |
| input[type='submit'],
 | |
| select {
 | |
| 	border: none;
 | |
| 	border-radius: 8px;
 | |
| 	padding: 8px 12px;
 | |
| 	text-align: center;
 | |
| 	text-decoration: none;
 | |
| 	display: inline-block;
 | |
| 	margin: 4px;
 | |
| 
 | |
| 	&.red {
 | |
| 		background-color: #bd1e24;
 | |
| 		color: white;
 | |
| 	}
 | |
| 
 | |
| 	&.green {
 | |
| 		background-color: #18922d;
 | |
| 		color: white;
 | |
| 	}
 | |
| 
 | |
| 	&.blue {
 | |
| 		background-color: #0067a7;
 | |
| 		color: white;
 | |
| 	}
 | |
| 
 | |
| 	&.yellow {
 | |
| 		background-color: #ee9600;
 | |
| 		color: black;
 | |
| 	}
 | |
| 
 | |
| 	&:hover {
 | |
| 		filter: brightness(0.75);
 | |
| 	}
 | |
| }
 | |
| 
 | |
| a:link {
 | |
| 	color: #268bd2;
 | |
| }
 | |
| 
 | |
| a:visited {
 | |
| 	color: #6c71c4;
 | |
| }
 | |
| 
 | |
| a:hover {
 | |
| 	color: #859900;
 | |
| }
 | |
| 
 | |
| a:active {
 | |
| 	color: #2aa198;
 | |
| }
 | |
| 
 | |
| table {
 | |
| 	border-collapse: collapse;
 | |
| 	width: 100%;
 | |
| }
 | |
| 
 | |
| td,
 | |
| th {
 | |
| 	border: 1px solid #ffffff40;
 | |
| 	text-align: left;
 | |
| 	padding: 8px;
 | |
| }
 | |
| 
 | |
| tr:nth-child(even) {
 | |
| 	background-color: #ffffff20;
 | |
| }
 | |
| 
 | |
| .flex {
 | |
| 	display: flex;
 | |
| }
 | |
| 
 | |
| .flex-column {
 | |
| 	display: flex;
 | |
| 	flex-direction: column;
 | |
| }
 | |
| 
 | |
| .flex-row {
 | |
| 	display: flex;
 | |
| 	flex-direction: row;
 | |
| }
 | |
| 
 | |
| .inline-flex-row {
 | |
| 	display: inline-flex;
 | |
| 	flex-direction: row;
 | |
| }
 | |
| 
 | |
| .box {
 | |
| 	background-color: #00000020;
 | |
| 	border: 1px solid grey;
 | |
| 	border-radius: 8px;
 | |
| 	padding: 16px;
 | |
| 	margin: 4px;
 | |
| }
 |