finally fix the ui in the settings. it was fugly.... other bug fixes too

Signed-off-by: Simon L'nu <simon.lnu@gmail.com>
This commit is contained in:
Simon L'nu 2012-04-17 00:26:37 -04:00
parent 4e967fc79f
commit 68e1523496
3 changed files with 1571 additions and 1462 deletions

View file

@ -53,16 +53,19 @@ body, button, input, select, textarea {
select {
border: 1px #555 dotted;
padding: 3px;
margin: 2px;
margin: 3px;
color: #eec;
background: #2e2f2e;
}
option {
padding: 3px;
vertical-align: middle;
color: #eec;
background: #2e2f2e;
}
option[selected="selected"] {
color: #2e2f2e;
background: #eec;
}
ul, ol {
padding: 0;
}
@ -158,17 +161,6 @@ a:hover {
.fakelink:hover {
color: #729fcf;
}
input[type=submit] {
background-color: #eee;
color: #2e302e;
font-weight: bold;
margin-top: 10px;
height: 22px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 0;
}
.smalltext {
font-size: 0.7em;
}
@ -477,7 +469,8 @@ div.jGrowl div.info {
color: black;
text-decoration: underline;
}
nav #nav-notifications-linkmenu.on .icon.s22.notify, nav #nav-notifications-linkmenu.selected .icon.s22.notify {
nav #nav-notifications-linkmenu.on .icon.s22.notify,
nav #nav-notifications-linkmenu.selected .icon.s22.notify {
background-image: url("../../../images/icons/22/notify_on.png");
}
.show {
@ -542,6 +535,7 @@ nav #nav-notifications-linkmenu.on .icon.s22.notify, nav #nav-notifications-link
.search-box #search-text {
margin: 8px;
width: 10em;
height: 14px;
color: #eec;
}
#scrollup {
@ -683,7 +677,9 @@ nav #nav-notifications-linkmenu.on .icon.s22.notify, nav #nav-notifications-link
}
/** sysmsg **/
/**
* sysmsg
*/
#sysmsg_info {
position: fixed;
bottom: 0;
@ -719,8 +715,8 @@ nav #nav-notifications-linkmenu.on .icon.s22.notify, nav #nav-notifications-link
/**
* aside
**/
* aside
*/
#asidemain {
float: left;
font-size: smaller;
@ -742,21 +738,21 @@ nav #nav-notifications-linkmenu.on .icon.s22.notify, nav #nav-notifications-link
margin: 20px;
}
/* http://css-tricks.com/snippets/css/css-box-shadow/
* box-shadow:
* 1. The horizontal offset of the shadow, positive means
* the shadow will be on the right of the box, a negative
* offset will put the shadow on the left of the box.
* 2. The vertical offset of the shadow, a negative one
* means the box-shadow will be above the box, a
* positive one means the shadow will be below the box.
* 3. The blur radius (optional), if set to 0 the shadow
* will be sharp, the higher the number, the more blurred
* it will be.
* 4. The spread radius (optional), positive values increase
* the size of the shadow, negative values decrease the size.
* Default is 0 (the shadow is same size as blur).
* 5. Colo[u]r
*/
* box-shadow:
* 1. The horizontal offset of the shadow, positive means
* the shadow will be on the right of the box, a negative
* offset will put the shadow on the left of the box.
* 2. The vertical offset of the shadow, a negative one
* means the box-shadow will be above the box, a
* positive one means the shadow will be below the box.
* 3. The blur radius (optional), if set to 0 the shadow
* will be sharp, the higher the number, the more blurred
* it will be.
* 4. The spread radius (optional), positive values increase
* the size of the shadow, negative values decrease the size.
* Default is 0 (the shadow is same size as blur).
* 5. Colo[u]r
*/
.vcard #profile-photo-wrapper img {
box-shadow: 3px 3px 10px 0 #000;
}
@ -808,8 +804,8 @@ nav #nav-notifications-linkmenu.on .icon.s22.notify, nav #nav-notifications-link
/**
* contacts block
*/
* contacts block
*/
.contact-block-div {
width: 50px;
height: 50px;
@ -827,20 +823,20 @@ nav #nav-notifications-linkmenu.on .icon.s22.notify, nav #nav-notifications-link
/**
* jot
**/
*/
#jot {
/*width: 785px;*/
margin: 10px 0 20px 0px;
width: 100%;
/*width: 785px;*/
margin: 10px 0 20px 0px;
width: 100%;
}
#jot #jot-tools {
margin: 0px;
padding: 0px;
height: 35px;
overflow: none;
width: 100%;
/*background-color: #0e232e;*/
/*border-bottom: 2px solid #9eabb0;*/
margin: 0px;
padding: 0px;
height: 35px;
overflow: none;
width: 100%;
/*background-color: #0e232e;*/
/*border-bottom: 2px solid #9eabb0;*/
}
#jot #jot-tools span {
float: left;
@ -1012,15 +1008,20 @@ nav #nav-notifications-linkmenu.on .icon.s22.notify, nav #nav-notifications-link
padding: 0;
}
#profile-jot-submit {
height: 22px;
height: auto;
background-color: #555753;
color: #eeeeec;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 0;
border: 2px outset #222420;
margin: 0;
float: right;
text-shadow: 1px 1px #111;
width: auto;
}
#profile-jot-submit:active {
box-shadow: 0 0 0 0;
}
#jot-perms-icon {
height: 22px;
@ -1112,7 +1113,9 @@ nav #nav-notifications-linkmenu.on .icon.s22.notify, nav #nav-notifications-link
display: inline;
}
/** tabs **/
/**
* tabs
*/
.tabs {
list-style: none;
margin: 10px 0;
@ -1185,7 +1188,7 @@ nav #nav-notifications-linkmenu.on .icon.s22.notify, nav #nav-notifications-link
margin: 0px 15px 0px 5px;
}
/* removing it from here, vs. putting it in .wall-item-content
* might break things for people. we shall see ;) */
* might break things for people. we shall see ;) */
[id^="tread-wrapper"], [class^="tread-wrapper"] {
margin: 15px 0 0 0;
padding: 0px;
@ -1496,7 +1499,7 @@ nav #nav-notifications-linkmenu.on .icon.s22.notify, nav #nav-notifications-link
/**
* item text style
**/
*/
.wall-item-body code {
display: block;
padding: 0 0 10px 5px;
@ -1511,7 +1514,7 @@ nav #nav-notifications-linkmenu.on .icon.s22.notify, nav #nav-notifications-link
/**
* profile
**/
*/
div[id$="text"] {
font-weight: bold;
border-bottom: 1px solid #ccc;
@ -1530,7 +1533,7 @@ div[id$="wrapper"] br {
/**
* photos
**/
*/
.photos {
height: auto;
overflow: auto;
@ -1932,7 +1935,15 @@ div[id$="wrapper"] br {
#profile-edit-form div {
clear: both;
}
.settings-block {
}
.settings-block label {
clear: left;
}
.settings-block input {
margin: 10px 5px;
}
/*#register-form label, */
/*#profile-edit-form label {*/
/* width: 300px; */
@ -2001,6 +2012,12 @@ div[id$="wrapper"] br {
#id_ssl_policy {
width: 374px;
}
#theme-preview {
}
#theme-preview img {
margin: 10px 10px 10px 288px;
}
/**
@ -2130,7 +2147,7 @@ div[id$="wrapper"] br {
/**
* events
**/
*/
.clear { clear: both; }
.eventcal {
float:left;
@ -2251,7 +2268,7 @@ div[id$="wrapper"] br {
margin-top: 30px;
}
/* was tired of having no way of moving it around, so
* here's a little 'hook' to do so */
* here's a little 'hook' to do so */
.delete-checked {
position: absolute;
left: 35px;
@ -2379,7 +2396,7 @@ div[id$="wrapper"] br {
/**
* ADMIN
* admin
*/
#pending-update {
float:right;
@ -2468,7 +2485,7 @@ div[id$="wrapper"] br {
/**
* Form fields
* form fields
*/
.field {
/*margin-bottom: 10px;*/
@ -2477,22 +2494,43 @@ div[id$="wrapper"] br {
width: 100%;
}
.field label, label {
float: left;
width: 275px;
display: block;
width: 38%;
display: inline-block;
font-size: 1.077em;
margin: 0 10px 0.5em 0;
margin: 0 10px 1em 0;
border: 1px #2e2f2e solid;
padding: 5px;
background: #eec;
vertical-align: middle;
color: #111;
}
.field input, input[type="text"] {
input,
input[type="text"],
input[type="password"],
input[type="search"] {
width: 250px;
height: 25px;
border: 1px #999 solid;
}
input[type="checkbox"], input[type="radio"] {
border: 1px #999 solid;
margin: 0 0 0 0;
}
input[type="submit"], input[type="button"] {
background-color: #eee;
border: 2px outset #aaa;
border-radius: 5px;
box-shadow: 1px 3px 4px 0 #111;
color: #2e302e;
cursor: pointer;
font-weight: bold;
width: auto;
text-shadow: 1px 1px #000;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
input[type="submit"]:active, input[type="button"]:active {
box-shadow: 0 0 0 0;
}
.field textarea {
width: 80%;
height: 100px;
@ -2532,7 +2570,7 @@ div[id$="wrapper"] br {
/*
* UPDATE
* update
*/
.popup {
width: 100%;
@ -2630,7 +2668,7 @@ div[id$="wrapper"] br {
/**
* ICONS
* icons
*/
.iconspacer {
display: block;
@ -2837,7 +2875,9 @@ footer {
}
/** acl **/
/**
* acl
*/
#photo-edit-perms-select,
#photos-upload-permissions-wrapper,
#profile-jot-acl-wrapper {
@ -3005,7 +3045,7 @@ footer {
/*
* ADDONS THEMING
* addons theming
*/
#sidebar-page-list {
@ -3018,7 +3058,13 @@ footer {
#sidebar-page-list li {
list-style: none;
}
#jappix_mini {
margin-left: 130px;
position: fixed;
bottom: 0;
right: 175px !important; /* override the jappix css */
z-index: 999;
}
@media handheld {
body {

View file

@ -346,4 +346,3 @@ function enableOnUser(){
}
</script>

View file

@ -9,11 +9,22 @@
/* from html5boilerplate */
/* these are to tell browsers they should be displayed a certain way */
article, aside, details, figcaption, figure, footer,
header, hgroup, nav, section {
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
display: block;
}
audio, canvas, video, time {
audio,
canvas,
video,
time {
display: inline-block;
*display: inline;
*zoom: 1;
@ -46,23 +57,29 @@ body {
font-size: 16px;
line-height: 1.1em;
}
body, button, input, select, textarea {
body,
button,
input,
select,
textarea {
font-family: sans-serif;
color: #222;
background-color: #efefef;
background-color: #e8e8e8;
}
select {
border: 1px #555 dotted;
padding: 3px;
margin: 2px;
margin: 3px;
color: #222;
background: #efefef;
background: #e8e8e8;
}
option {
padding: 3px;
vertical-align: middle;
color: #222;
background: #efefef;
background: #e8e8e8;
}
option[selected="selected"] {
background: #cca;
}
ul, ol {
padding: 0;
@ -71,6 +88,10 @@ ul, ol {
:focus {
outline: 0;
}
[disabled="disabled"] {
background: #ddd;
color: #333;
}
/* remember to highlight inserts somehow! */
ins {
@ -159,17 +180,6 @@ a:hover {
.fakelink:hover {
color: #729fcf;
}
input[type=submit] {
background-color: #555753;
color: #eeeeec;
font-weight: bold;
margin-top: 10px;
height: 22px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 0;
}
.smalltext {
font-size: 0.7em;
}
@ -478,7 +488,8 @@ div.jGrowl div.info {
color: black;
text-decoration: underline;
}
nav #nav-notifications-linkmenu.on .icon.s22.notify, nav #nav-notifications-linkmenu.selected .icon.s22.notify {
nav #nav-notifications-linkmenu.on .icon.s22.notify,
nav #nav-notifications-linkmenu.selected .icon.s22.notify {
background-image: url("../../../images/icons/22/notify_on.png");
}
.show {
@ -543,6 +554,7 @@ nav #nav-notifications-linkmenu.on .icon.s22.notify, nav #nav-notifications-link
.search-box #search-text {
margin: 8px;
width: 10em;
height: 14px;
color: #eec;
}
#scrollup {
@ -684,7 +696,9 @@ nav #nav-notifications-linkmenu.on .icon.s22.notify, nav #nav-notifications-link
}
/** sysmsg **/
/**
* sysmsg
*/
#sysmsg_info {
position: fixed;
bottom: 0;
@ -720,8 +734,8 @@ nav #nav-notifications-linkmenu.on .icon.s22.notify, nav #nav-notifications-link
/**
* aside
**/
* aside
*/
#asidemain {
float: left;
font-size: smaller;
@ -743,21 +757,21 @@ nav #nav-notifications-linkmenu.on .icon.s22.notify, nav #nav-notifications-link
margin: 20px;
}
/* http://css-tricks.com/snippets/css/css-box-shadow/
* box-shadow:
* 1. The horizontal offset of the shadow, positive means
* the shadow will be on the right of the box, a negative
* offset will put the shadow on the left of the box.
* 2. The vertical offset of the shadow, a negative one
* means the box-shadow will be above the box, a
* positive one means the shadow will be below the box.
* 3. The blur radius (optional), if set to 0 the shadow
* will be sharp, the higher the number, the more blurred
* it will be.
* 4. The spread radius (optional), positive values increase
* the size of the shadow, negative values decrease the size.
* Default is 0 (the shadow is same size as blur).
* 5. Colo[u]r
*/
* box-shadow:
* 1. The horizontal offset of the shadow, positive means
* the shadow will be on the right of the box, a negative
* offset will put the shadow on the left of the box.
* 2. The vertical offset of the shadow, a negative one
* means the box-shadow will be above the box, a
* positive one means the shadow will be below the box.
* 3. The blur radius (optional), if set to 0 the shadow
* will be sharp, the higher the number, the more blurred
* it will be.
* 4. The spread radius (optional), positive values increase
* the size of the shadow, negative values decrease the size.
* Default is 0 (the shadow is same size as blur).
* 5. Colo[u]r
*/
.vcard #profile-photo-wrapper img {
box-shadow: 3px 3px 10px 0 #000;
}
@ -809,8 +823,8 @@ nav #nav-notifications-linkmenu.on .icon.s22.notify, nav #nav-notifications-link
/**
* contacts block
*/
* contacts block
*/
.contact-block-div {
width: 50px;
height: 50px;
@ -828,20 +842,20 @@ nav #nav-notifications-linkmenu.on .icon.s22.notify, nav #nav-notifications-link
/**
* jot
**/
*/
#jot {
/*width: 785px;*/
margin: 10px 0 20px 0px;
width: 100%;
/*width: 785px;*/
margin: 10px 0 20px 0px;
width: 100%;
}
#jot #jot-tools {
margin: 0px;
padding: 0px;
height: 35px;
overflow: none;
width: 100%;
/*background-color: #0e232e;*/
/*border-bottom: 2px solid #9eabb0;*/
margin: 0px;
padding: 0px;
height: 35px;
overflow: none;
width: 100%;
/*background-color: #0e232e;*/
/*border-bottom: 2px solid #9eabb0;*/
}
#jot #jot-tools span {
float: left;
@ -880,7 +894,7 @@ nav #nav-notifications-linkmenu.on .icon.s22.notify, nav #nav-notifications-link
border-radius: 5px;
border: 1px #ccc solid;
color: #666;
font-size: small;
font-size: smaller;
}
#jot-category:focus {
color: #111;
@ -1013,15 +1027,20 @@ nav #nav-notifications-linkmenu.on .icon.s22.notify, nav #nav-notifications-link
padding: 0;
}
#profile-jot-submit {
height: 22px;
height: auto;
background-color: #555753;
color: #eeeeec;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 0;
border: 2px outset #222420;
margin: 0;
float: right;
text-shadow: 1px 1px #111;
width: auto;
}
#profile-jot-submit:active {
box-shadow: 0 0 0 0;
}
#jot-perms-icon {
height: 22px;
@ -1113,7 +1132,9 @@ nav #nav-notifications-linkmenu.on .icon.s22.notify, nav #nav-notifications-link
display: inline;
}
/** tabs **/
/**
* tabs
*/
.tabs {
list-style: none;
margin: 10px 0;
@ -1155,7 +1176,7 @@ nav #nav-notifications-linkmenu.on .icon.s22.notify, nav #nav-notifications-link
.wall-item-outside-wrapper {
border: 1px solid #aaa;
border-radius: 5px;
box-shadow: 5px 0 10px 0 #999;
box-shadow: 5px 0 10px 0 #888;
}
.wall-item-outside-wrapper.comment {
margin-top: 5px;
@ -1186,7 +1207,7 @@ nav #nav-notifications-linkmenu.on .icon.s22.notify, nav #nav-notifications-link
margin: 0px 15px 0px 5px;
}
/* removing it from here, vs. putting it in .wall-item-content
* might break things for people. we shall see ;) */
* might break things for people. we shall see ;) */
[id^="tread-wrapper"], [class^="tread-wrapper"] {
margin: 15px 0 0 0;
padding: 0px;
@ -1497,7 +1518,7 @@ nav #nav-notifications-linkmenu.on .icon.s22.notify, nav #nav-notifications-link
/**
* item text style
**/
*/
.wall-item-body code {
display: block;
padding: 0 0 10px 5px;
@ -1512,7 +1533,7 @@ nav #nav-notifications-linkmenu.on .icon.s22.notify, nav #nav-notifications-link
/**
* profile
**/
*/
div[id$="text"] {
font-weight: bold;
border-bottom: 1px solid #ccc;
@ -1531,7 +1552,7 @@ div[id$="wrapper"] br {
/**
* photos
**/
*/
.photos {
height: auto;
overflow: auto;
@ -1933,7 +1954,15 @@ div[id$="wrapper"] br {
#profile-edit-form div {
clear: both;
}
.settings-block {
}
.settings-block label {
clear: left;
}
.settings-block input {
margin: 10px 5px;
}
/*#register-form label, */
/*#profile-edit-form label {*/
/* width: 300px; */
@ -2002,6 +2031,12 @@ div[id$="wrapper"] br {
#id_ssl_policy {
width: 374px;
}
#theme-preview {
}
#theme-preview img {
margin: 10px 10px 10px 288px;
}
/**
@ -2131,7 +2166,7 @@ div[id$="wrapper"] br {
/**
* events
**/
*/
.clear { clear: both; }
.eventcal {
float:left;
@ -2252,7 +2287,7 @@ div[id$="wrapper"] br {
margin-top: 30px;
}
/* was tired of having no way of moving it around, so
* here's a little 'hook' to do so */
* here's a little 'hook' to do so */
.delete-checked {
position: absolute;
left: 35px;
@ -2380,7 +2415,7 @@ div[id$="wrapper"] br {
/**
* ADMIN
* admin
*/
#pending-update {
float:right;
@ -2469,7 +2504,7 @@ div[id$="wrapper"] br {
/**
* Form fields
* form fields
*/
.field {
/*margin-bottom: 10px;*/
@ -2478,22 +2513,43 @@ div[id$="wrapper"] br {
width: 100%;
}
.field label, label {
float: left;
width: 275px;
display: block;
width: 38%;
display: inline-block;
font-size: 1.077em;
margin: 0 10px 0.5em 0;
margin: 0 10px 1em 0;
border: 1px #999 solid;
padding: 5px;
background: #ccc;
vertical-align: middle;
color: #111;
}
.field input, input[type="text"] {
input,
input[type="text"],
input[type="password"],
input[type="search"] {
width: 250px;
height: 25px;
border: 1px #999 solid;
}
input[type="checkbox"], input[type="radio"] {
border: 1px #999 solid;
margin: 0 0 0 0;
}
input[type="submit"], input[type="button"] {
background-color: #555753;
border: 2px outset #444;
border-radius: 5px;
box-shadow: 1px 3px 4px 0 #111;
color: #eeeeec;
cursor: pointer;
font-weight: bold;
width: auto;
text-shadow: 1px 1px #111;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
input[type="submit"]:active, input[type="button"]:active {
box-shadow: 0 0 0 0;
}
.field textarea {
width: 80%;
height: 100px;
@ -2533,7 +2589,7 @@ div[id$="wrapper"] br {
/*
* UPDATE
* update
*/
.popup {
width: 100%;
@ -2631,7 +2687,7 @@ div[id$="wrapper"] br {
/**
* ICONS
* icons
*/
.iconspacer {
display: block;
@ -2838,7 +2894,9 @@ footer {
}
/** acl **/
/**
* acl
*/
#photo-edit-perms-select,
#photos-upload-permissions-wrapper,
#profile-jot-acl-wrapper {
@ -3006,7 +3064,7 @@ footer {
/*
* ADDONS THEMING
* addons theming
*/
#sidebar-page-list {
@ -3019,7 +3077,13 @@ footer {
#sidebar-page-list li {
list-style: none;
}
#jappix_mini {
margin-left: 130px;
position: fixed;
bottom: 0;
right: 175px !important; /* override the jappix css */
z-index: 999;
}
@media handheld {
body {