Redesign + Fixes
This commit is contained in:
parent
7718ed6c32
commit
7fe8056e35
67 changed files with 1898 additions and 2799 deletions
212
public/assets/control.js
vendored
212
public/assets/control.js
vendored
|
|
@ -1,212 +0,0 @@
|
|||
function getPacket(channel, type, payload) {
|
||||
let packet = {
|
||||
channel: channel,
|
||||
data: {
|
||||
type: type,
|
||||
payload: payload
|
||||
}
|
||||
}
|
||||
|
||||
return JSON.stringify(packet)
|
||||
}
|
||||
|
||||
function getClickPacket(uuid, item_id) {
|
||||
return getPacket(
|
||||
'SERVER_IN_OPERATOR_CLICK',
|
||||
'nl.iobyte.parkplus.api.packet.payloads.operator.ClientOperatorClickPayload',
|
||||
{
|
||||
uuid: uuid,
|
||||
item_id: item_id
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
$(document).on('click', "div.panel[id^='button-'] > div.panel-body > img", function() {
|
||||
const parent = $(this).parent().parent();
|
||||
const id = parent.attr("id").replace("button-", "");
|
||||
|
||||
if(!socket || hasConnected !== true)
|
||||
return
|
||||
|
||||
socket.emit(
|
||||
'data',
|
||||
getClickPacket(
|
||||
fixUUID(window.settings.uuid),
|
||||
id
|
||||
)
|
||||
);
|
||||
});
|
||||
|
||||
window.sendMessage = function(message) {
|
||||
if(hasConnected)
|
||||
socket.send(message);
|
||||
}
|
||||
|
||||
let hasConnected = false
|
||||
let socket = null
|
||||
$(() => {
|
||||
socket = io('websocket.iobyte.nl', {
|
||||
query: "type=client&id=" + window.settings.id + "&uuid=" + fixUUID(window.settings.uuid) + "&attraction=" + window.settings.attraction + "&token=" + window.settings.pin,
|
||||
autoConnect: false,
|
||||
withCredentials: false
|
||||
})
|
||||
|
||||
socket.on('connect', () => {
|
||||
setTimeout(() => {
|
||||
if(hasConnected)
|
||||
return
|
||||
|
||||
socket.close()
|
||||
}, 5 * 1000)
|
||||
})
|
||||
|
||||
socket.on('disconnect', () => {
|
||||
const control = $("span#control");
|
||||
control.removeClass();
|
||||
control.addClass("control-status");
|
||||
control.addClass("status-closed");
|
||||
control.html("Lost Connection");
|
||||
setTimeout(() => {
|
||||
if(hasConnected)
|
||||
return
|
||||
|
||||
socket.close()
|
||||
}, 5 * 1000)
|
||||
})
|
||||
|
||||
socket.on('error', e => {
|
||||
socket.close()
|
||||
console.log(e)
|
||||
})
|
||||
|
||||
socket.on('close', () => {
|
||||
hasConnected = true
|
||||
const control = $("span#control");
|
||||
control.removeClass();
|
||||
control.addClass("control-status");
|
||||
control.addClass("status-closed");
|
||||
control.html("Disconnected");
|
||||
})
|
||||
|
||||
socket.on('data', payload => {
|
||||
try {
|
||||
payload = JSON.parse(payload)
|
||||
} catch (e) {
|
||||
return
|
||||
}
|
||||
|
||||
if(!payload)
|
||||
return
|
||||
|
||||
if(!payload.hasOwnProperty('channel'))
|
||||
return
|
||||
|
||||
let channel = payload.channel;
|
||||
if(channel === 'CLIENT_KICK') {
|
||||
socket.close()
|
||||
return
|
||||
}
|
||||
|
||||
let data;
|
||||
if(payload.hasOwnProperty('data')) {
|
||||
data = payload.data.payload;
|
||||
} else {
|
||||
data = payload.data
|
||||
}
|
||||
|
||||
handlePacket(channel, data)
|
||||
})
|
||||
})
|
||||
|
||||
function fixUUID(i) {
|
||||
return i.substr(0,8) +
|
||||
"-" +
|
||||
i.substr(8,4) +
|
||||
"-" +
|
||||
i.substr(12,4) +
|
||||
"-" +
|
||||
i.substr(16,4) +
|
||||
"-" +
|
||||
i.substr(20)
|
||||
}
|
||||
|
||||
function handlePacket(channel, payload) {
|
||||
switch (channel) {
|
||||
case 'CLIENT_NOTIFICATION':
|
||||
handleNotification(payload.title, payload.message)
|
||||
break
|
||||
case 'CLIENT_OPERATOR_REQUEST_REPLY':
|
||||
handleReply(payload)
|
||||
break
|
||||
case 'CLIENT_ATTRACTION_STATE':
|
||||
handleStatus(payload.status)
|
||||
break
|
||||
case 'CLIENT_OPERATOR_STATE':
|
||||
handleState(payload.item_id, payload.state)
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
function handleNotification(title, message) {
|
||||
const msg = $("div#message");
|
||||
msg.html('<div class="alert alert-info">'+title+'</div>');
|
||||
console.log({
|
||||
title: title,
|
||||
message: message,
|
||||
})
|
||||
}
|
||||
|
||||
function handleReply(payload) {
|
||||
if(payload.hasOwnProperty('requestReply') && payload.requestReply === 'ACCEPT') {
|
||||
const control = $("span#control");
|
||||
control.removeClass();
|
||||
control.addClass("control-status");
|
||||
control.addClass("status-open");
|
||||
control.html("Connected");
|
||||
|
||||
loadPanel(payload.data)
|
||||
return
|
||||
}
|
||||
|
||||
socket.close();
|
||||
handleNotification(
|
||||
'Unable to operate ride',
|
||||
payload.message
|
||||
)
|
||||
}
|
||||
|
||||
function jsUcfirst(str) {
|
||||
return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
|
||||
}
|
||||
|
||||
function handleStatus(payload) {
|
||||
const status = $("span#status");
|
||||
status.html(jsUcfirst(payload.name));
|
||||
status.style.backgroundColor = payload.hex
|
||||
}
|
||||
|
||||
function handleState(id, state) {
|
||||
let img = new Image();
|
||||
img.onload = () => {
|
||||
$("div#button-"+id+" div.panel-body img").attr("src", state.cover);
|
||||
$("div#button-"+id+" div.panel-body #text").html(state.name);
|
||||
}
|
||||
img.src = state.cover;
|
||||
}
|
||||
|
||||
function loadPanel(panel) {
|
||||
for(let i = 0; i < panel.items.length; i++) {
|
||||
let item = panel.items[i];
|
||||
let state = item.state
|
||||
|
||||
const image = state.cover;
|
||||
const title = item.name;
|
||||
const id = item.id;
|
||||
const text = state.name;
|
||||
|
||||
if(i === 0)
|
||||
$("div#panel").append('\n');
|
||||
|
||||
$("div#panel").append("<div class='col-xs-12 col-sm-6 col-md-4 col-lg-3'><div id='button-"+id+"' class='panel panel-theme'><div class='panel-heading'><h2 class='panel-title' style='text-align: center'>"+title+"</h2></div><div class='panel-body'><img src='"+image+"' style='width: 100%; height: auto; border: #a6a6a6 1px solid; border-radius: 3px'><p id='text' style='text-align: center'>"+text+"</p></div></div></div>\n");
|
||||
}
|
||||
}
|
||||
55
public/assets/css/panel.min.css
vendored
55
public/assets/css/panel.min.css
vendored
|
|
@ -1,55 +0,0 @@
|
|||
body,html{width:100%;min-height:100%;margin:0;padding:0;position:absolute;background-color:#2980b9;background: url("https://cdn.discordapp.com/attachments/706149937905270904/707677922462400532/Gradiant_5.png") no-repeat center center fixed;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;font-family:sans-serif}.page{width:360px;padding:8% 0 0;margin:auto}.page > div,.page > form{position:relative;z-index:1;background:#171717;color:#fff;max-width:360px;margin:0 auto 100px;padding:15px 45px 15px 45px;box-shadow:0 0 20px 0 rgba(0,0,0,.2),0 5px 5px 0 rgba(0,0,0,.24);border-radius:3px}.page > div img,.page form img{width:80%;display:block;margin:auto;margin-bottom:15px!important}.page form .input-group{margin-bottom:10px}.alert{color:#fff!important;margin-bottom:5px}.alert-danger{background-color:#e74c3c!important;border:none!important}.alert-success{background-color:#2ecc71!important;border:none!important}
|
||||
|
||||
.btn-custom {
|
||||
outline: 0;
|
||||
background: #e31c26;
|
||||
width: 180px;
|
||||
border: 0;
|
||||
padding: 5px;
|
||||
color: #FFFFFF;
|
||||
font-size: 17px;
|
||||
cursor: pointer;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.input-group-addon {
|
||||
background-color: #e31c26 !important;
|
||||
border-color: #333 !important;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.form-control,
|
||||
.form-control[disabled] {
|
||||
background-color: #404040;
|
||||
color: #fff;
|
||||
border-color: #262626 !important;
|
||||
}
|
||||
|
||||
.btn-custom:hover,.btn-custom:active,.btn-custom:focus {
|
||||
background: #cc1922;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.footer {
|
||||
margin-bottom: 0;
|
||||
background-color: #171717;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
width: 100%;
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.footer img {
|
||||
filter: brightness(0) invert(1);
|
||||
}
|
||||
|
||||
a {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
a:hover, a:focus {
|
||||
color: #ccc;
|
||||
}
|
||||
29
public/assets/css/panel_default.min.css
vendored
29
public/assets/css/panel_default.min.css
vendored
|
|
@ -1,29 +0,0 @@
|
|||
body,html{width:100%;min-height:100%;margin:0;padding:0;position:absolute;background-color:#2980b9;background: url("../img/background.jpg") no-repeat center center fixed;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;font-family:sans-serif}.page{width:360px;padding:8% 0 0;margin:auto}.page > div,.page > form{position:relative;z-index:1;background:#fff;max-width:360px;margin:0 auto 100px;padding:15px 45px 15px 45px;box-shadow:0 0 20px 0 rgba(0,0,0,.2),0 5px 5px 0 rgba(0,0,0,.24);border-radius:3px}.page > div img,.page form img{width:80%;display:block;margin:auto;margin-bottom:15px!important}.page form .input-group{margin-bottom:10px}.alert{color:#fff!important;margin-bottom:5px}.alert-danger{background-color:#e74c3c!important;border:none!important}.alert-success{background-color:#2ecc71!important;border:none!important}
|
||||
|
||||
.btn-custom {
|
||||
outline: 0;
|
||||
background: #2ecc71;
|
||||
width: 180px;
|
||||
border: 0;
|
||||
padding: 5px;
|
||||
color: #FFFFFF;
|
||||
font-size: 17px;
|
||||
cursor: pointer;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.btn-custom:hover,.btn-custom:active,.btn-custom:focus {
|
||||
background: #27ae60;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.footer {
|
||||
margin-bottom: 0;
|
||||
background-color: #fff;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
width: 100%;
|
||||
text-decoration: none;
|
||||
}
|
||||
7
public/assets/css/root.css
vendored
Normal file
7
public/assets/css/root.css
vendored
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
:root {
|
||||
--banner: url("../img/banner.png") center center;
|
||||
--bg: #f2f2f2;
|
||||
--color-light: #2ecc71;
|
||||
--color-dark: #27ae60;
|
||||
--color-text: #fff;
|
||||
}
|
||||
336
public/assets/css/skin.css
vendored
336
public/assets/css/skin.css
vendored
|
|
@ -1,10 +1,12 @@
|
|||
@import "root.css";
|
||||
|
||||
.user-image, .user-header img {
|
||||
border: 0 !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
.navbar-nav>.user-menu>.dropdown-menu>li.user-header>p {
|
||||
color: #fff !important;
|
||||
color: var(--color-text) !important;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
|
|
@ -13,7 +15,7 @@
|
|||
}
|
||||
|
||||
.bg-green {
|
||||
background-color: #cc1922 !important;
|
||||
background-color: var(--color-light) !important;
|
||||
}
|
||||
|
||||
.small-box .inner {
|
||||
|
|
@ -21,7 +23,7 @@
|
|||
}
|
||||
|
||||
.small-box .icon {
|
||||
color: #fff !important;
|
||||
color: var(--color-text) !important;
|
||||
font-size: 65px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
|
@ -40,7 +42,7 @@
|
|||
}
|
||||
|
||||
.main-header .navbar {
|
||||
background-color: #cc1922;
|
||||
background-color: var(--color-light);
|
||||
}
|
||||
|
||||
.main-header .navbar .nav > li > a {
|
||||
|
|
@ -54,53 +56,53 @@
|
|||
.main-header .navbar .nav .open > a:hover,
|
||||
.main-header .navbar .nav .open > a:focus,
|
||||
.main-header .navbar .nav > .active > a {
|
||||
background: #e31c26;
|
||||
color: #fff;
|
||||
background: var(--color-dark);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.main-header .navbar .sidebar-toggle {
|
||||
color: #fff;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.main-header .navbar .sidebar-toggle:hover {
|
||||
color: #f6f6f6;
|
||||
background: #e31c26;
|
||||
background: var(--color-dark);
|
||||
}
|
||||
|
||||
.main-header .navbar .sidebar-toggle {
|
||||
color: #fff;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.main-header .navbar .sidebar-toggle:hover {
|
||||
background-color: #e31c26;
|
||||
background-color: var(--color-dark);
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.main-header .navbar .dropdown-menu li.divider {
|
||||
background-color: #e31c26;
|
||||
background-color: var(--color-dark);
|
||||
}
|
||||
|
||||
.main-header .navbar .dropdown-menu li a {
|
||||
color: #fff;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.main-header .navbar .dropdown-menu li a:hover {
|
||||
background: #e31c26;
|
||||
background: var(--color-dark);
|
||||
}
|
||||
}
|
||||
|
||||
.main-header .logo {
|
||||
background-color: #e31c26;
|
||||
background-color: var(--color-dark);
|
||||
color: #ffffff;
|
||||
border-bottom: 0 solid transparent;
|
||||
}
|
||||
|
||||
.main-header .logo:hover {
|
||||
background-color: #e31c26;
|
||||
background-color: var(--color-dark);
|
||||
}
|
||||
|
||||
.main-header li.user-header {
|
||||
background-color: #cc1922;
|
||||
background-color: var(--color-light);
|
||||
}
|
||||
|
||||
.content-header {
|
||||
|
|
@ -110,7 +112,7 @@
|
|||
.wrapper,
|
||||
.main-sidebar,
|
||||
.left-side {
|
||||
background-color: #333;
|
||||
background-color: #222d32;
|
||||
}
|
||||
|
||||
.user-panel > .info,
|
||||
|
|
@ -119,8 +121,8 @@
|
|||
}
|
||||
|
||||
.sidebar-menu > li.header {
|
||||
color: #fff;
|
||||
background: #1a1a1a;
|
||||
color: #4b646f;
|
||||
background: #1a2226;
|
||||
}
|
||||
|
||||
.sidebar-menu > li > a {
|
||||
|
|
@ -131,20 +133,20 @@
|
|||
.sidebar-menu > li.active > a,
|
||||
.sidebar-menu > li.menu-open > a {
|
||||
color: #ffffff;
|
||||
background: #262626;
|
||||
background: #1e282c;
|
||||
}
|
||||
|
||||
.sidebar-menu > li.active > a {
|
||||
border-left-color: #e31c26;
|
||||
border-left-color: var(--color-light);
|
||||
}
|
||||
|
||||
.sidebar-menu > li > .treeview-menu {
|
||||
margin: 0 1px;
|
||||
background: #1a1919;
|
||||
background: #2c3b41;
|
||||
}
|
||||
|
||||
.sidebar a {
|
||||
color: #999;
|
||||
color: #b8c7ce;
|
||||
}
|
||||
|
||||
.sidebar a:hover {
|
||||
|
|
@ -152,10 +154,11 @@
|
|||
}
|
||||
|
||||
.sidebar-menu .treeview-menu > li > a {
|
||||
color: #ccc;
|
||||
color: #8aa4af;
|
||||
}
|
||||
|
||||
.sidebar-menu .treeview-menu > li.active > a,
|
||||
|
||||
.sidebar-menu .treeview-menu > li > a:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
|
@ -176,10 +179,7 @@
|
|||
|
||||
.sidebar-form input[type="text"] {
|
||||
color: #666;
|
||||
border-top-left-radius: 2px;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 2px;
|
||||
border-radius: 2px 0 0 2px;
|
||||
}
|
||||
|
||||
.sidebar-form input[type="text"]:focus,
|
||||
|
|
@ -194,7 +194,10 @@
|
|||
|
||||
.sidebar-form .btn {
|
||||
color: #999;
|
||||
border-radius: 0 2px 2px 0;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 2px;
|
||||
border-bottom-right-radius: 2px;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
|
|
@ -210,19 +213,19 @@ p {
|
|||
}
|
||||
|
||||
.box.box-primary {
|
||||
border-top-color: #cc1922 !important;
|
||||
border-top-color: var(--color-light) !important;
|
||||
}
|
||||
|
||||
.btn.btn-primary {
|
||||
border-color: #e31c26 !important;
|
||||
background-color: #cc1922 !important;
|
||||
color: #fff !important;
|
||||
border-color: var(--color-dark) !important;
|
||||
background-color: var(--color-light) !important;
|
||||
color: var(--color-text) !important;
|
||||
}
|
||||
|
||||
.btn.btn-primary:hover {
|
||||
border-color: #cc1922 !important;
|
||||
background-color: #e31c26 !important;
|
||||
color: #fff !important;
|
||||
border-color: var(--color-light) !important;
|
||||
background-color: var(--color-dark) !important;
|
||||
color: var(--color-text) !important;
|
||||
}
|
||||
|
||||
.logo-mini img {
|
||||
|
|
@ -283,7 +286,7 @@ input.form-control {
|
|||
}
|
||||
|
||||
.bg-green-gradient {
|
||||
background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #e31c26), color-stop(1, #cc1922)) !important;
|
||||
background: -webkit-gradient(linear, left bottom, left top, color-stop(0, var(--color-dark)), color-stop(1, var(--color-light))) !important;
|
||||
}
|
||||
|
||||
i.no {
|
||||
|
|
@ -293,32 +296,32 @@ i.no {
|
|||
}
|
||||
|
||||
i.yes {
|
||||
color: #cc1922;
|
||||
color: #2ecc71;
|
||||
font-weight: 900;
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
.pagination li.active a {
|
||||
background-color: #cc1922;
|
||||
background-color: var(--color-light);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.panel-theme {
|
||||
border-color: #e31c26;
|
||||
border-color: var(--color-dark);
|
||||
}
|
||||
|
||||
.panel-theme>.panel-heading {
|
||||
color: #fff !important;
|
||||
background-color: #cc1922 !important;
|
||||
border-color: #e31c26 !important;
|
||||
color: var(--color-text) !important;
|
||||
background-color: var(--color-light) !important;
|
||||
border-color: var(--color-dark) !important;
|
||||
}
|
||||
|
||||
.panel-theme>.panel-heading+.panel-collapse>.panel-body {
|
||||
border-top-color: #e31c26 !important;
|
||||
border-top-color: var(--color-dark) !important;
|
||||
}
|
||||
|
||||
.panel-theme>.panel-footer+.panel-collapse>.panel-body {
|
||||
border-bottom-color: #e31c26 !important;
|
||||
border-bottom-color: var(--color-dark) !important;
|
||||
}
|
||||
|
||||
.sceditor-container, textarea.editor {
|
||||
|
|
@ -329,210 +332,95 @@ i.yes {
|
|||
border-radius: 3px 3px 0 0;
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
background-color: #171717;
|
||||
}
|
||||
|
||||
.content-header {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.content-header>.breadcrumb>li:not(.active)>a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.content-header>.breadcrumb>.active {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.main-footer {
|
||||
background-color: #282727;
|
||||
color: #fff;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.main-footer img {
|
||||
filter: brightness(0) invert(1);
|
||||
}
|
||||
|
||||
.box {
|
||||
border-top-color: #e31c26;
|
||||
background-color: #282727;
|
||||
}
|
||||
|
||||
.box .box-header {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.sceditor-container, textarea.editor {
|
||||
resize: vertical !important;
|
||||
.settings {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
min-height: 200px;
|
||||
border-color: #262626 !important;
|
||||
color: #fff !important;
|
||||
background-color: #404040 !important;
|
||||
display: block;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.sceditor-toolbar{
|
||||
color: #fff !important;
|
||||
background-color: #262626 !important;
|
||||
.settings:not(:first-child) {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.sceditor-dropdown label {
|
||||
color: #fff !important;
|
||||
.settings > .settings-toggle {
|
||||
width: 37px;
|
||||
margin-right: 5px;
|
||||
display: inline-block;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.sceditor-dropdown {
|
||||
color: #fff !important;
|
||||
background-color: #333 !important;
|
||||
border-color: #262626 !important;
|
||||
.settings > .settings-text {
|
||||
width: calc(100% - 65px);
|
||||
height: 30px;
|
||||
display: inline-block;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.sceditor-dropdown textarea,
|
||||
.sceditor-dropdown input {
|
||||
background-color: #404040 !important;
|
||||
border-color: #262626 !important;
|
||||
margin: 0 !important;
|
||||
.settings-text > p > .settings-info {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.sceditor-dropdown div input[type="button"] {
|
||||
background-color: #404040 !important;
|
||||
color: #fff !important;
|
||||
border-color: #202326;
|
||||
width: calc(100% - 10px);
|
||||
.settings-text > p {
|
||||
margin-top: -2px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.sceditor-dropdown div input[type="button"]:hover {
|
||||
background-color: #202326 !important;
|
||||
color: #fff !important;
|
||||
border-color: #333 !important;
|
||||
.box.box-success {
|
||||
border-top-color: var(--color-light);
|
||||
}
|
||||
|
||||
.sceditor-dropdown a.sceditor-fontsize-option {
|
||||
color: #fff !important;
|
||||
/* Switcher */
|
||||
.switcher, .switcher * {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.sceditor-dropdown a.sceditor-fontsize-option:hover {
|
||||
color: #fff !important;
|
||||
background-color: #404040 !important;
|
||||
.switcher {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 37px;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
.sceditor-toolbar .sceditor-group {
|
||||
color: #fff !important;
|
||||
background-color: #ccc !important;
|
||||
border: 0 !important;
|
||||
.switcher > input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.sceditor-container iframe {
|
||||
color: #fff !important;
|
||||
background-color: #404040 !important;
|
||||
.switcher > .switcher-slider {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #FF5B5B;
|
||||
-webkit-transition: 0.3s;
|
||||
transition: 0.3s;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.sceditor-font-picker div {
|
||||
overflow-y: scroll !important;
|
||||
height: 120px !important;
|
||||
.switcher > .switcher-slider:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
left: 2px;
|
||||
bottom: 2px;
|
||||
background-color: #fff;
|
||||
-webkit-transition: 0.3s;
|
||||
transition: 0.3s;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.sceditor-font-option,
|
||||
.sceditor-more {
|
||||
color: #fff !important;
|
||||
.switcher > input:checked + .switcher-slider {
|
||||
background-color: #57E659;
|
||||
}
|
||||
|
||||
.sceditor-font-option:hover,
|
||||
.sceditor-more:hover {
|
||||
background-color: #404040 !important;
|
||||
}
|
||||
|
||||
.table-bordered {
|
||||
border-color: #262626 !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.table-bordered > thead > tr > th {
|
||||
border-color: #e31c26;
|
||||
background-color: #e31c26;
|
||||
}
|
||||
|
||||
.table-striped > tbody > tr > td {
|
||||
background-color: #262626;
|
||||
border-color: #666 !important;
|
||||
}
|
||||
|
||||
.table-bordered > tbody >tr > td:first-child {
|
||||
border-left-color: #262626 !important;
|
||||
}
|
||||
|
||||
.table-bordered > tbody >tr:last-child > td {
|
||||
border-bottom-color: #262626 !important;
|
||||
}
|
||||
|
||||
|
||||
.table-bordered > tbody >tr > td:last-child {
|
||||
border-right-color: #262626 !important;
|
||||
}
|
||||
|
||||
.table-striped>tbody>tr:nth-of-type(odd) > td {
|
||||
background-color: #404040;
|
||||
}
|
||||
|
||||
.pagination > li:first-child > a,
|
||||
.pagination > li:last-child > a {
|
||||
background-color: #e31c26 !important;
|
||||
border-color: #262626 !important;
|
||||
}
|
||||
|
||||
.pagination > .disabled > a {
|
||||
color: #ccc !important;
|
||||
}
|
||||
|
||||
.pagination li a {
|
||||
background-color: #404040;
|
||||
color: #fff;
|
||||
border-color: #202326 !important;
|
||||
}
|
||||
|
||||
.pagination li:hover a {
|
||||
background-color: #666;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.pagination li.active a,
|
||||
.pagination li.active a:hover{
|
||||
background-color: #666;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.input-group-addon {
|
||||
background-color: #e31c26 !important;
|
||||
border-color: #333 !important;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.form-control,
|
||||
.form-control[disabled] {
|
||||
background-color: #404040;
|
||||
color: #fff;
|
||||
border-color: #262626 !important;
|
||||
}
|
||||
|
||||
.form-group > label {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.navbar-nav>.user-menu>.dropdown-menu>li.user-header>p {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.navbar-nav>.user-menu>.dropdown-menu {
|
||||
border: 2px solid #e6e6e6;
|
||||
}
|
||||
|
||||
.navbar-nav>.user-menu>.dropdown-menu {
|
||||
border: 0 !important;
|
||||
top: 55px
|
||||
}
|
||||
|
||||
.navbar-nav>.user-menu>.dropdown-menu>.user-footer {
|
||||
background-color: #282727;
|
||||
.switcher > input:checked + .switcher-slider:before {
|
||||
-webkit-transform: translateX(15px);
|
||||
-ms-transform: translateX(15px);
|
||||
transform: translateX(15px);
|
||||
}
|
||||
|
|
|
|||
334
public/assets/css/skin_default.css
vendored
334
public/assets/css/skin_default.css
vendored
|
|
@ -1,334 +0,0 @@
|
|||
.user-image, .user-header img {
|
||||
border: 0 !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
.navbar-nav>.user-menu>.dropdown-menu>li.user-header>p {
|
||||
color: #fff !important;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.logo-lg img, .logo-mini img {
|
||||
filter: brightness(0) invert(1);
|
||||
}
|
||||
|
||||
.bg-green {
|
||||
background-color: #2ecc71 !important;
|
||||
}
|
||||
|
||||
.small-box .inner {
|
||||
min-height: 102px;
|
||||
}
|
||||
|
||||
.small-box .icon {
|
||||
color: #fff !important;
|
||||
font-size: 65px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.label.label-status {
|
||||
line-height: unset !important;
|
||||
font-size: 15px !important;
|
||||
}
|
||||
|
||||
.main-footer span {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.main-footer span a img {
|
||||
height: 20px !important;
|
||||
}
|
||||
|
||||
.main-header .navbar {
|
||||
background-color: #2ecc71;
|
||||
}
|
||||
|
||||
.main-header .navbar .nav > li > a {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.main-header .navbar .nav > li > a:hover,
|
||||
.main-header .navbar .nav > li > a:active,
|
||||
.main-header .navbar .nav > li > a:focus,
|
||||
.main-header .navbar .nav .open > a,
|
||||
.main-header .navbar .nav .open > a:hover,
|
||||
.main-header .navbar .nav .open > a:focus,
|
||||
.main-header .navbar .nav > .active > a {
|
||||
background: #27ae60;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.main-header .navbar .sidebar-toggle {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.main-header .navbar .sidebar-toggle:hover {
|
||||
color: #f6f6f6;
|
||||
background: #27ae60;
|
||||
}
|
||||
|
||||
.main-header .navbar .sidebar-toggle {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.main-header .navbar .sidebar-toggle:hover {
|
||||
background-color: #27ae60;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.main-header .navbar .dropdown-menu li.divider {
|
||||
background-color: #27ae60;
|
||||
}
|
||||
|
||||
.main-header .navbar .dropdown-menu li a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.main-header .navbar .dropdown-menu li a:hover {
|
||||
background: #27ae60;
|
||||
}
|
||||
}
|
||||
|
||||
.main-header .logo {
|
||||
background-color: #27ae60;
|
||||
color: #ffffff;
|
||||
border-bottom: 0 solid transparent;
|
||||
}
|
||||
|
||||
.main-header .logo:hover {
|
||||
background-color: #27ae60;
|
||||
}
|
||||
|
||||
.main-header li.user-header {
|
||||
background-color: #2ecc71;
|
||||
}
|
||||
|
||||
.content-header {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.wrapper,
|
||||
.main-sidebar,
|
||||
.left-side {
|
||||
background-color: #222d32;
|
||||
}
|
||||
|
||||
.user-panel > .info,
|
||||
.user-panel > .info > a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.sidebar-menu > li.header {
|
||||
color: #4b646f;
|
||||
background: #1a2226;
|
||||
}
|
||||
|
||||
.sidebar-menu > li > a {
|
||||
border-left: 3px solid transparent;
|
||||
}
|
||||
|
||||
.sidebar-menu > li:hover > a,
|
||||
.sidebar-menu > li.active > a,
|
||||
.sidebar-menu > li.menu-open > a {
|
||||
color: #ffffff;
|
||||
background: #1e282c;
|
||||
}
|
||||
|
||||
.sidebar-menu > li.active > a {
|
||||
border-left-color: #2ecc71;
|
||||
}
|
||||
|
||||
.sidebar-menu > li > .treeview-menu {
|
||||
margin: 0 1px;
|
||||
background: #2c3b41;
|
||||
}
|
||||
|
||||
.sidebar a {
|
||||
color: #b8c7ce;
|
||||
}
|
||||
|
||||
.sidebar a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.sidebar-menu .treeview-menu > li > a {
|
||||
color: #8aa4af;
|
||||
}
|
||||
|
||||
.sidebar-menu .treeview-menu > li.active > a,
|
||||
|
||||
.sidebar-menu .treeview-menu > li > a:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.sidebar-form {
|
||||
border-radius: 3px;
|
||||
border: 1px solid #374850;
|
||||
margin: 10px 10px;
|
||||
}
|
||||
|
||||
.sidebar-form input[type="text"],
|
||||
.sidebar-form .btn {
|
||||
box-shadow: none;
|
||||
background-color: #374850;
|
||||
border: 1px solid transparent;
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
.sidebar-form input[type="text"] {
|
||||
color: #666;
|
||||
border-top-left-radius: 2px;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 2px;
|
||||
}
|
||||
|
||||
.sidebar-form input[type="text"]:focus,
|
||||
.sidebar-form input[type="text"]:focus + .input-group-btn .btn {
|
||||
background-color: #fff;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.sidebar-form input[type="text"]:focus + .input-group-btn .btn {
|
||||
border-left-color: #fff;
|
||||
}
|
||||
|
||||
.sidebar-form .btn {
|
||||
color: #999;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 2px;
|
||||
border-bottom-right-radius: 2px;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
p {
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.box.box-primary {
|
||||
border-top-color: #2ecc71 !important;
|
||||
}
|
||||
|
||||
.btn.btn-primary {
|
||||
border-color: #27ae60 !important;
|
||||
background-color: #2ecc71 !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.btn.btn-primary:hover {
|
||||
border-color: #2ecc71 !important;
|
||||
background-color: #27ae60 !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.logo-mini img {
|
||||
display: block;
|
||||
width: 40px;
|
||||
margin-left: 5px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.logo-lg img {
|
||||
display: block;
|
||||
height: 30px;
|
||||
margin: auto;
|
||||
margin-top: 10px !important;
|
||||
}
|
||||
|
||||
.help-block {
|
||||
font-size: 12px;
|
||||
margin-top: -12px;
|
||||
margin-bottom: -5px;
|
||||
}
|
||||
|
||||
div.pull-left.image {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
th.ip, td.ip {
|
||||
width: 335px;
|
||||
}
|
||||
|
||||
.role, .project-status {
|
||||
font-weight: 700;
|
||||
padding: 5px;
|
||||
border-radius: 3px;
|
||||
color: #fff;
|
||||
background-color: transparent;
|
||||
display: inline-block;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
div.btn-group, div.btn-group .multiselect {
|
||||
width: 100% !important;
|
||||
margin-top: -2px;
|
||||
}
|
||||
|
||||
div.form-group {
|
||||
margin-top: -10px;
|
||||
}
|
||||
|
||||
input.form-control {
|
||||
border-top-right-radius: 3px !important;
|
||||
border-bottom-right-radius: 3px !important;
|
||||
}
|
||||
|
||||
.input-group .input-group-addon {
|
||||
border-top-left-radius: 3px !important;
|
||||
border-bottom-left-radius: 3px !important;
|
||||
}
|
||||
|
||||
.bg-green-gradient {
|
||||
background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #27ae60), color-stop(1, #2ecc71)) !important;
|
||||
}
|
||||
|
||||
i.no {
|
||||
color: #e74c3c;
|
||||
font-weight: 900;
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
i.yes {
|
||||
color: #2ecc71;
|
||||
font-weight: 900;
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
.pagination li.active a {
|
||||
background-color: #2ecc71;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.panel-theme {
|
||||
border-color: #27ae60;
|
||||
}
|
||||
|
||||
.panel-theme>.panel-heading {
|
||||
color: #fff !important;
|
||||
background-color: #2ecc71 !important;
|
||||
border-color: #27ae60 !important;
|
||||
}
|
||||
|
||||
.panel-theme>.panel-heading+.panel-collapse>.panel-body {
|
||||
border-top-color: #27ae60 !important;
|
||||
}
|
||||
|
||||
.panel-theme>.panel-footer+.panel-collapse>.panel-body {
|
||||
border-bottom-color: #27ae60 !important;
|
||||
}
|
||||
|
||||
.sceditor-container, textarea.editor {
|
||||
resize: vertical !important;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
min-height: 200px;
|
||||
border-radius: 3px 3px 0 0;
|
||||
}
|
||||
463
public/assets/css/style.css
vendored
463
public/assets/css/style.css
vendored
|
|
@ -1,10 +1,11 @@
|
|||
@import "root.css";
|
||||
|
||||
html, body {
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
background: url("https://cdn.discordapp.com/attachments/706149937905270904/707677922462400532/Gradiant_5.png") no-repeat center center fixed;
|
||||
background: var(--bg) no-repeat center center fixed;
|
||||
-webkit-background-size: cover;
|
||||
-moz-background-size: cover;
|
||||
-o-background-size: cover;
|
||||
|
|
@ -12,6 +13,36 @@ html, body {
|
|||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
.page {
|
||||
width: 360px;
|
||||
padding: 8% 0 0;
|
||||
margin: auto
|
||||
}
|
||||
|
||||
.page>div,
|
||||
.page>form {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
background: var(--color-text);
|
||||
max-width: 360px;
|
||||
margin: 0 auto 100px;
|
||||
padding: 15px 45px 15px 45px;
|
||||
box-shadow: 0 0 20px 0 rgba(0, 0, 0, .2), 0 5px 5px 0 rgba(0, 0, 0, .24);
|
||||
border-radius: 3px
|
||||
}
|
||||
|
||||
.page>div img,
|
||||
.page form img {
|
||||
width: 80%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-bottom: 15px!important
|
||||
}
|
||||
|
||||
.page form .input-group {
|
||||
margin-bottom: 10px
|
||||
}
|
||||
|
||||
.login-page {
|
||||
width: 360px;
|
||||
padding: 8% 0 0;
|
||||
|
|
@ -47,19 +78,18 @@ html, body {
|
|||
|
||||
.login-page form button {
|
||||
outline: 0;
|
||||
background: #e31c26;
|
||||
width: 180px;
|
||||
background: var(--color-light);
|
||||
width: 100%;
|
||||
border: 0;
|
||||
padding: 5px;
|
||||
color: #FFFFFF;
|
||||
font-size: 17px;
|
||||
padding: 15px;
|
||||
color: var(--color-text);
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.login-page form button:hover,.form button:active,.form button:focus {
|
||||
background: #cc1922;
|
||||
color: #fff;
|
||||
background: var(--color-dark);
|
||||
}
|
||||
|
||||
.login-page form .message {
|
||||
|
|
@ -69,12 +99,12 @@ html, body {
|
|||
}
|
||||
|
||||
.login-page form .message a {
|
||||
color: #27ae60;
|
||||
color: var(--color-dark);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.login-page form .message a:hover {
|
||||
color: #2ecc71;
|
||||
color: var(--color-light);
|
||||
}
|
||||
|
||||
.login-page form .register-form {
|
||||
|
|
@ -86,17 +116,47 @@ html, body {
|
|||
background: transparent !important;
|
||||
}
|
||||
|
||||
.banner {
|
||||
width: 100%;
|
||||
background: var(--banner) no-repeat;
|
||||
-webkit-background-size: cover;
|
||||
-moz-background-size: cover;
|
||||
-o-background-size: cover;
|
||||
background-size: cover;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.banner:after {
|
||||
content: '\A';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.banner > div {
|
||||
position: absolute;
|
||||
padding: 45px;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
inset: 0;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
padding: 15px;
|
||||
width: 100% !important;
|
||||
margin-top: 75px !important;
|
||||
margin-bottom: 40px !important;
|
||||
}
|
||||
|
||||
.footer {
|
||||
margin-bottom: 0;
|
||||
background-color: #282727;
|
||||
color: #fff;
|
||||
background-color: #fff;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
text-align: center;
|
||||
|
|
@ -111,12 +171,11 @@ html, body {
|
|||
|
||||
.footer span a img {
|
||||
height: 20px !important;
|
||||
filter: brightness(0) invert(1);
|
||||
}
|
||||
|
||||
|
||||
.alert {
|
||||
color: #fff !important;
|
||||
color: var(--color-text); !important;
|
||||
}
|
||||
|
||||
.alert-success {
|
||||
|
|
@ -130,91 +189,94 @@ html, body {
|
|||
}
|
||||
|
||||
.panel-theme {
|
||||
border-color: #cc1922;
|
||||
border-color: var(--color-dark);
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.panel-theme>.panel-heading {
|
||||
color: #fff !important;
|
||||
background-color: #e31c26 !important;
|
||||
border-color: #cc1922 !important;
|
||||
color: var(--color-text); !important;
|
||||
background-color: var(--color-light) !important;
|
||||
border-color: var(--color-dark) !important;
|
||||
}
|
||||
|
||||
.panel-theme>.panel-heading+.panel-collapse>.panel-body {
|
||||
border-top-color: #cc1922 !important;
|
||||
border-top-color: var(--color-dark) !important;
|
||||
}
|
||||
|
||||
.panel-theme>.panel-footer+.panel-collapse>.panel-body {
|
||||
border-bottom-color: #cc1922 !important;
|
||||
border-bottom-color: var(--color-dark) !important;
|
||||
}
|
||||
|
||||
.navbar.navbar-theme {
|
||||
background-color: #e31c26;
|
||||
background-color: var(--color-light);
|
||||
border-color: transparent;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.navbar.navbar-theme .navbar-brand {
|
||||
color: #fff;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.navbar.navbar-theme .navbar-brand:hover,
|
||||
.navbar.navbar-theme .navbar-brand:focus {
|
||||
color: #fff;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.navbar.navbar-theme .navbar-nav > li > a {
|
||||
color: #fff;
|
||||
color: var(--color-text);
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.navbar.navbar-theme .navbar-nav > li > a:hover,
|
||||
.navbar.navbar-theme .navbar-nav > li > a:focus {
|
||||
color: #fff;
|
||||
background-color: #cc1922;
|
||||
color: var(--color-text);
|
||||
background-color: var(--color-dark);
|
||||
}
|
||||
|
||||
.navbar.navbar-theme .navbar-nav > .active > a,
|
||||
.navbar.navbar-theme .navbar-nav > .active > a:hover,
|
||||
.navbar.navbar-theme .navbar-nav > .active > a:focus {
|
||||
color: #fff;
|
||||
background-color: #cc1922;
|
||||
color: var(--color-text);
|
||||
background-color: var(--color-dark);
|
||||
}
|
||||
|
||||
.navbar.navbar-theme .navbar-nav > .open > a,
|
||||
.navbar.navbar-theme .navbar-nav > .open > a:hover,
|
||||
.navbar.navbar-theme .navbar-nav > .open > a:focus {
|
||||
color: #fff;
|
||||
background-color: #cc1922;
|
||||
color: var(--color-text);
|
||||
background-color: var(--color-dark);
|
||||
}
|
||||
|
||||
.navbar.navbar-theme .navbar-toggle {
|
||||
border-color: #fff;
|
||||
color: #e31c26;
|
||||
border-color: var(--color-text);
|
||||
color: var(--color-light);
|
||||
}
|
||||
|
||||
.navbar.navbar-theme .navbar-toggle:hover,
|
||||
.navbar.navbar-theme .navbar-toggle:focus {
|
||||
border-color: #fff;
|
||||
color: #cc1922;
|
||||
border-color: var(--color-text);
|
||||
color: var(--color-dark);
|
||||
}
|
||||
|
||||
.navbar.navbar-theme .navbar-toggle .icon-bar {
|
||||
background-color: #fff;
|
||||
color: #cc1922;
|
||||
background-color: var(--color-text);
|
||||
color: var(--color-dark);
|
||||
}
|
||||
|
||||
.navbar.navbar-theme .navbar-link {
|
||||
color: #fff;
|
||||
background-color: #cc1922;
|
||||
color: var(--color-text);
|
||||
background-color: var(--color-dark);
|
||||
}
|
||||
|
||||
.navbar.navbar-theme .navbar-link:hover {
|
||||
color: #fff;
|
||||
background-color: #cc1922;
|
||||
color: var(--color-text);
|
||||
background-color: var(--color-dark);
|
||||
}
|
||||
|
||||
.navbar.navbar-theme .dropdown-menu {
|
||||
background-color: #e31c26;
|
||||
border-color: #cc1922;
|
||||
background-color: var(--color-light);
|
||||
border-color: var(--color-dark);
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
|
@ -225,22 +287,22 @@ html, body {
|
|||
}
|
||||
|
||||
.navbar.navbar-theme .dropdown-menu a {
|
||||
color: #fff;
|
||||
color: var(--color-text);
|
||||
padding: 7px !important;
|
||||
}
|
||||
|
||||
.navbar.navbar-theme .dropdown-menu a:focus,
|
||||
.navbar.navbar-theme .dropdown-menu a:hover {
|
||||
color: #fff;
|
||||
background-color: #cc1922;
|
||||
color: var(--color-text);
|
||||
background-color: var(--color-dark);
|
||||
}
|
||||
|
||||
.dropdown-menu .divider {
|
||||
background-color: #cc1922 !important;
|
||||
background-color: var(--color-dark) !important;
|
||||
}
|
||||
|
||||
.dropdown-menu .active a {
|
||||
background-color: #cc1922 !important;
|
||||
background-color: var(--color-dark) !important;
|
||||
}
|
||||
|
||||
.news .panel-body .container-fluid {
|
||||
|
|
@ -308,7 +370,7 @@ html, body {
|
|||
}
|
||||
|
||||
.select-selected {
|
||||
background-color: #2ecc71;
|
||||
background-color: var(--color-light);
|
||||
}
|
||||
|
||||
.select-selected:after {
|
||||
|
|
@ -318,27 +380,27 @@ html, body {
|
|||
right: 10px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: 6px solid transparent;
|
||||
border-color: #fff transparent transparent transparent;
|
||||
border: 6px solid;
|
||||
border-color: var(--color-text) transparent transparent transparent;
|
||||
}
|
||||
|
||||
.select-selected.select-arrow-active:after {
|
||||
border-color: transparent transparent #fff transparent;
|
||||
border-color: transparent transparent var(--color-text) transparent;
|
||||
top: 7px;
|
||||
}
|
||||
|
||||
.select-items div,.select-selected {
|
||||
color: #fff;
|
||||
color: var(--color-text);
|
||||
padding: 8px 16px;
|
||||
border: 1px solid transparent;
|
||||
border-color: transparent transparent #cc1922 transparent;
|
||||
border: 1px solid;
|
||||
border-color: transparent transparent var(--color-dark) transparent;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.select-items {
|
||||
position: absolute;
|
||||
background-color: #e31c26;
|
||||
background-color: var(--color-light);
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
|
@ -350,105 +412,24 @@ html, body {
|
|||
}
|
||||
|
||||
.select-items div:hover, .same-as-selected {
|
||||
background-color: #cc1922;
|
||||
}
|
||||
|
||||
.input-group-addon {
|
||||
background-color: #e31c26 !important;
|
||||
border-color: #333 !important;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.form-group > label {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.table-bordered {
|
||||
border-color: #262626 !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.table-bordered > thead > tr > th {
|
||||
border-color: #e31c26;
|
||||
background-color: #e31c26;
|
||||
}
|
||||
|
||||
.table-striped > tbody > tr > td {
|
||||
background-color: #262626;
|
||||
border-color: #666 !important;
|
||||
}
|
||||
|
||||
.table-bordered > tbody >tr > td:first-child {
|
||||
border-left-color: #262626 !important;
|
||||
}
|
||||
|
||||
.table-bordered > tbody >tr:last-child > td {
|
||||
border-bottom-color: #262626 !important;
|
||||
}
|
||||
|
||||
|
||||
.table-bordered > tbody >tr > td:last-child {
|
||||
border-right-color: #262626 !important;
|
||||
}
|
||||
|
||||
.table-striped>tbody>tr:nth-of-type(odd) > td {
|
||||
background-color: #404040;
|
||||
}
|
||||
|
||||
.pagination > li:first-child > a,
|
||||
.pagination > li:last-child > a {
|
||||
background-color: #e31c26 !important;
|
||||
border-color: #262626 !important;
|
||||
}
|
||||
|
||||
.pagination > .disabled > a {
|
||||
color: #ccc !important;
|
||||
}
|
||||
|
||||
.pagination li a {
|
||||
background-color: #404040;
|
||||
color: #fff;
|
||||
border-color: #202326 !important;
|
||||
}
|
||||
|
||||
.pagination li:hover a {
|
||||
background-color: #666;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.pagination li.active a,
|
||||
.pagination li.active a:hover{
|
||||
background-color: #666;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.form-control,
|
||||
.form-control[disabled] {
|
||||
background-color: #404040;
|
||||
color: #fff;
|
||||
border-color: #262626 !important;
|
||||
background-color: var(--color-dark);
|
||||
}
|
||||
|
||||
.btn-custom {
|
||||
outline: 0;
|
||||
background: #e31c26;
|
||||
background: var(--color-light);
|
||||
width: 180px;
|
||||
border: 0;
|
||||
padding: 5px;
|
||||
color: #FFFFFF;
|
||||
color: var(--color-text);
|
||||
font-size: 17px;
|
||||
cursor: pointer;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.panel {
|
||||
background-color: #282727;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-custom:hover,.btn-custom:active,.btn-custom:focus {
|
||||
background: #cc1922;
|
||||
color: #fff;
|
||||
background: var(--color-dark);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.controls {
|
||||
|
|
@ -465,45 +446,6 @@ html, body {
|
|||
filter: grayscale(100%) !important;
|
||||
}
|
||||
|
||||
.status, .attraction {
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.control-status {
|
||||
padding: 5px 10px 5px 10px;
|
||||
border-radius: 5px;
|
||||
background-color: transparent;
|
||||
color: #333;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.control-status.status-unknown {
|
||||
background-color: #7f8c8d;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.control-status.status-closed {
|
||||
background-color: #c0392b;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.control-status.status-open {
|
||||
background-color: #2ecc71;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.control-status.status-inactive {
|
||||
background-color: #c0392b;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.actionfoto {
|
||||
width: calc(100% - 4px) !important;
|
||||
height: auto;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: #eef1f6;
|
||||
color: #596981;
|
||||
|
|
@ -524,24 +466,157 @@ code i {
|
|||
}
|
||||
|
||||
.pagination li.active a {
|
||||
background-color: #e31c26;
|
||||
background-color: var(--color-light);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.status, .attraction {
|
||||
font-weight: 900;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.status {
|
||||
padding: 5px;
|
||||
border-radius: 3px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.actionfoto {
|
||||
width: calc(100% - 4px) !important;
|
||||
height: auto;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
/* Status Card */
|
||||
.status-card-row {
|
||||
margin-right: -15px;
|
||||
margin-left: -15px;
|
||||
}
|
||||
|
||||
.status-card {
|
||||
margin: 10px 0 0;
|
||||
float: left;
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
border: 0;
|
||||
border-radius: 15px;
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
width: 100%;
|
||||
box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.3);
|
||||
background: #fff center center;
|
||||
background-size: cover;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
font-size: .775rem;
|
||||
text-decoration: none !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.status-card:after {
|
||||
content: '\A';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height:100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.status-card > .card-body {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 6.25rem 0;
|
||||
-webkit-box-flex: 1;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.status-card .badge {
|
||||
margin-top: 15px !important;
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-table;
|
||||
margin: 0 auto;
|
||||
border-radius: 5px;
|
||||
padding: 10px 15px;
|
||||
text-transform: uppercase;
|
||||
font-size: 15px;
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
.status-card > .card-body > .card-title {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Region */
|
||||
.region {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
padding-top: 65px;
|
||||
}
|
||||
|
||||
.region:not(:first-child) {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.region > .region-title {
|
||||
width: auto;
|
||||
height: 0;
|
||||
border-bottom: 25px solid var(--color-light);
|
||||
border-top: 25px solid var(--color-light);
|
||||
border-right: 15px solid transparent;
|
||||
float: left;
|
||||
padding-right: 20px;
|
||||
font-size: 20px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
border-radius: 10px 0 0 10px;
|
||||
}
|
||||
|
||||
.region-title > span {
|
||||
color: #fff;
|
||||
position: relative;
|
||||
top: -15px;
|
||||
text-align: center;
|
||||
left: 10px;
|
||||
}
|
||||
/* Show Card */
|
||||
@media (min-width: 768px) {
|
||||
.card-container {
|
||||
display: flex;
|
||||
justify-items: stretch;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
word-wrap: break-word;
|
||||
background-color: #fff;
|
||||
background-clip: border-box;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.card .card-cover {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.card .card-body {
|
||||
flex: 1 1 auto;
|
||||
padding: 0 1.25rem 0.25rem;
|
||||
}
|
||||
|
||||
.card .card-footer {
|
||||
display: block;
|
||||
padding: 0 1rem 1rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.card .card-title {
|
||||
font-weight: bolder;
|
||||
margin-bottom: .75rem;
|
||||
}
|
||||
|
|
|
|||
462
public/assets/css/style_default.css
vendored
462
public/assets/css/style_default.css
vendored
|
|
@ -1,462 +0,0 @@
|
|||
html, body {
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
background: url("../img/background.jpg") no-repeat center center fixed;
|
||||
-webkit-background-size: cover;
|
||||
-moz-background-size: cover;
|
||||
-o-background-size: cover;
|
||||
background-size: cover;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
.login-page {
|
||||
width: 360px;
|
||||
padding: 8% 0 0;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.login-page form {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
background: #FFFFFF;
|
||||
max-width: 360px;
|
||||
margin: 0 auto 100px;
|
||||
padding: 15px 45px 45px 45px;
|
||||
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.login-page form h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.login-page form input {
|
||||
outline: 0;
|
||||
background: #f2f2f2;
|
||||
width: 100%;
|
||||
border: 0;
|
||||
margin: 0 0 15px;
|
||||
padding: 15px;
|
||||
box-sizing: border-box;
|
||||
font-size: 14px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.login-page form button {
|
||||
outline: 0;
|
||||
background: #2ecc71;
|
||||
width: 100%;
|
||||
border: 0;
|
||||
padding: 15px;
|
||||
color: #FFFFFF;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.login-page form button:hover,.form button:active,.form button:focus {
|
||||
background: #27ae60;
|
||||
}
|
||||
|
||||
.login-page form .message {
|
||||
margin: 15px 0 0;
|
||||
color: #7f8c8d;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.login-page form .message a {
|
||||
color: #27ae60;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.login-page form .message a:hover {
|
||||
color: #2ecc71;
|
||||
}
|
||||
|
||||
.login-page form .register-form {
|
||||
display: none;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 0;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
padding: 15px;
|
||||
width: 100% !important;
|
||||
margin-top: 75px !important;
|
||||
margin-bottom: 40px !important;
|
||||
}
|
||||
|
||||
.footer {
|
||||
margin-bottom: 0;
|
||||
background-color: #fff;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
width: 100%;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.footer span {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.footer span a img {
|
||||
height: 20px !important;
|
||||
}
|
||||
|
||||
|
||||
.alert {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.alert-success {
|
||||
background-color: #2ecc71 !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.alert-danger {
|
||||
background-color: #e74c3c !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.panel-theme {
|
||||
border-color: #27ae60;
|
||||
}
|
||||
|
||||
.panel-theme>.panel-heading {
|
||||
color: #fff !important;
|
||||
background-color: #2ecc71 !important;
|
||||
border-color: #27ae60 !important;
|
||||
}
|
||||
|
||||
.panel-theme>.panel-heading+.panel-collapse>.panel-body {
|
||||
border-top-color: #27ae60 !important;
|
||||
}
|
||||
|
||||
.panel-theme>.panel-footer+.panel-collapse>.panel-body {
|
||||
border-bottom-color: #27ae60 !important;
|
||||
}
|
||||
|
||||
.navbar.navbar-theme {
|
||||
background-color: #2ecc71;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.navbar.navbar-theme .navbar-brand {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.navbar.navbar-theme .navbar-brand:hover,
|
||||
.navbar.navbar-theme .navbar-brand:focus {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.navbar.navbar-theme .navbar-nav > li > a {
|
||||
color: #fff;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.navbar.navbar-theme .navbar-nav > li > a:hover,
|
||||
.navbar.navbar-theme .navbar-nav > li > a:focus {
|
||||
color: #fff;
|
||||
background-color: #27ae60;
|
||||
}
|
||||
|
||||
.navbar.navbar-theme .navbar-nav > .active > a,
|
||||
.navbar.navbar-theme .navbar-nav > .active > a:hover,
|
||||
.navbar.navbar-theme .navbar-nav > .active > a:focus {
|
||||
color: #fff;
|
||||
background-color: #27ae60;
|
||||
}
|
||||
|
||||
.navbar.navbar-theme .navbar-nav > .open > a,
|
||||
.navbar.navbar-theme .navbar-nav > .open > a:hover,
|
||||
.navbar.navbar-theme .navbar-nav > .open > a:focus {
|
||||
color: #fff;
|
||||
background-color: #27ae60;
|
||||
}
|
||||
|
||||
.navbar.navbar-theme .navbar-toggle {
|
||||
border-color: #fff;
|
||||
color: #2ecc71;
|
||||
}
|
||||
|
||||
.navbar.navbar-theme .navbar-toggle:hover,
|
||||
.navbar.navbar-theme .navbar-toggle:focus {
|
||||
border-color: #fff;
|
||||
color: #27ae60;
|
||||
}
|
||||
|
||||
.navbar.navbar-theme .navbar-toggle .icon-bar {
|
||||
background-color: #fff;
|
||||
color: #27ae60;
|
||||
}
|
||||
|
||||
.navbar.navbar-theme .navbar-link {
|
||||
color: #fff;
|
||||
background-color: #27ae60;
|
||||
}
|
||||
|
||||
.navbar.navbar-theme .navbar-link:hover {
|
||||
color: #fff;
|
||||
background-color: #27ae60;
|
||||
}
|
||||
|
||||
.navbar.navbar-theme .dropdown-menu {
|
||||
background-color: #2ecc71;
|
||||
border-color: #27ae60;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.navbar.navbar-theme .dropdown-menu li {
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.navbar.navbar-theme .dropdown-menu a {
|
||||
color: #fff;
|
||||
padding: 7px !important;
|
||||
}
|
||||
|
||||
.navbar.navbar-theme .dropdown-menu a:focus,
|
||||
.navbar.navbar-theme .dropdown-menu a:hover {
|
||||
color: #fff;
|
||||
background-color: #27ae60;
|
||||
}
|
||||
|
||||
.dropdown-menu .divider {
|
||||
background-color: #27ae60 !important;
|
||||
}
|
||||
|
||||
.dropdown-menu .active a {
|
||||
background-color: #27ae60 !important;
|
||||
}
|
||||
|
||||
.news .panel-body .container-fluid {
|
||||
word-wrap: break-word !important;
|
||||
overflow: hidden !important;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100% !important;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
margin-top: -10px;
|
||||
}
|
||||
|
||||
.checkbox input[type="checkbox"] {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.checkbox label {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding-left: 22px;
|
||||
}
|
||||
|
||||
.checkbox label::before,
|
||||
.checkbox label::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.checkbox label::before{
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
border: 1px solid;
|
||||
left: 0px;
|
||||
top: 3px;
|
||||
}
|
||||
|
||||
.checkbox label::after {
|
||||
height: 5px;
|
||||
width: 9px;
|
||||
border-left: 2px solid;
|
||||
border-bottom: 2px solid;
|
||||
transform: rotate(-45deg);
|
||||
left: 4px;
|
||||
top: 7px;
|
||||
}
|
||||
|
||||
.checkbox input[type="checkbox"] + label::after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
.checkbox input[type="checkbox"]:checked + label::after {
|
||||
content: "";
|
||||
}
|
||||
|
||||
.custom-select {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.custom-select select {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.select-selected {
|
||||
background-color: #2ecc71;
|
||||
}
|
||||
|
||||
.select-selected:after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
top: 14px;
|
||||
right: 10px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: 6px solid transparent;
|
||||
border-color: #fff transparent transparent transparent;
|
||||
}
|
||||
|
||||
.select-selected.select-arrow-active:after {
|
||||
border-color: transparent transparent #fff transparent;
|
||||
top: 7px;
|
||||
}
|
||||
|
||||
.select-items div,.select-selected {
|
||||
color: #fff;
|
||||
padding: 8px 16px;
|
||||
border: 1px solid transparent;
|
||||
border-color: transparent transparent #27ae60 transparent;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.select-items {
|
||||
position: absolute;
|
||||
background-color: #2ecc71;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.select-hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.select-items div:hover, .same-as-selected {
|
||||
background-color: #27ae60;
|
||||
}
|
||||
|
||||
.btn-custom {
|
||||
outline: 0;
|
||||
background: #2ecc71;
|
||||
width: 180px;
|
||||
border: 0;
|
||||
padding: 5px;
|
||||
color: #FFFFFF;
|
||||
font-size: 17px;
|
||||
cursor: pointer;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.btn-custom:hover,.btn-custom:active,.btn-custom:focus {
|
||||
background: #27ae60;
|
||||
}
|
||||
|
||||
.controls {
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.controls img {
|
||||
width: 70% !important;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.controls.disabled {
|
||||
filter: grayscale(100%) !important;
|
||||
}
|
||||
|
||||
.status, .attraction {
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.control-status {
|
||||
padding: 5px 10px 5px 10px;
|
||||
border-radius: 5px;
|
||||
background-color: transparent;
|
||||
color: #333;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.control-status.status-unknown {
|
||||
background-color: #7f8c8d;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.control-status.status-closed {
|
||||
background-color: #c0392b;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.control-status.status-open {
|
||||
background-color: #2ecc71;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.control-status.status-inactive {
|
||||
background-color: #c0392b;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.actionfoto {
|
||||
width: calc(100% - 4px) !important;
|
||||
height: auto;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: #eef1f6;
|
||||
color: #596981;
|
||||
border-radius: 3px;
|
||||
padding: 3px;
|
||||
line-height: 1.4;
|
||||
font-size: 85%;
|
||||
border: 1px solid rgba(0, 0, 0, .1);
|
||||
display: block;
|
||||
width: 335px;
|
||||
text-align: right;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
code i {
|
||||
float: left;
|
||||
margin: 3px;
|
||||
}
|
||||
|
||||
.pagination li.active a {
|
||||
background-color: #2ecc71;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.status, .attraction {
|
||||
font-weight: 900;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.status {
|
||||
padding: 5px;
|
||||
border-radius: 3px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.actionfoto {
|
||||
width: calc(100% - 4px) !important;
|
||||
height: auto;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 5px;
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 305 KiB |
BIN
public/assets/img/banner.png
Normal file
BIN
public/assets/img/banner.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 911 KiB |
BIN
public/assets/img/default_logo.png
Normal file
BIN
public/assets/img/default_logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
BIN
public/assets/img/logo-light.png
Normal file
BIN
public/assets/img/logo-light.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 212 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB |
BIN
public/assets/img/logo.png
Normal file
BIN
public/assets/img/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 212 KiB |
329
public/assets/js/operator.js
vendored
Normal file
329
public/assets/js/operator.js
vendored
Normal file
|
|
@ -0,0 +1,329 @@
|
|||
function click(selector, callback) {
|
||||
document.addEventListener('click', e => {
|
||||
if(!e.target)
|
||||
return
|
||||
|
||||
if(!e.target.matches(selector))
|
||||
return
|
||||
|
||||
callback(e.target)
|
||||
})
|
||||
}
|
||||
|
||||
click("#template_toggle", template_switch => {
|
||||
let is_template = document.getElementById('is_template')
|
||||
is_template.parentElement.parentElement.parentElement.style.display = template_switch.checked === true ? 'none' : 'block'
|
||||
|
||||
let permission = document.getElementById('permission')
|
||||
permission.style.display = template_switch.checked === true ? 'none' : is_template.checked ? 'none' : 'table'
|
||||
|
||||
document.getElementById('start_command').style.display = template_switch.checked === true ? 'none' : is_template.checked ? 'none' : 'table'
|
||||
document.getElementById('stop_command').style.display = template_switch.checked === true ? 'none' : is_template.checked ? 'none' : 'table'
|
||||
document.getElementById('template').style.display = template_switch.checked === true ? 'table' : 'none'
|
||||
|
||||
let items = permission.parentElement.querySelector("div[id=items]")
|
||||
items = items.querySelectorAll('input')
|
||||
items.forEach(value => {
|
||||
let name = value.getAttribute('name')
|
||||
if (name.endsWith('[0]'))
|
||||
return
|
||||
|
||||
if (name.endsWith('[3]')) {
|
||||
value.parentElement.style.display = template_switch.checked === true ? 'table' : is_template.checked ? 'none' : 'table'
|
||||
} else {
|
||||
value.parentElement.style.display = template_switch.checked === true ? 'none' : 'table'
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
click('#is_template', template_switch => {
|
||||
let permission = document.getElementById('permission')
|
||||
permission.style.display = template_switch.checked === true ? 'none' : 'table'
|
||||
|
||||
document.getElementById('start_command').style.display = template_switch.checked === true ? 'none' : 'table'
|
||||
document.getElementById('stop_command').style.display = template_switch.checked === true ? 'none' : 'table'
|
||||
|
||||
let items = permission.parentElement.querySelector("div[id=items]")
|
||||
items = items.querySelectorAll('input')
|
||||
items.forEach(value => {
|
||||
let name = value.getAttribute('name')
|
||||
if(!name.endsWith('[3]'))
|
||||
return
|
||||
|
||||
value.parentElement.style.display = template_switch.checked === true ? 'none' : 'table'
|
||||
})
|
||||
})
|
||||
|
||||
click('h3 > .btn', btn => {
|
||||
let group = btn.parentElement.parentElement;
|
||||
if(!group)
|
||||
return
|
||||
|
||||
if(btn.innerHTML === 'Add Item') {
|
||||
addItem(group)
|
||||
} else if(btn.innerHTML === 'Add State') {
|
||||
addState(group)
|
||||
}
|
||||
})
|
||||
|
||||
click('.toggle > .fas', toggle => {
|
||||
let group = toggle.parentElement.parentElement.parentElement;
|
||||
let states = group.querySelector("div[id^=states_]")
|
||||
if(!states)
|
||||
return
|
||||
|
||||
let hidden = states.style.display === 'none';
|
||||
states.style.display = hidden ? 'block' : 'none';
|
||||
|
||||
if(hidden) {
|
||||
toggle.classList.remove('fa-chevron-circle-down')
|
||||
toggle.classList.add('fa-chevron-circle-up')
|
||||
} else {
|
||||
toggle.classList.add('fa-chevron-circle-down')
|
||||
toggle.classList.remove('fa-chevron-circle-up')
|
||||
}
|
||||
})
|
||||
|
||||
click('#sync', () => rideExport())
|
||||
|
||||
function rideExport() {
|
||||
let data = serialize(document.getElementById('operator-form'))
|
||||
if(!data.hasOwnProperty('id') || !data.hasOwnProperty('template_toggle') || !data['items'] || !data['states'])
|
||||
return
|
||||
|
||||
if(data['template_toggle']) {
|
||||
delete data['permission']
|
||||
if(!data['template'])
|
||||
return
|
||||
} else {
|
||||
delete data['template']
|
||||
if(data['is_template']) {
|
||||
delete data['permission']
|
||||
} else if(!data.hasOwnProperty('permission'))
|
||||
return
|
||||
}
|
||||
|
||||
let use_template = data['template_toggle']
|
||||
let is_template = data['is_template']
|
||||
delete data['template_toggle']
|
||||
delete data['is_template']
|
||||
|
||||
let items = data['items']
|
||||
data['items'] = {}
|
||||
items.forEach(value => {
|
||||
let obj = {}
|
||||
if(!use_template) {
|
||||
obj['name'] = value[1]
|
||||
obj['active_state'] = value[2]
|
||||
}
|
||||
|
||||
obj['states'] = {}
|
||||
data['items'][value[0]] = obj
|
||||
})
|
||||
|
||||
let states = data['states']
|
||||
delete data['states']
|
||||
states.forEach((value, index) => {
|
||||
let item = items[index]
|
||||
value.forEach(value => {
|
||||
let obj = {}
|
||||
if(!use_template) {
|
||||
obj['name'] = value[1]
|
||||
obj['cover'] = value[2]
|
||||
if(!is_template)
|
||||
obj['command'] = value[3]
|
||||
|
||||
obj['text_color'] = value[4]
|
||||
obj['background_color'] = value[5]
|
||||
obj['glow'] = value[6]
|
||||
} else {
|
||||
obj['command'] = value[3]
|
||||
}
|
||||
|
||||
data['items'][item[0]]['states'][value[0]] = obj
|
||||
})
|
||||
})
|
||||
|
||||
Object.entries(data['items']).forEach(entry => {
|
||||
if(cleanItems(entry[1]))
|
||||
delete data['items'][entry[0]]
|
||||
})
|
||||
|
||||
document.getElementById('file_name').innerHTML = data['id']+'.json'
|
||||
delete data['id']
|
||||
|
||||
document.getElementById('output').innerHTML = JSON.stringify(data, null, 2)
|
||||
.replace('\n', '<br>')
|
||||
}
|
||||
|
||||
function addItem(group) {
|
||||
let items = group.querySelector("div[id=items]")
|
||||
if(!items)
|
||||
return
|
||||
|
||||
let items_size = group.querySelectorAll('div[id=items] > .group')
|
||||
if(!items_size)
|
||||
return
|
||||
|
||||
let style = document.getElementById('template_toggle').checked ? ' style="display: none"' : ''
|
||||
|
||||
items_size = items_size.length;
|
||||
items.insertAdjacentHTML('beforeend',
|
||||
' <div class="group">\n' +
|
||||
' <div class="input-group mb-3">\n' +
|
||||
' <span class="input-group-addon"><i class="fas fa-tag"></i></span>\n' +
|
||||
' <input type="text" class="form-control" name="items['+items_size+'][0]" placeholder="ID">\n' +
|
||||
' </div>\n' +
|
||||
' <div class="input-group mb-3"'+style+'>\n' +
|
||||
' <span class="input-group-addon"><i class="fas fa-signature"></i></span>\n' +
|
||||
' <input type="text" class="form-control" name="items['+items_size+'][1]" placeholder="Name">\n' +
|
||||
' </div>\n' +
|
||||
' <div class="input-group mb-3"'+style+'>\n' +
|
||||
' <span class="input-group-addon"><i class="fas fa-toggle-on"></i></span>\n' +
|
||||
' <input type="text" class="form-control" name="items['+items_size+'][2]" placeholder="Active State">\n' +
|
||||
' </div>\n' +
|
||||
'\n' +
|
||||
' <h3>States <span class="toggle"><i class="fas fa-chevron-circle-up"></i></span> <a class="btn btn-primary">Add State</a></h3>\n' +
|
||||
' <div id="states_'+items_size+'">\n' +
|
||||
' </div>' +
|
||||
' </div>')
|
||||
}
|
||||
|
||||
function addState(group) {
|
||||
let states = group.querySelector("div[id^=states_]")
|
||||
if(!states)
|
||||
return
|
||||
|
||||
let index = parseInt(states.id.replace('states_', ''))
|
||||
if(!index && index !== 0)
|
||||
return
|
||||
|
||||
let states_size = states.getElementsByClassName('group')
|
||||
if(!states_size)
|
||||
return
|
||||
|
||||
let style = document.getElementById('template_toggle').checked ? ' style="display: none"' : ''
|
||||
|
||||
states_size = states_size.length;
|
||||
states.insertAdjacentHTML('beforeend',
|
||||
' <div class="group">\n' +
|
||||
' <div class="input-group mb-3">\n' +
|
||||
' <span class="input-group-addon"><i class="fas fa-tag"></i></span>\n' +
|
||||
' <input type="text" class="form-control" name="states['+index+']['+states_size+'][0]" placeholder="ID">\n' +
|
||||
' </div>\n' +
|
||||
' <div class="input-group mb-3"'+style+'>\n' +
|
||||
' <span class="input-group-addon"><i class="fas fa-signature"></i></span>\n' +
|
||||
' <input type="text" class="form-control" name="states['+index+']['+states_size+'][1]" placeholder="Name">\n' +
|
||||
' </div>\n' +
|
||||
' <div class="input-group mb-3"'+style+'>\n' +
|
||||
' <span class="input-group-addon"><i class="fas fa-image"></i></span>\n' +
|
||||
' <input type="text" class="form-control" name="states['+index+']['+states_size+'][2]" placeholder="Cover">\n' +
|
||||
' </div>\n' +
|
||||
' <div class="input-group">\n' +
|
||||
' <span class="input-group-addon"><i class="fas fa-terminal"></i></span>\n' +
|
||||
' <input type="text" class="form-control" name="states['+index+']['+states_size+'][3]" placeholder="Command">\n' +
|
||||
' </div>\n' +
|
||||
' <div class="input-group">\n' +
|
||||
' <span class="input-group-addon"><i class="fas fa-tint"></i></span>\n' +
|
||||
' <input type="text" class="form-control" name="states['+index+']['+states_size+'][4]" placeholder="Text Color" value="#fff">\n' +
|
||||
' </div>\n' +
|
||||
' <div class="input-group">\n' +
|
||||
' <span class="input-group-addon"><i class="fas fa-tint"></i></span>\n' +
|
||||
' <input type="text" class="form-control" name="states['+index+']['+states_size+'][5]" placeholder="Background Color" value="#666">\n' +
|
||||
' </div>\n' +
|
||||
' <div class="settings">\n' +
|
||||
' <div class="settings-toggle">\n' +
|
||||
' <label class="switcher">\n' +
|
||||
' <input name="states['+index+']['+states_size+'][6]" type="checkbox">\n' +
|
||||
' <span class="switcher-slider"></span>\n' +
|
||||
' </label>\n' +
|
||||
' </div>\n' +
|
||||
' <div class="settings-text" style="float: unset">\n' +
|
||||
' <p>Glows</p>\n' +
|
||||
' </div>\n' +
|
||||
' </div>\n' +
|
||||
' </div>\n')
|
||||
}
|
||||
|
||||
function cleanItems(data) {
|
||||
let b = false;
|
||||
Object.entries(data).forEach(entry => {
|
||||
let key = entry[0]
|
||||
let value = entry[1]
|
||||
if(!key || !value) {
|
||||
delete data[key]
|
||||
b = true
|
||||
return
|
||||
}
|
||||
|
||||
if(typeof value === 'object') {
|
||||
if (cleanItems(value)) {
|
||||
if (JSON.stringify(value) === '{}') {
|
||||
delete data[key]
|
||||
b = true
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
return b
|
||||
}
|
||||
|
||||
function serialize(element) {
|
||||
if(!element)
|
||||
return {}
|
||||
|
||||
let inputs = element.querySelectorAll('input')
|
||||
if(!inputs)
|
||||
return {}
|
||||
|
||||
let out = {}
|
||||
inputs.forEach(value => {
|
||||
let name = value.getAttribute('name')
|
||||
if(!name)
|
||||
return
|
||||
|
||||
if(!name.endsWith(']')) {
|
||||
out[name] = getValue(value)
|
||||
return
|
||||
}
|
||||
|
||||
serializeNested(out, name, getValue(value))
|
||||
})
|
||||
|
||||
return out
|
||||
}
|
||||
|
||||
function serializeNested(out, name, val) {
|
||||
let matches = [...name.matchAll(/\[([0-9]+)\]/g)]
|
||||
name = name.replaceAll(/(\[([0-9]+)\])+/g, '')
|
||||
|
||||
let array;
|
||||
if(out.hasOwnProperty(name)) {
|
||||
array = out[name]
|
||||
} else {
|
||||
array = []
|
||||
out[name] = array
|
||||
}
|
||||
|
||||
matches.forEach((value, index) => {
|
||||
let id = value[1]
|
||||
if(index === (matches.length - 1)) {
|
||||
array[id] = val
|
||||
} else {
|
||||
if (array.hasOwnProperty(id)) {
|
||||
array = array[id]
|
||||
} else {
|
||||
array[id] = []
|
||||
array = array[id]
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function getValue(element) {
|
||||
if(element.matches('[type="checkbox"]'))
|
||||
return element.checked
|
||||
|
||||
return element.value
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
Reference in a new issue