datetime/calendar popup
- separator seems to have a semi-opaque top that interfers with the bottom row of teh calendar - current day can't have a blue brder on the bottom, but $borders_color on the sides. Apparently cannot use non-uniform border colors. - month pager missing
This commit is contained in:
Jakub Steiner
Florian Müllner
parent
ef3285d5e7
commit
1fd968d520
@ -324,6 +324,101 @@ StScrollBar {
|
||||
|
||||
.screencast-indicator { color: $warning_color; }
|
||||
}
|
||||
// calendar popover
|
||||
.calendar { padding: .4em 1.75em .8em 1.75em; }
|
||||
|
||||
.calendar-vertical-separator {
|
||||
width: .3em;
|
||||
-stipple-width: 1px;
|
||||
-stipple-color: transparentize($fg_color,0.8);
|
||||
}
|
||||
|
||||
.calendar-month-label {
|
||||
color: darken($fg_color,5%);
|
||||
font-weight: bold;
|
||||
padding: 8px 0;
|
||||
&:focus {}
|
||||
}
|
||||
|
||||
.calendar-change-month-back { //arrow back
|
||||
&:rtl {}
|
||||
&:hover, &:focus {}
|
||||
&:active {}
|
||||
}
|
||||
.calendar-change-month-forward { //arrow foreward
|
||||
&:rtl {}
|
||||
&:hover, &:focus {}
|
||||
&:active {}
|
||||
}
|
||||
.datemenu-date-label {
|
||||
padding: .4em 1.7em;
|
||||
text-align: center;
|
||||
color: darken($fg_color,10%);
|
||||
font-size: 130%;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.calendar-day-base {
|
||||
font-size: 80%;
|
||||
text-align: center;
|
||||
width: 2.4em; height: 2.4em;
|
||||
&:hover,&:focus { background-color: lighten($bg_color,5%); }
|
||||
&:active { color: lighten($fg_color,5%); background-color: darken($bg_color,5%);}
|
||||
}
|
||||
.calendar-day { //border collapse hack - see calendar.js
|
||||
border: 1px solid $borders_color;
|
||||
border-top-width: 0; border-left-width: 0;
|
||||
}
|
||||
.calendar-day-top { border-top-width: 1px; }
|
||||
.calendar-day-left { border-left-width: 1px; }
|
||||
.calendar-work-day {}
|
||||
.calendar-nonwork-day { background-color: darken($bg_color, 2%); color: darken($fg_color,5%); }
|
||||
.calendar-today {
|
||||
font-weight: bold;
|
||||
color: lighten($fg_color,10%);
|
||||
border-bottom-width: 2px;
|
||||
border-color: $selected_bg_color; //FIXME sadly can't have a color per side.
|
||||
}
|
||||
.calendar-day-with-events {
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
}
|
||||
.calendar-other-month-day {
|
||||
color: opacify($fg_color,0.5);
|
||||
background-color: opacify($bg_color,0.5);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.events-table {
|
||||
width: 15em;
|
||||
spacing-columns: 1em;
|
||||
padding: 0 1.4em;
|
||||
&:ltr { padding-right: 1.9em; }
|
||||
&:rtl { padding-left: 1.9em; }
|
||||
}
|
||||
.events-day-header {
|
||||
font-weight: bold;
|
||||
color: darken($fg_color,10%);
|
||||
padding-left: 0;
|
||||
padding-top: 1.2em;
|
||||
&:first-child { padding-top: 0; }
|
||||
}
|
||||
.events-day-dayname {
|
||||
color: darken($fg_color,10%);
|
||||
text-align: left;
|
||||
min-width: 20px;
|
||||
&:rtl { text-align: right; }
|
||||
.events-day-time {
|
||||
text-align: right;
|
||||
&:rtl { text-align: left; }
|
||||
}
|
||||
.events-day-task {
|
||||
color: darken($fg_color,10%);
|
||||
&:ltr { padding-left: 8px; }
|
||||
&:rtl { padding-right: 8px; }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// a little unstructured mess:
|
||||
|
||||
|
||||
@ -89,219 +89,6 @@
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* Overview */
|
||||
|
||||
/* Calendar popup */
|
||||
|
||||
.calendar-vertical-separator {
|
||||
-stipple-width: 1px;
|
||||
-stipple-color: #505050;
|
||||
width: 0.3em;
|
||||
}
|
||||
|
||||
.calendar {
|
||||
padding: .4em 1.75em .8em 1.75em;
|
||||
}
|
||||
|
||||
.calendar-month-label {
|
||||
color: #888a85;
|
||||
font-size: 9.5pt;
|
||||
font-weight: bold;
|
||||
padding-bottom: 8px;
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
.calendar-month-label:focus {
|
||||
background-color: #999999;
|
||||
}
|
||||
|
||||
.calendar-change-month-back {
|
||||
width: 18px;
|
||||
height: 12px;
|
||||
background-image: url("calendar-arrow-left.svg");
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.calendar-change-month-back:rtl {
|
||||
background-image: url("calendar-arrow-right.svg");
|
||||
}
|
||||
|
||||
.calendar-change-month-back:hover,
|
||||
.calendar-change-month-back:focus {
|
||||
background-color: #999999;
|
||||
}
|
||||
.calendar-change-month-back:active {
|
||||
background-color: #aaaaaa;
|
||||
}
|
||||
|
||||
.calendar-change-month-forward {
|
||||
width: 18px;
|
||||
height: 12px;
|
||||
background-image: url("calendar-arrow-right.svg");
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.calendar-change-month-forward:rtl {
|
||||
background-image: url("calendar-arrow-left.svg");
|
||||
}
|
||||
|
||||
.calendar-change-month-forward:hover,
|
||||
.calendar-change-month-forward:focus {
|
||||
background-color: #999999;
|
||||
}
|
||||
.calendar-change-month-forward:active {
|
||||
background-color: #aaaaaa;
|
||||
}
|
||||
|
||||
.datemenu-date-label {
|
||||
padding: .4em 1.7em;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
color: #eeeeec;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.datemenu-date-label:hover,
|
||||
.datemenu-date-label:focus {
|
||||
background-color: #999999;
|
||||
}
|
||||
|
||||
.datemenu-date-label:active {
|
||||
background-color: #aaaaaa;
|
||||
}
|
||||
|
||||
.calendar-day-base {
|
||||
font-size: 9pt;
|
||||
text-align: center;
|
||||
width: 2.4em;
|
||||
height: 2.4em;
|
||||
}
|
||||
|
||||
.calendar-day-base:hover,
|
||||
.calendar-day-base:focus {
|
||||
background-color: #777777;
|
||||
}
|
||||
|
||||
.calendar-day-base:active {
|
||||
font-size: 9pt;
|
||||
background-color: #555555;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.calendar-day-heading {
|
||||
color: #888a85;
|
||||
padding-top: .2em;
|
||||
height: 1.7em;
|
||||
}
|
||||
|
||||
.calendar-week-number {
|
||||
color: #babdb6;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Hack used in lieu of border-collapse - see calendar.js */
|
||||
.calendar-day {
|
||||
border: 1px solid #505050;
|
||||
color: #babdb6;
|
||||
border-top-width: 0;
|
||||
border-left-width: 0;
|
||||
}
|
||||
|
||||
.calendar-day-top {
|
||||
border-top-width: 1px;
|
||||
}
|
||||
|
||||
.calendar-day-left {
|
||||
border-left-width: 1px;
|
||||
}
|
||||
|
||||
.calendar-work-day {
|
||||
}
|
||||
|
||||
.calendar-nonwork-day {
|
||||
background-color: rgba(128, 128, 128, .1);
|
||||
}
|
||||
|
||||
.calendar-today {
|
||||
background-image: url("calendar-today.svg");
|
||||
text-shadow: black 0px 2px 2px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.calendar-day-with-events {
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.calendar-other-month-day {
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.events-table {
|
||||
width: 320px;
|
||||
spacing-columns: 6pt;
|
||||
padding: 0 1.4em;
|
||||
}
|
||||
|
||||
.events-table:ltr {
|
||||
padding-right: 1.9em;
|
||||
}
|
||||
|
||||
.events-table:rtl {
|
||||
padding-left: 1.9em;
|
||||
}
|
||||
|
||||
.events-day-header {
|
||||
font-weight: bold;
|
||||
color: #999999;
|
||||
padding-left: 0.4em;
|
||||
padding-top: 1.2em;
|
||||
}
|
||||
|
||||
.events-day-header:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.events-day-header:rtl {
|
||||
padding-left: 0;
|
||||
padding-right: 0.4em;
|
||||
}
|
||||
|
||||
.events-day-dayname {
|
||||
color: rgba(153, 153, 153, 1.0);
|
||||
text-align: left;
|
||||
min-width: 20px;
|
||||
}
|
||||
|
||||
.events-day-dayname:rtl {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.events-day-time {
|
||||
color: #fff;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.events-day-time:rtl {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.events-day-task {
|
||||
color: rgba(153, 153, 153, 1.0);
|
||||
padding-left: 8pt;
|
||||
}
|
||||
|
||||
.events-day-task:rtl {
|
||||
padding-left: 0px;
|
||||
padding-right: 8pt;
|
||||
}
|
||||
|
||||
/* Message Tray */
|
||||
|
||||
|
||||
/* OSD */
|
||||
.osd-window {
|
||||
text-align: center;
|
||||
|
||||
@ -70,172 +70,6 @@
|
||||
.no-networks-box {
|
||||
spacing: 12px; }
|
||||
|
||||
/* Overview */
|
||||
/* Calendar popup */
|
||||
.calendar-vertical-separator {
|
||||
-stipple-width: 1px;
|
||||
-stipple-color: #505050;
|
||||
width: 0.3em; }
|
||||
|
||||
.calendar {
|
||||
padding: .4em 1.75em .8em 1.75em; }
|
||||
|
||||
.calendar-month-label {
|
||||
color: #888a85;
|
||||
font-size: 9.5pt;
|
||||
font-weight: bold;
|
||||
padding-bottom: 8px;
|
||||
padding-top: 8px; }
|
||||
|
||||
.calendar-month-label:focus {
|
||||
background-color: #999999; }
|
||||
|
||||
.calendar-change-month-back {
|
||||
width: 18px;
|
||||
height: 12px;
|
||||
background-image: url("calendar-arrow-left.svg");
|
||||
border-radius: 4px; }
|
||||
|
||||
.calendar-change-month-back:rtl {
|
||||
background-image: url("calendar-arrow-right.svg"); }
|
||||
|
||||
.calendar-change-month-back:hover,
|
||||
.calendar-change-month-back:focus {
|
||||
background-color: #999999; }
|
||||
|
||||
.calendar-change-month-back:active {
|
||||
background-color: #aaaaaa; }
|
||||
|
||||
.calendar-change-month-forward {
|
||||
width: 18px;
|
||||
height: 12px;
|
||||
background-image: url("calendar-arrow-right.svg");
|
||||
border-radius: 4px; }
|
||||
|
||||
.calendar-change-month-forward:rtl {
|
||||
background-image: url("calendar-arrow-left.svg"); }
|
||||
|
||||
.calendar-change-month-forward:hover,
|
||||
.calendar-change-month-forward:focus {
|
||||
background-color: #999999; }
|
||||
|
||||
.calendar-change-month-forward:active {
|
||||
background-color: #aaaaaa; }
|
||||
|
||||
.datemenu-date-label {
|
||||
padding: .4em 1.7em;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
color: #eeeeec;
|
||||
border-radius: 4px; }
|
||||
|
||||
.datemenu-date-label:hover,
|
||||
.datemenu-date-label:focus {
|
||||
background-color: #999999; }
|
||||
|
||||
.datemenu-date-label:active {
|
||||
background-color: #aaaaaa; }
|
||||
|
||||
.calendar-day-base {
|
||||
font-size: 9pt;
|
||||
text-align: center;
|
||||
width: 2.4em;
|
||||
height: 2.4em; }
|
||||
|
||||
.calendar-day-base:hover,
|
||||
.calendar-day-base:focus {
|
||||
background-color: #777777; }
|
||||
|
||||
.calendar-day-base:active {
|
||||
font-size: 9pt;
|
||||
background-color: #555555;
|
||||
color: white; }
|
||||
|
||||
.calendar-day-heading {
|
||||
color: #888a85;
|
||||
padding-top: .2em;
|
||||
height: 1.7em; }
|
||||
|
||||
.calendar-week-number {
|
||||
color: #babdb6;
|
||||
font-weight: bold; }
|
||||
|
||||
/* Hack used in lieu of border-collapse - see calendar.js */
|
||||
.calendar-day {
|
||||
border: 1px solid #505050;
|
||||
color: #babdb6;
|
||||
border-top-width: 0;
|
||||
border-left-width: 0; }
|
||||
|
||||
.calendar-day-top {
|
||||
border-top-width: 1px; }
|
||||
|
||||
.calendar-day-left {
|
||||
border-left-width: 1px; }
|
||||
|
||||
.calendar-nonwork-day {
|
||||
background-color: rgba(128, 128, 128, 0.1); }
|
||||
|
||||
.calendar-today {
|
||||
background-image: url("calendar-today.svg");
|
||||
text-shadow: black 0px 2px 2px;
|
||||
font-weight: bold; }
|
||||
|
||||
.calendar-day-with-events {
|
||||
font-weight: bold;
|
||||
color: white; }
|
||||
|
||||
.calendar-other-month-day {
|
||||
color: #333333; }
|
||||
|
||||
.events-table {
|
||||
width: 320px;
|
||||
spacing-columns: 6pt;
|
||||
padding: 0 1.4em; }
|
||||
|
||||
.events-table:ltr {
|
||||
padding-right: 1.9em; }
|
||||
|
||||
.events-table:rtl {
|
||||
padding-left: 1.9em; }
|
||||
|
||||
.events-day-header {
|
||||
font-weight: bold;
|
||||
color: #999999;
|
||||
padding-left: 0.4em;
|
||||
padding-top: 1.2em; }
|
||||
|
||||
.events-day-header:first-child {
|
||||
padding-top: 0; }
|
||||
|
||||
.events-day-header:rtl {
|
||||
padding-left: 0;
|
||||
padding-right: 0.4em; }
|
||||
|
||||
.events-day-dayname {
|
||||
color: #999999;
|
||||
text-align: left;
|
||||
min-width: 20px; }
|
||||
|
||||
.events-day-dayname:rtl {
|
||||
text-align: right; }
|
||||
|
||||
.events-day-time {
|
||||
color: #fff;
|
||||
text-align: right; }
|
||||
|
||||
.events-day-time:rtl {
|
||||
text-align: left; }
|
||||
|
||||
.events-day-task {
|
||||
color: #999999;
|
||||
padding-left: 8pt; }
|
||||
|
||||
.events-day-task:rtl {
|
||||
padding-left: 0px;
|
||||
padding-right: 8pt; }
|
||||
|
||||
/* Message Tray */
|
||||
/* OSD */
|
||||
.osd-window {
|
||||
text-align: center;
|
||||
@ -1243,6 +1077,101 @@ StScrollBar {
|
||||
#panel .screencast-indicator {
|
||||
color: #f57900; }
|
||||
|
||||
.calendar {
|
||||
padding: .4em 1.75em .8em 1.75em; }
|
||||
|
||||
.calendar-vertical-separator {
|
||||
width: .3em;
|
||||
-stipple-width: 1px;
|
||||
-stipple-color: rgba(238, 238, 236, 0.2); }
|
||||
|
||||
.calendar-month-label {
|
||||
color: #e2e2df;
|
||||
font-weight: bold;
|
||||
padding: 8px 0; }
|
||||
|
||||
.datemenu-date-label {
|
||||
padding: .4em 1.7em;
|
||||
text-align: center;
|
||||
color: #d6d6d1;
|
||||
font-size: 130%;
|
||||
border-radius: 4px; }
|
||||
|
||||
.calendar-day-base {
|
||||
font-size: 80%;
|
||||
text-align: center;
|
||||
width: 2.4em;
|
||||
height: 2.4em; }
|
||||
.calendar-day-base:hover, .calendar-day-base:focus {
|
||||
background-color: #454c4c; }
|
||||
.calendar-day-base:active {
|
||||
color: #fafaf9;
|
||||
background-color: #2d3232; }
|
||||
|
||||
.calendar-day {
|
||||
border: 1px solid #1c1f1f;
|
||||
border-top-width: 0;
|
||||
border-left-width: 0; }
|
||||
|
||||
.calendar-day-top {
|
||||
border-top-width: 1px; }
|
||||
|
||||
.calendar-day-left {
|
||||
border-left-width: 1px; }
|
||||
|
||||
.calendar-nonwork-day {
|
||||
background-color: #343a3a;
|
||||
color: #e2e2df; }
|
||||
|
||||
.calendar-today {
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
border-bottom-width: 2px;
|
||||
border-color: #215d9c; }
|
||||
|
||||
.calendar-day-with-events {
|
||||
color: white;
|
||||
font-weight: bold; }
|
||||
|
||||
.calendar-other-month-day {
|
||||
color: #eeeeec;
|
||||
background-color: #393f3f;
|
||||
opacity: 0.5; }
|
||||
|
||||
.events-table {
|
||||
width: 15em;
|
||||
spacing-columns: 1em;
|
||||
padding: 0 1.4em; }
|
||||
.events-table:ltr {
|
||||
padding-right: 1.9em; }
|
||||
.events-table:rtl {
|
||||
padding-left: 1.9em; }
|
||||
|
||||
.events-day-header {
|
||||
font-weight: bold;
|
||||
color: #d6d6d1;
|
||||
padding-left: 0;
|
||||
padding-top: 1.2em; }
|
||||
.events-day-header:first-child {
|
||||
padding-top: 0; }
|
||||
|
||||
.events-day-dayname {
|
||||
color: #d6d6d1;
|
||||
text-align: left;
|
||||
min-width: 20px; }
|
||||
.events-day-dayname:rtl {
|
||||
text-align: right; }
|
||||
.events-day-dayname .events-day-time {
|
||||
text-align: right; }
|
||||
.events-day-dayname .events-day-time:rtl {
|
||||
text-align: left; }
|
||||
.events-day-dayname .events-day-task {
|
||||
color: #d6d6d1; }
|
||||
.events-day-dayname .events-day-task:ltr {
|
||||
padding-left: 8px; }
|
||||
.events-day-dayname .events-day-task:rtl {
|
||||
padding-right: 8px; }
|
||||
|
||||
.system-switch-user-submenu-icon {
|
||||
icon-size: 24px;
|
||||
border: 1px solid rgba(238, 238, 236, 0.4); }
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user