|
Last change
on this file since 33061 was 33061, checked in by wy59, 5 years ago |
- Phase 2: Changed the thickness and opacity label display (which were next to their slider controls) into input fields. Editing the input fields now also updates the slider controls. 2. Some bug fixes, for example can now use numeric and regulare keypad's numbers when focus is on thickness/opacity inputs. 3. Changes to css to get the input fields looking right.
|
|
File size:
2.0 KB
|
| Line | |
|---|
| 1 | /* Always set the map height explicitly to define the size of the div
|
|---|
| 2 | * element that contains the map. */
|
|---|
| 3 | #map {
|
|---|
| 4 | height: 83%;
|
|---|
| 5 | width: 90;
|
|---|
| 6 | float: bottom;
|
|---|
| 7 | clear: both;
|
|---|
| 8 | }
|
|---|
| 9 |
|
|---|
| 10 | /* Optional: Makes the sample page fill the window. */
|
|---|
| 11 | html, body {
|
|---|
| 12 | height: 100%;
|
|---|
| 13 | width: 99%;
|
|---|
| 14 | margin: 0;
|
|---|
| 15 | padding: 0;
|
|---|
| 16 |
|
|---|
| 17 | }
|
|---|
| 18 |
|
|---|
| 19 | .ControlPanel{
|
|---|
| 20 | display: inline-block;
|
|---|
| 21 | border: 2px #739346 solid;
|
|---|
| 22 | padding: 9px;
|
|---|
| 23 | padding-top: 5px;
|
|---|
| 24 | padding-bottom: 0px;
|
|---|
| 25 | border-radius: 40px;
|
|---|
| 26 | margin: 5px;
|
|---|
| 27 | }
|
|---|
| 28 |
|
|---|
| 29 |
|
|---|
| 30 |
|
|---|
| 31 | #ControlButtons{
|
|---|
| 32 | margin: auto;
|
|---|
| 33 | display: inline-block;
|
|---|
| 34 | float: left;
|
|---|
| 35 | padding-left: 10px;
|
|---|
| 36 | padding-top: 5px;
|
|---|
| 37 |
|
|---|
| 38 |
|
|---|
| 39 | }
|
|---|
| 40 | /*hide the input number spinner in Chrome
|
|---|
| 41 | input[type=number]::-webkit-inner-spin-button,
|
|---|
| 42 | input[type=number]::-webkit-outer-spin-button {
|
|---|
| 43 | -webkit-appearance: none;
|
|---|
| 44 | margin: 0;
|
|---|
| 45 | }
|
|---|
| 46 | */
|
|---|
| 47 |
|
|---|
| 48 | #LineThickness{
|
|---|
| 49 | display: inline-block;
|
|---|
| 50 | float: left;
|
|---|
| 51 | margin-left: 3px;
|
|---|
| 52 | margin-right: 3px;
|
|---|
| 53 |
|
|---|
| 54 | }
|
|---|
| 55 |
|
|---|
| 56 | input[type=range]{
|
|---|
| 57 | height: 10px;
|
|---|
| 58 | }
|
|---|
| 59 |
|
|---|
| 60 | /*make '%' display within the input field*/
|
|---|
| 61 | .valueChanger {
|
|---|
| 62 | height: 21px;
|
|---|
| 63 | width: 70px;
|
|---|
| 64 | position: relative;
|
|---|
| 65 | display: inline-block;
|
|---|
| 66 | }
|
|---|
| 67 |
|
|---|
| 68 | #opacityRangeVal {
|
|---|
| 69 | width: 70%;
|
|---|
| 70 | height: 100%;
|
|---|
| 71 | padding-right: 10%;
|
|---|
| 72 | }
|
|---|
| 73 |
|
|---|
| 74 | .unit {
|
|---|
| 75 | display: block;
|
|---|
| 76 | width: 45px;
|
|---|
| 77 | height: 21px;
|
|---|
| 78 | line-height: 21px;
|
|---|
| 79 | position: absolute;
|
|---|
| 80 | top: 0px;
|
|---|
| 81 | right: 0px;
|
|---|
| 82 | }
|
|---|
| 83 |
|
|---|
| 84 | .valueInput{
|
|---|
| 85 | width:55px;
|
|---|
| 86 | }
|
|---|
| 87 |
|
|---|
| 88 | #ColourOpacity{
|
|---|
| 89 | float: left;
|
|---|
| 90 | margin-left: 3px;
|
|---|
| 91 | margin-right: 3px;
|
|---|
| 92 | }
|
|---|
| 93 |
|
|---|
| 94 | /*
|
|---|
| 95 | #opacityRangeVal{
|
|---|
| 96 | width:250px;
|
|---|
| 97 | max-width:250px;
|
|---|
| 98 | }
|
|---|
| 99 | */
|
|---|
| 100 |
|
|---|
| 101 | #buttons3{
|
|---|
| 102 | display: inline-block;
|
|---|
| 103 | float: left;
|
|---|
| 104 | padding-left: 10px;
|
|---|
| 105 |
|
|---|
| 106 | }
|
|---|
| 107 |
|
|---|
| 108 | #FillColour {
|
|---|
| 109 | /*display: inline;
|
|---|
| 110 | float: left;*/
|
|---|
| 111 | padding-left: 10px;
|
|---|
| 112 | }
|
|---|
| 113 |
|
|---|
| 114 | #color-palette1 {
|
|---|
| 115 | vertical-align: middle;
|
|---|
| 116 | display: inline;
|
|---|
| 117 | }
|
|---|
| 118 |
|
|---|
| 119 | #ThirdRow {
|
|---|
| 120 | clear: left;
|
|---|
| 121 | }
|
|---|
| 122 |
|
|---|
| 123 | #SecondRow> div > p{
|
|---|
| 124 | margin: 5px;
|
|---|
| 125 | }
|
|---|
| 126 |
|
|---|
| 127 | #FillColour > p {
|
|---|
| 128 | margin-top: 5px;
|
|---|
| 129 | display: flex;
|
|---|
| 130 | float: left;
|
|---|
| 131 | }
|
|---|
| 132 | .color-buttons1 {
|
|---|
| 133 | width: 14px;
|
|---|
| 134 | height: 14px;
|
|---|
| 135 | font-size: 0;
|
|---|
| 136 | margin: 2px;
|
|---|
| 137 | margin-top: 5px;
|
|---|
| 138 | margin-left: 10px;
|
|---|
| 139 | float: left;
|
|---|
| 140 | display: inline;
|
|---|
| 141 | cursor: pointer;
|
|---|
| 142 | }
|
|---|
Note:
See
TracBrowser
for help on using the repository browser.
