adm_tueit/TueIT_App
2
0
Fork 0
Code Issues 3 Pull Requests 3 Packages Projects Releases Wiki Activity

added lightmode option

Browse Source
This commit is contained in:
selina.mail
2023-11-22 13:41:53 +01:00
parent 8a4ced29ac
commit 3fd31bcc43
22 changed files with 1501 additions and 816 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
components/server/SoftwareSpecifications.vue
View File

@ -1,17 +1,17 @@
<template>
<section class="software-information">
<div class="label" id="software">Software specifications:
<section :class="['software-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']" id="software">Software specifications:
<div class="asset-data">
<table class="data-table" id="asset-table-no-client">
<tr class="table-row" id="table-head">
<th class="Software">Software</th>
<th class="Version">Version</th>
<th class="License">License</th>
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
<th :class="['Software', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Software-darkmode' : 'Software-lightmode']">Software</th>
<th :class="['Version', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Version-darkmode' : 'Version-lightmode']">Version</th>
<th :class="['License', darkMode ? 'th-darkmode' : 'th-lightmode']">License</th>
</tr>
<tr class="table-row" id="row-1">
<td class="Software">...</td>
<td class="Version">...</td>
<td class="License">...</td>
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
<td :class="['Software', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Software-darkmode' : 'Software-lightmode']">...</td>
<td :class="['Version', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Version-darkmode' : 'Version-lightmode']">...</td>
<td :class="['License', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
</tr>
</table>
</div>
@ -25,7 +25,11 @@
export default {
name: "SoftwareSpecifications",
data() {
return {
darkMode: true,
};
},
}
</script>
@ -43,16 +47,29 @@ export default {
padding: 1.25rem 1.875rem;
border-radius: 0.625rem;
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
}
.section-darkmode {
background-color: #2c2c2c;
}
.section-lightmode {
background-color: #fff;
}
.label {
color: #fff;
letter-spacing: 5%;
font: 400 0.875rem/1.875rem Overpass, sans-serif;
}
.label-darkmode {
color: #FFFFFF;
}
.label-lightmode {
color: #000;
}
.label#software {
padding-top: 1rem;
padding-bottom: 1rem;
@ -82,12 +99,24 @@ export default {
height: 3.125rem;
padding: 0.625rem;
gap: 0.625rem;
}
.tr-head-darkmode {
border-top: none;
border-bottom: 0.0625rem solid #000000;
}
.tr-head-lightmode {
border-top: none;
border-bottom: 0.0625rem solid #8e8e8e;
}
.tr-darkmode {
border-top: 0.0625rem solid #000000;
}
#table-head {
border-top: none;
border-bottom: 0.0625rem solid #000000;
.tr-lightmode {
border-top: 0.0625rem solid #8e8e8e;
}
th,
@ -95,11 +124,20 @@ td {
height: 1.875rem;
text-align: left;
padding: 0;
color: #ffffff;
letter-spacing: 5%;
font: 400 0.875rem/1.875rem Overpass, sans-serif;
}
.th-darkmode,
.td-darkmode {
color: #ffffff;
}
.th-lightmode,
.td-lightmode {
color: #000;
}
th {
font: 700 0.875rem/1.875rem Overpass, sans-serif;
}
@ -107,14 +145,28 @@ th {
.Software {
width: 50%;
}
.Software-darkmode {
border-right: 0.0625rem solid #000000;
}
.Software-lightmode {
border-right: 0.0625rem solid #8e8e8e;
}
.Version {
width: 25%;
}
.Version-darkmode {
border-right: 0.0625rem solid #000000;
}
.Version-lightmode {
border-right: 0.0625rem solid #8e8e8e;
}
.License {
width: 25%;
}