From e2ac6c9b6b4f6c01b71bdcfa79efa33419417961 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Sat, 23 Dec 2023 12:40:56 +0100 Subject: [PATCH] fonts as snippets --- .../editor/snippetbar/snippetbar.less | 282 +++++++++++------- themes/V3/Blank/snippets.js | 98 ++++++ themes/V3/Blank/style.less | 21 ++ 3 files changed, 290 insertions(+), 111 deletions(-) diff --git a/client/homebrew/editor/snippetbar/snippetbar.less b/client/homebrew/editor/snippetbar/snippetbar.less index 8dc6a8b9d..165bce056 100644 --- a/client/homebrew/editor/snippetbar/snippetbar.less +++ b/client/homebrew/editor/snippetbar/snippetbar.less @@ -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 @@ } } } -} +} \ No newline at end of file diff --git a/themes/V3/Blank/snippets.js b/themes/V3/Blank/snippets.js index e437c0535..2cce78731 100644 --- a/themes/V3/Blank/snippets.js +++ b/themes/V3/Blank/snippets.js @@ -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 *************/ diff --git a/themes/V3/Blank/style.less b/themes/V3/Blank/style.less index d31919fab..2fdc2c47e 100644 --- a/themes/V3/Blank/style.less +++ b/themes/V3/Blank/style.less @@ -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;