From 959b264c440e0c39ec235defdec42cb485069f18 Mon Sep 17 00:00:00 2001 From: Tobias Diekershoff Date: Sun, 3 Jun 2012 22:32:42 +0200 Subject: quattro: admin panel styling and 1st buttons for addon/theme overview --- view/theme/quattro/dark/style.css | 135 +++++++++++++++++++++++++-------- view/theme/quattro/green/style.css | 135 +++++++++++++++++++++++++-------- view/theme/quattro/icons.less | 15 +++- view/theme/quattro/icons/addon_off.png | Bin 0 -> 438 bytes view/theme/quattro/icons/addon_on.png | Bin 0 -> 428 bytes view/theme/quattro/quattro.less | 61 +++++++++++++++ 6 files changed, 281 insertions(+), 65 deletions(-) create mode 100644 view/theme/quattro/icons/addon_off.png create mode 100644 view/theme/quattro/icons/addon_on.png (limited to 'view') diff --git a/view/theme/quattro/dark/style.css b/view/theme/quattro/dark/style.css index 1fa03b253..d59ace8e3 100644 --- a/view/theme/quattro/dark/style.css +++ b/view/theme/quattro/dark/style.css @@ -243,6 +243,18 @@ .icon.s48.language { background-image: url("icons/language.png"); } +.icon.on { + background-image: url("icons/addon_on.png"); + min-width: 16px; + height: 16px; + background-position: 0px 0px; +} +.icon.off { + background-image: url("icons/addon_off.png"); + width: 16px; + height: 16px; + background-position: 0px 0px; +} /* global */ body { font-family: Liberation Sans, helvetica, arial, clean, sans-serif; @@ -255,8 +267,7 @@ body { h4 { font-size: 1.1em; } -a, -a:link { +a, a:link { color: #005c94; text-decoration: none; } @@ -478,8 +489,7 @@ nav #nav-site-linkmenu .menu-popup { right: 0px; left: auto; } -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"); } nav #nav-apps-link.selected { @@ -668,15 +678,11 @@ aside #profiles-menu { height: 48px; } /* group member */ -#contact-edit-drop-link, -.mail-list-delete-wrapper, -.group-delete-wrapper { +#contact-edit-drop-link, .mail-list-delete-wrapper, .group-delete-wrapper { float: right; margin-right: 50px; } -#contact-edit-drop-link .drophide, -.mail-list-delete-wrapper .drophide, -.group-delete-wrapper .drophide { +#contact-edit-drop-link .drophide, .mail-list-delete-wrapper .drophide, .group-delete-wrapper .drophide { background-image: url('../../../images/icons/22/delete.png'); display: block; width: 22px; @@ -685,9 +691,7 @@ aside #profiles-menu { position: relative; top: -50px; } -#contact-edit-drop-link .drop, -.mail-list-delete-wrapper .drop, -.group-delete-wrapper .drop { +#contact-edit-drop-link .drop, .mail-list-delete-wrapper .drop, .group-delete-wrapper .drop { background-image: url('../../../images/icons/22/delete.png'); display: block; width: 22px; @@ -817,8 +821,7 @@ section { display: table; width: 750px; } -.wall-item-container .wall-item-item, -.wall-item-container .wall-item-bottom { +.wall-item-container .wall-item-item, .wall-item-container .wall-item-bottom { display: table-row; } .wall-item-container .wall-item-bottom { @@ -856,13 +859,11 @@ section { .wall-item-container .wall-item-content img { max-width: 710px; } -.wall-item-container .wall-item-links, -.wall-item-container .wall-item-actions { +.wall-item-container .wall-item-links, .wall-item-container .wall-item-actions { display: table-cell; vertical-align: middle; } -.wall-item-container .wall-item-links .icon, -.wall-item-container .wall-item-actions .icon { +.wall-item-container .wall-item-links .icon, .wall-item-container .wall-item-actions .icon { opacity: 0.5; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; @@ -870,8 +871,7 @@ section { -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } -.wall-item-container .wall-item-links .icon:hover, -.wall-item-container .wall-item-actions .icon:hover { +.wall-item-container .wall-item-links .icon:hover, .wall-item-container .wall-item-actions .icon:hover { opacity: 1; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; @@ -1015,6 +1015,9 @@ section { opacity: 0.5; } .wwto { + position: absolute !important; + width: 25px; + height: 25px; background: #FFFFFF; border: 2px solid #364e59; height: 25px; @@ -1245,9 +1248,7 @@ section { height: 18px; }*/ /** acl **/ -#photo-edit-perms-select, -#photos-upload-permissions-wrapper, -#profile-jot-acl-wrapper { +#photo-edit-perms-select, #photos-upload-permissions-wrapper, #profile-jot-acl-wrapper { display: block!important; } #acl-wrapper { @@ -1406,12 +1407,10 @@ ul.tabs li .active { float: left; width: 200px; } -.field input, -.field textarea { +.field input, .field textarea { width: 400px; } -.field input[type="checkbox"], -.field input[type="radio"] { +.field input[type="checkbox"], .field input[type="radio"] { width: auto; } .field textarea { @@ -1642,15 +1641,13 @@ ul.tabs li .active { transition: all 0.2s ease-in-out; } /* theme screenshot */ -.screenshot, -#theme-preview { +.screenshot, #theme-preview { position: absolute; width: 202px; left: 70%; top: 50px; } -.screenshot img, -#theme-preview img { +.screenshot img, #theme-preview img { width: 200px; height: 150px; } @@ -1663,3 +1660,77 @@ footer { margin-top: 25px; clear: both; } +/** + * ADMIN + */ +#pending-update { + float: right; + color: #ffffff; + font-weight: bold; + background-color: #FF0000; + padding: 0em 0.3em; +} +#adminpage dl { + clear: left; + margin-bottom: 2px; + padding-bottom: 2px; + border-bottom: 1px solid black; +} +#adminpage dt { + width: 200px; + float: left; + font-weight: bold; +} +#adminpage dd { + margin-left: 200px; +} +#adminpage h3 { + border-bottom: 1px solid #cccccc; +} +#adminpage .field label { + font-weight: bold; +} +#adminpage .submit { + clear: left; + text-align: right; +} +#adminpage #pluginslist { + margin: 0px; + padding: 0px; +} +#adminpage .plugin { + list-style: none; + display: block; + border: 1px solid #888888; + padding: 1em; + margin-bottom: 5px; + clear: left; +} +#adminpage .plugin .desc { + margin-left: 2.5em; +} +#adminpage .toggleplugin { + float: left; + margin-right: 1em; +} +#adminpage table { + width: 100%; + border-bottom: 1px solid #000000; + margin: 5px 0px; +} +#adminpage table th { + text-align: left; +} +#adminpage td .icon { + float: left; +} +#adminpage table#users img { + width: 16px; + height: 16px; +} +#adminpage table tr:hover { + background-color: #bbc7d7; +} +#adminpage .selectall { + text-align: right; +} diff --git a/view/theme/quattro/green/style.css b/view/theme/quattro/green/style.css index 317112f6f..d764886c1 100644 --- a/view/theme/quattro/green/style.css +++ b/view/theme/quattro/green/style.css @@ -243,6 +243,18 @@ .icon.s48.language { background-image: url("icons/language.png"); } +.icon.on { + background-image: url("icons/addon_on.png"); + min-width: 16px; + height: 16px; + background-position: 0px 0px; +} +.icon.off { + background-image: url("icons/addon_off.png"); + width: 16px; + height: 16px; + background-position: 0px 0px; +} /* global */ body { font-family: Liberation Sans, helvetica, arial, clean, sans-serif; @@ -255,8 +267,7 @@ body { h4 { font-size: 1.1em; } -a, -a:link { +a, a:link { color: #009100; text-decoration: none; } @@ -478,8 +489,7 @@ nav #nav-site-linkmenu .menu-popup { right: 0px; left: auto; } -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"); } nav #nav-apps-link.selected { @@ -668,15 +678,11 @@ aside #profiles-menu { height: 48px; } /* group member */ -#contact-edit-drop-link, -.mail-list-delete-wrapper, -.group-delete-wrapper { +#contact-edit-drop-link, .mail-list-delete-wrapper, .group-delete-wrapper { float: right; margin-right: 50px; } -#contact-edit-drop-link .drophide, -.mail-list-delete-wrapper .drophide, -.group-delete-wrapper .drophide { +#contact-edit-drop-link .drophide, .mail-list-delete-wrapper .drophide, .group-delete-wrapper .drophide { background-image: url('../../../images/icons/22/delete.png'); display: block; width: 22px; @@ -685,9 +691,7 @@ aside #profiles-menu { position: relative; top: -50px; } -#contact-edit-drop-link .drop, -.mail-list-delete-wrapper .drop, -.group-delete-wrapper .drop { +#contact-edit-drop-link .drop, .mail-list-delete-wrapper .drop, .group-delete-wrapper .drop { background-image: url('../../../images/icons/22/delete.png'); display: block; width: 22px; @@ -817,8 +821,7 @@ section { display: table; width: 750px; } -.wall-item-container .wall-item-item, -.wall-item-container .wall-item-bottom { +.wall-item-container .wall-item-item, .wall-item-container .wall-item-bottom { display: table-row; } .wall-item-container .wall-item-bottom { @@ -856,13 +859,11 @@ section { .wall-item-container .wall-item-content img { max-width: 710px; } -.wall-item-container .wall-item-links, -.wall-item-container .wall-item-actions { +.wall-item-container .wall-item-links, .wall-item-container .wall-item-actions { display: table-cell; vertical-align: middle; } -.wall-item-container .wall-item-links .icon, -.wall-item-container .wall-item-actions .icon { +.wall-item-container .wall-item-links .icon, .wall-item-container .wall-item-actions .icon { opacity: 0.5; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; @@ -870,8 +871,7 @@ section { -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } -.wall-item-container .wall-item-links .icon:hover, -.wall-item-container .wall-item-actions .icon:hover { +.wall-item-container .wall-item-links .icon:hover, .wall-item-container .wall-item-actions .icon:hover { opacity: 1; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; @@ -1015,6 +1015,9 @@ section { opacity: 0.5; } .wwto { + position: absolute !important; + width: 25px; + height: 25px; background: #FFFFFF; border: 2px solid #364e59; height: 25px; @@ -1245,9 +1248,7 @@ section { height: 18px; }*/ /** acl **/ -#photo-edit-perms-select, -#photos-upload-permissions-wrapper, -#profile-jot-acl-wrapper { +#photo-edit-perms-select, #photos-upload-permissions-wrapper, #profile-jot-acl-wrapper { display: block!important; } #acl-wrapper { @@ -1406,12 +1407,10 @@ ul.tabs li .active { float: left; width: 200px; } -.field input, -.field textarea { +.field input, .field textarea { width: 400px; } -.field input[type="checkbox"], -.field input[type="radio"] { +.field input[type="checkbox"], .field input[type="radio"] { width: auto; } .field textarea { @@ -1642,15 +1641,13 @@ ul.tabs li .active { transition: all 0.2s ease-in-out; } /* theme screenshot */ -.screenshot, -#theme-preview { +.screenshot, #theme-preview { position: absolute; width: 202px; left: 70%; top: 50px; } -.screenshot img, -#theme-preview img { +.screenshot img, #theme-preview img { width: 200px; height: 150px; } @@ -1663,3 +1660,77 @@ footer { margin-top: 25px; clear: both; } +/** + * ADMIN + */ +#pending-update { + float: right; + color: #ffffff; + font-weight: bold; + background-color: #FF0000; + padding: 0em 0.3em; +} +#adminpage dl { + clear: left; + margin-bottom: 2px; + padding-bottom: 2px; + border-bottom: 1px solid black; +} +#adminpage dt { + width: 200px; + float: left; + font-weight: bold; +} +#adminpage dd { + margin-left: 200px; +} +#adminpage h3 { + border-bottom: 1px solid #cccccc; +} +#adminpage .field label { + font-weight: bold; +} +#adminpage .submit { + clear: left; + text-align: right; +} +#adminpage #pluginslist { + margin: 0px; + padding: 0px; +} +#adminpage .plugin { + list-style: none; + display: block; + border: 1px solid #888888; + padding: 1em; + margin-bottom: 5px; + clear: left; +} +#adminpage .plugin .desc { + margin-left: 2.5em; +} +#adminpage .toggleplugin { + float: left; + margin-right: 1em; +} +#adminpage table { + width: 100%; + border-bottom: 1px solid #000000; + margin: 5px 0px; +} +#adminpage table th { + text-align: left; +} +#adminpage td .icon { + float: left; +} +#adminpage table#users img { + width: 16px; + height: 16px; +} +#adminpage table tr:hover { + background-color: #bbc7d7; +} +#adminpage .selectall { + text-align: right; +} diff --git a/view/theme/quattro/icons.less b/view/theme/quattro/icons.less index 24e96b5aa..ae7459dfc 100644 --- a/view/theme/quattro/icons.less +++ b/view/theme/quattro/icons.less @@ -21,7 +21,8 @@ &.type-text { background-image: url("../../../images/icons/@{size}/text.png"); } &.language { background-image: url("icons/language.png"); } - + + } @@ -59,5 +60,17 @@ .icons(48); } + &.on { + background-image: url("icons/addon_on.png"); + min-width:16px; + height: 16px; + background-position: 0px 0px; + } + &.off { + background-image: url("icons/addon_off.png"); + width: 16px; + height: 16px; + background-position: 0px 0px; + } } diff --git a/view/theme/quattro/icons/addon_off.png b/view/theme/quattro/icons/addon_off.png new file mode 100644 index 000000000..40b53259a Binary files /dev/null and b/view/theme/quattro/icons/addon_off.png differ diff --git a/view/theme/quattro/icons/addon_on.png b/view/theme/quattro/icons/addon_on.png new file mode 100644 index 000000000..3d9490f15 Binary files /dev/null and b/view/theme/quattro/icons/addon_on.png differ diff --git a/view/theme/quattro/quattro.less b/view/theme/quattro/quattro.less index 4c3279943..ce03dd6da 100644 --- a/view/theme/quattro/quattro.less +++ b/view/theme/quattro/quattro.less @@ -1152,3 +1152,64 @@ footer { height: 100px; display: table-row; } clear: both; } +/** + * ADMIN + */ +#pending-update { + float:right; + color: #ffffff; + font-weight: bold; + background-color: #FF0000; + padding: 0em 0.3em; + +} +#adminpage dl { + clear: left; + margin-bottom: 2px; + padding-bottom: 2px; + border-bottom: 1px solid black; +} +#adminpage dt { + width: 200px; + float: left; + font-weight: bold; +} +#adminpage dd { + margin-left: 200px; +} + +#adminpage h3 { + border-bottom: 1px solid #cccccc; +} +#adminpage .field label { + font-weight: bold; +} +#adminpage .submit { + clear:left; + text-align: right; +} + +#adminpage #pluginslist { + margin: 0px; padding: 0px; +} +#adminpage .plugin { + list-style: none; + display: block; + border: 1px solid #888888; + padding: 1em; + margin-bottom: 5px; + clear: left; +} +#adminpage .plugin .desc { margin-left: 2.5em;} +#adminpage .toggleplugin { + float:left; + margin-right: 1em; +} + +#adminpage table {width:100%; border-bottom: 1px solid #000000; margin: 5px 0px;} +#adminpage table th { text-align: left;} +#adminpage td .icon { float: left;} +#adminpage table#users img { width: 16px; height: 16px; } +#adminpage table tr:hover { background-color: #bbc7d7; } +#adminpage .selectall { text-align: right; } + -- cgit v1.2.3