thevar1able/ClickHouse
1
0
Fork 0
mirror of https://github.com/ClickHouse/ClickHouse.git synced 2024-11-22 07:31:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

Cleanup CSS in Play UI

Browse Source
This commit is contained in:
Alexey Milovidov 2022-04-23 20:42:10 +02:00
parent 3936b3e800
commit a1eddd1be0
1 changed files with 35 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
programs/server/play.html
View File

@ -1,4 +1,5 @@
<html> <!-- TODO If I write DOCTYPE HTML something changes but I don't know what. -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="icon" href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1NCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDkgOCI+PHN0eWxlPi5ve2ZpbGw6I2ZjMH0ucntmaWxsOnJlZH08L3N0eWxlPjxwYXRoIGQ9Ik0wLDcgaDEgdjEgaC0xIHoiIGNsYXNzPSJyIi8+PHBhdGggZD0iTTAsMCBoMSB2NyBoLTEgeiIgY2xhc3M9Im8iLz48cGF0aCBkPSJNMiwwIGgxIHY4IGgtMSB6IiBjbGFzcz0ibyIvPjxwYXRoIGQ9Ik00LDAgaDEgdjggaC0xIHoiIGNsYXNzPSJvIi8+PHBhdGggZD0iTTYsMCBoMSB2OCBoLTEgeiIgY2xhc3M9Im8iLz48cGF0aCBkPSJNOCwzLjI1IGgxIHYxLjUgaC0xIHoiIGNsYXNzPSJvIi8+PC9zdmc+">
@ -29,7 +30,7 @@
-->
<style type="text/css">
<style>
:root {
--background-color: #DDF8FF; /* Or #FFFBEF; actually many pastel colors look great for light theme. */
--element-background-color: #FFF;
@ -71,12 +72,24 @@
--logo-color-active: #333;
}
*
{
box-sizing: border-box;
}
html, body
{
/* Personal choice. */
height: 100%;
margin: 0;
}
html
{
/* The fonts that have full support for hinting. */
font-family: Liberation Sans, DejaVu Sans, sans-serif, Noto Color Emoji, Apple Color Emoji, Segoe UI Emoji;
background: var(--background-color);
color: var(--text-color);
padding: 0.5rem;
}
/* Otherwise Webkit based browsers will display ugly border on focus. */
@ -87,22 +100,17 @@
color: var(--text-color);
}
div
{
width: 100%;
}
.monospace
{
/* Prefer fonts that have full hinting info. This is important for non-retina displays.
Also I personally dislike "Ubuntu" font due to the similarity of 'r' and 'г' (it looks very ignorant). */
font-family: Liberation Mono, DejaVu Sans Mono, MonoLisa, Consolas, Monospace;
font-family: Liberation Mono, DejaVu Sans Mono, MonoLisa, Consolas, monospace;
}
.monospace-table
{
/* Liberation is worse than DejaVu for block drawing characters. */
font-family: DejaVu Sans Mono, Liberation Mono, MonoLisa, Consolas, Monospace;
font-family: DejaVu Sans Mono, Liberation Mono, MonoLisa, Consolas, monospace;
}
.shadow
@ -119,17 +127,21 @@
background-color: var(--element-background-color);
}
#query
#query_div
{
/* Make enough space for even huge queries. */
height: 20%;
}
#query
{
height: 100%;
width: 100%;
}
#inputs
{
white-space: nowrap;
width: 100%;
}
#url
@ -193,10 +205,9 @@
#data-table
{
width: 100%;
border-collapse: collapse;
border-spacing: 0;
/* I need pixel-perfect alignment but not sure the following is correct, please help */
min-width: calc(100vw - 2rem);
}
/* Will be displayed when user specified custom format. */
@ -211,14 +222,15 @@
td
{
background-color: var(--element-background-color);
white-space: nowrap;
/* For wide tables any individual column will be no more than 50% of page width. */
max-width: 50vw;
/* The content is cut unless you hover. */
overflow: hidden;
text-overflow: ellipsis;
padding: 0.25rem 0.5rem;
border: 1px solid var(--border-color);
white-space: pre;
vertical-align: top;
}
td.right
@ -229,7 +241,7 @@
th
{
padding: 0.25rem 0.5rem;
text-align: middle;
text-align: center;
background-color: var(--table-header-color);
border: 1px solid var(--border-color);
}
@ -258,6 +270,7 @@
td.left:hover
{
white-space: pre-wrap;
max-width: none;
}
/* The style for SQL NULL */
@ -301,6 +314,11 @@
text-decoration: none;
}
#graph
{
display: none;
}
/* This is for graph in svg */
text
{
@ -346,7 +364,7 @@
<div id="inputs">
<input class="monospace shadow" id="url" type="text" value="http://localhost:8123/" placeholder="url" /><input class="monospace shadow" id="user" type="text" value="default" placeholder="user" /><input class="monospace shadow" id="password" type="password" placeholder="password" />
</div>
<div>
<div id="query_div">
<textarea autofocus spellcheck="false" class="monospace shadow" id="query"></textarea>
</div>
<div id="run_div">