From 9bc4b1fb5689abd4ca052f4501095f3f64abbd35 Mon Sep 17 00:00:00 2001 From: Gazook89 Date: Thu, 31 Oct 2024 22:04:11 -0500 Subject: [PATCH] Changes to core.less, reset.less, and toolbar Making some changes to the reset.less so that some default UA button styling is removed. Then, changing core.less so that the classic "HB" button styling is scoped to a certain class `.colorButton`. This will make it easier to use the button element in other places. --- client/homebrew/brewRenderer/toolBar/toolBar.less | 8 +------- client/homebrew/editor/metadataEditor/metadataEditor.less | 7 ++++--- shared/naturalcrit/styles/core.less | 5 +---- shared/naturalcrit/styles/reset.less | 8 +++++++- 4 files changed, 13 insertions(+), 15 deletions(-) diff --git a/client/homebrew/brewRenderer/toolBar/toolBar.less b/client/homebrew/brewRenderer/toolBar/toolBar.less index 381e5eeed..c2f4ff148 100644 --- a/client/homebrew/brewRenderer/toolBar/toolBar.less +++ b/client/homebrew/brewRenderer/toolBar/toolBar.less @@ -13,6 +13,7 @@ height : auto; padding : 2px 0; font-family : 'Open Sans', sans-serif; + font-size : 13px; color : #CCCCCC; background-color : #555555; & > *:not(.toggleButton) { @@ -154,13 +155,6 @@ width : auto; min-width : 46px; height : 100%; - padding : 0 0px; - font-weight : unset; - color : inherit; - background-color : unset; - - &:not(button:has(i, svg)) { padding : 0 8px; } - &:hover { background-color : #444444; } &:focus { border : 1px solid #D3D3D3;outline : none;} &:disabled { diff --git a/client/homebrew/editor/metadataEditor/metadataEditor.less b/client/homebrew/editor/metadataEditor/metadataEditor.less index 62ec6b37b..d29916a50 100644 --- a/client/homebrew/editor/metadataEditor/metadataEditor.less +++ b/client/homebrew/editor/metadataEditor/metadataEditor.less @@ -79,6 +79,7 @@ text-overflow : ellipsis; } button { + .colorButton(); padding : 0px 5px; color : white; background-color : black; @@ -138,16 +139,16 @@ margin-bottom : 15px; button { width : 100%; } button.publish { - .button(@blueLight); + .colorButton(@blueLight); } button.unpublish { - .button(@silver); + .colorButton(@silver); } } .delete.field .value { button { - .button(@red); + .colorButton(@red); } } .authors.field .value { diff --git a/shared/naturalcrit/styles/core.less b/shared/naturalcrit/styles/core.less index c742ad7b1..21a2687bc 100644 --- a/shared/naturalcrit/styles/core.less +++ b/shared/naturalcrit/styles/core.less @@ -21,10 +21,7 @@ html,body, #reactRoot{ *{ box-sizing : border-box; } -button{ - .button(); -} -.button(@backgroundColor : @green){ +.colorButton(@backgroundColor : @green){ .animate(background-color); display : inline-block; padding : 0.6em 1.2em; diff --git a/shared/naturalcrit/styles/reset.less b/shared/naturalcrit/styles/reset.less index be5bffc7e..df5564a21 100644 --- a/shared/naturalcrit/styles/reset.less +++ b/shared/naturalcrit/styles/reset.less @@ -1,4 +1,4 @@ -:where(html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video){ +:where(html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,button,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video){ border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0 } @@ -25,3 +25,9 @@ :where(table){ border-collapse:collapse;border-spacing:0 } + +:where(button) { + background-color: unset; + text-transform: unset; + color: unset; +}