diff options
author | janekptacijarabaci <janekptacijarabaci@seznam.cz> | 2018-03-30 12:17:17 +0200 |
---|---|---|
committer | janekptacijarabaci <janekptacijarabaci@seznam.cz> | 2018-03-30 12:17:17 +0200 |
commit | e25430117a67f5c898e5e9388ebd44b185d469ab (patch) | |
tree | 2b625f7778dfab0b5219bf6a868ab393eb5be9cd /toolkit/themes/shared | |
parent | a1a007a4856fa50d6d811c2268f881e3666f4c67 (diff) | |
download | uxp-e25430117a67f5c898e5e9388ebd44b185d469ab.tar.gz |
moebius#92: HTML - input - datetime
+ native in moebius:
Bug 1317600: https://bugzilla.mozilla.org/show_bug.cgi?id=1317600
A note - not implemented: Bug 1282768:
https://bugzilla.mozilla.org/show_bug.cgi?id=1282768
*.css: filter: url("chrome://global/skin/filters.svg#fill");, fill:
Bug 1283385: https://bugzilla.mozilla.org/show_bug.cgi?id=1283385
Bug 1323109: https://bugzilla.mozilla.org/show_bug.cgi?id=1323109
Bug 1314544: https://bugzilla.mozilla.org/show_bug.cgi?id=1314544
Bug 1286182: https://bugzilla.mozilla.org/show_bug.cgi?id=1286182
Bug 1325922: https://bugzilla.mozilla.org/show_bug.cgi?id=1325922
A note - not implemented: Bug 1282768:
https://bugzilla.mozilla.org/show_bug.cgi?id=1282768
*.css: filter: url("chrome://global/skin/filters.svg#fill");, fill:
Bug 1320225: https://bugzilla.mozilla.org/show_bug.cgi?id=1320225
Bug 1341190: https://bugzilla.mozilla.org/show_bug.cgi?id=1341190
Diffstat (limited to 'toolkit/themes/shared')
-rw-r--r-- | toolkit/themes/shared/datetimeinputpickers.css | 90 |
1 files changed, 63 insertions, 27 deletions
diff --git a/toolkit/themes/shared/datetimeinputpickers.css b/toolkit/themes/shared/datetimeinputpickers.css index 741f15281f..a0c046f6f1 100644 --- a/toolkit/themes/shared/datetimeinputpickers.css +++ b/toolkit/themes/shared/datetimeinputpickers.css @@ -12,7 +12,8 @@ --colon-width: 2rem; --day-period-spacing-width: 1rem; --calendar-width: 23.1rem; - --date-picker-item-height: 2.4rem; + --date-picker-item-height: 2.5rem; + --date-picker-item-width: 3.3rem; --border: 0.1rem solid #D6D6D6; --border-radius: 0.3rem; @@ -21,6 +22,8 @@ --font-color: #191919; --fill-color: #EBEBEB; + --today-fill-color: rgb(212, 212, 212); + --selected-font-color: #FFFFFF; --selected-fill-color: #0996F8; @@ -29,10 +32,16 @@ --button-font-color-active: #191919; --button-fill-color-active: #D4D4D4; - --weekday-font-color: #6C6C6C; - --weekday-outside-font-color: #6C6C6C; - --weekend-font-color: #DA4E44; - --weekend-outside-font-color: #FF988F; + --weekday-header-font-color: #6C6C6C; + --weekend-header-font-color: rgb(218, 78, 68); + + --weekend-font-color: rgb(218, 78, 68); + --weekday-outside-font-color: rgb(153, 153, 153); + --weekend-outside-font-color: rgb(255, 152, 143); + + --weekday-disabled-font-color: rgba(25, 25, 25, 0.2); + --weekend-disabled-font-color: rgba(218, 78, 68, 0.2); + --disabled-fill-color: rgba(235, 235, 235, 0.8); --disabled-opacity: 0.2; } @@ -181,11 +190,11 @@ button.month-year.active::after { } .week-header > div { - color: var(--weekday-font-color); + color: var(--weekday-header-font-color); } .week-header > div.weekend { - color: var(--weekend-font-color); + color: var(--weekend-header-font-color); } .days-viewport { @@ -206,24 +215,49 @@ button.month-year.active::after { align-items: center; display: flex; height: var(--date-picker-item-height); - margin: 0.05rem 0.15rem; position: relative; justify-content: center; - width: 3rem; + width: var(--date-picker-item-width); } -.days-view > div.outside { +.days-view > .outside { color: var(--weekday-outside-font-color); } -.days-view > div.weekend { +.days-view > .weekend { color: var(--weekend-font-color); } -.days-view > div.weekend.outside { +.days-view > .weekend.outside { color: var(--weekend-outside-font-color); } +.days-view > .out-of-range { + color: var(--weekday-disabled-font-color); + background: var(--disabled-fill-color); +} + +.days-view > .out-of-range.weekend { + color: var(--weekend-disabled-font-color); +} + +.days-view > .today { + font-weight: bold; +} + +.days-view > .out-of-range::before { + display: none; +} + +.days-view > div:hover::before, +.days-view > .select::before, +.days-view > .today::before { + top: 5%; + bottom: 5%; + left: 5%; + right: 5%; +} + #time-picker, .month-year-view { display: flex; @@ -283,22 +317,31 @@ button.month-year.active::after { scroll-snap-coordinate: 0 0; } +.spinner-container > .spinner > div::before, +.calendar-container .days-view > div::before { + position: absolute; + top: 5%; + bottom: 5%; + left: 5%; + right: 5%; + z-index: -10; + border-radius: var(--border-radius); +} + .spinner-container > .spinner > div:hover::before, .calendar-container .days-view > div:hover::before { background: var(--fill-color); border: var(--border); - border-radius: var(--border-radius); content: ""; - position: absolute; - top: 0%; - bottom: 0%; - left: 0%; - right: 0%; - z-index: -10; +} + +.calendar-container .days-view > div.today::before { + background: var(--today-fill-color); + content: ""; } .spinner-container > .spinner:not(.scrolling) > div.selection, -.calendar-container .days-view > div.selection { +.calendar-container .days-view > div.selection:not(.out-of-range) { color: var(--selected-font-color); } @@ -306,14 +349,7 @@ button.month-year.active::after { .calendar-container .days-view > div.selection::before { background: var(--selected-fill-color); border: none; - border-radius: var(--border-radius); content: ""; - position: absolute; - top: 0%; - bottom: 0%; - left: 0%; - right: 0%; - z-index: -10; } .spinner-container > .spinner > div.disabled::before, |