A new style for the roblox developer forum!
DevStyle by gamesaver2010
Details
Authorgamesaver2010
LicenseNo License
Categoryhttps://devfourm.roblox.com
Created
Updated
Size16 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Please use only dark mode!
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name DevStyle
@description This project involves creating a modern and simple CSS theme for the Devforum website.
@namespace devforum.roblox.com
@author me
@version 0.1.0
@preprocessor stylus
==/UserStyle== */
@-moz-document url-prefix("https://devforum.roblox.com/") {
/* .d-header {
display: flex;
align-items: center;
width: 90%;
z-index: 1000;
background-color: rgb(31, 41, 55);
box-shadow: 0 2px 4px -1px rgb(15 19 25 / 61%);
backface-visibility: hidden;
margin: 1%;
}
header {
width: calc(100% - 2%) !important;
margin: -10px;
margin-top: 0px;
height: 60.031px !important;
}*/
if logo=="1" {
.d-header #site-logo {
height: 2.667em;
content: url(https://i.ibb.co/2kvtPNZ/images-1.png);
}
header .logo-big {
width: 208.617px px !important;
height: 40.023px !important;
}
}
/* if loading=="0" {
body {
background: var(--background-main) !important;
}
}
if loading=="1" {
body {
background-image: url("https://im.ezgif.com/tmp/ezgif-1-96063e7e09.gif") !important;
}
#main {
overflow: hidden;
visibility: hidden;
-moz-animation: cssAnimation 0s ease-in 3.5s forwards;
-webkit-animation: cssAnimation 0s ease-in 3.5s forwards;
-o-animation: cssAnimation 0s ease-in 3.5s forwards;
animation: cssAnimation 0s ease-in 3.5s forwards;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
@keyframes cssAnimation {
to {
width: 0;
height: 0;
overflow: show;
body {
background: var(--background-main);
}
}
}
@-webkit-keyframes cssAnimation {
to {
width: 0;
height: 0;
visibility: visible;
body {
background: var(--background-main) ;
}
}
}
} */
@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');
:root {
--secondary: #111827;
--gray-900: #111827;
--gray-800: #1f2937;
--gray-700: #374151;
--gray-600: #4b5563;
--gray-500: #6b7280;
--green-500: #22c55e;
--background-main: #111827;
}
#main-outlet-wrapper {
padding: 0 20px;
background: #111827;
}
#ember4{
background: var(--background-main);
}
.timeline-container .topic-timeline .timeline-handle {
border-radius: 0.8em;
width: 0.35em;
background-color: var(--green-500);
height: 100%;
float: left;
z-index: 2;
outline: 1px solid transparent;
}
body {
font-family: 'Nunito',
'Quicksand',
sans-serif !important;
}
* {
font-family: 'Nunito', 'Quicksand', sans-serif !important;
}
.d-header > .wrap {
max-width: 100%;
margin-right: auto;
margin-left: auto;
padding: 0 10px;
}
.d-header {
display: flex;
align-items: center;
width: 100%;
z-index: 1000;
background-color: rgb(31, 41, 55);
box-shadow: 0 2px 4px -1px rgb(15 19 25 / 61%);
backface-visibility: hidden;
padding: 0px 20px 0 20px !important;
/* margin: 20px; */
}
.btn-flat .d-icon {
color: #d1cfcf;
}
.topic-list .topic-list-data.posters {
height: 29px;
display: none;
}
.btn {
font-size: var(--font-0);
line-height: normal;
box-sizing: border-box;
padding: 0.5em 0.65em;
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0;
font-weight: normal;
color: var(--primary);
background: var(--primary-low);
cursor: pointer;
transition: all 0.25s;
border-radius: 5px;
border: 1px var(--gray-800) solid;
}
.nav-pills > li > a,
.nav-pills > li button {
border: none;
padding: 6px 12px;
color: var(--primary);
font-size: var(--font-up-1);
line-height: var(--line-height-small);
box-sizing: border-box;
min-height: 30px;
display: flex;
align-items: center;
transition: background-color 0.2s, color 0.2s;
border-radius: 8px;
}
.timeline-container .topic-timeline .timeline-date-wrapper {
max-width: 9em;
overflow-wrap: anywhere;
display: none;
}
.topic-status-info,
.topic-timer-info {
display: none;
}
#topic-footer-buttons .pinned-button .reason .text,
#topic-footer-buttons .topic-notifications-button .reason .text {
margin-left: 0.5em;
line-height: var(--line-height-medium);
display: none;
}
#ember87 {
display: none;
}
.suggested-topics-message {
display: none;
}
.topic-post-badges {
display: none;
}
.discourse-tags {
display: none;
}
.nav-pills > li a.active,
.nav-pills > li button.active {
color: var(--secondary) !important;
background-color: var(--green-500) !important;
}
#footer_rbx {
display: none;
}
.btn-primary .d-icon,
.admin-wizards-custom-fields .btn.save:enabled .d-icon {
color: #bdbcbc;
margin-right: 0.45em;
transition: color 0.25s;
}
.btn {
font-size: var(--font-0);
line-height: normal;
box-sizing: border-box;
padding: 0.5em 0.65em;
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0;
font-weight: normal;
color: var(--primary);
background: #11182700;
cursor: pointer;
transition: all 0.25s;
border-radius: 5px;
border: 1px var(--gray-800) solid;
}
.btn:focus {
background: var(--gray-800);
color: var(--primary);
}
.btn:focus .d-icon {
color: var(--primary);
}
.topic-map {
background: #111827;
border: 0px solid #ffffff;
border-top: none;
}
.topic-map section {
border: 2px solid var(--gray-800);
border-radius: 6px;
}
.topic-map .buttons .btn {
border: 0;
padding: 0 23px;
color: var(--primary-med-or-secondary-high);
background: #0e131e;
border-left: 1px solid va;
display: none;
}
.user-main .about.collapsed-info .details {
position: relative;
padding: 0;
margin-top: 0;
/* border-bottom: 1px solid var(--primary-low); */
}
.user-main .about.collapsed-info .details .primary {
width: 100%;
background: #111827;
}
.user-content {
padding-bottom: 12px;
margin-bottom: 12px;
background-color: #111827;
box-sizing: border-box;
}
.user-stream .item,
.user-stream .user-stream-item {
background-color: #111827;
border-bottom: 1px solid var(--primary-low);
padding: 1em 0.53em;
list-style: none;
}
.user-main .about .details {
background: #111827;
border-bottom: 1px solid var(--primary-low);
}
.user-main .about .details .groups {
display: none;
}
.select-kit.multi-select .multi-select-header {
background: #111827;
border-color: var(--primary-medium);
}
.badge-card {
background-color: #111827;
border: 1px solid var(--primary-low);
position: relative;
}
.menu-panel {
border: 1px solid var(--gray-700);
box-shadow: 0 12px 12px rgb(11 15 20);
border-radius: 12px;
background-color: #1f2937;
z-index: 1000;
padding: 0.5em;
width: 320px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.search-container .search-header {
padding: 1rem 10%;
background: #111827;
}
.search-container .search-filters {
background: #111827;
display: flex;
flex-direction: column;
}
.search-container .search-filters .search-advanced-filters {
background: #111827;
}
.select-kit.combo-box .select-kit-header {
background: #111827;
border-color: var(--gray-800);
}
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
font-size: var(--font-0);
line-height: normal;
box-sizing: border-box;
padding: 0.5em 0.65em;
display: inline-block;
margin-bottom: 9px;
color: var(--primary);
background-color: #111827;
border: 1px solid var(--primary-medium);
border-radius: var(--d-input-border-radius);
}
.open .grippie {
cursor: row-resize;
padding: 4px 0;
background: #34455d;
}
#reply-control .reply-area {
margin: 0 auto;
padding: 8px;
box-sizing: border-box;
height: calc(100% - 11px);
width: 100%;
background: #111827;
}
.d-editor-textarea-wrapper {
display: flex;
flex: 1;
flex-direction: column;
background-color: #111827;
position: relative;
border: 1px solid var(--primary-medium);
border-radius: var(--d-input-border-radius);
min-height: 0;
}
#reply-control.draft,
#reply-control.saving {
height: 40px !important;
align-items: center;
background: var(--green-500);
color: var(--secondary);
flex-direction: row;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
justify-content: space-between;
}
#reply-control.draft .composer-controls .d-icon,
#reply-control.saving .composer-controls .d-icon {
color: #fff;
}
.user-menu .quick-access-panel .read {
background-color: #1f2937;
}
div.menu-links-header .menu-links-row button.active {
border: 1px solid var(--primary-low);
border-bottom: 0px solid var(--secondary);
position: relative;
}
div.menu-links-header .menu-links-row button.active {
border: 0px solid var(--primary-low);
border-bottom: 0px solid var(--secondary);
position: relative;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
background: #111827;
}
.search-container .search-bar {
display: flex;
justify-content: space-between;
align-items: stretch;
background: #111827;
}
.user-menu .menu-panel .panel-body-bottom .btn,
.hamburger-panel .menu-panel .panel-body-bottom .btn {
background-color: #1f2937;
color: var(--primary-high);
}
.drop-down-mode .d-header-icons .active .icon {
position: relative;
background-color: #1f2937;
cursor: default;
border: 0px solid var(--primary-low);
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[t...