Cosmetic change for UI
An incredibly trivial (but nice looking!) change for the main UI. The accent / hover color and loading spinner color now use colors taken directly from the Airship logo. It really ties the room together. Change-Id: I3421753b68e879590466b1e7f7d9b7efd9e34405
This commit is contained in:
Matthew Fuller
parent
f79fb476b1
commit
7271bb08fd
@ -1,43 +0,0 @@
|
||||
/* loading spinner CSS taken from SpinKit, http://tobiasahlin.com/spinkit/ */
|
||||
|
||||
.spinner {
|
||||
margin: 100px auto 0;
|
||||
width: 70px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.spinner > div {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background-color: #333;
|
||||
|
||||
border-radius: 100%;
|
||||
display: inline-block;
|
||||
-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
|
||||
animation: sk-bouncedelay 1.4s infinite ease-in-out both;
|
||||
}
|
||||
|
||||
.spinner .bounce1 {
|
||||
-webkit-animation-delay: -0.32s;
|
||||
animation-delay: -0.32s;
|
||||
}
|
||||
|
||||
.spinner .bounce2 {
|
||||
-webkit-animation-delay: -0.16s;
|
||||
animation-delay: -0.16s;
|
||||
}
|
||||
|
||||
@-webkit-keyframes sk-bouncedelay {
|
||||
0%, 80%, 100% { -webkit-transform: scale(0) }
|
||||
40% { -webkit-transform: scale(1.0) }
|
||||
}
|
||||
|
||||
@keyframes sk-bouncedelay {
|
||||
0%, 80%, 100% {
|
||||
-webkit-transform: scale(0);
|
||||
transform: scale(0);
|
||||
} 40% {
|
||||
-webkit-transform: scale(1.0);
|
||||
transform: scale(1.0);
|
||||
}
|
||||
}
|
||||
@ -14,7 +14,7 @@
|
||||
<script src="js/common.js"></script>
|
||||
<script src="js/coreui-3.2.0/vendors/@coreui/coreui/js/coreui.bundle.min.js"></script>
|
||||
<link href="js/coreui-3.2.0/css/style.css" rel="stylesheet">
|
||||
<link href="css/spinner.css" rel="stylesheet">
|
||||
<link href="style.css" rel="stylesheet">
|
||||
<script>
|
||||
onload = () => {
|
||||
const webview = document.querySelector("webview")
|
||||
|
||||
@ -175,7 +175,7 @@ a {
|
||||
}
|
||||
|
||||
a,a:hover {
|
||||
color: #321fdb;
|
||||
color: #65c7c2;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
@ -9855,7 +9855,7 @@ html:not([dir="rtl"]) .c-sidebar.c-sidebar-show.c-sidebar-right, html:not([dir="
|
||||
|
||||
.c-sidebar .c-sidebar-nav-link:hover, .c-sidebar .c-sidebar-nav-dropdown-toggle:hover {
|
||||
color: #fff;
|
||||
background: #321fdb;
|
||||
background: #65c7c2;
|
||||
}
|
||||
|
||||
.c-sidebar .c-sidebar-nav-link:hover .c-sidebar-nav-icon, .c-sidebar .c-sidebar-nav-dropdown-toggle:hover .c-sidebar-nav-icon {
|
||||
@ -9957,7 +9957,7 @@ html:not([dir="rtl"]) .c-sidebar.c-sidebar-show.c-sidebar-right, html:not([dir="
|
||||
}
|
||||
|
||||
.c-sidebar.c-sidebar-minimized .c-sidebar-nav-item:hover > .c-sidebar-nav-link, .c-sidebar.c-sidebar-minimized .c-sidebar-nav-item:hover > .c-sidebar-nav-dropdown-toggle {
|
||||
background: #321fdb;
|
||||
background: #65c7c2;
|
||||
}
|
||||
|
||||
.c-sidebar.c-sidebar-minimized .c-sidebar-nav-item:hover > .c-sidebar-nav-link .c-sidebar-nav-icon, .c-sidebar.c-sidebar-minimized .c-sidebar-nav-item:hover > .c-sidebar-nav-dropdown-toggle .c-sidebar-nav-icon {
|
||||
@ -9977,7 +9977,7 @@ html:not([dir="rtl"]) .c-sidebar.c-sidebar-show.c-sidebar-right, html:not([dir="
|
||||
}
|
||||
|
||||
.c-sidebar.c-sidebar-minimized .c-sidebar-nav > .c-sidebar-nav-dropdown:hover {
|
||||
background: #321fdb;
|
||||
background: #65c7c2;
|
||||
}
|
||||
|
||||
.c-sidebar.c-sidebar-light {
|
||||
|
||||
175
web/style.css
175
web/style.css
@ -1,140 +1,81 @@
|
||||
#searchInput {
|
||||
background-image: url('/css/searchicon.png'); /* Add a search icon to input */
|
||||
background-position: 10px 12px; /* Position the search icon */
|
||||
background-repeat: no-repeat; /* Do not repeat the icon image */
|
||||
width: 100%; /* Full-width */
|
||||
font-size: 16px; /* Increase font-size */
|
||||
padding: 12px 20px 12px 40px; /* Add some padding */
|
||||
border: 1px solid #ddd; /* Add a grey border */
|
||||
margin-bottom: 12px; /* Add some space below the input */
|
||||
}
|
||||
/* loading spinner CSS taken from SpinKit, http://tobiasahlin.com/spinkit/ */
|
||||
|
||||
.airshipTable {
|
||||
border-collapse: collapse; /* Collapse borders */
|
||||
width: 100%; /* Full-width */
|
||||
border: 1px solid #ddd; /* Add a grey border */
|
||||
font-size: 18px; /* Increase font-size */
|
||||
}
|
||||
|
||||
.airshipTable th, .airshipTable td {
|
||||
text-align: left; /* Left-align text */
|
||||
padding: 12px; /* Add padding */
|
||||
}
|
||||
|
||||
.airshipTable tr {
|
||||
/* Add a bottom border to all table rows */
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.airshipTable tr.header, .airshipTable tr:hover {
|
||||
/* Add a grey background color to the table header and on hover */
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
|
||||
.topnav {
|
||||
overflow: hidden;
|
||||
background-color: #0077d1;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.topnav a {
|
||||
float: left;
|
||||
display: block;
|
||||
color: #f2f2f2;
|
||||
.spinner {
|
||||
margin: 100px auto 0;
|
||||
width: 70px;
|
||||
text-align: center;
|
||||
padding: 14px 16px;
|
||||
text-decoration: none;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.topnavsuite {
|
||||
float: left;
|
||||
display: block;
|
||||
color: #bfbfbf;
|
||||
text-align: center;
|
||||
padding: 12px 12px;
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
.spinner > div {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background-color: #141f47;
|
||||
|
||||
border-radius: 100%;
|
||||
display: inline-block;
|
||||
-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
|
||||
animation: sk-bouncedelay 1.4s infinite ease-in-out both;
|
||||
}
|
||||
|
||||
.topnavname {
|
||||
float: right;
|
||||
display: block;
|
||||
color: #bfbfbf;
|
||||
text-align: center;
|
||||
padding: 12px 12px;
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
.spinner .bounce1 {
|
||||
-webkit-animation-delay: -0.32s;
|
||||
animation-delay: -0.32s;
|
||||
}
|
||||
|
||||
.active {
|
||||
background-color: #4CAF50;
|
||||
color: white;
|
||||
.spinner .bounce2 {
|
||||
-webkit-animation-delay: -0.16s;
|
||||
animation-delay: -0.16s;
|
||||
}
|
||||
|
||||
.topnav .icon {
|
||||
display: none;
|
||||
@-webkit-keyframes sk-bouncedelay {
|
||||
0%, 80%, 100% { -webkit-transform: scale(0) }
|
||||
40% { -webkit-transform: scale(1.0) }
|
||||
}
|
||||
|
||||
.sticky {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%
|
||||
@keyframes sk-bouncedelay {
|
||||
0%, 80%, 100% {
|
||||
-webkit-transform: scale(0);
|
||||
transform: scale(0);
|
||||
} 40% {
|
||||
-webkit-transform: scale(1.0);
|
||||
transform: scale(1.0);
|
||||
}
|
||||
}
|
||||
|
||||
.sticky + .content {
|
||||
padding-top: 102px;
|
||||
/* accordion taken from w3schools, https://www.w3schools.com/howto/howto_js_accordion.asp */
|
||||
.accordion {
|
||||
background-color: #eee;
|
||||
color: #444;
|
||||
cursor: pointer;
|
||||
padding: 18px;
|
||||
width: 100%;
|
||||
border: none;
|
||||
text-align: left;
|
||||
outline: none;
|
||||
font-size: 15px;
|
||||
transition: 0.4s;
|
||||
}
|
||||
|
||||
.container {
|
||||
position:relative;
|
||||
z-index:1;
|
||||
.active, .accordion:hover {
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
float: left;
|
||||
overflow: hidden;
|
||||
.accordion:after {
|
||||
content: '\002B';
|
||||
color: #777;
|
||||
font-weight: bold;
|
||||
float: right;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.dropdown .dropbtn {
|
||||
font-size: 17px;
|
||||
border: none;
|
||||
outline: none;
|
||||
color: white;
|
||||
padding: 14px 16px;
|
||||
background-color: inherit;
|
||||
font-family: inherit;
|
||||
margin: 0;
|
||||
.active:after {
|
||||
content: "\2212";
|
||||
}
|
||||
|
||||
.dropdown-content {
|
||||
display: none;
|
||||
position: absolute;
|
||||
background-color: #f9f9f9;
|
||||
min-width: 160px;
|
||||
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.dropdown-content a {
|
||||
float: none;
|
||||
color: black;
|
||||
padding: 12px 16px;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.topnav a:hover, .dropdown:hover .dropbtn {
|
||||
background-color: #555;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.dropdown-content a:hover {
|
||||
background-color: #ddd;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.dropdown:hover .dropdown-content {
|
||||
display: block;
|
||||
.panel {
|
||||
padding: 0 18px;
|
||||
background-color: white;
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.2s ease-out;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user