735 lines
10 KiB
SCSS
735 lines
10 KiB
SCSS
html {
|
|
background-color: var(--bg-color);
|
|
}
|
|
|
|
body {
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
color: var(--text-muted);
|
|
font-weight: var(--weight-regular);
|
|
letter-spacing: 0.02em;
|
|
background-color: var(--bg-color);
|
|
}
|
|
|
|
a {
|
|
color: $text-color;
|
|
cursor: pointer;
|
|
}
|
|
|
|
a,
|
|
a:hover,
|
|
a:active,
|
|
.btn,
|
|
.btn:hover,
|
|
.btn:active {
|
|
outline: 0;
|
|
}
|
|
|
|
a:focus-visible,
|
|
.btn:focus-visible,
|
|
.btn-reset:focus-visible {
|
|
box-shadow: var(--focus-default);
|
|
outline: none;
|
|
}
|
|
|
|
a.grey,
|
|
.sidebar-section a,
|
|
.control-value a,
|
|
.data-row a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
a.grey:hover,
|
|
.sidebar-section a:hover,
|
|
.control-value a:hover,
|
|
.data-row a:hover,
|
|
a.grey:focus,
|
|
.sidebar-section a:focus,
|
|
.control-value a:focus,
|
|
.data-row a:focus {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
a.disabled,
|
|
a.disabled:hover {
|
|
color: var(--text-muted);
|
|
cursor: default;
|
|
text-decoration: none;
|
|
}
|
|
|
|
a.text-muted,
|
|
a.text-extra-muted {
|
|
text-decoration: none;
|
|
}
|
|
|
|
a.badge-hover {
|
|
&:hover .badge,
|
|
&:focus .badge,
|
|
&:active .badge {
|
|
background-color: var(--bg-gray);
|
|
}
|
|
}
|
|
|
|
.underline {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.pointer {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.inline-block {
|
|
display: inline-block;
|
|
}
|
|
|
|
.bold,
|
|
.strong {
|
|
font-weight: var(--weight-bold);
|
|
}
|
|
|
|
pre {
|
|
color: var(--text-light);
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.container {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.col-xs-1 {
|
|
@extend .col-1;
|
|
}
|
|
.col-xs-2 {
|
|
@extend .col-2;
|
|
}
|
|
.col-xs-3 {
|
|
@extend .col-3;
|
|
}
|
|
.col-xs-4 {
|
|
@extend .col-4;
|
|
}
|
|
.col-xs-5 {
|
|
@extend .col-5;
|
|
}
|
|
.col-xs-6 {
|
|
@extend .col-6;
|
|
}
|
|
.col-xs-7 {
|
|
@extend .col-7;
|
|
}
|
|
.col-xs-8 {
|
|
@extend .col-8;
|
|
}
|
|
.col-xs-9 {
|
|
@extend .col-9;
|
|
}
|
|
.col-xs-10 {
|
|
@extend .col-10;
|
|
}
|
|
.col-xs-11 {
|
|
@extend .col-11;
|
|
}
|
|
.col-xs-12 {
|
|
@extend .col-12;
|
|
}
|
|
|
|
.btn-default {
|
|
@extend .btn-light;
|
|
}
|
|
|
|
.hidden-xs,
|
|
.hidden-sm {
|
|
@include media-breakpoint-between(xs, sm) {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
.hidden-md {
|
|
@include media-breakpoint-between(xs, md) {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
.hidden-lg {
|
|
@include media-breakpoint-up(md) {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
.hidden-xl {
|
|
@include media-breakpoint-up(lg) {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
.visible-xs {
|
|
@include media-breakpoint-up(sm) {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
footer {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.pull-right {
|
|
float: right;
|
|
}
|
|
|
|
.missing-image {
|
|
background-color: var(--bg-light-gray);
|
|
line-height: 140px;
|
|
vertical-align: middle;
|
|
text-align: center;
|
|
width: 140px;
|
|
height: 140px;
|
|
border-radius: var(--border-radius-sm);
|
|
|
|
&.small {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
.icon {
|
|
stroke: var(--text-muted);
|
|
}
|
|
}
|
|
|
|
.hide-control {
|
|
@extend .d-none;
|
|
}
|
|
|
|
.text-underline {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.no-underline {
|
|
text-decoration: none !important;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4 {
|
|
color: var(--text-color);
|
|
margin-bottom: var(--margin-md);
|
|
}
|
|
// override default gray-900 from bootstrap to support dark mode.
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6,
|
|
.h1,
|
|
.h2,
|
|
.h3,
|
|
.h4,
|
|
.h5,
|
|
.h6 {
|
|
color: var(--heading-color);
|
|
}
|
|
h1,
|
|
h2,
|
|
h3 {
|
|
font-weight: bold;
|
|
}
|
|
|
|
p {
|
|
margin-bottom: var(--margin-sm);
|
|
}
|
|
|
|
.small {
|
|
@include get_textstyle("sm", "regular");
|
|
}
|
|
|
|
h1 {
|
|
font-size: $font-size-3xl;
|
|
font-weight: 800;
|
|
line-height: 1.25;
|
|
letter-spacing: -0.025em;
|
|
|
|
@include media-breakpoint-up(sm) {
|
|
line-height: 2.5rem;
|
|
font-size: $font-size-4xl;
|
|
}
|
|
@include media-breakpoint-up(xl) {
|
|
line-height: 1;
|
|
font-size: $font-size-5xl;
|
|
}
|
|
}
|
|
|
|
h2 {
|
|
font-size: $font-size-xl;
|
|
font-weight: bold;
|
|
|
|
@include media-breakpoint-up(sm) {
|
|
font-size: $font-size-2xl;
|
|
}
|
|
@include media-breakpoint-up(md) {
|
|
font-size: $font-size-3xl;
|
|
}
|
|
}
|
|
|
|
.btn-group-sm > .btn,
|
|
.btn-sm {
|
|
padding: var(--padding-xs) var(--padding-sm);
|
|
@include get_textstyle("base", "regular");
|
|
}
|
|
|
|
.btn-group {
|
|
.btn {
|
|
box-shadow: none;
|
|
&:nth-child(2) {
|
|
border-left: 1px solid var(--btn-group-border-color);
|
|
}
|
|
}
|
|
}
|
|
|
|
.select-group-btn {
|
|
.dropdown-toggle-split {
|
|
padding-left: 0.375rem !important;
|
|
padding-right: 0.375rem !important;
|
|
min-width: 0 !important;
|
|
|
|
&::after {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.dropdown-item {
|
|
.tick-icon {
|
|
visibility: hidden;
|
|
|
|
&.selected {
|
|
visibility: visible;
|
|
}
|
|
}
|
|
|
|
.item-label {
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
}
|
|
|
|
.btn-xs {
|
|
@extend .btn-sm;
|
|
line-height: 1.2;
|
|
padding: var(--padding-xs) var(--padding-sm);
|
|
font-size: var(--text-xs);
|
|
}
|
|
|
|
.input-xs {
|
|
height: 26px;
|
|
@include get_textstyle("base", "regular");
|
|
}
|
|
|
|
select.input-xs {
|
|
line-height: 1.2;
|
|
}
|
|
|
|
/* popover */
|
|
.popover {
|
|
background-color: var(--popover-bg);
|
|
border: 0;
|
|
}
|
|
|
|
.bold {
|
|
font-weight: var(--weight-semibold) !important;
|
|
}
|
|
|
|
.text-color {
|
|
color: var(--text-color);
|
|
}
|
|
|
|
/* dropdowns */
|
|
|
|
.dropdown-item {
|
|
border-radius: 8px;
|
|
padding: var(--dropdown-padding) !important;
|
|
}
|
|
|
|
.dropdown-menu {
|
|
padding: 4px;
|
|
@include get_textstyle("base", "regular");
|
|
max-height: 500px;
|
|
overflow: auto;
|
|
border: 1px solid var(--subtle-accent);
|
|
|
|
.dropdown-divider {
|
|
margin: 4px 0;
|
|
}
|
|
|
|
.divider {
|
|
@extend .dropdown-divider;
|
|
}
|
|
|
|
a:not([href]):hover:active {
|
|
color: $component-active-color;
|
|
}
|
|
a {
|
|
transition: none;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
}
|
|
a:active {
|
|
--icon-stroke: #{$component-active-color};
|
|
}
|
|
|
|
.divider,
|
|
.dropdown-divider {
|
|
margin: 4px;
|
|
}
|
|
|
|
:last-child {
|
|
&.dropdown-divider {
|
|
display: none;
|
|
}
|
|
.divider,
|
|
.dropdown-divider {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.custom-control.custom-switch {
|
|
@include get_textstyle("base", "regular");
|
|
line-height: 1.6;
|
|
|
|
.custom-control-input ~ .custom-control-label {
|
|
cursor: pointer;
|
|
&:before {
|
|
background: var(--gray-500);
|
|
border: none;
|
|
}
|
|
}
|
|
|
|
.custom-control-input:checked ~ .custom-control-label {
|
|
&:before {
|
|
background: $primary;
|
|
}
|
|
}
|
|
}
|
|
|
|
// .frappe-card {
|
|
// @include card();
|
|
// }
|
|
|
|
.head-title {
|
|
@include get_textstyle("lg", "bold");
|
|
color: var(--heading-color);
|
|
}
|
|
|
|
kbd {
|
|
background-color: var(--control-bg);
|
|
font-family: var(--font-stack);
|
|
color: var(--text-light);
|
|
line-height: 0.9em;
|
|
letter-spacing: 0.06em;
|
|
height: 20px;
|
|
padding: 4px 8px;
|
|
}
|
|
|
|
.table {
|
|
color: var(--text-color);
|
|
th,
|
|
td {
|
|
padding: 0.5rem;
|
|
}
|
|
}
|
|
|
|
.appreciation {
|
|
background-color: var(--appreciation-bg);
|
|
color: var(--appreciation-color) !important;
|
|
}
|
|
|
|
.criticism {
|
|
background-color: var(--criticism-bg);
|
|
color: var(--criticism-color) !important;
|
|
}
|
|
|
|
.frappe-timestamp {
|
|
cursor: default;
|
|
}
|
|
|
|
.standard-sidebar {
|
|
@include get_textstyle("base", "regular");
|
|
|
|
.standard-sidebar-section .standard-sidebar-label {
|
|
margin-bottom: var(--margin-md);
|
|
margin-top: var(--margin-sm);
|
|
width: 100%;
|
|
|
|
&:focus-visible {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
.standard-sidebar-item {
|
|
@include flex(flex, null, center, null);
|
|
@include get_textstyle("base", "regular");
|
|
padding: 8px 12px;
|
|
margin-bottom: 2px;
|
|
border-radius: var(--border-radius);
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
|
|
.sidebar-item-label {
|
|
// https://css-tricks.com/flexbox-truncated-text/
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
&:focus-within {
|
|
background-color: var(--sidebar-select-color);
|
|
outline: 0;
|
|
text-decoration: none;
|
|
}
|
|
|
|
&:hover {
|
|
background-color: var(--sidebar-select-color);
|
|
text-decoration: none;
|
|
}
|
|
|
|
&.selected {
|
|
background-color: var(--sidebar-select-color);
|
|
}
|
|
|
|
> a {
|
|
color: var(--text-color);
|
|
text-decoration: none;
|
|
|
|
&:focus-visible {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
svg {
|
|
margin-right: var(--margin-sm);
|
|
}
|
|
}
|
|
}
|
|
|
|
// freeze backdrop text
|
|
#freeze {
|
|
z-index: 2000;
|
|
bottom: 0;
|
|
opacity: 0;
|
|
background-color: var(--bg-color);
|
|
|
|
.freeze-message-container {
|
|
inset: 0;
|
|
padding: 3rem;
|
|
background-color: var(--bg-light-gray);
|
|
color: var(--text-on-light-gray);
|
|
font-size: larger;
|
|
position: absolute;
|
|
display: grid;
|
|
place-content: center;
|
|
}
|
|
}
|
|
|
|
#freeze.in {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.msg-box {
|
|
padding: var(--padding-xl) var(--padding-md);
|
|
text-align: center;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/*rtl styles*/
|
|
|
|
.frappe-rtl {
|
|
text-align: right;
|
|
.modal-actions {
|
|
right: auto !important;
|
|
left: 5px;
|
|
}
|
|
input,
|
|
textarea {
|
|
direction: rtl !important;
|
|
}
|
|
|
|
.checkbox .disp-area {
|
|
margin-right: -20px;
|
|
margin-left: 0px;
|
|
}
|
|
}
|
|
|
|
/* broken image styling */
|
|
|
|
img.no-image {
|
|
position: relative;
|
|
height: 100%;
|
|
width: 100%;
|
|
background-color: var(--bg-light-gray);
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.video-modal .modal-dialog {
|
|
width: 700px;
|
|
}
|
|
}
|
|
|
|
body.no-sidebar {
|
|
@include media-breakpoint-up(md) {
|
|
.layout-side-section {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.app-logo {
|
|
width: 24px;
|
|
h4 {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
|
|
.alt-pressed .alt-underline {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
details > summary:focus {
|
|
outline: none;
|
|
}
|
|
|
|
.ellipsis {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
max-width: 100%;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.ellipsis-width {
|
|
max-width: 200px;
|
|
}
|
|
|
|
.text-extra-muted {
|
|
color: var(--gray-500) !important;
|
|
}
|
|
|
|
.grayscale {
|
|
-webkit-filter: grayscale(100%);
|
|
filter: grayscale(100%);
|
|
}
|
|
|
|
.uppercase {
|
|
padding-bottom: var(--padding-xs);
|
|
text-transform: uppercase;
|
|
@include get_textstyle("sm", "regular");
|
|
letter-spacing: 0.4px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.text-regular {
|
|
@include get_textstyle("base", "regular");
|
|
}
|
|
|
|
.text-medium {
|
|
@include get_textstyle("base", "regular");
|
|
}
|
|
|
|
.text-small {
|
|
@include get_textstyle("sm", "regular");
|
|
}
|
|
|
|
.text-large {
|
|
@include get_textstyle("lg", "regular");
|
|
}
|
|
|
|
.disable-click {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.popover-title {
|
|
display: none;
|
|
}
|
|
|
|
.highlight:not(.frappe-control) {
|
|
transition: 0.5s ease background-color;
|
|
box-shadow: var(--highlight-shadow) !important;
|
|
}
|
|
|
|
.frappe-control.highlight {
|
|
--wrap-padding: calc(-1 * var(--padding-sm));
|
|
&::after {
|
|
content: " ";
|
|
border-radius: 5px;
|
|
box-shadow: var(--highlight-shadow) !important;
|
|
top: var(--wrap-padding);
|
|
position: absolute;
|
|
bottom: var(--wrap-padding);
|
|
left: var(--wrap-padding);
|
|
right: var(--wrap-padding);
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
|
|
.dropdown-menu.small {
|
|
@include get_textstyle("sm", "regular");
|
|
min-width: 140px;
|
|
.dropdown-item {
|
|
padding: var(--padding-xs);
|
|
}
|
|
}
|
|
|
|
.diffview {
|
|
font-family: monospace;
|
|
white-space: pre;
|
|
word-wrap: break-word;
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.diffview .insert,
|
|
.diff-add {
|
|
background-color: var(--diff-added);
|
|
}
|
|
|
|
.diffview .delete,
|
|
.diff-remove {
|
|
background-color: var(--diff-removed);
|
|
}
|
|
|
|
.chart-wrapper {
|
|
padding: 1em;
|
|
}
|
|
|
|
// REDESIGN TODO: Handling of broken images?
|
|
// img.no-image:before {
|
|
// .img-background();
|
|
// }
|
|
|
|
// img.no-image:after {
|
|
// .img-foreground();
|
|
// }
|
|
|
|
// img.img-loading:before {
|
|
// .img-background();
|
|
// }
|
|
|
|
// img.img-loading:after {
|
|
// .img-foreground();
|
|
// font-family: 'Octicons';
|
|
// content: "\f00b";
|
|
// }
|
|
|
|
/*rtl:raw:
|
|
.dropdown-menu {
|
|
right: auto;
|
|
}
|
|
.popover {
|
|
right: auto;
|
|
}
|
|
.chart-container {
|
|
direction: ltr;
|
|
}
|
|
*/
|
|
.desktop-alphabet {
|
|
stroke: none;
|
|
}
|