Clean up control bar padding/margins

Try to make it a bit less messy by trying to get more general rules in
place.
This commit is contained in:
Pierre Ossman 2022-10-13 13:37:22 +02:00
parent a0c4214823
commit 88ccfdc193
2 changed files with 25 additions and 14 deletions

View File

@ -267,13 +267,15 @@ select:active {
pointer-events: auto; pointer-events: auto;
} }
.noVNC_vcenter { .noVNC_vcenter {
display: flex; display: flex !important;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
height: 100%; height: 100%;
margin: 0 !important;
padding: 0 !important;
pointer-events: none; pointer-events: none;
} }
.noVNC_vcenter > * { .noVNC_vcenter > * {
@ -479,14 +481,16 @@ select:active {
right: auto; right: auto;
} }
#noVNC_control_bar .noVNC_scroll { #noVNC_control_bar > .noVNC_scroll {
max-height: 100vh; /* Chrome is buggy with 100% */ max-height: 100vh; /* Chrome is buggy with 100% */
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
padding: 0 10px 0 5px; padding: 0 10px;
} }
.noVNC_right #noVNC_control_bar .noVNC_scroll {
padding: 0 5px 0 10px; #noVNC_control_bar > .noVNC_scroll > * {
display: block;
margin: 10px auto;
} }
/* Control bar hint */ /* Control bar hint */
@ -521,9 +525,7 @@ select:active {
/* Control bar buttons */ /* Control bar buttons */
.noVNC_button { .noVNC_button {
display: block;
padding: 4px 4px; padding: 4px 4px;
margin: 10px 0;
vertical-align: middle; vertical-align: middle;
border:1px solid rgba(255, 255, 255, 0.2); border:1px solid rgba(255, 255, 255, 0.2);
border-radius: 6px; border-radius: 6px;
@ -554,7 +556,7 @@ select:active {
background: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.2);
} }
.noVNC_button.noVNC_hidden { .noVNC_button.noVNC_hidden {
display: none; display: none !important;
} }
/* Panels */ /* Panels */
@ -594,6 +596,17 @@ select:active {
transform: translateX(-75px); transform: translateX(-75px);
} }
.noVNC_panel > * {
display: block;
margin: 10px auto;
}
.noVNC_panel > *:first-child {
margin-top: 0 !important;
}
.noVNC_panel > *:last-child {
margin-bottom: 0 !important;
}
.noVNC_panel hr { .noVNC_panel hr {
border: none; border: none;
border-top: 1px solid rgb(192, 192, 192); border-top: 1px solid rgb(192, 192, 192);
@ -617,7 +630,6 @@ select:active {
padding-right: 8px; padding-right: 8px;
color: white; color: white;
font-size: 20px; font-size: 20px;
margin-bottom: 10px !important;
white-space: nowrap; white-space: nowrap;
} }
.noVNC_panel .noVNC_heading img { .noVNC_panel .noVNC_heading img {
@ -678,7 +690,7 @@ select:active {
#noVNC_modifiers { #noVNC_modifiers {
background-color: rgb(92, 92, 92); background-color: rgb(92, 92, 92);
border: none; border: none;
padding: 0 10px; padding: 10px;
} }
/* Shutdown/Reboot */ /* Shutdown/Reboot */
@ -713,7 +725,6 @@ select:active {
} }
#noVNC_settings ul { #noVNC_settings ul {
list-style: none; list-style: none;
margin: 0px;
padding: 0px; padding: 0px;
} }
#noVNC_setting_port { #noVNC_setting_port {

View File

@ -156,10 +156,10 @@
title="Settings"> title="Settings">
<div class="noVNC_vcenter"> <div class="noVNC_vcenter">
<div id="noVNC_settings" class="noVNC_panel"> <div id="noVNC_settings" class="noVNC_panel">
<ul> <div class="noVNC_heading">
<li class="noVNC_heading">
<img alt="" src="app/images/settings.svg"> Settings <img alt="" src="app/images/settings.svg"> Settings
</li> </div>
<ul>
<li> <li>
<label><input id="noVNC_setting_shared" type="checkbox"> Shared Mode</label> <label><input id="noVNC_setting_shared" type="checkbox"> Shared Mode</label>
</li> </li>