More‎ > ‎

Improved CSS for Google Chrome Experiments DAT.GUI for Light Web Pages

BY MARKUS SPRUNCK


The minimal lightweight graphical user interface DAT.GUI is my favorite library for small experimental JavaScript web applications. It has a small foot print and offers almost everything you need to change parameters for your webpage. Unfortunately the style is very dark, so it doesn't fit for pages with white background.

You Don't Know the Power of the Dark Side

Maybe you share the opinion of Darth Vader, but I prefer the more light colors. With just a simple Cascading Style Sheets (CSS) File you may change the original style like in Figure 1 into a lighter style (see Figure 2).

    
   Figure 1: Orignial Style of DAT.GUI   Figure 2: Improved Style of DAT.GUI

In this example also the font has been changed and size increased for better readability. The style reacts with light blue borders when hover over some elements. 

DAT.GUI Style in 30 Seconds

The integration is very simple. Just insert a link to the new style after the include of dat.gui.js like in the following code:

1
2
<script type="text/javascript" src="dat.gui.js"></script>'
<link type="text/css" rel="stylesheet" href="dat-gui-swec.css">

Content of the new style:

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
.dg {
       color: black;
       font: 400 14px Verdana, Arial, sans-serif;
       text-shadow: white 0 0 0;
} 
.dg .c .slider {
       background: silver
} 
.dg .c .slider:hover {
       background: silver
} 
.dg .c input[type=text] {
       background: white;
       border-color: lightgrey;
       border-radius: 2px;
       border-style: solid;
       border-width: 1.1px;
       color: black
} 
.dg .c input[type=text]:active {
       background: white;
       color: black;
       outline-color: lightblue;
       outline-style: solid;
       outline-width: 1.5px
} 
.dg .c input[type=text]:focus {
       background: white;
       color: black;
       outline-color: lightblue;
       outline-style: solid;
       outline-width: 1.5px
} 
.dg .c input[type=text]:hover {
       background: white;
       color: black;
       outline-color: lightblue;
       outline-style: solid;
       outline-width: 1.5px
} 
.dg .closed li.title {
       background: -moz-linear-gradient(center top, #ededed 34%, #dfdfdf 71%);
       background: -ms-linear-gradient(top, #ededed 34%, #dfdfdf 71%);
       background: -webkit-gradient(linear, left top, left bottom, color-stop(34%, #ededed), 
                    color-stop(71%, #dfdfdf));
       background-color: #ededed;
       border: 1px solid #dcdcdc;
       border-radius: 2px;
       box-shadow: inset 1px 0 9px 0 white;
       color: #777;
       text-shadow: 1px 0 0 white
} 
.dg .cr.boolean:hover {
       background: white;
       border-bottom: 1px solid silver;
       border-right: 1px solid silver
}
.dg .cr.function:hover {
       background: white;
       border-bottom: 1px solid silver;
       border-right: 1px solid silver
} 
.dg li.cr {
       background: #fafafa;
       border-bottom: 1px solid silver;
       border-right: 1px solid silver
} 
.dg li.cr:hover {
       background: white;
       border-bottom: 1px solid silver;
       border-right: 1px solid silver
}
.dg li.title, .dg closed {
       background: -moz-linear-gradient(center top, #ededed 34%, #dfdfdf 71%);
       background: -ms-linear-gradient(top, #ededed 34%, #dfdfdf 71%);
       background: -webkit-gradient(linear, left top, left bottom, color-stop(34%, #ededed), 
                    color-stop(71%, #dfdfdf));
       background-color: #ededed;
       border: 1px solid #dcdcdc;
       border-radius: 2px;
       box-shadow: inset 1px 0 9px 0 white;
       color: black;
       text-shadow: 1px 0 0 white
} 
.dg li.title:hover {
       outline-color: lightblue;
       outline-style: solid;
       outline-width: 1.5px
} 
.dg.main .close-button {
       background: -moz-linear-gradient(center top, #ededed 34%, #dfdfdf 71%);
       background: -ms-linear-gradient(top, #ededed 34%, #dfdfdf 71%);
       background: -webkit-gradient(linear, left top, left bottom, color-stop(34%, #ededed), 
                    color-stop(71%, #dfdfdf));
       background-color: #ededed;
       border: 1px solid #dcdcdc;
       border-radius: 2px;
       box-shadow: inset 1px 0 9px 0 white;
       color: black;
       height: 27px;
       line-height: 27px;
       text-align: center;
       text-shadow: 1px 0 0 white
} 
.dg.main .close-button:hover {
       outline-color: lightblue;
       outline-style: solid;
       outline-width: 1.5px
}

Find Code on GitHub

Sponsored Link