source: documented-examples/trunk/style-e/style/gs3-style-blue.css

Last change on this file was 36371, checked in by anupama, 21 months ago

Updates to the GS3 style-e collection, with the new styles and changed the javascript so it's better suited for switching between styles without breaking too much.

File size: 2.9 KB
Line 
1/*
2https://www.w3schools.com/cssref/css_colors.asp
3https://www.w3schools.com/colors/colors_picker.asp
4*/
5:root {
6 --cc-btn-primary-bg: LightSteelBlue;
7}
8
9/* This style sheet is used by the garish collection as an
10 example of modifying the appearance */
11
12/* notes about style sheets.
13
14 Colours - The most portable way to specify colours is to use the
15 #xxxxxx notation, which is in hex for red, green, and blue. eg black
16 is #000000, red is #ff0000, blue is #0000ff and white is #ffffff.
17 This may seem confusing at first, but you can't count on colour names
18 being the same across all browsers and platforms. For example,
19 linux/x11 has hundreds of colours with names such as DarkOliveGreen
20 and PaleVioletRed. However, simple colour names should work with most
21 browsers...
22
23*/
24
25
26/* set defaults for the HTML body */
27body {
28 /* set the face. The first one in the list found will be used, so
29 have reasonable fall-backs */
30 /* use a serif font windows uses "times new roman", "times" on mac/linux */
31 font-family: times new roman, times, serif;
32}
33
34 /* you can set a background colour, but a lot of the images/buttons are
35 designed to blend into a white background. */
36/* Note, this didn't seem to work when placed into above body definition */
37body.bgimage {
38 background-color: LightSteelBlue;
39}
40
41.choose_style {
42 padding: 10px 20px;
43 background: #f5f3e5; /* same as page background */
44}
45
46.choose_style a {
47 color: black;
48}
49
50
51/* background for .ui-widget-content should match background-color for #container and #gs_content
52Note that the full background property needs to be overridden on .ui-widget-content for this to take effect. */
53.ui-widget-content {
54 border: none;
55 background: #f5f3e5;
56}
57
58/* paragraph text - this will override the settings above for text inside
59 <p>....</p> tags. */
60
61p {
62 color: Black;/* DarkSlateGrey */
63 font-weight: normal;
64}
65
66/* headings */
67h1, h2, h3, h4 {
68 /* use a sans-serif font - arial on windows, helvetica on mac/linux */
69 font-family: arial, helvetica, sans-serif;
70 color: SteelBlue;
71}
72
73#titlearea h2, #titlearea h1, #titlearea h3, #titlearea h4 {
74 color: #edf2f7; /* LightCyan #edf2f7 lighter than LightSteelBlue */
75}
76
77#gs_banner {
78 background: SteelBlue;
79 color: white;
80}
81
82#topArea, #viewAndZoomOptions {
83 background: SteelBlue;
84 color: white;
85}
86
87.ui-state-default, .ui-widget-content .ui-state-default {
88 border: 1px solid SteelBlue;
89 background: SteelBlue;
90}
91
92.ui-button, .ui-widget-header, .ui-widget-header .ui-state-default {
93 background: #a5bcd9; /* #a5bcd9 slightly darker than LightSteelBlue*/
94 color: White; /* #325d81 or #2b506e for darker than SteelBlue*/
95}
96
97/*
98#gs-nav .ui-state-default {
99 background: GoldenRod;
100 color: White;
101}
102*/
103
104.ui-button:hover, .ui-widget-header .ui-state-default:hover {
105 background: LightSkyBlue;
106}
107
108.ui-state-active a, .ui-state-active a:link {
109 color: #396a93; /* #325d81 or #2b506e for darker than SteelBlue*/
110}
Note: See TracBrowser for help on using the repository browser.