mirror of
https://github.com/naturalcrit/homebrewery.git
synced 2025-12-27 18:02:42 +00:00
fonts as snippets
This commit is contained in:
Víctor Losada Hernández
@@ -1,172 +1,232 @@
|
||||
@import (less) './client/icons/customIcons.less';
|
||||
.snippetBar{
|
||||
@menuHeight : 25px;
|
||||
position : relative;
|
||||
height : @menuHeight;
|
||||
background-color : #ddd;
|
||||
.editors{
|
||||
position : absolute;
|
||||
display : flex;
|
||||
top : 0px;
|
||||
right : 0px;
|
||||
height : @menuHeight;
|
||||
justify-content : space-between;
|
||||
&>div{
|
||||
height : @menuHeight;
|
||||
width : @menuHeight;
|
||||
cursor : pointer;
|
||||
line-height : @menuHeight;
|
||||
text-align : center;
|
||||
&:hover,&.selected{
|
||||
background-color : #999;
|
||||
@import (less) '././././themes/fonts/5e/fonts.less';
|
||||
|
||||
.snippetBar {
|
||||
@menuHeight : 25px;
|
||||
position: relative;
|
||||
height: @menuHeight;
|
||||
background-color: #ddd;
|
||||
|
||||
.editors {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
height: @menuHeight;
|
||||
justify-content: space-between;
|
||||
|
||||
&>div {
|
||||
height: @menuHeight;
|
||||
width: @menuHeight;
|
||||
cursor: pointer;
|
||||
line-height: @menuHeight;
|
||||
text-align: center;
|
||||
|
||||
&:hover,
|
||||
&.selected {
|
||||
background-color: #999;
|
||||
}
|
||||
&.text{
|
||||
|
||||
&.text {
|
||||
.tooltipLeft('Brew Editor');
|
||||
}
|
||||
&.style{
|
||||
|
||||
&.style {
|
||||
.tooltipLeft('Style Editor');
|
||||
}
|
||||
&.meta{
|
||||
|
||||
&.meta {
|
||||
.tooltipLeft('Properties');
|
||||
}
|
||||
&.undo{
|
||||
|
||||
&.undo {
|
||||
.tooltipLeft('Undo');
|
||||
font-size : 0.75em;
|
||||
color : grey;
|
||||
&.active{
|
||||
color : black;
|
||||
font-size: 0.75em;
|
||||
color: grey;
|
||||
|
||||
&.active {
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
&.redo{
|
||||
|
||||
&.redo {
|
||||
.tooltipLeft('Redo');
|
||||
font-size : 0.75em;
|
||||
color : grey;
|
||||
&.active{
|
||||
color : black;
|
||||
font-size: 0.75em;
|
||||
color: grey;
|
||||
|
||||
&.active {
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
&.foldAll{
|
||||
|
||||
&.foldAll {
|
||||
.tooltipLeft('Fold All');
|
||||
font-size : 0.75em;
|
||||
color : grey;
|
||||
&.active{
|
||||
color : black;
|
||||
font-size: 0.75em;
|
||||
color: grey;
|
||||
|
||||
&.active {
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
&.unfoldAll{
|
||||
|
||||
&.unfoldAll {
|
||||
.tooltipLeft('Unfold All');
|
||||
font-size : 0.75em;
|
||||
color : grey;
|
||||
&.active{
|
||||
color : black;
|
||||
font-size: 0.75em;
|
||||
color: grey;
|
||||
|
||||
&.active {
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
&.editorTheme{
|
||||
|
||||
&.editorTheme {
|
||||
.tooltipLeft('Editor Themes');
|
||||
font-size : 0.75em;
|
||||
color : black;
|
||||
&.active{
|
||||
color : white;
|
||||
font-size: 0.75em;
|
||||
color: black;
|
||||
|
||||
&.active {
|
||||
color: white;
|
||||
background-color: black;
|
||||
}
|
||||
}
|
||||
|
||||
&.divider {
|
||||
background: linear-gradient(#000, #000) no-repeat center/1px 100%;
|
||||
width: 5px;
|
||||
&:hover{
|
||||
|
||||
&:hover {
|
||||
background-color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
.themeSelector{
|
||||
|
||||
.themeSelector {
|
||||
position: absolute;
|
||||
left: -65px;
|
||||
top: 30px;
|
||||
z-index: 999;
|
||||
width: 170px;
|
||||
background-color: black;
|
||||
border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
.snippetBarButton{
|
||||
height : @menuHeight;
|
||||
line-height : @menuHeight;
|
||||
display : inline-block;
|
||||
padding : 0px 5px;
|
||||
font-weight : 800;
|
||||
font-size : 0.625em;
|
||||
text-transform : uppercase;
|
||||
cursor : pointer;
|
||||
&:hover, &.selected{
|
||||
background-color : #999;
|
||||
|
||||
.snippetBarButton {
|
||||
height: @menuHeight;
|
||||
line-height: @menuHeight;
|
||||
display: inline-block;
|
||||
padding: 0px 5px;
|
||||
font-weight: 800;
|
||||
font-size: 0.625em;
|
||||
text-transform: uppercase;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover,
|
||||
&.selected {
|
||||
background-color: #999;
|
||||
}
|
||||
i{
|
||||
vertical-align : middle;
|
||||
margin-right : 3px;
|
||||
font-size : 1.4em;
|
||||
|
||||
i {
|
||||
vertical-align: middle;
|
||||
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;
|
||||
top : 0px;
|
||||
right : 0px;
|
||||
border-left : 1px solid black;
|
||||
|
||||
.toggleMeta {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
border-left: 1px solid black;
|
||||
.tooltipLeft("Edit Brew Properties");
|
||||
}
|
||||
.snippetGroup{
|
||||
border-right : 1px solid black;
|
||||
&:hover{
|
||||
&>.dropdown{
|
||||
visibility : visible;
|
||||
|
||||
.snippetGroup {
|
||||
border-right: 1px solid black;
|
||||
|
||||
&:hover {
|
||||
&>.dropdown {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
.dropdown{
|
||||
position : absolute;
|
||||
top : 100%;
|
||||
visibility : hidden;
|
||||
z-index : 1000;
|
||||
margin-left : -5px;
|
||||
padding : 0px;
|
||||
background-color : #ddd;
|
||||
.snippet{
|
||||
|
||||
.dropdown {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
visibility: hidden;
|
||||
z-index: 1000;
|
||||
margin-left: -5px;
|
||||
padding: 0px;
|
||||
background-color: #ddd;
|
||||
|
||||
.snippet {
|
||||
position: relative;
|
||||
.animate(background-color);
|
||||
display : flex;
|
||||
align-items : center;
|
||||
min-width : max-content;
|
||||
padding : 5px;
|
||||
cursor : pointer;
|
||||
font-size : 10px;
|
||||
i{
|
||||
margin-right : 8px;
|
||||
font-size : 1.2em;
|
||||
height : 1.2em;
|
||||
&~i{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-width: max-content;
|
||||
padding: 5px;
|
||||
cursor: pointer;
|
||||
font-size: 10px;
|
||||
|
||||
i {
|
||||
margin-right: 8px;
|
||||
font-size: 1.2em;
|
||||
height: 1.2em;
|
||||
|
||||
&~i {
|
||||
margin-right: 0;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.name {
|
||||
margin-right : auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.beta {
|
||||
color : white;
|
||||
padding : 4px 6px;
|
||||
line-height : 1em;
|
||||
margin-left : 5px;
|
||||
align-self : center;
|
||||
background : grey;
|
||||
border-radius : 12px;
|
||||
font-family : monospace;
|
||||
color: white;
|
||||
padding: 4px 6px;
|
||||
line-height: 1em;
|
||||
margin-left: 5px;
|
||||
align-self: center;
|
||||
background: grey;
|
||||
border-radius: 12px;
|
||||
font-family: monospace;
|
||||
}
|
||||
&:hover{
|
||||
background-color : #999;
|
||||
&>.dropdown{
|
||||
visibility : visible;
|
||||
|
||||
&:hover {
|
||||
background-color: #999;
|
||||
|
||||
&>.dropdown {
|
||||
visibility: visible;
|
||||
|
||||
&.side {
|
||||
left: 100%;
|
||||
top: 0%;
|
||||
margin-left:0;
|
||||
margin-left: 0;
|
||||
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 *************/
|
||||
|
||||
|
||||
@@ -152,6 +152,27 @@ body { counter-reset : phb-page-numbers; }
|
||||
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 {
|
||||
position : absolute;
|
||||
|
||||
Reference in New Issue
Block a user