diff --git a/static/css/home.css b/static/css/home.css index b6e23f9..ca494d1 100644 --- a/static/css/home.css +++ b/static/css/home.css @@ -1,3 +1,4 @@ +/* SETTINGS */ :root { /* Color Variables */ --board-color: #197052; /* primary color of the current board of Sticky */ @@ -18,6 +19,7 @@ --sidebar-width: 40vw; } +/* General */ *{ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; box-sizing: border-box; @@ -39,6 +41,7 @@ button, .addSubmitButton { color: var(--secondary-color); } +/* Nav bar */ .navBar{ position: relative; height: var(--navbar-height); @@ -65,12 +68,14 @@ button, .addSubmitButton { transform: rotate(45deg); } +/* Map */ #map{ - height: calc(100% - 80px); + height: 100%; width: 100%; z-index: 1; } +/* Sticker adding */ .addContainer{ width: 100%; height: 100%; @@ -106,6 +111,7 @@ button, .addSubmitButton { padding-left: 20px; } +/* Sticker adding: location */ .locationContainer{ background-color: var(--element-background-color); margin-left: 20px; @@ -124,17 +130,6 @@ button, .addSubmitButton { display: none; } -/* location icon */ -@keyframes outerAnim { - from{ - transform: scale(1); - opacity: 1; - } - to{ - transform: scale(2.5); - opacity: 0; - } -} .locationIcon{ margin: 10px; @@ -161,6 +156,36 @@ button, .addSubmitButton { cursor: pointer; } +/* Sticker adding: location animation */ +@keyframes outerAnim { + from{ + transform: scale(1); + opacity: 1; + } + to{ + transform: scale(2.5); + opacity: 0; + } +} + +.addSubmitButtonPressed { + background: linear-gradient(-45deg, rgb(200,200,200), var(--board-color)); + background-size: 200% 400%; + animation: submitPressed 2s ease infinite; +} + +@keyframes submitPressed{ + 0% { + background-position: 0% 50%; + } + 50% { + background-position: 100% 50%; + } + 100% { + background-position: 0% 50%; + } +} + .addInputDes{ margin-left: 20px; margin-top: 5px; @@ -197,12 +222,14 @@ button, .addSubmitButton { transition: background-color 0.2s, color 0.2s, border 0.2s; } +/* Sticker adding: drag and drop image */ .highlight{ background-color: var(--drop-image-see-through-color); border: 4px solid var(--border-drop-image-see-through-color); color: var(--light-text-color); } +/* Sticker adding */ .imageError{ background-color: var(--error-color); border: 4px solid var(--border-drop-image-see-through-color); @@ -260,6 +287,7 @@ button, .addSubmitButton { animation: submitPressed 2s infinite; } +/* Sticker adding: adding succes */ .successView{ background-color: var(--background-color); position: fixed; @@ -297,6 +325,7 @@ button, .addSubmitButton { transition: border-color 0.2s; } +/* Sticker adding: adding failed */ .invalid{ border-color: var(--error-color); } @@ -307,7 +336,6 @@ button, .addSubmitButton { padding: 4px; } - /* leaflet popup styling */ .leaflet-popup-content-wrapper .leaflet-popup-content { display: flex; @@ -422,6 +450,8 @@ button, .addSubmitButton { display: none; } + +/* nearYouMobileLine */ #nearYouOverlay.mobile > #nearYouMobileLine { display: block; margin-top: 0.5rem; @@ -436,6 +466,7 @@ button, .addSubmitButton { display: none; } +/* nearYouTopText */ #nearYouTopText { margin-top: 0.5rem; padding-bottom: 2rem; diff --git a/templates/home.html b/templates/home.html index 869f3cc..806ef47 100644 --- a/templates/home.html +++ b/templates/home.html @@ -9,24 +9,6 @@ -