Merge pull request #1406 from processing/wcag-aa
Fixes #1263 - Updates colors and design to WCAG AA/AAA
This commit is contained in:
Cassie Tarakajian
GitHub
commit
1747ba7558
48 changed files with 743 additions and 450 deletions
|
|
@ -281,7 +281,7 @@ class Nav extends React.PureComponent {
|
|||
onBlur={this.handleBlur}
|
||||
>
|
||||
Save
|
||||
<span className="nav__keyboard-shortcut">{metaKeyName}+s</span>
|
||||
<span className="nav__keyboard-shortcut">{metaKeyName}+S</span>
|
||||
</button>
|
||||
</li> }
|
||||
{ this.props.project.id && this.props.user.authenticated &&
|
||||
|
|
@ -541,13 +541,13 @@ class Nav extends React.PureComponent {
|
|||
return (
|
||||
<ul className="nav__items-right" title="user-menu">
|
||||
<li className="nav__item">
|
||||
<Link to="/login">
|
||||
<Link to="/login" className="nav__auth-button">
|
||||
<span className="nav__item-header">Log in</span>
|
||||
</Link>
|
||||
</li>
|
||||
<span className="nav__item-spacer">or</span>
|
||||
<span className="nav__item-or">or</span>
|
||||
<li className="nav__item">
|
||||
<Link to="/signup">
|
||||
<Link to="/signup" className="nav__auth-button">
|
||||
<span className="nav__item-header">Sign up</span>
|
||||
</Link>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ const PreviewNav = ({ owner, project }) => (
|
|||
<nav className="nav preview-nav">
|
||||
<div className="nav__items-left">
|
||||
<div className="nav__item-logo">
|
||||
<InlineSVG src={logoUrl} alt="p5.js logo" />
|
||||
<InlineSVG src={logoUrl} alt="p5.js logo" className="svg__logo" />
|
||||
</div>
|
||||
<Link className="nav__item" to={`/${owner.username}/sketches/${project.id}`}>{project.name}</Link>
|
||||
<p className="toolbar__project-owner">by</p>
|
||||
|
|
|
|||
|
|
@ -24,7 +24,8 @@ describe('<FileNode />', () => {
|
|||
showFolderChildren: jest.fn(),
|
||||
hideFolderChildren: jest.fn(),
|
||||
canEdit: true,
|
||||
authenticated: false
|
||||
authenticated: false,
|
||||
openUploadFileModal: jest.fn()
|
||||
};
|
||||
component = shallow(<FileNode {...props} />);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -144,7 +144,7 @@ exports[`Nav renders correctly 1`] = `
|
|||
<span
|
||||
className="nav__keyboard-shortcut"
|
||||
>
|
||||
Ctrl
|
||||
⌃
|
||||
+F
|
||||
</span>
|
||||
</button>
|
||||
|
|
@ -161,7 +161,7 @@ exports[`Nav renders correctly 1`] = `
|
|||
<span
|
||||
className="nav__keyboard-shortcut"
|
||||
>
|
||||
Ctrl
|
||||
⌃
|
||||
+G
|
||||
</span>
|
||||
</button>
|
||||
|
|
@ -180,7 +180,7 @@ exports[`Nav renders correctly 1`] = `
|
|||
>
|
||||
⇧
|
||||
+
|
||||
Ctrl
|
||||
⌃
|
||||
+G
|
||||
</span>
|
||||
</button>
|
||||
|
|
@ -242,7 +242,7 @@ exports[`Nav renders correctly 1`] = `
|
|||
<span
|
||||
className="nav__keyboard-shortcut"
|
||||
>
|
||||
Ctrl
|
||||
⌃
|
||||
+Enter
|
||||
</span>
|
||||
</button>
|
||||
|
|
@ -261,7 +261,7 @@ exports[`Nav renders correctly 1`] = `
|
|||
>
|
||||
⇧
|
||||
+
|
||||
Ctrl
|
||||
⌃
|
||||
+Enter
|
||||
</span>
|
||||
</button>
|
||||
|
|
|
|||
54
client/images/console-debug-contrast.svg
Normal file
54
client/images/console-debug-contrast.svg
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
version="1.1"
|
||||
width="100%"
|
||||
height="100%"
|
||||
viewBox="0 0 24 24"
|
||||
id="svg4"
|
||||
sodipodi:docname="console-debug-contrast.svg"
|
||||
inkscape:version="0.92.2 2405546, 2018-03-11">
|
||||
<metadata
|
||||
id="metadata10">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<defs
|
||||
id="defs8" />
|
||||
<sodipodi:namedview
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1"
|
||||
objecttolerance="10"
|
||||
gridtolerance="10"
|
||||
guidetolerance="10"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:window-width="640"
|
||||
inkscape:window-height="480"
|
||||
id="namedview6"
|
||||
showgrid="false"
|
||||
inkscape:zoom="23.6"
|
||||
inkscape:cx="5"
|
||||
inkscape:cy="5"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="25"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:current-layer="svg4" />
|
||||
<path
|
||||
d="M14,12H10V10H14M14,16H10V14H14M20,8H17.19C16.74,7.22 16.12,6.55 15.37,6.04L17,4.41L15.59,3L13.42,5.17C12.96,5.06 12.5,5 12,5C11.5,5 11.04,5.06 10.59,5.17L8.41,3L7,4.41L8.62,6.04C7.88,6.55 7.26,7.22 6.81,8H4V10H6.09C6.04,10.33 6,10.66 6,11V12H4V14H6V15C6,15.34 6.04,15.67 6.09,16H4V18H6.81C7.85,19.79 9.78,21 12,21C14.22,21 16.15,19.79 17.19,18H20V16H17.91C17.96,15.67 18,15.34 18,15V14H20V12H18V11C18,10.66 17.96,10.33 17.91,10H20V8Z"
|
||||
id="path2"
|
||||
fill="#38B6F5" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
|
|
@ -50,5 +50,5 @@
|
|||
<path
|
||||
d="M14,12H10V10H14M14,16H10V14H14M20,8H17.19C16.74,7.22 16.12,6.55 15.37,6.04L17,4.41L15.59,3L13.42,5.17C12.96,5.06 12.5,5 12,5C11.5,5 11.04,5.06 10.59,5.17L8.41,3L7,4.41L8.62,6.04C7.88,6.55 7.26,7.22 6.81,8H4V10H6.09C6.04,10.33 6,10.66 6,11V12H4V14H6V15C6,15.34 6.04,15.67 6.09,16H4V18H6.81C7.85,19.79 9.78,21 12,21C14.22,21 16.15,19.79 17.19,18H20V16H17.91C17.96,15.67 18,15.34 18,15V14H20V12H18V11C18,10.66 17.96,10.33 17.91,10H20V8Z"
|
||||
id="path2"
|
||||
fill="#007BBB" />
|
||||
fill="#0071AD" />
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 1.9 KiB |
54
client/images/console-error-contrast.svg
Normal file
54
client/images/console-error-contrast.svg
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
version="1.1"
|
||||
width="100%"
|
||||
height="100%"
|
||||
viewBox="0 0 24 24"
|
||||
id="svg4"
|
||||
sodipodi:docname="console-error-contrast.svg"
|
||||
inkscape:version="0.92.2 2405546, 2018-03-11">
|
||||
<metadata
|
||||
id="metadata10">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<defs
|
||||
id="defs8" />
|
||||
<sodipodi:namedview
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1"
|
||||
objecttolerance="10"
|
||||
gridtolerance="10"
|
||||
guidetolerance="10"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:window-width="640"
|
||||
inkscape:window-height="480"
|
||||
id="namedview6"
|
||||
showgrid="false"
|
||||
inkscape:zoom="23.6"
|
||||
inkscape:cx="5"
|
||||
inkscape:cy="5"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="25"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:current-layer="svg4" />
|
||||
<path
|
||||
d="M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z"
|
||||
id="path2"
|
||||
fill="#EA7B7D" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
54
client/images/console-info-contrast.svg
Normal file
54
client/images/console-info-contrast.svg
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
version="1.1"
|
||||
width="100%"
|
||||
height="100%"
|
||||
viewBox="0 0 24 24"
|
||||
id="svg4"
|
||||
sodipodi:docname="console-info-contrast.svg"
|
||||
inkscape:version="0.92.2 2405546, 2018-03-11">
|
||||
<metadata
|
||||
id="metadata10">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<defs
|
||||
id="defs8" />
|
||||
<sodipodi:namedview
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1"
|
||||
objecttolerance="10"
|
||||
gridtolerance="10"
|
||||
guidetolerance="10"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:window-width="640"
|
||||
inkscape:window-height="480"
|
||||
id="namedview6"
|
||||
showgrid="false"
|
||||
inkscape:zoom="23.6"
|
||||
inkscape:cx="5"
|
||||
inkscape:cy="5"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="25"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:current-layer="svg4" />
|
||||
<path
|
||||
d="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
|
||||
id="path2"
|
||||
fill="#D9D9D9" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
|
|
@ -50,5 +50,5 @@
|
|||
<path
|
||||
d="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
|
||||
id="path2"
|
||||
fill="#a3a3a3" />
|
||||
fill="#D9D9D9" />
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
|
|
@ -50,5 +50,5 @@
|
|||
<path
|
||||
d="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
|
||||
id="path2"
|
||||
fill="#7D7D7D" />
|
||||
fill="#4D4D4D" />
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
54
client/images/console-warn-contrast.svg
Normal file
54
client/images/console-warn-contrast.svg
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
version="1.1"
|
||||
width="100%"
|
||||
height="100%"
|
||||
viewBox="0 0 24 24"
|
||||
id="svg4"
|
||||
sodipodi:docname="console-warn-contrast.svg"
|
||||
inkscape:version="0.92.2 2405546, 2018-03-11">
|
||||
<metadata
|
||||
id="metadata10">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<defs
|
||||
id="defs8" />
|
||||
<sodipodi:namedview
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1"
|
||||
objecttolerance="10"
|
||||
gridtolerance="10"
|
||||
guidetolerance="10"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:window-width="640"
|
||||
inkscape:window-height="480"
|
||||
id="namedview6"
|
||||
showgrid="false"
|
||||
inkscape:zoom="23.6"
|
||||
inkscape:cx="5"
|
||||
inkscape:cy="5"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="25"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:current-layer="svg4" />
|
||||
<path
|
||||
d="M13,14H11V10H13M13,18H11V16H13M1,21H23L12,2L1,21Z"
|
||||
id="path2"
|
||||
fill="#f5bc38" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
|
|
@ -50,5 +50,5 @@
|
|||
<path
|
||||
d="M13,14H11V10H13M13,18H11V16H13M1,21H23L12,2L1,21Z"
|
||||
id="path2"
|
||||
fill="#FAAF00" />
|
||||
fill="#996B00" />
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
|
|
@ -3,8 +3,8 @@
|
|||
<!-- Generator: Sketch 39 (31667) - http://www.bohemiancoding.com/sketch -->
|
||||
<!-- <desc>Created with Sketch.</desc> -->
|
||||
<defs></defs>
|
||||
<g id="IDEs" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.539999962">
|
||||
<g id="p5js-IDE-styles-foundation-pt-2" transform="translate(-425.000000, -1168.000000)" fill="#333333">
|
||||
<g id="IDEs" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="1.0">
|
||||
<g id="p5js-IDE-styles-foundation-pt-2" transform="translate(-425.000000, -1168.000000)" fill="#AAA">
|
||||
<g id="Icons" transform="translate(16.000000, 1063.000000)">
|
||||
<polygon id="arrow-shape-copy-2" transform="translate(416.000000, 109.198314) rotate(-180.000000) translate(-416.000000, -109.198314) " points="417.4 106.396628 423 111.996628 421.6 113.396628 416 107.796628 410.4 113.396628 409 111.996628 414.6 106.396628 415.996628 105"></polygon>
|
||||
</g>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 979 B After Width: | Height: | Size: 968 B |
|
|
@ -5,7 +5,7 @@
|
|||
<!-- <desc>Created with Sketch.</desc> -->
|
||||
<defs></defs>
|
||||
<g id="exit" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="Artboard-1" fill="#D8D8D8">
|
||||
<g id="Artboard-1" fill="#AAA">
|
||||
<path d="M8,5.87867966 L2.69669914,0.575378798 L0.575378798,2.69669914 L5.87867966,8 L0.575378798,13.3033009 L2.69669914,15.4246212 L8,10.1213203 L13.3033009,15.4246212 L15.4246212,13.3033009 L10.1213203,8 L15.4246212,2.69669914 L13.3033009,0.575378798 L8,5.87867966 Z" id="exit"></path>
|
||||
</g>
|
||||
</g>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 826 B After Width: | Height: | Size: 823 B |
|
|
@ -3,7 +3,7 @@
|
|||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="environment" transform="translate(-26.000000, -42.000000)" fill="#B5B5B5">
|
||||
<g id="environment" transform="translate(-26.000000, -42.000000)" fill="#FFF">
|
||||
<g id="libraries" transform="translate(21.000000, 32.000000)">
|
||||
<polygon id="Triangle-3" transform="translate(7.500000, 12.500000) rotate(180.000000) translate(-7.500000, -12.500000) " points="7.5 10 10 15 5 15"></polygon>
|
||||
</g>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 698 B After Width: | Height: | Size: 695 B |
|
|
@ -3,7 +3,7 @@
|
|||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="environment" transform="translate(-26.000000, -42.000000)" fill="#B5B5B5">
|
||||
<g id="environment" transform="translate(-26.000000, -42.000000)" fill="#000000">
|
||||
<g id="libraries" transform="translate(21.000000, 32.000000)">
|
||||
<polygon id="Triangle-3" transform="translate(7.500000, 12.500000) rotate(180.000000) translate(-7.500000, -12.500000) " points="7.5 10 10 15 5 15"></polygon>
|
||||
</g>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 698 B After Width: | Height: | Size: 698 B |
|
|
@ -3,7 +3,7 @@
|
|||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="environment" transform="translate(-26.000000, -42.000000)" fill="#B5B5B5">
|
||||
<g id="environment" transform="translate(-26.000000, -42.000000)" fill="#000000">
|
||||
<g id="libraries" transform="translate(21.000000, 32.000000)">
|
||||
<polygon id="Triangle-3" transform="translate(7.500000, 12.500000) rotate(90.000000) translate(-7.500000, -12.500000) " points="7.5 10 10 15 5 15"></polygon>
|
||||
</g>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 698 B After Width: | Height: | Size: 698 B |
|
|
@ -3,8 +3,8 @@
|
|||
<!-- Generator: Sketch 39 (31667) - http://www.bohemiancoding.com/sketch -->
|
||||
<!-- <desc>Created with Sketch.</desc> -->
|
||||
<defs></defs>
|
||||
<g id="IDEs" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.539999962">
|
||||
<g id="p5js-IDE-styles-foundation-pt-2" transform="translate(-394.000000, -1168.000000)" fill="#333333">
|
||||
<g id="IDEs" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="1">
|
||||
<g id="p5js-IDE-styles-foundation-pt-2" transform="translate(-394.000000, -1168.000000)" fill="#AAA">
|
||||
<g id="Icons" transform="translate(16.000000, 1063.000000)">
|
||||
<polygon id="arrow-shape-copy" points="386.4 106.396628 392 111.996628 390.6 113.396628 385 107.796628 379.4 113.396628 378 111.996628 383.6 106.396628 384.996628 105"></polygon>
|
||||
</g>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 873 B After Width: | Height: | Size: 860 B |
|
|
@ -9,12 +9,16 @@ import {
|
|||
} from '../../../styles/components/_console-feed.scss';
|
||||
import warnLightUrl from '../../../images/console-warn-light.svg';
|
||||
import warnDarkUrl from '../../../images/console-warn-dark.svg';
|
||||
import warnContrastUrl from '../../../images/console-warn-contrast.svg';
|
||||
import errorLightUrl from '../../../images/console-error-light.svg';
|
||||
import errorDarkUrl from '../../../images/console-error-dark.svg';
|
||||
import errorContrastUrl from '../../../images/console-error-contrast.svg';
|
||||
import debugLightUrl from '../../../images/console-debug-light.svg';
|
||||
import debugDarkUrl from '../../../images/console-debug-dark.svg';
|
||||
import debugContrastUrl from '../../../images/console-debug-contrast.svg';
|
||||
import infoLightUrl from '../../../images/console-info-light.svg';
|
||||
import infoDarkUrl from '../../../images/console-info-dark.svg';
|
||||
import infoContrastUrl from '../../../images/console-info-contrast.svg';
|
||||
|
||||
const upArrowUrl = require('../../../images/up-arrow.svg');
|
||||
const downArrowUrl = require('../../../images/down-arrow.svg');
|
||||
|
|
@ -47,6 +51,12 @@ class Console extends React.Component {
|
|||
LOG_DEBUG_ICON: `url(${debugDarkUrl})`,
|
||||
LOG_INFO_ICON: `url(${infoDarkUrl})`
|
||||
};
|
||||
const CONSOLE_FEED_CONTRAST_ICONS = {
|
||||
LOG_WARN_ICON: `url(${warnContrastUrl})`,
|
||||
LOG_ERROR_ICON: `url(${errorContrastUrl})`,
|
||||
LOG_DEBUG_ICON: `url(${debugContrastUrl})`,
|
||||
LOG_INFO_ICON: `url(${infoContrastUrl})`
|
||||
};
|
||||
const CONSOLE_FEED_SIZES = {
|
||||
TREENODE_LINE_HEIGHT: 1.2,
|
||||
BASE_FONT_SIZE: this.props.fontSize,
|
||||
|
|
@ -64,7 +74,7 @@ class Console extends React.Component {
|
|||
case 'dark':
|
||||
return Object.assign(CONSOLE_FEED_DARK_STYLES, CONSOLE_FEED_DARK_ICONS, CONSOLE_FEED_SIZES, style);
|
||||
case 'contrast':
|
||||
return Object.assign(CONSOLE_FEED_CONTRAST_STYLES, CONSOLE_FEED_DARK_ICONS, CONSOLE_FEED_SIZES, style);
|
||||
return Object.assign(CONSOLE_FEED_CONTRAST_STYLES, CONSOLE_FEED_CONTRAST_ICONS, CONSOLE_FEED_SIZES, style);
|
||||
default:
|
||||
return '';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -33,7 +33,12 @@ class NewFileForm extends React.Component {
|
|||
{...domOnlyProps(name)}
|
||||
ref={(element) => { this.fileName = element; }}
|
||||
/>
|
||||
<input type="submit" value="Add File" aria-label="add file" />
|
||||
<input
|
||||
type="submit"
|
||||
value="Add File"
|
||||
aria-label="add file"
|
||||
className="new-file-form__submit"
|
||||
/>
|
||||
</div>
|
||||
{name.touched && name.error && <span className="form-error">{name.error}</span>}
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -34,7 +34,12 @@ class NewFolderForm extends React.Component {
|
|||
ref={(element) => { this.fileName = element; }}
|
||||
{...domOnlyProps(name)}
|
||||
/>
|
||||
<input type="submit" value="Add Folder" aria-label="add folder" />
|
||||
<input
|
||||
type="submit"
|
||||
value="Add Folder"
|
||||
aria-label="add folder"
|
||||
className="new-folder-form__submit"
|
||||
/>
|
||||
</div>
|
||||
{name.touched && name.error && <span className="form-error">{name.error}</span>}
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -21,12 +21,13 @@
|
|||
@mixin icon() {
|
||||
@include themify() {
|
||||
color: getThemifyVariable('icon-color');
|
||||
& g {
|
||||
& g, & polygon {
|
||||
opacity: 1;
|
||||
fill: getThemifyVariable('icon-color');
|
||||
}
|
||||
&:hover {
|
||||
color: getThemifyVariable('icon-hover-color');
|
||||
& g {
|
||||
& g, & polygon {
|
||||
opacity: 1;
|
||||
fill: getThemifyVariable('icon-hover-color');
|
||||
}
|
||||
|
|
|
|||
|
|
@ -58,15 +58,15 @@
|
|||
}
|
||||
|
||||
%none-themify-icon-with-hover {
|
||||
color: $icon-color;
|
||||
color: $medium-dark;
|
||||
& g {
|
||||
fill: $icon-color;
|
||||
fill: $medium-dark;
|
||||
}
|
||||
&:hover {
|
||||
color: $icon-hover-color;
|
||||
color: $p5js-pink;
|
||||
& g {
|
||||
opacity: 1;
|
||||
fill: $icon-hover-color;
|
||||
fill: $p5js-pink;
|
||||
}
|
||||
}
|
||||
background-color: transparent;
|
||||
|
|
@ -110,7 +110,7 @@
|
|||
@extend %toolbar-button;
|
||||
@include themify() {
|
||||
color: getThemifyVariable('primary-text-color');
|
||||
background-color: getThemifyVariable('modal-button-background-color');
|
||||
background-color: getThemifyVariable('preferences-button-background-color');
|
||||
padding: 0;
|
||||
margin-bottom: #{28 / $base-font-size}rem;
|
||||
line-height: #{50 / $base-font-size}rem;
|
||||
|
|
@ -126,7 +126,7 @@
|
|||
}
|
||||
&:disabled:hover {
|
||||
cursor: not-allowed;
|
||||
background-color: getThemifyVariable('modal-button-background-color');
|
||||
background-color: getThemifyVariable('preferences-button-background-color');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -136,7 +136,7 @@
|
|||
background-color: transparent;
|
||||
color: getThemifyVariable('inactive-text-color');
|
||||
&:hover {
|
||||
color: getThemifyVariable('primary-text-color');
|
||||
color: getThemifyVariable('heavy-text-color');
|
||||
}
|
||||
}
|
||||
font-size: #{12 / $base-font-size}rem;
|
||||
|
|
@ -176,7 +176,7 @@
|
|||
cursor: pointer;
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: getThemifyVariable('primary-text-color');
|
||||
color: getThemifyVariable('heavy-text-color');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -186,7 +186,7 @@
|
|||
background-color: map-get($theme-map, 'modal-background-color');
|
||||
border: 1px solid map-get($theme-map, 'modal-border-color');
|
||||
box-shadow: 0 0 18px 0 getThemifyVariable('shadow-color');
|
||||
color: getThemifyVariable('dropdown-color');
|
||||
color: getThemifyVariable('primary-text-color');
|
||||
}
|
||||
text-align: left;
|
||||
width: #{180 / $base-font-size}rem;
|
||||
|
|
@ -207,7 +207,7 @@
|
|||
& button,
|
||||
& a {
|
||||
@include themify() {
|
||||
color: getThemifyVariable('dropdown-color');
|
||||
color: getThemifyVariable('primary-text-color');
|
||||
}
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
|
|
|
|||
|
|
@ -2,6 +2,8 @@ $base-font-size: 12;
|
|||
|
||||
//colors
|
||||
$p5js-pink: #ed225d;
|
||||
$processing-blue: #007BBB;
|
||||
$p5js-active-pink: #f10046;
|
||||
$white: #fff;
|
||||
$black: #000;
|
||||
$yellow: #F5DC23;
|
||||
|
|
@ -9,259 +11,263 @@ $orange: #ffa500;
|
|||
$red: #ff0000;
|
||||
$lightsteelblue: #B0C4DE;
|
||||
$dodgerblue: #1E90FF;
|
||||
$icon-color: #8b8b8b;
|
||||
$icon-hover-color: #333;
|
||||
// $icon-hover-color: #333;
|
||||
$p5-contrast-pink: #FFA9D9;
|
||||
|
||||
// Grays
|
||||
$dark: #333;
|
||||
$middleGray: #7d7d7d;
|
||||
$middleLight: #a6a6a6;
|
||||
$border-color: #B5B5B5;
|
||||
$outline-color: #0F9DD7;
|
||||
|
||||
// Abstracts
|
||||
$primary-text-color: $dark;
|
||||
// Grayscale values
|
||||
$lightest: #FFF; // primary
|
||||
$lighter: #FBFBFB;
|
||||
|
||||
$light: #F0F0F0; // primary
|
||||
$medium-light: #D9D9D9;
|
||||
$middle-light: #A6A6A6;
|
||||
|
||||
// $middle-gray: #7D7D7D; // primary
|
||||
$middle-gray: #747474; // primary
|
||||
$middle-dark: #666;
|
||||
$medium-dark: #4D4D4D;
|
||||
|
||||
$dark: #333; // primary
|
||||
$darker: #1C1C1C;
|
||||
$darkest: #000;
|
||||
|
||||
$themes: (
|
||||
light: (
|
||||
logo-color: $p5js-pink,
|
||||
primary-text-color: $primary-text-color,
|
||||
dropzone-text-color: #333,
|
||||
modal-button-color: #333,
|
||||
heading-text-color: #333,
|
||||
secondary-text-color: #a8a8a8,
|
||||
inactive-text-color: #b5b5b5,
|
||||
background-color: #fbfbfb,
|
||||
preview-placeholder-color: #dcdcdc,
|
||||
button-background-color: #f4f4f4,
|
||||
logo-background-color: $lightest,
|
||||
heavy-text-color: $darker,
|
||||
primary-text-color: $dark,
|
||||
secondary-text-color: $medium-dark,
|
||||
inactive-text-color: $middle-dark,
|
||||
dropzone-text-color: $dark,
|
||||
modal-button-color: $dark,
|
||||
background-color: $lighter,
|
||||
button-background-color: $light,
|
||||
button-secondary-background-color: $medium-light,
|
||||
button-color: $black,
|
||||
button-border-color: #979797,
|
||||
toolbar-button-color: $p5js-pink,
|
||||
toolbar-button-background-color: #f4f4f4,
|
||||
button-border-color: $middle-light,
|
||||
toolbar-button-color: $dark,
|
||||
toolbar-button-background-color: $medium-light,
|
||||
button-background-hover-color: $p5js-pink,
|
||||
button-background-active-color: #f10046,
|
||||
button-nav-inactive-color: #a0a0a0,
|
||||
button-hover-color: $white,
|
||||
button-active-color: $white,
|
||||
modal-background-color: #f4f4f4,
|
||||
modal-button-background-color: #e6e6e6,
|
||||
modal-border-color: rgba(17, 17, 17, 0.3),
|
||||
modal-border-selected-color: #B9D0E1,
|
||||
icon-color: $icon-color,
|
||||
icon-hover-color: $icon-hover-color,
|
||||
icon-toast-hover-color: $white,
|
||||
button-background-active-color: $p5js-active-pink,
|
||||
button-nav-inactive-color: $middle-gray,
|
||||
button-hover-color: $lightest,
|
||||
button-active-color: $lightest,
|
||||
modal-background-color: $light,
|
||||
preferences-button-background-color: $medium-light,
|
||||
modal-border-color: $middle-light,
|
||||
icon-color: $middle-gray,
|
||||
icon-hover-color: $darker,
|
||||
icon-toast-hover-color: $lightest,
|
||||
shadow-color: rgba(0, 0, 0, 0.16),
|
||||
console-background-color: #eee,
|
||||
console-color: $white,
|
||||
console-header-background-color: #d6d6d6,
|
||||
console-header-color: #b1b1b1,
|
||||
console-info-background-color: $lightsteelblue,
|
||||
console-warn-background-color: $orange,
|
||||
console-debug-background-color: $dodgerblue,
|
||||
console-error-background-color: $red,
|
||||
ide-border-color: #f4f4f4,
|
||||
editor-gutter-color: #f4f4f4,
|
||||
file-selected-color: #f4f4f4,
|
||||
input-text-color: #333,
|
||||
input-border-color: #b5b5b5,
|
||||
about-list-text-color: #4a4a4a,
|
||||
search-background-color: #ffffff,
|
||||
search-clear-background-color: #e9e9e9,
|
||||
search-hover-text-color: #ffffff,
|
||||
search-hover-background-color: #4d4d4d,
|
||||
dropdown-color: #414141,
|
||||
keyboard-shortcut-color: #757575,
|
||||
console-background-color: $light,
|
||||
console-color: $lightest,
|
||||
console-header-background-color: $medium-light,
|
||||
console-header-color: $darker,
|
||||
console-info-background-color: #5276B7,
|
||||
console-warn-background-color: #996B00,
|
||||
console-debug-background-color: #0071AD,
|
||||
console-error-background-color: #D11518,
|
||||
ide-border-color: $medium-light,
|
||||
editor-gutter-color: $lighter,
|
||||
file-hover-color: $light,
|
||||
file-selected-color: $medium-light,
|
||||
input-text-color: $dark,
|
||||
input-background-color: $lightest,
|
||||
input-secondary-background-color: $lightest,
|
||||
input-border-color: $middle-light,
|
||||
search-background-color: $lightest,
|
||||
search-clear-background-color: $light,
|
||||
search-hover-text-color: $lightest,
|
||||
search-hover-background-color: $medium-dark,
|
||||
keyboard-shortcut-color: $middle-gray,
|
||||
nav-hover-color: $p5js-pink,
|
||||
nav-border-color: $middle-light,
|
||||
error-color: $p5js-pink,
|
||||
table-row-stripe-color: #d6d6d6,
|
||||
table-row-stripe-color: $medium-light,
|
||||
codefold-icon-open: url(../images/triangle-arrow-down.svg),
|
||||
codefold-icon-closed: url(../images/triangle-arrow-right.svg),
|
||||
|
||||
primary-button-color: #fff,
|
||||
primary-button-color: $lightest,
|
||||
primary-button-background-color: $p5js-pink,
|
||||
|
||||
table-button-color: $white,
|
||||
table-button-background-color: #979797,
|
||||
table-button-active-color: $white,
|
||||
table-button-color: $lightest,
|
||||
table-button-background-color: $middle-gray,
|
||||
table-button-active-color: $lightest,
|
||||
table-button-background-active-color: #00A1D3,
|
||||
table-button-hover-color: $white,
|
||||
table-button-hover-color: $lightest,
|
||||
table-button-background-hover-color: $p5js-pink,
|
||||
|
||||
progress-bar-background-color: #979797,
|
||||
progress-bar-active-color: #f10046,
|
||||
progress-bar-background-color: $middle-gray,
|
||||
progress-bar-active-color: $p5js-active-pink,
|
||||
|
||||
form-title-color: rgba(51, 51, 51, 0.87),
|
||||
form-secondary-title-color: $middleGray,
|
||||
form-secondary-title-color: $medium-dark,
|
||||
form-input-text-color: $dark,
|
||||
form-input-placeholder-text-color: $middleLight,
|
||||
form-border-color: #b5b5b5,
|
||||
form-button-background-color: $white,
|
||||
form-button-color: #f10046,
|
||||
form-button-background-hover-color: $p5js-pink,
|
||||
form-button-background-active-color: #f10046,
|
||||
form-button-hover-color: $white,
|
||||
form-button-active-color: $white,
|
||||
form-navigation-options-color: #999999
|
||||
form-input-placeholder-text-color: $middle-light,
|
||||
form-navigation-options-color: $middle-dark
|
||||
),
|
||||
dark: (
|
||||
logo-color: $p5js-pink,
|
||||
primary-text-color: $white,
|
||||
logo-background-color: $lightest,
|
||||
heavy-text-color: $lightest,
|
||||
primary-text-color: $lightest,
|
||||
dropzone-text-color: $black,
|
||||
modal-button-color: $white,
|
||||
heading-text-color: $white,
|
||||
secondary-text-color: #DADADA,
|
||||
inactive-text-color: #b5b5b5,
|
||||
background-color: #333,
|
||||
preview-placeholder-color: #dcdcdc,
|
||||
button-background-color: $white,
|
||||
button-color: $black,
|
||||
button-border-color: #979797,
|
||||
toolbar-button-color: $p5js-pink,
|
||||
toolbar-button-background-color: #424242,
|
||||
modal-button-color: $lightest,
|
||||
secondary-text-color: $medium-light,
|
||||
inactive-text-color: $middle-light,
|
||||
background-color: $darker,
|
||||
button-background-color: $dark,
|
||||
button-secondary-background-color: $medium-dark,
|
||||
button-color: $light,
|
||||
button-border-color: $middle-dark,
|
||||
toolbar-button-color: $lightest,
|
||||
toolbar-button-background-color: $medium-dark,
|
||||
button-background-hover-color: $p5js-pink,
|
||||
button-background-active-color: #f10046,
|
||||
button-nav-inactive-color: #a0a0a0,
|
||||
button-hover-color: $white,
|
||||
button-active-color: $white,
|
||||
modal-background-color: #444,
|
||||
modal-button-background-color: #5f5f5f,
|
||||
modal-border-color: #949494,
|
||||
icon-color: #a9a9a9,
|
||||
icon-hover-color: $white,
|
||||
icon-toast-hover-color: $white,
|
||||
button-background-active-color: $p5js-active-pink,
|
||||
button-nav-inactive-color: $middle-light,
|
||||
button-hover-color: $lightest,
|
||||
button-active-color: $lightest,
|
||||
modal-background-color: $dark,
|
||||
preferences-button-background-color: $middle-dark,
|
||||
modal-border-color: $middle-dark,
|
||||
icon-color: $middle-light,
|
||||
icon-hover-color: $lightest,
|
||||
icon-toast-hover-color: $lightest,
|
||||
shadow-color: rgba(0, 0, 0, 0.16),
|
||||
console-background-color: #4f4f4f,
|
||||
console-color: $black,
|
||||
console-header-background-color: #3f3f3f,
|
||||
console-header-color: #b5b5b5,
|
||||
console-info-background-color: $lightsteelblue,
|
||||
console-warn-background-color: $orange,
|
||||
console-debug-background-color: $dodgerblue,
|
||||
console-error-background-color: $red,
|
||||
ide-border-color: #949494,
|
||||
editor-gutter-color: #363636,
|
||||
file-selected-color: #404040,
|
||||
input-text-color: #333,
|
||||
input-border-color: #b5b5b5,
|
||||
about-list-text-color: #f4f4f4,
|
||||
search-background-color: #ffffff,
|
||||
search-clear-background-color: #4f4f4f,
|
||||
search-hover-text-color: #ffffff,
|
||||
console-background-color: $dark,
|
||||
console-color: $lightest,
|
||||
console-header-background-color: $medium-dark,
|
||||
console-header-color: $lightest,
|
||||
console-info-background-color: #5276B7,
|
||||
console-warn-background-color: #966C08,
|
||||
console-error-background-color: #DD3134,
|
||||
console-debug-background-color: #097BB3,
|
||||
ide-border-color: $middle-dark,
|
||||
editor-gutter-color: $darker,
|
||||
file-hover-color: $dark,
|
||||
file-selected-color: $medium-dark,
|
||||
input-text-color: $lightest,
|
||||
input-background-color: $dark,
|
||||
input-secondary-background-color: $medium-dark,
|
||||
input-border-color: $middle-dark,
|
||||
search-background-color: $lightest,
|
||||
search-clear-background-color: $medium-dark,
|
||||
search-hover-text-color: $lightest,
|
||||
search-hover-background-color: $p5js-pink,
|
||||
dropdown-color: #dadada,
|
||||
keyboard-shortcut-color: #B5B5B5,
|
||||
keyboard-shortcut-color: $middle-light,
|
||||
nav-hover-color: $p5js-pink,
|
||||
nav-border-color: $middle-dark,
|
||||
error-color: $p5js-pink,
|
||||
table-row-stripe-color: #3f3f3f,
|
||||
table-row-stripe-color: $dark,
|
||||
codefold-icon-open: url(../images/triangle-arrow-down-white.svg),
|
||||
codefold-icon-closed: url(../images/triangle-arrow-right-white.svg),
|
||||
|
||||
primary-button-color: #fff,
|
||||
primary-button-color: $lightest,
|
||||
primary-button-background-color: $p5js-pink,
|
||||
|
||||
table-button-color: $white,
|
||||
table-button-background-color: #979797,
|
||||
table-button-active-color: $white,
|
||||
table-button-color: $lightest,
|
||||
table-button-background-color: $middle-gray,
|
||||
table-button-active-color: $lightest,
|
||||
table-button-background-active-color: #00A1D3,
|
||||
table-button-hover-color: $white,
|
||||
table-button-hover-color: $lightest,
|
||||
table-button-background-hover-color: $p5js-pink,
|
||||
|
||||
progress-bar-background-color: #979797,
|
||||
progress-bar-active-color: #f10046,
|
||||
progress-bar-background-color: $middle-gray,
|
||||
progress-bar-active-color: $p5js-active-pink,
|
||||
|
||||
form-title-color: $white,
|
||||
form-secondary-title-color: #b5b5b5,
|
||||
form-border-color: #b5b5b5,
|
||||
form-button-background-color: $black,
|
||||
form-button-color: #f10046,
|
||||
form-button-background-hover-color: $p5js-pink,
|
||||
form-button-background-active-color: #f10046,
|
||||
form-button-hover-color: $white,
|
||||
form-button-active-color: $white,
|
||||
form-navigation-options-color: #999999
|
||||
form-title-color: $lightest,
|
||||
form-secondary-title-color: $medium-light,
|
||||
form-navigation-options-color: $middle-light
|
||||
),
|
||||
contrast: (
|
||||
logo-color: $yellow,
|
||||
primary-text-color: $yellow,
|
||||
logo-background-color: $darker,
|
||||
heavy-text-color: $yellow,
|
||||
primary-text-color: $lightest,
|
||||
dropzone-text-color: $black,
|
||||
modal-button-color: #333,
|
||||
heading-text-color: #e1e1e1,
|
||||
secondary-text-color: #e1e1e1,
|
||||
inactive-text-color: #f2f2f2,
|
||||
background-color: #333,
|
||||
button-background-color: $white,
|
||||
button-color: $black,
|
||||
button-border-color: #979797,
|
||||
toolbar-button-color: #333333,
|
||||
toolbar-button-background-color: #C1C1C1,
|
||||
modal-button-color: $dark,
|
||||
secondary-text-color: $lighter,
|
||||
inactive-text-color: $light,
|
||||
background-color: $darker,
|
||||
button-background-color: $dark,
|
||||
button-secondary-background-color: $medium-dark,
|
||||
button-color: $light,
|
||||
button-border-color: $middle-dark,
|
||||
toolbar-button-color: $dark,
|
||||
toolbar-button-background-color: $medium-light,
|
||||
button-background-hover-color: $yellow,
|
||||
button-background-active-color: $yellow,
|
||||
button-nav-inactive-color: #a0a0a0,
|
||||
button-hover-color: #333333,
|
||||
button-active-color: #333333,
|
||||
modal-background-color: #444,
|
||||
modal-button-background-color: #C1C1C1,
|
||||
modal-border-color: #949494,
|
||||
icon-color: #d9d9d9,
|
||||
button-nav-inactive-color: $light,
|
||||
button-hover-color: $dark,
|
||||
button-active-color: $dark,
|
||||
modal-background-color: $dark,
|
||||
preferences-button-background-color: $medium-light,
|
||||
modal-border-color: $middle-dark,
|
||||
icon-color: $medium-light,
|
||||
icon-hover-color: $yellow,
|
||||
icon-toast-hover-color: $yellow,
|
||||
shadow-color: rgba(0, 0, 0, 0.16),
|
||||
console-background-color: #4f4f4f,
|
||||
console-background-color: $dark,
|
||||
console-color: $black,
|
||||
console-header-background-color: #3f3f3f,
|
||||
console-header-color: #d9d9d9,
|
||||
console-header-background-color: $medium-dark,
|
||||
console-header-color: $lightest,
|
||||
console-info-background-color: $lightsteelblue,
|
||||
console-warn-background-color: $orange,
|
||||
console-debug-background-color: $dodgerblue,
|
||||
console-error-background-color: $red,
|
||||
ide-border-color: #949494,
|
||||
editor-gutter-color: #454545,
|
||||
file-selected-color: #404040,
|
||||
input-text-color: #333,
|
||||
input-border-color: #b5b5b5,
|
||||
about-list-text-color: #f4f4f4,
|
||||
ide-border-color: $middle-dark,
|
||||
editor-gutter-color: $darker,
|
||||
file-hover-color: $dark,
|
||||
file-selected-color: $medium-dark,
|
||||
input-text-color: $lightest,
|
||||
input-background-color: $dark,
|
||||
input-secondary-background-color: $medium-dark,
|
||||
input-border-color: $middle-dark,
|
||||
search-background-color: $white,
|
||||
search-clear-background-color: #444,
|
||||
search-hover-text-color: $black,
|
||||
search-clear-background-color: $medium-dark,
|
||||
search-hover-text-color: $dark,
|
||||
search-hover-background-color: $yellow,
|
||||
dropdown-color: #e1e1e1,
|
||||
keyboard-shortcut-color: #e1e1e1,
|
||||
keyboard-shortcut-color: $middle-light,
|
||||
nav-hover-color: $yellow,
|
||||
nav-border-color: $middle-dark,
|
||||
error-color: $p5-contrast-pink,
|
||||
table-row-stripe-color: #3f3f3f,
|
||||
table-row-stripe-color: $dark,
|
||||
codefold-icon-open: url(../images/triangle-arrow-down-white.svg),
|
||||
codefold-icon-closed: url(../images/triangle-arrow-right-white.svg),
|
||||
|
||||
primary-button-color: #fff,
|
||||
primary-button-color: $lightest,
|
||||
primary-button-background-color: $p5js-pink,
|
||||
|
||||
table-button-color: #333,
|
||||
table-button-background-color: #C1C1C1,
|
||||
table-button-active-color: #333,
|
||||
table-button-color: $dark,
|
||||
table-button-background-color: $middle-gray,
|
||||
table-button-active-color: $dark,
|
||||
table-button-background-active-color: #00FFFF,
|
||||
table-button-hover-color: #333,
|
||||
table-button-hover-color: $dark,
|
||||
table-button-background-hover-color: $yellow,
|
||||
|
||||
progress-bar-background-color: #979797,
|
||||
progress-bar-active-color: #f10046,
|
||||
progress-bar-background-color: $middle-gray,
|
||||
progress-bar-active-color: $p5js-active-pink,
|
||||
|
||||
form-title-color: $white,
|
||||
form-secondary-title-color: #b5b5b5,
|
||||
form-border-color: #b5b5b5,
|
||||
form-button-background-color: $black,
|
||||
form-button-color: #f10046,
|
||||
form-button-background-hover-color: $p5-contrast-pink,
|
||||
form-button-background-active-color: #f10046,
|
||||
form-button-hover-color: $white,
|
||||
form-button-active-color: $white,
|
||||
form-navigation-options-color: #999999
|
||||
form-title-color: $lightest,
|
||||
form-secondary-title-color: $medium-light,
|
||||
form-navigation-options-color: $middle-light
|
||||
)
|
||||
);
|
||||
|
||||
$console-warn-color: #ffbe05;
|
||||
$console-error-color: #ff5f52;
|
||||
$toast-background-color: $medium-dark;
|
||||
$toast-text-color: $lightest;
|
||||
|
||||
$toast-background-color: #4A4A4A;
|
||||
$toast-text-color: $white;
|
||||
$light-console-error-color: #D11518;
|
||||
$light-console-warn-color: #FAAF00;
|
||||
$light-console-debug-color: #0071AD;
|
||||
|
||||
$dark-console-error-color: #DF3A3D;
|
||||
$dark-console-warn-color: #F5BC38;
|
||||
$dark-console-debug-color: #0C99E2;
|
||||
|
||||
$about-play-background-color: rgba(255, 255, 255, 0.7);
|
||||
$about-button-border-color: rgba(151, 151, 151, 0.7);
|
||||
|
|
|
|||
|
|
@ -39,6 +39,7 @@ textarea {
|
|||
padding: #{10 / $base-font-size}rem;
|
||||
@include themify() {
|
||||
color: getThemifyVariable('input-text-color');
|
||||
background-color: getThemifyVariable('input-background-color');
|
||||
border-color: getThemifyVariable('input-border-color');
|
||||
}
|
||||
}
|
||||
|
|
@ -87,3 +88,11 @@ thead {
|
|||
th {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
a:focus,
|
||||
button:focus,
|
||||
input:focus,
|
||||
textarea:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 1px $outline-color;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -45,11 +45,6 @@
|
|||
padding-bottom: #{20 / $base-font-size}rem;
|
||||
padding-left: #{20 / $base-font-size}rem;
|
||||
width: #{720 / $base-font-size}rem;
|
||||
& a {
|
||||
@include themify() {
|
||||
color: getThemifyVariable('form-navigation-options-color');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.about__content-column {
|
||||
|
|
@ -76,9 +71,6 @@
|
|||
@include themify() {
|
||||
padding-top: #{10 / $base-font-size}rem;
|
||||
font-size: #{16 / $base-font-size}rem;
|
||||
& a {
|
||||
color: getThemifyVariable(about-list-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,5 @@
|
|||
.api-key-form__summary {
|
||||
padding-top: #{25 / $base-font-size}rem;
|
||||
@include themify() {
|
||||
color: getThemifyVariable('heading-text-color');
|
||||
}
|
||||
}
|
||||
|
||||
.api-key-form__section {
|
||||
|
|
@ -13,9 +10,6 @@
|
|||
padding: #{15 / $base-font-size}rem 0;
|
||||
font-size: #{21 / $base-font-size}rem;
|
||||
font-weight: bold;
|
||||
@include themify() {
|
||||
color: getThemifyVariable('heading-text-color');
|
||||
}
|
||||
}
|
||||
|
||||
.api-key-form__create-button {
|
||||
|
|
@ -99,9 +93,6 @@
|
|||
margin-bottom: #{10 / $base-font-size}rem;
|
||||
font-size: #{18 / $base-font-size}rem;
|
||||
font-weight: bold;
|
||||
@include themify() {
|
||||
color: getThemifyVariable('heading-text-color');
|
||||
}
|
||||
}
|
||||
|
||||
.api-key-form__new-token__info {
|
||||
|
|
|
|||
|
|
@ -83,7 +83,7 @@
|
|||
|
||||
@include themify() {
|
||||
& polygon {
|
||||
fill: getThemifyVariable('dropdown-color');
|
||||
fill: getThemifyVariable('inactive-text-color');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
background-color: map-get($theme-map, 'modal-background-color');
|
||||
border: 1px solid map-get($theme-map, 'modal-border-color');
|
||||
box-shadow: 0 0 18px 0 getThemifyVariable('shadow-color');
|
||||
color: getThemifyVariable('dropdown-color');
|
||||
color: getThemifyVariable('primary-text-color');
|
||||
}
|
||||
|
||||
text-align: left;
|
||||
|
|
|
|||
|
|
@ -39,12 +39,8 @@
|
|||
// padding: #{8 / $base-font-size}rem 0;
|
||||
}
|
||||
|
||||
.collection-metadata__name .editable-input__label span {
|
||||
padding: 0.83333rem 0;
|
||||
|
||||
@include themify() {
|
||||
color: getThemifyVariable('primary-text-color');
|
||||
}
|
||||
.collection-metadata__name .editable-input__label {
|
||||
padding: 0.83333rem #{7 / $base-font-size}rem;
|
||||
}
|
||||
|
||||
.collection-metadata__name,
|
||||
|
|
@ -63,9 +59,9 @@
|
|||
}
|
||||
|
||||
.collection-metadata__description {
|
||||
margin-top: #{8 / $base-font-size}rem;
|
||||
padding-top: #{8 / $base-font-size}rem;
|
||||
text-align: left;
|
||||
font-size: 14px;
|
||||
font-size: #{14 / $base-font-size}rem;
|
||||
}
|
||||
|
||||
.collection-metadata__description .editable-input__label {
|
||||
|
|
|
|||
|
|
@ -11,37 +11,82 @@ $CONSOLE_FEED_LIGHT_STYLES: (
|
|||
LOG_ERROR_COLOR: '#D11518',
|
||||
LOG_ERROR_BORDER: 'hsl(0, 100%, 92%)',
|
||||
LOG_WARN_BACKGROUND: 'hsl(50, 100%, 95%)',
|
||||
LOG_WARN_COLOR: '#FAAF00',
|
||||
LOG_WARN_COLOR: '#996B00',
|
||||
LOG_WARN_BORDER: 'hsl(50, 100%, 88%)',
|
||||
LOG_INFO_COLOR: '#7D7D7D',
|
||||
LOG_DEBUG_COLOR: '#007BBB',
|
||||
LOG_COLOR: 'rgb(128, 128, 128)'
|
||||
LOG_INFO_COLOR: '#4D4D4D',
|
||||
LOG_DEBUG_COLOR: '#0071AD',
|
||||
LOG_DEBUG_BACKGROUND: '#D6F1FF',
|
||||
LOG_DEBUG_BORDER: '#C2EBFF',
|
||||
LOG_COLOR: '#4D4D4D',
|
||||
ARROW_COLOR: '#666',
|
||||
OBJECT_NAME_COLOR: '#333',
|
||||
OBJECT_VALUE_NULL_COLOR: '#747474',
|
||||
OBJECT_VALUE_UNDEFINED_COLOR: '#747474',
|
||||
OBJECT_VALUE_STRING_COLOR: '#47820A',
|
||||
OBJECT_VALUE_REGEXP_COLOR: '#A06801',
|
||||
OBJECT_VALUE_NUMBER_COLOR: '#333',
|
||||
OBJECT_VALUE_BOOLEAN_COLOR: '#D52889',
|
||||
OBJECT_VALUE_FUNCTION_KEYWORD_COLOR: '#0B7CA9',
|
||||
);
|
||||
|
||||
$CONSOLE_FEED_DARK_STYLES: (
|
||||
BASE_BACKGROUND_COLOR: '',
|
||||
BASE_COLOR: 'white',
|
||||
OBJECT_NAME_COLOR: 'white',
|
||||
OBJECT_VALUE_NULL_COLOR: 'hsl(230, 100%, 80%)',
|
||||
OBJECT_VALUE_UNDEFINED_COLOR: 'hsl(230, 100%, 80%)',
|
||||
OBJECT_VALUE_REGEXP_COLOR: 'hsl(230, 100%, 80%)',
|
||||
OBJECT_VALUE_STRING_COLOR: 'hsl(230, 100%, 80%)',
|
||||
OBJECT_VALUE_NULL_COLOR: '#DE4A9B',
|
||||
OBJECT_VALUE_UNDEFINED_COLOR: '#DE4A9B',
|
||||
OBJECT_VALUE_REGEXP_COLOR: '#EE9900',
|
||||
OBJECT_VALUE_STRING_COLOR: '#58a10b',
|
||||
OBJECT_VALUE_SYMBOL_COLOR: 'hsl(230, 100%, 80%)',
|
||||
OBJECT_VALUE_NUMBER_COLOR: 'hsl(230, 100%, 80%)',
|
||||
OBJECT_VALUE_BOOLEAN_COLOR: 'hsl(230, 100%, 80%)',
|
||||
OBJECT_VALUE_FUNCTION_KEYWORD_COLOR: 'hsl(230, 100%, 80%)',
|
||||
LOG_ERROR_BACKGROUND: 'hsl(0, 100%, 8%)',
|
||||
LOG_ERROR_COLOR: '#df3a3d',
|
||||
OBJECT_VALUE_NUMBER_COLOR: 'white',
|
||||
OBJECT_VALUE_BOOLEAN_COLOR: '#DE4A9B',
|
||||
OBJECT_VALUE_FUNCTION_KEYWORD_COLOR: '#b58318',
|
||||
LOG_ERROR_BACKGROUND: '#1F0000',
|
||||
LOG_ERROR_COLOR: '#DF3A3D',
|
||||
LOG_WARN_BACKGROUND: 'hsl(50, 100%, 10%)',
|
||||
LOG_WARN_COLOR: '#f5bc38',
|
||||
LOG_INFO_COLOR: '#a3a3a3',
|
||||
LOG_DEBUG_COLOR: '#0c99e2',
|
||||
LOG_WARN_COLOR: '#F5BC38',
|
||||
LOG_INFO_COLOR: '#D9D9D9',
|
||||
LOG_INFO_BORDER: '#4D4D4D',
|
||||
LOG_COLOR: '#D9D9D9',
|
||||
LOG_DEBUG_COLOR: '#0C99E2',
|
||||
LOG_DEBUG_BACKGROUND: '#05232E',
|
||||
LOG_DEBUG_BORDER: '#0C546E',
|
||||
TABLE_BORDER_COLOR: 'grey',
|
||||
TABLE_TH_BACKGROUND_COLOR: 'transparent',
|
||||
TABLE_TH_HOVER_COLOR: 'grey',
|
||||
TABLE_SORT_ICON_COLOR: 'grey',
|
||||
TABLE_DATA_BACKGROUND_IMAGE: 'grey',
|
||||
TABLE_DATA_BACKGROUND_SIZE: 'grey'
|
||||
TABLE_DATA_BACKGROUND_SIZE: 'grey',
|
||||
ARROW_COLOR: '#D9D9D9'
|
||||
);
|
||||
|
||||
$CONSOLE_FEED_CONTRAST_STYLES: $CONSOLE_FEED_DARK_STYLES;
|
||||
$CONSOLE_FEED_CONTRAST_STYLES: (
|
||||
BASE_BACKGROUND_COLOR: '',
|
||||
BASE_COLOR: 'white',
|
||||
OBJECT_NAME_COLOR: 'white',
|
||||
OBJECT_VALUE_NULL_COLOR: '#FFA9D9',
|
||||
OBJECT_VALUE_UNDEFINED_COLOR: '#FFA9D9',
|
||||
OBJECT_VALUE_REGEXP_COLOR: '#2DE9B6',
|
||||
OBJECT_VALUE_STRING_COLOR: '#2DE9B6',
|
||||
OBJECT_VALUE_SYMBOL_COLOR: '#B3BEFF',
|
||||
OBJECT_VALUE_NUMBER_COLOR: '#FFA9D9',
|
||||
OBJECT_VALUE_BOOLEAN_COLOR: '#FFA9D9',
|
||||
OBJECT_VALUE_FUNCTION_KEYWORD_COLOR: '#F5DC23',
|
||||
LOG_ERROR_BACKGROUND: '#1F0000',
|
||||
LOG_ERROR_COLOR: '#EA7B7D',
|
||||
LOG_WARN_BACKGROUND: 'hsl(50, 100%, 10%)',
|
||||
LOG_WARN_COLOR: '#F5BC38',
|
||||
LOG_INFO_COLOR: '#D9D9D9',
|
||||
LOG_INFO_BORDER: '#4D4D4D',
|
||||
LOG_COLOR: '#D9D9D9',
|
||||
LOG_DEBUG_COLOR: '#38B6F5',
|
||||
LOG_DEBUG_BACKGROUND: '#05232E',
|
||||
LOG_DEBUG_BORDER: '#0C546E',
|
||||
TABLE_BORDER_COLOR: 'grey',
|
||||
TABLE_TH_BACKGROUND_COLOR: 'transparent',
|
||||
TABLE_TH_HOVER_COLOR: 'grey',
|
||||
TABLE_SORT_ICON_COLOR: 'grey',
|
||||
TABLE_DATA_BACKGROUND_IMAGE: 'grey',
|
||||
TABLE_DATA_BACKGROUND_SIZE: 'grey',
|
||||
ARROW_COLOR: '#D9D9D9'
|
||||
);
|
||||
|
|
@ -56,6 +56,12 @@
|
|||
.preview-console__collapse {
|
||||
padding-top: #{3 / $base-font-size}rem;
|
||||
@include icon();
|
||||
@include themify() {
|
||||
& g,
|
||||
& polygon {
|
||||
fill: getThemifyVariable('secondary-text-color');
|
||||
}
|
||||
}
|
||||
.preview-console--collapsed & {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -64,6 +70,12 @@
|
|||
.preview-console__expand {
|
||||
padding-top: #{3 / $base-font-size}rem;
|
||||
@include icon();
|
||||
@include themify() {
|
||||
& g,
|
||||
& polygon {
|
||||
fill: getThemifyVariable('secondary-text-color');
|
||||
}
|
||||
}
|
||||
display: none;
|
||||
.preview-console--collapsed & {
|
||||
display: inline-block;
|
||||
|
|
@ -78,6 +90,10 @@
|
|||
.preview-console__clear {
|
||||
@include themify() {
|
||||
@extend %link;
|
||||
color: getThemifyVariable('secondary-text-color');
|
||||
&:hover {
|
||||
color: getThemifyVariable('heavy-text-color');
|
||||
}
|
||||
}
|
||||
background: transparent;
|
||||
border: none;
|
||||
|
|
|
|||
|
|
@ -4,15 +4,18 @@
|
|||
align-items: center;
|
||||
}
|
||||
|
||||
.editable-input__label {
|
||||
button.editable-input__label {
|
||||
display: flex;
|
||||
|
||||
@include themify() {
|
||||
color: getThemifyVariable('inactive-text-color');
|
||||
& path {
|
||||
fill: getThemifyVariable('inactive-text-color');
|
||||
}
|
||||
&:hover {
|
||||
color: getThemifyVariable('primary-text-color');
|
||||
& .editable-input__icon path {
|
||||
fill: getThemifyVariable('primary-text-color');
|
||||
color: getThemifyVariable('logo-color');
|
||||
& path {
|
||||
fill: getThemifyVariable('logo-color');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -23,23 +26,13 @@
|
|||
font-weight: unset;
|
||||
}
|
||||
|
||||
.editable-input__input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.editable-input__icon svg {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
|
||||
@include themify() {
|
||||
path {
|
||||
fill: getThemifyVariable('inactive-text-color');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.editable-input:hover {
|
||||
@include themify() {
|
||||
.editable-input__icon path {
|
||||
fill: getThemifyVariable('primary-text-color');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.editable-input--is-not-editing .editable-input__input,
|
||||
|
|
@ -49,5 +42,5 @@
|
|||
|
||||
.editable-input--is-editing .editable-input__input,
|
||||
.editable-input--is-not-editing .editable-input__label {
|
||||
display: block;
|
||||
display: flex;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@ pre.CodeMirror-line {
|
|||
}
|
||||
|
||||
.CodeMirror-gutter-elt:not(.CodeMirror-linenumber) {
|
||||
opacity: 0.3;
|
||||
opacity: 0.2;
|
||||
width: #{49 / $base-font-size}rem !important;
|
||||
height: 100%;
|
||||
left: 49px !important;
|
||||
|
|
@ -120,12 +120,10 @@ pre.CodeMirror-line {
|
|||
width: 100%;
|
||||
margin-bottom: #{12 / $base-font-size}rem;
|
||||
@include themify() {
|
||||
background-color: getThemifyVariable('search-background-color');
|
||||
color: getThemifyVariable('input-text-color');
|
||||
background-color: getThemifyVariable('input-secondary-background-color');
|
||||
border: solid 0.5px getThemifyVariable('button-border-color');
|
||||
}
|
||||
&:focus {
|
||||
background-color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.CodeMirror-search-count {
|
||||
|
|
@ -145,22 +143,30 @@ pre.CodeMirror-line {
|
|||
.CodeMirror-search-modifiers {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.CodeMirror-regexp-button,
|
||||
.CodeMirror-case-button,
|
||||
.CodeMirror-word-button {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
@include themify() {
|
||||
// @extend %button;
|
||||
padding: #{2 / $base-font-size}rem #{7 / $base-font-size}rem;
|
||||
border: 2px solid transparent;
|
||||
&:hover {
|
||||
border-color: getThemifyVariable("button-border-color");
|
||||
}
|
||||
|
||||
}
|
||||
width: #{35 / $base-font-size}rem;
|
||||
height: #{35 / $base-font-size}rem;
|
||||
|
||||
& + & {
|
||||
margin-left: #{10 / $base-font-size}rem;
|
||||
}
|
||||
|
||||
word-break: keep-all;
|
||||
white-space: nowrap;
|
||||
|
||||
@include themify() {
|
||||
color: getThemifyVariable('inactive-text-color');
|
||||
}
|
||||
}
|
||||
|
||||
.CodeMirror-regexp-button .label,
|
||||
|
|
@ -171,7 +177,9 @@ pre.CodeMirror-line {
|
|||
|
||||
[aria-checked="true"] {
|
||||
@include themify() {
|
||||
color: getThemifyVariable('primary-text-color');
|
||||
color: getThemifyVariable("heavy-text-color");
|
||||
background-color: getThemifyVariable("button-secondary-background-color");
|
||||
border-color: getThemifyVariable("button-border-color");
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -374,7 +382,7 @@ pre.CodeMirror-line {
|
|||
|
||||
.editor__file-name {
|
||||
@include themify() {
|
||||
color: getThemifyVariable('secondary-text-color');
|
||||
color: getThemifyVariable('primary-text-color');
|
||||
}
|
||||
height: #{29 / $base-font-size}rem;
|
||||
padding-top: #{7 / $base-font-size}rem;
|
||||
|
|
|
|||
|
|
@ -53,6 +53,7 @@
|
|||
font-size: #{16 / $base-font-size}rem;
|
||||
@include themify() {
|
||||
color: getThemifyVariable('form-input-text-color');
|
||||
background-color: getThemifyVariable('input-background-color');
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -45,6 +45,13 @@
|
|||
flex: 1;
|
||||
}
|
||||
|
||||
input.new-file-form__submit,
|
||||
input.new-folder-form__submit {
|
||||
@include themify() {
|
||||
background-color: getThemifyVariable("button-secondary-background-color");
|
||||
}
|
||||
}
|
||||
|
||||
.modal__divider {
|
||||
text-align: center;
|
||||
margin: #{20 / $base-font-size}rem 0;
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
justify-content: space-between;
|
||||
|
||||
@include themify() {
|
||||
border-bottom: 1px dashed map-get($theme-map, 'inactive-text-color');
|
||||
border-bottom: 1px dashed map-get($theme-map, 'nav-border-color');
|
||||
}
|
||||
|
||||
& button {
|
||||
|
|
@ -23,13 +23,14 @@
|
|||
align-items: center;
|
||||
}
|
||||
|
||||
.nav__items-left {
|
||||
& button {
|
||||
@include themify() {
|
||||
color: getThemifyVariable('secondary-text-color');
|
||||
}
|
||||
}
|
||||
}
|
||||
// .nav__items-left,
|
||||
// .nav__items-right {
|
||||
// & button, & a {
|
||||
// @include themify() {
|
||||
// color: getThemifyVariable('primary-text-color');
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
.nav__item {
|
||||
position: relative;
|
||||
|
|
@ -43,13 +44,14 @@
|
|||
}
|
||||
}
|
||||
|
||||
.nav__item:first-child,
|
||||
.nav__item--no-icon {
|
||||
padding-left: #{15 / $base-font-size}rem;
|
||||
}
|
||||
|
||||
.nav__item:last-child {
|
||||
padding-right: #{15 / $base-font-size}rem;
|
||||
.nav__item-header-triangle polygon {
|
||||
@include themify() {
|
||||
fill: getThemifyVariable('icon-color');
|
||||
}
|
||||
}
|
||||
|
||||
.nav__item:hover {
|
||||
|
|
@ -116,10 +118,20 @@
|
|||
.nav__item-spacer {
|
||||
@include themify() {
|
||||
color: map-get($theme-map, 'inactive-text-color');
|
||||
margin: 0 #{8 / $base-font-size}rem;
|
||||
margin-left: #{8 / $base-font-size}rem;
|
||||
}
|
||||
}
|
||||
|
||||
.nav__item-or {
|
||||
@include themify() {
|
||||
color: map-get($theme-map, 'inactive-text-color');
|
||||
}
|
||||
}
|
||||
|
||||
.nav__auth-button {
|
||||
padding: #{10 / $base-font-size}rem;
|
||||
}
|
||||
|
||||
// .nav__dropdown button {
|
||||
// padding: 0;
|
||||
// }
|
||||
|
|
@ -168,6 +180,12 @@
|
|||
fill: none;
|
||||
}
|
||||
|
||||
.svg__logo g g:first-of-type use {
|
||||
@include themify() {
|
||||
fill: getThemifyVariable('logo-background-color');
|
||||
}
|
||||
}
|
||||
|
||||
.nav__keyboard-shortcut {
|
||||
font-size: #{12 / $base-font-size}rem;
|
||||
font-family: Inconsololata, monospace;
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
//light gray: #f4f4f4
|
||||
//dark gray: #b5b5b5
|
||||
|
||||
$p5-contrast-black: #333;
|
||||
$p5-contrast-black: #1C1C1C;
|
||||
$p5-contrast-gray: #A0A0A0;
|
||||
$p5-contrast-white: #FDFDFD;
|
||||
$p5-contrast-darkgray: #333333;
|
||||
|
|
@ -84,12 +84,12 @@ $p5-contrast-activeline: #999999;
|
|||
}
|
||||
|
||||
.cm-s-p5-contrast .CodeMirror-activeline-background {
|
||||
background-color: #404040;
|
||||
background-color: $dark;
|
||||
}
|
||||
|
||||
.cm-s-p5-contrast .CodeMirror-activeline-gutter {
|
||||
background-color: #454545;
|
||||
border-right: 1px solid #949494;
|
||||
background-color: $dark;
|
||||
border-right: 1px solid $middle-dark;
|
||||
}
|
||||
|
||||
.cm-s-p5-contrast .cm-error {
|
||||
|
|
|
|||
|
|
@ -12,9 +12,9 @@
|
|||
|
||||
$p5-dark-lightbrown: #A67F59;
|
||||
$p5-light-green: #42F48F;
|
||||
$p5-dark-black: #333;
|
||||
$p5-dark-pink: #D9328F;
|
||||
$p5-dark-gray: #999999;
|
||||
$p5-dark-black: #1C1C1C;
|
||||
$p5-dark-pink: #DE4A9B;
|
||||
$p5-dark-gray: #9B9B9B;
|
||||
$p5-dark-lightblue: #0F9DD7;
|
||||
$p5-dark-darkblue: #318094;
|
||||
$p5-dark-white: #FDFDFD;
|
||||
|
|
@ -89,12 +89,12 @@ $p5-dark-error: #df3a3d;
|
|||
}
|
||||
|
||||
.cm-s-p5-dark .CodeMirror-activeline-background {
|
||||
background-color: #404040;
|
||||
background-color: $dark;
|
||||
}
|
||||
|
||||
.cm-s-p5-dark .CodeMirror-activeline-gutter {
|
||||
background-color: #454545;
|
||||
border-right: 1px solid #949494;
|
||||
background-color: $dark;
|
||||
border-right: 1px solid $middle-dark;
|
||||
}
|
||||
|
||||
.cm-s-p5-dark span.CodeMirror-matchingbracket {
|
||||
|
|
|
|||
|
|
@ -10,18 +10,16 @@
|
|||
//light gray: #f4f4f4
|
||||
//dark gray: #b5b5b5
|
||||
|
||||
$p5-light-lightbrown: #A67F59;
|
||||
$p5-light-brown: #704F21;
|
||||
$p5-light-brown: #7A5A3A;
|
||||
$p5-light-black: #333333;
|
||||
$p5-light-pink: #D9328F;
|
||||
$p5-light-gray: #A0A0A0;
|
||||
$p5-light-lightblue: #00A1D3;
|
||||
$p5-light-darkblue: #2D7BB6;
|
||||
$p5-light-white: #FDFDFD;
|
||||
$p5-light-orange: #EE9900;
|
||||
$p5-light-lightgray: #E0D7D1;
|
||||
$p5-light-darkgray: #666666;
|
||||
$p5-light-green: #58a10b;
|
||||
$p5-light-pink: #D52889;
|
||||
$p5-light-gray: #666;
|
||||
$p5-light-blue: #0B7CA9;
|
||||
$p5-light-white: $lighter;
|
||||
$p5-light-orange: #A06801;
|
||||
$p5-light-lightgray: $middle-gray;
|
||||
$p5-light-green: #47820A;
|
||||
|
||||
|
||||
$p5-light-gutter: #f4f4f4;
|
||||
$p5-light-number: #b5b5b5;
|
||||
|
|
@ -33,23 +31,23 @@ $p5-light-activeline: rgb(207, 207, 207);
|
|||
color: $p5-light-black;
|
||||
}
|
||||
|
||||
.cm-s-p5-light .cm-comment {
|
||||
color: $p5-light-gray;
|
||||
.cm-s-p5-light span .cm-comment {
|
||||
color: $p5-light-lightgray;
|
||||
}
|
||||
|
||||
.cm-s-p5-light .cm-def {
|
||||
color: $p5-light-lightblue;
|
||||
.cm-s-p5-light span .cm-def {
|
||||
color: $p5-light-blue;
|
||||
}
|
||||
|
||||
.cm-s-p5-light .cm-string {
|
||||
.cm-s-p5-light span .cm-string {
|
||||
color: $p5-light-green;
|
||||
}
|
||||
|
||||
.cm-s-p5-light .cm-string-2 {
|
||||
.cm-s-p5-light span .cm-string-2 {
|
||||
color: $p5-light-orange;
|
||||
}
|
||||
|
||||
.cm-s-p5-light .cm-number {
|
||||
.cm-s-p5-light span .cm-number {
|
||||
color: $p5-light-black;
|
||||
}
|
||||
|
||||
|
|
@ -57,70 +55,71 @@ $p5-light-activeline: rgb(207, 207, 207);
|
|||
color: $p5-light-brown;
|
||||
}
|
||||
|
||||
.cm-s-p5-light .cm-variable {
|
||||
color: $p5-light-lightblue;
|
||||
.cm-s-p5-light span .cm-variable {
|
||||
color: $p5-light-blue;
|
||||
}
|
||||
|
||||
.cm-s-p5-light .cm-variable2 {
|
||||
.cm-s-p5-light span .cm-variable2 {
|
||||
color: $p5-light-black;
|
||||
}
|
||||
|
||||
.cm-s-p5-light .cm-property {
|
||||
.cm-s-p5-light span .cm-property {
|
||||
color: $p5-light-black;
|
||||
}
|
||||
|
||||
.cm-s-p5-light .cm-atom {
|
||||
.cm-s-p5-light span .cm-atom {
|
||||
color: $p5-light-pink;
|
||||
}
|
||||
|
||||
.cm-s-p5-light .cm-operator {
|
||||
color: $p5-light-lightbrown;
|
||||
.cm-s-p5-light span .cm-operator {
|
||||
color: $p5-light-brown;
|
||||
}
|
||||
|
||||
.cm-s-p5-light .cm-linenumber {
|
||||
color: $p5-light-number;
|
||||
}
|
||||
|
||||
.cm-s-p5-light .CodeMirror-selected {
|
||||
.cm-s-p5-light div .CodeMirror-selected {
|
||||
background-color: $p5-light-selected;
|
||||
}
|
||||
|
||||
.cm-s-p5-light .CodeMirror-activeline-background {
|
||||
background-color: #F3F3F3;
|
||||
background-color: $light;
|
||||
}
|
||||
|
||||
.cm-s-p5-light .CodeMirror-activeline-gutter {
|
||||
background-color: #ECECEC;
|
||||
background-color: $light;
|
||||
border-right: 1px solid $medium-light;
|
||||
}
|
||||
|
||||
.cm-s-p5-light .cm-error {
|
||||
color: #f00;
|
||||
}
|
||||
|
||||
.cm-s-p5-light .CodeMirror-matchingbracket {
|
||||
.cm-s-p5-light span .CodeMirror-matchingbracket {
|
||||
outline: 1px solid $p5-light-gray;
|
||||
outline-offset: 1px;
|
||||
color: $p5-light-black !important;
|
||||
}
|
||||
|
||||
.cm-s-p5-light .cm-qualifier {
|
||||
color: $p5-light-lightblue;
|
||||
.cm-s-p5-light span .cm-qualifier {
|
||||
color: $p5-light-blue;
|
||||
}
|
||||
|
||||
.cm-s-p5-light .cm-tag {
|
||||
.cm-s-p5-light span .cm-tag {
|
||||
color: $p5-light-pink;
|
||||
}
|
||||
|
||||
.cm-s-p5-light .cm-builtin {
|
||||
color: $p5-light-lightblue;
|
||||
.cm-s-p5-light span .cm-builtin {
|
||||
color: $p5-light-blue;
|
||||
}
|
||||
|
||||
.cm-s-p5-light .cm-attribute {
|
||||
.cm-s-p5-light span .cm-attribute {
|
||||
color: $p5-light-black;
|
||||
}
|
||||
|
||||
.cm-s-p5-light .cm-p5-function {
|
||||
color: $p5-light-darkblue;
|
||||
color: $p5-light-blue;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -33,25 +33,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.serve__over__https {
|
||||
text-align: center;
|
||||
margin-left: #{9 / $base-font-size}rem;
|
||||
font-width: #{108 / $base-font-size}rem;
|
||||
font-height: #{15 / $base-font-size}rem;
|
||||
font-family: Montserrat;
|
||||
font-size: #{12 / $base-font-size}rem;
|
||||
margin-top: #{2 / $base-font-size}rem;
|
||||
}
|
||||
|
||||
.preferences__heading {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
@include themify() {
|
||||
color: getThemifyVariable("heading-text-color");
|
||||
}
|
||||
}
|
||||
|
||||
.preferences__title {
|
||||
width: #{90 / $base-font-size}rem;
|
||||
height: #{25 / $base-font-size}rem;
|
||||
|
|
@ -86,9 +67,6 @@
|
|||
font-size: #{16 / $base-font-size}rem;
|
||||
margin-top: #{13 / $base-font-size}rem;
|
||||
margin-bottom: #{7 / $base-font-size}rem;
|
||||
@include themify() {
|
||||
color: getThemifyVariable("heading-text-color");
|
||||
}
|
||||
}
|
||||
|
||||
.preference__subtitle {
|
||||
|
|
@ -104,8 +82,9 @@
|
|||
@include themify() {
|
||||
border: #{1 / $base-font-size}rem solid
|
||||
getThemifyVariable("button-border-color");
|
||||
background-color: getThemifyVariable("button-background-color");
|
||||
// background-color: getThemifyVariable("button-background-color");
|
||||
color: getThemifyVariable("input-text-color");
|
||||
background-color: getThemifyVariable('input-background-color');
|
||||
}
|
||||
text-align: center;
|
||||
border-radius: 0%;
|
||||
|
|
@ -120,9 +99,9 @@
|
|||
|
||||
.preference__label {
|
||||
@include themify() {
|
||||
color: getThemifyVariable("inactive-text-color");
|
||||
color: getThemifyVariable("secondary-text-color");
|
||||
&:hover {
|
||||
color: getThemifyVariable("primary-text-color");
|
||||
color: getThemifyVariable("heavy-text-color");
|
||||
}
|
||||
}
|
||||
margin: #{-15 / $base-font-size}rem 0 0 #{-5 / $base-font-size}rem;
|
||||
|
|
@ -242,7 +221,7 @@ input[type="number"]::-webkit-outer-spin-button {
|
|||
.preference__radio-button:checked + .preference__option {
|
||||
@include themify() {
|
||||
//for some reason this won't work for getThemifyVariable
|
||||
color: map-get($theme-map, "primary-text-color");
|
||||
color: map-get($theme-map, "heavy-text-color");
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -23,15 +23,6 @@
|
|||
display: none;
|
||||
}
|
||||
|
||||
.preview-frame-placeholder {
|
||||
width: #{400 / $base-font-size}rem;
|
||||
height: #{400 / $base-font-size}rem;
|
||||
position: absolute;
|
||||
@include themify() {
|
||||
background: getThemifyVariable('preview-placeholder-color');
|
||||
}
|
||||
}
|
||||
|
||||
.preview-frame__header {
|
||||
height: #{29 / $base-font-size}rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
padding-right: #{38 / $base-font-size}rem;
|
||||
@include themify() {
|
||||
border-color: getThemifyVariable('input-border-color');
|
||||
background-color: getThemifyVariable('search-background-color');
|
||||
background-color: getThemifyVariable('input-background-color');
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -50,6 +50,12 @@
|
|||
position: relative;
|
||||
overflow-y: auto;
|
||||
flex: 1 1 auto;
|
||||
@include themify() {
|
||||
border-top: 1px solid map-get($theme-map, 'ide-border-color');
|
||||
}
|
||||
.sidebar--contracted & {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar__file-item {
|
||||
|
|
@ -57,12 +63,10 @@
|
|||
cursor: pointer;
|
||||
position: relative;
|
||||
@include themify() {
|
||||
color: map-get($theme-map, 'inactive-text-color');
|
||||
&:hover > .file-item__content .sidebar__file-item-name {
|
||||
color: map-get($theme-map, 'primary-text-color');
|
||||
}
|
||||
&:hover > .file-item__content .sidebar__file-item-icon g {
|
||||
fill: map-get($theme-map, 'primary-text-color');
|
||||
// TODO get this to not affect parent, need to move it into JS
|
||||
&:hover:not(.sidebar__file-item--selected) > .file-item__content {
|
||||
background-color: map-get($theme-map, 'file-hover-color');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -120,6 +124,9 @@
|
|||
content: '';
|
||||
width: 100%;
|
||||
}
|
||||
@include themify() {
|
||||
color: map-get($theme-map, 'primary-text-color');
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar__file-item-show-options {
|
||||
|
|
@ -166,35 +173,51 @@
|
|||
display: none;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
width: calc(100% - #{100 / $base-font-size}rem);
|
||||
width: calc(100% - #{63 / $base-font-size}rem);
|
||||
.sidebar__file-item--editing & {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar__expand {
|
||||
.sidebar__expand,
|
||||
.sidebar__contract {
|
||||
@include icon();
|
||||
position: absolute;
|
||||
top: #{7 / $base-font-size}rem;
|
||||
left: #{1 / $base-font-size}rem;
|
||||
height: #{14 / $base-font-size}rem;
|
||||
top: #{2 / $base-font-size}rem;
|
||||
left: #{0 / $base-font-size}rem;
|
||||
height: #{25 / $base-font-size}rem;
|
||||
width: #{49 / $base-font-size}rem;
|
||||
border-radius: 2px;
|
||||
& svg {
|
||||
height: #{14 / $base-font-size}rem;
|
||||
height: #{25 / $base-font-size}rem;
|
||||
}
|
||||
@include themify() {
|
||||
background-color: getThemifyVariable("toolbar-button-background-color");
|
||||
& polygon {
|
||||
fill: getThemifyVariable("toolbar-button-color");
|
||||
}
|
||||
&:hover {
|
||||
background-color: getThemifyVariable("button-background-hover-color");
|
||||
& polygon {
|
||||
fill: getThemifyVariable("button-hover-color");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar__expand {
|
||||
display: none;
|
||||
&:hover {
|
||||
cursor: e-resize;
|
||||
}
|
||||
.sidebar--contracted & {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar__contract {
|
||||
@include icon();
|
||||
position: absolute;
|
||||
top: #{7 / $base-font-size}rem;
|
||||
left: #{34 / $base-font-size}rem;
|
||||
height: #{14 / $base-font-size}rem;
|
||||
& svg {
|
||||
height: #{14 / $base-font-size}rem;
|
||||
&:hover {
|
||||
cursor: w-resize;
|
||||
}
|
||||
.sidebar--contracted & {
|
||||
display: none;
|
||||
|
|
@ -228,7 +251,7 @@
|
|||
margin-right: #{5 / $base-font-size}rem;
|
||||
& g {
|
||||
@include themify() {
|
||||
fill: getThemifyVariable('inactive-text-color');
|
||||
fill: getThemifyVariable('secondary-text-color');
|
||||
}
|
||||
}
|
||||
& svg {
|
||||
|
|
|
|||
|
|
@ -96,7 +96,7 @@
|
|||
height:#{25 / $base-font-size}rem;
|
||||
@include themify() {
|
||||
& polygon {
|
||||
fill: getThemifyVariable('dropdown-color');
|
||||
fill: getThemifyVariable('inactive-text-color');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -89,9 +89,12 @@
|
|||
}
|
||||
|
||||
.toolbar {
|
||||
padding: #{20 / $base-font-size}rem #{34 / $base-font-size}rem;
|
||||
padding: #{10 / $base-font-size}rem #{20 / $base-font-size}rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@include themify() {
|
||||
border-bottom: 1px dashed map-get($theme-map, 'nav-border-color');
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar__project-name-container {
|
||||
|
|
@ -106,11 +109,11 @@
|
|||
|
||||
.toolbar__project-name {
|
||||
@include themify() {
|
||||
color: getThemifyVariable('inactive-text-color');
|
||||
color: getThemifyVariable('secondary-text-color');
|
||||
&:hover {
|
||||
color: getThemifyVariable('primary-text-color');
|
||||
color: getThemifyVariable('logo-color');
|
||||
& .toolbar__edit-name-button path {
|
||||
fill: getThemifyVariable('primary-text-color');
|
||||
fill: getThemifyVariable('logo-color');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -134,45 +137,18 @@
|
|||
.toolbar__project-owner {
|
||||
margin-left: #{5 / $base-font-size}rem;
|
||||
@include themify() {
|
||||
color: getThemifyVariable('inactive-text-color');
|
||||
color: getThemifyVariable('secondary-text-color');
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar__autorefresh-label {
|
||||
@include themify() {
|
||||
color: getThemifyVariable('inactive-text-color');
|
||||
color: getThemifyVariable('secondary-text-color');
|
||||
}
|
||||
margin-left: #{5 / $base-font-size}rem;
|
||||
font-size: #{12 / $base-font-size}rem;
|
||||
}
|
||||
|
||||
.toolbar__serve-secure {
|
||||
margin-left: #{20 / $base-font-size}rem;
|
||||
}
|
||||
|
||||
.toolbar__serve-secure-label {
|
||||
@include themify() {
|
||||
color: getThemifyVariable('inactive-text-color');
|
||||
}
|
||||
margin-left: #{5 / $base-font-size}rem;
|
||||
font-size: #{12 / $base-font-size}rem;
|
||||
}
|
||||
|
||||
.toolbar__serve-secure-help {
|
||||
display: inline-block;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
& svg {
|
||||
width: #{10 / $base-font-size}rem;
|
||||
height: #{10 / $base-font-size}rem;
|
||||
}
|
||||
@include themify() {
|
||||
& path {
|
||||
fill: getThemifyVariable('inactive-text-color');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar__edit-name-button {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
|
|
@ -183,7 +159,7 @@
|
|||
}
|
||||
@include themify() {
|
||||
& path {
|
||||
fill: getThemifyVariable('inactive-text-color');
|
||||
fill: getThemifyVariable('secondary-text-color');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,14 @@
|
|||
.dropzone {
|
||||
@include themify() {
|
||||
color: getThemifyVariable('dropzone-text-color');
|
||||
background-color: getThemifyVariable('input-secondary-background-color');
|
||||
color: getThemifyVariable('input-text-color');
|
||||
}
|
||||
}
|
||||
|
||||
.dropzone .dz-preview.dz-image-preview {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.uploader {
|
||||
min-height: #{200 / $base-font-size}rem;
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ const metaKey = (() => {
|
|||
return 'Ctrl';
|
||||
})();
|
||||
|
||||
const metaKeyName = metaKey === 'Cmd' ? '\u2318' : 'Ctrl';
|
||||
const metaKeyName = metaKey === 'Cmd' ? '⌘' : '⌃';
|
||||
|
||||
export {
|
||||
metaKey,
|
||||
|
|
|
|||
Loading…
Reference in a new issue