noxious/client
3
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Clean up stylesheet, small fixes

Browse Source
This commit is contained in:
Colin Kallemein 2024-06-23 15:04:07 +02:00
parent 7a45145921
commit b2aa37d35b
1 changed files with 11 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/utilities/assetManager/AssetManager.vue
View File

@ -23,7 +23,7 @@
<div class="asset"> <div class="asset">
<input class="input-cyan search-field" placeholder="Search..." /> <input class="input-cyan search-field" placeholder="Search..." />
</div> </div>
<div class="asset"> <div class="asset add-new">
<span class="asset-name">Upload new</span> <span class="asset-name">Upload new</span>
<label for="upload-asset" class="file-upload"> <label for="upload-asset" class="file-upload">
<input id="upload-asset" ref="tileUploadField" type="file" accept="image/png" multiple @change="handleFileUpload" /> <input id="upload-asset" ref="tileUploadField" type="file" accept="image/png" multiple @change="handleFileUpload" />
@ -244,17 +244,8 @@ onMounted(() => {
.asset-categories, .assets, .asset-info { .asset-categories, .assets, .asset-info {
flex-direction: column; flex-direction: column;
position: relative; position: relative;
// &::after {
// content: '';
// position: absolute;
// right: 0;
// width: 1px;
// height: 100%;
// top: 0;
// background-color: $dark-cyan;
// }
.category, .asset, .image-container {
.category, .asset, .image-container {
position: relative; position: relative;
padding: 10px; padding: 10px;
&::after { &::after {
@ -269,6 +260,15 @@ onMounted(() => {
&.selected { &.selected {
background-color: rgba($cyan, 0.8); background-color: rgba($cyan, 0.8);
} }
&.add-new {
display: flex;
align-items: center;
gap: 10px 20px;
flex-wrap: wrap;
.asset-name {
flex-shrink: 0;
}
}
.search-field { .search-field {
border-radius: 5px; border-radius: 5px;
padding: 8px 10px; padding: 8px 10px;
@ -281,7 +281,6 @@ onMounted(() => {
text-shadow: 0 3px 6px rgba($black, 0.2); text-shadow: 0 3px 6px rgba($black, 0.2);
padding: 6px 15px; padding: 6px 15px;
display: inline-flex; display: inline-flex;
margin-left: 20px;
&:hover { &:hover {
background-color: $cyan; background-color: $cyan;