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 { select {
border: 1px #555 dotted; border: 1px #555 dotted;
padding: 3px; padding: 3px;
margin: 2px; margin: 3px;
color: #eec; color: #eec;
background: #2e2f2e; background: #2e2f2e;
} }
option { option {
padding: 3px; padding: 3px;
vertical-align: middle;
color: #eec; color: #eec;
background: #2e2f2e; background: #2e2f2e;
} }
option[selected="selected"] {
color: #2e2f2e;
background: #eec;
}
ul, ol { ul, ol {
padding: 0; padding: 0;
} }
@ -158,17 +161,6 @@ a:hover {
.fakelink:hover { .fakelink:hover {
color: #729fcf; 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 { .smalltext {
font-size: 0.7em; font-size: 0.7em;
} }
@ -477,7 +469,8 @@ div.jGrowl div.info {
color: black; color: black;
text-decoration: underline; 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"); background-image: url("../../../images/icons/22/notify_on.png");
} }
.show { .show {
@ -542,6 +535,7 @@ nav #nav-notifications-linkmenu.on .icon.s22.notify, nav #nav-notifications-link
.search-box #search-text { .search-box #search-text {
margin: 8px; margin: 8px;
width: 10em; width: 10em;
height: 14px;
color: #eec; color: #eec;
} }
#scrollup { #scrollup {
@ -683,7 +677,9 @@ nav #nav-notifications-linkmenu.on .icon.s22.notify, nav #nav-notifications-link
} }
/** sysmsg **/ /**
* sysmsg
*/
#sysmsg_info { #sysmsg_info {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
@ -720,7 +716,7 @@ nav #nav-notifications-linkmenu.on .icon.s22.notify, nav #nav-notifications-link
/** /**
* aside * aside
**/ */
#asidemain { #asidemain {
float: left; float: left;
font-size: smaller; font-size: smaller;
@ -827,7 +823,7 @@ nav #nav-notifications-linkmenu.on .icon.s22.notify, nav #nav-notifications-link
/** /**
* jot * jot
**/ */
#jot { #jot {
/*width: 785px;*/ /*width: 785px;*/
margin: 10px 0 20px 0px; margin: 10px 0 20px 0px;
@ -1012,15 +1008,20 @@ nav #nav-notifications-linkmenu.on .icon.s22.notify, nav #nav-notifications-link
padding: 0; padding: 0;
} }
#profile-jot-submit { #profile-jot-submit {
height: 22px; height: auto;
background-color: #555753; background-color: #555753;
color: #eeeeec; color: #eeeeec;
-webkit-border-radius: 5px; -webkit-border-radius: 5px;
-moz-border-radius: 5px; -moz-border-radius: 5px;
border-radius: 5px; border-radius: 5px;
border: 0; border: 2px outset #222420;
margin: 0; margin: 0;
float: right; float: right;
text-shadow: 1px 1px #111;
width: auto;
}
#profile-jot-submit:active {
box-shadow: 0 0 0 0;
} }
#jot-perms-icon { #jot-perms-icon {
height: 22px; height: 22px;
@ -1112,7 +1113,9 @@ nav #nav-notifications-linkmenu.on .icon.s22.notify, nav #nav-notifications-link
display: inline; display: inline;
} }
/** tabs **/ /**
* tabs
*/
.tabs { .tabs {
list-style: none; list-style: none;
margin: 10px 0; margin: 10px 0;
@ -1496,7 +1499,7 @@ nav #nav-notifications-linkmenu.on .icon.s22.notify, nav #nav-notifications-link
/** /**
* item text style * item text style
**/ */
.wall-item-body code { .wall-item-body code {
display: block; display: block;
padding: 0 0 10px 5px; padding: 0 0 10px 5px;
@ -1511,7 +1514,7 @@ nav #nav-notifications-linkmenu.on .icon.s22.notify, nav #nav-notifications-link
/** /**
* profile * profile
**/ */
div[id$="text"] { div[id$="text"] {
font-weight: bold; font-weight: bold;
border-bottom: 1px solid #ccc; border-bottom: 1px solid #ccc;
@ -1530,7 +1533,7 @@ div[id$="wrapper"] br {
/** /**
* photos * photos
**/ */
.photos { .photos {
height: auto; height: auto;
overflow: auto; overflow: auto;
@ -1932,7 +1935,15 @@ div[id$="wrapper"] br {
#profile-edit-form div { #profile-edit-form div {
clear: both; clear: both;
} }
.settings-block {
}
.settings-block label {
clear: left;
}
.settings-block input {
margin: 10px 5px;
}
/*#register-form label, */ /*#register-form label, */
/*#profile-edit-form label {*/ /*#profile-edit-form label {*/
/* width: 300px; */ /* width: 300px; */
@ -2001,6 +2012,12 @@ div[id$="wrapper"] br {
#id_ssl_policy { #id_ssl_policy {
width: 374px; width: 374px;
} }
#theme-preview {
}
#theme-preview img {
margin: 10px 10px 10px 288px;
}
/** /**
@ -2130,7 +2147,7 @@ div[id$="wrapper"] br {
/** /**
* events * events
**/ */
.clear { clear: both; } .clear { clear: both; }
.eventcal { .eventcal {
float:left; float:left;
@ -2379,7 +2396,7 @@ div[id$="wrapper"] br {
/** /**
* ADMIN * admin
*/ */
#pending-update { #pending-update {
float:right; float:right;
@ -2468,7 +2485,7 @@ div[id$="wrapper"] br {
/** /**
* Form fields * form fields
*/ */
.field { .field {
/*margin-bottom: 10px;*/ /*margin-bottom: 10px;*/
@ -2477,22 +2494,43 @@ div[id$="wrapper"] br {
width: 100%; width: 100%;
} }
.field label, label { .field label, label {
float: left; width: 38%;
width: 275px; display: inline-block;
display: block;
font-size: 1.077em; font-size: 1.077em;
margin: 0 10px 0.5em 0; margin: 0 10px 1em 0;
border: 1px #2e2f2e solid; border: 1px #2e2f2e solid;
padding: 5px; padding: 5px;
background: #eec; background: #eec;
vertical-align: middle;
color: #111; color: #111;
} }
.field input, input[type="text"] { input,
input[type="text"],
input[type="password"],
input[type="search"] {
width: 250px; width: 250px;
height: 25px; height: 25px;
border: 1px #999 solid; 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 { .field textarea {
width: 80%; width: 80%;
height: 100px; height: 100px;
@ -2532,7 +2570,7 @@ div[id$="wrapper"] br {
/* /*
* UPDATE * update
*/ */
.popup { .popup {
width: 100%; width: 100%;
@ -2630,7 +2668,7 @@ div[id$="wrapper"] br {
/** /**
* ICONS * icons
*/ */
.iconspacer { .iconspacer {
display: block; display: block;
@ -2837,7 +2875,9 @@ footer {
} }
/** acl **/ /**
* acl
*/
#photo-edit-perms-select, #photo-edit-perms-select,
#photos-upload-permissions-wrapper, #photos-upload-permissions-wrapper,
#profile-jot-acl-wrapper { #profile-jot-acl-wrapper {
@ -3005,7 +3045,7 @@ footer {
/* /*
* ADDONS THEMING * addons theming
*/ */
#sidebar-page-list { #sidebar-page-list {
@ -3018,7 +3058,13 @@ footer {
#sidebar-page-list li { #sidebar-page-list li {
list-style: none; list-style: none;
} }
#jappix_mini {
margin-left: 130px;
position: fixed;
bottom: 0;
right: 175px !important; /* override the jappix css */
z-index: 999;
}
@media handheld { @media handheld {
body { body {

View file

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

View file

@ -9,11 +9,22 @@
/* from html5boilerplate */ /* from html5boilerplate */
/* these are to tell browsers they should be displayed a certain way */ /* these are to tell browsers they should be displayed a certain way */
article, aside, details, figcaption, figure, footer, article,
header, hgroup, nav, section { aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
display: block; display: block;
} }
audio, canvas, video, time { audio,
canvas,
video,
time {
display: inline-block; display: inline-block;
*display: inline; *display: inline;
*zoom: 1; *zoom: 1;
@ -46,23 +57,29 @@ body {
font-size: 16px; font-size: 16px;
line-height: 1.1em; line-height: 1.1em;
} }
body, button, input, select, textarea { body,
button,
input,
select,
textarea {
font-family: sans-serif; font-family: sans-serif;
color: #222; color: #222;
background-color: #efefef; background-color: #e8e8e8;
} }
select { select {
border: 1px #555 dotted; border: 1px #555 dotted;
padding: 3px; padding: 3px;
margin: 2px; margin: 3px;
color: #222; color: #222;
background: #efefef; background: #e8e8e8;
} }
option { option {
padding: 3px; padding: 3px;
vertical-align: middle;
color: #222; color: #222;
background: #efefef; background: #e8e8e8;
}
option[selected="selected"] {
background: #cca;
} }
ul, ol { ul, ol {
padding: 0; padding: 0;
@ -71,6 +88,10 @@ ul, ol {
:focus { :focus {
outline: 0; outline: 0;
} }
[disabled="disabled"] {
background: #ddd;
color: #333;
}
/* remember to highlight inserts somehow! */ /* remember to highlight inserts somehow! */
ins { ins {
@ -159,17 +180,6 @@ a:hover {
.fakelink:hover { .fakelink:hover {
color: #729fcf; 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 { .smalltext {
font-size: 0.7em; font-size: 0.7em;
} }
@ -478,7 +488,8 @@ div.jGrowl div.info {
color: black; color: black;
text-decoration: underline; 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"); background-image: url("../../../images/icons/22/notify_on.png");
} }
.show { .show {
@ -543,6 +554,7 @@ nav #nav-notifications-linkmenu.on .icon.s22.notify, nav #nav-notifications-link
.search-box #search-text { .search-box #search-text {
margin: 8px; margin: 8px;
width: 10em; width: 10em;
height: 14px;
color: #eec; color: #eec;
} }
#scrollup { #scrollup {
@ -684,7 +696,9 @@ nav #nav-notifications-linkmenu.on .icon.s22.notify, nav #nav-notifications-link
} }
/** sysmsg **/ /**
* sysmsg
*/
#sysmsg_info { #sysmsg_info {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
@ -721,7 +735,7 @@ nav #nav-notifications-linkmenu.on .icon.s22.notify, nav #nav-notifications-link
/** /**
* aside * aside
**/ */
#asidemain { #asidemain {
float: left; float: left;
font-size: smaller; font-size: smaller;
@ -828,7 +842,7 @@ nav #nav-notifications-linkmenu.on .icon.s22.notify, nav #nav-notifications-link
/** /**
* jot * jot
**/ */
#jot { #jot {
/*width: 785px;*/ /*width: 785px;*/
margin: 10px 0 20px 0px; margin: 10px 0 20px 0px;
@ -880,7 +894,7 @@ nav #nav-notifications-linkmenu.on .icon.s22.notify, nav #nav-notifications-link
border-radius: 5px; border-radius: 5px;
border: 1px #ccc solid; border: 1px #ccc solid;
color: #666; color: #666;
font-size: small; font-size: smaller;
} }
#jot-category:focus { #jot-category:focus {
color: #111; color: #111;
@ -1013,15 +1027,20 @@ nav #nav-notifications-linkmenu.on .icon.s22.notify, nav #nav-notifications-link
padding: 0; padding: 0;
} }
#profile-jot-submit { #profile-jot-submit {
height: 22px; height: auto;
background-color: #555753; background-color: #555753;
color: #eeeeec; color: #eeeeec;
-webkit-border-radius: 5px; -webkit-border-radius: 5px;
-moz-border-radius: 5px; -moz-border-radius: 5px;
border-radius: 5px; border-radius: 5px;
border: 0; border: 2px outset #222420;
margin: 0; margin: 0;
float: right; float: right;
text-shadow: 1px 1px #111;
width: auto;
}
#profile-jot-submit:active {
box-shadow: 0 0 0 0;
} }
#jot-perms-icon { #jot-perms-icon {
height: 22px; height: 22px;
@ -1113,7 +1132,9 @@ nav #nav-notifications-linkmenu.on .icon.s22.notify, nav #nav-notifications-link
display: inline; display: inline;
} }
/** tabs **/ /**
* tabs
*/
.tabs { .tabs {
list-style: none; list-style: none;
margin: 10px 0; margin: 10px 0;
@ -1155,7 +1176,7 @@ nav #nav-notifications-linkmenu.on .icon.s22.notify, nav #nav-notifications-link
.wall-item-outside-wrapper { .wall-item-outside-wrapper {
border: 1px solid #aaa; border: 1px solid #aaa;
border-radius: 5px; border-radius: 5px;
box-shadow: 5px 0 10px 0 #999; box-shadow: 5px 0 10px 0 #888;
} }
.wall-item-outside-wrapper.comment { .wall-item-outside-wrapper.comment {
margin-top: 5px; margin-top: 5px;
@ -1497,7 +1518,7 @@ nav #nav-notifications-linkmenu.on .icon.s22.notify, nav #nav-notifications-link
/** /**
* item text style * item text style
**/ */
.wall-item-body code { .wall-item-body code {
display: block; display: block;
padding: 0 0 10px 5px; padding: 0 0 10px 5px;
@ -1512,7 +1533,7 @@ nav #nav-notifications-linkmenu.on .icon.s22.notify, nav #nav-notifications-link
/** /**
* profile * profile
**/ */
div[id$="text"] { div[id$="text"] {
font-weight: bold; font-weight: bold;
border-bottom: 1px solid #ccc; border-bottom: 1px solid #ccc;
@ -1531,7 +1552,7 @@ div[id$="wrapper"] br {
/** /**
* photos * photos
**/ */
.photos { .photos {
height: auto; height: auto;
overflow: auto; overflow: auto;
@ -1933,7 +1954,15 @@ div[id$="wrapper"] br {
#profile-edit-form div { #profile-edit-form div {
clear: both; clear: both;
} }
.settings-block {
}
.settings-block label {
clear: left;
}
.settings-block input {
margin: 10px 5px;
}
/*#register-form label, */ /*#register-form label, */
/*#profile-edit-form label {*/ /*#profile-edit-form label {*/
/* width: 300px; */ /* width: 300px; */
@ -2002,6 +2031,12 @@ div[id$="wrapper"] br {
#id_ssl_policy { #id_ssl_policy {
width: 374px; width: 374px;
} }
#theme-preview {
}
#theme-preview img {
margin: 10px 10px 10px 288px;
}
/** /**
@ -2131,7 +2166,7 @@ div[id$="wrapper"] br {
/** /**
* events * events
**/ */
.clear { clear: both; } .clear { clear: both; }
.eventcal { .eventcal {
float:left; float:left;
@ -2380,7 +2415,7 @@ div[id$="wrapper"] br {
/** /**
* ADMIN * admin
*/ */
#pending-update { #pending-update {
float:right; float:right;
@ -2469,7 +2504,7 @@ div[id$="wrapper"] br {
/** /**
* Form fields * form fields
*/ */
.field { .field {
/*margin-bottom: 10px;*/ /*margin-bottom: 10px;*/
@ -2478,22 +2513,43 @@ div[id$="wrapper"] br {
width: 100%; width: 100%;
} }
.field label, label { .field label, label {
float: left; width: 38%;
width: 275px; display: inline-block;
display: block;
font-size: 1.077em; font-size: 1.077em;
margin: 0 10px 0.5em 0; margin: 0 10px 1em 0;
border: 1px #999 solid; border: 1px #999 solid;
padding: 5px; padding: 5px;
background: #ccc; background: #ccc;
vertical-align: middle;
color: #111; color: #111;
} }
.field input, input[type="text"] { input,
input[type="text"],
input[type="password"],
input[type="search"] {
width: 250px; width: 250px;
height: 25px; height: 25px;
border: 1px #999 solid; 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 { .field textarea {
width: 80%; width: 80%;
height: 100px; height: 100px;
@ -2533,7 +2589,7 @@ div[id$="wrapper"] br {
/* /*
* UPDATE * update
*/ */
.popup { .popup {
width: 100%; width: 100%;
@ -2631,7 +2687,7 @@ div[id$="wrapper"] br {
/** /**
* ICONS * icons
*/ */
.iconspacer { .iconspacer {
display: block; display: block;
@ -2838,7 +2894,9 @@ footer {
} }
/** acl **/ /**
* acl
*/
#photo-edit-perms-select, #photo-edit-perms-select,
#photos-upload-permissions-wrapper, #photos-upload-permissions-wrapper,
#profile-jot-acl-wrapper { #profile-jot-acl-wrapper {
@ -3006,7 +3064,7 @@ footer {
/* /*
* ADDONS THEMING * addons theming
*/ */
#sidebar-page-list { #sidebar-page-list {
@ -3019,7 +3077,13 @@ footer {
#sidebar-page-list li { #sidebar-page-list li {
list-style: none; list-style: none;
} }
#jappix_mini {
margin-left: 130px;
position: fixed;
bottom: 0;
right: 175px !important; /* override the jappix css */
z-index: 999;
}
@media handheld { @media handheld {
body { body {