*/
.card.card-clear {
background-color: rgba(255, 255, 255, 0.25);
}
.card-header {
padding: 0.75rem 0.75rem;
}
.project-tabs {
padding: 0;
}
.project-tabs .nav-tabs {
background-color: var(--installa-primary);
color: var(--installa-gray-700);
}
.project-tabs .nav-tabs .nav-link {
padding: 0.75rem 0.75rem;
border-right: 1px solid var(--installa-info) !important;
}
/* ==========================================================================
7. TEXT COLORS FOR CARDS
========================================================================== */
/**
* Dark text for light-background containers
* Ensures readability on white/light card backgrounds
*/
.card-body,
.card-footer,
.modal-body,
.modal-footer,
.table,
.list-group-item,
.accordion-body,
.alert,
label {
color: #344050;
}
/**
* Keep inherited text color for glass/transparent cards
* These cards have dark backgrounds, so text should stay light
*/
.card-glass .card-body,
.card-glass .card-footer,
.card-glass .list-group-item,
.card-clear .card-body,
.card-clear .card-footer {
color: inherit;
}
/**
* Adjust .text-mid for better visibility on glass backgrounds
* Darker than normal to contrast with translucent backgrounds
*/
.card-glass .text-mid,
.card-clear .text-mid {
color: rgba(60, 60, 60, 0.7) !important;
}
/* ==========================================================================
8. BUTTON OVERRIDES
========================================================================== */
/**
* Outline buttons need solid-ish backgrounds
* to be visible against translucent card backgrounds and other dark backgrounds
*/
.btn-outline-primary {
background-color: rgba(13, 110, 253, 0.5);
border-color: #0d6efd;
color: #fff;
}
.btn-outline-secondary {
background-color: rgba(108, 117, 125, 0.5);
border-color: #6c757d;
color: #fff;
}
.btn-outline-success {
background-color: rgba(25, 135, 84, 0.5);
border-color: #198754;
color: #fff;
}
.btn-outline-info {
background-color: rgba(13, 202, 240, 0.5);
border-color: #0dcaf0;
color: #fff;
}
.btn-outline-warning {
background-color: rgba(255, 193, 7, 0.5);
border-color: #ffc107;
color: #000;
}
.btn-outline-danger {
background-color: rgba(220, 53, 69, 0.5);
border-color: #dc3545;
color: #fff;
}
.btn-outline-light {
background-color: rgba(225, 225, 225, 0.2);
border-color: rgba(225, 225, 225, 0.5);
color: #777;
}
/* ==========================================================================
9. FORM INPUT ADJUSTMENTS
========================================================================== */
/** More vertical, less horizontal padding for inputs */
.form-control,
.form-select {
padding: 0.5rem 0.5rem;
border: 1px solid #ccc;
}
/* ==========================================================================
10. CARD HEADER/BODY/FOOTER CONTRAST
========================================================================== */
.card.card-glass {
background-color: rgba(255, 255, 255, 0.80);
}
/** Standard cards: white header, light gray body/footer */
.card:not(.card-glass):not(.card-clear)>.card-header {
background-color: rgba(255, 255, 255, 1);
}
.card:not(.card-glass):not(.card-clear)>.card-body {
background-color: rgba(248, 249, 250, 1);
}
.card:not(.card-glass):not(.card-clear)>.card-footer {
background-color: rgba(248, 249, 250, 1);
}
/** Glass cards: subtle transparent backgrounds */
.card-glass>.card-header {
background-color: rgba(255, 255, 255, 0.15);
}
.card-glass>.card-body {
background-color: rgba(0, 0, 0, 0.03);
}
.card-glass>.card-footer {
background-color: rgba(0, 0, 0, 0.05);
}
/* ==========================================================================
11. TABLE STYLES
========================================================================== */
/** Large row variant for emphasis */
tr.bigrow {
font-size: 150%;
}
/* ==========================================================================
12. DEVELOPMENT HELPERS
========================================================================== */
/**
* Visual indicator for work-in-progress features
* Usage:
*/
.development-placeholder {
opacity: 0.9;
outline: 1px dashed red;
box-shadow: inset 0 0 10px 10px rgba(255, 0, 0, 0.5);
}
/* ==========================================================================
13. USER BADGE COMPONENT
========================================================================== */
/**
* Compact user display with avatar
* Usage:
Name
*/
.user-badge {
display: inline-block;
padding: 2px;
border: 1px solid #eee;
background: #fff;
color: #111;
border-radius: 24px;
text-align: left;
min-width: 160px;
}
.user-badge span {
padding: 0 10px 0 0;
}
.user-badge img {
width: 32px;
height: 32px;
margin-right: 8px;
border-radius: 16px;
}
.user-badge:hover {
background-color: #106DB8;
}
.user-badge:hover span {
color: #fff;
}
/* ==========================================================================
14. CONTENT EDITABLE STYLES
========================================================================== */
/** Remove default outline for contenteditable elements */
[contenteditable] {
outline: 0px solid transparent;
}
/** Visual indicator when editing inline content */
.editing {
outline: 5px dashed rgba(252, 151, 0, 0.9);
}
/* ==========================================================================
15. NOTEBOARD COMPONENT
========================================================================== */
/**
* Sticky note / noteboard styling
* Yellow background reminiscent of physical sticky notes
*/
.noteboard {
padding: 20px;
font-size: 22px;
line-height: 140%;
color: #171717;
background: #F5EEA6;
}
/** Noteboard in edit mode - more vibrant, with inner shadow */
.noteboard.editing {
background-color: #f9f193;
box-shadow: inset 2px 2px 1em rgb(201, 154, 5);
color: #000;
font-style: italic;
}
/* ==========================================================================
16. ADDRESS/MAP STYLES
========================================================================== */
/** Responsive address map image */
.address-map {
max-width: 100%;
height: auto;
margin: 0 auto;
max-height: 240px;
width: 100%;
}
/* ==========================================================================
17. FORM HELP BLOCKS
========================================================================== */
/** Help text below form inputs - hidden until hover */
.main-form-area .help-block {
font-size: 14px;
line-height: 16px;
margin-top: 2px;
margin-bottom: 0;
padding: 0;
opacity: 0;
}
.main-form-area input:hover+.help-block,
.main-form-area select:hover+.help-block,
.main-form-area textarea:hover+.help-block {
opacity: 0.7;
transition: opacity 0.3s ease-in-out;
}
/** Required field indicator (asterisk) */
.main-form-area .form-group .control-label sup {
font-size: 18px;
color: #FF9719;
line-height: 80%;
}
/* ==========================================================================
18. CURSOR UTILITIES
========================================================================== */
/**
* Cursor utility classes for interactive elements
* Usage:
for grab cursor on hover
*/
.alias {
cursor: alias;
}
.all-scroll {
cursor: all-scroll;
}
.auto {
cursor: auto;
}
.cell {
cursor: cell;
}
.col-resize {
cursor: col-resize;
}
.context-menu {
cursor: context-menu;
}
.copy {
cursor: copy;
}
.crosshair {
cursor: crosshair;
}
.default {
cursor: default;
}
.e-resize {
cursor: e-resize;
}
.ew-resize {
cursor: ew-resize;
}
.grab {
cursor: -webkit-grab;
cursor: grab;
}
.grabbing {
cursor: -webkit-grabbing;
cursor: grabbing;
}
.help {
cursor: help;
}
.move {
cursor: move;
}
.n-resize {
cursor: n-resize;
}
.ne-resize {
cursor: ne-resize;
}
.nesw-resize {
cursor: nesw-resize;
}
.ns-resize {
cursor: ns-resize;
}
.nw-resize {
cursor: nw-resize;
}
.nwse-resize {
cursor: nwse-resize;
}
.no-drop {
cursor: no-drop;
}
.none {
cursor: none;
}
.not-allowed {
cursor: not-allowed;
}
.pointer {
cursor: pointer;
}
.progress {
cursor: progress;
}
.row-resize {
cursor: row-resize;
}
.s-resize {
cursor: s-resize;
}
.se-resize {
cursor: se-resize;
}
.sw-resize {
cursor: sw-resize;
}
.text {
cursor: text;
}
.w-resize {
cursor: w-resize;
}
.wait {
cursor: wait;
}
.zoom-in {
cursor: zoom-in;
}
.zoom-out {
cursor: zoom-out;
}