More consistent scrollbars, 4 x tool links have IDs

This commit is contained in:
mattpass
2020-06-30 20:09:37 +01:00
parent 4ef637a0f5
commit 227d2467ab
6 changed files with 30 additions and 13 deletions

View File

@@ -1,5 +1,6 @@
::-webkit-scrollbar {width: 12px; height: 12px}
::-webkit-scrollbar-thumb {background: rgba(0,198,255,0.1)}
::-webkit-scrollbar-thumb {background: rgba(0,198,255,0.2)}
::-webkit-scrollbar-thumb:hover {background: rgba(0,198,255,0.8)}
::-webkit-scrollbar-corner, ::-webkit-scrollbar-resizer {background: transparent}
body {margin: 0; overflow: auto;
@@ -18,4 +19,4 @@ body {margin: 0; overflow: auto;
-ms-user-select: none;
user-select: none;
}
li a span:first-of-type {white-space: pre}
li a span:first-of-type {white-space: pre}

View File

@@ -73,6 +73,9 @@ h2 {font-size: 18px; font-weight: normal; color: #fff}
.files .tools {position: absolute; display: inline-block; width: 250px; height: 30px; left: 0; bottom: 0}
.files .tools div {display: inline-block; margin: 8px 0 8px 15px; color: #666; cursor: pointer}
.files .tools div:hover {color: #fff; cursor: pointer}
.files .tools .highlight {background: #800; color: #eee; padding: 1px 3px; margin: 7px -3px 7px 12px; border-radius: 3px}
.files .tools .error {background: #800}
.files .tools .info {background: #080}
.editor {position: absolute; display: inline-block; top: 0; left: 15px; width: 2400px}
.editor .tabsBar {display: inline-block; height: 27px; width: 2400px; margin-top: 15px; padding-left: 53px; background: #fff}
@@ -122,8 +125,9 @@ h2 {font-size: 18px; font-weight: normal; color: #fff}
.editor .output {position: fixed; top: 10000px; padding: 15px 18px 8px 13px; transition: top 0.2s ease; background: rgba(0,0,0,0.92); z-index: 2}
.editor .database {position: fixed; top: 10000px; transition: top 0.2s ease; z-index: 2}
.editor .git {position: fixed; top: 10000px; padding: 15px 18px 15px 13px; overflow-y: auto; transition: top 0.2s ease; background: rgba(0,0,0,0.92); z-index: 2}
.editor .git::-webkit-scrollbar {width: 12px; height: 12px; background: #666}
.editor .git::-webkit-scrollbar-thumb {background: rgba(0,198,255,1)}
.editor .git::-webkit-scrollbar {width: 12px; height: 12px}
.editor .git::-webkit-scrollbar-thumb {background: rgba(0,198,255,0.2)}
.editor .git::-webkit-scrollbar-thumb:hover {background: rgba(0,198,255,0.8)}
.editor .git::-webkit-scrollbar-corner, .editor .git::-webkit-scrollbar-resizer {background: transparent}
.editor .git .link {font-family: monospace; cursor: pointer}
.editor .git .link:hover {color: rgba(0,198,255,1)}

View File

@@ -10,4 +10,15 @@ a {color: #fff; text-decoration: none}
input {margin-top: 3px; padding: 4px; border: 0; background-color: #444; color: #fff}
input:focus {outline: none; background: rgba(0,198,255,0.5); color: #fff}
.pluginsManager {background-color: #1c1c19; color: #fff; padding: 20px}
.pluginsManager {background-color: #1c1c19; color: #fff; padding: 20px}
.pluginsPane {
display: inline-block;
width: 760px;
height: 340px;
overflow-y: auto;
}
.pluginsPane::-webkit-scrollbar {width: 12px; height: 12px}
.pluginsPane::-webkit-scrollbar-thumb {background: rgba(0,198,255,0.2)}
.pluginsPane::-webkit-scrollbar-thumb:hover {background: rgba(0,198,255,0.8)}
.pluginsPane::-webkit-scrollbar-corner, .editor .git::-webkit-scrollbar-resizer {background: transparent}

View File

@@ -20,8 +20,9 @@ table, caption, tbody, tfoot, thead, tr, th, td {
/* Box sizing */
* {-moz-box-sizing: border-box; box-sizing: border-box}
::-webkit-scrollbar {width: 12px; height: 12px; background: #666}
::-webkit-scrollbar-thumb {background: rgba(0,198,255,1)}
::-webkit-scrollbar {width: 12px; height: 12px}
::-webkit-scrollbar-thumb {background: rgba(0,198,255,0.2)}
::-webkit-scrollbar-thumb:hover {background: rgba(0,198,255,0.8)}
::-webkit-scrollbar-corner, ::-webkit-scrollbar-resizer {background: transparent}
html, body {width: 100%; height: 100%}

View File

@@ -295,10 +295,10 @@ if (true === file_exists(dirname(__FILE__) . "/plugins/prettier/standalone.js"))
<div class="serverMessage" id="serverMessage"></div>
<div class="tools" id="tools">
<div onclick="ICEcoder.toolShowHideToggle('terminal')">Terminal</div>
<div onclick="ICEcoder.toolShowHideToggle('output')">Output</div>
<div onclick="ICEcoder.toolShowHideToggle('database')">Database</div>
<div onclick="ICEcoder.toolShowHideToggle('git')">Git</div>
<div onclick="ICEcoder.toolShowHideToggle('terminal')" id="toolLinkTerminal">Terminal</div>
<div onclick="ICEcoder.toolShowHideToggle('output'); this.className = ''" id="toolLinkOutput">Output</div>
<div onclick="ICEcoder.toolShowHideToggle('database')" id="toolLinkDatabase">Database</div>
<div onclick="ICEcoder.toolShowHideToggle('git')" id="toolLinkGit">Git</div>
</div>
</div>
@@ -358,7 +358,7 @@ if (true === file_exists(dirname(__FILE__) . "/plugins/prettier/standalone.js"))
</form>
</div>
<iframe name="terminalFrame" id="terminal" src="<?php echo $iceURLPath;?>/terminal.php" class="terminal"></iframe>
<pre id="output" class="output"><b>Output</b><br>via ICEcoder.output(message);<br><br></pre>
<pre id="output" class="output" style="font-family: monospace"><b>Output</b><br>via ICEcoder.output(message);<br><br></pre>
<iframe name="databaseFrame" id="database" src="<?php echo $iceURLPath;?>/lib/database.php" class="database"></iframe>
<div id="git" class="git" style="font-family: monospace"><?php
if (file_exists($docRoot . $ICEcoderDir . "/data/git-diff.php")) {

View File

@@ -222,7 +222,7 @@ function deletePlugin($dir) {
<h1><?php echo $t['plugins'];?></h1>
<a href="javascript:parent.ICEcoder.showManual('<?php echo $ICEcoder["versionNo"];?>','plugins')" style="position: absolute; top: 26px; right: 20px"><div style="padding: 10px; background: #333; color: #fff; font-size: 18px"><?php echo $t['Guide to writing...'];?></div></a>
<div style="display: inline-block; width: 760px; height: 340px; overflow-y: auto">
<div class="pluginsPane">
<?php
$plugins = $ICEcoder['plugins'];
if (0 < count($plugins)) {