first icon update. Next step: make sprited hover state (like for home already)

This commit is contained in:
Jan-Christoph Borchardt 2012-10-27 17:44:24 +02:00
parent 3eea7aac13
commit b595ea6efc
9 changed files with 143 additions and 5024 deletions

View File

@ -82,7 +82,7 @@ a.action>img { max-height:16px; max-width:16px; vertical-align:text-bottom; }
.selectedActions a img { position:relative; top:.3em; } .selectedActions a img { position:relative; top:.3em; }
/* add breadcrumb divider to the File item in navigation panel */ /* add breadcrumb divider to the File item in navigation panel */
#navigation>ul>li:first-child { background:url('%webroot%/core/img/breadcrumb-start.svg') no-repeat 65px 0; width:65px; padding-right:1em; position:fixed; } #navigation>ul>li:first-child { background:url('%webroot%/core/img/breadcrumb-start.svg') no-repeat 64px 0; width:64px; padding-right:1em; position:fixed; }
#navigation>ul>li:first-child+li { padding-top:68px; } #navigation>ul>li:first-child+li { padding-top:68px; }
#scanning-message{ top:40%; left:40%; position:absolute; display:none; } #scanning-message{ top:40%; left:40%; position:absolute; display:none; }

View File

@ -58,7 +58,7 @@ input[type="submit"].highlight{ background:#ffc100; border:1px solid #db0; text-
/* CONTENT ------------------------------------------------------------------ */ /* CONTENT ------------------------------------------------------------------ */
#controls { padding: 0 0.5em; width:100%; top:3.5em; height:2.8em; margin:0; background:#f7f7f7; border-bottom:1px solid #eee; position:fixed; z-index:50; -moz-box-shadow:0 -3px 7px #000; -webkit-box-shadow:0 -3px 7px #000; box-shadow:0 -3px 7px #000; } #controls { padding: 0 0.5em; width:100%; top:3.5em; height:2.8em; margin:0; background:#f7f7f7; border-bottom:1px solid #eee; position:fixed; z-index:50; -moz-box-shadow:0 -3px 7px #000; -webkit-box-shadow:0 -3px 7px #000; box-shadow:0 -3px 7px #000; }
#controls .button { display:inline-block; } #controls .button { display:inline-block; }
#content { top: 3.5em; left: 65px; position: absolute; } #content { top:3.5em; left:64px; position: absolute; }
#leftcontent, .leftcontent { position:fixed; overflow: auto; top:6.4em; width:20em; background:#f8f8f8; border-right:1px solid #ddd; } #leftcontent, .leftcontent { position:fixed; overflow: auto; top:6.4em; width:20em; background:#f8f8f8; border-right:1px solid #ddd; }
#leftcontent li, .leftcontent li { background:#f8f8f8; padding:.5em .8em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; -webkit-transition:background-color 200ms; -moz-transition:background-color 200ms; -o-transition:background-color 200ms; transition:background-color 200ms; } #leftcontent li, .leftcontent li { background:#f8f8f8; padding:.5em .8em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; -webkit-transition:background-color 200ms; -moz-transition:background-color 200ms; -o-transition:background-color 200ms; transition:background-color 200ms; }
#leftcontent li:hover, #leftcontent li:active, #leftcontent li.active, .leftcontent li:hover, .leftcontent li:active, .leftcontent li.active { background:#eee; } #leftcontent li:hover, #leftcontent li:active, #leftcontent li.active, .leftcontent li:hover, .leftcontent li:active, .leftcontent li.active { background:#eee; }
@ -95,8 +95,10 @@ label.infield { cursor: text !important; }
/* NAVIGATION ------------------------------------------------------------- */ /* NAVIGATION ------------------------------------------------------------- */
#navigation { position:fixed; top:3.5em; float:left; width:65px; padding:0; z-index:75; height:100%; background:#30343a url('../img/noise.png') repeat; border-right: 1px #ccc solid; -moz-box-shadow: -3px 0 7px #000; -webkit-box-shadow: -3px 0 7px #000; box-shadow: -3px 0 7px #000; overflow:hidden;} #navigation { position:fixed; top:3.5em; float:left; width:64px; padding:0; z-index:75; height:100%; background:#30343a url('../img/noise.png') repeat; border-right:1px #333 solid; -moz-box-shadow:0 0 7px #000; -webkit-box-shadow:0 0 7px #000; box-shadow:0 0 7px #000; overflow:hidden;}
#navigation a { display:block; padding:4px; background:transparent; text-decoration:none; font-size:10px; text-align:center; color:#000; text-shadow:#444 0 1px 0; } #navigation a { display:block; padding:8px 0 4px; text-decoration:none; font-size:10px; text-align:center; color:#000; text-shadow:#444 0 1px 0; }
#navigation .icon { width:32px; height:32px; background-position:0 0; background-repeat:no-repeat; margin:0 16px 0; }
/*#navigation li:hover div { background-position:-32px 0; } hover & active effect, activate when icons are sprited*/
#navigation li:first-child { padding-top:8px; } #navigation li:first-child { padding-top:8px; }
#navigation a img { display:block; width:32px; height:32px; margin:0 auto; } #navigation a img { display:block; width:32px; height:32px; margin:0 auto; }
#navigation a.active, #navigation a:hover, #navigation a:focus { color:#888; text-shadow:#000 0 -1px 0; } #navigation a.active, #navigation a:hover, #navigation a:focus { color:#888; text-shadow:#000 0 -1px 0; }

Binary file not shown.

Before

Width:  |  Height:  |  Size: 372 B

After

Width:  |  Height:  |  Size: 884 B

File diff suppressed because it is too large Load Diff

Before

Width:  |  Height:  |  Size: 53 KiB

After

Width:  |  Height:  |  Size: 3.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 532 B

After

Width:  |  Height:  |  Size: 802 B

File diff suppressed because it is too large Load Diff

Before

Width:  |  Height:  |  Size: 51 KiB

After

Width:  |  Height:  |  Size: 3.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 300 B

After

Width:  |  Height:  |  Size: 323 B

File diff suppressed because it is too large Load Diff

Before

Width:  |  Height:  |  Size: 52 KiB

After

Width:  |  Height:  |  Size: 3.9 KiB

View File

@ -46,7 +46,7 @@
<?php foreach($_['navigation'] as $entry): ?> <?php foreach($_['navigation'] as $entry): ?>
<li data-id="<?php echo $entry['id']; ?>"> <li data-id="<?php echo $entry['id']; ?>">
<a href="<?php echo $entry['href']; ?>" title="" <?php if( $entry['active'] ): ?> class="active"<?php endif; ?>> <a href="<?php echo $entry['href']; ?>" title="" <?php if( $entry['active'] ): ?> class="active"<?php endif; ?>>
<img src="<?php echo $entry['icon']; ?>"> <div class="icon" style="background-image:url(<?php echo $entry['icon']; ?>)"></div>
<?php echo $entry['name']; ?> <?php echo $entry['name']; ?>
</a> </a>
</li> </li>