mirror of
https://thingvellir.net/git/overte
synced 2025-03-27 23:52:03 +01:00
handle styling of server management buttons
This commit is contained in:
Stephen Birarda
parent
7ada5485ed
commit
d4b7afbc25
7 changed files with 201 additions and 40 deletions
|
|
@ -19,8 +19,8 @@ body {
|
|||
font-family: 'Raleway', sans-serif;
|
||||
background-image: url('../images/background.jpg');
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
letter-spacing: 2px;
|
||||
font-size: 11px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.light-gray {
|
||||
|
|
@ -28,11 +28,11 @@ body {
|
|||
}
|
||||
|
||||
h4 {
|
||||
font-size: 14px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
header {
|
||||
margin: 50px 75px;
|
||||
margin: 50px 75px 35px 75px;
|
||||
|
||||
#console-version {
|
||||
float: right;
|
||||
|
|
@ -58,38 +58,43 @@ header {
|
|||
.tray-line {
|
||||
background-color: @light-gray;
|
||||
width: 1px;
|
||||
height: 165px;
|
||||
margin-top: 45px;
|
||||
height: 130px;
|
||||
margin-top: 35px;
|
||||
}
|
||||
|
||||
@square-side: 97px;
|
||||
|
||||
#servers {
|
||||
h4 {
|
||||
margin-left: 14px;
|
||||
margin-left: 7px;
|
||||
}
|
||||
|
||||
margin-left: 20px;
|
||||
img {
|
||||
position: relative;
|
||||
top: -5px;
|
||||
width: 125px;
|
||||
height: 125px;
|
||||
width: @square-side;
|
||||
height: @square-side;
|
||||
}
|
||||
}
|
||||
|
||||
.tray-square {
|
||||
width: 130px;
|
||||
height: 130px;
|
||||
width: @square-side;
|
||||
height: @square-side;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
width: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
margin-right: 15px;
|
||||
margin-right: 20px;
|
||||
float: left;
|
||||
width: 130px;
|
||||
height: 150px;
|
||||
width: @square-side;
|
||||
|
||||
&#nav-search {
|
||||
.nav-square {
|
||||
|
|
@ -109,21 +114,25 @@ header {
|
|||
@focus-background: #A6A7AA;
|
||||
@dark-gray: #585858;
|
||||
|
||||
@focus-height: 270px;
|
||||
|
||||
#tray-focus {
|
||||
margin-top: 15px;
|
||||
margin-top: 5px;
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
height: @focus-height;
|
||||
background-color: @focus-background;
|
||||
|
||||
color: @dark-gray;
|
||||
|
||||
#server-focus {
|
||||
padding: 15px 75px;
|
||||
#server-info {
|
||||
@info-padding-top-bottom: 10px;
|
||||
height: @focus-height - @info-padding-top-bottom - @info-padding-top-bottom;
|
||||
padding: @info-padding-top-bottom 75px;
|
||||
|
||||
h2 {
|
||||
color: black;
|
||||
font-size: 36px;
|
||||
margin-left: 315px;
|
||||
margin-left: 255px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
|
|
@ -136,25 +145,35 @@ header {
|
|||
}
|
||||
|
||||
.process-status {
|
||||
@stop-red: #CA757F;
|
||||
@status-red: #BD5F6D;
|
||||
@status-green: #59AEA8;
|
||||
|
||||
margin-bottom: 10px;
|
||||
|
||||
.circle {
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
margin-right: 5px;
|
||||
background-color: @stop-red;
|
||||
border-radius: 50%;
|
||||
border: 1px solid #696A6B;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
|
||||
&.stopped {
|
||||
background-color: @status-red;
|
||||
}
|
||||
|
||||
&.running {
|
||||
background-color: @status-green;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&#left-box {
|
||||
h4 {
|
||||
margin-top: 0px;
|
||||
margin-bottom: 10px;
|
||||
width: 275px;
|
||||
width: 215px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -162,6 +181,52 @@ header {
|
|||
}
|
||||
|
||||
#manage-server {
|
||||
text-align: center;
|
||||
background-color: #232323;
|
||||
height: 150px;
|
||||
height: 140px;
|
||||
|
||||
#manage-buttons {
|
||||
display: inline-block;
|
||||
|
||||
@blue: #08A6E0;
|
||||
|
||||
#manage-separator {
|
||||
width: 1px
|
||||
}
|
||||
|
||||
@side-margin: 20px;
|
||||
|
||||
.manage-button {
|
||||
vertical-align: top;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
margin: 40px @side-margin 20px @side-margin;
|
||||
width: 75px;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
p {
|
||||
color: @blue;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&#stop {
|
||||
margin-right: @side-margin + 2;
|
||||
}
|
||||
|
||||
&#settings {
|
||||
margin-left: @side-margin + 2;
|
||||
}
|
||||
}
|
||||
|
||||
#manage-separator {
|
||||
display: inline-block;
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
10
console/src/images/logs.svg
Normal file
10
console/src/images/logs.svg
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve">
|
||||
<path fill="#18A6DF" d="M25.4,10.3H12c-0.8,0-1.4-0.6-1.4-1.4s0.6-1.4,1.4-1.4h13.4c0.8,0,1.4,0.6,1.4,1.4S26.2,10.3,25.4,10.3z"/>
|
||||
<path fill="#18A6DF" d="M25.4,21.2H12c-0.8,0-1.4-0.6-1.4-1.4s0.6-1.4,1.4-1.4h13.4c0.8,0,1.4,0.6,1.4,1.4S26.2,21.2,25.4,21.2z"/>
|
||||
<path fill="#18A6DF" d="M25.4,15.7H12c-0.8,0-1.4-0.6-1.4-1.4S11.3,13,12,13h13.4c0.8,0,1.4,0.6,1.4,1.4S26.2,15.7,25.4,15.7z"/>
|
||||
<path fill="#18A6DF" d="M27,27.7H6.5C5.7,27.7,5,27,5,26.2V6.3c0-0.8,0.6-1.4,1.4-1.4s1.4,0.6,1.4,1.4v18.5H27
|
||||
c0.8,0,1.4,0.6,1.4,1.4S27.8,27.7,27,27.7z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 918 B |
12
console/src/images/manage-button-sep.svg
Normal file
12
console/src/images/manage-button-sep.svg
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="1.7px" height="133.7px" viewBox="0 0 1.7 133.7" enable-background="new 0 0 1.7 133.7" xml:space="preserve">
|
||||
<g>
|
||||
<g>
|
||||
<line fill="none" stroke="#3F403F" stroke-miterlimit="10" x1="0.9" y1="0" x2="0.9" y2="1.5"/>
|
||||
|
||||
<line fill="none" stroke="#3F403F" stroke-miterlimit="10" stroke-dasharray="2.9648,2.9648" x1="0.9" y1="4.5" x2="0.9" y2="133.4"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 649 B |
26
console/src/images/restart.svg
Normal file
26
console/src/images/restart.svg
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve">
|
||||
<g>
|
||||
<g>
|
||||
<path fill="#18A6DF" d="M10.9,29.1H4.1c-0.8,0-1.4-0.6-1.4-1.4s0.6-1.4,1.4-1.4h6.8c0.8,0,1.4,0.6,1.4,1.4S11.7,29.1,10.9,29.1z"
|
||||
/>
|
||||
<path fill="#18A6DF" d="M11,28.9C11,28.9,11,28.9,11,28.9c-0.8,0-1.5-0.7-1.4-1.5l0.1-6.8c0-0.8,0.7-1.4,1.4-1.4c0,0,0,0,0,0
|
||||
c0.8,0,1.4,0.7,1.4,1.5l-0.1,6.8C12.4,28.3,11.8,28.9,11,28.9z"/>
|
||||
</g>
|
||||
<path fill="#18A6DF" d="M9.6,27.7c-0.3,0-0.7-0.1-1-0.4c-3.8-3.4-7.2-9.1-5.6-15.2c1.5-5.6,7.1-9.5,13.3-9.3c0.8,0,1.4,0.7,1.4,1.5
|
||||
c0,0.8-0.7,1.4-1.5,1.4c-4.8-0.2-9.3,2.9-10.4,7.2c-1.3,4.8,1.7,9.6,4.7,12.3c0.6,0.5,0.6,1.4,0.1,2C10.4,27.5,10,27.7,9.6,27.7z"
|
||||
/>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path fill="#18A6DF" d="M28.2,6h-6.8C20.6,6,20,5.3,20,4.5s0.6-1.4,1.4-1.4h6.8c0.8,0,1.4,0.6,1.4,1.4S29,6,28.2,6z"/>
|
||||
<path fill="#18A6DF" d="M21.2,12.9C21.2,12.9,21.2,12.9,21.2,12.9c-0.8,0-1.5-0.7-1.4-1.5l0.1-6.8c0-0.8,0.7-1.5,1.5-1.4
|
||||
c0.8,0,1.4,0.7,1.4,1.5l-0.1,6.8C22.7,12.2,22,12.9,21.2,12.9z"/>
|
||||
</g>
|
||||
<path fill="#18A6DF" d="M16.4,29.4c-0.2,0-0.3,0-0.5,0c-0.8,0-1.4-0.7-1.4-1.5c0-0.8,0.7-1.4,1.5-1.4c4.8,0.2,9.3-2.9,10.4-7.2
|
||||
c1.3-4.8-1.7-9.6-4.7-12.3c-0.6-0.5-0.6-1.4-0.1-2c0.5-0.6,1.4-0.6,2-0.1c3.8,3.4,7.2,9.1,5.6,15.2C27.7,25.5,22.4,29.4,16.4,29.4z
|
||||
"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
16
console/src/images/settings.svg
Normal file
16
console/src/images/settings.svg
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve">
|
||||
<path fill="#18A6DF" d="M16,26.9c-0.4,0-0.8,0-1.2,0c-0.2,0-0.3-0.1-0.3-0.2c-0.4-1-0.8-1.9-1.2-2.9c-0.1-0.3-0.8-0.6-1.2-0.5
|
||||
c-0.9,0.4-1.9,0.8-2.8,1.2c-0.2,0.1-0.3,0.1-0.5-0.1c-0.5-0.5-1.1-1.1-1.6-1.6c-0.2-0.2-0.2-0.3-0.1-0.5c0.4-0.9,0.8-1.9,1.1-2.8
|
||||
c0.1-0.3-0.2-1-0.5-1.2C6.9,18,5.9,17.6,5,17.2c-0.2-0.1-0.3-0.2-0.3-0.4c0-0.7,0-1.5,0-2.2c0-0.2,0.1-0.3,0.3-0.4
|
||||
c0.9-0.4,1.9-0.8,2.8-1.2c0.4-0.2,0.6-0.8,0.5-1.2C7.9,10.9,7.5,9.9,7.1,9C7,8.8,7,8.7,7.2,8.6C7.8,8,8.3,7.5,8.8,6.9
|
||||
C9,6.8,9,6.8,9.2,6.9c1,0.4,1.9,0.8,2.9,1.2c0.4,0.1,1-0.1,1.2-0.5c0.4-0.9,0.8-1.9,1.2-2.8c0.1-0.2,0.2-0.3,0.4-0.3
|
||||
c0.8,0,1.5,0,2.3,0c0.2,0,0.3,0.1,0.4,0.3c0.4,0.9,0.8,1.9,1.2,2.8c0.2,0.4,0.8,0.7,1.2,0.5c0.9-0.4,1.9-0.8,2.8-1.2
|
||||
c0.2-0.1,0.3-0.1,0.5,0.1c0.5,0.5,1.1,1.1,1.6,1.6c0.1,0.1,0.2,0.2,0.1,0.4c-0.4,1-0.8,1.9-1.2,2.9c-0.1,0.3,0.1,1,0.5,1.1
|
||||
c1,0.4,1.9,0.8,2.9,1.2c0.2,0.1,0.2,0.2,0.2,0.4c0,0.8,0,1.5,0,2.3c0,0.2-0.1,0.3-0.3,0.4c-1,0.4-1.9,0.8-2.9,1.2
|
||||
c-0.3,0.1-0.6,0.8-0.4,1.1c0.4,0.9,0.8,1.9,1.2,2.8c0.1,0.2,0.1,0.3-0.1,0.5c-0.5,0.5-1.1,1.1-1.6,1.6c-0.1,0.1-0.2,0.2-0.4,0.1
|
||||
c-1-0.4-1.9-0.8-2.9-1.2c-0.3-0.1-1,0.1-1.1,0.5c-0.4,1-0.8,1.9-1.2,2.9c-0.1,0.2-0.2,0.3-0.4,0.2C16.7,26.9,16.4,26.9,16,26.9z
|
||||
M15.9,19.9c2.5,0,4.3-2.3,4.2-4.3c-0.1-1.8-1.6-4.1-4.2-4.1c-2.6,0-4.3,2.4-4.2,4.3C11.8,17.6,13.3,19.9,15.9,19.9z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
9
console/src/images/stop.svg
Normal file
9
console/src/images/stop.svg
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve">
|
||||
<path fill="#18A6DF" d="M24.9,25.5H7.5c-0.7,0-1.2-0.5-1.2-1.2V7.5c0-0.7,0.5-1.2,1.2-1.2s1.2,0.5,1.2,1.2v15.6h16.2
|
||||
c0.7,0,1.2,0.5,1.2,1.2C26.1,25,25.6,25.5,24.9,25.5z"/>
|
||||
<path fill="#18A6DF" d="M24.9,25.5c-0.7,0-1.2-0.5-1.2-1.2V8.7H7.5c-0.7,0-1.2-0.5-1.2-1.2s0.5-1.2,1.2-1.2h17.4
|
||||
c0.7,0,1.2,0.5,1.2,1.2v16.8C26.1,25,25.6,25.5,24.9,25.5z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 722 B |
|
|
@ -14,7 +14,7 @@
|
|||
<p class="light-gray">Version <span class="number">1.0.0</span></p>
|
||||
</div>
|
||||
<div id="hf-brand">
|
||||
<img src="images/logo-512.png" width="256" />
|
||||
<img src="images/logo-512.png" width="190" />
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
|
@ -46,31 +46,54 @@
|
|||
|
||||
<div id="tray-focus">
|
||||
<div id="server-focus">
|
||||
<h2>My Server</h2>
|
||||
<div id="left-box" class="server-box">
|
||||
<div class="title">
|
||||
<h4 id="status">STATUS</h4>
|
||||
</div>
|
||||
<div id="server-info">
|
||||
<h2>Home</h2>
|
||||
<div id="left-box" class="server-box">
|
||||
<div class="title">
|
||||
<h4 id="status">STATUS</h4>
|
||||
</div>
|
||||
|
||||
<div id="domain-server-status" class="process-status">
|
||||
<div class="circle"></div>
|
||||
<span>Domain Server</span>
|
||||
<div id="domain-server-status" class="process-status">
|
||||
<div class="circle running"></div>
|
||||
<span>Domain Server</span>
|
||||
</div>
|
||||
<div id="assignment-status" class="process-status">
|
||||
<div class="circle running"></div>
|
||||
<span>Assignment Clients</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="assignment-status" class="process-status">
|
||||
<div class="circle"></div>
|
||||
<span>Assignment Clients</span>
|
||||
<div id="right-box" class="server-box">
|
||||
<div class="title">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="right-box" class="server-box">
|
||||
<div class="title">
|
||||
<div id="manage-server">
|
||||
<div id="manage-buttons">
|
||||
<a id="restart" href="#" class="manage-button">
|
||||
<img src="images/restart.svg" />
|
||||
<p>Restart</p>
|
||||
</a>
|
||||
<a id="stop" href="#" class="manage-button">
|
||||
<img src="images/stop.svg" />
|
||||
<p>Stop</p>
|
||||
</a>
|
||||
<div id="manage-separator">
|
||||
<img src="images/manage-button-sep.svg"/>
|
||||
</div>
|
||||
<a id="settings" href="#" class="manage-button">
|
||||
<img src="images/settings.svg" />
|
||||
<p>Settings</p>
|
||||
</a>
|
||||
<a id="logs" href="#" class="manage-button">
|
||||
<img src="images/logs.svg" />
|
||||
<p>Logs</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="manage-server">
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!-- <h1>Console</h1>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue