diff -r eb97351d5e9b -r f978d70a9e63 client/css/renkan.css --- a/client/css/renkan.css Tue Apr 23 22:14:59 2013 +0200 +++ b/client/css/renkan.css Tue Apr 23 22:15:10 2013 +0200 @@ -42,7 +42,7 @@ } html { - overflow: hidden; + overflow: hidden; } body { @@ -109,7 +109,7 @@ .Rk-UserList { box-shadow: 0 2px 2px #999999; - position: relative; z-index: 3; display: none; padding-top: 8px; + position: relative; z-index: 4; display: none; padding-top: 8px; } .Rk-User { @@ -131,7 +131,7 @@ } .Rk-TopBar-Tooltip { - position: absolute; top: 31px; left: 50%; margin-left: -60px; width: 120px; z-index: 3; display: none; + position: absolute; top: 31px; left: 50%; margin-left: -60px; width: 120px; z-index: 4; display: none; } .Rk-TopBar-Tooltip-Contents { @@ -185,11 +185,11 @@ } .Rk-Save-Button.Rk-Save-ReadOnly, .Rk-Save-Button.Rk-Save-ReadOnly:hover { - background-position: -172px -35px; + background-position: -172px -35px; } .Rk-Save-Button.Rk-Save-Online, .Rk-Save-Button.Rk-Save-Online:hover { - background-position: -172px 0; + background-position: -172px 0; } .Rk-Bookmarklet-Button { @@ -210,25 +210,41 @@ /* Canvas */ +.Rk-Editing-Space { + position: absolute; left: 0; top: 35px; right: 0; bottom: 0; overflow: hidden; + background: -moz-radial-gradient( center, circle, #ffffff 40%, #e0e0e0 90%); + background: -webkit-radial-gradient( center, circle, #ffffff 40%, #e0e0e0 90%); + background: -ms-radial-gradient( center, circle, #ffffff 40%, #e0e0e0 90%); +} + +.Rk-Editing-Space-Full { + top: 0; +} + .Rk-Canvas { - background: -moz-radial-gradient( center, circle, #ffffff 40%, #e0e0e0 90%); - background: -webkit-radial-gradient( center, circle, #ffffff 40%, #e0e0e0 90%); - background: -ms-radial-gradient( center, circle, #ffffff 40%, #e0e0e0 90%); - position: absolute; left: 0; top: 35px; right: 0; bottom: 0; z-index: 1; + position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 2; } -.Rk-Editing-Space-Full .Rk-Canvas { - top: 0; +/* Node Labels */ + +.Rk-Labels { + position: absolute; left: 0; top: 0; z-index: 1; + font-family: "Segoe UI", "Helvetica Neue", Arial, Helvetica, sans-serif; +} + +.Rk-Label { + position: absolute; width: 160px; margin-left: -80px; text-align: center; font-size: 13px; line-height: 13px; +} + +.Rk-Edge-Label { + font-size: 11px; transform-origin: 50% 0; -moz-transform-origin: 50% 0; + -webkit-transform-origin: 50% 0; -ms-transform-origin: 50% 0; } /* Editors */ .Rk-Editor { - position: absolute; left: 0; top: 35px; right: 0; z-index: 2; -} - -.Rk-Editing-Space-Full .Rk-Editor { - top: 0; + position: absolute; left: 0; top: 0; z-index: 3; } .Rk-Notifications { @@ -272,7 +288,7 @@ .Rk-Edit-ImgPreview { border: 1px solid #666; margin: 5px auto; display: block; - max-width: 253px !important; max-height: 100px !important; + max-width: 253px !important; max-height: 200px !important; } .Rk-Editor textarea { @@ -309,57 +325,61 @@ } .Rk-Edit-Size-Up, .Rk-Edit-Size-Down { - font-size: 13px; font-weight: bold; padding: 0 4px; background: #ffffff; color: #000000; border: 1px solid #cccccc; - text-decoration: none; + font-size: 13px; font-weight: bold; padding: 0 4px; background: #ffffff; color: #000000; border: 1px solid #cccccc; + text-decoration: none; } .Rk-Edit-Size-Up:hover, .Rk-Edit-Size-Down:hover { - background: #666666; + background: #666666; } .Rk-Edit-Size-Value { - display: inline-block; + display: inline-block; padding: 0 5px; text-align: center; width: 20px; } .Rk-Edit-Vocabulary-Class { - color: #999999; font-style: italic; font-weight: bold; + color: #999999; font-style: italic; font-weight: bold; } .Rk-Edit-Vocabulary-Property { - padding-left: 20px; + padding-left: 20px; } .Rk-Edit-Direction { - border: 1px solid #666; padding: 3px 5px; line-height: 20px; border-radius: 3px; background: #f0f0f0; cursor: pointer; + border: 1px solid #666; padding: 3px 5px; line-height: 20px; border-radius: 3px; background: #f0f0f0; cursor: pointer; } .Rk-Edit-Direction:hover { - background: #c0c0c0; + background: #c0c0c0; } .Rk-Display-Title a { - text-decoration: none; color: #000000; + text-decoration: none; color: #000000; } .Rk-Display-Title a:hover { - text-decoration: underline; + text-decoration: underline; } .Rk-Display-URI { - font-style: italic; + font-style: italic; +} + +.Rk-Display-ImgPreview { + margin: 5px auto; display: block; max-width: 255px !important; max-height: 260px !important; } .Rk-Fold-Bins { - position: absolute; top: 5px; width: 12px; text-align: center; font-size: 16px; cursor: pointer; - line-height: 16px; padding: 4px; color: #ffffff; background: #666666; border-radius: 0 6px 6px 0; - font-weight: bold; + position: absolute; top: 5px; width: 12px; text-align: center; font-size: 16px; cursor: pointer; + line-height: 16px; padding: 4px; color: #ffffff; background: #666666; border-radius: 0 6px 6px 0; + font-weight: bold; } .Rk-Fold-Bins:hover { - background: #333333; + background: #333333; } .Rk-ZoomButtons { @@ -522,7 +542,7 @@ cursor: move; } -.Rk-Bin-Item:hover { +.Rk-Bin-Item:hover, .Rk-Bin-Item.hover { background: -moz-linear-gradient(top, rgba(0,0,0,.1) 20%, rgba(128,128,128,.1) 80%); background: -webkit-linear-gradient(top, rgba(0,0,0,.1) 20%, rgba(128,128,128,.1) 80%); background: -ms-linear-gradient(top, rgba(0,0,0,.1) 20%, rgba(128,128,128,.1) 80%); @@ -551,7 +571,7 @@ } .Rk-Bin-Main h4 a { - color: #303080; + color: #303080; } .Rk-Twitter-Icon { @@ -615,7 +635,7 @@ } .Rk-ResourceList-Image { - float: left; max-width: 100px; max-height: 75px; margin-right: 2px; + float: left; max-width: 100px; max-height: 75px; margin-right: 2px; } .Rk-Ldt-Icon, .Rk-Ldt-Title-Icon {