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 {
|
||||
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>
|
||||
@ -3,6 +3,9 @@ import { createPinia } from 'pinia';
|
||||
import App from './App.vue';
|
||||
import router from './router';
|
||||
|
||||
// Add global styles
|
||||
import './assets/styles.css';
|
||||
|
||||
// Create the app
|
||||
const app = createApp(App);
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user