dark theme

This commit is contained in:
Devaev Maxim
2018-07-17 01:52:57 +03:00
parent 9afb9ffb95
commit 8fc6b85c0e
2 changed files with 35 additions and 19 deletions

View File

@@ -1,5 +1,6 @@
body { body {
margin: 0px; margin: 0px;
background-color: #36393f;
} }
img#logo { img#logo {
height: 24px; height: 24px;
@@ -19,11 +20,11 @@ ul#ctl {
list-style-type: none; list-style-type: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
background-color: #333; background-color: #202225;
position: fixed; position: fixed;
top: 0; top: 0;
width: 100%; width: 100%;
z-index: 1; z-index: 10;
} }
ul#ctl li a:hover:not(.active) { ul#ctl li a:hover:not(.active) {
background-color: #111; background-color: #111;
@@ -43,7 +44,7 @@ ul#ctl li.ctl-right-sep:not(last-child) {
border-left: 1px solid black; border-left: 1px solid black;
} }
ul#ctl p { ul#ctl p {
color: #aeaeae; color: #b3b3b3;
margin: 0px; margin: 0px;
padding: 15px 16px; padding: 15px 16px;
} }
@@ -53,7 +54,7 @@ ul#ctl img {
} }
ul#ctl a.ctl-item { ul#ctl a.ctl-item {
display: block; display: block;
color: #e1e1e1; color: #b3b3b3;
text-align: center; text-align: center;
padding: 15px 16px; padding: 15px 16px;
text-decoration: none; text-decoration: none;
@@ -63,12 +64,14 @@ div.ctl-dropdown {
display: inline-block; display: inline-block;
} }
div.ctl-dropdown-content { div.ctl-dropdown-content {
border: 1px solid #17191d;
border-radius: 0 0 8px 8px;
display: none; display: none;
position: absolute; position: absolute;
background-color: #e1e1e1; background-color: #282b30;
min-width: 160px; min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 2; z-index: 9;
} }
div.ctl-dropdown:hover .ctl-dropdown-content { div.ctl-dropdown:hover .ctl-dropdown-content {
display: block; display: block;
@@ -77,7 +80,10 @@ div.ctl-dropdown:hover .ctl-item {
background-color: #111; background-color: #111;
} }
div.ctl-dropdown-content button { div.ctl-dropdown-content button {
/*color: #111;*/ box-shadow: none;
border: 0;
color: #b3b3b3;
background-color: #282b30;
display: block; display: block;
width: 100%; width: 100%;
white-space:nowrap; white-space:nowrap;
@@ -85,26 +91,36 @@ div.ctl-dropdown-content button {
font-size: 16px!important; font-size: 16px!important;
text-align: left; text-align: left;
} }
div.ctl-dropdown-content button:last-child {
border-radius: 0 0 8px 8px;
}
div.ctl-dropdown-content button:enabled:hover { div.ctl-dropdown-content button:enabled:hover {
color: white; color: white;
background-color: #5f5f5f!important; background-color: #17191d!important;
}
div.ctl-dropdown-content button:disabled {
color: #36393f;
} }
div.ctl-dropdown-content hr { div.ctl-dropdown-content hr {
margin: 0px; margin: 0px;
display: block;
height: 0;
border: 0;
border-top: 1px solid #17191d;
padding: 0;
} }
div#stream-box { div#stream-box {
box-sizing: border-box; box-sizing: border-box;
display: inline-block; display: inline-block;
background-color: #e5e5f5; background-color: #484b51;
padding: 10px; padding: 10px;
} }
img#stream-image { img#stream-image {
width: 640px; width: 640px;
height: 480px; height: 480px;
display: inline-block; display: inline-block;
border: 1px solid grey; border: 1px solid black;
} }
img.stream-image-active { img.stream-image-active {
cursor: crosshair; cursor: crosshair;

View File

@@ -32,8 +32,8 @@
<div class="ctl-dropdown"> <div class="ctl-dropdown">
<a class="ctl-item" href="#">ATX Buttons&#8628;</a> <a class="ctl-item" href="#">ATX Buttons&#8628;</a>
<div class="ctl-dropdown-content"> <div class="ctl-dropdown-content">
<button id="atx-power-button" onclick="atx.clickButton(this);" href="#">Click Power</button> <button id="atx-power-button" onclick="atx.clickButton(this);" href="#">Click Power <sup><i>short</i></sup></button>
<button id="atx-power-button-long" onclick="atx.clickButton(this);" href="#">Click Power (long)</button> <button id="atx-power-button-long" onclick="atx.clickButton(this);" href="#">Click Power <sup><i>long</i></sup></button>
<hr> <hr>
<button id="atx-reset-button" onclick="atx.clickButton(this);"href="#">Click Reset</button> <button id="atx-reset-button" onclick="atx.clickButton(this);"href="#">Click Reset</button>
</div> </div>