[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  /* Defined rules list for PM options */
 285  ol.def-rules {
 286      padding-left: 0;
 287  }
 288  
 289  ol.def-rules li {
 290      line-height: 180%;
 291      padding: 1px;
 292  }
 293  
 294  /* PM marking colours */
 295  .pmlist li.bg1 {
 296      padding: 0 3px;
 297  }
 298  
 299  .pmlist li.bg2 {
 300      padding: 0 3px;
 301  }
 302  
 303  .pmlist li.pm_message_reported_colour, .pm_message_reported_colour,
 304  .pmlist li.pm_marked_colour, .pm_marked_colour,
 305  .pmlist li.pm_replied_colour, .pm_replied_colour,
 306  .pmlist li.pm_friend_colour, .pm_friend_colour,
 307  .pmlist li.pm_foe_colour, .pm_foe_colour {
 308      padding: 0;
 309      border: solid 3px transparent;
 310      border-width: 0 3px;
 311  }
 312  
 313  .pm-legend {
 314      border-left-width: 10px;
 315      border-left-style: solid;
 316      border-right-width: 0;
 317      margin-bottom: 3px;
 318      padding-left: 3px;
 319  }
 320  
 321  /* Avatar gallery */
 322  .gallery label {
 323      position: relative;
 324      float: left;
 325      margin: 10px;
 326      padding: 5px;
 327      width: auto;
 328      border: 1px solid transparent;
 329      text-align: center;
 330  }
 331  
 332  /* Responsive *CP navigation
 333  ----------------------------------------*/
 334  @media only screen and (max-width: 900px), only screen and (max-device-width: 900px)
 335  {
 336      .nojs .tabs a span, .nojs .minitabs a span {
 337          max-width: 40px;
 338          overflow: hidden;
 339          text-overflow: ellipsis;
 340          letter-spacing: -.5px;
 341      }
 342  
 343      .cp-menu, .navigation, .cp-main {
 344          float: none;
 345          width: auto;
 346          margin: 0;
 347      }
 348  
 349      .navigation {
 350          padding: 0;
 351          margin: 0 auto;
 352          max-width: 320px;
 353      }
 354  
 355      .navigation a {
 356          background-image: none;
 357      }
 358  
 359      .navigation li:first-child a {
 360          border-top-left-radius: 5px;
 361          border-top-right-radius: 5px;
 362      }
 363  
 364      .navigation li:last-child a {
 365          border-bottom-left-radius: 5px;
 366          border-bottom-right-radius: 5px;
 367      }
 368  }