Add JavaScript functionality for dynamic UI updates and filtering

- Implemented font color configuration based on numeric values in various sections.
- Added resizing functionality for input fields to accommodate text length.
- Initialized filters on document ready for improved user interaction.
- Created visualization for profile data using fetched dot format.
- Enhanced SQL detail page with click event handling for row navigation.
- Ensured consistent highlighting for code blocks across multiple pages.

staticfiles/silk/css/pages/base.css

@@ -0,0 +1,118 @@
+body {
+  font-family: FiraSans, "Helvetica Neue", Arial, sans-serif;
+  background-color: #f3f3f3;
+  margin: 0;
+  font-weight: lighter;
+}
+
+pre {
+  font-family: Fantasque;
+  background-color: white !important;
+  padding: 0.5em !important;
+  margin: 0 !important;
+  font-size: 14px;
+  text-align: left;
+}
+
+code {
+  font-family: Fantasque;
+  background-color: white !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  font-size: 14px;
+}
+
+html {
+  margin: 0;
+}
+
+#header {
+  height: 50px;
+  background-color: rgb(51, 51, 68);
+  width: 100%;
+  position: relative;
+  padding: 0;
+}
+
+#header div {
+  display: inline-block;
+}
+
+.menu {
+  height: 50px;
+  padding: 0;
+  margin: 0;
+}
+
+.menu-item {
+  height: 50px;
+  padding-left: 10px;
+  padding-right: 10px;
+  margin: 0;
+  margin-right: -4px;
+  color: white;
+}
+
+.menu-item a {
+  color: white !important;
+}
+
+#filter .menu-item {
+  margin-right: 0px;
+}
+
+.selectable-menu-item {
+  transition: background-color 0.15s ease, color 0.15s ease;
+}
+
+.selectable-menu-item:hover {
+  background-color: #f3f3f3;
+  cursor: pointer;
+  color: black !important;
+}
+
+.selectable-menu-item:hover a {
+  color: black !important;
+}
+
+.menu-item-selected {
+  background-color: #f3f3f3;
+  color: black !important;
+}
+
+.menu-item-selected a {
+  color: black !important;
+}
+
+.menu-item-outer {
+  display: table !important;
+  height: 100%;
+  width: 100%;
+}
+
+.menu-item-inner {
+  display: table-cell !important;
+  vertical-align: middle;
+  width: 100%;
+}
+
+a:visited {
+  color: black;
+}
+
+a {
+  color: black;
+  text-decoration: none;
+}
+
+#filter {
+  height: 50px;
+  position: absolute;
+  right: 0;
+}
+
+.description {
+  font-style: italic;
+  font-size: 14px;
+  margin-bottom: 5px;
+}

staticfiles/silk/css/pages/clear_db.css

@@ -0,0 +1,41 @@
+.wrapper {
+  width: 100%;
+  margin-bottom: 20px;
+}
+
+.inner {
+  margin: auto;
+  width: 960px;
+}
+
+.cleardb-form .cleardb-form-wrapper {
+  margin-bottom: 20px;
+}
+
+.cleardb-form label {
+  display: block;
+  margin-bottom: 8px;
+}
+
+.cleardb-form .btn {
+  background: #333344;
+  color: #fff;
+  padding: 10px 20px;
+  border-radius: 2px;
+  cursor: pointer;
+  box-shadow: none;
+  font-size: 16px;
+  line-height: 20px;
+  border: 0;
+  min-width: 150px;
+  text-align: center;
+}
+
+.cleardb-form label :last-child {
+  margin-bottom: 0;
+}
+
+.msg {
+  margin-top: 20px;
+  color: #bac54b;
+}

staticfiles/silk/css/pages/cprofile.css

@@ -0,0 +1,52 @@
+#query-info-div {
+  margin-top: 15px;
+}
+
+#query-info-div .timestamp-div {
+  font-size: 13px;
+}
+
+#pyprofile-div {
+  display: block;
+  margin: auto;
+  width: 960px;
+}
+
+.pyprofile {
+  text-align: left;
+}
+
+a {
+  color: #45ADA8;
+}
+
+a:visited {
+  color: #45ADA8;
+}
+
+a:hover {
+  color: #547980;
+}
+
+a:active {
+  color: #594F4F;
+}
+
+#graph-div {
+  padding: 25px;
+  background-color: white;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 25px;
+  width: 960px;
+  text-align: center;
+}
+
+#percent {
+  width: 20px;
+}
+
+svg {
+  display: block;
+}

staticfiles/silk/css/pages/detail_base.css

@@ -0,0 +1,32 @@
+#traceback {
+  overflow: visible;
+}
+
+#time-div {
+  text-align: center;
+  margin-bottom: 30px;
+}
+
+#query-div {
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+#query {
+  text-align: left;
+  margin: 0 auto;
+  display: inline-block;
+}
+
+.line {
+  width: 100%;
+  display: inline-block;
+}
+
+.the-line {
+  background-color: #c3c3c3;
+}
+
+pre {
+  margin: 0;
+}

staticfiles/silk/css/pages/profile_detail.css

@@ -0,0 +1,52 @@
+#query-info-div {
+  margin-top: 15px;
+}
+
+#query-info-div .timestamp-div {
+  font-size: 13px;
+}
+
+#pyprofile-div {
+  display: block;
+  margin: auto;
+  width: 960px;
+}
+
+.pyprofile {
+  text-align: left;
+}
+
+a {
+  color: #45ADA8;
+}
+
+a:visited {
+  color: #45ADA8;
+}
+
+a:hover {
+  color: #547980;
+}
+
+a:active {
+  color: #594F4F;
+}
+
+#graph-div {
+  padding: 25px;
+  background-color: white;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 25px;
+  width: 960px;
+  text-align: center;
+}
+
+#percent {
+  width: 20px;
+}
+
+svg {
+  display: block;
+}

staticfiles/silk/css/pages/profiling.css

@@ -0,0 +1,16 @@
+.name-div {
+  font-weight: bold;
+}
+
+.container {
+  padding: 0 1em;
+}
+
+h2 {
+  margin-bottom: 10px;
+}
+
+.pyprofile {
+  overflow: scroll;
+  max-height: 650px;
+}

staticfiles/silk/css/pages/raw.css

@@ -0,0 +1,31 @@
+pre {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  background-color: white !important;
+  white-space: pre-wrap; /* css-3 */
+  white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
+  /*noinspection CssInvalidElement*/
+  white-space: -pre-wrap; /* Opera 4-6 */
+  white-space: -o-pre-wrap; /* Opera 7 */
+  word-wrap: break-word; /* Internet Explorer 5.5+ */
+}
+
+code {
+  font-family: Fantasque;
+  background-color: white !important;
+  width: 100% !important;
+  height: auto;
+  padding: 0 !important;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  margin: 0;
+  padding: 0;
+}

staticfiles/silk/css/pages/request.css

@@ -0,0 +1,64 @@
+pre {
+  white-space: pre-wrap; /* css-3 */
+  white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
+  /*noinspection CssInvalidElement*/
+  white-space: -pre-wrap; /* Opera 4-6 */
+  white-space: -o-pre-wrap; /* Opera 7 */
+  word-wrap: break-word; /* Internet Explorer 5.5+ */
+}
+
+.cell {
+  background-color: transparent;
+  margin-top: 15px;
+}
+
+div.wrapper {
+  width: 100%;
+}
+
+div.wrapper div#request-summary {
+  margin: auto;
+  text-align: center;
+  width: 100%;
+}
+
+div.wrapper div#request-info {
+  width: 960px;
+  margin: auto auto 20px;
+}
+
+a {
+  color: #45ADA8;
+}
+
+a:visited {
+  color: #45ADA8;
+}
+
+a:hover {
+  color: #547980;
+}
+
+a:active {
+  color: #594F4F;
+}
+
+.headers {
+  font-size: 12px;
+  font-family: Fantasque;
+  background-color: white;
+  width: 100%;
+}
+
+.headers tr:hover {
+  background-color: #f4f4f4;
+}
+
+.headers td {
+  padding-bottom: 5px;
+  padding-left: 5px;
+}
+
+.headers .key {
+  font-weight: bold;
+}

staticfiles/silk/css/pages/requests.css

@@ -0,0 +1,19 @@
+.container {
+  padding: 0 1em;
+}
+
+.resizing-input input {
+  background-color: white;
+  padding-top: 2px;
+  color: black;
+  box-shadow: inset 0 0 3px black;
+}
+
+.resizing-input input::placeholder {
+  color: #383838;
+  opacity: 1;
+}
+
+.filter-section {
+  line-height: 2.3;
+}

staticfiles/silk/css/pages/root_base.css

@@ -0,0 +1,252 @@
+.cell:hover {
+  background-color: rgb(51, 51, 68);
+  color: white;
+  cursor: pointer;
+}
+
+.cell {
+  text-align: center;
+}
+
+/* General styles for all menus */
+.cbp-spmenu {
+  background: rgb(51, 51, 68);
+  position: fixed;
+}
+
+h3 {
+  color: white;
+  font-size: 1.9em;
+  padding: 10px;
+  margin: 0;
+  font-weight: 300;
+  background: rgb(51, 51, 68);
+}
+
+/*.cbp-spmenu div {*/
+/*display: block;*/
+/*color: #fff;*/
+/*font-size: 1.1em;*/
+/*font-weight: 300;*/
+/*}*/
+/* Orientation-dependent styles for the content of the menu */
+.cbp-spmenu-vertical {
+  width: 300px;
+  height: 100%;
+  top: 0;
+  z-index: 1000;
+}
+
+/* Vertical menu that slides from the left or right */
+.cbp-spmenu-right {
+  right: -300px;
+}
+
+.cbp-spmenu-right.cbp-spmenu-open {
+  right: 0px;
+}
+
+/* Push classes applied to the body */
+.cbp-spmenu-push {
+  overflow-x: hidden;
+  position: relative;
+  left: 0;
+}
+
+.cbp-spmenu-push-toleft {
+  left: -300px;
+}
+
+/* Transitions */
+.cbp-spmenu,
+.cbp-spmenu-push {
+  -webkit-transition: all 0.3s ease;
+  -moz-transition: all 0.3s ease;
+  transition: all 0.3s ease;
+}
+
+/* Example media queries */
+@media screen and (max-width: 55.1875em) {
+  .cbp-spmenu-horizontal {
+    font-size: 75%;
+    height: 110px;
+  }
+}
+.active-filter {
+  font-size: 12px;
+  color: white;
+}
+
+.active-filter td {
+  padding: 0;
+  margin: 0;
+}
+
+#cbp-spmenu-s2 button {
+  color: white;
+  background: none;
+  border: none;
+}
+
+#cbp-spmenu-s2 button:hover {
+  color: black;
+  background: white;
+  border: none;
+  cursor: pointer;
+}
+
+#cbp-spmenu-s2 button:focus {
+  outline: none;
+}
+
+#slider-label {
+  margin-top: 5px;
+}
+
+#outer-slider {
+  text-align: center;
+  width: 80%;
+}
+
+#seconds {
+  width: 200px;
+  height: 50px;
+}
+
+#slider {
+  width: 80%;
+  margin: auto;
+  margin-top: 10px;
+}
+
+input[type=number],
+input[type=text] {
+  border: none;
+  padding: 10px;
+  width: 222px;
+}
+
+.add-button {
+  font-size: 20px;
+  font-weight: bold;
+}
+
+.add-button.disabled {
+  color: darkgray !important;
+}
+
+.add-button.disabled:hover {
+  background: transparent !important;
+  cursor: default !important;
+}
+
+.button-div {
+  display: inline-block;
+  text-align: center;
+  height: 50px;
+}
+
+.apply-div {
+  display: inline-block;
+  background-color: white;
+  color: black;
+  margin: 10px;
+  padding: 10px;
+  border-radius: 5px;
+}
+
+.apply-div:hover {
+  cursor: pointer;
+}
+
+select {
+  border-radius: 0;
+  max-width: 100%;
+}
+
+@media screen and (-webkit-min-device-pixel-ratio: 0) {
+  /*safari and chrome*/
+  select {
+    line-height: 30px;
+    background: #f4f4f4;
+  }
+}
+select::-moz-focus-inner {
+  /*Remove button padding in FF*/
+  border: 0;
+  padding: 0;
+}
+
+#cbp-spmenu-s2 p {
+  margin-bottom: 10px;
+  margin-left: 10px;
+  margin-right: 10px;
+  margin-top: 0;
+  font-size: 12px;
+  color: white;
+  font-style: oblique;
+  line-height: 16px;
+}
+
+#filter-item {
+  width: 24px;
+  height: 20px;
+  float: right;
+  display: inline;
+  background-image: url("../../filter.png");
+  background-size: contain;
+  background-repeat: no-repeat;
+  text-align: right;
+}
+
+#filter-item #num-filters {
+  position: relative;
+  top: 7px;
+  left: 1px;
+}
+
+.resizing-input {
+  display: inline-block;
+}
+
+.resizing-input input, .resizing-input span {
+  font-size: 12px;
+  font-family: FiraSans;
+  white-space: pre;
+  font-weight: 300;
+  background-color: transparent;
+  color: white;
+  padding: 0;
+  padding-left: 4px;
+  padding-right: 4px;
+  margin: 0;
+  letter-spacing: 1px;
+}
+
+.resizing-input input:focus {
+  outline: none;
+}
+
+h4 {
+  padding: 0;
+  margin: 3px;
+  margin-left: 10px;
+  color: white;
+  font-weight: lighter;
+  font-size: 20px;
+}
+
+.filter-section {
+  color: white;
+  font-size: 12px;
+  line-height: 2.3;
+  padding: 10px;
+}
+
+.filter-section select {
+  margin-bottom: 10px;
+}
+
+.filter-section input {
+  padding: 4px;
+}

staticfiles/silk/css/pages/sql.css

@@ -0,0 +1,53 @@
+.right-aligned {
+  text-align: right;
+}
+
+.center-aligned {
+  text-align: center;
+}
+
+.left-aligned {
+  text-align: left;
+}
+
+#table-pagination {
+  text-align: center;
+  margin: 20px;
+}
+
+table {
+  border-spacing: 0;
+  margin: auto;
+  max-width: 920px;
+}
+
+tr {
+  height: 20px;
+}
+
+tr.data-row:hover {
+  background-color: rgb(51, 51, 68);
+  color: white;
+  cursor: pointer;
+}
+
+td {
+  padding: 5px;
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
+th {
+  height: 40px;
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
+#table-div {
+  width: 100%;
+  margin-top: 40px;
+}
+
+#table-pagination div {
+  padding: 5px;
+}

staticfiles/silk/css/pages/sql_detail.css

@@ -0,0 +1,59 @@
+#traceback {
+  width: 960px;
+  margin: auto;
+}
+
+#traceback pre {
+  margin-top: 15px !important;
+  margin-bottom: 15px !important;
+}
+
+#traceback .not-third-party {
+  font-weight: bold;
+}
+
+a:hover {
+  color: #9dd0ff;
+}
+
+a:active {
+  color: #594F4F;
+}
+
+code {
+  background-color: transparent !important;
+}
+
+#query-div pre {
+  background-color: transparent !important;
+}
+
+#query-div {
+  padding-top: 15px;
+}
+
+#query-info-div div {
+  padding-top: 5px;
+}
+
+#query-plan-div {
+  text-align: left;
+  width: 960px;
+  margin: auto;
+}
+
+#plan-div code {
+  margin: auto !important;
+  display: inline-block;
+}
+
+#query-plan-head {
+  padding-top: 5px;
+  padding-bottom: 15px;
+  text-align: center;
+  margin: auto;
+}
+
+.file-path {
+  font-size: 13px;
+}

staticfiles/silk/css/pages/summary.css

@@ -0,0 +1,51 @@
+.wrapper {
+  width: 100%;
+  margin-bottom: 20px;
+}
+
+.inner {
+  margin: auto;
+  width: 960px;
+}
+
+.summary-cell {
+  display: inline-block;
+  text-align: center;
+  padding: 10px;
+  margin-left: 10px;
+  margin-top: 10px;
+}
+
+.summary-cell .desc {
+  margin-top: 8px;
+  font-size: 12px;
+}
+
+.no-data {
+  font-size: 12px;
+  font-style: oblique;
+  margin-left: 10px;
+}
+
+h2 {
+  margin-bottom: 0;
+}
+
+#filters {
+  margin-top: 10px;
+  font-size: 12px;
+}
+
+#filters input,
+#filters span {
+  color: black !important;
+  font-weight: bold;
+}
+
+#filter-image {
+  width: 20px;
+}
+
+#filter-cell {
+  padding-left: 5px;
+}