open-dsi
/
nextcloud-server
mirror of https://github.com/nextcloud/server
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

simplify input elements for less cognitive load. No box-shadow, no text-shadow, smaller border-radius

Browse Source
remotes/origin/stable6
Jan-Christoph Borchardt 12 years ago
parent de175a4b0f
commit 308d4383a3
3 changed files with 57 additions and 63 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 4
      apps/files_sharing/css/public.css
  2. 4
      core/css/apps.css
  3. 112
      core/css/styles.css

4
apps/files_sharing/css/public.css
Unescape View File

@ -3,8 +3,7 @@ body {
}
#header {
background:#1d2d44;
box-shadow:0 0 10px rgba(0,0,0,.5), inset 0 -2px 10px #222;
background: #1d2d44 url('../../../core/img/noise.png') repeat;
height:2.5em;
left:0;
line-height:2.5em;
@ -61,7 +60,6 @@ body {
p.info {
color:#777;
text-align:center;
text-shadow:#fff 0 1px 0;
width:22em;
margin:2em auto;
}

4
core/css/apps.css
Unescape View File

@ -27,13 +27,11 @@
position: relative;
width: 100%;
-moz-box-sizing: border-box; box-sizing: border-box;
text-shadow: 0 1px 0 rgba(255,255,255,.9);
}
#app-navigation .active,
#app-navigation .active a,
#app-navigation li:hover > a {
background-color: #ddd;
text-shadow: 0 1px 0 rgba(255,255,255,.7);
}
/* special rules for first-level entries and folders */
@ -119,7 +117,7 @@
}
#app-navigation > ul .open:hover {
-moz-box-shadow: inset 0 0 3px #ccc; -webkit-box-shadow: inset 0 0 3px #ccc; box-shadow: inset 0 0 3px #ccc;
box-shadow: inset 0 0 3px #ccc;
}
#app-navigation > ul .open ul {

112
core/css/styles.css
Unescape View File

@ -38,7 +38,6 @@ body { background:#fefefe; font:normal .8em/1.6em "Helvetica Neue",Helvetica,Ari
.header-right > * { vertical-align:middle; }
#header .avatardiv {
text-shadow: none;
float: left;
display: inline-block;
}
@ -51,8 +50,7 @@ button, .button,
width:10em; margin:.3em; padding:.6em .5em .4em;
font-size:1em;
background:#fff; color:#333; border:1px solid #ddd; outline:none;
-moz-box-shadow:0 1px 1px #fff, 0 2px 0 #bbb inset; -webkit-box-shadow:0 1px 1px #fff, 0 1px 0 #bbb inset; box-shadow:0 1px 1px #fff, 0 1px 0 #bbb inset;
-moz-border-radius:.5em; -webkit-border-radius:.5em; border-radius:.5em;
border-radius: 3px;
}
input[type="hidden"] { height:0; width:0; }
input[type="text"], input[type="password"], input[type="search"], input[type="number"], input[type="email"], input[type="url"], textarea {
@ -88,10 +86,14 @@ input[type="checkbox"]:hover+label, input[type="checkbox"]:focus+label { color:#
input[type="submit"], input[type="button"],
button, .button,
#quota, select, .pager li a {
width:auto; padding:.4em;
background-color:rgba(240,240,240,.9); font-weight:bold; color:#555; text-shadow:rgba(255,255,255,.9) 0 1px 0; border:1px solid rgba(190,190,190,.9); cursor:pointer;
-moz-box-shadow:0 1px 1px rgba(255,255,255,.9), 0 1px 1px rgba(255,255,255,.9) inset; -webkit-box-shadow:0 1px 1px rgba(255,255,255,.9), 0 1px 1px rgba(255,255,255,.9) inset; box-shadow:0 1px 1px rgba(255,255,255,.9), 0 1px 1px rgba(255,255,255,.9) inset;
-moz-border-radius:.5em; -webkit-border-radius:.5em; border-radius:.5em;
width: auto;
padding: .4em;
background-color: rgba(240,240,240,.9);
font-weight: bold;
color: #555;
border: 1px solid rgba(190,190,190,.9);
cursor: pointer;
border-radius: 3px;
}
input[type="submit"]:hover, input[type="submit"]:focus,
input[type="button"]:hover, input[type="button"]:focus,
@ -102,7 +104,10 @@ select:hover, select:focus, select:active {
color:#333;
}
input[type="submit"] img, input[type="button"] img, button img, .button img { cursor:pointer; }
#header .button { border:none; -moz-box-shadow:none; -webkit-box-shadow:none; box-shadow:none; }
#header .button {
border: none;
box-shadow: none;
}
/* disabled input fields and buttons */
input:disabled, input:disabled:hover, input:disabled:focus,
@ -117,36 +122,37 @@ a.disabled, a.disabled:hover, a.disabled:focus {
/* Primary action button, use sparingly */
.primary, input[type="submit"].primary, input[type="button"].primary, button.primary, .button.primary {
border: 1px solid #1d2d44;
border-radius: 5px;
background: #35537a;
color: #ddd;
text-shadow: #000 0 -1px 0;
-moz-box-shadow: 0 0 1px #000, 0 1px 0 #6d7d94 inset;
-webkit-box-shadow: 0 0 1px #000, 0 1px 0 #6d7d94 inset;
box-shadow: 0 0 1px #000, 0 1px 0 #6d7d94 inset;
}
.primary:hover, input[type="submit"].primary:hover, input[type="button"].primary:hover, button.primary:hover, .button.primary:hover,
.primary:focus, input[type="submit"].primary:focus, input[type="button"].primary:focus, button.primary:focus, .button.primary:focus {
border: 1px solid #1d2d44;
background: #304d76;
color: #fff;
text-shadow: #000 0 -1px 0;
-moz-box-shadow: 0 0 1px #000, 0 1px 0 #4d5d74 inset;
-webkit-box-shadow: 0 0 1px #000, 0 1px 0 #4d5d74 inset;
box-shadow: 0 0 1px #000, 0 1px 0 #4d5d74 inset;
}
.primary:active, input[type="submit"].primary:active, input[type="button"].primary:active, button.primary:active, .button.primary:active {
border: 1px solid #1d2d44;
background: #1d2d44;
color: #bbb;
text-shadow: #000 0 -1px 0;
-moz-box-shadow: 0 1px 1px #3d4d64, 0 1px 1px 0 rgba(0,0,0,.2) inset;
-webkit-box-shadow: 0 1px 1px #3d4d64, 0 1px 1px 0 rgba(0,0,0,.2) inset;
box-shadow: 0 1px 1px #3d4d64, 0 1px 1px 0 rgba(0,0,0,.2) inset;
}
.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; }
.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;
border-radius: 1em;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; filter:alpha(opacity=70); opacity: .7;
margin-top: 10px;
float: right;
}
input[type="submit"].enabled {
background: #66f866;
border: 1px solid #5e5;
}
@ -185,8 +191,9 @@ input[type="submit"].enabled { background:#66f866; border:1px solid #5e5; -moz-b
#rightcontent, .rightcontent { position:fixed; top:6.4em; left:24.5em; overflow:auto }
#emptycontent {
font-size:1.5em; font-weight:bold;
color:#888; text-shadow:#fff 0 1px 0;
font-size: 1.5em;
font-weight: bold;
color: #888;
position: absolute;
text-align: center;
top: 50%;
@ -212,11 +219,9 @@ input[type="submit"].enabled { background:#66f866; border:1px solid #5e5; -moz-b
#body-login form input[type="checkbox"]+label {
text-align: center;
color: #ccc;
text-shadow: 0 1px 0 rgba(255,255,255,.1);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
filter: alpha(opacity=60);
opacity: .6;
text-shadow: 0 -1px 0 rgba(0,0,0,.5);
}
#body-login div.buttons { text-align:center; }
@ -270,9 +275,7 @@ input[name="adminpass-clone"] { padding-left:1.8em; width:11.7em !important; }
#body-login input[type="password"],
#body-login input[type="email"] {
border: 1px solid #323233;
-moz-box-shadow: 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.25) inset;
-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.25) inset;
box-shadow: 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.25) inset;
border-radius: 5px;
}
/* Nicely grouping input field sets */
@ -288,18 +291,14 @@ input[name="adminpass-clone"] { padding-left:1.8em; width:11.7em !important; }
border-top: 0;
border-bottom: 0;
border-radius: 0;
-moz-box-shadow: 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(0,0,0,.1) inset !important;
-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(0,0,0,.1) inset !important;
box-shadow: 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(0,0,0,.1) inset !important;
box-shadow: 0 1px 0 rgba(0,0,0,.1) inset !important;
}
#body-login .groupbottom input {
margin-top: 0;
border-top: 0;
border-top-right-radius: 0;
border-top-left-radius: 0;
-moz-box-shadow: 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(0,0,0,.1) inset !important;
-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(0,0,0,.1) inset !important;
box-shadow: 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(0,0,0,.1) inset !important;
box-shadow: 0 1px 0 rgba(0,0,0,.1) inset !important;
}
/* In field labels. No, HTML placeholder does not work as well. */
@ -397,8 +396,7 @@ label.infield { cursor:text !important; top:1.05em; left:.85em; }
#body-login form #selectDbType label {
position:static; margin:0 -3px 5px; padding:.4em;
font-size:12px; font-weight:bold; background:#f8f8f8; color:#888; cursor:pointer;
border:1px solid #ddd; text-shadow:#eee 0 1px 0;
-moz-box-shadow:0 1px 1px #fff, 0 1px 1px #fff inset; -webkit-box-shadow:0 1px 1px #fff, 0 1px 1px #fff inset;
border: 1px solid #ddd;
}
#body-login form #selectDbType label.ui-state-hover, #body-login form #selectDbType label.ui-state-active { color:#000; background-color:#e8e8e8; }
@ -408,22 +406,17 @@ label.infield { cursor:text !important; top:1.05em; left:.85em; }
display: block;
padding: 10px;
color: #dd3b3b;
text-shadow: 0 -1px 0 rgba(0,0,0,.3);
background-color: rgba(0,0,0,.3);
text-align: center;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
border-radius: 3px;
cursor: default;
}
#body-user .warning, #body-settings .warning {
margin-top: 8px;
padding: 5px;
background: #fdd;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
margin-top: 8px;
padding: 5px;
background: #fdd;
border-radius: 3px;
}
.warning legend,
@ -452,7 +445,6 @@ label.infield { cursor:text !important; top:1.05em; left:.85em; }
font-weight: bold;
}
#body-login .warning legend {
text-shadow: none;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
@ -524,7 +516,6 @@ label.infield { cursor:text !important; top:1.05em; left:.85em; }
font-size: 11px;
text-align: center;
color: #fff;
text-shadow: #000 0 -1px 0;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; /* ellipsize long app names */
padding-bottom: 10px;
}
@ -588,7 +579,6 @@ label.infield { cursor:text !important; top:1.05em; left:.85em; }
margin-top: 7px;
margin-left: 10px;
color: #bbb;
text-shadow: 0 -1px 0 #000;
}
#expand {
padding: 15px 15px 15px 5px;
@ -602,7 +592,7 @@ label.infield { cursor:text !important; top:1.05em; left:.85em; }
position:absolute; right:0; top:45px; z-index:76; display:none;
background:#383c43 url('../img/noise.png') repeat;
border-bottom-left-radius:7px; border-bottom:1px #333 solid; border-left:1px #333 solid;
-moz-box-shadow:0 0 7px rgb(29,45,68); -webkit-box-shadow:0 0 7px rgb(29,45,68); box-shadow:0 0 7px rgb(29,45,68);
box-shadow:0 0 7px rgb(29,45,68);
-moz-box-sizing: border-box; box-sizing: border-box;
/* prevent ugly selection effect on accidental selection */
-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
@ -611,7 +601,6 @@ label.infield { cursor:text !important; top:1.05em; left:.85em; }
display: block;
height: 40px;
color: #fff;
text-shadow: 0 -1px 0 #000;
padding: 4px 12px 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=70);
@ -637,7 +626,17 @@ label.infield { cursor:text !important; top:1.05em; left:.85em; }
.inlineblock { display: inline-block; }
#notification-container { position: fixed; top: 0px; width: 100%; text-align: center; z-index: 101; line-height: 1.2;}
#notification, #update-notification { z-index:101; background-color:#fc4; border:0; padding:0 .7em .3em; display:none; position: relative; top:0; -moz-border-radius-bottomleft:1em; -webkit-border-bottom-left-radius:1em; border-bottom-left-radius:1em; -moz-border-radius-bottomright:1em; -webkit-border-bottom-right-radius:1em; border-bottom-right-radius:1em; }
#notification, #update-notification {
z-index: 101;
background-color: #fc4;
border: 0;
padding: 0 .7em .3em;
display: none;
position: relative;
top: 0;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
#notification span, #update-notification span { cursor:pointer; font-weight:bold; margin-left:1em; }
tr .action:not(.permanent), .selectedActions a { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter:alpha(opacity=0); opacity:0; }
@ -652,8 +651,7 @@ tbody tr:hover, tr:active { background-color:#f8f8f8; }
margin: 1em;
background-color: rgb(240,240,240);
color: #555;
text-shadow: #fff 0 1px 0;
-moz-border-radius: .5em; -webkit-border-radius: .5em; border-radius: .5em;
border-radius: 3px;
}
#body-settings .personalblock#quota { position:relative; padding:0; }
#body-settings #controls+.helpblock { position:relative; margin-top:3em; }
@ -666,8 +664,8 @@ code { font-family:"Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono
background-color: rgb(220,220,220);
font-weight: normal;
white-space: nowrap;
-moz-border-radius-bottomleft: .4em; -webkit-border-bottom-left-radius: .4em; border-bottom-left-radius:.4em;
-moz-border-radius-topleft: .4em; -webkit-border-top-left-radius: .4em; border-top-left-radius: .4em; }
border-bottom-left-radius: 3px;
border-top-left-radius: 3px; }
#quotatext {padding:.6em 1em;}
.pager { list-style:none; float:right; display:inline; margin:.7em 13em 0 0; }

Write Preview
Loading…
Cancel
Save