TueIT_App/components/server/Customer.vue

<template>
  <section :class="[darkMode ? 'section-darkmode' : 'section-lightmode']">
    <pre :class="['title', darkMode ? 'title-darkmode' : 'title-lightmode']">Customer name</pre>
    <div class="data-field" id="customer-id">
      <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">ID:</pre>
      <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
    </div>
    <div class="customer-data">
      <div class="contact">
        <pre :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Contact:</pre>
        <div class="data-field" id="contact-person">
          <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Contact person:</pre>
          <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
        </div>
        <div class="data-field" id="e-mail">
          <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">E-Mail:</pre>
          <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
        </div>
        <div class="data-field" id="phone">
          <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Phone number:</pre>
          <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
        </div>
      </div>
      <div class="address">
        <pre :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Address:</pre>
        <div class="street-address">
          <div class="data-field" id="street-name">
            <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Street:</pre>
            <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
          </div>
          <div class="data-field" id="street-no">
            <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">No.:</pre>
            <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
          </div>
        </div>
        <div class="data-field" id="postal-code">
          <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Postcode:</pre>
          <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
        </div>
        <div class="data-field" id="city">
          <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">City:</pre>
          <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
        </div>
      </div>
    </div>
    <div class="notes">
      <pre  :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Notes:</pre>
      <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">...</pre>
    </div>
  </section>
</template>
  
  
<script setup>
import { ref } from 'vue';

const darkMode = ref(true)
</script>

<script>
export default {
  name: "Customer",
};
</script>   
    
    
<style scoped>


section {
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1.875rem;
  border-radius: 0.625rem;
  box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
  align-items: stretch;
  justify-content: center;
} 
.section-darkmode { background-color: #2c2c2c; }
.section-lightmode { background-color: #ffffff; }


.title {
  padding: 1.25rem 0;
  letter-spacing: 0.05rem;
  text-decoration-line: underline;
  font: italic 400 1rem/1.875rem Overpass, sans-serif;
} 
.title-darkmode { color: #ffffff; } 
.title-lightmode { color: #000000; }


.data-field {
  display: flex;
  flex: auto;
  flex-direction: row;
  padding: 0 1.875rem;
  align-items: center;
  justify-content: flex-start;
  gap: 1.25rem;
} 
.data-field#customer-id { padding: 0.625rem 1.875rem; }
.data-field#street-name { flex: 3; } 

.label {
  letter-spacing: 0.03rem;
  font: 400 0.875rem/1.875rem Overpass, sans-serif;
}

pre {
  margin: 0;
}
.pre-darkmode { color: #ffffff; } 
.pre-lightmode { color: #000000; }

.data {
  display: flex;
  flex-direction: row;
  padding: 0 0.625rem;
  border-radius: 0.3125rem;
  box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
  background-color: #212121;
  align-items: center;
  justify-content: flex-start;
  letter-spacing: 5%;
  font: 400 0.75rem/250% Overpass, sans-serif;
} 
.data-darkmode {
  background-color: #212121;
  color: #ffffff;
} 
.data-lightmode {
  background-color: #ebebeb;
  color: #000000;
} 


.customer-data {
  display: flex;
  flex: auto;
  flex-direction: row;
  padding: 1.25rem 1.875rem;
  align-items: center;
  justify-content: stretch;
  gap: 0.625rem
}

.contact, .address {
  display: flex;
  flex: auto;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.625rem;
}

.area-title {
  letter-spacing: 0.03rem;
  font: 400 0.875rem/1.875rem Overpass, sans-serif;
}

.h3-darkmode { color: #ffffff; } 
.h3-lightmode { color: #000000; }


.street-address {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  align-self: stretch;
  gap: 0.625rem;
}

.notes {
  display: flex;
  flex-direction: column;
  padding: 0.625rem 1.875rem;
  align-items: flex-start;
  justify-content: center;
  gap: 0.625rem;
}
#notes { align-self: stretch; }

</style>