Cyclone-Team/gramps
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Re-placed alphabet navigation as horizontal. Fixed several problems in NarrativeWeb, and some changes to WebCal.

Browse Source 
svn: r13231
This commit is contained in:
Rob G. Healey
2009-09-21 22:22:45 +00:00
parent 2e3ba0d954
commit 52d573eba8
3 changed files with 359 additions and 350 deletions
Download Patch File Download Diff File Expand all files Collapse all files

331
src/data/Web_Visually.css
View File

@@ -32,7 +32,6 @@ see <http://www.gnu.org/licenses/>.
--------------------------------------------------------------------------------------------------
Color Palette
--------------------------------------------------------------------------------------------------
brown darkest #453619
brown dark #542
brown light #C1B398
gray #696969
@@ -50,18 +49,10 @@ Females Web_Gender_Female.png
# $Id$
NarrativeWeb Styles
--------------------------------------------------------------------------------------------
General Elements
----------------------------------------------------- */
body {
color: #000;
margin: 0;
padding: 130px 0px 0px 0px;
background-color: #FFF;
font-family: Arial, sans, sans-serif, Helvetica;
}
div {
margin:0;
@@ -136,7 +127,7 @@ h4 {
color: #FFF;
margin-top: .3cm;
padding:.2em 0 .2em 20px;
background-color: #453619;
background-color: #000;
border-bottom:solid 4px #5D835F;
}
h5, h6 {
@@ -144,6 +135,17 @@ h5, h6 {
font-style:italic;
margin:1.3em 0 .5em 1em;
}
a {
color: #542;
}
a:visited {
color: #542;
}
a:hover {
color: #000;
background-color: #C1B398;
text-decoration:underline;
}
p#description {
max-width:800px;
margin:0;
@@ -153,10 +155,6 @@ p#description:first-letter {
color: #228A22;
font-size:xx-large;
}
p a {
color: #FFF;
text-decoration:underline;
}
sup {
line-height:0;
}
@@ -173,17 +171,6 @@ ol li a {
ol li a:hover {
text-decoration:underline;
}
a {
color: #542;
}
a:visited {
color: #542;
}
a:hover {
color: #000;
background-color: #C1B398;
text-decoration:underline;
}
span.preposition {
padding-left:1em;
padding-right:1em;
@@ -197,7 +184,8 @@ span.preposition {
----------------------------------------------------- */
#header {
position: fixed;
top: 0;
top: 0px;
left: 0px;
overflow: auto;
width: 100%;
height: 90px;
@@ -205,16 +193,13 @@ span.preposition {
background-color: #542;
border-bottom: solid 8px #5D835F;
}
body#WebCal #header, body#fullyearlinked #header {
width: 100%;
height; 90px;
}
#SiteTitle {
margin:0;
padding:.5em 0 0.5em 10px;
font-size: 40px;
font-size: 36px;
font-weight: bold;
color: #FFF;
font-style:italic;
font-style: italic;
}
p#user_header {
font-size:1.3em;
@@ -278,60 +263,38 @@ p#user_header {
padding:0;
}
/* Alphabet Navigation
----------------------------------------------------- */
div#alphabet {
padding:0;
margin:0;
}
div#alphabet ul {
list-style:none;
min-width:770px;
height:24px;
margin:0;
padding:0 0 0 9px;
border-top:solid 2px #000;
border-bottom:solid 4px #000;
background-color: #6AF364;
}
div#alphabet ul li:after {
content:" |";
}
div#alphabet ul li:first-child {
content: " |";
}
div#alphabet ul li.letters {
margin:0;
float:left;
}
div#alphabet ul li.letters a {
display:block;
float:left;
font:bold 16px/100% sans;
color: #000;
margin:0;
padding:5px 5px;
text-decoration:none;
}
div#alphabet ul li.letters a:hover {
background-color: #000;
color: #FFF;
}
/* Navigation
----------------------------------------------------- */
#navigation {
div#nnavigation, div#subnavigation {
width: 100%;
height: 32px;
}
body#NarrativeWeb #navigation {
position: fixed;
top: 104px;
width: 100%;
height: 52px;
left: 0px;
}
body#WebCal #navigation, body#fullyearlinked #navigation {
width: 100%;
height: 52px;
body#WebCal #navigation {
position: fixed;
top: 140px;
left: 24px;
right: 20px;
}
#subnavigation {
width: 100%;
body#fullyearlinked #navigation, body#OneDay #navigation {
position: fixed;
top: 140px;
left: 0px;
}
body#WebCal #subnavigation {
position: fixed;
top: 98px;
left: 24px;
right: 20px;
}
body#fullyearlinked #subnavigation, body#OneDay #subnavigation {
position: fixed;
top: 98px;
left: 0px;
}
#navigation ul, #subnavigation ul {
list-style:none;
@@ -339,45 +302,49 @@ body#WebCal #navigation, body#fullyearlinked #navigation {
height:32px;
margin:0;
padding:0 0 0 20px;
background-color: #FFF;
border-bottom:solid 2px #000;
border-bottom:solid 2px #5D835F;
}
#navigation ul li, #subnavigation ul li {
margin:0;
float:left;
}
#navigation ul li a, #subnavigation ul li a {
padding: 6px 10px 8px 1px;
display:block;
float:left;
font:normal 16px/100% serif;
color: #000;
text-decoration:none;
margin:0;
padding:5px 5px;
}
body#WebCal #navigation ul li a, body#fullyearlinked #navigation ul li a,
body#WebCal #subnavigation ul li a {
color: #FFF;
}
body#fullyearlinked #subnavigation ul li a {
color: #000;
}
#navigation ul li a:hover, #subnavigation ul li a:hover {
margin-top: -6px;
padding: 11px 10px 12px 1px;
background-color: #C1B398;
color: #000;
border-top:solid 3px #C1B398;
border-bottom:solid 8px #C1B398;
}
#navigation ul li.CurrentSection a, #subnavigation ul li.CurrentSection a {
font-weight:bold;
font-size:16px;
font-style: italic;
margin-top:-6px;
padding-top:11px;
padding-bottom:8px;
padding: 11px 10px 12px 1px;
background-color: #CCC;
color: #000;
border-bottom:solid 4px #CCC;
}
#navigation ul li.CurrentSection a:hover {
background-color: #000;
color: #FFF;
}
#subnavigation ul li.CurrentSection a {
border-width:0 0 1px 0;
border-width: 0px 0px 2px 0px;
border-color: #FFF;
}
/* Main Table
@@ -389,12 +356,13 @@ table.infolist {
font-size: 12px;
}
table.infolist thead tr th {
font:normal 1.1em/1.2em serif;
font:bold 1.1em/1.2em serif;
text-transform: uppercase;
color: #000;
margin:0;
padding:.2em 10px;
background-color: #6AF364;
border: solid 1px #5D835F;
border: solid 1px #000;
}
table.infolist thead tr th a {
background-color: #6AF364;
@@ -414,7 +382,7 @@ table.infolist tr td a {
color: #000;
}
table.infolist tr.BeginLetter td, table.infolist tr.BeginSurname td {
border-top:solid 1px #453619;
border-top:solid 1px #000;
}
table.infolist tr td.ColumnLetter {
width:3%;
@@ -458,6 +426,55 @@ table.infolist tbody tr td.ColumnParents span.mother:before {
content:"+ ";
}
/*
NarrativeWeb
----------------------------------------------------- */
body#NarrativeWeb {
color: #000;
margin: 0;
padding: 160px 0px 0px 4px;
background-color: #FFF;
font-family: Arial, sans, sans-serif, Helvetica;
}
/* Alphabet Navigation
----------------------------------------------------- */
div#alphabet {
position: fixed;
top: 136px;
left: 4px;
width: 100%;
height: 32px;
overflow: auto;
border-width: 2px 4px 2px 4px;
border-style: solid;
border-color: #5D835F;
background-color: #6AF364;
}
div#alphabet ul {
display: block;
list-style: none;
margin: 0;
padding: 0px 0px 0px 20px;
}
div#alphabet ul li {
display: block;
padding: 6px 0px 6px 16px;
font: bold 16px/100% sans;
margin:0;
float: left;
}
div#alphabet ul li:before {
content: "| ";
}
div#alphabet ul li a {
text-decoration: none;
}
div#alphabet ul li a:hover {
padding: 20px 8px 10px 4px;
background-color: #C1B398;
}
/* Surnames
----------------------------------------------------- */
#Surnames { }
@@ -487,6 +504,9 @@ table.surnamelist thead tr th.ColumnLetter {
table.surnamelist tbody tr td {
background-color: #D8F3D6;
}
table.surnamelist tbody tr td.ColumnLetter a {
background: none;
}
table.surnamelist tbody tr td.ColumnSurname {
background-color: #FFF;
}
@@ -514,30 +534,30 @@ table.surnamelist tbody tr td.ColumnSurname:hover,
table.surname {
border-bottom:solid 1px #000;
}
table.surname tbody tr td {
border-bottom:dashed 1px #000;
}
table.surname thead tr th.ColumnName {
width:20%;
padding-left:20px;
}
table.surname tbody tr td.ColumnName {
background-color: #FFF;
width:20%;
padding:0;
table.surname tbody tr td {
border-bottom: dashed 1px #000;
background-color: #D8F3D6;
}
table.surname tbody tr td.ColumnName a {
display:block;
padding:.6em 10px .6em 20px;
table.surname tbody tr td a {
display: block;
padding: .6em 10px .6em 20px;
background-color: #FFF;
}
table.surname tbody tr td a:hover {
background-color: #C1B398;
}
table.surname tbody tr td.ColumnName {
width:20%;
}
table.surname tbody tr td.ColumnName a span.grampsid { }
table.surname tbody tr td.ColumnName:hover {
background-color: #C1B398;
}
table.surname tbody tr td.ColumnPartner {
background-color: #FFF;
}
table.surname thead tr th.ColumnParents,
table.surname tbody tr td.ColumnParents {
width:25%;
@@ -548,12 +568,19 @@ table.surname tbody tr td.ColumnParents {
#Individuals { }
#Individuals table.individuallist {
border-bottom:solid 1px #453619;
border-bottom:solid 1px #5D835F;
}
#Individuals table.individuallist tbody tr td {
border-bottom:dashed 1px #453619;
border-bottom: dashed 1px #000;
background-color: #D8F3D6;
}
#Individuals table.individuallist tbody tr td a {
background-color: #FFF;
display: block;
padding: .6em 10px;
}
#Individuals table.individuallist tbody tr td a:hover {
background-color: #C1B398;
text-decoration:none;
}
table.individuallist tbody tr td.ColumnSurname a:hover,
@@ -564,25 +591,9 @@ table.individuallist tbody tr td.ColumnSurname a:active {
}
table.individuallist tbody tr td.ColumnName {
padding:0;
background-color: #FFF;
}
table.individuallist tbody tr td.ColumnName a {
display:block;
padding:.6em 10px;
vertical-align:middle;
}
table.individuallist tbody tr td.ColumnName a:hover { }
table.individuallist tbody tr td.ColumnPartner {
padding:0;
background-color: #FFF;
}
table.individuallist tbody tr td.ColumnPartner a {
display:block;
padding:.6em 10px;
vertical-align:middle;
}
table.individuallist tbody tr td.ColumnPartner a:hover {
}
#Individuals div table.infolist tr td p {
font:normal .9em/1.2em sans-serif;
@@ -592,8 +603,6 @@ table.individuallist tbody tr td.ColumnPartner a:hover {
display:inline;
}
/* IndividualDetail
------------------------------------------------------ */
#IndividualDetail { }
#IndividualDetail div table.infolist tr td {
@@ -640,31 +649,39 @@ table.eventlist tbody tr td {
background-color: #D8F3D6;
padding: 4px 0px 4px 0px;
}
table.eventlist tbody tr td a {
display: block;
padding: .3em 30px .4em 0px;
}
table.eventlist tbody tr td a:hover {
background-color: #C1B398;
}
table.eventlist tbody tr td.ColumnType {
background-color: #FFF;
border-top: solid 1px #5D835F;
width: 20%;
}
table.eventlist tbody tr td.ColumnType a {
background-color: #FFF;
}
table.eventlist tbody tr td.ColumnDate {
width: 16%;
}
table.eventlist tbody tr td.ColumnPlace {
background-color: #FFF;
width: 35%;
}
table.eventlist tbody tr td.ColumnSources {
background-color: #FFF;
width: 12%;
}
table.eventlist tbody tr td.ColumnSources sup {
margin-top: 1em;
}
table.eventlist tbody tr td.ColumnNotes {
width: 25%;
}
table.eventlist tbody tr td.ColumnPerson {
background-color: #FFF;
width: 35%;
}
table.eventlist tbody tr td.ColumnPartner {
background-color: #FFF;
width: 35%;
}
div#EventDetail h3 {
@@ -713,7 +730,7 @@ div#EventDetail table.eventlist tbody tr td.ColumnType {
#GalleryNav a {
font-weight:bold;
text-decoration:none;
border:solid 1px #453619;
border:solid 1px #5D835F;
}
#GalleryNav a:hover { }
@@ -738,7 +755,7 @@ div#EventDetail table.eventlist tbody tr td.ColumnType {
position:relative;
overflow:hidden;
text-align:center;
border:solid 1px #453619;
border:solid 1px #5D835F;
}
#GalleryDisplay img {
margin:0 auto;
@@ -777,7 +794,7 @@ table.exiflist tr td.ColumnValue {
width:500px;
margin:0 auto;
padding:3em;
border:double 4px #453619;
border:double 4px #5D835F;
}
#Contact #summaryarea img {
float:right;
@@ -970,17 +987,16 @@ div#events h4 {
padding-left:20px;
}
#IndividualDetail div#events table.infolist tbody tr td {
padding-top:.4em;
padding-bottom:.8em;
padding: .4em 0 .8em 0;
}
#IndividualDetail div#events table.infolist tbody tr td.ColumnAttribute {
border-bottom:solid 1px #453619;
border-bottom:solid 1px #5D835F;
}
#IndividualDetail div#events table.infolist tbody tr td.ColumnValue {
border-bottom:solid 1px #000;
border-bottom:solid 1px #5D835F;
}
table.infolist tbody tr td.ColumnValue p {
font-family:sans-serif;
font-family: sans-serif;
color: #696969;
margin:.2em 0 0 2em;
}
@@ -1297,7 +1313,7 @@ div#pedigree {
margin-top:-25px;
margin-left:16px;
background-color: #FFF;
border:solid 1px #453619;
border:solid 1px #5D835F;
}
#treeContainer div.boxbg a:hover {
position:relative;
@@ -1308,7 +1324,7 @@ div#pedigree {
width:190px;
margin-left:-20px;
padding:10px 25px 12px 25px;
border:solid 2px #453619;
border:solid 2px #5D835F;
}
#treeContainer div.boxbg a:hover,
#treeContainer div.AncCol3 a:hover,
@@ -1372,7 +1388,7 @@ div#pedigree {
height:1px;
margin:0 0 0 16px;
padding:0;
background-color: #453619;
background-color: #000;
}
#tree div div.bhline {
position:absolute;
@@ -1380,7 +1396,7 @@ div#pedigree {
width:1px;
margin:0 0 0 16px;
padding:0;
background-color: #453619;
background-color: #000;
}
.ghline, .gvline {
display:none;
@@ -1390,7 +1406,7 @@ div#pedigree {
-------------------------------------------------------------------------------------------- */
/* Calendar : General */
body#WebCal {
padding: 98px 14px 0px 14px;
padding: 170px 14px 0px 14px;
background-color: #542;
}
.calendar {
@@ -1437,13 +1453,13 @@ body#WebCal {
font-style:italic;
color: #000;
background-color: #6AF364;
border:solid 2px #453619;
border:solid 2px #5D835F;
}
.calendar tfoot tr td {
padding:.7em 5% 1em 5%;
border-top:solid 2px #000;
vertical-align:middle;
color: #453619;
color: #000;
background-color: #D8F3D6;
}
@@ -1468,7 +1484,7 @@ body#WebCal {
padding:0;
border-width:1px 0 0 1px;
border-style:solid;
border-color: #453619;
border-color: #5D835F;
}
.calendar tbody tr td.weekday {
background-color: #FFF;
@@ -1477,13 +1493,13 @@ body#WebCal {
background-color: #D8F3D6;
}
.calendar tbody tr td.saturday {
border-right:solid 1px #453619;
border-right:solid 1px #5D835F;
}
.calendar tbody tr td.sunday {
border-left:solid 1px #453619;
border-left:solid 1px #5D835F;
}
.calendar tbody tr td:first-child {
border-left:solid 1px #453619;
border-left:solid 1px #5D835F;
}
.calendar tbody tr:first-child td {
border-top:none;
@@ -1502,7 +1518,7 @@ body#WebCal {
width:92%;
margin:0 4%;
padding:.2em 0 .3em 0;
border-top:dashed 1px #453619;
border-top:dashed 1px #000;
}
.calendar tbody tr td ul li:first-child {
border:none;
@@ -1514,7 +1530,7 @@ body#WebCal {
color: #0A65B5;
}
.calendar tbody tr td ul li span.yearsmarried em {
color: #453619;
color: #000;
}
.calendar tbody tr td.highlight { }
@@ -1534,7 +1550,7 @@ body#WebCal {
/* Calendar : Full Year */
body#fullyearlinked {
padding: 98px 14px 0px 14px;
padding: 170px 0px 0px 0px;
}
body#fullyearlinked div.content {
width:963px;
@@ -1545,7 +1561,7 @@ body#fullyearlinked table.calendar {
float:left;
width:320px;
height:18em;
border:solid 1px #453619;
border:solid 1px #5D835F;
}
body#fullyearlinked table.calendar thead tr th {
height:2em;
@@ -1563,3 +1579,8 @@ body#fullyearlinked table.calendar tbody tr td.saturday {
body#fullyearlinked able.calendar tbody tr td.sunday {
border:solid 2px #000;
}
/* Calendar : One Day */
body#OneDay {
padding: 170px 0px 0px 0px;
}