4 * @author Samantha Doherty <sammy@status.net>
5 * @copyright 2010 StatusNet, Inc.
6 * @license http://creativecommons.org/licenses/by/3.0/ Creative Commons Attribution 3.0 Unported
7 * @link http://status.net/
11 @media screen, projection, tv {
13 /* general styles and layout */
15 * {margin: 0; padding: 0; vertical-align: baseline;}
16 a abbr {border-bottom: 0; cursor: pointer;}
17 input.submit {cursor: pointer;}
18 table {border-collapse: collapse;}
19 ol, ul {list-style-position: inside;}
20 fieldset {border: none;}
21 legend {font-weight: bold; font-size: 1.2em;}
22 input, textarea, select, option {padding: 2px;}
23 textarea {overflow:auto;}
26 background-color: #ffffff;
28 font-family: sans-serif;
36 text-decoration: none;
41 text-decoration: underline;
46 text-decoration: none;
49 h1, h2, h3, h4, h5, h6 {
54 h1 {font-size: 2.2em;}
55 h2 {font-size: 1.8em;}
56 h3 {font-size: 1.6em;}
57 h4 {font-size: 1.4em;}
58 h5 {font-size: 1.2em;}
65 .form_notice p, li p, .section p {
69 input, textarea, select, option {
70 font-family: "DejaVu Sans", "Bitstream Vera Sans", Geneva, Verdana, sans-serif;
107 background-color: #fff;
126 #aside_primary .section {
127 margin: 0px 2% 20px 2%;
134 body[id$=adminpanel] #aside_primary {
138 /* header elements */
153 #site_nav_global_primary {
154 margin: 20px 0px 20px 0px;
157 #site_nav_global_primary dt {
161 #site_nav_global_primary li {
168 background-color: #f2f2f2;
182 background-color: #ccc;
190 /* new notice & direct message forms */
198 .form_notice fieldset {
204 .form_notice legend {
208 .form_notice textarea {
216 padding-bottom: 18px;
220 .form_notice label[for=notice_data-text] {
224 margin-bottom: 0.2em;
226 color: #333 !important;
229 .form_notice label.notice_data-attach,
230 .form_notice input.notice_data-attach {
234 .form_notice label.notice_data-attach {
238 .form_notice input.notice_data-attach {
239 /* Positioned inside the label */
244 .form_notice label.notice_data-attach {
250 .form_notice input.notice_data-attach {
255 .form_notice .count {
263 .form_notice .count dt {
267 .form_notice .count {
271 .form_notice.warning .count {
275 .form_notice .submit {
284 .form_notice label[for=to] {
289 color: #333 !important;
292 .form_notice select[id=to] {
301 .form_notice .success,
302 .form_notice .notice-status {
307 padding: 2px 2px 2px 5px;
309 border: 2px solid #ccc;
313 .form_notice .attach-status code {
317 .form_notice .error {
320 padding: 6px 2px 6px 5px;
323 .form_notice .attach-status button.close,
324 .form_notice .notice-status button.close {
329 .form_notice .notice_data-geo_wrap label,
330 .form_notice .notice_data-geo_wrap input {
341 .form_notice .notice_data-geo_wrap input {
345 .form_notice .notice_data-geo_wrap label {
356 .form_notice label:hover {
360 .form_notice input.notice_data-attach {
364 .form_notice .to-selector {
368 /* Local navigation */
370 #site_nav_local_views {
374 #site_nav_local_views dt {
378 #site_nav_local_views li {
383 #site_nav_local_views .current a {
384 text-decoration: underline;
394 #notices_primary h2 {
399 list-style-type: none;
406 .notice, .profile, .application {
421 .notice .author .fn {
425 #core .vcard .photo {
431 #content .notice .author .photo {
438 #content .notice .entry-title {
439 margin: 2px 7px 0px 59px;
443 text-decoration:none;
446 text-decoration:underline;
449 .notice .entry-title {
451 word-wrap:break-word;
454 .notice .entry-title.ov {
466 #showstream .notice .entry-title, #showstream .notice div.entry-content {
470 #showstream #content .notice .author {
474 #showstream .notice {
478 #shownotice .vcard .photo {
482 #shownotice .notice .entry-title {
490 #shownotice .notice div.entry-content {
494 .notice p.entry-content {
498 .notice div.entry-content {
505 .entry-content .repeat {
509 .entry-content .repeat .photo {
523 .notice-options fieldset {
527 .notice-options legend {
531 .notice-options form, .notice-options a, .notice-options .repeated {
536 .notice-options input, .notice-options a, .notice-options .repeated {
537 text-indent: -9999px;
541 .notice-options input.submit, .notice-options a, .notice-options .repeated {
548 .notice-options input.submit, .notice-options a {
552 .notice-options input.submit:hover, .notice-options a:hover {
556 .notice .attachment {
561 .notice .attachment.more {
565 display:inline-block;
567 vertical-align:middle;
571 #attachments .attachment,
572 .notice .attachment.more {
576 .notice .attachment img {
583 #shownotice .notice .attachment img {
601 list-style-type:decimal;
607 #jOverlayContent #content,
608 #jOverlayContent #content_inner {
609 width: auto !important;
612 #jOverlayContent #content {
615 border: 1px solid #fff;
617 #jOverlayContent .entry-title {
621 #jOverlayContent button {
626 #jOverlayContent h1 {
633 #attachment_view img {
637 #attachment_view #oembed_info {
640 #attachment_view #oembed_info dt,
641 #attachment_view #oembed_info dd {
644 #attachment_view #oembed_info dt {
649 #attachment_view #oembed_info dt:after {
653 #content .notice .notice {
661 background-color:rgba(200, 200, 200, 0.050);
663 .notice .notice .notice {
664 background-color:rgba(200, 200, 200, 0.100);
666 .notice .notice .notice .notice {
667 background-color:rgba(200, 200, 200, 0.150);
669 .notice .notice .notice .notice .notice {
670 background-color:rgba(200, 200, 200, 0.300);
673 /* aside primary specific styles */
676 .aside .section .more {
680 .section .vcard .photo {
691 .section .notice:first-child {
695 .section .notice .author {
698 .section .notice .author .fn {
702 #aside_primary ol.notices {
703 list-style-type: none;
710 #aside_primary .notices li {
714 #aside_primary .notice {
719 list-style-type:none;
728 #export_data li a.foaf {
734 padding-bottom: 10px;
742 #entity_statistics dt,
743 #entity_statistics dd {
747 #entity_statistics dt:after {
751 .section ul.entities {
756 .section .entities li {
757 list-style-type: none;
763 .section .entities li .photo {
766 .section .entities li .fn {
771 list-style-type:none;
776 word-wrap:break-word;
784 .tag-cloud li:before {
788 .aside .tag-cloud li {
792 text-decoration:none;
794 #tagcloud.section dt {
795 text-transform:uppercase;
820 #publictagcloud #tagcloud.section dt {
824 /* secondary elements */
827 background-image:url(../../base/images/icons/icon_processing.gif);
828 background-repeat:no-repeat;
829 background-position:47% 47%;
833 background-color: #F7E8E8;
836 background-color: #f2f2f2;
848 .entry-content .success {
867 #bookmarklet address {
870 #bookmarklet .form_notice {
903 display:block !important;
908 .dialogbox button.close {
914 .dialogbox .form_guide {
919 .dialogbox .submit_dialogbox {
927 .dialogbox fieldset {
931 #wrap form.processing input.submit,
932 .entity_actions a.processing,
933 .dialogbox.processing .submit_dialogbox {
940 background-color: #f2f2f2;
951 #pagination .nav_prev {
955 #pagination .nav_next {
961 background-color: #ccc;
967 #site_nav_global_secondary dt {
971 #site_nav_global_secondary li {
984 #site_content_license_cc {
987 #site_content_license_cc img {
994 list-style-type:none;
1006 .form_settings fieldset {
1008 margin-bottom: 30px;
1012 .form_settings fieldset fieldset {
1013 margin-bottom: 40px;
1018 background:rgba(240, 240, 240, 0.2);
1021 .form_settings fieldset fieldset legend {
1024 font-weight: normal;
1027 .form_settings input.remove {
1030 .form_settings .form_data li {
1034 .form_settings .form_data label {
1037 .form_settings .form_data textarea,
1038 .form_settings .form_data select,
1039 .form_settings .form_data input {
1043 .form_settings .form_data input {
1046 .form_settings .form_data input.submit,
1047 .form_settings .form_data input.checkbox,
1048 .form_settings .form_data input.radio {
1051 .form_settings .form_data textarea {
1055 .form_settings .form_data input.submit {
1059 .form_settings label {
1065 .form_settings label.checkbox {
1069 .form_actions label {
1076 .form_settings #settings_autosubscribe label {
1081 #form_settings_profile legend,
1083 #form_register legend,
1084 #form_password legend,
1085 #form_settings_avatar legend,
1088 #form_tag_user legend,
1089 #form_remote_subscribe legend,
1090 #form_openid_login legend,
1091 #form_search legend,
1092 #form_invite legend,
1093 #form_notice_delete legend,
1094 #form_password_recover legend,
1095 #form_password_change legend,
1096 .form_entity_block legend,
1097 #form_filter_bytag legend,
1098 #apioauthauthorize_allowdeny {
1102 .form_settings .form_data p.form_guide {
1112 .form_settings input.checkbox,
1113 .form_settings input.radio {
1117 .form_settings label.checkbox {
1125 .form_settings label.radio {
1132 #form_login p.form_guide,
1133 #form_register #settings_rememberme p.form_guide,
1134 #form_openid_login #settings_rememberme p.form_guide,
1135 #settings_twitter_remove p.form_guide,
1136 #form_search ul.form_data #q,
1137 #design_background-image_onoff p.form_guide {
1141 .form_settings .form_note {
1143 -moz-border-radius:4px;
1144 -webkit-border-radius:4px;
1148 .form_settings input {
1152 #form_search .submit {
1155 #form_search .form_data input {
1159 .hentry .entry-content .form_settings ul {
1163 .limited-scope .entry-content .timestamp:before {
1168 /* override OStatus plugin style */
1170 #form_ostatus_connect.form_settings.dialogbox, #form_ostatus_sub.dialogbox {
1174 #form_ostatus_connect.form_settings.dialogbox legend {
1176 font-weight: normal;
1177 padding-bottom: 10px;
1180 #form_ostatus_connect.dialogbox .form_data label,
1181 #form_ostatus_sub.dialogbox .form_data label {
1182 font-weight: normal;
1187 #form_ostatus_connect.dialogbox .form_data input,
1188 #form_ostatus_sub.dialogbox .form_data input {
1190 width: 52% !important;
1193 #form_ostatus_connect.dialogbox .form_data .form_guide,
1194 #form_ostatus_sub.dialogbox .form_data .form_guide {
1195 background: none !important;
1200 .section .entity_actions {
1201 margin-right: 0px !important;
1204 .section .entity_remote_subscribe {
1205 color:#000 !important;
1206 padding-left: 26px !important;
1207 background-position: 4px -1183px !important;
1211 .entity_send-a-message .form_notice,
1212 .form_settings fieldset fieldset,
1213 .entity_moderation:hover ul,
1214 .entity_role:hover ul,
1216 border-color:#DDDDDD;
1219 .form_settings input.form_action-primary {
1223 .form_settings .form_note {
1224 background-color:#9BB43E;
1227 #form_settings_photo .form_data {
1231 #form_settings_avatar li {
1234 #form_settings_avatar input {
1244 #avatar_preview_view {
1252 #form_settings_avatar .form_actions {
1256 #form_settings_avatar .form_actions {
1260 #settings_design_background-image img {
1265 margin-bottom: 10px;
1268 #settings_design_background-image .form_guide {
1273 #settings_design_color .form_data,
1277 #settings_design_color .form_data {
1282 #settings_design_color .form_data li {
1285 #settings_design_color .form_data label {
1289 #settings_design_color .form_data .swatch {
1306 #entity_statistics dt {
1309 .entity_profile dd {
1313 .entity_profile .entity_depiction {
1321 .entity_profile .entity_fn,
1322 .entity_profile .entity_nickname,
1323 .entity_profile .entity_location,
1324 .entity_profile .entity_url,
1325 .entity_profile .entity_note,
1326 .entity_profile .entity_tags,
1327 .entity_profile .entity_aliases,
1328 .entity_profile .entity_statistics {
1333 .entity_profile .entity_nickname,
1334 .entity_profile .entity_fn {
1338 .entity_profile .nickname {
1342 .entity_profile .fn {
1347 .entity_profile .fn:before {
1351 .entity_profile .fn:after {
1355 .entity_profile .nickname:after,
1356 .entity_profile .nickname:before {
1360 .entity_profile h2 {
1363 .entity_profile .role {
1371 margin-bottom: 28px;
1375 .entity_actions h2 {
1378 .entity_actions ul {
1379 list-style-type:none;
1381 .entity_actions li {
1384 .entity_actions li:first-child {
1387 .entity_actions fieldset {
1391 .entity_actions legend {
1395 .entity_actions input.submit {
1401 text-decoration:none;
1406 .entity_actions a, .entity_actions input, .entity_actions p {
1407 color: #333 !important;
1408 font-weight: normal;
1413 padding: 3px 4px 4px 28px;
1416 .entity_actions input {
1417 padding: 4px 4px 4px 26px;
1420 .entity_actions a, .entity_actions p, .entity_actions .entity_subscribe input, .entity_actions .entity_block input, .entity_actions .entity_moderation input, .entity_actions .entity_role input, .entity_actions .entity_nudge input, .entity_actions .entity_delete input {
1421 background-color: #ccc !important;
1426 padding: 2px 4px 4px 28px;
1429 .entity_actions a:hover, .entity_actions p:hover, .entity_actions .entity_subscribe input:hover, .entity_actions .entity_block input:hover, .entity_actions .entity_moderation input:hover, .entity_actions .entity_role input:hover, .entity_actions .entity_nudge input:hover, .entity_actions .entity_delete input:hover {
1430 background-color: #f2f2f2 !important;
1433 .entity_actions #entity_remote_subscribe a {
1437 .entity_actions .accept {
1441 .entity_send-a-message button {
1447 .entity_send-a-message .form_notice {
1456 .entity_send-a-message .form_notice fieldset {
1460 .entity_send-a-message .form_notice textarea {
1464 .entity_send-a-message .form_notice legend {
1467 font-weight: normal;
1468 color: #333 !important;
1471 .entity_send-a-message .form_notice label,
1472 .entity_send-a-message .form_notice select {
1475 .entity_send-a-message .form_notice .submit {
1486 .entity_moderation p,
1492 .entity_moderation ul,
1496 .entity_moderation:hover ul,
1497 .entity_role:hover ul {
1507 background-color: #fff;
1511 list-style-type:none;
1518 .entity_tags li:before {
1523 margin-bottom: 20px;
1524 padding-bottom: 10px;
1525 border-bottom: 1px solid #ccc;
1532 list-style-type:none;
1538 border-left-width: 1px;
1539 border-left-style:solid;
1541 #filter_tags #filter_tags_all {
1546 #filter_tags_all a {
1552 #filter_tags_item label {
1557 #filter_tags_item label,
1558 #filter_tags_item select {
1562 #filter_tags_item p {
1567 #filter_tags_item .submit {
1573 .profile .entity_profile {
1578 .profile .form_group_join legend,
1579 .profile .form_group_leave legend,
1580 .profile .form_user_subscribe legend,
1581 .profile .form_user_unsubscribe legend {
1586 list-style-type:none;
1590 margin-bottom: 20px;
1593 .profile .entity_profile .fn.nickname,
1594 .profile .entity_profile .url[rel~=contact] {
1599 .profile .entity_profile .fn,
1600 .profile .entity_profile .label {
1607 .profile .entity_profile .note,
1608 .profile .entity_profile .url,
1609 .profile .entity_profile .entity_tags,
1610 .profile .entity_profile .form_subscription_edit {
1616 .profile .entity_profile .entity_tags dt {
1621 .profile .entity_profile .form_subscription_edit label {
1632 list-style-type:none;
1635 #showapplication .entity_profile img,
1636 .form_data #application_icon img,
1637 #apioauthauthorize .form_data img {
1641 #apioauthauthorize .form_data img {
1645 #showapplication .entity_profile {
1648 #showapplication .entity_profile .entity_fn {
1651 #showapplication .entity_profile .entity_fn .fn:before,
1652 #showapplication .entity_profile .entity_fn .fn:after {
1655 #showapplication .entity_data {
1659 #showapplication .entity_data h2 {
1662 #showapplication .entity_data dl {
1665 #showapplication .entity_data dt {
1668 #showapplication .entity_data dd {
1670 font-family:monospace;
1673 .form_data #application_types label.radio,
1674 .form_data #default_access_types label.radio {
1679 border-top: 1px solid #ccc;
1682 #realtime_actions li {
1686 #realtime_play, #realtime_pause, #realtime_popup {
1687 background-image: url(../images/icons/icons-01.gif);
1688 background-repeat: no-repeat;
1689 background-color: transparent;
1693 background-position: 0 -2308px;
1696 background-position: 0 -2374px;
1699 background-position: 0 -1714px;
1702 #realtime_play, #realtime_pause, #realtime_popup {
1706 #realtime_play:hover, #realtime_pause:hover, #realtime_popup:hover {
1710 body.realtime-popup {
1714 .realtime-popup #wrap {
1715 padding: 0px !important;
1716 margin: 0px !important;
1719 .realtime-popup #content {
1720 padding: 0px !important;
1721 margin: 0px !important;
1722 width: 98% !important;
1725 .realtime-popup .form_notice {
1726 float: left !important;
1727 position: static !important;
1730 .realtime-popup .form_notice fieldset {
1731 width: 450px !important;
1734 .realtime-popup .form_notice textarea {
1735 width: 340px !important;
1738 .realtime-popup .form_notice .submit {
1739 top: 58px !important;
1745 .realtime-popup .form_notice label.notice_data-attach {
1749 .realtime-popup .form_notice .notice_data-geo_wrap label, .realtime-popup .form_notice .notice_data-geo_wrap input {
1755 .form_notice label.notice_data-attach,
1756 #export_data li a.rss,
1757 #export_data li a.atom,
1758 #export_data li a.foaf,
1760 .entity_send-a-message a,
1762 .form_user_nudge input.submit,
1763 .form_user_block input.submit,
1764 .form_user_unblock input.submit,
1765 .form_group_block input.submit,
1766 .form_group_unblock input.submit,
1767 .form_make_admin input.submit,
1768 .notice .attachment,
1769 .notice-options .notice_reply,
1770 .notice-options form.form_favor input.submit,
1771 .notice-options form.form_disfavor input.submit,
1772 .notice-options .notice_delete,
1773 .notice-options form.form_repeat input.submit,
1775 #pagination .nav_prev a,
1776 #pagination .nav_next a,
1778 .form_group_leave input.submit,
1779 .form_user_unsubscribe input.submit,
1780 .form_group_join input.submit,
1781 .form_user_subscribe input.submit,
1782 .form_remote_authorize input.submit,
1783 .entity_subscribe a,
1784 .entity_moderation p,
1785 .entity_sandbox input.submit,
1786 .entity_silence input.submit,
1787 .entity_delete input.submit,
1789 .entity_role_administrator input.submit,
1790 .entity_role_moderator input.submit,
1791 .notice-options .repeated,
1792 .form_notice label.notice_data-geo,
1794 .form_reset_key input.submit,
1795 .entity_clear input.submit,
1796 .entity_flag input.submit,
1798 .entity_subscribe input.submit,
1802 background-image:url(../images/icons/icons-01.gif);
1803 background-repeat:no-repeat;
1804 background-color:transparent;
1808 background-position:0 -1120px;
1811 background-position:0 -1912px;
1813 #export_data li a.rss {
1814 background-position:0 -130px;
1816 #export_data li a.atom {
1817 background-position:0 -64px;
1819 #export_data li a.foaf {
1820 background-position:0 1px;
1822 .form_group_leave input.submit,
1823 .form_user_unsubscribe input.submit {
1824 background-position:5px -1246px;
1826 .form_group_join input.submit,
1827 .form_user_subscribe input.submit,
1828 .form_remote_authorize input.submit,
1829 .entity_subscribe a {
1830 background-position:5px -1181px;
1833 background-position: 5px -719px;
1835 .entity_send-a-message a {
1836 background-position: 5px -852px;
1839 .form_user_nudge input.submit {
1840 background-position: 5px -785px;
1842 .form_user_block input.submit,
1843 .form_user_unblock input.submit,
1844 .form_group_block input.submit,
1845 .form_group_unblock input.submit {
1846 background-position: 5px -918px;
1848 .form_make_admin input.submit {
1849 background-position: 5px -983px;
1851 .entity_moderation p {
1852 background-position: 5px -1313px;
1854 .entity_sandbox input.submit {
1855 background-position: 5px -1380px;
1857 .entity_silence input.submit {
1858 background-position: 5px -1445px;
1860 .entity_delete input.submit {
1861 background-position: 5px -1511px;
1863 .entity_sandbox .form_user_unsandbox input.submit {
1864 background-position: 5px -2568px;
1866 .entity_silence .form_user_unsilence input.submit {
1867 background-position: 5px -2633px;
1870 background-position: 5px -2436px;
1872 .entity_role_administrator .form_user_grantrole input.submit {
1873 background-position: 5px -983px;
1875 .entity_role_moderator .form_user_grantrole input.submit {
1876 background-position: 5px -1313px;
1878 .entity_role_administrator .form_user_revokerole input.submit {
1879 background-position: 5px -2699px;
1881 .entity_role_moderator .form_user_revokerole input.submit {
1882 background-position: 5px -2501px;
1884 .form_reset_key input.submit {
1885 background-position: 5px -1973px;
1887 .entity_clear input.submit {
1888 background-position: 5px -2039px;
1890 .entity_flag input.submit,
1892 background-position: 5px -2105px;
1894 .entity_subscribe input.accept {
1895 background-position: 5px -2171px;
1897 .entity_subscribe input.reject {
1898 background-position: 5px -2237px;
1901 background-position: 0 -2308px;
1904 background-position: 0 -2374px;
1907 background-position: 0 -1714px;
1909 .notice .attachment {
1910 background-position:0 -394px;
1912 .notice .attachment.more {
1913 background-position:0 -2770px;
1915 #attachments .attachment {
1918 .notice-options .notice_reply {
1919 background-position:0 -592px;
1921 .notice-options form.form_favor input.submit {
1922 background-position:0 -460px;
1924 .notice-options form.form_disfavor input.submit {
1925 background-position:0 -526px;
1927 .notice-options .notice_delete {
1928 background-position:0 -658px;
1930 .notice-options .form_repeat.processing {
1931 background-image:none;
1933 .notice-options form.form_repeat input.submit {
1934 background-position:0 -1582px;
1936 .notice-options .repeated {
1937 background-position:0 -1648px;
1940 background-position:0 -1054px;
1942 .form_notice label.notice_data-attach {
1943 background-position: 0 -328px;
1945 .form_notice label.notice_data-geo {
1946 background-position: 0 -1780px;
1948 .form_notice label.notice_data-geo.checked {
1949 background-position: 0 -1846px;
1952 #pagination .nav_prev a {
1955 background-position:0 -187px;
1957 #pagination .nav_next a {
1959 padding-right: 25px;
1960 background-position: 115% -252px;
1963 #usergroups #new_group {
1967 #new_group, #group_search {
1975 list-style-type: none;
1978 #input_form_nav li {
1982 .input_form_nav_tab.current {
1983 text-decoration: underline;
1990 .input_form.current {
1994 /*end of @media screen, projection, tv*/
1998 a:after { background-color:#FFFFFF; }
1999 a:not([href^="#"]):after { content:" <"attr(href)"> "; }
2000 img { border:none; }
2001 p { orphans: 2; widows: 1; }
2003 #site_nav_global_primary,
2004 #site_nav_local_views,
2007 #site_nav_global_secondary,
2011 .form_subscription_edit .submit {
2014 .timestamp dt, .timestamp dd,
2015 .device dt, .device dd {
2023 }/*end of @media print*/