Skip to content

Commit

Permalink
1.1.0
Browse files Browse the repository at this point in the history
Dorako committed Feb 5, 2022
1 parent 3f071e5 commit ede4f36
Showing 11 changed files with 328 additions and 20 deletions.
4 changes: 4 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
# 1.1.0
Lots of changes to the card styling, the default styling is now a 'dark mode', options for 'light mode' coming later.

# 1.0.6
# 1.0.5
Centered hotbar setting, edge-margin setting, v-padding decrease in cards, navbar color swap + tweaks, SmallTime patch, Chat Portrait support, fix for 'flavor-text'
# 1.0.4
4 changes: 1 addition & 3 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
# PF2e Dorako UI
This is a UI overhaul for the Pathfinder 2nd Edition System for Foundry VTT.

An opinionated theme inspired by Paizo colors, compatible with several modules for increased consistensy.

Options to coming later.
An opinionated theme inspired by Paizo colors, compatible with several modules for increased consistensy.
Binary file added img/background-dark.webp
Binary file not shown.
4 changes: 2 additions & 2 deletions module.json
Original file line number Diff line number Diff line change
@@ -4,13 +4,13 @@
"description": "Overhauls the Foundry UI and several modules.",
"url": "https://github.com/Dorako/pf2e-dorako-ui",
"author": "Dorako",
"version": "1.0.6",
"version": "1.1.0",
"minimumCoreVersion": "9",
"compatibleCoreVersion": "9",
"system": ["pf2e"],
"scripts": [
"scripts/dorako-ui.js"
],
"dependencies": [ { "name": "colorsettings" } ],
"download": "https://github.com/Dorako/pf2e-dorako-ui/archive/refs/tags/v1.0.6.zip"
"download": "https://github.com/Dorako/pf2e-dorako-ui/archive/refs/tags/v1.1.0.zip"
}
25 changes: 25 additions & 0 deletions scripts/dorako-ui.js
Original file line number Diff line number Diff line change
@@ -300,6 +300,18 @@ Hooks.on('init', () => {
}
});

game.settings.register('pf2e-dorako-ui', 'skin-dice-tray', {
name: "Apply skin to Dice Tray module?",
hint: "",
scope: "world",
type: Boolean,
default: true,
config: true,
onChange: () => {
location.reload();
}
});




@@ -375,6 +387,9 @@ Hooks.on('init', () => {
if (game.settings.get('pf2e-dorako-ui', 'skin-custom-hotbar')) {
skinCustomHotbar()
}
if (game.settings.get('pf2e-dorako-ui', 'skin-dice-tray')) {
skinDiceTray()
}

}

@@ -549,4 +564,14 @@ function skinWindowControls() {
newCss.setAttribute("href", "modules/pf2e-dorako-ui/styles/window-control.css")
newCss.setAttribute("media", "all")
head.insertBefore(newCss, head.lastChild);
}

function skinDiceTray() {
const head = document.getElementsByTagName("head")[0];
const newCss = document.createElement("link");
newCss.setAttribute("rel", "stylesheet")
newCss.setAttribute("type", "text/css")
newCss.setAttribute("href", "modules/pf2e-dorako-ui/styles/dice-tray.css")
newCss.setAttribute("media", "all")
head.insertBefore(newCss, head.lastChild);
}
1 change: 1 addition & 0 deletions styles/app-ui.css
Original file line number Diff line number Diff line change
@@ -91,6 +91,7 @@

.window-app .window-content {
padding: 5px 5px 0px 5px;
border-radius: 0px 0px 5px 5px;
}

.window-app .window-header {
267 changes: 257 additions & 10 deletions styles/chat.css
Original file line number Diff line number Diff line change
@@ -94,10 +94,15 @@
line-height: unset;
}

#polyglot,
#chat-controls {
padding: 0px;
margin-left: 2px;
margin-right: 2px;
width: -webkit-fill-available;
}


#chat {
/* margin: 5px;
margin-top: 0px;
@@ -124,7 +129,7 @@

.flavor-text {
background-size: cover;
background-image: var(--img-parchment);
background-image: var(--pf2e-sheets-bg);
background-blend-mode: luminosity;
/* background:#E5E1DA; */
padding-left:5px;
@@ -147,7 +152,7 @@

.whisper-to {
background-size: cover;
background-image: var(--img-parchment);
background-image: var(--pf2e-sheets-bg);
background-blend-mode: luminosity;
background-color: var(--whisper-bg);
margin-right: -5px;
@@ -160,7 +165,8 @@
background-color: var(--whisper-bg);
}

.message-content .dice-roll .dice-result .dice-total.statuseffect-message {
.message-content .dice-roll .dice-result .dice-total.statuseffect-message,
.message-content .dice-roll .dice-result .dice-total.statuseffect-message:hover {
border: 0px;
margin-top: 5px;
box-shadow: none;
@@ -171,10 +177,7 @@
padding: 0px;
}

#chat-log hr {
margin-top: 1px;
margin-bottom: 1px;
}


.message-content h3.chat-portrait-text-size-name {
display: flex;
@@ -206,7 +209,9 @@


.chat-mode-indicator {
background-color: rgba(140, 40, 40, 1);
/* background-color: rgba(140, 40, 40, 1); */
background: rgba(200,200,200,.45);
font-size: xx-small;
}


@@ -236,6 +241,7 @@
padding: 5px;
padding-left: 8px;
padding-right: 8px;
font-weight: 500;
}

.pf2e.chat-card .card-content p {
@@ -272,7 +278,7 @@
}


.flavor-text > hr {
#chat-log .flavor-text > hr {
/* display: none; */
margin-top: 0px;
margin-bottom: 3px;
@@ -343,7 +349,9 @@




.pf2e.chat-card .card-buttons .spell-attack-buttons {
gap: 5px;
}



@@ -478,3 +486,242 @@ button {
.directory {
overflow: auto;
}


/* DARK MODE */

:root {
--color-text-dark-secondary: rgb(214, 214, 214);
--body-light-on-dark: hsl(0, 0%, 100%);
}

.pf2e.chat-card .card-footer {
border-top: none;
color: var(--color-text-dark-secondary);
}

#chat-log .chat-message,
.message-content .chat-damage-buttons button,
.dice-tooltip .dice-rolls .roll,
.pf2e.chat-card .card-content p,
.pf2e.chat-card .card-header h3,
.pf2e.chat-card .card-header h4 {
color: var(--body-light-on-dark);
text-shadow: 0px 1px 0px rgb(0 0 0);
}

#chat-log select,
#chat-log button,
#chat-log form button,
.dice-roll .dice-formula, .dice-roll .dice-total,
.message-content .chat-damage-buttons button {
box-shadow: var(--glassy);
border: none;
}

.dice-roll .dice-formula:hover::after, .dice-roll .dice-total:hover::after,
.message-content .chat-damage-buttons button:hover::after {
transition: box-shadow 0.5s ease-in-out;
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: 0px 0px 10px rgba(220,200,100,0.5) inset, var(--glassy);
border-radius: 2px;
overflow: hidden;
cursor: pointer;
}



#chat-log .chat-message {
background: var(--bg-dark);
background-size: cover;
}



#chat-log .message .message-header {
background: none;
}

#chat-log .message .message-header .message-sender,
#chat-log .message .message-header .message-metadata {
background: none;
}

.whisper .flavor-text,
.blind .flavor-text,
.flavor-text,
.whisper-to {
background-color: unset;
background-image: none;
}

/* Adds border around flavor text */
/* .flavor-text {
border-image-repeat: repeat;
border-image-slice: 11;
border-image-width: 14px;
border-style: double;
padding: 5px;
padding-left: 8px;
padding-right: 8px;
margin-left: 5px;
margin-right: 5px;
font-weight: 500;
border-image-source: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='33' height='33' overflow='scroll'%3E%3Cstyle%3E.st1{stroke:wheat;stroke-miterlimit:10}.st1,.st2{fill:none}%3C/style%3E%3Cg opacity='1'%3E%3Cpath class='st1' d='M.5 20v-7'/%3E%3Cpath class='st2' d='M13 20v-7'/%3E%3Cpath class='st1' d='M13 .5h7'/%3E%3Cpath class='st2' d='M13 13h7'/%3E%3Cpath class='st1' d='M32.5 13v7'/%3E%3Cpath class='st2' d='M20 13v7'/%3E%3Cpath class='st1' d='M20 32.5h-7'/%3E%3Cpath class='st2' d='M20 20h-7'/%3E%3Cpath class='st1' d='M.5.5h3.1v3.1H.5zm3.1 3.1h3.1v3.1H3.6zm3.2 0h3.1v3.1H6.8zM3.6 6.8h3.1v3.1H3.6zm0 0H.5V13M13 .5H6.8v3.1M29.4.5h3.1v3.1h-3.1zm-3.1 3.1h3.1v3.1h-3.1zm0 3.2h3.1v3.1h-3.1zm-3.2-3.2h3.1v3.1h-3.1zm3.2 0V.5H20M32.5 13V6.8h-3.1M29.4 29.4h3.1v3.1h-3.1z'/%3E%3Cpath class='st1' d='M26.3 26.3h3.1v3.1h-3.1zm-3.2 0h3.1v3.1h-3.1zm3.2-3.2h3.1v3.1h-3.1z'/%3E%3Cpath class='st1' d='M29.4 26.3h3.1V20M20 32.5h6.3v-3.1'/%3E%3Cg%3E%3Cpath class='st1' d='M.5 29.4h3.1v3.1H.5zm3.1-3.1h3.1v3.1H3.6zm0-3.2h3.1v3.1H3.6zm3.2 3.2h3.1v3.1H6.8zM6.8 29.4v3.1H13M.5 20v6.3h3.1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
} */

#chat-log .whisper {
background-color: var(--whisper-bg);
background-blend-mode: luminosity;
}

#chat-log .blind {
background-color: var(--blind-bg);
background-blend-mode: luminosity;
}

.message-content .chat-damage-buttons button>.transparent-half {
background: rgba(0,0,0,0.5);
left: 50%;
height: 18px;
opacity: .6;
top: 2px;
width: 12px;
}

.message-content .chat-damage-buttons button .plus {
color: rgba(0,0,0,0.5);
text-shadow: none;
}

.message-content .chat-damage-buttons button>img {
filter: invert(100%) drop-shadow(0px 1px 1px black);
height: 18px;
top: 1px;
}

.damage-tag-base {
background: rgba(200,200,200,.45);
}
.damage-tag-modifier {
background: rgba(200,200,200,.15);
}

.message-content .chat-damage-buttons button {
box-shadow: var(--glassy);
border:none;
transition: box-shadow 0.5s ease-in-out;
}

[data-visibility=owner]:is(div,em,p,span,strong) {
background: #818181;
border: 2px dotted white;
border-radius: 3px;
box-sizing: border-box;
margin-bottom: 4px;
padding: 0 3px;
}

.whisper-to * {
background: rgba(200,200,200,.45);
color: #fff;
border: 1px solid #999;
}


.pf2e.chat-card .card-content {
border-image-source: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='33' height='33' overflow='scroll'%3E%3Cstyle%3E.st1{stroke:wheat;stroke-miterlimit:10}.st1,.st2{fill:none}%3C/style%3E%3Cg opacity='1'%3E%3Cpath class='st1' d='M.5 20v-7'/%3E%3Cpath class='st2' d='M13 20v-7'/%3E%3Cpath class='st1' d='M13 .5h7'/%3E%3Cpath class='st2' d='M13 13h7'/%3E%3Cpath class='st1' d='M32.5 13v7'/%3E%3Cpath class='st2' d='M20 13v7'/%3E%3Cpath class='st1' d='M20 32.5h-7'/%3E%3Cpath class='st2' d='M20 20h-7'/%3E%3Cpath class='st1' d='M.5.5h3.1v3.1H.5zm3.1 3.1h3.1v3.1H3.6zm3.2 0h3.1v3.1H6.8zM3.6 6.8h3.1v3.1H3.6zm0 0H.5V13M13 .5H6.8v3.1M29.4.5h3.1v3.1h-3.1zm-3.1 3.1h3.1v3.1h-3.1zm0 3.2h3.1v3.1h-3.1zm-3.2-3.2h3.1v3.1h-3.1zm3.2 0V.5H20M32.5 13V6.8h-3.1M29.4 29.4h3.1v3.1h-3.1z'/%3E%3Cpath class='st1' d='M26.3 26.3h3.1v3.1h-3.1zm-3.2 0h3.1v3.1h-3.1zm3.2-3.2h3.1v3.1h-3.1z'/%3E%3Cpath class='st1' d='M29.4 26.3h3.1V20M20 32.5h6.3v-3.1'/%3E%3Cg%3E%3Cpath class='st1' d='M.5 29.4h3.1v3.1H.5zm3.1-3.1h3.1v3.1H3.6zm0-3.2h3.1v3.1H3.6zm3.2 3.2h3.1v3.1H6.8zM6.8 29.4v3.1H13M.5 20v6.3h3.1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

#chat-log a.entity-link,
#chat-log a.content-link,
#chat-log a.inline-roll {
text-shadow: 0px 1px white;
color: black;
}


.pf2e.chat-card .card-buttons button {
margin: 2px 0;
background: var(--paizo-red);
color: var(--body-light-on-dark);
text-shadow: 0px 1px black;
line-height: 20px;
}

.pf2e.chat-card .card-buttons .hidden-to-others {
border: none;
background: var(--paizo-blue);
}

.pf2e.chat-card [data-visibility=owner] button {
background: hsl(0,0%,20%);
}

button:hover, button:focus {
box-shadow: 0px 0px 10px rgba(220,200,100,0.5) inset, var(--glassy);
cursor: pointer;
}

.pf2e.chat-card .card-footer span {
border-right: 1px groove #fff;
}

.pf2e.chat-card .card-buttons {
display: flex;
gap: 5px;
}

.message-content .chat-damage-buttons button.shield-block {
background-color: var(--paizo-blue-dark);
}

.message-content .chat-damage-buttons button.shield-block:hover {
background-color: var(--paizo-blue);
}

.message-content .chat-damage-buttons button.shield-block.shield-activated {
background-color: var(--paizo-blue-bright);
}

.message-content .chat-damage-buttons button.shield-block.shield-activated:hover {
background-color: var(--paizo-blue);
}

.pf2e.chat-card .card-buttons {
display: flex;
gap: 3px;
flex-direction: column;
margin:0px;
}

#chat-log hr {
margin-top: 2px;
border: none;
border-top: none;
border-bottom: 1px solid wheat;
margin-left: -10px;
margin-right: -10px;
margin-bottom: 1px;
}

/* .card-content p {
margin-top: 2px;
border: none;
border-top: none;
border-bottom: 1px solid wheat;
margin-left: -10px;
margin-right: -10px;
margin-bottom: 1px;
} */


.message-portrait {
border-radius: 50%;
box-shadow: var(--gold-and-glow);
}
1 change: 1 addition & 0 deletions styles/dice-tray.css
Original file line number Diff line number Diff line change
@@ -26,6 +26,7 @@
.dice-tray {
display: flex;
flex-direction: column;
padding: 2px;
}

#chat-controls .roll-type-select {
31 changes: 28 additions & 3 deletions styles/dorako-ui.css
Original file line number Diff line number Diff line change
@@ -9,6 +9,7 @@
--dorako-bg-glass: rgba(120, 120, 120, 0.20);
--dorako-bg-dark: rgba(20, 20, 20, 0.60);
--dorako-orange: rgba(255, 100, 0, 0.5);
/* --dorako-bg-current: var(--dorako-bg-glass); */
--dorako-bg-current: var(--dorako-bg-dark);

--blind-bg: #A57aA5;
@@ -47,6 +48,7 @@
--img-red: url(/systems/pf2e/assets/sheet/nav-item.webp);
--pf2e-nav-inactive: url(/systems/pf2e/assets/sheet/nav-item-inactive.webp);
--pf2e-sheets-bg: url(/systems/pf2e/assets/sheet/background.webp);
--bg-dark: url(/modules/pf2e-dorako-ui/img/background-dark.webp);

--dorako-text-shadow: 0px 0px 3px black;
--dorako-box-shadow: 0px 0px 3px black;
@@ -56,6 +58,10 @@

}

body {
text-rendering: geometricPrecision;
}




@@ -118,6 +124,20 @@ footer.sheet-footer.flexrow {
text-shadow: var(--dorako-text-shadow);
}

form .form-group label,
#client-settings section.content h2.module-header,
form .notes, form .hint,
#client-settings nav.tabs {
text-shadow: 0px 1px white;
}

form .notes, form .hint {
flex: 0 0 100%;
font-size: var(--font-size-12);
line-height: var(--line-height-16);
color: #646464;
margin: 0px;
}



@@ -128,9 +148,9 @@ form .form-group label {
}


#client-settings section.content h2.module-header {
/* #client-settings section.content h2.module-header {
margin: 5em 0 0 0;
}
} */


#chat-controls i.fas,
@@ -240,4 +260,9 @@ input[type=range] {
input[type=range]:focus::-ms-fill-upper {
background: #367ebd;
box-shadow: none !important;
} */
} */

.window-app {
box-shadow: var(--glassy) !important;
border-radius:5px !important;
}
4 changes: 2 additions & 2 deletions styles/hotbar.css
Original file line number Diff line number Diff line change
@@ -145,13 +145,13 @@
gap: 10px;
}

.sheet header.sheet-header img {
/* .sheet header.sheet-header img {
flex: 0 0 50px;
height: 50px;
margin-right: 0px;
box-shadow: var(--glassy);
background-color: var(--paizo-blue-dark);
}
} */

#hotbar .macro.active::after {
transition: box-shadow 0.5s ease-in-out;
7 changes: 7 additions & 0 deletions styles/sidebar.css
Original file line number Diff line number Diff line change
@@ -46,6 +46,10 @@
margin: none;
}

#sidebar-tabs > .item {
border: none;
}

#sidebar-tabs>.item.active {
box-shadow: none;
border: none;
@@ -92,6 +96,9 @@
background-color: rgba(200, 200, 200, 0.5);
box-shadow: var(--glassy);
overflow: visible;
margin-left: 2px;
margin-right: 2px;
width: -webkit-fill-available;
}

/* Scrollbar */

0 comments on commit ede4f36

Please sign in to comment.