UI overhaul for the desktop web version of Pathbuilder 2e.
Realm for Pathbuilder 2e by mattermill
![Screenshot of Realm for Pathbuilder 2e](https://userstyles.world/preview/13825/0.jpeg)
Details
Authormattermill
LicenseNo License
Categorypathbuilder2e.com
Created
Updated
Size33 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 ? - Dec 2023
@namespace github.com/mattermill/realm-pathbuilder
@version 1.0.0
@description Realm UI overhaul for Pathbuilder 2e
@author mattermill
==/UserStyle== */
@-moz-document domain("pathbuilder2e.com") {
@import url('https://fonts.googleapis.com/css2?family=Averia+Serif+Libre:wght@400;700&display=swap');
html,
body {
font-size: 14px;
}
html,
body,
.layout-tabbed-line,
.rounded-rectangle,
.modal-content {
background: #232628;
color: #FFF;
}
/* GLOBALS */
* {
box-sizing: border-box !important;
}
.layout-tabbed-line {
background: none;
padding: 12px !important;
margin: 0;
border-radius: 0;
box-shadow: inset 0 -1px #5E5953;
}
.subtitle {
margin-left: 0 !important;
}
.modal-content .dialog-top-bar,
.div-listview-info .top-div .listview-title {
font-family: 'Averia Serif Libre' !important;
}
/* MENU */
.sidenav {
background: #40372A;
}
.sidenav-part.sidenav-header {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: none;
text-align: center;
padding: 0px 24px;
height: auto;
margin: 2em 0;
position: relative;
}
.sidenav-part.sidenav-header:before,
.sidenav-part.sidenav-header:after {
display: block;
width: 100%;
height: 32px;
content: '';
}
.sidenav-part.sidenav-header:before {
background: url('https://sssaves.com/realm/border-top.svg') no-repeat center center;
}
.sidenav-part.sidenav-header:after {
background: url('https://sssaves.com/realm/border-bottom.svg') no-repeat center center;
}
.sidenav-part.sidenav-header h2 {
margin: 24px 0 8px 0;
}
.sidenav-part.sidenav-header p {
margin: 0 0 24px 0;
color: #AA916E;
}
.sidenav-part.sidenav-header br {
display: none;
}
.menu-group-header {
text-align: center;
color: #AA916E;
font-weight: 500;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 8px;
}
.sidenav-part .menu-group {
margin: 0;
display: flex;
flex-direction: column;
}
.sidenav-part .menu-group .sidenav-link {
flex: 0 0 100%;
}
.modal-button, .sidenav-link {
text-align: center;
width: auto !important;
margin: 0.2em;
padding: 8px 16px;
font-size: 12px;
font-weight: 500;
border-radius: 0;
background: linear-gradient(180deg, #7B7268 0.01%, #7B6F5F 50%, #6A6052 50.01%, #6A5A47 88.54%, #847158 100%);
box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.3);
border: 1px solid #AA916E;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
transition: all 0.3s;
position: relative;
z-index: 1;
overflow: hidden;
}
.modal-button {
font-size:14px !important;
font-family: 'Averia Serif Libre' !important;
}
.menu-group .sidenav-link:before, .modal-button:before, .modal-content .small-margin-right-bottom.div-button.padding-standard.centered-flex:before {
display: block;
position: absolute;
top: -100%;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
content: '';
background: linear-gradient(180deg, #821E32 0.01%, #9C2B42 50%, #5A141E 50.01%, #500A14 88.54%, #7B1B2E 100%);
transition: all 0.1s;
}
.menu-group .sidenav-link:hover, .modal-button:hover, .modal-content .small-margin-right-bottom.div-button.padding-standard.centered-flex:hover {
border-color: #C7B293;
filter: drop-shadow(0px 0px 4px rgba(187, 165, 133, 0.55));
color:#FFF;
}
.menu-group .sidenav-link:hover:before, .modal-button:hover:before {
top: 0;
}
.modal-button:nth-child(2), #sidenav-load, #sidenav-save, #sidenav-new {
background: linear-gradient(180deg, #38474C 0.01%, #2E3D42 50%, #253439 50.01%, #27363B 88.54%, #38474C 100%);
border-color:#7E7165;
}
.modal-button:nth-child(3), .modal-button:nth-child(4),.modal-button:nth-child(5), .modal-content .small-margin-right-bottom.div-button.padding-standard.centered-flex {
text-align: center;
width: auto !important;
margin: 0.2em;
padding: 8px 12px;
font-size: 12px;
font-weight: 500;
border-radius: 0;
background:none;
box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.3);
border: 1px solid #5E5953;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
transition: all 0.3s;
position: relative;
z-index: 1;
overflow: hidden;
}
/* Menu Signin */
#menu-header-signin {
display: none;
}
.menu-group:nth-child(3) {
border: 0;
}
#sidenav-logout {
background: #322C23;
border: 0;
box-shadow: none;
display: flex;
}
/* Menu Character */
.menu-group:nth-child(5) {
flex-direction: column-reverse;
}
/* TOP NAV */
.top-bar {
background: #111;
border: none;
display: flex;
justify-content: center;
height: 40px;
position: fixed;
width: 100%;
z-index: 1;
}
#active-builds {
color: #40372A;
/* earth */
}
.active-build-section-active {
border-bottom: 3px solid #AA916E;
}
#menu {
display: flex;
align-items: center;
}
.menu-title.button-text {
display: none;
}
#menu:after {
display: block;
content: "Pathbuilder 2e";
font-size: 1.25em;
font-weight: bold;
}
/* MAIN LAYOUT */
#main-container {
margin: 0 !important;
padding: 0 !important;
overflow-y: scroll;
}
.main-column-right {
width: calc(100% - 320px) !important;
margin: 0 auto;
margin-top: 40px;
}
#container-row-0,
#container-row-2 {
max-width: 980px;
margin: 0 auto;
}
/* PLANNER */
.main-column-left {
width: 320px;
margin-top:40px;
padding-top: 40px;
background: #5A141E;
top:40px;
position: sticky;
height: calc(100vh - 40px);
}
.main-column-left .rounded-rectangle,
.rounded-rectangle-white {
background: none;
color: #E6E1D7 !important;
}
.main-column-left .rounded-rectangle .div-button,
.button-show-plan {
background: #470E16 !important;
border: 1px solid #821E32 !important;
padding: 8px;
}
.main-column-left .rounded-rectangle .div-button:hover,
.button-show-plan:hover {
background: #400A12 !important;
border: 1px solid #A7233D !important;
color: #FFF;
}
.main-column-left .rounded-rectangle .div-button:has(.button-selection.red-text) {
border: 1px dashed #A7233D !important;
}
.main-column-left .rounded-rectangle .div-button:has(.button-selection.red-text) .small-text.grey-text {
color: #BB8487!important;
}
.button-selection.red-text {
color: #ec5f67!important;
}
.build-section .centered-div-holder {
justify-content: center;
}
.build-section .centered-div-holder #id_header {
font-family: 'Averia Serif Libre' !important;
font-size:1.5em;
width:100%;
text-align:center;
}
.build-section .centered-div-holder #id_header:before {
display:block;
height:32px;
content:'';
background:url("https://sssaves.com/realm/border-top.svg") no-repeat center center;
margin-bottom:1em;
}
.main-column-left .small-text.grey-text {
color: #BEA988 !important;
}
.button-show-plan {
width: auto;
height: 32px;
position: fixed;
padding: 0 8px;
left: 18px;
top: 52px;
border-radius: 8px;
box-shadow: 10px 6px #000 0.6;
}
.cogButton .centred-parent img {
width: 32px;
}
#divBuild .button-column {
margin: 4px;
padding: 0;
}
#divBuild .button-column .button-icon {
margin: 0;
width: 32px;
}
/* FORMS */
.section-top.rounded-rectangle > div:first-child > div:first-child > div:nth-child(2) .div-button,
.section-top.rounded-rectangle > div:first-child > div:first-child > div:nth-child(3) .div-button,
.section-top.rounded-rectangle > div:first-child > div:first-child > div:nth-child(4) .div-button,
.details-buttons .div-button,
.edittext-dark,
.textarea-notes,
.button-money,
.edittext-custom {
display: flex;
flex-direction: column;
justify-content: center;
gap: 2px;
padding: 8px;
border-radius: 0;
}
.section-top.rounded-rectangle > div:first-child > div:first-child > div:nth-child(2) .div-button,
.section-top.rounded-rectangle > div:first-child > div:first-child > div:nth-child(3) .div-button,
.section-top.rounded-rectangle > div:first-child > div:first-child > div:nth-child(4) .div-button,
.details-buttons .div-button,
.edittext-dark,
.textarea-notes,
.button-money,
.spinner-dark,
.edittext-custom {
background: #1C1F21 !important;
border: 1px solid #1C1F21 !important;
padding: 8px;
border-radius: 0;
color: #D2CDBE !important;
}
.custom-div .small-text.grey-text {
margin-bottom:0.5em;
}
.section-top.rounded-rectangle > div:first-child > div:first-child > div:nth-child(2) .div-button:hover,
.section-top.rounded-rectangle > div:first-child > div...