From 52f6783f63d2e2f52e06d14a97b5e00eab8ac1c0 Mon Sep 17 00:00:00 2001 From: James Barnett Date: Sun, 18 Feb 2018 21:20:37 +0000 Subject: Add new connection dialog box - WIP --- styles/editor-instance.css | 134 ++++++++++++++++++++++++++++++++++++++++++++ styles/instance-manager.css | 28 +++++++++ styles/new-connection.css | 3 + styles/style.css | 133 ------------------------------------------- 4 files changed, 165 insertions(+), 133 deletions(-) create mode 100644 styles/editor-instance.css create mode 100644 styles/instance-manager.css create mode 100644 styles/new-connection.css delete mode 100644 styles/style.css (limited to 'styles') diff --git a/styles/editor-instance.css b/styles/editor-instance.css new file mode 100644 index 0000000..99ac763 --- /dev/null +++ b/styles/editor-instance.css @@ -0,0 +1,134 @@ +html, +body { + height: 100%; + margin: 0 +} + +::-webkit-scrollbar { + width: 10px; + height: 10px; +} + +::-webkit-scrollbar-track { + background: #474A5E; +} + +::-webkit-scrollbar-thumb { + background: #63677C; +} + +::-webkit-scrollbar-thumb:hover { + background: #555; +} +::-webkit-scrollbar-corner { + background: #63677C +} + +.flex-wrapper { + display: flex; + flex-flow: column; + height: 100%; +} + +.flex-wrapper .row.header { + flex: 0 1 auto; + /* background-color: #474A5E; */ + background: #6D8A88; + color: white; +} + +.flex-wrapper .row.content { + flex: 1 1 auto; + display: flex; + flex-direction: column; + height: 100%; +} + +.flex-wrapper .row.footer { + flex: 0 1 auto; + background-color: #474A5E; + color: white; + display: flex; + flex-direction: row; + font-family: monospace; + align-items: center; + height: 20px; +} + +.flex-wrapper .row .split-row { + overflow: auto; +} + +.gutter { + background-color: #474A5E; + background-repeat: no-repeat; + background-position: 50%; +} + +.gutter.gutter-vertical { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABo7865AAAABlBMVEVHcEzMzMzyAv2sAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII='); + cursor: ns-resize; +} + +.gutter.gutter-horizontal { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg=='); + cursor: ew-resize; +} + +.CodeMirror { + height: 100%; +} + +.results-row { + color: #ffffff; + background-color: #282a36; + font-family: monospace; +} + +#result-error { + padding: 5px; +} + +#execution-status { + padding: 2px; + flex-basis: 60px; + text-align: center; + font-weight: bold; +} + +#execution-time { + /* background-color: green; */ + flex-basis: auto; + padding: 2px 10px; +} + +#cursor-coords { + margin-left: auto; + padding-right: 10px; +} + +.exec-idle { + background-color: gray; +} + +.exec-running { + background-color: yellow; + color: black; +} + +.exec-ok { + background-color: green; +} + +.exec-error { + background-color: red; + color: black; +} + +.selected-statement { + background-color: #4F4837; +} + +.statement-pointer { + width: 10px; +} \ No newline at end of file diff --git a/styles/instance-manager.css b/styles/instance-manager.css new file mode 100644 index 0000000..8449b9c --- /dev/null +++ b/styles/instance-manager.css @@ -0,0 +1,28 @@ +body { + margin: 0; +} + +.etabs-tabgroup { + background-color: #282a36; +} + +.etabs-tab { + color: white; + background: none; + background-color: #474A5E; + border: none; +} + +.etabs-tab.active { + background: #6D8A88; +} + +.etabs-views { + border: none; +} + +.etabs-buttons button { + width: inherit; + padding: 4px 6px; + background: #6D8A88; +} \ No newline at end of file diff --git a/styles/new-connection.css b/styles/new-connection.css new file mode 100644 index 0000000..97aaae6 --- /dev/null +++ b/styles/new-connection.css @@ -0,0 +1,3 @@ +html, body { + padding: 8px; +} \ No newline at end of file diff --git a/styles/style.css b/styles/style.css deleted file mode 100644 index 7ae5727..0000000 --- a/styles/style.css +++ /dev/null @@ -1,133 +0,0 @@ -html, -body { - height: 100%; - margin: 0 -} - -::-webkit-scrollbar { - width: 10px; - height: 10px; -} - -::-webkit-scrollbar-track { - background: #474A5E; -} - -::-webkit-scrollbar-thumb { - background: #63677C; -} - -::-webkit-scrollbar-thumb:hover { - background: #555; -} -::-webkit-scrollbar-corner { - background: #63677C -} - -.flex-wrapper { - display: flex; - flex-flow: column; - height: 100%; -} - -.flex-wrapper .row.header { - flex: 0 1 auto; - background-color: #474A5E; - color: white; -} - -.flex-wrapper .row.content { - flex: 1 1 auto; - display: flex; - flex-direction: column; - height: 100%; -} - -.flex-wrapper .row.footer { - flex: 0 1 auto; - background-color: #474A5E; - color: white; - display: flex; - flex-direction: row; - font-family: monospace; - align-items: center; - height: 20px; -} - -.flex-wrapper .row .split-row { - overflow: auto; -} - -.gutter { - background-color: #474A5E; - background-repeat: no-repeat; - background-position: 50%; -} - -.gutter.gutter-vertical { - background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABo7865AAAABlBMVEVHcEzMzMzyAv2sAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII='); - cursor: ns-resize; -} - -.gutter.gutter-horizontal { - background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg=='); - cursor: ew-resize; -} - -.CodeMirror { - height: 100%; -} - -.results-row { - color: #ffffff; - background-color: #282a36; - font-family: monospace; -} - -#result-error { - padding: 5px; -} - -#execution-status { - padding: 2px; - flex-basis: 60px; - text-align: center; - font-weight: bold; -} - -#execution-time { - /* background-color: green; */ - flex-basis: auto; - padding: 2px 10px; -} - -#cursor-coords { - margin-left: auto; - padding-right: 10px; -} - -.exec-idle { - background-color: gray; -} - -.exec-running { - background-color: yellow; - color: black; -} - -.exec-ok { - background-color: green; -} - -.exec-error { - background-color: red; - color: black; -} - -.selected-statement { - background-color: #4F4837; -} - -.statement-pointer { - width: 10px; -} \ No newline at end of file -- cgit v1.2.3 From 4ef675b2b7803c72ed6e74ee13841e356a71f103 Mon Sep 17 00:00:00 2001 From: James Barnett Date: Wed, 21 Feb 2018 21:07:01 +0000 Subject: Make connection tab title configurable --- styles/editor-instance.css | 3 +-- styles/instance-manager.css | 7 +++++++ 2 files changed, 8 insertions(+), 2 deletions(-) (limited to 'styles') diff --git a/styles/editor-instance.css b/styles/editor-instance.css index 99ac763..7ae5727 100644 --- a/styles/editor-instance.css +++ b/styles/editor-instance.css @@ -32,8 +32,7 @@ body { .flex-wrapper .row.header { flex: 0 1 auto; - /* background-color: #474A5E; */ - background: #6D8A88; + background-color: #474A5E; color: white; } diff --git a/styles/instance-manager.css b/styles/instance-manager.css index 8449b9c..c49c8a3 100644 --- a/styles/instance-manager.css +++ b/styles/instance-manager.css @@ -11,6 +11,7 @@ body { background: none; background-color: #474A5E; border: none; + font-weight: bold; } .etabs-tab.active { @@ -19,10 +20,16 @@ body { .etabs-views { border: none; + height: calc(100vh - 52px); } .etabs-buttons button { width: inherit; padding: 4px 6px; background: #6D8A88; +} + +.etabs-tabgroup-footer { + background: #6D8A88; + height: 20px; } \ No newline at end of file -- cgit v1.2.3