nocodb/packages/nc-gui/assets/style.css

@import "../node_modules/xterm/css/xterm.css";


.shake-btn {
  color: red !important;
  animation: shake .4s;
  /* When the animation is finished, start again */
  animation-iteration-count: infinite;
}


@keyframes shake {
  0% {
    transform: rotate(2deg);
  }
  25% {
    transform: rotate(1.5deg);
  }
  50% {
    transform: rotate(0deg);
  }
  75% {
    transform: rotate(-1.5deg);
  }
  100% {
    transform: rotate(-2deg);
  }
}


.v-treeview--dense .v-treeview-node__root {
  min-height: 22px !important;
}


.v-treeview--dense .v-treeview-node {
  /*margin-left: 12px !important;*/
}


/**::-webkit-scrollbar {*/
/*  width: .5em !important;*/
/*  border-radius: .2rem !important;*/
/*}*/

/**::-webkit-scrollbar-track {*/
/*  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3) !important;*/
/*}*/

/**::-webkit-scrollbar-thumb {*/
/*  background-color: darkgrey !important;*/
/*  outline: 1px solid slategrey !important;*/
/*}*/
/* Let's get this party started */
/*::-webkit-scrollbar {*/
/*  width: 8px;*/
/*}*/

/*!* Track *!*/
/*::-webkit-scrollbar-track {*/
/*  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);*/
/*  -webkit-border-radius: 8px;*/
/*  border-radius: 8px;*/
/*}*/

/*!* Handle *!*/
/*::-webkit-scrollbar-thumb {*/
/*  !*border: 5px solid #00000000;*!*/
/*  -webkit-border-radius: 8px;*/
/*  border-radius: 8px;*/
/*  background: rgba(30, 30, 30, 0.4);*/
/*  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);*/
/*}*/

/*::-webkit-scrollbar-thumb:window-inactive {*/
/*  background: rgba(30, 30, 30, 0.4);*/
/*}*/

::-webkit-scrollbar {
  width: .7em;
  height: .7em
}

::-webkit-scrollbar-button {
  background: #77777722
}

::-webkit-scrollbar-track-piece {
  background: #66666622
}

::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: .7em;
  border: .15em solid #00000000;
  background-clip: padding-box;
}

tbody tr:nth-of-type(odd) {
  /*background-color: rgba(0, 0, 0, .1);*/
}


/*.multipane.foo.layout-v .multipane-resizer {*/
/*  margin: 0; left: 0; !* reset default styling *!*/
/*  width: 15px;*/
/*  background: blue;*/
/*}*/

/*.multipane.foo.layout-h .multipane-resizer {*/
/*  margin: 0; top: 0; !* reset default styling *!*/
/*  height: 15px;*/
/*  background: blue;*/
/*}*/


/*.splitpanes--vertical > .splitpanes__splitter {*/
/*  width: 10px;*/
/*  background: black;*/
/*}*/

/*.splitpanes--horizontal > .splitpanes__splitter {*/
/*  height: 10px;*/
/*  background: black;*/
/*  position: relative;*/
/*}*/


/* sql output table footer */

.small-footer .v-data-footer__select .v-select {
  margin: 0px 11px 5px 12px !important;
}


/*.splitpanes {*/
/*  display: -webkit-box;*/
/*  display: -ms-flexbox;*/
/*  display: flex;*/
/*  width: 100%;*/
/*  height: 100%*/
/*}*/

/*.splitpanes--vertical {*/
/*  -webkit-box-orient: horizontal;*/
/*  -webkit-box-direction: normal;*/
/*  -ms-flex-direction: row;*/
/*  flex-direction: row*/
/*}*/

/*.splitpanes--horizontal {*/
/*  -webkit-box-orient: vertical;*/
/*  -webkit-box-direction: normal;*/
/*  -ms-flex-direction: column;*/
/*  flex-direction: column*/
/*}*/

/*.splitpanes--dragging * {*/
/*  -webkit-user-select: none;*/
/*  -moz-user-select: none;*/
/*  -ms-user-select: none;*/
/*  user-select: none*/
/*}*/

/*.splitpanes__pane {*/
/*  width: 100%;*/
/*  height: 100%;*/
/*  overflow: hidden;*/
/*  -webkit-transition: width .2s ease-out, height .2s ease-out;*/
/*  transition: width .2s ease-out, height .2s ease-out*/
/*}*/

/*.splitpanes--dragging .splitpanes__pane {*/
/*  -webkit-transition: none;*/
/*  transition: none*/
/*}*/

/*.splitpanes__splitter {*/
/*  -ms-touch-action: none;*/
/*  touch-action: none*/
/*}*/

/*.splitpanes--vertical > .splitpanes__splitter {*/
/*  min-width: 1px;*/
/*  cursor: col-resize*/
/*}*/

/*.splitpanes--horizontal > .splitpanes__splitter {*/
/*  min-height: 1px;*/
/*  cursor: row-resize*/
/*}*/

.splitpanes.xc-theme .splitpanes__pane {
  /*background-color: #f2f2f2*/
}

.splitpanes.xc-theme .splitpanes__splitter {
  background-color: dimgrey;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: relative
}

/*.splitpanes.xc-theme .splitpanes__splitter:after, .splitpanes.xc-theme .splitpanes__splitter:before {*/
/*  content: "";*/
/*  position: absolute;*/
/*  top: 50%;*/
/*  left: 50%;*/
/*  background-color: rgba(255,255,255, 1);*/
/*  -webkit-transition: background-color .3s;*/
/*  transition: background-color .3s*/
/*}*/

/*.splitpanes.xc-theme .splitpanes__splitter:hover:after, .splitpanes.xc-theme .splitpanes__splitter:hover:before {*/
/*  background-color: rgba(0, 0, 256, .5)*/
/*}*/

.xc-theme.splitpanes .splitpanes .splitpanes__splitter {
  z-index: 1
}

.xc-theme.splitpanes--vertical > .splitpanes__splitter, .xc-theme .splitpanes--vertical > .splitpanes__splitter {
  width: 2px;
  border-left: 1px solid dimgrey;
  margin-left: -1px
}

/*.xc-theme.splitpanes--vertical > .splitpanes__splitter:after, .xc-theme .splitpanes--vertical > .splitpanes__splitter:after, .xc-theme.splitpanes--vertical > .splitpanes__splitter:before, .xc-theme .splitpanes--vertical > .splitpanes__splitter:before {*/
/*  -webkit-transform: translateY(-50%);*/
/*  transform: translateY(-50%);*/
/*  width: 1px;*/
/*  height: 50px*/
/*}*/

/*.xc-theme.splitpanes--vertical > .splitpanes__splitter:before, .xc-theme .splitpanes--vertical > .splitpanes__splitter:before {*/
/*  margin-left: -1px*/
/*}*/

/*.xc-theme.splitpanes--vertical > .splitpanes__splitter:after, .xc-theme .splitpanes--vertical > .splitpanes__splitter:after {*/
/*  margin-left: -1px*/
/*}*/

.xc-theme.splitpanes--horizontal > .splitpanes__splitter, .xc-theme .splitpanes--horizontal > .splitpanes__splitter {
  height: 2px;
  border-top: 1px solid dimgrey;
  margin-top: -1px
}

/*.xc-theme.splitpanes--horizontal > .splitpanes__splitter:after, .xc-theme .splitpanes--horizontal > .splitpanes__splitter:after, .xc-theme.splitpanes--horizontal > .splitpanes__splitter:before, .xc-theme .splitpanes--horizontal > .splitpanes__splitter:before {*/
/*  -webkit-transform: translateX(-50%);*/
/*  transform: translateX(-50%);*/
/*  width: 50px;*/
/*  height: 1px*/
/*}*/

/*.xc-theme.splitpanes--horizontal > .splitpanes__splitter:before, .xc-theme .splitpanes--horizontal > .splitpanes__splitter:before {*/
/*  margin-top: -2px*/
/*}*/

/*.xc-theme.splitpanes--horizontal > .splitpanes__splitter:after, .xc-theme .splitpanes--horizontal > .splitpanes__splitter:after {*/
/*  margin-top: -2px*/
/*}*/


/*sql editor multipane*/

.project-tabs > .v-tabs-items > .v-window__container, .project-tabs, .project-container, .sql-editor-tab .v-window__container {
  height: 100%;
  overflow: auto;
}

.project-tabs > .v-tabs-items {
  height: calc(100% - 35px);
  overflow: auto;
}

.table-tabs:not(.hidden-tab) > .v-tabs-items {
  height: calc(100% - 30px);
  overflow: auto;
}
.table-tabs.hidden-tab > .v-tabs-items {
  height: 100%;
  overflow: auto;
}

.table-tabs > .v-tabs-items > .v-window__container {
  height: 100%;
  overflow: auto;
}


.action-menu-item {
  height: 1rem !important;
}

.action-label.separator {
  padding-top: 2px !important;
  margin-bottom: 2px !important;
}


/*.monaco-single-line .view-line{*/
/*padding: 16px 0;*/
/*}*/


/*.monaco-single-line .cursor{*/
/*top: 16px !important;*/
/*}*/

/*.monaco-single-line .selected-text{*/
/*top: 16px !important;*/
/*}*/

/*.monaco-single-line .view-overlays > div{*/
/*top: 16px !important;*/
/*}*/

.monaco-single-line .cursor, .monaco-single-line .view-overlays > div {
  height: 14px !important;
  top: 17px !important;
}

.monaco-single-line .selected-text,
.monaco-single-line .selectionHighlight {
  height: 14px !important;
}

.monaco-single-line * {
  border: none !important;
}

.monaco-single-line .margin,
.monaco-single-line .margin * {
  width: 0 !important;
}

.monaco-single-line .decorationsOverviewRuler {
  display: none;
}

.monaco-single-line .scrollbar.horizontal {
  display: none;
}

/*.monaco-single-line .monaco-scrollable-element*/
/*{*/
/*  left:0 !important;*/
/*  padding-left: 27px;*/
/*}*/


.params-table .v-data-table__wrapper {
  overflow: visible
}


.toolbar-border-bottom {
  border-bottom: 1px solid #7F828B33 !important;
}


.v-step {
  z-index: 1000
}


:focus {
  outline: none;
}


td .v-input--selection-controls {
  margin-top: 0;
}


.d-100 {
  width: 100%;
}

.h-100 {
  height: 100%;
}

.scroll-auto{
  overflow: auto;
}


.xc-tabs .v-tabs-bar {
  border-bottom: solid 1px var(--v-primary-lighten2);
}

.xc-tabs .v-tab {
  border-right: 1px solid var(--v-primary-lighten2);
}


.xc-border-right {
  border-right: 1px solid #7f828b33;
}

.xc-border-bottom {
  border-bottom: 1px solid #7f828b33;
}

.xc-border {
  border: 1px solid #7f828b33;
}

/*.v-tooltip__content{*/
/*  z-index: 99 !important;*/
/*}*/

.theme--dark.v-tabs > .v-tabs-bar .v-tab:not(.v-tab--active) > div > .v-icon {
  color: rgba(255, 255, 255, 0.6);
}

/* text input bottom line */
.theme--light.v-text-field > .v-input__control > .v-input__slot:before {
  border-color: rgba(0, 0, 0, 0.2) !important;
}


table .v-input__control {
  height: auto !important;
}


.v-input__control label {
  font-size: inherit;
}


input, textarea, select {
  color: var(--v-textColor-base);
}

.advanced-border {
  border: 1px dotted pink !important;
  border-radius: 4px;
}

/* Toast css */
.toasted .primary, .toasted.toasted-primary{
  font-family: "Roboto", sans-serif !important;
  font-weight: 400 !important;
}

body.light .toasted .primary.error, body.light .toasted.toasted-primary.error {
  background: #ffa2a2 !important;
  color: black;
  border-radius: 19px;
}

body.light .toasted .primary.success, body.light .toasted.toasted-primary.success {
  background: #d1f7c4 !important;
  color: black;
  border-radius: 19px;
}

body.light .toasted .primary.info, body.light .toasted.toasted-primary.info {
  background: #98befa !important;
  color: black;
  border-radius: 19px;
}

body.dark .toasted .primary.error, body.dark .toasted.toasted-primary.error {
  background: #b30000 !important;
  border-radius: 19px;
}

body.dark .toasted .primary.success, body.dark .toasted.toasted-primary.success {
  background: #258300 !important;
  border-radius: 19px;
}

body.dark .toasted .primary.info, body.dark .toasted.toasted-primary.info {
  background: #0040bc !important;
  border-radius: 19px;
}


.v-date-picker-table{
  height:auto !important;
}