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

theme: calendar widget visual cleanup

Browse Source 
- clean up visual noise
- some typos in selectors & properties I missed
- misused opacify instead of transparentize
This commit is contained in:
Jakub Steiner 2015-02-04 13:03:46 +01:00 committed by Florian Müllner
parent fc1849b475
commit 7b3eeefc85
3 changed files with 58 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
data/theme/_common.scss
View File

@ -685,7 +685,10 @@ StScrollBar {
.screencast-indicator { color: $warning_color; } .screencast-indicator { color: $warning_color; }
} }
// calendar popover // calendar popover
.calendar { padding: .4em 1.75em .8em 1.75em; } .calendar {
padding: .4em 1.75em .8em 1.75em;
margin-bottom: 2em;
}
.datemenu-date-label { //topmost date label .datemenu-date-label { //topmost date label
padding: .4em 1.7em; padding: .4em 1.7em;
@ -713,7 +716,7 @@ StScrollBar {
background-color: transparent; background-color: transparent;
width: 32px; width: 32px;
background-position: center; background-position: center;
boder-radius: 4px; border-radius: 4px;
&:hover, &:focus { background-color: transparentize($fg_color,0.95); } &:hover, &:focus { background-color: transparentize($fg_color,0.95); }
&:active { background-color: transparentize($bg_color,0.95); } &:active { background-color: transparentize($bg_color,0.95); }
} }
@ -731,35 +734,45 @@ StScrollBar {
font-size: 80%; font-size: 80%;
text-align: center; text-align: center;
width: 2.4em; height: 2.4em; width: 2.4em; height: 2.4em;
padding: 0.1em;
margin: 2px;
&: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: $selected_bg_color;
border-color: transparent; //avoid jumparound due to today
}
&.calendar-day-heading { //day of week heading &.calendar-day-heading { //day of week heading
color: darken($fg_color,40%); color: darken($fg_color,40%);
margin-top: 1em; margin-top: 1em;
font-size: 90%; font-size: 70%;
} }
} }
.calendar-day { //border collapse hack - see calendar.js .calendar-day { //border collapse hack - see calendar.js
border: 1px solid $borders_color; border-width: 0;
border-top-width: 0; border-left-width: 0;
} }
.calendar-day-top { border-top-width: 1px; } .calendar-day-top { border-top-width: 1px; }
.calendar-day-left { border-left-width: 1px; } .calendar-day-left { border-left-width: 1px; }
.calendar-work-day {} .calendar-work-day {
.calendar-nonwork-day { background-color: darken($bg_color, 2%); color: darken($fg_color,5%); } border-radius: 1.4em;
}
.calendar-nonwork-day {
background-color: darken($bg_color, 2%);
color: darken($fg_color,5%);
}
.calendar-today { .calendar-today {
font-weight: bold; font-weight: bold;
color: lighten($fg_color,10%); //color: lighten($fg_color,10%);
border-bottom-width: 2px; //background-color: darken($bg_color,5%);
border-bottom-color: $selected_bg_color; //FIXME sadly can't have a color per side. border: 1px solid transparentize($borders_color,0.5);
} }
.calendar-day-with-events { .calendar-day-with-events {
color: white; color: white;
font-weight: bold; font-weight: bold;
} }
.calendar-other-month-day { .calendar-other-month-day {
color: opacify($fg_color,0.5); color: transparentize($fg_color,0.7);
background-color: opacify($bg_color,0.5); background-color: transparentize($bg_color,0.7);
opacity: 0.5; opacity: 0.5;
} }

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

@ -861,7 +861,8 @@ StScrollBar {
color: #f57900; } color: #f57900; }
.calendar { .calendar {
padding: .4em 1.75em .8em 1.75em; } padding: .4em 1.75em .8em 1.75em;
margin-bottom: 2em; }
.datemenu-date-label { .datemenu-date-label {
padding: .4em 1.7em; padding: .4em 1.7em;
@ -885,7 +886,7 @@ StScrollBar {
background-color: transparent; background-color: transparent;
width: 32px; width: 32px;
background-position: center; background-position: center;
boder-radius: 4px; } border-radius: 4px; }
.pager-button:hover, .pager-button:focus { .pager-button:hover, .pager-button:focus {
background-color: rgba(255, 255, 255, 0.05); } background-color: rgba(255, 255, 255, 0.05); }
.pager-button:active { .pager-button:active {
@ -905,21 +906,22 @@ StScrollBar {
font-size: 80%; font-size: 80%;
text-align: center; text-align: center;
width: 2.4em; width: 2.4em;
height: 2.4em; } height: 2.4em;
padding: 0.1em;
margin: 2px; }
.calendar-day-base:hover, .calendar-day-base:focus { .calendar-day-base:hover, .calendar-day-base:focus {
background-color: #0d0d0d; } background-color: #0d0d0d; }
.calendar-day-base:active { .calendar-day-base:active {
color: white; color: white;
background-color: black; } background-color: #215d9c;
border-color: transparent; }
.calendar-day-base.calendar-day-heading { .calendar-day-base.calendar-day-heading {
color: #999999; color: #999999;
margin-top: 1em; margin-top: 1em;
font-size: 90%; } font-size: 70%; }
.calendar-day { .calendar-day {
border: 1px solid black; border-width: 0; }
border-top-width: 0;
border-left-width: 0; }
.calendar-day-top { .calendar-day-top {
border-top-width: 1px; } border-top-width: 1px; }
@ -927,23 +929,24 @@ StScrollBar {
.calendar-day-left { .calendar-day-left {
border-left-width: 1px; } border-left-width: 1px; }
.calendar-work-day {
border-radius: 1.4em; }
.calendar-nonwork-day { .calendar-nonwork-day {
background-color: black; background-color: black;
color: #f2f2f2; } color: #f2f2f2; }
.calendar-today { .calendar-today {
font-weight: bold; font-weight: bold;
color: white; border: 1px solid rgba(0, 0, 0, 0.5); }
border-bottom-width: 2px;
border-bottom-color: #215d9c; }
.calendar-day-with-events { .calendar-day-with-events {
color: white; color: white;
font-weight: bold; } font-weight: bold; }
.calendar-other-month-day { .calendar-other-month-day {
color: white; color: rgba(255, 255, 255, 0.3);
background-color: black; background-color: rgba(0, 0, 0, 0.3);
opacity: 0.5; } opacity: 0.5; }
.events-table { .events-table {

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

@ -861,7 +861,8 @@ StScrollBar {
color: #f57900; } color: #f57900; }
.calendar { .calendar {
padding: .4em 1.75em .8em 1.75em; } padding: .4em 1.75em .8em 1.75em;
margin-bottom: 2em; }
.datemenu-date-label { .datemenu-date-label {
padding: .4em 1.7em; padding: .4em 1.7em;
@ -885,7 +886,7 @@ StScrollBar {
background-color: transparent; background-color: transparent;
width: 32px; width: 32px;
background-position: center; background-position: center;
boder-radius: 4px; } border-radius: 4px; }
.pager-button:hover, .pager-button:focus { .pager-button:hover, .pager-button:focus {
background-color: rgba(238, 238, 236, 0.05); } background-color: rgba(238, 238, 236, 0.05); }
.pager-button:active { .pager-button:active {
@ -905,21 +906,22 @@ StScrollBar {
font-size: 80%; font-size: 80%;
text-align: center; text-align: center;
width: 2.4em; width: 2.4em;
height: 2.4em; } height: 2.4em;
padding: 0.1em;
margin: 2px; }
.calendar-day-base:hover, .calendar-day-base:focus { .calendar-day-base:hover, .calendar-day-base:focus {
background-color: #454c4c; } background-color: #454c4c; }
.calendar-day-base:active { .calendar-day-base:active {
color: #fafaf9; color: #fafaf9;
background-color: #2d3232; } background-color: #215d9c;
border-color: transparent; }
.calendar-day-base.calendar-day-heading { .calendar-day-base.calendar-day-heading {
color: #8e8e80; color: #8e8e80;
margin-top: 1em; margin-top: 1em;
font-size: 90%; } font-size: 70%; }
.calendar-day { .calendar-day {
border: 1px solid #1c1f1f; border-width: 0; }
border-top-width: 0;
border-left-width: 0; }
.calendar-day-top { .calendar-day-top {
border-top-width: 1px; } border-top-width: 1px; }
@ -927,23 +929,24 @@ StScrollBar {
.calendar-day-left { .calendar-day-left {
border-left-width: 1px; } border-left-width: 1px; }
.calendar-work-day {
border-radius: 1.4em; }
.calendar-nonwork-day { .calendar-nonwork-day {
background-color: #343a3a; background-color: #343a3a;
color: #e2e2df; } color: #e2e2df; }
.calendar-today { .calendar-today {
font-weight: bold; font-weight: bold;
color: white; border: 1px solid rgba(28, 31, 31, 0.5); }
border-bottom-width: 2px;
border-bottom-color: #215d9c; }
.calendar-day-with-events { .calendar-day-with-events {
color: white; color: white;
font-weight: bold; } font-weight: bold; }
.calendar-other-month-day { .calendar-other-month-day {
color: #eeeeec; color: rgba(238, 238, 236, 0.3);
background-color: #393f3f; background-color: rgba(57, 63, 63, 0.3);
opacity: 0.5; } opacity: 0.5; }
.events-table { .events-table {