theme: calendar fixups
- pager button - day of week - top date label - FIXME: current date needs non-uniform border colors
This commit is contained in:
Jakub Steiner
Florian Müllner
parent
cbeebbf264
commit
e2500092fd
@ -526,6 +526,14 @@ StScrollBar {
|
||||
// calendar popover
|
||||
.calendar { padding: .4em 1.75em .8em 1.75em; }
|
||||
|
||||
.datemenu-date-label { //topmost date label
|
||||
padding: .4em 1.7em;
|
||||
text-align: center;
|
||||
color: $fg_color;
|
||||
font-weight: bold;
|
||||
font-size: 110%;
|
||||
}
|
||||
|
||||
.calendar-vertical-separator {
|
||||
width: .3em;
|
||||
-stipple-width: 1px;
|
||||
@ -539,22 +547,23 @@ StScrollBar {
|
||||
&:focus {}
|
||||
}
|
||||
|
||||
.pager-button {
|
||||
color: white;
|
||||
background-color: transparent;
|
||||
width: 32px;
|
||||
background-position: center;
|
||||
boder-radius: 4px;
|
||||
&:hover, &:focus { background-color: transparentize($fg_color,0.95); }
|
||||
&:active { background-color: transparentize($bg_color,0.95); }
|
||||
}
|
||||
|
||||
.calendar-change-month-back { //arrow back
|
||||
&:rtl {}
|
||||
&:hover, &:focus {}
|
||||
&:active {}
|
||||
background-image: url("calendar-arrow-left.svg");
|
||||
&:rtl { background-image: url("calendar-arrow-right.svg"); }
|
||||
}
|
||||
.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;
|
||||
background-image: url("calendar-arrow-right.svg");
|
||||
&:rtl { background-image: url("calendar-arrow-left.svg"); }
|
||||
}
|
||||
|
||||
.calendar-day-base {
|
||||
@ -563,6 +572,11 @@ StScrollBar {
|
||||
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-heading { //day of week heading
|
||||
color: darken($fg_color,40%);
|
||||
margin-top: 1em;
|
||||
font-size: 90%;
|
||||
}
|
||||
}
|
||||
.calendar-day { //border collapse hack - see calendar.js
|
||||
border: 1px solid $borders_color;
|
||||
@ -576,7 +590,7 @@ StScrollBar {
|
||||
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.
|
||||
border-bottom-color: $selected_bg_color; //FIXME sadly can't have a color per side.
|
||||
}
|
||||
.calendar-day-with-events {
|
||||
color: white;
|
||||
@ -588,7 +602,7 @@ StScrollBar {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.events-table {
|
||||
.events-table { //right hand side
|
||||
width: 15em;
|
||||
spacing-columns: 1em;
|
||||
padding: 0 1.4em;
|
||||
|
||||
@ -988,6 +988,13 @@ StScrollBar {
|
||||
.calendar {
|
||||
padding: .4em 1.75em .8em 1.75em; }
|
||||
|
||||
.datemenu-date-label {
|
||||
padding: .4em 1.7em;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
font-size: 110%; }
|
||||
|
||||
.calendar-vertical-separator {
|
||||
width: .3em;
|
||||
-stipple-width: 1px;
|
||||
@ -998,12 +1005,26 @@ StScrollBar {
|
||||
font-weight: bold;
|
||||
padding: 8px 0; }
|
||||
|
||||
.datemenu-date-label {
|
||||
padding: .4em 1.7em;
|
||||
text-align: center;
|
||||
color: #e6e6e6;
|
||||
font-size: 130%;
|
||||
border-radius: 4px; }
|
||||
.pager-button {
|
||||
color: white;
|
||||
background-color: transparent;
|
||||
width: 32px;
|
||||
background-position: center;
|
||||
boder-radius: 4px; }
|
||||
.pager-button:hover, .pager-button:focus {
|
||||
background-color: rgba(255, 255, 255, 0.05); }
|
||||
.pager-button:active {
|
||||
background-color: rgba(0, 0, 0, 0.05); }
|
||||
|
||||
.calendar-change-month-back {
|
||||
background-image: url("calendar-arrow-left.svg"); }
|
||||
.calendar-change-month-back:rtl {
|
||||
background-image: url("calendar-arrow-right.svg"); }
|
||||
|
||||
.calendar-change-month-forward {
|
||||
background-image: url("calendar-arrow-right.svg"); }
|
||||
.calendar-change-month-forward:rtl {
|
||||
background-image: url("calendar-arrow-left.svg"); }
|
||||
|
||||
.calendar-day-base {
|
||||
font-size: 80%;
|
||||
@ -1015,6 +1036,10 @@ StScrollBar {
|
||||
.calendar-day-base:active {
|
||||
color: white;
|
||||
background-color: black; }
|
||||
.calendar-day-base.calendar-day-heading {
|
||||
color: #999999;
|
||||
margin-top: 1em;
|
||||
font-size: 90%; }
|
||||
|
||||
.calendar-day {
|
||||
border: 1px solid black;
|
||||
@ -1035,7 +1060,7 @@ StScrollBar {
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
border-bottom-width: 2px;
|
||||
border-color: #215d9c; }
|
||||
border-bottom-color: #215d9c; }
|
||||
|
||||
.calendar-day-with-events {
|
||||
color: white;
|
||||
|
||||
@ -985,6 +985,13 @@ StScrollBar {
|
||||
.calendar {
|
||||
padding: .4em 1.75em .8em 1.75em; }
|
||||
|
||||
.datemenu-date-label {
|
||||
padding: .4em 1.7em;
|
||||
text-align: center;
|
||||
color: #eeeeec;
|
||||
font-weight: bold;
|
||||
font-size: 110%; }
|
||||
|
||||
.calendar-vertical-separator {
|
||||
width: .3em;
|
||||
-stipple-width: 1px;
|
||||
@ -995,12 +1002,26 @@ StScrollBar {
|
||||
font-weight: bold;
|
||||
padding: 8px 0; }
|
||||
|
||||
.datemenu-date-label {
|
||||
padding: .4em 1.7em;
|
||||
text-align: center;
|
||||
color: #d6d6d1;
|
||||
font-size: 130%;
|
||||
border-radius: 4px; }
|
||||
.pager-button {
|
||||
color: white;
|
||||
background-color: transparent;
|
||||
width: 32px;
|
||||
background-position: center;
|
||||
boder-radius: 4px; }
|
||||
.pager-button:hover, .pager-button:focus {
|
||||
background-color: rgba(238, 238, 236, 0.05); }
|
||||
.pager-button:active {
|
||||
background-color: rgba(57, 63, 63, 0.05); }
|
||||
|
||||
.calendar-change-month-back {
|
||||
background-image: url("calendar-arrow-left.svg"); }
|
||||
.calendar-change-month-back:rtl {
|
||||
background-image: url("calendar-arrow-right.svg"); }
|
||||
|
||||
.calendar-change-month-forward {
|
||||
background-image: url("calendar-arrow-right.svg"); }
|
||||
.calendar-change-month-forward:rtl {
|
||||
background-image: url("calendar-arrow-left.svg"); }
|
||||
|
||||
.calendar-day-base {
|
||||
font-size: 80%;
|
||||
@ -1012,6 +1033,10 @@ StScrollBar {
|
||||
.calendar-day-base:active {
|
||||
color: #fafaf9;
|
||||
background-color: #2d3232; }
|
||||
.calendar-day-base.calendar-day-heading {
|
||||
color: #8e8e80;
|
||||
margin-top: 1em;
|
||||
font-size: 90%; }
|
||||
|
||||
.calendar-day {
|
||||
border: 1px solid #1c1f1f;
|
||||
@ -1032,7 +1057,7 @@ StScrollBar {
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
border-bottom-width: 2px;
|
||||
border-color: #215d9c; }
|
||||
border-bottom-color: #215d9c; }
|
||||
|
||||
.calendar-day-with-events {
|
||||
color: white;
|
||||
|
||||
@ -456,7 +456,7 @@ const Calendar = new Lang.Class({
|
||||
this._topBox = new St.BoxLayout();
|
||||
layout.attach(this._topBox, 0, 0, offsetCols + 7, 1);
|
||||
|
||||
this._backButton = new St.Button({ style_class: 'calendar-change-month-back',
|
||||
this._backButton = new St.Button({ style_class: 'calendar-change-month-back pager-button',
|
||||
accessible_name: _("Previous month"),
|
||||
can_focus: true });
|
||||
this._topBox.add(this._backButton);
|
||||
@ -466,7 +466,7 @@ const Calendar = new Lang.Class({
|
||||
can_focus: true });
|
||||
this._topBox.add(this._monthLabel, { expand: true, x_fill: false, x_align: St.Align.MIDDLE });
|
||||
|
||||
this._forwardButton = new St.Button({ style_class: 'calendar-change-month-forward',
|
||||
this._forwardButton = new St.Button({ style_class: 'calendar-change-month-forward pager-button',
|
||||
accessible_name: _("Next month"),
|
||||
can_focus: true });
|
||||
this._topBox.add(this._forwardButton);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user