Mirrored_Repos/crafty-4
1
0
Fork 0
mirror of https://gitlab.com/crafty-controller/crafty-4.git synced 2024-08-30 18:23:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixing a bit more

Browse Source
This commit is contained in:
Silversthorn 2024-08-13 23:08:00 +02:00
parent 084b04dbd7
commit 4e6fdbe232
10 changed files with 288 additions and 335 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
app/frontend/static/assets/css/crafty.css
View File

@ -11,6 +11,27 @@ body.sidebar-icon-only .navbar-toggler .mdi-chevron-double-left {
/**************************************************************/ /**************************************************************/
/**************************************************************/
/* CSS as bootstrap extensions */
/**************************************************************/
.overflow-x-auto {
overflow-x: auto;
}
.overflow-y-auto {
overflow-y: auto;
}
.overflow-scroll {
overflow: scroll;
}
.text-none {
text-transform: none;
}
/**************************************************************/
/**************************************************************/ /**************************************************************/
/* CSS for MainMenu in partials/_sidebar.html */ /* CSS for MainMenu in partials/_sidebar.html */
/**************************************************************/ /**************************************************************/
@ -226,6 +247,12 @@ body {
color: var(--red) !important; color: var(--red) !important;
} }
/* Useless ?
.input_motd {
max-width: 10px;
max-height: 10px;
}*/
/**************************************************************/ /**************************************************************/
/**************************************************************/ /**************************************************************/

191
app/frontend/static/assets/css/partial/crafty-wizard.css Normal file
View File

@ -0,0 +1,191 @@
#creation_wizard {
-webkit-filter: grayscale(1);
}
.api-alert {
position: absolute;
top: -5px;
left: 0;
font-size: 50px !important;
color: #fff;
background: rgb(0, 170, 170);
opacity: .4;
width: 100%;
height: 100%;
z-index: 100;
}
.api-alert p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
text-align: center;
font-size: 20px;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
button>i.refresh-class {
margin: 0px;
}
.refresh-class:hover {
cursor: grab;
}
.scroll {
max-height: 12em;
overflow-y: auto;
}
.menu-btn {
font-size: 0.9em;
padding: 2px 10px;
}
.menu {
padding-top: 10px;
z-index: 200;
margin-top: 4px;
position: absolute;
background-color: var(--card-banner-bg);
}
.menu-option {
padding: 6px 20px 6px;
color: white;
}
#overlay {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 100;
}
/* Remove default bullets */
.tree-view,
.tree-nested {
list-style-type: none;
margin: 0;
padding: 0;
margin-left: 10px;
}
/* Style the items */
.tree-item,
.files-tree-title {
cursor: pointer;
user-select: none;
/* Prevent text selection */
}
/* Create the caret/arrow with a unicode, and style it */
.tree-caret .fa-folder {
display: inline-block;
}
.tree-caret .fa-folder-open {
display: none;
}
/* Rotate the caret/arrow icon when clicked on (using JavaScript) */
.tree-caret-down .fa-folder {
display: none;
}
.tree-caret-down .fa-folder-open {
display: inline-block;
}
/* Hide the nested list */
.tree-nested {
display: none;
}
#op_logo {
position: relative;
top: 50%;
transform: translateY(-50%);
}
.scroll {
max-height: 12em;
overflow-y: auto;
}
.menu-btn {
font-size: 0.9em;
padding: 2px 10px;
}
.menu {
padding-top: 10px;
z-index: 200;
margin-top: 4px;
position: absolute;
background-color: #2a2c44;
}
.menu-option {
padding: 6px 20px 6px;
color: white;
}
#overlay {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 100;
}
/* Remove default bullets */
.tree-view,
.tree-nested {
list-style-type: none;
margin: 0;
padding: 0;
margin-left: 10px;
}
/* Style the items */
.tree-item,
.files-tree-title {
cursor: pointer;
user-select: none;
/* Prevent text selection */
}
/* Create the caret/arrow with a unicode, and style it */
.tree-caret .fa-folder {
display: inline-block;
}
.tree-caret .fa-folder-open {
display: none;
}
/* Rotate the caret/arrow icon when clicked on (using JavaScript) */
.tree-caret-down .fa-folder {
display: none;
}
.tree-caret-down .fa-folder-open {
display: inline-block;
}
/* Hide the nested list */
.tree-nested {
display: none;
}
#op_logo {
position: relative;
top: 50%;
transform: translateY(-50%);
}

1
app/frontend/templates/panel/credits.html
View File

@ -36,7 +36,6 @@
<div class="row"> <div class="row">
<div class="col-md-4" style="max-width: fit-content;"> <div class="col-md-4" style="max-width: fit-content;">
<div class="user-avatar mb-auto"> <div class="user-avatar mb-auto">
{% if person['pic'] %} {% if person['pic'] %}
<img src="{{ person['pic'] }}" alt="profile image" class="profile-img img-lg rounded-circle"> <img src="{{ person['pic'] }}" alt="profile image" class="profile-img img-lg rounded-circle">

2
app/frontend/templates/panel/custom_login.html
View File

@ -102,7 +102,7 @@
<input type="range" class="form-control-range" id="modal_opacity" name="modal_opacity" onchange="previewOpacity()" min="0" max="100" value="{{ data['login_opacity'] }}"> <input type="range" class="form-control-range" id="modal_opacity" name="modal_opacity" onchange="previewOpacity()" min="0" max="100" value="{{ data['login_opacity'] }}">
</div> </div>
</div> </div>
<div id="login_preview" style="position: relative;"> <div id="login_preview" class="position-relative">
<img id="bg-preview" src="../../static/assets/images/auth/{{ data['background'] }}" class="img-fluid" alt="Responsive image"> <img id="bg-preview" src="../../static/assets/images/auth/{{ data['background'] }}" class="img-fluid" alt="Responsive image">
<div id="login-form-preview"> <div id="login-form-preview">
<div id="login-form-background" class="auto-form-wrapper login-modal"> <div id="login-form-background" class="auto-form-wrapper login-modal">

4
app/frontend/templates/panel/loading.html
View File

@ -7,9 +7,9 @@
{% block content %} {% block content %}
<div class="content-wrapper"> <div class="content-wrapper">
<div class="card-header justify-content-between align-items-center" style="border: none;"> <div class="card-header justify-content-between align-items-center border-0">
<div id="image-div" class="w-100"> <div id="image-div" class="w-100">
<img class="img-center" id="logo-animate" src="../static/assets/images/crafty-logo-square-1024.png" alt="Crafty Logo, Crafty is loading" width="20%" style="clear: both;"> <img class="img-center clearfix" id="logo-animate" src="../static/assets/images/crafty-logo-square-1024.png" alt="Crafty Logo, Crafty is loading" width="20%">
</div> </div>
<br> <br>
</br> </br>

10
app/frontend/templates/panel/parts/details_stats.html
View File

@ -3,7 +3,7 @@
<div class="card"> <div class="card">
<div class="card-body pt-3 pb-3"> <div class="card-body pt-3 pb-3">
<div class="row"> <div class="row">
<div class="col-sm-4 mr-2"> <div class="col-sm-4">
{% if data['server_stats']['running'] %} {% if data['server_stats']['running'] %}
<b>{{ translate('serverStats', 'serverStatus', data['lang']) }}:</b> <span id="status" class="text-success">{{ translate('serverStats', 'online', data['lang']) }}</span><br /> <b>{{ translate('serverStats', 'serverStatus', data['lang']) }}:</b> <span id="status" class="text-success">{{ translate('serverStats', 'online', data['lang']) }}</span><br />
<b>{{ translate('serverStats', 'serverStarted', data['lang']) }}:</b> <span id="started">{{ data['server_stats']['started'] }}</span><br /> <b>{{ translate('serverStats', 'serverStarted', data['lang']) }}:</b> <span id="started">{{ data['server_stats']['started'] }}</span><br />
@ -21,7 +21,7 @@
<b>{{ translate('serverStats', 'serverTimeZone', data['lang']) }}:</b> <span class="text-info">{{ data['serverTZ'] }}</span> <b>{{ translate('serverStats', 'serverTimeZone', data['lang']) }}:</b> <span class="text-info">{{ data['serverTZ'] }}</span>
</div> </div>
<div class="col-sm-3 mr-2"> <div class="col-sm-3">
<b>{{ translate('serverStats', 'cpuUsage', data['lang']) }}:</b> <span id="cpu">{{ data['server_stats']['cpu'] }}%</span> <br /> <b>{{ translate('serverStats', 'cpuUsage', data['lang']) }}:</b> <span id="cpu">{{ data['server_stats']['cpu'] }}%</span> <br />
<b>{{ translate('serverStats', 'memUsage', data['lang']) }}:</b> <span id="mem">{{ data['server_stats']['mem'] }}</span> <br /> <b>{{ translate('serverStats', 'memUsage', data['lang']) }}:</b> <span id="mem">{{ data['server_stats']['mem'] }}</span> <br />
{% if data['server_stats']['int_ping_results'] %} {% if data['server_stats']['int_ping_results'] %}
@ -31,14 +31,14 @@
{% end %} {% end %}
</div> </div>
<div class="col-sm-3 mr-2"> <div class="col-sm-5">
{% if data['server_stats']['version'] != 'False' %} {% if data['server_stats']['version'] != 'False' %}
<b>{{ translate('serverStats', 'version', data['lang']) }}:</b> <span id="version">{{ data['server_stats']['version'] }}</span><br /> <b>{{ translate('serverStats', 'version', data['lang']) }}:</b> <span id="version">{{ data['server_stats']['version'] }}</span><br />
<b>{{ translate('serverStats', 'description', data['lang']) }}:</b> <span id="input_motd" style="max-width: 10px; max-height: 10px" class="input_motd">{{ translate('serverStats', 'loadingMotd', data['lang']) }}</span> <b>{{ translate('serverStats', 'description', data['lang']) }}:</b> <span id="input_motd" class="input_motd">{{ translate('serverStats', 'loadingMotd', data['lang']) }}</span>
<br /> <br />
{% else %} {% else %}
<b>{{ translate('serverStats', 'version', data['lang']) }}:</b> <span id="version">{{ translate('serverStats', 'unableToConnect', data['lang']) }}</span> <br /> <b>{{ translate('serverStats', 'version', data['lang']) }}:</b> <span id="version">{{ translate('serverStats', 'unableToConnect', data['lang']) }}</span> <br />
<b>{{ translate('serverStats', 'description', data['lang']) }}:</b> <span style="max-width: 10px; max-height: 10px" id="input_motd" class="input_motd">{{ translate('serverStats', 'unableToConnect', data['lang']) }}</span> <br /> <b>{{ translate('serverStats', 'description', data['lang']) }}:</b> <span id="input_motd" class="input_motd">{{ translate('serverStats', 'unableToConnect', data['lang']) }}</span> <br />
{% end %} {% end %}
<b>Server Type: <span class="text-info">{{data['server_stats']['server_type']}}</span></b> <b>Server Type: <span class="text-info">{{data['server_stats']['server_type']}}</span></b>

17
app/frontend/templates/public/status.html
View File

@ -16,7 +16,11 @@
</style> </style>
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="content-wrapper col-md login-modal d-none d-sm-block bg-dropdown"> <div class="content-wrapper col-md login-modal d-none d-sm-block bg-dropdown">
<img src="/static/assets/images/logo_long.png" style='width: 25%; margin-left: 38%;'> <div class="row text-center">
<div class="col-12">
<img src="/static/assets/images/logo_long.png" class="w-25">
</div>
</div>
<hr /> <hr />
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-hover"> <table class="table table-hover">
@ -32,7 +36,7 @@
<tbody> <tbody>
{% for server in data['servers'] %} {% for server in data['servers'] %}
{% if server['server_data']['show_status'] %} {% if server['server_data']['show_status'] %}
<tr> <tr class="h-">
<td id="server_name_{{ server['stats']['server_id']['server_id'] }}"> <td id="server_name_{{ server['stats']['server_id']['server_id'] }}">
<i class="fas fa-server"></i> <i class="fas fa-server"></i>
{{ server['server_data']['server_name'] }} {{ server['server_data']['server_name'] }}
@ -85,13 +89,12 @@
</tbody> </tbody>
</table> </table>
</div> </div>
<hr />
</div> </div>
</div> </div>
<!-- View for Small screen --> <!-- View for Small screen -->
<div class="row justify-content-center align-items-sm-center"> <div class="row justify-content-center align-items-sm-center">
<div class="content-wrapper login-modal d-sm-none d-block bg-dropdown"> <div class="content-wrapper login-modal d-sm-none d-block bg-dropdown">
<img src="/static/assets/images/logo_long.png" style='width: 100%;'> <img src="/static/assets/images/logo_long.png" class="w-100">
<hr /> <hr />
<div class="accordion" id="accordionServers"> <div class="accordion" id="accordionServers">
{% for server in data['servers'] %} {% for server in data['servers'] %}
@ -207,10 +210,10 @@
m_motd = `<img class="w-25 mr-3" src="/static/assets/images/pack.png" alt="icon" /> `; m_motd = `<img class="w-25 mr-3" src="/static/assets/images/pack.png" alt="icon" /> `;
} }
desc_motd = `<span id="input_motd_` + server.id + `" class="input_motd">` + server.desc + `</span> <br />`; desc_motd = `<span id="input_motd_` + server.id + `" class="input_motd align-middle">` + server.desc + `</span> <br />`;
m_motd = m_motd + `<div class="media-body"><span id="m_input_motd_` + server.id + `" class="input_motd">` + server.desc + `</span></div>`; m_motd = m_motd + `<div class="media-body"><span id="m_input_motd_` + server.id + `" class="input_motd align-middle">` + server.desc + `</span></div>`;
motd = `<div class="row"><div class="col-auto">` + img_motd + `</div><div class="col-auto">` + desc_motd + `</div></div>`; motd = `<div class="row"><div class="col-auto">` + img_motd + `</div><div class="col-auto text-left align-items-center align-content-center">` + desc_motd + `</div></div>`;
server_motd.innerHTML = motd; server_motd.innerHTML = motd;
m_server_motd.innerHTML = m_motd; m_server_motd.innerHTML = m_motd;
} }

2
app/frontend/templates/public_base.html
View File

@ -38,7 +38,7 @@
<div class="container-fluid page-body-wrapper full-page-wrapper"> <div class="container-fluid page-body-wrapper full-page-wrapper">
<div class="content-wrapper d-flex align-items-sm-center auth auth-bg-1 theme-one"> <div class="content-wrapper d-flex align-items-sm-center auth auth-bg-1 theme-one">
<div class="mx-auto"> <div class="mx-auto">
<div class="auto-form-wrapper">{% block content %} {% end %}</div> <div class="auto-form-wrapper h-100">{% block content %} {% end %}</div>
</div> </div>
</div> </div>
<!-- content-wrapper ends --> <!-- content-wrapper ends -->

118
app/frontend/templates/server/bedrock_wizard.html
View File

@ -57,26 +57,17 @@
{% end %} {% end %}
<div class="form-group"> <div class="form-group">
<label for="server_name">{{ translate('serverWizard', 'serverName', data['lang']) }}</label> <label for="server_name">{{ translate('serverWizard', 'serverName', data['lang']) }}</label>
<input type="text" class="form-control" id="server_name" name="name" <input type="text" class="form-control" id="server_name" name="name" placeholder="{{ translate('serverWizard', 'myNewServer', data['lang']) }}" required>
placeholder="{{ translate('serverWizard', 'myNewServer', data['lang']) }}" required>
</div> </div>
<div class="form-group"> <div class="form-group">
<p class="mb-0 p-0" aria-expanded="true">{{ translate('serverWizard', 'addRole', data['lang']) <p class="mb-0 p-0" aria-expanded="true">{{ translate('serverWizard', 'addRole', data['lang']) }}
}} <small class="text-none"> - {{ translate('serverWizard', 'autoCreate', data['lang']) }}</small>
<small style="text-transform: none;"> - {{ translate('serverWizard', 'autoCreate',
data['lang']) }}</small>
</p> </p>
<select data-container="body" <select data-container="body" data-none-selected-text="{{ translate('serverWizard', 'noneRoles', data['lang']) }}" data-none-results-text="{{ translate('serverWizard', 'noRole', data['lang']) }} {0}" class="selectpicker form-control form-control-lg select-css roles_select" data-styleBase="form-control" data-style="form-control" data-live-search="true" name="server_roles" multiple>
data-none-selected-text="{{ translate('serverWizard', 'noneRoles', data['lang']) }}"
data-none-results-text="{{ translate('serverWizard', 'noRole', data['lang']) }} {0}"
class="selectpicker form-control form-control-lg select-css roles_select"
data-styleBase="form-control" data-style="form-control" data-live-search="true" name="server_roles"
multiple>
{% for r in data['roles'] %} {% for r in data['roles'] %}
<option class="roles" type="checkbox" value="{{ r['role_id'] }}"> <option class="roles" type="checkbox" value="{{ r['role_id'] }}">
&nbsp; {{ r['role_name'].capitalize() &nbsp; {{ r['role_name'].capitalize() }}
}}
</option> </option>
{% end %} {% end %}
</select> </select>
@ -89,17 +80,13 @@
</fieldset> </fieldset>
{% if not data["server_api"] and data["online"] %} {% if not data["server_api"] and data["online"] %}
<div class="api-alert" style="position: absolute; top: -5px; z-index: 100; opacity: .99;"> <div class="api-alert" style="position: absolute; top: -5px; z-index: 100; opacity: .99;">
<p style="color: white !important;"><i class="fas fa-exclamation-triangle" <p style="color: white !important;"><i class="fas fa-exclamation-triangle" style="color: red;"></i>&nbsp;{{ translate('error', 'bedrockError', data['lang']) }}<a style="color: red;" ; href="https://status.craftycontrol.com/status/craftycontrol" target="_blank" rel="noopener noreferrer">&nbsp;{{ translate('error', 'craftyStatus', data['lang']) }}</a>
style="color: red;"></i>&nbsp;{{ translate('error', 'bedrockError', data['lang']) }}<a
style="color: red;" ; href="https://status.craftycontrol.com/status/craftycontrol" target="_blank"
rel="noopener noreferrer">&nbsp;{{ translate('error', 'craftyStatus', data['lang']) }}</a>
&nbsp;{{ translate('error', 'serverJars2', data['lang']) }}</p> &nbsp;{{ translate('error', 'serverJars2', data['lang']) }}</p>
</div> </div>
{% end %} {% end %}
{% if not data["online"] %} {% if not data["online"] %}
<div class="api-alert" style="position: absolute; top: -5px; z-index: 100; opacity: .99;"> <div class="api-alert" style="position: absolute; top: -5px; z-index: 100; opacity: .99;">
<p style="color: white !important;"><i class="fas fa-exclamation-triangle" <p style="color: white !important;"><i class="fas fa-exclamation-triangle" style="color: red;"></i>&nbsp;{{ translate('error', 'noInternet', data['lang']) }}</p>
style="color: red;"></i>&nbsp;{{ translate('error', 'noInternet', data['lang']) }}</p>
</div> </div>
{% end %} {% end %}
</div> </div>
@ -116,43 +103,34 @@
<form method="post" id="import-jar" class="server-wizard"> <form method="post" id="import-jar" class="server-wizard">
<div class="form-group"> <div class="form-group">
<label for="server_name">{{ translate('serverWizard', 'serverName', data['lang']) }}</label> <label for="server_name">{{ translate('serverWizard', 'serverName', data['lang']) }}</label>
<input type="text" class="form-control" id="server_name" name="name" value="" <input type="text" class="form-control" id="server_name" name="name" value="" placeholder="{{ translate('serverWizard', 'myNewServer', data['lang']) }}" required>
placeholder="{{ translate('serverWizard', 'myNewServer', data['lang']) }}" required>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="server">{{ translate('serverWizard', 'serverPath', data['lang']) }} <small>{{ <label for="server">{{ translate('serverWizard', 'serverPath', data['lang']) }} <small>{{
translate('serverWizard', 'absoluteServerPath', data['lang']) }}</small></label> translate('serverWizard', 'absoluteServerPath', data['lang']) }}</small></label>
<input type="text" class="form-control" id="server_path" name="server_path" placeholder="/var/opt/server" <input type="text" class="form-control" id="server_path" name="server_path" placeholder="/var/opt/server" required>
required>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="server_jar">{{ translate('serverWizard', 'serverJar', data['lang']) }}</label> <label for="server_jar">{{ translate('serverWizard', 'serverJar', data['lang']) }}</label>
<input type="text" class="form-control" id="server_jar" name="server_jar" value="" <input type="text" class="form-control" id="server_jar" name="server_jar" value="" placeholder="bedrock_server" required>
placeholder="bedrock_server" required>
</div> </div>
<br /> <br />
<h4 class="card-title">{{ translate('serverWizard', 'quickSettings', data['lang']) }} <small <h4 class="card-title">{{ translate('serverWizard', 'quickSettings', data['lang']) }} <small class="text-none"> - {{ translate('serverWizard', 'quickSettingsDescription',
style="text-transform: none;"> - {{ translate('serverWizard', 'quickSettingsDescription',
data['lang']) }}</small></h4> data['lang']) }}</small></h4>
<hr> <hr>
<div class="form-group"> <div class="form-group">
<label for="port2">{{ translate('serverWizard', 'serverPort', data['lang']) }} <label for="port2">{{ translate('serverWizard', 'serverPort', data['lang']) }}
<small></small></label> <small></small></label>
<input type="number" class="form-control" id="port2" name="port" value="19132" step="1" min="1" <input type="number" class="form-control" id="port2" name="port" value="19132" step="1" min="1" max="65535" required>
max="65535" required>
</div> </div>
<div class="form-group"> <div class="form-group">
<p class="mb-0 p-0" aria-expanded="true">{{ translate('serverWizard', 'addRole', data['lang']) <p class="mb-0 p-0" aria-expanded="true">{{ translate('serverWizard', 'addRole', data['lang'])
}} }}
<small style="text-transform: none;"> - {{ translate('serverWizard', 'autoCreate', <small class="text-none"> - {{ translate('serverWizard', 'autoCreate',
data['lang']) }}</small> data['lang']) }}</small>
</p> </p>
<select data-container="body" <select data-container="body" data-none-selected-text="{{ translate('serverWizard', 'noneRoles', data['lang']) }}" data-none-results-text="{{ translate('serverWizard', 'noRole', data['lang']) }} {0}" class="selectpicker form-control form-control-lg select-css roles_select" data-styleBase="form-control" data-style="form-control" data-live-search="true" name="server_roles" multiple>
data-none-selected-text="{{ translate('serverWizard', 'noneRoles', data['lang']) }}"
data-none-results-text="{{ translate('serverWizard', 'noRole', data['lang']) }} {0}"
class="selectpicker form-control form-control-lg select-css roles_select" data-styleBase="form-control"
data-style="form-control" data-live-search="true" name="server_roles" multiple>
{% for r in data['roles'] %} {% for r in data['roles'] %}
<option class="roles" type="checkbox" value="{{ r['role_id'] }}"> <option class="roles" type="checkbox" value="{{ r['role_id'] }}">
&nbsp; {{ r['role_name'].capitalize() &nbsp; {{ r['role_name'].capitalize()
@ -180,15 +158,13 @@
<div class="form-group"> <div class="form-group">
<label for="server_name">{{ translate('serverWizard', 'serverName', data['lang']) }}</label> <label for="server_name">{{ translate('serverWizard', 'serverName', data['lang']) }}</label>
<input type="text" class="form-control" id="server_name" name="name" value="" <input type="text" class="form-control" id="server_name" name="name" value="" placeholder="{{ translate('serverWizard', 'myNewServer', data['lang']) }}" required>
placeholder="{{ translate('serverWizard', 'myNewServer', data['lang']) }}" required>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="server">{{ translate('serverWizard', 'zipPath', data['lang']) }} <small>{{ <label for="server">{{ translate('serverWizard', 'zipPath', data['lang']) }} <small>{{
translate('serverWizard', 'absoluteZipPath', data['lang']) }}</small></label> translate('serverWizard', 'absoluteZipPath', data['lang']) }}</small></label>
<input type="text" class="form-control" id="zip_server_path" name="server_path" <input type="text" class="form-control" id="zip_server_path" name="server_path" placeholder="/var/opt/server.zip" required>
placeholder="/var/opt/server.zip" required>
</div> </div>
<div class="form-group"> <div class="form-group">
@ -200,32 +176,25 @@
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="server_jar">{{ translate('serverWizard', 'serverJar', data['lang']) }}</label> <label for="server_jar">{{ translate('serverWizard', 'serverJar', data['lang']) }}</label>
<input type="text" class="form-control" id="server_jar" name="server_jar" value="" <input type="text" class="form-control" id="server_jar" name="server_jar" value="" placeholder="bedrock_server" required>
placeholder="bedrock_server" required>
</div> </div>
<h4 class="card-title">{{ translate('serverWizard', 'quickSettings', data['lang']) }} <small <h4 class="card-title">{{ translate('serverWizard', 'quickSettings', data['lang']) }} <small class="text-none"> - {{ translate('serverWizard', 'quickSettingsDescription', data['lang'])
style="text-transform: none;"> - {{ translate('serverWizard', 'quickSettingsDescription', data['lang'])
}}</small> }}</small>
</h4> </h4>
<hr> <hr>
<div class="form-group"> <div class="form-group">
<label for="port3">{{ translate('serverWizard', 'serverPort', data['lang']) }} <label for="port3">{{ translate('serverWizard', 'serverPort', data['lang']) }}
<small></small></label> <small></small></label>
<input type="number" class="form-control" id="port3" name="port" value="19132" step="1" min="1" <input type="number" class="form-control" id="port3" name="port" value="19132" step="1" min="1" max="65535" required>
max="65535" required>
</div> </div>
<div class="form-group"> <div class="form-group">
<p class="mb-0 p-0" aria-expanded="true">{{ translate('serverWizard', 'addRole', data['lang']) <p class="mb-0 p-0" aria-expanded="true">{{ translate('serverWizard', 'addRole', data['lang'])
}} }}
<small style="text-transform: none;"> - {{ translate('serverWizard', 'autoCreate', <small class="text-none"> - {{ translate('serverWizard', 'autoCreate',
data['lang']) }}</small> data['lang']) }}</small>
</p> </p>
<select data-container="body" <select data-container="body" data-none-selected-text="{{ translate('serverWizard', 'noneRoles', data['lang']) }}" data-none-results-text="{{ translate('serverWizard', 'noRole', data['lang']) }} {0}" class="selectpicker form-control form-control-lg select-css roles_select" data-styleBase="form-control" data-style="form-control" data-live-search="true" name="server_roles" multiple>
data-none-selected-text="{{ translate('serverWizard', 'noneRoles', data['lang']) }}"
data-none-results-text="{{ translate('serverWizard', 'noRole', data['lang']) }} {0}"
class="selectpicker form-control form-control-lg select-css roles_select" data-styleBase="form-control"
data-style="form-control" data-live-search="true" name="server_roles" multiple>
{% for r in data['roles'] %} {% for r in data['roles'] %}
<option class="roles" type="checkbox" value="{{ r['role_id'] }}"> <option class="roles" type="checkbox" value="{{ r['role_id'] }}">
&nbsp; {{ r['role_name'].capitalize() &nbsp; {{ r['role_name'].capitalize()
@ -234,8 +203,7 @@
{% end %} {% end %}
</select> </select>
</div> </div>
<div class="modal fade" id="dir_select" tabindex="-1" role="dialog" aria-labelledby="dir_select" <div class="modal fade" id="dir_select" tabindex="-1" role="dialog" aria-labelledby="dir_select" aria-hidden="true">
aria-hidden="true">
<div class="modal-dialog" role="document"> <div class="modal-dialog" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
@ -246,8 +214,7 @@
</button> </button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<div class="tree-ctx-item" id="main-tree-div" data-path="" <div class="tree-ctx-item overflow-scroll mh-75" id="main-tree-div" data-path="">
style="overflow: scroll; max-height:75%;">
<input type="radio" class="root-input" id="main-tree-input" name="root_path" value="" checked> <input type="radio" class="root-input" id="main-tree-input" name="root_path" value="" checked>
<span id="main-tree" class="files-tree-title tree-caret-down root-dir" data-path=""> <span id="main-tree" class="files-tree-title tree-caret-down root-dir" data-path="">
<i class="far fa-folder"></i> <i class="far fa-folder"></i>
@ -266,8 +233,7 @@
</div> </div>
</div> </div>
</div> </div>
<button id="zip_submit" type="submit" title="You must select server root dir first" disabled <button id="zip_submit" type="submit" title="You must select server root dir first" disabled class="btn btn-primary mr-2">{{ translate('serverWizard', 'importServerButton', data['lang'])
class="btn btn-primary mr-2">{{ translate('serverWizard', 'importServerButton', data['lang'])
}}</button> }}</button>
<button type="button" class="btn btn-danger mr-2 tree-reset">{{ translate('serverWizard', 'resetForm', <button type="button" class="btn btn-danger mr-2 tree-reset">{{ translate('serverWizard', 'resetForm',
data['lang']) data['lang'])
@ -288,8 +254,7 @@
<div class="form-group"> <div class="form-group">
<label for="server_name">{{ translate('serverWizard', 'serverName', data['lang']) }}</label> <label for="server_name">{{ translate('serverWizard', 'serverName', data['lang']) }}</label>
<input type="text" class="form-control" id="server_name" name="name" value="" <input type="text" class="form-control" id="server_name" name="name" value="" placeholder="{{ translate('serverWizard', 'myNewServer', data['lang']) }}" required>
placeholder="{{ translate('serverWizard', 'myNewServer', data['lang']) }}" required>
</div> </div>
<div class="form-group"> <div class="form-group">
@ -301,8 +266,7 @@
'labelZipFile', data['lang']) }}</label> 'labelZipFile', data['lang']) }}</label>
</div> </div>
<div class="input-group-append"> <div class="input-group-append">
<button type="button" class="btn btn-info upload-button" id="upload-button" <button type="button" class="btn btn-info upload-button" id="upload-button" onclick="uploadFile('import')" disabled>{{ translate('serverWizard',
onclick="uploadFile('import')" disabled>{{ translate('serverWizard',
'uploadButton', data['lang']) }}</button> 'uploadButton', data['lang']) }}</button>
</div> </div>
</div> </div>
@ -319,34 +283,26 @@
<div class="form-group"> <div class="form-group">
<label for="server_jar">{{ translate('serverWizard', 'serverJar', data['lang']) }}</label> <label for="server_jar">{{ translate('serverWizard', 'serverJar', data['lang']) }}</label>
<input type="text" class="form-control" id="server_jar" name="server_jar" value="" <input type="text" class="form-control" id="server_jar" name="server_jar" value="" placeholder="paper.jar" required>
placeholder="paper.jar" required>
</div> </div>
<h4 class="card-title">{{ translate('serverWizard', 'quickSettings', data['lang']) }} <small <h4 class="card-title">{{ translate('serverWizard', 'quickSettings', data['lang']) }} <small class="text-none"> - {{ translate('serverWizard', 'quickSettingsDescription',
style="text-transform: none;"> - {{ translate('serverWizard', 'quickSettingsDescription',
data['lang']) }}</small></h4> data['lang']) }}</small></h4>
<hr> <hr>
<div class="form-group"> <div class="form-group">
<label for="port3">{{ translate('serverWizard', 'serverPort', data['lang']) }} <small> - {{ <label for="port3">{{ translate('serverWizard', 'serverPort', data['lang']) }} <small> - {{
translate('serverWizard', 'defaultPort', data['lang']) }}</small></label> translate('serverWizard', 'defaultPort', data['lang']) }}</small></label>
<input type="number" class="form-control" id="port4" name="port" value="19132" step="1" min="1" <input type="number" class="form-control" id="port4" name="port" value="19132" step="1" min="1" max="65535" required>
max="65535" required>
</div> </div>
<div class="form-group"> <div class="form-group">
<p class="mb-0 p-0" aria-expanded="true">{{ translate('serverWizard', 'addRole', data['lang']) <p class="mb-0 p-0" aria-expanded="true">{{ translate('serverWizard', 'addRole', data['lang'])
}} }}
<small style="text-transform: none;"> - {{ translate('serverWizard', 'autoCreate', <small class="text-none"> - {{ translate('serverWizard', 'autoCreate',
data['lang']) }}</small> data['lang']) }}</small>
</p> </p>
<select data-container="body" <select data-container="body" data-none-selected-text="{{ translate('serverWizard', 'noneRoles', data['lang']) }}" data-none-results-text="{{ translate('serverWizard', 'noRole', data['lang']) }} {0}" class="selectpicker form-control form-control-lg select-css roles_select" data-styleBase="form-control" data-style="form-control" data-live-search="true" name="server_roles" multiple>
data-none-selected-text="{{ translate('serverWizard', 'noneRoles', data['lang']) }}"
data-none-results-text="{{ translate('serverWizard', 'noRole', data['lang']) }} {0}"
class="selectpicker form-control form-control-lg select-css roles_select"
data-styleBase="form-control" data-style="form-control" data-live-search="true" name="server_roles"
multiple>
{% for r in data['roles'] %} {% for r in data['roles'] %}
<option class="roles" type="checkbox" value="{{ r['role_id'] }}"> <option class="roles" type="checkbox" value="{{ r['role_id'] }}">
&nbsp; {{ r['role_name'].capitalize() &nbsp; {{ r['role_name'].capitalize()
@ -355,8 +311,7 @@
{% end %} {% end %}
</select> </select>
</div> </div>
<div class="modal fade" id="dir_upload_select" tabindex="-1" role="dialog" aria-labelledby="dir_select" <div class="modal fade" id="dir_upload_select" tabindex="-1" role="dialog" aria-labelledby="dir_select" aria-hidden="true">
aria-hidden="true">
<div class="modal-dialog" role="document"> <div class="modal-dialog" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
@ -367,10 +322,8 @@
</button> </button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<div class="tree-ctx-item" id="main-tree-div-upload" data-path="" <div class="tree-ctx-item overflow-scroll mh-75" id="main-tree-div-upload" data-path="">
style="overflow: scroll; max-height:75%;"> <input type="radio" class="root-input" id="main-tree-input-upload" name="root_path" value="" checked>
<input type="radio" class="root-input" id="main-tree-input-upload" name="root_path" value=""
checked>
<span id="main-tree" class="files-tree-title tree-caret-down root-dir" data-path=""> <span id="main-tree" class="files-tree-title tree-caret-down root-dir" data-path="">
<i class="far fa-folder"></i> <i class="far fa-folder"></i>
<i class="far fa-folder-open"></i> <i class="far fa-folder-open"></i>
@ -388,8 +341,7 @@
</div> </div>
</div> </div>
</div> </div>
<button id="upload_submit" type="submit" title="You must select server root dir first" disabled <button id="upload_submit" type="submit" title="You must select server root dir first" disabled class="btn btn-primary mr-2">{{ translate('serverWizard', 'importServerButton', data['lang'])
class="btn btn-primary mr-2">{{ translate('serverWizard', 'importServerButton', data['lang'])
}}</button> }}</button>
<button type="button" class="btn btn-danger mr-2 tree-reset">{{ translate('serverWizard', 'resetForm', <button type="button" class="btn btn-danger mr-2 tree-reset">{{ translate('serverWizard', 'resetForm',
data['lang']) data['lang'])

251
app/frontend/templates/server/wizard.html
View File

@ -31,35 +31,6 @@
<fieldset> <fieldset>
{% else %} {% else %}
<fieldset disabled="disabled"> <fieldset disabled="disabled">
<style>
#creation_wizard {
-webkit-filter: grayscale(1);
}
.api-alert {
position: absolute;
top: -5px;
left: 0;
font-size: 50px !important;
color: #fff;
background: rgb(0, 170, 170);
opacity: .4;
width: 100%;
height: 100%;
z-index: 100;
}
.api-alert p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
text-align: center;
font-size: 20px;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
</style>
{% end %} {% end %}
{% raw xsrf_form_html() %} {% raw xsrf_form_html() %}
<div class="row"> <div class="row">
@ -113,7 +84,7 @@
</div> </div>
<br /> <br />
<h4 class="card-title">{{ translate('serverWizard', 'quickSettings', data['lang']) }} <small style="text-transform: none;"> - {{ translate('serverWizard', 'quickSettingsDescription', data['lang']) }}</small></h4> <h4 class="card-title">{{ translate('serverWizard', 'quickSettings', data['lang']) }} <small class="text-none"> - {{ translate('serverWizard', 'quickSettingsDescription', data['lang']) }}</small></h4>
<hr> <hr>
<div class="row"> <div class="row">
@ -144,14 +115,9 @@
<div class="form-group"> <div class="form-group">
<label for="Role-1"> {{ translate('serverWizard', 'addRole', data['lang']) <label for="Role-1"> {{ translate('serverWizard', 'addRole', data['lang'])
}} }}
<small style="text-transform: none;"> - {{ translate('serverWizard', 'autoCreate', <small class="text-none"> - {{ translate('serverWizard', 'autoCreate',
data['lang']) }}</small></label> data['lang']) }}</small></label>
<select data-container="body" <select data-container="body" data-none-selected-text="{{ translate('serverWizard', 'noneRoles', data['lang']) }}" data-none-results-text="{{ translate('serverWizard', 'noRole', data['lang']) }} {0}" class="selectpicker form-control form-control-lg select-css roles_select" data-styleBase="form-control" data-style="form-control" data-live-search="true" name="server_roles" multiple>
data-none-selected-text="{{ translate('serverWizard', 'noneRoles', data['lang']) }}"
data-none-results-text="{{ translate('serverWizard', 'noRole', data['lang']) }} {0}"
class="selectpicker form-control form-control-lg select-css roles_select"
data-styleBase="form-control" data-style="form-control" data-live-search="true"
name="server_roles" multiple>
{% for r in data['roles'] %} {% for r in data['roles'] %}
<option class="roles" type="checkbox" value="{{ r['role_id'] }}"> <option class="roles" type="checkbox" value="{{ r['role_id'] }}">
&nbsp; {{ r['role_name'].capitalize() &nbsp; {{ r['role_name'].capitalize()
@ -229,7 +195,7 @@
</div> </div>
<br /> <br />
<h4 class="card-title">{{ translate('serverWizard', 'quickSettings', data['lang']) }} <small style="text-transform: none;"> - {{ translate('serverWizard', 'quickSettingsDescription', <h4 class="card-title">{{ translate('serverWizard', 'quickSettings', data['lang']) }} <small class="text-none"> - {{ translate('serverWizard', 'quickSettingsDescription',
data['lang']) }}</small></h4> data['lang']) }}</small></h4>
<hr> <hr>
<div class="row"> <div class="row">
@ -261,14 +227,9 @@
<div class="form-group"> <div class="form-group">
<label for="Role-2"> {{ translate('serverWizard', 'addRole', data['lang']) <label for="Role-2"> {{ translate('serverWizard', 'addRole', data['lang'])
}} }}
<small style="text-transform: none;"> - {{ translate('serverWizard', 'autoCreate', <small class="text-none"> - {{ translate('serverWizard', 'autoCreate',
data['lang']) }}</small></label> data['lang']) }}</small></label>
<select data-container="body" <select data-container="body" data-none-selected-text="{{ translate('serverWizard', 'noneRoles', data['lang']) }}" data-none-results-text="{{ translate('serverWizard', 'noRole', data['lang']) }} {0}" class="selectpicker form-control form-control-lg select-css roles_select" data-styleBase="form-control" data-style="form-control" data-live-search="true" name="server_roles" multiple>
data-none-selected-text="{{ translate('serverWizard', 'noneRoles', data['lang']) }}"
data-none-results-text="{{ translate('serverWizard', 'noRole', data['lang']) }} {0}"
class="selectpicker form-control form-control-lg select-css roles_select"
data-styleBase="form-control" data-style="form-control" data-live-search="true"
name="server_roles" multiple>
{% for r in data['roles'] %} {% for r in data['roles'] %}
<option class="roles" type="checkbox" value="{{ r['role_id'] }}"> <option class="roles" type="checkbox" value="{{ r['role_id'] }}">
&nbsp; {{ r['role_name'].capitalize() &nbsp; {{ r['role_name'].capitalize()
@ -343,7 +304,7 @@
<div class="col-sm-12"> <div class="col-sm-12">
<h4 class="card-title">{{ translate('serverWizard', 'quickSettings', data['lang']) }} <small style="text-transform: none;"> - {{ translate('serverWizard', 'quickSettingsDescription', <h4 class="card-title">{{ translate('serverWizard', 'quickSettings', data['lang']) }} <small class="text-none"> - {{ translate('serverWizard', 'quickSettingsDescription',
data['lang']) }}</small></h4> data['lang']) }}</small></h4>
<hr> <hr>
<div class="row"> <div class="row">
@ -375,14 +336,9 @@
<div class="form-group"> <div class="form-group">
<label for="Role-3"> {{ translate('serverWizard', 'addRole', data['lang']) <label for="Role-3"> {{ translate('serverWizard', 'addRole', data['lang'])
}} }}
<small style="text-transform: none;"> - {{ translate('serverWizard', 'autoCreate', <small class="text-none"> - {{ translate('serverWizard', 'autoCreate',
data['lang']) }}</small></label> data['lang']) }}</small></label>
<select data-container="body" <select data-container="body" data-none-selected-text="{{ translate('serverWizard', 'noneRoles', data['lang']) }}" data-none-results-text="{{ translate('serverWizard', 'noRole', data['lang']) }} {0}" class="selectpicker form-control form-control-lg select-css roles_select" data-styleBase="form-control" data-style="form-control" data-live-search="true" name="server_roles" multiple>
data-none-selected-text="{{ translate('serverWizard', 'noneRoles', data['lang']) }}"
data-none-results-text="{{ translate('serverWizard', 'noRole', data['lang']) }} {0}"
class="selectpicker form-control form-control-lg select-css roles_select"
data-styleBase="form-control" data-style="form-control" data-live-search="true"
name="server_roles" multiple>
{% for r in data['roles'] %} {% for r in data['roles'] %}
<option class="roles" type="checkbox" value="{{ r['role_id'] }}"> <option class="roles" type="checkbox" value="{{ r['role_id'] }}">
&nbsp; {{ r['role_name'].capitalize() &nbsp; {{ r['role_name'].capitalize()
@ -403,7 +359,7 @@
</button> </button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<div class="tree-ctx-item" id="main-tree-div" data-path="" style="overflow: scroll; max-height:75%;"> <div class="tree-ctx-item overflow-scroll mh-75" id="main-tree-div" data-path="">
<input type="radio" class="root-input" id="main-tree-input" name="root_path" value="" checked> <input type="radio" class="root-input" id="main-tree-input" name="root_path" value="" checked>
<span id="main-tree" class="files-tree-title tree-caret-down root-dir" data-path=""> <span id="main-tree" class="files-tree-title tree-caret-down root-dir" data-path="">
<i class="far fa-folder"></i> <i class="far fa-folder"></i>
@ -466,7 +422,7 @@
</div> </div>
</div> </div>
<div id="lower_half" style="visibility: hidden;" hidden> <div id="lower_half" class="d-none" style="visibility: hidden;" hidden>
<div class="form-group"> <div class="form-group">
<label for="server">{{ translate('serverWizard', 'selectRoot', data['lang']) }} <small>{{ <label for="server">{{ translate('serverWizard', 'selectRoot', data['lang']) }} <small>{{
translate('serverWizard', 'explainRoot', data['lang']) }}</small></label> translate('serverWizard', 'explainRoot', data['lang']) }}</small></label>
@ -480,7 +436,7 @@
<input type="text" class="form-control" id="server_jar" name="server_jar" value="" placeholder="paper.jar" required> <input type="text" class="form-control" id="server_jar" name="server_jar" value="" placeholder="paper.jar" required>
</div> </div>
<h4 class="card-title">{{ translate('serverWizard', 'quickSettings', data['lang']) }} <small style="text-transform: none;"> - {{ translate('serverWizard', 'quickSettingsDescription', <h4 class="card-title">{{ translate('serverWizard', 'quickSettings', data['lang']) }} <small class="text-none"> - {{ translate('serverWizard', 'quickSettingsDescription',
data['lang']) }}</small></h4> data['lang']) }}</small></h4>
<hr> <hr>
@ -505,14 +461,9 @@
<div class="form-group"> <div class="form-group">
<label for="Role-3"> {{ translate('serverWizard', 'addRole', data['lang']) <label for="Role-3"> {{ translate('serverWizard', 'addRole', data['lang'])
}} }}
<small style="text-transform: none;"> - {{ translate('serverWizard', 'autoCreate', <small class="text-none"> - {{ translate('serverWizard', 'autoCreate',
data['lang']) }}</small></label> data['lang']) }}</small></label>
<select data-container="body" <select data-container="body" data-none-selected-text="{{ translate('serverWizard', 'noneRoles', data['lang']) }}" data-none-results-text="{{ translate('serverWizard', 'noRole', data['lang']) }} {0}" class="selectpicker form-control form-control-lg select-css roles_select" data-styleBase="form-control" data-style="form-control" data-live-search="true" name="server_roles" multiple>
data-none-selected-text="{{ translate('serverWizard', 'noneRoles', data['lang']) }}"
data-none-results-text="{{ translate('serverWizard', 'noRole', data['lang']) }} {0}"
class="selectpicker form-control form-control-lg select-css roles_select"
data-styleBase="form-control" data-style="form-control" data-live-search="true"
name="server_roles" multiple>
{% for r in data['roles'] %} {% for r in data['roles'] %}
<option class="roles" type="checkbox" value="{{ r['role_id'] }}"> <option class="roles" type="checkbox" value="{{ r['role_id'] }}">
&nbsp; {{ r['role_name'].capitalize() &nbsp; {{ r['role_name'].capitalize()
@ -532,7 +483,7 @@
</button> </button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<div class="tree-ctx-item" id="main-tree-div-upload" data-path="" style="overflow: scroll; max-height:75%;"> <div class="tree-ctx-item overflow-scroll mh-75" id="main-tree-div-upload" data-path="">
<input type="radio" class="root-input" id="main-tree-input-upload" name="root_path" value="" checked> <input type="radio" class="root-input" id="main-tree-input-upload" name="root_path" value="" checked>
<span id="main-tree" class="files-tree-title tree-caret-down root-dir" data-path=""> <span id="main-tree" class="files-tree-title tree-caret-down root-dir" data-path="">
<i class="far fa-folder"></i> <i class="far fa-folder"></i>
@ -564,177 +515,7 @@
</div> </div>
</div> </div>
</div> </div>
<style> <style rel="stylesheet" href="/static/assets/css/partial/crafty-wizard.css"></style>
button>i.refresh-class {
margin: 0px;
}
</style>
<style>
.refresh-class:hover {
cursor: grab;
}
.scroll {
max-height: 12em;
overflow-y: auto;
}
.menu-btn {
font-size: 0.9em;
padding: 2px 10px;
}
.menu {
padding-top: 10px;
z-index: 200;
margin-top: 4px;
position: absolute;
background-color: var(--card-banner-bg);
}
.menu-option {
padding: 6px 20px 6px;
color: white;
}
#overlay {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 100;
}
</style>
<style>
/* Remove default bullets */
.tree-view,
.tree-nested {
list-style-type: none;
margin: 0;
padding: 0;
margin-left: 10px;
}
/* Style the items */
.tree-item,
.files-tree-title {
cursor: pointer;
user-select: none;
/* Prevent text selection */
}
/* Create the caret/arrow with a unicode, and style it */
.tree-caret .fa-folder {
display: inline-block;
}
.tree-caret .fa-folder-open {
display: none;
}
/* Rotate the caret/arrow icon when clicked on (using JavaScript) */
.tree-caret-down .fa-folder {
display: none;
}
.tree-caret-down .fa-folder-open {
display: inline-block;
}
/* Hide the nested list */
.tree-nested {
display: none;
}
#op_logo {
position: relative;
top: 50%;
transform: translateY(-50%);
}
</style>
<style>
.scroll {
max - height: 12em;
overflow - y: auto;
}
.menu - btn {
font - size: 0.9em;
padding: 2px 10px;
}
.menu {
padding - top: 10px;
z - index: 200;
margin - top: 4px;
position: absolute;
background - color: #2a2c44;
}
.menu - option {
padding: 6px 20px 6px;
color: white;
}
#overlay {
position: absolute;
top: 0px;
left: 0px;
width: 100 %;
height: 100 %;
z - index: 100;
}
</style>
<style>
/* Remove default bullets */
.tree-view,
.tree-nested {
list - style - type: none;
margin: 0;
padding: 0;
margin-left: 10px;
}
/* Style the items */
.tree-item,
.files-tree-title {
cursor: pointer;
user-select: none;
/* Prevent text selection */
}
/* Create the caret/arrow with a unicode, and style it */
.tree-caret .fa-folder {
display: inline-block;
}
.tree-caret .fa-folder-open {
display: none;
}
/* Rotate the caret/arrow icon when clicked on (using JavaScript) */
.tree-caret-down .fa-folder {
display: none;
}
.tree-caret-down .fa-folder-open {
display: inline-block;
}
/* Hide the nested list */
.tree-nested {
display: none;
}
#op_logo {
position: relative;
top: 50%;
transform: translateY(-50%);
}
</style>
</style>
{% end %} {% end %}