From 309214e0220c67dd321a3a2e14cc936ed9bc1975 Mon Sep 17 00:00:00 2001 From: "Rob G. Healey" Date: Wed, 8 Feb 2012 05:04:53 +0000 Subject: [PATCH] Replaced Drop Down Citations with Drop Down Animated Citations. svn: r18837 --- .../webstuff/css/Web_DropDown-Citations.css | 330 +++++++++--------- 1 file changed, 162 insertions(+), 168 deletions(-) diff --git a/src/plugins/webstuff/css/Web_DropDown-Citations.css b/src/plugins/webstuff/css/Web_DropDown-Citations.css index 8be014a0f..034c8bc50 100644 --- a/src/plugins/webstuff/css/Web_DropDown-Citations.css +++ b/src/plugins/webstuff/css/Web_DropDown-Citations.css @@ -1,203 +1,197 @@ -/* Main menu */ +/* +# encoding: utf-8 +# +# Gramps - a GTK+/GNOME based genealogy program +# +# Copyright 2012 Rob G. Healey +# +# This program is free software; you can redistribute it and/or modify +# it under the terms of the GNU General Public License as published by +# the Free Software Foundation; either version 2 of the License, or +# (at your option) any later version. +# +# This program is distributed in the hope that it will be useful, +# but WITHOUT ANY WARRANTY; without even the implied warranty of +# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +# GNU General Public License for more details. +# +# You should have received a copy of the GNU General Public License +# along with this program; if not, write to the Free Software +# Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA +# -#menu -{ - width: 100%; - margin: 0; - padding: 10px 0 0 0; - list-style: none; - background: #111; - background: -moz-linear-gradient(#444, #111); - background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444)); - background: -webkit-linear-gradient(#444, #111); - background: -o-linear-gradient(#444, #111); - background: -ms-linear-gradient(#444, #111); - background: linear-gradient(#444, #111); - -moz-border-radius: 50px; - border-radius: 50px; - -moz-box-shadow: 0 2px 1px #9c9c9c; - -webkit-box-shadow: 0 2px 1px #9c9c9c; - box-shadow: 0 2px 1px #9c9c9c; -} +****************************************************** +GRAMPS Cascading Style Sheet +Originally Created by: Red Team Design +Style Name: Web_DropDown-Citations.css +****************************************************** -#menu li -{ - float: left; - padding: 0 0 10px 0; - position: relative; - line-height: 0; -} +# $Id$ +*/ -#menu a -{ - float: left; - height: 25px; - padding: 0 25px; - color: #999; - text-transform: uppercase; - font: bold 12px/25px Arial, Helvetica; - text-decoration: none; - text-shadow: 0 1px 0 #000; -} - -#menu li:hover > a -{ - color: #fafafa; -} - -*html #menu li a:hover /* IE6 */ -{ - color: #fafafa; -} - -#menu li:hover > ul -{ - display: block; -} - -/* Sub-menu */ - -#menu ul -{ - list-style: none; +#menu, #menu ul { margin: 0; - padding: 0; - display: none; + padding: 0; + list-style: none; +} +#menu { + width: 95%; + margin: 6px auto; + border: 1px solid #222; + background-color: #111; + background-image: -moz-linear-gradient(#444, #111); + background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111)); + background-image: -webkit-linear-gradient(#444, #111); + background-image: -o-linear-gradient(#444, #111); + background-image: -ms-linear-gradient(#444, #111); + background-image: linear-gradient(#444, #111); + -moz-border-radius: 6px; + -webkit-border-radius: 6px; + border-radius: 6px; + -moz-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset; + -webkit-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset; + box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset; +} +#menu:before, +#menu:after { + content: ""; + display: table; +} +#menu:after { + clear: both +} +#menu { + zoom:1 +} +#menu li { + float: left; + border-right: 1px solid #222; + -moz-box-shadow: 1px 0 0 #444; + -webkit-box-shadow: 1px 0 0 #444; + box-shadow: 1px 0 0 #444; + position: relative; +} +#menu a { + float: left; + padding: 12px 30px; + color: #999; + text-transform: uppercase; + font: bold 12px Arial, Helvetica; + text-decoration: none; + text-shadow: 0 1px 0 #000; +} +#menu li:hover > a { + color: #fafafa +} +*html #menu li a:hover { /* IE6 only */ + color: #fafafa +} +#menu ul { + margin: 20px 0 0 0; + _margin: 0; /*IE6 only*/ + opacity: 0; + visibility: hidden; position: absolute; - top: 35px; + top: 38px; left: 0; - z-index: 99999; + z-index: 9999; background: #444; background: -moz-linear-gradient(#444, #111); - background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444)); + background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111)); background: -webkit-linear-gradient(#444, #111); background: -o-linear-gradient(#444, #111); background: -ms-linear-gradient(#444, #111); background: linear-gradient(#444, #111); - -moz-box-shadow: 0 0 2px rgba(255,255,255,.5); - -webkit-box-shadow: 0 0 2px rgba(255,255,255,.5); - box-shadow: 0 0 2px rgba(255,255,255,.5); - -moz-border-radius: 5px; - border-radius: 5px; + -moz-box-shadow: 0 -1px rgba(255,255,255,.3); + -webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3); + box-shadow: 0 -1px 0 rgba(255,255,255,.3); + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + border-radius: 3px; + -webkit-transition: all .2s ease-in-out; + -moz-transition: all .2s ease-in-out; + -ms-transition: all .2s ease-in-out; + -o-transition: all .2s ease-in-out; + transition: all .2s ease-in-out; } - -#menu ul ul -{ - top: 0; - left: 150px; -} - -#menu ul li -{ - float: none; +#menu li:hover > ul { + opacity: 1; + visibility: visible; margin: 0; - padding: 0; - display: block; - -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777; - -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777; - box-shadow: 0 1px 0 #111111, 0 2px 0 #777777; } - -#menu ul li:last-child -{ +#menu ul ul { + top: 0; + left: 150px; + margin: 0 0 0 20px; + _margin: 0; /*IE6 only*/ + -moz-box-shadow: -1px 0 0 rgba(255,255,255,.3); + -webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3); + box-shadow: -1px 0 0 rgba(255,255,255,.3); +} +#menu ul li { + float: none; + display: block; + border: 0; + _line-height: 0; /*IE6 only*/ + -moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666; + -webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666; + box-shadow: 0 1px 0 #111, 0 2px 0 #666; +} +#menu ul li:last-child { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } - -#menu ul a -{ +#menu ul a { padding: 10px; - height: 10px; - width: 130px; - height: auto; - line-height: 1; + width: 130px; + _height: 10px; /*IE6 only*/ display: block; white-space: nowrap; float: none; - text-transform: none; + text-transform: none; } - -*html #menu ul a /* IE6 */ -{ - height: 10px; +#menu ul a:hover { + background-color: #0186ba; + background-image: -moz-linear-gradient(#04acec, #0186ba); + background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba)); + background-image: -webkit-linear-gradient(#04acec, #0186ba); + background-image: -o-linear-gradient(#04acec, #0186ba); + background-image: -ms-linear-gradient(#04acec, #0186ba); + background-image: linear-gradient(#04acec, #0186ba); } - -*:first-child+html #menu ul a /* IE7 */ -{ - height: 10px; +#menu ul li:first-child > a { + -moz-border-radius: 3px 3px 0 0; + -webkit-border-radius: 3px 3px 0 0; + border-radius: 3px 3px 0 0; } - -#menu ul a:hover -{ - background: #0186ba; - background: -moz-linear-gradient(#04acec, #0186ba); - background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba)); - background: -webkit-linear-gradient(#04acec, #0186ba); - background: -o-linear-gradient(#04acec, #0186ba); - background: -ms-linear-gradient(#04acec, #0186ba); - background: linear-gradient(#04acec, #0186ba); -} - -#menu ul li:first-child > a -{ - -moz-border-radius: 5px 5px 0 0; - border-radius: 5px 5px 0 0; -} - -#menu ul li:first-child > a:after -{ +#menu ul li:first-child > a:after { content: ''; position: absolute; - left: 30px; - top: -8px; - width: 0; - height: 0; - border-left: 5px solid transparent; - border-right: 5px solid transparent; - border-bottom: 8px solid #444; + left: 40px; + top: -6px; + border-left: 6px solid transparent; + border-right: 6px solid transparent; + border-bottom: 6px solid #444; } - -#menu ul ul li:first-child a:after -{ - left: -8px; - top: 12px; - width: 0; - height: 0; +#menu ul ul li:first-child a:after { + left: -6px; + top: 50%; + margin-top: -6px; border-left: 0; - border-bottom: 5px solid transparent; - border-top: 5px solid transparent; - border-right: 8px solid #444; + border-bottom: 6px solid transparent; + border-top: 6px solid transparent; + border-right: 6px solid #3b3b3b; } - -#menu ul li:first-child a:hover:after -{ - border-bottom-color: #04acec; +#menu ul li:first-child a:hover:after { + border-bottom-color: #04acec } - -#menu ul ul li:first-child a:hover:after -{ - border-right-color: #04acec; +#menu ul ul li:first-child a:hover:after { + border-right-color: #0299d3; border-bottom-color: transparent; } - - -#menu ul li:last-child > a -{ - -moz-border-radius: 0 0 5px 5px; - border-radius: 0 0 5px 5px; +#menu ul li:last-child > a { + -moz-border-radius: 0 0 3px 3px; + -webkit-border-radius: 0 0 3px 3px; + border-radius: 0 0 3px 3px; } - -/* Clear floated elements */ -#menu:after -{ - visibility: hidden; - display: block; - font-size: 0; - content: " "; - clear: both; - height: 0; -} - -* html #menu { zoom: 1; } /* IE6 */ -*:first-child+html #menu { zoom: 1; } /* IE7 */