starred/esx_core
1
0
Fork 0
mirror of https://github.com/esx-framework/esx_core.git synced 2026-08-30 09:48:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

New neon design for menu_list + small fix in menu_default

Browse Source
This commit is contained in:
Crapule
2020-05-14 17:53:51 +02:00
parent cbb5027834
commit 5fc674ec5e
13 changed files with 241 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files
modules/menu_default/data/html/css/app_light.css
+4 -4
View File
@@ -102,7 +102,7 @@
.menu .menu-items .menu-item {
height: 40px;
display: block;
background-color: rgba(255, 255, 255, 0.4);
background-color: rgba(255, 255, 255, 0.6);
height: 32px;
line-height: 32px;
color: rgb(0, 0, 0);
@@ -110,21 +110,21 @@
}
.menu .menu-items .menu-item.selected {
background-color: rgba(255, 255, 255, 0.6);
background-color: rgba(255, 255, 255, 0.9);
border:1px solid rgb(245, 13, 13);
border-radius: 5px 5px 5px 5px;
animation: border-flicker 4s linear infinite;
}
.menu .menu-items .menu-item.selected:first-child {
background-color: rgba(255, 255, 255, 0.6);
background-color: rgba(255, 255, 255, 0.7);
border:1px solid rgb(245, 13, 13);
border-radius: 5px 5px 5px 5px;
animation: border-flicker 4s linear infinite;
}
.menu .menu-items .menu-item.selected:last-child {
background-color: rgba(255, 255, 255, 0.6);
background-color: rgba(255, 255, 255, 0.7);
border:1px solid rgb(245, 13, 13);
border-radius: 5px 5px 5px 5px;
animation: border-flicker 4s linear infinite;
modules/menu_list/data/html/css/app.css
-52
View File
@@ -1,52 +0,0 @@
@font-face {
font-family: bankgothic;
src: url('../fonts/bankgothic.ttf');
}
@font-face {
font-family: pcdown;
src: url('../fonts/pdown.ttf');
}
.menu {
font-family: bankgothic;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
box-shadow: 0px 0px 50px 0px #000;
overflow-y: auto;
max-height: 90%;
}
.menu button {
font-family: bankgothic;
}
.menu>table {
border: 1px transparent;
border-spacing: 0;
min-width: 400px;
background-color: #FFF;
}
.menu>table>thead {
background-color: #506be6;
text-align: center;
height: 40px;
line-height: 40px;
color: #fff;
}
.menu td {
text-align: center;
padding: 8px;
}
.menu tbody tr:nth-child(even) {
background: #CCC
}
.menu tbody tr:nth-child(odd) {
background: #FFF
}
modules/menu_list/data/html/css/app_dark.css
+115
View File
@@ -0,0 +1,115 @@
@font-face {
font-family: bankgothic;
src: url('../fonts/bankgothic.ttf');
}
@font-face {
font-family: pcdown;
src: url('../fonts/pdown.ttf');
}
@font-face {
font-family: sweetsansprobold;
src: url('../fonts/SweetSansProBold.ttf');
}
@font-face {
font-family: sweetsansprothin;
src: url('../fonts/SweetSansProThin.ttf');
}
@font-face {
font-family: sweetsansprolight;
src: url('../fonts/SweetSansProLight.ttf');
}
.menu {
font-family: sweetsansprothin;
position: absolute;
border-radius: 5px;
background-color: rgba(0, 0, 0, 0.6);
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
box-shadow: 0px 0px 50px 0px #000;
overflow-y: auto;
max-height: 90%;
}
.menu button {
font-family: sweetsansprolight;
color: #fff;
margin-right: 2px;
background-color: rgba(61, 148, 246, 0);
border: solid #0ba5ef 1px;
border-radius: 5px;
text-decoration: none;
display: inline-block;
}
.menu button:hover {
font-family: sweetsansprolight;
color: #fff;
background-color: rgba(61, 148, 246, 0);
box-shadow: 0px 0px 8px 3px rgba(16,134,232,0.62);
border: solid #0ba5ef 1px;
border-radius: 5px;
text-decoration: none;
display: inline-block;
}
.menu>table {
border: 1px transparent;
border-spacing: 0;
min-width: 500px;
background-color: rgba(0, 0, 0, 0.6);
}
thead{
color: #6fc9f3;
}
.menu>table>thead {
background-color: rgba(0, 0, 0, 0.8);
background-image: url(../img/bg_brick.png);
background-size:cover ;
text-transform: uppercase;
border-radius: 5px 5px 5px 5px;
text-align: center;
height: 40px;
line-height: 40px;
font-size: 1.2em;
animation: neon 5s linear infinite;
}
.menu td {
text-align: center;
padding: 8px;
}
.menu tbody tr:nth-child(even) {
background: rgba(0, 0, 0, 0.2);
color: #fff;
}
.menu tbody tr:nth-child(odd) {
background: rgba(0, 0, 0, 0.4);
color: #fff;
}
@keyframes neon {
20%,
24%,
55% {
color: #111;
text-shadow: none;
}
0%,
19%,
21%,
23%,
25%,
54%,
56%,
100% {
text-shadow: 0 0 5px #0ba5ef, 0 0 15px #0ba5ef, 0 0 20px #0ba5ef, 0 0 40px #0ba5ef, 0 0 60px #00aeff, 0 0 10px #0ba5ef, 0 0 98px #0ba5ef;
color: #6fc9f3;
}
}
modules/menu_list/data/html/css/app_light.css
+116
View File
@@ -0,0 +1,116 @@
@font-face {
font-family: bankgothic;
src: url('../fonts/bankgothic.ttf');
}
@font-face {
font-family: pcdown;
src: url('../fonts/pdown.ttf');
}
@font-face {
font-family: sweetsansprobold;
src: url('../fonts/SweetSansProBold.ttf');
}
@font-face {
font-family: sweetsansprothin;
src: url('../fonts/SweetSansProThin.ttf');
}
@font-face {
font-family: sweetsansprolight;
src: url('../fonts/SweetSansProLight.ttf');
}
.menu {
font-family: sweetsansprothin;
position: absolute;
border-radius: 5px;
background-color: rgba(0, 0, 0, 0.6);
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
box-shadow: 0px 0px 50px 0px #000;
overflow-y: auto;
max-height: 90%;
}
.menu button {
font-family: sweetsansprolight;
color: rgb(0, 0, 0);
margin-right: 2px;
background-color: rgba(61, 148, 246, 0);
border: solid #b80404 1px;
border-radius: 5px;
text-decoration: none;
display: inline-block;
}
.menu button:hover {
font-family: sweetsansprolight;
color: rgb(0, 0, 0);
background-color: rgba(61, 148, 246, 0);
box-shadow: 0px 0px 8px 3px rgba(245, 13, 13,0.62);
border: solid #b80404 1px;
border-radius: 5px;
text-decoration: none;
display: inline-block;
}
.menu>table {
border: 1px transparent;
border-spacing: 0;
min-width: 500px;
background-color: rgba(0, 0, 0, 0.6);
}
thead{
color: #d30909;
}
.menu>table>thead {
background-color: rgba(0, 0, 0, 0.8);
background-image: url(../img/bg_brick_white.png);
background-size:cover ;
text-transform: uppercase;
border-radius: 5px 5px 5px 5px;
text-align: center;
height: 40px;
line-height: 40px;
font-size: 1.3em;
animation: neon 5s linear infinite;
}
.menu td {
text-align: center;
padding: 8px;
}
.menu tbody tr:nth-child(even) {
background: rgba(255, 255, 255, 0.9);
color: rgb(0, 0, 0);
}
.menu tbody tr:nth-child(odd) {
background: rgba(255, 255, 255, 0.8);
color: rgb(0, 0, 0);
}
@keyframes neon {
20%,
24%,
55% {
color: #111;
text-shadow: none;
}
0%,
19%,
21%,
23%,
25%,
54%,
56%,
100% {
text-shadow: 0 0 5px #b80404, 0 0 15px #b80404, 0 0 20px #b80404, 0 0 40px #b80404, 0 0 60px #b80404, 0 0 10px #b80404, 0 0 98px #b80404;
color: #d30909;
}
}
modules/menu_list/data/html/fonts/SweetSansProBold.ttf
BIN
View File
Binary file not shown.
modules/menu_list/data/html/fonts/SweetSansProLight.ttf
BIN
View File
Binary file not shown.
modules/menu_list/data/html/fonts/SweetSansProThin.ttf
BIN
View File
Binary file not shown.
modules/menu_list/data/html/img/bg_brick.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 130 KiB

modules/menu_list/data/html/img/bg_brick_white.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 128 KiB

modules/menu_list/data/html/img/brickwall.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 MiB

modules/menu_list/data/html/img/esx_logo.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 100 KiB

modules/menu_list/data/html/js/app.js
+4 -4
View File
@@ -5,7 +5,7 @@
'<table>' +
'<thead>' +
'<tr>' +
'{{#head}}<td>{{content}}</td>{{/head}}' +
'{{#head}}<td>- {{content}} -</td>{{/head}}' +
'</tr>' +
'</thead>'+
'<tbody>' +
@@ -44,7 +44,7 @@
namespace: namespace,
name : name
});
ESX_MENU.render();
};
@@ -70,7 +70,7 @@
$(menuContainer).hide();
for (let namespace in ESX_MENU.opened) {
if (typeof ESX_MENU.data[namespace] == 'undefined') {
ESX_MENU.data[namespace] = {};
}
@@ -189,4 +189,4 @@
}
};
})();
})();
modules/menu_list/data/html/ui.html
+2 -2
View File
@@ -1,7 +1,7 @@
<html>
<head>
<link rel="stylesheet" href="css/app.css" />
<link rel="stylesheet" href="css/app_dark.css" />
</head>
<body>
@@ -13,4 +13,4 @@
<script src="js/app.js"></script>
</body>
</html>
</html>