custom_styles.css

/* -------- FONTS --------- */

:root {
  --fonts: "SF Compact Text Regular", "SF Pro Text", "Fira Sans", "Lucida Grande", "Segoe UI", serif;
  --ui-background: #2c2c2c;
  --ui-font-foreground-color: #FFFFFF;
  --ui-divider-background: #282828;
  --active-tabs: #3b3b3b;
  --inactive-tabs: #303030;
  --tab-gradient-dark: linear-gradient(to right, #28282800, #282828 13%);
  --tab-gradient-light: linear-gradient(to right, #3b3b3b, #3b3b3b00);
  --borders: #0a0a0a;
  --scrollbar-background-color: #282828;
  --scrollbar-border: solid 2px #6a6a6a;
}

/* scrollbars */
::-webkit-scrollbar {
  height: calc(17px * 10 / 14) !important;
}

::-webkit-scrollbar-thumb {
  border: none !important;
  border-radius: 0 !important;
  background-color: var(--scrollbar-background-color) !important;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-background-color) !important;
}

::-webkit-scrollbar-thumb:active {
  background-color: var(--scrollbar-background-color) !important;
}

::-webkit-scrollbar,
::-webkit-scrollbar-corner,
::-webkit-scrollbar-track {
  background-color: transparent !important;
}

::-webkit-scrollbar-track:vertical {
  box-shadow: inset 1px 0 0 0 var(--separator);
}

/* editor */
#rstudio_shell_widget.ace_editor.ace_scroller,
#rstudio_source_text_editor.ace_editor :-webkit-any(.ace_gutter, .ace_scroller, .ace_scrollbar-v) {
  box-shadow: inset 0 6px 6px -6px black;
}

/* mac font height (is set to 1.45 by default) */
/* RStudio 1.2.5555 */
.macintosh .GD15MCFCAW,
.macintosh .GJQ3LUQCBW,
.macintosh .GD15MCFCAW td,
.macintosh .GJQ3LUQCBW td,
.macintosh .GJQ3LUQCBW pre,
.macintosh .GD15MCFCAW pre {
  line-height: 1.3;
}

/* Most Tabs, e.g. Environment, Files, Source File Name, etc. */
.rstudio-themes-flat .rstudio-themes-dark .GD15MCFCIU,
.rstudio-themes-flat .rstudio-themes-dark .GD15MCFCPT,
.GD15MCFCBS .gwt-TabLayoutPanelTab,
.GGBOEFPDCS .gwt-TabLayoutPanelTab,
.GGBOEFPDOU {
  color: var(--ui-font-foreground-color);
  text-shadow: none;
  font-weight: 400;
  font-family: var(--fonts) !important;
  font-size: 12px !important;
}

input[type="text"] {
    font-family: var(--fonts) !important;
}

/* Source editor tab overflow gradient */
.rstudio-themes-flat .rstudio-themes-dark-grey .GGBOEFPDDS {
    background: var(--tab-gradient-dark);
}

/* "Packages ... are required but not installed... */
.rstudio-themes-flat .rstudio-themes-dark-grey .GD15MCFCB2C {
  background-color: var(--active-tabs) !important;
  border-bottom: var(--borders) !important;
}

/* Search */
.rstudio-themes-dark .search input {
  font-family: var(--fonts) !important;
}

.rstudio-themes-dark .gwt-TabLayoutPanelContent > div:nth-last-child(2):nth-child(4) .rstudio-themes-background {
    background-color: var(--inactive-tabs) !important;
  }

.rstudio-themes-dark :-webkit-any(.rstheme_toolbarWrapper, #rstudio_find_replace_bar) .search,
.rstudio-themes-flat .themedPopupPanel .search {
  border-color: var(--borders) !important;
  background: #141414 !important;
}

/* general app items--this isn't constant */
.rstudio-themes-flat,
.rstudio-themes-dark .GD15MCFCJU,
.rstudio-themes-flat .rstudio-themes-dark .GD15MCFCJU button {
  font-family: var(--fonts) !important;
  /* font-size: 1.1em; */
}

/* Toolbar Fonts */
.GD15MCFCMU {
  font-family: var(--fonts) !important;
}

/* editor location */
.rstudio-themes-flat.editor_dark h1,
.rstudio-themes-flat.editor_dark h2,
.rstudio-themes-flat.editor_dark h3,
.rstudio-themes-flat.editor_dark h4 {
  color: #ffffff !important;
  background: none !important;
  border-color: #6a6a6a !important;
  font-family: var(--fonts) !important;
}

/* ------ MAIN ------- */

/* wrapper around four panes */
body.rstudio-themes-flat .rstudio-themes-dark-grey {
  background: var(--ui-background) !important;
}

.rstudio-themes-flat>.rstudio-themes-dark,
.rstudio-themes-flat>.rstudio-themes-dark :-webkit-any(.gwt-TabLayoutPanel, .gwt-TabLayoutPanelContent) {
  background: var(--ui-background) !important;
}

/* main toolbar */
.rstudio-themes-dark>div:last-child>div>div>.rstheme_toolbarWrapper,
.rstudio-themes-dark [role="application"]>div>.rstheme_toolbarWrapper {
  background-color: var(--ui-background) !important;
  border-color: var(--ui-background) !important;
  border-radius: 1px solid;
}

/* Menu Separators */
.rstudio-themes-flat.rstudio-themes-dark-menus .gwt-MenuItemSeparator .menuSeparatorInner {
    border-color: var(--borders) !important;
}
  
.rstudio-themes-flat .GJQ3LUQCLV.GJQ3LUQCPO div.GJQ3LUQCMO .GJQ3LUQCIS {
    margin-right: 0;
    margin-bottom: 2px;
    border-bottom: solid 1px var(--borders);
    background-color: var(--ui-background) !important;
}
  

/* tabs */
.rstudio-themes-dark .gwt-TabLayoutPanelTab:not(.gwt-TabLayoutPanelTab-selected) .rstheme_tabLayoutCenter,
.rstudio-themes-dark .rstheme_minimizedWindowObject .rstheme_center {
  background-color: var(--inactive-tabs) !important;
  color: var(--editor-foreground) !important;
  border-color: var(--borders) !important;
  cursor: pointer;
}

/* active tab */
.rstudio-themes-dark .gwt-TabLayoutPanelTab.gwt-TabLayoutPanelTab-selected .rstheme_tabLayoutCenter {
  background-color: var(--active-tabs) !important;
  color: white;
  border-color: var(--borders) !important;
}

/* toolbars */
.rstudio-themes-dark .rstheme_toolbarWrapper,
.rstudio-themes-dark .rstheme_secondaryToolbar {
  background-color: var(--active-tabs) !important;
  border-color: var(--active-tabs) !important;
}

/* other toolbars */
.rstudio-themes-dark .rstudio-themes-background {
    background-color: var(--active-tabs) !important;
    border-top-color: var(--borders) !important;
    border-bottom-color: var(--borders) !important;
}


.rstudio-themes-dark .gwt-TabLayoutPanelTab .gwt-Label {
  cursor: pointer;
}

/* tabs container */
.rstudio-themes-dark .gwt-TabLayoutPanelTabs,
/* windows */
.rstudio-themes-dark .windowframe,
/* gradients */
.rstudio-themes-dark :-webkit-any(.rstheme_multiPodUtilityTabArea,
    .GD15MCFCCS,
    .GJQ3LUQCCS) {
    background: var(--tab-gradient-dark);
    border-color: var(--borders) !important;
}

utCenter,
.rstudio-themes-flat .rstudio-themes-dark-grey .gwt-TabLayoutPanelTabs,
.rstheme_multiPodUtilityTabArea {
  background: var(--ui-background) !important;
}

/* containers */
.rstudio-themes-flat>.rstudio-themes-dark :-webkit-any(.windowframe, .rstheme_minimizedWindowObject)>div:last-child {
  border: 1px solid var(--borders) !important;
}

/* panel dividers */
.rstudio-themes-flat .rstudio-themes-dark-grey .gwt-SplitLayoutPanel-HDragger,
.rstudio-themes-flat .rstudio-themes-dark-grey .gwt-SplitLayoutPanel-VDragger {
  background: var(--ui-divider-background) !important;
}

/* settings pane */
.rstudio-themes-flat .gwt-DialogBox {
  border: solid 1px #242424;
  border-radius: 5px 5px 5px 5px;
  box-shadow: 0 15px 15px rgba(0, 0, 0, 0.8);
}

/* settings inner-pane */
.GD15MCFCGP .gwt-TabLayoutPanelContentContainer {
  background: #d2d2d2;
  border: 1px solid var(--borders);
}

/* settings "Basic" & "Advanced" buttons */
.GD15MCFCGP .gwt-TabLayoutPanelTab:first-child {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}


/* gradient in files pane that displays when path is too long */
.rstudio-themes-flat .rstudio-themes-dark-grey .breadcrumb .GD15MCFCCJ,
.rstudio-themes-flat .rstudio-themes-dark-grey .breadcrumb .GGBOEFPDCJ {
  background: var(--tab-gradient-light);
}


/* Console Pane (without any other tabs) */
.rstudio-themes-flat .rstudio-themes-dark-grey .GD15MCFCKV.GD15MCFCPO div.GD15MCFCMO .GD15MCFCIS {
    background-color: var(--ui-background) !important;
    border-color: var(--borders) !important;
  }  

/* Console Pane top border (without any other tabs) */
.rstudio-themes-flat .rstudio-themes-dark-grey .GD15MCFCKV.GD15MCFCPO div.GD15MCFCMO .GD15MCFCIS,
.rstudio-themes-flat .rstudio-themes-dark-grey .GD15MCFCKV.GD15MCFCPO,
.rstudio-themes-flat .rstudio-themes-dark-grey .GJQ3LUQCLV.GJQ3LUQCPO {
  border-color: var(--borders) !important;
}


/* datagrid */
.rstudio-themes-dark .dataGridHeader,
.rstudio-themes-dark tr[__gwt_header_row]> :-webkit-any(td, th),
.rstudio-themes-dark .dataTables_info {
  background: var(--ui-background) !important;
  border-color: var(--borders) !important;
}

/* data table */
.rstudio-themes-dark .dataTable :-webkit-any(th, .first-child) {
  background-color: var(--ui-background) !important;
}

.rstudio-themes-dark .dataTable :-webkit-any(th, td, tr) {
  border-color: silver !important;
}

.rstudio-themes-dark .dataTable tbody>tr:hover>td {
  background-color: var(--ui-background) !important;
}

/* Packages tab */
.rstudio-themes-flat .rstudio-themes-dark-grey .dataGridHeader,
.rstudio-themes-flat .rstudio-themes-dark-grey .GD15MCFCHBC,
.rstudio-themes-flat .rstudio-themes-dark-grey .GD15MCFCGCC {
  border-color: #333 !important;
}


/* buttons */
.rstudio-themes-flat .rstudio-themes-dark button.GJQ3LUQCC1>table:first-child,
.rstudio-themes-flat .rstudio-themes-dark button.GD15MCFCB1>table:first-child {
  border-color: #444444;
  background: #777777;
}

.rstudio-themes-flat.rstudio-themes-dark-menus:-webkit-any(.gwt-MenuItemSeparator, .menuSeparatorInner) {
  border-color: var(--borders) !important;
}

/* autocomplete */
.rstudio-themes-flat.rstudio-themes-dark-menus .ace_editor.ace_autocomplete {
  background: #3c3c3c;
  border: solid 1px var(--borders) !important;
  color: #f0f0f0;
}

.rstudio-themes-flat.rstudio-themes-dark-menus .menuPopupMiddleCenter,
.rstudio-themes-flat.rstudio-themes-dark-menus .themedPopupPanel .popupMiddleCenter,
.rstudio-themes-flat.rstudio-themes-dark-menus .gwt-SuggestBoxPopup .suggestPopupMiddleCenter {
  background: #232323;
  border: solid 1px #3e3e3e;
  color: #f0f0f0;
}

.rstudio-themes-flat.rstudio-themes-dark-menus .GJQ3LUQCIVB {
  color: #eaeaea;
  background: #444444;
  border: 1px solid #3e3e3e;
}

.rstudio-themes-flat.rstudio-themes-dark-menus .GJQ3LUQCPUB {
  background: #444444;
}

.rstudio-themes-flat.rstudio-themes-dark-menus .ace_editor.ace_autocomplete .ace_marker-layer .ace_active-line,
.rstudio-themes-flat.rstudio-themes-dark-menus .ace_editor.ace_autocomplete .ace_marker-layer .ace_line-hover {
  background: rgba(255, 255, 255, 0.15);
  border: none;
}

/* JS Changing the data viewing window colors */

/* JS This is the color of the data cells */
.rstudio-themes-flat.rstudio-themes-dark-grey #rsGridData_info,
.rstudio-themes-flat.rstudio-themes-dark-grey th,
.rstudio-themes-flat.rstudio-themes-dark-grey td.first-child,
.rstudio-themes-flat.rstudio-themes-dark-grey table.dataTable thead th {
  background-color: #2b2b2b;
}

/* JS This is the color of the border of the data cells */
.rstudio-themes-flat.rstudio-themes-dark-grey #rsGridData_info,
.rstudio-themes-flat.rstudio-themes-dark-grey table.dataTable thead th,
.rstudio-themes-flat.rstudio-themes-dark-grey table.dataTable thead td,
.rstudio-themes-flat.rstudio-themes-dark-grey table.dataTable tbody td {
  border-color: black;
}