0
0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-16 06:02:41 +00:00

Merge pull request #3809 from 5e-Cleric/adress-small-accessibility-concerns

Adress small accessibility concerns
This commit is contained in:
Víctor Losada Hernández
2024-12-09 22:28:52 +01:00
committed by GitHub
5 changed files with 66 additions and 55 deletions

View File

@@ -115,10 +115,10 @@
color : #D3D3D3; color : #D3D3D3;
accent-color : #D3D3D3; accent-color : #D3D3D3;
&::-webkit-slider-thumb, &::-moz-slider-thumb { &::-webkit-slider-thumb, &::-moz-range-thumb {
width : 5px; width : 5px;
height : 5px; height : 5px;
cursor : pointer; cursor : ew-resize;
outline : none; outline : none;
} }

View File

@@ -207,19 +207,11 @@ const Snippetbar = createClass({
renderEditorButtons : function(){ renderEditorButtons : function(){
if(!this.props.showEditButtons) return; if(!this.props.showEditButtons) return;
const foldButtons = <>
<div className={`editorTool foldAll ${this.props.view !== 'meta' && this.props.foldCode ? 'active' : ''}`}
onClick={this.props.foldCode} >
<i className='fas fa-compress-alt' />
</div>
<div className={`editorTool unfoldAll ${this.props.view !== 'meta' && this.props.unfoldCode ? 'active' : ''}`}
onClick={this.props.unfoldCode} >
<i className='fas fa-expand-alt' />
</div>
</>;
return <div className='editors'>
<div className='historyTools'> return (
<div className='editors'>
{this.props.view !== 'meta' && <><div className='historyTools'>
<div className={`editorTool snippetGroup history ${this.state.historyExists ? 'active' : ''}`} <div className={`editorTool snippetGroup history ${this.state.historyExists ? 'active' : ''}`}
onClick={this.toggleHistoryMenu} > onClick={this.toggleHistoryMenu} >
<i className='fas fa-clock-rotate-left' /> <i className='fas fa-clock-rotate-left' />
@@ -235,13 +227,20 @@ const Snippetbar = createClass({
</div> </div>
</div> </div>
<div className='codeTools'> <div className='codeTools'>
{foldButtons} <div className={`editorTool foldAll ${this.props.foldCode ? 'active' : ''}`}
<div className={`editorTool editorTheme ${this.state.themeSelector ? 'active' : ''}`} onClick={this.props.foldCode} >
<i className='fas fa-compress-alt' />
</div>
<div className={`editorTool unfoldAll ${this.props.unfoldCode ? 'active' : ''}`}
onClick={this.props.unfoldCode} >
<i className='fas fa-expand-alt' />
</div>
<div className={`editorTheme ${this.state.themeSelector ? 'active' : ''}`}
onClick={this.toggleThemeSelector} > onClick={this.toggleThemeSelector} >
<i className='fas fa-palette' /> <i className='fas fa-palette' />
{this.state.themeSelector && this.renderThemeSelector()} {this.state.themeSelector && this.renderThemeSelector()}
</div> </div>
</div> </div></>}
<div className='tabs'> <div className='tabs'>
@@ -259,7 +258,8 @@ const Snippetbar = createClass({
</div> </div>
</div> </div>
</div>; </div>
)
}, },
render : function(){ render : function(){

View File

@@ -22,7 +22,7 @@
justify-content : flex-end; justify-content : flex-end;
min-width : 225px; min-width : 225px;
&:only-child { margin-left : auto; } &:only-child { margin-left : auto;min-width:unset;}
>div { >div {
display : flex; display : flex;
@@ -38,6 +38,11 @@
line-height : @menuHeight; line-height : @menuHeight;
text-align : center; text-align : center;
cursor : pointer; cursor : pointer;
&.editorTool:not(.active) {
cursor:not-allowed;
}
&:hover,&.selected { background-color : #999999; } &:hover,&.selected { background-color : #999999; }
&.text { &.text {
.tooltipLeft('Brew Editor'); .tooltipLeft('Brew Editor');

View File

@@ -11,8 +11,8 @@
@import (less) './themes/fonts/iconFonts/fontAwesome.less'; @import (less) './themes/fonts/iconFonts/fontAwesome.less';
@keyframes sourceMoveAnimation { @keyframes sourceMoveAnimation {
50% {background-color: red; color: white;} 50% { color : white;background-color : red;}
100% {background-color: unset; color: unset;} 100% { color : unset;background-color : unset;}
} }
.codeEditor { .codeEditor {
@@ -21,9 +21,16 @@
} }
.CodeMirror-foldmarker { .CodeMirror-foldmarker {
font-family : inherit; font-family : inherit;
text-shadow: none;
font-weight : 600; font-weight : 600;
color : grey; color : grey;
text-shadow : none;
}
.CodeMirror-foldgutter {
cursor : pointer;
border-left : 1px solid #EEEEEE;
transition : background 0.1s;
&:hover { background : #DDDDDD; }
} }
.sourceMoveFlash .CodeMirror-line { .sourceMoveFlash .CodeMirror-line {
@@ -32,9 +39,7 @@
} }
.CodeMirror-vscrollbar { .CodeMirror-vscrollbar {
&::-webkit-scrollbar { &::-webkit-scrollbar { width : 20px; }
width: 20px;
}
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
width : 20px; width : 20px;
background : linear-gradient(90deg, #858585 15px, #808080 15px); background : linear-gradient(90deg, #858585 15px, #808080 15px);

View File

@@ -43,5 +43,6 @@ html,body, #reactRoot{
} }
&:disabled{ &:disabled{
background-color : @silver !important; background-color : @silver !important;
cursor:not-allowed;
} }
} }