KAZ/webtransfer
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

bo css

Browse Source
This commit is contained in:
GMrrc 2024-11-15 17:23:38 +01:00
parent 36dbdf901f
commit 94e5876c34
6 changed files with 48 additions and 168 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
js/main.js
View File

@ -962,16 +962,16 @@ var render = function render() {
var _vm = this, var _vm = this,
_c = _vm._self._c; _c = _vm._self._c;
return _c("div", { return _c("div", {
staticClass: "h-full w-full bg-slate-500", staticClass: "h-full w-full bg-black/80",
attrs: { attrs: {
id: "app" id: "app"
} }
}, [_c("div", { }, [_c("div", {
staticClass: "h-full w-full flex flex-row" staticClass: "h-full w-full flex flex-row"
}, [_c("div", { }, [_c("div", {
staticClass: "w-1/3 p-4 m-6 mr-2 bg-black/10 rounded-xl" staticClass: "w-1/3 p-4 m-6 mr-2 rounded-xl"
}), _vm._v(" "), _c("div", { }), _vm._v(" "), _c("div", {
staticClass: "w-2/3 p-4 m-6 ml-2 bg-black/10 rounded-xl" staticClass: "w-2/3 p-4 m-6 ml-2 bg-NcBlack rounded-xl"
}, [_c("FileTable")], 1)])]); }, [_c("FileTable")], 1)])]);
}; };
var staticRenderFns = []; var staticRenderFns = [];
@ -1000,7 +1000,7 @@ var render = function render() {
}, [_vm._m(0), _vm._v(" "), _vm._l(_vm.files, function (file) { }, [_vm._m(0), _vm._v(" "), _vm._l(_vm.files, function (file) {
return _c("div", { return _c("div", {
key: file.filename, key: file.filename,
staticClass: "flex h-16 items-center hover:bg-blue-500/20 cursor-pointer border-b last:border-b-0", staticClass: "flex h-16 items-center hover:bg-NcGray cursor-pointer rounded-lg border-b last:border-b-0",
on: { on: {
click: function ($event) { click: function ($event) {
return _vm.handleClick(file); return _vm.handleClick(file);
@ -1929,18 +1929,10 @@ video {
display: none; display: none;
} }
.collapse {
visibility: collapse;
}
.m-6 { .m-6 {
margin: 1.5rem; margin: 1.5rem;
} }
.mb-12 {
margin-bottom: 3rem;
}
.ml-2 { .ml-2 {
margin-left: 0.5rem; margin-left: 0.5rem;
} }
@ -1953,14 +1945,6 @@ video {
display: flex; display: flex;
} }
.table {
display: table;
}
.h-full {
height: 100%;
}
.h-12 { .h-12 {
height: 3rem; height: 3rem;
} }
@ -1969,12 +1953,8 @@ video {
height: 4rem; height: 4rem;
} }
.max-h-12 { .h-full {
max-height: 3rem; height: 100%;
}
.max-h-10 {
max-height: 2.5rem;
} }
.w-1\\/3 { .w-1\\/3 {
@ -1993,14 +1973,6 @@ video {
flex: 1 1 0%; flex: 1 1 0%;
} }
.table-auto {
table-layout: auto;
}
.border-collapse {
border-collapse: collapse;
}
.cursor-pointer { .cursor-pointer {
cursor: pointer; cursor: pointer;
} }
@ -2017,22 +1989,14 @@ video {
align-items: center; align-items: center;
} }
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.rounded-xl { .rounded-xl {
border-radius: 0.75rem; border-radius: 0.75rem;
} }
.rounded-lg {
border-radius: 0.5rem;
}
.border { .border {
border-width: 1px; border-width: 1px;
} }
@ -2050,36 +2014,13 @@ video {
border-color: rgb(209 213 219 / var(--tw-border-opacity, 1)); border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
} }
.bg-red-500 { .bg-NcBlack {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1)); background-color: rgb(23 23 23 / var(--tw-bg-opacity, 1));
} }
.bg-gray-600 { .bg-black\\/80 {
--tw-bg-opacity: 1; background-color: rgb(0 0 0 / 0.8);
background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
}
.bg-slate-500 {
--tw-bg-opacity: 1;
background-color: rgb(100 116 139 / var(--tw-bg-opacity, 1));
}
.bg-black\\/30 {
background-color: rgb(0 0 0 / 0.3);
}
.bg-black\\/10 {
background-color: rgb(0 0 0 / 0.1);
}
.bg-black\\/20 {
background-color: rgb(0 0 0 / 0.2);
}
.bg-gray-100 {
--tw-bg-opacity: 1;
background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
} }
.p-4 { .p-4 {
@ -2104,17 +2045,13 @@ video {
border-bottom-width: 0px; border-bottom-width: 0px;
} }
.hover\\:bg-gray-100:hover { .hover\\:cursor-pointer:hover {
cursor: pointer;
}
.hover\\:bg-NcGray:hover {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1)); background-color: rgb(33 33 33 / var(--tw-bg-opacity, 1));
}
.hover\\:bg-blue-500\\/10:hover {
background-color: rgb(59 130 246 / 0.1);
}
.hover\\:bg-blue-500\\/20:hover {
background-color: rgb(59 130 246 / 0.2);
}`, ""]); }`, ""]);
// Exports // Exports
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___); /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);

2
js/main.js.map
View File

File diff suppressed because one or more lines are too long

6
src/App.vue
View File

@ -1,9 +1,9 @@
<template> <template>
<div id="app" class="h-full w-full bg-slate-500"> <div id="app" class="h-full w-full bg-black/80">
<div class="h-full w-full flex flex-row"> <div class="h-full w-full flex flex-row">
<div class="w-1/3 p-4 m-6 mr-2 bg-black/10 rounded-xl"> <div class="w-1/3 p-4 m-6 mr-2 rounded-xl">
</div> </div>
<div class="w-2/3 p-4 m-6 ml-2 bg-black/10 rounded-xl"> <div class="w-2/3 p-4 m-6 ml-2 bg-NcBlack rounded-xl">
<FileTable/> <FileTable/>
</div> </div>
</div> </div>

2
src/components/FileTable.vue
View File

@ -11,7 +11,7 @@
<div <div
v-for="file in files" v-for="file in files"
:key="file.filename" :key="file.filename"
class="flex h-16 items-center hover:bg-blue-500/20 cursor-pointer border-b last:border-b-0" class="flex h-16 items-center hover:bg-NcGray cursor-pointer rounded-lg border-b last:border-b-0"
@click="handleClick(file)" @click="handleClick(file)"
> >
<div class="flex-1 px-4 py-2 border-r border-gray-300"> <div class="flex-1 px-4 py-2 border-r border-gray-300">

95
src/output.css
View File

@ -545,18 +545,10 @@ video {
display: none; display: none;
} }
.collapse {
visibility: collapse;
}
.m-6 { .m-6 {
margin: 1.5rem; margin: 1.5rem;
} }
.mb-12 {
margin-bottom: 3rem;
}
.ml-2 { .ml-2 {
margin-left: 0.5rem; margin-left: 0.5rem;
} }
@ -569,14 +561,6 @@ video {
display: flex; display: flex;
} }
.table {
display: table;
}
.h-full {
height: 100%;
}
.h-12 { .h-12 {
height: 3rem; height: 3rem;
} }
@ -585,12 +569,8 @@ video {
height: 4rem; height: 4rem;
} }
.max-h-12 { .h-full {
max-height: 3rem; height: 100%;
}
.max-h-10 {
max-height: 2.5rem;
} }
.w-1\/3 { .w-1\/3 {
@ -609,14 +589,6 @@ video {
flex: 1 1 0%; flex: 1 1 0%;
} }
.table-auto {
table-layout: auto;
}
.border-collapse {
border-collapse: collapse;
}
.cursor-pointer { .cursor-pointer {
cursor: pointer; cursor: pointer;
} }
@ -633,22 +605,14 @@ video {
align-items: center; align-items: center;
} }
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.rounded-xl { .rounded-xl {
border-radius: 0.75rem; border-radius: 0.75rem;
} }
.rounded-lg {
border-radius: 0.5rem;
}
.border { .border {
border-width: 1px; border-width: 1px;
} }
@ -666,36 +630,13 @@ video {
border-color: rgb(209 213 219 / var(--tw-border-opacity, 1)); border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
} }
.bg-red-500 { .bg-NcBlack {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1)); background-color: rgb(23 23 23 / var(--tw-bg-opacity, 1));
} }
.bg-gray-600 { .bg-black\/80 {
--tw-bg-opacity: 1; background-color: rgb(0 0 0 / 0.8);
background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
}
.bg-slate-500 {
--tw-bg-opacity: 1;
background-color: rgb(100 116 139 / var(--tw-bg-opacity, 1));
}
.bg-black\/30 {
background-color: rgb(0 0 0 / 0.3);
}
.bg-black\/10 {
background-color: rgb(0 0 0 / 0.1);
}
.bg-black\/20 {
background-color: rgb(0 0 0 / 0.2);
}
.bg-gray-100 {
--tw-bg-opacity: 1;
background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
} }
.p-4 { .p-4 {
@ -720,15 +661,11 @@ video {
border-bottom-width: 0px; border-bottom-width: 0px;
} }
.hover\:bg-gray-100:hover { .hover\:cursor-pointer:hover {
cursor: pointer;
}
.hover\:bg-NcGray:hover {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1)); background-color: rgb(33 33 33 / var(--tw-bg-opacity, 1));
}
.hover\:bg-blue-500\/10:hover {
background-color: rgb(59 130 246 / 0.1);
}
.hover\:bg-blue-500\/20:hover {
background-color: rgb(59 130 246 / 0.2);
} }

8
tailwind.config.js
View File

@ -5,7 +5,13 @@ module.exports = {
"./templates/**/*.{html,php}", // Fichiers dans le dossier `templates` "./templates/**/*.{html,php}", // Fichiers dans le dossier `templates`
], ],
theme: { theme: {
extend: {}, extend: {
colors: {
NcBlack: '#171717',
NcBlue: '#0072c3',
NcGray: '#212121',
},
},
}, },
plugins: [], plugins: [],
} }