mirror of
https://github.com/naturalcrit/homebrewery.git
synced 2026-01-19 18:32:39 +00:00
Disable @layers for now
@Layers have too many conflicts with custom CSS styling. Delay until V4 renderer.
This commit is contained in:
@@ -134,7 +134,8 @@ const BrewRenderer = createClass({
|
||||
|
||||
renderStyle : function() {
|
||||
if(!this.props.style) return;
|
||||
return <div style={{ display: 'none' }} dangerouslySetInnerHTML={{ __html: `<style>@layer styleTab {\n${this.props.style}\n} </style>` }} />;
|
||||
//return <div style={{ display: 'none' }} dangerouslySetInnerHTML={{ __html: `<style>@layer styleTab {\n${this.props.style}\n} </style>` }} />;
|
||||
return <div style={{ display: 'none' }} dangerouslySetInnerHTML={{ __html: `<style>\n${this.props.style}\n</style>` }} />;
|
||||
},
|
||||
|
||||
renderPage : function(pageText, index){
|
||||
|
||||
@@ -60,7 +60,8 @@ const PrintPage = createClass({
|
||||
|
||||
renderStyle : function() {
|
||||
if(!this.state.brew.style) return;
|
||||
return <div style={{ display: 'none' }} dangerouslySetInnerHTML={{ __html: `<style>@layer styleTab {\n${this.state.brew.style}\n} </style>` }} />;
|
||||
//return <div style={{ display: 'none' }} dangerouslySetInnerHTML={{ __html: `<style>@layer styleTab {\n${this.state.brew.style}\n} </style>` }} />;
|
||||
return <div style={{ display: 'none' }} dangerouslySetInnerHTML={{ __html: `<style>\n${this.state.brew.style}\n</style>` }} />;
|
||||
},
|
||||
|
||||
renderPages : function(){
|
||||
|
||||
@@ -1,23 +1,22 @@
|
||||
@layer Legacy_5ePHB {
|
||||
@import (less) './themes/fonts/5e legacy/fonts.less';
|
||||
@import (less) './themes/assets/assets.less';
|
||||
@import (less) './themes/phb.depricated.less';
|
||||
//Colors
|
||||
@background : #EEE5CE; // Light parchment
|
||||
@noteGreen : #e0e5c1; // Pastel green
|
||||
@headerUnderline : #c9ad6a; // Gold
|
||||
@horizontalRule : #9c2b1b; // Maroon
|
||||
@headerText : #58180D; // Dark maroon
|
||||
@monsterStatBackground : #FDF1DC; // Lighter parchment
|
||||
@captionText : #766649; // Brown
|
||||
@page { margin: 0; }
|
||||
body {
|
||||
@import (less) './themes/fonts/5e legacy/fonts.less';
|
||||
@import (less) './themes/assets/assets.less';
|
||||
@import (less) './themes/phb.depricated.less';
|
||||
//Colors
|
||||
@background : #EEE5CE; // Light parchment
|
||||
@noteGreen : #e0e5c1; // Pastel green
|
||||
@headerUnderline : #c9ad6a; // Gold
|
||||
@horizontalRule : #9c2b1b; // Maroon
|
||||
@headerText : #58180D; // Dark maroon
|
||||
@monsterStatBackground : #FDF1DC; // Lighter parchment
|
||||
@captionText : #766649; // Brown
|
||||
@page { margin: 0; }
|
||||
body {
|
||||
counter-reset : phb-page-numbers;
|
||||
}
|
||||
*{
|
||||
}
|
||||
*{
|
||||
-webkit-print-color-adjust : exact;
|
||||
}
|
||||
.useSansSerif(){
|
||||
}
|
||||
.useSansSerif(){
|
||||
font-family : ScalySans;
|
||||
em{
|
||||
font-family : ScalySans;
|
||||
@@ -28,8 +27,8 @@
|
||||
font-weight : 800;
|
||||
letter-spacing : -0.02em;
|
||||
}
|
||||
}
|
||||
.useColumns(@multiplier : 1){
|
||||
}
|
||||
.useColumns(@multiplier : 1){
|
||||
column-count : 2;
|
||||
column-fill : auto;
|
||||
column-gap : 1cm;
|
||||
@@ -40,8 +39,8 @@
|
||||
-moz-column-width : 8cm * @multiplier;
|
||||
-webkit-column-gap : 1cm;
|
||||
-moz-column-gap : 1cm;
|
||||
}
|
||||
.phb{
|
||||
}
|
||||
.phb{
|
||||
.useColumns();
|
||||
counter-increment : phb-page-numbers;
|
||||
position : relative;
|
||||
@@ -358,11 +357,11 @@
|
||||
page-break-inside : avoid;
|
||||
break-inside : avoid;
|
||||
}
|
||||
}
|
||||
//*****************************
|
||||
// * SPELL LIST
|
||||
// *****************************/
|
||||
.phb .spellList{
|
||||
}
|
||||
//*****************************
|
||||
// * SPELL LIST
|
||||
// *****************************/
|
||||
.phb .spellList{
|
||||
.useSansSerif();
|
||||
column-count : 4;
|
||||
column-span : all;
|
||||
@@ -384,19 +383,19 @@
|
||||
page-break-inside : auto;
|
||||
break-inside : auto;
|
||||
}
|
||||
}
|
||||
//*****************************
|
||||
// * WIDE
|
||||
// *****************************/
|
||||
.phb .wide{
|
||||
}
|
||||
//*****************************
|
||||
// * WIDE
|
||||
// *****************************/
|
||||
.phb .wide{
|
||||
column-span : all;
|
||||
-webkit-column-span : all;
|
||||
-moz-column-span : all;
|
||||
}
|
||||
//*****************************
|
||||
// * CLASS TABLE
|
||||
// *****************************/
|
||||
.phb .classTable{
|
||||
}
|
||||
//*****************************
|
||||
// * CLASS TABLE
|
||||
// *****************************/
|
||||
.phb .classTable{
|
||||
margin-top : 25px;
|
||||
margin-bottom : 40px;
|
||||
border-collapse : separate;
|
||||
@@ -411,11 +410,11 @@
|
||||
h5{
|
||||
margin-bottom : 10px;
|
||||
}
|
||||
}
|
||||
//************************************
|
||||
// * DESCRIPTIVE TEXT BOX
|
||||
// ************************************/
|
||||
.phb .descriptive{
|
||||
}
|
||||
//************************************
|
||||
// * DESCRIPTIVE TEXT BOX
|
||||
// ************************************/
|
||||
.phb .descriptive{
|
||||
margin-bottom : 1em;
|
||||
background-color : #faf7ea;
|
||||
font-family : ScalySans;
|
||||
@@ -441,15 +440,15 @@
|
||||
font-weight : 800;
|
||||
letter-spacing : -0.02em;
|
||||
}
|
||||
}
|
||||
.phb pre+.descriptive{
|
||||
}
|
||||
.phb pre+.descriptive{
|
||||
margin-top : 8px;
|
||||
}
|
||||
}
|
||||
|
||||
//*****************************
|
||||
// * ARTIST CREDIT BLOCK
|
||||
// *****************************/
|
||||
.phb {
|
||||
//*****************************
|
||||
// * ARTIST CREDIT BLOCK
|
||||
// *****************************/
|
||||
.phb {
|
||||
.artist {
|
||||
position : absolute;
|
||||
text-align : center;
|
||||
@@ -473,11 +472,11 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
//*****************************
|
||||
// * TABLE OF CONTENTS
|
||||
// *****************************/
|
||||
.phb .toc{
|
||||
}
|
||||
//*****************************
|
||||
// * TABLE OF CONTENTS
|
||||
// *****************************/
|
||||
.phb .toc{
|
||||
-webkit-column-break-inside : avoid;
|
||||
page-break-inside : avoid;
|
||||
break-inside : avoid;
|
||||
@@ -495,5 +494,4 @@
|
||||
&>ul>li{
|
||||
margin-bottom : 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,11 +1,10 @@
|
||||
@layer V3_5eDMG {
|
||||
:root {
|
||||
:root {
|
||||
//Colors
|
||||
--HB_Color_Accent : #EBCEC3; // Salmon
|
||||
--HB_Color_Footnotes : #5C5C5C; // Dark gray
|
||||
}
|
||||
}
|
||||
|
||||
.page {
|
||||
.page {
|
||||
background-image : url(/assets/DMG_background.png);
|
||||
background-size : cover;
|
||||
|
||||
@@ -17,5 +16,4 @@
|
||||
.footnote {
|
||||
bottom : 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
@layer V3_5ePHB {
|
||||
@import (less) './themes/fonts/5e/fonts.less';
|
||||
@import (less) './themes/assets/assets.less';
|
||||
@import (less) './themes/fonts/5e/fonts.less';
|
||||
@import (less) './themes/assets/assets.less';
|
||||
|
||||
:root {
|
||||
:root {
|
||||
//Colors
|
||||
--HB_Color_Background : #EEE5CE; // Light parchment
|
||||
--HB_Color_Accent : #E0E5C1; // Pastel green
|
||||
@@ -13,16 +12,16 @@
|
||||
--HB_Color_CaptionText : #766649; // Brown
|
||||
--HB_Color_WatercolorStain : #BBAD82; // Light brown
|
||||
--HB_Color_Footnotes : #C9AD6A; // Gold
|
||||
}
|
||||
}
|
||||
|
||||
@page { margin: 0; }
|
||||
body {
|
||||
@page { margin: 0; }
|
||||
body {
|
||||
counter-reset : phb-page-numbers;
|
||||
}
|
||||
*{
|
||||
}
|
||||
*{
|
||||
-webkit-print-color-adjust : exact;
|
||||
}
|
||||
.useSansSerif(){
|
||||
}
|
||||
.useSansSerif(){
|
||||
font-family : ScalySansRemake;
|
||||
font-size : 0.318cm;
|
||||
line-height : 1.2em;
|
||||
@@ -42,8 +41,8 @@
|
||||
h5 + * {
|
||||
margin-top : 0.1cm;
|
||||
}
|
||||
}
|
||||
.useColumns(@multiplier : 1, @fillMode: balance){
|
||||
}
|
||||
.useColumns(@multiplier : 1, @fillMode: balance){
|
||||
column-count : 2;
|
||||
column-fill : @fillMode;
|
||||
column-gap : 0.9cm;
|
||||
@@ -54,14 +53,14 @@
|
||||
-moz-column-width : 8cm * @multiplier;
|
||||
-webkit-column-gap : 0.9cm;
|
||||
-moz-column-gap : 0.9cm;
|
||||
}
|
||||
.columnWrapper{
|
||||
}
|
||||
.columnWrapper{
|
||||
max-height : 100%;
|
||||
column-span : all;
|
||||
columns : inherit;
|
||||
column-gap : inherit;
|
||||
}
|
||||
.page{
|
||||
}
|
||||
.page{
|
||||
.useColumns();
|
||||
counter-increment : phb-page-numbers;
|
||||
position : relative;
|
||||
@@ -78,12 +77,12 @@
|
||||
text-rendering : optimizeLegibility;
|
||||
page-break-before : always;
|
||||
page-break-after : always;
|
||||
}
|
||||
}
|
||||
//*****************************
|
||||
// * BASE
|
||||
// *****************************/
|
||||
|
||||
.page{
|
||||
.page{
|
||||
p{
|
||||
overflow-wrap : break-word; //TODO: MAKE ALL MARGINS TOP-ONLY. USE * + * STYLE SELECTORS
|
||||
display : block;
|
||||
@@ -593,11 +592,11 @@
|
||||
page-break-inside : avoid;
|
||||
break-inside : avoid;
|
||||
}
|
||||
}
|
||||
//*****************************
|
||||
// * SPELL LIST
|
||||
// *****************************/
|
||||
.page .spellList{
|
||||
}
|
||||
//*****************************
|
||||
// * SPELL LIST
|
||||
// *****************************/
|
||||
.page .spellList{
|
||||
.useSansSerif();
|
||||
column-count : 2;
|
||||
ul+h5{
|
||||
@@ -619,12 +618,12 @@
|
||||
&.wide{
|
||||
column-count : 4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//*****************************
|
||||
// * CLASS TABLE
|
||||
// *****************************/
|
||||
.page .classTable{
|
||||
//*****************************
|
||||
// * CLASS TABLE
|
||||
// *****************************/
|
||||
.page .classTable{
|
||||
th[colspan]:not([rowspan]) {
|
||||
white-space : nowrap;
|
||||
}
|
||||
@@ -677,11 +676,11 @@
|
||||
h5 + table{
|
||||
margin-top : 0.2cm;
|
||||
}
|
||||
}
|
||||
//*****************************
|
||||
// * TABLE OF CONTENTS
|
||||
// *****************************/
|
||||
.page {
|
||||
}
|
||||
//*****************************
|
||||
// * TABLE OF CONTENTS
|
||||
// *****************************/
|
||||
.page {
|
||||
&:has(.toc):after {
|
||||
display: none;
|
||||
}
|
||||
@@ -753,12 +752,12 @@
|
||||
.useColumns(0.96, @fillMode: balance);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//*****************************
|
||||
// * DEFINITION LISTS
|
||||
// *****************************/
|
||||
.page {
|
||||
//*****************************
|
||||
// * DEFINITION LISTS
|
||||
// *****************************/
|
||||
.page {
|
||||
dl {
|
||||
line-height : 1.25em;
|
||||
padding-left : 1em;
|
||||
@@ -783,16 +782,15 @@
|
||||
margin-left : 0px;
|
||||
text-indent : 0px;
|
||||
}
|
||||
}
|
||||
|
||||
//*****************************
|
||||
// * WIDE
|
||||
// *****************************/
|
||||
.page .wide{
|
||||
margin-bottom : 0.325cm;
|
||||
}
|
||||
|
||||
.page h1 + *{
|
||||
margin-top : 0;
|
||||
}
|
||||
}
|
||||
|
||||
//*****************************
|
||||
// * WIDE
|
||||
// *****************************/
|
||||
.page .wide{
|
||||
margin-bottom : 0.325cm;
|
||||
}
|
||||
|
||||
.page h1 + *{
|
||||
margin-top : 0;
|
||||
}
|
||||
|
||||
@@ -1,32 +1,31 @@
|
||||
@layer V3_Blank {
|
||||
@import (less) './themes/fonts/5e/fonts.less';
|
||||
@import (less) './themes/assets/assets.less';
|
||||
@import (less) './themes/fonts/5e/fonts.less';
|
||||
@import (less) './themes/assets/assets.less';
|
||||
|
||||
:root {
|
||||
:root {
|
||||
//Colors
|
||||
--HB_Color_Background : #FFFFFF; // White
|
||||
--HB_Color_WatercolorStain : #000000; // Black
|
||||
}
|
||||
}
|
||||
|
||||
@page { margin: 0; }
|
||||
body {
|
||||
@page { margin: 0; }
|
||||
body {
|
||||
counter-reset : phb-page-numbers;
|
||||
}
|
||||
*{
|
||||
}
|
||||
*{
|
||||
-webkit-print-color-adjust : exact;
|
||||
}
|
||||
}
|
||||
|
||||
.useColumns(@multiplier : 1, @fillMode: balance){
|
||||
.useColumns(@multiplier : 1, @fillMode: balance){
|
||||
column-fill : @fillMode;
|
||||
column-count : 2;
|
||||
}
|
||||
.columnWrapper{
|
||||
}
|
||||
.columnWrapper{
|
||||
max-height : 100%;
|
||||
column-span : all;
|
||||
columns : inherit;
|
||||
column-gap : inherit;
|
||||
}
|
||||
.page{
|
||||
}
|
||||
.page{
|
||||
.useColumns();
|
||||
height : 279.4mm;
|
||||
width : 215.9mm;
|
||||
@@ -41,11 +40,11 @@
|
||||
page-break-before : always;
|
||||
page-break-after : always;
|
||||
contain : size;
|
||||
}
|
||||
}
|
||||
//*****************************
|
||||
// * BASE
|
||||
// *****************************/
|
||||
.page{
|
||||
.page{
|
||||
p{
|
||||
overflow-wrap : break-word;
|
||||
display : block;
|
||||
@@ -212,12 +211,12 @@
|
||||
page-break-inside : avoid;
|
||||
break-inside : avoid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//*****************************
|
||||
// * MUSTACHE DIVS/SPANS
|
||||
// *****************************/
|
||||
.page {
|
||||
//*****************************
|
||||
// * MUSTACHE DIVS/SPANS
|
||||
// *****************************/
|
||||
.page {
|
||||
.block {
|
||||
break-inside : avoid;
|
||||
display : inline-block;
|
||||
@@ -227,12 +226,12 @@
|
||||
display : inline-block;
|
||||
text-indent : initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//*****************************
|
||||
// * DEFINITION LISTS
|
||||
// *****************************/
|
||||
.page {
|
||||
//*****************************
|
||||
// * DEFINITION LISTS
|
||||
// *****************************/
|
||||
.page {
|
||||
dl {
|
||||
padding-left : 1em;
|
||||
white-space : pre-line;
|
||||
@@ -247,12 +246,12 @@
|
||||
margin-left : 0;
|
||||
text-indent : 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//*****************************
|
||||
// * BLANK LINE
|
||||
// *****************************/
|
||||
.page {
|
||||
//*****************************
|
||||
// * BLANK LINE
|
||||
// *****************************/
|
||||
.page {
|
||||
.blank {
|
||||
height : 1em;
|
||||
margin-top : 0;
|
||||
@@ -260,12 +259,12 @@
|
||||
margin-top : 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//*****************************
|
||||
// * WIDE
|
||||
// *****************************/
|
||||
.page {
|
||||
//*****************************
|
||||
// * WIDE
|
||||
// *****************************/
|
||||
.page {
|
||||
.wide{
|
||||
column-span : all;
|
||||
display : block;
|
||||
@@ -274,5 +273,4 @@
|
||||
margin-top : 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
@layer V3_Journal {
|
||||
@import (less) './themes/fonts/Journal/fonts.less';
|
||||
@import (less) './themes/assets/assets.less';
|
||||
@import (less) './themes/fonts/Journal/fonts.less';
|
||||
@import (less) './themes/assets/assets.less';
|
||||
|
||||
:root {
|
||||
:root {
|
||||
//Colors
|
||||
--HB_Color_Background : unset; // Light parchment
|
||||
--HB_Color_Text : #412121; // Dark Maroon Brown
|
||||
@@ -10,9 +9,9 @@
|
||||
--HB_Color_HeaderText : #58180D; // Dark Maroon
|
||||
--HB_Color_CaptionText : #766649; // Brown
|
||||
--HB_Color_WatercolorStain : #BBAD82; // Light brown
|
||||
}
|
||||
}
|
||||
|
||||
.useSansSerif(){
|
||||
.useSansSerif(){
|
||||
font-family : PermanentMarker;
|
||||
font-size : 0.3cm;
|
||||
line-height : 1.2em;
|
||||
@@ -33,12 +32,12 @@
|
||||
h5 + * {
|
||||
margin-top : 0.1cm;
|
||||
}
|
||||
}
|
||||
.useColumns(@multiplier : 1, @fillMode: balance){
|
||||
}
|
||||
.useColumns(@multiplier : 1, @fillMode: balance){
|
||||
column-gap : 0.5cm;
|
||||
}
|
||||
}
|
||||
|
||||
.page{
|
||||
.page{
|
||||
background-size : 200% 100%;
|
||||
background-repeat : no-repeat;
|
||||
filter : drop-shadow(1px 4px 14px black);
|
||||
@@ -58,12 +57,12 @@
|
||||
& .columnWrapper {
|
||||
//transform: rotate(-0.5deg); // Breaks absolute positioning of images/footers. Wait for Chrome fix
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//*****************************
|
||||
// * BASE
|
||||
// *****************************/
|
||||
.page{
|
||||
.page{
|
||||
color : var(--HB_Color_Text);
|
||||
font-family : ReenieBeanie;
|
||||
font-size : 0.53cm;
|
||||
@@ -444,12 +443,12 @@
|
||||
a:hover {
|
||||
color:red;
|
||||
}
|
||||
}
|
||||
//*****************************
|
||||
// * SPELL LIST
|
||||
// *****************************/
|
||||
}
|
||||
//*****************************
|
||||
// * SPELL LIST
|
||||
// *****************************/
|
||||
|
||||
.page .spellList{
|
||||
.page .spellList{
|
||||
.useSansSerif();
|
||||
font-family : PermanentMarker;
|
||||
column-count : 2;
|
||||
@@ -468,23 +467,23 @@
|
||||
&.wide{
|
||||
column-count : 4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//*****************************
|
||||
// * CLASS TABLE
|
||||
// *****************************/
|
||||
.page .classTable{
|
||||
//*****************************
|
||||
// * CLASS TABLE
|
||||
// *****************************/
|
||||
.page .classTable{
|
||||
th[colspan]:not([rowspan]) {
|
||||
white-space : nowrap;
|
||||
}
|
||||
h5 + table{
|
||||
margin-top : 0.2cm;
|
||||
}
|
||||
}
|
||||
//*****************************
|
||||
// * TABLE OF CONTENTS
|
||||
// *****************************/
|
||||
.page .toc{
|
||||
}
|
||||
//*****************************
|
||||
// * TABLE OF CONTENTS
|
||||
// *****************************/
|
||||
.page .toc{
|
||||
-webkit-column-break-inside : avoid;
|
||||
page-break-inside : avoid;
|
||||
break-inside : avoid;
|
||||
@@ -550,12 +549,11 @@
|
||||
&.wide{
|
||||
.useColumns(0.96, @fillMode: balance);
|
||||
}
|
||||
}
|
||||
|
||||
//*****************************
|
||||
// * WIDE
|
||||
// *****************************/
|
||||
.page .wide {
|
||||
margin-bottom : 0.45cm;
|
||||
}
|
||||
}
|
||||
|
||||
//*****************************
|
||||
// * WIDE
|
||||
// *****************************/
|
||||
.page .wide {
|
||||
margin-bottom : 0.45cm;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user