From 49e4f0a597cddc06d2a7ee14ffd6aa9d0780278a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Wed, 22 Apr 2026 12:34:50 +0200 Subject: [PATCH] css reordering --- client/components/codeEditor/codeEditor.less | 147 +++++++++++++++--- .../components/codeEditor/customHighlight.js | 2 - client/homebrew/editor/editor.less | 110 ------------- 3 files changed, 125 insertions(+), 134 deletions(-) diff --git a/client/components/codeEditor/codeEditor.less b/client/components/codeEditor/codeEditor.less index 3f3869756..84ed8058d 100644 --- a/client/components/codeEditor/codeEditor.less +++ b/client/components/codeEditor/codeEditor.less @@ -1,31 +1,134 @@ // Icon fonts for emoji/autocomplete -@import (less) "@themes/fonts/iconFonts/diceFont.less"; -@import (less) "@themes/fonts/iconFonts/elderberryInn.less"; -@import (less) "@themes/fonts/iconFonts/gameIcons.less"; -@import (less) "@themes/fonts/iconFonts/fontAwesome.less"; +@import (less) '@themes/fonts/iconFonts/diceFont.less'; +@import (less) '@themes/fonts/iconFonts/elderberryInn.less'; +@import (less) '@themes/fonts/iconFonts/gameIcons.less'; +@import (less) '@themes/fonts/iconFonts/fontAwesome.less'; @keyframes sourceMoveAnimation { 50% { - color: white; - background-color: red; + color : white; + background-color : red; } 100% { - color: unset; - background-color: unset; + color : unset; + background-color : unset; } } :where(.codeEditor) { - font-family: monospace; - height: 100%; - width:100%; - - .cm-content { - tab-size:2 !important; + width : 100%; + height : calc(100% - 25px); + font-family : monospace; + + .cm-editor { + height : 100%; + outline : none !important; } - @media screen and (pointer: coarse) { - font-size: 16px; + &.brewSnippets .cm-snippetLine, + :where(&.brewText) .cm-pageLine { + background : #33333328; + border-top : #333399 solid 1px; + } + + &.brewSnippets { + .cm-pageLine { + color : #777777; + background : #3E4E3E1B; + border-top : #3399423B solid 1px; + } + } + + &:where(.brewText), &.brewSnippets { + + + .cm-pageLine[data-page-number]::after { + float : right; + color : grey; + content : attr(data-page-number); + } + .cm-columnSplit { + font-style : italic; + color : grey; + background-color : fade(#229999, 15%); + border-bottom : #229999 solid 1px; + } + .cm-define { + &:not(.term):not(.definition) { + font-weight : bold; + color : #949494; + background : #E5E5E5; + border-radius : 3px; + } + &.term { color : rgb(96, 117, 143); } + &.definition { color : rgb(97, 57, 178); } + } + .cm-block:not(.cm-comment) { + font-weight : bold; + color : purple; + } + .cm-inline-block, + .cm-define .cm-inline-block { + font-weight : bold; + color : red; + span:not(.cm-comment) { color : inherit; } + } + .cm-injection:not(.cm-comment) { + font-weight : bold; + color : green; + span { color : inherit; } + } + .cm-emoji:not(.cm-comment) { + padding-bottom : 1px; + margin-left : 2px; + font-weight : bold; + color : #360034; + outline : solid 2px #FF96FC; + outline-offset : -2px; + background : #FFC8FF; + border-radius : 6px; + } + .cm-superscript:not(.cm-comment) { + font-size : 0.9em; + font-weight : bold; + vertical-align : super; + color : goldenrod; + } + .cm-subscript:not(.cm-comment) { + font-size : 0.9em; + font-weight : bold; + vertical-align : sub; + color : rgb(123, 123, 15); + } + .cm-definitionList { + .cm-definitionTerm { color : rgb(96, 117, 143); } + .cm-definitionColon:not(:has(.cm-comment)) { + font-weight : bold; + color : #949494; + background : #E5E5E5; + border-radius : 3px; + } + .cm-definitionDesc { color : rgb(97, 57, 178); } + } + + .cm-tooltip-autocomplete { + + li { + display : flex; + gap : 10px; + align-items : center; + justify-content : flex-start; + + .cm-completionIcon { display : none; } + .cm-tooltip-autocomplete .cm-completionLabel { translate : 0 -2px; } + } + } + } + + .cm-content { tab-size : 2 !important; } + + @media screen and (pointer : coarse) { + font-size : 16px; } .cm-gutterElement span { @@ -44,14 +147,14 @@ /* Flash animation for source moves */ .cm-line.sourceMoveFlash { - animation-name: sourceMoveAnimation; - animation-duration: 0.4s; + animation-name : sourceMoveAnimation; + animation-duration : 0.4s; } /* Search input */ .cm-searchField { - width: 25em !important; - outline: 1px inset #00000055 !important; + width : 25em !important; + outline : 1px inset #00000055 !important; } /* Tab character visualization (optional) */ @@ -67,6 +170,6 @@ /* Emoji preview styling */ .emojiPreview { - font-size: 1.5em; - line-height: 1.2em; + font-size : 1.5em; + line-height : 1.2em; } diff --git a/client/components/codeEditor/customHighlight.js b/client/components/codeEditor/customHighlight.js index 3fa164757..345e253d3 100644 --- a/client/components/codeEditor/customHighlight.js +++ b/client/components/codeEditor/customHighlight.js @@ -125,8 +125,6 @@ export function tokenizeCustomMarkdown(text) { from : offset, to : offset + desc.length, }); - - return; } // --- multiline def list --- diff --git a/client/homebrew/editor/editor.less b/client/homebrew/editor/editor.less index 7503749fc..a55fad852 100644 --- a/client/homebrew/editor/editor.less +++ b/client/homebrew/editor/editor.less @@ -6,116 +6,6 @@ height : 100%; container : editor / inline-size; background : white; - :where(.codeEditor) { - height : calc(100% - 25px); - .cm-editor { height : 100%; - outline:none !important; - } - &.brewSnippets .cm-snippetLine { - background : #33333328; - border-top : #333399 solid 1px; - } - - :where(&.brewText) .cm-pageLine { - background : #33333328; - border-top : #333399 solid 1px; - } - - &.brewSnippets { - .cm-pageLine { - background : #3e4e3e1b; - border-top : #3399423b solid 1px; - color:#777; - } - } - - &:where(.brewText), &.brewSnippets { - - - .cm-tooltip-autocomplete { - - li { - display : flex; - gap : 10px; - align-items : center; - justify-content : flex-start; - - .cm-completionIcon { display : none; } - .cm-tooltip-autocomplete .cm-completionLabel { translate : 0 -2px; } - } - } - - .cm-pageLine[data-page-number]::after { - content:attr(data-page-number); - float:right; - color : grey; - } - .cm-columnSplit { - font-style : italic; - color : grey; - background-color : fade(#229999, 15%); - border-bottom : #229999 solid 1px; - } - .cm-define { - &:not(.term):not(.definition) { - font-weight : bold; - color : #949494; - background : #E5E5E5; - border-radius : 3px; - } - &.term { color : rgb(96, 117, 143); } - &.definition { color : rgb(97, 57, 178); } - } - .cm-block:not(.cm-comment) { - font-weight : bold; - color : purple; - } - .cm-inline-block:not(.cm-comment) { - font-weight : bold; - color : red ; - span { color : inherit } - } - .cm-injection:not(.cm-comment) { - font-weight : bold; - color : green; - span { color : inherit } - } - .cm-emoji:not(.cm-comment) { - padding-bottom : 1px; - margin-left : 2px; - font-weight : bold; - color : #360034; - outline : solid 2px #FF96FC; - outline-offset : -2px; - background : #FFC8FF; - border-radius : 6px; - } - .cm-superscript:not(.cm-comment) { - font-size : 0.9em; - font-weight : bold; - vertical-align : super; - color : goldenrod; - } - .cm-subscript:not(.cm-comment) { - font-size : 0.9em; - font-weight : bold; - vertical-align : sub; - color : rgb(123, 123, 15); - } - .cm-definitionList { - .cm-definitionTerm { color : rgb(96, 117, 143); } - .cm-definitionColon { - font-weight : bold; - color : #949494; - background : #E5E5E5; - border-radius : 3px; - } - .cm-definitionDesc { color : rgb(97, 57, 178); } - } - - } - - } .brewJump { position : absolute;