panel: Update style
Update the style of the panel to match the latest mockups. - add a subtle border at the bottom of the panel - use a highlight of active panel buttons similar to the one used for running applications in the dash/app view - shadow the buttons' label/icon when highlighted https://bugzilla.gnome.org/show_bug.cgi?id=642697
This commit is contained in:
Florian Müllner
parent
4dec1bc846
commit
a5aa7d4bd6
@ -30,6 +30,9 @@ dist_theme_DATA = \
|
|||||||
theme/mosaic-view-active.svg \
|
theme/mosaic-view-active.svg \
|
||||||
theme/mosaic-view.svg \
|
theme/mosaic-view.svg \
|
||||||
theme/move-window-on-new.svg \
|
theme/move-window-on-new.svg \
|
||||||
|
theme/panel-button-border.svg \
|
||||||
|
theme/panel-button-highlight-narrow.svg \
|
||||||
|
theme/panel-button-highlight-wide.svg \
|
||||||
theme/process-working.png \
|
theme/process-working.png \
|
||||||
theme/running-indicator.svg \
|
theme/running-indicator.svg \
|
||||||
theme/scroll-button-down-hover.png \
|
theme/scroll-button-down-hover.png \
|
||||||
|
|||||||
@ -183,6 +183,8 @@ StTooltip StLabel {
|
|||||||
#panel {
|
#panel {
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
background-color: black;
|
background-color: black;
|
||||||
|
border: 0px solid #536272;
|
||||||
|
border-bottom-width: 1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#panelLeft, #panelCenter, #panelRight {
|
#panelLeft, #panelCenter, #panelRight {
|
||||||
@ -209,26 +211,37 @@ StTooltip StLabel {
|
|||||||
|
|
||||||
.panel-button {
|
.panel-button {
|
||||||
padding: 0px 12px;
|
padding: 0px 12px;
|
||||||
border-radius: 5px;
|
|
||||||
border-radius-bottomleft: 0px;
|
|
||||||
border-radius-bottomright: 0px;
|
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
color: #ccc;
|
||||||
transition-duration: 100;
|
transition-duration: 100;
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel-button:active, .panel-button:checked, .panel-button:focus {
|
.panel-button:active,
|
||||||
background-gradient-direction: vertical;
|
.panel-button:checked,
|
||||||
background-gradient-start: #3c3c3c;
|
.panel-button:focus {
|
||||||
background-gradient-end: #131313;
|
border-image: url("panel-button-border.svg") 10 10 0 2;
|
||||||
|
background-image: url("panel-button-highlight-wide.svg");
|
||||||
|
color: white;
|
||||||
|
text-shadow: black 0px 2px 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#statusTray > .panel-button:active,
|
||||||
|
#statusTray > .panel-button:checked,
|
||||||
|
#statusTray > .panel-button:focus {
|
||||||
|
background-image: url("panel-button-highlight-narrow.svg");
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-button:active > .system-status-icon,
|
||||||
|
.panel-button:checked > .system-status-icon,
|
||||||
|
.panel-button:focus > .system-status-icon {
|
||||||
|
icon-shadow: black 0px 2px 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#panelActivities {
|
#panelActivities {
|
||||||
border-radius-topleft: 0px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#panelStatus {
|
#panelStatus {
|
||||||
border-radius-topright: 0px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#panelStatusMenu {
|
#panelStatusMenu {
|
||||||
|
|||||||
74
data/theme/panel-button-border.svg
Normal file
74
data/theme/panel-button-border.svg
Normal file
@ -0,0 +1,74 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||||
|
|
||||||
|
<svg
|
||||||
|
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||||
|
xmlns:cc="http://creativecommons.org/ns#"
|
||||||
|
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
width="21"
|
||||||
|
height="10"
|
||||||
|
id="svg2"
|
||||||
|
version="1.1"
|
||||||
|
inkscape:version="0.48.1 r9760"
|
||||||
|
sodipodi:docname="panel-button-border.svg">
|
||||||
|
<defs
|
||||||
|
id="defs4" />
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="base"
|
||||||
|
pagecolor="#000000"
|
||||||
|
bordercolor="#666666"
|
||||||
|
borderopacity="1.0"
|
||||||
|
inkscape:pageopacity="0"
|
||||||
|
inkscape:pageshadow="2"
|
||||||
|
inkscape:zoom="44.8"
|
||||||
|
inkscape:cx="8.6594891"
|
||||||
|
inkscape:cy="5.7029946"
|
||||||
|
inkscape:document-units="px"
|
||||||
|
inkscape:current-layer="layer1"
|
||||||
|
showgrid="true"
|
||||||
|
showguides="true"
|
||||||
|
inkscape:guide-bbox="true"
|
||||||
|
inkscape:window-width="1440"
|
||||||
|
inkscape:window-height="843"
|
||||||
|
inkscape:window-x="0"
|
||||||
|
inkscape:window-y="26"
|
||||||
|
inkscape:window-maximized="1"
|
||||||
|
guidetolerance="10000"
|
||||||
|
objecttolerance="10000">
|
||||||
|
<inkscape:grid
|
||||||
|
type="xygrid"
|
||||||
|
id="grid3792"
|
||||||
|
empspacing="10"
|
||||||
|
visible="true"
|
||||||
|
enabled="true"
|
||||||
|
snapvisiblegridlinesonly="true" />
|
||||||
|
</sodipodi:namedview>
|
||||||
|
<metadata
|
||||||
|
id="metadata7">
|
||||||
|
<rdf:RDF>
|
||||||
|
<cc:Work
|
||||||
|
rdf:about="">
|
||||||
|
<dc:format>image/svg+xml</dc:format>
|
||||||
|
<dc:type
|
||||||
|
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||||
|
<dc:title />
|
||||||
|
</cc:Work>
|
||||||
|
</rdf:RDF>
|
||||||
|
</metadata>
|
||||||
|
<g
|
||||||
|
inkscape:label="Layer 1"
|
||||||
|
inkscape:groupmode="layer"
|
||||||
|
id="layer1">
|
||||||
|
<rect
|
||||||
|
style="opacity:0.8;fill:#ffffff;fill-opacity:1;stroke-width:0.43599999;stroke-miterlimit:4;stroke-dasharray:none"
|
||||||
|
id="rect3796"
|
||||||
|
width="3"
|
||||||
|
height="2"
|
||||||
|
x="9"
|
||||||
|
y="8" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.0 KiB |
111
data/theme/panel-button-highlight-narrow.svg
Normal file
111
data/theme/panel-button-highlight-narrow.svg
Normal file
@ -0,0 +1,111 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||||
|
|
||||||
|
<svg
|
||||||
|
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||||
|
xmlns:cc="http://creativecommons.org/ns#"
|
||||||
|
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
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="30"
|
||||||
|
height="25"
|
||||||
|
id="svg10621"
|
||||||
|
version="1.1"
|
||||||
|
inkscape:version="0.48.1 r9760"
|
||||||
|
sodipodi:docname="panel-button-highlight-narrow.svg">
|
||||||
|
<defs
|
||||||
|
id="defs10623">
|
||||||
|
<radialGradient
|
||||||
|
inkscape:collect="always"
|
||||||
|
xlink:href="#linearGradient34508-1-3"
|
||||||
|
id="radialGradient99561-1"
|
||||||
|
gradientUnits="userSpaceOnUse"
|
||||||
|
gradientTransform="matrix(0.72146227,0,0,0.27484277,14.205424,21.754717)"
|
||||||
|
cx="51"
|
||||||
|
cy="30"
|
||||||
|
fx="51"
|
||||||
|
fy="30"
|
||||||
|
r="42" />
|
||||||
|
<linearGradient
|
||||||
|
inkscape:collect="always"
|
||||||
|
id="linearGradient34508-1-3">
|
||||||
|
<stop
|
||||||
|
style="stop-color:#ffffff;stop-opacity:1;"
|
||||||
|
offset="0"
|
||||||
|
id="stop34510-1-9" />
|
||||||
|
<stop
|
||||||
|
style="stop-color:#ffffff;stop-opacity:0;"
|
||||||
|
offset="1"
|
||||||
|
id="stop34512-4-5" />
|
||||||
|
</linearGradient>
|
||||||
|
<radialGradient
|
||||||
|
r="42"
|
||||||
|
fy="30"
|
||||||
|
fx="51"
|
||||||
|
cy="30"
|
||||||
|
cx="51"
|
||||||
|
gradientTransform="matrix(0.72146227,0,0,0.27484277,14.205424,21.754717)"
|
||||||
|
gradientUnits="userSpaceOnUse"
|
||||||
|
id="radialGradient10592"
|
||||||
|
xlink:href="#linearGradient34508-1-3"
|
||||||
|
inkscape:collect="always" />
|
||||||
|
</defs>
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="base"
|
||||||
|
pagecolor="#000000"
|
||||||
|
bordercolor="#666666"
|
||||||
|
borderopacity="1.0"
|
||||||
|
inkscape:pageopacity="0"
|
||||||
|
inkscape:pageshadow="2"
|
||||||
|
inkscape:zoom="1.979899"
|
||||||
|
inkscape:cx="-171.36384"
|
||||||
|
inkscape:cy="-53.255157"
|
||||||
|
inkscape:document-units="px"
|
||||||
|
inkscape:current-layer="layer1"
|
||||||
|
showgrid="false"
|
||||||
|
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-x="0"
|
||||||
|
inkscape:window-y="26"
|
||||||
|
inkscape:window-maximized="1" />
|
||||||
|
<metadata
|
||||||
|
id="metadata10626">
|
||||||
|
<rdf:RDF>
|
||||||
|
<cc:Work
|
||||||
|
rdf:about="">
|
||||||
|
<dc:format>image/svg+xml</dc:format>
|
||||||
|
<dc:type
|
||||||
|
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||||
|
<dc:title />
|
||||||
|
</cc:Work>
|
||||||
|
</rdf:RDF>
|
||||||
|
</metadata>
|
||||||
|
<g
|
||||||
|
inkscape:label="Layer 1"
|
||||||
|
inkscape:groupmode="layer"
|
||||||
|
id="layer1"
|
||||||
|
transform="translate(-468.08632,-537.03477)">
|
||||||
|
<path
|
||||||
|
sodipodi:type="arc"
|
||||||
|
style="opacity:0.4625;color:#000000;fill:url(#radialGradient10592);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"
|
||||||
|
sodipodi:cx="51"
|
||||||
|
sodipodi:cy="30"
|
||||||
|
sodipodi:rx="42"
|
||||||
|
sodipodi:ry="16"
|
||||||
|
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:start="3.1415927"
|
||||||
|
sodipodi:end="6.2831853"
|
||||||
|
transform="matrix(0.35714286,0,0,1.5625,464.87203,515.15977)"
|
||||||
|
inkscape:export-filename="/home/jimmac/src/cvs/gnome/gnome-shell-design/mockups/motion/textures/panel.png"
|
||||||
|
inkscape:export-xdpi="90"
|
||||||
|
inkscape:export-ydpi="90" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 3.5 KiB |
111
data/theme/panel-button-highlight-wide.svg
Normal file
111
data/theme/panel-button-highlight-wide.svg
Normal file
@ -0,0 +1,111 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||||
|
|
||||||
|
<svg
|
||||||
|
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||||
|
xmlns:cc="http://creativecommons.org/ns#"
|
||||||
|
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
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="84"
|
||||||
|
height="25"
|
||||||
|
id="svg10621"
|
||||||
|
version="1.1"
|
||||||
|
inkscape:version="0.48.0 r9654"
|
||||||
|
sodipodi:docname="panel-button-highlight-wide.svg">
|
||||||
|
<defs
|
||||||
|
id="defs10623">
|
||||||
|
<radialGradient
|
||||||
|
inkscape:collect="always"
|
||||||
|
xlink:href="#linearGradient34508-1-3"
|
||||||
|
id="radialGradient99561-1"
|
||||||
|
gradientUnits="userSpaceOnUse"
|
||||||
|
gradientTransform="matrix(0.72146227,0,0,0.27484277,14.205424,21.754717)"
|
||||||
|
cx="51"
|
||||||
|
cy="30"
|
||||||
|
fx="51"
|
||||||
|
fy="30"
|
||||||
|
r="42" />
|
||||||
|
<linearGradient
|
||||||
|
inkscape:collect="always"
|
||||||
|
id="linearGradient34508-1-3">
|
||||||
|
<stop
|
||||||
|
style="stop-color:#ffffff;stop-opacity:1;"
|
||||||
|
offset="0"
|
||||||
|
id="stop34510-1-9" />
|
||||||
|
<stop
|
||||||
|
style="stop-color:#ffffff;stop-opacity:0;"
|
||||||
|
offset="1"
|
||||||
|
id="stop34512-4-5" />
|
||||||
|
</linearGradient>
|
||||||
|
<radialGradient
|
||||||
|
r="42"
|
||||||
|
fy="30"
|
||||||
|
fx="51"
|
||||||
|
cy="30"
|
||||||
|
cx="51"
|
||||||
|
gradientTransform="matrix(0.72146227,0,0,0.27484277,14.205424,21.754717)"
|
||||||
|
gradientUnits="userSpaceOnUse"
|
||||||
|
id="radialGradient10592"
|
||||||
|
xlink:href="#linearGradient34508-1-3"
|
||||||
|
inkscape:collect="always" />
|
||||||
|
</defs>
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="base"
|
||||||
|
pagecolor="#000000"
|
||||||
|
bordercolor="#666666"
|
||||||
|
borderopacity="1.0"
|
||||||
|
inkscape:pageopacity="0"
|
||||||
|
inkscape:pageshadow="2"
|
||||||
|
inkscape:zoom="1.979899"
|
||||||
|
inkscape:cx="-118.50071"
|
||||||
|
inkscape:cy="27.304508"
|
||||||
|
inkscape:document-units="px"
|
||||||
|
inkscape:current-layer="layer1"
|
||||||
|
showgrid="false"
|
||||||
|
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-x="0"
|
||||||
|
inkscape:window-y="26"
|
||||||
|
inkscape:window-maximized="1" />
|
||||||
|
<metadata
|
||||||
|
id="metadata10626">
|
||||||
|
<rdf:RDF>
|
||||||
|
<cc:Work
|
||||||
|
rdf:about="">
|
||||||
|
<dc:format>image/svg+xml</dc:format>
|
||||||
|
<dc:type
|
||||||
|
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||||
|
<dc:title />
|
||||||
|
</cc:Work>
|
||||||
|
</rdf:RDF>
|
||||||
|
</metadata>
|
||||||
|
<g
|
||||||
|
inkscape:label="Layer 1"
|
||||||
|
inkscape:groupmode="layer"
|
||||||
|
id="layer1"
|
||||||
|
transform="translate(-441.08632,-537.03477)">
|
||||||
|
<path
|
||||||
|
sodipodi:type="arc"
|
||||||
|
style="opacity:0.4625;color:#000000;fill:url(#radialGradient10592);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"
|
||||||
|
sodipodi:cx="51"
|
||||||
|
sodipodi:cy="30"
|
||||||
|
sodipodi:rx="42"
|
||||||
|
sodipodi:ry="16"
|
||||||
|
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:start="3.1415927"
|
||||||
|
sodipodi:end="6.2831853"
|
||||||
|
transform="matrix(1,0,0,1.5625,432.08632,515.15977)"
|
||||||
|
inkscape:export-filename="/home/jimmac/src/cvs/gnome/gnome-shell-design/mockups/motion/textures/panel.png"
|
||||||
|
inkscape:export-xdpi="90"
|
||||||
|
inkscape:export-ydpi="90" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 3.5 KiB |
Loading…
Reference in New Issue
Block a user