improve calendar layout and legibitily

This fixes some alignment issues with the calendar
events pane. It also makes some legitibility improvements
by using bigger fonts and clearer colors.
This commit is contained in:
Allan Day 2012-07-13 15:44:33 +01:00 committed by Allan Day
parent 10a0762fe7
commit 63cdb1848e
2 changed files with 81 additions and 75 deletions

View File

@ -10,11 +10,11 @@
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="28"
height="25"
width="29"
height="29"
id="svg10621"
version="1.1"
inkscape:version="0.48.1 r9760"
inkscape:version="0.48.2 r9819"
sodipodi:docname="calendar-today.svg">
<defs
id="defs10623">
@ -118,6 +118,17 @@
fx="51"
fy="30"
r="42" />
<radialGradient
inkscape:collect="always"
xlink:href="#linearGradient34508-1-3"
id="radialGradient3113"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(0.72146227,0,0,0.27484277,14.205424,21.754717)"
cx="51"
cy="30"
fx="51"
fy="30"
r="42" />
</defs>
<sodipodi:namedview
id="base"
@ -127,20 +138,29 @@
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:zoom="15.839192"
inkscape:cx="8.3750933"
inkscape:cy="8.0837211"
inkscape:cx="20.652108"
inkscape:cy="11.839084"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
showgrid="true"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:window-width="1440"
inkscape:window-height="843"
inkscape:window-width="1280"
inkscape:window-height="741"
inkscape:window-x="0"
inkscape:window-y="26"
inkscape:window-maximized="1" />
inkscape:window-y="27"
inkscape:window-maximized="1"
borderlayer="true">
<inkscape:grid
type="xygrid"
id="grid3109"
empspacing="5"
visible="true"
enabled="true"
snapvisiblegridlinesonly="true" />
</sodipodi:namedview>
<metadata
id="metadata10626">
<rdf:RDF>
@ -157,31 +177,28 @@
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-469.08263,-536.99307)">
<g
id="g3003">
transform="translate(-469.08263,-532.99307)">
<path
inkscape:export-ydpi="90"
inkscape:export-xdpi="90"
inkscape:export-filename="/home/jimmac/src/cvs/gnome/gnome-shell-design/mockups/motion/textures/panel.png"
transform="matrix(0.43692393,0,0,1.3783114,460.60467,517.48289)"
sodipodi:end="6.2831853"
sodipodi:start="3.1415927"
d="M 9,29.999999 C 9.0000011,21.163443 27.804042,14 51.000002,14 74.195961,14 93,21.163444 93,30 l -42,0 z"
sodipodi:ry="16"
sodipodi:rx="42"
sodipodi:cy="30"
sodipodi:cx="51"
sodipodi:type="arc"
style="opacity:0.4625;color:#000000;fill:url(#radialGradient3113);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
id="path34506-3"
style="opacity:0.4625;color:#000000;fill:url(#radialGradient2997);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
sodipodi:type="arc" />
sodipodi:cx="51"
sodipodi:cy="30"
sodipodi:rx="42"
sodipodi:ry="16"
d="M 9,29.999999 A 42,16 0 0 1 93,30 l -42,0 z"
sodipodi:start="3.1415927"
sodipodi:end="6.2831853"
transform="matrix(0.43692393,0,0,1.3783114,461.29951,517.6437)"
inkscape:export-filename="/home/jimmac/src/cvs/gnome/gnome-shell-design/mockups/motion/textures/panel.png"
inkscape:export-xdpi="90"
inkscape:export-ydpi="90" />
<rect
y="558.85046"
x="468.96878"
height="3.1425927"
width="28.149134"
style="fill:#ffffff;fill-opacity:0.50196078;stroke-width:0.43599999;stroke-miterlimit:4;stroke-dasharray:none"
id="rect2996"
style="fill:#ffffff;fill-opacity:0.50196078;stroke-width:0.43599999;stroke-miterlimit:4;stroke-dasharray:none" />
</g>
width="31"
height="3"
x="468.08264"
y="558.99304" />
</g>
</svg>

Before

Width:  |  Height:  |  Size: 5.7 KiB

After

Width:  |  Height:  |  Size: 6.1 KiB

View File

@ -942,7 +942,7 @@ StScrollBar StButton#vhandle:hover
#calendarEventsArea {
/* this is the width of the second column of the popup */
min-width: 400px;
min-width: 320px;
}
.calendar-vertical-separator {
@ -951,29 +951,22 @@ StScrollBar StButton#vhandle:hover
width: 0.3em;
}
#calendarPopup {
border-radius: 5px;
background: rgba(0,0,0,0.9);
border: 1px solid rgba(128,128,128,0.45);
color: white;
}
#calendarPopup .calendar {
padding: 10px;
}
.calendar {
padding: .4em 1.75em;
padding: .4em 1.75em .8em 1.75em;
spacing-rows: 0px;
spacing-columns: 0px;
}
.calendar-month-label {
color: #666666;
font-size: 7.5pt;
color: #888a85;
font-size: 9.5pt;
font-weight: bold;
padding-bottom: 8px;
padding-top: 8px;
font-weight: bold;
}
.calendar-change-month-back {
@ -1013,14 +1006,14 @@ StScrollBar StButton#vhandle:hover
}
.datemenu-date-label {
padding: .4em 1.75em;
color: #cccccc;
padding: .4em 1.7em;
font-weight: bold;
text-align: center;
color: #eeeeec;
}
.calendar-day-base {
font-size: 7.5pt;
font-size: 9pt;
text-align: center;
width: 2.4em;
height: 2.4em;
@ -1028,33 +1021,37 @@ StScrollBar StButton#vhandle:hover
.calendar-day-base:hover {
background-color: #777777;
color: #fff;
}
.calendar-day-base:active {
font-size: 9pt;
background-color: #555555;
color: white;
}
.calendar-day-heading {
color: #666666;
padding-top: 1em;
color: #888a85;
padding-top: .2em;
height: 1.7em;
}
.calendar-week-number {
color: #666666;
color: #babdb6;
font-weight: bold;
}
/* Hack used in lieu of border-collapse - see calendar.js */
.calendar-day {
border: 1px solid #333333;
color: #888888;
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;
}
@ -1069,7 +1066,6 @@ StScrollBar StButton#vhandle:hover
.calendar-today {
background-image: url("calendar-today.svg");
text-shadow: black 0px 2px 2px;
color: #ffffff;
font-weight: bold;
}
@ -1079,38 +1075,33 @@ StScrollBar StButton#vhandle:hover
.calendar-day-with-events {
font-weight: bold;
color: #cccccc;
color: white;
}
.events-header-vbox {
spacing: 6pt;
padding-right: 1.75em;
padding-right: .5em;
}
.events-header-vbox:rtl {
padding-right: 0em;
padding-left: 1.75em;
padding-left: .5em;
}
.events-header-hbox {
padding: 0.3em;
padding: 0.3em 1.4em;
}
.events-day-header {
font-size: 9pt;
font-weight: bold;
color: rgba(153, 153, 153, 1.0);
padding-left: 1.8em;
padding-top: 0.8em;
color: #999999;
padding: 0.4em 1.4em 0em 1.4em;
}
.events-day-header:rtl {
padding-left: 0em;
padding-right: 0.3em;
padding: 0em 1.4em 0.4em 1.4em;
}
.events-day-dayname {
font-size: 9pt;
color: rgba(153, 153, 153, 1.0);
text-align: left;
}
@ -1120,7 +1111,6 @@ StScrollBar StButton#vhandle:hover
}
.events-day-time {
font-size: 9pt;
color: #fff;
text-align: right;
}
@ -1130,7 +1120,6 @@ StScrollBar StButton#vhandle:hover
}
.events-day-task {
font-size: 9pt;
color: rgba(153, 153, 153, 1.0);
}
@ -1139,13 +1128,13 @@ StScrollBar StButton#vhandle:hover
}
.events-time-box {
min-width: 53pt;
padding-right: 6pt;
min-width: 48pt;
padding-right: 12pt;
}
.events-time-box:rtl {
padding-right: 0px;
padding-left: 6pt;
padding-left: 12pt;
}
.events-event-box {