mirror of
https://github.com/clearml/clearml-web
synced 2025-06-26 18:27:02 +00:00
955 lines
18 KiB
SCSS
955 lines
18 KiB
SCSS
@use '@angular/material' as mat;
|
|
@import "angular-notifier/styles.scss";
|
|
@import "angular-notifier/styles/themes/theme-material.scss";
|
|
@import "shared/ui-components/styles/notifications";
|
|
// @import "ngx-markdown-editor/assets/highlight.js/agate.min.css";
|
|
@import "shared/ui-components/styles/material-palette";
|
|
@import "assets/fonts/trains-icons.scss";
|
|
@import "layout/layout";
|
|
|
|
@include mat.core();
|
|
$custom-typography: mat.define-typography-config(
|
|
$font-family: $font-family-base
|
|
);
|
|
|
|
@include mat.typography-hierarchy($custom-typography);
|
|
@include mat.all-component-typographies($custom-typography);
|
|
|
|
$allegro-palette-primary: mat.define-palette($mat-allegro);
|
|
$allegro-palette-accent: mat.define-palette($mat-allegro, A400, A100, A400);
|
|
|
|
$sm-palette-primary: mat.define-palette($sm-purple);
|
|
$sm-palette-accent: mat.define-palette($sm-purple, A100, A200, A400);
|
|
$sm-palette-warn: mat.define-palette(mat.$purple-palette);
|
|
|
|
$sm-neon-palette-primary: mat.define-palette($sm-neon);
|
|
$sm-neon-palette-accent: mat.define-palette($sm-neon, A200, A100, A400);
|
|
|
|
$dark-theme: mat.define-dark-theme((
|
|
color: (
|
|
primary: $allegro-palette-primary,
|
|
accent: $allegro-palette-accent
|
|
),
|
|
typography: $custom-typography,
|
|
density: -2
|
|
));
|
|
|
|
$light-theme: mat.define-light-theme((
|
|
color: (
|
|
primary: $allegro-palette-primary,
|
|
accent: $allegro-palette-accent
|
|
),
|
|
typography: $custom-typography,
|
|
));
|
|
|
|
$sm-theme: mat.define-light-theme((
|
|
color: (
|
|
primary: $sm-palette-primary,
|
|
accent: $sm-palette-accent,
|
|
warn: $sm-palette-warn
|
|
),
|
|
typography: $custom-typography
|
|
));
|
|
|
|
$sm-neon-theme: mat.define-dark-theme((
|
|
color: (
|
|
primary: $sm-neon-palette-primary,
|
|
accent: $sm-neon-palette-accent,
|
|
),
|
|
typography: $custom-typography
|
|
));
|
|
|
|
//@include mat.form-field-theme($light-theme);
|
|
@include mat.progress-spinner-theme($light-theme);
|
|
@include mat.progress-bar-theme($light-theme);
|
|
@include mat.datepicker-color($light-theme);
|
|
@include mat.tooltip-theme($sm-theme);
|
|
@include mat.menu-theme($light-theme);
|
|
@include mat.autocomplete-theme($light-theme);
|
|
@include mat.select-theme($light-theme);
|
|
|
|
.dark-outline {
|
|
@include mat.menu-color($dark-theme);
|
|
@include mat.autocomplete-color($dark-theme);
|
|
@include mat.select-color($dark-theme);
|
|
}
|
|
|
|
.dark-theme {
|
|
// @include mat.all-component-themes($dark-theme);
|
|
@include mat.core-theme($dark-theme);
|
|
@include mat.form-field-theme($dark-theme);
|
|
@include mat.input-theme($dark-theme);
|
|
@include mat.dialog-theme($dark-theme);
|
|
@include mat.chips-theme($dark-theme);
|
|
@include mat.button-theme($dark-theme);
|
|
@include mat.fab-theme($dark-theme);
|
|
@include mat.icon-button-theme($dark-theme);
|
|
@include mat.slide-toggle-theme($sm-neon-theme);
|
|
@include mat.slider-theme($sm-neon-theme);
|
|
@include mat.radio-color($dark-theme);
|
|
@include mat.divider-color($dark-theme);
|
|
@include mat.checkbox-theme($dark-theme);
|
|
@include mat.list-theme($dark-theme);
|
|
|
|
--mdc-typography-body1-letter-spacing: 0;
|
|
--mdc-typography-button-letter-spacing: 0;
|
|
.mat-mdc-slide-toggle{
|
|
--mdc-switch-state-layer-size: 24px;
|
|
}
|
|
|
|
.mat-mdc-checkbox .mdc-checkbox {
|
|
--mdc-checkbox-selected-icon-color: #{$purple};
|
|
--mdc-checkbox-selected-hover-icon-color: #{$purple};
|
|
--mdc-checkbox-selected-focus-icon-color: #{$purple};
|
|
}
|
|
|
|
.mat-expansion-panel-header-description, .mat-expansion-indicator {
|
|
--mat-expansion-header-indicator-color: #{$blue-300};
|
|
}
|
|
|
|
.link {
|
|
&:hover {
|
|
text-decoration: underline;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
|
|
.light-theme {
|
|
@include mat.core-color($light-theme);
|
|
@include mat.form-field-color($light-theme);
|
|
@include mat.input-color($light-theme);
|
|
@include mat.dialog-color($light-theme);
|
|
@include mat.chips-color($light-theme);
|
|
@include mat.button-color($light-theme);
|
|
@include mat.fab-color($light-theme);
|
|
@include mat.icon-button-color($light-theme);
|
|
@include mat.slide-toggle-color($sm-theme);
|
|
@include mat.slider-color($sm-theme);
|
|
@include mat.radio-color($sm-theme);
|
|
@include mat.divider-color($light-theme);
|
|
@include mat.checkbox-color($sm-theme);
|
|
@include mat.list-color($light-theme);
|
|
|
|
--mdc-typography-body1-letter-spacing: 0;
|
|
--mdc-typography-button-letter-spacing: 0;
|
|
--mdc-switch-state-layer-size: 24px;
|
|
|
|
--bs-border-width: 1px #{$blue-300};
|
|
|
|
mat-progress-bar {
|
|
border-radius: 4px;
|
|
box-shadow: 0 0 0 1px $white, 0 0 0 3px lighten($purple, 30%);
|
|
--mdc-linear-progress-active-indicator-color: #{lighten($purple, 10%)};
|
|
--mdc-linear-progress-track-height: 12px;
|
|
}
|
|
|
|
.mat-mdc-radio-button, .mat-mdc-radio-button.mat-accent {
|
|
--mdc-radio-disabled-selected-icon-color: #{$blue-300};
|
|
--mdc-radio-disabled-unselected-icon-color: #{$blue-300};
|
|
}
|
|
|
|
.mat-drawer {
|
|
border-right: solid 1px $blue-100;
|
|
}
|
|
|
|
.mat-expansion-panel-header-description, .mat-expansion-indicator:after {
|
|
color: $blue-300;
|
|
}
|
|
|
|
.mat-mdc-nav-list {
|
|
--mdc-list-list-item-label-text-size: 13px;
|
|
--mdc-list-list-item-label-text-weight: 500;
|
|
--mdc-list-list-item-label-text-color: #{$blue-400};
|
|
--mdc-list-list-item-selected-label-text-color: white;
|
|
|
|
.mat-mdc-list-item.selected {
|
|
.mat-mdc-menu-item-text, .mdc-list-item__primary-text {
|
|
color: white;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
* {
|
|
outline: none !important;
|
|
}
|
|
|
|
html, body {
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: $font-family-base;
|
|
font-size: 14px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
|
|
.al-header {
|
|
font-weight: 500;
|
|
margin: 0;
|
|
}
|
|
|
|
h3.al-header {
|
|
font-size: 15px;
|
|
}
|
|
|
|
h4.al-header {
|
|
font-size: 14px;
|
|
}
|
|
|
|
h5.al-header {
|
|
font-weight: normal;
|
|
}
|
|
|
|
.font-weight-bold {
|
|
font-weight: bold;
|
|
}
|
|
|
|
span.highlight-text {
|
|
background: $neon-yellow;
|
|
border: 1px solid darken($neon-yellow, 5%);
|
|
border-radius: 4px;
|
|
padding: 0 2px;
|
|
|
|
&.current-match {
|
|
background: #f5d655;
|
|
border: 1px solid darken(#f5d655, 15%);
|
|
}
|
|
}
|
|
|
|
hr {
|
|
border: none;
|
|
border-top: 1px solid rgba(0, 0, 0, .1);
|
|
|
|
&.dark {
|
|
border-top: 1px solid $blue-600;
|
|
}
|
|
}
|
|
|
|
.pointer {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.cursor-default {
|
|
cursor: default;
|
|
}
|
|
|
|
.pointer-events-none {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.noselect {
|
|
user-select: none;
|
|
}
|
|
|
|
.grab {
|
|
cursor: grab;
|
|
}
|
|
|
|
.al-danger {
|
|
background: #ffcccc !important;
|
|
|
|
&:hover {
|
|
background: #ffb4b4 !important;
|
|
}
|
|
|
|
&:active {
|
|
background: #ff7272 !important;
|
|
}
|
|
}
|
|
|
|
//// fix for calendar v15 mix with v14
|
|
//.dark-theme, .light-theme {
|
|
// .mat-datepicker-content {
|
|
// .mat-mdc-icon-button.mat-mdc-button-base {
|
|
// width: 40px;
|
|
// height: 40px;
|
|
// padding: 8px;
|
|
// }
|
|
//
|
|
// .mat-calendar-body-selected {
|
|
// background-color: $blue-200;
|
|
// }
|
|
//
|
|
// .mat-mdc-button:not(:disabled) {
|
|
// color: $blue-700;
|
|
// }
|
|
//
|
|
// .mat-calendar-body-label, .mat-calendar-period-button {
|
|
// font-size: 14px;
|
|
// font-weight: 500;
|
|
// }
|
|
//
|
|
// .mat-calendar-hidden-label {
|
|
// display: none;
|
|
// }
|
|
// }
|
|
//}
|
|
|
|
mat-expansion-panel {
|
|
box-shadow: unset !important;
|
|
|
|
.mat-expansion-panel-header {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.mat-expansion-panel-header {
|
|
font-family: $font-family-base, sans-serif;
|
|
}
|
|
|
|
.al-empty-collapse .mat-expansion-panel-header-title .al-header.sub-header {
|
|
color: #ced1db;
|
|
}
|
|
|
|
.mat-expansion-panel-header.al-empty-collapse {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.al-empty-collapse .mat-expansion-indicator {
|
|
display: none;
|
|
}
|
|
|
|
.al-success {
|
|
background: #effff1 !important;
|
|
}
|
|
|
|
.al-primary {
|
|
background: $faint-gray !important;
|
|
}
|
|
|
|
.mat-mdc-radio-button.sm {
|
|
--mdc-radio-state-layer-size: 16px;
|
|
|
|
.mdc-radio {
|
|
height: 16px;
|
|
}
|
|
|
|
.mdc-radio__background {
|
|
width: 16px;
|
|
height: 16px;
|
|
|
|
.mdc-radio__inner-circle {
|
|
top: -2px;
|
|
left: -2px;
|
|
}
|
|
}
|
|
|
|
.mat-radio-ripple {
|
|
height: 32px;
|
|
width: 32px;
|
|
left: calc(50% - 18px);
|
|
top: calc(50% - 18px);
|
|
border-radius: 100%;
|
|
}
|
|
}
|
|
|
|
button {
|
|
cursor: pointer;
|
|
|
|
&[disabled] {
|
|
cursor: default !important;
|
|
}
|
|
}
|
|
|
|
// utility to display a pointer
|
|
.pointer {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.color-neon-yellow {
|
|
color: $neon-yellow !important;
|
|
}
|
|
|
|
.background-neon-green {
|
|
background-color: $neon-green !important;
|
|
}
|
|
|
|
.background-neon-yellow {
|
|
background-color: $neon-yellow !important;
|
|
}
|
|
|
|
.color-neon-green {
|
|
color: $neon-green;
|
|
}
|
|
|
|
.border-radius {
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.grabbing {
|
|
cursor: grab;
|
|
|
|
&:active {
|
|
cursor: grabbing;
|
|
}
|
|
}
|
|
|
|
.flex-middle {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.empty-menu {
|
|
height: 100px;
|
|
font-size: 14px;
|
|
--mat-menu-item-label-text-tracking: 0;
|
|
}
|
|
|
|
.capital-case {
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
.upper-case {
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
|
|
.vcenter {
|
|
position: absolute;
|
|
top: 40%;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.vertical-middle-middle {
|
|
position: relative;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.vertical-middle-left {
|
|
position: relative;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.center {
|
|
position: relative;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.ellipsis {
|
|
display: block;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
body .ui-state-highlight .card {
|
|
background-color: #0275d8;
|
|
}
|
|
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.hidden-important {
|
|
display: none !important;
|
|
}
|
|
|
|
.card-margin {
|
|
margin: 15px;
|
|
}
|
|
|
|
.selected-tab {
|
|
color: chartreuse;
|
|
}
|
|
|
|
body .ui-multiselect {
|
|
background: #ffffff;
|
|
padding: 0;
|
|
border: none;
|
|
|
|
label.ui-multiselect-label.ui-corner-all:after {
|
|
content: "\F0D7";
|
|
padding-left: 5px;
|
|
font: normal normal normal 14px/1 FontAwesome;
|
|
font-size: inherit;
|
|
text-rendering: auto;
|
|
}
|
|
}
|
|
|
|
.ui-multiselect-panel .ui-multiselect-list {
|
|
border-radius: 0;
|
|
}
|
|
|
|
.ui-multiselect-panel .ui-multiselect-items-wrapper {
|
|
padding: 0;
|
|
}
|
|
|
|
.ui-multiselect .ui-multiselect-label {
|
|
padding: 12px;
|
|
margin: 0;
|
|
}
|
|
|
|
body .ui-multiselect .ui-multiselect-header {
|
|
display: none;
|
|
}
|
|
|
|
body .ui-multiselect-panel .ui-multiselect-item label {
|
|
vertical-align: inherit;
|
|
cursor: pointer;
|
|
}
|
|
|
|
body .table th, .table td {
|
|
padding: inherit;
|
|
}
|
|
|
|
body .sub-table {
|
|
width: 100%;
|
|
|
|
.labeled-row {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
//background-color: #f7f7f7;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
body .alignTop {
|
|
vertical-align: top;
|
|
}
|
|
|
|
body .clean-list {
|
|
list-style-type: none;
|
|
}
|
|
|
|
.mat-mdc-tooltip {
|
|
&.sm-tooltip {
|
|
--mdc-plain-tooltip-container-color: #{$purple};
|
|
|
|
.mdc-tooltip__surface {
|
|
max-width: 400px;
|
|
font-size: 11px;
|
|
line-height: 1.55;
|
|
letter-spacing: 0.3px;
|
|
}
|
|
|
|
&.validation {
|
|
.mdc-tooltip__surface {
|
|
--mdc-plain-tooltip-container-color: #{$strong-red};
|
|
}
|
|
}
|
|
|
|
&.break-line {
|
|
.mdc-tooltip__surface {
|
|
white-space: pre-line;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.parameter-tooltip {
|
|
margin: 6px auto 6px -74px;
|
|
}
|
|
}
|
|
|
|
// --------------------------------old------------------------------------------
|
|
@import "shared/ui-components/styles/index";
|
|
|
|
.mat-mdc-dialog-container {
|
|
box-shadow: none !important;
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
.sm-mat-dialog-panel {
|
|
border: $blue-600 1px solid;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
* table .ui-datatable-data {
|
|
-moz-user-select: none;
|
|
}
|
|
|
|
// material are stupid...
|
|
html {
|
|
&.cdk-global-scrollblock {
|
|
top: 0 !important;
|
|
position: initial !important;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.mat-mdc-menu-panel.mat-mdc-menu-panel {
|
|
max-width: 450px;
|
|
min-width: 114px;
|
|
min-height: 32px;
|
|
|
|
&.custom-columns {
|
|
width: 370px;
|
|
}
|
|
|
|
sm-checkbox-three-state-list {
|
|
min-width: 160px;
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.ico-chk {
|
|
width: 24px;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
.sm-menu-header {
|
|
text-align: center;
|
|
padding: 12px;
|
|
background: $blue-25;
|
|
color: $blue-400;
|
|
border-bottom: 1px solid $blue-200;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.light-theme {
|
|
.mat-mdc-menu-content {
|
|
.mat-mdc-menu-item {
|
|
&.cdk-keyboard-focused, &.cdk-program-focused {
|
|
color: rgba(0, 0, 0, 0.87);
|
|
}
|
|
|
|
&.mat-mdc-focus-indicator {
|
|
--mat-menu-item-hover-state-layer-color: #{$blue-50};
|
|
}
|
|
|
|
.mat-mdc-menu-item-text, .mdc-list-item__primary-text {
|
|
--mdc-list-list-item-label-text-color: rgba(0, 0, 0, 0.87);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.mat-mdc-menu-content {
|
|
padding: 4px 0 !important;
|
|
|
|
.mat-mdc-menu-item {
|
|
margin: 0 4px;
|
|
width: calc(100% - 8px);
|
|
height: 40px;
|
|
min-height: 40px;
|
|
--mat-menu-item-label-text-line-height: 20px;
|
|
--mat-menu-item-label-text-size: 14px;
|
|
padding: 0 32px 0 12px;
|
|
border-radius: 4px;
|
|
|
|
.mat-mdc-menu-item-text, .mdc-list-item__primary-text {
|
|
--mat-menu-item-label-text-tracking: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0 12px;
|
|
flex-grow: 1;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
|
|
hr {
|
|
margin: 4px 0;
|
|
}
|
|
}
|
|
|
|
.mat-mdc-list-item {
|
|
--mdc-list-list-item-label-text-size: 14px;
|
|
--mdc-list-list-item-label-text-line-height: 40px;
|
|
--mdc-list-list-item-one-line-container-height: 40px;
|
|
}
|
|
|
|
// hide arrows for number inputs
|
|
input[type=number]::-webkit-inner-spin-button,
|
|
input[type=number]::-webkit-outer-spin-button {
|
|
-webkit-appearance: none !important;
|
|
margin: 0 !important;
|
|
}
|
|
|
|
// hide arrows for number inputs (FireFox)
|
|
input[type=number] {
|
|
-moz-appearance: textfield !important;
|
|
}
|
|
|
|
.js-plotly-plot .plotly .modebar {
|
|
z-index: 11 !important;
|
|
}
|
|
|
|
as-split {
|
|
&.as-dragging {
|
|
.as-split-area {
|
|
transition: unset;
|
|
}
|
|
}
|
|
|
|
.as-split-area {
|
|
transition: flex-basis .5s;
|
|
}
|
|
|
|
&.as-horizontal {
|
|
& > .as-split-gutter {
|
|
height: unset !important;
|
|
|
|
.as-split-gutter-icon {
|
|
background-color: $blue-900;
|
|
border-left: $blue-600 solid 1px;
|
|
border-right: $blue-600 solid 1px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.dark-theme .light-theme .as-horizontal > .as-split-gutter {
|
|
background-color: transparent !important;
|
|
|
|
.as-split-gutter-icon {
|
|
background-color: transparent !important;
|
|
border-left: solid 1px #DEE1E9;
|
|
border-right: none;
|
|
background-image: none !important;
|
|
|
|
&:hover {
|
|
border-left: $purple solid 2px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.notifier__container {
|
|
ul {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
$type-colors: (
|
|
string: #ff8400,
|
|
number: $neon-yellow,
|
|
boolean: #b938a4,
|
|
date: #05668D,
|
|
);
|
|
|
|
|
|
.mat-expansion-panel.allegro-style {
|
|
width: 100%;
|
|
background-color: $blue-500;
|
|
box-shadow: unset !important;
|
|
|
|
.mat-expansion-panel-header {
|
|
height: 25px !important;
|
|
max-height: 25px;
|
|
font-size: 13px;
|
|
|
|
&:hover {
|
|
background: rgba(0, 0, 0, .04);
|
|
}
|
|
|
|
.mat-content {
|
|
flex: unset;
|
|
}
|
|
|
|
.mat-expansion-panel-header-title, .mat-expansion-indicator:after {
|
|
margin-bottom: 3px;
|
|
flex: unset;
|
|
color: $blue-300;
|
|
align-items: baseline;
|
|
}
|
|
|
|
.mat-expansion-indicator {
|
|
margin-left: auto;
|
|
height: 15px;
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
.image-viewer-dialog {
|
|
.mat-mdc-dialog-container {
|
|
padding: 0;
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
|
|
//material menu
|
|
body .mat-mdc-menu-content:not(:empty) {
|
|
.search-results {
|
|
overflow: auto;
|
|
}
|
|
|
|
.fixed-options-subheader {
|
|
padding: 8px 16px 0;
|
|
opacity: 0.5;
|
|
font-size: 14px;
|
|
color: rgba(0, 0, 0, 0.87);
|
|
}
|
|
}
|
|
|
|
.hyper-parameters-tooltip {
|
|
white-space: pre-line;
|
|
text-align: left !important;
|
|
font-size: 14px !important;
|
|
}
|
|
|
|
button.btn.button-outline-dark {
|
|
height: 28px;
|
|
padding: 6px 12px 5px;
|
|
border: solid 1px $blue-500;
|
|
border-radius: 4px;
|
|
background-color: transparent;
|
|
color: $blue-280;
|
|
font-weight: 500;
|
|
font-size: 11px;
|
|
|
|
&:disabled {
|
|
color: $blue-280;
|
|
}
|
|
|
|
&:hover:not(:disabled) {
|
|
color: $blue-280;
|
|
background-color: $blue-600;
|
|
border-color: $blue-600;
|
|
}
|
|
}
|
|
|
|
.i-welcome-researcher {
|
|
background-image: url('./assets/icons/welcome-researcher.svg');
|
|
background-repeat: no-repeat;
|
|
background-position-x: center;
|
|
background-position-y: center;
|
|
background-size: contain;
|
|
display: inline-block;
|
|
}
|
|
|
|
.sm-card-list-layout {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, 352px);
|
|
grid-gap: 24px;
|
|
padding: 0 24px 24px;
|
|
justify-content: center;
|
|
|
|
.load-more {
|
|
display: flex;
|
|
justify-content: center;
|
|
width: 100%;
|
|
padding: 15px;
|
|
grid-column: 1 / -1;
|
|
|
|
.load-more-btn {
|
|
padding: 8px 40px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.sm-card-list-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
height: inherit;
|
|
align-items: center;
|
|
|
|
.recent-title {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 12px;
|
|
|
|
& > .menu {
|
|
color: $blue-300;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
margin-right: 16px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.cdk-overlay-backdrop.darker {
|
|
background-color: rgba(0, 0, 0, 0.8);
|
|
}
|
|
|
|
.cdk-drag-preview.form-group-drag {
|
|
padding: 8px 16px 32px 16px;
|
|
border-radius: 4px;
|
|
border: solid 1px $cloudy-blue;
|
|
background-color: white;
|
|
}
|
|
|
|
.ace_placeholder {
|
|
font-family: SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
|
|
color: $blue-300 !important;
|
|
}
|
|
|
|
.modebar-btn[data-attr="plotly-embedded-modebar-button"] {
|
|
path {
|
|
fill: $orangada !important;
|
|
}
|
|
|
|
&:hover path {
|
|
fill: rgb(77, 102, 255) !important;
|
|
}
|
|
}
|
|
|
|
#print-element-temp {
|
|
display: none;
|
|
}
|
|
|
|
@media print {
|
|
* {
|
|
color: black !important;
|
|
}
|
|
|
|
html, body, .content, .info-content {
|
|
overflow: visible !important;
|
|
}
|
|
|
|
sm-side-nav,
|
|
.actions button, .actions .add-button,
|
|
.content.report .mat-drawer, .report .hover-button {
|
|
display: none !important;
|
|
}
|
|
|
|
.md-layout #print-element {
|
|
padding: 0 !important
|
|
}
|
|
.content.report .mat-drawer-content {
|
|
margin-left: unset !important
|
|
}
|
|
.content.report .mat-drawer-content,
|
|
.content.report .mat-drawer-container {
|
|
overflow: visible !important;
|
|
}
|
|
|
|
.md-editor-container,
|
|
.preview-panel {
|
|
border: none !important;
|
|
}
|
|
|
|
.header-container,
|
|
.header,
|
|
.content {
|
|
max-width: unset !important;
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
}
|
|
}
|
|
|
|
.cml-dialog {
|
|
border-radius: 4px;
|
|
|
|
.mdc-dialog .mdc-dialog__content {
|
|
padding: 0 32px;
|
|
max-height: 90vh;
|
|
}
|
|
|
|
.mdc-dialog__actions {
|
|
padding: 24px 0;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
.select-panel-width {
|
|
min-width: fit-content;
|
|
max-width: 50vw !important;
|
|
}
|
|
|
|
.background-transparent {
|
|
.mat-mdc-dialog-container {
|
|
--mdc-dialog-container-color: transparent;
|
|
}
|
|
}
|