[Summary view] [Print] [Text view]

   1  /* Control Panel Styles
   2  ---------------------------------------- */
   3  
   4  
   5  /* Main CP box
   6  ----------------------------------------*/
   7  #cp-menu {
   8      float:left;
   9      width: 19%;
  10      margin-top: 1em;
  11      margin-bottom: 5px;
  12  }
  13  
  14  #cp-main {
  15      float: left;
  16      width: 81%;
  17  }
  18  
  19  #cp-main .content {
  20      padding: 0;
  21  }
  22  
  23  .panel-container .panel p {
  24      font-size: 1.1em;
  25  }
  26  
  27  .panel-container .panel ol {
  28      margin-left: 2em;
  29      font-size: 1.1em;
  30  }
  31  
  32  .panel-container .panel li.row {
  33      border-bottom: 1px solid transparent;
  34      border-top: 1px solid transparent;
  35  }
  36  
  37  ul.cplist {
  38      margin-bottom: 5px;
  39      border-top: 1px solid transparent;
  40  }
  41  
  42  .panel-container .panel li.header dd, .panel-container .panel li.header dt {
  43      margin-bottom: 2px;
  44  }
  45  
  46  .panel-container table.table1 {
  47      margin-bottom: 1em;
  48  }
  49  
  50  .panel-container table.table1 thead th {
  51      font-weight: bold;
  52      border-bottom: 1px solid transparent;
  53      padding: 5px;
  54  }
  55  
  56  .panel-container table.table1 tbody th {
  57      font-style: italic;
  58      background-color: transparent !important;
  59      border-bottom: none;
  60  }
  61  
  62  #cp-main .pm-message {
  63      border: 1px solid transparent;
  64      margin: 10px 0;
  65      width: auto;
  66      float: none;
  67  }
  68  
  69  .pm-message h2 {
  70      padding-bottom: 5px;
  71  }
  72  
  73  #cp-main .postbody h3, #cp-main .box2 h3 {
  74      margin-top: 0;
  75  }
  76  
  77  .panel-container .postbody p.author {
  78      font-size: 1.1em;
  79  }
  80  
  81  #cp-main .buttons {
  82      margin-left: 0;
  83  }
  84  
  85  #cp-main ul.linklist {
  86      margin: 0;
  87  }
  88  
  89  /* MCP Specific tweaks */
  90  .mcp-main .postbody {
  91      width: 100%;
  92  }
  93  
  94  .tabs-container h2 {
  95      float: left;
  96      margin-bottom: 0px;
  97  }
  98  
  99  /* CP tabs shared
 100  ----------------------------------------*/
 101  #tabs, #minitabs {
 102      line-height: normal;
 103  }
 104  
 105  #tabs > ul, #minitabs > ul {
 106      list-style: none;
 107      margin: 0;
 108      padding: 0;
 109      position: relative;
 110  }
 111  
 112  #tabs .tab, #minitabs .tab {
 113      display: block;
 114      float: left;
 115      font-size: 1em;
 116      font-weight: bold;
 117      line-height: 1.4em;
 118  }
 119  
 120  #tabs .tab > a, #minitabs .tab > a {
 121      display: block;
 122      padding: 5px 9px;
 123      position: relative;
 124      text-decoration: none;
 125      white-space: nowrap;
 126      cursor: pointer;
 127  }
 128  
 129  /* CP tabbed menu
 130  ----------------------------------------*/
 131  #tabs {
 132      margin: 20px 0 0 7px;
 133  }
 134  
 135  #tabs .tab > a {
 136      border: 1px solid transparent;
 137      border-radius: 4px 4px 0 0;
 138      margin: 1px 1px 0 0;
 139  }
 140  
 141  #tabs .activetab > a {
 142      margin-top: 0;
 143      padding-bottom: 7px;
 144  }
 145  
 146  /* Mini tabbed menu used in MCP
 147  ----------------------------------------*/
 148  #minitabs {
 149      float: right;
 150      margin: 15px 7px 0 0;
 151      max-width: 50%;
 152  }
 153  
 154  #minitabs .tab {
 155      float: right;
 156  }
 157  
 158  #minitabs .tab > a {
 159      border-radius: 5px 5px 0 0;
 160      margin-left: 2px;
 161  }
 162  
 163  #minitabs .tab > a:hover {
 164      text-decoration: none;
 165  }
 166  
 167  /* Responsive tabs
 168  ----------------------------------------*/
 169  .responsive-tab {
 170      position: relative;
 171  }
 172  
 173  .responsive-tab > a.responsive-tab-link {
 174      display: block;
 175      font-size: 1.6em;
 176      position: relative;
 177      width: 16px;
 178      line-height: 0.9em;
 179      text-decoration: none;
 180  }
 181  
 182  .responsive-tab .responsive-tab-link:before {
 183      content: '';
 184      position: absolute;
 185      left: 10px;
 186      top: 7px;
 187      height: .125em;
 188      width: 14px;
 189      border-bottom: 0.125em solid transparent;
 190      border-top: 0.375em double transparent;
 191  }
 192  
 193  #tabs .dropdown, #minitabs .dropdown {
 194      top: 20px;
 195      margin-right: -2px;
 196      font-size: 1.1em;
 197      font-weight: normal;
 198  }
 199  
 200  #minitabs .dropdown {
 201      margin-right: -4px;
 202  }
 203  
 204  #tabs .dropdown-up .dropdown, #minitabs .dropdown-up .dropdown {
 205      bottom: 20px;
 206      top: auto;
 207  }
 208  
 209  #tabs .dropdown li {
 210      text-align: right;
 211  }
 212  
 213  #minitabs .dropdown li {
 214      text-align: left;
 215  }
 216  
 217  /* UCP navigation menu
 218  ----------------------------------------*/
 219  /* Container for sub-navigation list */
 220  #navigation {
 221      width: 100%;
 222      padding-top: 36px;
 223  }
 224  
 225  #navigation ul {
 226      list-style: none;
 227  }
 228  
 229  /* Default list state */
 230  #navigation li {
 231      display: inline;
 232      font-weight: bold;
 233      margin: 1px 0;
 234      padding: 0;
 235  }
 236  
 237  /* Link styles for the sub-section links */
 238  #navigation a {
 239      display: block;
 240      padding: 5px;
 241      margin: 1px 0;
 242      text-decoration: none;
 243  }
 244  
 245  #navigation a:hover {
 246      text-decoration: none;
 247  }
 248  
 249  /* Preferences pane layout
 250  ----------------------------------------*/
 251  #cp-main h2 {
 252      border-bottom: none;
 253      padding: 0;
 254      margin-left: 10px;
 255  }
 256  
 257  /* Friends list */
 258  .cp-mini {
 259      margin: 10px 15px 10px 5px;
 260      max-height: 200px;
 261      overflow-y: auto;
 262      padding: 5px 10px;
 263      border-radius: 7px;
 264  }
 265  
 266  dl.mini dt {
 267      font-weight: bold;
 268  }
 269  
 270  dl.mini dd {
 271      padding-top: 4px;
 272  }
 273  
 274  .friend-online {
 275      font-weight: bold;
 276  }
 277  
 278  .friend-offline {
 279      font-style: italic;
 280  }
 281  
 282  /* PM Styles
 283  ----------------------------------------*/
 284  #pm-menu {
 285      line-height: 2.5em;
 286  }
 287  
 288  /* Defined rules list for PM options */
 289  ol.def-rules {
 290      padding-left: 0;
 291  }
 292  
 293  ol.def-rules li {
 294      line-height: 180%;
 295      padding: 1px;
 296  }
 297  
 298  /* PM marking colours */
 299  .pmlist li.bg1 {
 300      padding: 0 3px;
 301  }
 302  
 303  .pmlist li.bg2 {
 304      padding: 0 3px;
 305  }
 306  
 307  .pmlist li.pm_message_reported_colour, .pm_message_reported_colour {
 308      border-left-color: transparent;
 309      border-right-color: transparent;
 310  }
 311  
 312  .pmlist li.pm_marked_colour, .pm_marked_colour,
 313  .pmlist li.pm_replied_colour, .pm_replied_colour,
 314  .pmlist li.pm_friend_colour, .pm_friend_colour,
 315  .pmlist li.pm_foe_colour, .pm_foe_colour {
 316      padding: 0;
 317      border: solid 3px transparent;
 318      border-width: 0 3px;
 319  }
 320  
 321  .pm-legend {
 322      border-left-width: 10px;
 323      border-left-style: solid;
 324      border-right-width: 0;
 325      margin-bottom: 3px;
 326      padding-left: 3px;
 327  }
 328  
 329  /* Avatar gallery */
 330  #gallery label {
 331      position: relative;
 332      float: left;
 333      margin: 10px;
 334      padding: 5px;
 335      width: auto;
 336      border: 1px solid transparent;
 337      text-align: center;
 338  }
 339  
 340  /* Responsive *CP navigation
 341  ----------------------------------------*/
 342  @media only screen and (max-width: 900px), only screen and (max-device-width: 900px)
 343  {
 344      .nojs #tabs a span, .nojs #minitabs a span {
 345          max-width: 40px;
 346          overflow: hidden;
 347          text-overflow: ellipsis;
 348          letter-spacing: -.5px;
 349      }
 350  
 351      #cp-menu, #navigation, #cp-main {
 352          float: none;
 353          width: auto;
 354          margin: 0;
 355      }
 356  
 357      #navigation {
 358          padding: 0;
 359          margin: 0 auto;
 360          max-width: 320px;
 361      }
 362  
 363      #navigation a {
 364          background-image: none;
 365      }
 366  
 367      #navigation li:first-child a {
 368          border-top-left-radius: 5px;
 369          border-top-right-radius: 5px;
 370      }
 371  
 372      #navigation li:last-child a {
 373          border-bottom-left-radius: 5px;
 374          border-bottom-right-radius: 5px;
 375      }
 376  }