Adjust padding and selector elements
This commit is contained in:
Joshua Boniface
parent
f29f18eb26
commit
78608da00a
368
pvc-vue/src/assets/styles.css
Normal file
368
pvc-vue/src/assets/styles.css
Normal file
@ -0,0 +1,368 @@
|
|||||||
|
/* Global spacing adjustments */
|
||||||
|
.content-grid {
|
||||||
|
gap: 0.25rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-content {
|
||||||
|
padding-top: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Reduce space between page title and content */
|
||||||
|
.content-grid > *:first-child + * {
|
||||||
|
margin-top: 0.375rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Target the specific space between title underline and first card */
|
||||||
|
.content-grid > div:first-child {
|
||||||
|
margin-bottom: 0.375rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Reduce space after PageTitle component */
|
||||||
|
.page-title {
|
||||||
|
margin-bottom: 0.25rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Remove left padding from node tabs */
|
||||||
|
.nav-tabs {
|
||||||
|
padding-left: 0 !important;
|
||||||
|
margin-left: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Ensure node content aligns with left edge */
|
||||||
|
.node-content, .tab-content {
|
||||||
|
padding-left: 0 !important;
|
||||||
|
margin-left: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Target the specific element causing the padding */
|
||||||
|
div.node-tabs {
|
||||||
|
padding-left: 0 !important;
|
||||||
|
padding-right: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* More aggressive targeting for node tabs */
|
||||||
|
.node-overview .nav,
|
||||||
|
.node-overview .nav-tabs,
|
||||||
|
.node-overview ul.nav,
|
||||||
|
.node-overview ul.nav-tabs {
|
||||||
|
padding-left: 0 !important;
|
||||||
|
margin-left: 0 !important;
|
||||||
|
border-left: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Target the first tab item specifically */
|
||||||
|
.node-overview .nav-item:first-child,
|
||||||
|
.node-overview .nav-link:first-child {
|
||||||
|
margin-left: 0 !important;
|
||||||
|
padding-left: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Target any container that might be wrapping the tabs */
|
||||||
|
.node-overview > div,
|
||||||
|
.node-overview > ul {
|
||||||
|
padding-left: 0 !important;
|
||||||
|
margin-left: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Style VM search bar section like node tabs */
|
||||||
|
.vm-search-container,
|
||||||
|
.vm-list-header,
|
||||||
|
.vm-controls {
|
||||||
|
border: none !important;
|
||||||
|
border-bottom: 1px solid rgba(0, 0, 0, 0.125) !important;
|
||||||
|
border-radius: 0 !important;
|
||||||
|
background-color: transparent !important;
|
||||||
|
padding: 0.5rem 0 !important;
|
||||||
|
margin-bottom: 1rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Remove any box shadow from VM search elements */
|
||||||
|
.vm-search-container *,
|
||||||
|
.vm-list-header *,
|
||||||
|
.vm-controls * {
|
||||||
|
box-shadow: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Ensure search input has proper styling */
|
||||||
|
.vm-search-input {
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.2) !important;
|
||||||
|
border-radius: 0.25rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Target the specific VM list controls more directly */
|
||||||
|
.vm-overview .list-vms-container,
|
||||||
|
.vm-overview .vm-controls-container {
|
||||||
|
border: none !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
background: transparent !important;
|
||||||
|
border-bottom: 1px solid rgba(0, 0, 0, 0.125) !important;
|
||||||
|
border-radius: 0 !important;
|
||||||
|
padding-left: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Target the buttons and inputs directly */
|
||||||
|
.vm-overview .btn-group,
|
||||||
|
.vm-overview .input-group {
|
||||||
|
margin: 0 !important;
|
||||||
|
background: transparent !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Target the List VMs button specifically */
|
||||||
|
.vm-overview .btn-secondary,
|
||||||
|
.vm-overview button[type="button"] {
|
||||||
|
background-color: #6c757d !important;
|
||||||
|
border-color: #6c757d !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Super aggressive targeting for VM search container */
|
||||||
|
.vm-list-container > div:first-child,
|
||||||
|
.vm-overview > div:first-child,
|
||||||
|
div[class*="vm-"] > div:first-child {
|
||||||
|
border: none !important;
|
||||||
|
background: transparent !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
border-radius: 0 !important;
|
||||||
|
border-bottom: 1px solid rgba(0, 0, 0, 0.125) !important;
|
||||||
|
padding: 0.5rem 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Target the actual search box and buttons */
|
||||||
|
.input-group,
|
||||||
|
.btn-group {
|
||||||
|
margin-bottom: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Target any card or container in the VM list header */
|
||||||
|
.card,
|
||||||
|
.card-header,
|
||||||
|
.card-body {
|
||||||
|
/* Target only VM list cards, not ValueCards */
|
||||||
|
.vm-list-container .card,
|
||||||
|
.vm-list-container .card-header,
|
||||||
|
.vm-list-container .card-body,
|
||||||
|
.vm-controls-container .card,
|
||||||
|
.vm-controls-container .card-header,
|
||||||
|
.vm-controls-container .card-body {
|
||||||
|
border: none !important;
|
||||||
|
background: transparent !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
padding: 0.5rem 0 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Target the specific vm-controls-container element */
|
||||||
|
div.vm-controls-container {
|
||||||
|
background-color: transparent !important;
|
||||||
|
border-radius: 0 !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
padding: 0.5rem 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Target the light blue background */
|
||||||
|
div.vm-controls-container[data-v-8e678963] {
|
||||||
|
background-color: transparent !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Adjust spacing after page title on VM page */
|
||||||
|
.vm-overview .page-title,
|
||||||
|
.vm-overview .page-title-container {
|
||||||
|
margin-bottom: 0.05rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Ensure consistent spacing between title and controls */
|
||||||
|
.vm-overview .content-grid > *:first-child + * {
|
||||||
|
margin-top: 0.05rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Remove lines under VM names */
|
||||||
|
.vm-list-item,
|
||||||
|
.vm-item {
|
||||||
|
border-bottom: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Ensure only the controls container has the bottom border */
|
||||||
|
.vm-list-container > div:not(:first-child),
|
||||||
|
.vm-overview > div:not(:first-child) {
|
||||||
|
border-bottom: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Further reduce spacing between title and controls */
|
||||||
|
.content-grid > div:first-child {
|
||||||
|
margin-bottom: 0.05rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Extremely aggressive spacing reduction */
|
||||||
|
.page-title + *,
|
||||||
|
.page-title-container + * {
|
||||||
|
margin-top: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Specifically target VM list items to remove bottom borders */
|
||||||
|
.vm-list > div,
|
||||||
|
.vm-list-item,
|
||||||
|
.vm-item,
|
||||||
|
div[class*="vm-list"] > div {
|
||||||
|
border-bottom: none !important;
|
||||||
|
border: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Target the VM list container to remove any borders from its children except the first */
|
||||||
|
.vm-list-container > div:not(:first-child) *,
|
||||||
|
.vm-overview > div:not(:first-child) * {
|
||||||
|
border-bottom: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Zero out all margins between title and controls */
|
||||||
|
.page-title,
|
||||||
|
.page-title-container,
|
||||||
|
.content-grid > div:first-child {
|
||||||
|
margin-bottom: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Reduce padding above the VM controls container */
|
||||||
|
div.vm-controls-container,
|
||||||
|
.vm-list-container > div:first-child {
|
||||||
|
margin-top: 0.05rem !important;
|
||||||
|
padding-top: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Fix double border issue - ensure only one border appears below search */
|
||||||
|
.vm-list-container > div:first-child,
|
||||||
|
.vm-overview > div:first-child,
|
||||||
|
div[class*="vm-"] > div:first-child {
|
||||||
|
border-bottom: 1px solid rgba(0, 0, 0, 0.125) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Remove ALL borders from VM list items - extremely aggressive */
|
||||||
|
.vm-list-container .vm-list-item,
|
||||||
|
.vm-list-container .vm-item,
|
||||||
|
.vm-list-container li,
|
||||||
|
.vm-list-container tr,
|
||||||
|
.vm-list-container div[class*="vm-"],
|
||||||
|
.vm-list > div,
|
||||||
|
.vm-list > li,
|
||||||
|
.vm-list > tr,
|
||||||
|
.vm-list-item,
|
||||||
|
.vm-item,
|
||||||
|
div[class*="vm-list"] > div,
|
||||||
|
div[class*="vm-list"] div {
|
||||||
|
border: none !important;
|
||||||
|
border-bottom: none !important;
|
||||||
|
border-top: none !important;
|
||||||
|
border-left: none !important;
|
||||||
|
border-right: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Ensure VM list container itself doesn't have a border */
|
||||||
|
.vm-list-container {
|
||||||
|
border: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Target the actual VM list to remove borders */
|
||||||
|
.vm-list {
|
||||||
|
border: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Override any hr elements that might be creating lines */
|
||||||
|
.vm-list-container hr,
|
||||||
|
.vm-list hr,
|
||||||
|
.vm-item + hr,
|
||||||
|
.vm-list-item + hr {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Single border under search bar */
|
||||||
|
.vm-controls-container {
|
||||||
|
border: none !important;
|
||||||
|
background: transparent !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Target VM list items specifically */
|
||||||
|
.vm-list-container .vm-list-item {
|
||||||
|
border: none !important;
|
||||||
|
background: transparent !important;
|
||||||
|
padding-top: 0.25rem !important;
|
||||||
|
padding-bottom: 0.25rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Target the VM item content to reduce spacing */
|
||||||
|
.vm-item-content,
|
||||||
|
.vm-list-item > div,
|
||||||
|
button.vm-list-item {
|
||||||
|
padding-top: 0.25rem !important;
|
||||||
|
padding-bottom: 0.25rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Also target any nested content */
|
||||||
|
.vm-name,
|
||||||
|
.vm-status {
|
||||||
|
padding-top: 0.25rem !important;
|
||||||
|
padding-bottom: 0.25rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Remove any dividers between VM items */
|
||||||
|
.vm-list-container .divider,
|
||||||
|
.vm-list-container hr,
|
||||||
|
.vm-list-item::after,
|
||||||
|
.vm-list-item::before {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Adjust spacing between title and search */
|
||||||
|
.page-title + .vm-controls-container {
|
||||||
|
margin-top: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Let's also clean up any duplicate rules */
|
||||||
|
.controls-row {
|
||||||
|
border-bottom: 1px solid rgba(0, 0, 0, 0.125) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Remove border from vm-name elements */
|
||||||
|
.vm-name {
|
||||||
|
border: none !important;
|
||||||
|
border-bottom: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Target both instances of the border */
|
||||||
|
div[class*="vm-"] > div:first-child div[class*="vm-"] > div:first-child,
|
||||||
|
.vm-list-container > div:first-child div[class*="vm-"] > div:first-child {
|
||||||
|
border: none !important;
|
||||||
|
border-bottom: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Super specific targeting for the border issue */
|
||||||
|
div[class*="vm-"] > div:first-child H {
|
||||||
|
border: none !important;
|
||||||
|
border-bottom: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Keep node tabs close to title but adjust content below tabs */
|
||||||
|
.node-overview .node-tabs-wrapper {
|
||||||
|
margin-top: 0.25rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Adjust spacing below tabs to match overview spacing */
|
||||||
|
.node-overview .node-tabs-wrapper + * {
|
||||||
|
margin-top: 0.375rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Ensure consistent spacing in overview page */
|
||||||
|
.overview-container > *:first-child {
|
||||||
|
margin-top: 0.375rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Override spacing specifically for node tabs - keep tight to title */
|
||||||
|
.node-overview .content-grid > *:first-child + * {
|
||||||
|
margin-top: 0.25rem !important; /* Keep tabs close to title */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Adjust spacing between tabs and content below */
|
||||||
|
.node-overview .node-tabs-wrapper {
|
||||||
|
margin-bottom: 0.375rem !important; /* Match overview spacing */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Remove any extra spacing that might be added by other elements */
|
||||||
|
.node-overview .node-details {
|
||||||
|
margin-top: 0 !important;
|
||||||
|
}
|
||||||
@ -1048,4 +1048,40 @@ onUnmounted(() => {
|
|||||||
.section-container.collapsed .section-content-wrapper {
|
.section-container.collapsed .section-content-wrapper {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Target the specific element causing the padding */
|
||||||
|
ul.nav.nav-tabs {
|
||||||
|
padding-left: 0 !important;
|
||||||
|
margin-left: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Target Bootstrap's default tab styling */
|
||||||
|
.nav-tabs {
|
||||||
|
padding-left: 0 !important;
|
||||||
|
margin-left: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Target any list items in the tabs */
|
||||||
|
.nav-tabs > li {
|
||||||
|
margin-left: 0 !important;
|
||||||
|
padding-left: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Target the tab container */
|
||||||
|
.tab-container {
|
||||||
|
padding-left: 0 !important;
|
||||||
|
margin-left: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Target the content grid in nodes view */
|
||||||
|
.nodes-view .content-grid {
|
||||||
|
padding-left: 0 !important;
|
||||||
|
margin-left: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Target all direct children of content-grid in nodes view */
|
||||||
|
.nodes-view .content-grid > * {
|
||||||
|
padding-left: 0 !important;
|
||||||
|
margin-left: 0 !important;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
@ -3,6 +3,9 @@ import { createPinia } from 'pinia';
|
|||||||
import App from './App.vue';
|
import App from './App.vue';
|
||||||
import router from './router';
|
import router from './router';
|
||||||
|
|
||||||
|
// Add global styles
|
||||||
|
import './assets/styles.css';
|
||||||
|
|
||||||
// Create the app
|
// Create the app
|
||||||
const app = createApp(App);
|
const app = createApp(App);
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user