@use 'vars' as v;
@use '../main';
@view-transition {
navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 400ms;
animation-timing-function: ease-in-out;
}
body {
font-family: Roboto, 'Helvetica Neue', sans-serif;
margin: 0;
background-color: var(--p3xr-body-bg, #303030);
color: var(--mat-app-text-color, rgba(255, 255, 255, 0.87));
// Main scrollbar is not needed — .p3xr-layout-content scrolls internally as a
// fixed-height container (see layout.component.scss). The drawer, header and
// footer are all position: fixed and don't participate in body scrolling.
overflow: hidden;
}
body.p3xr-no-main-scroll {
overflow: hidden;
.p3xr-layout-content, .p3xr-layout-content-electron {
overflow: hidden !important;
top: v.$toolbar-height !important;
bottom: v.$toolbar-height !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.p3xr-monitoring-shell-content {
overflow: hidden !important;
}
}
// Scrollbar theming — color-scheme tells the browser to use native dark/light scrollbars
body.p3xr-theme-dark {
color-scheme: dark;
}
body.p3xr-theme-light {
color-scheme: light;
}
[data-color-scheme="dark"] {
color-scheme: dark;
}
[data-color-scheme="light"] {
color-scheme: light;
}
// Global link color — light blue in dark mode for visibility
a {
color: var(--p3xr-link-color, #1a73e8);
}
// Reset MDC typography letter-spacing to use Roboto's natural kerning
:root {
--mat-toolbar-title-text-tracking: normal;
--mat-toolbar-title-text-letter-spacing: normal;
--mdc-list-list-item-label-text-tracking: normal;
--mdc-list-list-item-supporting-text-tracking: normal;
--mdc-filled-button-label-text-tracking: normal;
--mdc-text-button-label-text-tracking: normal;
--mdc-outlined-button-label-text-tracking: normal;
--mdc-tab-indicator-active-indicator-letter-spacing: normal;
--mat-tab-header-label-text-tracking: normal;
--mat-menu-item-label-text-tracking: normal;
--mat-option-label-text-tracking: normal;
--mat-select-trigger-text-tracking: normal;
--mat-form-field-container-text-tracking: normal;
}
*, *::before, *::after {
letter-spacing: normal !important;
}
// Allow MDC list item text to wrap and list items to grow in height
.mat-mdc-list-item {
height: auto !important;
min-height: 48px;
}
.mdc-list-item__primary-text {
white-space: normal !important;
text-overflow: unset !important;
overflow: visible !important;
}
#adsbygoogle-container {
position: fixed;
bottom: 55px;
right: 10px;
z-index: 3;
}
.md-button {
border-radius: v.$border-radius;
}
md-toast {
position: fixed !important;
}
.p3xr-connected-readonly-filler {
height: 40px;
}
md-dialog.fullscreen-dialog {
width: 75%;
}
@media (max-width:959px) {
md-dialog.fullscreen-dialog {
min-height: 100%;
min-width: 100%;
border-radius: 0;
md-dialog-content {
height: 100vh;
md-content {
height: 100%;
}
}
}
}
button > md-icon {
position: relative;
top: -1px;
}
/*
md-dialog md-dialog-actions {
display: flex;
flex-flow: row-reverse;
justify-content: right;
}
md-dialog md-dialog-actions button {
}
*/
.p3xr-animation {
}
.p3xr-theme-light {
fieldset {
border-color: rgba(0, 0, 0, 0.5);
}
}
.p3xr-theme-dark {
fieldset {
border-color: rgba(255, 255, 255, 0.25);
}
::selection {
color: white;
background: black;
}
::-moz-selection {
color: white;
background: black;
}
}
md-toolbar, .md-toolbar-tools {
height: v.$toolbar-height !important;
min-height: v.$toolbar-height !important;
max-height: v.$toolbar-height !important;
}
body.p3xr-no-animation * {
//transition: none;
// weird fix
transition: none !important;
// md-backdrop.md-opaque.ng-enter fix
md-backdrop.md-opaque.ng-enter {
opacity: 0.48;
}
}
#p3xr-redis-ui-bootstrap {
height: 100vh;
}
.fa, .fas, .fab, far, .svg-inline--fa {
transform: scale(1.5);
margin-right: 5px !important;
margin-left: 5px !important;
}
[ng-click] {
cursor: pointer;
}
.md-button {
min-width: auto;
}
.p3xr-md-input-container-no-bottom {
margin-bottom: 0px;
padding-bottom: 0px;
}
.p3xr-md-input-container-no-top {
margin-top: 0px;
padding-top: 0px;
}
.p3xr-md-input-container-bottom-info {
font-size: 12px !important;
color: rgba(0, 0, 0, 0.54) !important;
}
body.p3xr-theme-dark .p3xr-md-input-container-bottom-info {
color: rgba(255, 255, 255, 0.7) !important;
}
.p3xr-typography-ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.p3xr-theme-light {
/*
.p3xr-input {
border-color: rgba(128, 128, 128, 0.5);
}
*/
json-tree .key {
color: black;
font-weight: bold;
}
.p3xr-md-menu-item-selected {
background-color: rgba(0, 0, 0, 0.1) !important;
}
}
.p3xr-theme-dark {
.p3xr-md-menu-item-selected {
background-color: rgba(255, 255, 255, 0.1) !important;
}
json-tree .key {
color: rgba(255, 255, 255, 0.6);
font-weight: bold;
}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: rgba(255, 255, 255, 0.75);
}
/*
.p3xr-input {
background-color: gray;
color: white;
border-color: rgba(200, 200, 200, 0.5);
}
*/
}
.p3xr-pre {
font-family: 'Roboto Mono' !important;
//font-weight: 500;
font-size: 16px;
line-height: 18px;
//white-space: pre;
white-space: pre-wrap;
//word-wrap: break-word !important;
//overflow-wrap: break-word !important;
// white-space: pre-wrap;
word-spacing: 0px;
//white-space: text-wrap;
}
.p3xr-not-selectable {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.p3x-margin-height {
margin-bottom: v.$layout-padding;
}
input {
font-family: 'Roboto' !important;
// font-weight: 500;
}
textarea {
font-family: 'Roboto Mono' !important;
}
treecontrol {
font-family: 'Roboto Mono' !important;
font-weight: 500 !important;
}
md-input-container.p3xr-md-input-container-no-bottom div.md-errors-spacer {
min-height: 0px;
}
.p3xr-roboto-monospace * {
font-family: 'Roboto Mono' !important;
font-weight: 500 !important;
}
.p3xr-padding {
padding: 8px;
}
.md-tooltip {
background-color: black !important;
color: white !important;
}
.md-raised:focus {
outline: -webkit-focus-ring-color auto 1px;
}