mirror of
https://github.com/ToolJet/ToolJet
synced 2026-04-21 13:37:28 +00:00
175345479a
* node upgrade initial commit * Removed node-saas and added saas. Fixed the CSS warnings from saas * add node version 22 to dockerfile and AMI setup script * change the base image to debian 12 * Update the node version (#12860) * correction in builder image * Update ce-production.Dockerfile * upgrade node to 22.15.1 * server package lock * package upgrade * package upgrade * base directory package upgrade * revert sentry package upgrade * fix * added copy files * fix dockerfile for copywrite package issue * removed copy files package * fix dockerfile for copywrite package issue --------- Co-authored-by: Kavin Venkatachalam <kavin.saratha@gmail.com> Co-authored-by: Adish M <adish.madhu@gmail.com> Co-authored-by: Ajith KV <ajith.jaban@gmail.com> Co-authored-by: Adish M <44204658+adishM98@users.noreply.github.com> Co-authored-by: Muhsin Shah C P <muhsinshah21@gmail.com>
18909 lines
No EOL
337 KiB
SCSS
18909 lines
No EOL
337 KiB
SCSS
@import "./tabler.scss";
|
|
@import "./colors.scss";
|
|
@import "./z-index.scss";
|
|
@import "./mixins.scss";
|
|
@import "./queryManager.scss";
|
|
@import "./onboarding.scss";
|
|
@import "./components.scss";
|
|
@import "./global-datasources.scss";
|
|
@import "./typography.scss";
|
|
@import "./designtheme.scss";
|
|
@import "./dropdown-custom.scss";
|
|
@import "./ui-operations.scss";
|
|
@import "./license.scss";
|
|
@import 'react-loading-skeleton/dist/skeleton.css';
|
|
@import './table-component.scss';
|
|
@import './groups-permissions.scss';
|
|
@import 'tailwindcss/base';
|
|
@import 'tailwindcss/components';
|
|
@import 'tailwindcss/utilities';
|
|
@import "./componentdesign.scss";
|
|
@import './pages-sidebar.scss';
|
|
|
|
/* ibm-plex-sans-100 - latin */
|
|
@font-face {
|
|
font-display: swap;
|
|
/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
|
font-family: 'IBM Plex Sans';
|
|
font-style: normal;
|
|
font-weight: 100;
|
|
src: url('/assets/fonts/ibm-plex-sans-v19-latin/ibm-plex-sans-v19-latin-100.woff2') format('woff2');
|
|
/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
|
}
|
|
|
|
/* ibm-plex-sans-100italic - latin */
|
|
@font-face {
|
|
font-display: swap;
|
|
/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
|
font-family: 'IBM Plex Sans';
|
|
font-style: italic;
|
|
font-weight: 100;
|
|
src: url('/assets/fonts/ibm-plex-sans-v19-latin/ibm-plex-sans-v19-latin-100italic.woff2') format('woff2');
|
|
/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
|
}
|
|
|
|
/* ibm-plex-sans-200 - latin */
|
|
@font-face {
|
|
font-display: swap;
|
|
/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
|
font-family: 'IBM Plex Sans';
|
|
font-style: normal;
|
|
font-weight: 200;
|
|
src: url('/assets/fonts/ibm-plex-sans-v19-latin/ibm-plex-sans-v19-latin-200.woff2') format('woff2');
|
|
/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
|
}
|
|
|
|
/* ibm-plex-sans-200italic - latin */
|
|
@font-face {
|
|
font-display: swap;
|
|
/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
|
font-family: 'IBM Plex Sans';
|
|
font-style: italic;
|
|
font-weight: 200;
|
|
src: url('/assets/fonts/ibm-plex-sans-v19-latin/ibm-plex-sans-v19-latin-200italic.woff2') format('woff2');
|
|
/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
|
}
|
|
|
|
/* ibm-plex-sans-300 - latin */
|
|
@font-face {
|
|
font-display: swap;
|
|
/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
|
font-family: 'IBM Plex Sans';
|
|
font-style: normal;
|
|
font-weight: 300;
|
|
src: url('/assets/fonts/ibm-plex-sans-v19-latin/ibm-plex-sans-v19-latin-300.woff2') format('woff2');
|
|
/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
|
}
|
|
|
|
/* ibm-plex-sans-300italic - latin */
|
|
@font-face {
|
|
font-display: swap;
|
|
/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
|
font-family: 'IBM Plex Sans';
|
|
font-style: italic;
|
|
font-weight: 300;
|
|
src: url('/assets/fonts/ibm-plex-sans-v19-latin/ibm-plex-sans-v19-latin-300italic.woff2') format('woff2');
|
|
/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
|
}
|
|
|
|
/* ibm-plex-sans-regular - latin */
|
|
@font-face {
|
|
font-display: swap;
|
|
/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
|
font-family: 'IBM Plex Sans';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
src: url('/assets/fonts/ibm-plex-sans-v19-latin/ibm-plex-sans-v19-latin-regular.woff2') format('woff2');
|
|
/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
|
}
|
|
|
|
/* ibm-plex-sans-italic - latin */
|
|
@font-face {
|
|
font-display: swap;
|
|
/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
|
font-family: 'IBM Plex Sans';
|
|
font-style: italic;
|
|
font-weight: 400;
|
|
src: url('/assets/fonts/ibm-plex-sans-v19-latin/ibm-plex-sans-v19-latin-italic.woff2') format('woff2');
|
|
/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
|
}
|
|
|
|
/* ibm-plex-sans-500 - latin */
|
|
@font-face {
|
|
font-display: swap;
|
|
/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
|
font-family: 'IBM Plex Sans';
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
src: url('/assets/fonts/ibm-plex-sans-v19-latin/ibm-plex-sans-v19-latin-500.woff2') format('woff2');
|
|
/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
|
}
|
|
|
|
/* ibm-plex-sans-500italic - latin */
|
|
@font-face {
|
|
font-display: swap;
|
|
/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
|
font-family: 'IBM Plex Sans';
|
|
font-style: italic;
|
|
font-weight: 500;
|
|
src: url('/assets/fonts/ibm-plex-sans-v19-latin/ibm-plex-sans-v19-latin-500italic.woff2') format('woff2');
|
|
/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
|
}
|
|
|
|
/* ibm-plex-sans-600 - latin */
|
|
@font-face {
|
|
font-display: swap;
|
|
/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
|
font-family: 'IBM Plex Sans';
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
src: url('/assets/fonts/ibm-plex-sans-v19-latin/ibm-plex-sans-v19-latin-600.woff2') format('woff2');
|
|
/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
|
}
|
|
|
|
/* ibm-plex-sans-600italic - latin */
|
|
@font-face {
|
|
font-display: swap;
|
|
/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
|
font-family: 'IBM Plex Sans';
|
|
font-style: italic;
|
|
font-weight: 600;
|
|
src: url('/assets/fonts/ibm-plex-sans-v19-latin/ibm-plex-sans-v19-latin-600italic.woff2') format('woff2');
|
|
/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
|
}
|
|
|
|
/* ibm-plex-sans-700 - latin */
|
|
@font-face {
|
|
font-display: swap;
|
|
/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
|
font-family: 'IBM Plex Sans';
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
src: url('/assets/fonts/ibm-plex-sans-v19-latin/ibm-plex-sans-v19-latin-700.woff2') format('woff2');
|
|
/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
|
}
|
|
|
|
/* ibm-plex-sans-700italic - latin */
|
|
@font-face {
|
|
font-display: swap;
|
|
/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
|
font-family: 'IBM Plex Sans';
|
|
font-style: italic;
|
|
font-weight: 700;
|
|
src: url('/assets/fonts/ibm-plex-sans-v19-latin/ibm-plex-sans-v19-latin-700italic.woff2') format('woff2');
|
|
/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
|
}
|
|
|
|
.transparent-scrollbar {
|
|
&::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 50px;
|
|
}
|
|
|
|
&::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
&::-webkit-scrollbar-thumb {
|
|
background-color: #E4E7EB;
|
|
border-radius: 10px;
|
|
border: 3px solid transparent;
|
|
}
|
|
|
|
&::-webkit-scrollbar-thumb:hover {
|
|
background-color: #E4E7EB;
|
|
}
|
|
}
|
|
|
|
@layer base {
|
|
|
|
input[type='number']::-webkit-outer-spin-button,
|
|
input[type='number']::-webkit-inner-spin-button,
|
|
input[type='number'] {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
-moz-appearance: textfield !important;
|
|
}
|
|
}
|
|
|
|
// variables
|
|
$border-radius: 4px;
|
|
|
|
|
|
body {
|
|
font-family: 'IBM Plex Sans';
|
|
// color: var(--text-default) !important;
|
|
}
|
|
|
|
body:has(.wrapper.audit-log) {
|
|
overflow: hidden;
|
|
}
|
|
|
|
body:has(.wrapper.audit-log) {
|
|
overflow: hidden;
|
|
}
|
|
|
|
input,
|
|
button {
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.btn:hover {
|
|
border-color: $primary;
|
|
}
|
|
|
|
.btn-sm {
|
|
padding: 4px 8px;
|
|
}
|
|
|
|
.padding-0 {
|
|
padding: 0;
|
|
}
|
|
|
|
.float-right {
|
|
float: right;
|
|
}
|
|
|
|
.font-500 {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.color-inherit {
|
|
color: inherit;
|
|
}
|
|
|
|
.text-right {
|
|
text-align: right;
|
|
}
|
|
|
|
.navbar {
|
|
max-height: 48px;
|
|
min-height: auto;
|
|
background-color: var(--base) !important;
|
|
border-bottom: 1px solid var(--slate5);
|
|
|
|
.nav-item.active:after {
|
|
bottom: 0 !important;
|
|
}
|
|
}
|
|
|
|
.rc-slider-track {
|
|
background-color: $primary;
|
|
}
|
|
|
|
.rc-slider-handle {
|
|
border-color: $primary;
|
|
}
|
|
|
|
.auth-main {
|
|
height: 1000px;
|
|
padding-top: calc(0.25 * 100vh);
|
|
overflow: hidden;
|
|
|
|
svg,
|
|
img {
|
|
height: 50px;
|
|
width: 50px;
|
|
}
|
|
|
|
svg {
|
|
color: #000000;
|
|
}
|
|
|
|
.col-4 {
|
|
z-index: 1;
|
|
}
|
|
|
|
.horizontal-line {
|
|
width: 100%;
|
|
position: relative;
|
|
border: 1px solid #b1b1b1;
|
|
top: 25px;
|
|
margin: 0px auto;
|
|
z-index: 0;
|
|
}
|
|
|
|
.sso-ico {
|
|
div {
|
|
background-color: #ffffff;
|
|
}
|
|
}
|
|
}
|
|
|
|
.emoji-mart-scroll {
|
|
border-bottom: 0;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.emoji-mart-scroll+.emoji-mart-bar {
|
|
display: none;
|
|
}
|
|
|
|
.accordion-item {
|
|
border: solid var(--slate5);
|
|
border-width: 0px 0px 1px 0px;
|
|
}
|
|
|
|
|
|
.accordion-item,
|
|
.accordion-button {
|
|
background-color: inherit;
|
|
}
|
|
|
|
.accordion-button {
|
|
font-size: 14px;
|
|
font-weight: 500 !important;
|
|
box-shadow: none !important;
|
|
color: var(--slate12) !important;
|
|
padding: 16px 16px !important;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.accordion-button.inspector::after {
|
|
display: none;
|
|
}
|
|
|
|
.accordion-item-trigger {
|
|
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="13" height="12" viewBox="0 0 13 12" fill="none"><path d="M8.83684 3L4.4484 3C3.86955 3 3.5089 3.62791 3.80056 4.1279L5.99478 7.88943C6.28419 8.38556 7.00104 8.38556 7.29045 7.88943L9.48467 4.1279C9.77634 3.62791 9.41568 3 8.83684 3Z" fill="%23ACB2B9"/></svg>') !important;
|
|
height: 12px !important;
|
|
width: 12px !important;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
transition: transform 0.3s;
|
|
display: inherit !important;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.accordion-item-trigger:not(.collapsed) {
|
|
transform: rotate(180deg);
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
.accordion-button::after {
|
|
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="13" height="12" viewBox="0 0 13 12" fill="none"><path d="M8.83684 3L4.4484 3C3.86955 3 3.5089 3.62791 3.80056 4.1279L5.99478 7.88943C6.28419 8.38556 7.00104 8.38556 7.29045 7.88943L9.48467 4.1279C9.77634 3.62791 9.41568 3 8.83684 3Z" fill="%2311181C"/></svg>');
|
|
}
|
|
|
|
.accordion-button:not(.collapsed)::after {
|
|
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="13" height="12" viewBox="0 0 13 12" fill="none"><path d="M8.83684 3L4.4484 3C3.86955 3 3.5089 3.62791 3.80056 4.1279L5.99478 7.88943C6.28419 8.38556 7.00104 8.38556 7.29045 7.88943L9.48467 4.1279C9.77634 3.62791 9.41568 3 8.83684 3Z" fill="%2311181C"/></svg>');
|
|
}
|
|
|
|
|
|
.accordion-body {
|
|
padding: 4px 16px 16px 16px !important;
|
|
|
|
.form-label {
|
|
font-weight: 400;
|
|
font-size: 12px;
|
|
color: var(--slate12);
|
|
}
|
|
|
|
.style-fx {
|
|
margin-top: 3px !important;
|
|
}
|
|
}
|
|
|
|
.editor {
|
|
header {
|
|
position: fixed;
|
|
width: 100%;
|
|
top: 0px;
|
|
left: 0px;
|
|
}
|
|
|
|
.header-container {
|
|
max-width: 100%;
|
|
padding: 0px;
|
|
}
|
|
|
|
.resizer-select,
|
|
.resizer-active {
|
|
|
|
.top-right,
|
|
.top-left,
|
|
.bottom-right,
|
|
.bottom-left {
|
|
background: white;
|
|
border-radius: 10px;
|
|
border: solid 1px $primary;
|
|
}
|
|
}
|
|
|
|
.resizer-selected {
|
|
outline-width: thin;
|
|
outline-style: solid;
|
|
outline-color: #ffda7e;
|
|
}
|
|
|
|
// query data source card style start
|
|
|
|
.query-datasource-card-container,
|
|
.header-query-datasource-card-container {
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.datasource-picker {
|
|
margin-bottom: 24px;
|
|
width: 475px;
|
|
margin: auto;
|
|
|
|
a {
|
|
color: var(--indigo9);
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
.header-query-datasource-card-container {
|
|
margin-top: -10px;
|
|
}
|
|
|
|
.header-query-datasource-card {
|
|
position: relative;
|
|
display: flex;
|
|
min-width: 0;
|
|
word-wrap: break-word;
|
|
background-color: rgba(66, 153, 225, 0.1) !important;
|
|
background-clip: border-box;
|
|
border-radius: 4px;
|
|
height: 32px;
|
|
width: 140px;
|
|
padding: 6px;
|
|
align-items: center;
|
|
text-transform: capitalize;
|
|
font-weight: 400 !important;
|
|
background-color: #4299e11a;
|
|
|
|
p {
|
|
margin: 0 8px 0 12px;
|
|
}
|
|
}
|
|
|
|
.query-datasource-card {
|
|
position: relative;
|
|
display: flex;
|
|
min-width: 0;
|
|
word-wrap: break-word;
|
|
background-color: #ffffff;
|
|
background-clip: border-box;
|
|
border: 1px solid rgba(101, 109, 119, 0.16);
|
|
border-radius: 4px;
|
|
height: 46px;
|
|
width: 200px;
|
|
padding: 10px;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
transition: transform .2s;
|
|
|
|
p {
|
|
margin: 0 8px 0 15px;
|
|
}
|
|
|
|
&:hover {
|
|
transform: scale(1.02);
|
|
box-shadow: 0.1px 0.1px 0.1px 0.1px rgba(0, 0, 0, 0.3);
|
|
}
|
|
}
|
|
|
|
// end :: data source card style
|
|
|
|
.header-query-datasource-name {
|
|
font-size: 0.8rem !important;
|
|
padding-top: 0px !important;
|
|
}
|
|
|
|
.datasource-heading {
|
|
display: flex;
|
|
height: 32px;
|
|
gap: 10px;
|
|
align-items: center;
|
|
|
|
p {
|
|
font-size: 12px;
|
|
padding-top: 0px;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
|
|
.left-sidebar {
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
.left-sidebar::-webkit-scrollbar {
|
|
width: 0;
|
|
background: transparent;
|
|
}
|
|
|
|
.left-sidebar-layout {
|
|
display: flex;
|
|
justify-content: center;
|
|
font-size: 11px;
|
|
align-items: center;
|
|
letter-spacing: 0.2px;
|
|
|
|
p {
|
|
margin-bottom: 0px;
|
|
margin-top: 8px;
|
|
}
|
|
}
|
|
|
|
.left-sidebar {
|
|
height: 100%;
|
|
width: 48px;
|
|
position: fixed;
|
|
z-index: 2;
|
|
left: 0;
|
|
overflow-x: hidden;
|
|
flex: 1 1 auto;
|
|
background-clip: border-box;
|
|
margin-top: 48px;
|
|
padding-top: 8px;
|
|
background: var(--base) !important;
|
|
|
|
.accordion-item {
|
|
border: solid var(--slate5);
|
|
border-width: 1px 0px 1px 0px;
|
|
}
|
|
|
|
.datasources-container {
|
|
height: 50%;
|
|
overflow-y: scroll;
|
|
|
|
tr {
|
|
border-color: #f1f1f1;
|
|
}
|
|
}
|
|
|
|
.variables-container {
|
|
height: 50%;
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
.variables-container::-webkit-scrollbar-thumb,
|
|
.datasources-container::-webkit-scrollbar-thumb {
|
|
background: transparent;
|
|
height: 0;
|
|
width: 0;
|
|
}
|
|
|
|
.variables-container::-webkit-scrollbar,
|
|
.datasources-container::-webkit-scrollbar {
|
|
width: 0;
|
|
background: transparent;
|
|
height: 0;
|
|
}
|
|
|
|
.variables-container,
|
|
.datasources-container {
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
.datasources-container {
|
|
bottom: 0;
|
|
height: 500px;
|
|
border: solid rgba(101, 109, 119, 0.16);
|
|
border-width: 1px 0px 1px 0px;
|
|
|
|
.datasources-header {
|
|
border: solid rgba(0, 0, 0, 0.125);
|
|
border-width: 0px 0px 1px 0px;
|
|
}
|
|
}
|
|
|
|
.left-sidebar-inspector {
|
|
.card-body {
|
|
padding: 1rem 0rem 1rem 1rem;
|
|
}
|
|
}
|
|
|
|
.left-sidebar-page-selector {
|
|
.add-new-page-button-container {
|
|
width: 100%;
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.editor-sidebar {
|
|
position: fixed;
|
|
right: 0;
|
|
overflow: hidden;
|
|
width: 300px;
|
|
flex: 1 1 auto;
|
|
top: 48px;
|
|
border-left: 1px solid var(--slate5);
|
|
background-color: var(--base);
|
|
background-clip: border-box;
|
|
height: 100vh;
|
|
|
|
>div {
|
|
background-color: var(--base);
|
|
}
|
|
|
|
|
|
.inspector {
|
|
.form-control-plaintext {
|
|
padding: 0;
|
|
color: var(--slate12);
|
|
}
|
|
|
|
.header {
|
|
padding-left: 20px;
|
|
padding-right: 20px;
|
|
border: solid rgba(0, 0, 0, 0.125);
|
|
border-width: 0px 0px 1px 0px;
|
|
height: 40px;
|
|
|
|
.component-name {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.component-action-button {
|
|
top: 8px;
|
|
right: 10px;
|
|
position: absolute;
|
|
}
|
|
}
|
|
|
|
.properties-container {
|
|
.field {
|
|
.form-label {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.text-field {
|
|
height: 30px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.form-select {
|
|
height: 30px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.select-search__input {
|
|
padding: 0.2375rem 0.75rem;
|
|
font-size: 0.825rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.components-container::-webkit-scrollbar {
|
|
width: 0;
|
|
height: 0;
|
|
background: transparent;
|
|
}
|
|
|
|
.components-container::-webkit-scrollbar-thumb {
|
|
background: transparent;
|
|
}
|
|
|
|
.components-container {
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
.components-container {
|
|
height: 100%;
|
|
overflow: auto;
|
|
overflow-x: hidden;
|
|
padding-bottom: 20%;
|
|
|
|
::placeholder {
|
|
color: var(--slate9);
|
|
|
|
}
|
|
|
|
.component-image-holder {
|
|
border-radius: 0;
|
|
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
|
|
box-sizing: border-box;
|
|
border-radius: 4px;
|
|
background-color: var(--slate3);
|
|
|
|
img {
|
|
margin: 0 auto;
|
|
}
|
|
|
|
&:hover {
|
|
background-color: var(--slate4);
|
|
border: 1px solid var(--slate4, #E6E8EB);
|
|
}
|
|
|
|
&:active {
|
|
background-color: var(--slate4);
|
|
border: 1px solid var(--slate6, #DFE3E6);
|
|
}
|
|
}
|
|
|
|
.component-title {
|
|
margin-top: 4px;
|
|
max-width: 100%;
|
|
text-align: center;
|
|
word-wrap: break-word;
|
|
color: var(--slate12);
|
|
text-align: center;
|
|
font-size: 10px;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 13px;
|
|
height: 26px;
|
|
width: 72px;
|
|
}
|
|
|
|
.component-description {
|
|
color: grey;
|
|
font-size: 0.7rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.main {
|
|
top: 0;
|
|
height: calc(100vh - 42px); // check
|
|
|
|
&.hide-scrollbar {
|
|
.canvas-container::-webkit-scrollbar {
|
|
height: 0;
|
|
}
|
|
}
|
|
|
|
.canvas-container::-webkit-scrollbar {
|
|
width: 0;
|
|
background: transparent;
|
|
}
|
|
|
|
.canvas-container::-webkit-scrollbar-track {
|
|
background: transparent !important;
|
|
}
|
|
|
|
.canvas-container {
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
.canvas-container {
|
|
height: 100%;
|
|
top: 48px;
|
|
position: fixed;
|
|
right: 300px;
|
|
left: 48px;
|
|
overflow-y: scroll;
|
|
overflow-x: hidden;
|
|
-webkit-box-pack: center;
|
|
justify-content: center;
|
|
-webkit-box-align: center;
|
|
align-items: center;
|
|
|
|
.real-canvas {
|
|
outline: 1px dotted transparent;
|
|
}
|
|
|
|
.show-grid {
|
|
outline: 1px dotted #4d72da;
|
|
background-image: linear-gradient(to right,
|
|
rgba(194, 191, 191, 0.2) 1px,
|
|
transparent 1px),
|
|
linear-gradient(to bottom,
|
|
rgba(194, 191, 191, 0.2) 1px,
|
|
transparent 1px);
|
|
|
|
}
|
|
|
|
.canvas-area {
|
|
// background: #F9F9FB;
|
|
margin: 0px auto;
|
|
|
|
.resizer {
|
|
outline: solid 1px transparent;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media screen and (max-height: 450px) {
|
|
.sidebar {
|
|
padding-top: 15px;
|
|
}
|
|
|
|
.sidebar a {
|
|
font-size: 18px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.viewer {
|
|
.header-container {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.main {
|
|
padding: 0px 10px;
|
|
|
|
.canvas-container {
|
|
scrollbar-width: auto;
|
|
width: 100%;
|
|
}
|
|
|
|
|
|
.canvas-container::-webkit-scrollbar {
|
|
background: transparent;
|
|
}
|
|
|
|
.canvas-container {
|
|
height: 100%;
|
|
position: fixed;
|
|
left: 0;
|
|
overflow-y: auto;
|
|
overflow-x: auto;
|
|
-webkit-box-pack: center;
|
|
justify-content: center;
|
|
-webkit-box-align: center;
|
|
align-items: center;
|
|
|
|
.canvas-area {
|
|
width: 1280px;
|
|
// background: #F9F9FB;
|
|
margin: 0px auto;
|
|
background-size: 80px 80px;
|
|
background-repeat: repeat;
|
|
}
|
|
|
|
.navigation-area {
|
|
background: var(--base, #FFF);
|
|
padding: 1rem;
|
|
|
|
a.page-link {
|
|
border-radius: 0;
|
|
border: 0;
|
|
}
|
|
|
|
a.page-link:hover {
|
|
color: white;
|
|
background-color: #4D72FA;
|
|
}
|
|
|
|
a.page-link.active {
|
|
color: white;
|
|
background-color: #4D72FA;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal-header {
|
|
padding: 0 1.5rem 0 1.5rem;
|
|
}
|
|
|
|
.page-body,
|
|
.homepage-body {
|
|
height: 100vh;
|
|
|
|
.list-group.list-group-transparent.dark .all-apps-link,
|
|
.list-group-item-action.dark.active {
|
|
background-color: $dark-background !important;
|
|
}
|
|
}
|
|
|
|
.home-search-holder {
|
|
height: 20px;
|
|
width: 100%;
|
|
margin-top: 32px;
|
|
|
|
.search-box-wrapper {
|
|
.input-icon {
|
|
.input-icon-addon {
|
|
padding-right: 6px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.homepage-search {
|
|
background: none !important;
|
|
color: var(--slate12);
|
|
height: 20px;
|
|
border: none !important;
|
|
|
|
&:focus {
|
|
background: none !important;
|
|
border: none !important;
|
|
}
|
|
|
|
&:hover {
|
|
background: none !important;
|
|
border: none !important;
|
|
color: var(--slate12);
|
|
}
|
|
}
|
|
}
|
|
|
|
.homepage-app-card-list-item-wrap {
|
|
row-gap: 16px;
|
|
column-gap: 32px;
|
|
display: flex;
|
|
margin-top: 22px;
|
|
}
|
|
|
|
.homepage-app-card-list-item {
|
|
max-width: 272px;
|
|
flex-basis: 33%;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
.homepage-dropdown-style {
|
|
min-width: 11rem;
|
|
display: block;
|
|
align-items: center;
|
|
margin: 0;
|
|
line-height: 1.4285714;
|
|
width: 100%;
|
|
padding: 0.5rem 0.75rem !important;
|
|
font-weight: 400;
|
|
white-space: nowrap;
|
|
border: 0;
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.homepage-dropdown-style:hover {
|
|
background: rgba(101, 109, 119, 0.06);
|
|
}
|
|
|
|
.card-skeleton-container {
|
|
border: 0.5px solid #b4bbc6;
|
|
padding: 1rem;
|
|
border-radius: 8px;
|
|
height: 180px;
|
|
}
|
|
|
|
.app-icon-skeleton {
|
|
background-color: #ECEEF0 !important;
|
|
border-radius: 4px;
|
|
margin-bottom: 20px;
|
|
height: 40px;
|
|
width: 40px;
|
|
}
|
|
|
|
.folder-icon-skeleton {
|
|
display: inline-block;
|
|
background-color: #858896;
|
|
border-radius: 4px;
|
|
height: 14px;
|
|
width: 14px;
|
|
}
|
|
|
|
.folders-skeleton {
|
|
padding: 9px 12px;
|
|
height: 34px;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.card-skeleton-button {
|
|
height: 20px;
|
|
width: 60px;
|
|
background: #91a4f6;
|
|
margin-top: 1rem;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
@media (min-height: 641px) and (max-height: 899px) {
|
|
.homepage-pagination {
|
|
position: fixed;
|
|
bottom: 2rem;
|
|
width: 63%;
|
|
}
|
|
}
|
|
|
|
@media (max-height: 640px) {
|
|
.homepage-pagination {
|
|
position: fixed;
|
|
bottom: 2rem;
|
|
width: 71%;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1056px) {
|
|
.homepage-app-card-list-item {
|
|
flex-basis: 50%;
|
|
}
|
|
}
|
|
|
|
.homepage-body {
|
|
overflow-y: hidden;
|
|
|
|
a {
|
|
color: inherit;
|
|
}
|
|
|
|
a:hover {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
button.create-new-app-button {
|
|
background-color: var(--indigo9);
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.app-list {
|
|
.app-card {
|
|
height: 180px;
|
|
max-height: 180px;
|
|
border: 0.5px solid #b4bbc6;
|
|
box-sizing: border-box;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
|
|
.app-creation-time {
|
|
span {
|
|
color: var(--slate11) !important;
|
|
}
|
|
}
|
|
|
|
.app-creator {
|
|
font-weight: 500;
|
|
font-size: 0.625rem;
|
|
line-height: 12px;
|
|
color: #292d37;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.app-icon-main {
|
|
background-color: $primary;
|
|
|
|
.app-icon {
|
|
img {
|
|
height: 24px;
|
|
width: 24px;
|
|
filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(17deg) brightness(104%) contrast(104%);
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
}
|
|
|
|
.app-template-card-wrapper {
|
|
.card-body {
|
|
padding-left: 0px !important;
|
|
}
|
|
}
|
|
|
|
.app-title {
|
|
line-height: 20px;
|
|
font-size: 1rem;
|
|
font-weight: 400;
|
|
color: #000000;
|
|
overflow: hidden;
|
|
max-height: 40px;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
/* number of lines to show */
|
|
line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
|
|
button {
|
|
font-size: 0.6rem;
|
|
width: 100%;
|
|
}
|
|
|
|
.menu-ico {
|
|
cursor: pointer;
|
|
|
|
img {
|
|
padding: 0px;
|
|
height: 14px;
|
|
width: 14px;
|
|
vertical-align: unset;
|
|
}
|
|
}
|
|
}
|
|
|
|
.app-card.highlight {
|
|
background-color: #f8f8f8;
|
|
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
|
|
border: 0.5px solid $primary;
|
|
|
|
.edit-button {
|
|
box-sizing: border-box;
|
|
border-radius: 6px;
|
|
color: $primary-light;
|
|
width: 113px;
|
|
height: 28px;
|
|
background: var(--indigo11) !important;
|
|
border: none;
|
|
color: var(--indigo4);
|
|
padding: 4px 16px;
|
|
gap: 6px;
|
|
height: 28px;
|
|
|
|
|
|
&:hover {
|
|
background: var(--indigo10);
|
|
|
|
}
|
|
|
|
&:focus {
|
|
box-shadow: 0px 0px 0px 4px var(--indigo6);
|
|
background: var(--indigo10);
|
|
outline: 0;
|
|
}
|
|
|
|
|
|
&:active {
|
|
background: var(--indigo11);
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
.launch-button {
|
|
box-sizing: border-box;
|
|
border-radius: 6px;
|
|
color: var(--slate12);
|
|
width: 113px;
|
|
height: 28px;
|
|
background: var(--base);
|
|
border: 1px solid var(--slate7);
|
|
color: var(--slate12);
|
|
padding: 4px 16px;
|
|
gap: 6px;
|
|
height: 28px !important;
|
|
|
|
|
|
&:hover {
|
|
background: var(--slate8);
|
|
color: var(--slate11);
|
|
border: 1px solid var(--slate8);
|
|
background: var(--base);
|
|
}
|
|
|
|
&:active {
|
|
background: var(--base);
|
|
box-shadow: none;
|
|
border: 1px solid var(--slate12);
|
|
color: var(--slate12);
|
|
}
|
|
|
|
&:focus {
|
|
background: var(--base);
|
|
color: var(--slate11);
|
|
border: 1px solid var(--slate8);
|
|
box-shadow: 0px 0px 0px 4px var(--slate6);
|
|
}
|
|
}
|
|
|
|
.app-title {
|
|
height: 20px;
|
|
-webkit-line-clamp: 1;
|
|
/* number of lines to show */
|
|
line-clamp: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.template-library-modal {
|
|
font-weight: 500;
|
|
|
|
.modal-header {
|
|
background-color: var(--base) !important;
|
|
border-bottom: 1px solid var(--slate5);
|
|
|
|
}
|
|
|
|
.modal-dialog {
|
|
max-width: 90%;
|
|
height: 80%;
|
|
|
|
.modal-content {
|
|
height: 100%;
|
|
padding: 0;
|
|
|
|
|
|
.modal-body {
|
|
height: 80%;
|
|
padding: 0 10px;
|
|
background-color: var(--base) !important;
|
|
|
|
|
|
.container-fluid {
|
|
height: 100%;
|
|
padding: 0;
|
|
|
|
.row {
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal-body,
|
|
.modal-footer {
|
|
background-color: #ffffff;
|
|
}
|
|
}
|
|
|
|
.template-categories {
|
|
.list-group-item {
|
|
border: 0;
|
|
}
|
|
|
|
.list-group-item.active {
|
|
background-color: #edf1ff;
|
|
color: $primary-light;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
|
|
.template-app-list {
|
|
.list-group-item {
|
|
border: 0;
|
|
}
|
|
|
|
.list-group-item.active {
|
|
background-color: #edf1ff;
|
|
color: black;
|
|
}
|
|
}
|
|
|
|
.template-display {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
height: 100%;
|
|
|
|
h3.title {
|
|
font-weight: 600;
|
|
line-height: 17px;
|
|
}
|
|
|
|
p.description {
|
|
font-weight: 500;
|
|
font-size: 13px;
|
|
line-height: 15px;
|
|
letter-spacing: -0.1px;
|
|
color: #8092ab;
|
|
}
|
|
|
|
img.template-image {
|
|
height: 75%;
|
|
width: 85%;
|
|
border: 0;
|
|
padding: 0;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.template-spinner {
|
|
width: 3rem;
|
|
height: 3rem;
|
|
margin: auto;
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
|
|
.row {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.template-list {
|
|
padding-top: 16px;
|
|
|
|
.template-search-box {
|
|
input {
|
|
border-radius: 5px !important;
|
|
}
|
|
|
|
.input-icon {
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
.input-icon {
|
|
.search-icon {
|
|
display: block;
|
|
position: absolute;
|
|
left: 0;
|
|
margin-right: 0.5rem;
|
|
}
|
|
|
|
.clear-icon {
|
|
cursor: pointer;
|
|
display: block;
|
|
position: absolute;
|
|
right: 0;
|
|
margin-right: 0.5rem;
|
|
}
|
|
}
|
|
|
|
.list-group-item.active {
|
|
color: $primary;
|
|
}
|
|
}
|
|
}
|
|
|
|
.template-library-modal.dark-mode {
|
|
|
|
.template-modal-control-column,
|
|
.template-list-column,
|
|
.categories-column,
|
|
.modal-header {
|
|
border-color: var(--slate5) !important;
|
|
}
|
|
|
|
.modal-body {
|
|
height: 80%;
|
|
padding: 0 10px;
|
|
background-color: var(--base) !important;
|
|
|
|
.container-fluid {
|
|
height: 100%;
|
|
padding: 0;
|
|
|
|
.row {
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal-footer,
|
|
.modal-header,
|
|
.modal-content {
|
|
color: white;
|
|
background-color: #2b394a;
|
|
}
|
|
|
|
.template-categories {
|
|
.list-group-item {
|
|
color: white;
|
|
border: 0;
|
|
}
|
|
|
|
.list-group-item:hover {
|
|
background-color: #232e3c;
|
|
}
|
|
|
|
.list-group-item.active {
|
|
background-color: $primary-light;
|
|
color: white;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
|
|
.template-app-list {
|
|
.list-group-item {
|
|
border: 0;
|
|
color: white;
|
|
}
|
|
|
|
.list-group-item:hover {
|
|
border: 0;
|
|
background-color: #232e3c;
|
|
}
|
|
|
|
.list-group-item.active {
|
|
background-color: $primary-light;
|
|
color: white;
|
|
}
|
|
|
|
.no-results-item {
|
|
background-color: var(--slate4);
|
|
color: white;
|
|
}
|
|
}
|
|
|
|
.template-list {
|
|
.template-search-box {
|
|
input {
|
|
background-color: #2b394a;
|
|
border-color: #232e3c;
|
|
color: white;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.organizations-modal.dark-mode,
|
|
.user-edit-modal.dark-mode {
|
|
.modal-header {
|
|
border-color: #232e3c !important;
|
|
}
|
|
|
|
.modal-body,
|
|
.modal-footer,
|
|
.modal-header,
|
|
.modal-content {
|
|
color: white;
|
|
background-color: #2b394a;
|
|
}
|
|
|
|
.user-table-header th {
|
|
color: white;
|
|
background-color: #1c252f;
|
|
}
|
|
}
|
|
|
|
.fx-container {
|
|
position: relative;
|
|
}
|
|
|
|
.fx-common {
|
|
margin-right: 12px;
|
|
}
|
|
|
|
.fx-button {
|
|
border-radius: 6px;
|
|
|
|
svg {
|
|
margin: 2px 4px;
|
|
}
|
|
}
|
|
|
|
.fx-button:hover {
|
|
background-color: var(--slate4);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.fx-button.active {
|
|
background-color: var(--indigo5);
|
|
cursor: pointer;
|
|
}
|
|
|
|
|
|
|
|
.fx-container-eventmanager {
|
|
position: relative;
|
|
}
|
|
|
|
.fx-container-eventmanager * .fx-outer-wrapper {
|
|
position: absolute !important;
|
|
top: 7px !important;
|
|
right: -26px;
|
|
}
|
|
|
|
// targeting select component library class
|
|
|
|
.component-action-select *.css-1nfapid-container {
|
|
width: 184px !important;
|
|
}
|
|
|
|
.component-action-select {
|
|
.css-zz6spl-container {
|
|
width: inherit;
|
|
}
|
|
|
|
&.fx-container-eventmanager {
|
|
.fx-common {
|
|
right: 0;
|
|
}
|
|
|
|
.custom-row {
|
|
width: 100%
|
|
}
|
|
}
|
|
|
|
.codeShow-active {
|
|
display: flex;
|
|
flex-direction: row-reverse;
|
|
justify-content: space-between;
|
|
|
|
.custom-row {
|
|
width: 75%;
|
|
}
|
|
}
|
|
|
|
.row.fx-container {
|
|
.col {
|
|
display: flex;
|
|
}
|
|
}
|
|
}
|
|
|
|
.fx-container-eventmanager *.fx-common {
|
|
top: 6px !important;
|
|
right: -34px;
|
|
}
|
|
|
|
.fx-container-eventmanager-code {
|
|
padding-right: 15px !important;
|
|
}
|
|
|
|
.unselectable {
|
|
-webkit-touch-callout: none;
|
|
-webkit-user-select: none;
|
|
-khtml-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
.layout-buttons {
|
|
span {
|
|
color: $primary;
|
|
}
|
|
}
|
|
|
|
.inspector {
|
|
.tab-content {
|
|
overflow-y: auto;
|
|
// TAB HEADER HEIGHT + FOOTER HEIGHT + Extra padding = 120px
|
|
height: calc(100vh - 10.4rem);
|
|
// Hide scrollbar
|
|
-ms-overflow-style: none;
|
|
/* IE and Edge */
|
|
scrollbar-width: none;
|
|
/* Firefox */
|
|
border-top: 1px solid var(--slate5) !important;
|
|
}
|
|
|
|
/* Hide scrollbar for Chrome, Safari and Opera */
|
|
.tab-content::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.accordion:last-child {
|
|
margin-bottom: 45px !important;
|
|
}
|
|
|
|
.field-type-vertical-line {
|
|
position: relative;
|
|
width: 0;
|
|
height: 2rem;
|
|
border-left: 1px solid var(--slate5);
|
|
content: '';
|
|
margin-right: -2.75rem;
|
|
|
|
}
|
|
|
|
.code-hinter-vertical-line {
|
|
position: relative;
|
|
width: 0;
|
|
border-left: 1px solid var(--slate5);
|
|
content: '';
|
|
margin-right: 1rem;
|
|
}
|
|
|
|
.code-hinter-wrapper {
|
|
min-width: 0;
|
|
}
|
|
|
|
.inspector-field-number {
|
|
background-color: var(--slate1);
|
|
border: none;
|
|
color: var(--slate12);
|
|
width: 8.063rem; //129px
|
|
border: 1px solid var(--slate7);
|
|
padding: 6px 10px;
|
|
}
|
|
}
|
|
|
|
|
|
.theme-dark {
|
|
.accordion-button::after {
|
|
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="13" viewBox="0 0 12 13" fill="none"><path d="M8.19426 3.5L3.80582 3.5C3.22697 3.5 2.86632 4.12791 3.15798 4.6279L5.35221 8.38943C5.64161 8.88556 6.35846 8.88556 6.64787 8.38943L8.8421 4.6279C9.13376 4.12791 8.77311 3.5 8.19426 3.5Z" fill="%23ffffff"/></svg>');
|
|
}
|
|
|
|
.accordion-item-trigger {
|
|
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="13" viewBox="0 0 12 13" fill="none"><path d="M8.19426 3.5L3.80582 3.5C3.22697 3.5 2.86632 4.12791 3.15798 4.6279L5.35221 8.38943C5.64161 8.88556 6.35846 8.88556 6.64787 8.38943L8.8421 4.6279C9.13376 4.12791 8.77311 3.5 8.19426 3.5Z" fill="%23ffffff"/></svg>') !important;
|
|
}
|
|
|
|
.homepage-body {
|
|
.app-list {
|
|
.app-title {
|
|
line-height: 20px;
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
}
|
|
|
|
.layout-buttons {
|
|
svg {
|
|
filter: invert(89%) sepia(2%) saturate(127%) hue-rotate(175deg) brightness(99%) contrast(96%);
|
|
}
|
|
}
|
|
|
|
.organization-list {
|
|
margin-top: 5px;
|
|
|
|
.btn {
|
|
border: 0px;
|
|
}
|
|
|
|
.dropdown-toggle div {
|
|
max-width: 200px;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
.left-menu {
|
|
ul {
|
|
li:not(.active):hover {
|
|
color: $black;
|
|
}
|
|
}
|
|
}
|
|
|
|
.menu-ico,
|
|
.folder-menu-icon {
|
|
svg {
|
|
path {
|
|
fill: white !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.pagination {
|
|
.page-item.active {
|
|
a.page-link {
|
|
background-color: var(--primary-brand);
|
|
}
|
|
}
|
|
}
|
|
|
|
.datasource-picker,
|
|
.stripe-operation-options {
|
|
|
|
.select-search,
|
|
.select-search-dark,
|
|
.select-search__value input,
|
|
.select-search-dark input {
|
|
width: 224px !important;
|
|
height: 32px !important;
|
|
border-radius: $border-radius !important;
|
|
}
|
|
}
|
|
|
|
.openapi-operation-options {
|
|
|
|
.select-search,
|
|
.select-search-dark,
|
|
.select-search__value input,
|
|
.select-search-dark input {
|
|
height: 32px !important;
|
|
border-radius: $border-radius !important;
|
|
}
|
|
}
|
|
|
|
.openapi-operations-desc {
|
|
padding-top: 12px;
|
|
}
|
|
|
|
.select-search {
|
|
width: 100%;
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.select-search *,
|
|
.select-search *::after,
|
|
.select-search *::before {
|
|
box-sizing: inherit;
|
|
}
|
|
|
|
.select-search-dark {
|
|
.select-search-dark__input::placeholder {
|
|
color: #E0E0E0;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Value wrapper
|
|
*/
|
|
.select-search__value {
|
|
position: relative;
|
|
}
|
|
|
|
.select-search__value::after {
|
|
content: "";
|
|
display: inline-block;
|
|
position: absolute;
|
|
top: calc(50% - 9px);
|
|
right: 19px;
|
|
width: 11px;
|
|
height: 11px;
|
|
}
|
|
|
|
/**
|
|
* Input
|
|
*/
|
|
.select-search__input {
|
|
display: block;
|
|
width: 100%;
|
|
padding: 0.4375rem 0.75rem;
|
|
font-size: 0.875rem;
|
|
font-weight: 400;
|
|
line-height: 1.4285714;
|
|
color: var(--slate12);
|
|
background-color: var(--base);
|
|
background-clip: padding-box;
|
|
border: 1px solid var(--slate7);
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
appearance: none;
|
|
border-radius: $border-radius !important;
|
|
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
|
}
|
|
|
|
.select-search__input::-webkit-search-decoration,
|
|
.select-search__input::-webkit-search-cancel-button,
|
|
.select-search__input::-webkit-search-results-button,
|
|
.select-search__input::-webkit-search-results-decoration {
|
|
-webkit-appearance: none;
|
|
}
|
|
|
|
.select-search__input:not([readonly]):focus {
|
|
cursor: initial;
|
|
}
|
|
|
|
/**
|
|
* Options wrapper
|
|
*/
|
|
.select-search__select {
|
|
background: #ffffff;
|
|
box-shadow: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
/**
|
|
* Options
|
|
*/
|
|
.select-search__options {
|
|
list-style: none;
|
|
}
|
|
|
|
/**
|
|
* Option row
|
|
*/
|
|
.select-search__row:not(:first-child) {
|
|
border-top: 1px solid #eee;
|
|
}
|
|
|
|
/**
|
|
* Option
|
|
*/
|
|
.select-search__option,
|
|
.select-search__not-found {
|
|
display: block;
|
|
height: 36px;
|
|
width: 100%;
|
|
padding: 0 16px;
|
|
background: var(--base);
|
|
border: none;
|
|
outline: none;
|
|
font-family: "Roboto", sans-serif;
|
|
font-size: 14px;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.select-search--multiple .select-search__option {
|
|
height: 48px;
|
|
}
|
|
|
|
.select-search__option.is-highlighted,
|
|
.select-search__option:not(.is-selected):hover {
|
|
background: rgba(47, 204, 139, 0.1);
|
|
}
|
|
|
|
.select-search__option.is-highlighted.is-selected,
|
|
.select-search__option.is-selected:hover {
|
|
background: #2eb378;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.audit-log {
|
|
.select-search__option.is-selected {
|
|
background: $primary;
|
|
color: $white;
|
|
}
|
|
|
|
.page-body {
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
}
|
|
|
|
/**
|
|
* Group
|
|
*/
|
|
.select-search__group-header {
|
|
font-size: 10px;
|
|
text-transform: uppercase;
|
|
background: #eee;
|
|
padding: 8px 16px;
|
|
}
|
|
|
|
/**
|
|
* States
|
|
*/
|
|
.select-search.is-disabled {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.select-search.is-loading .select-search__value::after {
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 50 50'%3E%3Cpath fill='%232F2D37' d='M25,5A20.14,20.14,0,0,1,45,22.88a2.51,2.51,0,0,0,2.49,2.26h0A2.52,2.52,0,0,0,50,22.33a25.14,25.14,0,0,0-50,0,2.52,2.52,0,0,0,2.5,2.81h0A2.51,2.51,0,0,0,5,22.88,20.14,20.14,0,0,1,25,5Z'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 25 25' to='360 25 25' dur='0.6s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E");
|
|
background-size: 8px;
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
.select-search:not(.is-disabled) .select-search__input {
|
|
cursor: pointer;
|
|
}
|
|
|
|
/**
|
|
* Modifiers
|
|
*/
|
|
.select-search--multiple {
|
|
border-radius: 3px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.select-search:not(.is-loading):not(.select-search--multiple) .select-search__value::after {
|
|
transform: rotate(45deg);
|
|
border-right: 1px solid #000;
|
|
border-bottom: 1px solid #000;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.select-search--multiple .select-search__input {
|
|
cursor: initial;
|
|
}
|
|
|
|
.select-search--multiple .select-search__input {
|
|
border-radius: 3px 3px 0 0;
|
|
}
|
|
|
|
.select-search--multiple:not(.select-search--search) .select-search__input {
|
|
cursor: default;
|
|
}
|
|
|
|
.select-search:not(.select-search--multiple) .select-search__input:hover {
|
|
border-color: #2fcc8b;
|
|
}
|
|
|
|
.select-search:not(.select-search--multiple) .select-search__select {
|
|
position: absolute;
|
|
z-index: 2;
|
|
right: 0;
|
|
left: 0;
|
|
border-radius: 3px;
|
|
overflow: auto;
|
|
max-height: 360px;
|
|
}
|
|
|
|
.select-search--multiple .select-search__select {
|
|
position: relative;
|
|
overflow: auto;
|
|
max-height: 260px;
|
|
border-top: 1px solid #eee;
|
|
border-radius: 0 0 3px 3px;
|
|
}
|
|
|
|
.select-search__not-found {
|
|
height: auto;
|
|
padding: 16px;
|
|
text-align: center;
|
|
color: #888;
|
|
}
|
|
|
|
/**
|
|
* Select Search Dark Mode
|
|
*/
|
|
.select-search-dark {
|
|
width: 100%;
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.select-search-dark *,
|
|
.select-search-dark *::after,
|
|
.select-search-dark *::before {
|
|
box-sizing: inherit;
|
|
}
|
|
|
|
/**
|
|
* Value wrapper
|
|
*/
|
|
.select-search-dark__value {
|
|
position: relative;
|
|
}
|
|
|
|
.select-search-dark__value::after {
|
|
content: "";
|
|
display: inline-block;
|
|
position: absolute;
|
|
top: calc(50% - 4px);
|
|
right: 13px;
|
|
width: 6px;
|
|
height: 6px;
|
|
filter: brightness(0) invert(1);
|
|
}
|
|
|
|
/**
|
|
* Input
|
|
*/
|
|
.select-search-dark__input {
|
|
display: block;
|
|
width: 100%;
|
|
font-size: 0.875rem;
|
|
font-weight: 400;
|
|
line-height: 1.4285714;
|
|
color: #ffffff;
|
|
background-color: #2b3547;
|
|
background-clip: padding-box;
|
|
border: 1px solid #232e3c;
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
appearance: none;
|
|
border-radius: 0;
|
|
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
|
}
|
|
|
|
.select-search-dark__input::-webkit-search-decoration,
|
|
.select-search-dark__input::-webkit-search-cancel-button,
|
|
.select-search-dark__input::-webkit-search-results-button,
|
|
.select-search-dark__input::-webkit-search-results-decoration {
|
|
-webkit-appearance: none;
|
|
}
|
|
|
|
.select-search-dark__input:not([readonly]):focus {
|
|
cursor: initial;
|
|
}
|
|
|
|
/**
|
|
* Options
|
|
*/
|
|
.select-search-dark__options {
|
|
list-style: none;
|
|
padding: 0;
|
|
}
|
|
|
|
/**
|
|
* Option row
|
|
*/
|
|
.select-search-dark__row:not(:first-child) {
|
|
border-top: none;
|
|
}
|
|
|
|
/**
|
|
* Option
|
|
*/
|
|
.select-search-dark__option,
|
|
.select-search-dark__not-found {
|
|
display: block;
|
|
height: 36px;
|
|
width: 100%;
|
|
padding: 0 16px;
|
|
background-color: var(--base) !important;
|
|
color: #ffffff !important;
|
|
outline: none;
|
|
font-family: "Roboto", sans-serif;
|
|
font-size: 14px;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
border-radius: 0;
|
|
|
|
&:hover {
|
|
background-color: #2b3546 !important;
|
|
}
|
|
}
|
|
|
|
.select-search-dark--multiple .select-search-dark__option {
|
|
height: 48px;
|
|
}
|
|
|
|
/**
|
|
* Group
|
|
*/
|
|
.select-search-dark__group-header {
|
|
font-size: 10px;
|
|
text-transform: uppercase;
|
|
background: #eee;
|
|
padding: 8px 16px;
|
|
}
|
|
|
|
/**
|
|
* States
|
|
*/
|
|
.select-search-dark.is-disabled {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.select-search-dark.is-loading .select-search-dark__value::after {
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 50 50'%3E%3Cpath fill='%232F2D37' d='M25,5A20.14,20.14,0,0,1,45,22.88a2.51,2.51,0,0,0,2.49,2.26h0A2.52,2.52,0,0,0,50,22.33a25.14,25.14,0,0,0-50,0,2.52,2.52,0,0,0,2.5,2.81h0A2.51,2.51,0,0,0,5,22.88,20.14,20.14,0,0,1,25,5Z'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 25 25' to='360 25 25' dur='0.6s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E");
|
|
background-size: 11px;
|
|
}
|
|
|
|
.select-search-dark:not(.is-disabled) .select-search-dark__input {
|
|
cursor: pointer;
|
|
}
|
|
|
|
/**
|
|
* Modifiers
|
|
*/
|
|
.select-search-dark--multiple {
|
|
border-radius: 3px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.select-search-dark:not(.is-loading):not(.select-search-dark--multiple) .select-search-dark__value::after {
|
|
transform: rotate(45deg);
|
|
border-right: 1px solid #000;
|
|
border-bottom: 1px solid #000;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.select-search-dark--multiple .select-search-dark__input {
|
|
cursor: initial;
|
|
}
|
|
|
|
.select-search-dark--multiple .select-search-dark__input {
|
|
border-radius: 3px 3px 0 0;
|
|
}
|
|
|
|
.select-search-dark--multiple:not(.select-search-dark--search) .select-search-dark__input {
|
|
cursor: default;
|
|
}
|
|
|
|
.select-search-dark:not(.select-search-dark--multiple) .select-search-dark__input:hover {
|
|
border-color: #ffffff;
|
|
}
|
|
|
|
.select-search-dark:not(.select-search-dark--multiple) .select-search-dark__select {
|
|
position: absolute;
|
|
z-index: 2;
|
|
right: 0;
|
|
left: 0;
|
|
border-radius: 3px;
|
|
overflow: auto;
|
|
max-height: 360px;
|
|
}
|
|
|
|
.select-search-dark--multiple .select-search-dark__select {
|
|
position: relative;
|
|
overflow: auto;
|
|
max-height: 260px;
|
|
border-top: 1px solid #eee;
|
|
border-radius: 0 0 3px 3px;
|
|
}
|
|
|
|
.select-search-dark__not-found {
|
|
height: auto;
|
|
padding: 16px;
|
|
text-align: center;
|
|
color: #888;
|
|
}
|
|
|
|
// jet-table-footer is common class used in other components other than table
|
|
.jet-table-footer {
|
|
.table-footer {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.btn-primary {
|
|
--tblr-btn-color: #{$primary-rgb};
|
|
--tblr-btn-color-darker: #{$primary-rgb-darker};
|
|
border-color: none;
|
|
}
|
|
|
|
.form-check-input:checked {
|
|
background-color: var(--indigo9);
|
|
border-color: rgba(101, 109, 119, 0.24);
|
|
}
|
|
|
|
#passwordLogin:checked {
|
|
background-color: #E54D2E;
|
|
border-color: rgba(101, 109, 119, 0.24);
|
|
}
|
|
|
|
.btn:focus,
|
|
.btn:active,
|
|
.form-check-input:focus,
|
|
.form-check-input:active,
|
|
.form-control:focus,
|
|
th:focus,
|
|
tr:focus {
|
|
outline: none !important;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.show-password-field {
|
|
width: fit-content;
|
|
|
|
.form-check-input {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.show-password-label {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.select-search__option {
|
|
color: rgb(90, 89, 89);
|
|
}
|
|
|
|
.select-search__option.is-selected {
|
|
background: rgba(176, 176, 176, 0.07);
|
|
color: #4d4d4d;
|
|
}
|
|
|
|
.select-search__option.is-highlighted.is-selected,
|
|
.select-search__option.is-selected:hover {
|
|
background: rgba(66, 153, 225, 0.1);
|
|
color: rgb(44, 43, 43);
|
|
}
|
|
|
|
.select-search__option.is-highlighted,
|
|
.select-search__option:hover {
|
|
background: rgba(66, 153, 225, 0.1);
|
|
}
|
|
|
|
.select-search__options {
|
|
margin-left: -33px;
|
|
}
|
|
|
|
.select-search__option.is-highlighted,
|
|
.select-search__option:not(.is-selected):hover {
|
|
background: rgba(66, 153, 225, 0.1);
|
|
}
|
|
|
|
.select-search:not(.select-search--multiple) .select-search__input:hover {
|
|
border-color: rgba(66, 153, 225, 0.1);
|
|
}
|
|
|
|
.DateInput_input {
|
|
font-weight: 300;
|
|
font-size: 14px;
|
|
padding: 4px 7px 2px;
|
|
padding: 4px 7px 2px;
|
|
width: 100px !important;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.no-components-box {
|
|
border: 1px dashed #3e525b;
|
|
}
|
|
|
|
.form-control-plaintext:focus-visible {
|
|
outline: none;
|
|
outline-width: thin;
|
|
outline-style: solid;
|
|
outline-color: $primary;
|
|
}
|
|
|
|
.form-control-plaintext:hover {
|
|
outline: none;
|
|
outline-width: thin;
|
|
outline-style: solid;
|
|
outline-color: rgba(66, 153, 225, 0.8);
|
|
}
|
|
|
|
.select-search__input:focus-visible {
|
|
outline: none;
|
|
outline-color: #4ac4d6;
|
|
}
|
|
|
|
.form-control-plaintext {
|
|
padding: 5px;
|
|
}
|
|
|
|
.code-builder {
|
|
border: solid 1px #dadcde;
|
|
border-radius: 2px;
|
|
padding-top: 4px;
|
|
|
|
.variables-dropdown {
|
|
position: fixed;
|
|
right: 0;
|
|
width: 400px;
|
|
z-index: 200;
|
|
border: solid 1px #dadcde;
|
|
|
|
.group-header {
|
|
background: #f4f6fa;
|
|
}
|
|
}
|
|
}
|
|
|
|
.__react_component_tooltip {
|
|
z-index: 10000;
|
|
}
|
|
|
|
.select-search__value::after {
|
|
top: calc(50% - 2px);
|
|
right: 15px;
|
|
width: 5px;
|
|
height: 5px;
|
|
}
|
|
|
|
.progress-bar {
|
|
background-color: rgba(66, 153, 225, 0.7);
|
|
}
|
|
|
|
.popover-header {
|
|
background-color: #f4f6fa;
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.popover-body {
|
|
background-color: var(--base);
|
|
color: var(--slate12);
|
|
border-radius: 6px;
|
|
|
|
.form-label {
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Home page app menu
|
|
*/
|
|
#popover-app-menu {
|
|
border-radius: 4px;
|
|
width: 150px;
|
|
box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
|
|
background: var(--base);
|
|
color: var(--slate12);
|
|
border: 1px solid var(--slate3);
|
|
|
|
.popover-arrow {
|
|
display: none;
|
|
}
|
|
|
|
.popover-body {
|
|
padding: 16px 12px 0px 12px;
|
|
color: var(--slate12);
|
|
|
|
.field {
|
|
font-weight: 500;
|
|
font-size: 0.7rem;
|
|
|
|
&__danger {
|
|
color: var(--tomato9);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.input-icon {
|
|
.input-icon-addon {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.input-icon:hover {
|
|
.input-icon-addon {
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
.input-icon:focus {
|
|
.input-icon-addon {
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
.sub-section {
|
|
width: 100%;
|
|
display: block;
|
|
}
|
|
|
|
.text-muted {
|
|
color: #3e525b !important;
|
|
}
|
|
|
|
body {
|
|
color: #3e525b;
|
|
}
|
|
|
|
.RichEditor-root {
|
|
background: #ffffff;
|
|
border: 1px solid #ddd;
|
|
font-family: "Georgia", serif;
|
|
font-size: 14px;
|
|
padding: 15px;
|
|
height: 100%;
|
|
}
|
|
|
|
.RichEditor-editor {
|
|
border-top: 1px solid #ddd;
|
|
cursor: text;
|
|
font-size: 16px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.RichEditor-editor .public-DraftEditorPlaceholder-root,
|
|
.RichEditor-editor .public-DraftEditor-content {
|
|
margin: 0 -15px -15px;
|
|
padding: 15px;
|
|
}
|
|
|
|
.RichEditor-editor .public-DraftEditor-content {
|
|
min-height: 100px;
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
.RichEditor-hidePlaceholder .public-DraftEditorPlaceholder-root {
|
|
display: none;
|
|
}
|
|
|
|
.RichEditor-editor .RichEditor-blockquote {
|
|
border-left: 5px solid #eee;
|
|
color: #666;
|
|
font-family: "Hoefler Text", "Georgia", serif;
|
|
font-style: italic;
|
|
margin: 16px 0;
|
|
padding: 10px 20px;
|
|
}
|
|
|
|
.RichEditor-editor .public-DraftStyleDefault-pre {
|
|
background-color: rgba(0, 0, 0, 0.05);
|
|
font-family: "Inconsolata", "Menlo", "Consolas", monospace;
|
|
font-size: 16px;
|
|
padding: 20px;
|
|
color: #0000009c;
|
|
}
|
|
|
|
.RichEditor-controls {
|
|
font-family: "Helvetica", sans-serif;
|
|
font-size: 14px;
|
|
margin-bottom: 5px;
|
|
user-select: none;
|
|
}
|
|
|
|
.dropmenu {
|
|
position: relative;
|
|
display: inline-block;
|
|
margin-right: 16px;
|
|
|
|
.dropdownbtn {
|
|
color: #999;
|
|
background: none;
|
|
cursor: pointer;
|
|
outline: none;
|
|
border: none;
|
|
}
|
|
|
|
.dropdown-content {
|
|
display: none;
|
|
position: absolute;
|
|
z-index: 2;
|
|
width: 100%;
|
|
align-items: center;
|
|
border: 1px solid transparent;
|
|
border-radius: 4px;
|
|
box-shadow: 0 2px 6px 2px rgba(47, 54, 59, 0.15);
|
|
|
|
a {
|
|
text-decoration: none;
|
|
width: 100%;
|
|
position: relative;
|
|
display: block;
|
|
|
|
span {
|
|
text-align: center;
|
|
width: 100%;
|
|
text-align: center;
|
|
padding: 3px 0px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.dropmenu .dropdown-content a:hover {
|
|
background-color: rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.dropmenu:hover {
|
|
.dropdownbtn {
|
|
color: #5890ff;
|
|
background-color: rgba(0, 0, 0, 0.05);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.dropdown-content {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.RichEditor-styleButton {
|
|
color: #999;
|
|
cursor: pointer;
|
|
margin-right: 16px;
|
|
padding: 2px 0;
|
|
display: inline-block;
|
|
}
|
|
|
|
.RichEditor-activeButton {
|
|
color: #5890ff;
|
|
}
|
|
|
|
|
|
.chart-data-input {
|
|
.CodeMirror {
|
|
min-height: 370px;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.code-hinter {
|
|
min-height: 370px;
|
|
}
|
|
}
|
|
|
|
.map-location-input {
|
|
.CodeMirror {
|
|
min-height: 120px;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.code-hinter {
|
|
min-height: 120px;
|
|
}
|
|
}
|
|
|
|
.rdt {
|
|
.form-control {
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.DateInput_input__focused {
|
|
border-bottom: 2px solid $primary;
|
|
}
|
|
|
|
.CalendarDay__selected,
|
|
.CalendarDay__selected:active,
|
|
.CalendarDay__selected:hover {
|
|
background: var(--primary-brand);
|
|
border: 1px double var(--primary-brand);
|
|
}
|
|
|
|
.CalendarDay__selected_span {
|
|
background: var(--primary-brand);
|
|
border: var(--primary-brand);
|
|
}
|
|
|
|
.CalendarDay__selected_span:active,
|
|
.CalendarDay__selected_span:hover {
|
|
background: var(--primary-brand);
|
|
border: 1px double var(--primary-brand);
|
|
color: #ffffff;
|
|
}
|
|
|
|
.CalendarDay__hovered_span:active,
|
|
.CalendarDay__hovered_span:hover {
|
|
background: var(--primary-brand);
|
|
border: 1px double var(--primary-brand);
|
|
color: #ffffff;
|
|
}
|
|
|
|
.CalendarDay__hovered_span {
|
|
background: var(--primary-brand);
|
|
border: 1px double var(--primary-brand);
|
|
color: #ffffff;
|
|
}
|
|
|
|
.table-responsive {
|
|
margin-bottom: 0rem;
|
|
}
|
|
|
|
.code-hinter::-webkit-scrollbar {
|
|
width: 0;
|
|
height: 0;
|
|
background: transparent;
|
|
}
|
|
|
|
.codehinter-query-editor-input {
|
|
.CodeMirror {
|
|
font-family: "Roboto", sans-serif;
|
|
color: #263136;
|
|
overflow: hidden;
|
|
height: 50px !important;
|
|
}
|
|
|
|
.CodeMirror-vscrollbar {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.CodeMirror-focused {
|
|
padding-top: 0;
|
|
height: 50px;
|
|
}
|
|
|
|
.CodeMirror-scroll {
|
|
position: absolute;
|
|
top: 0;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.field {
|
|
.CodeMirror-scroll {
|
|
position: static;
|
|
top: 0;
|
|
}
|
|
|
|
.form-check {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
.code-hinter {
|
|
.form-control {
|
|
.CodeMirror {
|
|
font-family: "Roboto", sans-serif;
|
|
height: 50px !important;
|
|
max-height: 300px;
|
|
}
|
|
}
|
|
|
|
.CodeMirror-vscrollbar,
|
|
.CodeMirror-hscrollbar {
|
|
background: transparent;
|
|
height: 0;
|
|
width: 0;
|
|
}
|
|
|
|
.CodeMirror-scroll {
|
|
overflow: hidden !important;
|
|
position: static;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.CodeMirror-hints {
|
|
font-family: "Roboto", sans-serif;
|
|
font-size: 0.9rem;
|
|
padding: 0px;
|
|
z-index: $hints-z-index;
|
|
|
|
li.CodeMirror-hint-active {
|
|
background: $primary;
|
|
}
|
|
|
|
.CodeMirror-hint {
|
|
padding: 4px;
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
}
|
|
}
|
|
|
|
.cm-matchhighlight {
|
|
color: #4299e1 !important;
|
|
background: rgba(66, 153, 225, 0.1) !important;
|
|
}
|
|
|
|
.nav-tabs .nav-link {
|
|
color: #3e525b;
|
|
border-top-left-radius: 0px;
|
|
border-top-right-radius: 0px;
|
|
}
|
|
|
|
.transformation-popover {
|
|
padding: 14px;
|
|
font-weight: 500;
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
|
|
hr {
|
|
margin: 1rem 0;
|
|
}
|
|
|
|
.query-hinter {
|
|
min-height: 150px;
|
|
}
|
|
|
|
.codehinter-default-input {
|
|
font-family: "Roboto", sans-serif;
|
|
display: block;
|
|
width: 100%;
|
|
font-size: 0.875rem;
|
|
font-weight: 400;
|
|
color: var(--slate9);
|
|
background-color: var(--base) !important;
|
|
background-clip: padding-box;
|
|
border: 1px solid var(--slate7);
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
appearance: none;
|
|
border-radius: 4px;
|
|
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
|
height: 30px;
|
|
|
|
.CodeMirror {
|
|
font-family: "Roboto", sans-serif;
|
|
}
|
|
|
|
.CodeMirror-placeholder {
|
|
height: inherit !important;
|
|
position: absolute !important;
|
|
margin-top: 3px;
|
|
}
|
|
}
|
|
|
|
.codehinter-query-editor-input {
|
|
font-family: "Roboto", sans-serif;
|
|
padding: 0.1775rem 0rem;
|
|
display: block;
|
|
width: 100%;
|
|
font-size: 0.875rem;
|
|
font-weight: 400;
|
|
color: #232e3c;
|
|
background-color: #ffffff;
|
|
background-clip: padding-box;
|
|
border: 1px solid #dadcde;
|
|
border-radius: $border-radius;
|
|
appearance: none;
|
|
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
|
height: 28px !important;
|
|
}
|
|
|
|
.editor {
|
|
.modal-dialog {
|
|
overflow-y: initial !important
|
|
}
|
|
|
|
.modal-dialog-scrollable:not(.modal-fullscreen) .modal-content {
|
|
max-height: 88% !important;
|
|
}
|
|
|
|
.modal-dialog-scrollable.modal-fullscreen .modal-content {
|
|
max-height: 100% !important;
|
|
}
|
|
|
|
.modal-dialog-scrollable.modal-fullscreen .modal-content.modal-component {
|
|
// Modal header height
|
|
padding-bottom: 0;
|
|
}
|
|
}
|
|
|
|
|
|
.modal-component {
|
|
|
|
|
|
.modal-body {
|
|
padding: 0;
|
|
}
|
|
|
|
.modalWidget-config-handle {
|
|
position: relative !important;
|
|
}
|
|
}
|
|
|
|
.multiple-components-config-handle {
|
|
position: absolute;
|
|
left: 54px;
|
|
top: -20px;
|
|
transform: translate(-50%, 0px);
|
|
width: 110px;
|
|
}
|
|
|
|
|
|
.config-handle {
|
|
top: -20px;
|
|
position: fixed;
|
|
max-height: 10px;
|
|
z-index: 100;
|
|
min-width: 108px;
|
|
}
|
|
|
|
|
|
.config-handle,
|
|
.multiple-components-config-handle {
|
|
.handle-content {
|
|
cursor: move;
|
|
color: #ffffff;
|
|
background: $primary;
|
|
}
|
|
|
|
.badge {
|
|
font-size: 9px;
|
|
border-bottom-left-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
|
|
.delete-part {
|
|
margin-left: 10px;
|
|
float: right;
|
|
}
|
|
|
|
.delete-part::before {
|
|
height: 12px;
|
|
display: inline-block;
|
|
width: 2px;
|
|
background-color: rgba(255, 255, 255, 0.8);
|
|
opacity: 0.5;
|
|
content: "";
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
}
|
|
|
|
.draggable-box-in-editor:hover {
|
|
z-index: 3 !important;
|
|
}
|
|
|
|
.config-handle:hover,
|
|
.config-handle {
|
|
visibility: visible;
|
|
}
|
|
|
|
.config-handle {
|
|
visibility: hidden;
|
|
transition: all .15s ease-in-out;
|
|
}
|
|
|
|
.canvas-area #modal-container .modal-component>.config-handle {
|
|
visibility: visible !important;
|
|
}
|
|
|
|
.modal-content {
|
|
.config-handle {
|
|
position: absolute;
|
|
|
|
.badge {
|
|
font-size: 9px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.config-handle {
|
|
display: block;
|
|
}
|
|
|
|
.apps-table {
|
|
.app-title {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.row {
|
|
--tblr-gutter-x: 0rem;
|
|
}
|
|
}
|
|
|
|
|
|
.theme-dark .wrapper {
|
|
|
|
.navbar .navbar-nav .active>.nav-link,
|
|
.navbar .navbar-nav .nav-link.active,
|
|
.navbar .navbar-nav .nav-link.show,
|
|
.navbar .navbar-nav .show>.nav-link {
|
|
color: rgba(255, 255, 255, 0.7);
|
|
}
|
|
}
|
|
|
|
.home-page,
|
|
.org-users-page {
|
|
|
|
.navbar .navbar-nav .active>.nav-link,
|
|
.navbar .navbar-nav .nav-link.active,
|
|
.navbar .navbar-nav .nav-link.show,
|
|
.navbar .navbar-nav .show>.nav-link {
|
|
color: rgba(35, 46, 60, 0.7);
|
|
}
|
|
|
|
.nav-item {
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
img.svg-icon {
|
|
cursor: pointer;
|
|
padding-left: 2px;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
img.svg-icon:hover {
|
|
background-color: rgba(224, 214, 214, 0.507);
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
.CodeMirror-placeholder {
|
|
color: #9e9e9e !important;
|
|
font-size: 0.7rem !important;
|
|
font-size: 12px !important;
|
|
}
|
|
|
|
.CodeMirror-code {
|
|
font-weight: 300;
|
|
}
|
|
|
|
.btn-primary {
|
|
border-color: transparent;
|
|
}
|
|
|
|
.text-widget {
|
|
overflow: auto;
|
|
}
|
|
|
|
.text-widget::-webkit-scrollbar {
|
|
width: 0;
|
|
height: 0;
|
|
background: transparent;
|
|
}
|
|
|
|
.input-group-flat:focus-within {
|
|
box-shadow: none;
|
|
}
|
|
|
|
.map-widget {
|
|
.place-search-input {
|
|
box-sizing: border-box;
|
|
border: 1px solid transparent;
|
|
width: 240px;
|
|
height: 32px;
|
|
padding: 0 12px;
|
|
border-radius: 3px;
|
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
|
|
font-size: 14px;
|
|
outline: none;
|
|
text-overflow: ellipses;
|
|
position: absolute;
|
|
left: 50%;
|
|
margin-left: -120px;
|
|
}
|
|
|
|
.map-center {
|
|
position: fixed;
|
|
z-index: 1000;
|
|
}
|
|
}
|
|
|
|
.events-toggle-active {
|
|
.toggle-icon {
|
|
transform: rotate(180deg);
|
|
}
|
|
}
|
|
|
|
.events-toggle {
|
|
.toggle-icon {
|
|
display: inline-block;
|
|
margin-left: auto;
|
|
transition: 0.3s transform;
|
|
}
|
|
|
|
.toggle-icon:after {
|
|
content: "";
|
|
display: inline-block;
|
|
vertical-align: 0.306em;
|
|
width: 0.46em;
|
|
height: 0.46em;
|
|
border-bottom: 1px solid;
|
|
border-left: 1px solid;
|
|
margin-right: 0.1em;
|
|
margin-left: 0.4em;
|
|
transform: rotate(-45deg);
|
|
}
|
|
}
|
|
|
|
.nav-link-title {
|
|
font-weight: 500;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.navbar-nav {
|
|
.dropdown:hover {
|
|
.dropdown-menu {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
.app-version-container {
|
|
min-height: 200px;
|
|
height: 100%;
|
|
display: flex !important;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.app-version-content {
|
|
flex: 1;
|
|
overflow: auto;
|
|
}
|
|
|
|
.query-manager-header {
|
|
.nav-item {
|
|
border-right: solid 1px #dadcde;
|
|
background: 0 0;
|
|
}
|
|
|
|
.nav-link {
|
|
height: 39px;
|
|
}
|
|
}
|
|
|
|
input:focus-visible {
|
|
outline: none;
|
|
}
|
|
|
|
.navbar-expand-md.navbar-light .nav-item.active:after {
|
|
border: 1px solid $primary;
|
|
}
|
|
|
|
.org-users-page {
|
|
.select-search__input {
|
|
color: #617179;
|
|
}
|
|
|
|
.select-search-role {
|
|
position: absolute;
|
|
margin-top: -1rem;
|
|
}
|
|
|
|
.has-focus>.select-search__select>ul {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.select-search__option.is-selected {
|
|
background: $primary;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
|
|
.encrypted-icon {
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.widget-documentation-link {
|
|
position: fixed;
|
|
bottom: 0;
|
|
background: var(--indigo3);
|
|
width: 18.75rem; // 300px
|
|
z-index: 999;
|
|
padding: 12px 18px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
cursor: pointer;
|
|
|
|
.widget-documentation-link-text {
|
|
margin-left: 10px;
|
|
font-weight: 500;
|
|
color: var(--slate12);
|
|
}
|
|
|
|
&:hover {
|
|
background: var(--indigo4);
|
|
}
|
|
|
|
a {
|
|
&:hover {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.components-container {
|
|
.draggable-box {
|
|
cursor: move;
|
|
}
|
|
}
|
|
|
|
.column-sort-row {
|
|
border-radius: 6px;
|
|
background-color: var(--slate3);
|
|
|
|
.event-handler-text {
|
|
font-size: 12px;
|
|
line-height: 20px;
|
|
color: var(--slate12);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.event-name-text {
|
|
font-size: 12px;
|
|
line-height: 20px;
|
|
color: var(--slate11);
|
|
font-weight: 400;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.card-body {
|
|
color: var(--slate12);
|
|
}
|
|
}
|
|
|
|
.jet-outline-button {
|
|
outline: none;
|
|
border: 1px solid;
|
|
|
|
|
|
&.btn-custom:hover {
|
|
background: var(--tblr-btn-color-darker) !important;
|
|
}
|
|
|
|
&.btn-custom:active {
|
|
background: var(--tblr-btn-color-clicked) !important;
|
|
|
|
}
|
|
}
|
|
|
|
.jet-tabs {
|
|
overflow-y: auto
|
|
}
|
|
|
|
.jet-button {
|
|
outline: none;
|
|
border: 1px solid;
|
|
|
|
&.btn-custom:hover {
|
|
background: var(--tblr-btn-color-darker) !important;
|
|
}
|
|
|
|
&.btn-custom:active {
|
|
background: var(--tblr-btn-color-clicked) !important;
|
|
}
|
|
}
|
|
|
|
.editor-sidebar::-webkit-scrollbar {
|
|
width: 0;
|
|
height: 0;
|
|
background: transparent;
|
|
-ms-overflow-style: none;
|
|
}
|
|
|
|
.editor-sidebar {
|
|
max-width: 300px;
|
|
scrollbar-width: none;
|
|
-ms-overflow-style: none;
|
|
}
|
|
|
|
.sketch-picker {
|
|
position: relative;
|
|
top: 0px;
|
|
border-radius: 6px !important;
|
|
border: 1px solid var(--slate5, #E6E8EB) !important;
|
|
background: var(--slate1, #FBFCFD) !important;
|
|
width: 210px !important; //adjusted with padding
|
|
box-shadow: 0px 4px 6px -2px rgba(16, 24, 40, 0.03), 0px 12px 16px -4px rgba(16, 24, 40, 0.08) !important;
|
|
color: var(--slate12);
|
|
|
|
.flexbox-fix:nth-child(3) {
|
|
div:nth-child(1) {
|
|
input {
|
|
width: 100% !important;
|
|
}
|
|
|
|
label {
|
|
color: var(--slate12) !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.boxshadow-picker {
|
|
.sketch-picker {
|
|
left: -209px !important;
|
|
position: absolute !important;
|
|
}
|
|
}
|
|
|
|
|
|
.color-picker-input {
|
|
border: solid 1px rgb(223, 223, 223);
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
.color-reset {
|
|
display: flex;
|
|
}
|
|
}
|
|
}
|
|
|
|
.color-reset {
|
|
display: none;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 20px;
|
|
width: 25px;
|
|
margin-right: 5px;
|
|
border-radius: 5px;
|
|
|
|
&:hover {
|
|
background: var(--slate1);
|
|
}
|
|
}
|
|
|
|
.app-sharing-modal {
|
|
|
|
.form-control.is-invalid,
|
|
.was-validated .form-control:invalid {
|
|
border-color: #ffb0b0;
|
|
}
|
|
|
|
.form-check-input {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.widgets-list {
|
|
--tblr-gutter-x: 0px !important;
|
|
padding-right: 4px;
|
|
padding-left: 3px;
|
|
}
|
|
|
|
.global-settings-width-input-container {
|
|
position: relative;
|
|
display: flex;
|
|
flex: 1;
|
|
|
|
input,
|
|
.dropdown-max-canvas-width-type {
|
|
border: 1px solid var(--slate7, #3A3F42);
|
|
background: var(--slate1, #151718);
|
|
color: var(--slate12);
|
|
padding: 6px 10px;
|
|
}
|
|
|
|
input {
|
|
border-radius: 6px 0px 0px 6px;
|
|
|
|
&:focus {
|
|
background-color: var(--base);
|
|
}
|
|
}
|
|
|
|
.dropdown-max-canvas-width-type {
|
|
border-radius: 0px 6px 6px 0px;
|
|
gap: 17px;
|
|
|
|
|
|
&:focus-visible {
|
|
outline: none;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.input-with-icon {
|
|
position: relative;
|
|
display: flex;
|
|
flex: 1;
|
|
|
|
input {
|
|
border-radius: 0px 6px 6px 0px !important;
|
|
color: var(--slate12);
|
|
background-color: var(--base);
|
|
|
|
&:focus-visible {
|
|
background-color: var(--base);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.icon-container {
|
|
position: absolute;
|
|
right: 10px;
|
|
top: calc(50% - 10px);
|
|
z-index: 3;
|
|
}
|
|
}
|
|
|
|
.dynamic-variable-preview {
|
|
min-height: 20px;
|
|
max-height: 500px;
|
|
overflow: auto;
|
|
line-height: 20px;
|
|
font-size: 12px;
|
|
margin-top: -2px;
|
|
word-wrap: break-word;
|
|
border-bottom-left-radius: 3px;
|
|
border-bottom-right-radius: 3px;
|
|
box-sizing: border-box;
|
|
font-family: "Source Code Pro", monospace;
|
|
word-break: break-all;
|
|
|
|
.heading {
|
|
font-weight: 700;
|
|
white-space: pre;
|
|
text-transform: capitalize;
|
|
}
|
|
}
|
|
|
|
.user-email:hover {
|
|
text-decoration: none;
|
|
cursor: text;
|
|
}
|
|
|
|
.theme-dark {
|
|
.nav-item {
|
|
background: 0 0;
|
|
}
|
|
|
|
.audit-log {
|
|
|
|
.card-footer {
|
|
background: var(--page-default);
|
|
color: var(--slate12);
|
|
}
|
|
|
|
.select-search__option:not(.is-selected),
|
|
.select-search__select {
|
|
background: #2c3547;
|
|
color: $white;
|
|
}
|
|
|
|
.select-search__option.is-selected:hover,
|
|
.select-search__option:not(.is-selected):hover,
|
|
.select-search__option.is-selected {
|
|
background: #1F2936;
|
|
color: $white;
|
|
border-radius: 0px;
|
|
}
|
|
}
|
|
|
|
.navbar .navbar-nav .active>.nav-link,
|
|
.theme-dark .navbar .navbar-nav .nav-link.active,
|
|
.theme-dark .navbar .navbar-nav .nav-link.show,
|
|
.theme-dark .navbar .navbar-nav .show>.nav-link {
|
|
color: #ffffff;
|
|
}
|
|
|
|
|
|
.form-check-label {
|
|
color: white;
|
|
}
|
|
|
|
.nav-tabs .nav-link {
|
|
color: #c3c3c3 !important;
|
|
}
|
|
|
|
.card-body> :last-child {
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
.card .table tbody td a {
|
|
color: inherit;
|
|
}
|
|
|
|
.DateInput {
|
|
background: #1f2936;
|
|
}
|
|
|
|
.DateInput_input {
|
|
background-color: #1f2936;
|
|
color: #ffffff;
|
|
}
|
|
|
|
&.daterange-picker-widget {
|
|
.DateRangePickerInput_arrow_svg {
|
|
fill: #ffffff;
|
|
}
|
|
}
|
|
|
|
.DateRangePickerInput {
|
|
background-color: #1f2936;
|
|
}
|
|
|
|
.DateInput_input__focused {
|
|
background: #1f2936;
|
|
}
|
|
|
|
.DateRangePickerInput__withBorder {
|
|
border: 1px solid #1f2936;
|
|
}
|
|
|
|
.main .canvas-container .canvas-area {
|
|
// background: #2f3c4c;
|
|
}
|
|
|
|
|
|
.main .navigation-area {
|
|
|
|
a.page-link {
|
|
border-radius: 0;
|
|
border: 0;
|
|
color: white;
|
|
}
|
|
|
|
a.page-link:hover {
|
|
color: white;
|
|
background-color: #4D72FA;
|
|
}
|
|
|
|
a.page-link.active {
|
|
color: white;
|
|
background-color: #4D72FA;
|
|
}
|
|
}
|
|
|
|
.rdtOpen .rdtPicker {
|
|
color: black;
|
|
}
|
|
|
|
.editor .editor-sidebar .components-container .component-image-holder {
|
|
background: hsl(200, 7.0%, 8.8%); //slate1
|
|
border-radius: 6px;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.nav-tabs .nav-link:hover {
|
|
border-left-color: transparent !important;
|
|
border-top-color: transparent !important;
|
|
border-right-color: transparent !important;
|
|
|
|
}
|
|
|
|
.modal-content,
|
|
.modal-header {
|
|
background-color: #1f2936;
|
|
|
|
.text-muted {
|
|
color: var(--slate9) !important;
|
|
}
|
|
}
|
|
|
|
.modal-header {
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.09) !important;
|
|
}
|
|
|
|
.no-components-box {
|
|
background-color: var(--slate4) !important;
|
|
|
|
center {
|
|
color: white !important;
|
|
}
|
|
}
|
|
|
|
.query-list {
|
|
.text-muted {
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
.mute-text {
|
|
color: #8092AB;
|
|
}
|
|
}
|
|
|
|
.editor .editor-sidebar .nav-tabs .nav-link {
|
|
color: #ffffff;
|
|
|
|
img {
|
|
filter: brightness(0) invert(1);
|
|
}
|
|
}
|
|
|
|
.jet-container {
|
|
background-color: #1f2936;
|
|
}
|
|
|
|
.nav-tabs .nav-item.show .nav-link,
|
|
.nav-tabs .nav-link.active {
|
|
background-color: #2f3c4c;
|
|
}
|
|
|
|
|
|
.left-sidebar {
|
|
.text-muted {
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
.left-sidebar-page-selector {
|
|
.list-group {
|
|
.list-group-item {
|
|
border: solid #1d2a39 1px;
|
|
color: white;
|
|
}
|
|
|
|
.list-group-item:hover {
|
|
background-color: #1F2936;
|
|
}
|
|
|
|
.list-group-item.active {
|
|
background-color: #1F2936;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.app-title {
|
|
color: var(--slate12) !important;
|
|
}
|
|
|
|
.RichEditor-root {
|
|
background: #1f2936;
|
|
border: 1px solid #2f3c4c;
|
|
}
|
|
|
|
.app-description {
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
.btn-light,
|
|
.btn-outline-light {
|
|
background-color: #42546a;
|
|
--tblr-btn-color-text: #ffffff;
|
|
|
|
img {
|
|
filter: brightness(0) invert(1);
|
|
}
|
|
}
|
|
|
|
.editor .left-sidebar .datasources-container tr {
|
|
border-bottom: solid 1px rgba(255, 255, 255, 0.09);
|
|
}
|
|
|
|
.editor .left-sidebar .datasources-container .datasources-header {
|
|
border: solid rgba(255, 255, 255, 0.09) !important;
|
|
border-width: 0px 0px 1px 0px !important;
|
|
}
|
|
|
|
.query-manager-header .nav-item {
|
|
border-right: solid 1px rgba(255, 255, 255, 0.09);
|
|
|
|
.nav-link {
|
|
color: #c3c3c3;
|
|
}
|
|
}
|
|
|
|
.input-group-text {
|
|
border: solid 1px rgba(255, 255, 255, 0.09) !important;
|
|
}
|
|
|
|
.app-users-list {
|
|
.text-muted {
|
|
color: #ffffff !important;
|
|
}
|
|
}
|
|
|
|
.main .query-pane .data-pane .queries-container .queries-header {
|
|
border-width: 0px 0px 1px 0px !important;
|
|
|
|
.text-muted {
|
|
color: #ffffff !important;
|
|
}
|
|
}
|
|
|
|
.query-pane {
|
|
border-top: 1px solid var(--slate5) !important;
|
|
}
|
|
|
|
.input-icon .input-icon-addon img {
|
|
filter: invert(1);
|
|
}
|
|
|
|
.svg-icon {
|
|
filter: brightness(0) invert(1);
|
|
}
|
|
|
|
.badge {
|
|
.svg-icon {
|
|
filter: brightness(1) invert(0);
|
|
}
|
|
}
|
|
|
|
.alert {
|
|
background: transparent;
|
|
|
|
.text-muted {
|
|
color: #ffffff !important;
|
|
}
|
|
}
|
|
|
|
.home-page-content {
|
|
.hr-text {
|
|
color: var(--slate11) !important;
|
|
text-transform: lowercase !important;
|
|
font-weight: 400;
|
|
font-size: 12px;
|
|
line-height: 20px;
|
|
}
|
|
}
|
|
|
|
.hr-text {
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
.skeleton-line::after {
|
|
background-image: linear-gradient(to right,
|
|
#121212 0,
|
|
#121212 40%,
|
|
#121212 80%);
|
|
}
|
|
|
|
.app-icon-skeleton::after {
|
|
background-image: linear-gradient(to right,
|
|
#566177 0,
|
|
#5a6170 40%,
|
|
#4c5b79 80%);
|
|
}
|
|
|
|
.app-icon-skeleton {
|
|
background-color: #3A4251 !important;
|
|
}
|
|
|
|
.folder-icon-skeleton::after {
|
|
background-image: linear-gradient(to right,
|
|
#566177 0,
|
|
#5a6170 40%,
|
|
#4c5b79 80%);
|
|
}
|
|
|
|
.select-search__input {
|
|
color: rgb(224, 224, 224);
|
|
background-color: #2b3547;
|
|
border: 1px solid #2b3547;
|
|
}
|
|
|
|
.select-search__select {
|
|
background: #ffffff;
|
|
box-shadow: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.select-search__row:not(:first-child) {
|
|
border-top: 1px solid #eee;
|
|
}
|
|
|
|
.select-search__option,
|
|
.select-search__not-found {
|
|
background: #ffffff;
|
|
}
|
|
|
|
.select-search__option.is-highlighted,
|
|
.select-search__option:not(.is-selected):hover {
|
|
background: rgba(47, 204, 139, 0.1);
|
|
}
|
|
|
|
.select-search__option.is-highlighted.is-selected,
|
|
.select-search__option.is-selected:hover {
|
|
background: #2eb378;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.org-users-page {
|
|
|
|
.user-email,
|
|
.user-type,
|
|
.workspaces,
|
|
.user-status {
|
|
color: var(--slate12) !important;
|
|
}
|
|
}
|
|
|
|
.org-users-page {
|
|
.select-search__option.is-selected {
|
|
background: $primary;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.select-search__option:not(.is-selected):hover {
|
|
background: rgba(66, 153, 225, 0.1);
|
|
}
|
|
}
|
|
|
|
.org-variables-page {
|
|
|
|
.user-email,
|
|
.user-status {
|
|
filter: brightness(0) invert(1);
|
|
}
|
|
|
|
.btn-org-env {
|
|
background: transparent;
|
|
}
|
|
}
|
|
|
|
.org-variables-page {
|
|
.select-search__option.is-selected {
|
|
background: $primary;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.select-search__option:not(.is-selected):hover {
|
|
background: rgba(66, 153, 225, 0.1);
|
|
}
|
|
}
|
|
|
|
.org-constant-bg {
|
|
background-color: var(--page-default);
|
|
}
|
|
|
|
.react-json-view {
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
.codehinter-query-editor-input .CodeMirror {
|
|
height: 31px !important;
|
|
}
|
|
|
|
.select-search:not(.is-loading):not(.select-search--multiple) .select-search__value::after {
|
|
transform: rotate(45deg);
|
|
border-right: 1px solid #ffffff;
|
|
border-bottom: 1px solid #ffffff;
|
|
}
|
|
|
|
.app-version-name.form-select {
|
|
border-color: $border-grey-dark;
|
|
}
|
|
|
|
.organization-list {
|
|
.btn {
|
|
background-color: #273342;
|
|
color: #656d77;
|
|
}
|
|
}
|
|
|
|
.oidc-button {
|
|
.btn-loading:after {
|
|
color: $white;
|
|
}
|
|
}
|
|
|
|
.page-item {
|
|
a.page-link {
|
|
color: white;
|
|
}
|
|
}
|
|
|
|
.tj-ms-count {
|
|
background-color: #273342;
|
|
color: $white;
|
|
}
|
|
|
|
.tj-ms-preview {
|
|
color: #273342;
|
|
}
|
|
|
|
.tj-dashed-tooltip {
|
|
border-color: white;
|
|
}
|
|
}
|
|
|
|
.main-wrapper {
|
|
position: relative;
|
|
min-height: 100%;
|
|
min-width: 100%;
|
|
background-color: white;
|
|
}
|
|
|
|
.main-wrapper.theme-dark {
|
|
position: relative;
|
|
min-height: 100%;
|
|
min-width: 100%;
|
|
background-color: #2b394b;
|
|
}
|
|
|
|
.jet-table {
|
|
.global-search-field {
|
|
background: transparent;
|
|
}
|
|
}
|
|
|
|
.jet-table-image-column {
|
|
width: 100%;
|
|
}
|
|
|
|
.modal-backdrop.show {
|
|
opacity: 0.74;
|
|
}
|
|
|
|
.gui-select-wrappper .select-search__input {
|
|
height: 30px;
|
|
}
|
|
|
|
.theme-dark .input-group-text,
|
|
.theme-dark .markdown>table thead th,
|
|
.theme-dark .table thead th {
|
|
background: #1c252f;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.sketch-picker {
|
|
z-index: 1000;
|
|
}
|
|
|
|
.no-padding {
|
|
padding: 0;
|
|
}
|
|
|
|
.nav-tabs {
|
|
font-weight: 300;
|
|
}
|
|
|
|
.nav-tabs .nav-link.active {
|
|
border: 0;
|
|
border-bottom: 1px solid $primary;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.table-no-divider {
|
|
td {
|
|
border-bottom-width: 0px;
|
|
padding-left: 0;
|
|
}
|
|
}
|
|
|
|
.no-border {
|
|
border: 0 !important;
|
|
}
|
|
|
|
input[type="text"] {
|
|
outline-color: #dadcde !important;
|
|
}
|
|
|
|
.widget-header {
|
|
text-transform: capitalize;
|
|
color: var(--slate11, #687076);
|
|
font-size: 12px;
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
line-height: 20px;
|
|
color: var(--slate11);
|
|
}
|
|
|
|
.query-manager-events {
|
|
max-width: 400px;
|
|
width: 330px;
|
|
}
|
|
|
|
.validation-without-icon {
|
|
background-image: none !important;
|
|
}
|
|
|
|
.multiselect-widget {
|
|
label.select-item {
|
|
width: max-content;
|
|
min-width: 100%;
|
|
|
|
div.item-renderer {
|
|
align-items: center;
|
|
line-height: 15px;
|
|
|
|
input {
|
|
height: 15px;
|
|
width: 15px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.rmsc .dropdown-container {
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
border-radius: inherit;
|
|
}
|
|
|
|
.rmsc {
|
|
height: 100%;
|
|
border-radius: inherit;
|
|
}
|
|
|
|
.rmsc.dark {
|
|
--rmsc-main: $primary-light;
|
|
--rmsc-hover: #283647;
|
|
--rmsc-selected: #1f2936;
|
|
--rmsc-border: #333333;
|
|
--rmsc-gray: #555555;
|
|
--rmsc-bg: #1f2936;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
|
|
/* Hide scrollbar for Chrome, Safari and Opera */
|
|
.invitation-page::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
/* Hide scrollbar for IE, Edge and Firefox */
|
|
.invitation-page {
|
|
-ms-overflow-style: none;
|
|
/* IE and Edge */
|
|
scrollbar-width: none;
|
|
/* Firefox */
|
|
}
|
|
|
|
.show {
|
|
display: block;
|
|
}
|
|
|
|
.hide {
|
|
display: none;
|
|
}
|
|
|
|
.draggable-box:focus-within {
|
|
z-index: 2 !important;
|
|
}
|
|
|
|
.cursor-wait {
|
|
cursor: wait;
|
|
}
|
|
|
|
.cursor-text {
|
|
cursor: text;
|
|
}
|
|
|
|
.cursor-none {
|
|
cursor: none;
|
|
}
|
|
|
|
.disabled {
|
|
pointer-events: none;
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.enable-edit-fields {
|
|
pointer-events: auto !important;
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
.DateRangePicker {
|
|
padding: 1.25px 5px;
|
|
}
|
|
|
|
.datepicker-widget {
|
|
.input-field {
|
|
min-height: 26px;
|
|
padding: 0;
|
|
padding-left: 2px;
|
|
}
|
|
|
|
td.rdtActive,
|
|
td.rdtActive:hover {
|
|
background-color: $primary;
|
|
}
|
|
|
|
.react-datepicker__day--selected {
|
|
background-color: var(--primary-brand);
|
|
}
|
|
}
|
|
|
|
.daterange-picker-widget {
|
|
.DateInput_input {
|
|
min-height: 24px;
|
|
line-height: normal;
|
|
border-bottom: 0px;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.DateRangePicker {
|
|
padding: 0;
|
|
}
|
|
|
|
.DateRangePickerInput_arrow_svg {
|
|
height: 17px;
|
|
}
|
|
|
|
.DateRangePickerInput {
|
|
overflow: hidden;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
}
|
|
|
|
.DateInput_fang {
|
|
position: fixed;
|
|
top: 57px !important;
|
|
}
|
|
}
|
|
|
|
.form-ele {
|
|
.DateRangePicker_picker {
|
|
top: 40px !important;
|
|
}
|
|
|
|
.daterange-picker-widget {
|
|
.DateInput_fang {
|
|
visibility: hidden !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.fw-400 {
|
|
font-weight: 400;
|
|
}
|
|
|
|
.fw-500 {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.ligh-gray {
|
|
color: #656d77;
|
|
}
|
|
|
|
.nav-item {
|
|
background: #ffffff;
|
|
font-size: 14px;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 22px;
|
|
letter-spacing: -0.1px;
|
|
text-align: left;
|
|
}
|
|
|
|
.w-min-100 {
|
|
min-width: 100px;
|
|
}
|
|
|
|
.nav-link {
|
|
min-width: 100px;
|
|
justify-content: center;
|
|
}
|
|
|
|
.nav-tabs .nav-link.active {
|
|
font-weight: 400 !important;
|
|
color: $primary !important;
|
|
}
|
|
|
|
.empty {
|
|
padding-top: 1.5rem !important;
|
|
}
|
|
|
|
.empty-img {
|
|
margin-bottom: 0 !important;
|
|
|
|
img {
|
|
height: 220px !important;
|
|
width: 260.83px !important;
|
|
}
|
|
}
|
|
|
|
.empty-action {
|
|
margin-top: 0 !important;
|
|
|
|
a+a.btn-loading::after {
|
|
color: $primary;
|
|
}
|
|
}
|
|
|
|
.empty-action a {
|
|
height: 36px;
|
|
border-radius: 4px;
|
|
font-style: normal;
|
|
font-weight: normal;
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.empty-action a:first-child {
|
|
margin-right: 24px;
|
|
}
|
|
|
|
.empty-action a:first-child:hover {
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
.empty-import-button {
|
|
background: #ffffff !important;
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
border-color: rgba(101, 109, 119, 0.24) !important;
|
|
}
|
|
}
|
|
|
|
.empty-welcome-header {
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
font-size: 32px;
|
|
line-height: 40px;
|
|
margin-bottom: 16px;
|
|
margin-top: 40px;
|
|
color: var(--slate12);
|
|
font-family: Inter;
|
|
}
|
|
|
|
.homepage-empty-image {
|
|
width: 100%;
|
|
}
|
|
|
|
.empty-title {
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
color: var(--slate11) !important;
|
|
}
|
|
|
|
// template card styles
|
|
.template-card-wrapper {
|
|
display: flex;
|
|
flex-direction: row;
|
|
background: #fffffc;
|
|
border: 1px solid #d2ddec;
|
|
box-sizing: border-box;
|
|
border-radius: 8px;
|
|
width: 299px;
|
|
height: 100px;
|
|
}
|
|
|
|
.template-action-wrapper {
|
|
display: flex;
|
|
flex-direction: row !important;
|
|
font-family: Inter;
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
font-size: 16px;
|
|
line-height: 19px;
|
|
color: $primary-light;
|
|
|
|
p {
|
|
margin-right: 16px;
|
|
}
|
|
}
|
|
|
|
.template-card-title {
|
|
font-family: Inter;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
font-size: 18px;
|
|
line-height: 22px;
|
|
display: flex;
|
|
align-items: center;
|
|
color: #000000;
|
|
margin-bottom: 3px !important;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.template-card-details {
|
|
align-items: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
|
|
.template-icon-wrapper {
|
|
width: 61.44px;
|
|
height: 60px;
|
|
top: 685px;
|
|
background: #d2ddec;
|
|
border-radius: 4px;
|
|
margin: 20px 16.36px;
|
|
}
|
|
|
|
// template style end
|
|
|
|
.calendar-widget.compact {
|
|
.rbc-time-view-resources .rbc-time-header-content {
|
|
min-width: auto;
|
|
}
|
|
|
|
.rbc-time-view-resources .rbc-day-slot {
|
|
min-width: 50px;
|
|
}
|
|
|
|
.rbc-time-view-resources .rbc-header,
|
|
.rbc-time-view-resources .rbc-day-bg {
|
|
width: 50px;
|
|
}
|
|
}
|
|
|
|
.calendar-widget.dont-highlight-today {
|
|
.rbc-today {
|
|
background-color: inherit;
|
|
}
|
|
|
|
.rbc-current-time-indicator {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.calendar-widget {
|
|
padding: 10px;
|
|
background-color: white;
|
|
|
|
.rbc-day-slot .rbc-event,
|
|
.rbc-day-slot .rbc-background-event {
|
|
border-left: 3px solid #26598533;
|
|
}
|
|
|
|
.rbc-toolbar {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.rbc-event {
|
|
background-color: var(--primary-brand) !important;
|
|
border: transparent;
|
|
|
|
.rbc-event-label {
|
|
display: none;
|
|
}
|
|
|
|
}
|
|
|
|
.rbc-off-range-bg {
|
|
background-color: #f4f6fa;
|
|
}
|
|
|
|
.rbc-toolbar {
|
|
.rbc-btn-group {
|
|
button {
|
|
box-shadow: none;
|
|
border-radius: 0;
|
|
border-width: 1px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
//!for calendar widget week view with compact/spacious mode border fix
|
|
.resources-week-cls .rbc-time-column:nth-last-child(7n) {
|
|
border-left: none !important;
|
|
|
|
.rbc-timeslot-group {
|
|
border-left: 2.5px solid #dadcde !important;
|
|
}
|
|
}
|
|
|
|
.resources-week-cls .rbc-allday-cell {
|
|
border: none !important;
|
|
|
|
.rbc-row {
|
|
border-left: 1.5px solid #dadcde;
|
|
border-right: 1.5px solid #dadcde;
|
|
}
|
|
}
|
|
|
|
.resources-week-cls .rbc-time-header-cell {
|
|
border: none !important;
|
|
}
|
|
|
|
.resources-week-cls .rbc-time-view-resources .rbc-header {
|
|
border-left: 1.5px solid #dadcde !important;
|
|
border-right: 1.5px solid #dadcde !important;
|
|
}
|
|
|
|
.calendar-widget.hide-view-switcher {
|
|
.rbc-toolbar {
|
|
.rbc-btn-group:nth-of-type(3) {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.calendar-widget.dark-mode {
|
|
background-color: #1d2a39;
|
|
|
|
.rbc-toolbar {
|
|
button {
|
|
color: white;
|
|
}
|
|
|
|
button:hover,
|
|
button.rbc-active {
|
|
color: black;
|
|
}
|
|
}
|
|
|
|
.rbc-off-range-bg {
|
|
background-color: #2b394b;
|
|
}
|
|
|
|
.rbc-selected-cell {
|
|
background-color: #22242d;
|
|
}
|
|
|
|
.rbc-today {
|
|
background-color: #5a7ca8;
|
|
}
|
|
}
|
|
|
|
.calendar-widget.dark-mode.dont-highlight-today {
|
|
.rbc-today {
|
|
background-color: inherit;
|
|
}
|
|
}
|
|
|
|
.navbar-brand-image {
|
|
height: 1.2rem;
|
|
}
|
|
|
|
.navbar .navbar-brand:hover,
|
|
.theme-dark .navbar .navbar-brand:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
.nav-tabs .nav-link.active {
|
|
font-weight: 400 !important;
|
|
margin-bottom: -1px !important;
|
|
}
|
|
|
|
.nav-tabs .nav-link {
|
|
font-weight: 400 !important;
|
|
margin: 0 !important;
|
|
height: 100%;
|
|
}
|
|
|
|
.code-editor-widget {
|
|
border-radius: 0;
|
|
|
|
.CodeMirror {
|
|
border-radius: 0 !important;
|
|
margin-top: -1px !important;
|
|
}
|
|
}
|
|
|
|
.jet-listview {
|
|
overflow-y: overlay;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.jet-listview::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
|
|
}
|
|
|
|
.jet-listview::-webkit-scrollbar-thumb {
|
|
background: transparent;
|
|
|
|
}
|
|
|
|
.code-hinter-wrapper .popup-btn {
|
|
position: absolute;
|
|
display: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.code-hinter-wrapper:hover {
|
|
.popup-btn {
|
|
display: block !important;
|
|
z-index: 1;
|
|
}
|
|
}
|
|
|
|
.popup-btn {
|
|
cursor: pointer !important;
|
|
display: block;
|
|
padding: 2px;
|
|
border-radius: 4px;
|
|
border: 1px solid rgba(204, 209, 213, 1);
|
|
}
|
|
|
|
.preview-icons {
|
|
margin-top: -5px;
|
|
width: 12px;
|
|
}
|
|
|
|
.resize-modal-portal {
|
|
z-index: 3;
|
|
|
|
.resize-modal {
|
|
.modal-content {
|
|
width: 100% !important;
|
|
height: 100%;
|
|
background-color: var(--slate3) !important;
|
|
border: none !important;
|
|
|
|
.modal-body {
|
|
width: 100% !important;
|
|
height: calc(100% - 44px) !important;
|
|
border: none !important;
|
|
|
|
.editor-container {
|
|
height: 100%;
|
|
|
|
.CodeMirror {
|
|
height: 100% !important;
|
|
border: 1px solid var(--slate5, #26292B);
|
|
border-bottom-left-radius: 6px;
|
|
border-bottom-right-radius: 6px;
|
|
}
|
|
|
|
.CodeMirror-scroll,
|
|
.CodeMirror-gutters,
|
|
.CodeMirror {
|
|
background-color: var(--slate3) !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.portal-header {}
|
|
|
|
.resize-handle {
|
|
cursor: move;
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal-portal-wrapper {
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: fixed;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 5%;
|
|
z-index: 1400;
|
|
transform: translate(-60%, 0%);
|
|
height: 350px;
|
|
width: auto;
|
|
max-height: 500px;
|
|
padding: 0px;
|
|
|
|
.modal-body {
|
|
width: 500px !important;
|
|
height: 300px !important;
|
|
padding: 0px !important;
|
|
}
|
|
|
|
|
|
.modal-content {
|
|
border-radius: 5px !important;
|
|
}
|
|
|
|
.modal-body {
|
|
width: 500px !important;
|
|
height: 302px !important;
|
|
padding: 0px !important;
|
|
margin: 0px !important;
|
|
margin-left: -1px !important; //fix the modal body code mirror margin
|
|
|
|
border-top-left-radius: 0;
|
|
border-top-right-radius: 0;
|
|
border-bottom-left-radius: 5px;
|
|
border-bottom-right-radius: 5px;
|
|
border-bottom: 0.75px solid;
|
|
border-left: 0.75px solid;
|
|
border-right: 0.75px solid;
|
|
|
|
@include theme-border($light-theme: true);
|
|
|
|
&.dark-mode-border {
|
|
@include theme-border($light-theme: false);
|
|
}
|
|
}
|
|
|
|
.modal-dialog {
|
|
margin-top: 4%;
|
|
}
|
|
|
|
.modal-header {
|
|
padding: 0;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.editor-container {
|
|
padding: 0px;
|
|
|
|
.CodeMirror {
|
|
border-radius: 0;
|
|
margin: 0;
|
|
width: 100% !important;
|
|
}
|
|
}
|
|
|
|
.query-hinter {
|
|
.CodeMirror-line {
|
|
margin-left: 2rem !important;
|
|
}
|
|
|
|
.CodeMirror-cursors .CodeMirror-cursor {
|
|
margin-left: 2rem !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.preview-block-portal {
|
|
.bg-light {
|
|
border-radius: 0 0 5px 5px;
|
|
outline: 0.75px solid $light-green;
|
|
}
|
|
|
|
.bg-dark {
|
|
margin-top: 1px;
|
|
border-radius: 0 0 5px 5px;
|
|
outline: 0.75px solid $light-green;
|
|
}
|
|
|
|
.dynamic-variable-preview {
|
|
padding: 4px !important;
|
|
}
|
|
}
|
|
|
|
.color-icon {
|
|
width: 18px;
|
|
height: 18px;
|
|
border-radius: 6px;
|
|
background-color: #0091FF;
|
|
border: 1px solid var(--Border-default, #CCD1D5);
|
|
box-shadow: 0px 1px 0px 0px #e5e5e5;
|
|
}
|
|
|
|
.portal-header {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0.5rem 0.75rem;
|
|
color: var(--text-default);
|
|
background-color: var(--surfaces-surface-01) !important;
|
|
background-clip: padding-box;
|
|
border-top-left-radius: 4px !important;
|
|
border-top-right-radius: 4px !important;
|
|
width: 100% !important;
|
|
outline: none !important;
|
|
border: 1px solid var(--borders-disabled-on-white, #E4E7EB);
|
|
|
|
margin: -1px;
|
|
@include theme-border($light-theme: true, $outline: true);
|
|
|
|
&.dark-mode-border {
|
|
@include theme-border($light-theme: false, $outline: true);
|
|
}
|
|
}
|
|
|
|
// close icon in inpector
|
|
[data-rb-event-key="close-inpector"] {
|
|
position: absolute;
|
|
right: -80px;
|
|
background-color: #232e3c !important;
|
|
width: 10% !important;
|
|
}
|
|
|
|
[data-rb-event-key="close-inpector-light"] {
|
|
position: absolute;
|
|
right: -80px;
|
|
background-color: #ffffff !important;
|
|
width: 10% !important;
|
|
}
|
|
|
|
.tabs-inspector {
|
|
position: sticky;
|
|
top: 0;
|
|
|
|
.nav-item {
|
|
width: 50%;
|
|
}
|
|
|
|
.nav-item:hover {
|
|
border: 1px solid transparent;
|
|
}
|
|
|
|
.nav-item:not(.active) {
|
|
border-bottom: 1px solid #e7eaef;
|
|
}
|
|
|
|
.nav-link.active {
|
|
border: 1px solid transparent;
|
|
border-bottom: 1px solid $primary;
|
|
background: white;
|
|
}
|
|
}
|
|
|
|
.tabs-inspector.dark {
|
|
.nav-link.active {
|
|
border-bottom: 1px solid $primary !important;
|
|
}
|
|
}
|
|
|
|
.tabs-inspector {
|
|
z-index: 2;
|
|
background: white;
|
|
|
|
&.dark {
|
|
@extend .bg-dark;
|
|
}
|
|
}
|
|
|
|
.close-icon {
|
|
position: fixed;
|
|
top: 84px;
|
|
right: 3px;
|
|
width: 60px;
|
|
height: 22;
|
|
border-bottom: 1px solid #e7eaef;
|
|
display: flex;
|
|
align-items: center;
|
|
background-color: white;
|
|
z-index: 2;
|
|
|
|
.svg-wrapper {
|
|
width: 100%;
|
|
height: 70%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-left: 1px solid #e7eaef;
|
|
margin-left: 20px;
|
|
|
|
.close-svg {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tabs-inspector.nav-tabs {
|
|
border: 0;
|
|
width: 100%;
|
|
padding: 8px 16px;
|
|
}
|
|
|
|
.bg-primary-lt {
|
|
color: #ffffff !important;
|
|
background: #6383db !important;
|
|
}
|
|
|
|
.tabbed-navbar .nav-item.active:after {
|
|
margin-bottom: -0.25rem;
|
|
}
|
|
|
|
.app-name {
|
|
width: 200px;
|
|
margin-left: 12px;
|
|
|
|
.form-control-plaintext {
|
|
background-color: var(--base);
|
|
border: none !important;
|
|
}
|
|
|
|
.form-control-plaintext:hover {
|
|
outline: none;
|
|
border: 1px solid var(--slate6) !important;
|
|
background: var(--slate2);
|
|
}
|
|
|
|
.form-control-plaintext:focus {
|
|
outline: none;
|
|
border: 1px solid var(--indigo9) !important;
|
|
background: var(--slate2);
|
|
}
|
|
|
|
}
|
|
|
|
.app-name:hover {
|
|
background: $bg-light;
|
|
|
|
input:disabled {
|
|
outline-style: none
|
|
}
|
|
|
|
&.dark {
|
|
@extend .bg-dark;
|
|
}
|
|
}
|
|
|
|
.nav-auto-save {
|
|
width: 325px;
|
|
left: 485px;
|
|
position: absolute;
|
|
color: #36af8b;
|
|
}
|
|
|
|
.editor-header-actions {
|
|
display: flex;
|
|
color: #868aa5;
|
|
white-space: nowrap;
|
|
font-weight: 400;
|
|
font-size: 12px;
|
|
letter-spacing: 0.5px;
|
|
|
|
@media screen and (max-width: 768px) {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.undo-button,
|
|
.redo-button {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 6px;
|
|
gap: 10px;
|
|
width: 28px;
|
|
height: 28px;
|
|
background: #ECEEF0;
|
|
border-radius: 6px;
|
|
margin-right: 5px;
|
|
flex: none;
|
|
order: 0;
|
|
flex-grow: 0;
|
|
}
|
|
|
|
.theme-dark {
|
|
|
|
.undo-button,
|
|
.redo-button {
|
|
background: 0;
|
|
}
|
|
}
|
|
|
|
.app-version-menu {
|
|
position: absolute;
|
|
right: 220px;
|
|
padding: 4px 8px;
|
|
min-width: 100px;
|
|
max-width: 300px;
|
|
}
|
|
|
|
.app-version-menu-sm {
|
|
height: 30px;
|
|
display: flex;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.app-version-menu .dropdown-menu {
|
|
left: -65px;
|
|
width: 283px;
|
|
}
|
|
|
|
.app-version-menu .released {
|
|
color: #36af8b;
|
|
}
|
|
|
|
.app-version-menu .released-subtext {
|
|
font-size: 12px;
|
|
color: #36af8b;
|
|
padding: 0 8px;
|
|
}
|
|
|
|
.app-version-menu .create-link {
|
|
margin: auto;
|
|
width: 50%;
|
|
padding-left: 10px;
|
|
}
|
|
|
|
.canvas-background-holder {
|
|
display: flex;
|
|
min-width: 120px;
|
|
margin: auto;
|
|
}
|
|
|
|
.canvas-background-picker {
|
|
position: fixed;
|
|
}
|
|
|
|
/**
|
|
* Timer Widget
|
|
*/
|
|
.timer-wrapper {
|
|
padding: 10px;
|
|
|
|
.counter-container {
|
|
font-size: 3em;
|
|
padding-bottom: 5px;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Search Box
|
|
*/
|
|
.search-box-wrapper {
|
|
input {
|
|
width: 200px;
|
|
border-radius: 5px !important;
|
|
color: var(--slate12);
|
|
background-color: var(--base);
|
|
}
|
|
|
|
.input-icon .form-control:not(:first-child),
|
|
.input-icon .form-select:not(:last-child) {
|
|
padding-left: 28px !important;
|
|
}
|
|
|
|
input:focus {
|
|
width: 200px;
|
|
background-color: var(--base);
|
|
}
|
|
|
|
.input-icon .input-icon-addon {
|
|
display: flex;
|
|
}
|
|
|
|
.input-icon .input-icon-addon.end {
|
|
pointer-events: auto;
|
|
|
|
.tj-common-search-input-clear-icon {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 4px;
|
|
width: 20px;
|
|
height: 20px;
|
|
background: var(--indigo3) !important;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
div {
|
|
border-radius: 12px;
|
|
color: #ffffff;
|
|
padding: 1px;
|
|
cursor: pointer;
|
|
|
|
svg {
|
|
height: 14px;
|
|
width: 14px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.searchbox-wrapper {
|
|
margin-top: 0 !important;
|
|
|
|
.search-icon {
|
|
margin: 0.30rem
|
|
}
|
|
|
|
input {
|
|
border-radius: $border-radius !important;
|
|
padding-left: 1.75rem !important;
|
|
border-radius: $border-radius !important;
|
|
}
|
|
}
|
|
|
|
.fixedHeader {
|
|
table thead {
|
|
position: -webkit-sticky; // this is for all Safari (Desktop & iOS), not for Chrome
|
|
position: sticky;
|
|
top: 0;
|
|
border-top: 0;
|
|
z-index: 1; // any positive value, layer order is global
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Folder List
|
|
*/
|
|
.folder-list {
|
|
overflow-y: scroll;
|
|
scrollbar-width: thin;
|
|
scrollbar-color: #888 transparent;
|
|
|
|
&:hover {
|
|
&::-webkit-scrollbar {
|
|
display: block;
|
|
width: 5px;
|
|
}
|
|
|
|
&::-webkit-scrollbar-thumb {
|
|
background-color: #888;
|
|
}
|
|
|
|
&::-webkit-scrollbar-track {
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
|
|
.list-group-transparent .list-group-item.active {
|
|
color: $primary;
|
|
background-color: #edf1ff;
|
|
|
|
.folder-ico {
|
|
filter: invert(29%) sepia(84%) saturate(4047%) hue-rotate(215deg) brightness(98%) contrast(111%);
|
|
}
|
|
}
|
|
|
|
.folder-ico.dark {
|
|
filter: invert(1);
|
|
}
|
|
|
|
.list-group-item {
|
|
padding: 0.5rem 0.75rem;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.list-group-item.all-apps-link {
|
|
display: flex;
|
|
align-items: center;
|
|
color: var(--slate12);
|
|
border-radius: 6px;
|
|
|
|
&:active {
|
|
background: var(--indigo4);
|
|
}
|
|
|
|
&:focus {
|
|
box-shadow: 0px 0px 0px 4px #DFE3E6;
|
|
}
|
|
}
|
|
|
|
.folder-info {
|
|
display: contents;
|
|
font-weight: 500 !important;
|
|
display: flex;
|
|
align-items: center;
|
|
letter-spacing: -0.02em;
|
|
text-transform: uppercase;
|
|
color: var(--slate9);
|
|
}
|
|
|
|
.folder-create-btn {
|
|
width: 28px;
|
|
height: 28px;
|
|
background: var(--base);
|
|
border: 1px solid;
|
|
border-color: var(--slate7);
|
|
cursor: pointer;
|
|
border-radius: 6px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.menu-ico {
|
|
cursor: pointer;
|
|
border-radius: 13px;
|
|
|
|
img {
|
|
padding: 0px;
|
|
height: 14px;
|
|
width: 14px;
|
|
vertical-align: unset;
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Home page modal
|
|
*/
|
|
.home-modal-backdrop {
|
|
z-index: 9991;
|
|
}
|
|
|
|
.modal-content.home-modal-component {
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
background-color: var(--base);
|
|
color: var(--slate12);
|
|
box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
|
|
|
|
.modal-header {
|
|
border-bottom: 1px solid var(--slate5) !important;
|
|
}
|
|
|
|
.modal-header,
|
|
.modal-body {
|
|
padding: 16px 28px;
|
|
background: var(--base);
|
|
}
|
|
|
|
.modal-title {
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
input:not([type=checkbox]) {
|
|
border-radius: 5px !important;
|
|
background: var(--base);
|
|
color: var(--slate12);
|
|
}
|
|
|
|
.modal-main {
|
|
padding-bottom: 32px;
|
|
}
|
|
|
|
.modal-footer-btn {
|
|
|
|
&>*:nth-child(2) {
|
|
margin-left: 16px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.home-modal-component-editor.dark {
|
|
|
|
.modal-header,
|
|
.modal-body {
|
|
background-color: #232e3c;
|
|
color: #fff;
|
|
}
|
|
|
|
.form-control {
|
|
color: #fff;
|
|
background-color: #232e3c !important;
|
|
}
|
|
|
|
.btn-close {
|
|
filter: brightness(0) invert(1);
|
|
}
|
|
}
|
|
|
|
.modal-content.home-modal-component.dark-theme {
|
|
.btn-close {
|
|
filter: brightness(0) invert(1);
|
|
}
|
|
}
|
|
|
|
.home-modal-component {
|
|
.btn-close {
|
|
opacity: 1 !important;
|
|
}
|
|
}
|
|
|
|
.modal-content.home-modal-component.dark {
|
|
background-color: $bg-dark-light !important;
|
|
color: $white !important;
|
|
|
|
.modal-title {
|
|
color: $white !important;
|
|
}
|
|
|
|
.tj-version-wrap-sub-footer {
|
|
background-color: $bg-dark-light !important;
|
|
border-top: 1px solid #3A3F42 !important;
|
|
|
|
|
|
p {
|
|
color: $white !important;
|
|
}
|
|
}
|
|
|
|
|
|
.current-version-wrap,
|
|
.other-version-wrap {
|
|
background: transparent !important;
|
|
}
|
|
|
|
.modal-header {
|
|
background-color: $bg-dark-light !important;
|
|
color: $white !important;
|
|
border-bottom: 2px solid #3A3F42 !important;
|
|
}
|
|
|
|
.btn-close {
|
|
filter: brightness(0) invert(1);
|
|
}
|
|
|
|
.form-control {
|
|
border-color: $border-grey-dark !important;
|
|
color: inherit;
|
|
}
|
|
|
|
input {
|
|
background-color: $bg-dark-light !important;
|
|
}
|
|
|
|
.form-select {
|
|
background-color: $bg-dark !important;
|
|
color: $white !important;
|
|
border-color: $border-grey-dark !important;
|
|
}
|
|
|
|
.text-muted {
|
|
color: $white !important;
|
|
}
|
|
}
|
|
|
|
.radio-img {
|
|
input {
|
|
display: none;
|
|
}
|
|
|
|
.action-icon {
|
|
width: 28px;
|
|
height: 28px;
|
|
background-position: center center;
|
|
border-radius: 4px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.action-icon {
|
|
cursor: pointer;
|
|
border: 1px solid $light-gray;
|
|
}
|
|
|
|
.action-icon:hover {
|
|
background-color: #d2ddec;
|
|
}
|
|
|
|
input:checked+.action-icon {
|
|
border-color: $primary;
|
|
background-color: #7a95fb;
|
|
}
|
|
|
|
.tooltiptext {
|
|
visibility: hidden;
|
|
font-size: 12px;
|
|
background-color: $black;
|
|
color: #ffffff;
|
|
text-align: center;
|
|
padding: 5px 10px;
|
|
position: absolute;
|
|
border-radius: 15px;
|
|
margin-top: 2px;
|
|
z-index: 1;
|
|
margin-left: -10px;
|
|
}
|
|
|
|
.tooltiptext::after {
|
|
content: "";
|
|
position: absolute;
|
|
bottom: 100%;
|
|
left: 50%;
|
|
margin-left: -5px;
|
|
border-width: 5px;
|
|
border-style: solid;
|
|
border-color: transparent transparent black transparent;
|
|
}
|
|
|
|
.action-icon:hover+.tooltiptext {
|
|
visibility: visible;
|
|
}
|
|
|
|
input:checked+.action-icon:hover {
|
|
background-color: #3650af;
|
|
}
|
|
}
|
|
|
|
.icon-change-modal {
|
|
ul {
|
|
list-style-type: none;
|
|
margin: 0 auto;
|
|
text-align: center;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr 1fr;
|
|
|
|
li {
|
|
float: left;
|
|
border: 2px solid #8991a0;
|
|
border-radius: 1.75px;
|
|
cursor: pointer;
|
|
|
|
img {
|
|
width: 22px;
|
|
height: 22px;
|
|
filter: invert(59%) sepia(27%) saturate(160%) hue-rotate(181deg) brightness(91%) contrast(95%);
|
|
}
|
|
}
|
|
|
|
li.selected {
|
|
border: 2px solid $primary;
|
|
|
|
img {
|
|
filter: invert(27%) sepia(84%) saturate(5230%) hue-rotate(212deg) brightness(102%) contrast(100%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Spinner Widget
|
|
*/
|
|
.spinner-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.animation-fade {
|
|
animation-name: fade;
|
|
animation-duration: 0.3s;
|
|
animation-timing-function: ease-in;
|
|
}
|
|
|
|
@keyframes fade {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Query panel
|
|
*/
|
|
.query-btn {
|
|
cursor: pointer;
|
|
height: 24px;
|
|
width: 24px;
|
|
padding: 0;
|
|
}
|
|
|
|
.query-btn.dark {
|
|
filter: brightness(0) invert(1);
|
|
}
|
|
|
|
.button-family-secondary {
|
|
@include button-outline($light-theme: true);
|
|
|
|
& {
|
|
|
|
height: 32px;
|
|
width: 112px;
|
|
}
|
|
}
|
|
|
|
.button-family-secondary.dark {
|
|
@include button-outline($light-theme: false);
|
|
}
|
|
|
|
// ** Query Panel: REST API Tabs **
|
|
.group-header {
|
|
background: #d2ddec;
|
|
border-radius: 4px;
|
|
height: 28px !important;
|
|
|
|
span {
|
|
display: flex;
|
|
justify-content: left;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
.raw-container.dark {
|
|
background: #272822;
|
|
padding: 5px;
|
|
}
|
|
|
|
// **Alert component**
|
|
.alert-component {
|
|
border: 1px solid rgba(101, 109, 119, 0.16);
|
|
background: var(--base);
|
|
border-radius: 6px;
|
|
|
|
a {
|
|
color: $primary;
|
|
}
|
|
}
|
|
|
|
.theme-dark .alert-component {
|
|
background: var(--slate2) !important;
|
|
border-color: var(--slate4) !important;
|
|
|
|
a {
|
|
color: $primary;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.codehinter-plugins.code-hinter {
|
|
@extend .codehinter-default-input;
|
|
|
|
.popup-btn {
|
|
margin-top: 0.65rem !important;
|
|
}
|
|
|
|
.CodeMirror-placeholder,
|
|
.CodeMirror pre.CodeMirror-line {
|
|
height: 21px !important;
|
|
position: absolute !important;
|
|
margin-top: 3px !important;
|
|
}
|
|
|
|
.CodeMirror-cursor {
|
|
height: inherit !important;
|
|
}
|
|
|
|
.CodeMirror-lines {
|
|
height: 32px !important;
|
|
padding: 7px 0px !important;
|
|
}
|
|
}
|
|
|
|
//*button loading with spinner with primary color*//
|
|
.button-loading {
|
|
position: relative;
|
|
color: transparent !important;
|
|
text-shadow: none !important;
|
|
pointer-events: none;
|
|
|
|
&:after {
|
|
content: "";
|
|
display: inline-block;
|
|
vertical-align: text-bottom;
|
|
border: 1.5px solid currentColor;
|
|
border-right-color: transparent;
|
|
border-radius: 50%;
|
|
color: $primary;
|
|
position: absolute;
|
|
width: 12px;
|
|
height: 12px;
|
|
animation: spinner-border 0.75s linear infinite;
|
|
}
|
|
}
|
|
|
|
.query-icon.dark {
|
|
filter: brightness(0) invert(1);
|
|
}
|
|
|
|
//Rest-API Tab Panes
|
|
.tab-pane-body {
|
|
margin-left: -2.5% !important;
|
|
}
|
|
|
|
//CodeMirror padding
|
|
.CodeMirror pre.CodeMirror-line,
|
|
.CodeMirror pre.CodeMirror-line-like {
|
|
padding: 0 10px !important;
|
|
}
|
|
|
|
.comment-notification-nav-item {
|
|
background: transparent;
|
|
border: 0;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
opacity: 0.6;
|
|
height: 28px;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
// comment styles ::override
|
|
.editor-sidebar {
|
|
.nav-tabs .nav-link.active {
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
.inspector-nav-item {
|
|
background: transparent;
|
|
border: 0;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
opacity: 0.6;
|
|
height: 28px;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.inspector-component-title-input-holder {
|
|
padding: 4px 12px;
|
|
margin: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
height: 36px;
|
|
}
|
|
}
|
|
|
|
.comment-card-wrapper {
|
|
border-top: 0.5px solid var(--slate5) !important;
|
|
margin-top: -1px !important;
|
|
|
|
.card {
|
|
background-color: var(--base);
|
|
}
|
|
}
|
|
|
|
div#driver-highlighted-element-stage,
|
|
div#driver-page-overlay {
|
|
background: transparent !important;
|
|
outline: 5000px solid rgba(0, 0, 0, 0.75);
|
|
}
|
|
|
|
.dark-theme-walkthrough#driver-popover-item {
|
|
background-color: $bg-dark-light !important;
|
|
border-color: rgba(101, 109, 119, 0.16) !important;
|
|
|
|
.driver-popover-title {
|
|
color: white !important;
|
|
}
|
|
|
|
.driver-popover-tip {
|
|
border-color: transparent transparent transparent $bg-dark-light !important;
|
|
}
|
|
|
|
.driver-popover-description {
|
|
color: #d9dcde !important;
|
|
}
|
|
|
|
.driver-popover-footer .driver-close-btn {
|
|
color: #ffffff !important;
|
|
text-shadow: none !important;
|
|
}
|
|
|
|
.driver-prev-btn,
|
|
.driver-next-btn {
|
|
text-shadow: none !important;
|
|
}
|
|
}
|
|
|
|
#driver-popover-item {
|
|
padding: 20px !important;
|
|
|
|
.driver-prev-btn,
|
|
.driver-next-btn,
|
|
.driver-close-btn {
|
|
border: none !important;
|
|
background: none !important;
|
|
padding-left: 0 !important;
|
|
font-size: 14px !important;
|
|
}
|
|
|
|
.driver-next-btn,
|
|
.driver-prev-btn {
|
|
color: $primary !important;
|
|
}
|
|
|
|
.driver-disabled {
|
|
color: $primary;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.driver-popover-footer {
|
|
margin-top: 20px !important;
|
|
}
|
|
}
|
|
|
|
.pointer-events-none {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.popover.popover-dark-themed {
|
|
background-color: $bg-dark-light;
|
|
border-color: rgba(101, 109, 119, 0.16);
|
|
|
|
|
|
.popover-body {
|
|
color: #d9dcde !important;
|
|
}
|
|
|
|
.popover-header {
|
|
background-color: var(--slate2);
|
|
color: var(--slate11);
|
|
border-bottom-color: var
|
|
}
|
|
}
|
|
|
|
.toast-dark-mode {
|
|
.btn-close {
|
|
filter: brightness(0) invert(1);
|
|
}
|
|
}
|
|
|
|
.editor .editor-sidebar .inspector .inspector-edit-widget-name {
|
|
padding: 4px 8px;
|
|
color: var(--slate12);
|
|
border: 1px solid transparent;
|
|
border-radius: 6px;
|
|
background-color: var(--base);
|
|
|
|
&:hover {
|
|
background-color: var(--slate4);
|
|
border: 1px solid var(--slate7);
|
|
}
|
|
|
|
&:focus {
|
|
border: 1px solid var(--indigo9) !important;
|
|
background-color: var(--indigo2);
|
|
box-shadow: 0px 0px 0px 1px #C6D4F9;
|
|
}
|
|
}
|
|
|
|
.tablr-gutter-x-0 {
|
|
--tblr-gutter-x: 0 !important;
|
|
}
|
|
|
|
.widget-button>.btn-loading:after {
|
|
border: 1px solid var(--loader-color);
|
|
border-right-color: transparent;
|
|
}
|
|
|
|
.flip-dropdown-help-text {
|
|
padding: 10px 5px 0 0;
|
|
float: left;
|
|
font-size: 14px;
|
|
color: var(--slate-12);
|
|
}
|
|
|
|
.dynamic-form-element {
|
|
flex: 1 !important;
|
|
}
|
|
|
|
.dynamic-form-row {
|
|
margin-top: 16px !important;
|
|
// margin-bottom: 16px !important;
|
|
}
|
|
|
|
#transformation-popover-container {
|
|
margin-bottom: -2px !important;
|
|
}
|
|
|
|
.canvas-codehinter-container {
|
|
display: flex;
|
|
flex-direction: row;
|
|
width: 158px;
|
|
}
|
|
|
|
.hinter-canvas-input {
|
|
display: flex;
|
|
width: 120px;
|
|
height: auto !important;
|
|
margin-top: 1px;
|
|
|
|
.canvas-hinter-wrap {
|
|
width: 126x;
|
|
border: 1px solid var(--slate7);
|
|
}
|
|
}
|
|
|
|
.hinter-canvas-input {
|
|
display: flex;
|
|
padding: 4px;
|
|
margin-top: 1px;
|
|
|
|
.CodeMirror-sizer {
|
|
border-right-width: 1px !important;
|
|
}
|
|
|
|
.cm-propert {
|
|
color: #ffffff !important;
|
|
}
|
|
}
|
|
|
|
.canvas-codehinter-container {
|
|
.code-hinter-col {
|
|
margin-bottom: 1px !important;
|
|
width: 136px;
|
|
height: auto !important;
|
|
}
|
|
}
|
|
|
|
.fx-canvas {
|
|
background: var(--slate4);
|
|
padding: 0px;
|
|
display: flex;
|
|
height: 32px;
|
|
width: 32px;
|
|
border: solid 1px rgba(255, 255, 255, 0.09) !important;
|
|
border-radius: 4px;
|
|
justify-content: center;
|
|
font-weight: 400;
|
|
align-items: center;
|
|
|
|
div {
|
|
background: var(--slate4) !important;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 30px;
|
|
padding: 0px;
|
|
}
|
|
}
|
|
|
|
.org-name {
|
|
color: var(--slate12) !important;
|
|
font-size: 12px;
|
|
}
|
|
|
|
|
|
.organization-list {
|
|
margin-top: 4px;
|
|
|
|
.btn {
|
|
border: 0px;
|
|
}
|
|
|
|
.dropdown-toggle div {
|
|
max-width: 200px;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.org-name {
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
width: 100%;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.org-actions div {
|
|
color: $primary;
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.dropdown-menu {
|
|
min-width: 14rem;
|
|
}
|
|
|
|
.org-avatar {
|
|
display: block;
|
|
}
|
|
|
|
.org-avatar:hover {
|
|
.avatar {
|
|
background: #fcfcfc no-repeat center/cover;
|
|
}
|
|
|
|
.arrow-container {
|
|
svg {
|
|
filter: invert(35%) sepia(17%) saturate(238%) hue-rotate(153deg) brightness(94%) contrast(89%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.arrow-container {
|
|
padding: 5px 0px;
|
|
}
|
|
|
|
.arrow-container {
|
|
svg {
|
|
cursor: pointer;
|
|
height: 30px;
|
|
width: 30px;
|
|
padding: 0px 0px;
|
|
filter: invert(50%) sepia(13%) saturate(208%) hue-rotate(153deg) brightness(99%) contrast(86%);
|
|
}
|
|
}
|
|
|
|
.org-edit {
|
|
span {
|
|
color: $primary;
|
|
cursor: pointer;
|
|
font-size: 10px;
|
|
}
|
|
}
|
|
|
|
.organization-switchlist {
|
|
.back-btn {
|
|
font-size: 12px;
|
|
padding: 2px 0px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.back-ico {
|
|
cursor: pointer;
|
|
|
|
svg {
|
|
height: 20px;
|
|
width: 20px;
|
|
filter: invert(84%) sepia(13%) saturate(11%) hue-rotate(352deg) brightness(90%) contrast(91%);
|
|
}
|
|
}
|
|
|
|
.dd-item-padding {
|
|
padding: 0.5rem 0.75rem 0rem 0.75rem;
|
|
}
|
|
|
|
.search-box {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.org-list {
|
|
max-height: 60vh;
|
|
overflow: auto;
|
|
}
|
|
|
|
.tick-ico {
|
|
filter: invert(50%) sepia(13%) saturate(208%) hue-rotate(153deg) brightness(99%) contrast(86%);
|
|
}
|
|
|
|
.org-list-item {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.org-list-item:hover {
|
|
.avatar {
|
|
background: #fcfcfc no-repeat center/cover;
|
|
}
|
|
|
|
.tick-ico {
|
|
filter: invert(35%) sepia(17%) saturate(238%) hue-rotate(153deg) brightness(94%) contrast(89%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.sso-button-footer-wrap {
|
|
display: flex !important;
|
|
justify-content: center;
|
|
width: 100%;
|
|
}
|
|
|
|
.tj-icon {
|
|
cursor: pointer;
|
|
}
|
|
|
|
#login-url,
|
|
#redirect-url {
|
|
margin-bottom: 0px !important;
|
|
}
|
|
|
|
.git-encripted-label {
|
|
color: var(--green9);
|
|
}
|
|
|
|
.card-header {
|
|
border-bottom: 1px solid var(--slate5) !important;
|
|
}
|
|
|
|
.manage-sso-container {
|
|
position: relative;
|
|
}
|
|
|
|
.sso-card-wrapper {
|
|
background: var(--base);
|
|
min-height: 100%;
|
|
// height: calc(100vh - 156px) !important;
|
|
|
|
display: grid;
|
|
grid-template-rows: auto 1fr auto;
|
|
|
|
.card-header {
|
|
border-bottom: 1px solid var(--slate5) !important;
|
|
}
|
|
|
|
.form-control {
|
|
background: var(--base);
|
|
}
|
|
|
|
.open-id-sso-card {
|
|
border-bottom: 1px solid var(--slate5) !important;
|
|
}
|
|
|
|
.sso-card-footer {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
padding: 24px 32px;
|
|
gap: 8px;
|
|
width: 400px;
|
|
height: 88px;
|
|
border-top: 1px solid var(--slate5) !important;
|
|
background: var(--base);
|
|
margin-top: 0px !important;
|
|
}
|
|
|
|
}
|
|
|
|
.workspace-settings-page {
|
|
width: 880px;
|
|
margin: 0 auto;
|
|
background: var(--base);
|
|
|
|
.card {
|
|
background: var(--base);
|
|
border: 1px solid var(--slate7) !important;
|
|
box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05) !important;
|
|
width: 880px;
|
|
|
|
.card-header {
|
|
padding: 24px 24px;
|
|
gap: 12px;
|
|
height: 72px;
|
|
border-top-left-radius: 6px;
|
|
border-top-right-radius: 6px;
|
|
|
|
.title-banner-wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
width: 878px;
|
|
}
|
|
|
|
}
|
|
|
|
.form-label {
|
|
font-size: 12px;
|
|
font-weight: 500px;
|
|
margin-bottom: 4px !important;
|
|
color: var(--slate12);
|
|
}
|
|
|
|
.card-footer {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
padding: 24px 32px;
|
|
gap: 8px;
|
|
border-top: 1px solid var(--slate5) !important;
|
|
background: var(--base);
|
|
margin-top: 0px !important;
|
|
align-Self: 'stretch';
|
|
height: 88px;
|
|
}
|
|
|
|
.card-body {
|
|
height: 467px;
|
|
padding: 24px;
|
|
|
|
.form-group {
|
|
.tj-app-input {
|
|
.form-control {
|
|
&:disabled {
|
|
background: var(--slate3) !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Left Menu
|
|
.left-menu {
|
|
background: var(--base);
|
|
|
|
.tj-list-item {
|
|
gap: 40px;
|
|
width: 187px;
|
|
height: 32px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.folder-list-selected {
|
|
background-color: var(--indigo4);
|
|
}
|
|
|
|
ul {
|
|
margin: 0px;
|
|
padding: 0px;
|
|
|
|
li {
|
|
float: left;
|
|
list-style: none;
|
|
width: 100%;
|
|
padding: 6px 8px;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
margin: 3px 0px;
|
|
color: var(--base-black) !important;
|
|
}
|
|
|
|
li.active {
|
|
background-color: $primary;
|
|
color: #ffffff;
|
|
}
|
|
|
|
li:not(.active):hover {
|
|
background: var(--slate4);
|
|
border-radius: 6px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.enabled-tag {
|
|
padding: 4px 16px;
|
|
gap: 10px;
|
|
width: 77px;
|
|
height: 28px;
|
|
background: var(--grass3);
|
|
border-radius: 100px;
|
|
color: var(--grass9);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.disabled-tag {
|
|
padding: 4px 16px;
|
|
gap: 10px;
|
|
color: var(--tomato9);
|
|
width: 81px;
|
|
height: 28px;
|
|
background: var(--tomato3);
|
|
border-radius: 100px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.manage-sso {
|
|
.title-with-toggle {
|
|
width: 100%;
|
|
font-weight: 500;
|
|
|
|
.card-title {
|
|
color: var(--slate12) !important;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.form-check-input {
|
|
width: 28px;
|
|
height: 16px;
|
|
}
|
|
|
|
input[type="checkbox"] {
|
|
/* Double-sized Checkboxes */
|
|
-ms-transform: scale(1.5);
|
|
/* IE */
|
|
-moz-transform: scale(1.5);
|
|
/* FF */
|
|
-webkit-transform: scale(1.5);
|
|
/* Safari and Chrome */
|
|
-o-transform: scale(1.5);
|
|
/* Opera */
|
|
transform: scale(1.5);
|
|
margin-top: 5px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.help-text {
|
|
overflow: auto;
|
|
|
|
div {
|
|
color: var(--slate11);
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-size: 12px;
|
|
line-height: 20px;
|
|
}
|
|
}
|
|
|
|
|
|
.org-invite-or {
|
|
padding: 1rem 0rem;
|
|
|
|
h2 {
|
|
width: 100%;
|
|
text-align: center;
|
|
border-bottom: 1px solid #000;
|
|
line-height: 0.1em;
|
|
margin: 10px 0 20px;
|
|
}
|
|
|
|
h2 span {
|
|
background: #ffffff;
|
|
padding: 0 10px;
|
|
}
|
|
}
|
|
|
|
.theme-dark .json-tree-container {
|
|
.json-tree-node-icon {
|
|
svg {
|
|
filter: invert(89%) sepia(2%) saturate(127%) hue-rotate(175deg) brightness(99%) contrast(96%);
|
|
}
|
|
}
|
|
|
|
.json-tree-svg-icon.component-icon {
|
|
filter: brightness(0) invert(1);
|
|
}
|
|
|
|
.node-key-outline {
|
|
height: 1rem !important;
|
|
border: 1px solid transparent !important;
|
|
color: #ccd4df;
|
|
}
|
|
|
|
.selected-node {
|
|
border-color: $primary-light !important;
|
|
}
|
|
|
|
.json-tree-icon-container .selected-node>svg:first-child {
|
|
filter: invert(65%) sepia(62%) saturate(4331%) hue-rotate(204deg) brightness(106%) contrast(97%);
|
|
}
|
|
|
|
.node-length-color {
|
|
color: #b8c7fd;
|
|
}
|
|
|
|
.node-type {
|
|
color: #8a96a6;
|
|
}
|
|
|
|
.group-border {
|
|
border-color: rgb(97, 101, 111);
|
|
}
|
|
|
|
.action-icons-group {
|
|
|
|
|
|
img,
|
|
svg {
|
|
filter: invert(89%) sepia(2%) saturate(127%) hue-rotate(175deg) brightness(99%) contrast(96%);
|
|
}
|
|
}
|
|
|
|
.hovered-node.node-key.badge {
|
|
color: #8092ab !important;
|
|
border-color: #8092ab !important;
|
|
}
|
|
|
|
}
|
|
|
|
.json-tree-container {
|
|
|
|
.inspector-json-node {
|
|
.color-primary {
|
|
color: $primary;
|
|
}
|
|
|
|
.node-key-outline {
|
|
height: 1rem !important;
|
|
border: 1px solid transparent !important;
|
|
color: var(--slate12);
|
|
}
|
|
|
|
&:hover {
|
|
.action-icons-group {
|
|
visibility: visible;
|
|
pointer-events: all;
|
|
}
|
|
|
|
.hovered-json-node {
|
|
font-weight: 400 !important;
|
|
height: 1rem !important;
|
|
color: #8092ab;
|
|
}
|
|
|
|
.hovered-json-node-border.node-key.badge {
|
|
border-color: $primary !important;
|
|
}
|
|
|
|
.node-key-outline.node-key.badge {
|
|
border-color: #8092ab !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.json-tree-svg-icon.component-icon {
|
|
height: 16px;
|
|
width: 16px;
|
|
}
|
|
|
|
.json-tree-icon-container {
|
|
max-width: 20px;
|
|
margin-right: 6px;
|
|
font-family: 'IBM Plex Sans';
|
|
}
|
|
|
|
.node-type {
|
|
color: var(--slate11);
|
|
padding-top: 2px;
|
|
}
|
|
|
|
.json-tree-valuetype {
|
|
font-size: 10px;
|
|
padding-top: 2px;
|
|
}
|
|
|
|
.node-length-color {
|
|
color: var(--indigo10);
|
|
padding-top: 3px;
|
|
}
|
|
|
|
.json-tree-node-value {
|
|
font-size: 11px;
|
|
}
|
|
|
|
.json-tree-node-string {
|
|
color: var(--orange9);
|
|
}
|
|
|
|
.json-tree-node-boolean {
|
|
color: var(--green9);
|
|
}
|
|
|
|
.json-tree-node-number {
|
|
color: var(--orange9);
|
|
}
|
|
|
|
.json-tree-node-null {
|
|
color: red;
|
|
}
|
|
|
|
.json-tree-node-date {
|
|
color: rgb(98, 107, 103);
|
|
}
|
|
|
|
.group-border {
|
|
border-left: 0.5px solid #dadcde;
|
|
margin-top: 16px;
|
|
margin-left: -12px;
|
|
}
|
|
|
|
.selected-node {
|
|
border-color: $primary-light !important;
|
|
}
|
|
|
|
.selected-node .group-object-container .badge {
|
|
font-weight: 400 !important;
|
|
height: 1rem !important;
|
|
}
|
|
|
|
.group-object-container {
|
|
margin-left: 0.72rem;
|
|
margin-top: -16px;
|
|
}
|
|
|
|
.json-node-element {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.hide-show-icon {
|
|
cursor: pointer;
|
|
margin-left: 1rem;
|
|
|
|
&:hover {
|
|
color: $primary;
|
|
}
|
|
}
|
|
|
|
|
|
.action-icons-group {
|
|
visibility: hidden;
|
|
pointer-events: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.hovered-node {
|
|
font-weight: 400 !important;
|
|
height: 1rem !important;
|
|
color: #8092ab;
|
|
}
|
|
|
|
.node-key {
|
|
font-weight: 400 !important;
|
|
margin-left: -0.25rem !important;
|
|
justify-content: flex-start !important;
|
|
min-width: fit-content !important;
|
|
}
|
|
|
|
.node-key-outline {
|
|
height: 1rem !important;
|
|
border: 1px solid transparent !important;
|
|
color: var(--slate12);
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.popover-more-actions {
|
|
font-weight: 400 !important;
|
|
|
|
&:hover {
|
|
background: #d2ddec !important;
|
|
}
|
|
}
|
|
|
|
.popover-dark-themed .popover-more-actions {
|
|
color: #ccd4df;
|
|
|
|
&:hover {
|
|
background-color: #324156 !important;
|
|
}
|
|
}
|
|
|
|
#json-tree-popover {
|
|
padding: 0.25rem !important;
|
|
}
|
|
|
|
// Font sizes
|
|
.fs-9 {
|
|
font-size: 9px !important;
|
|
}
|
|
|
|
.fs-10 {
|
|
font-size: 10px !important;
|
|
}
|
|
|
|
.fs-12 {
|
|
font-size: 12px !important;
|
|
}
|
|
|
|
.realtime-avatars {
|
|
padding: 0px;
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.widget-style-field-header {
|
|
font-family: "Inter";
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
font-size: 12px;
|
|
line-height: 20px;
|
|
color: #61656c;
|
|
}
|
|
|
|
.maintenance_container {
|
|
width: 100%;
|
|
height: 100vh;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
.card {
|
|
.card-body {
|
|
display: flex;
|
|
height: 200px !important;
|
|
align-items: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
.list-timeline:not(.list-timeline-simple) .list-timeline-time {
|
|
top: auto;
|
|
}
|
|
|
|
.widget-buttongroup {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: left;
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
.group-button {
|
|
margin: 0px 10px 10px 0px;
|
|
line-height: 1.499;
|
|
font-weight: 400;
|
|
white-space: nowrap;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
padding: 0 15px;
|
|
font-size: 12px;
|
|
border-radius: 4px;
|
|
color: rgba(0, 0, 0, .65);
|
|
background-color: #ffffff;
|
|
border: 1px solid #d9d9d9;
|
|
min-width: 40px;
|
|
width: auto !important;
|
|
height: 30px,
|
|
}
|
|
|
|
.widget-buttongroup-label {
|
|
font-weight: 600;
|
|
margin-right: 10px;
|
|
color: #3e525b;
|
|
}
|
|
|
|
.editor-actions {
|
|
border-bottom: 1px solid #eee;
|
|
padding: 5px;
|
|
display: flex;
|
|
justify-content: flex-end
|
|
}
|
|
|
|
.autosave-indicator {
|
|
color: var(--slate10, #7E868C);
|
|
}
|
|
|
|
.pdf-page-controls {
|
|
background: white;
|
|
border-radius: 4px;
|
|
|
|
button {
|
|
width: 36px;
|
|
height: 36px;
|
|
background: white;
|
|
border: 0;
|
|
font-size: 1.2em;
|
|
border-radius: 4px;
|
|
|
|
&:first-child {
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
|
|
&:last-child {
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
}
|
|
|
|
&:hover {
|
|
background-color: #e6e6e6;
|
|
}
|
|
}
|
|
|
|
span {
|
|
font-family: inherit;
|
|
font-size: 1em;
|
|
padding: 0 0.5em;
|
|
color: #000;
|
|
}
|
|
}
|
|
|
|
//download button in pdf widget
|
|
.download-icon-outer-wrapper:hover {
|
|
background-color: #e6e6e6 !important
|
|
}
|
|
|
|
.pdf-document {
|
|
canvas {
|
|
margin: 0px auto;
|
|
}
|
|
|
|
&:hover {
|
|
.pdf-page-controls {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.org-variables-page {
|
|
.btn-org-env {
|
|
width: 36px;
|
|
}
|
|
|
|
.encryption-input {
|
|
width: fit-content;
|
|
}
|
|
|
|
.no-vars-text {
|
|
display: block;
|
|
text-align: center;
|
|
margin-top: 100px;
|
|
}
|
|
}
|
|
|
|
.org-constant-page {
|
|
.card-footer {
|
|
background: var(--base);
|
|
color: var(--slate12);
|
|
}
|
|
}
|
|
|
|
.tj-input-error-state {
|
|
border: 1px solid var(--tomato9) !important;
|
|
}
|
|
|
|
|
|
|
|
.tj-input-element {
|
|
gap: 16px;
|
|
background: var(--base);
|
|
border: 1px solid var(--slate7);
|
|
border-radius: 6px;
|
|
margin-bottom: 4px;
|
|
display: block;
|
|
width: 100%;
|
|
padding: .4375rem .75rem;
|
|
font-size: .875rem;
|
|
font-weight: 400;
|
|
line-height: 1.4285714;
|
|
color: var(--slate12);
|
|
background-clip: padding-box;
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
appearance: none;
|
|
transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
|
|
|
|
&:hover {
|
|
background: var(--slate1);
|
|
border: 1px solid var(--slate8);
|
|
-webkit-box-shadow: none;
|
|
box-shadow: none;
|
|
outline: none;
|
|
}
|
|
|
|
&:focus-visible {
|
|
background: var(--slate1);
|
|
border: 1px solid var(--indigo9);
|
|
outline: none;
|
|
}
|
|
|
|
&:active {
|
|
background: var(--indigo2);
|
|
border: 1px solid var(--indigo9);
|
|
box-shadow: none;
|
|
}
|
|
|
|
&:disabled {
|
|
background: var(--slate3);
|
|
border: 1px solid var(--slate8);
|
|
color: var(--slate9);
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
&::placeholder {
|
|
color: var(--slate9);
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
|
|
|
|
//Kanban board
|
|
.kanban-container.dark-themed {
|
|
background-color: $bg-dark-light !important;
|
|
|
|
.kanban-column {
|
|
.card-header {
|
|
background-color: #324156 !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.kanban-container {
|
|
background-color: #fefefe;
|
|
|
|
.kanban-column {
|
|
background-color: #f4f4f4;
|
|
padding: 0 !important;
|
|
height: fit-content !important;
|
|
|
|
.card-body {
|
|
&:hover {
|
|
overflow-y: auto !important;
|
|
|
|
&::-webkit-scrollbar {
|
|
width: 0 !important;
|
|
height: 0 !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.card-header {
|
|
background-color: #fefefe;
|
|
|
|
.badge {
|
|
font-size: 12px !important;
|
|
}
|
|
}
|
|
|
|
.card-body .dnd-card {
|
|
border-radius: 5px !important;
|
|
}
|
|
|
|
.dnd-card.card {
|
|
height: 52px !important;
|
|
padding: 5px !important;
|
|
}
|
|
|
|
.dnd-card.card.card-dark {
|
|
background-color: $bg-dark !important;
|
|
}
|
|
}
|
|
|
|
.kanban-board-add-group {
|
|
justify-content: center;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
color: rgba(0, 0, 0, 0.5);
|
|
background-color: transparent;
|
|
border-style: dashed;
|
|
border-color: rgba(0, 0, 0, 0.08);
|
|
display: flex;
|
|
flex-direction: column;
|
|
grid-auto-rows: max-content;
|
|
overflow: hidden;
|
|
box-sizing: border-box;
|
|
appearance: none;
|
|
outline: none;
|
|
margin: 10px;
|
|
border-radius: 5px;
|
|
min-width: 350px;
|
|
height: 200px;
|
|
font-size: 1em;
|
|
}
|
|
|
|
.add-card-btn {
|
|
font-size: 1em;
|
|
font-weight: 400;
|
|
color: #3e525b;
|
|
border-radius: 5px;
|
|
padding: 5px;
|
|
margin: 5px;
|
|
background-color: transparent;
|
|
border-style: dashed;
|
|
border-color: rgba(0, 0, 0, 0.08);
|
|
cursor: pointer;
|
|
transition: all 0.2s ease-in-out;
|
|
|
|
&:hover {
|
|
background-color: #e6e6e6;
|
|
}
|
|
}
|
|
}
|
|
|
|
.cursor-pointer {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.cursor-text {
|
|
cursor: text;
|
|
}
|
|
|
|
.cursor-not-allowed {
|
|
cursor: none;
|
|
}
|
|
|
|
.bade-component {
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
overflow: hidden;
|
|
user-select: none;
|
|
padding: calc(0.25rem - 1px) 0.25rem;
|
|
height: 1.25rem;
|
|
border: 1px solid transparent;
|
|
min-width: 1.25rem;
|
|
font-weight: 600;
|
|
font-size: .625rem;
|
|
letter-spacing: .04em;
|
|
text-transform: uppercase;
|
|
vertical-align: bottom;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
// sso-helper-page
|
|
.sso-helper-container {
|
|
width: 60vw;
|
|
padding: 30px;
|
|
box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.sso-copy {
|
|
margin-left: 10px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#git-url,
|
|
#google-url {
|
|
color: $primary;
|
|
margin-left: 4px;
|
|
word-break: break-all;
|
|
}
|
|
|
|
@media only screen and (max-width: 768px) {
|
|
.sso-helper-container {
|
|
width: 96vw;
|
|
padding: 20px;
|
|
}
|
|
}
|
|
|
|
.sso-helper-doc {
|
|
line-height: 24px;
|
|
}
|
|
|
|
.sso-content-wrapper {
|
|
margin: 0 auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: self-start;
|
|
padding: 20px;
|
|
box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.workspace-status {
|
|
display: flex;
|
|
font-weight: 800;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.sso-type {
|
|
font-weight: 600;
|
|
margin-bottom: 4px !important;
|
|
display: flex;
|
|
|
|
span {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
a {
|
|
margin-left: 6px;
|
|
|
|
}
|
|
}
|
|
|
|
.gg-album {
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
display: block;
|
|
width: 18px;
|
|
height: 18px;
|
|
transform: scale(var(--ggs, 1));
|
|
border-left: 7px solid transparent;
|
|
border-right: 3px solid transparent;
|
|
border-bottom: 8px solid transparent;
|
|
box-shadow: 0 0 0 2px,
|
|
inset 6px 4px 0 -4px,
|
|
inset -6px 4px 0 -4px;
|
|
border-radius: 3px
|
|
}
|
|
|
|
.gg-album::after,
|
|
.gg-album::before {
|
|
content: "";
|
|
display: block;
|
|
box-sizing: border-box;
|
|
position: absolute;
|
|
width: 2px;
|
|
height: 5px;
|
|
background: currentColor;
|
|
transform: rotate(46deg);
|
|
top: 5px;
|
|
right: 4px
|
|
}
|
|
|
|
.gg-album::after {
|
|
transform: rotate(-46deg);
|
|
right: 2px
|
|
}
|
|
|
|
.sso-helper-header {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
span {
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
|
|
// sso end
|
|
|
|
// steps-widget
|
|
a.step-item-disabled {
|
|
text-decoration: none;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.steps {
|
|
overflow: hidden;
|
|
margin: 0rem !important;
|
|
}
|
|
|
|
.step-item.active~.step-item:after,
|
|
.step-item.active~.step-item:before {
|
|
background: var(--incompletedAccent) !important;
|
|
}
|
|
|
|
.step-item.active:before {
|
|
background: transparent !important;
|
|
}
|
|
|
|
.steps .step-item.active:before {
|
|
border-color: var(--completedAccent) !important;
|
|
}
|
|
|
|
.steps-item {
|
|
color: var(--textColor) !important;
|
|
}
|
|
|
|
|
|
.step-item {
|
|
&.completed-label {
|
|
color: var(--completedLabel) !important;
|
|
}
|
|
|
|
&.incompleted-label {
|
|
color: var(--incompletedLabel) !important;
|
|
}
|
|
|
|
&.active-label {
|
|
color: var(--currentStepLabel) !important;
|
|
}
|
|
}
|
|
|
|
.step-item:before {
|
|
background-color: var(--completedAccent) !important;
|
|
// remaining code
|
|
}
|
|
|
|
.step-item:after {
|
|
background: var(--completedAccent) !important;
|
|
}
|
|
|
|
|
|
.notification-center-badge {
|
|
|
|
margin-top: 0px;
|
|
margin-left: 10px;
|
|
margin-bottom: 15px;
|
|
position: absolute;
|
|
right: 6px;
|
|
}
|
|
|
|
.notification-center {
|
|
max-height: 500px;
|
|
min-width: 420px;
|
|
overflow: auto;
|
|
margin-left: 11px !important;
|
|
|
|
.empty {
|
|
padding: 0 !important;
|
|
|
|
.empty-img {
|
|
font-size: 2.5em;
|
|
}
|
|
}
|
|
|
|
.card {
|
|
min-width: 400px;
|
|
background: var(--base);
|
|
color: var(--slate12);
|
|
box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
|
|
}
|
|
|
|
.card-footer {
|
|
background: var(--base);
|
|
color: var(--slate12);
|
|
}
|
|
|
|
.spinner {
|
|
min-height: 100px;
|
|
}
|
|
}
|
|
|
|
// profile-settings css
|
|
.confirm-input {
|
|
padding-right: 8px !important;
|
|
}
|
|
|
|
.user-group-actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
justify-content: right;
|
|
}
|
|
|
|
input.hide-input-arrows {
|
|
-moz-appearance: none;
|
|
|
|
&::-webkit-outer-spin-button,
|
|
&::-webkit-inner-spin-button {
|
|
-webkit-appearance: none;
|
|
}
|
|
}
|
|
|
|
.btn-org-env {
|
|
width: 36px;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.custom-checkbox-tree {
|
|
overflow-y: scroll;
|
|
color: #3e525b;
|
|
|
|
.react-checkbox-tree label:hover {
|
|
background: none !important;
|
|
}
|
|
|
|
.rct-icons-fa4 {
|
|
|
|
.rct-icon-expand-open,
|
|
.rct-icon-expand-close {
|
|
&::before {
|
|
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024' focusable='false' data-icon='caret-down' width='12px' height='12px' fill='currentColor' aria-hidden='true'%3E%3Cpath d='M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z'%3E%3C/path%3E%3C/svg%3E") !important;
|
|
}
|
|
}
|
|
|
|
.rct-icon-expand-close {
|
|
transform: rotate(-90deg);
|
|
-webkit-transform: rotate(-90deg);
|
|
}
|
|
}
|
|
}
|
|
|
|
// sso enable/disable box
|
|
.tick-cross-info {
|
|
.main-box {
|
|
margin-right: 10px;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.icon-box {
|
|
padding: 7px 5px 7px 2px;
|
|
color: #ffffff;
|
|
|
|
.icon {
|
|
stroke-width: 4.5px;
|
|
}
|
|
}
|
|
|
|
.tick-box {
|
|
border: 3px solid var(--indigo9);
|
|
|
|
.icon-box {
|
|
background: var(--indigo9);
|
|
}
|
|
}
|
|
|
|
.cross-box {
|
|
border: 3px solid $disabled;
|
|
|
|
.icon-box {
|
|
background: $disabled;
|
|
}
|
|
}
|
|
}
|
|
|
|
.oidc-button {
|
|
.btn-loading:after {
|
|
color: $primary;
|
|
}
|
|
}
|
|
|
|
.icon-widget-popover {
|
|
&.theme-dark {
|
|
.popover-header {
|
|
background-color: #232e3c;
|
|
border-bottom: 1px solid #324156;
|
|
}
|
|
|
|
.popover-body {
|
|
background-color: #232e3c;
|
|
border-radius: 6px;
|
|
}
|
|
}
|
|
|
|
.popover-header {
|
|
padding-bottom: 0;
|
|
background-color: #ffffff;
|
|
|
|
.input-icon {
|
|
margin-bottom: 0.5rem !important;
|
|
}
|
|
}
|
|
|
|
.popover-body {
|
|
padding: 0 0.5rem;
|
|
|
|
.row {
|
|
>div {
|
|
overflow-x: hidden !important;
|
|
}
|
|
}
|
|
|
|
.icon-list-wrapper {
|
|
display: grid;
|
|
grid-template-columns: repeat(10, 1fr);
|
|
margin: 0.5rem 1rem 0.5rem 0.5rem;
|
|
}
|
|
|
|
.icon-element {
|
|
cursor: pointer;
|
|
border: 1px solid transparent;
|
|
border-radius: $border-radius;
|
|
|
|
&:hover {
|
|
border: 1px solid $primary;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.dark-theme-placeholder::placeholder {
|
|
color: #C8C6C6;
|
|
}
|
|
|
|
.dark-multiselectinput {
|
|
input {
|
|
color: white;
|
|
|
|
&::placeholder {
|
|
color: #C8C6C6;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.dark-multiselectinput {
|
|
input {
|
|
color: white;
|
|
|
|
&::placeholder {
|
|
color: #C8C6C6;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Language Selection Modal
|
|
.lang-selection-modal {
|
|
font-weight: 500;
|
|
|
|
.list-group {
|
|
padding: 1rem 1.5rem;
|
|
padding-top: 0;
|
|
overflow-y: scroll;
|
|
height: calc(100% - 68px);
|
|
}
|
|
|
|
.list-group-item {
|
|
border: 0;
|
|
|
|
p {
|
|
margin-bottom: 0px;
|
|
margin-top: 2px;
|
|
}
|
|
}
|
|
|
|
.list-group-item.active {
|
|
background-color: var(--indigo4);
|
|
color: var(--slate12);
|
|
font-weight: 600;
|
|
margin-top: 0px;
|
|
}
|
|
|
|
.modal-body {
|
|
height: 50vh;
|
|
padding: 0;
|
|
}
|
|
|
|
.lang-list {
|
|
height: 100%;
|
|
|
|
.search-box {
|
|
position: relative;
|
|
margin: 1rem 1.5rem;
|
|
}
|
|
|
|
input {
|
|
border-radius: 5px !important;
|
|
}
|
|
|
|
.input-icon {
|
|
display: flex;
|
|
}
|
|
|
|
.input-icon {
|
|
.search-icon {
|
|
display: block;
|
|
position: absolute;
|
|
left: 0;
|
|
margin-right: 0.5rem;
|
|
}
|
|
|
|
.clear-icon {
|
|
cursor: pointer;
|
|
display: block;
|
|
position: absolute;
|
|
right: 0;
|
|
margin-right: 0.5rem;
|
|
}
|
|
}
|
|
|
|
.list-group-item.active {
|
|
color: $primary;
|
|
}
|
|
}
|
|
}
|
|
|
|
.lang-selection-modal.dark {
|
|
.modal-header {
|
|
border-color: #232e3c !important;
|
|
}
|
|
|
|
.modal-body,
|
|
.modal-footer,
|
|
.modal-header,
|
|
.modal-content {
|
|
color: white;
|
|
background-color: #2b394a;
|
|
}
|
|
|
|
.list-group-item {
|
|
color: white;
|
|
border: 0;
|
|
}
|
|
|
|
.list-group-item:hover {
|
|
background-color: #232e3c;
|
|
}
|
|
|
|
.list-group-item.active {
|
|
background-color: #4d72fa;
|
|
color: white;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.no-results-item {
|
|
background-color: #2b394a;
|
|
color: white;
|
|
}
|
|
|
|
input {
|
|
background-color: #2b394a;
|
|
border-color: #232e3c;
|
|
color: white;
|
|
}
|
|
}
|
|
|
|
// Language Selection Modal
|
|
.lang-selection-modal {
|
|
font-weight: 500;
|
|
|
|
.list-group {
|
|
padding: 1rem 1.5rem;
|
|
padding-top: 0;
|
|
overflow-y: scroll;
|
|
height: calc(100% - 68px);
|
|
}
|
|
|
|
.list-group-item {
|
|
border: 0;
|
|
|
|
p {
|
|
margin-bottom: 0px;
|
|
margin-top: 2px;
|
|
}
|
|
}
|
|
|
|
.list-group-item.active {
|
|
background-color: #edf1ff;
|
|
color: #4d72fa;
|
|
font-weight: 600;
|
|
margin-top: 0px;
|
|
}
|
|
|
|
.modal-body {
|
|
height: 50vh;
|
|
padding: 0;
|
|
}
|
|
|
|
.lang-list {
|
|
height: 100%;
|
|
|
|
.search-box {
|
|
position: relative;
|
|
margin: 1rem 1.5rem;
|
|
}
|
|
|
|
input {
|
|
border-radius: 5px !important;
|
|
}
|
|
|
|
.input-icon {
|
|
display: flex;
|
|
}
|
|
|
|
.input-icon {
|
|
.search-icon {
|
|
display: block;
|
|
position: absolute;
|
|
left: 0;
|
|
margin-right: 0.5rem;
|
|
}
|
|
|
|
.clear-icon {
|
|
cursor: pointer;
|
|
display: block;
|
|
position: absolute;
|
|
right: 0;
|
|
margin-right: 0.5rem;
|
|
}
|
|
}
|
|
|
|
.list-group-item.active {
|
|
color: $primary;
|
|
}
|
|
}
|
|
}
|
|
|
|
.lang-selection-modal.dark {
|
|
.modal-header {
|
|
border-color: #232e3c !important;
|
|
}
|
|
|
|
.modal-body,
|
|
.modal-footer,
|
|
.modal-header,
|
|
.modal-content {
|
|
color: white;
|
|
background-color: #2b394a;
|
|
}
|
|
|
|
.list-group-item {
|
|
color: white;
|
|
border: 0;
|
|
}
|
|
|
|
.list-group-item:hover {
|
|
background-color: #232e3c;
|
|
}
|
|
|
|
.list-group-item.active {
|
|
background-color: #4d72fa;
|
|
color: white;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.no-results-item {
|
|
background-color: #2b394a;
|
|
color: white;
|
|
}
|
|
|
|
input {
|
|
background-color: #2b394a;
|
|
border-color: #232e3c;
|
|
color: white;
|
|
}
|
|
}
|
|
|
|
.org-users-page {
|
|
.page-body {
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.user-group-container-wrap {
|
|
margin: 20px auto 0 auto;
|
|
}
|
|
|
|
.dragged-column {
|
|
z-index: 1001;
|
|
}
|
|
|
|
#storage-sort-popover {
|
|
max-width: 800px;
|
|
width: 800px;
|
|
background-color: var(--base);
|
|
box-sizing: border-box;
|
|
box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
|
|
border-radius: 4px;
|
|
border: 1px solid var(--slate3) !important;
|
|
|
|
|
|
|
|
.card-body,
|
|
.card-footer {
|
|
background: var(--base);
|
|
}
|
|
}
|
|
|
|
|
|
#storage-filter-popover {
|
|
max-width: 800px;
|
|
width: 800px;
|
|
background-color: var(--base);
|
|
box-sizing: border-box;
|
|
box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
|
|
border-radius: 4px;
|
|
border: 1px solid var(--slate3) !important;
|
|
|
|
|
|
|
|
.card-body,
|
|
.card-footer {
|
|
background: var(--base);
|
|
}
|
|
}
|
|
|
|
.filter-header {
|
|
width: 100%;
|
|
height: 56px;
|
|
padding: 0 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
color: var(--text-default);
|
|
border-bottom: 1px solid var(--border-weak);
|
|
|
|
.filter-heading {
|
|
font-family: IBM Plex Sans;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
line-height: 20px;
|
|
text-align: left;
|
|
}
|
|
}
|
|
|
|
tbody {
|
|
width: 100% !important;
|
|
flex-grow: 1;
|
|
|
|
tr {
|
|
width: 100% !important;
|
|
|
|
td:last-child {
|
|
flex: 1 1 auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
.datepicker-widget.theme-dark {
|
|
.react-datepicker__tab-loop {
|
|
.react-datepicker__header {
|
|
background-color: #232e3c;
|
|
|
|
.react-datepicker__current-month,
|
|
.react-datepicker__day-name,
|
|
.react-datepicker__month-select,
|
|
.react-datepicker__year-select {
|
|
color: white;
|
|
|
|
}
|
|
|
|
.react-datepicker__month-select,
|
|
.react-datepicker__year-select {
|
|
background-color: transparent;
|
|
|
|
option {
|
|
background-color: #232e3c;
|
|
}
|
|
}
|
|
}
|
|
|
|
.react-datepicker__month {
|
|
background-color: #232e3c;
|
|
|
|
.react-datepicker__day {
|
|
color: white;
|
|
|
|
&:hover {
|
|
background-color: #636466;
|
|
}
|
|
}
|
|
|
|
.react-datepicker__day--outside-month {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
.react-datepicker {
|
|
background-color: #232e3c;
|
|
}
|
|
}
|
|
}
|
|
|
|
.theme-dark .list-group-item {
|
|
&:hover {
|
|
background-color: #232e3c;
|
|
}
|
|
}
|
|
|
|
.theme-dark {
|
|
|
|
.CalendarMonth,
|
|
.DayPickerNavigation_button,
|
|
.CalendarDay,
|
|
.CalendarMonthGrid,
|
|
.DayPicker_focusRegion,
|
|
.DayPicker {
|
|
background-color: #232e3c;
|
|
}
|
|
|
|
.DayPicker_weekHeader_ul,
|
|
.CalendarMonth_caption,
|
|
.CalendarDay {
|
|
color: white;
|
|
}
|
|
|
|
.CalendarDay__selected_span,
|
|
.CalendarDay__selected_start,
|
|
.CalendarDay__selected_end {
|
|
background-color: #4D72FA;
|
|
color: white;
|
|
}
|
|
|
|
.CalendarDay {
|
|
border-color: transparent; //hiding the border around days in the dark theme
|
|
|
|
&:hover {
|
|
background-color: #636466;
|
|
}
|
|
}
|
|
|
|
.DateInput_fangStroke {
|
|
stroke: #232E3C;
|
|
fill: #232E3C;
|
|
}
|
|
|
|
.DayPickerNavigation_svg__horizontal {
|
|
fill: white;
|
|
}
|
|
|
|
.DayPicker__withBorder {
|
|
border-radius: 0;
|
|
}
|
|
|
|
.DateRangePicker_picker {
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
|
|
.link-widget {
|
|
overflow: auto;
|
|
|
|
&.hover {
|
|
a {
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.no-underline {
|
|
a {
|
|
text-decoration: none !important;
|
|
}
|
|
}
|
|
|
|
&.underline {
|
|
a {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
&::-webkit-scrollbar {
|
|
width: 0;
|
|
height: 0;
|
|
background: transparent;
|
|
}
|
|
}
|
|
|
|
.import-export-footer-btns {
|
|
margin: 0px !important;
|
|
}
|
|
|
|
.home-version-modal-component {
|
|
border-bottom-right-radius: 0px !important;
|
|
border-bottom-left-radius: 0px !important;
|
|
box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08),
|
|
0px 4px 6px -2px rgba(16, 24, 40, 0.03) !important;
|
|
}
|
|
|
|
.current-version-label,
|
|
.other-version-label {
|
|
color: var(--slate11);
|
|
}
|
|
|
|
.home-modal-component.modal-version-lists {
|
|
width: 466px;
|
|
height: 668px;
|
|
background: var(--base);
|
|
box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
|
|
border-top-right-radius: 6px;
|
|
border-top-right-radius: 6px;
|
|
|
|
|
|
.modal-header {
|
|
.btn-close {
|
|
top: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal-version-lists {
|
|
max-height: 80vh;
|
|
|
|
.modal-body {
|
|
height: 80%;
|
|
overflow: auto;
|
|
}
|
|
|
|
.export-creation-date {
|
|
color: var(--slate11);
|
|
}
|
|
|
|
.modal-footer,
|
|
.modal-header {
|
|
padding-bottom: 24px;
|
|
padding: 12px 28px;
|
|
gap: 10px;
|
|
width: 466px;
|
|
height: 56px;
|
|
background-color: var(--base);
|
|
}
|
|
|
|
.modal-footer {
|
|
padding: 24px 32px;
|
|
gap: 8px;
|
|
width: 466px;
|
|
height: 88px;
|
|
}
|
|
|
|
.tj-version-wrap-sub-footer {
|
|
display: flex;
|
|
flex-direction: row;
|
|
padding: 16px 28px;
|
|
gap: 10px;
|
|
height: 52px;
|
|
background: var(--base);
|
|
border-top: 1px solid var(--slate5);
|
|
border-bottom: 1px solid var(--slate5);
|
|
|
|
|
|
|
|
p {
|
|
font-weight: 400;
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
color: var(--slate12);
|
|
}
|
|
}
|
|
|
|
.version-wrapper {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
padding: 0.75rem 0.25rem;
|
|
}
|
|
|
|
.current-version-wrap,
|
|
.other-version-wrap {
|
|
|
|
span:first-child {
|
|
color: var(--slate12) !important;
|
|
}
|
|
}
|
|
|
|
.current-version-wrap {
|
|
background: var(--indigo3) !important;
|
|
margin-bottom: 24px;
|
|
border-radius: 6px;
|
|
margin-top: 8px;
|
|
}
|
|
}
|
|
|
|
.rest-methods-url {
|
|
.cm-s-default {
|
|
.cm-string-2 {
|
|
color: #000;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tooljet-database {
|
|
|
|
.tj-db-headerText {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
width: 78%;
|
|
}
|
|
|
|
.table-header,
|
|
.table-name,
|
|
.table-cell {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
cursor: pointer;
|
|
|
|
input.form-control {
|
|
border: none;
|
|
padding: 0px !important;
|
|
}
|
|
}
|
|
|
|
.table-cell-dark {
|
|
color: #ffffff;
|
|
}
|
|
|
|
.table-cell-hover-background {
|
|
background-color: #F8F9FA;
|
|
padding: 0rem;
|
|
max-width: 230px;
|
|
|
|
input.form-control {
|
|
border: none !important;
|
|
margin: 0px !important;
|
|
padding: 0px !important;
|
|
background-color: #F8F9FA;
|
|
}
|
|
}
|
|
|
|
.table-cell-hover-background-dark {
|
|
background-color: #242f3c;
|
|
padding: 0rem;
|
|
max-width: 230px;
|
|
color: #ffffff;
|
|
|
|
input.form-control {
|
|
border: none !important;
|
|
margin: 0px !important;
|
|
padding: 0px !important;
|
|
background-color: #242f3c !important;
|
|
}
|
|
}
|
|
|
|
.table-editable-parent-cell {
|
|
max-width: 230px;
|
|
background-color: var(--indigo2) !important;
|
|
cursor: pointer;
|
|
padding: 0rem;
|
|
|
|
.form-control {
|
|
background-color: var(--indigo2) !important;
|
|
border: none !important;
|
|
padding: 0;
|
|
margin: 0px !important;
|
|
border-radius: 0px;
|
|
}
|
|
|
|
.popover-body {
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
|
|
.tjdb-cell-error {
|
|
padding: 0rem;
|
|
border-top: 1.5px solid var(--Tomato-09, #E54D2E) !important;
|
|
border-bottom: 1.5px solid var(--Tomato-09, #E54D2E) !important;
|
|
border-right: 1.5px solid var(--Tomato-09, #E54D2E) !important;
|
|
border-left: 1.5px solid var(--Tomato-09, #E54D2E) !important;
|
|
}
|
|
|
|
.tjdb-column-select-border {
|
|
border-left: 1.5px solid transparent;
|
|
border-right: 1.5px solid transparent;
|
|
border-top: 1.5px solid transparent;
|
|
border-bottom: 1.5px solid transparent;
|
|
}
|
|
|
|
.table-columnHeader-click {
|
|
background-color: #F8F9FA;
|
|
padding: 0;
|
|
max-width: 230px;
|
|
|
|
.tjdb-column-select-border {
|
|
border-left-color: #3E63DD !important;
|
|
border-right-color: #3E63DD !important;
|
|
}
|
|
|
|
input.form-control {
|
|
border: none !important;
|
|
padding: 0px !important;
|
|
margin: 0px !important;
|
|
background-color: #F8F9FA;
|
|
}
|
|
}
|
|
|
|
.table-columnHeader-click-dark {
|
|
background-color: #242f3c;
|
|
padding: 0;
|
|
max-width: 230px;
|
|
color: #ffffff;
|
|
|
|
.tjdb-column-select-border {
|
|
border-left-color: white !important;
|
|
border-right-color: white !important;
|
|
}
|
|
|
|
input.form-control {
|
|
border: none !important;
|
|
margin: 0px !important;
|
|
padding: 0px !important;
|
|
background-color: #242f3c;
|
|
}
|
|
}
|
|
|
|
.row-tj:first-child {
|
|
.tjdb-column-select-border {
|
|
border-top: 1.5px solid transparent;
|
|
}
|
|
|
|
.table-columnHeader-click {
|
|
.tjdb-column-select-border {
|
|
border-top-color: #3E63DD !important;
|
|
}
|
|
}
|
|
|
|
.table-columnHeader-click-dark {
|
|
.tjdb-column-select-border {
|
|
border-top-color: white !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.row-tj:last-of-type {
|
|
.tjdb-column-select-border {
|
|
border-bottom: 1.5px solid transparent;
|
|
}
|
|
|
|
.table-columnHeader-click {
|
|
.tjdb-column-select-border {
|
|
border-bottom-color: #3E63DD !important;
|
|
}
|
|
}
|
|
|
|
.table-columnHeader-click-dark {
|
|
.tjdb-column-select-border {
|
|
border-bottom-color: white !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.table-name {
|
|
color: #000;
|
|
width: 250px;
|
|
}
|
|
|
|
.table-left-sidebar {
|
|
max-width: 288px;
|
|
}
|
|
|
|
.add-table-btn {
|
|
height: 32px;
|
|
}
|
|
|
|
.table-header-click {
|
|
background: #DFE3E6;
|
|
|
|
.tjdb-menu-icon-parent {
|
|
background: #E6E8EB !important;
|
|
border-radius: 10px !important;
|
|
|
|
.tjdb-menu-icon {
|
|
display: block;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
|
|
.table-header {
|
|
background: #ECEEF0;
|
|
}
|
|
|
|
.table-header:hover {
|
|
background: #E6E8EB;
|
|
|
|
.tjdb-menu-icon {
|
|
display: block;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.table-header-dark:hover {
|
|
|
|
.tjdb-menu-icon {
|
|
display: block;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.table-header,
|
|
.table-cell {
|
|
max-width: 230px !important;
|
|
}
|
|
|
|
.table-cell {
|
|
padding: 0;
|
|
}
|
|
|
|
.add-more-columns-btn {
|
|
background: var(--indigo3);
|
|
font-weight: 500;
|
|
color: var(--indigo9);
|
|
font-size: 12px;
|
|
border-radius: 600;
|
|
}
|
|
|
|
.delete-row-btn {
|
|
max-width: 140px;
|
|
}
|
|
|
|
.tjdb-table-row {
|
|
height: 36px;
|
|
|
|
&:not(.table-row-selected):hover {
|
|
background: var(--Slate-02, #F8F9FA);
|
|
|
|
td:nth-child(1),
|
|
td:nth-child(2) {
|
|
background: var(--Slate-02, #F8F9FA);
|
|
}
|
|
|
|
.tjdb-checkbox-cell {
|
|
display: block !important;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.apploader {
|
|
height: 100vh;
|
|
|
|
.app-container {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.editor-header {
|
|
height: 5%;
|
|
background-color: #EEEEEE;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.app-title-skeleton {
|
|
width: 100px;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-left: 120px;
|
|
}
|
|
|
|
.right-buttons {
|
|
display: flex;
|
|
gap: 5px;
|
|
align-items: center;
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
|
|
.editor-body {
|
|
height: 100%;
|
|
}
|
|
|
|
.skeleton {
|
|
padding: 5px;
|
|
}
|
|
|
|
.editor-left-panel {
|
|
width: 48px;
|
|
background-color: #EEEEEE;
|
|
margin: 3px 0px 3px 3px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
border-radius: 5px;
|
|
|
|
.left-menu-items {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
gap: 5px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.bottom-items {
|
|
margin-bottom: 10px;
|
|
}
|
|
}
|
|
|
|
.editor-center {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 5px;
|
|
justify-content: space-between;
|
|
|
|
.canvas {
|
|
height: 100vh;
|
|
background-color: var(--base);
|
|
border-radius: 5px;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.query-panel {
|
|
height: 30%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 5px;
|
|
|
|
.queries {
|
|
width: 30%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 5px;
|
|
|
|
.queries-title {
|
|
background-color: #EEEEEE;
|
|
border-radius: 5px;
|
|
height: 20%;
|
|
padding: 5px 10px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.query-list {
|
|
background-color: #EEEEEE;
|
|
border-radius: 5px;
|
|
height: 80%;
|
|
|
|
.query-list-item {
|
|
margin: 10px;
|
|
height: 35px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.query-editor {
|
|
width: 70%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 5px;
|
|
|
|
.query-editor-header {
|
|
background-color: #EEEEEE;
|
|
border-radius: 5px;
|
|
height: 20%;
|
|
padding: 5px 10px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.query-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
.query-editor-body {
|
|
background-color: #EEEEEE;
|
|
height: 80%;
|
|
border-radius: 5px;
|
|
|
|
.button {
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.wrapper {
|
|
padding: 3px 3px 3px 0px;
|
|
}
|
|
|
|
|
|
.right-bar {
|
|
height: 100%;
|
|
padding: 3px 3px 3px 0px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
gap: 5px;
|
|
|
|
.widget-list-header {
|
|
height: 5%;
|
|
background-color: #EEEEEE;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.widget-list {
|
|
height: 95%;
|
|
background-color: #EEEEEE;
|
|
border-radius: 5px;
|
|
padding: 10px;
|
|
|
|
.widgets {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.subheader {
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.theme-dark {
|
|
.layout-sidebar-icon {
|
|
&:hover {
|
|
background-color: #273342;
|
|
}
|
|
}
|
|
|
|
.tooljet-database {
|
|
|
|
.table-name,
|
|
.subheader {
|
|
color: var(--slate9);
|
|
}
|
|
|
|
.list-group-item.active {
|
|
.table-name {
|
|
color: #000;
|
|
}
|
|
}
|
|
}
|
|
|
|
.editor-header {
|
|
background-color: #1F2936;
|
|
}
|
|
|
|
.editor-left-panel {
|
|
background-color: #1F2936;
|
|
}
|
|
|
|
|
|
.query-panel {
|
|
.queries {
|
|
.queries-title {
|
|
background-color: #1F2936 !important;
|
|
}
|
|
|
|
.query-list {
|
|
background-color: #1F2936 !important;
|
|
}
|
|
}
|
|
|
|
.query-editor {
|
|
.query-editor-header {
|
|
background-color: #1F2936 !important;
|
|
}
|
|
|
|
.query-editor-body {
|
|
background-color: #1F2936 !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.right-bar {
|
|
.widget-list-header {
|
|
background-color: #1F2936;
|
|
}
|
|
|
|
.widget-list {
|
|
background-color: #1F2936;
|
|
}
|
|
}
|
|
}
|
|
|
|
:root {
|
|
--tblr-breadcrumb-item-active-font-weight: 500;
|
|
--tblr-breadcrumb-item-active-color: inherit;
|
|
}
|
|
|
|
.application-brand {
|
|
a {
|
|
height: 48px;
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
.breadcrumb-item.active {
|
|
font-weight: var(--tblr-breadcrumb-item-active-font-weight);
|
|
color: var(--tblr-breadcrumb-item-active-color);
|
|
}
|
|
|
|
.app-icon-main {
|
|
background: var(--indigo3) !important;
|
|
border-radius: 6px !important;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 48px;
|
|
height: 48px;
|
|
}
|
|
|
|
.settings-nav-item,
|
|
.audit-log-nav-item,
|
|
.notification-center-nav-item {
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.settings-nav-item {
|
|
height: 32px;
|
|
width: 32px;
|
|
|
|
&.active {
|
|
background-color: var(--indigo4);
|
|
}
|
|
}
|
|
|
|
.audit-log-nav-item {
|
|
bottom: 40px;
|
|
}
|
|
|
|
.workspace-content-wrapper {
|
|
overflow-x: auto;
|
|
overflow-y: auto;
|
|
padding-left: 20px;
|
|
}
|
|
|
|
.workspace-content-wrapper,
|
|
.database-page-content-wrap {
|
|
background-color: var(--page-default);
|
|
height: calc(100vh - 64px) !important;
|
|
}
|
|
|
|
.instance-settings-wrapper {}
|
|
|
|
.database-page-content-wrap {
|
|
height: calc(100vh - 64px) !important;
|
|
}
|
|
|
|
.audit-logs-nav-item {
|
|
position: fixed;
|
|
bottom: 100px;
|
|
left: 8px;
|
|
}
|
|
|
|
.home-page-sidebar,
|
|
.workspace-variable-table-card,
|
|
.org-wrapper {
|
|
margin: 0 auto;
|
|
width: 880px;
|
|
}
|
|
|
|
.organization-page-sidebar {
|
|
height: calc(100vh - 64px);
|
|
max-width: 288px;
|
|
background-color: var(--page-default);
|
|
border-right: 1px solid var(--slate5) !important;
|
|
display: grid !important;
|
|
grid-template-rows: auto 1fr auto !important;
|
|
position: relative;
|
|
|
|
.trial-banner {
|
|
position: absolute;
|
|
bottom: 50px;
|
|
max-height: 130px;
|
|
min-width: 255px;
|
|
|
|
svg {
|
|
width: 48px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.marketplace-page-sidebar {
|
|
height: calc(100vh - 64px);
|
|
max-width: 272px;
|
|
background-color: var(--page-default);
|
|
border-right: 1px solid var(--slate5) !important;
|
|
display: grid !important;
|
|
grid-template-rows: auto 1fr auto !important;
|
|
position: fixed;
|
|
}
|
|
|
|
.home-page-sidebar {
|
|
max-width: 288px;
|
|
background-color: var(--page-default);
|
|
border-right: 1px solid var(--slate5);
|
|
display: grid;
|
|
grid-template-rows: auto 1fr auto;
|
|
|
|
@media only screen and (max-width: 767px) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.empty-home-page-image {
|
|
margin-top: 14px;
|
|
}
|
|
|
|
.create-new-table-btn {
|
|
width: 248px;
|
|
|
|
button {
|
|
height: 40px !important;
|
|
|
|
}
|
|
}
|
|
|
|
.tooljet-database-sidebar {
|
|
max-width: 288px;
|
|
background: var(--page-default);
|
|
border-right: 1px solid var(--slate5);
|
|
height: calc(100vh - 64px) !important;
|
|
|
|
|
|
.sidebar-container {
|
|
height: 40px !important;
|
|
padding-top: 4px !important;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.sidebar-container-with-banner {
|
|
height: 40px !important;
|
|
padding-top: 1px !important;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
.create-new-app-dropdown {
|
|
width: 248px !important;
|
|
|
|
|
|
.dropdown-toggle-split {
|
|
border-left: 1px solid var(--indigo11) !important;
|
|
|
|
&:disabled {
|
|
background-color: var(--slate6) !important;
|
|
border-left: 1px solid var(--slate6) !important;
|
|
}
|
|
}
|
|
|
|
button {
|
|
background-color: var(--indigo9) !important;
|
|
}
|
|
}
|
|
|
|
.create-new-app-button {
|
|
font-weight: 500;
|
|
font-size: 14px;
|
|
height: 40px;
|
|
border-top-left-radius: 6px;
|
|
border-bottom-left-radius: 6px;
|
|
|
|
&:disabled {
|
|
background-color: var(--slate6) !important;
|
|
color: var(--slate9) !important;
|
|
}
|
|
}
|
|
|
|
.create-new-app-button+.dropdown-toggle {
|
|
height: 40px;
|
|
border-top-right-radius: 6px;
|
|
border-bottom-right-radius: 6px;
|
|
}
|
|
|
|
.custom-select {
|
|
.select-search-dark__value::after {
|
|
content: none;
|
|
}
|
|
|
|
.select-search-dark__select,
|
|
.select-search__select {
|
|
min-width: fit-content;
|
|
max-width: 100% !important;
|
|
}
|
|
}
|
|
|
|
.jet-data-table td .textarea-dark-theme.text-container:focus {
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
.app-environment-menu {
|
|
display: flex;
|
|
align-items: center;
|
|
min-width: 170px;
|
|
max-width: 180px;
|
|
height: 28px;
|
|
font-size: 12px;
|
|
margin-left: 1rem;
|
|
|
|
@media screen and (max-width: 767px) {
|
|
margin-left: 0 !important;
|
|
width: 100%;
|
|
max-width: unset !important;
|
|
}
|
|
|
|
.app-environment-list-item {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.app-environment-name {
|
|
font-weight: 400;
|
|
font-size: 12px;
|
|
line-height: 20px;
|
|
}
|
|
}
|
|
|
|
.tooljet-logo-loader {
|
|
height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.loader-spinner {
|
|
margin: 10px 87px;
|
|
}
|
|
}
|
|
|
|
.page-body {
|
|
height: calc(100vh - 1.25rem - 48px);
|
|
min-height: 500px;
|
|
}
|
|
|
|
// buttons
|
|
.default-secondary-button {
|
|
background-color: $color-light-indigo-03;
|
|
color: $color-light-indigo-09;
|
|
max-height: 28px;
|
|
width: 76px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 4px 16px;
|
|
gap: 6px;
|
|
font-weight: 500;
|
|
border: 0 !important;
|
|
|
|
.query-manager-btn-svg-wrapper {
|
|
width: 16px !important;
|
|
height: 16px !important;
|
|
padding: 2.67px;
|
|
}
|
|
|
|
.query-manager-btn-name {
|
|
min-width: 22px;
|
|
}
|
|
|
|
&:hover {
|
|
background-color: $color-light-indigo-04;
|
|
color: $color-light-indigo-10;
|
|
}
|
|
|
|
&:active {
|
|
background-color: $color-light-indigo-04;
|
|
color: $color-light-indigo-10;
|
|
box-shadow: 0px 0px 0px 4px #C6D4F9;
|
|
border-radius: 6px;
|
|
border: 1px solid;
|
|
outline: 0 !important;
|
|
|
|
svg {
|
|
path {
|
|
fill: $color-light-indigo-10;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:disabled {
|
|
cursor: not-allowed;
|
|
pointer-events: none;
|
|
opacity: .65;
|
|
}
|
|
|
|
.query-run-svg {
|
|
padding: 4px 2.67px;
|
|
}
|
|
}
|
|
|
|
.default-secondary-button.theme-dark {
|
|
background-color: #4D72FA !important;
|
|
color: #F4F6FA !important;
|
|
|
|
svg {
|
|
path {
|
|
fill: #F4F6FA !important;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
border: 1px solid #4D72FA !important;
|
|
background-color: #4D5EF0 !important;
|
|
color: #FFFFFC !important;
|
|
|
|
svg {
|
|
path {
|
|
fill: #FFFFFC !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:active {
|
|
border: 1px solid #4D72FA !important;
|
|
background-color: #4D5EF0 !important;
|
|
box-shadow: 0px 0px 0px 4px #4D72FA;
|
|
border-radius: 6px;
|
|
}
|
|
}
|
|
|
|
.default-tertiary-button {
|
|
background-color: $color-light-base;
|
|
color: $color-light-slate-12;
|
|
border: 1px solid $color-light-slate-07;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 4px 16px;
|
|
gap: 6px;
|
|
max-height: 28px;
|
|
font-weight: 500;
|
|
height: 28px;
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
|
|
.query-btn-svg-wrapper {
|
|
width: 16px !important;
|
|
height: 16px !important;
|
|
padding: 2.67px;
|
|
}
|
|
|
|
.query-btn-name {
|
|
min-width: 22px;
|
|
|
|
}
|
|
|
|
&:hover {
|
|
border: 1px solid $color-light-slate-08;
|
|
color: $color-light-slate-11;
|
|
|
|
svg {
|
|
path {
|
|
fill: $color-light-slate-11;
|
|
}
|
|
}
|
|
}
|
|
|
|
.query-create-run-svg {
|
|
padding: 2px;
|
|
}
|
|
|
|
.query-preview-svg {
|
|
padding: 2.67px 0.067px;
|
|
width: 16px;
|
|
height: 16px;
|
|
margin: 6px 0;
|
|
}
|
|
|
|
&:active {
|
|
border: 1px solid #C1C8CD;
|
|
box-shadow: 0px 0px 0px 4px #DFE3E6;
|
|
color: $color-light-slate-11;
|
|
outline: 0;
|
|
}
|
|
}
|
|
|
|
.default-tertiary-button.theme-dark {
|
|
background-color: transparent;
|
|
color: #4D5EF0 !important;
|
|
border: 1px solid #4D5EF0 !important;
|
|
|
|
svg {
|
|
path {
|
|
fill: #4D5EF0 !important;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
border: 1px solid $color-dark-slate-08;
|
|
color: #FFFFFC !important;
|
|
background-color: #4D5EF0 !important;
|
|
|
|
svg {
|
|
path {
|
|
fill: #FFFFFC !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:active {
|
|
border: 1px solid inherit;
|
|
box-shadow: none;
|
|
outline: 0;
|
|
}
|
|
}
|
|
|
|
.default-tertiary-button.theme-dark.btn-loading {
|
|
background-color: #4D5EF0 !important;
|
|
color: transparent !important;
|
|
|
|
svg {
|
|
path {
|
|
fill: transparent !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.default-tertiary-button.button-loading {
|
|
background-color: transparent !important;
|
|
color: transparent !important;
|
|
|
|
svg {
|
|
path {
|
|
fill: transparent !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.disable-tertiary-button {
|
|
color: $color-light-slate-08;
|
|
background-color: $color-light-slate-03;
|
|
pointer-events: none !important;
|
|
|
|
svg {
|
|
path {
|
|
fill: $color-light-slate-08;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.disable-tertiary-button.theme-dark {
|
|
color: $color-dark-slate-08;
|
|
background-color: $color-dark-slate-03;
|
|
pointer-events: none !important;
|
|
|
|
svg {
|
|
path {
|
|
fill: $color-dark-slate-08;
|
|
}
|
|
}
|
|
}
|
|
|
|
.query-manager-btn-shortcut {
|
|
color: var(--text-disabled) !important;
|
|
}
|
|
|
|
.font-weight-500 {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.font-size-12 {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.toggle-query-editor-svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
padding: 2.88px 5.22px;
|
|
display: flex;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.theme-dark {
|
|
.org-avatar:hover {
|
|
.avatar {
|
|
background: #10141A no-repeat center/cover;
|
|
}
|
|
}
|
|
}
|
|
|
|
.app-creation-time {
|
|
color: var(--slate11) !important;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.font-weight-400 {
|
|
font-weight: 400;
|
|
}
|
|
|
|
.font-weight-600 {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.border-indigo-09 {
|
|
border: 1px solid $color-light-indigo-09;
|
|
}
|
|
|
|
.dark-theme-toggle-btn {
|
|
height: 32px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
}
|
|
|
|
.dark-theme-toggle-btn-text {
|
|
font-size: 14px;
|
|
margin: 12px;
|
|
}
|
|
|
|
.maximum-canvas-height-input-field {
|
|
width: 156px;
|
|
height: 32px;
|
|
padding: 6px 10px;
|
|
gap: 17px;
|
|
background: #FFFFFF;
|
|
border: 1px solid #D7DBDF;
|
|
border-radius: 6px;
|
|
|
|
}
|
|
|
|
.layout-header {
|
|
position: fixed;
|
|
right: 0;
|
|
left: 48px;
|
|
z-index: 1;
|
|
background: var(--base);
|
|
height: 64px;
|
|
|
|
@media only screen and (max-width: 767px) {
|
|
border-bottom: 1px solid var(--slate5);
|
|
|
|
.row {
|
|
display: flex;
|
|
|
|
.tj-dashboard-section-header {
|
|
width: unset;
|
|
border-right: none;
|
|
}
|
|
|
|
.app-header-label {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.layout-sidebar-icon {
|
|
&:hover {
|
|
background: #ECEEF0;
|
|
}
|
|
|
|
&:focus {
|
|
outline: #ECEEF0 auto 5px;
|
|
background: #3756C5;
|
|
box-shadow: none;
|
|
}
|
|
|
|
&:disabled,
|
|
&[disabled] {
|
|
background: linear-gradient(0deg, #F3F4F6, #F3F4F6);
|
|
box-shadow: none;
|
|
color: #D1D5DB;
|
|
}
|
|
}
|
|
|
|
.tj-text-input-error-state {
|
|
font-weight: 400;
|
|
font-size: 11px;
|
|
line-height: 16px;
|
|
margin-top: 2px !important;
|
|
color: #EB1414;
|
|
}
|
|
|
|
.input-error {
|
|
border: 1px solid #EB1414;
|
|
}
|
|
|
|
.onboarding-radio-checked {
|
|
border: 1px solid #466BF2 !important;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.onboarding-bubbles {
|
|
width: 8px !important;
|
|
height: 8px !important;
|
|
background: #D1D5DB !important;
|
|
margin-right: 8px;
|
|
border-radius: 100%;
|
|
}
|
|
|
|
.onboarding-bubbles-selected {
|
|
width: 8px !important;
|
|
height: 8px !important;
|
|
background: #466BF2 !important;
|
|
margin-right: 8px;
|
|
border-radius: 100%;
|
|
}
|
|
|
|
.onboarding-bubbles-active {
|
|
background: #466BF2 !important;
|
|
width: 16px !important;
|
|
height: 16px !important;
|
|
margin-right: 8px;
|
|
border-radius: 100%;
|
|
}
|
|
|
|
.onboarding-bubbles-completed {
|
|
background: #D1D5DB;
|
|
}
|
|
|
|
.onboarding-bubbles-wrapper {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
|
|
.onboarding-progress-cloud {
|
|
margin-bottom: 32px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.onboarding-progress {
|
|
margin-bottom: 32px;
|
|
display: grid;
|
|
}
|
|
|
|
.onboarding-progress-layout-cloud {
|
|
grid-template-columns: 3fr 6fr 3fr;
|
|
margin-bottom: 40px;
|
|
display: grid;
|
|
}
|
|
|
|
.onboarding-progress-layout {
|
|
grid-template-columns: 12fr;
|
|
margin-bottom: 40px;
|
|
display: grid;
|
|
}
|
|
|
|
.onboarding-bubbles-container {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.onboarding-header-wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.onboarding-back-button,
|
|
.onboarding-front-button {
|
|
|
|
font-size: 12px;
|
|
line-height: 20px;
|
|
color: #6B7380;
|
|
display: flex !important;
|
|
flex-direction: row !important;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
|
|
.onboarding-back-text {
|
|
margin-left: 12px;
|
|
color: #D7DBDF;
|
|
}
|
|
|
|
p,
|
|
.onboarding-skip-text {
|
|
margin-bottom: 0 !important;
|
|
color: #D7DBDF;
|
|
font-weight: 600;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.onboarding-skip-text {
|
|
margin-right: 12px !important;
|
|
}
|
|
}
|
|
|
|
|
|
.info-screen-description {
|
|
margin-bottom: 0px !important;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-size: 14px;
|
|
line-height: 24px;
|
|
color: #4B5563;
|
|
line-height: 24px;
|
|
}
|
|
|
|
.separator-onboarding,
|
|
.separator-signup {
|
|
.separator {
|
|
width: 100%;
|
|
|
|
h2 {
|
|
width: 100%;
|
|
text-align: center;
|
|
border-bottom: 1px solid #E4E7EB;
|
|
line-height: 0.1em;
|
|
font-size: 14px;
|
|
margin: 26px 0 26px;
|
|
}
|
|
|
|
h2 span {
|
|
color: #9BA3AF;
|
|
background: #fff;
|
|
padding: 0 18px;
|
|
}
|
|
}
|
|
}
|
|
|
|
// login ,signin
|
|
.separator-signup {
|
|
.separator {
|
|
width: 100%;
|
|
|
|
h2 {
|
|
margin: 36px 0 36px !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.common-auth-section-whole-wrapper {
|
|
display: flex;
|
|
flex-direction: row;
|
|
|
|
.common-auth-section-right-wrapper {
|
|
width: 29.16%;
|
|
border-left: 1px solid #E4E7EB;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.common-auth-section-left-wrapper {
|
|
width: 70.83%;
|
|
position: relative;
|
|
|
|
.common-auth-section-left-wrapper-grid {
|
|
display: grid;
|
|
height: calc(100% - 64px);
|
|
|
|
form {
|
|
display: flex !important;
|
|
justify-content: center;
|
|
align-items: center !important;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.common-auth-container-wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
width: 352px;
|
|
margin: 0px auto 0px auto;
|
|
}
|
|
|
|
.login-sso-wrapper {
|
|
padding: 6px 16px;
|
|
gap: 5px;
|
|
width: 352px;
|
|
height: 40px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-bottom: 12px;
|
|
background: #FFFFFF;
|
|
border: 1px solid #D1D5DB;
|
|
border-radius: 4px;
|
|
|
|
&:hover {
|
|
border: 1px solid #D1D5DB;
|
|
box-shadow: 0px 0px 0px 4px #E4E7EB;
|
|
}
|
|
}
|
|
}
|
|
|
|
.sso-info-text {
|
|
font-weight: 600;
|
|
font-size: 14px;
|
|
line-height: 24px;
|
|
margin-left: 11px;
|
|
}
|
|
|
|
.sso-button {
|
|
background-color: #fff;
|
|
cursor: pointer;
|
|
|
|
img {
|
|
width: 32px;
|
|
}
|
|
}
|
|
|
|
|
|
.tj-dashboard-section-header {
|
|
background-color: var(--page-default);
|
|
max-width: 288px;
|
|
max-height: 64px;
|
|
padding-top: 20px;
|
|
padding-left: 20px;
|
|
padding-bottom: 24px;
|
|
border-right: 1px solid var(--slate5);
|
|
|
|
&[data-name="Audit logs"],
|
|
&[data-name="Workspace constants"],
|
|
&[data-name="Profile settings"] {
|
|
border-right: none;
|
|
border-bottom: 1px solid var(--slate5);
|
|
|
|
.paid-feature-banner {
|
|
margin-left: 15px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.layout-sidebar-icon {
|
|
&:hover {
|
|
background: #ECEEF0;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
&:focus {
|
|
outline: #ECEEF0 auto 5px;
|
|
}
|
|
}
|
|
|
|
.folder-menu-icon {
|
|
visibility: hidden !important;
|
|
}
|
|
|
|
.folder-list-group-item:hover .folder-menu-icon {
|
|
visibility: visible !important;
|
|
}
|
|
|
|
.folder-list-group-item {
|
|
&:hover {
|
|
background: #ECEEF0;
|
|
}
|
|
|
|
&:active {
|
|
background: var(--indigo4);
|
|
}
|
|
|
|
&:focus {
|
|
box-shadow: 0px 0px 0px 4px #DFE3E6;
|
|
}
|
|
|
|
.tj-text-xsm {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.tj-folder-list {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
|
|
.app-versions-selector {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
width: 176px;
|
|
height: 28px;
|
|
border-radius: 6px;
|
|
|
|
.react-select__control {
|
|
background-color: var(--page-default);
|
|
border: none !important;
|
|
}
|
|
|
|
@media screen and (max-width: 767px) {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.app-version-list-item {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.app-version-name,
|
|
.app-version-released {
|
|
font-weight: 400;
|
|
font-size: 12px;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.app-version-name {
|
|
max-width: 80px;
|
|
}
|
|
|
|
.custom-version-selector__option:hover .app-version-delete {
|
|
display: block;
|
|
}
|
|
|
|
.editor .navbar-brand {
|
|
border-right: 1px solid var(--slate5);
|
|
width: 48px;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
|
|
.modal-backdrop {
|
|
opacity: 0.5;
|
|
z-index: 1060;
|
|
}
|
|
|
|
.canvas-area>.modal-backdrop {
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
}
|
|
|
|
.ds-delete-btn {
|
|
display: none;
|
|
border: none;
|
|
background: none;
|
|
}
|
|
|
|
.ds-list-item:hover .ds-delete-btn {
|
|
display: block;
|
|
}
|
|
|
|
.toojet-db-table-footer,
|
|
.toojet-db-table-footer-collapse,
|
|
.home-page-footer {
|
|
position: fixed;
|
|
bottom: 0px;
|
|
}
|
|
|
|
.home-page-footer {
|
|
height: 52px;
|
|
background-color: var(--page-default) !important;
|
|
border-top: 1px solid var(--slate5) !important;
|
|
width: calc(100% - 336px) !important;
|
|
|
|
@media only screen and (max-width: 768px) {
|
|
position: unset;
|
|
width: 100%;
|
|
|
|
.col-4,
|
|
.col-5 {
|
|
display: none;
|
|
}
|
|
|
|
.pagination-container {
|
|
display: flex !important;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
.pagination-container {
|
|
display: flex;
|
|
padding: 0px;
|
|
height: 20px !important;
|
|
|
|
.form-control {
|
|
padding: 0 4px;
|
|
width: fit-content;
|
|
width: 30px !important;
|
|
height: 20px !important;
|
|
margin-bottom: 0px !important;
|
|
text-align: center;
|
|
}
|
|
|
|
.form-control-pagination {
|
|
padding: 0 4px;
|
|
width: fit-content;
|
|
width: 30px !important;
|
|
height: 20px !important;
|
|
text-align: center;
|
|
margin-bottom: 0px;
|
|
gap: 16px !important;
|
|
background: var(--base) !important;
|
|
border: 1px solid var(--slate7) !important;
|
|
border-radius: 6px;
|
|
color: var(--slate12) !important;
|
|
transition: none;
|
|
padding-left: 0.4375rem;
|
|
padding-right: 0.4375rem;
|
|
padding-top: 0.75rem;
|
|
padding-bottom: 0.75rem;
|
|
overflow-x: auto;
|
|
white-space: nowrap;
|
|
|
|
|
|
&:hover {
|
|
background: var(--slate1) !important;
|
|
border: 1px solid var(--slate8) !important;
|
|
-webkit-box-shadow: none !important;
|
|
box-shadow: none !important;
|
|
outline: none;
|
|
}
|
|
|
|
&:focus-visible {
|
|
background: var(--indigo2) !important;
|
|
border: 1px solid var(--indigo9) !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
&.input-error-border {
|
|
border-color: #DB4324 !important;
|
|
}
|
|
|
|
&:-webkit-autofill {
|
|
box-shadow: 0 0 0 1000px var(--base) inset !important;
|
|
-webkit-text-fill-color: var(--slate12) !important;
|
|
|
|
&:hover {
|
|
box-shadow: 0 0 0 1000px var(--slate1) inset !important;
|
|
-webkit-text-fill-color: var(--slate12) !important;
|
|
}
|
|
|
|
&:focus-visible {
|
|
box-shadow: 0 0 0 1000px var(--indigo2) inset !important;
|
|
-webkit-text-fill-color: var(--slate12) !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 768px) {
|
|
.unstyled-button {
|
|
height: unset;
|
|
width: unset;
|
|
|
|
img {
|
|
width: 20px;
|
|
height: 20px;
|
|
margin-left: 0px !important;
|
|
margin-right: 0px !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.settings-card {
|
|
box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
|
|
border-radius: 6px;
|
|
margin-left: 10px;
|
|
background-color: var(--base);
|
|
min-width: 170px;
|
|
z-index: 3;
|
|
|
|
.dropdown-item {
|
|
padding: 8px;
|
|
height: 36px;
|
|
min-width: 84px !important;
|
|
}
|
|
|
|
svg {
|
|
margin-left: 2px;
|
|
}
|
|
|
|
a {
|
|
span {
|
|
margin-left: 4px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.logo-nav-card {
|
|
transform: translate(5px, 50px) !important;
|
|
z-index: 101;
|
|
}
|
|
|
|
.theme-dark {
|
|
.editor-header-actions {
|
|
.current-layout {
|
|
.bg-white {
|
|
background-color: #151718 !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.icon-tabler-x {
|
|
stroke: white;
|
|
}
|
|
}
|
|
|
|
.img-invert {
|
|
img {
|
|
filter: invert(1);
|
|
}
|
|
}
|
|
|
|
.user-group-table {
|
|
.selected-row {
|
|
background-color: #ECEEF0;
|
|
}
|
|
|
|
.selected-row.dark {
|
|
background-color: #232E3C;
|
|
}
|
|
}
|
|
|
|
.notification-center.theme-dark {
|
|
|
|
.empty-subtitle,
|
|
.card-footer>span,
|
|
.empty-title {
|
|
color: white !important;
|
|
}
|
|
}
|
|
|
|
|
|
// DASHBOARD SCROLL STYLES--->
|
|
.create-new-app-license-wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.create-new-app-wrapper {
|
|
margin: 0 auto;
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding-top: 4px;
|
|
}
|
|
|
|
.home-page-sidebar {
|
|
height: calc(100vh - 64px) !important; //64 is navbar height
|
|
|
|
.folder-list-user {
|
|
height: calc(100vh - 116px) !important; //64 is navbar height + 52 px footer
|
|
}
|
|
}
|
|
|
|
.home-page-content {
|
|
background-color: var(--page-default);
|
|
height: calc(100vh - 64px) !important;
|
|
overflow-y: auto;
|
|
position: relative;
|
|
|
|
.filter-container {
|
|
display: none;
|
|
}
|
|
|
|
.org-selector-mobile {
|
|
display: none;
|
|
}
|
|
|
|
@media only screen and (max-width: 768px) {
|
|
.filter-container {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin: 2rem 1rem;
|
|
}
|
|
|
|
.footer-container {
|
|
position: absolute;
|
|
width: 100%;
|
|
bottom: 0px;
|
|
right: unset;
|
|
left: unset;
|
|
|
|
.org-selector-mobile {
|
|
display: block;
|
|
background-color: var(--slate1);
|
|
|
|
.tj-org-select {
|
|
width: 100%;
|
|
padding: 0px 10px;
|
|
|
|
.react-select__control {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.application-folders-list {
|
|
height: 64px;
|
|
}
|
|
|
|
// DASHBOARD STYLES END
|
|
|
|
// TABLE
|
|
.table-left-sidebar {
|
|
height: calc(100vh - 104px) !important; // 62px [navbar] + 40px [ add table and search ] + extra 2 px(border)
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.toojet-db-table-footer {
|
|
height: 52px;
|
|
background: var(--page-default) !important;
|
|
width: calc(100vw - 336px);
|
|
}
|
|
|
|
.toojet-db-table-footer-collapse {
|
|
height: 52px;
|
|
background: var(--page-default) !important;
|
|
width: calc(100vw - 48px);
|
|
}
|
|
|
|
.toojet-db-table-footer-collapse {
|
|
height: 52px;
|
|
background: var(--page-default) !important;
|
|
width: calc(100vw - 48px);
|
|
}
|
|
|
|
.home-app-card-header {
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.homepage-app-card {
|
|
height: 166px;
|
|
outline: 1px solid var(--slate3);
|
|
box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
|
|
border-radius: 6px;
|
|
padding: 16px;
|
|
background-color: var(--base) !important;
|
|
|
|
.appcard-buttons-wrap {
|
|
display: none;
|
|
}
|
|
|
|
.home-app-card-header {
|
|
.menu-ico {
|
|
visibility: hidden !important;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
|
|
|
|
.home-app-card-header {
|
|
margin-bottom: 12px;
|
|
|
|
.menu-ico {
|
|
visibility: visible !important;
|
|
}
|
|
}
|
|
|
|
.app-creation-time-container {
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
.app-card-name {
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
.app-creation-time {
|
|
display: none;
|
|
}
|
|
|
|
|
|
.appcard-buttons-wrap {
|
|
display: flex;
|
|
padding: 0px;
|
|
gap: 12px;
|
|
width: 240px;
|
|
height: 28px;
|
|
flex-direction: row;
|
|
|
|
div {
|
|
a {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.app-icon-main {
|
|
width: 36px;
|
|
height: 36px;
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
.app-creation-time-container {
|
|
height: 16px;
|
|
}
|
|
|
|
.release-buttons {
|
|
height: 48px;
|
|
gap: 4px;
|
|
}
|
|
|
|
.global-settings-app-wrapper {
|
|
max-width: 190px;
|
|
}
|
|
|
|
.version-manager-container {
|
|
padding: 0.6rem;
|
|
|
|
@media screen and (max-width: 767px) {
|
|
padding: 0 !important;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.git-sync-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
background: var(--indigo3);
|
|
border-radius: 6px;
|
|
width: 36px;
|
|
height: 36px;
|
|
margin: auto 5px;
|
|
}
|
|
|
|
.git-sync-btn.disabled-action-tooltip {
|
|
opacity: 1;
|
|
background: var(--slate3);
|
|
|
|
.license-tooltip {
|
|
opacity: 1;
|
|
}
|
|
|
|
|
|
rect {
|
|
fill: var(--slate3);
|
|
}
|
|
|
|
svg {
|
|
path {
|
|
fill: var(--slate8);
|
|
}
|
|
}
|
|
}
|
|
|
|
.env-version-container {
|
|
padding-right: 100px;
|
|
}
|
|
|
|
// tooljet db fields styles [ query manager ]
|
|
.tj-db-field-wrapper {
|
|
.code-hinter-wrapper {
|
|
::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.CodeMirror-sizer {
|
|
min-height: 32px !important;
|
|
width: 100%;
|
|
border-right-width: 0px !important;
|
|
padding: 0 !important;
|
|
overflow-y: auto;
|
|
|
|
.CodeMirror-lines {
|
|
margin-top: 0px !important;
|
|
min-height: 32px !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.table-list-items#popover-contained {
|
|
.popover-body {
|
|
outline: 1px solid var(--slate3);
|
|
background: var(--base);
|
|
overflow: hidden;
|
|
}
|
|
|
|
}
|
|
|
|
.table-list-item-popover.dark {
|
|
svg {
|
|
path {
|
|
fill: white;
|
|
}
|
|
}
|
|
}
|
|
|
|
.react-loading-skeleton {
|
|
background-color: var(--interactive-default);
|
|
// background-image: linear-gradient(90deg, #2F3C4C, #2F3C4C, #2F3C4C) !important;
|
|
}
|
|
|
|
.theme-dark {
|
|
.audit-log {
|
|
.rdtPicker {
|
|
background-color: #2B394A;
|
|
color: #fff;
|
|
|
|
.rdtDay:hover {
|
|
background-color: #636466;
|
|
}
|
|
}
|
|
|
|
.card-body {
|
|
.count-main {
|
|
background-color: inherit !important;
|
|
color: #fff !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.react-loading-skeleton {
|
|
background-color: var(--interactive-default);
|
|
background-image: linear-gradient(90deg, #2F3C4C, #2F3C4C, #2F3C4C) !important;
|
|
}
|
|
|
|
.react-loading-skeleton::after {
|
|
background-image: linear-gradient(90deg, #2F3C4C, #3A4251, #2F3C4C) !important;
|
|
}
|
|
}
|
|
|
|
@keyframes up-and-down {
|
|
to {
|
|
opacity: 0.2;
|
|
transform: translateY(-20px);
|
|
|
|
}
|
|
}
|
|
|
|
.spin-loader {
|
|
position: fixed;
|
|
width: 100%;
|
|
|
|
.load {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.load div {
|
|
width: 20px;
|
|
height: 20px;
|
|
background-color: var(--indigo9);
|
|
border-radius: 50%;
|
|
margin: 0 5px;
|
|
animation-name: #{up-and-down};
|
|
animation-duration: 0.8s;
|
|
animation-iteration-count: infinite;
|
|
animation-direction: alternate;
|
|
}
|
|
|
|
.load .two {
|
|
animation-delay: 0.3s;
|
|
}
|
|
|
|
.load .three {
|
|
animation-delay: 0.6s;
|
|
}
|
|
}
|
|
|
|
.organization-switch-modal {
|
|
font-family: 'IBM Plex Sans';
|
|
|
|
.modal-dialog {
|
|
width: 376px;
|
|
}
|
|
|
|
.cursor-pointer {
|
|
margin-left: auto;
|
|
margin-right: 10px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.modal-content {
|
|
background: linear-gradient(0deg, #FFFFFF, #FFFFFF),
|
|
linear-gradient(0deg, #DFE3E6, #DFE3E6);
|
|
}
|
|
|
|
.modal-header {
|
|
padding: 10px 10px 20px 5px;
|
|
flex-direction: column;
|
|
|
|
.header-text {
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
font-size: 20px;
|
|
line-height: 36px;
|
|
margin: 24px 0 5px 0;
|
|
}
|
|
|
|
p {
|
|
margin: 15px 22px 0px 27px;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
color: #687076;
|
|
text-align: Center;
|
|
margin-bottom: 0px;
|
|
}
|
|
}
|
|
|
|
.modal-body {
|
|
max-height: 300px;
|
|
overflow: auto;
|
|
padding: 18px 32px;
|
|
|
|
.org-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
|
|
.org-item {
|
|
height: 50px;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0px 12px;
|
|
cursor: default;
|
|
|
|
input[type=radio] {
|
|
margin-right: 16px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
.avatar {
|
|
margin-right: 11px;
|
|
color: #11181C;
|
|
background-color: #F8FAFF;
|
|
width: 34px !important;
|
|
height: 34px !important;
|
|
}
|
|
|
|
span {
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-size: 12px;
|
|
line-height: 20px;
|
|
color: #11181C;
|
|
}
|
|
}
|
|
|
|
.selected-item {
|
|
border-radius: 6px;
|
|
background-color: #F0F4FF;
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal-footer {
|
|
justify-content: center;
|
|
padding: 24px 32px;
|
|
border-top: 1px solid #DFE3E6;
|
|
|
|
.switch-ws-btn {
|
|
&:disabled {
|
|
background-color: var(--slate3);
|
|
color: var(--slate11);
|
|
}
|
|
|
|
}
|
|
|
|
button {
|
|
width: 100%;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.organization-switch-modal.dark-mode {
|
|
|
|
.modal-footer,
|
|
.modal-header {
|
|
border-color: #232e3c !important;
|
|
|
|
p {
|
|
color: rgba(255, 255, 255, 0.5) !important;
|
|
}
|
|
}
|
|
|
|
.modal-body,
|
|
.modal-footer,
|
|
.modal-header,
|
|
.modal-content {
|
|
color: white;
|
|
background-color: #2b394a;
|
|
}
|
|
|
|
.modal-content {
|
|
border: none;
|
|
}
|
|
|
|
|
|
.modal-body {
|
|
.org-list {
|
|
span {
|
|
color: white;
|
|
}
|
|
|
|
.selected-item {
|
|
background-color: #232e3c;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.datasources-category {
|
|
color: var(--slate10);
|
|
}
|
|
|
|
.react-tooltip {
|
|
font-size: .765625rem !important;
|
|
}
|
|
|
|
.tooltip {
|
|
z-index: 10000;
|
|
}
|
|
|
|
.add-new-workspace-icon-wrap {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
padding: 8px;
|
|
width: 34px;
|
|
height: 34px;
|
|
background: var(--indigo3);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.add-new-workspace-icon-old-wrap {
|
|
display: none;
|
|
}
|
|
|
|
.add-workspace-button {
|
|
padding: 8px 12px;
|
|
gap: 11px;
|
|
height: 50px;
|
|
|
|
&:hover {
|
|
background: var(--indigo3);
|
|
margin: 0 auto;
|
|
border-radius: 6px;
|
|
padding-bottom: 10px;
|
|
|
|
.add-new-workspace-icon-old-wrap {
|
|
padding: 8px;
|
|
width: 34px;
|
|
height: 34px;
|
|
background: var(--indigo9);
|
|
border-radius: 6px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
}
|
|
|
|
.add-new-workspace-icon-wrap {
|
|
display: none;
|
|
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.tj-folder-list {
|
|
display: flex;
|
|
align-items: center;
|
|
color: var(—-slate12) !important;
|
|
}
|
|
|
|
|
|
|
|
.no-active-organization-modal {
|
|
font-family: 'IBM Plex Sans';
|
|
|
|
.modal-dialog {
|
|
width: 350px;
|
|
}
|
|
|
|
.cursor-pointer {
|
|
margin-left: auto;
|
|
margin-right: 10px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.modal-content {
|
|
background: linear-gradient(0deg, #FFFFFF, #FFFFFF),
|
|
linear-gradient(0deg, #DFE3E6, #DFE3E6);
|
|
}
|
|
|
|
.modal-header {
|
|
padding: 5px 10px 20px 5px;
|
|
flex-direction: column;
|
|
|
|
.header-text {
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
font-size: 20px;
|
|
line-height: 36px;
|
|
margin: 24px 0 5px 0;
|
|
}
|
|
|
|
p {
|
|
margin: 15px 22px 0px 27px;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
color: #687076;
|
|
text-align: Center;
|
|
margin-bottom: 0px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.no-active-organization-modal.dark-mode {
|
|
|
|
.modal-footer,
|
|
.modal-header {
|
|
border-color: #232e3c !important;
|
|
|
|
p {
|
|
color: rgba(255, 255, 255, 0.5) !important;
|
|
}
|
|
}
|
|
|
|
.modal-body,
|
|
.modal-footer,
|
|
.modal-header,
|
|
.modal-content {
|
|
color: white;
|
|
background-color: #2b394a;
|
|
}
|
|
|
|
.modal-content {
|
|
border: none;
|
|
}
|
|
}
|
|
|
|
.app-card-name {
|
|
color: var(—-slate12);
|
|
margin-bottom: 2px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.dashboard-breadcrumb-header {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.tj-version {
|
|
margin-right: 44px;
|
|
display: flex;
|
|
align-items: center;
|
|
color: var(--slate9);
|
|
|
|
}
|
|
|
|
.folder-list {
|
|
color: var(—-slate9) !important;
|
|
}
|
|
|
|
.tj-folder-header {
|
|
margin-bottom: 12px;
|
|
height: 37px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.tj-dashboard-header-title-wrap {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: var(--slate11);
|
|
|
|
.with-border {
|
|
border-bottom: 1px solid var(--slate5) !important;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
.theme-dark {
|
|
.tj-onboarding-phone-input-wrapper {
|
|
.flag-dropdown {
|
|
background-color: #1f2936 !important;
|
|
|
|
.country-list {
|
|
background-color: #1f2936 !important;
|
|
background: #1f2936;
|
|
|
|
li {
|
|
.country .highlight {
|
|
background-color: #3a3f42;
|
|
color: #000 !important;
|
|
|
|
div {
|
|
.country-name {
|
|
color: #6b6b6b !important;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
&:hover {
|
|
background-color: #2b2f31;
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.react-tel-input .country-list .country.highlight {
|
|
color: #6b6b6b;
|
|
}
|
|
}
|
|
|
|
.dashboard-breadcrumb-header-name {
|
|
font-weight: 500 !important;
|
|
color: var(—-slate12) !important;
|
|
}
|
|
|
|
.tj-dashboard-header-wrap {
|
|
background-color: var(--page-default);
|
|
padding-top: 22px;
|
|
padding-bottom: 22px;
|
|
padding-left: 40px;
|
|
height: 64px;
|
|
border-bottom: 1px solid var(--slate5);
|
|
|
|
@media only screen and (max-width: 768px) {
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
|
|
.dashboard-breadcrumb-header-name:hover {
|
|
text-decoration: none !important;
|
|
}
|
|
|
|
|
|
.tj-avatar {
|
|
border-radius: 6px;
|
|
width: 36px;
|
|
height: 36px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-color: var(--slate3) !important;
|
|
color: var(--slate11) !important;
|
|
text-transform: uppercase;
|
|
font-weight: 500;
|
|
|
|
&:hover {
|
|
background-color: var(--slate4);
|
|
}
|
|
|
|
&:focus {
|
|
box-shadow: 0px 0px 0px 4px var(--indigo6);
|
|
outline: 0;
|
|
}
|
|
|
|
&:active {
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
.tj-current-org {
|
|
span {
|
|
color: var(--slate12);
|
|
|
|
}
|
|
}
|
|
|
|
|
|
.sidebar-inner {
|
|
align-items: center;
|
|
}
|
|
|
|
.workspace-drawer-wrap {
|
|
background: var(--base);
|
|
}
|
|
|
|
.theme-dark {
|
|
.drawer-wrap {
|
|
background: var(--base);
|
|
}
|
|
}
|
|
|
|
.users-table {
|
|
background: var(--base);
|
|
padding: 16px;
|
|
width: 848px;
|
|
margin: 0 auto;
|
|
padding: 16px;
|
|
|
|
tbody {
|
|
tr {
|
|
td {
|
|
border-bottom-width: 0px !important;
|
|
display: flex;
|
|
align-items: center;
|
|
flex: 9%;
|
|
padding-left: 0px !important;
|
|
padding-right: 0px !important;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
|
|
&[data-name="status-header"] {
|
|
max-width: 160px !important;
|
|
}
|
|
|
|
&[data-name="name-header"] {
|
|
max-width: 220px !important;
|
|
}
|
|
|
|
&[data-name="meta-header"] {
|
|
max-width: 80px !important;
|
|
}
|
|
|
|
&[data-name="role-header"] {
|
|
max-width: 108px !important;
|
|
}
|
|
|
|
span,
|
|
a {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
max-width: 140px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
thead {
|
|
tr {
|
|
padding: 6px 0px 0px 6px;
|
|
gap: 8px;
|
|
width: 848px;
|
|
height: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
tr>th {
|
|
background: var(--base) !important;
|
|
border-bottom: none !important;
|
|
padding: 0 !important;
|
|
width: 230px;
|
|
|
|
&[data-name="name-header"] {
|
|
max-width: 210px !important;
|
|
}
|
|
|
|
&[data-name="meta-header"] {
|
|
width: 80px !important;
|
|
}
|
|
|
|
&[data-name="role-header"] {
|
|
width: 108px !important;
|
|
}
|
|
|
|
&[data-name="status-header"] {
|
|
width: 160px !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
tr {
|
|
background: var(--base);
|
|
height: 66px;
|
|
padding: 13px 6px;
|
|
border-bottom: 1px solid var(--slate7);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
}
|
|
|
|
tr>td {
|
|
border-bottom-width: 0px !important;
|
|
display: flex;
|
|
align-items: center;
|
|
flex: 9%;
|
|
padding-left: 0px !important;
|
|
padding-right: 0px !important;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
|
|
&[data-name="name-header"] {
|
|
max-width: 210px !important;
|
|
}
|
|
|
|
&[data-name="role-header"],
|
|
&[data-name="meta-header"] {
|
|
max-width: 88px !important;
|
|
}
|
|
|
|
&[data-name="status-header"] {
|
|
width: 160px !important;
|
|
}
|
|
}
|
|
|
|
.metadata {
|
|
padding: 20px;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.metadata.empty {
|
|
padding-left: 25px;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
.user-actions-button {
|
|
justify-content: flex-end !important;
|
|
flex: 0 0 auto !important;
|
|
}
|
|
|
|
.tj-input {
|
|
padding: 6px 10px;
|
|
gap: 17px;
|
|
width: 161.25px;
|
|
height: 32px;
|
|
background: var(--base);
|
|
border: 1px solid var(--slate7);
|
|
border-radius: 6px;
|
|
|
|
::placeholder {
|
|
color: var(--slate9) !important;
|
|
}
|
|
|
|
}
|
|
|
|
.workspace-setting-buttons-wrap {
|
|
display: flex;
|
|
gap: 12px;
|
|
}
|
|
|
|
.workspace-settings-table-wrap {
|
|
max-width: 880px;
|
|
margin: 0 auto;
|
|
|
|
.tj-user-table-wrapper {
|
|
padding-right: 4px;
|
|
}
|
|
|
|
&:hover {
|
|
.tj-user-table-wrapper {
|
|
padding-right: 0px;
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
display: block;
|
|
width: 4px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: var(--base);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--slate7);
|
|
border-radius: 6px;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.manage-workspace-table-wrap {
|
|
max-width: 880px;
|
|
min-height: 595px;
|
|
border: 1px solid var(--slate5);
|
|
border-radius: 6px;
|
|
margin: 10px auto;
|
|
background-color: #FFFFFF;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.tab-spinner {
|
|
width: 200px;
|
|
height: 200px;
|
|
}
|
|
|
|
.pagination-container-box {
|
|
align-items: center;
|
|
justify-content: center;
|
|
display: flex;
|
|
padding-bottom: 15px;
|
|
margin-top: auto;
|
|
padding-top: 13px;
|
|
border-top: 1px solid var(--slate5) !important;
|
|
|
|
.pagination-container {
|
|
align-items: center;
|
|
justify-content: center;
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
.tab-content-ws {
|
|
height: 504px;
|
|
}
|
|
|
|
.worskspace-sub-header-wrap-nav-ws {
|
|
width: 100%;
|
|
height: 64px;
|
|
border-bottom: 1px solid var(--slate5);
|
|
display: flex;
|
|
|
|
.nav-link.active {
|
|
border-bottom: 2px solid var(--indigo9) !important;
|
|
border-color: var(--indigo9) !important;
|
|
|
|
}
|
|
|
|
.nav-item {
|
|
font-weight: 500 !important;
|
|
font-size: 12px !important;
|
|
padding: 6px 8px 6px 8px;
|
|
align-items: flex-end;
|
|
color: var(--slate11);
|
|
|
|
}
|
|
|
|
.nav-tabs {
|
|
border: none;
|
|
padding-left: 16px;
|
|
}
|
|
|
|
p {
|
|
width: 205px;
|
|
}
|
|
}
|
|
|
|
.workspace-search-bar {
|
|
display: flex;
|
|
justify-content: end;
|
|
align-items: center;
|
|
padding: 0;
|
|
padding: 6px 10px 6px 10px;
|
|
|
|
.ws-filter-search {
|
|
width: 300px;
|
|
height: 32px;
|
|
|
|
}
|
|
}
|
|
|
|
.worspace-list-table-body-header {
|
|
border-bottom: 1px solid var(--slate5);
|
|
display: flex;
|
|
height: 40px;
|
|
align-items: center;
|
|
|
|
p {
|
|
height: 5px;
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
color: var(--slate11);
|
|
|
|
}
|
|
|
|
p:first-child {
|
|
width: 285px !important;
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
|
|
.ws-list-table {
|
|
padding: 16px;
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
|
|
|
|
.loader-container {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 40vh;
|
|
/* Set the height of the container to the full viewport height */
|
|
|
|
.primary-spin-loader {
|
|
width: 100px;
|
|
height: 100px;
|
|
}
|
|
}
|
|
|
|
.ws-empty-icon {
|
|
height: 130px;
|
|
width: 400px;
|
|
margin: 100px auto;
|
|
display: flex;
|
|
|
|
p {
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.manage-workspace-table-wrap.dark-mode {
|
|
border: 1px solid var(--slate7) !important;
|
|
border-radius: 6px !important;
|
|
;
|
|
|
|
.worskspace-sub-header-wrap-nav-ws {
|
|
background-color: var(--slate3) !important;
|
|
border-bottom: 1px solid var(--slate7) !important;
|
|
|
|
}
|
|
|
|
.tab-content-ws {
|
|
background-color: var(--base) !important;
|
|
}
|
|
|
|
.pagination-container-box {
|
|
background-color: var(--base) !important;
|
|
}
|
|
|
|
.workspace-table-row {
|
|
border-bottom: 1px solid var(--slate7);
|
|
}
|
|
|
|
.worspace-list-table-body-header {
|
|
border-bottom: 1px solid var(--slate7);
|
|
}
|
|
|
|
}
|
|
|
|
.workspace-settings-filters {
|
|
display: flex;
|
|
gap: 12px;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
position: relative;
|
|
}
|
|
|
|
.workspace-setting-table-wrapper {
|
|
box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
|
|
outline: 1px solid var(--slate7);
|
|
background: var(--base);
|
|
width: 880px;
|
|
margin: 0 auto;
|
|
border-radius: 6px;
|
|
height: calc(100vh - 223px);
|
|
position: relative;
|
|
|
|
}
|
|
|
|
.workspace-filter-text {
|
|
color: var(--slate11);
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
.singleuser-btn {
|
|
padding: 6px 16px;
|
|
gap: 6px;
|
|
width: 152px;
|
|
height: 32px;
|
|
border-radius: 6px;
|
|
|
|
}
|
|
|
|
.multiuser-btn {
|
|
padding: 6px 16px;
|
|
gap: 6px;
|
|
width: 189px;
|
|
height: 32px;
|
|
border-radius: 6px;
|
|
|
|
}
|
|
|
|
.workspace-page-header {
|
|
width: 880px;
|
|
margin: 0 auto !important;
|
|
|
|
div:first-child {
|
|
margin: 10px auto !important;
|
|
width: 880px;
|
|
|
|
}
|
|
|
|
.user-limits {
|
|
column-gap: 8px;
|
|
|
|
.limit {
|
|
width: 100px !important;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 5px !important;
|
|
background-color: var(--base);
|
|
border-radius: 5px;
|
|
border: 1px solid var(--slate5);
|
|
font-size: 12px;
|
|
margin: 10px 0 10px 0;
|
|
|
|
.count {
|
|
font-weight: 500;
|
|
font-size: 14px;
|
|
}
|
|
|
|
div {
|
|
width: unset !important;
|
|
font-size: 11px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.header-table-flex {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.workspace-constant-header {
|
|
width: 880px;
|
|
margin: 0 auto !important;
|
|
}
|
|
|
|
.workspace-constant-header {
|
|
width: 880px;
|
|
margin: 0 auto !important;
|
|
}
|
|
|
|
.workspace-user-archive-btn {
|
|
width: 95px;
|
|
height: 28px;
|
|
}
|
|
|
|
.workspace-clear-filter {
|
|
margin-left: 8px;
|
|
color: var(--indigo9);
|
|
font-weight: 600 !important;
|
|
}
|
|
|
|
.workspace-clear-filter-wrap {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 130px;
|
|
justify-content: flex-end;
|
|
position: absolute;
|
|
right: 16px;
|
|
}
|
|
|
|
.tj-checkbox {
|
|
border-color: var(--slate7);
|
|
}
|
|
|
|
.workspace-clipboard-wrap {
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
|
|
p {
|
|
font-weight: 500 !important;
|
|
margin-left: 3px;
|
|
color: var(--slate11);
|
|
}
|
|
|
|
span {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
.workspace-user-status {
|
|
margin-right: 22px;
|
|
margin-left: 5px;
|
|
color: var(--slate12);
|
|
}
|
|
|
|
.worskpace-setting-table-gap {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.tj-active {
|
|
background: #46A758;
|
|
}
|
|
|
|
.tj-invited {
|
|
background: #FFB224;
|
|
}
|
|
|
|
.tj-archive {
|
|
background: #E54D2E;
|
|
}
|
|
|
|
.liner {
|
|
height: 1px;
|
|
background: var(--slate5);
|
|
width: 880px;
|
|
margin-top: 22px;
|
|
}
|
|
|
|
.edit-button {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 28px;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.launch-button {
|
|
display: flex;
|
|
height: 28px;
|
|
align-items: center;
|
|
color: var(--slate12);
|
|
justify-content: center;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.launch-button.tj-disabled-btn {
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.breadcrumb-item {
|
|
a {
|
|
text-decoration: none !important;
|
|
color: var(--slate12);
|
|
}
|
|
}
|
|
|
|
.table-list-item {
|
|
width: 248px;
|
|
}
|
|
|
|
.workspace-settings-filter-items {
|
|
width: 161.25px;
|
|
|
|
.css-13mf2tf-control {
|
|
width: 161.25px !important;
|
|
|
|
}
|
|
|
|
.css-10lvx9i-Input {
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
.css-1bugkci-control,
|
|
.css-42vs31,
|
|
.css-ob45yj-menu {
|
|
background-color: var(--base) !important;
|
|
width: 161.25px !important;
|
|
}
|
|
|
|
.css-6t9fnh-control {
|
|
border: 1px solid var(--slate7) !important;
|
|
background: var(--base);
|
|
color: var(--slate9);
|
|
width: 161.25px;
|
|
height: 32px;
|
|
|
|
.css-1opnhvy-singleValue {
|
|
color: var(--slate9) !important;
|
|
|
|
}
|
|
}
|
|
|
|
input.tj-checkbox {
|
|
background: var(--base) !important;
|
|
color: var(--slate9);
|
|
border: 1px solid var(--slate7) !important;
|
|
|
|
::placeholder {
|
|
color: var(--slate9);
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.tj-db-dataype {
|
|
color: var(--slate11);
|
|
}
|
|
|
|
.tj-database-column-header {
|
|
color: var(--slate12);
|
|
padding: 4px 4px 4px 8px !important;
|
|
text-transform: none !important;
|
|
line-height: 0px !important;
|
|
font-weight: 500 !important;
|
|
font-size: 12px !important;
|
|
line-height: 20px !important;
|
|
color: var(--slate12) !important;
|
|
|
|
&:first-child {
|
|
|
|
padding-left: 1rem !important;
|
|
}
|
|
|
|
}
|
|
|
|
.tj-database-column-row {
|
|
margin: 0;
|
|
width: 300px;
|
|
|
|
|
|
th:first-child>div {
|
|
height: 16px;
|
|
width: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
input {
|
|
border-radius: 4px;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.tj-db-operations-header {
|
|
height: 48px;
|
|
padding: 0 !important;
|
|
display: flex;
|
|
align-items: center;
|
|
background-color: var(--base);
|
|
|
|
.row {
|
|
margin-left: 0px;
|
|
width: 98%;
|
|
}
|
|
|
|
.col-8 {
|
|
padding-left: 0px;
|
|
display: flex;
|
|
gap: 12px;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
.add-new-column-btn {
|
|
margin-left: 16px;
|
|
height: 28px;
|
|
border-radius: 6px;
|
|
padding: 0 !important;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: transparent;
|
|
color: var(--slate12);
|
|
border: none;
|
|
}
|
|
|
|
.tj-db-filter-btn {
|
|
width: 100%;
|
|
height: 28px;
|
|
display: flex;
|
|
border-radius: 6px;
|
|
background: transparent;
|
|
color: var(--slate12);
|
|
border: none;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.tj-db-filter-btn-applied,
|
|
.tj-db-sort-btn-applied {
|
|
display: flex !important;
|
|
flex-direction: row !important;
|
|
justify-content: center !important;
|
|
align-items: center !important;
|
|
width: 100% !important;
|
|
height: 28px !important;
|
|
background: var(--grass2) !important;
|
|
border-radius: 6px !important;
|
|
}
|
|
|
|
.tj-db-filter-btn-applied,
|
|
.tj-db-filter-clear-icon {
|
|
background-color: var(--indigo4) !important;
|
|
color: var(--indigo9) !important;
|
|
|
|
&:hover {
|
|
background-color: var(--button-secondary-pressed) !important;
|
|
}
|
|
}
|
|
|
|
.tj-db-filter-clear-icon {
|
|
border-radius: 0px 6px 6px 0px;
|
|
}
|
|
|
|
.tj-db-filter-btn-active,
|
|
.tj-db-sort-btn-active {
|
|
display: flex !important;
|
|
flex-direction: row !important;
|
|
justify-content: center !important;
|
|
align-items: center !important;
|
|
width: 100% !important;
|
|
height: 28px !important;
|
|
border-radius: 6px !important;
|
|
background: var(--indigo4) !important;
|
|
color: var(--indigo9) !important;
|
|
}
|
|
|
|
.tj-db-filter-btn-active {
|
|
background: var(--button-outline-pressed) !important;
|
|
color: var(--text-default) !important;
|
|
}
|
|
|
|
.tj-db-filter-btn-active-filter {
|
|
display: flex !important;
|
|
flex-direction: row !important;
|
|
justify-content: center !important;
|
|
align-items: center !important;
|
|
width: 100% !important;
|
|
height: 28px !important;
|
|
border-radius: 6px !important;
|
|
background: var(--button-secondary-pressed) !important;
|
|
color: var(--text-brand) !important;
|
|
}
|
|
|
|
.tj-db-header-add-new-row-btn {
|
|
height: 28px;
|
|
background: transparent;
|
|
border-radius: 6px !important;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 6px;
|
|
border: none;
|
|
|
|
padding: span {}
|
|
}
|
|
|
|
.tj-db-sort-btn {
|
|
width: 100%;
|
|
height: 28px;
|
|
background: transparent;
|
|
color: var(--slate12);
|
|
border: none;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0
|
|
}
|
|
|
|
.edit-row-btn {
|
|
background: transparent;
|
|
color: var(--slate12);
|
|
border: none;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.workspace-variable-header {
|
|
width: 880px;
|
|
;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
padding: 0;
|
|
}
|
|
|
|
.workspace-variables-alert-banner {
|
|
width: inherit;
|
|
background-color: #FFF9ED;
|
|
border-color: #FFE3A2;
|
|
}
|
|
|
|
.codehinter.alert-component.workspace-variables-alert-banner {
|
|
color: var(--amber8);
|
|
border-color: var(--amber3);
|
|
}
|
|
|
|
.workspace-variables-alert-banner {
|
|
width: inherit;
|
|
background-color: #EBF9EB;
|
|
border-color: #46A758;
|
|
}
|
|
|
|
.codehinter.alert-component.workspace-constants-alert-banner {
|
|
color: #46A758;
|
|
border-color: #EBF9EB;
|
|
background-color: #EBF9EB;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.add-new-variables-button {
|
|
margin-bottom: 20px;
|
|
width: 169px;
|
|
height: 32px;
|
|
}
|
|
|
|
.org-users-page-sidebar,
|
|
.left-menu {
|
|
padding: 16px;
|
|
gap: 7px;
|
|
width: 220px;
|
|
border-right: 1px solid var(--slate5);
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
|
|
.group-banner {
|
|
svg {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.license-banner {
|
|
svg {
|
|
display: inline-block;
|
|
width: 54%;
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.groups-header-wrap {
|
|
display: flex;
|
|
height: 36px;
|
|
border-bottom: 1px solid var(--slate5);
|
|
}
|
|
|
|
.org-users-page-container {
|
|
width: 880px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.group-duplcate-modal-body {
|
|
margin-top: 20px;
|
|
|
|
.check-row {
|
|
margin-left: 5px;
|
|
margin-bottom: 10px;
|
|
}
|
|
}
|
|
|
|
.groups-main-header-wrap {
|
|
padding: 20px 0px 8px;
|
|
gap: 10px;
|
|
width: 612px;
|
|
height: 56px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
p {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
color: var(--slate12)
|
|
}
|
|
|
|
.nav-tabs .nav-link.active {
|
|
border-bottom: 2px solid var(--indigo9) !important;
|
|
}
|
|
}
|
|
|
|
.form-check-input:disabled {
|
|
background-color: var(--slate8) !important;
|
|
}
|
|
|
|
.manage-groups-body {
|
|
padding: 12px 12px 10px 12px;
|
|
font-size: 12px;
|
|
overflow-y: auto;
|
|
height: calc(100vh - 300px);
|
|
|
|
.group-users-list-container {
|
|
height: calc(100vh - 300px - 100px);
|
|
/* Set a fixed height */
|
|
overflow-y: auto;
|
|
/* Enable vertical scrolling */
|
|
border-bottom: 1px solid var(--slate6) !important;
|
|
}
|
|
|
|
}
|
|
|
|
.groups-sub-header-wrap {
|
|
// width: 612px;
|
|
height: 36px;
|
|
border-bottom: 1px solid var(--slate5) !important;
|
|
|
|
.nav-link.active {
|
|
border-bottom: 2px solid var(--indigo9) !important;
|
|
border-color: var(--indigo9) !important;
|
|
}
|
|
|
|
.nav-item {
|
|
font-weight: 500 !important;
|
|
font-size: 12px !important;
|
|
}
|
|
|
|
|
|
p {
|
|
width: 205px;
|
|
}
|
|
}
|
|
|
|
.groups-btn-container {
|
|
width: 880px;
|
|
justify-content: space-between;
|
|
margin: 0 auto;
|
|
margin-bottom: 20px;
|
|
height: 32px;
|
|
align-items: center;
|
|
|
|
}
|
|
|
|
.org-users-page {
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.org-users-page-card-wrap {
|
|
height: calc(100vh - 208px);
|
|
}
|
|
|
|
.org-users-page-card-wrap,
|
|
.org-settings-wrapper-card {
|
|
display: flex;
|
|
flex-direction: row;
|
|
background: var(--base);
|
|
width: 880px;
|
|
outline: 1px solid var(--slate5);
|
|
box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
|
|
border-radius: 6px;
|
|
max-height: calc(100vh - 156px);
|
|
}
|
|
|
|
.org-settings-wrapper-card {
|
|
margin: 0 auto;
|
|
|
|
.card-body {
|
|
overflow-y: auto;
|
|
padding: 40px;
|
|
}
|
|
|
|
.card-header {
|
|
padding: 0px 24px;
|
|
width: 660px;
|
|
height: 72px;
|
|
border-bottom: 1px solid var(--slate5);
|
|
|
|
}
|
|
|
|
.form-check {
|
|
margin-bottom: 0px !important;
|
|
line-height: 24px;
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
|
|
.groups-sidebar-nav {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
padding: 6px 8px;
|
|
gap: 40px;
|
|
width: 188px;
|
|
height: 32px;
|
|
background: var(--base);
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.org-users-page-card-body {
|
|
width: 660px;
|
|
}
|
|
|
|
.org-users-page-animation-fade {
|
|
height: 100%;
|
|
}
|
|
|
|
.org-users-page {
|
|
.nav-tabs .nav-link.active {
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
.nav-tabs .nav-item.show .nav-link,
|
|
.nav-tabs .nav-link.active {
|
|
border-color: var(--indigo9) !important;
|
|
|
|
}
|
|
|
|
.nav-link:hover {
|
|
border-right: none !important;
|
|
border-left: none !important;
|
|
border-top: none !important;
|
|
|
|
color: var(--indigo9);
|
|
}
|
|
}
|
|
|
|
.groups-selected-row {
|
|
background-color: var(--indigo4);
|
|
}
|
|
|
|
.add-apps-btn {
|
|
width: 160px;
|
|
height: 32px;
|
|
}
|
|
|
|
.groups-app-body-header,
|
|
.groups-datasource-body-header {
|
|
border-bottom: 1px solid var(--slate5);
|
|
|
|
p {
|
|
height: 36px;
|
|
display: flex;
|
|
align-items: center;
|
|
width: 286px;
|
|
color: var(--slate11);
|
|
|
|
}
|
|
|
|
p:first-child {
|
|
width: 205px !important;
|
|
margin-left: 12px;
|
|
}
|
|
|
|
}
|
|
|
|
.manage-group-tab-icons {
|
|
margin-right: 6px;
|
|
}
|
|
|
|
.manage-groups-no-apps-wrap {
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
width: 602px;
|
|
|
|
p {
|
|
margin-top: 12px;
|
|
}
|
|
|
|
span {
|
|
color: var(--slate11);
|
|
margin-top: 4px;
|
|
}
|
|
|
|
div {
|
|
width: 64px;
|
|
height: 64px;
|
|
background: var(--indigo3);
|
|
border-radius: 12px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-top: 88px;
|
|
}
|
|
|
|
}
|
|
|
|
.apps-permission-wrap {
|
|
height: auto;
|
|
justify-content: center;
|
|
min-width: 300px;
|
|
flex-grow: 1;
|
|
gap: 12px;
|
|
}
|
|
|
|
|
|
|
|
.apps-folder-permission-wrap,
|
|
.apps--variable-permission-wrap {
|
|
height: auto;
|
|
}
|
|
|
|
.manage-group-permision-header {
|
|
border-bottom: 1px solid var(--slate5);
|
|
display: flex;
|
|
|
|
p {
|
|
padding: 8px 12px;
|
|
gap: 10px;
|
|
width: 230px;
|
|
height: 36px;
|
|
font-weight: 500;
|
|
color: var(--slate11) !important;
|
|
}
|
|
|
|
}
|
|
|
|
.permission-body {
|
|
.form-check {
|
|
margin-bottom: 0px !important;
|
|
}
|
|
|
|
tr {
|
|
border-bottom: 1px solid var(--slate5);
|
|
width: 612px !important;
|
|
|
|
}
|
|
|
|
td {
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
line-height: 20px;
|
|
letter-spacing: 0em;
|
|
text-align: left;
|
|
width: 206px !important;
|
|
padding-left: 12px;
|
|
|
|
div {
|
|
padding-left: 12px;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.default-option-text {
|
|
margin-left: 10px;
|
|
margin-right: 16px;
|
|
font-size: 11px !important;
|
|
}
|
|
|
|
.git-sso-help-text {
|
|
color: var(--slate11);
|
|
}
|
|
|
|
.default-group-wrap {
|
|
gap: 10px;
|
|
width: 130px;
|
|
height: 32px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: var(--indigo3);
|
|
border-radius: 100px;
|
|
border: 2px solid var(--indigo7);
|
|
color: var(--indigo9);
|
|
|
|
path {
|
|
fill: var(--indigo9);
|
|
}
|
|
}
|
|
|
|
.default-group-wrap-small {
|
|
gap: 4px;
|
|
width: 121px;
|
|
height: 28px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: var(--indigo3);
|
|
border-radius: 6px;
|
|
padding: 5px 10px;
|
|
|
|
p {
|
|
font-weight: 500 !important;
|
|
line-height: 18px !important;
|
|
color: var(--indigo9);
|
|
font-family: 'IBM Plex Sans', sans-serif;
|
|
}
|
|
}
|
|
|
|
.sso-icon-wrapper {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 8px 8px 8px 16px;
|
|
width: 251px;
|
|
height: 56px;
|
|
background: var(--slate3);
|
|
border-radius: 6px;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.sso-main-box {
|
|
justify-content: center;
|
|
background: var(--slate6);
|
|
padding: 8px 16px;
|
|
width: 96px;
|
|
height: 40px;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.default-danger-tag-wrap {
|
|
gap: 10px;
|
|
width: 113px;
|
|
height: 28px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: var(--tomato6);
|
|
border-radius: 100px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.manage-group-users-info {
|
|
height: 48px;
|
|
width: 612px;
|
|
border-radius: 6px;
|
|
padding: 12px 24px 12px 24px;
|
|
background: var(--slate3);
|
|
border: 1px solid var(--slate5);
|
|
border-radius: 6px;
|
|
margin-bottom: 16px;
|
|
|
|
p {
|
|
color: var(--slate12);
|
|
gap: 14px;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
}
|
|
}
|
|
|
|
.name-avatar {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 10px;
|
|
width: 36px;
|
|
height: 36px;
|
|
background-color: var(--slate3) !important;
|
|
border-radius: 6px;
|
|
color: var(--slate11);
|
|
margin-right: 12px;
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
|
|
|
|
|
|
.manage-group-users-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
padding: 12px 6px;
|
|
width: 612px !important;
|
|
height: 64px;
|
|
border-bottom: 1px solid var(--slate5);
|
|
|
|
p {
|
|
width: 262px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
|
|
span {
|
|
max-width: 140px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
|
|
&:hover .apps-remove-btn,
|
|
.datasources-remove-btn {
|
|
display: flex;
|
|
}
|
|
|
|
.edit-role-btn {
|
|
margin-left: auto;
|
|
margin-right: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
padding-top: 5px;
|
|
}
|
|
}
|
|
|
|
.manage-group-app-table-body,
|
|
.manage-group-datasource-table-body {
|
|
width: 602px !important;
|
|
|
|
tr {
|
|
display: flex;
|
|
font-family: 'IBM Plex Sans';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-size: 12px;
|
|
line-height: 20px;
|
|
color: var(--slate12);
|
|
}
|
|
}
|
|
|
|
.apps-view-edit-wrap,
|
|
.datasources-view-edit-wrap {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 51px;
|
|
margin-right: 32px;
|
|
}
|
|
|
|
.apps-table-row,
|
|
.datasources-table-row {
|
|
display: grid !important;
|
|
grid-template-columns: 205px 286px 115px;
|
|
|
|
td {
|
|
padding: 12px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
&:hover .apps-remove-btn,
|
|
.datasources-remove-btn {
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
.apps-remove-btn,
|
|
.datasources-remove-btn {
|
|
width: 97px;
|
|
height: 28px;
|
|
font-weight: 600 !important;
|
|
}
|
|
|
|
.faded-text {
|
|
color: var(--slate8);
|
|
}
|
|
|
|
.manage-groups-app-dropdown,
|
|
.manage-groups-datasource-dropdown {
|
|
width: 440px;
|
|
}
|
|
|
|
.create-new-group-button {
|
|
width: 169px;
|
|
height: 32px;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.faded-input {
|
|
background: var(--slate5);
|
|
}
|
|
|
|
.manage-group-table-head {
|
|
display: flex;
|
|
border-bottom: 1px solid var(--slate5);
|
|
width: 612px;
|
|
height: 36px;
|
|
padding: 8px 12px 8px 2px;
|
|
align-items: center;
|
|
|
|
|
|
p {
|
|
width: 272px !important;
|
|
color: var(--slate11);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.edit-role-btn {
|
|
margin-left: auto;
|
|
margin-right: 50px;
|
|
display: flex;
|
|
width: 20px;
|
|
align-items: center;
|
|
padding-top: 5px;
|
|
}
|
|
|
|
}
|
|
|
|
.manage-groups-permission-apps,
|
|
.apps-constant-permission-wrap {
|
|
border-bottom: 1px solid var(--slate5);
|
|
}
|
|
|
|
.manage-groups-permission-apps,
|
|
.apps-folder-permission-wrap,
|
|
.datasource-permissions-wrap,
|
|
.apps-variable-permission-wrap,
|
|
.apps-constant-permission-wrap {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 12px;
|
|
gap: 10px;
|
|
|
|
div {
|
|
width: 206px;
|
|
}
|
|
}
|
|
|
|
.manage-groups-permission-apps,
|
|
.apps-variable-permission-wrap,
|
|
.apps-constant-permission-wrap {
|
|
gap: 10px;
|
|
height: auto;
|
|
}
|
|
|
|
.datasource-permissions-wrap {
|
|
border-top: 1px solid var(--slate5);
|
|
}
|
|
|
|
.apps-folder-permission-wrap,
|
|
.apps-variable-permission-wrap {
|
|
height: auto;
|
|
border-bottom: 1px solid var(--slate5);
|
|
}
|
|
|
|
.delete-group {
|
|
text-decoration: none !important;
|
|
color: var(--tomato9) !important;
|
|
}
|
|
|
|
.delete-link,
|
|
.remove-decoration {
|
|
text-decoration: none !important;
|
|
}
|
|
|
|
.edit-group {
|
|
text-decoration: none !important;
|
|
color: var(--slate12) !important;
|
|
}
|
|
|
|
.removed-decoration {
|
|
text-decoration: none !important;
|
|
}
|
|
|
|
.rmsc .select-item.selected {
|
|
color: var(--slate12) !important;
|
|
background-color: var(--base) !important;
|
|
}
|
|
|
|
.manage-groups-app-dropdown,
|
|
.manage-constants-dropdown,
|
|
.manage-groups-datasource-dropdown {
|
|
.rmsc.multi-select {
|
|
.dropdown-container {
|
|
gap: 17px;
|
|
height: 32px;
|
|
background: var(--base);
|
|
border: 1px solid var(--slate7);
|
|
border-radius: 6px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-right: 12px;
|
|
}
|
|
|
|
.dropdown-content {
|
|
.panel-content {
|
|
background: var(--base);
|
|
border: 1px solid var(--slate3);
|
|
box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
|
|
border-radius: 6px;
|
|
align-items: center;
|
|
|
|
|
|
.select-item:hover {
|
|
background-color: var(--slate3);
|
|
}
|
|
|
|
input {
|
|
color: var(--slate11);
|
|
|
|
&:focus {
|
|
background: unset !important
|
|
}
|
|
}
|
|
|
|
.item-renderer {
|
|
align-items: center;
|
|
|
|
span {
|
|
font-size: 12px;
|
|
color: var(--slate12)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
.manage-groups-app-dropdown {
|
|
margin-right: 12px;
|
|
|
|
.rmsc .dropdown-container:focus-within {
|
|
border: 1px solid var(--indigo9) !important;
|
|
box-shadow: 0px 0px 0px 2px #C6D4F9 !important;
|
|
}
|
|
|
|
input {
|
|
color: var(--slate12);
|
|
background-color: unset !important;
|
|
}
|
|
|
|
.dropdown-heading-value {
|
|
span {
|
|
color: var(--slate12) !important;
|
|
|
|
}
|
|
}
|
|
|
|
.multi-select {
|
|
.dropdown-container {
|
|
gap: 17px;
|
|
width: 440px;
|
|
height: 32px;
|
|
background: var(--base);
|
|
border: 1px solid var(--slate7);
|
|
border-radius: 6px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-right: 12px;
|
|
}
|
|
|
|
}
|
|
|
|
.dropdown-content {
|
|
.panel-content {
|
|
background: var(--base);
|
|
border: 1px solid var(--slate3);
|
|
box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
|
|
border-radius: 6px;
|
|
|
|
.select-panel {
|
|
.search {
|
|
border-bottom: 1px solid var(--slate5);
|
|
}
|
|
|
|
.search,
|
|
input {
|
|
background-color: var(--base) !important;
|
|
}
|
|
}
|
|
|
|
input[type='checkbox'] {
|
|
border: 1px solid red !important;
|
|
}
|
|
|
|
.select-item:hover {
|
|
background-color: var(--slate3);
|
|
}
|
|
|
|
|
|
.item-renderer {
|
|
align-items: center !important;
|
|
|
|
span {
|
|
font-size: 12px;
|
|
color: var(--slate12)
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
.manage-constants-dropdown {
|
|
.rmsc.multi-select {
|
|
.dropdown-container {
|
|
gap: 17px;
|
|
height: 32px;
|
|
background: var(--base);
|
|
border: 1px solid var(--slate7);
|
|
border-radius: 6px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-right: 12px;
|
|
}
|
|
|
|
.dropdown-content {
|
|
.panel-content {
|
|
background: var(--base);
|
|
border: 1px solid var(--slate3);
|
|
box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
|
|
border-radius: 6px;
|
|
align-items: center;
|
|
|
|
|
|
.select-item:hover {
|
|
background-color: var(--slate3);
|
|
}
|
|
|
|
.item-renderer {
|
|
align-items: center;
|
|
|
|
span {
|
|
font-size: 12px;
|
|
color: var(--slate12)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.sso-form-wrap {
|
|
.form-label {
|
|
font-size: 12px;
|
|
font-weight: 500px;
|
|
margin-bottom: 4px !important;
|
|
color: var(--slate12);
|
|
}
|
|
|
|
.form-check-label {
|
|
font-size: 12px;
|
|
font-size: 12px;
|
|
line-height: 20px;
|
|
color: var(--slate12);
|
|
}
|
|
}
|
|
|
|
.allow-default-sso-helper-text {
|
|
white-space: pre-line;
|
|
}
|
|
|
|
.password-disable-danger-wrap {
|
|
padding: 16px;
|
|
gap: 16px;
|
|
width: 574px;
|
|
height: 116px;
|
|
background: var(--tomato3);
|
|
border: 1px solid var(--tomato5);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.sso-footer-save-btn {
|
|
height: 40px;
|
|
}
|
|
|
|
.sso-footer-cancel-btn {
|
|
|
|
width: 85px;
|
|
height: 40px;
|
|
}
|
|
|
|
.danger-text-login {
|
|
padding-left: 40px !important;
|
|
}
|
|
|
|
.tick-icon {
|
|
width: 20px;
|
|
height: 20px;
|
|
background: var(--indigo9);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.invite-user-drawer-wrap {
|
|
display: grid;
|
|
grid-template-rows: auto 1fr auto;
|
|
height: 100vh;
|
|
}
|
|
|
|
.manage-users-drawer-footer {
|
|
padding: 24px 32px;
|
|
height: 88px;
|
|
border-top: 1px solid var(--slate5) !important;
|
|
display: flex;
|
|
gap: 8px;
|
|
|
|
justify-content: flex-end;
|
|
|
|
.invite-btn {
|
|
width: 140px;
|
|
height: 40px;
|
|
}
|
|
|
|
.cancel-btn {
|
|
width: 85px;
|
|
height: 40px;
|
|
}
|
|
}
|
|
|
|
|
|
.tj-drawer-tabs-wrap {
|
|
display: flex;
|
|
}
|
|
|
|
.invite-user-drawer-wrap {
|
|
.card-header {
|
|
flex-direction: column;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 0px !important;
|
|
}
|
|
|
|
.card-header-inner-wrap {
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
padding: 16px 20px;
|
|
height: 64px;
|
|
|
|
}
|
|
|
|
.card-header-inner-wrap,
|
|
.tj-drawer-tabs-container {
|
|
display: flex;
|
|
}
|
|
|
|
.tj-drawer-tabs-container-outer {
|
|
padding-top: 0px;
|
|
gap: 10px;
|
|
height: 68px;
|
|
}
|
|
|
|
.tj-drawer-tabs-container {
|
|
padding: 2px;
|
|
gap: 2px;
|
|
|
|
width: 502px;
|
|
height: 36px;
|
|
background: var(--slate4);
|
|
border-radius: 6px;
|
|
|
|
}
|
|
}
|
|
|
|
.tj-drawer-tabs-btn {
|
|
padding: 2px 4px;
|
|
gap: 6px;
|
|
width: 248px;
|
|
height: 32px;
|
|
box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
|
|
border-radius: 4px;
|
|
border: none;
|
|
color: var(--slate11);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: var(--slate4);
|
|
|
|
|
|
span {
|
|
margin-left: 4px !important;
|
|
font-weight: 500;
|
|
|
|
}
|
|
}
|
|
|
|
.tj-drawer-tabs-btn-active {
|
|
background: var(--base);
|
|
color: var(--slate12);
|
|
}
|
|
|
|
.user-number-wrap {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 8px;
|
|
gap: 10px;
|
|
width: 36px;
|
|
height: 36px;
|
|
background: var(--slate3);
|
|
border-radius: 1000px;
|
|
}
|
|
|
|
.user-csv-template-wrap {
|
|
display: flex;
|
|
padding: 24px;
|
|
gap: 14px;
|
|
|
|
width: 486px;
|
|
height: 152px;
|
|
|
|
background: var(--orange3);
|
|
|
|
border: 1px solid var(--orange6);
|
|
border-radius: 6px;
|
|
|
|
div {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
p {
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.upload-user-form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 60px 0px;
|
|
gap: 36px;
|
|
width: 486px;
|
|
border: 2px dashed var(--indigo9);
|
|
border-radius: 6px;
|
|
align-items: center;
|
|
margin: 24px auto;
|
|
text-align: center;
|
|
|
|
.select-csv-text {
|
|
color: var(--indigo9);
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
span {
|
|
color: var(--slate11) !important;
|
|
}
|
|
}
|
|
|
|
.download-template-btn {
|
|
width: 184px;
|
|
height: 32px;
|
|
padding: 0px !important;
|
|
}
|
|
|
|
.csv-upload-icon-wrap {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 10px;
|
|
gap: 10px;
|
|
width: 64px;
|
|
height: 64px;
|
|
background: var(--indigo3);
|
|
border-radius: 12px;
|
|
margin: 0px auto 12px auto;
|
|
cursor: pointer;
|
|
}
|
|
|
|
|
|
.manage-users-drawer-content-bulk {
|
|
margin: 24px 15px;
|
|
|
|
form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.manage-users-drawer-content-bulk-download-prompt {
|
|
display: flex;
|
|
flex-direction: row !important;
|
|
justify-content: center;
|
|
align-items: flex-start !important;
|
|
}
|
|
}
|
|
|
|
|
|
.manage-users-drawer-content {
|
|
margin: 24px 15px;
|
|
|
|
.invite-user-by-email {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: top;
|
|
}
|
|
|
|
.invite-user-by-email {
|
|
display: flex;
|
|
}
|
|
|
|
input[name="email"]:disabled,
|
|
input[name="fullName"]:disabled {
|
|
background-color: var(--slate3) !important;
|
|
color: var(--slate9) !important
|
|
}
|
|
|
|
.invite-email-body {
|
|
width: 452px;
|
|
|
|
input:not([type="checkbox"]) {
|
|
padding: 6px 10px;
|
|
height: 32px;
|
|
color: var(--slate12);
|
|
}
|
|
}
|
|
}
|
|
|
|
.rmsc .item-renderer {
|
|
align-items: center !important;
|
|
}
|
|
|
|
.tj-db-table {
|
|
overflow-y: auto;
|
|
height: 110px;
|
|
|
|
table {
|
|
border-collapse: separate;
|
|
border-spacing: 0;
|
|
width: max-content;
|
|
|
|
.row-tj {
|
|
border-width: 0px !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.bounded-box {
|
|
.sc-iwsKbI.lmGPCf {
|
|
height: 100%;
|
|
margin: auto;
|
|
width: max-content;
|
|
max-width: 100% !important;
|
|
|
|
img {
|
|
height: 100% !important;
|
|
}
|
|
|
|
.gVmiLs {
|
|
width: auto !important;
|
|
}
|
|
}
|
|
|
|
.css-tlfecz-indicatorContainer,
|
|
.css-1gtu0rj-indicatorContainer {
|
|
svg {
|
|
width: 12px !important;
|
|
height: 12px !important;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.sso-type-header {
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.groups-folder-list {
|
|
padding: 6px 8px;
|
|
gap: 40px;
|
|
max-width: 188px;
|
|
height: 32px;
|
|
|
|
span {
|
|
white-space: nowrap !important;
|
|
overflow: hidden !important;
|
|
text-overflow: ellipsis !important;
|
|
}
|
|
|
|
.tooltip {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.groups-list-option-button {
|
|
background-color: var(--base) !important;
|
|
width: 24px;
|
|
height: 24px;
|
|
padding: 7px 0px 7px 0px;
|
|
|
|
&:focus-visible {
|
|
border: none !important;
|
|
outline: none !important;
|
|
box-shadow: none !important;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
.create-group-modal-footer {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
justify-content: flex-end
|
|
}
|
|
|
|
.add-users-button {
|
|
width: 160px;
|
|
height: 32px;
|
|
}
|
|
|
|
.sso-page-inputs {
|
|
padding: 6px 10px;
|
|
gap: 17px;
|
|
width: 612px;
|
|
height: 32px;
|
|
}
|
|
|
|
.popover-group-menu {
|
|
border-radius: 4px;
|
|
width: 190px;
|
|
box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
|
|
background: var(--base);
|
|
color: var(--slate12);
|
|
border: 1px solid var(--slate3);
|
|
|
|
.popover-arrow {
|
|
display: none;
|
|
}
|
|
|
|
.popover-body {
|
|
padding: 6px;
|
|
color: var(--slate12);
|
|
|
|
.field {
|
|
|
|
width: 100%;
|
|
margin: 0 0 0 0;
|
|
height: 36px;
|
|
justify-content: center;
|
|
align-items: center;
|
|
display: flex;
|
|
|
|
.option-row {
|
|
width: 100%;
|
|
height: 100%;
|
|
font-weight: 400;
|
|
font-size: 12px;
|
|
justify-content: left;
|
|
align-items: center;
|
|
display: flex;
|
|
z-index: 999999999;
|
|
}
|
|
|
|
.disable {
|
|
color: var(--slate9);
|
|
}
|
|
|
|
.disable {
|
|
color: var(--slate9);
|
|
|
|
&.dark-theme {
|
|
color: var(--slate11);
|
|
}
|
|
}
|
|
|
|
.disable {
|
|
color: var(--slate7);
|
|
|
|
&.dark-theme {
|
|
color: var(--slate11);
|
|
}
|
|
}
|
|
|
|
.disable {
|
|
color: var(--slate7);
|
|
|
|
&.dark-theme {
|
|
color: var(--slate11);
|
|
}
|
|
}
|
|
|
|
&__danger {
|
|
color: var(--tomato9);
|
|
}
|
|
|
|
:hover {
|
|
background-color: var(--slate3);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.workspace-settings-filter-wrap {
|
|
background: var(--slate3);
|
|
padding: 15px 16px;
|
|
gap: 12px;
|
|
width: 880px;
|
|
height: 62px;
|
|
border-right: 1px solid var(--slate7);
|
|
border-top: 1px solid var(--slate7);
|
|
border-left: 1px solid var(--slate7);
|
|
box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
|
|
border-top-left-radius: 6px;
|
|
border-top-right-radius: 6px;
|
|
}
|
|
|
|
|
|
// users page
|
|
.css-1i2tit0-menu {
|
|
margin: 0px !important;
|
|
background: var(--base);
|
|
box-shadow: 0px 4px 6px -2px #10182808 !important;
|
|
|
|
.css-2kg7t4-MenuList {
|
|
margin: 0px !important;
|
|
padding: 0px !important;
|
|
background: var(--base);
|
|
}
|
|
}
|
|
|
|
.workspace-settings-nav-items {
|
|
padding: 6px 8px;
|
|
gap: 40px;
|
|
width: 248px;
|
|
height: 32px;
|
|
}
|
|
|
|
.new-app-dropdown {
|
|
background: var(--base) !important;
|
|
color: var(--slate12);
|
|
}
|
|
|
|
.workspace-variable-container-wrap {
|
|
&.constants-list {
|
|
overflow: auto;
|
|
}
|
|
|
|
.card,
|
|
thead {
|
|
background: var(--base) !important;
|
|
|
|
tr>th,
|
|
tbody>tr>td {
|
|
background: var(--base) !important;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.move-selected-app-to-text {
|
|
p {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
|
|
span {
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tj-org-dropdown {
|
|
.dashboard-org-avatar {
|
|
margin-right: 11px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 7px 8px;
|
|
gap: 10px;
|
|
width: 34px;
|
|
height: 34px;
|
|
background: var(--slate4) !important;
|
|
color: var(--slate9);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.current-org-avatar {
|
|
margin-right: 11px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 7px 8px;
|
|
gap: 10px;
|
|
width: 34px;
|
|
height: 34px;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.current-org-indicator {
|
|
padding: 0px 8px 0px 8px;
|
|
margin-left: auto;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.current-org-indicator {
|
|
display: none;
|
|
}
|
|
|
|
&:hover .current-org-indicator {
|
|
display: block;
|
|
}
|
|
|
|
.org-name {
|
|
color: var(--slate12) !important;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
|
|
.org-dropdown-shadow {
|
|
box-shadow: var(--elevation-400-box-shadow)
|
|
}
|
|
|
|
|
|
.css-1q0xftk-menu {
|
|
background-color: var(--base-black) !important;
|
|
border: 1px solid hsl(197, 6.8%, 13.6%) !important;
|
|
box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03) !important;
|
|
|
|
}
|
|
|
|
.css-4yo7x8-menu {
|
|
background-color: var(--base) !important;
|
|
border: 1px solid var(--slate3) !important;
|
|
box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03) !important;
|
|
border-radius: 6px !important;
|
|
}
|
|
|
|
.select-header-font {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
line-height: 20px;
|
|
color: var(--text-default);
|
|
|
|
}
|
|
|
|
|
|
.org-custom-select-header-wrap {
|
|
border-bottom: 1px solid var(--slate5);
|
|
|
|
.select-header-font {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
line-height: 20px;
|
|
color: var(--text-default);
|
|
|
|
}
|
|
}
|
|
|
|
.btn-close:focus {
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.template-card {
|
|
padding: 16px;
|
|
gap: 16px;
|
|
min-width: 280px;
|
|
max-width: 100%;
|
|
height: 210px;
|
|
background: var(--base);
|
|
border: 1px solid var(--slate3);
|
|
box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.see-all-temlplates-link {
|
|
color: var(--indigo9) !important;
|
|
}
|
|
|
|
.template-card-img {
|
|
padding: 0px;
|
|
width: 100%;
|
|
height: 77.5%;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.confirm-dialogue-body {
|
|
background: var(--base);
|
|
color: var(--slate12);
|
|
}
|
|
|
|
.folder-header-icons-wrap {
|
|
gap: 4px;
|
|
}
|
|
|
|
.tj-common-search-input {
|
|
.input-icon-addon {
|
|
padding-right: 8px;
|
|
padding-left: 8px;
|
|
|
|
}
|
|
|
|
input {
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
padding: 4px 8px !important;
|
|
gap: 16px;
|
|
width: 248px !important;
|
|
height: 28px !important;
|
|
background: var(--base);
|
|
border: 1px solid var(--slate7);
|
|
border-radius: 6px;
|
|
color: var(--slate12);
|
|
padding-left: 33px !important;
|
|
|
|
|
|
::placeholder {
|
|
color: var(--slate9);
|
|
margin-left: 5px !important;
|
|
padding-left: 5px !important;
|
|
background-color: red !important;
|
|
}
|
|
|
|
&:hover {
|
|
background: var(--slate2);
|
|
border: 1px solid var(--slate8);
|
|
}
|
|
|
|
&:active {
|
|
background: var(--indigo2);
|
|
border: 1px solid var(--indigo9);
|
|
box-shadow: 0px 0px 0px 2px #C6D4F9;
|
|
outline: none;
|
|
}
|
|
|
|
&:focus-visible {
|
|
background: var(--slate2);
|
|
border: 1px solid var(--slate8);
|
|
border-radius: 6px;
|
|
outline: none;
|
|
padding-left: 12px !important;
|
|
}
|
|
|
|
&:disabled {
|
|
background: var(--slate3);
|
|
border: 1px solid var(--slate7);
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.search-icon-wrap {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 7px;
|
|
gap: 8px;
|
|
width: 28px;
|
|
height: 28px;
|
|
background: var(--base);
|
|
border: 1px solid var(--slate7);
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.sidebar-list-wrap {
|
|
margin-top: 24px;
|
|
padding: 0px 20px 20px 20px;
|
|
height: calc(100vh - 180px);
|
|
overflow: auto;
|
|
|
|
span {
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
&::-webkit-scrollbar {
|
|
width: 6.5px;
|
|
}
|
|
|
|
&::-webkit-scrollbar-thumb {
|
|
background-color: transparent;
|
|
}
|
|
|
|
&::-webkit-scrollbar-track {
|
|
background-color: transparent;
|
|
}
|
|
|
|
&:hover::-webkit-scrollbar-thumb {
|
|
background-color: #A1A6AD;
|
|
}
|
|
}
|
|
|
|
.sidebar-list-wrap-with-banner {
|
|
margin-top: 24px;
|
|
padding: 0px 20px 20px 20px;
|
|
height: calc(100vh - 408px);
|
|
overflow: auto;
|
|
|
|
span {
|
|
letter-spacing: -0.02em;
|
|
}
|
|
}
|
|
|
|
.sidebar-list-wrap.sidebar-list-wrap-with-banner.isAdmin {
|
|
height: calc(100vh - 371px);
|
|
|
|
&.resource-limit-reached {
|
|
height: calc(100vh - 371px);
|
|
}
|
|
}
|
|
|
|
.drawer-footer-btn-wrap,
|
|
.variable-form-footer {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
padding: 16px 24px;
|
|
gap: 8px;
|
|
height: 72px;
|
|
border-top: 1px solid var(--slate5);
|
|
background: var(--base);
|
|
}
|
|
|
|
.drawer-card-title {
|
|
padding: 16px 20px;
|
|
border-bottom: 1px solid var(--slate5);
|
|
height: 64px;
|
|
|
|
h3 {
|
|
margin-bottom: 0px !important;
|
|
font-size: 18px;
|
|
font-weight: 500;
|
|
line-height: 28px;
|
|
}
|
|
}
|
|
|
|
.drawer-card-wrapper,
|
|
.variable-form-wrap {
|
|
min-height: 100vh;
|
|
display: grid;
|
|
grid-template-rows: auto 1fr auto;
|
|
}
|
|
|
|
.add-new-datasource-header-container {
|
|
margin-bottom: 24px;
|
|
padding-top: 4px;
|
|
}
|
|
|
|
.folder-list-group-item {
|
|
color: var(--slate12) !important;
|
|
}
|
|
|
|
.table-list-item,
|
|
.table-name {
|
|
color: var(--slate12) !important;
|
|
}
|
|
|
|
// targetting all react select dropdowns
|
|
|
|
.css-1i2tit0-menu .css-2kg7t4-MenuList {
|
|
div {
|
|
background-color: var(--base-black);
|
|
|
|
&:hover {
|
|
background-color: hsl(198, 6.6%, 15.8%);
|
|
;
|
|
}
|
|
}
|
|
}
|
|
|
|
.css-ob45yj-menu .css-2kg7t4-MenuList {
|
|
div {
|
|
background-color: var(--base);
|
|
|
|
&:hover {
|
|
background-color: var(--slate4);
|
|
;
|
|
}
|
|
}
|
|
}
|
|
|
|
.selected-ds.row>img {
|
|
padding: 0 !important;
|
|
}
|
|
|
|
.tj-user-table-wrapper {
|
|
height: calc(100vh - 392px); //52+64+40+32+20+62
|
|
overflow-y: auto;
|
|
background: var(--base);
|
|
border-right: 1px solid var(--slate7);
|
|
border-bottom: 1px solid var(--slate7);
|
|
border-left: 1px solid var(--slate7);
|
|
box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
|
|
border-bottom-left-radius: 6px;
|
|
border-bottom-right-radius: 6px;
|
|
|
|
|
|
.user-detail {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
}
|
|
|
|
.user-filter-search {
|
|
padding: 6px 10px;
|
|
gap: 16px;
|
|
width: 312px;
|
|
height: 32px;
|
|
background: var(--base);
|
|
border: 1px solid var(--slate7);
|
|
border-radius: 6px;
|
|
|
|
&::placeholder {
|
|
color: var(--slate9);
|
|
}
|
|
}
|
|
|
|
|
|
|
|
//TJ APP INPUT
|
|
.tj-app-input,
|
|
.edit-row-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
font-family: 'IBM Plex Sans';
|
|
font-style: normal;
|
|
position: relative;
|
|
|
|
.text-danger {
|
|
font-weight: 400 !important;
|
|
font-size: 10px !important;
|
|
line-height: 16px !important;
|
|
color: var(--tomato10) !important;
|
|
}
|
|
|
|
label {
|
|
font-family: 'IBM Plex Sans';
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
font-size: 12px;
|
|
line-height: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
color: var(--slate12);
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
input.form-control,
|
|
textarea,
|
|
.form-control {
|
|
gap: 16px !important;
|
|
background: var(--base) !important;
|
|
border: 1px solid var(--slate7) !important;
|
|
border-radius: 6px !important;
|
|
margin-bottom: 4px !important;
|
|
color: var(--slate12) !important;
|
|
transition: none;
|
|
font-weight: 400;
|
|
|
|
&:hover {
|
|
background: var(--slate1) !important;
|
|
border: 1px solid var(--slate8) !important;
|
|
-webkit-box-shadow: none !important;
|
|
box-shadow: none !important;
|
|
outline: none;
|
|
}
|
|
|
|
&:focus-visible {
|
|
background: var(--indigo2) !important;
|
|
border: 1px solid var(--indigo9) !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
&.input-error-border {
|
|
border-color: #DB4324 !important;
|
|
}
|
|
|
|
&:-webkit-autofill {
|
|
box-shadow: 0 0 0 1000px var(--base) inset !important;
|
|
-webkit-text-fill-color: var(--slate12) !important;
|
|
|
|
&:hover {
|
|
box-shadow: 0 0 0 1000px var(--slate1) inset !important;
|
|
-webkit-text-fill-color: var(--slate12) !important;
|
|
}
|
|
|
|
&:focus-visible {
|
|
box-shadow: 0 0 0 1000px var(--indigo2) inset !important;
|
|
-webkit-text-fill-color: var(--slate12) !important;
|
|
}
|
|
}
|
|
|
|
&::placeholder {
|
|
font-size: 12px;
|
|
line-height: 20px;
|
|
}
|
|
|
|
}
|
|
|
|
input.dynamic-form-encrypted-field[type="password"] {
|
|
&:disabled {
|
|
padding-right: 35px !important;
|
|
}
|
|
}
|
|
|
|
.design-component-inputs textarea {
|
|
|
|
&.valid-textarea {
|
|
border: 1.5px solid #519b62 !important;
|
|
}
|
|
|
|
&.invalid-textarea {
|
|
border: 1.5px solid #e26367 !important;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.tj-app-input-wrapper {
|
|
display: flex;
|
|
|
|
.eye-icon {
|
|
position: absolute;
|
|
right: 8px;
|
|
top: 5px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.copy-icon {
|
|
position: absolute;
|
|
right: 8px;
|
|
top: 5px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.form-control {
|
|
padding-right: 2.2rem;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.tj-sub-helper-text {
|
|
font-weight: 400;
|
|
font-size: 10px;
|
|
line-height: 16px;
|
|
}
|
|
|
|
.tj-input-success {
|
|
color: var(--grass10);
|
|
}
|
|
|
|
.tj-input-warning {
|
|
color: var(--orange10);
|
|
}
|
|
|
|
.tj-input-helper {
|
|
color: var(--slate11);
|
|
}
|
|
|
|
.tj-input-error {
|
|
color: var(--tomato10);
|
|
}
|
|
|
|
.tj-input-error-state {
|
|
border: 1px solid var(--tomato9);
|
|
}
|
|
|
|
// TJ APP INPUT END
|
|
|
|
.search-input-container {
|
|
display: flex;
|
|
}
|
|
|
|
// sidebar styles inside editor :: temporary
|
|
.theme-dark,
|
|
.dark-theme {
|
|
.codehinter.alert-component.workspace-variables-alert-banner {
|
|
color: #ffecbb !important;
|
|
background-color: #3a3f41 !important;
|
|
border-color: #4d5156 !important;
|
|
}
|
|
}
|
|
|
|
.add-icon-column {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 1;
|
|
right: 0;
|
|
padding: 0px !important;
|
|
width: 30px;
|
|
height: 31px;
|
|
border-radius: 0px !important;
|
|
background: var(--color-light-slate-04, #ECEEF0) !important;
|
|
cursor: pointer;
|
|
|
|
.icon-styles {
|
|
font-size: 14px !important;
|
|
font-weight: 400;
|
|
color: black;
|
|
}
|
|
}
|
|
|
|
.add-icon-column-dark {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 1;
|
|
right: 0;
|
|
padding: 0px !important;
|
|
width: 30px;
|
|
height: 31px;
|
|
border-radius: 0px !important;
|
|
cursor: pointer;
|
|
|
|
.icon-styles {
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
background: #1c252f !important;
|
|
border: 1px solid #374150 !important;
|
|
font-size: 14px !important;
|
|
font-weight: 400;
|
|
color: white;
|
|
}
|
|
}
|
|
|
|
.add-icon-row {
|
|
position: sticky;
|
|
bottom: 0;
|
|
left: 0px;
|
|
width: 29px;
|
|
height: 31px;
|
|
background: var(--slate7);
|
|
border-width: 0px 1px 1px 1px;
|
|
border-style: solid;
|
|
border-radius: 0px;
|
|
border-color: var(--slate4);
|
|
border-radius: 0px !important;
|
|
font-size: 14px !important;
|
|
font-weight: 400;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.add-icon-row-dark {
|
|
position: sticky;
|
|
bottom: 0;
|
|
left: 0px;
|
|
width: 29px;
|
|
height: 31px;
|
|
background: var(--slate7);
|
|
border-width: 0px 1px 1px 1px;
|
|
border-style: solid;
|
|
border-radius: 0px;
|
|
background: #1c252f !important;
|
|
border: 1px solid #374150 !important;
|
|
font-size: 14px !important;
|
|
font-weight: 400;
|
|
color: white;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
z-index: 2;
|
|
}
|
|
|
|
// custom styles for users multiselect in manage users
|
|
.manage-groups-users-multiselect {
|
|
gap: 17px;
|
|
width: 440px;
|
|
height: 32px;
|
|
background: var(--base);
|
|
border-radius: 6px;
|
|
|
|
.dropdown-heading {
|
|
height: 32px;
|
|
padding: 6px 10px;
|
|
}
|
|
|
|
.dropdown-container {
|
|
background: var(--base);
|
|
border: 1px solid var(--slate7) !important;
|
|
}
|
|
|
|
.dropdown-content {
|
|
border: 1px solid var(--slate3);
|
|
box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
|
|
border-radius: 6px;
|
|
|
|
.search {
|
|
input {
|
|
background-color: var(--base);
|
|
color: var(--slate12);
|
|
}
|
|
}
|
|
}
|
|
|
|
.rmsc,
|
|
.dropdown-content,
|
|
.panel-content,
|
|
.search {
|
|
background: var(--base) !important;
|
|
}
|
|
|
|
.options {
|
|
.select-item {
|
|
color: var(--slate12);
|
|
|
|
&:hover {
|
|
background: var(--slate4);
|
|
border-radius: 6px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.select-search__options {
|
|
.item-renderer {
|
|
display: flex !important;
|
|
justify-content: space-between;
|
|
padding: 20px;
|
|
cursor: pointer;
|
|
flex-direction: row;
|
|
|
|
div:first-child {
|
|
display: flex;
|
|
}
|
|
|
|
p {
|
|
margin-bottom: 0px !important;
|
|
color: var(--slate12);
|
|
}
|
|
|
|
span {
|
|
color: var(--slate11);
|
|
}
|
|
|
|
p,
|
|
span {
|
|
font-weight: 400;
|
|
font-size: 12px;
|
|
line-height: 20px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.create-new-app-dropdown {
|
|
.button:first-child {
|
|
padding: 0 !important;
|
|
}
|
|
|
|
.dropdown-toggle::after {
|
|
border: none !important;
|
|
content: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.5 7.03906C10.5 6.34871 11.0596 5.78906 11.75 5.78906C12.4404 5.78906 13 6.34871 13 7.03906C13 7.72942 12.4404 8.28906 11.75 8.28906C11.0596 8.28906 10.5 7.72942 10.5 7.03906ZM10.5 12.0391C10.5 11.3487 11.0596 10.7891 11.75 10.7891C12.4404 10.7891 13 11.3487 13 12.0391C13 12.7294 12.4404 13.2891 11.75 13.2891C11.0596 13.2891 10.5 12.7294 10.5 12.0391ZM11.75 15.7891C11.0596 15.7891 10.5 16.3487 10.5 17.0391C10.5 17.7294 11.0596 18.2891 11.75 18.2891C12.4404 18.2891 13 17.7294 13 17.0391C13 16.3487 12.4404 15.7891 11.75 15.7891Z' fill='%23fff'/%3E%3C/svg%3E%0A");
|
|
transform: rotate(360deg);
|
|
width: 14px;
|
|
margin: 0 !important;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 8px 0px 0px 0px;
|
|
}
|
|
}
|
|
|
|
.sso-page-loader-card {
|
|
background-color: var(--slate2) !important;
|
|
height: 100%;
|
|
|
|
.card-header {
|
|
background-color: var(--slate2) !important;
|
|
}
|
|
}
|
|
|
|
.workspace-nav-list-wrap {
|
|
padding: 20px 20px 20px 20px;
|
|
height: calc(100vh - 116px) !important;
|
|
}
|
|
|
|
.upload-user-form span.file-upload-error {
|
|
color: var(--tomato10) !important;
|
|
margin-top: 12px 0px 0px 0px;
|
|
}
|
|
|
|
.tj-onboarding-phone-input {
|
|
width: 392px !important;
|
|
height: 40px;
|
|
padding: 8px 12px;
|
|
gap: 8px;
|
|
margin-bottom: 12px;
|
|
background: #FFFFFF;
|
|
border: 1px solid #D7DBDF !important;
|
|
border-radius: 0px 4px 4px 0px !important;
|
|
|
|
&:hover {
|
|
border: 1px solid #466BF2 !important;
|
|
}
|
|
}
|
|
|
|
.tj-onboarding-phone-input-wrapper {
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.theme-dark {
|
|
.tj-onboarding-phone-input-wrapper {
|
|
.flag-dropdown {
|
|
background-color: #1f2936 !important;
|
|
|
|
.country-list {
|
|
background-color: #1f2936 !important;
|
|
background: #1f2936;
|
|
|
|
li {
|
|
.country .highlight {
|
|
background-color: #3a3f42;
|
|
color: #000 !important;
|
|
|
|
div {
|
|
.country-name {
|
|
color: #6b6b6b !important;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
&:hover {
|
|
background-color: #2b2f31;
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.react-tel-input .country-list .country.highlight {
|
|
color: #6b6b6b;
|
|
}
|
|
}
|
|
|
|
#global-settings-popover {
|
|
padding: 24px;
|
|
gap: 20px;
|
|
max-width: 377px !important;
|
|
height: 316px !important;
|
|
background: #FFFFFF;
|
|
border: 1px solid #E6E8EB;
|
|
box-shadow: 0px 32px 64px -12px rgba(16, 24, 40, 0.14);
|
|
border-radius: 6px;
|
|
margin-top: -13px;
|
|
|
|
|
|
.input-with-icon {
|
|
justify-content: flex-end
|
|
}
|
|
|
|
.form-check-input {
|
|
padding-right: 8px;
|
|
}
|
|
|
|
.global-popover-div-wrap-width {
|
|
width: 156px !important;
|
|
}
|
|
|
|
.form-switch {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.global-popover-div-wrap {
|
|
padding: 0px;
|
|
gap: 75px;
|
|
width: 329px;
|
|
height: 32px;
|
|
margin-bottom: 20px !important;
|
|
justify-content: space-between;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0px !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.global-popover-text {
|
|
font-family: 'IBM Plex Sans';
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
font-size: 12px;
|
|
line-height: 20px;
|
|
color: #11181C;
|
|
|
|
|
|
}
|
|
|
|
.maximum-canvas-width-input-select {
|
|
padding: 6px 10px;
|
|
gap: 17px;
|
|
width: 60px;
|
|
height: 32px;
|
|
background: #FFFFFF;
|
|
border: 1px solid #D7DBDF;
|
|
border-radius: 0px 6px 6px 0px;
|
|
}
|
|
|
|
.maximum-canvas-width-input-field {
|
|
padding: 6px 10px;
|
|
gap: 17px;
|
|
width: 97px;
|
|
height: 32px;
|
|
background: #FFFFFF;
|
|
border: 1px solid #D7DBDF;
|
|
border-top-left-radius: 6px;
|
|
border-bottom-left-radius: 6px;
|
|
border-right: none !important;
|
|
|
|
|
|
}
|
|
|
|
.canvas-background-holder {
|
|
padding: 6px 10px;
|
|
gap: 6px;
|
|
width: 120px;
|
|
height: 32px;
|
|
background: #FFFFFF;
|
|
display: flex;
|
|
align-items: center;
|
|
border: 1px solid #D7DBDF;
|
|
border-radius: 6px;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.export-app-btn {
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 6px 16px;
|
|
gap: 6px;
|
|
width: 158px;
|
|
height: 32px;
|
|
font-family: 'IBM Plex Sans';
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
color: #3E63DD;
|
|
background: #F0F4FF;
|
|
border-radius: 6px;
|
|
border: none;
|
|
}
|
|
|
|
.tj-btn-tertiary {
|
|
padding: 10px 20px;
|
|
gap: 8px;
|
|
width: 112px;
|
|
height: 40px;
|
|
background: #FFFFFF;
|
|
border: 1px solid #D7DBDF;
|
|
border-radius: 6px;
|
|
|
|
&:hover {
|
|
border: 1px solid #C1C8CD;
|
|
color: #687076;
|
|
}
|
|
|
|
&:active {
|
|
border: 1px solid #11181C;
|
|
color: #11181C;
|
|
}
|
|
}
|
|
|
|
.export-table-button {
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
|
|
#global-settings-popover.theme-dark {
|
|
background-color: $bg-dark-light !important;
|
|
border: 1px solid #2B2F31;
|
|
|
|
.maximum-canvas-width-input-select {
|
|
background-color: $bg-dark-light !important;
|
|
border: 1px solid #324156;
|
|
color: $white;
|
|
}
|
|
|
|
.export-app-btn {
|
|
background: #192140;
|
|
}
|
|
|
|
.fx-canvas div {
|
|
background-color: transparent !important;
|
|
}
|
|
}
|
|
|
|
.released-version-popup-container {
|
|
width: 100%;
|
|
position: absolute;
|
|
display: flex;
|
|
justify-content: center;
|
|
top: 65px;
|
|
|
|
.released-version-popup-cover {
|
|
width: 250px;
|
|
height: fit-content;
|
|
margin: 0;
|
|
z-index: 1;
|
|
|
|
.popup-content {
|
|
background-color: #121212;
|
|
padding: 16px 18px 0px 16px;
|
|
border-radius: 6px;
|
|
|
|
p {
|
|
font-size: 14px;
|
|
font-family: IBM Plex Sans;
|
|
color: #ECEDEE;
|
|
}
|
|
}
|
|
}
|
|
|
|
.error-shake {
|
|
animation: shake 0.82s cubic-bezier(.36, .07, .19, .97) both;
|
|
transform: translate3d(0, 0, 0);
|
|
backface-visibility: hidden;
|
|
perspective: 10000px;
|
|
}
|
|
|
|
@keyframes shake {
|
|
|
|
10%,
|
|
90% {
|
|
transform: translate3d(-1px, 0, 0);
|
|
}
|
|
|
|
20%,
|
|
80% {
|
|
transform: translate3d(2px, 0, 0);
|
|
}
|
|
|
|
30%,
|
|
50%,
|
|
70% {
|
|
transform: translate3d(-4px, 0, 0);
|
|
}
|
|
|
|
40%,
|
|
60% {
|
|
transform: translate3d(4px, 0, 0);
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.profile-page-content-wrap {
|
|
background-color: var(--page-default);
|
|
padding-top: 40px;
|
|
}
|
|
|
|
.profile-page-card {
|
|
background-color: var(--base);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.all-apps-link-cotainer {
|
|
border-radius: 6px !important;
|
|
}
|
|
|
|
.workspace-variable-table-card {
|
|
height: calc(100vh - 208px);
|
|
}
|
|
|
|
.workspace-constant-table-card {
|
|
margin: 0 auto;
|
|
width: 880px;
|
|
min-height: calc(100vh - 308px);
|
|
|
|
.manage-constant-wrapper-card {
|
|
max-height: calc(100vh - 260px);
|
|
}
|
|
|
|
.empty-state-org-constants {
|
|
padding-top: 5rem;
|
|
|
|
.info {
|
|
color: var(--slate11);
|
|
}
|
|
}
|
|
|
|
.workspace-constant-card-body {
|
|
min-height: calc(100vh - 408px);
|
|
background: var(--base);
|
|
|
|
}
|
|
|
|
.constant-table-wrapper {
|
|
height: calc(100vh - 403px);
|
|
overflow-y: auto;
|
|
height: 100%;
|
|
}
|
|
|
|
.constant-table-card {
|
|
min-height: 420px;
|
|
padding: 16px;
|
|
padding-top: 0px;
|
|
padding-bottom: 0px;
|
|
|
|
.p-3-constants {
|
|
padding: 1rem !important;
|
|
padding-left: 0px !important;
|
|
}
|
|
}
|
|
|
|
.card-footer {
|
|
border-top: none !important;
|
|
}
|
|
|
|
.left-menu .tj-list-item {
|
|
width: 148px
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.variables-table-wrapper {
|
|
tr {
|
|
border-width: 0px !important;
|
|
}
|
|
}
|
|
|
|
.constant-table-wrapper {
|
|
tr {
|
|
border-width: 0px !important;
|
|
}
|
|
}
|
|
|
|
.home-page-content-container {
|
|
max-width: 880px;
|
|
|
|
@media only screen and (max-width: 768px) {
|
|
margin-bottom: 0rem !important;
|
|
|
|
.liner {
|
|
width: unset !important;
|
|
}
|
|
|
|
.app-list {
|
|
overflow-y: auto;
|
|
height: calc(100vh - 26rem);
|
|
|
|
.skeleton-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.col {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.card-skeleton-container {
|
|
width: 304px;
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
.menu-ico {
|
|
display: none !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media only screen and (min-width: 1584px) and (max-width: 1727px) {
|
|
|
|
.edit-button,
|
|
.launch-button {
|
|
width: 113px !important;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
@media only screen and (max-width: 1583px) and (min-width: 1312px) {
|
|
|
|
.homepage-app-card-list-item {
|
|
max-width: 264px;
|
|
|
|
.edit-button,
|
|
.launch-button {
|
|
width: 109px !important;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
@media only screen and (min-width: 1728px) {
|
|
|
|
.homepage-app-card-list-item {
|
|
max-width: 304px;
|
|
|
|
.edit-button,
|
|
.launch-button {
|
|
width: 129px !important;
|
|
}
|
|
}
|
|
|
|
.home-page-content-container {
|
|
max-width: 976px;
|
|
}
|
|
|
|
.liner {
|
|
width: 976px;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 992px) {
|
|
.homepage-app-card-list-item-wrap {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
width: 100%;
|
|
margin-top: 22px;
|
|
}
|
|
|
|
.homepage-app-card-list-item {
|
|
max-width: 304px !important;
|
|
flex-basis: 100%;
|
|
|
|
.edit-button,
|
|
.launch-button {
|
|
width: 129px !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media only screen and (min-width: 993px) and (max-width: 1311px) {
|
|
.home-page-content-container {
|
|
max-width: 568px;
|
|
}
|
|
|
|
.homepage-app-card-list-item-wrap {
|
|
row-gap: 20px;
|
|
}
|
|
|
|
.homepage-app-card-list-item {
|
|
max-width: 269px;
|
|
flex-basis: 100%;
|
|
|
|
.edit-button,
|
|
.launch-button {
|
|
width: 111.5px !important;
|
|
}
|
|
}
|
|
|
|
.liner {
|
|
width: 568px;
|
|
}
|
|
}
|
|
|
|
.tj-docs-link {
|
|
color: var(--indigo9) !important;
|
|
text-decoration: none;
|
|
list-style: none;
|
|
}
|
|
|
|
.datasource-copy-button {
|
|
width: 87px;
|
|
height: 32px;
|
|
}
|
|
|
|
.datasource-edit-btn {
|
|
height: 27px;
|
|
margin-left: 12px;
|
|
}
|
|
|
|
.datasource-edit-modal {
|
|
|
|
.modal-content,
|
|
.modal-body,
|
|
.modal-header,
|
|
.modal-title,
|
|
.modal-body-content,
|
|
.modal-sidebar,
|
|
.card {
|
|
background-color: var(--base) !important;
|
|
color: var(--slate12) !important;
|
|
border-color: var(--slate5) !important;
|
|
}
|
|
|
|
.datasource-modal-sidebar-footer {
|
|
.footer-text {
|
|
color: var(--slate12) !important;
|
|
}
|
|
}
|
|
|
|
.form-control-plaintext {
|
|
color: var(--slate12) !important;
|
|
}
|
|
|
|
.card {
|
|
&:hover {
|
|
background-color: var(--slate2) !important;
|
|
}
|
|
}
|
|
|
|
input:disabled {
|
|
background-color: var(--slate3) !important;
|
|
}
|
|
|
|
textarea:disabled {
|
|
background-color: var(--slate3) !important;
|
|
}
|
|
|
|
.react-select__control--is-disabled {
|
|
background-color: var(--slate3) !important;
|
|
}
|
|
}
|
|
|
|
.org-edit-icon {
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: 6px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
svg {
|
|
height: 14px;
|
|
width: 14px;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.marketplace-body {
|
|
height: calc(100vh - 64px) !important;
|
|
overflow-y: auto;
|
|
background-color: var(--page-default);
|
|
}
|
|
|
|
.plugins-card {
|
|
background-color: var(--base);
|
|
border: 1px solid var(--slate3);
|
|
box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
|
|
border-radius: 6px;
|
|
|
|
.card-body-alignment {
|
|
min-height: 145px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
}
|
|
|
|
.tag-container {
|
|
width: 38px;
|
|
height: 18px;
|
|
background: linear-gradient(271.34deg, rgba(255, 95, 109, 0.12) -88.47%, rgba(255, 195, 113, 0.12) 94.89%);
|
|
border-radius: 100px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 1px 7px;
|
|
|
|
span {
|
|
font-size: 11px;
|
|
line-height: 16px;
|
|
font-weight: 500;
|
|
background: linear-gradient(96.1deg, #FF5F6D -15.44%, #FFC371 99.37%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
}
|
|
|
|
.template-source-name {
|
|
color: var(--slate12) !important;
|
|
}
|
|
|
|
.marketplace-install {
|
|
color: var(--indigo9);
|
|
}
|
|
|
|
.popover {
|
|
.popover-arrow {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.shareable-link {
|
|
.input-group {
|
|
.input-group-text {
|
|
border-color: var(--slate7);
|
|
color: var(--slate12);
|
|
background-color: var(--slate3);
|
|
}
|
|
|
|
.app-name-slug-input {
|
|
input {
|
|
border-color: var(--grass9);
|
|
}
|
|
}
|
|
}
|
|
|
|
.input-group {
|
|
display: flex;
|
|
|
|
.tj-app-input textarea {
|
|
width: 600px;
|
|
border-radius: 0px !important;
|
|
margin-bottom: 0px !important;
|
|
background-color: #efefef4d;
|
|
color: #545454;
|
|
}
|
|
}
|
|
}
|
|
|
|
.confirm-dialogue-modal {
|
|
background: var(--base);
|
|
|
|
.modal-header {
|
|
background: var(--base);
|
|
color: var(--slate12);
|
|
border-bottom: 1px solid var(--slate5);
|
|
}
|
|
}
|
|
|
|
|
|
.gitsync-modal-body {
|
|
align-items: center;
|
|
justify-content: center;
|
|
display: flex;
|
|
|
|
.p {
|
|
width: auto;
|
|
}
|
|
|
|
.loader {
|
|
border: 4px solid #f3f3f3;
|
|
/* Light gray border */
|
|
border-top: 4px solid #3498db;
|
|
/* Blue border on top */
|
|
border-radius: 50%;
|
|
width: 40px;
|
|
height: 40px;
|
|
animation: spin 1s linear infinite;
|
|
/* Rotation animation */
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
}
|
|
|
|
.box-container {
|
|
border: 1px solid #ccc;
|
|
background-color: #f0f0f0;
|
|
border-radius: 8px;
|
|
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
|
|
|
|
.box-content {
|
|
padding: 10px;
|
|
/* Add padding for spacing inside the box */
|
|
|
|
p {
|
|
max-width: 100%;
|
|
margin: 0px;
|
|
word-wrap: break-word;
|
|
/* Ensure the paragraph wraps within the box */
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.theme-dark {
|
|
.icon-widget-popover {
|
|
.search-box-wrapper input {
|
|
color: #f4f6fa !important;
|
|
}
|
|
|
|
.search-box-wrapper input:focus {
|
|
background-color: #1c252f !important;
|
|
}
|
|
}
|
|
|
|
.shareable-link {
|
|
.tj-app-input textarea {
|
|
background-color: #5e656e !important;
|
|
color: #f4f6fa !important;
|
|
border: none !important;
|
|
}
|
|
}
|
|
|
|
.icon-widget-popover {
|
|
.search-box-wrapper .input-icon-addon {
|
|
min-width: 2.5rem !important;
|
|
}
|
|
|
|
.search-box-wrapper input {
|
|
color: var(--slate12) !important;
|
|
}
|
|
}
|
|
|
|
.shareable-link-container,
|
|
.app-slug-container {
|
|
.field-name {
|
|
color: var(--slate-12) !important;
|
|
}
|
|
|
|
input.slug-input {
|
|
background: #1f2936 !important;
|
|
color: #f4f6fa !important;
|
|
border-color: #324156 !important;
|
|
}
|
|
|
|
.applink-text {
|
|
background-color: #2b394b !important;
|
|
}
|
|
|
|
.input-group-text {
|
|
background-color: #2b394b !important;
|
|
}
|
|
|
|
.tj-text-input {
|
|
border-color: #324156 !important;
|
|
}
|
|
|
|
.input-with-icon {
|
|
.form-control {
|
|
background-color: #1f2936 !important;
|
|
border-color: #3E4B5A !important;
|
|
color: #fff !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.dark-theme {
|
|
.manage-app-users-footer {
|
|
.default-secondary-button {
|
|
background-color: var(--indigo9);
|
|
color: var(--base-black);
|
|
}
|
|
}
|
|
}
|
|
|
|
.instance-all-users {
|
|
.users-table {
|
|
tbody {
|
|
tr>td>span {
|
|
max-width: 85px;
|
|
}
|
|
|
|
tr>td>a {
|
|
max-width: 140px;
|
|
}
|
|
}
|
|
|
|
thead {
|
|
tr {
|
|
gap: 0px;
|
|
}
|
|
|
|
tr>th {
|
|
min-width: 203px;
|
|
}
|
|
}
|
|
|
|
.workspace-folder-modal {
|
|
.tj-text-input.dark {
|
|
background: #202425;
|
|
border-color: var(--slate7) !important;
|
|
}
|
|
}
|
|
|
|
.slug-ellipsis {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
width: 150px;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.audit-log {
|
|
width: 880px;
|
|
margin: 0 auto;
|
|
|
|
.card {
|
|
background: var(--base);
|
|
border: 1px solid var(--slate7) !important;
|
|
box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05) !important;
|
|
|
|
.card-header {
|
|
background: var(--slate3);
|
|
padding: 15px 16px;
|
|
gap: 12px;
|
|
height: 62px;
|
|
border-top-left-radius: 6px;
|
|
border-top-right-radius: 6px;
|
|
}
|
|
|
|
.form-label {
|
|
font-size: 12px;
|
|
font-weight: 500px;
|
|
margin-bottom: 4px !important;
|
|
color: var(--slate12);
|
|
}
|
|
}
|
|
}
|
|
|
|
.break-all {
|
|
word-break: break-all;
|
|
}
|
|
|
|
.instance-settings-page {
|
|
width: 880px;
|
|
margin: 0 auto;
|
|
background: var(--base);
|
|
|
|
.page-wrapper {
|
|
margin-bottom: 50px !important;
|
|
}
|
|
|
|
.card {
|
|
background: var(--base);
|
|
border: 1px solid var(--slate7) !important;
|
|
box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05) !important;
|
|
width: 880px;
|
|
|
|
.card-header {
|
|
padding: 24px 24px;
|
|
gap: 12px;
|
|
height: 72px;
|
|
border-top-left-radius: 6px;
|
|
border-top-right-radius: 6px;
|
|
|
|
.title-banner-wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
width: 878px;
|
|
}
|
|
|
|
}
|
|
|
|
.form-label {
|
|
font-size: 12px;
|
|
font-weight: 500px;
|
|
margin-bottom: 4px !important;
|
|
color: var(--slate12);
|
|
}
|
|
|
|
.card-footer {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
padding: 24px 32px;
|
|
gap: 8px;
|
|
border-top: 1px solid var(--slate5) !important;
|
|
background: var(--base);
|
|
margin-top: 0px !important;
|
|
align-Self: 'stretch';
|
|
height: 88px;
|
|
}
|
|
|
|
.card-body {
|
|
height: 467px;
|
|
padding: 24px;
|
|
|
|
.form-group {
|
|
.tj-app-input {
|
|
.form-control {
|
|
&:disabled {
|
|
background: var(--slate3) !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.form-group.tj-app-input {
|
|
margin-bottom: 0rem !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.workspace-folder-modal {
|
|
.tj-text-input.dark {
|
|
background: #202425;
|
|
border-color: var(--slate7) !important;
|
|
}
|
|
}
|
|
|
|
.slug-ellipsis {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
width: 150px;
|
|
}
|
|
|
|
.app-slug-container,
|
|
.shareable-link-container,
|
|
.workspace-folder-modal {
|
|
.tj-app-input {
|
|
padding-bottom: 0px !important;
|
|
}
|
|
|
|
.label {
|
|
font-weight: 400;
|
|
font-size: 10px;
|
|
height: 0px;
|
|
padding: 4px 0px 16px 0px;
|
|
}
|
|
|
|
.tj-input-error {
|
|
color: var(--tomato10);
|
|
}
|
|
|
|
.tj-text-input {
|
|
width: auto !important;
|
|
background: var(--slate3);
|
|
color: var(--slate9);
|
|
height: auto !important;
|
|
margin-bottom: 5px;
|
|
border-color: var(--slate7);
|
|
|
|
&:hover {
|
|
box-shadow: none;
|
|
}
|
|
|
|
&:active {
|
|
border: 1px solid #D7DBDF;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
.input-with-icon {
|
|
flex: none;
|
|
|
|
.icon-container {
|
|
right: 20px;
|
|
top: calc(50% - 13px);
|
|
}
|
|
}
|
|
|
|
.label-info {
|
|
color: #687076;
|
|
}
|
|
|
|
.label-success {
|
|
color: #3D9A50;
|
|
}
|
|
|
|
|
|
.workspace-spinner {
|
|
color: #889096 !important;
|
|
width: 16px;
|
|
height: 16px;
|
|
align-self: center;
|
|
}
|
|
|
|
.cancel-btn {
|
|
color: var(--indigo9);
|
|
}
|
|
}
|
|
|
|
.confirm-dialogue-modal {
|
|
background: var(--base);
|
|
}
|
|
|
|
.table-editor-component-row {
|
|
.rdt.cell-type-datepicker {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.has-multiselect {
|
|
.select-search-input {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.audit-log {
|
|
background-color: var(--slate2);
|
|
width: unset;
|
|
|
|
.tj-ms {
|
|
width: unset;
|
|
}
|
|
|
|
.filter-by-section {
|
|
height: 90px;
|
|
}
|
|
|
|
.select-search__select {
|
|
.select-search__options {
|
|
margin-left: -24px;
|
|
margin-bottom: 0px;
|
|
|
|
.select-search__row {
|
|
button {
|
|
overflow: hidden !important;
|
|
text-overflow: ellipsis !important;
|
|
white-space: nowrap;
|
|
border-radius: 0;
|
|
}
|
|
|
|
:hover {
|
|
background-color: var(--slate3) !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.select-search-dark__select {
|
|
padding: 0px;
|
|
border: none;
|
|
|
|
.select-search-dark__options {
|
|
margin-bottom: 0px;
|
|
|
|
.select-search-dark__option,
|
|
.select-search-dark__not-found {
|
|
background-color: var(--base);
|
|
color: var(--slate12);
|
|
border: 1px solid var(--slate5);
|
|
box-shadow: 0px 32px 64px -12px rgba(16, 24, 40, 0.14);
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.theme-dark .card-container {
|
|
background-color: #121212 !important
|
|
}
|
|
|
|
.version-select {
|
|
.react-select__menu {
|
|
.react-select__menu-list {
|
|
max-height: 150px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.generate-cell-value-component-div-wrapper {
|
|
|
|
.form-control-plaintext:focus-visible {
|
|
outline-color: #dadcde;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.form-control-plaintext:hover {
|
|
outline-color: #dadcde;
|
|
border-radius: 4px;
|
|
}
|
|
}
|
|
|
|
.dark-theme {
|
|
.generate-cell-value-component-div-wrapper {
|
|
|
|
.form-control-plaintext:focus-visible {
|
|
filter: invert(-1);
|
|
}
|
|
|
|
.form-control-plaintext:hover {
|
|
filter: invert(-1);
|
|
}
|
|
}
|
|
}
|
|
|
|
.progress-bar {
|
|
width: 100%;
|
|
height: 6px;
|
|
background-color: var(--amber4);
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.progress {
|
|
height: 100%;
|
|
transition: width 0.5s ease-in-out;
|
|
}
|
|
|
|
.app-slug-container,
|
|
.workspace-folder-modal {
|
|
.tj-app-input {
|
|
padding-bottom: 0px !important;
|
|
|
|
.is-invalid {
|
|
border-color: var(--tomato10) !important;
|
|
}
|
|
|
|
.is-invalid:focus {
|
|
border-color: var(--tomato10) !important;
|
|
}
|
|
}
|
|
|
|
.tj-input-error {
|
|
height: 32px;
|
|
color: var(--tomato10);
|
|
font-weight: 400;
|
|
font-size: 10px;
|
|
height: 0px;
|
|
padding: 4px 0px 16px 0px;
|
|
}
|
|
}
|
|
|
|
.jet-container-loading {
|
|
margin: 0 auto;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.jet-container-json-form {
|
|
padding: 20px;
|
|
|
|
.DateRangePickerInput {
|
|
width: 100% !important;
|
|
}
|
|
|
|
.dropzone {
|
|
aside {
|
|
width: 100% !important;
|
|
}
|
|
}
|
|
|
|
fieldset {
|
|
width: 100%;
|
|
|
|
.json-form-wrapper {
|
|
margin-bottom: 4px;
|
|
|
|
// overrides properties of text widget in custom schema form
|
|
.text-widget {
|
|
height: 100% !important;
|
|
}
|
|
|
|
.text-widget[style*="font-size: 14px;"] {
|
|
// height: 21px !important;
|
|
|
|
div {
|
|
overflow-y: visible !important;
|
|
}
|
|
}
|
|
|
|
.text-widget[style*="font-size: 20px;"] {
|
|
// height: 30px !important;
|
|
background-color: red;
|
|
|
|
div {
|
|
overflow-y: visible !important;
|
|
}
|
|
}
|
|
|
|
|
|
.widget-button {
|
|
button {
|
|
width: auto !important;
|
|
min-width: 140px !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.freeze-scroll {
|
|
#real-canvas {
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
.custom-css-input-container span.cm-error {
|
|
background-color: transparent;
|
|
text-decoration: underline;
|
|
text-decoration-color: red;
|
|
text-decoration-style: dashed;
|
|
}
|
|
|
|
.custom-styles-wrapper {
|
|
height: calc(100vh - 156px);
|
|
overflow: auto;
|
|
|
|
.card-title {
|
|
padding-left: 30px;
|
|
}
|
|
}
|
|
|
|
.org-settings-info {
|
|
background-color: var(--slate2);
|
|
border: 1px solid var(--slate3);
|
|
}
|
|
|
|
.badge-warning {
|
|
background-color: var(--amber7) !important;
|
|
}
|
|
|
|
.workspace-variables-alert-banner {
|
|
width: inherit;
|
|
background-color: #FFF9ED;
|
|
border-color: #FFE3A2;
|
|
margin-bottom: 0px;
|
|
padding: 8px 16px;
|
|
border-radius: 0px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
color: var(--amber8);
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
line-height: 16px;
|
|
letter-spacing: 0.4px;
|
|
text-align: left;
|
|
box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.alert-banner-type-text {
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
line-height: 16px;
|
|
letter-spacing: 0.4px;
|
|
text-align: left;
|
|
}
|
|
|
|
.tj-app-input .alert-component.workspace-variables-alert-banner {
|
|
color: var(--amber8);
|
|
border-color: var(--amber3);
|
|
}
|
|
|
|
.form-label-restricted {
|
|
display: none;
|
|
}
|
|
|
|
.ldap-login-page {
|
|
.common-auth-signup-container-wrapper {
|
|
margin-top: 150px;
|
|
}
|
|
|
|
.ldap-login-header {
|
|
margin-bottom: 10px;
|
|
|
|
h2 {
|
|
color: #111827;
|
|
font-size: 44px;
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
|
|
.signup-password-hide-img {
|
|
top: 24%;
|
|
}
|
|
|
|
.ldap-form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
#tooltip-for-org-constant-cell,
|
|
#tooltip-for-org-input-disabled {
|
|
padding: 12px 16px !important;
|
|
white-space: pre-line !important;
|
|
max-width: 500px !important;
|
|
z-index: 1 !important;
|
|
|
|
.react-tooltip-arrow {
|
|
background: inherit !important;
|
|
}
|
|
}
|
|
|
|
.query-rename-input {
|
|
|
|
&:focus,
|
|
&:active {
|
|
box-shadow: 0px 0px 0px 2px #C6D4F9;
|
|
border: 1px solid var(--light-indigo-09, var(--indigo9));
|
|
}
|
|
}
|
|
|
|
.btn-query-panel-header {
|
|
height: 28px;
|
|
width: 28px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 6px;
|
|
background-color: transparent;
|
|
border: none;
|
|
|
|
&.active {
|
|
background-color: var(--slate5) !important;
|
|
}
|
|
|
|
&:hover,
|
|
&:focus {
|
|
background-color: var(--slate4) !important;
|
|
}
|
|
}
|
|
|
|
.tjdb-dashboard-scrollbar {
|
|
width: 403px !important;
|
|
|
|
.action-description {
|
|
color: var(--slate9);
|
|
font-size: 12px;
|
|
margin-left: 20px;
|
|
}
|
|
|
|
.tj-foreignKey {
|
|
.tj-secondary-btn {
|
|
font-size: 12px;
|
|
background: transparent !important;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.tjdb-rowForm-scrollbar {
|
|
width: 494px !important;
|
|
|
|
.action-description {
|
|
color: var(--slate9);
|
|
font-size: 12px;
|
|
margin-left: 20px;
|
|
}
|
|
|
|
.tj-foreignKey {
|
|
.tj-secondary-btn {
|
|
font-size: 12px;
|
|
background: transparent !important;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
|
|
svg {
|
|
path {
|
|
fill: #3e63dd !important
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.tjdb-mainCellEdit-scrollbar {
|
|
width: 300px !important;
|
|
|
|
.tjdb-cellmenu-error,
|
|
.tjdb-cellmenu-loader {
|
|
height: 177px;
|
|
}
|
|
|
|
.action-description {
|
|
color: var(--slate9);
|
|
font-size: 12px;
|
|
margin-left: 20px;
|
|
}
|
|
|
|
.tj-foreignKey {
|
|
.tj-secondary-btn {
|
|
font-size: 12px;
|
|
background: transparent !important;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
|
|
svg {
|
|
path {
|
|
fill: #3e63dd !important
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.tjdb-cellEdit-scrollbar {
|
|
width: 266px !important;
|
|
|
|
.action-description {
|
|
color: var(--slate9);
|
|
font-size: 12px;
|
|
margin-left: 20px;
|
|
}
|
|
|
|
.tj-foreignKey {
|
|
.tj-secondary-btn {
|
|
font-size: 12px;
|
|
background: transparent !important;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
|
|
svg {
|
|
path {
|
|
fill: #3e63dd !important
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
.tj-scrollbar {
|
|
|
|
::-webkit-scrollbar,
|
|
&::-webkit-scrollbar {
|
|
width: 16px;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb,
|
|
&::-webkit-scrollbar-thumb {
|
|
border: 4px solid var(--base);
|
|
border-radius: 8px;
|
|
background-color: var(--slate4) !important;
|
|
}
|
|
|
|
::-webkit-scrollbar-track,
|
|
&::-webkit-scrollbar-track {
|
|
background-color: var(--base);
|
|
}
|
|
|
|
}
|
|
|
|
.form-check>.form-check-input:not(:checked) {
|
|
background-color: var(--base);
|
|
border-color: var(--slate7);
|
|
}
|
|
|
|
/*
|
|
* remove this once whole app is migrated to new styles. use only `theme-dark` class everywhere.
|
|
* This is added since some of the pages are in old theme and making changes to `theme-dark` styles can break UI style somewhere else
|
|
*/
|
|
.tj-dark-mode {
|
|
background-color: var(--base) !important;
|
|
color: var(--base-black) !important;
|
|
}
|
|
|
|
.tj-list-btn {
|
|
border-radius: 6px;
|
|
|
|
&:hover {
|
|
background-color: var(--slate4);
|
|
}
|
|
|
|
&.active {
|
|
background-color: var(--slate5);
|
|
}
|
|
}
|
|
|
|
.tj-list-option {
|
|
&.active {
|
|
background-color: var(--indigo2);
|
|
}
|
|
}
|
|
|
|
.runjs-parameter-badge {
|
|
max-width: 104px;
|
|
height: 28px !important;
|
|
padding: 2px 6px !important;
|
|
}
|
|
|
|
.release-buttons {
|
|
.release-button {
|
|
display: flex;
|
|
padding: 4px 12px;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex: 1 0 0;
|
|
width: 84px;
|
|
height: 28px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.released-button {
|
|
background-color: #F1F3F5;
|
|
color: #C1C8CD;
|
|
}
|
|
|
|
.nav-item {
|
|
background-color: transparent !important;
|
|
}
|
|
}
|
|
|
|
.modal-divider {
|
|
border-top: 1px solid #dee2e6;
|
|
padding: 10px;
|
|
}
|
|
|
|
.dark-theme-modal-divider {
|
|
border-top: 1px solid var(--slate5) !important;
|
|
padding: 10px;
|
|
|
|
.nav-item {
|
|
background-color: transparent !important;
|
|
}
|
|
}
|
|
|
|
.app-slug-container {
|
|
.label {
|
|
font-size: 9px !important;
|
|
}
|
|
}
|
|
|
|
.shareable-link-container {
|
|
.copy-container {
|
|
width: 0px;
|
|
margin-right: -12px;
|
|
}
|
|
|
|
.form-check-label {
|
|
font-size: 12px;
|
|
margin-left: 8px;
|
|
color: var(--base-slate-12);
|
|
}
|
|
|
|
.label-success,
|
|
.label-updated,
|
|
.tj-input-error,
|
|
.label-info {
|
|
font-size: 10px;
|
|
padding-top: 10px;
|
|
}
|
|
|
|
.input-with-icon {
|
|
.form-control {
|
|
height: 100%;
|
|
border-radius: 0px !important;
|
|
padding-right: 40px;
|
|
}
|
|
|
|
.is-invalid:focus {
|
|
border-color: var(--tomato9) !important;
|
|
}
|
|
|
|
.icon-container {
|
|
right: 12px;
|
|
top: calc(50% - 11px);
|
|
|
|
.spinner-border {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.input-group-text {
|
|
background: var(--slate3);
|
|
color: var(--slate9);
|
|
}
|
|
}
|
|
|
|
.manage-app-users-footer {
|
|
padding-bottom: 20px;
|
|
margin-top: 18px;
|
|
|
|
.default-secondary-button {
|
|
width: auto !important;
|
|
padding: 18px;
|
|
}
|
|
}
|
|
|
|
.share-disabled {
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.license-tooltip {
|
|
.nav-item {
|
|
line-height: 0px;
|
|
}
|
|
}
|
|
|
|
// Editor revamp styles
|
|
.main-wrapper {
|
|
.editor {
|
|
.header>.navbar {
|
|
background-color: var(--base) !important;
|
|
border-bottom: 1px solid var(--slate5);
|
|
z-index: 10;
|
|
}
|
|
}
|
|
}
|
|
|
|
.custom-gap-2 {
|
|
gap: 2px
|
|
}
|
|
|
|
// ToolJet Database buttons
|
|
|
|
.component-image-wrapper {
|
|
background-color: var(--slate3) !important;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.components-container {
|
|
margin-left: 16px;
|
|
margin-right: 16px;
|
|
}
|
|
|
|
.draggable-box-wrapper {
|
|
height: 86px;
|
|
width: 72px;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.component-card-group-wrapper {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
column-gap: 22px;
|
|
}
|
|
|
|
.component-card-group-container {
|
|
display: flex;
|
|
row-gap: 12px;
|
|
flex-direction: column;
|
|
padding-bottom: 12px;
|
|
padding-top: 12px;
|
|
}
|
|
|
|
.widgets-manager-header {
|
|
color: var(--slate12);
|
|
font-size: 14px;
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
line-height: 20px;
|
|
/* 142.857% */
|
|
margin-top: 16px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.components-container {
|
|
.tj-input {
|
|
margin-bottom: 16px;
|
|
}
|
|
}
|
|
|
|
.tj-widgets-search-input {
|
|
width: 266px;
|
|
height: 32px;
|
|
border-radius: 6px;
|
|
background-color: var(--base) !important;
|
|
font-size: 12px;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.release-button {
|
|
color: var(--indigo-01, #FDFDFE);
|
|
font-family: IBM Plex Sans;
|
|
font-size: 12px;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
line-height: 20px;
|
|
/* 166.667% */
|
|
display: flex;
|
|
padding: 4px 12px;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex: 1 0 0;
|
|
}
|
|
|
|
.editor-header-icon {
|
|
border-radius: 6px;
|
|
border: 1px solid var(--bases-transparent, rgba(255, 255, 255, 0.00));
|
|
background: var(--indigo3);
|
|
display: flex;
|
|
padding: 7px;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 8px;
|
|
height: 28px;
|
|
width: 28px;
|
|
}
|
|
|
|
.tj-header-avatar {
|
|
display: flex;
|
|
font-weight: 500;
|
|
width: 27px;
|
|
height: 26px;
|
|
padding: 4px 6px;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 10px;
|
|
flex-shrink: 0;
|
|
margin-bottom: 0px !important;
|
|
border-radius: 100% !important;
|
|
margin-left: -8px;
|
|
background-color: var(--slate5) !important;
|
|
color: var(--slate10) !important
|
|
}
|
|
|
|
.undo-redo-container {
|
|
position: absolute;
|
|
top: 10px;
|
|
display: flex;
|
|
right: 222px;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 28px;
|
|
gap: 2px;
|
|
|
|
div {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 28px;
|
|
width: 28px;
|
|
border-radius: 6px;
|
|
}
|
|
}
|
|
|
|
.sidebar-panel-header {
|
|
color: var(--slate12);
|
|
padding-left: 4px;
|
|
}
|
|
|
|
.modal-content {
|
|
background: var(--base);
|
|
color: var(--slate12);
|
|
}
|
|
|
|
.main-editor-canvas {
|
|
background-color: var(--base);
|
|
}
|
|
|
|
.event-manager-popover {
|
|
border: none;
|
|
/* Shadow/03 */
|
|
box-shadow: 0px 4px 6px -2px rgba(16, 24, 40, 0.03), 0px 12px 16px -4px rgba(16, 24, 40, 0.08);
|
|
|
|
.popover-body {
|
|
background-color: var(--base);
|
|
color: var(--slate12);
|
|
border: 1px solid var(--slate3, #F1F3F5);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
}
|
|
|
|
.copilot-toggle {
|
|
font-family: IBM Plex Sans;
|
|
font-size: 12px;
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
background-color: transparent !important;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.copilot-codehinter-wrap {
|
|
.CodeMirror.cm-s-monokai.CodeMirror-wrap {
|
|
border-radius: 0px;
|
|
}
|
|
}
|
|
|
|
.avatar-list-stacked {
|
|
display: flex;
|
|
}
|
|
|
|
.avatar-list-stacked .avatar {
|
|
margin-right: 0px !important;
|
|
}
|
|
|
|
.navbar-right-section {
|
|
border-left: 1px solid var(--slate5);
|
|
}
|
|
|
|
.modal-header {
|
|
background-color: var(--base);
|
|
border-bottom: 1px solid var(--slate5);
|
|
}
|
|
|
|
.sidebar-debugger {
|
|
.nav-item {
|
|
button:hover {
|
|
border-top-color: transparent;
|
|
border-left-color: transparent;
|
|
border-right-color: transparent;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tj-app-version-text {
|
|
color: var(--pink9);
|
|
}
|
|
|
|
.left-sidebar-comments {
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 48px;
|
|
}
|
|
|
|
.popover-body {
|
|
background-color: var(--base);
|
|
color: var(--slate12);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.popover {
|
|
border: none;
|
|
border-radius: 6px;
|
|
border: 1px solid var(--slate3, #F1F3F5);
|
|
background: var(--slate1, #FBFCFD);
|
|
box-shadow: 0px 2px 4px -2px rgba(16, 24, 40, 0.06), 0px 4px 8px -2px rgba(16, 24, 40, 0.10);
|
|
}
|
|
|
|
.canvas-codehinter-container {
|
|
.sketch-picker {
|
|
left: 70px !important;
|
|
top: 207px;
|
|
position: absolute !important;
|
|
}
|
|
}
|
|
|
|
.debugger-card-body {
|
|
margin-top: 8px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.left-sidebar-header-btn {
|
|
background-color: var(--base) !important;
|
|
width: 28px;
|
|
height: 28px;
|
|
padding: 7px !important;
|
|
|
|
&:focus-visible {
|
|
border: none !important;
|
|
outline: none !important;
|
|
box-shadow: none !important;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.navbar-seperator {
|
|
border: 1px solid var(--slate5, #2B2F31);
|
|
background: var(--slate1, #151718);
|
|
width: 1px;
|
|
height: 19px;
|
|
margin-left: 8px;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.CodeMirror {
|
|
background: var(--base);
|
|
}
|
|
|
|
.color-picker-input {
|
|
border: solid 1px #333c48;
|
|
height: 36px;
|
|
background-color: var(--slate1);
|
|
border: 1px solid var(--slate7);
|
|
|
|
&:hover {
|
|
background-color: var(--slate4);
|
|
border: 1px solid var(--slate8);
|
|
|
|
}
|
|
}
|
|
|
|
#popover-basic-2 {
|
|
.sketch-picker {
|
|
left: 7px;
|
|
width: 170px !important;
|
|
position: absolute !important;
|
|
|
|
}
|
|
}
|
|
|
|
.custom-gap-8 {
|
|
gap: 8px;
|
|
}
|
|
|
|
.color-slate-11 {
|
|
color: var(--slate11) !important;
|
|
}
|
|
|
|
.custom-gap-7 {
|
|
gap: 7px
|
|
}
|
|
|
|
.custom-gap-6 {
|
|
gap: 6px
|
|
}
|
|
|
|
.custom-gap-2 {
|
|
gap: 2px
|
|
}
|
|
|
|
.custom-gap-4 {
|
|
gap: 4px;
|
|
}
|
|
|
|
.text-black-000 {
|
|
color: var(--text-black-000) !important;
|
|
}
|
|
|
|
.custom-gap-12 {
|
|
gap: 12px
|
|
}
|
|
|
|
#inspector-tabpane-properties {
|
|
.accordion {
|
|
.accordion-item:last-child {
|
|
border-bottom: none !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.share-disabled {
|
|
opacity: 0.4;
|
|
}
|
|
|
|
// Editor revamp styles
|
|
.main-wrapper {
|
|
.editor {
|
|
.header>.navbar {
|
|
background-color: var(--base) !important;
|
|
border-bottom: 1px solid var(--slate5);
|
|
z-index: 10;
|
|
}
|
|
}
|
|
}
|
|
|
|
.custom-gap-2 {
|
|
gap: 2px
|
|
}
|
|
|
|
// ToolJet Database buttons
|
|
|
|
.component-image-wrapper {
|
|
background-color: var(--slate3) !important;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.components-container {
|
|
margin-left: 16px;
|
|
margin-right: 16px;
|
|
}
|
|
|
|
.draggable-box-wrapper {
|
|
height: 86px;
|
|
width: 72px;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.component-card-group-wrapper {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
column-gap: 22px;
|
|
}
|
|
|
|
.component-card-group-container {
|
|
display: flex;
|
|
row-gap: 12px;
|
|
flex-direction: column;
|
|
padding-bottom: 12px;
|
|
padding-top: 12px;
|
|
}
|
|
|
|
.widgets-manager-header {
|
|
color: var(--slate12);
|
|
font-size: 14px;
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
line-height: 20px;
|
|
/* 142.857% */
|
|
margin-top: 16px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.components-container {
|
|
.tj-input {
|
|
margin-bottom: 16px;
|
|
}
|
|
}
|
|
|
|
.tj-widgets-search-input {
|
|
width: 266px;
|
|
height: 32px;
|
|
border-radius: 6px;
|
|
background-color: var(--base) !important;
|
|
font-size: 12px;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.release-button {
|
|
color: var(--indigo-01, #FDFDFE);
|
|
font-family: IBM Plex Sans;
|
|
font-size: 12px;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
line-height: 20px;
|
|
/* 166.667% */
|
|
display: flex;
|
|
padding: 4px 12px;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex: 1 0 0;
|
|
}
|
|
|
|
.editor-header-icon {
|
|
border-radius: 6px;
|
|
border: 1px solid var(--bases-transparent, rgba(255, 255, 255, 0.00));
|
|
background: var(--indigo3);
|
|
display: flex;
|
|
padding: 7px;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 8px;
|
|
height: 28px;
|
|
width: 28px;
|
|
}
|
|
|
|
.tj-header-avatar {
|
|
display: flex;
|
|
font-weight: 500;
|
|
width: 27px;
|
|
height: 26px;
|
|
padding: 4px 6px;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 10px;
|
|
flex-shrink: 0;
|
|
margin-bottom: 0px !important;
|
|
border-radius: 100% !important;
|
|
margin-left: -8px;
|
|
background-color: var(--slate5) !important;
|
|
color: var(--slate10) !important
|
|
}
|
|
|
|
.undo-redo-container {
|
|
position: absolute;
|
|
top: 10px;
|
|
display: flex;
|
|
right: 222px;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 28px;
|
|
gap: 2px;
|
|
|
|
div {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 28px;
|
|
width: 28px;
|
|
border-radius: 6px;
|
|
}
|
|
}
|
|
|
|
.sidebar-panel-header {
|
|
color: var(--slate12);
|
|
padding-left: 4px;
|
|
}
|
|
|
|
.modal-content {
|
|
background: var(--base);
|
|
color: var(--slate12);
|
|
}
|
|
|
|
.main-editor-canvas {
|
|
background-color: var(--base);
|
|
}
|
|
|
|
.event-manager-popover {
|
|
border: none;
|
|
/* Shadow/03 */
|
|
box-shadow: 0px 4px 6px -2px rgba(16, 24, 40, 0.03), 0px 12px 16px -4px rgba(16, 24, 40, 0.08);
|
|
|
|
.popover-body {
|
|
background-color: var(--base);
|
|
color: var(--slate12);
|
|
border: 1px solid var(--slate3, #F1F3F5);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
}
|
|
|
|
.copilot-toggle {
|
|
font-family: IBM Plex Sans;
|
|
font-size: 12px;
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
background-color: transparent !important;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.copilot-codehinter-wrap {
|
|
.CodeMirror.cm-s-monokai.CodeMirror-wrap {
|
|
border-radius: 0px;
|
|
}
|
|
}
|
|
|
|
.avatar-list-stacked {
|
|
display: flex;
|
|
}
|
|
|
|
.avatar-list-stacked .avatar {
|
|
margin-right: 0px !important;
|
|
}
|
|
|
|
.navbar-right-section {
|
|
border-left: 1px solid var(--slate5);
|
|
}
|
|
|
|
.modal-header {
|
|
background-color: var(--base);
|
|
border-bottom: 1px solid var(--slate5);
|
|
}
|
|
|
|
.sidebar-debugger {
|
|
.nav-item {
|
|
button:hover {
|
|
border-top-color: transparent;
|
|
border-left-color: transparent;
|
|
border-right-color: transparent;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tj-app-version-text {
|
|
color: var(--pink9);
|
|
}
|
|
|
|
.left-sidebar-comments {
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 48px;
|
|
}
|
|
|
|
.popover-body {
|
|
background-color: var(--base);
|
|
color: var(--slate12);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.popover {
|
|
border: none;
|
|
border-radius: 6px;
|
|
border: 1px solid var(--slate3, #F1F3F5);
|
|
background: var(--slate1, #FBFCFD);
|
|
box-shadow: 0px 2px 4px -2px rgba(16, 24, 40, 0.06), 0px 4px 8px -2px rgba(16, 24, 40, 0.10);
|
|
}
|
|
|
|
.canvas-codehinter-container {
|
|
.sketch-picker {
|
|
left: 70px !important;
|
|
top: 207px;
|
|
}
|
|
}
|
|
|
|
.debugger-card-body {
|
|
margin-top: 8px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.left-sidebar-header-btn {
|
|
background-color: var(--base) !important;
|
|
width: 28px;
|
|
height: 28px;
|
|
padding: 7px !important;
|
|
|
|
&:focus-visible {
|
|
border: none !important;
|
|
outline: none !important;
|
|
box-shadow: none !important;
|
|
}
|
|
}
|
|
|
|
.navbar-seperator {
|
|
border: 1px solid var(--slate5, #2B2F31);
|
|
background: var(--slate1, #151718);
|
|
width: 1px;
|
|
height: 19px;
|
|
margin-left: 8px;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.CodeMirror {
|
|
background: var(--base);
|
|
}
|
|
|
|
.color-picker-input {
|
|
border: solid 1px #333c48;
|
|
height: 36px;
|
|
background-color: var(--slate1);
|
|
border: 1px solid var(--slate7);
|
|
|
|
&:hover {
|
|
background-color: var(--slate4);
|
|
border: 1px solid var(--slate8);
|
|
|
|
}
|
|
}
|
|
|
|
#popover-basic-2 {
|
|
.sketch-picker {
|
|
left: 7px;
|
|
width: 170px !important;
|
|
}
|
|
}
|
|
|
|
.custom-gap-8 {
|
|
gap: 8px;
|
|
}
|
|
|
|
.color-slate-11 {
|
|
color: var(--slate11) !important;
|
|
}
|
|
|
|
.custom-gap-6 {
|
|
gap: 6px
|
|
}
|
|
|
|
.custom-gap-2 {
|
|
gap: 2px
|
|
}
|
|
|
|
.custom-gap-3 {
|
|
gap: 3px;
|
|
}
|
|
|
|
.custom-gap-4 {
|
|
gap: 4px;
|
|
}
|
|
|
|
.text-black-000 {
|
|
color: var(--text-black-000) !important;
|
|
}
|
|
|
|
.custom-gap-12 {
|
|
gap: 12px
|
|
}
|
|
|
|
.custom-gap-16 {
|
|
gap: 16px;
|
|
}
|
|
|
|
.text-black-000 {
|
|
color: var(--text-black-000) !important;
|
|
}
|
|
|
|
.overflow-tooltip {
|
|
.tooltip-inner {
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
|
|
.tooltip-inner {
|
|
border-radius: 8px;
|
|
}
|
|
|
|
#inspector-tabpane-properties {
|
|
.accordion {
|
|
.accordion-item:last-child {
|
|
border-bottom: none !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.share-disabled {
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.bold-text {
|
|
font-weight: 500;
|
|
}
|
|
|
|
// Editor revamp styles
|
|
.main-wrapper {
|
|
.editor {
|
|
.header>.navbar {
|
|
background-color: var(--base) !important;
|
|
border-bottom: 1px solid var(--slate5);
|
|
}
|
|
}
|
|
}
|
|
|
|
.custom-gap-2 {
|
|
gap: 2px
|
|
}
|
|
|
|
// ToolJet Database buttons
|
|
|
|
.component-image-wrapper {
|
|
background-color: var(--slate3) !important;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.components-container {
|
|
margin-left: 16px;
|
|
margin-right: 16px;
|
|
}
|
|
|
|
.draggable-box-wrapper {
|
|
height: 86px;
|
|
width: 72px;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.component-card-group-wrapper {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
column-gap: 22px;
|
|
}
|
|
|
|
.component-card-group-container {
|
|
display: flex;
|
|
row-gap: 12px;
|
|
flex-direction: column;
|
|
padding-bottom: 12px;
|
|
padding-top: 12px;
|
|
}
|
|
|
|
.widgets-manager-header {
|
|
color: var(--slate12);
|
|
font-size: 14px;
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
line-height: 20px;
|
|
/* 142.857% */
|
|
margin-top: 16px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.components-container {
|
|
.tj-input {
|
|
margin-bottom: 16px;
|
|
}
|
|
}
|
|
|
|
.tj-widgets-search-input {
|
|
width: 266px;
|
|
height: 32px;
|
|
border-radius: 6px;
|
|
background-color: var(--base) !important;
|
|
font-size: 12px;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.release-button {
|
|
color: var(--indigo-01, #FDFDFE);
|
|
font-family: IBM Plex Sans;
|
|
font-size: 12px;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
line-height: 20px;
|
|
/* 166.667% */
|
|
display: flex;
|
|
padding: 4px 12px;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex: 1 0 0;
|
|
}
|
|
|
|
.editor-header-icon {
|
|
border-radius: 6px;
|
|
border: 1px solid var(--bases-transparent, rgba(255, 255, 255, 0.00));
|
|
background: var(--indigo3);
|
|
display: flex;
|
|
padding: 7px;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 8px;
|
|
height: 28px;
|
|
width: 28px;
|
|
}
|
|
|
|
.tj-header-avatar {
|
|
display: flex;
|
|
font-weight: 500;
|
|
width: 27px;
|
|
height: 26px;
|
|
padding: 4px 6px;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 10px;
|
|
flex-shrink: 0;
|
|
margin-bottom: 0px !important;
|
|
border-radius: 100% !important;
|
|
margin-left: -8px;
|
|
background-color: var(--slate5) !important;
|
|
color: var(--slate10) !important
|
|
}
|
|
|
|
.undo-redo-container {
|
|
position: absolute;
|
|
top: 10px;
|
|
display: flex;
|
|
right: 222px;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 28px;
|
|
gap: 2px;
|
|
|
|
div {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 28px;
|
|
width: 28px;
|
|
border-radius: 6px;
|
|
}
|
|
}
|
|
|
|
.sidebar-panel-header {
|
|
color: var(--slate12);
|
|
padding-left: 4px;
|
|
}
|
|
|
|
.modal-content {
|
|
background: var(--base);
|
|
color: var(--slate12);
|
|
}
|
|
|
|
.main-editor-canvas {
|
|
background-color: var(--base);
|
|
}
|
|
|
|
.event-manager-popover {
|
|
border: none;
|
|
/* Shadow/03 */
|
|
box-shadow: 0px 4px 6px -2px rgba(16, 24, 40, 0.03), 0px 12px 16px -4px rgba(16, 24, 40, 0.08);
|
|
|
|
.popover-body {
|
|
background-color: var(--base);
|
|
color: var(--slate12);
|
|
border: 1px solid var(--slate3, #F1F3F5);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
}
|
|
|
|
.copilot-toggle {
|
|
font-family: IBM Plex Sans;
|
|
font-size: 12px;
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
background-color: transparent !important;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.copilot-codehinter-wrap {
|
|
.CodeMirror.cm-s-monokai.CodeMirror-wrap {
|
|
border-radius: 0px;
|
|
}
|
|
}
|
|
|
|
.avatar-list-stacked {
|
|
display: flex;
|
|
}
|
|
|
|
.avatar-list-stacked .avatar {
|
|
margin-right: 0px !important;
|
|
}
|
|
|
|
.navbar-right-section {
|
|
border-left: 1px solid var(--slate5);
|
|
}
|
|
|
|
.modal-header {
|
|
background-color: var(--base);
|
|
border-bottom: 1px solid var(--slate5);
|
|
}
|
|
|
|
.sidebar-debugger {
|
|
.nav-item {
|
|
button:hover {
|
|
border-top-color: transparent;
|
|
border-left-color: transparent;
|
|
border-right-color: transparent;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tj-app-version-text {
|
|
color: var(--pink9);
|
|
}
|
|
|
|
.left-sidebar-comments {
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 48px;
|
|
}
|
|
|
|
.popover-body {
|
|
background-color: var(--base);
|
|
color: var(--slate12);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.popover {
|
|
border: none;
|
|
border-radius: 6px;
|
|
border: 1px solid var(--slate3, #F1F3F5);
|
|
background: var(--slate1, #FBFCFD);
|
|
box-shadow: 0px 2px 4px -2px rgba(16, 24, 40, 0.06), 0px 4px 8px -2px rgba(16, 24, 40, 0.10);
|
|
}
|
|
|
|
.canvas-codehinter-container {
|
|
.sketch-picker {
|
|
left: 70px !important;
|
|
top: 207px;
|
|
}
|
|
}
|
|
|
|
.debugger-card-body {
|
|
margin-top: 8px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.left-sidebar-header-btn {
|
|
background-color: var(--base) !important;
|
|
width: 28px;
|
|
height: 28px;
|
|
padding: 7px !important;
|
|
|
|
&:focus-visible {
|
|
border: none !important;
|
|
outline: none !important;
|
|
box-shadow: none !important;
|
|
}
|
|
}
|
|
|
|
.navbar-seperator {
|
|
border: 1px solid var(--slate5, #2B2F31);
|
|
background: var(--slate1, #151718);
|
|
width: 1px;
|
|
height: 19px;
|
|
margin-left: 8px;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.CodeMirror {
|
|
background: var(--base);
|
|
}
|
|
|
|
.color-picker-input {
|
|
border: solid 1px #333c48;
|
|
height: 36px;
|
|
background-color: var(--interactive-default);
|
|
border: 1px solid var(--slate7);
|
|
|
|
&:hover {
|
|
background-color: var(--slate4);
|
|
border: 1px solid var(--slate8);
|
|
|
|
}
|
|
}
|
|
|
|
#popover-basic-2 {
|
|
.sketch-picker {
|
|
left: 7px;
|
|
width: 170px !important;
|
|
}
|
|
}
|
|
|
|
.custom-gap-8 {
|
|
gap: 8px;
|
|
}
|
|
|
|
.color-slate-11 {
|
|
color: var(--slate11) !important;
|
|
}
|
|
|
|
.custom-gap-6 {
|
|
gap: 6px
|
|
}
|
|
|
|
// ToolJet Database buttons
|
|
|
|
.ghost-black-operation {
|
|
border: 1px solid transparent !important;
|
|
padding: 4px 10px;
|
|
}
|
|
|
|
.custom-gap-2 {
|
|
gap: 2px
|
|
}
|
|
|
|
.custom-gap-4 {
|
|
gap: 4px;
|
|
}
|
|
|
|
.text-black-000 {
|
|
color: var(--text-black-000) !important;
|
|
}
|
|
|
|
.custom-gap-12 {
|
|
gap: 12px
|
|
}
|
|
|
|
.overflow-tooltip {
|
|
.tooltip-inner {
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
|
|
#inspector-tabpane-properties {
|
|
.accordion {
|
|
.accordion-item:last-child {
|
|
border-bottom: none !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.bold-text {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.saml-sso-conf {
|
|
.saml-footer {
|
|
display: block !important;
|
|
}
|
|
|
|
.text-indigo-09 {
|
|
color: $color-light-indigo-09;
|
|
}
|
|
|
|
.card-body {
|
|
padding-bottom: 0px !important;
|
|
}
|
|
}
|
|
|
|
.add-datasource-btn-workflows {
|
|
width: 195px;
|
|
margin-top: 8px;
|
|
position: sticky;
|
|
bottom: 0;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.react-flow__panel {
|
|
bottom: 50px
|
|
}
|
|
|
|
.add-datasource-btn-workflows {
|
|
width: 195px;
|
|
margin-top: 8px;
|
|
position: sticky;
|
|
bottom: 0;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.react-flow__panel {
|
|
bottom: 50px
|
|
}
|
|
|
|
.connect-to-repository-container {
|
|
width: 70%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
margin: auto;
|
|
|
|
a {
|
|
text-decoration: none;
|
|
color: unset !important;
|
|
}
|
|
|
|
.tj-btn-right-icon {
|
|
svg {
|
|
path {
|
|
fill: var(--indigo9);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.git-sync-modal,
|
|
.modal-base {
|
|
|
|
.create-commit-container,
|
|
.commit-info,
|
|
.pull-container {
|
|
.form-control {
|
|
font-weight: 400;
|
|
font-size: 12px;
|
|
line-height: 20px;
|
|
color: var(--slate12);
|
|
}
|
|
|
|
.form-group {
|
|
.tj-input-error-state {
|
|
border: 1px solid var(--tomato9) !important;
|
|
}
|
|
|
|
.tj-input-error {
|
|
color: var(--tomato10) !important;
|
|
}
|
|
}
|
|
|
|
.info-text {
|
|
color: var(--slate10);
|
|
}
|
|
|
|
.tj-input-error {
|
|
color: var(--tomato10);
|
|
}
|
|
|
|
.form-control.disabled {
|
|
background-color: var(--slate3) !important;
|
|
color: var(--slate9) !important;
|
|
}
|
|
|
|
.last-commit-info {
|
|
background: var(--slate3);
|
|
|
|
.message-info {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.author-info {
|
|
font-size: 10px;
|
|
color: var(--slate11);
|
|
}
|
|
}
|
|
|
|
.check-for-updates {
|
|
display: flex;
|
|
align-items: center;
|
|
color: var(--indigo9);
|
|
|
|
svg {
|
|
path {
|
|
fill: var(--indigo9);
|
|
}
|
|
|
|
rect {
|
|
fill: none;
|
|
}
|
|
}
|
|
|
|
.loader-container {
|
|
height: unset !important;
|
|
|
|
.primary-spin-loader {
|
|
width: 18px;
|
|
height: 18px;
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.modal-footer {
|
|
border-top: 1px solid var(--slate5);
|
|
padding: 1rem;
|
|
|
|
.tj-btn-left-icon {
|
|
svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
|
|
path {
|
|
fill: var(--indigo1);
|
|
}
|
|
}
|
|
}
|
|
|
|
.tj-large-btn {
|
|
font-weight: 500;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
|
|
.modal-body {
|
|
.loader-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 180px;
|
|
}
|
|
}
|
|
|
|
.modal-base {
|
|
.tj-text-xxsm {
|
|
color: var(--slate11);
|
|
}
|
|
}
|
|
|
|
.modal-header {
|
|
border-bottom: 1px solid var(--slate5) !important;
|
|
|
|
.modal-title {
|
|
color: var(--slate12);
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.custom-gap-7 {
|
|
gap: 7px
|
|
}
|
|
|
|
.card-table {
|
|
overflow: visible;
|
|
}
|
|
|
|
.groups-name-cell {
|
|
transition: 0.3s all;
|
|
border-radius: 6px;
|
|
position: relative !important;
|
|
overflow: visible !important;
|
|
|
|
.groups-name-container {
|
|
display: flex;
|
|
column-gap: 8px;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
max-width: 210px;
|
|
}
|
|
|
|
.group-chip {
|
|
padding: 2px 8px;
|
|
margin: 0;
|
|
border-radius: 6px;
|
|
background-color: var(--slate3);
|
|
color: var(--slate11);
|
|
min-height: 24px;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
max-width: 95px;
|
|
}
|
|
|
|
.all-groups-list {
|
|
position: absolute;
|
|
width: 100%;
|
|
top: 41px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: var(--slate1);
|
|
align-items: flex-start;
|
|
border-radius: 6px;
|
|
border: 1px solid var(--slate1);
|
|
box-shadow: 0px 4px 6px -2px rgba(16, 24, 40, 0.03), 0px 12px 16px -4px rgba(16, 24, 40, 0.08);
|
|
padding: 9px 10px;
|
|
gap: 10px;
|
|
cursor: default;
|
|
max-height: 240px;
|
|
overflow: auto;
|
|
left: 0px;
|
|
z-index: 1;
|
|
}
|
|
}
|
|
|
|
.groups-name-cell[data-active="true"] {
|
|
background: var(--gray5) !important;
|
|
|
|
.groups-name-container {
|
|
padding-left: 6px;
|
|
}
|
|
|
|
.group-chip {
|
|
max-width: unset !important;
|
|
min-height: 28px !important;
|
|
}
|
|
}
|
|
|
|
.groups-hover {
|
|
&:hover {
|
|
background: var(--slate3);
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.user-actions-menu-container {
|
|
border: 1px solid var(--slate8);
|
|
border-radius: 6px;
|
|
|
|
&:hover {
|
|
background: var(--slate4);
|
|
}
|
|
|
|
.actions-menu-icon {
|
|
fill: var(--slate8);
|
|
width: 20px !important;
|
|
height: 20px !important;
|
|
cursor: pointer;
|
|
|
|
path {
|
|
fill: var(--slate12) !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.primary-spin-loader {
|
|
width: 43px;
|
|
height: 43px;
|
|
border: 3px solid var(--indigo6);
|
|
border-bottom-color: var(--indigo9);
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
box-sizing: border-box;
|
|
animation: rotation 1s linear infinite;
|
|
}
|
|
|
|
@keyframes rotation {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.commit-changes {
|
|
display: flex;
|
|
gap: 6px;
|
|
}
|
|
|
|
.disabled-action-tooltip {
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.overflow-tooltip {
|
|
.tooltip-inner {
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
|
|
.card-table {
|
|
overflow: visible;
|
|
}
|
|
|
|
.groups-name-cell {
|
|
transition: 0.3s all;
|
|
border-radius: 6px;
|
|
position: relative !important;
|
|
overflow: visible !important;
|
|
|
|
.groups-name-container {
|
|
display: flex;
|
|
column-gap: 8px;
|
|
}
|
|
|
|
.group-chip {
|
|
padding: 5px 8px;
|
|
border-radius: 6px;
|
|
background-color: var(--slate3);
|
|
color: var(--slate11);
|
|
}
|
|
|
|
.all-groups-list {
|
|
position: absolute;
|
|
width: 100%;
|
|
top: 41px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: var(--slate1);
|
|
align-items: flex-start;
|
|
border-radius: 6px;
|
|
border: 1px solid var(--slate1);
|
|
box-shadow: 0px 4px 6px -2px rgba(16, 24, 40, 0.03), 0px 12px 16px -4px rgba(16, 24, 40, 0.08);
|
|
padding: 9px 10px;
|
|
gap: 15px;
|
|
cursor: default;
|
|
max-height: 240px;
|
|
overflow: auto;
|
|
left: 0px;
|
|
z-index: 1;
|
|
}
|
|
}
|
|
|
|
.groups-name-cell[data-active="true"] {
|
|
background: var(--gray5) !important;
|
|
|
|
.groups-name-container {
|
|
padding-left: 6px;
|
|
}
|
|
}
|
|
|
|
.groups-hover {
|
|
&:hover {
|
|
background: var(--slate3);
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.user-actions-menu-container {
|
|
border: 1px solid var(--slate8);
|
|
border-radius: 6px;
|
|
|
|
&:hover {
|
|
background: var(--slate4);
|
|
}
|
|
|
|
.actions-menu-icon {
|
|
fill: var(--slate8);
|
|
width: 20px !important;
|
|
height: 20px !important;
|
|
cursor: pointer;
|
|
|
|
path {
|
|
fill: var(--slate12) !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
#popover-user-menu {
|
|
box-shadow: 0px 2px 4px -2px var(--indigo1), 0px 4px 8px -2px var(--indigo1);
|
|
|
|
.popover-body {
|
|
padding: 0rem 0.8rem;
|
|
min-width: 160px;
|
|
}
|
|
|
|
button {
|
|
color: var(--slate12);
|
|
border: none !important;
|
|
|
|
&:hover {
|
|
background: none !important;
|
|
}
|
|
}
|
|
|
|
.edit-user-btn {
|
|
svg {
|
|
fill: var(--slate9);
|
|
|
|
path {
|
|
fill: var(--slate9);
|
|
}
|
|
}
|
|
}
|
|
|
|
.user-archive {
|
|
color: var(--tomato9);
|
|
|
|
&:hover {
|
|
color: var(--tomato9) !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.divider {
|
|
border-top: 1px solid var(--slate6);
|
|
}
|
|
|
|
.workspace-constants-wrapper {
|
|
background-color: var(--page-default);
|
|
height: calc(100vh - 64px);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding-top: 1.5rem;
|
|
}
|
|
|
|
.blank-page-wrapper {
|
|
@media only screen and (max-width: 768px) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.blank-page-wrapper-mobile {
|
|
display: none !important;
|
|
|
|
@media only screen and (max-width: 768px) {
|
|
transform: translateY(50%);
|
|
display: flex !important;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
.reset-password-info-banner {
|
|
width: inherit;
|
|
background-color: #F8FAFF;
|
|
border-color: #D9E2FC;
|
|
padding-top: 4px !important;
|
|
padding-bottom: 4px !important;
|
|
padding-left: 12px !important;
|
|
padding-right: 12px !important;
|
|
}
|
|
|
|
.tj-text-input-wrapper {
|
|
.signup-password-wrapper {
|
|
.tj-text-input {
|
|
width: 290px !important;
|
|
background: var(--slate3);
|
|
color: var(--slate9);
|
|
height: auto !important;
|
|
margin-bottom: 5px;
|
|
border-color: var(--slate7);
|
|
}
|
|
}
|
|
}
|
|
|
|
.tj-text-input-icon-wrapper {
|
|
.signup-password-wrapper {
|
|
.tj-text-input {
|
|
width: 320px !important;
|
|
background: #F1F3F5;
|
|
color: var(--slate9);
|
|
height: 38px !important;
|
|
margin-bottom: 10px;
|
|
border-color: var(--slate7) !important;
|
|
}
|
|
|
|
.icon-wrapper {
|
|
position: absolute;
|
|
right: 10px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
align-items: center;
|
|
gap: 5px;
|
|
/* space between icons */
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal-custom-height {
|
|
height: 700px !important;
|
|
/* Set the desired width */
|
|
}
|
|
|
|
textarea.tj-text-input-widget {
|
|
resize: none !important;
|
|
overflow-y: auto !important;
|
|
}
|
|
|
|
.tj-text-input-widget {
|
|
border: 1px solid var(--borders-default);
|
|
background-color: var(--surfaces-surface-01);
|
|
width: 100%;
|
|
padding: 0px;
|
|
z-index: 2;
|
|
|
|
&:disabled {
|
|
background-color: var(--surfaces-surface-03);
|
|
}
|
|
|
|
&:hover:not(:focus):not([data-ignore-hover="true"]) {
|
|
border: 1px solid var(--tblr-input-border-color-darker) !important;
|
|
}
|
|
|
|
&.is-invalid {
|
|
border: 1px solid var(--status-error-strong) !important; // For example, a red border for invalid input
|
|
}
|
|
|
|
&:focus {
|
|
outline: none !important;
|
|
border: 1px solid var(--primary-accent-strong);
|
|
|
|
}
|
|
|
|
&:active {
|
|
outline: none !important;
|
|
}
|
|
|
|
&::placeholder {
|
|
color: var(--text-placeholder) !important;
|
|
}
|
|
}
|
|
|
|
.icon-style-container {
|
|
width: 142px;
|
|
height: 32px;
|
|
display: flex;
|
|
align-items: center;
|
|
border-radius: 6px;
|
|
padding: 2px;
|
|
}
|
|
|
|
.visibility-eye {
|
|
position: absolute;
|
|
top: 50%;
|
|
right: -5px;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.label-hinter-margin {
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.accordion-header {
|
|
height: 52px;
|
|
}
|
|
|
|
|
|
.CodeMirror-placeholder {
|
|
min-width: 265px !important;
|
|
}
|
|
|
|
.tj-number-input-element {
|
|
|
|
// Remove increment/decrement arrows
|
|
input::-webkit-outer-spin-button,
|
|
input::-webkit-inner-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
|
|
/* Firefox */
|
|
input[type=number] {
|
|
-moz-appearance: textfield;
|
|
}
|
|
}
|
|
|
|
.inspector-color-input-popover {
|
|
left: -96px !important;
|
|
}
|
|
|
|
.tj-number-input-widget {
|
|
input[type="number"] {
|
|
-moz-appearance: textfield !important;
|
|
}
|
|
}
|
|
|
|
.rest-api-options-codehinter {
|
|
height: 100%;
|
|
|
|
.cm-content>.cm-line {
|
|
// max-width: 357px !important;
|
|
}
|
|
}
|
|
|
|
.rest-api-codehinter-key-field {
|
|
.cm-content>.cm-line {
|
|
// max-width: 184px !important;
|
|
}
|
|
}
|
|
|
|
.rest-api-codehinter-key-field,
|
|
.rest-api-url-codehinter,
|
|
.rest-api-options-codehinter {
|
|
.cm-content>.cm-line {
|
|
white-space: pre-wrap;
|
|
word-wrap: break-word;
|
|
}
|
|
}
|
|
|
|
.fx-button-container {
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.show-fx-button-container {
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
.wrapper-div-code-editor:hover .fx-button-container {
|
|
opacity: 1;
|
|
}
|
|
|
|
.add-new-group-modal {
|
|
.modal-title {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.paid-feature-banner {
|
|
margin-left: 8px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.action-description-highlighter {
|
|
color: var(--indigo9) !important;
|
|
}
|
|
|
|
.read-docs-fk {
|
|
|
|
.tooltip-inner {
|
|
padding: 8px 10px 8px 10px !important;
|
|
font-size: 12px;
|
|
line-height: 20px;
|
|
font-weight: 400;
|
|
text-align: center;
|
|
}
|
|
|
|
.tooltip-outer {
|
|
// box-shadow: 0px 4px 6px -2px #10182808 ,0px 12px 16px -4px #10182814 !important;
|
|
}
|
|
}
|
|
|
|
.change-margin {
|
|
margin-bottom: 10px !important;
|
|
}
|
|
|
|
.inspector-validation-date-picker {
|
|
.react-datepicker-wrapper {
|
|
input {
|
|
width: 100%;
|
|
border: 1px solid var(--slate7);
|
|
padding: 5px 5px;
|
|
background-color: var(--base);
|
|
color: var(--slate12)
|
|
}
|
|
}
|
|
|
|
.dark-theme {
|
|
.react-datepicker__day {
|
|
color: white;
|
|
}
|
|
}
|
|
}
|
|
|
|
#popover-user-menu {
|
|
box-shadow: 0px 2px 4px -2px var(--indigo1), 0px 4px 8px -2px var(--indigo1);
|
|
}
|
|
|
|
.rest-api-options-codehinter {
|
|
.cm-content>.cm-line {
|
|
// max-width: 357px !important;
|
|
}
|
|
}
|
|
|
|
.rest-api-codehinter-key-field {
|
|
.cm-content>.cm-line {
|
|
// max-width: 184px !important;
|
|
}
|
|
}
|
|
|
|
.rest-api-codehinter-key-field,
|
|
.rest-api-url-codehinter,
|
|
.rest-api-options-codehinter {
|
|
.cm-content>.cm-line {
|
|
white-space: pre-wrap;
|
|
word-wrap: break-word;
|
|
}
|
|
}
|
|
|
|
.fx-button-container {
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.wrapper-div-code-editor:hover .fx-button-container {
|
|
opacity: 1;
|
|
}
|
|
|
|
.canvas-container {
|
|
scrollbar-color: transparent;
|
|
scrollbar-width: thin;
|
|
|
|
&::-webkit-scrollbar {
|
|
background-color: transparent;
|
|
width: 6px;
|
|
scrollbar-width: thin;
|
|
}
|
|
|
|
&::-webkit-scrollbar-track {
|
|
background-color: transparent;
|
|
scrollbar-width: thin;
|
|
}
|
|
|
|
&::-webkit-scrollbar-thumb {
|
|
background-color: transparent;
|
|
}
|
|
|
|
&:hover {
|
|
scrollbar-color: #6a727c4d;
|
|
|
|
&::-webkit-scrollbar-thumb {
|
|
background-color: #6a727c4d !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.jet-listview {
|
|
&:hover {
|
|
scrollbar-color: #6a727c4d;
|
|
|
|
&::-webkit-scrollbar-thumb {
|
|
background-color: #6a727c4d !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.dark-theme {
|
|
.canvas-container {
|
|
&:hover {
|
|
scrollbar-color: #6a727c4d;
|
|
|
|
&::-webkit-scrollbar-thumb {
|
|
background-color: #6a727c4d !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.jet-listview {
|
|
&:hover {
|
|
scrollbar-color: #6a727c4d;
|
|
|
|
&::-webkit-scrollbar-thumb {
|
|
background-color: #6a727c4d !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.number-input-arrow {
|
|
&:hover {
|
|
background-color: var(--interactive-overlays-fill-hover) !important;
|
|
}
|
|
|
|
&:active {
|
|
background-color: var(--interactive-overlays-fill-pressed) !important;
|
|
}
|
|
}
|
|
|
|
.modal-base {
|
|
.modal-footer {
|
|
padding: 1rem;
|
|
|
|
.tj-btn-left-icon {
|
|
svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
|
|
path {
|
|
fill: var(--indigo1);
|
|
}
|
|
}
|
|
}
|
|
|
|
.tj-large-btn {
|
|
font-weight: 500;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.component-spinner {
|
|
animation: l13 1s infinite linear;
|
|
position: absolute;
|
|
}
|
|
|
|
@keyframes l13 {
|
|
100% {
|
|
transform: rotate(1turn)
|
|
}
|
|
}
|
|
|
|
.widget-version-identifier {
|
|
position: absolute;
|
|
top: 0px;
|
|
border-radius: 0px 8px 0px 8px;
|
|
height: 16px;
|
|
width: 35px;
|
|
font-size: 10px;
|
|
color: var(--text-on-solid) !important;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.widget-version-old-identifier {
|
|
background-color: #BF4F03;
|
|
@extend .widget-version-identifier
|
|
}
|
|
|
|
.widget-version-new-identifier {
|
|
background-color: #1E823B;
|
|
@extend .widget-version-identifier
|
|
}
|
|
|
|
.tjdb-display-time-pill {
|
|
height: 12px;
|
|
gap: 10px;
|
|
border-radius: 100px 100px 100px 100px;
|
|
padding: 8px 8px;
|
|
background: var(--Slate-07, #D7DBDF);
|
|
color: var(--Slate-11, #687076);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 10px !important;
|
|
line-height: 12px;
|
|
}
|
|
|
|
.tjdb-table-tooltip {
|
|
width: max-content !important;
|
|
|
|
.tooltip-inner {
|
|
max-width: max-content !important;
|
|
width: max-content !important;
|
|
|
|
.foreignKey-relation-tooltip {
|
|
span {
|
|
text-align: left;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.tjdb-cell-tooltip {
|
|
max-width: 420px !important;
|
|
|
|
.tooltip-inner {
|
|
max-width: 100% !important;
|
|
}
|
|
}
|
|
|
|
div.ds-svg-container img {
|
|
padding: 2px;
|
|
}
|
|
|
|
.custom-textarea-height {
|
|
height: 300px;
|
|
min-height: 300px;
|
|
}
|
|
|
|
|
|
.dropdown-multiselect-widget-custom-menu-list {
|
|
box-shadow: var(--elevation-400-box-shadow) !important;
|
|
border-radius: 8px;
|
|
|
|
.multiselect-custom-menulist-select-all {
|
|
display: flex;
|
|
padding: 8px 16px;
|
|
background-color: var(--surfaces-surface-01) !important;
|
|
color: var(--text-primary);
|
|
|
|
&:hover {
|
|
background-color: var(--interactive-overlays-fill-hover) !important;
|
|
cursor: pointer;
|
|
border-radius: 8px;
|
|
}
|
|
}
|
|
|
|
.form-check-input:disabled {
|
|
background-color: var(--surfaces-surface-03) !important;
|
|
}
|
|
}
|
|
|
|
.dropdown-multiselect-widget-search-box-wrapper {
|
|
border-bottom: 1px solid var(--borders-weak-disabled);
|
|
display: flex;
|
|
padding: 8px 10px;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 4px;
|
|
align-self: stretch;
|
|
height: 40px;
|
|
justify-content: center;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
background-color: var(--surfaces-surface-01) !important;
|
|
border-top-left-radius: 8px;
|
|
border-top-right-radius: 8px;
|
|
|
|
.dropdown-multiselect-widget-search-box {
|
|
width: 100%;
|
|
box-sizing: 'border-box';
|
|
border: none;
|
|
border-radius: 0;
|
|
background: transparent;
|
|
color: var(--slate12);
|
|
gap: 16px;
|
|
}
|
|
}
|
|
|
|
.mb-0 {
|
|
margin-bottom: 0px !important;
|
|
}
|
|
|
|
.tabs-component {
|
|
.tab-pane {
|
|
top: initial !important;
|
|
}
|
|
}
|
|
|
|
|
|
fieldset:disabled {
|
|
.json-form-wrapper-disabled {
|
|
opacity: 0.5;
|
|
pointer-events: none;
|
|
filter: grayscale(100%);
|
|
}
|
|
}
|
|
|
|
.debugger-card-body {
|
|
.json-tree-container {
|
|
margin-bottom: 10px;
|
|
}
|
|
}
|
|
|
|
.pdf-retry-button {
|
|
background-color: var(--primary-brand);
|
|
color: var(--text-on-solid);
|
|
width: 100px;
|
|
border-radius: 6px;
|
|
height: 28px;
|
|
--tblr-btn-color-darker: #000000;
|
|
--tblr-btn-color-clicked: #000000;
|
|
--loader-color: #ffffff;
|
|
border-color: rgb(67, 104, 227);
|
|
padding: 0px 12px;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: row-reverse;
|
|
justify-content: center;
|
|
gap: 6px;
|
|
|
|
>div {
|
|
overflow: hidden;
|
|
|
|
>span {
|
|
max-width: 100%;
|
|
min-width: 0px;
|
|
|
|
>p {
|
|
font-weight: 500;
|
|
margin: 0px;
|
|
padding: 0px;
|
|
color: var(--text-on-solid);
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
.user-not-found-svg {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: var(--slate3);
|
|
width: 36px;
|
|
height: 36px;
|
|
padding: 4px;
|
|
}
|
|
}
|
|
|
|
.add-params-btn {
|
|
border: 1px solid var(--border-default, #CCD1D5) !important;
|
|
border-radius: 6px;
|
|
box-shadow: 0px 1px 0px 0px #0000001A;
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
height: 28px;
|
|
|
|
&:hover {
|
|
background-color: var(--slate4) !important;
|
|
}
|
|
|
|
&:active {
|
|
background-color: var(--slate5) !important;
|
|
}
|
|
}
|
|
|
|
.datepicker-validation-half {
|
|
flex: 1 1 calc(50% - 8px);
|
|
}
|
|
|
|
|
|
.date-validation-wrapper {
|
|
margin-bottom: 3px;
|
|
|
|
.field {
|
|
height: 24px;
|
|
}
|
|
|
|
.code-flex-wrapper {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
}
|
|
|
|
.tj-inspector-datepicker {
|
|
background-color: #fff !important;
|
|
}
|
|
|
|
|
|
.react-datepicker__day--disabled {
|
|
color: #ccc !important;
|
|
}
|
|
|
|
.react-datepicker__time-list {
|
|
li.react-datepicker__time-list-item--disabled.react-datepicker__time-list-item {
|
|
color: #ccc !important;
|
|
}
|
|
}
|
|
|
|
.inspector-validation-date-picker {
|
|
.react-datepicker-wrapper {
|
|
input {
|
|
background-color: #fff;
|
|
}
|
|
|
|
input.dark-theme {
|
|
background-color: var(--slate3);
|
|
color: var(--slate12);
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.datetimepicker-component,
|
|
#component-portal,
|
|
.custom-inspector-validation-time-picker {
|
|
|
|
.datepicker-component {
|
|
.react-datepicker {
|
|
border-radius: 10px;
|
|
box-shadow: 8px 8px 16px 0px #3032331A;
|
|
height: auto;
|
|
}
|
|
}
|
|
|
|
|
|
.react-datepicker-time-component {
|
|
border-radius: 10px;
|
|
width: auto;
|
|
|
|
.custom-time-input {
|
|
border-left: none;
|
|
border-radius: 10px;
|
|
box-shadow: 8px 8px 16px 0px #3032331A;
|
|
}
|
|
|
|
.time-input-body {
|
|
padding-bottom: 0px;
|
|
}
|
|
|
|
.time-col {
|
|
height: 200px;
|
|
}
|
|
|
|
.react-datepicker {
|
|
border-radius: 10px;
|
|
box-shadow: 8px 8px 16px 0px #3032331A;
|
|
}
|
|
|
|
.react-datepicker-time__input-container {
|
|
border-radius: 10px;
|
|
}
|
|
}
|
|
|
|
|
|
.dark-theme {
|
|
|
|
.react-datepicker__year-text,
|
|
.react-datepicker__month-text {
|
|
color: #fff;
|
|
}
|
|
|
|
.react-datepicker__year-text:hover,
|
|
.react-datepicker__month-text:hover {
|
|
background-color: #9ba1a6;
|
|
}
|
|
}
|
|
|
|
.tj-datepicker-widget-year-selector:hover,
|
|
.tj-datepicker-widget-month-selector:hover {
|
|
padding: 1px 6px;
|
|
}
|
|
|
|
.react-datepicker {
|
|
display: grid;
|
|
grid-auto-flow: column;
|
|
border-top-right-radius: 0rem;
|
|
border-bottom-right-radius: 0rem;
|
|
}
|
|
|
|
.react-datepicker-year-component {
|
|
.react-datepicker__year {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.react-datepicker__year-wrapper {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
max-width: unset;
|
|
gap: 10px;
|
|
}
|
|
|
|
.react-datepicker {
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.react-datepicker__header--custom {
|
|
height: 34px;
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
.react-datepicker__year--container {
|
|
height: 208px;
|
|
width: 250px;
|
|
box-shadow: 8px 8px 16px 0px #3032331A;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.react-datepicker__year-text--selected {
|
|
background-color: #4368E3 !important;
|
|
height: 24px;
|
|
width: 61.33px;
|
|
border-radius: 8px;
|
|
color: #fff;
|
|
}
|
|
|
|
.react-datepicker__year-text {
|
|
font-family: 'IBM Plex Sans';
|
|
font-size: 12px;
|
|
line-height: 16px;
|
|
text-align: center;
|
|
font-weight: 400;
|
|
height: 24px;
|
|
width: 61.33px;
|
|
justify-content: center;
|
|
align-items: center;
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
.react-datepicker-month-component {
|
|
.react-datepicker {
|
|
border-radius: 11px;
|
|
}
|
|
|
|
.react-datepicker__header--custom {
|
|
height: 34px;
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
.react-datepicker__month-container {
|
|
height: 208px;
|
|
width: 250px;
|
|
box-shadow: 8px 8px 16px 0px #3032331A;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.react-datepicker__monthPicker {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
.react-datepicker__month-text--selected {
|
|
background-color: #4368E3 !important;
|
|
height: 24px;
|
|
width: 61.33px;
|
|
border-radius: 8px;
|
|
color: #fff;
|
|
}
|
|
|
|
.react-datepicker__month-wrapper {
|
|
display: flex;
|
|
gap: 24px;
|
|
}
|
|
|
|
.react-datepicker__month-text {
|
|
font-family: 'IBM Plex Sans';
|
|
font-size: 12px;
|
|
line-height: 16px;
|
|
text-align: center;
|
|
font-weight: 400;
|
|
height: 24px;
|
|
width: 61.33px;
|
|
justify-content: center;
|
|
align-items: center;
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
.is-invalid {
|
|
border: 1px solid var(--status-error-strong) !important; // For example, a red border for invalid input
|
|
}
|
|
|
|
.react-datepicker__month-container {
|
|
width: 100%;
|
|
width: 250px;
|
|
}
|
|
|
|
.react-datepicker__input-time-container {
|
|
margin: 0px;
|
|
width: 100%;
|
|
border-top-right-radius: 0.3rem;
|
|
border-bottom-right-radius: 0.3rem;
|
|
box-shadow: 8px 8px 16px 0px #3032331A;
|
|
}
|
|
|
|
.disabled-time {
|
|
color: #ccc !important;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.react-datepicker-time__input {
|
|
margin-left: 0px !important;
|
|
|
|
.dark-time-input {
|
|
color: #f4f6fa !important;
|
|
background-color: var(--surfaces-surface-01) !important;
|
|
}
|
|
}
|
|
|
|
.react-datepicker-wrapper {
|
|
width: 100%;
|
|
}
|
|
|
|
.react-datepicker-time__caption {
|
|
display: none;
|
|
}
|
|
|
|
.custom-time-input {
|
|
background-color: #fff;
|
|
border-left: 1px solid #CCD1D5;
|
|
border-top-right-radius: 10px;
|
|
border-bottom-right-radius: 10px;
|
|
}
|
|
|
|
.time-header {
|
|
width: 62px;
|
|
height: 35px;
|
|
padding: 8px 6px 7px 6px;
|
|
justify-content: center;
|
|
align-items: center;
|
|
display: flex;
|
|
border-bottom: 1px solid #CCD1D5;
|
|
font-weight: 500;
|
|
font-family: 'IBM Plex Sans';
|
|
color: #ACB2B9;
|
|
}
|
|
|
|
.time-input-body {
|
|
padding-bottom: 12px;
|
|
}
|
|
|
|
.time-col {
|
|
margin-top: 5px;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
scrollbar-width: none;
|
|
height: 265px;
|
|
width: 62px;
|
|
}
|
|
|
|
.selected-time {
|
|
background-color: #4368E3 !important;
|
|
border-radius: 6px;
|
|
color: #fff;
|
|
}
|
|
|
|
.time-item {
|
|
width: 50px;
|
|
height: 22px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin: 2px 6px;
|
|
font-size: 11px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.time-item:hover {
|
|
background-color: var(--interactive-overlays-fill-hover);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.react-datepicker-popper[data-placement^=top] {
|
|
padding-bottom: 0px;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.create-app-with-ai-prompt-wrapper {
|
|
padding: 16px 0;
|
|
|
|
header {
|
|
display: flex;
|
|
gap: 12px;
|
|
|
|
.left {
|
|
border-radius: 24px;
|
|
display: flex;
|
|
width: 44px;
|
|
height: 44px;
|
|
padding: 3px 3px 6px 3px;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.right {
|
|
h3 {
|
|
margin: 0;
|
|
color: var(--text-placeholder, #6A727C);
|
|
font-family: "IBM Plex Sans";
|
|
font-size: 12px;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 18px;
|
|
}
|
|
|
|
h2 {
|
|
margin: 0;
|
|
color: var(--text-default, #1B1F24);
|
|
font-size: 16px;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 24px;
|
|
}
|
|
}
|
|
|
|
.learn-about-tooljet-ai {
|
|
align-self: flex-end;
|
|
margin-left: auto;
|
|
|
|
span {
|
|
color: var(--text-default, #1B1F24);
|
|
|
|
/* small/medium */
|
|
font-family: "IBM Plex Sans";
|
|
font-size: 11px;
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
line-height: 16px;
|
|
/* 145.455% */
|
|
margin-left: 4px;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
section {
|
|
border-radius: 6px;
|
|
background: var(--background-surface-layer-01, #FFFFFF);
|
|
margin-top: 12px;
|
|
padding: 12px;
|
|
border: 1px solid transparent;
|
|
|
|
&:focus-within {
|
|
border: 1px solid var(--border-accent-strong, #4368E3);
|
|
}
|
|
|
|
div.input {
|
|
color: var(--text-default, #1B1F24);
|
|
font-size: 12px;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 18px;
|
|
max-height: 150px;
|
|
overflow-y: auto;
|
|
min-height: 18px;
|
|
|
|
|
|
|
|
}
|
|
|
|
div.actions {
|
|
margin-top: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.left {
|
|
display: flex;
|
|
}
|
|
|
|
.left button {
|
|
background: red;
|
|
height: 28px;
|
|
width: 28px;
|
|
background-color: transparent !important;
|
|
border: none;
|
|
outline: none;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
&:hover {
|
|
background-color: #f1f1f1 !important;
|
|
}
|
|
|
|
// &:focus {
|
|
// border: 1px solid var(--border-default, #CCD1D5);
|
|
// background: var(--button-outline, #FFF);
|
|
// box-shadow: 0px 0px 0px 2px var(--Interactive-focusActive, #4368E3);
|
|
// }
|
|
|
|
}
|
|
|
|
button.submit {
|
|
height: 28px;
|
|
width: 28px;
|
|
border-radius: 6px;
|
|
border: 1px solid var(--border-weak, #E4E7EB);
|
|
background: var(--button-secondary, #FFF);
|
|
|
|
/* Elevations/100 */
|
|
box-shadow: 0px 0px 1px 0px var(--dropshadow-100700-layer-1, rgba(48, 50, 51, 0.05)), 0px 1px 1px 0px var(--dropshadow-100400-layer-2, rgba(48, 50, 51, 0.10));
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
&:hover {
|
|
border: 1px solid var(--border-default, #CCD1D5);
|
|
background: var(--button-outline-hover, rgba(136, 144, 153, 0.12));
|
|
|
|
}
|
|
|
|
// &:focus {
|
|
// border: 1px solid var(--border-default, #CCD1D5);
|
|
// background: var(--button-outline, #FFF);
|
|
// box-shadow: 0px 0px 0px 2px var(--Interactive-focusActive, #4368E3);
|
|
// }
|
|
}
|
|
}
|
|
}
|
|
|
|
.example-prompts {
|
|
margin-top: 12px;
|
|
display: flex;
|
|
gap: 12px;
|
|
align-items: center;
|
|
|
|
.left {
|
|
color: var(--text-placeholder, #6A727C);
|
|
font-family: "IBM Plex Sans";
|
|
font-size: 12px;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 18px;
|
|
}
|
|
|
|
.right {
|
|
display: flex;
|
|
gap: 8px;
|
|
|
|
button {
|
|
border: none;
|
|
outline: none;
|
|
display: flex;
|
|
gap: 6px;
|
|
align-items: center;
|
|
padding: 5px 10px;
|
|
background: transparent;
|
|
border-radius: 6px;
|
|
border: 1px solid var(--border-weak, #E4E7EB);
|
|
background: var(--button-secondary, #FFF);
|
|
box-shadow: 0px 0px 1px 0px var(--dropshadow-100700-layer-1, rgba(48, 50, 51, 0.05)), 0px 1px 1px 0px var(--dropshadow-100400-layer-2, rgba(48, 50, 51, 0.10));
|
|
|
|
span {
|
|
color: var(--text-default, #1B1F24);
|
|
|
|
/* base/medium */
|
|
font-family: "IBM Plex Sans";
|
|
font-size: 12px;
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
line-height: 18px;
|
|
/* 150% */
|
|
}
|
|
|
|
&:hover {
|
|
border: 1px solid var(--border-default, #CCD1D5);
|
|
background: linear-gradient(0deg, var(--button-outline-hover, rgba(136, 144, 153, 0.12)) 0%, var(--button-outline-hover, rgba(136, 144, 153, 0.12)) 100%), var(--button-outline, #FFF);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
section.ai-message-prompt-input-wrapper {
|
|
|
|
border-radius: 6px;
|
|
// border: 1px solid var(--border-accent-strong, #4368E3);
|
|
background: var(--background-surface-layer-01, #FFFFFF);
|
|
margin-top: 12px;
|
|
padding: 12px;
|
|
|
|
&.inside-appbuilder {
|
|
border: none;
|
|
background: var(--slate2);
|
|
margin: 16px;
|
|
border-radius: 6px;
|
|
|
|
/* Elevations/300 */
|
|
box-shadow: 0px 0px 1px 0px var(--dropshadow-100700-layer-1, rgba(48, 50, 51, 0.05)), 0px 4px 8px 0px var(--dropshadow-100400-layer-2, rgba(48, 50, 51, 0.10));
|
|
z-index: 2;
|
|
}
|
|
|
|
div.input {
|
|
color: var(--text-default, #1B1F24);
|
|
font-size: 12px;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 18px;
|
|
max-height: 150px;
|
|
overflow-y: auto;
|
|
min-height: 18px;
|
|
position: relative;
|
|
}
|
|
|
|
.input::before {
|
|
content: attr(data-placeholder);
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
color: #aaa;
|
|
pointer-events: none;
|
|
white-space: pre-wrap;
|
|
display: block;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
color: var(--text-placeholder, #6A727C);
|
|
}
|
|
|
|
.input:empty::before {
|
|
display: block;
|
|
}
|
|
|
|
.input:not(:empty)::before {
|
|
display: none;
|
|
}
|
|
|
|
div.actions {
|
|
margin-top: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.left {
|
|
display: flex;
|
|
}
|
|
|
|
.left button {
|
|
background: red;
|
|
height: 28px;
|
|
width: 28px;
|
|
background-color: transparent !important;
|
|
border: none;
|
|
outline: none;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
&:hover {
|
|
background-color: #f1f1f1 !important;
|
|
}
|
|
|
|
// &:focus {
|
|
// border: 1px solid var(--border-default, #CCD1D5);
|
|
// background: var(--button-outline, #FFF);
|
|
// box-shadow: 0px 0px 0px 2px var(--Interactive-focusActive, #4368E3);
|
|
// }
|
|
|
|
}
|
|
|
|
button.submit {
|
|
height: 28px;
|
|
width: 28px;
|
|
border-radius: 6px;
|
|
border: 1px solid var(--border-weak, #E4E7EB);
|
|
background: var(--button-secondary, #FFF);
|
|
|
|
/* Elevations/100 */
|
|
box-shadow: 0px 0px 1px 0px var(--dropshadow-100700-layer-1, rgba(48, 50, 51, 0.05)), 0px 1px 1px 0px var(--dropshadow-100400-layer-2, rgba(48, 50, 51, 0.10));
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
&:hover {
|
|
border: 1px solid var(--border-default, #CCD1D5);
|
|
background: var(--button-outline-hover, rgba(136, 144, 153, 0.12));
|
|
}
|
|
|
|
// when disabled
|
|
&:disabled {
|
|
border-radius: 6px;
|
|
border: 1px solid var(--border-weak, #E4E7EB);
|
|
background: linear-gradient(0deg, var(--button-outline-disabled, #FFF) 0%, var(--button-outline-disabled, #FFF) 100%), var(--button-secondary, #FFF);
|
|
}
|
|
|
|
// &:focus {
|
|
// border: 1px solid var(--border-default, #CCD1D5);
|
|
// background: var(--button-outline, #FFF);
|
|
// box-shadow: 0px 0px 0px 2px var(--Interactive-focusActive, #4368E3);
|
|
// }
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.tj-inspector-timepicker.dark-theme {
|
|
.react-datepicker {
|
|
color: #f4f6fa !important;
|
|
background-color: var(--surfaces-surface-01) !important;
|
|
}
|
|
|
|
.react-datepicker,
|
|
.react-datepicker__header {
|
|
border: 1px solid var(--borders-default);
|
|
background-color: #1f2936;
|
|
|
|
.react-datepicker-time__header {
|
|
color: #fff !important;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.tj-inspector-timepicker {
|
|
padding: 0px !important;
|
|
|
|
.react-datepicker__time-list {
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
.react-datepicker__triangle {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.custom-inspector-validation-date-picker,
|
|
.custom-inspector-validation-time-picker {
|
|
flex-basis: 100% !important;
|
|
font-family: monospace;
|
|
font-size: 12px;
|
|
height: 32px;
|
|
|
|
.react-datepicker-wrapper {
|
|
width: 100%;
|
|
|
|
input {
|
|
width: 100%;
|
|
border: 1px solid var(--slate7);
|
|
padding: 5px 5px;
|
|
background-color: var(--base);
|
|
background-color: #fff;
|
|
color: rgb(0, 92, 197);
|
|
height: 32px;
|
|
}
|
|
|
|
input.dark-theme {
|
|
background-color: #272822;
|
|
color: rgb(174, 129, 255);
|
|
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.custom-inspector-validation-time-picker {
|
|
.custom-time-input {
|
|
border-left: none;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.time-col {
|
|
height: 200px;
|
|
}
|
|
|
|
.react-datepicker__input-time-container {
|
|
border-radius: 10px;
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
.custom-inspector-validation-time-picker-popper {
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.input-date-display-format,
|
|
.input-date-time-format {
|
|
height: 60px;
|
|
|
|
.hide-fx {
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
&:hover {
|
|
.hide-fx {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.tj-daterange-widget.dark-theme {
|
|
.react-datepicker__day {
|
|
color: white;
|
|
}
|
|
|
|
.react-datepicker__day:hover,
|
|
.react-datepicker__day--selecting-range-end {
|
|
background-color: var(--interactive-overlays-fill-hover) !important;
|
|
}
|
|
|
|
.react-datepicker__day--keyboard-selected {
|
|
background-color: var(--interactive-overlays-fill-pressed) !important;
|
|
}
|
|
|
|
.react-datepicker__month-container {
|
|
background-color: #1e2226;
|
|
}
|
|
|
|
.react-datepicker__day--outside-month {
|
|
color: #6d757d;
|
|
}
|
|
|
|
.react-datepicker__day-name {
|
|
color: #858c94;
|
|
}
|
|
|
|
}
|
|
|
|
.tj-daterange-widget {
|
|
|
|
border-radius: 10px;
|
|
box-shadow: 0px 8px 16px 0px #3032331A !important;
|
|
font-family: 'IBM Plex Sans';
|
|
|
|
.react-datepicker__day--in-selecting-range,
|
|
.react-datepicker__day--in-range {
|
|
border-radius: 0px;
|
|
background-color: #4368E31A !important;
|
|
}
|
|
|
|
.react-datepicker__header {
|
|
background-color: var(--surfaces-surface-01);
|
|
padding: 6px 0px;
|
|
border: none;
|
|
}
|
|
|
|
.react-datepicker__day--selecting-range-end {
|
|
border-radius: 8px;
|
|
background-color: #ededee !important;
|
|
}
|
|
|
|
.react-datepicker__day--selecting-range-start,
|
|
.react-datepicker__day--selected,
|
|
.react-datepicker__day--range-end {
|
|
border-radius: 8px !important;
|
|
background-color: #4368E3 !important;
|
|
color: #fff !important;
|
|
}
|
|
|
|
.react-datepicker__day--in-range:has(+ .react-datepicker__day--range-end),
|
|
.react-datepicker__day--in-selecting-range:has(+ .react-datepicker__day--selecting-range-end) {
|
|
border-top-right-radius: 8px;
|
|
border-bottom-right-radius: 8px;
|
|
}
|
|
|
|
.react-datepicker__day--in-range:has(+ .react-datepicker__day--range-end) {
|
|
box-shadow: 10px 0 0 0px #4368E31A;
|
|
}
|
|
|
|
.react-datepicker__day--range-start+.react-datepicker__day--in-range,
|
|
.react-datepicker__day--selecting-range-start+.react-datepicker__day--in-selecting-range {
|
|
border-top-left-radius: 8px;
|
|
border-bottom-left-radius: 8px;
|
|
}
|
|
|
|
.react-datepicker__day--range-start+.react-datepicker__day--in-range {
|
|
box-shadow: -10px 0 0 0px #4368E31A;
|
|
}
|
|
|
|
.react-datepicker__week {
|
|
|
|
.react-datepicker__day--in-range:first-of-type,
|
|
.react-datepicker__day--in-selecting-range:first-of-type,
|
|
.react-datepicker__day--outside-month+.react-datepicker__day--in-range,
|
|
.react-datepicker__day--outside-month+.react-datepicker__day--in-selecting-range {
|
|
border-top-left-radius: 8px;
|
|
border-bottom-left-radius: 8px;
|
|
}
|
|
|
|
.react-datepicker__day--in-range:last-of-type,
|
|
.react-datepicker__day--in-selecting-range:last-of-type,
|
|
.react-datepicker__day--in-range:has(+ .react-datepicker__day--outside-month),
|
|
.react-datepicker__day--in-selecting-range:has(+ .react-datepicker__day--outside-month) {
|
|
border-top-right-radius: 8px;
|
|
border-bottom-right-radius: 8px;
|
|
}
|
|
|
|
}
|
|
|
|
.tj-datepicker-widget-arrows {
|
|
box-shadow: 0px 1px 0px 0px #0000000B;
|
|
border: 1px solid var(--borders-default);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 4px;
|
|
background-color: var(--surfaces-surface-01) !important;
|
|
}
|
|
|
|
.tj-datepicker-widget-right {
|
|
position: absolute;
|
|
right: 10px;
|
|
}
|
|
|
|
.tj-datepicker-widget-left {
|
|
position: absolute;
|
|
left: 10px;
|
|
}
|
|
|
|
.react-datepicker__day {
|
|
font-size: 12px;
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
color: var(--text-primary);
|
|
width: 34px;
|
|
margin: 0px;
|
|
}
|
|
|
|
.react-datepicker__week {
|
|
height: 24px;
|
|
margin-bottom: 11px;
|
|
}
|
|
|
|
.react-datepicker {
|
|
border-radius: 10px !important;
|
|
border: none;
|
|
}
|
|
|
|
}
|
|
|
|
.tj-daterangepicker-widget-month-selector,
|
|
.tj-daterangepicker-widget-year-selector {
|
|
appearance: none;
|
|
-moz-appearance: none;
|
|
-webkit-appearance: none;
|
|
padding-right: 4px;
|
|
/* Add some padding on the right to create space for custom arrow */
|
|
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23424242" width="18px" height="18px"><path d="M7 10l5 5 5-5z" /></svg>');
|
|
/* Add a custom arrow (you can use your own SVG) */
|
|
background-repeat: no-repeat;
|
|
background-position: right center;
|
|
border: none;
|
|
/* Remove the default border */
|
|
padding: 8px;
|
|
/* Adjust padding as needed */
|
|
cursor: pointer;
|
|
/* Add pointer cursor for better usability */
|
|
background: none;
|
|
padding: 0px;
|
|
height: 24px;
|
|
text-align: center;
|
|
color: var(--text-primary);
|
|
font-weight: 500;
|
|
width: auto;
|
|
}
|
|
|
|
|
|
.datepicker-widget {
|
|
.react-datepicker-wrapper {
|
|
width: 100% !important;
|
|
}
|
|
}
|
|
|
|
.daterangepicker-header {
|
|
display: flex;
|
|
}
|
|
|
|
.datepicker-select-check {
|
|
position: absolute;
|
|
left: 10px;
|
|
}
|
|
|
|
.tj-daterange-widget.react-datepicker-month-component {
|
|
border-radius: 10px;
|
|
box-shadow: 0px 8px 16px 0px #3032331A !important;
|
|
font-family: 'IBM Plex Sans';
|
|
|
|
.react-datepicker__month-container {
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
|
|
.react-datepicker__month-text {
|
|
height: 26px !important;
|
|
margin: 0px;
|
|
width: 100% !important;
|
|
}
|
|
|
|
.react-datepicker__month-text--in-selecting-range,
|
|
.react-datepicker__month-text--in-range {
|
|
border-radius: 0px;
|
|
background-color: #4368E31A !important;
|
|
color: #000;
|
|
}
|
|
|
|
.react-datepicker__header {
|
|
background-color: var(--surfaces-surface-01);
|
|
padding: 6px 0px;
|
|
border: none;
|
|
}
|
|
|
|
|
|
.react-datepicker__month-text--selecting-range-end {
|
|
border-radius: 8px;
|
|
background-color: #ededee !important;
|
|
|
|
}
|
|
|
|
.react-datepicker__month-text--selecting-range-start,
|
|
.react-datepicker__month-text--selected,
|
|
.react-datepicker__month-text--range-end {
|
|
border-radius: 8px !important;
|
|
background-color: #4368E3 !important;
|
|
color: #fff !important;
|
|
}
|
|
|
|
.react-datepicker__month-text--in-range:has(+ .react-datepicker__month-text--range-end),
|
|
.react-datepicker__month-text--in-selecting-range:has(+ .react-datepicker__month-text--selecting-range-end) {
|
|
border-top-right-radius: 8px;
|
|
border-bottom-right-radius: 8px;
|
|
}
|
|
|
|
.react-datepicker__month-text--in-range:has(+ .react-datepicker__month-text--range-end) {
|
|
box-shadow: 10px 0 0 0px #4368E31A;
|
|
}
|
|
|
|
.react-datepicker__month-text--range-start+.react-datepicker__month-text--in-range,
|
|
.react-datepicker__month-text--selecting-range-start+.react-datepicker__month-text--in-selecting-range {
|
|
border-top-left-radius: 8px;
|
|
border-bottom-left-radius: 8px;
|
|
}
|
|
|
|
.react-datepicker__month-text--range-start+.react-datepicker__month-text--in-range {
|
|
box-shadow: -10px 0 0 0px #4368E31A;
|
|
}
|
|
|
|
.react-datepicker__month-wrapper {
|
|
gap: 0px !important;
|
|
|
|
.react-datepicker__month-text--in-range:first-of-type,
|
|
.react-datepicker__month-text--in-selecting-range:first-of-type,
|
|
.react-datepicker__month-text--outside-month-text+.react-datepicker__month-text--in-range,
|
|
.react-datepicker__month-text--outside-month-text+.react-datepicker__month-text--in-selecting-range {
|
|
border-top-left-radius: 8px;
|
|
border-bottom-left-radius: 8px;
|
|
}
|
|
|
|
.react-datepicker__month-text--in-range:last-of-type,
|
|
.react-datepicker__month-text--in-selecting-range:last-of-type,
|
|
.react-datepicker__month-text--in-range:has(+ .react-datepicker__month-text--outside-month-text),
|
|
.react-datepicker__month-text--in-selecting-range:has(+ .react-datepicker__month-text--outside-month-text) {
|
|
border-top-right-radius: 8px;
|
|
border-bottom-right-radius: 8px;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.dark-theme.tj-daterange-widget.react-datepicker-month-component {
|
|
.react-datepicker {
|
|
background-color: #1e2226;
|
|
}
|
|
|
|
.react-datepicker__month-text--selecting-range-end {
|
|
border-radius: 8px;
|
|
background-color: var(--interactive-overlays-fill-hover) !important;
|
|
}
|
|
}
|
|
|
|
.tj-daterange-widget.react-datepicker-year-component {
|
|
border-radius: 10px;
|
|
box-shadow: 0px 8px 16px 0px #3032331A !important;
|
|
font-family: 'IBM Plex Sans';
|
|
|
|
.react-datepicker__year-container {
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.react-datepicker__year-wrapper {
|
|
gap: 0px !important;
|
|
|
|
.react-datepicker__year-text--in-range:first-of-type,
|
|
.react-datepicker__year-text--in-selecting-range:first-of-type {
|
|
border-top-left-radius: 8px;
|
|
border-bottom-left-radius: 8px;
|
|
}
|
|
|
|
.react-datepicker__year-text--in-range:last-of-type,
|
|
.react-datepicker__year-text--in-selecting-range:last-of-type {
|
|
border-top-right-radius: 8px;
|
|
border-bottom-right-radius: 8px;
|
|
}
|
|
}
|
|
|
|
|
|
.react-datepicker__year-text {
|
|
height: 26px !important;
|
|
margin-top: 5px !important;
|
|
margin-bottom: 5px !important;
|
|
margin: 0px;
|
|
width: 62px !important;
|
|
}
|
|
|
|
.react-datepicker__year-text--in-selecting-range,
|
|
.react-datepicker__year-text--in-range {
|
|
border-radius: 0px;
|
|
background-color: #4368E31A !important;
|
|
color: #000;
|
|
}
|
|
|
|
.react-datepicker__header {
|
|
background-color: var(--surfaces-surface-01);
|
|
padding: 6px 0px;
|
|
border: none;
|
|
}
|
|
|
|
|
|
.react-datepicker__year-text--selecting-range-end {
|
|
border-radius: 8px;
|
|
background-color: #ededee !important;
|
|
|
|
}
|
|
|
|
.react-datepicker__year-text--selecting-range-start,
|
|
.react-datepicker__year-text--selected,
|
|
.react-datepicker__year-text--range-end {
|
|
border-radius: 8px !important;
|
|
background-color: #4368E3 !important;
|
|
color: #fff !important;
|
|
}
|
|
|
|
.react-datepicker__year-text--in-range:has(+ .react-datepicker__year-text--range-end),
|
|
.react-datepicker__year-text--in-selecting-range:has(+ .react-datepicker__year-text--selecting-range-end) {
|
|
border-top-right-radius: 8px;
|
|
border-bottom-right-radius: 8px;
|
|
}
|
|
|
|
.react-datepicker__year-text--in-range:has(+ .react-datepicker__year-text--range-end) {
|
|
box-shadow: 10px 0 0 0px #4368E31A;
|
|
}
|
|
|
|
.react-datepicker__year-text--range-start+.react-datepicker__year-text--in-range,
|
|
.react-datepicker__year-text--selecting-range-start+.react-datepicker__year-text--in-selecting-range {
|
|
border-top-left-radius: 8px;
|
|
border-bottom-left-radius: 8px;
|
|
}
|
|
|
|
.react-datepicker__year-text--range-start+.react-datepicker__year-text--in-range {
|
|
box-shadow: -10px 0 0 0px #4368E31A;
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.dark-theme {
|
|
.daterangepicker-header {
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
.dark-theme.tj-daterange-widget.react-datepicker-year-component {
|
|
.react-datepicker {
|
|
background-color: #1e2226;
|
|
}
|
|
|
|
.react-datepicker__year-text--selecting-range-end {
|
|
border-radius: 8px;
|
|
background-color: var(--interactive-overlays-fill-hover) !important;
|
|
}
|
|
}
|
|
|
|
.ai-builder-sidebar {
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow-x: hidden;
|
|
position: relative;
|
|
height: 100%;
|
|
transition: right 0.3s ease;
|
|
z-index: 1000;
|
|
overflow-y: auto;
|
|
|
|
border-left: 1px solid var(--border-weak, #E4E7EB);
|
|
background-color: #fff;
|
|
box-shadow: 0px 0px 1px 0px var(--dropshadow-100700-layer-1, rgba(48, 50, 51, 0.05)),
|
|
0px 8px 16px 0px var(--dropshadow-100400-layer-2, rgba(48, 50, 51, 0.10));
|
|
|
|
.input-box-gradient {
|
|
position: absolute;
|
|
bottom: 0;
|
|
width: 100%;
|
|
z-index: 1;
|
|
}
|
|
|
|
.reactMarkdown {
|
|
* {
|
|
font-size: 12px !important;
|
|
color: var(--text-default, #1B1F24);
|
|
}
|
|
}
|
|
|
|
.bullet {
|
|
align-self: flex-start;
|
|
background-color: var(--text-placeholder, #6A727C);
|
|
margin-top: 6px;
|
|
}
|
|
|
|
button {
|
|
border: none;
|
|
outline: none;
|
|
}
|
|
|
|
|
|
&.dark-theme {
|
|
background-color: #1f2936;
|
|
|
|
.header {
|
|
background-color: #1f2936;
|
|
}
|
|
}
|
|
|
|
button.dropdown-toggle {
|
|
height: 20px;
|
|
width: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: transparent;
|
|
margin-right: 5px;
|
|
|
|
svg {
|
|
transition: ease-in-out 0.2s;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
&:hover {
|
|
border: 1px solid var(--border-default, #CCD1D5);
|
|
background: var(--button-outline-hover, rgba(136, 144, 153, 0.12));
|
|
}
|
|
|
|
// &:focus {
|
|
// border: 1px solid var(--border-default, #CCD1D5);
|
|
// background: var(--button-outline, #FFF);
|
|
// box-shadow: 0px 0px 0px 2px var(--Interactive-focusActive, #4368E3);
|
|
// }
|
|
|
|
&::after {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
.header {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 2;
|
|
|
|
background-color: #fff;
|
|
padding: 8px 16px 0 16px;
|
|
|
|
border-bottom: 1px solid var(--border-weak, #E4E7EB);
|
|
|
|
.conversation-type-toggle {
|
|
margin-top: 4px;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 4px;
|
|
|
|
button {
|
|
padding: 6px 7px;
|
|
color: var(--text-default, #1B1F24);
|
|
background: transparent;
|
|
position: relative;
|
|
font-size: 12px;
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
line-height: 18px;
|
|
|
|
/* 150% */
|
|
&.active {
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 2px;
|
|
background-color: var(--primary-accent-strong);
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
section {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
h1 {
|
|
color: var(--text-default, #1B1F24);
|
|
font-family: "IBM Plex Sans";
|
|
font-size: 14px;
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
line-height: 20px;
|
|
margin-bottom: 0;
|
|
|
|
.highlight {
|
|
color: #FF5F6D
|
|
}
|
|
}
|
|
|
|
button {
|
|
height: 28px;
|
|
width: 28px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: transparent;
|
|
|
|
&:hover {
|
|
background: var(--interactive-hover, rgba(136, 144, 153, 0.12));
|
|
}
|
|
|
|
// &:focus {
|
|
// border: 1px solid var(--border-default, #CCD1D5);
|
|
// background: var(--button-outline, #FFF);
|
|
// box-shadow: 0px 0px 0px 2px var(--Interactive-focusActive, #4368E3);
|
|
// }
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.conversation-wrapper {
|
|
overflow-y: auto;
|
|
flex-grow: 1;
|
|
padding: 32px;
|
|
z-index: 2;
|
|
|
|
// remote the scrollbar
|
|
&::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.zero-state-wrapper {
|
|
margin-bottom: 20px;
|
|
|
|
header {
|
|
.logo {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
display: flex;
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 24px;
|
|
border: 1px solid var(--border-weak, #E4E7EB);
|
|
background: var(--background-surface-layer-01, #FFFFFF);
|
|
}
|
|
|
|
.greeting {
|
|
margin-top: 12px;
|
|
|
|
h1 {
|
|
margin: 0;
|
|
color: var(--text-default, #1B1F24);
|
|
font-size: 16px;
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
}
|
|
|
|
p {
|
|
color: var(--text-placeholder, #6A727C);
|
|
font-size: 12px;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
margin-top: 4px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.get-started {
|
|
margin-top: 24px;
|
|
|
|
h2 {
|
|
display: flex;
|
|
padding: 6px 0px;
|
|
color: var(--text-placeholder, #6A727C);
|
|
font-size: 11px;
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
line-height: 20px;
|
|
margin: 0;
|
|
}
|
|
|
|
.suggestion {
|
|
display: flex;
|
|
padding: 4px 8px;
|
|
align-items: center;
|
|
gap: 4px;
|
|
border-radius: 6px;
|
|
|
|
p {
|
|
margin: 0;
|
|
color: var(--text-default, #1B1F24);
|
|
font-size: 12px;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
}
|
|
|
|
|
|
// &:hover {
|
|
// background: var(--interactive-hover, rgba(136, 144, 153, 0.12));
|
|
// }
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.message-wrapper {
|
|
&+.message-wrapper {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
header {
|
|
.logo {
|
|
display: flex;
|
|
width: 28px;
|
|
height: 28px;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 8px;
|
|
border-radius: 24px;
|
|
border: 1px solid var(--border-weak, #E4E7EB);
|
|
background: var(--background-surface-layer-01, #FFFFFF);
|
|
|
|
|
|
svg {
|
|
flex-shrink: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.invalid-prompt {
|
|
.message-section:first-of-type {
|
|
margin-top: 4px;
|
|
|
|
p {
|
|
margin: 0;
|
|
color: var(--text-default, #1B1F24);
|
|
font-size: 12px;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
|
|
.message-section:nth-of-type(2) {
|
|
margin-top: 12px;
|
|
|
|
h3 {
|
|
margin: 0;
|
|
color: var(--text-placeholder, #6A727C);
|
|
font-size: 11px;
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
line-height: 20px;
|
|
margin-top: 6px;
|
|
}
|
|
|
|
div.options {
|
|
margin-top: 6px;
|
|
}
|
|
|
|
p {
|
|
color: var(--text-default, #1B1F24);
|
|
font-size: 12px;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 18px;
|
|
padding: 4px 8px;
|
|
margin: 0;
|
|
border-radius: 6px;
|
|
|
|
&:hover {
|
|
background: var(--interactive-hover, rgba(136, 144, 153, 0.12));
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.message-section:nth-of-type(3) {
|
|
margin-top: 12px;
|
|
|
|
|
|
.carousel-button {
|
|
top: calc(50% + 15px);
|
|
}
|
|
|
|
h2 {
|
|
margin: 0;
|
|
color: var(--text-placeholder, #6A727C);
|
|
font-size: 11px;
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
line-height: 20px;
|
|
padding: 6px 0 0 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.ai {
|
|
|
|
h1,
|
|
h2,
|
|
h3 {
|
|
margin: 0
|
|
}
|
|
|
|
h1 {
|
|
color: var(--text-default, #1B1F24);
|
|
font-size: 16px;
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
line-height: 24px;
|
|
}
|
|
|
|
h2 {
|
|
color: var(--text-default, #1B1F24);
|
|
font-size: 12px;
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
line-height: 18px;
|
|
}
|
|
|
|
.content {
|
|
color: var(--text-default, #1B1F24);
|
|
font-size: 12px;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 170%;
|
|
}
|
|
|
|
.ai-response-section:first-of-type {
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.ai-response-section:not(:first-of-type) {
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.subsection {
|
|
margin-top: 8px;
|
|
|
|
header {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 24px;
|
|
|
|
svg.ai-generated-badge {
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
|
|
h3 {
|
|
margin: 0;
|
|
color: var(--text-placeholder, #6A727C);
|
|
font-size: 11px;
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.subsection-content {
|
|
margin-left: 20px;
|
|
|
|
.list-item {
|
|
color: var(--text-default, #1B1F24);
|
|
font-size: 12px;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 18px;
|
|
display: flex;
|
|
gap: 6px;
|
|
align-items: center;
|
|
|
|
button.checkbox {
|
|
display: flex;
|
|
width: 16px;
|
|
height: 16px;
|
|
padding: 3px;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border-radius: 5px;
|
|
margin-top: 2px;
|
|
align-self: flex-start;
|
|
|
|
&.selected {
|
|
background: var(--button-primary, #4368E3);
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.list-item:first-of-type {
|
|
margin-top: 2px;
|
|
}
|
|
|
|
|
|
.list-item:not(:first-of-type) {
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.color-picker {
|
|
display: flex;
|
|
margin-top: 8px;
|
|
align-items: center;
|
|
|
|
&:first-of-type {
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.color-input {
|
|
width: 18px;
|
|
height: 18px;
|
|
border-radius: 6px;
|
|
outline: none;
|
|
border: 1px solid var(--border-default, #CCD1D5);
|
|
background: #FFB224;
|
|
box-shadow: 0px 1px 0px 0px var(--_-Dropshadow-000, rgba(0, 0, 0, 0.10));
|
|
|
|
&:hover {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
p {
|
|
margin-bottom: 0;
|
|
margin-left: 6px;
|
|
color: var(--text-default, #1B1F24);
|
|
text-align: center;
|
|
|
|
/* Paragraph/Extrasmall/Regular */
|
|
font-family: "IBM Plex Sans";
|
|
font-size: 12px;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 20px;
|
|
/* 166.667% */
|
|
}
|
|
|
|
.color-picker-item {
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 50%;
|
|
border: 1px solid var(--border-weak, #E4E7EB);
|
|
cursor: pointer;
|
|
|
|
&.selected {
|
|
border: 1px solid var(--border-default, #CCD1D5);
|
|
}
|
|
}
|
|
}
|
|
|
|
.table {
|
|
margin-top: 2px;
|
|
border-radius: 6px;
|
|
border: 1px solid var(--border-weak, #E4E7EB);
|
|
|
|
.tabs {
|
|
display: flex;
|
|
margin: 0px 16px;
|
|
gap: 4px;
|
|
overflow-x: auto;
|
|
width: auto;
|
|
|
|
// hide scrollbar
|
|
&::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
button {
|
|
margin: 6px 0;
|
|
padding: 2px 7px;
|
|
font-family: "IBM Plex Sans";
|
|
font-size: 12px;
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
line-height: 18px;
|
|
background: transparent;
|
|
border: none;
|
|
outline: none;
|
|
// border-radius: 0px;
|
|
position: relative;
|
|
color: var(--text-placeholder, #6A727C);
|
|
flex-shrink: 0;
|
|
// border-bottom: 2px solid transparent;
|
|
|
|
&.active {
|
|
color: var(--text-default, #1B1F24);
|
|
|
|
&::after {
|
|
content: "";
|
|
display: block;
|
|
width: 100%;
|
|
height: 2px;
|
|
background: var(--button-primary, #4368E3);
|
|
position: absolute;
|
|
bottom: -6px;
|
|
left: 0;
|
|
}
|
|
}
|
|
|
|
&:not(.active):hover {
|
|
background: var(--interactive-hover, rgba(136, 144, 153, 0.12));
|
|
padding: 2px 7px;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.table-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 8px 12px;
|
|
border-top: 1px solid var(--border-weak, #E4E7EB);
|
|
|
|
p {
|
|
margin: 0;
|
|
flex-grow: 1;
|
|
font-size: 12px;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 18px;
|
|
|
|
&:first-of-type {
|
|
color: var(--text-default, #1B1F24);
|
|
|
|
}
|
|
|
|
&:not(:first-of-type) {
|
|
color: var(--text-placeholder, #6A727C);
|
|
text-align: right;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.query {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 4px;
|
|
border-radius: 6px;
|
|
background: #88909914;
|
|
|
|
svg {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
p {
|
|
margin: 0;
|
|
color: var(--text-placeholder, #6A727C);
|
|
font-size: 11px;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 16px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
h4 {
|
|
color: var(--text-default, #1B1F24);
|
|
font-family: "IBM Plex Sans";
|
|
font-size: 12px;
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
line-height: 18px;
|
|
margin: 0;
|
|
flex-shrink: 0;
|
|
|
|
}
|
|
|
|
&:first-of-type {
|
|
margin-top: 2px;
|
|
}
|
|
|
|
&:not(:first-of-type) {
|
|
margin-top: 8px;
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
}
|
|
}
|
|
|
|
.action-buttons {
|
|
margin-top: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 4px;
|
|
|
|
button {
|
|
border: none;
|
|
outline: none;
|
|
background-color: transparent;
|
|
}
|
|
|
|
.secondary-btn {
|
|
padding: 5px 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
|
|
span {
|
|
color: var(--text-default, #1B1F24);
|
|
font-size: 12px;
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
line-height: 18px;
|
|
}
|
|
|
|
&:hover {
|
|
background: var(--interactive-hover, rgba(136, 144, 153, 0.12));
|
|
}
|
|
}
|
|
|
|
.primary-btn {
|
|
padding: 5px 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
color: var(--text-default, #1B1F24);
|
|
font-size: 12px;
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
line-height: 18px;
|
|
border-radius: 6px;
|
|
border: 1px solid var(--border-weak, #E4E7EB);
|
|
background: var(--button-secondary, #FFF);
|
|
box-shadow: 0px 0px 1px 0px var(--dropshadow-100700-layer-1, rgba(48, 50, 51, 0.05)), 0px 1px 1px 0px var(--dropshadow-100400-layer-2, rgba(48, 50, 51, 0.10));
|
|
|
|
&:hover {
|
|
background: var(--interactive-hover, rgba(136, 144, 153, 0.12));
|
|
}
|
|
}
|
|
}
|
|
|
|
.options {
|
|
display: flex;
|
|
padding: 4px;
|
|
margin-top: 4px;
|
|
|
|
.regenerate-response {
|
|
display: flex;
|
|
align-items: center;
|
|
color: var(--text-default, #1B1F24);
|
|
font-size: 11px;
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
line-height: 16px;
|
|
gap: 4px;
|
|
padding: 2px 8px;
|
|
|
|
&:hover {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.message-votes {
|
|
display: flex;
|
|
|
|
&:hover {
|
|
button.active {
|
|
background: var(--interactive-hover, rgba(136, 144, 153, 0.12));
|
|
}
|
|
}
|
|
|
|
button {
|
|
background: transparent;
|
|
border: none;
|
|
outline: none;
|
|
display: flex;
|
|
height: 28px;
|
|
width: 28px;
|
|
align-items: center;
|
|
flex: 1 0 0;
|
|
cursor: pointer;
|
|
|
|
&:disabled {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.user {
|
|
display: flex;
|
|
|
|
/* 150% */
|
|
.user-message {
|
|
white-space: pre-wrap;
|
|
display: inline-block;
|
|
border-radius: 8px;
|
|
background: #F5F6F7;
|
|
padding: 8px 16px;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
gap: 8px;
|
|
color: var(--text-default, #1B1F24);
|
|
|
|
font-size: 12px;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 18px;
|
|
margin-left: auto;
|
|
|
|
&.dark-theme {
|
|
background-color: #1B1F24;
|
|
}
|
|
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
section.template-cards {
|
|
|
|
overflow-x: auto;
|
|
margin-top: 6px;
|
|
transition: height 0.1s ease !important;
|
|
flex-direction: row;
|
|
gap: 16px;
|
|
display: flex;
|
|
|
|
&::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.section-card {
|
|
flex: 0 0 auto;
|
|
// display: flex;
|
|
width: 184px;
|
|
height: 100px;
|
|
padding: 12px 16px;
|
|
// flex-direction: column;
|
|
// justify-content: center;
|
|
gap: 8px;
|
|
border-radius: 6px;
|
|
background-color: #88909914;
|
|
|
|
&:hover {
|
|
background: var(--interactive-hover, rgba(136, 144, 153, 0.12));
|
|
}
|
|
|
|
svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.section-card-content {
|
|
margin-top: 8px;
|
|
|
|
h3 {
|
|
margin: 0;
|
|
color: var(--text-default, #1B1F24);
|
|
font-size: 12px;
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
line-height: 18px;
|
|
}
|
|
|
|
p {
|
|
color: var(--text-placeholder, #6A727C);
|
|
font-size: 11px;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 16px;
|
|
margin: 0;
|
|
word-wrap: break-word;
|
|
word-break: break-word;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.templates {
|
|
margin-top: 24px;
|
|
position: relative;
|
|
|
|
header {
|
|
display: flex;
|
|
margin-top: 6px;
|
|
|
|
h2 {
|
|
margin: 0;
|
|
color: var(--text-placeholder, #6A727C);
|
|
font-size: 11px;
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
line-height: 20px;
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.carousel-button {
|
|
position: absolute;
|
|
top: calc(50% + 10px);
|
|
right: -13px;
|
|
transform: translateY(-50%);
|
|
z-index: 1;
|
|
|
|
height: 28px;
|
|
width: 28px;
|
|
display: flex;
|
|
padding: 4px 8px;
|
|
align-items: center;
|
|
gap: 4px;
|
|
border-radius: 6px;
|
|
background-color: #fff;
|
|
border-radius: 6px;
|
|
border: 1px solid var(--border-weak, #E4E7EB);
|
|
background: var(--button-secondary, #FFF);
|
|
|
|
/* Elevations/100 */
|
|
box-shadow: 0px 0px 1px 0px var(--dropshadow-100700-layer-1, rgba(48, 50, 51, 0.05)), 0px 1px 1px 0px var(--dropshadow-100400-layer-2, rgba(48, 50, 51, 0.10));
|
|
|
|
&.left {
|
|
left: -13px;
|
|
transform: translateY(-50%) rotateY(180deg);
|
|
}
|
|
|
|
&:hover {
|
|
background: var(--interactive-hover, rgba(136, 144, 153, 0.12));
|
|
}
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
.ai-message-loading-state {
|
|
display: flex;
|
|
margin-top: 12px;
|
|
gap: 20px;
|
|
|
|
.logo {
|
|
height: 28px;
|
|
width: 28px;
|
|
border-radius: 24px;
|
|
background: var(--background-surface-layer-01, #FFFFFF);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border: 1px solid var(--border-weak, #E4E7EB);
|
|
|
|
}
|
|
|
|
.right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
|
|
span {
|
|
color: var(--text-placeholder, #6A727C);
|
|
text-align: center;
|
|
font-size: 11px;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 16px;
|
|
}
|
|
|
|
div.dots {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
|
|
.dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
background-color: #FF5F6D;
|
|
opacity: 0.3;
|
|
border-radius: 50%;
|
|
animation: dot-blink 1.2s infinite;
|
|
|
|
}
|
|
|
|
.dot:nth-child(1) {
|
|
animation-delay: 0s;
|
|
}
|
|
|
|
.dot:nth-child(2) {
|
|
animation-delay: 0.3s;
|
|
}
|
|
|
|
.dot:nth-child(3) {
|
|
animation-delay: 0.6s;
|
|
}
|
|
|
|
@keyframes dot-blink {
|
|
|
|
0%,
|
|
80%,
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
|
|
40% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.tj-datepicker-popover {
|
|
width: auto;
|
|
height: 100%;
|
|
}
|
|
|
|
.tooljet-copilot-popover {
|
|
z-index: 10000
|
|
}
|
|
|
|
.copilot-overlay-trigger {
|
|
display: flex;
|
|
padding: 4px;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 4px;
|
|
outline: none;
|
|
border-radius: 4px;
|
|
border: 1px solid var(--border-weak, #E4E7EB);
|
|
background: var(--button-secondary, #FFF);
|
|
box-shadow: 0px 0px 1px 0px var(--dropshadow-100700-layer-1, rgba(48, 50, 51, 0.05)), 0px 1px 1px 0px var(--dropshadow-100400-layer-2, rgba(48, 50, 51, 0.10));
|
|
|
|
&.preview-box {
|
|
color: var(--text-default, #1B1F24);
|
|
|
|
/* Paragraph/Extrasmall/Medium */
|
|
font-family: "IBM Plex Sans";
|
|
font-size: 12px;
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
line-height: 20px;
|
|
/* 166.667% */
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 4px 10px;
|
|
border-radius: 6px;
|
|
border: 1px solid Borders/default;
|
|
background: surfaces/layer-01;
|
|
|
|
/* Elevations/000 */
|
|
box-shadow: 0px 1px 0px 0px var(--_-Dropshadow-000, rgba(0, 0, 0, 0.10));
|
|
}
|
|
|
|
&:hover {
|
|
background: var(--interactive-hover, rgba(136, 144, 153, 0.12));
|
|
}
|
|
}
|
|
|
|
.codehinter-copilot-btn {
|
|
z-index: 1000;
|
|
}
|
|
|
|
#copilot-menu {
|
|
width: 440px;
|
|
max-width: 440px;
|
|
max-height: 500px;
|
|
}
|
|
|
|
|
|
|
|
.tooljet-copilot {
|
|
width: 100%;
|
|
padding: 8px 16px !important;
|
|
|
|
header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
|
|
.text {
|
|
color: var(--text-default, #1B1F24);
|
|
display: flex;
|
|
align-items: center;
|
|
/* large/medium */
|
|
font-family: "IBM Plex Sans";
|
|
font-size: 14px;
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
line-height: 20px;
|
|
gap: 4px;
|
|
|
|
/* 142.857% */
|
|
|
|
}
|
|
|
|
button {
|
|
border: none;
|
|
outline: none;
|
|
padding: 6px 7px;
|
|
color: var(--text-default, #1B1F24);
|
|
background: transparent;
|
|
position: relative;
|
|
|
|
&:hover {
|
|
background: var(--interactive-hover, rgba(136, 144, 153, 0.12));
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
section.copilot-prompt-input {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 8px;
|
|
gap: 2px;
|
|
justify-content: space-between;
|
|
border-radius: 6px;
|
|
border: 1px solid var(--border-weak, #E4E7EB);
|
|
padding: 4px;
|
|
|
|
&:focus-within {
|
|
border: 1px solid var(--border-accent-strong, #4368E3);
|
|
}
|
|
|
|
.input {
|
|
flex-grow: 1;
|
|
color: var(--text-default, #1B1F24);
|
|
font-family: "IBM Plex Sans";
|
|
font-size: 12px;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 18px;
|
|
position: relative;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
max-height: 50px;
|
|
}
|
|
|
|
.input::before {
|
|
content: attr(data-placeholder);
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
color: #aaa;
|
|
pointer-events: none;
|
|
white-space: pre-wrap;
|
|
display: block;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
color: var(--text-placeholder, #6A727C);
|
|
}
|
|
|
|
.input:empty::before {
|
|
display: block;
|
|
}
|
|
|
|
.input:not(:empty)::before {
|
|
display: none;
|
|
}
|
|
|
|
button.submit {
|
|
height: 28px;
|
|
width: 28px;
|
|
border-radius: 6px;
|
|
border: 1px solid var(--border-weak, #E4E7EB);
|
|
background: var(--button-secondary, #FFF);
|
|
|
|
/* Elevations/100 */
|
|
box-shadow: 0px 0px 1px 0px var(--dropshadow-100700-layer-1, rgba(48, 50, 51, 0.05)), 0px 1px 1px 0px var(--dropshadow-100400-layer-2, rgba(48, 50, 51, 0.10));
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
&:hover {
|
|
border: 1px solid var(--border-default, #CCD1D5);
|
|
background: var(--button-outline-hover, rgba(136, 144, 153, 0.12));
|
|
}
|
|
|
|
// when disabled
|
|
&:disabled {
|
|
border-radius: 6px;
|
|
border: 1px solid var(--border-weak, #E4E7EB);
|
|
background: linear-gradient(0deg, var(--button-outline-disabled, #FFF) 0%, var(--button-outline-disabled, #FFF) 100%), var(--button-secondary, #FFF);
|
|
}
|
|
|
|
// &:focus {
|
|
// border: 1px solid var(--border-default, #CCD1D5);
|
|
// background: var(--button-outline, #FFF);
|
|
// box-shadow: 0px 0px 0px 2px var(--Interactive-focusActive, #4368E3);
|
|
// }
|
|
}
|
|
}
|
|
|
|
section.content {
|
|
max-height: 400px;
|
|
overflow-y: auto;
|
|
margin: 16px auto;
|
|
background-color: #F6F7F7;
|
|
border-radius: 6px;
|
|
|
|
pre {
|
|
border: none;
|
|
background-color: transparent;
|
|
padding: 8px 16px;
|
|
}
|
|
|
|
}
|
|
|
|
footer {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
|
|
button {
|
|
border: none;
|
|
outline: none;
|
|
padding: 6px 7px;
|
|
color: var(--text-default, #1B1F24);
|
|
background: transparent;
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 5px 10px;
|
|
gap: 6px;
|
|
color: var(--text-default, #1B1F24);
|
|
|
|
/* base/medium */
|
|
font-family: "IBM Plex Sans";
|
|
font-size: 12px;
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
line-height: 18px;
|
|
border-radius: 6px;
|
|
border: 1px solid var(--border-weak, #E4E7EB);
|
|
background: var(--button-secondary, #FFF);
|
|
|
|
/* Elevations/100 */
|
|
box-shadow: 0px 0px 1px 0px var(--dropshadow-100700-layer-1, rgba(48, 50, 51, 0.05)), 0px 1px 1px 0px var(--dropshadow-100400-layer-2, rgba(48, 50, 51, 0.10));
|
|
|
|
/* 150% */
|
|
&:hover {
|
|
background: var(--interactive-hover, rgba(136, 144, 153, 0.12));
|
|
}
|
|
}
|
|
}
|
|
|
|
&.dark-theme {
|
|
.copilot-loader-wrapper {
|
|
background-color: #858C9414;
|
|
}
|
|
|
|
section.content {
|
|
background-color: #858C9414;
|
|
|
|
pre {
|
|
color: #fff
|
|
}
|
|
}
|
|
}
|
|
|
|
.copilot-loader-wrapper {
|
|
border-radius: 6px;
|
|
background-color: #F6F7F7;
|
|
padding: 8px;
|
|
|
|
.ai-message-loading-state {
|
|
margin-top: 0
|
|
}
|
|
}
|
|
}
|
|
|
|
.low-credits {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
border-radius: 6px;
|
|
background: var(--background-error-weak, #FCEEEF);
|
|
padding: 6px 8px;
|
|
|
|
span {
|
|
color: var(--text-default, #1B1F24);
|
|
|
|
/* small/regular */
|
|
font-family: "IBM Plex Sans";
|
|
font-size: 11px;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 16px;
|
|
/* 145.455% */
|
|
margin-left: 8px;
|
|
flex-grow: 1;
|
|
}
|
|
}
|
|
|
|
|
|
.codebuilder-color-swatches-wrapper {
|
|
min-width: 231.333px;
|
|
width: 100%;
|
|
height: 48px;
|
|
padding: 8px;
|
|
|
|
|
|
.codebuilder-color-swatches {
|
|
display: flex;
|
|
padding: 2px;
|
|
flex-wrap: wrap;
|
|
|
|
.ToggleGroup {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.codebuilder-color-swatches-options {
|
|
width: 100%;
|
|
height: 30px;
|
|
padding: 6px 8px;
|
|
border-radius: 6px;
|
|
|
|
&:hover {
|
|
background-color: #f0f1f2 !important;
|
|
}
|
|
|
|
.color-icon {
|
|
width: 18px;
|
|
height: 18px;
|
|
border-radius: 4px;
|
|
border: 1.5px solid #CCD1D5;
|
|
background-color: #0091FF;
|
|
}
|
|
}
|
|
|
|
|
|
.theme-dropdown-wrapper {
|
|
gap: 75px;
|
|
height: 32px;
|
|
margin-bottom: 20px !important;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.theme-custom-menu-list-header {
|
|
margin: 16px 14px 0px 16px !important;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.theme-create-btn {
|
|
width: 100%;
|
|
margin-bottom: 8px;
|
|
height: 32px;
|
|
color: #000;
|
|
border: 1px solid var(--Border-brand-weak, #97AEFC);
|
|
}
|
|
|
|
|
|
.theme-default-pill {
|
|
font-size: 11px;
|
|
background-color: #CCD1D54D;
|
|
color: #6A727C;
|
|
width: 49px;
|
|
height: 18px;
|
|
border-radius: 20px
|
|
}
|
|
|
|
.no-scroll {
|
|
overflow: hidden;
|
|
}
|
|
|
|
|
|
.textarea-widget:focus {
|
|
border-color: var(--primary-brand);
|
|
}
|
|
|
|
.multiselct-widget-option {
|
|
input:checked {
|
|
background-color: var(--primary-brand);
|
|
}
|
|
}
|
|
|
|
.multiselect-box {
|
|
.options {
|
|
input:checked {
|
|
background-color: var(--primary-brand);
|
|
}
|
|
}
|
|
}
|
|
|
|
.timer-btn {
|
|
background-color: var(--primary-brand);
|
|
|
|
&:hover {
|
|
background-color: var(--primary-brand);
|
|
}
|
|
}
|
|
|
|
.timer-btn-hover:hover {
|
|
background-color: var(--primary-brand);
|
|
}
|
|
|
|
.canvas-styles-header {
|
|
display: flex;
|
|
width: 100%;
|
|
padding: 6px 16px;
|
|
font-family: IBM Plex Sans;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
line-height: 20px;
|
|
text-align: left;
|
|
text-underline-position: from-font;
|
|
text-decoration-skip-ink: none;
|
|
background: var(--Background-surface-layer-02, #F6F8FA);
|
|
color: #6A727C;
|
|
|
|
|
|
}
|
|
|
|
.app-export-btn {
|
|
background-color: #FFFFFF;
|
|
border: 1px solid var(--Border-default, #CCD1D5);
|
|
box-shadow: 0px 1px 0px 0px var(--Dropshadow000);
|
|
}
|
|
|
|
.dark-theme {
|
|
.app-export-btn {
|
|
background-color: #313b46;
|
|
color: #ffffff;
|
|
border: 1px solid transparent;
|
|
}
|
|
|
|
.canvas-styles-header {
|
|
background-color: #212325;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
|
|
.dark-theme {
|
|
.codebuilder-color-swatches-options:hover {
|
|
background-color: #313b46 !important;
|
|
}
|
|
}
|
|
|
|
.codebuilder-color-picker {
|
|
.sketch-picker {
|
|
border: none !important;
|
|
}
|
|
}
|
|
|
|
.accordion-button.inspector {
|
|
width: 300;
|
|
height: 32px;
|
|
justify-content: space-between;
|
|
padding-top: 6px;
|
|
padding-right: 16px;
|
|
padding-bottom: 6px;
|
|
padding-left: 16px;
|
|
border-bottom-width: 1px;
|
|
font-family: IBM Plex Sans;
|
|
font-weight: 500;
|
|
font-size: 12px;
|
|
line-height: 20px;
|
|
letter-spacing: 0%;
|
|
background: var(--Background-surface-layer-02, #F6F8FA);
|
|
color: var(--Text-placeholder, #6A727C) !important;
|
|
|
|
}
|
|
|
|
.dark-theme {
|
|
.accordion-button.inspector {
|
|
background: var(--slate3);
|
|
color: var(--slate12);
|
|
}
|
|
}
|
|
|
|
#inspector-tabpane-properties .accordion-header {
|
|
height: 32px;
|
|
}
|
|
|
|
.cm-tooltip {
|
|
z-index: 9999 !important;
|
|
}
|
|
|
|
.workspace-constant-value {
|
|
position: relative;
|
|
|
|
.fromEnv {
|
|
content: '.env';
|
|
border-radius: 6px;
|
|
background: var(--Indigo-50, #EEF4FF);
|
|
padding: 0px 8px;
|
|
width: 40px;
|
|
align-items: center;
|
|
position: absolute;
|
|
color: var(--Indigo-700, #3538CD);
|
|
text-align: center;
|
|
font-size: 12px;
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
line-height: 20px;
|
|
margin-left: 24px;
|
|
}
|
|
|
|
.isDuplicate {
|
|
padding: 0px 8px;
|
|
border-radius: 6px;
|
|
background: var(--Error-50, #FEF3F2);
|
|
color: var(--Error-700, #B42318);
|
|
text-align: center;
|
|
font-size: 12px;
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
line-height: 20px;
|
|
/* 166.667% */
|
|
margin-left: 24px;
|
|
}
|
|
|
|
.env-secret-hidden-message {
|
|
border-radius: 16px;
|
|
background: var(--Warning-50, #FFFAEB);
|
|
padding: 4px 12px;
|
|
color: var(--Warning-700, #B54708);
|
|
font-size: 12px;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 18px;
|
|
|
|
&.dark {
|
|
background: #FFFAEB !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.phone-input-widget {
|
|
.tj-text-input-widget.is-invalid {
|
|
border-left: none !important;
|
|
}
|
|
|
|
input[type="tel"] {
|
|
border-top-left-radius: '0px' !important;
|
|
border-bottom-left-radius: '0px' !important;
|
|
}
|
|
}
|
|
|
|
.single-line-codehinter-input {
|
|
.cm-editor {
|
|
max-height: 100px !important;
|
|
}
|
|
} |