This project involves creating a modern and simple CSS theme for the Devforum website.
DevStyle V2 by gamesaver2010
Details
Authorgamesaver2010
LicenseNo License
Categoryhttps://devforum.roblox.com/
Created
Updated
Size18 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Userstyle doesn't have notes.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 V2
@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
@var checkbox Custom "Custom Style" 0
@var checkbox TopBar "Creator Hub Top Bar" 1
@var color TextColor "Main Color" #22c55e
@var color BackgroundColor "Background Color" #111827
@var color TopNav "Nav Bar" rgb(31, 41, 55)
@var color NavText "Nav Text" #d1cfcf
@var color PrimaryText "Primary Text" #d1cfcf
==/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 TopBar=="0" {
#ember10{
display:none;
}
}
if Custom=="0" {
@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');
:root {
--secondary: #111827 !important;
--gray-900: #111827 !important;
--gray-800: #1f2937 !important;
--gray-700: #374151 !important;
--gray-600: #4b5563 !important;
--gray-500: #6b7280 !important;
--green-500: #22c55e !important;
--navbar: rgb(31, 41, 55) !important;
--background-main: #111827 !important;
--navtext: #d1cfcf !important;
--primary: #d1cfcf !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: TextColor;
--background-main: BackgroundColor;
--navbar: TopNav;
--navtext: NavText;
--primary: PrimaryText;
}
#main-outlet-wrapper {
padding: 0 20px;
background: var(--background-main);
}
#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;
}
.topic-list .topic-list-item-separator .topic-list-data span {
background: var(--background-main);
}
body {
font-family: 'Nunito',
'Quicksand',
sans-serif !important;
}
* {
font-family: 'Nunito', 'Quicksand', sans-serif !important;
}
.d-header .wrap {
max-width: 85%;
margin-right: auto;
margin-left: auto;
padding: 0 10px;
}
.d-header #site-text-logo {
color: var(--navtext);
}
.btn-flat .d-icon {
color: var(--navtext) !important;
}
#main-outlet-wrapper.wrap[role="main"] {
max-width: var(--d-max-width);
margin-right: auto;
margin-left: auto;
padding: 0 10px;
}
.d-header {
display: flex;
align-items: center;
width: 100%;
z-index: 1000;
background-color: var(--navbar);
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;
}
.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;
}
.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: var(--background-main);
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: var(--background-main);
}
.user-content {
padding-bottom: 12px;
margin-bottom: 12px;
background-color: var(--background-main);
box-sizing: border-box;
}
.user-stream .item,
.user-stream .user-stream-item {
background-color: var(--background-main);
border-bottom: 1px solid var(--primary-low);
padding: 1em 0.53em;
list-style: none;
}
.user-main .about .details {
background: var(--background-main);
border-bottom: 1px solid var(--primary-low);
}
.user-main .about .details .groups {
display: none;
}
.select-kit.multi-select .multi-select-header {
background: var(--background-main);
border-color: var(--primary-medium);
}
.badge-card {
background-color: var(--background-main);
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: var(--background-main);
}
.search-container .search-filters {
background: var(--background-main);
display: flex;
flex-direction: column;
}
.search-container .search-filters .search-advanced-filters {
background: var(--background-main);
}
.select-kit.combo-box .select-kit-header {
background: var(--background-main);
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: var(--background-main);
border: 1px solid var(--primary-medium);
border-radius: var(--d-input-border-radius);
}
.open .grippie {
cursor: row-resize;
padding: 4px 0;
background: #34455d;
}
#repl...