first move of settings to top right
This commit is contained in:
Jan-Christoph Borchardt
parent
b595ea6efc
commit
fc280b2887
|
|
@ -16,7 +16,7 @@ body { background:#fefefe; font:normal .8em/1.6em "Lucida Grande", Arial, Verdan
|
|||
|
||||
|
||||
/* HEADERS */
|
||||
#body-user #header, #body-settings #header { position:fixed; top:0; left:0; right:0; z-index:100; height:2.5em; line-height:2.5em; padding:.5em; background:#1d2d44; -moz-box-shadow:0 0 10px rgba(0, 0, 0, .5), inset 0 -2px 10px #222; -webkit-box-shadow:0 0 10px rgba(0, 0, 0, .5), inset 0 -2px 10px #222; box-shadow:0 0 10px rgba(0, 0, 0, .5), inset 0 -2px 10px #222; }
|
||||
#body-user #header, #body-settings #header { position:fixed; top:0; left:0; right:0; z-index:100; height:45px; line-height:2.5em; background:#1d2d44; -moz-box-shadow:0 0 10px rgba(0, 0, 0, .5), inset 0 -2px 10px #222; -webkit-box-shadow:0 0 10px rgba(0, 0, 0, .5), inset 0 -2px 10px #222; box-shadow:0 0 10px rgba(0, 0, 0, .5), inset 0 -2px 10px #222; }
|
||||
#body-login #header { margin: -2em auto 0; text-align:center; height:10em; padding:1em 0 .5em;
|
||||
-moz-box-shadow:0 0 1em rgba(0, 0, 0, .5); -webkit-box-shadow:0 0 1em rgba(0, 0, 0, .5); box-shadow:0 0 1em rgba(0, 0, 0, .5);
|
||||
background: #1d2d44; /* Old browsers */
|
||||
|
|
@ -28,9 +28,7 @@ background: -ms-linear-gradient(top, #35537a 0%,#1d2d42 100%); /* IE10+ */
|
|||
background: linear-gradient(top, #35537a 0%,#1d2d42 100%); /* W3C */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#35537a', endColorstr='#1d2d42',GradientType=0 ); /* IE6-9 */ }
|
||||
|
||||
#owncloud { float:left; vertical-align:middle; }
|
||||
.header-right { float:right; vertical-align:middle; padding:0 0.5em; }
|
||||
.header-right > * { vertical-align:middle; }
|
||||
#owncloud { position:absolute; padding:6px; padding-bottom:0; }
|
||||
|
||||
/* INPUTS */
|
||||
input[type="text"], input[type="password"] { cursor:text; }
|
||||
|
|
@ -51,7 +49,7 @@ input[type="checkbox"] { width:auto; }
|
|||
#body-login input[type="text"], #body-login input[type="password"] { width: 13em; }
|
||||
#body-login input.login { width: auto; float: right; }
|
||||
#remember_login { margin:.8em .2em 0 1em; }
|
||||
.searchbox input[type="search"] { font-size:1.2em; padding:.2em .5em .2em 1.5em; background:#fff url('../img/actions/search.svg') no-repeat .5em center; border:0; -moz-border-radius:1em; -webkit-border-radius:1em; border-radius:1em; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; filter:alpha(opacity=70);opacity:.7; -webkit-transition:opacity 300ms; -moz-transition:opacity 300ms; -o-transition:opacity 300ms; transition:opacity 300ms; }
|
||||
.searchbox input[type="search"] { font-size:1.2em; padding:.2em .5em .2em 1.5em; background:#fff url('../img/actions/search.svg') no-repeat .5em center; border:0; -moz-border-radius:1em; -webkit-border-radius:1em; border-radius:1em; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; filter:alpha(opacity=70);opacity:.7; -webkit-transition:opacity 300ms; -moz-transition:opacity 300ms; -o-transition:opacity 300ms; transition:opacity 300ms; margin-top:10px; float:right; }
|
||||
input[type="submit"].enabled { background:#66f866; border:1px solid #5e5; -moz-box-shadow:0 1px 1px #f8f8f8, 0 1px 1px #cfc inset; -webkit-box-shadow:0 1px 1px #f8f8f8, 0 1px 1px #cfc inset; box-shadow:0 1px 1px #f8f8f8, 0 1px 1px #cfc inset; }
|
||||
input[type="submit"].highlight{ background:#ffc100; border:1px solid #db0; text-shadow:#ffeedd 0 1px 0; -moz-box-shadow:0 1px 1px #f8f8f8, 0 1px 1px #ffeedd inset; -webkit-box-shadow:0 1px 1px #f8f8f8, 0 1px 1px #ffeedd inset; box-shadow:0 1px 1px #f8f8f8, 0 1px 1px #ffeedd inset; }
|
||||
#select_all{ margin-top: .4em !important;}
|
||||
|
|
@ -103,9 +101,14 @@ label.infield { cursor: text !important; }
|
|||
#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 #settings { position:absolute; bottom:3.5em; width:100%; }
|
||||
#navigation #settings img { width:32px; height:32px; }
|
||||
#expand { position:relative; z-index:100; margin-bottom:-.5em; padding:.5em 10.1em .7em 1.2em; cursor:pointer; }
|
||||
#settings { float:right; margin-top:7px; color:#bbb; text-shadow:0 -1px 0 #000; }
|
||||
#expand { padding:15px; cursor:pointer; font-weight:bold; }
|
||||
#expand:hover, #expand:focus, #expand:active { color:#fff; }
|
||||
#expand img { opacity:.5; margin-bottom:-2px; }
|
||||
#expand:hover img, #expand:focus img, #expand:active img { opacity:1; }
|
||||
#expanddiv { position:absolute; right:0; background-color:rgb(29, 45, 68); }
|
||||
#expanddiv a { color:#ccc; padding:5px 8px; }
|
||||
#expanddiv a:hover, #expanddiv a:focus, #expanddiv a:active { color:#fff; }
|
||||
|
||||
/* VARIOUS REUSABLE SELECTORS */
|
||||
.hidden { display:none; }
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 283 B |
|
|
@ -0,0 +1,112 @@
|
|||
<?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"
|
||||
version="1.0"
|
||||
width="10"
|
||||
height="10"
|
||||
id="svg2403"
|
||||
inkscape:version="0.48.3.1 r9886"
|
||||
sodipodi:docname="logout.svg"
|
||||
inkscape:export-filename="caret.png"
|
||||
inkscape:export-xdpi="90"
|
||||
inkscape:export-ydpi="90">
|
||||
<sodipodi:namedview
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1"
|
||||
objecttolerance="10"
|
||||
gridtolerance="10"
|
||||
guidetolerance="10"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:window-width="1280"
|
||||
inkscape:window-height="800"
|
||||
id="namedview3047"
|
||||
showgrid="false"
|
||||
inkscape:zoom="25.279067"
|
||||
inkscape:cx="3.6223673"
|
||||
inkscape:cy="6.0978375"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="-31"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="svg2403"
|
||||
fit-margin-top="0"
|
||||
fit-margin-left="0"
|
||||
fit-margin-right="0"
|
||||
fit-margin-bottom="0" />
|
||||
<metadata
|
||||
id="metadata15">
|
||||
<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></dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<defs
|
||||
id="defs2405">
|
||||
<linearGradient
|
||||
x1="11.644068"
|
||||
y1="2.4988678"
|
||||
x2="11.644068"
|
||||
y2="15.00281"
|
||||
id="linearGradient2392"
|
||||
xlink:href="#linearGradient3678"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
gradientTransform="translate(1.0000001,1.1920928e-8)" />
|
||||
<linearGradient
|
||||
x1="8.4964771"
|
||||
y1="-0.061573759"
|
||||
x2="8.4964771"
|
||||
y2="8.083209"
|
||||
id="linearGradient2395"
|
||||
xlink:href="#linearGradient3678"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
gradientTransform="matrix(1.0526316,0,0,0.9843625,0.5789474,0.06024281)" />
|
||||
<linearGradient
|
||||
id="linearGradient3678">
|
||||
<stop
|
||||
id="stop3680"
|
||||
style="stop-color:#ffffff;stop-opacity:1"
|
||||
offset="0" />
|
||||
<stop
|
||||
id="stop3682"
|
||||
style="stop-color:#e6e6e6;stop-opacity:1"
|
||||
offset="1" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
inkscape:collect="always"
|
||||
xlink:href="#linearGradient3678"
|
||||
id="linearGradient2993"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
gradientTransform="matrix(1.0526316,0,0,0.9843625,-3.4210526,1.060243)"
|
||||
x1="8.4964771"
|
||||
y1="-0.061573759"
|
||||
x2="8.4964771"
|
||||
y2="8.083209" />
|
||||
</defs>
|
||||
<path
|
||||
sodipodi:nodetypes="cccc"
|
||||
inkscape:connector-curvature="0"
|
||||
id="path3023"
|
||||
d="M 1,2 5,10 9,2.011 z"
|
||||
style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;opacity:0.5;color:#000000;fill:#000000;fill-opacity:1;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans" />
|
||||
<path
|
||||
style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:url(#linearGradient2993);fill-opacity:1;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans"
|
||||
d="M 1,1 5,9 9,1.011 z"
|
||||
id="path3716"
|
||||
inkscape:connector-curvature="0"
|
||||
sodipodi:nodetypes="cccc" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.3 KiB |
|
|
@ -35,8 +35,30 @@
|
|||
<body id="<?php echo $_['bodyid'];?>">
|
||||
<header><div id="header">
|
||||
<a href="<?php echo link_to('', 'index.php'); ?>" title="" id="owncloud"><img class="svg" src="<?php echo image_path('', 'logo-wide.svg'); ?>" alt="ownCloud" /></a>
|
||||
<a class="header-right header-action" id="logout" href="<?php echo link_to('', 'index.php'); ?>?logout=true"><img class="svg" alt="<?php echo $l->t('Log out');?>" title="<?php echo $l->t('Log out'); echo OC_User::getUser()?' ('.OC_User::getUser().') ':'' ?>" src="<?php echo image_path('', 'actions/logout.svg'); ?>" /></a>
|
||||
<form class="searchbox header-right" action="#" method="post">
|
||||
|
||||
<ul id="settings" class="svg">
|
||||
<span id="expand">
|
||||
<?php echo OC_User::getUser()?OC_User::getUser():'' ?>
|
||||
<img class="svg" src="<?php echo image_path('', 'actions/caret.svg'); ?>" />
|
||||
</span>
|
||||
<div id="expanddiv" <?php if($_['bodyid'] == 'body-user') echo 'style="display:none;"'; ?>>
|
||||
<?php foreach($_['settingsnavigation'] as $entry):?>
|
||||
<li>
|
||||
<a href="<?php echo $entry['href']; ?>" title="" <?php if( $entry["active"] ): ?> class="active"<?php endif; ?>>
|
||||
<img src="<?php echo $entry['icon']; ?>">
|
||||
<?php echo $entry['name'] ?>
|
||||
</a>
|
||||
</li>
|
||||
<?php endforeach; ?>
|
||||
<li>
|
||||
<a id="logout" href="<?php echo link_to('', 'index.php'); ?>?logout=true">
|
||||
<img class="svg" alt="<?php echo $l->t('Log out');?>" title="<?php echo $l->t('Log out'); echo OC_User::getUser()?' ('.OC_User::getUser().') ':'' ?>" src="<?php echo image_path('', 'actions/logout.svg'); ?>" /> Log out
|
||||
</a>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
|
||||
<form class="searchbox" action="#" method="post">
|
||||
<input id="searchbox" class="svg" type="search" name="query" value="<?php if(isset($_POST['query'])) {echo OC_Util::sanitizeHTML($_POST['query']);};?>" autocomplete="off" x-webkit-speech />
|
||||
</form>
|
||||
</div></header>
|
||||
|
|
@ -52,20 +74,6 @@
|
|||
</li>
|
||||
<?php endforeach; ?>
|
||||
</ul>
|
||||
|
||||
<ul id="settings" class="svg">
|
||||
<img role=button tabindex=0 id="expand" class="svg" alt="<?php echo $l->t('Settings');?>" src="<?php echo image_path('', 'actions/settings.svg'); ?>" />
|
||||
<div id="expanddiv" <?php if($_['bodyid'] == 'body-user') echo 'style="display:none;"'; ?>>
|
||||
<?php foreach($_['settingsnavigation'] as $entry):?>
|
||||
<li>
|
||||
<a href="<?php echo $entry['href']; ?>" title="" <?php if( $entry["active"] ): ?> class="active"<?php endif; ?>>
|
||||
<img src="<?php echo $entry['icon']; ?>">
|
||||
<?php echo $entry['name'] ?>
|
||||
</a>
|
||||
</li>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
</ul>
|
||||
</div></nav>
|
||||
|
||||
<div id="content">
|
||||
|
|
|
|||
Loading…
Reference in New Issue