brl/gnome-shell
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

theme: calendar fixups

Browse Source 
- pager button
- day of week
- top date label
- FIXME: current date needs non-uniform border colors
This commit is contained in:
Jakub Steiner 2015-01-14 15:08:44 +01:00 committed by Florian Müllner
parent cbeebbf264
commit e2500092fd
4 changed files with 100 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
data/theme/_common.scss
View File

@ -526,6 +526,14 @@ StScrollBar {
// calendar popover // calendar popover
.calendar { padding: .4em 1.75em .8em 1.75em; } .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 { .calendar-vertical-separator {
width: .3em; width: .3em;
-stipple-width: 1px; -stipple-width: 1px;
@ -538,31 +546,37 @@ StScrollBar {
padding: 8px 0; padding: 8px 0;
&:focus {} &:focus {}
} }
.calendar-change-month-back { //arrow back .pager-button {
&:rtl {} color: white;
&:hover, &:focus {} background-color: transparent;
&:active {} 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-forward { //arrow foreward
&:rtl {} .calendar-change-month-back { //arrow back
&:hover, &:focus {} background-image: url("calendar-arrow-left.svg");
&:active {} &:rtl { background-image: url("calendar-arrow-right.svg"); }
} }
.datemenu-date-label { .calendar-change-month-forward { //arrow foreward
padding: .4em 1.7em; background-image: url("calendar-arrow-right.svg");
text-align: center; &:rtl { background-image: url("calendar-arrow-left.svg"); }
color: darken($fg_color,10%); }
font-size: 130%;
border-radius: 4px;
}
.calendar-day-base { .calendar-day-base {
font-size: 80%; font-size: 80%;
text-align: center; text-align: center;
width: 2.4em; height: 2.4em; width: 2.4em; height: 2.4em;
&:hover,&:focus { background-color: lighten($bg_color,5%); } &:hover,&:focus { background-color: lighten($bg_color,5%); }
&:active { color: lighten($fg_color,5%); background-color: darken($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 .calendar-day { //border collapse hack - see calendar.js
border: 1px solid $borders_color; border: 1px solid $borders_color;
@ -576,7 +590,7 @@ StScrollBar {
font-weight: bold; font-weight: bold;
color: lighten($fg_color,10%); color: lighten($fg_color,10%);
border-bottom-width: 2px; 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 { .calendar-day-with-events {
color: white; color: white;
@ -588,7 +602,7 @@ StScrollBar {
opacity: 0.5; opacity: 0.5;
} }
.events-table { .events-table { //right hand side
width: 15em; width: 15em;
spacing-columns: 1em; spacing-columns: 1em;
padding: 0 1.4em; padding: 0 1.4em;

39
data/theme/gnome-shell-high-contrast.css
View File

@ -988,6 +988,13 @@ StScrollBar {
.calendar { .calendar {
padding: .4em 1.75em .8em 1.75em; } 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 { .calendar-vertical-separator {
width: .3em; width: .3em;
-stipple-width: 1px; -stipple-width: 1px;
@ -998,12 +1005,26 @@ StScrollBar {
font-weight: bold; font-weight: bold;
padding: 8px 0; } padding: 8px 0; }
.datemenu-date-label { .pager-button {
padding: .4em 1.7em; color: white;
text-align: center; background-color: transparent;
color: #e6e6e6; width: 32px;
font-size: 130%; background-position: center;
border-radius: 4px; } 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 { .calendar-day-base {
font-size: 80%; font-size: 80%;
@ -1015,6 +1036,10 @@ StScrollBar {
.calendar-day-base:active { .calendar-day-base:active {
color: white; color: white;
background-color: black; } background-color: black; }
.calendar-day-base.calendar-day-heading {
color: #999999;
margin-top: 1em;
font-size: 90%; }
.calendar-day { .calendar-day {
border: 1px solid black; border: 1px solid black;
@ -1035,7 +1060,7 @@ StScrollBar {
font-weight: bold; font-weight: bold;
color: white; color: white;
border-bottom-width: 2px; border-bottom-width: 2px;
border-color: #215d9c; } border-bottom-color: #215d9c; }
.calendar-day-with-events { .calendar-day-with-events {
color: white; color: white;

39
data/theme/gnome-shell.css
View File

@ -985,6 +985,13 @@ StScrollBar {
.calendar { .calendar {
padding: .4em 1.75em .8em 1.75em; } 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 { .calendar-vertical-separator {
width: .3em; width: .3em;
-stipple-width: 1px; -stipple-width: 1px;
@ -995,12 +1002,26 @@ StScrollBar {
font-weight: bold; font-weight: bold;
padding: 8px 0; } padding: 8px 0; }
.datemenu-date-label { .pager-button {
padding: .4em 1.7em; color: white;
text-align: center; background-color: transparent;
color: #d6d6d1; width: 32px;
font-size: 130%; background-position: center;
border-radius: 4px; } 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 { .calendar-day-base {
font-size: 80%; font-size: 80%;
@ -1012,6 +1033,10 @@ StScrollBar {
.calendar-day-base:active { .calendar-day-base:active {
color: #fafaf9; color: #fafaf9;
background-color: #2d3232; } background-color: #2d3232; }
.calendar-day-base.calendar-day-heading {
color: #8e8e80;
margin-top: 1em;
font-size: 90%; }
.calendar-day { .calendar-day {
border: 1px solid #1c1f1f; border: 1px solid #1c1f1f;
@ -1032,7 +1057,7 @@ StScrollBar {
font-weight: bold; font-weight: bold;
color: white; color: white;
border-bottom-width: 2px; border-bottom-width: 2px;
border-color: #215d9c; } border-bottom-color: #215d9c; }
.calendar-day-with-events { .calendar-day-with-events {
color: white; color: white;

4
js/ui/calendar.js
View File

@ -456,7 +456,7 @@ const Calendar = new Lang.Class({
this._topBox = new St.BoxLayout(); this._topBox = new St.BoxLayout();
layout.attach(this._topBox, 0, 0, offsetCols + 7, 1); 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"), accessible_name: _("Previous month"),
can_focus: true }); can_focus: true });
this._topBox.add(this._backButton); this._topBox.add(this._backButton);
@ -466,7 +466,7 @@ const Calendar = new Lang.Class({
can_focus: true }); can_focus: true });
this._topBox.add(this._monthLabel, { expand: true, x_fill: false, x_align: St.Align.MIDDLE }); 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"), accessible_name: _("Next month"),
can_focus: true }); can_focus: true });
this._topBox.add(this._forwardButton); this._topBox.add(this._forwardButton);