0
0
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:
Víctor Losada Hernández
2023-12-23 12:40:56 +01:00
parent 985a9843f2
commit e2ac6c9b6b
3 changed files with 290 additions and 111 deletions

View File

@@ -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 @@
} }
} }
} }
} }

View File

@@ -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 *************/

View File

@@ -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;