Compressed DevHub CSS Theme

I have a smallish monitor and the DevHub has a lot of padding and a lot of big text.
Obviously these two things are not very compatible, so here’s a quick and dirty CSS theme I made that makes the padding and text smaller.

There is a block at the bottom of the code commented out that adds some background color to the API pages to better differentiate the properties, functions, and events sections. You can uncomment it if you’re feeling spicy. This option is an easy toggle with Stylus.

Let me know if you find anything broken.

This theme should also be compatible with my dark theme if you’re not using the colored sections option.



API Reference

Before:

After:

With Colored Sections:


Learn Roblox

Before:

After:


Here is the CSS on its own

.header .logo a {
  width: 120px !important;
  height: 20px !important;
}

.bd-navbar, .header .search-box {
  height: 55px !important;
}

.header .search-box .btn-submit {
  top: 15px;
}

.header .bd-navbar-nav .nav-item > a {
  height: 55px !important;
}

.top-heading-wrap {
  margin-bottom: 10px !important;
}

.breadcrumb {
  margin-bottom: 0px !important;
}

.sub-pages h1, .home .news-n-announcements h3 {
  font-size: 25px !important;
  line-height: 30px !important;
}

.sub-pages h2 {
  font-size: 20px !important;
  line-height: 25px !important;
  margin-bottom: 10px !important;
}

.api-content .page-section h2 {
  margin-top: 10px !important;
}

.bd-content p {
  margin-bottom: 6px !important;
}

.table .table-row td:first-child code {
  line-height: 25px !important;
}

.bd-content p, .markdown-field-data p, .table.tbl-items td, .table .description p, .table .table-row td code h3, .alert, .bd-content ul li {
  line-height: 25px !important;
}

p, .markdown-field-data p, .markdown-field-data li, .table.tbl-items td, .table .description p, .table .table-row td code h3, .alert, .bd-content ul li {
  font-size: 12px !important;
}

br:nth-child(3n + 3), br:nth-last-child(3) {
  display: none !important;
}

.breadcrumb .breadcrumb-item a {
  font-size: 12px !important;
  line-height: 15px !important;
}

.multi-nested-list a {
  font-size: 12px !important;
  line-height: 20px !important;
}

.prev-next-wrap, .bd-content .row.all div .inner-wrap h5, .bd-content .row.all div .desc {
  font-size: 12px !important;
  line-height: 15px !important;
}

.show-hide span {
  font-size: 12px !important;
  line-height: 15px !important;
}

.bd-toc .toc-nav nav[data-toggle=toc] a {
  font-size: 12px !important;
  line-height: 15px !important;
}

.alert {
  padding: 6px 10px !important;
}

code {
  font-size: 12px !important;
  line-height: 16px !important;
  padding-left: 4px !important;
  padding-right: 4px !important;
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

.table .table-row td:first-child {
  padding: 2px 10px !important;
}

.table .table-row td code h3 a {
  font-weight: bold !important;
}

.table.tbl-items td {
  padding: 2px 10px !important;
}

.bd-content p {
  margin-bottom: 4px !important;
}

.table.tbl-items td p {
  margin-bottom: 0px !important;
}

.bd-sidebar .bd-toc-link, .bd-sidebar .bd-toc-item .sub-nav {
  font-size: 12px !important;
  line-height: 25px !important;
}

.bd-sidebar-wrap .nav-tabs {
  margin: 0 25px !important;
}

.bd-sidebar .bd-toc-link {
  padding: 0 25px !important;
}

.bd-sidebar .bd-toc-item .sub-nav a {
  font-size: 12px !important;
  line-height: 25px !important;
  padding: 0px 10px 0px 50px !important;
}

.bd-sidebar .bd-toc-item-wrap {
  margin-bottom: 6px !important;
}

.multi-nested-list li ul li {
  padding-bottom: 8px !important;
}

.bd-content .row.all div {
  flex: 20% !important;
}

.bd-content .row.all div .image-icon {
  background-size: contain !important;
  padding-bottom: 0px !important;
}

.learn-roblox-pages .intro .img-fluid {
  display: none !important;
}

.bd-toc {
  top: 0px !important;
  height: 100% !important;
}

.bd-content {
  padding-top: 10px !important;
}

/*
------------
COLOR TWEAKS
------------
*/

/*
#properties.page-section {
  background-color: #ffebe2 !important;
  padding: 10px !important;
  margin-top: 10px !important;
}
#properties.page-section .table .table-row td:first-child {
  background: #ffe1d4 !important;
  border-color: #f5c1ab !important;
}
#properties.page-section .table.tbl-items tbody,
#properties.page-section code {
  background: #fff8f5 !important;
  border-color: #f5c1ab !important;
}

#functions.page-section {
  background-color: #eeffe2 !important;
  padding: 10px !important;
  margin-top: 10px !important;
}
#functions.page-section .table .table-row td:first-child {
  background: #e1fdcd !important;
  border-color: #c6e7af !important;
}
#functions.page-section .table.tbl-items tbody,
#functions.page-section code{
  background: #f6fff0 !important;
  border-color: #c6e7af !important;
}

#events.page-section {
  background-color: #e2f7ff !important;
  padding: 10px !important;
  margin-top: 10px !important;
}
#events.page-section .table .table-row td:first-child {
  background: #d3ecf5 !important;
  border-color: #a9d4e4 !important;
}
#events.page-section .table.tbl-items tbody,
#events.page-section code {
  background: #effaff !important;
  border-color: #a9d4e4 !important;
}

.table.tbl-items {
  background-color: #ffffff !important;
}
*/
20 Likes

You should put this in #learning-resources:community-tutorials-resources :slight_smile:

2 Likes

You made my day. Having a Chromebook as sort of a research monitor means sites that have large padding make my eyes hurt from all the scrolling I have to constantly do.

4 Likes

Nice work! By all means you guys should feel free to tweak the devhub css to your needs if you don’t like how it’s currently styled.

10 Likes

Wow!

I’m absolutely going to have to add the coloured sections. I find it nigh impossible to discern between properties, functions, and events in its current state.

Thanks for this!

3 Likes

This is great man. I really loved it.

2 Likes