dbgate/packages/web/public/global.css

body {
  font-family: -apple-system, BlinkMacSystemFont, Segoe WPC, Segoe UI, HelveticaNeue-Light, Ubuntu, Droid Sans,
    sans-serif;
  font-size: 14px;
  /* font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
	  'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
	  sans-serif; 
	  */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.horizontal-split-handle {
  background-color: var(--theme-border);
  width: var(--dim-splitter-thickness);
  cursor: col-resize;
}
.horizontal-split-handle:hover {
  background-color: var(--theme-bg-2);
}

.vertical-split-handle {
  background-color: var(--theme-border);
  height: var(--dim-splitter-thickness);
  cursor: row-resize;
}
.vertical-split-handle:hover {
  background-color: var(--theme-bg-2);
}

.icon-invisible {
  visibility: hidden;
}
.space-between {
  display: flex;
  justify-content: space-between;
}
.flex {
  display: flex;
}
.flexcol {
  display: flex;
  flex-direction: column;
}
.nowrap {
  white-space: nowrap;
}
.noselect {
  user-select: none;
}
.bold {
  font-weight: bold;
}
.flex1 {
  flex: 1;
}
.relative {
  position: relative;
}

.col-10 {
  flex-basis: 83.3333%;
  max-width: 83.3333%;
}
.col-9 {
  flex-basis: 75%;
  max-width: 75%;
}
.col-8 {
  flex-basis: 66.6667%;
  max-width: 66.6667%;
}
.col-7 {
  flex-basis: 58.3333%;
  max-width: 58.3333%;
}
.col-6 {
  flex-basis: 50%;
  max-width: 50%;
}
.col-5 {
  flex-basis: 41.6667%;
  max-width: 41.6667%;
}
.col-4 {
  flex-basis: 33.3333%;
  max-width: 33.3333%;
}
.col-3 {
  flex-basis: 25%;
  max-width: 25%;
}
.col-2 {
  flex-basis: 16.6666%;
  max-width: 16.6666%;
}

.largeFormMarker input[type='text'] {
  width: 100%;
  padding: 10px 10px;
  font-size: 14px;
  box-sizing: border-box;
  border-radius: 4px;
  border: 1px solid var(--theme-border);
}

.largeFormMarker input[type='password'] {
  width: 100%;
  padding: 10px 10px;
  font-size: 14px;
  box-sizing: border-box;
  border-radius: 4px;
}

.largeFormMarker select {
  width: 100%;
  padding: 10px 10px;
  font-size: 14px;
  box-sizing: border-box;
  border-radius: 4px;
}

body *::-webkit-scrollbar {
  height: 0.8em;
  width: 0.8em;
}
body *::-webkit-scrollbar-track {
  border-radius: 1px;
  background-color: var(--theme-bg-1);
}
body *::-webkit-scrollbar-corner {
  border-radius: 1px;
  background-color: var(--theme-bg-2);
}

body *::-webkit-scrollbar-thumb {
  border-radius: 1px;
  background-color: var(--theme-bg-3);
}

body *::-webkit-scrollbar-thumb:hover {
  background-color: var(--theme-bg-4);
}

input {
  background-color: var(--theme-bg-0);
  color: var(--theme-font-1);
  border: 1px solid var(--theme-border);
}

input[disabled] {
  background-color: var(--theme-bg-1);
}

select {
  background-color: var(--theme-bg-0);
  color: var(--theme-font-1);
  border: 1px solid var(--theme-border);
}

select[disabled] {
  background-color: var(--theme-bg-1);
}

textarea {
  background-color: var(--theme-bg-0);
  color: var(--theme-font-1);
  border: 1px solid var(--theme-border);
}

.ace_gutter-cell.ace-gutter-sql-run {
  background-repeat: no-repeat;
  background-position: 2px center;

  /* content: '▶';
  margin-right: 3px; */

  /* border-radius: 20px 0px 0px 20px; */
  /* Change the color of the breakpoint if you want 
  box-shadow: 0px 0px 1px 1px #248c46 inset;  */
}

.theme-type-light .ace_gutter-cell.ace-gutter-sql-run {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMS4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgMTcuODA0IDE3LjgwNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTcuODA0IDE3LjgwNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxnIGlkPSJjOThfcGxheSI+CgkJPHBhdGggZmlsbD0nIzQ0NCcgZD0iTTIuMDY3LDAuMDQzQzIuMjEtMC4wMjgsMi4zNzItMC4wMDgsMi40OTMsMC4wODVsMTMuMzEyLDguNTAzYzAuMDk0LDAuMDc4LDAuMTU0LDAuMTkxLDAuMTU0LDAuMzEzCgkJCWMwLDAuMTItMC4wNjEsMC4yMzctMC4xNTQsMC4zMTRMMi40OTIsMTcuNzE3Yy0wLjA3LDAuMDU3LTAuMTYyLDAuMDg3LTAuMjUsMC4wODdsLTAuMTc2LTAuMDQKCQkJYy0wLjEzNi0wLjA2NS0wLjIyMi0wLjIwNy0wLjIyMi0wLjM2MVYwLjQwMkMxLjg0NCwwLjI1LDEuOTMsMC4xMDcsMi4wNjcsMC4wNDN6Ii8+Cgk8L2c+Cgk8ZyBpZD0iQ2FwYV8xXzc4XyI+Cgk8L2c+CjwvZz4KPC9zdmc+Cg==);
}

.theme-type-dark .ace_gutter-cell.ace-gutter-sql-run {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMS4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgMTcuODA0IDE3LjgwNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTcuODA0IDE3LjgwNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxnIGlkPSJjOThfcGxheSI+CgkJPHBhdGggZmlsbD0nI2RkZCcgZD0iTTIuMDY3LDAuMDQzQzIuMjEtMC4wMjgsMi4zNzItMC4wMDgsMi40OTMsMC4wODVsMTMuMzEyLDguNTAzYzAuMDk0LDAuMDc4LDAuMTU0LDAuMTkxLDAuMTU0LDAuMzEzCgkJCWMwLDAuMTItMC4wNjEsMC4yMzctMC4xNTQsMC4zMTRMMi40OTIsMTcuNzE3Yy0wLjA3LDAuMDU3LTAuMTYyLDAuMDg3LTAuMjUsMC4wODdsLTAuMTc2LTAuMDQKCQkJYy0wLjEzNi0wLjA2NS0wLjIyMi0wLjIwNy0wLjIyMi0wLjM2MVYwLjQwMkMxLjg0NCwwLjI1LDEuOTMsMC4xMDcsMi4wNjcsMC4wNDN6Ii8+Cgk8L2c+Cgk8ZyBpZD0iQ2FwYV8xXzc4XyI+Cgk8L2c+CjwvZz4KPC9zdmc+Cg==);
}

.ace_gutter-cell.ace-gutter-sql-run:hover {
   background-color: var(--theme-bg-2);
}

.ace_gutter-cell.ace-gutter-current-part {
   /* background-color: var(--theme-bg-2); */
   font-weight: bold;
   color: var(--theme-font-hover);
}