Главная Обзор Помощь
Вход
SunnyMirror
/
netron
зеркало из https://github.com/lutzroeder/netron.git
2
0
Ответвить 0
Файлы Задачи 0 Вики
Просмотр исходного кода

Browser dark mode prototype

Lutz Roeder 7 лет назад
Родитель
a2bbe21b7f
Сommit
ddfba3c873
8 измененных файлов с 242 добавлено и 138 удалено
Разделённый вид Показать статистику Diff
  1. 1 1
      setup.py
  2. 0 45
      src/logo.svg
  3. 0 5
      src/spinner.svg
  4. 80 32
      src/view-browser.html
  5. 77 29
      src/view-electron.html
  6. 17 14
      src/view-render.css
  7. 5 1
      src/view-sidebar.css
  8. 62 11
      src/view.css

+ 1 - 1
setup.py
Просмотреть файл 

@@ -84,7 +84,7 @@ setuptools.setup(
 
     ],
 
     package_data={
 
         'netron': [ 
-            'logo.svg', 'spinner.svg', 'favicon.ico', 'icon.png',
 
+            'favicon.ico', 'icon.png',
 
             'onnx-model.js', 'onnx.js', 'onnx-metadata.json',
 
             'tf-model.js', 'tf.js', 'tf-metadata.json',
 
             'tflite-model.js', 'tflite.js', 'tflite-metadata.json',

+ 0 - 45
src/logo.svg
Просмотреть файл 

@@ -1,45 +0,0 @@
 
-<svg xmlns='http://www.w3.org/2000/svg' width='1024' height='1024' viewBox='0 0 1024 1024'>
 
-    <circle cx='512' cy='512' r='431' fill='none' stroke='#bbb' stroke-width='32'/>
 
-    <circle cx='512' cy='512' r='450' fill='none' stroke='#aaa' stroke-width='6' /> 
-    <circle cx='512' cy='512' r='412' fill='none' stroke='#aaa' stroke-width='6' /> 
-    <line x1='296' y1='392' x2='540' y2='280' stroke-width='12' stroke='#bbb' />
 
-    <line x1='296' y1='632' x2='540' y2='280' stroke-width='12' stroke='#bbb' />
 
-    <line x1='296' y1='392' x2='540' y2='435' stroke-width='12' stroke='#bbb' />
 
-    <line x1='296' y1='632' x2='540' y2='435' stroke-width='12' stroke='#bbb' />
 
-    <line x1='296' y1='392' x2='540' y2='590' stroke-width='12' stroke='#bbb' />
 
-    <line x1='296' y1='632' x2='540' y2='590' stroke-width='12' stroke='#bbb' />
 
-    <line x1='296' y1='392' x2='540' y2='744' stroke-width='12' stroke='#bbb' />
 
-    <line x1='296' y1='632' x2='540' y2='744' stroke-width='12' stroke='#bbb' />
 
-    <line x1='540' y1='280' x2='785' y2='512' stroke-width='12' stroke='#bbb' />
 
-    <line x1='540' y1='435' x2='785' y2='512' stroke-width='12' stroke='#bbb' />
 
-    <line x1='540' y1='590' x2='785' y2='512' stroke-width='12' stroke='#bbb' />
 
-    <line x1='540' y1='744' x2='785' y2='512' stroke-width='12' stroke='#bbb' />
 
-    <g transform='translate(296, 392)'>
 
-        <circle cx='0' cy='0' r='51' fill='#bbb' />
 
-        <circle cx='0' cy='0' r='51' fill='none' stroke-width='6' stroke='#aaa' />
 
-    </g>
 
-    <g transform='translate(296, 632)'>
 
-        <circle cx='0' cy='0' r='51' fill='#bbb' />
 
-        <circle cx='0' cy='0' r='51' fill='none' stroke-width='6' stroke='#aaa' />
 
-    </g>
 
-    <g transform='translate(540, 280)'>
 
-        <circle cx='0' cy='0' r='51' fill='#bbb' />
 
-        <circle cx='0' cy='0' r='51' fill='none' stroke-width='6' stroke='#aaa' />
 
-    </g>
 
-    <g transform='translate(540, 435)'>
 
-        <circle cx='0' cy='0' r='51' fill='#bbb' />
 
-        <circle cx='0' cy='0' r='51' fill='none' stroke-width='6' stroke='#aaa' />
 
-    </g>
 
-    <g transform='translate(540, 590)'>
 
-        <circle cx='0' cy='0' r='51' fill='#bbb' />
 
-        <circle cx='0' cy='0' r='51' fill='none' stroke-width='6' stroke='#aaa' />
 
-    </g>
 
-    <g transform='translate(540, 744)'>
 
-        <circle cx='0' cy='0' r='51' fill='#bbb' />
 
-        <circle cx='0' cy='0' r='51' fill='none' stroke-width='6' stroke='#aaa' />
 
-    </g>
 
-    <g transform='translate(785, 512)'>
 
-        <circle cx='0' cy='0' r='51' fill='#bbb' />
 
-        <circle cx='0' cy='0' r='51' fill='none' stroke-width='6' stroke='#aaa' />
 
-    </g>
 
-</svg>

+ 0 - 5
src/spinner.svg
Просмотреть файл 

@@ -1,5 +0,0 @@
 
-<svg xmlns='http://www.w3.org/2000/svg' width='1024' height='1024' viewBox='0 0 1024 1024'>
 
-    <g id='spinner' transform='translate(512, 512)' style='opacity: 1'>
 
-        <path d="M-431,0 A-431,-431 0 0,1 0,-431" stroke-width='24' stroke='#e6e6e6' fill='None' />
 
-    </g>
 
-</svg>

+ 80 - 32
src/view-browser.html
Просмотреть файл 

@@ -17,50 +17,98 @@
 
 <body>
 
 <div id='welcome' class='background' style='display: block'>
 
     <a class='center logo' href='https://github.com/lutzroeder/netron' target='_blank'>
 
-        <img class='logo absolute' src='logo.svg' />
 
-        <img id='spinner' class='spinner logo absolute' src='spinner.svg' style='display: none;' />
 
+        <svg xmlns='http://www.w3.org/2000/svg' class='logo absolute' width='128' height='128' viewBox='0 0 1024 1024'>
 
+            <circle class='stroke' cx='512' cy='512' r='431' fill='none' stroke-width='32'/>
 
+            <circle class='border' cx='512' cy='512' r='450' fill='none' stroke-width='6' /> 
+            <circle class='border' cx='512' cy='512' r='412' fill='none' stroke-width='6' /> 
+            <line class='stroke' x1='296' y1='392' x2='540' y2='280' stroke-width='12' />
 
+            <line class='stroke' x1='296' y1='632' x2='540' y2='280' stroke-width='12' />
 
+            <line class='stroke' x1='296' y1='392' x2='540' y2='435' stroke-width='12' />
 
+            <line class='stroke' x1='296' y1='632' x2='540' y2='435' stroke-width='12' />
 
+            <line class='stroke' x1='296' y1='392' x2='540' y2='590' stroke-width='12' />
 
+            <line class='stroke' x1='296' y1='632' x2='540' y2='590' stroke-width='12' />
 
+            <line class='stroke' x1='296' y1='392' x2='540' y2='744' stroke-width='12' />
 
+            <line class='stroke' x1='296' y1='632' x2='540' y2='744' stroke-width='12' />
 
+            <line class='stroke' x1='540' y1='280' x2='785' y2='512' stroke-width='12' />
 
+            <line class='stroke' x1='540' y1='590' x2='785' y2='512' stroke-width='12' />
 
+            <line class='stroke' x1='540' y1='435' x2='785' y2='512' stroke-width='12' />
 
+            <line class='stroke' x1='540' y1='744' x2='785' y2='512' stroke-width='12' />
 
+            <g transform='translate(296, 392)'>
 
+                <circle class='fill' cx='0' cy='0' r='51' />
 
+                <circle class='border' cx='0' cy='0' r='51' fill='none' stroke-width='6' />
 
+            </g>
 
+            <g transform='translate(296, 632)'>
 
+                <circle class='fill' cx='0' cy='0' r='51' />
 
+                <circle class='border' cx='0' cy='0' r='51' fill='none' stroke-width='6' />
 
+            </g>
 
+            <g transform='translate(540, 280)'>
 
+                <circle class='fill' cx='0' cy='0' r='51' />
 
+                <circle class='border' cx='0' cy='0' r='51' fill='none' stroke-width='6' />
 
+            </g>
 
+            <g transform='translate(540, 435)'>
 
+                <circle class='fill' cx='0' cy='0' r='51' />
 
+                <circle class='border' cx='0' cy='0' r='51' fill='none' stroke-width='6' />
 
+            </g>
 
+            <g transform='translate(540, 590)'>
 
+                <circle class='fill' cx='0' cy='0' r='51' />
 
+                <circle class='border' cx='0' cy='0' r='51' fill='none' stroke-width='6' />
 
+            </g>
 
+            <g transform='translate(540, 744)'>
 
+                <circle class='fill' cx='0' cy='0' r='51' />
 
+                <circle class='border' cx='0' cy='0' r='51' fill='none' stroke-width='6' />
 
+            </g>
 
+            <g transform='translate(785, 512)'>
 
+                <circle class='fill' cx='0' cy='0' r='51' />
 
+                <circle class='border' cx='0' cy='0' r='51' fill='none' stroke-width='6' />
 
+            </g>
 
+        </svg>
 
+        <svg class='spinner logo absolute' id='spinner' viewBox='0 0 1024 1024' style='display: none;'>
 
+            <g id='spinner' transform='translate(512, 512)' style='opacity: 1'>
 
+                <path class='stroke' d="M-431,0 A-431,-431 0 0,1 0,-431" stroke-width='24' fill='None' />
 
+            </g>
 
+        </svg>
 
     </a>
 
     <button id='open-file-button' class='center' style='top: 200px; width: 125px; opacity: 0;'>Open Model...</button>
 
     <input type='file' id='open-file-dialog' style='display:none' multiple='false' accept='.onnx, .pb, .meta, .tflite, .keras, .h5, .hdf5, .json, .model, .mlmodel, .caffemodel, .pt, .pth, .pkl, .joblib, .pbtxt, .prototxt'>
 
     <!-- Preload fonts to workaround Chrome SVG layout issue -->
 
-    <div style='font-weight: normal; color: #e6e6e6; user-select: none;'>.</div>
 
-    <div style='font-weight: 600; color: #e6e6e6; user-select: none;'>.</div>
 
-    <div style='font-weight: bold; color: #e6e6e6; user-select: none;'>.</div>
 
+    <div style='font-weight: normal; color: rgba(0, 0, 0, 0.01); user-select: none;'>.</div>
 
+    <div style='font-weight: 600; color: rgba(0, 0, 0, 0.01); user-select: none;'>.</div>
 
+    <div style='font-weight: bold; color: rgba(0, 0, 0, 0.01); user-select: none;'>.</div>
 
 </div>
 
 <svg id='graph' class='graph' preserveAspectRatio='xMidYMid meet' width='100%' height='100%'></svg>
 
 <div id='toolbar' class='toolbar' style='position: absolute; top: 10px; left: 10px; display: none;'>
 
     <button id='model-properties-button' title='Model Properties'>
 
-        <svg viewBox='0 0 100 100'>
 
-            <rect x='12' y='12' width='76' height='76' rx='16' ry='16' stroke-width='8' stroke='#fff' />
 
-            <line x1='30' y1='37' x2='70' y2='37' stroke-width='8' stroke-linecap='round' stroke='#fff' />
 
-            <line x1='30' y1='50' x2='70' y2='50' stroke-width='8' stroke-linecap='round' stroke='#fff' />
 
-            <line x1='30' y1='63' x2='70' y2='63' stroke-width='8' stroke-linecap='round' stroke='#fff' />
 
-            <rect x='12' y='12' width='76' height='76' rx='16' ry='16' stroke-width='4' />
 
-            <line x1='30' y1='37' x2='70' y2='37' stroke-width='4' stroke-linecap='round' />
 
-            <line x1='30' y1='50' x2='70' y2='50' stroke-width='4' stroke-linecap='round' />
 
-            <line x1='30' y1='63' x2='70' y2='63' stroke-width='4' stroke-linecap='round' />
 
+        <svg viewBox='0 0 100 100' class='icon'>
 
+            <rect class='border' x='12' y='12' width='76' height='76' rx='16' ry='16' stroke-width='8' />
 
+            <line class='border' x1='30' y1='37' x2='70' y2='37' stroke-width='8' stroke-linecap='round' stroke='#fff' />
 
+            <line class='border' x1='30' y1='50' x2='70' y2='50' stroke-width='8' stroke-linecap='round' stroke='#fff' />
 
+            <line class='border' x1='30' y1='63' x2='70' y2='63' stroke-width='8' stroke-linecap='round' stroke='#fff' />
 
+            <rect class='stroke' x='12' y='12' width='76' height='76' rx='16' ry='16' stroke-width='4' />
 
+            <line class='stroke' x1='30' y1='37' x2='70' y2='37' stroke-width='4' stroke-linecap='round' />
 
+            <line class='stroke' x1='30' y1='50' x2='70' y2='50' stroke-width='4' stroke-linecap='round' />
 
+            <line class='stroke' x1='30' y1='63' x2='70' y2='63' stroke-width='4' stroke-linecap='round' />
 
         </svg>
 
     </button>
 
-    <button id='zoom-in-button' class='icon' title='Zoom In'>
 
-        <svg viewBox='0 0 100 100'>
 
-            <circle cx='50' cy='50' r='35' stroke-width='8' stroke='#fff' />
 
-            <line x1='50' y1='38' x2='50' y2='62' stroke-width='8' stroke-linecap='round' stroke='#fff' />
 
-            <line x1='38' y1='50' x2='62' y2='50' stroke-width='8' stroke-linecap='round' stroke='#fff' />
 
-            <line x1='78' y1='78' x2='82' y2='82' stroke-width='12' stroke-linecap='square' stroke='#fff' />
 
-            <circle cx='50' cy='50' r='35' stroke-width='4' />
 
-            <line x1='50' y1='38' x2='50' y2='62' stroke-width='4' stroke-linecap='round' />
 
-            <line x1='38' y1='50' x2='62' y2='50' stroke-width='4' stroke-linecap='round' />
 
-            <line x1='78' y1='78' x2='82' y2='82' stroke-width='8' stroke-linecap='square' />
 
+    <button id='zoom-in-button' title='Zoom In'>
 
+        <svg viewBox='0 0 100 100' class='icon'>
 
+            <circle class='border' cx='50' cy='50' r='35' stroke-width='8' stroke='#fff' />
 
+            <line class='border' x1='50' y1='38' x2='50' y2='62' stroke-width='8' stroke-linecap='round' stroke='#fff' />
 
+            <line class='border' x1='38' y1='50' x2='62' y2='50' stroke-width='8' stroke-linecap='round' stroke='#fff' />
 
+            <line class='border' x1='78' y1='78' x2='82' y2='82' stroke-width='12' stroke-linecap='square' stroke='#fff' />
 
+            <circle class='stroke' cx='50' cy='50' r='35' stroke-width='4' />
 
+            <line class='stroke' x1='50' y1='38' x2='50' y2='62' stroke-width='4' stroke-linecap='round' />
 
+            <line class='stroke' x1='38' y1='50' x2='62' y2='50' stroke-width='4' stroke-linecap='round' />
 
+            <line class='stroke' x1='78' y1='78' x2='82' y2='82' stroke-width='8' stroke-linecap='square' />
 
         </svg>
 
     </button>
 
-    <button id='zoom-out-button' class='icon' title='Zoom Out'>
 
-        <svg viewBox='0 0 100 100'>
 
-            <circle cx='50' cy='50' r='35' stroke-width='8' stroke='#fff' />
 
-            <line x1='38' y1='50' x2='62' y2='50' stroke-width='8' stroke-linecap='round' stroke='#fff' />
 
-            <line x1='78' y1='78' x2='82' y2='82' stroke-width='12' stroke-linecap='square' stroke='#fff' />
 
-            <circle cx='50' cy='50' r='35' stroke-width='4' />
 
-            <line x1='38' y1='50' x2='62' y2='50' stroke-width='4' stroke-linecap='round' />
 
-            <line x1='78' y1='78' x2='82' y2='82' stroke-width='8' stroke-linecap='square' />
 
+    <button id='zoom-out-button' title='Zoom Out'>
 
+        <svg viewBox='0 0 100 100' class='icon'>
 
+            <circle class='border' cx='50' cy='50' r='35' stroke-width='8' stroke='#fff' />
 
+            <line class='border' x1='38' y1='50' x2='62' y2='50' stroke-width='8' stroke-linecap='round' stroke='#fff' />
 
+            <line class='border' x1='78' y1='78' x2='82' y2='82' stroke-width='12' stroke-linecap='square' stroke='#fff' />
 
+            <circle class='stroke' cx='50' cy='50' r='35' stroke-width='4' />
 
+            <line class='stroke' x1='38' y1='50' x2='62' y2='50' stroke-width='4' stroke-linecap='round' />
 
+            <line class='stroke' x1='78' y1='78' x2='82' y2='82' stroke-width='8' stroke-linecap='square' />
 
         </svg>
 
     </button>
 
 </div>

+ 77 - 29
src/view-electron.html
Просмотреть файл 

@@ -10,8 +10,56 @@
 
 <body>
 
 <div id='welcome' class='background' style='display: block'>
 
     <a class='center logo' target='_blank'>
 
-        <img class='logo absolute' src='logo.svg' />
 
-        <img id='spinner' class='spinner logo absolute' src='spinner.svg' style='display: none;' />
 
+        <svg xmlns='http://www.w3.org/2000/svg' class='logo absolute' width='128' height='128' viewBox='0 0 1024 1024'>
 
+            <circle class='stroke' cx='512' cy='512' r='431' fill='none' stroke-width='32'/>
 
+            <circle class='border' cx='512' cy='512' r='450' fill='none' stroke-width='6' /> 
+            <circle class='border' cx='512' cy='512' r='412' fill='none' stroke-width='6' /> 
+            <line class='stroke' x1='296' y1='392' x2='540' y2='280' stroke-width='12' />
 
+            <line class='stroke' x1='296' y1='632' x2='540' y2='280' stroke-width='12' />
 
+            <line class='stroke' x1='296' y1='392' x2='540' y2='435' stroke-width='12' />
 
+            <line class='stroke' x1='296' y1='632' x2='540' y2='435' stroke-width='12' />
 
+            <line class='stroke' x1='296' y1='392' x2='540' y2='590' stroke-width='12' />
 
+            <line class='stroke' x1='296' y1='632' x2='540' y2='590' stroke-width='12' />
 
+            <line class='stroke' x1='296' y1='392' x2='540' y2='744' stroke-width='12' />
 
+            <line class='stroke' x1='296' y1='632' x2='540' y2='744' stroke-width='12' />
 
+            <line class='stroke' x1='540' y1='280' x2='785' y2='512' stroke-width='12' />
 
+            <line class='stroke' x1='540' y1='590' x2='785' y2='512' stroke-width='12' />
 
+            <line class='stroke' x1='540' y1='435' x2='785' y2='512' stroke-width='12' />
 
+            <line class='stroke' x1='540' y1='744' x2='785' y2='512' stroke-width='12' />
 
+            <g transform='translate(296, 392)'>
 
+                <circle class='fill' cx='0' cy='0' r='51' />
 
+                <circle class='border' cx='0' cy='0' r='51' fill='none' stroke-width='6' />
 
+            </g>
 
+            <g transform='translate(296, 632)'>
 
+                <circle class='fill' cx='0' cy='0' r='51' />
 
+                <circle class='border' cx='0' cy='0' r='51' fill='none' stroke-width='6' />
 
+            </g>
 
+            <g transform='translate(540, 280)'>
 
+                <circle class='fill' cx='0' cy='0' r='51' />
 
+                <circle class='border' cx='0' cy='0' r='51' fill='none' stroke-width='6' />
 
+            </g>
 
+            <g transform='translate(540, 435)'>
 
+                <circle class='fill' cx='0' cy='0' r='51' />
 
+                <circle class='border' cx='0' cy='0' r='51' fill='none' stroke-width='6' />
 
+            </g>
 
+            <g transform='translate(540, 590)'>
 
+                <circle class='fill' cx='0' cy='0' r='51' />
 
+                <circle class='border' cx='0' cy='0' r='51' fill='none' stroke-width='6' />
 
+            </g>
 
+            <g transform='translate(540, 744)'>
 
+                <circle class='fill' cx='0' cy='0' r='51' />
 
+                <circle class='border' cx='0' cy='0' r='51' fill='none' stroke-width='6' />
 
+            </g>
 
+            <g transform='translate(785, 512)'>
 
+                <circle class='fill' cx='0' cy='0' r='51' />
 
+                <circle class='border' cx='0' cy='0' r='51' fill='none' stroke-width='6' />
 
+            </g>
 
+        </svg>
 
+        <svg class='spinner logo absolute' id='spinner' viewBox='0 0 1024 1024' style='display: none;'>
 
+            <g id='spinner' transform='translate(512, 512)' style='opacity: 1'>
 
+                <path class='stroke' d="M-431,0 A-431,-431 0 0,1 0,-431" stroke-width='24' fill='None' />
 
+            </g>
 
+        </svg>
 
     </a>
 
     <button id='open-file-button' class='center' style='top: 200px; width: 125px; opacity: 0;'>Open Model...</button>
 
     <!-- Preload fonts to workaround Chrome SVG layout issue -->
 
@@ -22,37 +70,37 @@
 
 <svg id='graph' class='graph' preserveAspectRatio='xMidYMid meet' width='100%' height='100%'></svg>
 
 <div id='toolbar' class='toolbar' style='position: absolute; top: 10px; left: 10px; display: none;'>
 
     <button id='model-properties-button' title='Model Properties'>
 
-        <svg viewBox='0 0 100 100'>
 
-            <rect x='12' y='12' width='76' height='76' rx='16' ry='16' stroke-width='8' stroke='#fff' />
 
-            <line x1='30' y1='37' x2='70' y2='37' stroke-width='8' stroke-linecap='round' stroke='#fff' />
 
-            <line x1='30' y1='50' x2='70' y2='50' stroke-width='8' stroke-linecap='round' stroke='#fff' />
 
-            <line x1='30' y1='63' x2='70' y2='63' stroke-width='8' stroke-linecap='round' stroke='#fff' />
 
-            <rect x='12' y='12' width='76' height='76' rx='16' ry='16' stroke-width='4' />
 
-            <line x1='30' y1='37' x2='70' y2='37' stroke-width='4' stroke-linecap='round' />
 
-            <line x1='30' y1='50' x2='70' y2='50' stroke-width='4' stroke-linecap='round' />
 
-            <line x1='30' y1='63' x2='70' y2='63' stroke-width='4' stroke-linecap='round' />
 
+        <svg viewBox='0 0 100 100' class='icon'>
 
+            <rect class='border' x='12' y='12' width='76' height='76' rx='16' ry='16' stroke-width='8' />
 
+            <line class='border' x1='30' y1='37' x2='70' y2='37' stroke-width='8' stroke-linecap='round' stroke='#fff' />
 
+            <line class='border' x1='30' y1='50' x2='70' y2='50' stroke-width='8' stroke-linecap='round' stroke='#fff' />
 
+            <line class='border' x1='30' y1='63' x2='70' y2='63' stroke-width='8' stroke-linecap='round' stroke='#fff' />
 
+            <rect class='stroke' x='12' y='12' width='76' height='76' rx='16' ry='16' stroke-width='4' />
 
+            <line class='stroke' x1='30' y1='37' x2='70' y2='37' stroke-width='4' stroke-linecap='round' />
 
+            <line class='stroke' x1='30' y1='50' x2='70' y2='50' stroke-width='4' stroke-linecap='round' />
 
+            <line class='stroke' x1='30' y1='63' x2='70' y2='63' stroke-width='4' stroke-linecap='round' />
 
         </svg>
 
     </button>
 
-    <button id='zoom-in-button' class='icon' title='Zoom In'>
 
-        <svg viewBox='0 0 100 100'>
 
-            <circle cx='50' cy='50' r='35' stroke-width='8' stroke='#fff' />
 
-            <line x1='50' y1='38' x2='50' y2='62' stroke-width='8' stroke-linecap='round' stroke='#fff' />
 
-            <line x1='38' y1='50' x2='62' y2='50' stroke-width='8' stroke-linecap='round' stroke='#fff' />
 
-            <line x1='78' y1='78' x2='82' y2='82' stroke-width='12' stroke-linecap='square' stroke='#fff' />
 
-            <circle cx='50' cy='50' r='35' stroke-width='4' />
 
-            <line x1='50' y1='38' x2='50' y2='62' stroke-width='4' stroke-linecap='round' />
 
-            <line x1='38' y1='50' x2='62' y2='50' stroke-width='4' stroke-linecap='round' />
 
-            <line x1='78' y1='78' x2='82' y2='82' stroke-width='8' stroke-linecap='square' />
 
+    <button id='zoom-in-button' title='Zoom In'>
 
+        <svg viewBox='0 0 100 100' class='icon'>
 
+            <circle class='border' cx='50' cy='50' r='35' stroke-width='8' stroke='#fff' />
 
+            <line class='border' x1='50' y1='38' x2='50' y2='62' stroke-width='8' stroke-linecap='round' stroke='#fff' />
 
+            <line class='border' x1='38' y1='50' x2='62' y2='50' stroke-width='8' stroke-linecap='round' stroke='#fff' />
 
+            <line class='border' x1='78' y1='78' x2='82' y2='82' stroke-width='12' stroke-linecap='square' stroke='#fff' />
 
+            <circle class='stroke' cx='50' cy='50' r='35' stroke-width='4' />
 
+            <line class='stroke' x1='50' y1='38' x2='50' y2='62' stroke-width='4' stroke-linecap='round' />
 
+            <line class='stroke' x1='38' y1='50' x2='62' y2='50' stroke-width='4' stroke-linecap='round' />
 
+            <line class='stroke' x1='78' y1='78' x2='82' y2='82' stroke-width='8' stroke-linecap='square' />
 
         </svg>
 
     </button>
 
-    <button id='zoom-out-button' class='icon' title='Zoom Out'>
 
-        <svg viewBox='0 0 100 100'>
 
-            <circle cx='50' cy='50' r='35' stroke-width='8' stroke='#fff' />
 
-            <line x1='38' y1='50' x2='62' y2='50' stroke-width='8' stroke-linecap='round' stroke='#fff' />
 
-            <line x1='78' y1='78' x2='82' y2='82' stroke-width='12' stroke-linecap='square' stroke='#fff' />
 
-            <circle cx='50' cy='50' r='35' stroke-width='4' />
 
-            <line x1='38' y1='50' x2='62' y2='50' stroke-width='4' stroke-linecap='round' />
 
-            <line x1='78' y1='78' x2='82' y2='82' stroke-width='8' stroke-linecap='square' />
 
+    <button id='zoom-out-button' title='Zoom Out'>
 
+        <svg viewBox='0 0 100 100' class='icon'>
 
+            <circle class='border' cx='50' cy='50' r='35' stroke-width='8' stroke='#fff' />
 
+            <line class='border' x1='38' y1='50' x2='62' y2='50' stroke-width='8' stroke-linecap='round' stroke='#fff' />
 
+            <line class='border' x1='78' y1='78' x2='82' y2='82' stroke-width='12' stroke-linecap='square' stroke='#fff' />
 
+            <circle class='stroke' cx='50' cy='50' r='35' stroke-width='4' />
 
+            <line class='stroke' x1='38' y1='50' x2='62' y2='50' stroke-width='4' stroke-linecap='round' />
 
+            <line class='stroke' x1='78' y1='78' x2='82' y2='82' stroke-width='8' stroke-linecap='square' />
 
         </svg>
 
     </button>
 
 </div>

+ 17 - 14
src/view-render.css
Просмотреть файл 

@@ -80,9 +80,12 @@
 
     .edge-path { stroke: #666666; }
 
     #arrowhead-vee { fill: #666666; }
 
 
-    .node path { stroke: #666666; }
 
-    .node line { stroke: #666666; }
 
+    .node path { stroke: #1d1d1d; }
 
+    .node line { stroke: #1d1d1d; }
 
 
+    .select .node.border { stroke: #dfdfdf; }
 
+    .select.edge-path { stroke: #dfdfdf; }
 
+    
     .node-item-function path { fill: #404040; }
 
     .node-item-function text { fill: #dfdfdfdf; }
 
     .node-item-function:hover { cursor: hand; }
 
@@ -98,7 +101,7 @@
 
     .node-item text { fill: #dfdfdf; }
 
 
     .node-attribute text { fill: #b2b2b2; }
 
-    .node-attribute path { fill: #404040; }
 
+    .node-attribute path { fill: #2d2d2d; }
 
     .node-attribute:hover path { fill: #666666; }
 
 
     .graph-item-input path { fill: #404040; }
 
@@ -114,15 +117,15 @@
 
     .node-item-constant path { fill: #4b4b4b; }
 
     .node-item-constant:hover path { fill: #666666; }
 
 
-    .node-item-operator-layer path { fill: rgba(51, 85, 136, 0.5); }
 
-    .node-item-operator-activation path { fill: rgba(75, 27, 22, 0.5); }
 
-    .node-item-operator-activation path { fill: rgba(75, 27, 22, 0.5); }
 
-    .node-item-operator-pool path { fill: rgba(51, 85, 51, 0.5); }
 
-    .node-item-operator-pool path { fill: rgba(51, 85, 51, 0.5); }
 
-    .node-item-operator-normalization path { fill: rgba(51, 85, 68, 0.5); }
 
-    .node-item-operator-dropout path { fill: rgba(69, 71, 112, 0.5); }
 
-    .node-item-operator-shape path { fill: rgba(108, 79, 71, 0.5); }
 
-    .node-item-operator-tensor path { fill: rgba(89, 66, 59, 0.5); }
 
-    .node-item-operator-transform path { fill: rgba(51, 85, 68, 0.5); }
 
-    .node-item-operator-data path { fill: rgba(85, 85, 85, 0.5); }
 
+    .node-item-operator-layer path { fill: rgba(51, 85, 136, 0.4); }
 
+    .node-item-operator-activation path { fill: rgba(75, 27, 22, 0.4); }
 
+    .node-item-operator-activation path { fill: rgba(75, 27, 22, 0.4); }
 
+    .node-item-operator-pool path { fill: rgba(51, 85, 51, 0.4); }
 
+    .node-item-operator-pool path { fill: rgba(51, 85, 51, 0.4); }
 
+    .node-item-operator-normalization path { fill: rgba(51, 85, 68, 0.4); }
 
+    .node-item-operator-dropout path { fill: rgba(69, 71, 112, 0.4); }
 
+    .node-item-operator-shape path { fill: rgba(108, 79, 71, 0.4); }
 
+    .node-item-operator-tensor path { fill: rgba(89, 66, 59, 0.4); }
 
+    .node-item-operator-transform path { fill: rgba(51, 85, 68, 0.4); }
 
+    .node-item-operator-data path { fill: rgba(85, 85, 85, 0.4); }
 
 }

+ 5 - 1
src/view-sidebar.css
Просмотреть файл 

@@ -55,9 +55,13 @@
 
 
     .sidebar-view-documentation h1 { border-bottom: 1px solid #424242; color: #dfdfdf; }
 
     .sidebar-view-documentation h2 { border-bottom: 1px solid #424242; color: #dfdfdf; }
 
-
 
     .sidebar-view-documentation p { color: #aaaaaa; }
 
     .sidebar-view-documentation tt { background-color:#1e1e1e; }
 
     .sidebar-view-documentation code { background-color: #1e1e1e; }
 
     .sidebar-view-documentation pre { background-color: #1e1e1e; }
 
+
 
+    .sidebar-view-find input[type=text] { background: #383838; border-color: #424242; }
 
+    .sidebar-view-find li:not(:first-child) { border-top: 1px solid #2a2a2a; }
 
+    .sidebar-view-find li:hover { background: #383838; }
 
+    
 }

+ 62 - 11
src/view.css
Просмотреть файл 

@@ -40,11 +40,27 @@ body {
 
     height: 128px;
 
 }
 
 
+.logo .stroke {
 
+    stroke: #bbbbbb;
 
+}
 
+
 
+.logo .fill {
 
+    fill: #bbbbbb;
 
+}
 
+
 
+.logo .border {
 
+    stroke: #aaaaaa;
 
+}
 
+
 
 .spinner {
 
     -webkit-animation: orbit 0.5s infinite linear;
 
     animation: orbit 0.5s infinite linear;
 
 }
 
 
+.spinner .stroke {
 
+    stroke: #e6e6e6;
 
+}
 
+
 
 @-webkit-keyframes orbit {
 
     0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
 
     100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
 
@@ -118,15 +134,22 @@ body {
 
     height: 24px;
 
 }
 
 
-.toolbar button:hover {
 
-    fill: None;
 
-    stroke: #000;
 
-}
 
-
 
 .toolbar button:focus {
 
     outline: 0;
 
 }
 
 
+.icon .border { 
+    stroke: #fff;
 
+}
 
+
 
+.icon .stroke { 
+    stroke: #808080;
 
+}
 
+
 
+.icon:hover .stroke { 
+    stroke: #000000;
 
+}
 
+
 
 @media only screen and (max-device-width: 1024px) {
 
     .toolbar button {
 
         width: 32px;
 
@@ -136,21 +159,49 @@ body {
 
 
 @media (prefers-color-scheme: dark) {
 
     .background {
 
-        background-color: #2d2d2d;
 
+        background-color: #1e1e1e;
 
     }    
 
+    .logo .stroke {
 
+        stroke: #666666;
 
+    }
 
+    
+    .logo .fill {
 
+        fill: #666666;
 
+    }
 
+    
+    .logo .border {
 
+        stroke: #000000;
 
+    }
 
+    
+    .spinner .stroke {
 
+        stroke: #2d2d2d;
 
+    }
 
+
 
     .graph {
 
         background-color: #404040;
 
     }
 
 
     .background button {
 
-        color: #dfdfdf;
 
-        background-color: #2d2d2d;
 
-        border-color: #dfdfdf;
 
+        color: #888888;
 
+        background-color: #1e1e1e;
 
+        border-color: #888888;
 
     }
 
     
     .background button:hover { 
-        color: #2d2d2d;
 
-        background-color: #dfdfdf;
 
+        color: #1e1e1e;
 
+        background-color: #aaaaaa;
 
+    }    
+
 
+    .icon .border { 
+        stroke: #1d1d1d;
 
     }    
+
 
+    .icon .stroke { 
+        stroke: #aaaaaa;
 
+    }
 
+
 
+    .icon:hover .stroke { 
+        stroke: #dfdfdf;
 
+    }
 
 }