diff options
author | Jimi Huotari <chiitoo@gentoo.org> | 2020-02-06 10:15:51 +0200 |
---|---|---|
committer | Jimi Huotari <chiitoo@gentoo.org> | 2020-02-06 10:27:17 +0200 |
commit | 48a2b5b46c90d7ed528571154778d6fafe05aada (patch) | |
tree | 2e73a9e619c17a0779c8540a101dd0b6c4a4556c | |
parent | Add a stylish skeleton. (diff) | |
download | forums-48a2b5b46c90d7ed528571154778d6fafe05aada.tar.gz forums-48a2b5b46c90d7ed528571154778d6fafe05aada.tar.bz2 forums-48a2b5b46c90d7ed528571154778d6fafe05aada.zip |
Let there be Gentoo Light.
Use (at least mostly) the colours of the Gentoo forums phpBB 2
edition, move poster profiles from right to left, and enable wide
layout (among other, smaller tweaks).
Signed-off-by: Jimi Huotari <chiitoo@gentoo.org>
-rw-r--r-- | template/index_body.html | 13 | ||||
-rw-r--r-- | template/overall_footer.html | 15 | ||||
-rw-r--r-- | template/overall_header.html | 19 | ||||
-rw-r--r-- | template/ucp_pm_viewmessage.html | 16 | ||||
-rw-r--r-- | template/viewtopic_body.html | 28 | ||||
-rw-r--r-- | theme/base.css | 4 | ||||
-rw-r--r-- | theme/colours.css | 380 | ||||
-rw-r--r-- | theme/common.css | 65 | ||||
-rw-r--r-- | theme/content.css | 75 | ||||
-rw-r--r-- | theme/en/icon_user_online.png | bin | 0 -> 4707 bytes | |||
-rw-r--r-- | theme/en/stylesheet.css | 2 | ||||
-rw-r--r-- | theme/images/cellpic3.gif | bin | 0 -> 243 bytes | |||
-rw-r--r-- | theme/images/site_logo.png | bin | 0 -> 70815 bytes | |||
-rw-r--r-- | theme/responsive-pm.css | 648 | ||||
-rw-r--r-- | theme/responsive.css | 75 |
15 files changed, 1110 insertions, 230 deletions
diff --git a/template/index_body.html b/template/index_body.html index 239a91c58..7b5fab3f4 100644 --- a/template/index_body.html +++ b/template/index_body.html @@ -15,6 +15,14 @@ <!-- EVENT index_body_forumlist_body_after --> +<div class="stats-area"> + <div class="stats-header"> + <h3>{L_STATISTICS}</h3> + </div> + + <div class="stats-data"> + + <!-- IF not S_USER_LOGGED_IN and not S_IS_BOT --> <form method="post" action="{S_LOGIN_ACTION}" class="headerspace"> <h3><a href="{U_LOGIN_LOGOUT}">{L_LOGIN_LOGOUT}</a><!-- IF S_REGISTER_ENABLED --> • <a href="{U_REGISTER}">{L_REGISTER}</a><!-- ENDIF --></h3> @@ -41,7 +49,7 @@ <!-- IF U_VIEWONLINE --><h3><a href="{U_VIEWONLINE}">{L_WHO_IS_ONLINE}</a></h3><!-- ELSE --><h3>{L_WHO_IS_ONLINE}</h3><!-- ENDIF --> <p> <!-- EVENT index_body_block_online_prepend --> - {TOTAL_USERS_ONLINE} ({L_ONLINE_EXPLAIN})<br />{RECORD_USERS}<br /> + {TOTAL_USERS_ONLINE} ({L_ONLINE_EXPLAIN})<br />{RECORD_USERS}<br /> <!-- IF U_VIEWONLINE --> <br />{LOGGED_IN_USER_LIST} <!-- IF LEGEND --><br /><em>{L_LEGEND}{L_COLON} {LEGEND}</em><!-- ENDIF --> @@ -76,5 +84,6 @@ <!-- ENDIF --> <!-- EVENT index_body_stat_blocks_after --> - + </div> +</div> <!-- INCLUDE overall_footer.html --> diff --git a/template/overall_footer.html b/template/overall_footer.html index bdff1a0c0..222f65e6e 100644 --- a/template/overall_footer.html +++ b/template/overall_footer.html @@ -9,6 +9,13 @@ <div class="copyright"> <!-- EVENT overall_footer_copyright_prepend --> <p class="footer-row"> + <span class="footer-copyright">© 2001–2020 Gentoo Foundation, Inc.</span> + </p> + <p class="footer-row">Hosting by + <a class="footer-link" href="https://www.gossamer-threads.com/" title="Hosting" role="menuitem"> + <span class="footer-link-text">Gossamer Threads Inc.</span> + </a> + | <span class="footer-copyright">{{ CREDIT_LINE }}</span> </p> <!-- IF TRANSLATION_INFO --> @@ -18,12 +25,8 @@ <!-- ENDIF --> <!-- EVENT overall_footer_copyright_append --> <p class="footer-row"> - <a class="footer-link" href="{{ U_PRIVACY }}" title="{{ lang('PRIVACY_LINK') }}" role="menuitem"> - <span class="footer-link-text">{{ lang('PRIVACY_LINK') }}</span> - </a> - | - <a class="footer-link" href="{{ U_TERMS_USE }}" title="{{ lang('TERMS_LINK') }}" role="menuitem"> - <span class="footer-link-text">{{ lang('TERMS_LINK') }}</span> + <a class="footer-link" href="https://wiki.gentoo.org/wiki/Foundation:Privacy_Policy" title="Privacy Policy" role="menuitem"> + <span class="footer-link-text">Privacy Policy</span> </a> </p> <!-- IF DEBUG_OUTPUT --> diff --git a/template/overall_header.html b/template/overall_header.html index 09824d0a1..412e95298 100644 --- a/template/overall_header.html +++ b/template/overall_header.html @@ -23,10 +23,11 @@ <!-- ENDIF --> <!-- - phpBB style name: prosilver + phpBB style name: Gentoo Light Based on style: prosilver (this is the default phpBB3 style) + Based on style: Gentoo phpBB 2 (Derived from subSilver by Kyle Manna) Original author: Tom Beddard ( http://www.subBlue.com/ ) - Modified by: + Modified by: Gentoo ( https://www.gentoo.org/ ) --> <!-- IF S_ALLOW_CDN --> @@ -76,7 +77,7 @@ <!-- EVENT overall_header_body_before --> -<div id="wrap" class="wrap"> +<div id="header-wide"> <a id="top" class="top-anchor" accesskey="t"></a> <div id="page-header"> <div class="headerbar" role="banner"> @@ -85,8 +86,8 @@ <div id="site-description" class="site-description"> <a id="logo" class="logo" href="<!-- IF U_SITE_HOME -->{U_SITE_HOME}<!-- ELSE -->{U_INDEX}<!-- ENDIF -->" title="<!-- IF U_SITE_HOME -->{L_SITE_HOME}<!-- ELSE -->{L_INDEX}<!-- ENDIF -->"><span class="site_logo"></span></a> - <h1>{SITENAME}</h1> - <p>{SITE_DESCRIPTION}</p> + <!--<h1>{SITENAME}</h1> + <p>{SITE_DESCRIPTION}</p>--> <p class="skiplink"><a href="#start_here">{L_SKIP}</a></p> </div> @@ -112,9 +113,12 @@ </div> <!-- EVENT overall_header_headerbar_after --> </div> + </div> +</div> <!-- EVENT overall_header_navbar_before --> <!-- INCLUDE navbar_header.html --> - </div> + +<div id="wrap" class="wrap"> <!-- EVENT overall_header_page_body_before --> @@ -126,6 +130,9 @@ <strong>{L_INFORMATION}{L_COLON}</strong> {L_BOARD_DISABLED} </div> </div> + </div> <!-- ENDIF --> <!-- EVENT overall_header_content_before --> + +</div> <!-- End Wrap --> diff --git a/template/ucp_pm_viewmessage.html b/template/ucp_pm_viewmessage.html index 7cb44a018..dab6a9bab 100644 --- a/template/ucp_pm_viewmessage.html +++ b/template/ucp_pm_viewmessage.html @@ -5,6 +5,7 @@ </div> </div> +<link rel="stylesheet" href="{T_THEME_PATH}/responsive-pm.css"> <!-- IF S_DISPLAY_HISTORY and (U_VIEW_PREVIOUS_HISTORY or U_VIEW_NEXT_HISTORY) --> <fieldset class="display-options clearfix"> @@ -22,16 +23,11 @@ <!-- ENDIF --> -<div id="post-{MESSAGE_ID}" class="post pm has-profile<!-- IF S_POST_UNAPPROVED or S_POST_REPORTED --> reported<!-- ENDIF --><!-- IF S_ONLINE --> online<!-- ENDIF -->"> +<div id="post-{MESSAGE_ID}" class="post pm has-profile"> <div class="inner"> - <dl class="postprofile" id="profile{MESSAGE_ID}"> + <dl class="postprofile<!-- IF S_POST_UNAPPROVED or S_POST_REPORTED --> reported<!-- ENDIF --><!-- IF S_ONLINE --> online<!-- ENDIF -->" id="profile{MESSAGE_ID}"> <dt class="<!-- IF RANK_TITLE or RANK_IMG -->has-profile-rank<!-- ELSE -->no-profile-rank<!-- ENDIF --> <!-- IF AUTHOR_AVATAR -->has-avatar<!-- ELSE -->no-avatar<!-- ENDIF -->"> - <div class="avatar-container"> - <!-- EVENT ucp_pm_viewmessage_avatar_before --> - <!-- IF AUTHOR_AVATAR --><a href="{U_MESSAGE_AUTHOR}" class="avatar">{AUTHOR_AVATAR}</a><!-- ENDIF --> - <!-- EVENT ucp_pm_viewmessage_avatar_after --> - </div> {MESSAGE_AUTHOR_FULL} </dt> @@ -39,6 +35,12 @@ <!-- IF RANK_TITLE or RANK_IMG --><dd class="profile-rank">{RANK_TITLE}<!-- IF RANK_TITLE and RANK_IMG --><br /><!-- ENDIF -->{RANK_IMG}</dd><!-- ENDIF --> <!-- EVENT ucp_pm_viewmessage_rank_after --> + <div class="avatar-container"> + <!-- EVENT ucp_pm_viewmessage_avatar_before --> + <!-- IF AUTHOR_AVATAR --><a href="{U_MESSAGE_AUTHOR}" class="avatar">{AUTHOR_AVATAR}</a><!-- ENDIF --> + <!-- EVENT ucp_pm_viewmessage_avatar_after --> + </div> + <dd class="profile-posts"><strong>{L_POSTS}{L_COLON}</strong> <!-- IF U_AUTHOR_POSTS != '' --><a href="{U_AUTHOR_POSTS}">{AUTHOR_POSTS}</a><!-- ELSE -->{AUTHOR_POSTS}<!-- ENDIF --></dd> <!-- IF AUTHOR_JOINED --><dd class="profile-joined"><strong>{L_JOINED}{L_COLON}</strong> {AUTHOR_JOINED}</dd><!-- ENDIF --> diff --git a/template/viewtopic_body.html b/template/viewtopic_body.html index 8d7e26f09..2d96997d2 100644 --- a/template/viewtopic_body.html +++ b/template/viewtopic_body.html @@ -131,23 +131,25 @@ <!-- EVENT viewtopic_body_poll_after --> +<div id="topic-header"> + <div class="inner"> + <div class="post has-profile"> + <div class="postprofile topic-header-author">{L_AUTHOR}</div> + <div class="postbody topic-header-title inner">{L_MESSAGE}</div> + </div> + </div> + </div> + <!-- BEGIN postrow --> <!-- EVENT viewtopic_body_postrow_post_before --> <!-- IF postrow.S_FIRST_UNREAD --> <a id="unread" class="anchor"<!-- IF S_UNREAD_VIEW --> data-url="{postrow.U_MINI_POST}"<!-- ENDIF -->></a> <!-- ENDIF --> - <div id="p{postrow.POST_ID}" class="post has-profile <!-- IF postrow.S_ROW_COUNT is odd -->bg1<!-- ELSE -->bg2<!-- ENDIF --><!-- IF postrow.S_UNREAD_POST --> unreadpost<!-- ENDIF --><!-- IF postrow.S_POST_REPORTED --> reported<!-- ENDIF --><!-- IF postrow.S_POST_DELETED --> deleted<!-- ENDIF --><!-- IF postrow.S_ONLINE and not postrow.S_POST_HIDDEN --> online<!-- ENDIF --><!-- IF postrow.POSTER_WARNINGS --> warned<!-- ENDIF -->"> + <div id="p{postrow.POST_ID}" class="post has-profile <!-- IF postrow.S_ROW_COUNT is odd -->bg1<!-- ELSE -->bg2<!-- ENDIF --><!-- IF postrow.S_UNREAD_POST --> unreadpost<!-- ENDIF --><!-- IF postrow.S_POST_REPORTED --> reported<!-- ENDIF --><!-- IF postrow.S_POST_DELETED --> deleted<!-- ENDIF --><!-- IF postrow.POSTER_WARNINGS --> warned<!-- ENDIF -->"> <div class="inner"> - <dl class="postprofile" id="profile{postrow.POST_ID}"<!-- IF postrow.S_POST_HIDDEN --> style="display: none;"<!-- ENDIF -->> + <dl class="postprofile<!-- IF postrow.S_ONLINE and not postrow.S_IGNORE_POST --> online<!-- ENDIF -->" id="profile{postrow.POST_ID}"<!-- IF postrow.S_POST_HIDDEN --> style="display: none;"<!-- ENDIF -->> <dt class="<!-- IF postrow.RANK_TITLE or postrow.RANK_IMG -->has-profile-rank<!-- ELSE -->no-profile-rank<!-- ENDIF --> <!-- IF postrow.POSTER_AVATAR -->has-avatar<!-- ELSE -->no-avatar<!-- ENDIF -->"> - <div class="avatar-container"> - <!-- EVENT viewtopic_body_avatar_before --> - <!-- IF postrow.POSTER_AVATAR --> - <!-- IF postrow.U_POST_AUTHOR --><a href="{postrow.U_POST_AUTHOR}" class="avatar">{postrow.POSTER_AVATAR}</a><!-- ELSE --><span class="avatar">{postrow.POSTER_AVATAR}</span><!-- ENDIF --> - <!-- ENDIF --> - <!-- EVENT viewtopic_body_avatar_after --> - </div> <!-- EVENT viewtopic_body_post_author_before --> <!-- IF not postrow.U_POST_AUTHOR --><strong>{postrow.POST_AUTHOR_FULL}</strong><!-- ELSE -->{postrow.POST_AUTHOR_FULL}<!-- ENDIF --> <!-- EVENT viewtopic_body_post_author_after --> @@ -157,6 +159,14 @@ <!-- IF postrow.RANK_TITLE or postrow.RANK_IMG --><dd class="profile-rank">{postrow.RANK_TITLE}<!-- IF postrow.RANK_TITLE and postrow.RANK_IMG --><br /><!-- ENDIF -->{postrow.RANK_IMG}</dd><!-- ENDIF --> <!-- EVENT viewtopic_body_postrow_rank_after --> + <div class="avatar-container"> + <!-- EVENT viewtopic_body_avatar_before --> + <!-- IF postrow.POSTER_AVATAR --> + <!-- IF postrow.U_POST_AUTHOR --><a href="{postrow.U_POST_AUTHOR}" class="avatar">{postrow.POSTER_AVATAR}</a><!-- ELSE --><span class="avatar">{postrow.POSTER_AVATAR}</span><!-- ENDIF --> + <!-- ENDIF --> + <!-- EVENT viewtopic_body_avatar_after --> + </div> + <!-- IF postrow.POSTER_POSTS != '' --><dd class="profile-posts"><strong>{L_POSTS}{L_COLON}</strong> <!-- IF postrow.U_SEARCH !== '' --><a href="{postrow.U_SEARCH}"><!-- ENDIF -->{postrow.POSTER_POSTS}<!-- IF postrow.U_SEARCH !== '' --></a><!-- ENDIF --></dd><!-- ENDIF --> <!-- IF postrow.POSTER_JOINED --><dd class="profile-joined"><strong>{L_JOINED}{L_COLON}</strong> {postrow.POSTER_JOINED}</dd><!-- ENDIF --> <!-- IF postrow.POSTER_WARNINGS --><dd class="profile-warnings"><strong>{L_WARNINGS}{L_COLON}</strong> {postrow.POSTER_WARNINGS}</dd><!-- ENDIF --> diff --git a/theme/base.css b/theme/base.css index 98c57d926..20cf61983 100644 --- a/theme/base.css +++ b/theme/base.css @@ -47,14 +47,14 @@ hr { } a { - color: #428bca; + color: #a0a0d0; text-decoration: none; } a:hover, a:focus, a:active { - color: #2a6496; + color: #a0a0d0; text-decoration: underline; } diff --git a/theme/colours.css b/theme/colours.css index ffaa71034..0279fd093 100644 --- a/theme/colours.css +++ b/theme/colours.css @@ -4,12 +4,12 @@ Colours and backgrounds for common.css -------------------------------------------------------------- */ html, body { - color: #536482; - background-color: #F5F7FA; + color: #000000; + background-color: #ffffff; } h1 { - color: #FFFFFF; + color: #46357c; } h2 { @@ -18,7 +18,7 @@ h2 { h3 { border-bottom-color: #CCCCCC; - color: #115098; + color: #333333; } hr { @@ -26,21 +26,50 @@ hr { border-top-color: #CCCCCC; } +.rightside { + color: #efefef; +} + +.responsive-center { + color: #333333; +} + /* -------------------------------------------------------------- Colours and backgrounds for links.css -------------------------------------------------------------- */ -a { color: #105289; } -a:hover { color: #D31141; } +a { + color: #663399; +} + +a:hover { + color: #ff6633; +} + +.linklist a { + color: #a0a0d0; +} + +.linklist a:hover { + color: #00ff00; +} + +.mark-read { + color: #46357c; +} + +.mark-read:hover { + color: #ff6633; +} /* Links on gradient backgrounds */ .forumbg .header a, .forabg .header a, th a { - color: #FFFFFF; + color: #efefef; } .forumbg .header a:hover, .forabg .header a:hover, th a:hover { - color: #A8D8FF; + color: #004768; } /* Notification mark read link */ @@ -50,18 +79,18 @@ a:hover { color: #D31141; } /* Post body links */ .postlink { - border-bottom-color: #368AD2; - color: #368AD2; + border-bottom-color: #105289; + color: #105289; } .postlink:visited { - border-bottom-color: #5D8FBD; - color: #5D8FBD; + border-bottom-color: #005075; + color: #005075; } .postlink:hover { - background-color: #D0E4F6; - color: #0D4473; + background-color: #ced7Db; + color: #004768; } .signature a, .signature a:hover { @@ -75,41 +104,35 @@ a:hover { color: #D31141; } /* Arrow links */ .arrow-left:hover, .arrow-right:hover { - color: #368AD2; + color: #ff6633; } -/* Round cornered boxes and backgrounds +/* Boxes and Backgrounds ---------------------------------------- */ -.wrap { - background-color: #FFF; - border-color: #E6E9ED; + +#header-wide { + background-color: #46357c; } .headerbar { - color: #FFFFFF; + color: #46357c; } -.headerbar, .forumbg { - background-color: #12A3EB; - background-image: -webkit-linear-gradient(top, #6ACEFF 0%, #0076B1 2px, #12A3EB 92px, #12A3EB 100%); - background-image: linear-gradient(to bottom, #6ACEFF 0%,#0076B1 2px,#12A3EB 92px,#12A3EB 100%); - background-repeat: repeat-x; +.forumbg, .forabg { + background-color: #46357c; + background-image: url("./images/cellpic3.gif"); } -.forabg { - background-color: #0076B1; - background-image: -webkit-linear-gradient(top, #6ACEFF 0%, #12A3EB 2px, #0076B1 92px, #0076B1 100%); - background-image: linear-gradient(to bottom, #6ACEFF 0%,#12A3EB 2px,#0076B1 92px,#0076B1 100%); - background-repeat: repeat-x; +.navbar { + background-color: #000000; } -.navbar { - background-color: #CADCEB; +.forabg, .forumbg, .panel, .post, .responsive { + border: 1px solid #333333; } .panel { - background-color: #ECF1F3; - color: #28313F; + background-color: #ececec; } .post:target .content { @@ -117,31 +140,31 @@ a:hover { color: #D31141; } } .post:target h3 a { - color: #000000; + color: #5c2e8a; } .bg1 { - background-color: #ECF3F7; + background-color: #ececec; } table.zebra-list tr:nth-child(odd) td, ul.zebra-list li:nth-child(odd) { - background-color: #ECF3F7; + background-color: #ececec; } .bg2 { - background-color: #E1EBF2; + background-color: #e5e8ea; } table.zebra-list tr:nth-child(even) td, ul.zebra-list li:nth-child(even) { - background-color: #E1EBF2; + background-color: #e5e8ea; } -.bg3 { - background-color: #CADCEB; +.bg3 { + background-color: #ececec; } .ucprowbg { - background-color: #DCDEE2; + background-color: #e5e8ea; } .fieldsbg { @@ -149,20 +172,32 @@ table.zebra-list tr:nth-child(even) td, ul.zebra-list li:nth-child(even) { } .site_logo { - background-image: url("./images/site_logo.gif"); + background-image: url("./images/site_logo.png"); } -/* Horizontal lists +/* Statistics ----------------------------------------*/ -ul.navlinks { - border-top-color: #FFFFFF; +.stats-area { + background-color: #efefef; + border: 1px solid #333333; +} + +.stats-header h3 { + background-image: url("./images/cellpic3.gif"); + border-bottom-color: #a9b8c2; + color: #efefef; +} + +.stats-data h3 { + border-bottom-color: #a9b8c2; } /* Table styles ----------------------------------------*/ + table.table1 thead th { - color: #FFFFFF; + color: #333333; } table.table1 tbody tr { @@ -170,7 +205,7 @@ table.table1 tbody tr { } table.table1 tbody tr:hover, table.table1 tbody tr.hover { - background-color: #CFE1F6; + background-color: #dee3e5; color: #000; } @@ -179,13 +214,21 @@ table.table1 td { } table.table1 tbody td { - border-top-color: #FAFAFA; + border-top-color: #a9b8c2; +} + +table.table1 tbody td.posts { + border-left: 1px solid #a9b8c2; + border-right: 1px solid #a9b8c2; +} + +table.table1 tbody td.info { + border-right: 1px solid #a9b8c2; } table.table1 tbody th { - border-bottom-color: #000000; + border-bottom-color: #a9b8c2; color: #333333; - background-color: #FFFFFF; } table.info tbody th { @@ -194,12 +237,18 @@ table.info tbody th { /* Misc layout styles ---------------------------------------- */ + dl.details dt { color: #000000; } dl.details dd { - color: #536482; + color: #000000; + font-weight: bold; +} + +dl.details dd a { + font-weight: normal; } .sep { @@ -208,6 +257,7 @@ dl.details dd { /* Icon styles ---------------------------------------- */ + .icon.icon-blue, a:hover .icon.icon-blue { color: #196db5; } @@ -250,23 +300,23 @@ dl.details dd { } .jumpbox-cat-link { - background-color: #0076b1; + background-color: #d2d5d7; border-top-color: #0076B1; - color: #FFFFFF; + color: #373737; } .jumpbox-cat-link:hover { - background-color: #12A3EB; + background-color: #c7cacc; border-top-color: #12A3EB; - color: #FFFFFF; + color: #000000; } .jumpbox-forum-link { - background-color: #E1EBF2; + background-color: #ececec; } .jumpbox-forum-link:hover { - background-color: #F6F4D0; + background-color: #dee3e5; } .jumpbox .dropdown .pointer-inner { @@ -274,18 +324,23 @@ dl.details dd { } .jumpbox-sub-link { - background-color: #E1EBF2; + background-color: #ececec; } .jumpbox-sub-link:hover { - background-color: #F1F8FF; + background-color: #dee3e5; } /* Miscellaneous styles ---------------------------------------- */ .copyright { - color: #555555; + color: #efefef; + background-color: #000000; +} + +.copyright a { + color: #a0a0d0; } .error { @@ -319,28 +374,24 @@ Colours and backgrounds for content.css -------------------------------------------------------------- */ ul.forums { - background-color: #EEF5F9; /* Old browsers */ /* FF3.6+ */ - background-image: -webkit-linear-gradient(top, #D2E0EB 0%, #EEF5F9 100%); - background-image: linear-gradient(to bottom, #D2E0EB 0%,#EEF5F9 100%); /* W3C */ - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#D2E0EB', endColorstr='#EEF5F9',GradientType=0 ); /* IE6-9 */ + background-color: #ececec; } ul.topiclist li { - color: #4C5D77; + color: #000000; } ul.topiclist dd { - border-left-color: #FFFFFF; + border-left-color: #a9b8c2; } .rtl ul.topiclist dd { - border-right-color: #FFFFFF; + border-right-color: #a9b8c2; border-left-color: transparent; } li.row { - border-top-color: #FFFFFF; - border-bottom-color: #00608F; + border-top-color: #a9b8c2; } li.row strong { @@ -348,37 +399,48 @@ li.row strong { } li.row:hover { - background-color: #F6F4D0; + background-color: #dee3e5; } li.row:hover dd { - border-left-color: #CCCCCC; + border-left-color: #a9b8c2; } .rtl li.row:hover dd { - border-right-color: #CCCCCC; + border-right-color: #a9b8c2; border-left-color: transparent; } li.header dt, li.header dd { - color: #FFFFFF; + color: #efefef; } /* Post body styles ----------------------------------------*/ -.postbody { - color: #333333; + +#topic-header { + background-color: #46357c; + background-image: url("./images/cellpic3.gif"); +} + +.postprofile.topic-header-author { + color: #efefef; +} + +.postbody.topic-header-title { + color: #efefef; } /* Content container styles ----------------------------------------*/ + .content { color: #333333; } .content h2, .panel h2 { - color: #115098; - border-bottom-color: #CCCCCC; + color: #333333; + border-bottom-color: #a9b8c2; } dl.faq dt { @@ -396,30 +458,37 @@ dl.faq dt { /* Post signature */ .signature { - border-top-color: #CCCCCC; + border-top-color: #a9b8c2; + color: #333333; + opacity: 0.7; +} + +.signature:hover { + opacity: 1.0; } /* Post noticies */ .notice { - border-top-color: #CCCCCC; + border-top-color: #a9b8c2; } /* BB Code styles ----------------------------------------*/ + /* Quote block */ blockquote { - background-color: #EBEADD; - border-color:#DBDBCE; + background-color: #dcdcdc; + border-color: #d1d7dc; } blockquote blockquote { /* Nested quotes */ - background-color:#EFEED9; + background-color: #ededed; } blockquote blockquote blockquote { /* Nested quotes */ - background-color: #EBEADD; + background-color: #fefefe; } /* Code block */ @@ -438,9 +507,10 @@ blockquote blockquote blockquote { /* Attachments ----------------------------------------*/ + .attachbox { background-color: #FFFFFF; - border-color: #C9D2D8; + border-color: #C9D2D8; } .pm-message .attachbox { @@ -464,7 +534,6 @@ blockquote blockquote blockquote { } /* Inline image thumbnails */ - dl.file dd { color: #666666; } @@ -558,13 +627,20 @@ fieldset.polls dd div { /* Poster profile block ----------------------------------------*/ -.postprofile { - color: #666666; - border-color: #FFFFFF; + +.leftsided .postprofile { + border-right: 1px solid #d5dbe0 !important; } -.pm .postprofile { - border-color: #DDDDDD; +.postprofile .avatar img { + background-color: white; + border: 1px solid #d3d9de; + box-shadow: 0 0 7px grey; +} + +.postprofile { + color: #666666; + border-color: #999999; } .postprofile strong { @@ -572,7 +648,7 @@ fieldset.polls dd div { } .online { - background-image: url("./en/icon_user_online.gif"); + background-image: url("./en/icon_user_online.png"); } dd.profile-warnings { @@ -583,38 +659,39 @@ dd.profile-warnings { -------------------------------------------------------------- Colours and backgrounds for buttons.css -------------------------------------------------------------- */ + .button { border-color: #C7C3BF; background-color: #E9E9E9; /* Old browsers */ /* FF3.6+ */ background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #E9E9E9 100%); - background-image: linear-gradient(to bottom, #FFFFFF 0%,#E9E9E9 100%); /* W3C */ + background-image: linear-gradient(to bottom, #FFFFFF 0%, #E9E9E9 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#E9E9E9',GradientType=0 ); /* IE6-9 */ box-shadow: 0 0 0 1px #FFFFFF inset; -webkit-box-shadow: 0 0 0 1px #FFFFFF inset; - color: #D31141; + color: #663399; } .button:hover, .button:focus { - border-color: #0A8ED0; + border-color: #663399; background-color: #FFFFFF; /* Old browsers */ /* FF3.6+ */ background-image: -webkit-linear-gradient(top, #E9E9E9 0%, #FFFFFF 100%); - background-image: linear-gradient(to bottom, #E9E9E9 0%,#FFFFFF 100%); /* W3C */ + background-image: linear-gradient(to bottom, #E9E9E9 0%, #FFFFFF 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#E9E9E9', endColorstr='#FFFFFF',GradientType=0 ); /* IE6-9 */ text-shadow: 1px 1px 0 #FFFFFF, -1px -1px 0 #FFFFFF, -1px -1px 0 rgba(188, 42, 77, 0.2); + color: #ff6633; } - .button .icon, .button-secondary { - color: #8f8f8f; + color: #663399; } .button-secondary:focus, .button-secondary:hover, .button:focus .icon, .button:hover .icon { - color: #0A8ED0; + color: #ff6633; } .button-search:hover, @@ -669,7 +746,7 @@ Colours and backgrounds for buttons.css } .search-header { - box-shadow: 0 0 10px #0075B0; + box-shadow: 0 0 50px #999999; } /* Icon images @@ -744,7 +821,6 @@ Colours and backgrounds for buttons.css .topic_unread_locked { background-image: url("./images/topic_unread_locked.gif"); } .topic_unread_locked_mine { background-image: url("./images/topic_unread_locked_mine.gif"); } - /* -------------------------------------------------------------- Colours and backgrounds for cp.css @@ -763,7 +839,7 @@ Colours and backgrounds for cp.css } ul.cplist { - border-top-color: #B5C1CB; + border-top-color: #a9b8c2; } .panel-container .panel li.header dd, .panel-container .panel li.header dt { @@ -776,39 +852,43 @@ ul.cplist { } .cp-main .pm-message { - border-color: #DBDEE2; - background-color: #FFFFFF; + border-color: #333444; + background-color: #e0e0e0; } /* CP tabbed menu ----------------------------------------*/ + .tabs .tab > a { - background: #BACCD9; - color: #536482; + background: #ececec; + border: 1px solid #a9b8c2; + color: #663399; } .tabs .tab > a:hover { - background: #DDEDFB; - color: #D31141; + background: #dee3e5; + color: #ff6633; } .tabs .activetab > a, .tabs .activetab > a:hover { - background-color: #CADCEB; /* Old browsers */ /* FF3.6+ */ - background-image: -webkit-linear-gradient(top, #E2F2FF 0%, #CADCEB 100%); - background-image: linear-gradient(to bottom, #E2F2FF 0%,#CADCEB 100%); /* W3C */ - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#E2F2FF', endColorstr='#CADCEB',GradientType=0 ); /* IE6-9 */ - border-color: #CADCEB; + background-color: #ced7db; /* Old browsers */ /* FF3.6+ */ + background-image: -webkit-linear-gradient(top, #ececec 0%, #ced7db 100%); + background-image: linear-gradient(to bottom, #ececec 0%, #ced7db 100%); /* W3C */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ececec', endColorstr='#ced7db',GradientType=0 ); /* IE6-9 */ + border-color: #663399; + border-bottom: none; box-shadow: 0 1px 1px #F2F9FF inset; - color: #333333; + color: #663399; } .tabs .activetab > a:hover { - color: #000000; + color: #a0a0d0; } /* Mini tabbed menu used in MCP ----------------------------------------*/ + .minitabs .tab > a { background-color: #E1EBF2; } @@ -821,6 +901,7 @@ ul.cplist { /* Responsive tabs ----------------------------------------*/ + .responsive-tab .responsive-tab-link:before { border-color: #536482; } @@ -834,45 +915,46 @@ ul.cplist { /* Link styles for the sub-section links */ .navigation a { - color: #333; - background: #CADCEB; /* Old browsers */ /* FF3.6+ */ - background: -webkit-linear-gradient(left, #B4C4D1 50%, #CADCEB 100%); - background: linear-gradient(to right, #B4C4D1 50%,#CADCEB 100%); /* W3C */ - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#B4C4D1', endColorstr='#CADCEB',GradientType=1 ); /* IE6-9 */ + color: #663399; + background: #cbd5db; /* Old browsers */ /* FF3.6+ */ + background: -webkit-linear-gradient(left, #cbd5db 50%, #ececec 100%); + background: linear-gradient(to right, #cbd5db 50%, #ececec 100%); /* W3C */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cbd5db', endColorstr='#ececec',GradientType=1 ); /* IE6-9 */ } .rtl .navigation a { - background: #B4C4D1; /* Old browsers */ /* FF3.6+ */ - background: -webkit-linear-gradient(left, #CADCEB 50%, #B4C4D1 100%); - background: linear-gradient(to right, #CADCEB 50%,#B4C4D1 100%); /* W3C */ - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#CADCEB', endColorstr='#B4C4D1',GradientType=1 ); /* IE6-9 */ + background: #663399; /* Old browsers */ /* FF3.6+ */ + background: -webkit-linear-gradient(left, #cbd5db 50%, #ececec 100%); + background: linear-gradient(to right, #cbd5db 50%, #ececec 100%); /* W3C */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cbd5db', endColorstr='#ececec',GradientType=1 ); /* IE6-9 */ } .navigation a:hover { - background: #AABAC6; - color: #BC2A4D; + background: #c7d2d8; + color: #ff6633; filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); } .navigation .active-subsection a { - background: #F9F9F9; - color: #D31141; + background: #ffffff; + color: #663399; filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); } .navigation .active-subsection a:hover { - color: #D31141; + color: #a0a0d0; } @media only screen and (max-width: 900px), only screen and (max-device-width: 900px) { #navigation a, .rtl #navigation a { - background: #B2C2CF; + background: #cbd5db; } } /* Preferences pane layout ----------------------------------------*/ + .panel-container h2 { color: #333333; } @@ -882,20 +964,23 @@ ul.cplist { } .cp-main .pm { - background-color: #FFFFFF; + background-color: #e0e0e0; } /* Friends list */ .cp-mini { - background-color: #EEF5F9; + background-color: #ffffff; + border: 1px solid #a9b8c2; } dl.mini dt { + border-bottom: 1px solid #a9b8c2; color: #425067; } /* PM Styles ----------------------------------------*/ + /* PM Message history */ .current { color: #000000 !important; @@ -947,7 +1032,11 @@ select { } label { - color: #425067; + color: #333333; +} + +.display-options label { + color: #efefef; } option.disabled-option { @@ -956,6 +1045,7 @@ option.disabled-option { /* Definition list layout for forms ---------------------------------------- */ + dd label { color: #333; } @@ -995,8 +1085,9 @@ fieldset.quick-login input.inputbox { /* Input field styles ---------------------------------------- */ + .inputbox { - background-color: #FFFFFF; + background-color: #f5f5f5; border-color: #B4BAC0; color: #333333; } @@ -1025,7 +1116,6 @@ fieldset.quick-login input.inputbox { color: transparent; } - /* Form button styles ---------------------------------------- */ @@ -1033,7 +1123,7 @@ a.button1, input.button1, input.button3, a.button2, input.button2 { color: #000; background-color: #EFEFEF; /* Old browsers */ /* FF3.6+ */ background-image: -webkit-linear-gradient(top, #D2D2D2 0%, #EFEFEF 100%); - background-image: linear-gradient(to bottom, #D2D2D2 0%,#EFEFEF 100%); /* W3C */ + background-image: linear-gradient(to bottom, #D2D2D2 0%, #EFEFEF 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#D2D2D2', endColorstr='#EFEFEF',GradientType=0 ); /* IE6-9 */ } @@ -1061,7 +1151,7 @@ a.button1:hover, input.button1:hover, a.button2:hover, input.button2:hover, inpu color: #D31141; background-color: #D2D2D2; /* Old browsers */ /* FF3.6+ */ background-image: -webkit-linear-gradient(top, #EFEFEF 0%, #D2D2D2 100%); - background-image: linear-gradient(to bottom, #EFEFEF 0%,#D2D2D2 100%); /* W3C */ + background-image: linear-gradient(to bottom, #EFEFEF 0%, #D2D2D2 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#EFEFEF', endColorstr='#D2D2D2',GradientType=0 ); /* IE6-9 */ } @@ -1077,10 +1167,12 @@ input.disabled { /* jQuery popups ---------------------------------------- */ + .phpbb_alert { background-color: #FFFFFF; border-color: #999999; } + .darken { background-color: #000000; } @@ -1095,7 +1187,7 @@ input.disabled { } .dropdown-extended ul li:hover { - background-color: #CFE1F6; + background-color: #e5e8ea; color: #000000; } @@ -1111,9 +1203,9 @@ input.disabled { .dropdown-extended .header { background-color: #F1F8FF; /* Old browsers */ /* FF3.6+ */ - background-image: -webkit-linear-gradient(top, #F1F8FF 0%, #CADCEB 100%); - background-image: linear-gradient(to bottom, #F1F8FF 0%,#CADCEB 100%); /* W3C */ - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F1F8FF', endColorstr='#CADCEB',GradientType=0 ); /* IE6-9 */ + background-image: -webkit-linear-gradient(top, #F1F8FF 0%, #e5e8ea 100%); + background-image: linear-gradient(to bottom, #F1F8FF 0%, #e5e8ea 100%); /* W3C */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F1F8FF', endColorstr='#e5e8ea',GradientType=0 ); /* IE6-9 */ } .dropdown .pointer { @@ -1129,7 +1221,7 @@ input.disabled { } .dropdown .dropdown-contents { - background: #fff; + background: #000000; border-color: #B9B9B9; box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.2); } @@ -1138,6 +1230,10 @@ input.disabled { box-shadow: 1px 0 5px rgba(0, 0, 0, 0.2); } +.dropdown-contents a { + color: #a0a0d0; +} + .dropdown li, .dropdown li li { border-color: #DCDCDC; } diff --git a/theme/common.css b/theme/common.css index a0dc5e043..79a9fa86b 100644 --- a/theme/common.css +++ b/theme/common.css @@ -11,7 +11,7 @@ body { font-size: 10px; line-height: normal; margin: 0; - padding: 12px 0; + padding: 0; word-wrap: break-word; -webkit-print-color-adjust: exact; } @@ -138,18 +138,10 @@ a:hover { text-decoration: underline; } /* Main blocks ---------------------------------------- */ .wrap { - border: 1px solid transparent; - border-radius: 8px; margin: 0 auto; - max-width: 1152px; + max-width: 100%; min-width: 625px; - padding: 15px; -} - -@media only screen and (max-width: 1220px), only screen and (max-device-width: 1220px) { - .wrap { - margin: 0 12px; - } + padding: 0 10px 10px } .page-body { @@ -168,7 +160,8 @@ a:hover { text-decoration: underline; } .logo { float: left; width: auto; - padding: 10px 13px 0 10px; + max-height: 109px; + padding: 0 0; } .logo:hover { @@ -177,8 +170,8 @@ a:hover { text-decoration: underline; } .site_logo { display: inline-block; - width: 149px; - height: 52px; + height: 109px; + width: 532px; } /* Site description and logo */ @@ -191,45 +184,33 @@ a:hover { text-decoration: underline; } margin-right: 0; } -/* Round cornered boxes and backgrounds +/* Boxes and Backgrounds ---------------------------------------- */ .headerbar { - margin-bottom: 4px; - padding: 5px; - border-radius: 7px; + margin: 0 auto; + max-width: 100%; + padding: 0 0; } .navbar { - padding: 3px 10px; - border-radius: 7px; -} - -.forabg { - margin-bottom: 4px; - padding: 5px; - clear: both; - border-radius: 7px; + padding: 0 5px; } -.forumbg { +.forabg, .forumbg { margin-bottom: 4px; - padding: 5px; clear: both; - border-radius: 7px; } .panel { margin-bottom: 4px; padding: 5px 10px; - border-radius: 7px; } .post { - padding: 5px 10px; + padding: 5px 5px; margin-bottom: 4px; background-repeat: no-repeat; background-position: 100% 0; - border-radius: 7px; position: relative; } @@ -237,6 +218,21 @@ a:hover { text-decoration: underline; } margin: 5px 5px 2px 5px; } +.stats-area { + margin: 2px 0 1px; +} + +.stats-header h3 { + margin: 0 !important; + padding: 8px 10px; + text-align: center; + text-transform: uppercase; +} + +.stats-data { + padding: 0 10px 5px; +} + /* Horizontal lists ----------------------------------------*/ .navbar ul.linklist { @@ -667,7 +663,7 @@ table.table1 tbody th { /* Specific column styles */ table.table1 .name { text-align: left; } -table.table1 .center { text-align: center; } +table.table1 .center { text-align: center; } table.table1 .reportby { width: 15%; } table.table1 .posts { text-align: center; width: 7%; } table.table1 .joined { text-align: left; width: 15%; } @@ -983,7 +979,6 @@ fieldset.fields1 dl.pmlist dd.recipients { .copyright { font-size: 10px; text-align: center; - padding: 10px; } .footer-row { diff --git a/theme/content.css b/theme/content.css index 807633864..1e05211de 100644 --- a/theme/content.css +++ b/theme/content.css @@ -100,12 +100,14 @@ li.row strong { li.header dt, li.header dd { line-height: 1em; border-left-width: 0; - margin: 2px 0 4px 0; + margin: 8px 0 6px 0; padding-top: 2px; padding-bottom: 2px; font-size: 1em; - font-family: Arial, Helvetica, sans-serif; + font-family: Verdana, Arial, Helvetica, sans-serif; + text-align: center; text-transform: uppercase; + font-weight: bold; } li.header dt { @@ -136,8 +138,6 @@ li.header dl.row-item dt .list-inner { } /* Forum list column styles */ -.row .list-inner { padding: 4px 0; } - dl.row-item { background-position: 10px 50%; /* Position of folder icon */ background-repeat: no-repeat; @@ -228,10 +228,40 @@ dd.option { /* Post body styles ----------------------------------------*/ +#topic-header { + display: block; + font-weight: bold; + text-transform: uppercase; +} + +#topic-header .post.has-profile { + border: none; +} + +.topic-header-title, .topic-header-author { + text-align: center; +} + +.topic-header-title { + width: 77%; +} + +.topic-header-author { + border: none !important; + min-height: 0px; + width: 18%; +} + +.postprofile.topic-header-author { + margin: 6px 0 0 0; + min-height: 0px; + width: 140px; +} + .postbody { - padding: 0; + padding: 5px; line-height: 1.48em; - width: 76%; + width: 100%; float: left; position: relative; } @@ -242,13 +272,13 @@ dd.option { .postbody h3.first { /* The first post on the page uses this */ - font-size: 1.7em; + font-size: 1.2em; } .postbody h3 { /* Postbody requires a different h3 format - so change it here */ float: left; - font-size: 1.5em; + font-size: 1.2em; padding: 2px 0 0 0; margin-top: 0 !important; margin-bottom: 0.3em !important; @@ -701,15 +731,14 @@ fieldset.polls dd div { margin: 5px 0 10px 0; min-height: 80px; border: 1px solid transparent; - border-width: 0 0 0 1px; - width: 22%; - float: right; + border-width: 1px 1px 0 0; + width: 140px; + float: left; display: inline; } .postprofile dd, .postprofile dt { line-height: 1.2em; - margin-left: 8px; } .postprofile dd { @@ -721,7 +750,7 @@ fieldset.polls dd div { font-weight: normal; } -.postprofile dt.no-profile-rank, .postprofile dd.profile-rank, .postprofile .search-result-date { +.postprofile dt.no-profile-rank, .postprofile .search-result-date { margin-bottom: 10px; } @@ -731,6 +760,22 @@ fieldset.polls dd div { overflow: hidden; } +.avatar-container { + max-width: 130px; +} + +.has-profile, .has-avatar { + padding-top: 5px; +} + +.no-profile, .no-avatar { + padding-top: 5px; +} + +.profile-rank { + padding-bottom: 5px; +} + .postprofile .avatar { display: block; float: left; @@ -743,6 +788,10 @@ fieldset.polls dd div { max-width: 100%; } +.profile-posts { + padding-top: 5px; +} + .postprofile .profile-posts a { font-weight: normal; } diff --git a/theme/en/icon_user_online.png b/theme/en/icon_user_online.png Binary files differnew file mode 100644 index 000000000..488e3bb99 --- /dev/null +++ b/theme/en/icon_user_online.png diff --git a/theme/en/stylesheet.css b/theme/en/stylesheet.css index 604b29948..faab4aa73 100644 --- a/theme/en/stylesheet.css +++ b/theme/en/stylesheet.css @@ -1,2 +1,2 @@ /* Online image */ -.online { background-image: url("./icon_user_online.gif"); } +.online { background-image: url("./icon_user_online.png"); } diff --git a/theme/images/cellpic3.gif b/theme/images/cellpic3.gif Binary files differnew file mode 100644 index 000000000..4099d1cc9 --- /dev/null +++ b/theme/images/cellpic3.gif diff --git a/theme/images/site_logo.png b/theme/images/site_logo.png Binary files differnew file mode 100644 index 000000000..f0daf7b49 --- /dev/null +++ b/theme/images/site_logo.png diff --git a/theme/responsive-pm.css b/theme/responsive-pm.css new file mode 100644 index 000000000..a3e31f057 --- /dev/null +++ b/theme/responsive-pm.css @@ -0,0 +1,648 @@ +/* Responsive Design +---------------------------------------- */ + +@media (max-width: 320px) { + select, .inputbox { + max-width: 240px; + } +} + + +/* Notifications list +----------------------------------------*/ +@media (max-width: 350px) { + .dropdown-extended .dropdown-contents { + width: auto; + } +} + +@media (max-width: 430px) { + .action-bar .search-box .inputbox { + width: 120px; + } + + .section-viewtopic .search-box .inputbox { + width: 57px; + } + + .action-bar .search-box .inputbox ::-moz-placeholder { + content: "Search..."; + } + + .action-bar .search-box .inputbox :-ms-input-placeholder { + content: "Search..."; + } + + .action-bar .search-box .inputbox ::-webkit-input-placeholder { + content: "Search..."; + } +} + +@media (max-width: 500px) { + dd label { + white-space: normal; + } + + select, .inputbox { + max-width: 260px; + } + + .captcha-panel dd.captcha { + margin-left: 0; + } + + .captcha-panel dd.captcha-image img { + width: 100%; + } + + dl.details dt, dl.details dd { + width: auto; + float: none; + text-align: left; + } + + dl.details dd { + margin-left: 20px; + } + + p.responsive-center { + float: none; + text-align: center; + margin-bottom: 5px; + } + + .action-bar > div { + margin-bottom: 5px; + } + + .action-bar > .pagination { + float: none; + clear: both; + padding-bottom: 1px; + text-align: center; + } + + .action-bar > .pagination li.page-jump { + margin: 0 2px; + } + + p.jumpbox-return { + display: none; + } + + .display-options > label:nth-child(1) { + display: block; + margin-bottom: 5px; + } + + .attach-controls { + margin-top: 5px; + width: 100%; + } + + .quick-links .dropdown-trigger span { + display: none; + } +} + +@media (max-width: 550px) { + ul.topiclist.forums dt { + margin-right: 0; + } + + ul.topiclist.forums dt .list-inner { + margin-right: 0; + } + + ul.topiclist.forums dd.lastpost { + display: none; + } +} + +@media (max-width: 700px) { + #topic-header { display: none; } + + .responsive-hide { display: none !important; } + .responsive-show { display: block !important; } + .responsive-show-inline { display: inline !important; } + .responsive-show-inline-block { display: inline-block !important; } + + /* Content wrappers + ----------------------------------------*/ + html { + height: auto; + } + + body { + padding: 0; + } + + .wrap { + border: none; + border-radius: 0; + margin: 0; + min-width: 290px; + padding: 0 5px; + } + + /* Common block wrappers + ----------------------------------------*/ + .headerbar, .navbar, .forabg, .forumbg, .post, .panel { + border-radius: 0; + margin-left: -5px; + margin-right: -5px; + } + + .cp-main .forabg, .cp-main .forumdb, .cp-main .post, .cp-main .panel { + border-radius: 7px; + } + + /* Logo block + ----------------------------------------*/ + .site-description { + float: none; + width: auto; + text-align: center; + } + + .logo { + /* change display value to inline-block to show logo */ + display: none; + float: none; + padding: 10px; + } + + .site-description h1, .site-description p { + text-align: inherit; + float: none; + margin: 5px; + line-height: 1.2em; + overflow: hidden; + text-overflow: ellipsis; + } + + .site-description p, .search-header { + display: none; + } + + /* Navigation + ----------------------------------------*/ + .headerbar + .navbar { + margin-top: -5px; + } + + /* Search + ----------------------------------------*/ + .responsive-search { display: block !important; } + + /* .topiclist lists + ----------------------------------------*/ + li.header dt { + text-align: center; + text-transform: none; + line-height: 1em; + font-size: 1.2em; + padding-bottom: 4px; + } + + ul.topiclist li.header dt, ul.topiclist li.header dt .list-inner { + margin-right: 0 !important; + padding-right: 0; + } + + ul.topiclist li.header dd { + display: none !important; + } + + ul.topiclist dt, ul.topiclist dt .list-inner, + ul.topiclist.missing-column dt, ul.topiclist.missing-column dt .list-inner, + ul.topiclist.two-long-columns dt, ul.topiclist.two-long-columns dt .list-inner, + ul.topiclist.two-columns dt, ul.topiclist.two-columns dt .list-inner { + margin-right: 0; + } + + ul.topiclist dt .list-inner.with-mark { + padding-right: 34px; + } + + ul.topiclist dt .list-inner { + min-height: 28px; + } + + ul.topiclist li.header dt .list-inner { + min-height: 0; + } + + ul.topiclist dd { + display: none; + } + ul.topiclist dd.mark { + display: block; + } + + /* Forums and topics lists + ----------------------------------------*/ + ul.topiclist.forums dt { + margin-right: -250px; + } + + ul.topiclist dd.mark { + display: block; + position: absolute; + right: 5px; + top: 0; + margin: 0; + width: auto; + min-width: 0; + text-align: left; + } + + ul.topiclist.forums dd.topics dfn, ul.topiclist.topics dd.posts dfn { + position: relative; + left: 0; + width: auto; + display: inline; + font-weight: normal; + } + + li.row .responsive-show strong { + font-weight: bold; + color: inherit; + } + + ul.topiclist li.row dt a.subforum { + vertical-align: bottom; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100px; + } + + /* Pagination + ----------------------------------------*/ + .pagination > ul { + margin: 5px 0 0; + } + + .row .pagination .ellipsis + li { + display: none !important; + } + + /* Responsive tables + ----------------------------------------*/ + table.responsive, table.responsive tbody, table.responsive tr, table.responsive td { + display: block; + } + + table.responsive thead, table.responsive th { + display: none; + } + + table.responsive.show-header thead, table.responsive.show-header th:first-child { + display: block; + width: auto !important; + text-align: left !important; + } + + table.responsive.show-header th:first-child span.rank-img { + display: none; + } + + table.responsive tr { + margin: 2px 0; + } + + table.responsive td { + width: auto !important; + text-align: left !important; + padding: 4px; + } + + table.responsive td.empty { + display: none !important; + } + + table.responsive td > dfn { + display: inline-block !important; + } + + table.responsive td > dfn:after { + content: ':'; + padding-right: 5px; + } + + table.responsive span.rank-img { + float: none; + padding-right: 5px; + } + + table.responsive.memberlist td:first-child input[type="checkbox"] { + float: right; + } + + /* Forms + ----------------------------------------*/ + fieldset dt, fieldset.fields1 dt, fieldset.fields2 dt { + width: auto; + float: none; + } + + fieldset dd, fieldset.fields1 dd, fieldset.fields2 dd { + margin-left: 0px; + } + + textarea, dd textarea, .message-box textarea { + width: 100%; + -moz-box-sizing: border-box; + box-sizing: border-box; + } + + dl.pmlist dt { + width: auto !important; + margin-bottom: 5px; + } + + dl.pmlist dd { + display: inline-block; + margin-left: 0 !important; + } + + dl.pmlist dd:first-of-type { + padding-left: 20px; + } + + .smiley-box, .message-box { + float: none; + width: auto; + } + + .smiley-box { + margin-top: 5px; + } + + .bbcode-status { + display: none; + } + + .colour-palette, .colour-palette tbody, .colour-palette tr { + display: block; + } + + .colour-palette td { + display: inline-block; + margin-right: 2px; + } + + .horizontal-palette td:nth-child(2n), .vertical-palette tr:nth-child(2n) { + display: none; + } + + fieldset.quick-login label { + display: block; + margin-bottom: 5px; + white-space: normal; + } + + fieldset.quick-login label > span { + display: inline-block; + min-width: 100px; + } + + fieldset.quick-login input.inputbox { + width: 85%; + max-width: 300px; + margin-left: 20px; + } + + fieldset.quick-login label[for="autologin"] { + display: inline-block; + text-align: right; + min-width: 50%; + } + + /* User profile + ----------------------------------------*/ + .column1, .column2, .left-box.profile-details { + float: none; + width: auto; + clear: both; + } + + /* Polls + ----------------------------------------*/ + fieldset.polls dt { + width: 90%; + } + + fieldset.polls dd.resultbar { + padding-left: 20px; + } + + fieldset.polls dd.poll_option_percent { + width: 20%; + } + + fieldset.polls dd.resultbar, fieldset.polls dd.poll_option_percent { + margin-top: 5px; + } + + /* Post + ----------------------------------------*/ + .postbody { + position: inherit; + } + + .postprofile, .postbody, .search .postbody { + display: block; + width: auto; + float: none; + padding: 0; + min-height: 0; + } + + .post .postprofile { + width: auto; + border-width: 0 0 1px 0; + padding-bottom: 5px; + margin: 0; + margin-bottom: 5px; + min-height: 40px; + overflow: hidden; + } + + .postprofile dd { + display: none; + } + + .postprofile dt, .postprofile dd.profile-rank, .search .postprofile dd { + display: block; + margin: 0; + } + + .postprofile .has-avatar .avatar-container { + margin: 0; + overflow: inherit; + } + + .postprofile .avatar-container:after { + clear: none; + } + + .postprofile .avatar { + margin-right: 5px; + } + + .postprofile .avatar img { + width: auto !important; + height: auto !important; + max-height: 32px; + } + + .has-profile .postbody h3 { + margin-left: 0 !important; + margin-right: 0 !important; + } + + .has-profile .post-buttons { + right: 30px; + top: 15px; + } + + .online { + background-size: 40px; + } + + /* Misc stuff + ----------------------------------------*/ + h2 { + margin-top: .5em; + } + + p { + margin-bottom: .5em; + overflow: hidden; + } + + p.rightside { + margin-bottom: 0; + } + + fieldset.display-options label { + display: block; + clear: both; + margin-bottom: 5px; + } + + dl.mini dd.pm-legend { + float: left; + min-width: 200px; + } + + .topicreview { + margin: 0 -5px; + padding: 0 5px; + } + + fieldset.display-actions { + white-space: normal; + } + + .phpbb_alert { + width: auto; + margin: 0 5px; + } + + .attach-comment dfn { + width: 100%; + } +} + +@media (min-width: 700px) { + .postbody { width: 100%; } +} + +@media (min-width: 701px) { + .postbody { width: 76%; } +} + +@media (min-width: 750px) { + .postbody { width: 77%; } +} + +@media (min-width: 800px) { + .postbody { width: 79%; } +} + +@media (min-width: 850px) { + .postbody { width: 80%; } +} + +@media (min-width: 900px) { + .postbody { width: 81%; } +} + +@media (min-width: 901px) { + .postbody { width: 77%; } +} + +@media (min-width: 950px) { + .postbody { width: 78%; } +} + +@media (min-width: 1000px) { + .postbody { width: 79%; } +} + +@media (min-width: 1100px) { + .postbody { width: 81%; } +} + +@media (min-width: 1200px) { + .postbody { width: 83%; } +} + +@media (min-width: 1300px) { + .postbody { width: 84%; } +} + +@media (min-width: 1400px) { + .postbody { width: 85%; } +} + +@media (min-width: 1500px) { + .postbody { width: 86%; } +} + +@media (min-width: 1600px) { + .postbody { width: 87%; } +} + +@media (min-width: 1700px) { + .postbody { width: 88%; } +} + +@media (min-width: 1800px) { + .postbody { width: 89%; } +} + +@media (min-width: 1900px) { + .postbody { width: 89%; } +} + +@media (min-width: 2000px) { + .postbody { width: 90%; } +} + +@media (min-width: 701px) and (max-width: 950px) { + + ul.topiclist dt { + margin-right: -410px; + } + + ul.topiclist dt .list-inner { + margin-right: 410px; + } + + dd.posts, dd.topics, dd.views { + width: 80px; + } +} diff --git a/theme/responsive.css b/theme/responsive.css index ca4054c27..9d603e357 100644 --- a/theme/responsive.css +++ b/theme/responsive.css @@ -7,6 +7,7 @@ } } + /* Notifications list ----------------------------------------*/ @media (max-width: 350px) { @@ -119,6 +120,8 @@ } @media (max-width: 700px) { + #topic-header { display: none; } + .responsive-hide { display: none !important; } .responsive-show { display: block !important; } .responsive-show-inline { display: inline !important; } @@ -554,30 +557,88 @@ } @media (min-width: 700px) { - .postbody { width: 70%; } + .postbody { width: 100%; } } -@media (min-width: 850px) { +@media (min-width: 701px) { .postbody { width: 76%; } } -@media (max-width: 850px) { - .postprofile { width: 28%; } +@media (min-width: 750px) { + .postbody { width: 78%; } +} + +@media (min-width: 800px) { + .postbody { width: 79%; } +} + +@media (min-width: 850px) { + .postbody { width: 80%; } +} + +@media (min-width: 900px) { + .postbody { width: 81%; } +} + +@media (min-width: 950px) { + .postbody { width: 82%; } +} + +@media (min-width: 1000px) { + .postbody { width: 83%; } +} + +@media (min-width: 1100px) { + .postbody { width: 84%; } +} + +@media (min-width: 1200px) { + .postbody { width: 85%; } +} + +@media (min-width: 1300px) { + .postbody { width: 86%; } +} + +@media (min-width: 1400px) { + .postbody { width: 87%; } +} + +@media (min-width: 1500px) { + .postbody { width: 88%; } +} + +@media (min-width: 1600px) { + .postbody { width: 89%; } +} + +@media (min-width: 1700px) { + .postbody { width: 90%; } +} + +@media (min-width: 1800px) { + .postbody { width: 91%; } +} +@media (min-width: 1900px) { + .postbody { width: 92%; } +} +@media (min-width: 2000px) { + .postbody { width: 93%; } } @media (min-width: 701px) and (max-width: 950px) { ul.topiclist dt { - margin-right: -410px; + margin-right: -410px; } ul.topiclist dt .list-inner { - margin-right: 410px; + margin-right: 410px; } dd.posts, dd.topics, dd.views { - width: 80px; + width: 80px; } } |