Files
airshipui/web/style.css
Schiefelbein, Andrew 37be06e6dc [WIP] transform airship ui into a standalone electron app
Removing octant reference for now, it will need to be
later embedded into the ui

Working on this will require these commands to be run in
the web directory:
npm install
npm install --save-dev electron

behind a proxy npm install may have issues, this might work:
npx cross-env ELECTRON_GET_USE_PROXY=true GLOBAL_AGENT_HTTPS_PROXY=
http://<proxy>:<port> npm install -D electron@latest

Change-Id: I5bd054a767fe8ab7b0461a16eced1921c4de11f6
2020-04-30 08:54:09 -05:00

167 lines
3.4 KiB
CSS
Executable File

/* taken from w3school: https://www.w3schools.com/howto/howto_js_filter_table.asp */
#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 */
}
.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;
}
/* Add a black background color to the top navigation */
.topnav {
background-color: #0077d1;
overflow: hidden;
width: 100%;
z-index:3;
}
.sticky {
position: fixed;
top: 0;
width: 100%
}
.sticky + .content {
padding-top: 102px;
}
.container {
position:relative;
z-index:1;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
display: block;
color: #ffffff;
text-align: center;
padding: 12px 12px;
text-decoration: none;
font-size: 14px;
}
.topnavsuite {
float: left;
display: block;
color: #bfbfbf;
text-align: center;
padding: 12px 12px;
text-decoration: none;
font-size: 14px;
}
.topnavname {
float: right;
display: block;
color: #bfbfbf;
text-align: center;
padding: 12px 12px;
text-decoration: none;
font-size: 14px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
@media screen and (max-width: 745px) {
.topnav a {
float: none;
display: block;
text-align: left;
}
.topnavsuite {
float: none;
}
.topnavname {
display: none;
}
}
/* Add an active class to highlight the current page */
.active {
background-color: #4CAF50;
color: white;
}
.highlight {
background-color: #fff2ac;
background-image: linear-gradient(to right, #ffe359 0%, #fff2ac 100%);
}
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}
/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
background-color: #555;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text */
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
/* Fade in tooltip */
opacity: 0;
transition: opacity 0.3s;
}
/* Tooltip arrow */
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}