From 387a71d4c2af6e525a06c24f084cbeeee5843877 Mon Sep 17 00:00:00 2001
From: Gabriel Copat <copatg@cardiff.ac.uk>
Date: Tue, 28 Nov 2023 17:25:17 +0000
Subject: [PATCH] Updated allTrails css with animations and different image
styles for trail list
---
src/main/resources/static/css/allTrails.css | 35 +++++++++++++++------
1 file changed, 26 insertions(+), 9 deletions(-)
diff --git a/src/main/resources/static/css/allTrails.css b/src/main/resources/static/css/allTrails.css
index f311772c..fd539f6d 100644
--- a/src/main/resources/static/css/allTrails.css
+++ b/src/main/resources/static/css/allTrails.css
@@ -14,22 +14,39 @@
}
.listA{
+ display: flex;
flex: 1 1;
- background-color: black;
- color: white;
- padding: 10px;
-
+ padding: 15px;
+ transition: background-color 0.5s ease-out 100ms;
+ border-radius: 20px;
}
.listA:hover{
- background-color: #656565;
- color: white;
-
+ /*background-color: #656565;*/
+}
+.trailsImages {
+ flex: 1 1;
+ width: 150px;
+ border-radius: 20px;
+ transition: 0.5s ease-out 100ms;
}
+.trailsImages:hover {
+ box-shadow: 0 0 30px #bbbb00;
+ transform: scale(1.2,1.2);
+}
+
.selected {
- color: red;
+ box-shadow: 0 0 30px yellow;
}
.trailInfoBox {
- /*opacity: 0;*/
+ animation: fadeIn 3s;
+}
+@keyframes fadeIn {
+ 0% { opacity: 0; }
+ 100% { opacity: 1; }
+}
+@keyframes fadeGrey {
+ 0% {}
+ 100% { background-color: #656565 }
}
--
GitLab