mirror of
https://github.com/logicog/RTLPlayground.git
synced 2026-08-30 14:52:51 +08:00
d00f
4389cfcd8b
Clicking a heading sorted the table but nothing said so afterwards - the only feedback was the rows moving, which is no help when the sort key is a column you are not looking at. Give every sortable heading a permanent marker: a neutral double arrow when it is not the sort key, up or down when it is. The marker sits in its own span so the i18n pass, which replaces the heading text, does not wipe it.
173 lines
3.9 KiB
CSS
173 lines
3.9 KiB
CSS
h1, h2, h3 {
|
|
color: #226;
|
|
}
|
|
ul {
|
|
list-style-type: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 12%;
|
|
height: calc(100% - 50px);
|
|
position: fixed;
|
|
top: 50px;
|
|
overflow: auto;
|
|
}
|
|
|
|
li a {
|
|
background-color: #aaf;
|
|
display: block;
|
|
color: #000;
|
|
padding: 8px 16px;
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* Change the link color on hover */
|
|
li a:hover {
|
|
background-color: #226;
|
|
color: white;
|
|
}
|
|
|
|
table, th, td {
|
|
border: 1px solid #226;
|
|
padding: 8px;
|
|
}
|
|
table {
|
|
border-collapse: collapse;
|
|
width: 60%;
|
|
}
|
|
|
|
td {
|
|
text-align: right;
|
|
}
|
|
|
|
input[type=submit] { padding: 8px 16px;background-color:#aaf;color:#000; margin-bottom: 2em;border-radius: 15px;width: 100%;}
|
|
input[type=submit]:hover { background-color: #226; color: white;}
|
|
input[type=file] { padding: 8px 16px;background-color:#aaf;color:#000; margin-bottom: 2em;border-radius: 15px;width: 60%;}
|
|
input[type=file]:hover { background-color: #226; color: white;}
|
|
b
|
|
button {padding: 8px; background-color:#99f; color:#000;border-radius: 15px;}
|
|
button:hover { background-color: #226; color: white;}
|
|
.action{padding: 8px 16px;margin-top: 2em;margin-right: 3em; background-color: #aaf;color: #000;border-radius: 15px; width: 100%;}
|
|
.action:hover { background-color: #226; color: white;}
|
|
|
|
/* Port selection inputs */
|
|
.psel {
|
|
position: absolute;
|
|
opacity: 0;
|
|
width: 0;
|
|
height: 0;
|
|
margin-top: 1em;
|
|
}
|
|
.psel + img {
|
|
cursor: pointer;
|
|
opacity: 0.4;
|
|
padding: 8px;
|
|
}
|
|
.psel:checked + img {
|
|
/* outline: 2px solid #f00;*/
|
|
opacity: 1.0;
|
|
}
|
|
object, img {
|
|
margin: 0.5em 0.5em;
|
|
}
|
|
.cbgroup {
|
|
display: inline-block;
|
|
text-align: center;
|
|
}
|
|
.cbgroup label {
|
|
display: block;
|
|
}
|
|
|
|
.disabled{ opacity: .4; background-color: #f88; color: #000}
|
|
.isSFP{ opacity: .4; background-color: #660;}
|
|
.isNOK{ color: #900;}
|
|
.isOK{ color: #090;}
|
|
.ip{padding:8px 16px;margin-bottom: 1em;margin-left: 1em}
|
|
.row {display: flex;}
|
|
.rcol {flex: 90%;}
|
|
.lcol {flex: 10%;}
|
|
|
|
/* Login page */
|
|
.login_page {margin: 0; padding: 0; background: #aaf; height: 100vh; overflow: hidden;}
|
|
.center{
|
|
position: absolute; top: 50%; left: 50%;
|
|
transform: translate(-50%, -40% );
|
|
width: 500px; height: 400px;
|
|
background: white;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.center h1 {
|
|
text-align: center;
|
|
border-bottom: 1px solid silver;
|
|
}
|
|
|
|
.center form {
|
|
padding: 0 60px;
|
|
box-sizing: border-box;
|
|
}
|
|
form .txt_field{
|
|
position: relative;
|
|
border-bottom: 2px solid #adadad;
|
|
margin: 30px 0;
|
|
}
|
|
.txt_field input { width: 100%; padding: 0 5px; height: 40px; font-size: 16px; border: none;
|
|
background: none;
|
|
outline: none;}
|
|
.txt_field label { position: absolute; top: 50%; left: 5px; color:#adadad; transform: translateY(-50%);
|
|
font-size: 16px; pointer-events: none;transition: .5s; }
|
|
.txt_field span::before{ content:''; position: absolute; top: 40px; left:0; width: 100%; height: 2px; background: #aaf;}
|
|
.txt_field input:focus ~ label,
|
|
.txt_field input:valid ~ label { top: -5px; color: #aaf; }
|
|
|
|
.tooltip {
|
|
position: relative; display: inline-block; cursor: pointer;
|
|
}
|
|
|
|
|
|
.tooltiptext {
|
|
visibility: hidden;
|
|
width: 260px;
|
|
background-color: #226;
|
|
color: #fff;
|
|
text-align: center;
|
|
border-radius: 6px;
|
|
padding: 5px 0;
|
|
position: absolute;
|
|
z-index: 1;
|
|
top: 80%;
|
|
left: 50%;
|
|
margin-left: -130px;
|
|
}
|
|
|
|
.tooltiptext::after {
|
|
content: "";
|
|
position: absolute;
|
|
bottom: 100%;
|
|
left: 50%;
|
|
margin-left: -5px;
|
|
border-width: 5px;
|
|
border-style: solid;
|
|
border-color: transparent transparent black transparent;
|
|
}
|
|
|
|
|
|
.tooltip:hover .tooltiptext {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
}
|
|
.tt_table {
|
|
width: 100%; font-size:90%;
|
|
}
|
|
.tt_table td {
|
|
text-align: left;
|
|
}
|
|
select { text-align-last: right; font-family: monospace}
|
|
option { direction: rtl; font-family: sans-serif}
|
|
#vlanTable td { text-align: left; }
|
|
|
|
/* L2 table: sortable headers and per-column filters */
|
|
.l2sort{cursor:pointer;user-select:none}
|
|
.l2sort:hover{text-decoration:underline}
|
|
.l2arrow{opacity:0.55;font-size:0.85em}
|
|
.l2filter{width:100%;box-sizing:border-box;font-weight:normal;font-size:0.9em}
|