mirror of
https://github.com/phpbb/phpbb.git
synced 2025-08-23 08:43:02 +02:00
Merge pull request #1719 from cyberalien/ticket/11552
Responsive design for prosilver
This commit is contained in:
Nils Adermann
@@ -392,11 +392,6 @@
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
/* Post author */
|
||||
.rtl p.author {
|
||||
margin: 0 0 0.6em 15em;
|
||||
}
|
||||
|
||||
.rtl .signature {
|
||||
clear: right;
|
||||
}
|
||||
@@ -484,9 +479,7 @@
|
||||
/* Poster profile block
|
||||
----------------------------------------*/
|
||||
.rtl .postprofile {
|
||||
border-left: none;
|
||||
border-right-width: 1px;
|
||||
border-right-style: solid;
|
||||
border-width: 0 1px 0 0;
|
||||
float: left;
|
||||
/* text-align: right; */
|
||||
}
|
||||
|
||||
@@ -140,6 +140,65 @@ ul.profile-icons li a:hover { background: none; }
|
||||
margin: 0 3px;
|
||||
}
|
||||
|
||||
/* Responsive icons in postbody */
|
||||
.postbody ul.profile-icons.responsive .responsive-menu {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
ul.profile-icons.responsive a.responsive-menu-link {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
margin: 0 5px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
text-decoration: none;
|
||||
background: none top left no-repeat;
|
||||
}
|
||||
|
||||
ul.profile-icons.responsive a.responsive-menu-link:hover {
|
||||
background-position: 0 -20px;
|
||||
}
|
||||
|
||||
ul.profile-icons.responsive a.responsive-menu-link:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 7px;
|
||||
height: .125em;
|
||||
width: 14px;
|
||||
border-bottom: 0.125em solid transparent;
|
||||
border-top: 0.375em double transparent;
|
||||
}
|
||||
|
||||
.postbody ul.profile-icons.responsive .responsive-popup {
|
||||
left: auto;
|
||||
right: 7px;
|
||||
top: 19px;
|
||||
}
|
||||
|
||||
.postbody ul.profile-icons.responsive .responsive-popup li, .postbody ul.profile-icons.responsive .responsive-popup li a {
|
||||
display: block;
|
||||
background: transparent none;
|
||||
width: auto;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
float: none;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.postbody ul.profile-icons.responsive .responsive-popup li span {
|
||||
display: block;
|
||||
text-align: right;
|
||||
font-size: 1.2em;
|
||||
line-height: 1.8em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.hasjs .postbody ul.profile-icons {
|
||||
max-width: 40%;
|
||||
}
|
||||
|
||||
/* Profile & navigation icons */
|
||||
.email-icon, .email-icon a { background: none top left no-repeat; }
|
||||
.aim-icon, .aim-icon a { background: none top left no-repeat; }
|
||||
@@ -173,6 +232,7 @@ ul.profile-icons li.edit-icon { width: 42px; height: 20px; }
|
||||
ul.profile-icons li.delete-icon { width: 20px; height: 20px; }
|
||||
ul.profile-icons li.info-icon { width: 20px; height: 20px; }
|
||||
ul.profile-icons li.warn-icon { width: 20px; height: 20px; }
|
||||
ul.profile-icons a.responsive-menu-link { width: 20px; height: 20px; }
|
||||
|
||||
/* Fix profile icon default margins */
|
||||
ul.profile-icons li.edit-icon { margin: 0 0 0 3px; }
|
||||
|
||||
@@ -627,21 +627,11 @@ fieldset.polls dd div {
|
||||
----------------------------------------*/
|
||||
.postprofile {
|
||||
color: #666666;
|
||||
border-left-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.rtl .postprofile {
|
||||
border-right-color: #FFFFFF;
|
||||
border-left-color: transparent;
|
||||
border-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.pm .postprofile {
|
||||
border-left-color: #DDDDDD;
|
||||
}
|
||||
|
||||
.rtl .pm .postprofile {
|
||||
border-right-color: #DDDDDD;
|
||||
border-left-color: transparent;
|
||||
border-color: #DDDDDD;
|
||||
}
|
||||
|
||||
.postprofile strong {
|
||||
@@ -706,7 +696,7 @@ a.sendemail {
|
||||
.icon-subscribe { background-image: url("./images/icon_subscribe.gif"); }
|
||||
.icon-unsubscribe { background-image: url("./images/icon_unsubscribe.gif"); }
|
||||
.icon-pages { background-image: url("./images/icon_pages.gif"); }
|
||||
.icon-search { background-image: url("./images/icon_search.gif"); }
|
||||
.icon-search, .responsive-search a { background-image: url("./images/icon_search.gif"); }
|
||||
.icon-notification { background-image: url("./images/icon_notification.gif"); }
|
||||
.icon-pm { background-image: url("./images/icon_pm.gif"); }
|
||||
|
||||
@@ -720,6 +710,7 @@ a.sendemail {
|
||||
.jabber-icon, .jabber-icon a { background-image: url("./images/icon_contact_jabber.gif"); }
|
||||
.pm-icon, .pm-icon a { background-image: url("./en/icon_contact_pm.gif"); }
|
||||
.quote-icon, .quote-icon a { background-image: url("./en/icon_post_quote.gif"); }
|
||||
ul.profile-icons.responsive a.responsive-menu-link { background-image: url("./images/icon_post_menu.png"); }
|
||||
|
||||
/* Moderator icons */
|
||||
.report-icon, .report-icon a { background-image: url("./images/icon_post_report.gif"); }
|
||||
@@ -857,6 +848,16 @@ ul.cplist {
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
/* Responsive tabs
|
||||
----------------------------------------*/
|
||||
.responsive-tab .responsive-tab-link span:before {
|
||||
border-color: #536482;
|
||||
}
|
||||
|
||||
.responsive-tab .responsive-tab-link:hover span:before {
|
||||
border-color: #BC2A4D;
|
||||
}
|
||||
|
||||
/* UCP navigation menu
|
||||
----------------------------------------*/
|
||||
|
||||
@@ -1126,3 +1127,26 @@ input.disabled {
|
||||
.notification_list .pointer_inner {
|
||||
border-bottom-color: #F1F8FF;
|
||||
}
|
||||
|
||||
ul.linklist li.responsive-menu a.responsive-menu-link:before {
|
||||
border-color: #105289;
|
||||
}
|
||||
|
||||
ul.linklist li.responsive-menu a.responsive-menu-link:hover:before {
|
||||
border-color: #D31141;
|
||||
}
|
||||
|
||||
ul.responsive-popup {
|
||||
background: #fff;
|
||||
border-color: #b9b9b9;
|
||||
box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.navbar ul.responsive-popup {
|
||||
background-color: #CADCEB;
|
||||
}
|
||||
|
||||
#tabs ul.responsive-tabs, #minitabs ul.responsive-tabs {
|
||||
background: #ddedfb;
|
||||
border-color: #c0c9d5;
|
||||
box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
@@ -60,6 +60,7 @@ body {
|
||||
line-height: normal;
|
||||
margin: 0;
|
||||
padding: 12px 0;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -179,7 +180,7 @@ ol ol ul, ol ul ul, ul ol ul, ul ul ul {
|
||||
}
|
||||
|
||||
#simple-wrap {
|
||||
padding: 6px 10px;
|
||||
padding: 6px 0;
|
||||
}
|
||||
|
||||
#page-body {
|
||||
@@ -360,6 +361,38 @@ ul.rightside {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
ul.linklist.responsive {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
ul.linklist li.responsive-menu a.responsive-menu-link {
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
position: relative;
|
||||
width: 16px;
|
||||
line-height: 16px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
ul.linklist li.responsive-menu a.responsive-menu-link:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 7px;
|
||||
height: .125em;
|
||||
width: 14px;
|
||||
border-bottom: 0.125em solid transparent;
|
||||
border-top: 0.375em double transparent;
|
||||
}
|
||||
|
||||
.hasjs ul.linklist.leftside, .hasjs ul.linklist.rightside {
|
||||
max-width: 48%;
|
||||
}
|
||||
|
||||
.hasjs ul.linklist.fullwidth {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
/* Bulletin icons for list items
|
||||
----------------------------------------*/
|
||||
ul.linklist.bulletin li:before {
|
||||
@@ -378,6 +411,62 @@ ul.linklist.bulletin li.no-bulletin:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.responsive-menu:before {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Responsive popup
|
||||
----------------------------------------*/
|
||||
ul.responsive-popup {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 24px;
|
||||
z-index: 2;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
ul.responsive-popup.responsive-rightside {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
ul.responsive-popup li {
|
||||
float: none;
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.wrap ul.responsive-popup li {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
ul.responsive-popup li:before, ul.responsive-popup li:after {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Responsive breadcrumbs
|
||||
----------------------------------------*/
|
||||
.breadcrumbs .crumb {
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.breadcrumbs.wrapped .crumb {
|
||||
letter-spacing: -.5px;
|
||||
}
|
||||
|
||||
.breadcrumbs .crumb.wrapped {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.breadcrumbs .crumb.wrapped-wide { max-width: 120px; }
|
||||
.breadcrumbs .crumb.wrapped-medium { max-width: 80px; }
|
||||
.breadcrumbs .crumb.wrapped-small { max-width: 30px; }
|
||||
|
||||
/* Table styles
|
||||
----------------------------------------*/
|
||||
table.table1 {
|
||||
@@ -421,7 +510,7 @@ table.table1 tbody th {
|
||||
|
||||
/* Specific column styles */
|
||||
table.table1 .name { text-align: left; }
|
||||
table.table1 .posts { text-align: center !important; width: 7%; }
|
||||
table.table1 .posts { text-align: center; width: 7%; }
|
||||
table.table1 .joined { text-align: left; width: 15%; }
|
||||
table.table1 .active { text-align: left; width: 15%; }
|
||||
table.table1 .mark { text-align: center; width: 7%; }
|
||||
@@ -477,6 +566,10 @@ table.info tbody th {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.left-box.profile-details {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.right-box {
|
||||
float: right;
|
||||
width: auto;
|
||||
@@ -506,7 +599,7 @@ dl.details dd {
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.clearfix, #tabs, #minitabs, fieldset dl, ul.topiclist dl, dl.polls {
|
||||
.clearfix, fieldset dl, ul.topiclist dl, dl.polls {
|
||||
height: 1%;
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -786,18 +879,14 @@ form > p.post-notice strong {
|
||||
|
||||
.notification_list ul li img {
|
||||
float: left;
|
||||
max-width: 50px;
|
||||
max-height: 50px;
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.notification_list ul li p {
|
||||
margin: 0;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.notification_list ul.topiclist dt {
|
||||
width: 88%;
|
||||
}
|
||||
|
||||
.notification_list .pointer, .notification_list .pointer_inner {
|
||||
@@ -836,3 +925,11 @@ form > p.post-notice strong {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.compact .icon-notification > a > span, .compact .icon-pm > a > span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.compact .icon-notification > a > strong, .compact .icon-pm > a > strong {
|
||||
padding-left: 2px;
|
||||
}
|
||||
|
||||
|
||||
@@ -228,7 +228,6 @@ div[class].topic-actions {
|
||||
line-height: 1.48em;
|
||||
width: 76%;
|
||||
float: left;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.postbody .ignore {
|
||||
@@ -242,6 +241,7 @@ div[class].topic-actions {
|
||||
|
||||
.postbody h3 {
|
||||
/* Postbody requires a different h3 format - so change it here */
|
||||
float: left;
|
||||
font-size: 1.5em;
|
||||
padding: 2px 0 0 0;
|
||||
margin: 0 0 0.3em 0 !important;
|
||||
@@ -258,6 +258,7 @@ div[class].topic-actions {
|
||||
|
||||
.postbody .content {
|
||||
font-size: 1.3em;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.search .postbody {
|
||||
@@ -297,21 +298,16 @@ div[class].topic-actions {
|
||||
|
||||
/* MCP Post details
|
||||
----------------------------------------*/
|
||||
#post_details
|
||||
{
|
||||
#post_details {
|
||||
/* This will only work in IE7+, plus the others */
|
||||
overflow: auto;
|
||||
max-height: 300px;
|
||||
}
|
||||
|
||||
#expand
|
||||
{
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/* Content container styles
|
||||
----------------------------------------*/
|
||||
.content {
|
||||
clear: both;
|
||||
min-height: 3em;
|
||||
overflow: hidden;
|
||||
line-height: 1.4em;
|
||||
@@ -382,11 +378,12 @@ dl.faq dt {
|
||||
|
||||
/* Post author */
|
||||
p.author {
|
||||
margin: 0 15em 0.6em 0;
|
||||
margin-bottom: 0.6em;
|
||||
padding: 0 0 5px 0;
|
||||
font-family: Verdana, Helvetica, Arial, sans-serif;
|
||||
font-size: 1em;
|
||||
line-height: 1.2em;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/* Post signature */
|
||||
@@ -401,6 +398,11 @@ p.author {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.signature.standalone {
|
||||
border-top-width: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
dd .signature {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@@ -509,10 +511,13 @@ blockquote .codebox {
|
||||
.attachbox {
|
||||
float: left;
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
margin: 5px 5px 5px 0;
|
||||
padding: 6px;
|
||||
border: 1px dashed transparent;
|
||||
clear: left;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.attachbox dt {
|
||||
@@ -525,6 +530,7 @@ blockquote .codebox {
|
||||
padding-top: 4px;
|
||||
clear: left;
|
||||
border-top: 1px solid transparent;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.attachbox dd dd {
|
||||
@@ -546,7 +552,7 @@ blockquote .codebox {
|
||||
|
||||
.attach-image {
|
||||
margin: 3px 0;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
max-height: 350px;
|
||||
overflow: auto;
|
||||
}
|
||||
@@ -654,7 +660,7 @@ fieldset.polls dd div {
|
||||
font-weight: bold;
|
||||
padding: 0 2px;
|
||||
overflow: visible;
|
||||
min-width: 2%;
|
||||
min-width: 8px;
|
||||
}
|
||||
|
||||
.pollbar1, .pollbar2, .pollbar3, .pollbar4, .pollbar5 {
|
||||
@@ -674,7 +680,8 @@ fieldset.polls dd div {
|
||||
/* Also see tweaks.css */
|
||||
margin: 5px 0 10px 0;
|
||||
min-height: 80px;
|
||||
border-left: 1px solid transparent;
|
||||
border: 1px solid transparent;
|
||||
border-width: 0 0 0 1px;
|
||||
width: 22%;
|
||||
float: right;
|
||||
display: inline;
|
||||
@@ -694,7 +701,12 @@ fieldset.polls dd div {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
.postprofile dt.no-profile-rank, .postprofile dd.profile-rank, .postprofile .search-result-date {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.postprofile .avatar {
|
||||
display: block;
|
||||
border: none;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
@@ -746,3 +758,18 @@ div.dl_links {
|
||||
.dl_links li {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* Show scrollbars for items with overflow on iOS devices
|
||||
----------------------------------------*/
|
||||
.postbody .content::-webkit-scrollbar, #topicreview::-webkit-scrollbar, #post_details::-webkit-scrollbar, .codebox code::-webkit-scrollbar, .attachbox dd::-webkit-scrollbar, .attach-image::-webkit-scrollbar, #notification_list ul::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
-webkit-appearance: none;
|
||||
background: rgba(0, 0, 0, .1);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.postbody .content::-webkit-scrollbar-thumb, #topicreview::-webkit-scrollbar-thumb, #post_details::-webkit-scrollbar-thumb, .codebox code::-webkit-scrollbar-thumb, .attachbox dd::-webkit-scrollbar-thumb, .attach-image::-webkit-scrollbar-thumb, #notification_list ul::-webkit-scrollbar-thumb {
|
||||
background: rgba(0, 0, 0, .3);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
@@ -118,7 +118,7 @@ ul.cplist {
|
||||
#tabs {
|
||||
line-height: normal;
|
||||
margin: 20px 0 -1px 7px;
|
||||
min-width: 570px;
|
||||
*overflow: hidden;
|
||||
}
|
||||
|
||||
#tabs ul {
|
||||
@@ -127,6 +127,12 @@ ul.cplist {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#tabs ul:after {
|
||||
content: '';
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
#tabs li {
|
||||
display: inline;
|
||||
margin: 0;
|
||||
@@ -210,6 +216,79 @@ ul.cplist {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Responsive tabs
|
||||
----------------------------------------*/
|
||||
.responsive-tab .responsive-tab-link span {
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
position: relative;
|
||||
width: 16px;
|
||||
line-height: 14px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#minitabs .responsive-tab .responsive-tab-link span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.responsive-tab .responsive-tab-link span:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
top: 8px;
|
||||
height: .125em;
|
||||
width: 14px;
|
||||
border-bottom: 0.125em solid transparent;
|
||||
border-top: 0.375em double transparent;
|
||||
}
|
||||
|
||||
#minitabs .responsive-tab .responsive-tab-link span:before {
|
||||
left: 0;
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
#tabs ul, #minitabs ul {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#tabs ul.responsive-tabs, #minitabs ul.responsive-tabs {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 26px;
|
||||
z-index: 2;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
#minitabs ul.responsive-tabs {
|
||||
top: 23px;
|
||||
}
|
||||
|
||||
.tabs-container #minitabs ul.responsive-tabs {
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#tabs .responsive-tabs li, #minitabs .responsive-tabs li {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
#tabs .responsive-tabs a, #tabs .responsive-tabs a span, #minitabs .responsive-tabs a, #minitabs .responsive-tabs a span {
|
||||
background: transparent;
|
||||
float: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.tabs-container #minitabs .responsive-tabs a span {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#tabs .responsive-tabs a span, #minitabs .responsive-tabs a span {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
/* UCP navigation menu
|
||||
----------------------------------------*/
|
||||
/* Container for sub-navigation list */
|
||||
|
||||
BIN
phpBB/styles/prosilver/theme/images/icon_post_menu.png
Normal file
BIN
phpBB/styles/prosilver/theme/images/icon_post_menu.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
515
phpBB/styles/prosilver/theme/responsive.css
Normal file
515
phpBB/styles/prosilver/theme/responsive.css
Normal file
@@ -0,0 +1,515 @@
|
||||
/* Responsive Design
|
||||
---------------------------------------- */
|
||||
|
||||
.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 5px;
|
||||
}
|
||||
|
||||
#wrap {
|
||||
min-width: 320px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* 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-box {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Navigation
|
||||
----------------------------------------*/
|
||||
.headerbar + .navbar {
|
||||
margin-top: -5px;
|
||||
}
|
||||
|
||||
/* Search
|
||||
----------------------------------------*/
|
||||
.responsive-search { display: block !important; }
|
||||
.responsive-search a {
|
||||
display: block;
|
||||
width: 16px;
|
||||
height: 18px;
|
||||
text-indent: 99px;
|
||||
overflow: hidden;
|
||||
background-position: 50% 50%;
|
||||
background-repeat: no-repeat;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* .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, ul.topiclist.topics dt {
|
||||
margin-right: -250px;
|
||||
}
|
||||
ul.topiclist.forums dt .list-inner, ul.topiclist.topics dt .list-inner {
|
||||
margin-right: 250px;
|
||||
padding-bottom: 18px;
|
||||
}
|
||||
|
||||
ul.topiclist.forums dd.lastpost, ul.topiclist.topics dd.lastpost {
|
||||
display: block;
|
||||
}
|
||||
|
||||
ul.topiclist.forums dd.topics, ul.topiclist.topics dd.posts {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 45px;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
min-height: 0;
|
||||
height: auto;
|
||||
border-width: 0;
|
||||
margin: 0;
|
||||
padding: 5px 0;
|
||||
width: auto;
|
||||
min-width: 0;
|
||||
text-align: left;
|
||||
font-weight: bold;
|
||||
font-size: 1.2em;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 550px), only screen and (max-device-width: 550px)
|
||||
{
|
||||
ul.topiclist.forums dt, ul.topiclist.topics dt {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
ul.topiclist.forums dt .list-inner, ul.topiclist.topics dt .list-inner {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
ul.topiclist.forums dd.lastpost, ul.topiclist.topics dd.lastpost {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Notifications list
|
||||
----------------------------------------*/
|
||||
@media only screen and (max-width: 350px), only screen and (max-device-width: 350px)
|
||||
{
|
||||
#notification_list {
|
||||
width: 250px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Pagination
|
||||
----------------------------------------*/
|
||||
.pagination {
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
/* *CP navigation
|
||||
----------------------------------------*/
|
||||
.nojs #tabs a span, .nojs #minitabs a span {
|
||||
max-width: 40px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
letter-spacing: -.5px;
|
||||
}
|
||||
|
||||
#cp-menu, #navigation, #cp-main {
|
||||
float: none;
|
||||
width: auto;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#navigation {
|
||||
padding: 0;
|
||||
margin: 0 auto;
|
||||
max-width: 320px;
|
||||
}
|
||||
|
||||
#navigation a {
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
#navigation li:first-child a {
|
||||
border-top-left-radius: 5px;
|
||||
border-top-right-radius: 5px;
|
||||
}
|
||||
|
||||
#navigation li:last-child a {
|
||||
border-bottom-left-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
}
|
||||
|
||||
/* 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 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: 20px;
|
||||
}
|
||||
|
||||
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 table, #colour_palette tbody, #colour_palette tr {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#colour_palette td {
|
||||
display: inline-block;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
#colour_palette td:nth-child(2n) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#colour_palette a {
|
||||
display: inline-block !important;
|
||||
}
|
||||
|
||||
/* User profile
|
||||
----------------------------------------*/
|
||||
.column1, .column2, .left-box.profile-details {
|
||||
float: none;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 500px), only screen and (max-device-width: 500px)
|
||||
{
|
||||
dl.details dt, dl.details dd {
|
||||
width: auto;
|
||||
float: none;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
dl.details dd {
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 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
|
||||
----------------------------------------*/
|
||||
.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;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.postprofile dd {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.postprofile dt, .postprofile dd.profile-rank, .search .postprofile dd {
|
||||
display: block;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.postprofile ul.profile-icons {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.postprofile .avatar {
|
||||
display: block;
|
||||
float: left;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.postprofile .avatar img {
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
display: block;
|
||||
max-height: 32px;
|
||||
}
|
||||
|
||||
/* Misc stuff
|
||||
----------------------------------------*/
|
||||
h2 {
|
||||
margin-top: .5em;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: .5em;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
p.rightside {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.column1, .column2 {
|
||||
width: auto;
|
||||
float: none;
|
||||
}
|
||||
|
||||
.topic-actions {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
fieldset.quickmod {
|
||||
width: auto;
|
||||
float: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
dl.mini dd.pm-legend {
|
||||
float: left;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
#topicreview {
|
||||
margin: 0 -5px;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
fieldset.display-actions {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 500px), only screen and (max-device-width: 500px)
|
||||
{
|
||||
p.responsive-center {
|
||||
float: none;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.topic-actions > div {
|
||||
float: none;
|
||||
overflow: hidden;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.topic-actions > .pagination, fieldset.jumpbox {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.topic-actions > .pagination {
|
||||
padding-bottom: 1px;
|
||||
}
|
||||
|
||||
.topic-actions > div.search-box, p.jumpbox-return {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.display-options > label:nth-child(1) {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user