git.wh0rd.org / tt-rss.git / blame
| Commit | Line | Data |
|---|---|---|
| 81bea17a AD |
1 | /* Time Picker |
| 2 | * | |
| 3 | * Styling the Time Picker consists of the following: | |
| 4 | * | |
| 5 | * 1. minor time values | |
| 6 | * .dijitTimePickerTick - set text color, size, background color of minor values | |
| 7 | * .dijitTimePickerTickHover - set hover style of minor time values | |
| 8 | * dijitTimePickerTickSelected - set selected style of minor time values | |
| 9 | * | |
| 10 | * 2. major time values - 1:00, 2:00, times on the hour | |
| 11 | * set text color, size, background color, left/right margins for "zoom" affect | |
| 12 | * .dijitTimePickerMarkerHover - to set hover style of major time values | |
| 13 | * .dijitTimePickerMarkerSelected - set selected style of major time values | |
| 14 | * | |
| 15 | * 3. up and down arrow buttons | |
| 16 | * .dijitTimePicker .dijitButtonNode - background-color, border | |
| 17 | * .dijitTimePicker .dijitUpArrowHover, .dijitTimePicker .dijitDownArrowHover - set background-color for hover state | |
| 18 | * | |
| 19 | * Other classes provide the fundamental structure of the TimePicker and should not be modified. | |
| 20 | */ | |
| 21 | ||
| 22 | @import "variables"; | |
| 23 | ||
| 24 | /* override Button.css */ | |
| 25 | .claro .dijitTimePicker .dijitButtonNode { | |
| 26 | padding: 0 0; | |
| 27 | .border-radius(0); | |
| 28 | } | |
| 29 | .claro .dijitTimePicker{ | |
| 30 | border:1px @border-color solid; | |
| 31 | border-top:none; | |
| 32 | border-bottom:none; | |
| 33 | background-color:#fff; /* TODO: useless? Appears to be overridden by settings on individual elements */ | |
| 34 | } | |
| 35 | .claro .dijitTimePickerItem{ | |
| 36 | /* dijitTimePickerItem refers to both Tick's (minor values like 2:15, 2:30, 2:45) and Marker's (major values like 2PM, 3PM) */ | |
| f0cfe83e | 37 | .standard-gradient; |
| 81bea17a AD |
38 | border-top:solid 1px @border-color; |
| 39 | border-bottom:solid 1px @border-color; | |
| 40 | margin-right:-1px; | |
| 41 | margin-left:-1px; | |
| 42 | margin-top:-1px; | |
| 43 | } | |
| 81bea17a AD |
44 | .claro .dijitTimePickerTick { |
| 45 | /* minor value */ | |
| 46 | color:@timepicker-minorvalue-text-color; | |
| 47 | background-color:@timepicker-minorvalue-background-color; | |
| 48 | font-size:0.818em; | |
| 49 | } | |
| 50 | .claro .dijitTimePickerMarker { | |
| 51 | /* major value - 1:00, 2:00, times on the hour */ | |
| 52 | background-color: @timepicker-majorvalue-background-color; | |
| 53 | font-size: 1em; | |
| 54 | white-space: nowrap; | |
| 55 | } | |
| 56 | .claro .dijitTimePickerTickHover, | |
| 57 | .claro .dijitTimePickerMarkerHover, | |
| 58 | .claro .dijitTimePickerMarkerSelected, | |
| 59 | .claro .dijitTimePickerTickSelected { | |
| 60 | background-color: @timepicker-value-hovered-background-color; | |
| 61 | border:solid 1px @border-color; | |
| 62 | margin-left:-7px; | |
| 63 | margin-right:-7px; | |
| 64 | color:@timepicker-value-hovered-text-color; | |
| 65 | } | |
| 66 | .claro .dijitTimePickerMarkerSelected, | |
| 67 | .claro .dijitTimePickerTickSelected { | |
| 68 | font-size: 1em; | |
| 69 | } | |
| 70 | .dj_ie .claro .dijitTimePickerTickHover, | |
| 71 | .dj_ie .claro .dijitTimePickerMarkerHover, | |
| 72 | .dj_ie .claro .dijitTimePickerMarkerSelected, | |
| 73 | .dj_ie .claro .dijitTimePickerTickSelected { | |
| 74 | width: 114%; | |
| 75 | } | |
| 76 | .dj_ie6 .claro .dijitTimePickerTickHover, | |
| 77 | .dj_ie6 .claro .dijitTimePickerMarkerHover, | |
| 78 | .dj_ie6 .claro .dijitTimePickerMarkerSelected, | |
| 79 | .dj_ie6 .claro .dijitTimePickerTickSelected { | |
| 80 | position: relative; /* creates widening of element */ | |
| 81 | zoom: 1; /* creates widening of element */ | |
| 82 | } | |
| 83 | .claro .dijitTimePickerTick .dijitTimePickerItemInner { | |
| 84 | padding:1px; | |
| 85 | margin:0; | |
| 86 | } | |
| 87 | .claro .dijitTimePicker .dijitButtonNode { | |
| 88 | border-left:none; | |
| 89 | border-right:none; | |
| 90 | border-color:@border-color; | |
| 91 | background-color: @unselected-background-color; | |
| f0cfe83e | 92 | .standard-gradient; |
| 81bea17a AD |
93 | } |
| 94 | .claro .dijitTimePicker .dijitArrowButtonInner{ | |
| 95 | height: 100%; /* hack claro.button.css */ | |
| 1354d172 | 96 | background-image: url(@image-form-common-arrows); |
| 81bea17a AD |
97 | background-repeat: no-repeat; |
| 98 | background-position:-140px 45%; | |
| 99 | } | |
| 100 | .claro .dijitTimePicker .dijitDownArrowButton .dijitArrowButtonInner{ | |
| 101 | background-position:-35px 45%; | |
| 102 | } | |
| 103 | /* hover */ | |
| 104 | .claro .dijitTimePicker .dijitUpArrowHover, | |
| 105 | .claro .dijitTimePicker .dijitDownArrowHover { | |
| 106 | background-color: @timepicker-arrow-hovered-background-color; | |
| 107 | } | |
| 108 | .claro .dijitTimePicker .dijitUpArrowHover .dijitArrowButtonInner { | |
| 109 | background-position:-175px 45%; | |
| 110 | } | |
| 111 | .claro .dijitTimePicker .dijitDownArrowHover .dijitArrowButtonInner { | |
| 112 | background-position:-70px 45%; | |
| 113 | } | |
| f0cfe83e AD |
114 | |
| 115 | // TODO: should have active rule, for clicking a .dijitTimePickerItem |