Button + close button styles

a-thousand-channels · Oct 28, 2024 · 81533db · 81533db
1 parent 9bc1185
commit 81533db
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 6 deletions.
diff --git a/src/assets/main.css b/src/assets/main.css
@@ -16,14 +16,38 @@ a {
   color: hsla(160, 100%, 37%, 1);
   color: #c6c600;
   transition: 0.4s;
-  padding: 3px;
+  /* padding: 3px; */
 }
 
 @media (hover: hover) {
   a:hover {
     background-color: hsla(165, 9%, 82%, 0.2);
   }
 }
+button {
+  cursor: pointer;
+  background-color: #c6c600;
+  background-color: #878701;
+  color: #fff;
+  border: none;
+  padding: 10px 20px;
+  border-radius: 5px;
+  transition: 0.4s;
+}
+button.close {
+    position: absolute;
+    top: 5px;
+    right: 15px;
+    border: none;
+    text-align: center;
+    width: 24px;
+    height: 24px;
+    font: 25px/24px Tahoma, Verdana, sans-serif;
+    color: #757575;
+
+    text-decoration: none;
+    background: transparent;
+  }
 
 p {
   margin: 0 0 1rem 0;

diff --git a/src/components/PlaceView.vue b/src/components/PlaceView.vue
@@ -2,17 +2,17 @@
 
 <template>
   <div class="overlay" v-if="placeData">
-    <button @click="closeOverlay">&times;</button>
-    <p class="place-layer" style="background-color: {{layerDarkcolor}}">
-      <a href="#" class="layer-info" data-layer-id="{{ layerId }}">
-        Layer {{ layerTitle }}
+    <button class="close" @click="closeOverlay">&times;</button>
+    <p class="place-layer" :style="{ backgroundColor: layerDarkcolor}">
+      <a href="#" class="layer-info" :data-layer-id="layerId">
+        Layer {{ layerTitle }} {{ layerId }} {{layerDarkcolor}}
       </a>
     </p>
 
     <p class="place-dates">{{ placeData.date_with_qualifier }}</p>
     <header>
       <h2>{{ placeData.title }}</h2>
-      <p v-if="placeData.subtitle">Subtitle: {{ placeData.subtitle }}</p>
+      <p v-if="placeData.subtitle">{{ placeData.subtitle }}</p>
     </header>
 
     <p><span v-if="placeData.location">{{ placeData.location }}, </span>{{ placeData.city }}</p>