mirror of
https://github.com/naturalcrit/homebrewery.git
synced 2026-01-06 18:42:40 +00:00
fonts as snippets
This commit is contained in:
@@ -1,172 +1,232 @@
|
|||||||
@import (less) './client/icons/customIcons.less';
|
@import (less) './client/icons/customIcons.less';
|
||||||
.snippetBar{
|
@import (less) '././././themes/fonts/5e/fonts.less';
|
||||||
@menuHeight : 25px;
|
|
||||||
position : relative;
|
.snippetBar {
|
||||||
height : @menuHeight;
|
@menuHeight : 25px;
|
||||||
background-color : #ddd;
|
position: relative;
|
||||||
.editors{
|
height: @menuHeight;
|
||||||
position : absolute;
|
background-color: #ddd;
|
||||||
display : flex;
|
|
||||||
top : 0px;
|
.editors {
|
||||||
right : 0px;
|
position: absolute;
|
||||||
height : @menuHeight;
|
display: flex;
|
||||||
justify-content : space-between;
|
top: 0px;
|
||||||
&>div{
|
right: 0px;
|
||||||
height : @menuHeight;
|
height: @menuHeight;
|
||||||
width : @menuHeight;
|
justify-content: space-between;
|
||||||
cursor : pointer;
|
|
||||||
line-height : @menuHeight;
|
&>div {
|
||||||
text-align : center;
|
height: @menuHeight;
|
||||||
&:hover,&.selected{
|
width: @menuHeight;
|
||||||
background-color : #999;
|
cursor: pointer;
|
||||||
|
line-height: @menuHeight;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&.selected {
|
||||||
|
background-color: #999;
|
||||||
}
|
}
|
||||||
&.text{
|
|
||||||
|
&.text {
|
||||||
.tooltipLeft('Brew Editor');
|
.tooltipLeft('Brew Editor');
|
||||||
}
|
}
|
||||||
&.style{
|
|
||||||
|
&.style {
|
||||||
.tooltipLeft('Style Editor');
|
.tooltipLeft('Style Editor');
|
||||||
}
|
}
|
||||||
&.meta{
|
|
||||||
|
&.meta {
|
||||||
.tooltipLeft('Properties');
|
.tooltipLeft('Properties');
|
||||||
}
|
}
|
||||||
&.undo{
|
|
||||||
|
&.undo {
|
||||||
.tooltipLeft('Undo');
|
.tooltipLeft('Undo');
|
||||||
font-size : 0.75em;
|
font-size: 0.75em;
|
||||||
color : grey;
|
color: grey;
|
||||||
&.active{
|
|
||||||
color : black;
|
&.active {
|
||||||
|
color: black;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.redo{
|
|
||||||
|
&.redo {
|
||||||
.tooltipLeft('Redo');
|
.tooltipLeft('Redo');
|
||||||
font-size : 0.75em;
|
font-size: 0.75em;
|
||||||
color : grey;
|
color: grey;
|
||||||
&.active{
|
|
||||||
color : black;
|
&.active {
|
||||||
|
color: black;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.foldAll{
|
|
||||||
|
&.foldAll {
|
||||||
.tooltipLeft('Fold All');
|
.tooltipLeft('Fold All');
|
||||||
font-size : 0.75em;
|
font-size: 0.75em;
|
||||||
color : grey;
|
color: grey;
|
||||||
&.active{
|
|
||||||
color : black;
|
&.active {
|
||||||
|
color: black;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.unfoldAll{
|
|
||||||
|
&.unfoldAll {
|
||||||
.tooltipLeft('Unfold All');
|
.tooltipLeft('Unfold All');
|
||||||
font-size : 0.75em;
|
font-size: 0.75em;
|
||||||
color : grey;
|
color: grey;
|
||||||
&.active{
|
|
||||||
color : black;
|
&.active {
|
||||||
|
color: black;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.editorTheme{
|
|
||||||
|
&.editorTheme {
|
||||||
.tooltipLeft('Editor Themes');
|
.tooltipLeft('Editor Themes');
|
||||||
font-size : 0.75em;
|
font-size: 0.75em;
|
||||||
color : black;
|
color: black;
|
||||||
&.active{
|
|
||||||
color : white;
|
&.active {
|
||||||
|
color: white;
|
||||||
background-color: black;
|
background-color: black;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.divider {
|
&.divider {
|
||||||
background: linear-gradient(#000, #000) no-repeat center/1px 100%;
|
background: linear-gradient(#000, #000) no-repeat center/1px 100%;
|
||||||
width: 5px;
|
width: 5px;
|
||||||
&:hover{
|
|
||||||
|
&:hover {
|
||||||
background-color: inherit;
|
background-color: inherit;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.themeSelector{
|
|
||||||
|
.themeSelector {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: -65px;
|
left: -65px;
|
||||||
top: 30px;
|
top: 30px;
|
||||||
z-index: 999;
|
z-index: 999;
|
||||||
width: 170px;
|
width: 170px;
|
||||||
background-color: black;
|
background-color: black;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.snippetBarButton{
|
|
||||||
height : @menuHeight;
|
.snippetBarButton {
|
||||||
line-height : @menuHeight;
|
height: @menuHeight;
|
||||||
display : inline-block;
|
line-height: @menuHeight;
|
||||||
padding : 0px 5px;
|
display: inline-block;
|
||||||
font-weight : 800;
|
padding: 0px 5px;
|
||||||
font-size : 0.625em;
|
font-weight: 800;
|
||||||
text-transform : uppercase;
|
font-size: 0.625em;
|
||||||
cursor : pointer;
|
text-transform: uppercase;
|
||||||
&:hover, &.selected{
|
cursor: pointer;
|
||||||
background-color : #999;
|
|
||||||
|
&:hover,
|
||||||
|
&.selected {
|
||||||
|
background-color: #999;
|
||||||
}
|
}
|
||||||
i{
|
|
||||||
vertical-align : middle;
|
i {
|
||||||
margin-right : 3px;
|
vertical-align: middle;
|
||||||
font-size : 1.4em;
|
margin-right: 3px;
|
||||||
|
font-size: 1.4em;
|
||||||
|
}
|
||||||
|
/* Fonts */
|
||||||
|
& i {
|
||||||
|
&.OpenSans+span {font-family: 'OpenSans';}
|
||||||
|
&.CodeBold+span {font-family: 'CodeBold';}
|
||||||
|
&.CodeLight+span {font-family: 'CodeLight';}
|
||||||
|
&.ScalySansRemake+span {font-family: 'ScalySansRemake';}
|
||||||
|
&.BookInsanityRemake+span {font-family: 'BookInsanityRemake';}
|
||||||
|
&.MrEavesRemake+span {font-family: 'MrEavesRemake';}
|
||||||
|
&.SolberaImitationRemake+span {font-family: 'SolberaImitationRemake';}
|
||||||
|
&.ScalySansSmallCapsRemake+span {font-family: 'ScalySansSmallCapsRemake';}
|
||||||
|
&.WalterTurncoat+span {font-family: 'WalterTurncoat';}
|
||||||
|
&.Lato+span {font-family: 'Lato';}
|
||||||
|
&.Courier+span {font-family: 'Courier';}
|
||||||
|
&.NodestoCapsCondensed+span {font-family: 'NodestoCapsCondensed';}
|
||||||
|
&.Overpass+span {font-family: 'Overpass';}
|
||||||
|
&.Davek+span {font-family: 'Davek';}
|
||||||
|
&.Iokharic+span {font-family: 'Iokharic';}
|
||||||
|
&.Rellanic+span {font-family: 'Rellanic';}
|
||||||
|
&.TimesNewRoman+span {font-family: 'Times New Roman';}
|
||||||
|
|
||||||
|
&:is(.OpenSans,.CodeBold,.CodeLight,.ScalySansRemake,.BookInsanityRemake,.MrEavesRemake,.SolberaImitationRemake,.ScalySansSmallCapsRemake,.WalterTurncoat,.Lato,.Courier,.NodestoCapsCondensed,.Overpass,.Davek,.Iokharic,.Rellanic,.TimesNewRoman) { font-size:12px}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.toggleMeta{
|
|
||||||
position : absolute;
|
.toggleMeta {
|
||||||
top : 0px;
|
position: absolute;
|
||||||
right : 0px;
|
top: 0px;
|
||||||
border-left : 1px solid black;
|
right: 0px;
|
||||||
|
border-left: 1px solid black;
|
||||||
.tooltipLeft("Edit Brew Properties");
|
.tooltipLeft("Edit Brew Properties");
|
||||||
}
|
}
|
||||||
.snippetGroup{
|
|
||||||
border-right : 1px solid black;
|
.snippetGroup {
|
||||||
&:hover{
|
border-right: 1px solid black;
|
||||||
&>.dropdown{
|
|
||||||
visibility : visible;
|
&:hover {
|
||||||
|
&>.dropdown {
|
||||||
|
visibility: visible;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.dropdown{
|
|
||||||
position : absolute;
|
.dropdown {
|
||||||
top : 100%;
|
position: absolute;
|
||||||
visibility : hidden;
|
top: 100%;
|
||||||
z-index : 1000;
|
visibility: hidden;
|
||||||
margin-left : -5px;
|
z-index: 1000;
|
||||||
padding : 0px;
|
margin-left: -5px;
|
||||||
background-color : #ddd;
|
padding: 0px;
|
||||||
.snippet{
|
background-color: #ddd;
|
||||||
|
|
||||||
|
.snippet {
|
||||||
position: relative;
|
position: relative;
|
||||||
.animate(background-color);
|
.animate(background-color);
|
||||||
display : flex;
|
display: flex;
|
||||||
align-items : center;
|
align-items: center;
|
||||||
min-width : max-content;
|
min-width: max-content;
|
||||||
padding : 5px;
|
padding: 5px;
|
||||||
cursor : pointer;
|
cursor: pointer;
|
||||||
font-size : 10px;
|
font-size: 10px;
|
||||||
i{
|
|
||||||
margin-right : 8px;
|
i {
|
||||||
font-size : 1.2em;
|
margin-right: 8px;
|
||||||
height : 1.2em;
|
font-size: 1.2em;
|
||||||
&~i{
|
height: 1.2em;
|
||||||
|
|
||||||
|
&~i {
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
margin-left: 5px;
|
margin-left: 5px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.name {
|
.name {
|
||||||
margin-right : auto;
|
margin-right: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.beta {
|
.beta {
|
||||||
color : white;
|
color: white;
|
||||||
padding : 4px 6px;
|
padding: 4px 6px;
|
||||||
line-height : 1em;
|
line-height: 1em;
|
||||||
margin-left : 5px;
|
margin-left: 5px;
|
||||||
align-self : center;
|
align-self: center;
|
||||||
background : grey;
|
background: grey;
|
||||||
border-radius : 12px;
|
border-radius: 12px;
|
||||||
font-family : monospace;
|
font-family: monospace;
|
||||||
}
|
}
|
||||||
&:hover{
|
|
||||||
background-color : #999;
|
&:hover {
|
||||||
&>.dropdown{
|
background-color: #999;
|
||||||
visibility : visible;
|
|
||||||
|
&>.dropdown {
|
||||||
|
visibility: visible;
|
||||||
|
|
||||||
&.side {
|
&.side {
|
||||||
left: 100%;
|
left: 100%;
|
||||||
top: 0%;
|
top: 0%;
|
||||||
margin-left:0;
|
margin-left: 0;
|
||||||
box-shadow: -1px 1px 2px 0px #999;
|
box-shadow: -1px 1px 2px 0px #999;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -174,4 +234,4 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -304,6 +304,104 @@ module.exports = [
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
/**************** FONTS *************/
|
||||||
|
{
|
||||||
|
groupName : 'Fonts',
|
||||||
|
icon : 'fas fa-keyboard',
|
||||||
|
view : 'text',
|
||||||
|
snippets : [
|
||||||
|
{
|
||||||
|
name : 'Open Sans',
|
||||||
|
icon : 'OpenSans',
|
||||||
|
gen : dedent`{{OpenSans Dummy Text}}`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name : 'Code Bold',
|
||||||
|
icon : 'CodeBold',
|
||||||
|
gen : dedent`{{CodeBold Dummy Text}}`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name : 'Code Light',
|
||||||
|
icon : 'CodeLight',
|
||||||
|
gen : dedent`{{CodeLight Dummy Text}}`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name : 'Scaly Sans Remake',
|
||||||
|
icon : 'ScalySansRemake',
|
||||||
|
gen : dedent`{{ScalySansRemake Dummy Text}}`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name : 'Book Insanity Remake',
|
||||||
|
icon : 'BookInsanityRemake',
|
||||||
|
gen : dedent`{{BookInsanityRemake Dummy Text}}`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name : 'Mr Eaves Remake',
|
||||||
|
icon : 'MrEavesRemake',
|
||||||
|
gen : dedent`{{MrEavesRemake Dummy Text}}`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name : 'Mr Eaves Remake',
|
||||||
|
icon : 'MrEavesRemake',
|
||||||
|
gen : dedent`{{MrEavesRemake Dummy Text}}`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Solbera Imitation Remake',
|
||||||
|
icon: 'SolberaImitationRemake',
|
||||||
|
gen: dedent`{{SolberaImitationRemake Dummy Text}}`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Scaly Sans Small Caps Remake',
|
||||||
|
icon: 'ScalySansSmallCapsRemake',
|
||||||
|
gen: dedent`{{ScalySansSmallCapsRemake Dummy Text}}`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Walter Turncoat',
|
||||||
|
icon: 'WalterTurncoat',
|
||||||
|
gen: dedent`{{WalterTurncoat Dummy Text}}`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Lato',
|
||||||
|
icon: 'Lato',
|
||||||
|
gen: dedent`{{Lato Dummy Text}}`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Courier',
|
||||||
|
icon: 'Courier',
|
||||||
|
gen: dedent`{{Courier Dummy Text}}`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Nodesto Caps Condensed',
|
||||||
|
icon: 'NodestoCapsCondensed',
|
||||||
|
gen: dedent`{{NodestoCapsCondensed Dummy Text}}`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Overpass',
|
||||||
|
icon: 'Overpass',
|
||||||
|
gen: dedent`{{Overpass Dummy Text}}`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Davek',
|
||||||
|
icon: 'Davek',
|
||||||
|
gen: dedent`{{Davek Dummy Text}}`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Iokharic',
|
||||||
|
icon: 'Iokharic',
|
||||||
|
gen: dedent`{{Iokharic Dummy Text}}`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Rellanic',
|
||||||
|
icon: 'Rellanic',
|
||||||
|
gen: dedent`{{Rellanic Dummy Text}}`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Times New Roman',
|
||||||
|
icon: 'TimesNewRoman',
|
||||||
|
gen: dedent`{{TimesNewRoman Dummy Text}}`
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
|
||||||
/**************** PAGE *************/
|
/**************** PAGE *************/
|
||||||
|
|
||||||
|
|||||||
@@ -152,6 +152,27 @@ body { counter-reset : phb-page-numbers; }
|
|||||||
break-inside : avoid;
|
break-inside : avoid;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Fonts */
|
||||||
|
|
||||||
|
.OpenSans { font-family: 'OpenSans'; }
|
||||||
|
.CodeBold { font-family: 'CodeBold';}
|
||||||
|
.CodeLight { font-family: 'CodeLight';}
|
||||||
|
.ScalySansRemake { font-family: 'ScalySansRemake';}
|
||||||
|
.BookInsanityRemake { font-family: 'BookInsanityRemake';}
|
||||||
|
.MrEavesRemake { font-family: 'MrEavesRemake';}
|
||||||
|
.SolberaImitationRemake { font-family: 'SolberaImitationRemake';}
|
||||||
|
.ScalySansSmallCapsRemake { font-family: 'ScalySansSmallCapsRemake';}
|
||||||
|
.WalterTurncoat { font-family: 'WalterTurncoat';}
|
||||||
|
.Lato { font-family: 'Lato';}
|
||||||
|
.Courier { font-family: 'Courier';}
|
||||||
|
.NodestoCapsCondensed { font-family: 'NodestoCapsCondensed';}
|
||||||
|
.Overpass { font-family: 'Overpass';}
|
||||||
|
.Davek { font-family: 'Davek';}
|
||||||
|
.Iokharic { font-family: 'Iokharic';}
|
||||||
|
.Rellanic { font-family: 'Rellanic';}
|
||||||
|
.TimesNewRoman { font-family: 'Times New Roman';}
|
||||||
|
|
||||||
|
|
||||||
/* Watermark */
|
/* Watermark */
|
||||||
.watermark {
|
.watermark {
|
||||||
position : absolute;
|
position : absolute;
|
||||||
|
|||||||
Reference in New Issue
Block a user