Co-authored-by: widlam <mikolaj.widla@gmail.com> Co-authored-by: Adam Bem <adam.bem@zoho.eu> Reviewed-on: #184 Reviewed-by: Adam Bem <bema@noreply.example.com> Co-authored-by: Mikolaj Widla <widlam@noreply.example.com> Co-committed-by: Mikolaj Widla <widlam@noreply.example.com>
		
			
				
	
	
		
			95 lines
		
	
	
		
			1.5 KiB
		
	
	
	
		
			CSS
		
	
	
	
	
	
			
		
		
	
	
			95 lines
		
	
	
		
			1.5 KiB
		
	
	
	
		
			CSS
		
	
	
	
	
	
| .modification-button.btn-tile:hover {
 | |
|     color: #ca1111;
 | |
| }
 | |
| 
 | |
| .modification-button.btn-tile {
 | |
|     width: 10%;
 | |
|     margin: 20% 0 0 0;
 | |
|     font-size: 14px;
 | |
|     color: #00000020
 | |
| }
 | |
| 
 | |
| .modification-button.btn-addtile {
 | |
|     font-size: 38px;
 | |
|     color: #00000030;
 | |
| }
 | |
| 
 | |
| .modification-button.btn-copy {
 | |
|     width: 24px;
 | |
|     height: 24px;
 | |
|     align-content: center;
 | |
|     display: grid;
 | |
|     justify-content: center;
 | |
| }
 | |
| 
 | |
| .modification-button.btn-copy img {
 | |
|     width: 100%;
 | |
|     height: 100%;
 | |
| }
 | |
| 
 | |
| .modification-button.btn-addtile:hover {
 | |
|     color: #58ac43;
 | |
| }
 | |
| 
 | |
| .tile {
 | |
|     width: 100%;
 | |
|     padding-top: 40%;
 | |
|     border-radius: 5px;
 | |
|     position: relative;
 | |
|     background: #D5D7E6;
 | |
|     margin-bottom: 10px;
 | |
|     cursor: default;
 | |
|     border-bottom: 1px solid darkgray;
 | |
| }
 | |
| 
 | |
| .tile:hover {
 | |
|     filter: brightness(110%);
 | |
| }
 | |
| 
 | |
| .tile.active {
 | |
|     background: #2A93B0;
 | |
|     color: white;
 | |
|     filter: none;
 | |
| }
 | |
| 
 | |
| .tile.active .btn-tile {
 | |
|     opacity: 0;
 | |
| }
 | |
| 
 | |
| .tile .content {
 | |
|     position: absolute;
 | |
|     left: 0;
 | |
|     top: 0;
 | |
|     bottom: 0;
 | |
|     right: 0;
 | |
|     padding: 0 2% 0 7%;
 | |
|     display: flex;
 | |
| }
 | |
| 
 | |
| .content p {
 | |
|     margin: 0;
 | |
|     padding: 0;
 | |
| }
 | |
| 
 | |
| .refresh-button{
 | |
|     float: right; 
 | |
|     border: none; 
 | |
|     background-color: unset; 
 | |
|     font-size: xx-large; 
 | |
| }
 | |
| 
 | |
| .refresh-button:hover{
 | |
|   animation-name: rotation;
 | |
|   animation-duration: 0.8s;
 | |
|   animation-iteration-count: infinite;
 | |
|   animation-timing-function: linear;
 | |
| }
 | |
| 
 | |
| @keyframes rotation{
 | |
|     from{
 | |
|       transform: rotate(0deg);
 | |
|     }
 | |
|     to {
 | |
|       transform: rotate(360deg);
 | |
|     }
 | |
|   } |