[gnome-shell/wip/sass: 22/58] theme: calendar fixups
- From: Carlos Soriano Sánchez <csoriano src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-shell/wip/sass: 22/58] theme: calendar fixups
- Date: Tue, 17 Feb 2015 22:30:01 +0000 (UTC)
commit d1cfaf5751ae2ff6603e5f2505131625fb1404ac
Author: Jakub Steiner <jimmac gmail com>
Date: Wed Jan 14 15:08:44 2015 +0100
theme: calendar fixups
- pager button
- day of week
- top date label
- FIXME: current date needs non-uniform border colors
data/theme/_common.scss | 54 +++++++++++++++++++-----------
data/theme/gnome-shell-high-contrast.css | 39 +++++++++++++++++----
data/theme/gnome-shell.css | 39 +++++++++++++++++----
js/ui/calendar.js | 4 +-
4 files changed, 100 insertions(+), 36 deletions(-)
---
diff --git a/data/theme/_common.scss b/data/theme/_common.scss
index 2248790..bd5733b 100644
--- a/data/theme/_common.scss
+++ b/data/theme/_common.scss
@@ -537,6 +537,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;
@@ -549,31 +557,37 @@ StScrollBar {
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;
+
+ .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
+ background-image: url("calendar-arrow-left.svg");
+ &:rtl { background-image: url("calendar-arrow-right.svg"); }
+ }
+ .calendar-change-month-forward { //arrow foreward
+ background-image: url("calendar-arrow-right.svg");
+ &:rtl { background-image: url("calendar-arrow-left.svg"); }
+ }
+
.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-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;
@@ -587,7 +601,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;
@@ -599,7 +613,7 @@ StScrollBar {
opacity: 0.5;
}
- .events-table {
+ .events-table { //right hand side
width: 15em;
spacing-columns: 1em;
padding: 0 1.4em;
diff --git a/data/theme/gnome-shell-high-contrast.css b/data/theme/gnome-shell-high-contrast.css
index 2054cae..8b03015 100644
--- a/data/theme/gnome-shell-high-contrast.css
+++ b/data/theme/gnome-shell-high-contrast.css
@@ -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;
diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index eef8c30..42d09bb 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -989,6 +989,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;
@@ -999,12 +1006,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%;
@@ -1016,6 +1037,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;
@@ -1036,7 +1061,7 @@ StScrollBar {
font-weight: bold;
color: white;
border-bottom-width: 2px;
- border-color: #215d9c; }
+ border-bottom-color: #215d9c; }
.calendar-day-with-events {
color: white;
diff --git a/js/ui/calendar.js b/js/ui/calendar.js
index b778604..1bb98ca 100644
--- a/js/ui/calendar.js
+++ b/js/ui/calendar.js
@@ -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);
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
