mirror of
https://github.com/ToolJet/ToolJet
synced 2026-05-06 06:48:21 +00:00
5d670417e2
* fixes cursor default to pointer * Added cursor to icon widget --------- Co-authored-by: Kavin Venkatachalam <kavin.saratha@gmail.com>
10435 lines
No EOL
174 KiB
SCSS
10435 lines
No EOL
174 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 url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,400;1,500;1,600;1,700&display=swap');
|
|
@import 'react-loading-skeleton/dist/skeleton.css';
|
|
|
|
// variables
|
|
$border-radius: 4px;
|
|
|
|
|
|
body {
|
|
font-family: 'IBM Plex Sans';
|
|
}
|
|
|
|
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: 45px;
|
|
min-height: auto;
|
|
|
|
.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,
|
|
.accordion-button {
|
|
background-color: inherit;
|
|
}
|
|
|
|
.accordion-button {
|
|
font-weight: 400 !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.accordion-button:not(.collapsed) {
|
|
padding-bottom: 0 !important;
|
|
}
|
|
|
|
.accordion-body {
|
|
.form-label {
|
|
font-weight: 400;
|
|
font-size: 12px;
|
|
color: #61656c;
|
|
}
|
|
|
|
.style-fx {
|
|
margin-top: 3px !important;
|
|
}
|
|
}
|
|
|
|
.editor {
|
|
.header-container {
|
|
max-width: 100%;
|
|
padding: 0 10px 0 0;
|
|
min-height: 45px;
|
|
}
|
|
|
|
.resizer-select,
|
|
.resizer-active {
|
|
border: solid 1px $primary !important;
|
|
|
|
.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;
|
|
padding: 0 32px;
|
|
}
|
|
|
|
.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-color: #fff !important;
|
|
background-clip: border-box;
|
|
border: solid rgba(0, 0, 0, 0.125);
|
|
border-width: 0px 1px 3px 0px;
|
|
margin-top: 0px;
|
|
padding-top: 0px;
|
|
|
|
.accordion-item {
|
|
border: solid rgba(101, 109, 119, 0.16);
|
|
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 {
|
|
height: calc(100% - 45px);
|
|
position: fixed;
|
|
right: 0;
|
|
overflow-x: hidden;
|
|
width: 300px;
|
|
flex: 1 1 auto;
|
|
top: 45px;
|
|
border-top: 1px solid var(--slate7);
|
|
background-color: var(--base);
|
|
background-clip: border-box;
|
|
border: solid rgba(0, 0, 0, 0.125);
|
|
border-width: 0px 0px 0px 1px;
|
|
|
|
.nav-tabs .nav-link {
|
|
color: #3e525b;
|
|
border-top-left-radius: 0px;
|
|
border-top-right-radius: 0px;
|
|
}
|
|
|
|
.inspector {
|
|
.inspector-add-button {
|
|
background: inherit;
|
|
}
|
|
|
|
.inspector-add-button:hover {
|
|
color: $primary;
|
|
background: #eef3f9;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.form-control-plaintext {
|
|
padding: 0;
|
|
}
|
|
|
|
.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%;
|
|
|
|
.component-image-holder {
|
|
border-radius: 0;
|
|
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
|
|
border: 1px solid #d2ddec;
|
|
box-sizing: border-box;
|
|
border-radius: 4px;
|
|
|
|
img {
|
|
margin: 0 auto;
|
|
}
|
|
|
|
&:hover {
|
|
background: rgba(66, 153, 225, 0.1);
|
|
}
|
|
}
|
|
|
|
.component-title {
|
|
display: block;
|
|
margin-top: 10px;
|
|
color: #3e525b;
|
|
font-size: 10px;
|
|
max-width: 100%;
|
|
text-align: center;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
.component-description {
|
|
color: grey;
|
|
font-size: 0.7rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.main {
|
|
margin-left: 3%;
|
|
width: 82%;
|
|
top: 0;
|
|
|
|
.canvas-container::-webkit-scrollbar {
|
|
width: 0;
|
|
background: transparent;
|
|
height: 0;
|
|
}
|
|
|
|
.canvas-container {
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
.canvas-container::-webkit-scrollbar {
|
|
width: 0;
|
|
background: transparent;
|
|
}
|
|
|
|
.canvas-container {
|
|
height: 100%;
|
|
top: 45px;
|
|
position: fixed;
|
|
right: 300px;
|
|
left: 48px;
|
|
overflow-y: auto;
|
|
overflow-x: scroll;
|
|
-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 {
|
|
min-height: 2400px;
|
|
background: #edeff5;
|
|
margin: 0px auto;
|
|
|
|
.resizer {
|
|
border: 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;
|
|
min-height: 2400px;
|
|
background: #edeff5;
|
|
margin: 0px auto;
|
|
background-size: 80px 80px;
|
|
background-repeat: repeat;
|
|
}
|
|
|
|
.navigation-area {
|
|
background-color: #ECEEF0;
|
|
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;
|
|
}
|
|
}
|
|
|
|
.navigation-area.dark {
|
|
background-color: #2b3546 !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.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: transparent;
|
|
color: var(--slate12);
|
|
height: 20px;
|
|
|
|
&:focus {
|
|
background: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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: #91a4f6;
|
|
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: 136px;
|
|
height: 28px;
|
|
background: var(--indigo11) !important;
|
|
border: none;
|
|
color: var(--indigo4);
|
|
|
|
&: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(--base);
|
|
width: 92px;
|
|
height: 28px;
|
|
background: var(--base);
|
|
border: 1px solid var(--slate7);
|
|
color: var(--slate12);
|
|
|
|
&: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: 100%;
|
|
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,
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.fx-container {
|
|
position: relative;
|
|
}
|
|
|
|
.fx-common {
|
|
position: absolute;
|
|
top: -37.5px;
|
|
right: 0px;
|
|
}
|
|
|
|
.fx-button {
|
|
font-weight: 400;
|
|
font-size: 13px;
|
|
color: #61656c;
|
|
}
|
|
|
|
.fx-button:hover,
|
|
.fx-button.active {
|
|
font-weight: 600;
|
|
color: $primary-light;
|
|
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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
.theme-dark {
|
|
.accordion-button::after {
|
|
background-image: url("data:image/svg+xml,%3Csvg id='SvgjsSvg1001' width='288' height='288' xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs'%3E%3Cdefs id='SvgjsDefs1002'%3E%3C/defs%3E%3Cg id='SvgjsG1008' transform='matrix(1,0,0,1,0,0)'%3E%3Csvg xmlns='http://www.w3.org/2000/svg' fill='/fffff' viewBox='0 0 16 16' width='288' height='288'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z' fill='%23ffffff' class='color000 svgShape'%3E%3C/path%3E%3C/svg%3E%3C/g%3E%3C/svg%3E");
|
|
}
|
|
|
|
.inspector {
|
|
border: 1px solid $dark-background;
|
|
}
|
|
|
|
.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: $primary-light;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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;
|
|
z-index: 1;
|
|
}
|
|
|
|
.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: #232e3c;
|
|
background-color: #ffffff;
|
|
background-clip: padding-box;
|
|
border: 1px solid #dadcde;
|
|
-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;
|
|
}
|
|
|
|
/**
|
|
* 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: 11px;
|
|
}
|
|
|
|
.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;
|
|
z-index: 1;
|
|
}
|
|
|
|
.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%;
|
|
// padding: 0.4375rem 0.75rem;
|
|
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 {
|
|
.table-footer {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.jet-data-table-header {
|
|
max-height: 50px;
|
|
}
|
|
|
|
.jet-data-table {
|
|
thead {
|
|
z-index: 2;
|
|
}
|
|
|
|
.table thead th:not(.rdtPrev):not(.rdtSwitch):not(.rdtNext):not(.dow) {
|
|
display: flex !important;
|
|
}
|
|
|
|
.table-row:hover,
|
|
.table-row:focus {
|
|
background: rgba(lightBlue, 0.25);
|
|
}
|
|
|
|
.table-row.selected {
|
|
--tblr-table-accent-bg: rgba(lightBlue, 0.25);
|
|
background: rgba(lightBlue, 0.25);
|
|
font-weight: 500;
|
|
}
|
|
|
|
td {
|
|
min-height: 40px;
|
|
overflow-x: initial;
|
|
|
|
.text-container {
|
|
padding: 0;
|
|
margin: 0;
|
|
border: 0;
|
|
height: 100%;
|
|
outline: none;
|
|
}
|
|
}
|
|
|
|
td.spacious {
|
|
min-height: 47px;
|
|
}
|
|
|
|
td.compact {
|
|
min-height: 40px;
|
|
}
|
|
|
|
.has-dropdown,
|
|
.has-multiselect,
|
|
.has-text,
|
|
.has-datepicker,
|
|
.has-actions {
|
|
padding: 0 5px;
|
|
}
|
|
|
|
.has-text,
|
|
.has-actions {
|
|
margin: 0;
|
|
}
|
|
|
|
.wrap-wrapper {
|
|
white-space: normal !important;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.scroll-wrapper {
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.hide-wrapper {
|
|
overflow-x: hidden !important;
|
|
}
|
|
|
|
td {
|
|
|
|
.text-container:focus-visible,
|
|
.text-container:focus,
|
|
.text-container:focus-within,
|
|
.text-container:hover {
|
|
outline: none;
|
|
height: 100%;
|
|
}
|
|
|
|
display: flex !important;
|
|
|
|
.td-container {
|
|
margin-top: auto;
|
|
margin-bottom: auto;
|
|
}
|
|
}
|
|
|
|
td {
|
|
.text-container:focus {
|
|
position: sticky;
|
|
height: 120px;
|
|
overflow-y: scroll;
|
|
margin-top: -10px;
|
|
padding: 10px;
|
|
margin-left: -9px;
|
|
background: white;
|
|
box-shadow: rgba(15, 15, 15, 0/05) 0px 0px 0px 1px,
|
|
rgba(15, 15, 15, 0.1) 0px 3px 6px, rgba(15, 15, 15, 0.2) 0px 9px 24px;
|
|
white-space: initial;
|
|
}
|
|
|
|
.text-container:focus-visible,
|
|
.text-container:focus,
|
|
.text-container:focus-within,
|
|
.text-container:hover {
|
|
outline: none;
|
|
}
|
|
}
|
|
|
|
td {
|
|
.text-container::-webkit-scrollbar {
|
|
background: transparent;
|
|
height: 0;
|
|
width: 0;
|
|
}
|
|
}
|
|
|
|
td::-webkit-scrollbar {
|
|
background: transparent;
|
|
height: 0;
|
|
width: 0;
|
|
}
|
|
|
|
td:hover::-webkit-scrollbar {
|
|
height: 4px;
|
|
width: 4px;
|
|
}
|
|
|
|
.th {
|
|
white-space: normal;
|
|
}
|
|
|
|
th:after {
|
|
content: " ";
|
|
position: relative;
|
|
height: 0;
|
|
width: 0;
|
|
}
|
|
|
|
.sort-desc:after {
|
|
border-left: 5px solid transparent;
|
|
border-right: 5px solid transparent;
|
|
border-top: 5px solid #767676;
|
|
border-bottom: 5px solid transparent;
|
|
left: 0px;
|
|
top: 7px;
|
|
}
|
|
|
|
.sort-asc:after {
|
|
border-left: 5px solid transparent;
|
|
border-right: 5px solid transparent;
|
|
border-top: 0px solid transparent;
|
|
border-bottom: 5px solid #767676;
|
|
left: 0px;
|
|
top: 7px;
|
|
}
|
|
}
|
|
|
|
.jet-data-table::-webkit-scrollbar {
|
|
background: transparent;
|
|
}
|
|
|
|
.jet-data-table::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.jet-data-table:hover {
|
|
overflow-x: auto;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.jet-data-table {
|
|
overflow: hidden;
|
|
|
|
.form-check {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.form-check-inline {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.table-row {
|
|
cursor: pointer;
|
|
}
|
|
|
|
thead {
|
|
position: sticky;
|
|
top: 0px;
|
|
display: inline-block;
|
|
|
|
tr {
|
|
border-top: none;
|
|
}
|
|
}
|
|
|
|
tbody {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
.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) !important;
|
|
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;
|
|
}
|
|
|
|
.jet-data-table {
|
|
display: inline-block;
|
|
height: 100%;
|
|
|
|
thead {
|
|
width: 100%;
|
|
}
|
|
|
|
.select-search:not(.is-loading):not(.select-search--multiple) .select-search__value::after {
|
|
display: none;
|
|
}
|
|
|
|
.custom-select {
|
|
.select-search:not(.select-search--multiple) .select-search__select {
|
|
top: 0px;
|
|
border: solid #9fa0a1 1px;
|
|
}
|
|
}
|
|
|
|
.tags {
|
|
width: 100%;
|
|
min-height: 20px;
|
|
|
|
.add-tag-button {
|
|
display: none;
|
|
}
|
|
|
|
.tag {
|
|
font-weight: 400;
|
|
font-size: 0.85rem;
|
|
letter-spacing: 0.04em;
|
|
text-transform: none;
|
|
|
|
.remove-tag-button {
|
|
margin-left: 5px;
|
|
margin-right: -7px;
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.form-control-plaintext {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.form-control-plaintext:hover,
|
|
.form-control-plaintext:focus-visible {
|
|
outline: none;
|
|
}
|
|
}
|
|
|
|
.tags:hover {
|
|
.add-tag-button {
|
|
display: inline-flex;
|
|
}
|
|
}
|
|
|
|
.tag:hover {
|
|
.remove-tag-button {
|
|
display: inline-flex;
|
|
}
|
|
}
|
|
|
|
.th,
|
|
.td {
|
|
.resizer {
|
|
display: inline-block;
|
|
height: 100%;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
transform: translateX(50%);
|
|
z-index: 1;
|
|
touch-action: none;
|
|
width: 2px;
|
|
|
|
&.isResizing {
|
|
background: rgb(179, 173, 173);
|
|
width: 5px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.table-filters,
|
|
.table-add-new-row {
|
|
position: absolute;
|
|
top: 2.85rem;
|
|
width: 80%;
|
|
max-width: 700px;
|
|
margin-right: 10%;
|
|
right: 0;
|
|
height: 300px;
|
|
z-index: 100;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.popover-body {
|
|
.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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.transformation-editor {
|
|
.CodeMirror {
|
|
min-height: 70px;
|
|
}
|
|
}
|
|
|
|
.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: $primary;
|
|
border: 1px double $primary;
|
|
}
|
|
|
|
.CalendarDay__selected_span {
|
|
background: $primary;
|
|
border: $primary;
|
|
}
|
|
|
|
.CalendarDay__selected_span:active,
|
|
.CalendarDay__selected_span:hover {
|
|
background: $primary;
|
|
border: 1px double $primary;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.CalendarDay__hovered_span:active,
|
|
.CalendarDay__hovered_span:hover {
|
|
background: $primary;
|
|
border: 1px double $primary;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.CalendarDay__hovered_span {
|
|
background: #83b8e7;
|
|
border: 1px double #83b8e7;
|
|
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;
|
|
}
|
|
}
|
|
|
|
.code-hinter {
|
|
height: 36px;
|
|
|
|
.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;
|
|
}
|
|
|
|
.transformation-editor {
|
|
.CodeMirror {
|
|
min-height: 220px;
|
|
}
|
|
}
|
|
|
|
hr {
|
|
margin: 1rem 0;
|
|
}
|
|
|
|
.query-hinter {
|
|
min-height: 150px;
|
|
}
|
|
|
|
.codehinter-default-input {
|
|
font-family: "Roboto", sans-serif;
|
|
padding: 0.0475rem 0rem !important;
|
|
display: block;
|
|
width: 100%;
|
|
font-size: 0.875rem;
|
|
font-weight: 400;
|
|
color: #232e3c;
|
|
background-color: #ffffff;
|
|
background-clip: padding-box;
|
|
border: 1px solid #dadcde;
|
|
-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;
|
|
}
|
|
|
|
.modal-component {
|
|
margin-top: 150px;
|
|
|
|
.modal-body {
|
|
padding: 0;
|
|
}
|
|
|
|
.modalWidget-config-handle {
|
|
position: relative !important;
|
|
}
|
|
}
|
|
|
|
.draggable-box {
|
|
.config-handle {
|
|
top: -20px;
|
|
position: fixed;
|
|
max-height: 10px;
|
|
z-index: 100;
|
|
min-width: 108px;
|
|
|
|
.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;
|
|
}
|
|
|
|
.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;
|
|
margin-top: 2px !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: #ffffff;
|
|
width: 100%;
|
|
z-index: 1;
|
|
}
|
|
|
|
.components-container {
|
|
.draggable-box {
|
|
cursor: move;
|
|
}
|
|
}
|
|
|
|
.column-sort-row {
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.jet-button {
|
|
&.btn-custom:hover {
|
|
background: var(--tblr-btn-color-darker) !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: absolute;
|
|
}
|
|
|
|
.color-picker-input {
|
|
border: solid 1px rgb(223, 223, 223);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.app-sharing-modal {
|
|
|
|
.form-control.is-invalid,
|
|
.was-validated .form-control:invalid {
|
|
border-color: #ffb0b0;
|
|
}
|
|
}
|
|
|
|
.widgets-list {
|
|
--tblr-gutter-x: 0px !important;
|
|
}
|
|
|
|
.input-with-icon {
|
|
position: relative;
|
|
display: flex;
|
|
flex: 1;
|
|
|
|
.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;
|
|
|
|
.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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
|
|
.left-sidebar .left-sidebar-item {
|
|
border-bottom: 1px solid #333c48;
|
|
}
|
|
|
|
.nav-tabs .nav-link.active {
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
.nav-tabs .nav-link {
|
|
color: #c3c3c3 !important;
|
|
}
|
|
|
|
.card-body> :last-child {
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
.form-control {
|
|
border: 1px solid #324156;
|
|
}
|
|
|
|
.card {
|
|
background-color: #324156;
|
|
}
|
|
|
|
.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 .canvas-container {
|
|
background-color: #2f3c4c;
|
|
}
|
|
|
|
.main .navigation-area {
|
|
background-color: #2f3c4c !important;
|
|
|
|
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: #2f3c4c !important;
|
|
border: 1px solid #2f3c4c !important;
|
|
|
|
center,
|
|
.component-title {
|
|
filter: brightness(0) invert(1);
|
|
}
|
|
}
|
|
|
|
.nav-tabs .nav-link:focus,
|
|
.nav-tabs .nav-link:hover {
|
|
border-color: transparent !important;
|
|
}
|
|
|
|
.modal-content,
|
|
.modal-header {
|
|
background-color: #1f2936;
|
|
|
|
.text-muted {
|
|
color: var(--slate09) !important;
|
|
}
|
|
}
|
|
|
|
.modal-header {
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.09) !important;
|
|
}
|
|
|
|
.canvas-container {
|
|
background-color: #1f2936;
|
|
}
|
|
|
|
.editor .main .query-pane {
|
|
border: solid rgba(255, 255, 255, 0.09) !important;
|
|
border-width: 1px 0px 0px 0px !important;
|
|
}
|
|
|
|
.no-components-box {
|
|
background-color: #1f2936 !important;
|
|
|
|
center {
|
|
color: white !important;
|
|
}
|
|
}
|
|
|
|
.query-list {
|
|
.text-muted {
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
.mute-text {
|
|
color: #8092AB;
|
|
}
|
|
}
|
|
|
|
.editor-sidebar {
|
|
background-color: #1f2936 !important;
|
|
}
|
|
|
|
.editor-sidebar {
|
|
border: solid rgba(255, 255, 255, 0.09);
|
|
border-width: 0px 0px 0px 0px !important;
|
|
|
|
.nav-tabs {
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.09) !important;
|
|
}
|
|
}
|
|
|
|
.editor .editor-sidebar .nav-tabs .nav-link {
|
|
color: #ffffff;
|
|
|
|
img {
|
|
filter: brightness(0) invert(1);
|
|
}
|
|
}
|
|
|
|
.jet-table {
|
|
background-color: #1f2936 !important;
|
|
}
|
|
|
|
.jet-container {
|
|
background-color: #1f2936;
|
|
}
|
|
|
|
.nav-tabs .nav-item.show .nav-link,
|
|
.nav-tabs .nav-link.active {
|
|
background-color: #2f3c4c;
|
|
border-color: transparent !important;
|
|
}
|
|
|
|
.editor .main .query-pane .query-definition-pane .header {
|
|
border: solid #ffffff17;
|
|
border-width: 0px 0px 1px 0px !important;
|
|
background: #1f2936;
|
|
}
|
|
|
|
.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(--base) !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;
|
|
}
|
|
}
|
|
|
|
.data-pane {
|
|
border: solid #ffffff17 !important;
|
|
border-width: 0px 1px 0px 0px !important;
|
|
}
|
|
|
|
.main .query-pane .data-pane .queries-container .queries-header {
|
|
border: solid #ffffff17 !important;
|
|
border-width: 0px 0px 1px 0px !important;
|
|
|
|
.text-muted {
|
|
color: #ffffff !important;
|
|
}
|
|
}
|
|
|
|
.query-pane {
|
|
background-color: #1f2936 !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;
|
|
}
|
|
}
|
|
|
|
.editor .editor-sidebar .inspector .header {
|
|
border: solid rgba(255, 255, 255, 0.09) !important;
|
|
border-width: 0px 0px 1px 0px !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%);
|
|
}
|
|
|
|
.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-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);
|
|
}
|
|
}
|
|
|
|
.react-json-view {
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
.codehinter-default-input {
|
|
background-color: transparent;
|
|
border: 1px solid #333c48;
|
|
}
|
|
|
|
.color-picker-input {
|
|
border: solid 1px #333c48;
|
|
height: 36px;
|
|
}
|
|
|
|
.codehinter-query-editor-input {
|
|
background-color: #272822;
|
|
border: 1px solid #2c3a4c;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.codehinter-query-editor-input .CodeMirror {
|
|
height: 31px !important;
|
|
}
|
|
|
|
.codehinter-query-editor-input .CodeMirror {
|
|
color: #c3c3c3 !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;
|
|
}
|
|
|
|
.widget-documentation-link {
|
|
background-color: #1f2936;
|
|
}
|
|
|
|
.widget-documentation-link a {
|
|
color: rgb(66, 153, 225);
|
|
}
|
|
|
|
.app-version-name.form-select {
|
|
border-color: $border-grey-dark;
|
|
}
|
|
|
|
.organization-list {
|
|
.btn {
|
|
background-color: #273342;
|
|
color: #656d77;
|
|
}
|
|
}
|
|
|
|
.page-item {
|
|
a.page-link {
|
|
color: white;
|
|
}
|
|
}
|
|
}
|
|
|
|
.main-wrapper {
|
|
position: relative;
|
|
min-height: 100%;
|
|
min-width: 100%;
|
|
background-color: white;
|
|
}
|
|
|
|
.main-wrapper.theme-dark {
|
|
background-color: #2b394b;
|
|
}
|
|
|
|
.jet-table {
|
|
.global-search-field {
|
|
background: transparent;
|
|
}
|
|
}
|
|
|
|
.jet-table-image-column {
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.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;
|
|
margin-top: 12px !important;
|
|
font-weight: 500;
|
|
font-size: 12px;
|
|
line-height: 12px;
|
|
}
|
|
|
|
.query-manager-events {
|
|
max-width: 400px;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.theme-dark .event-action {
|
|
filter: brightness(0) invert(1);
|
|
}
|
|
|
|
.event-action {
|
|
filter: brightness(0) invert(0);
|
|
}
|
|
|
|
.disabled {
|
|
pointer-events: none;
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.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: $primary-light;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
.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 {
|
|
.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 .navbar-nav {
|
|
min-height: 2rem;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.preview-icons {
|
|
margin-top: -5px;
|
|
width: 12px;
|
|
}
|
|
|
|
.resize-modal-portal {
|
|
z-index: 3;
|
|
|
|
.resize-modal {
|
|
.modal-content {
|
|
width: 100% !important;
|
|
height: 100%;
|
|
|
|
.modal-body {
|
|
width: 100% !important;
|
|
height: calc(100% - 44px) !important;
|
|
|
|
.editor-container {
|
|
height: 100%;
|
|
|
|
.CodeMirror {
|
|
height: 100% !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.portal-header {
|
|
width: 100% !important;
|
|
}
|
|
|
|
.resize-handle {
|
|
cursor: move;
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal-portal-wrapper {
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: fixed;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 5%;
|
|
|
|
.modal-body {
|
|
width: 500px !important;
|
|
height: 300px !important;
|
|
padding: 0px !important;
|
|
}
|
|
|
|
transform: translate(-60%, 0%);
|
|
height: 350px;
|
|
width: auto;
|
|
max-height: 500px;
|
|
padding: 0px;
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
.portal-header {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0.5rem 0.75rem;
|
|
color: #656d77;
|
|
background-color: #ffffffd9;
|
|
background-clip: padding-box;
|
|
border-top-left-radius: 5px !important;
|
|
border-top-right-radius: 5px !important;
|
|
width: 498px !important;
|
|
outline: 0.75px solid;
|
|
|
|
@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;
|
|
left: 84px;
|
|
top: 6px;
|
|
position: absolute;
|
|
}
|
|
|
|
.app-name:hover {
|
|
background: $bg-light;
|
|
|
|
&.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;
|
|
|
|
}
|
|
|
|
.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;
|
|
justify-content: space-between;
|
|
min-width: 120px;
|
|
margin: auto;
|
|
padding: 10px;
|
|
}
|
|
|
|
.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: 300px;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
.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: auto;
|
|
|
|
.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 {
|
|
border-radius: 5px !important;
|
|
background: var(--base);
|
|
}
|
|
|
|
.modal-main {
|
|
padding-bottom: 32px;
|
|
}
|
|
|
|
.modal-footer-btn {
|
|
justify-content: end;
|
|
|
|
button {
|
|
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;
|
|
}
|
|
}
|
|
|
|
.onboarding-modal.dark .modal-content {
|
|
@extend .modal-content.home-modal-component.dark;
|
|
}
|
|
|
|
.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-header {
|
|
background-color: $bg-dark-light !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: #f5f7f9;
|
|
|
|
a {
|
|
color: $primary;
|
|
}
|
|
}
|
|
|
|
.alert-component.dark {
|
|
border: none !important;
|
|
background-color: #333c48 !important;
|
|
|
|
span {
|
|
filter: brightness(0) invert(1);
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
//*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 {
|
|
border-bottom: none !important;
|
|
}
|
|
|
|
.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: 16px 8px;
|
|
margin: 0;
|
|
padding-bottom: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
.comment-card-wrapper {
|
|
border-top: 0.5px solid #e1e1e1 !important;
|
|
margin-top: -1px !important;
|
|
}
|
|
|
|
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: var(--base) !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;
|
|
}
|
|
}
|
|
|
|
.toast-dark-mode {
|
|
.btn-close {
|
|
filter: brightness(0) invert(1);
|
|
}
|
|
}
|
|
|
|
.editor .editor-sidebar .inspector .form-control-plaintext {
|
|
padding: 2px 4px;
|
|
}
|
|
|
|
.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: $light-gray;
|
|
}
|
|
|
|
#transformation-popover-container {
|
|
margin-left: 80px !important;
|
|
margin-bottom: -2px !important;
|
|
}
|
|
|
|
.canvas-codehinter-container {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.hinter-canvas-input {
|
|
.canvas-hinter-wrap {
|
|
width: 135px;
|
|
height: 42px !important;
|
|
}
|
|
}
|
|
|
|
.hinter-canvas-input {
|
|
width: 180px !important;
|
|
display: flex;
|
|
padding: 4px;
|
|
height: 41.2px !important;
|
|
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;
|
|
}
|
|
}
|
|
|
|
.fx-canvas {
|
|
background: #1c252f;
|
|
padding: 2px;
|
|
display: flex;
|
|
height: 41px;
|
|
border: solid 1px rgba(255, 255, 255, 0.09) !important;
|
|
border-radius: 4px;
|
|
justify-content: center;
|
|
font-weight: 400;
|
|
|
|
div {
|
|
background: #1c252f !important;
|
|
width: 35px !important;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 36px;
|
|
}
|
|
}
|
|
|
|
.fx-canvas-light {
|
|
background: #f4f6fa !important;
|
|
border: 1px solid #dadcde !important;
|
|
|
|
div {
|
|
background: #f4f6fa !important;
|
|
}
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.sso-card-footer {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
padding: 24px 32px;
|
|
gap: 8px;
|
|
width: 660px;
|
|
height: 88px;
|
|
border-top: 1px solid var(--slate5) !important;
|
|
background: var(--base);
|
|
margin-top: 0px !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 {
|
|
.json-tree-svg-icon.component-icon {
|
|
height: 16px;
|
|
width: 16px;
|
|
}
|
|
|
|
.json-tree-icon-container {
|
|
max-width: 20px;
|
|
margin-right: 6px;
|
|
}
|
|
|
|
.node-type {
|
|
color: #a6b6cc;
|
|
padding-top: 2px;
|
|
}
|
|
|
|
.json-tree-valuetype {
|
|
font-size: 10px;
|
|
padding-top: 2px;
|
|
}
|
|
|
|
.node-length-color {
|
|
color: #3650af;
|
|
padding-top: 3px;
|
|
}
|
|
|
|
.json-tree-node-value {
|
|
font-size: 11px;
|
|
}
|
|
|
|
.json-tree-node-string {
|
|
color: #f6820c;
|
|
}
|
|
|
|
.json-tree-node-boolean {
|
|
color: #3eb25f;
|
|
}
|
|
|
|
.json-tree-node-number {
|
|
color: #f4b2b0;
|
|
}
|
|
|
|
.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 {
|
|
margin-right: 4rem !important;
|
|
margin-left: 2rem !important;
|
|
}
|
|
|
|
.action-icons-group {
|
|
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: start !important;
|
|
min-width: fit-content !important;
|
|
}
|
|
|
|
.node-key-outline {
|
|
height: 1rem !important;
|
|
border: 1px solid transparent !important;
|
|
color: #3e525b;
|
|
}
|
|
}
|
|
|
|
.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
|
|
}
|
|
|
|
.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: end;
|
|
}
|
|
|
|
.autosave-indicator {
|
|
color: #868aa5;
|
|
white-space: nowrap;
|
|
font-weight: 400;
|
|
font-size: 12px;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.autosave-indicator-saving {
|
|
left: 44%;
|
|
}
|
|
|
|
.zoom-buttons {
|
|
width: 20px !important;
|
|
height: 25px !important;
|
|
margin-left: 2px;
|
|
|
|
span {
|
|
transform: rotate(60deg);
|
|
}
|
|
}
|
|
|
|
.zoom-button-wrapper {
|
|
position: fixed;
|
|
right: 0px;
|
|
bottom: 5px;
|
|
}
|
|
|
|
.zoom-buttons {
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
}
|
|
|
|
.image-widget-wrapper:hover button {
|
|
opacity: 1 !important;
|
|
visibility: visible;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
//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;
|
|
}
|
|
|
|
.steps {
|
|
overflow: hidden;
|
|
margin: 0rem !important;
|
|
}
|
|
|
|
.step-item.active~.step-item:after,
|
|
.step-item.active~.step-item:before {
|
|
background: #f3f5f5 !important;
|
|
}
|
|
|
|
.step-item.active:before {
|
|
background: #ffffff !important;
|
|
}
|
|
|
|
.steps .step-item.active:before {
|
|
border-color: #b4b2b2 !important;
|
|
}
|
|
|
|
.steps-item {
|
|
color: var(--textColor) !important;
|
|
}
|
|
|
|
.step-item:before {
|
|
background: var(--bgColor) !important;
|
|
// remaining code
|
|
}
|
|
|
|
.step-item:after {
|
|
background: var(--bgColor) !important;
|
|
}
|
|
|
|
.step-item.active~.step-item {
|
|
color: var(--textColor) !important;
|
|
;
|
|
}
|
|
|
|
.notification-center-badge {
|
|
top: 0;
|
|
right: 0;
|
|
position: absolute;
|
|
}
|
|
|
|
.notification-center {
|
|
max-height: 500px;
|
|
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: 220px;
|
|
}
|
|
}
|
|
|
|
// profile-settings css
|
|
.confirm-input {
|
|
padding-right: 8px !important;
|
|
}
|
|
|
|
.user-group-actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
|
|
.icon-widget-popover {
|
|
&.theme-dark {
|
|
.popover-header {
|
|
background-color: #232e3c;
|
|
border-bottom: 1px solid #324156;
|
|
}
|
|
}
|
|
|
|
.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-theme-placeholder::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;
|
|
left: 109px !important;
|
|
top: 8px !important;
|
|
position: absolute !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;
|
|
left: 193px !important;
|
|
top: 10px !important;
|
|
position: absolute !important;
|
|
|
|
|
|
.card-body,
|
|
.card-footer {
|
|
background: var(--base);
|
|
}
|
|
}
|
|
|
|
// Table set to full width
|
|
.jet-data-table thead {
|
|
display: flex !important;
|
|
|
|
tr {
|
|
flex-grow: 1;
|
|
|
|
th:last-child {
|
|
flex: 1 1 auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
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;
|
|
}
|
|
}
|
|
|
|
.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 {
|
|
display: flex;
|
|
align-items: center;
|
|
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;
|
|
}
|
|
}
|
|
|
|
.home-modal-component.modal-version-lists {
|
|
.modal-header {
|
|
.btn-close {
|
|
top: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal-version-lists {
|
|
max-height: 80vh;
|
|
|
|
.modal-body {
|
|
height: 80%;
|
|
overflow: auto;
|
|
}
|
|
|
|
.modal-footer,
|
|
.modal-header {
|
|
height: 10%;
|
|
}
|
|
|
|
.version-wrapper {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
padding: 0.75rem 0.25rem;
|
|
border: 1px solid var(--slate7);
|
|
}
|
|
}
|
|
|
|
.dropdown-table-column-hide-common {
|
|
border-radius: 3px;
|
|
height: auto;
|
|
overflow-y: scroll;
|
|
padding: 8px 16px;
|
|
width: 20rem;
|
|
max-height: 200px;
|
|
}
|
|
|
|
.dropdown-table-column-hide {
|
|
background-color: #ffffff;
|
|
box-shadow: 0 0 0 2px #0000001a;
|
|
}
|
|
|
|
.dropdown-table-column-hide-dark-themed {
|
|
color: #ffffff !important;
|
|
background-color: #1f2936 !important;
|
|
box-shadow: 0 0 0 2px #9292921a;
|
|
}
|
|
|
|
.hide-column-table-text {
|
|
margin: 0 !important;
|
|
}
|
|
|
|
.hide-column-name {
|
|
padding-left: 10px !important;
|
|
}
|
|
|
|
.rest-methods-url {
|
|
.cm-s-default {
|
|
.cm-string-2 {
|
|
color: #000;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tooljet-database {
|
|
|
|
.table-header,
|
|
.table-name,
|
|
.table-cell {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.table-name {
|
|
color: #000;
|
|
width: 250px;
|
|
}
|
|
|
|
.table-left-sidebar {
|
|
max-width: 288px;
|
|
}
|
|
|
|
.add-table-btn {
|
|
height: 32px;
|
|
}
|
|
|
|
.table-header {
|
|
background: #ECEEF0;
|
|
}
|
|
|
|
.table-header,
|
|
.table-cell {
|
|
max-width: 230px;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.table-list-item-popover {
|
|
display: none;
|
|
}
|
|
|
|
.table-list-item:hover .table-list-item-popover {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
// download pop-up in the table widget
|
|
.table-widget-download-popup {
|
|
.cursor-pointer {
|
|
width: 130px;
|
|
|
|
&:hover {
|
|
font-weight: bolder;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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: #e6e6e6;
|
|
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;
|
|
}
|
|
|
|
.editor-center {
|
|
.canvas {
|
|
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 {
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: 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;
|
|
}
|
|
|
|
.user-avatar-nav-item,
|
|
.audit-log-nav-item,
|
|
.notification-center-nav-item {
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.audit-log-nav-item {
|
|
bottom: 40px;
|
|
}
|
|
|
|
.workspace-content-wrapper,
|
|
.database-page-content-wrap {
|
|
background: var(--slate2);
|
|
}
|
|
|
|
.workspace-variable-table-card {
|
|
margin: 0 auto;
|
|
width: 880px;
|
|
}
|
|
|
|
.organization-page-sidebar {
|
|
height: calc(100vh - 64px);
|
|
max-width: 288px;
|
|
background-color: var(--base);
|
|
border-right: 1px solid var(--slate5) !important;
|
|
display: grid !important;
|
|
grid-template-rows: auto 1fr auto !important;
|
|
}
|
|
|
|
.home-page-sidebar {
|
|
max-width: 288px;
|
|
background-color: var(--base);
|
|
border-right: 1px solid var(--slate5);
|
|
display: grid;
|
|
grid-template-rows: auto 1fr auto;
|
|
}
|
|
|
|
.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(--base);
|
|
border-right: 1px solid var(--slate5);
|
|
|
|
|
|
.sidebar-container {
|
|
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;
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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;
|
|
|
|
.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;
|
|
}
|
|
|
|
&: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;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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: 90px;
|
|
}
|
|
|
|
.layout-header {
|
|
position: fixed;
|
|
right: 0;
|
|
left: 56px;
|
|
z-index: 1;
|
|
background: var(--base);
|
|
height: 64px;
|
|
}
|
|
|
|
.layout-sidebar-icon {
|
|
&:hover {
|
|
background: #ECEEF0;
|
|
}
|
|
|
|
&:focus {
|
|
outline: #ECEEF0 auto 5px;
|
|
}
|
|
}
|
|
|
|
.folder-menu-icon {
|
|
display: none;
|
|
}
|
|
|
|
.tj-dashboard-section-header {
|
|
max-width: 288px;
|
|
max-height: 64px;
|
|
padding-top: 20px;
|
|
padding-left: 20px;
|
|
padding-bottom: 24px;
|
|
border-right: 1px solid var(--slate5);
|
|
}
|
|
|
|
.layout-sidebar-icon {
|
|
&:hover {
|
|
background: #ECEEF0;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
&:focus {
|
|
outline: #ECEEF0 auto 5px;
|
|
}
|
|
}
|
|
|
|
.folder-menu-icon {
|
|
display: none;
|
|
}
|
|
|
|
.folder-list-group-item:hover .folder-menu-icon {
|
|
display: block;
|
|
}
|
|
|
|
.folder-list-group-item {
|
|
&:hover {
|
|
background: #ECEEF0;
|
|
}
|
|
|
|
&:active {
|
|
background: var(--indigo4);
|
|
}
|
|
|
|
&:focus {
|
|
box-shadow: 0px 0px 0px 4px #DFE3E6;
|
|
}
|
|
}
|
|
|
|
|
|
.app-versions-selector {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
width: 176px;
|
|
height: 28px;
|
|
position: absolute;
|
|
left: 58%;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
|
|
.custom-version-selector__option:hover .app-version-delete {
|
|
display: block;
|
|
}
|
|
|
|
.editor .editor-sidebar {
|
|
border-top: 1px solid var(--slate7);
|
|
}
|
|
|
|
.editor .navbar-brand {
|
|
border-right: 1px solid var(--slate7);
|
|
padding-bottom: 1rem;
|
|
border-right: 1px solid var(--slate7);
|
|
width: 48px;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.theme-dark {
|
|
.editor .navbar-brand {
|
|
border-right: 1px solid #333c48;
|
|
}
|
|
|
|
.realtime-avatars {
|
|
border-right: 1px solid #333c48;
|
|
}
|
|
}
|
|
|
|
.modal-backdrop {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.ds-delete-btn {
|
|
display: none;
|
|
border: none;
|
|
background: none;
|
|
}
|
|
|
|
.ds-list-item:hover .ds-delete-btn {
|
|
display: block;
|
|
}
|
|
|
|
.toojet-db-table-footer,
|
|
.home-page-footer {
|
|
position: fixed;
|
|
bottom: 0px;
|
|
right: 0;
|
|
left: 344px;
|
|
}
|
|
|
|
.home-page-footer {
|
|
height: 52px;
|
|
background-color: var(--base) !important;
|
|
}
|
|
|
|
.pagination-container {
|
|
display: flex;
|
|
padding: 0px;
|
|
height: 20px;
|
|
|
|
.form-control {
|
|
padding: 0 4px;
|
|
width: fit-content;
|
|
max-width: 30px;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.profile-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;
|
|
padding: 4px 0px;
|
|
width: 84px;
|
|
height: 86px;
|
|
margin-left: 10px;
|
|
background-color: var(--base);
|
|
|
|
.dropdown-item {
|
|
width: 84px;
|
|
height: 36px;
|
|
min-width: 84px !important;
|
|
}
|
|
|
|
svg {
|
|
margin-left: 2px;
|
|
}
|
|
|
|
a {
|
|
span {
|
|
margin-left: 4px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.theme-dark {
|
|
.editor-header-actions {
|
|
.current-layout {
|
|
.bg-white {
|
|
background-color: #232E3C !important;
|
|
}
|
|
|
|
svg {
|
|
path {
|
|
fill: white;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.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-wrapper {
|
|
margin: 0 auto;
|
|
display: flex;
|
|
justify-content: 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 {
|
|
height: calc(100vh - 64px) !important;
|
|
overflow-y: auto;
|
|
background: var(--slate2);
|
|
}
|
|
|
|
.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(--base) !important;
|
|
}
|
|
|
|
.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;
|
|
|
|
}
|
|
|
|
.app-icon-main {
|
|
width: 36px;
|
|
height: 36px;
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
.app-creation-time-container {
|
|
height: 16px;
|
|
}
|
|
|
|
.release-buttons {
|
|
height: 45px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.global-settings-app-wrapper {
|
|
max-width: 300px;
|
|
}
|
|
|
|
.version-manager-container {
|
|
padding: 0.6rem;
|
|
}
|
|
|
|
// 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;
|
|
padding: 0 !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;
|
|
}
|
|
}
|
|
}
|
|
|
|
.theme-dark {
|
|
.react-loading-skeleton {
|
|
background-color: #2F3C4C !important;
|
|
background-image: linear-gradient(90deg, #2F3C4C, #2F3C4C, #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;
|
|
margin: 200px auto;
|
|
}
|
|
|
|
.load div {
|
|
width: 20px;
|
|
height: 20px;
|
|
background-color: #3E63DD;
|
|
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;
|
|
}
|
|
|
|
.modal-content {
|
|
background: linear-gradient(0deg, #FFFFFF, #FFFFFF),
|
|
linear-gradient(0deg, #DFE3E6, #DFE3E6);
|
|
}
|
|
|
|
.modal-header {
|
|
justify-content: center !important;
|
|
flex-direction: column;
|
|
padding: 40px 32px 20px 32px;
|
|
|
|
.header-text {
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
font-size: 20px;
|
|
line-height: 36px;
|
|
margin: 24px 0 5px 0;
|
|
}
|
|
|
|
p {
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
color: #687076;
|
|
text-align: Center;
|
|
margin-bottom: 0px;
|
|
}
|
|
}
|
|
|
|
.modal-body {
|
|
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;
|
|
|
|
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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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);
|
|
|
|
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 {
|
|
padding-top: 22px;
|
|
padding-bottom: 22px;
|
|
padding-left: 40px;
|
|
height: 64px;
|
|
border-bottom: 1px solid var(--slate5);
|
|
}
|
|
|
|
.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>span,
|
|
tr>td>a {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
max-width: 140px;
|
|
}
|
|
}
|
|
|
|
thead {
|
|
tr {
|
|
padding: 0px 6px;
|
|
gap: 90px;
|
|
width: 848px;
|
|
height: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 6px;
|
|
}
|
|
|
|
tr>th {
|
|
background: var(--base) !important;
|
|
border-bottom: none !important;
|
|
padding: 0 !important;
|
|
width: 282px;
|
|
}
|
|
}
|
|
|
|
tr {
|
|
background: var(--base);
|
|
height: 66px;
|
|
padding: 13px 0px;
|
|
border-bottom: 1px solid var(--slate7);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
tr>td {
|
|
border-bottom-width: 0px !important;
|
|
display: flex;
|
|
align-items: center;
|
|
flex: 16%;
|
|
padding-left: 0px !important;
|
|
padding-right: 0px !important;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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: 0 auto !important;
|
|
width: 880px;
|
|
|
|
}
|
|
}
|
|
|
|
.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;
|
|
width: 162.67px;
|
|
cursor: pointer;
|
|
|
|
p {
|
|
font-weight: 500 !important;
|
|
margin-left: 5px;
|
|
}
|
|
|
|
span {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
.workspace-user-status {
|
|
margin-right: 22px;
|
|
margin-left: 5px;
|
|
}
|
|
|
|
.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 {
|
|
width: 135px;
|
|
height: 28px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 4px 16px;
|
|
gap: 6px;
|
|
width: 135px;
|
|
height: 28px;
|
|
}
|
|
|
|
.launch-button {
|
|
display: flex;
|
|
width: 93px;
|
|
height: 28px;
|
|
padding: 4px 16px;
|
|
gap: 6px;
|
|
align-items: center;
|
|
color: var(--slate12);
|
|
justify-content: center;
|
|
}
|
|
|
|
.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 {
|
|
margin-left: 8px;
|
|
color: var(--slate11);
|
|
}
|
|
|
|
.tj-database-column-header {
|
|
color: var(--slate12);
|
|
padding: 4px 4px 4px 8px !important;
|
|
text-transform: capitalize !important;
|
|
line-height: 0px !important;
|
|
font-weight: 500 !important;
|
|
font-size: 12px !important;
|
|
line-height: 20px !important;
|
|
color: var(--slate12) !important;
|
|
|
|
&:first-child {
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
padding-left: 1rem !important;
|
|
}
|
|
|
|
}
|
|
|
|
.tj-database-column-row {
|
|
margin: 0;
|
|
|
|
th:first-child {
|
|
height: 28px;
|
|
}
|
|
|
|
th:first-child>div {
|
|
height: 16px;
|
|
width: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
height: 28px;
|
|
|
|
input {
|
|
border-radius: 4px;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.tj-db-operaions-header {
|
|
height: 48px;
|
|
padding: 0 !important;
|
|
display: flex;
|
|
align-items: center;
|
|
background-color: var(--base);
|
|
|
|
.row {
|
|
margin-left: 0px;
|
|
}
|
|
|
|
.col {
|
|
padding-left: 0px;
|
|
display: flex;
|
|
gap: 8px;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
.add-new-column-btn {
|
|
margin-left: 16px;
|
|
width: 144px !important;
|
|
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: 81px;
|
|
height: 28px;
|
|
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;
|
|
padding: 4px 16px !important;
|
|
width: 171px !important;
|
|
height: 28px !important;
|
|
background: var(--grass2) !important;
|
|
border-radius: 6px !important;
|
|
}
|
|
|
|
.tj-db-filter-btn-active,
|
|
.tj-db-sort-btn-active {
|
|
width: 81px !important;
|
|
height: 28px !important;
|
|
background: var(--indigo4) !important;
|
|
border: 1px solid var(--indigo9) !important;
|
|
border-radius: 6px !important;
|
|
justify-content: center;
|
|
color: var(--indigo9) !important;
|
|
}
|
|
|
|
.tj-db-header-add-new-row-btn {
|
|
width: 125px;
|
|
height: 28px;
|
|
background: var(--indigo3);
|
|
border-radius: 6px !important;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 6px;
|
|
border: none;
|
|
|
|
span {
|
|
color: var(--indigo9);
|
|
}
|
|
}
|
|
|
|
.tj-db-sort-btn {
|
|
width: 75px;
|
|
height: 28px;
|
|
background: transparent;
|
|
color: var(--slate12);
|
|
border: none;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.edit-row-btn {
|
|
background: transparent;
|
|
color: var(--slate12);
|
|
border: none;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.workspace-variable-header {
|
|
width: 880px;
|
|
justify-content: end;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
padding: 0;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.groups-header-wrap {
|
|
display: flex;
|
|
height: 36px;
|
|
border-bottom: 1px solid var(--slate5);
|
|
}
|
|
|
|
.org-users-page-container {
|
|
width: 880px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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: 24px;
|
|
font-size: 12px;
|
|
overflow-y: auto;
|
|
height: calc(100vh - 300px);
|
|
|
|
}
|
|
|
|
.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,
|
|
.manage-sso-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;
|
|
}
|
|
|
|
.manage-sso-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 {
|
|
.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 {
|
|
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: 72px;
|
|
justify-content: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.apps-folder-permission-wrap,
|
|
.apps--variable-permission-wrap {
|
|
height: 44px;
|
|
}
|
|
|
|
.manage-group-permision-header {
|
|
border-bottom: 1px solid var(--slate5);
|
|
display: flex;
|
|
|
|
p {
|
|
padding: 8px 12px;
|
|
gap: 10px;
|
|
width: 206px;
|
|
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: 119px;
|
|
height: 28px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: var(--grass3);
|
|
border-radius: 100px;
|
|
}
|
|
|
|
.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: baseline;
|
|
padding: 12px 6px;
|
|
width: 612px !important;
|
|
height: 64px;
|
|
border-bottom: 1px solid var(--slate5);
|
|
|
|
p {
|
|
width: 272px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
|
|
span {
|
|
max-width: 150px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
|
|
&:hover .apps-remove-btn {
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
.manage-group-app-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 {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 51px;
|
|
margin-right: 32px;
|
|
}
|
|
|
|
.apps-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 {
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
.apps-remove-btn {
|
|
width: 97px;
|
|
height: 28px;
|
|
font-weight: 600 !important;
|
|
}
|
|
|
|
.faded-text {
|
|
color: var(--slate8);
|
|
}
|
|
|
|
.manage-groups-app-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;
|
|
align-items: center;
|
|
|
|
|
|
p {
|
|
width: 272px !important;
|
|
color: var(--slate11);
|
|
font-weight: 500;
|
|
}
|
|
|
|
}
|
|
|
|
.manage-groups-permission-apps {
|
|
border-bottom: 1px solid var(--slate5);
|
|
}
|
|
|
|
.manage-groups-permission-apps,
|
|
.apps-folder-permission-wrap,
|
|
.apps-variable-permission-wrap {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 12px;
|
|
gap: 10px;
|
|
|
|
div {
|
|
width: 206px;
|
|
}
|
|
}
|
|
|
|
.manage-groups-permission-apps,
|
|
.apps-variable-permission-wrap {
|
|
gap: 10px;
|
|
height: 72px;
|
|
}
|
|
|
|
.apps-folder-permission-wrap {
|
|
height: 44px;
|
|
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 {
|
|
margin-right: 12px;
|
|
|
|
.rmsc .dropdown-container:focus-within {
|
|
border: 1px solid var(--indigo9) !important;
|
|
box-shadow: 0px 0px 0px 2px #C6D4F9 !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 {
|
|
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 {
|
|
width: 157px;
|
|
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: 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;
|
|
height: 244px;
|
|
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;
|
|
}
|
|
|
|
.user-csv-template-wrap {
|
|
margin-top: 24px;
|
|
}
|
|
|
|
|
|
.manage-users-drawer-content-bulk {
|
|
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 32px;
|
|
|
|
div:first-child {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: top;
|
|
}
|
|
|
|
.invite-user-by-email {
|
|
display: flex;
|
|
}
|
|
|
|
.invite-email-body {
|
|
width: 452px;
|
|
|
|
input {
|
|
padding: 6px 10px;
|
|
width: 470px;
|
|
height: 32px;
|
|
color: var(--slate12);
|
|
}
|
|
}
|
|
}
|
|
|
|
.tj-db-table {
|
|
overflow-y: auto;
|
|
height: 110px;
|
|
|
|
table {
|
|
border-collapse: collapse;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
.create-group-modal-footer {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
justify-content: end;
|
|
}
|
|
|
|
.add-users-button {
|
|
width: 160px;
|
|
height: 32px;
|
|
}
|
|
|
|
.sso-page-inputs {
|
|
padding: 6px 10px;
|
|
gap: 17px;
|
|
width: 612px;
|
|
height: 32px;
|
|
}
|
|
|
|
.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 {
|
|
|
|
.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;
|
|
}
|
|
|
|
.org-name {
|
|
color: var(--slate12) !important;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
|
|
.org-custom-select-header-wrap {
|
|
border-bottom: 1px solid var(--slate5);
|
|
}
|
|
|
|
.btn-close:focus {
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.template-card {
|
|
padding: 16px;
|
|
gap: 16px;
|
|
width: 272px;
|
|
height: 184px;
|
|
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: 240px;
|
|
height: 112px;
|
|
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;
|
|
}
|
|
|
|
&: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;
|
|
}
|
|
}
|
|
|
|
.drawer-footer-btn-wrap,
|
|
.variable-form-footer {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
padding: 24px 32px;
|
|
gap: 8px;
|
|
height: 88px;
|
|
border-top: 1px solid var(--slate5);
|
|
background: var(--base);
|
|
}
|
|
|
|
.drawer-card-title {
|
|
padding: 16px;
|
|
border-bottom: 1px solid var(--slate5);
|
|
|
|
h3 {
|
|
margin-bottom: 0px !important;
|
|
}
|
|
}
|
|
|
|
.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 - 270px); //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-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 {
|
|
display: flex;
|
|
flex-direction: column;
|
|
font-family: 'IBM Plex Sans';
|
|
font-style: normal;
|
|
|
|
.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;
|
|
|
|
&: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;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.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 {
|
|
.editor {
|
|
.left-sidebar {
|
|
background-color: #232e3c !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tj-db-table {
|
|
table {
|
|
max-width: calc(100% - 28px);
|
|
}
|
|
|
|
.datatable {
|
|
position: relative;
|
|
}
|
|
}
|
|
|
|
.add-row-btn-database {
|
|
position: absolute;
|
|
top: 0;
|
|
right: -28px;
|
|
width: 28px;
|
|
height: 28px;
|
|
background: var(--slate7);
|
|
border-width: 0px 1px 1px 1px;
|
|
border-style: solid;
|
|
border-color: var(--slate4);
|
|
border-radius: 0px !important;
|
|
}
|
|
|
|
.add-col-btn-database {
|
|
position: absolute;
|
|
top: 28;
|
|
left: 0px;
|
|
width: 28px;
|
|
height: 28px;
|
|
background: var(--slate7);
|
|
border-width: 0px 1px 1px 1px;
|
|
border-style: solid;
|
|
border-color: var(--slate4);
|
|
border-radius: 0px !important;
|
|
}
|
|
|
|
// 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: 4px 20px 20px 20px;
|
|
height: calc(100vh - 116px) !important;
|
|
}
|
|
|
|
.upload-user-form span.file-upload-error {
|
|
color: var(--tomato10) !important;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
.profile-page-content-wrap {
|
|
background-color: var(--slate2);
|
|
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);
|
|
}
|
|
|
|
.variables-table-wrapper {
|
|
tr {
|
|
border-width: 0px !important;
|
|
}
|
|
}
|
|
|
|
.home-page-content-container {
|
|
max-width: 880px;
|
|
}
|
|
|
|
@media only screen and (max-width: 1583px) and (min-width: 1312px) {
|
|
|
|
.homepage-app-card-list-item {
|
|
max-width: 264px;
|
|
}
|
|
|
|
}
|
|
|
|
@media only screen and (min-width: 1728px) {
|
|
|
|
.homepage-app-card-list-item {
|
|
max-width: 304px;
|
|
}
|
|
|
|
.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%;
|
|
}
|
|
}
|
|
|
|
@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%;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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: var(--slate2);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.template-source-name {
|
|
color: var(--slate12) !important;
|
|
}
|
|
|
|
.marketplace-install {
|
|
color: var(--indigo9);
|
|
}
|
|
|
|
.popover {
|
|
.popover-arrow {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.shareable-link {
|
|
.input-group {
|
|
.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);
|
|
}
|
|
|
|
.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(--base) !important;
|
|
}
|
|
}
|
|
} |