From 4918fddb802ca6ab5f25a447ec2d3da0c29ea50a Mon Sep 17 00:00:00 2001 From: Mark MacKay Date: Fri, 4 Jun 2021 12:23:32 -0500 Subject: [PATCH] ligtmode --- src/css/align_buttons.css | 4 +- src/css/app.css | 11 ++- src/css/base.css | 25 ++---- src/css/color-tool.css | 4 +- src/css/darkmode.css | 0 src/css/draginput.css | 28 ++++++ src/css/jgraduate.css | 159 +++++++++++++++++++-------------- src/css/jpicker.css | 86 ++++++++++++------ src/css/menu.css | 56 +++++++++++- src/css/method-draw.css | 32 ++----- src/css/rulers.css | 4 + src/css/shapelib.css | 5 +- src/css/tools.css | 42 +++++++-- src/css/zoom-dropdown.css | 4 +- src/images/NoColor.svg | 8 +- src/images/eyedropper.svg | 17 ++++ src/index.html | 27 +++--- src/js/PaintBox.js | 7 +- src/js/Rulers.js | 3 +- src/js/darkmode.js | 26 ++++++ src/js/lib/jpicker.min.js | 3 +- src/js/lib/jquery.jgraduate.js | 6 +- src/js/loading.js | 2 + src/js/start.js | 1 + src/js/state.js | 1 + 25 files changed, 379 insertions(+), 182 deletions(-) create mode 100644 src/css/darkmode.css create mode 100644 src/images/eyedropper.svg create mode 100644 src/js/darkmode.js diff --git a/src/css/align_buttons.css b/src/css/align_buttons.css index 46d3c92..f8c94a1 100644 --- a/src/css/align_buttons.css +++ b/src/css/align_buttons.css @@ -18,14 +18,12 @@ width: var(--x13); line-height: var(--x16); text-align: center; - outline: solid var(--z1) 1px; - background-color: var(--z2); cursor: pointer; position: relative; } .align_button:hover { - background-color: var(--z3); + background-color: var(--z0); border-color: var(--z3); } diff --git a/src/css/app.css b/src/css/app.css index 3a71ee6..ae463fc 100644 --- a/src/css/app.css +++ b/src/css/app.css @@ -13,7 +13,7 @@ display: block; } - #workarea { +#workarea { display: block; position:absolute; top: var(--x8); @@ -26,7 +26,12 @@ justify-content: center; transition: transform 500ms cubic-bezier(0.13,0.66,0.24,0.92); border-radius: var(--x2); - box-shadow: var(--x1) var(--x1) var(--x8) rgba(0,0,0,0.2); + box-shadow: var(--shadow-bg); +} + +.inverted #svgcanvas, +.inverted #workarea { + background: var(--z1); } #workarea.rect, #workarea.line, #workarea.ellipse, #workarea.path, #workarea.shapelib { @@ -38,7 +43,7 @@ } #workarea.eyedropper { - cursor: url(../images/eyedropper.png) 0 16, crosshair; + cursor: url(../images/eyedropper.svg) 0 16, crosshair; } #workarea.fhpath { diff --git a/src/css/base.css b/src/css/base.css index 0ecc2f1..225eff0 100644 --- a/src/css/base.css +++ b/src/css/base.css @@ -1,4 +1,4 @@ -:root { /* red */ /* yellow */ /* green */ +:root, .inverted-undo { /* red */ /* yellow */ /* green */ --z0: #111827; --a0: #291e2a; --b0: #292329; --c0: #16262f; --z1: #1e2433; --a1: #42242e; --b1: #43322a; --c1: #1b373a; --z2: #2b313f; --a2: #5b2a32; --b2: #5d412b; --c2: #1e4944; @@ -33,7 +33,9 @@ --d13: #c6cffa; --e13: #cec5f9; --f13: #d9c4fb; --g13: #fbc3d9; --d14: #d8defb; --e14: #ddd8fa; --f14: #e5d7fb; --g14: #fbd6e5; --d15: #eaedfb; --e15: #edeafb; --f15: #f0eafb; --g15: #faeaf1; - -webkit-font-smoothing: antialiased; +-webkit-font-smoothing: antialiased; +--shadow-bg: 0 var(--x2) var(--x4) var(--z0); +--shadow: var(--x1) var(--x1) var(--x8) rgba(0,0,0,0.4); } .inverted { @@ -71,7 +73,9 @@ --d2: #c6cffa; --e2: #cec5f9; --f2: #d9c4fb; --g2: #fbc3d9; --d1: #d8defb; --e1: #ddd8fa; --f1: #e5d7fb; --g1: #fbd6e5; --d0: #eaedfb; --e0: #edeafb; --f0: #f0eafb; --g0: #faeaf1; - -webkit-font-smoothing: auto; +-webkit-font-smoothing: auto; +--shadow-bg: 0 var(--x2) var(--x4) var(--z3); +--shadow: var(--x1) var(--x1) var(--x8) rgba(0,0,0,0.1); } :root { @@ -91,20 +95,9 @@ --x14: 56px; --x15: 60px; --x16: 64px; - --mono-font: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; --ui-font: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; - --transition-duration: 333ms; - --transition-fast: 200ms; --panel-width: calc(var(--x10)*2*2 + var(--x1)); - --transition: all var(--transition-fast) ease; - --transition-none: none; -} - -a, a:link, a:active, a:visited { - color: var(--d6); -} - -a:hover { - color: var(--d8); + --transition-duration: 200ms; + --transition: all var(--transition-duration) ease; } \ No newline at end of file diff --git a/src/css/color-tool.css b/src/css/color-tool.css index e372cdd..24c74df 100644 --- a/src/css/color-tool.css +++ b/src/css/color-tool.css @@ -103,8 +103,8 @@ } #tool_canvas .color_block { - width: 100%; - height: 100%; + width: 58px; + height: 38px; } #tool_canvas .color_block svg { diff --git a/src/css/darkmode.css b/src/css/darkmode.css new file mode 100644 index 0000000..e69de29 diff --git a/src/css/draginput.css b/src/css/draginput.css index 9707498..5723f0f 100644 --- a/src/css/draginput.css +++ b/src/css/draginput.css @@ -15,6 +15,7 @@ margin: 0 var(--x2) var(--x2) 0; overflow: hidden; transition: var(--transition); + box-shadow: none; } .dragging .draginput { @@ -23,11 +24,13 @@ .dragging .draginput.active { pointer-events: all; + box-shadow: none; } .draginput:hover { background-color: var(--z3); transition: none; + box-shadow: var(--shadow-bg); } .draginput:hover span, @@ -296,3 +299,28 @@ body.dragging .draginput .angle { .draginput.font_style:hover { background-color: var(--z2); } + +.inverted .draginput { + background-color: var(--z1); +} + +.inverted .draginput { + background-color: var(--z1); +} + + +.inverted .draginput:hover { + background-color: var(--z0); +} + +.inverted .draginput .angle { + background-color: var(--z2); +} + +.inverted .draginput span { + color: var(--z9); +} + +body.inverted.dragging .draginput .angle { + background-color: var(--z1); +} \ No newline at end of file diff --git a/src/css/jgraduate.css b/src/css/jgraduate.css index 2283c00..552555b 100644 --- a/src/css/jgraduate.css +++ b/src/css/jgraduate.css @@ -10,25 +10,48 @@ * Licensed under the Apache License Version 2 */ + #color_picker { + position: absolute; + display: none; + background: var(--z1); + width: calc(9 * var(--x15)); + height: calc(6 * var(--x15)); + border-radius: var(--x3); + z-index: 5; + box-shadow: var(--shadow); + padding: var(--x4); + color: var(--z8); +} + + #color_picker input { + color: var(--z14); + } + h2.jGraduate_Title { display: none; } -.jGraduate_Picker { - position: absolute; - padding: 20px; +.jGraduate_tabs { + padding: var(--x4); + --neg: calc(var(--x4) *-1); + margin: var(--neg) var(--neg) 0 var(--neg); } .jGraduate_tabs li { display: inline-block; - padding: 5px 10px; - margin-right: 5px; + padding: var(--x4) var(--x4) var(--x4) var(--x4); cursor: pointer; + color: var(--z9); } -li.jGraduate_tab_current { - background: #fff; - border-radius: 3px 3px 0 0; +.jGraduate_tabs li:hover { + color: var(--z12); +} + +li.jGraduate_tab_current, +li.jGraduate_tab_current:hover { + color: var(--d7); + -webkit-text-stroke: 0.5px var(--d8); } .jGraduate_colPick { @@ -43,44 +66,41 @@ li.jGraduate_tab_current { .jGraduate_tabs { position: relative; - background-color: #ddd; - padding: 10px 10px 0 10px; - margin: -20px -20px 20px -20px; - border-radius: 3px 3px 0 0; + padding: 0; } div.jGraduate_Swatch { float: left; - margin: 0 15px 0 0; + margin: 0 var(--x4) 0 0; } + div.jGraduate_GradContainer { border: solid #000 1px; background-image: url(../images/map-opacity.png); background-position: 0px 0px; - height: 256px; - width: 256px; + height: calc(var(--x16) * 4); + width: calc(var(--x16) * 4); position: relative; } div.jGraduate_GradContainer div.grad_coord { - background: rgba(0,0,0,0.8); - border: 2px solid white; - border-radius: 15px; - -moz-border-radius: 5px; - width: 14px; - height: 14px; + background: var(--z0); + color: var(--z12); + box-shadow: 0 2px 4px rgba(0,0,0,0.3); + border-radius: var(--x4); + width: var(--x4); + height: var(--x4); position: absolute; - margin: -7px -7px; + margin: calc(var(--x2) * -1); top: 0; left: 0; text-align: center; - font-size: 8px; + font-size: 10px; line-height: 14px; - color: white; text-decoration: none; - cursor: pointer; - -moz-user-select: none; - -webkit-user-select: none; + cursor: move; + user-select: none; + font-weight: bold; } .jGraduate_AlphaArrows { @@ -90,7 +110,7 @@ div.jGraduate_GradContainer div.grad_coord { } div.jGraduate_Opacity { - border: 2px inset #eee; + border: solid var(--z13) 1px; margin-top: 14px; background-color: black; background-image: url(../images/Maps.png); @@ -103,9 +123,12 @@ div.jGraduate_StopSlider { margin: -10px 0 0 -10px; width: 276px; overflow: visible; - background: white; - height: 45px; - cursor: pointer; + height: var(--x11); + cursor: copy; +} + +div.jGraduate_StopSlider svg path { + cursor: ew-resize; } div.jGraduate_StopSection { @@ -121,6 +144,14 @@ input.jGraduate_Ok, input.jGraduate_Cancel { display: block; width: 100px; } + +.jGraduate_Picker .jGraduate_OkCancel .jGraduate_Cancel, .jGraduate_Picker input.Cancel { + background-color: var(--z5); +} +.jGraduate_Picker .jGraduate_OkCancel .jGraduate_Cancel:hover, .jGraduate_Picker input.Cancel:hover { + background-color: var(--z6); +} + input.jGraduate_Ok { margin: 0 0 5px 0; } @@ -140,33 +171,30 @@ input.jGraduate_Ok { } label.jGraduate_Form_Heading { - - color: #333; - padding: 2px; - font-weight: bold; - font-size: 13px; + color: var(--z15); + font-size: 14px; } div.jGraduate_Form_Section { - -moz-border-radius: 5px; - -webkit-border-radius: 5px; - padding: 15px 5px 5px 5px; - margin: 5px 2px; + padding: var(--x4) var(--x1) var(--x1) var(--x1); width: 100px; text-align: center; - overflow: auto; - background: #eee; + overflow: hidden; + background: var(--z2); + border-radius: var(--x1); + position: relative; } div.jGraduate_Form label { - padding: 0 2px; - color: #333; + color: var(--x12); + position: relative; + top: -6px; + padding: 0 var(--x2); } div.jGraduate_StopSection input[type=text], div.jGraduate_Slider input[type=text] { width: 33px; - color: #333; } div.jGraduate_LightBox { @@ -183,14 +211,12 @@ div.jGraduate_LightBox { div.jGraduate_stopPicker { position: absolute; display: none; - background: - white; + background: white; padding: 20px; border-radius: 3px; width: 530px; height: 300px; - box-shadow: 0 5px 25px - black; + box-shadow: 0 5px 25px black; } @@ -206,13 +232,11 @@ div.jGraduate_stopPicker { position: absolute; right: 10px; top: 0; - color: #999; font-weight: bold; } .jGraduate_gradPick div.jGraduate_Slider label:last-child input { margin: 0 3px 0 0; - color: #333; } .jGraduate_gradPick .jGraduate_Form { @@ -233,12 +257,6 @@ div.jGraduate_stopPicker { float: left; } -.jGraduate_gradPick .jGraduate_Form.jGraduate_rg_field label, .jGraduate_gradPick .jGraduate_Form.jGraduate_rg_field input { -width: auto; -float: left; -font-size: 11px; -} - .jGraduate_gradPick .jGraduate_Form.jGraduate_rg_field #color_picker_jGraduate_match_ctr { float: none; } @@ -247,6 +265,11 @@ font-size: 11px; clear: left; } +.jGraduate_gradPick .jGraduate_Form label.match-center { + white-space: nowrap; + font-size: 11px; +} + .jGraduate_gradPick .jGraduate_Points { position: static; float: left; @@ -280,7 +303,6 @@ font-size: 11px; float: left; width: 100%; position: relative; - margin: 5px 0; } .jGraduate_Slider .jGraduate_Form_Section { @@ -292,16 +314,17 @@ font-size: 11px; .jGraduate_Slider label.prelabel { - width: 40px; + width: var(--x10); text-align: left; + line-height: var(--x8); } .jGraduate_SliderBar { - width: 140px; + width: 120px; float: left; - margin: 0 5px; - border:1px solid #BBB; - height:20px; + margin: 0 var(--x2); + border: 1px solid var(--z6); + height: var(--x4); position: relative; } @@ -310,7 +333,7 @@ div.jGraduate_Slider input { } div.jGraduate_Slider img { - top: 0; + top: -2px; left: 0; position: absolute; cursor:ew-resize; @@ -320,13 +343,13 @@ div.jGraduate_Slider img { -webkit-appearance: none; margin: 0; position: absolute; - bottom: 5px; - right: 5px; + bottom: var(--x2); + right: var(--x2); } .jPicker .Button .Cancel, .jGraduate_Picker .jGraduate_OkCancel .jGraduate_Cancel { margin: 0; position: absolute; - bottom: 5px; - left: 5px; + bottom: var(--x2); + left: var(--x2); } diff --git a/src/css/jpicker.css b/src/css/jpicker.css index 8fca560..d730117 100644 --- a/src/css/jpicker.css +++ b/src/css/jpicker.css @@ -1,9 +1,18 @@ +table.jPicker { + border-collapse: collapse; + margin-top: var(--x4); +} + +table.jPicker td { + padding: var(--x1); +} + .jPicker .Icon { display: inline-block; - height: 24px; + height: var(--x6); position: relative; text-align: left; - width: 25px; + width: var(--x6); } .jPicker .Icon span.Color, .jPicker .Icon span.Alpha { background-position: 2px 2px; @@ -26,14 +35,9 @@ z-index: 10; } -table.jPicker { - width: 545px; - z-index: 20; -} - .jPicker .Move { - background-color: #ddd; - border-color: #fff #666 #666 #fff; + background-color: var(--z12); + border-color: var(--z15) var(--z6) var(--z6) var(--z15); border-style: solid; border-width: 1px; cursor: move; @@ -45,7 +49,7 @@ table.jPicker { } .jPicker .Map { - border: solid #000 1px; + border: solid var(--z1) 1px; height: 256px; width: 256px; cursor: crosshair; @@ -55,12 +59,11 @@ table.jPicker { position: relative; } - .jPicker .Bar { - border: solid #000 1px; + border: solid var(--z1) 1px; cursor: n-resize; height: 260px; - margin: 0 15px; + margin: 0; overflow: hidden; padding: 0; position: relative; @@ -69,7 +72,6 @@ table.jPicker { width: 20px; } - .jPicker .Map .Map1, .jPicker .Map .Map2, .jPicker .Map .Map3, @@ -130,9 +132,8 @@ table.jPicker { width: 62px; } - .jPicker .Preview div span { - border: 1px solid #000; + border: 1px solid var(--z0); display: block; height: 30px; margin: 0 auto; @@ -157,8 +158,9 @@ table.jPicker { .jPicker td.Radio { margin: 0; - padding: 0; + padding: 0 0 0 var(--x2); width: var(--x8); + white-space: nowrap; } .jPicker td.Radio input { margin: 0 var(--x1) 0 0; @@ -172,33 +174,51 @@ table.jPicker { padding: 0; text-align: left; width: 70px; + white-space: nowrap; } .jPicker tr.Hex td.Text { width: 100px; - color: #666; +} + +.jPicker tr.Hex td.Text label { + margin-left: var(--x4); } .jPicker tr.Hex td.Text span { width: 100px; color: #333; } + .jPicker td.Text input { - background-color: #fff; - height: 15px; - margin: 0 0 0 5px; + background-color: var(--z15); + height: var(--x4); + margin: 0 0 0 var(--x1);; text-align: left; - width: 30px; - color: #333; + width: var(--x8); + color: var(--z15); +} + +#color_picker input[type=text], #color_picker input[type=number] { + -webkit-appearance: none; + width: 30px; + background: var(--z0); + border: none; + border-radius: var(--x1); +} + +#color_picker input[type=radio] { + position: relative; + top: 2px; } #color_picker .jPicker tr.Hex td.Text input.Hex { - width: 50px; + width: var(--x12); display: inline-block; float: none; } .jPicker tr.Hex td.Text input.AHex { - width: 20px; + width: var(--x5); display: none; } .jPicker .Grid { @@ -207,14 +227,22 @@ table.jPicker { width: 108px; } .jPicker .Grid span.QuickColor { - cursor: pointer; + cursor: url(../images/eyedropper.svg) 0 23, crosshair; + background-repeat: no-repeat; display: inline-block; - height: 15px; - line-height: 15px; + height: var(--x4); + line-height: var(--x4); margin: 0; padding: 0; - width: 18px; + width: var(--x4); } + +.jPicker .Grid span.QuickColor:hover { + position: relative; + z-index: 10; + outline: solid var(--z0) 1px; +} + .jPicker td { vertical-align: top; } diff --git a/src/css/menu.css b/src/css/menu.css index ffd9c35..c77f06a 100644 --- a/src/css/menu.css +++ b/src/css/menu.css @@ -38,7 +38,6 @@ } .menu_list { - display: none; position: absolute; left: 0; top: var(--x8); @@ -46,14 +45,20 @@ background: var(--z15); padding: var(--x2) 0; border-radius: 0 var(--x2) var(--x2) var(--x2); - box-shadow: var(--x1) var(--x1) var(--x8) rgba(0,0,0,0.4); + box-shadow: var(--shadow); } + #menu_bar.active .menu.open .menu_title { background: var(--z15); color: var(--z1); } +.inverted #menu_bar.active .menu.open .menu_title { + background: var(--z0); + color: var(--z15); +} + .menu .menu_list { display: none; position: absolute; @@ -64,7 +69,7 @@ overflow: hidden; line-height: var(--x6); padding: var(--x1) var(--x16) var(--x1) var(--x6); - cursor: default; + cursor: pointer; color: var(--z3); } @@ -127,3 +132,48 @@ #modal_donate { display: none; } + +.menu-right { + margin-left: auto; +} + +.menu-right button { + background: transparent; + line-height: var(--x5); +} + +.menu-right button:hover { + background: transparent; +} + +.menu-right button:active { + box-shadow: none; + outline: none; +} + +.menu-right button:hover svg { + fill: var(--z12); +} + +.menu-right svg { + fill: var(--z5); +} + +#logo svg { + pointer-events: none; + margin-top: var(--x2); + fill: var(--z7); +} + +#logo svg path:last-child { + fill: var(--z13); +} + +#logo:hover svg { + fill: var(--z9); +} + +#logo svg path:last-child { + fill: var(--z15); +} + diff --git a/src/css/method-draw.css b/src/css/method-draw.css index 9e8e733..ee0f109 100644 --- a/src/css/method-draw.css +++ b/src/css/method-draw.css @@ -13,6 +13,10 @@ body { padding: 0; } +body.inverted { + background: var(--z2); +} + ::selection {background: #000; color: #fff; /* Safari */} ::-moz-selection {background: #000; color: #fff; /* Firefox */} @@ -41,7 +45,11 @@ html, body { } ::-webkit-scrollbar-corner { - background: var(--z1); + background: transparent; +} + +.inverted ::-webkit-scrollbar-thumb { + background: var(--z3); } @@ -76,12 +84,6 @@ div#font-selector .font-item:hover { background-color: #eee; } -#color_picker input[type=text], #color_picker input[type=number] { - width: 30px; - background: #fff; - border: solid rgba(0,0,0,0.3) 1px; -} - .dropdown_set input[type=text], .dropdown_set input[type=number] { width: 50px; } @@ -236,17 +238,6 @@ input[type=file] { opacity: 0; } - #color_picker { - position: absolute; - display: none; - background: #fff; - height: 350px; - border-radius: 3px; - z-index: 5; - box-shadow: 0 5px 10px #000; - width: 530px; -} - #tools_bottom { position: absolute; left: var(--x12); @@ -279,11 +270,6 @@ input[type=file] { clear:both; } -#logo svg { - pointer-events: none; - margin-top: var(--x2); -} - input[readonly=readonly]:focus { box-shadow: none; } diff --git a/src/css/rulers.css b/src/css/rulers.css index d697337..1a6ea04 100644 --- a/src/css/rulers.css +++ b/src/css/rulers.css @@ -6,6 +6,10 @@ -webkit-font-smoothing: none; } +.inverted #rulers > div { + background: var(--z1); +} + #rulers #ruler_corner { top: var(--x8); left: var(--x12); diff --git a/src/css/shapelib.css b/src/css/shapelib.css index 1ef9eac..62b848d 100644 --- a/src/css/shapelib.css +++ b/src/css/shapelib.css @@ -57,8 +57,7 @@ border-left-color: var(--z3); } - - .tools_flyout { +.tools_flyout { position: absolute; display: none; cursor: pointer; @@ -69,7 +68,7 @@ height: 324px; background: var(--z15); border-radius: 5px; - box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5); + box-shadow: var(--shadow); } .tools_flyout .tool_button { diff --git a/src/css/tools.css b/src/css/tools.css index cc747c9..9dd94fa 100644 --- a/src/css/tools.css +++ b/src/css/tools.css @@ -1,4 +1,4 @@ - #tools_left { +#tools_left { position: absolute; border-right: none; width: var(--x12); @@ -14,6 +14,23 @@ cursor: pointer; line-height: 60px; text-align: center; + transform: scale(0.8); +} + +.inverted .tool_button svg { + fill: var(--z13); +} + +.tool_button:hover { + transform: scale(1); +} + +.tool_button:hover svg { + fill: var(--z13); +} + +.tool_button.current { + transform: scale(1.4); } .tool_button svg { @@ -21,21 +38,30 @@ fill: var(--z5); } -.tool_button:hover svg { - fill: var(--z10); -} - -.tool_button.current { - background-color: var(--z0); +.tool_button.current svg { + fill: var(--d8); } .tool_button.current svg { - fill: var(--d15); + fill: var(--d7); } + .tool_button.disabled svg { background-color: #aaa; cursor: not-allowed; fill: var(--z3); pointer-events: none; +} + +#tool_rect svg { + position: relative; + top: -1px; + left: 1px; +} + +#tool_ellipse svg { + position: relative; + top: 2px; + left: 1px; } \ No newline at end of file diff --git a/src/css/zoom-dropdown.css b/src/css/zoom-dropdown.css index 71f3363..60883d7 100644 --- a/src/css/zoom-dropdown.css +++ b/src/css/zoom-dropdown.css @@ -7,8 +7,8 @@ width: 100px; } -#zoom_panel { - opacity: 0.5; +#zoom_label:after { + content: ''; } #zoom_select { diff --git a/src/images/NoColor.svg b/src/images/NoColor.svg index 025ba34..634c491 100644 --- a/src/images/NoColor.svg +++ b/src/images/NoColor.svg @@ -1,7 +1,7 @@ - + - - - + + + \ No newline at end of file diff --git a/src/images/eyedropper.svg b/src/images/eyedropper.svg new file mode 100644 index 0000000..170acd3 --- /dev/null +++ b/src/images/eyedropper.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/index.html b/src/index.html index 1c013b4..602b516 100644 --- a/src/index.html +++ b/src/index.html @@ -58,11 +58,11 @@ -
+
@@ -70,10 +70,10 @@
- +
File
-