0
0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-08 03:12:40 +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'> return (
<div className='historyTools'> <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,14 +227,21 @@ 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'>
<div className={cx('text', { selected: this.props.view === 'text' })} <div className={cx('text', { selected: this.props.view === 'text' })}
@@ -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,49 +11,54 @@
@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 {
@media screen and (pointer : coarse) { @media screen and (pointer : coarse) {
font-size : 16px; font-size : 16px;
} }
.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;
} }
.sourceMoveFlash .CodeMirror-line{ .CodeMirror-foldgutter {
animation-name: sourceMoveAnimation; cursor : pointer;
animation-duration: 0.4s; border-left : 1px solid #EEEEEE;
} transition : background 0.1s;
&:hover { background : #DDDDDD; }
}
.CodeMirror-vscrollbar { .sourceMoveFlash .CodeMirror-line {
&::-webkit-scrollbar { animation-name : sourceMoveAnimation;
width: 20px; animation-duration : 0.4s;
} }
&::-webkit-scrollbar-thumb {
width: 20px; .CodeMirror-vscrollbar {
background: linear-gradient(90deg, #858585 15px, #808080 15px); &::-webkit-scrollbar { width : 20px; }
} &::-webkit-scrollbar-thumb {
} width : 20px;
background : linear-gradient(90deg, #858585 15px, #808080 15px);
}
}
//.cm-tab { //.cm-tab {
// background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAMCAQAAACOs/baAAAARUlEQVR4nGJgIAG8JkXxUAcCtDWemcGR1lY4MvgzCEKY7jSBjgxBDAG09UEQzAe0AMwMHrSOAwEGRtpaMIwAAAAA//8DAG4ID9EKs6YqAAAAAElFTkSuQmCC) no-repeat right; // background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAMCAQAAACOs/baAAAARUlEQVR4nGJgIAG8JkXxUAcCtDWemcGR1lY4MvgzCEKY7jSBjgxBDAG09UEQzAe0AMwMHrSOAwEGRtpaMIwAAAAA//8DAG4ID9EKs6YqAAAAAElFTkSuQmCC) no-repeat right;
//} //}
//.cm-trailingspace { //.cm-trailingspace {
// .cm-space { // .cm-space {
// background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAQAgMAAABW5NbuAAAACVBMVEVHcEwAAAAAAAAWawmTAAAAA3RSTlMAPBJ6PMxpAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAFUlEQVQI12NgwACcCQysASAEZGAAACMuAX06aCQUAAAAAElFTkSuQmCC) no-repeat right; // background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAQAgMAAABW5NbuAAAACVBMVEVHcEwAAAAAAAAWawmTAAAAA3RSTlMAPBJ6PMxpAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAFUlEQVQI12NgwACcCQysASAEZGAAACMuAX06aCQUAAAAAElFTkSuQmCC) no-repeat right;
// } // }
//} //}
} }
.emojiPreview { .emojiPreview {
font-size: 1.5em; font-size : 1.5em;
line-height: 1.2em; line-height : 1.2em;
} }

View File

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