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;
}
*/