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);
 | 
						|
    }
 | 
						|
  } |