qqq-frontend-material-dashboard/src/qqq/styles/qqq-override-styles.css

/*
 * QQQ - Low-code Application Framework for Engineers.
 * Copyright (C) 2021-2022.  Kingsrook, LLC
 * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
 * contact@kingsrook.com
 * https://github.com/Kingsrook/
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as
 * published by the Free Software Foundation, either version 3 of the
 * License, or (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */

.MuiDrawer-docked .MuiPaper-elevation
{
   white-space: normal;
}

.recordQuery .MuiDataGrid-virtualScrollerContent
{
   min-height: calc(100vh - 450px) !important;
}

/* Disable red outlines on clicked cells */
.MuiDataGrid-cell:focus,
.MuiDataGrid-columnHeader:focus,
.MuiDataGrid-columnHeader:focus-within,
.MuiDataGrid-cell:focus-within
{
   outline: none !important;
}

/* lighten & shrink cell font */
.MuiDataGrid-cell
{
   color: rgb(45, 45, 45);
   font-size: 0.85rem;
}

/* lighten & shrink header font */
.MuiDataGrid-columnHeaderTitle
{
   color: rgb(95, 95, 95);
   font-size: 0.75rem;
   font-weight: 500 !important;
}

/* tighten widths in headers */
.MuiDataGrid-iconButtonContainer
{
   width: 20px;
}

/* tighten widths in headers */
.MuiDataGrid-iconButtonContainer .MuiIconButton-root
{
   padding: 2px;
}

/* tighten widths in headers */
.MuiDataGrid-menuIcon
{
   margin-left: -5px !important;
}

/* tighten widths in headers */
.MuiDataGrid-menuIcon .MuiDataGrid-menuIconButton
{
   padding: 2px;
}

/* when checked-column is pinned, its checkboxes disappear as gray-on-gray - this helps. */
.MuiCheckbox-root .MuiSvgIcon-root
{
   background-color: white;
}

/* shrink font on in the pagination control */
.MuiTablePagination-displayedRows,
.MuiTablePagination-selectLabel,
.MuiTablePagination-select.MuiSelect-select.MuiSelect-standard,
.MuiDataGrid-selectedRowCount
{
   font-size: 0.85rem !important;
}

/* try to make the pagination select box look like one */
.MuiTablePagination-select
{
   border: 1px solid rgb(175 175 175) !important;
   border-radius: 5px !important;
}

/* move the green check / red x down to align with the calendar icon */
.MuiFormControl-root
{
   background-position-y: 1.4rem !important;
}

.MuiInputAdornment-sizeMedium *
{
   font-size: .875rem !important;
}

.MuiInput-input, .MuiInputLabel-root
{
   padding-left: 8px !important;
   padding-right: 8px !important;
}

.MuiInputLabel-shrink
{
   padding-top: 2px !important;
   padding-left: 2px !important;
}

.MuiDataGrid-toolbarContainer .selectionTool
{
   margin-left: 40px;
   font-size: 14px;
}

.MuiDataGrid-toolbarContainer .pagination
{
   display: flex;
   flex-grow: 1;
   justify-content: flex-end;
}

/* Help make the radio, text, and icon wrap in a good way */
.doFullValidationRadios label
{
   display: flex;
   align-items: flex-start;
}

/* let long field names in filter dropdown wrap instead of get cut off */
.MuiDataGrid-filterForm .MuiDataGrid-filterFormColumnInput .MuiNativeSelect-select.MuiNativeSelect-standard,
.MuiDataGrid-filterForm .MuiDataGrid-filterFormValueInput .MuiNativeSelect-select.MuiNativeSelect-standard
{
   white-space: normal;
   height: auto;
}
.MuiDataGrid-filterForm
{
   align-items: flex-end;
}

.MuiDataGrid-filterFormValueInput > div
{
   height: auto;
}

/* make filter dropdowns a bit wider, less likely to need to wrap. */
.MuiDataGrid-filterForm .MuiDataGrid-filterFormColumnInput
{
   width: 200px;
}
.MuiDataGrid-filterForm .MuiDataGrid-filterFormValueInput
{
   width: 300px;
}
.MuiDataGrid-filterForm .MuiDataGrid-filterFormOperatorInput
{
   width: 150px;
}

/* Make the drop-down icon for autocompletes match the ones on the native dropdowns. */
.MuiDataGrid-filterForm .MuiDataGrid-filterFormValueInput .MuiAutocomplete-root .MuiAutocomplete-endAdornment
{
   padding-top: 4px;
}
.MuiDataGrid-filterForm .MuiDataGrid-filterFormValueInput .MuiAutocomplete-root .MuiAutocomplete-endAdornment svg
{
   height: 0.625em;
}

/* fix strange size bug on filter autocompletes */
.MuiDataGrid-filterForm .MuiDataGrid-filterFormValueInput>.MuiBox-root>.MuiBox-root:has(>.MuiAutocomplete-root)
{
   margin-bottom: 0;
   width: 100%;
}

/* google drive picker - make it be above our modal */
.picker,
.picker.picker-dialog-bg,
.picker.picker-dialog
{
   z-index: 99999;
}

/* clears the ‘X’ from Internet Explorer */
input[type=search]::-ms-clear { display: none; width : 0; height: 0; }
input[type=search]::-ms-reveal { display: none; width : 0; height: 0; }
/* clears the ‘X’ from Chrome */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { display: none; }

/* Shrink the big margin-bottom on modal processes */
.modalProcess>.MuiBox-root>.MuiBox-root
{
   margin-bottom: 24px;
}

#chip-text-field-container > div > div
{
   background: #F8F8F8;
   height: 330px;
   padding: 10px;
   display: flex;
   flex-wrap: wrap;
}

#chip-text-field-container > div > div > textarea
{
   display: none;
}

#chip-text-field-container > div > div > div
{
   height: 100%;
   overflow: scroll;
}

.MuiChip-root
{
   padding-top: 1px !important;
}

#outlined-multiline-static
{
   padding-left: 10px;
   padding-top: 0px;
   padding-right: 10px;
   padding-bottom: 0px;
   margin-top: 10px;
}

.MuiDataGrid-toolbarContainer .MuiBadge-badge
{
   right: 7px;
   top: 5px;
   background: orange;
}

/* make tags in filter forms not be black bg w/ white text */
.MuiDataGrid-filterForm .MuiAutocomplete-tag
{
   background-color: initial !important;
   color: initial !important;
   border: 1px solid rgb(206, 212, 218);
}
.MuiDataGrid-filterForm .MuiAutocomplete-tag .MuiSvgIcon-root
{
   color: initial !important;
}

.MuiTablePagination-root .MuiTablePagination-toolbar .MuiTablePagination-select
{
   padding-right: 1.125rem !important;
}

.MuiTablePagination-root .MuiSvgIcon-root
{
   display: inline;
   color: gray;
   right: 0.125rem;
}

.devDocumentation ul>li
{
   margin-left: 30px;
}

.devDocumentation *
{
   line-height: 1.5;
}

.devDocumentation p
{
   margin-top: .5rem;
   margin-bottom: .5rem;
}

.devDocumentation code
{
   white-space: pre-wrap;
}

.MuiAutocomplete-input
{
   cursor: pointer;
}

.optimizationRulesCard
{
   font-size: 16px;
}

.optimizationRulesCard TD
{
   font-size: 14px !important;
   vertical-align: top;
}

.optimizationRulesCard A
{
   color: blue;
   font-size: 14px;
}


.auditGroupBlock
{
   position: relative;
}

.auditGroupBlock .singleAuditBlock::before
{
   content: "";
   position: absolute;
   top: 2rem;
   left: 19px;
   height: calc(100% - 60px);
   z-index: 1;
   opacity: 1;
   border-right: 0.0625rem solid rgb(222, 226, 230);
}

.scriptLogsView TD,
.scriptLogsView TH
{
   white-space: nowrap;
}

.fieldLabel
{
   color: rgb(52, 71, 103);
   font-weight: 700;
   padding-right: .5em;
   display: inline;
}

.fieldValue
{
   color: rgb(123, 128, 154);
   font-weight: 400;
   display: inline;
}

.fullScreenWidget
{
   position: fixed !important;
   left: 30px !important;
   width: calc(100vw - 60px) !important;
   top: 30px !important;
   height: calc(100vh - 60px) !important;
   z-index: 1300 !important;
}

.scriptTestForm TEXTAREA
{
   resize: vertical !important;
}

.scriptTestForm .scriptLogLines TD,
.scriptTestForm .scriptLogLines TH
{
   padding-left: 0;
   padding-right: 0;
}

.dashboardDropdownMenu #timeframe-form label
{
   font-size: 0.875rem;
}