mod/forum/styles.css

   1 /**
   2  * Structure of a forum post
   3  * div.forumpost(.read.unread)
   4  *     div.header.row
   5  *         div.picture.left
   6  *         div.topic(.starter)
   7  *             div.subject
   8  *             div.author
   9  *     div.row
  10  *         div.side.left
  11  *         div.content-mask
  12  *             div.content
  13  *                 div.attachments
  14  *                 div.posting(.shortenedpost|.fullpost)
  15  *                     // message
  16  *                 div.attachedimages
  17  *                     // attachedimages
  18  *     div.row
  19  *         div.left
  20  *         div.options
  21  *             div.commands
  22  *             div.post-word-count
  23  *             div.forum-post-rating
  24  *             div.link
  25  *             div.footer
  26  */
  27
  28 .forumpost {
  29     display: block;
  30     position: relative;
  31     margin: 0 0 1em 0;
  32     padding: 0;
  33     border: 1px solid #000;
  34     max-width: 100%;
  35 }
  36
  37 .forumpost .row {
  38     width: 100%;
  39     position: relative;
  40 }
  41
  42 .forumpost .row .left {
  43     float: left;
  44     width: 43px;
  45     overflow: hidden;
  46 }
  47
  48 .forumpost .row .left .grouppictures a {
  49     text-align: center;
  50     display: block;
  51     margin: 6px 2px 0 2px;
  52 }
  53
  54 .forumpost .row .left .grouppicture {
  55     width: 20px;
  56     height: 20px;
  57 }
  58
  59 .forumpost .row .topic,
  60 .forumpost .row .content-mask,
  61 .forumpost .row .options {
  62     margin-left: 43px;
  63 }
  64
  65 .forumpost .picture img {
  66     margin: 4px;
  67 }
  68
  69 .forumpost .options .commands,
  70 .forumpost .content .attachments,
  71 .forumpost .options .footer,
  72 .forumpost .options .link {
  73     text-align: right;
  74 }
  75
  76 .forumpost .options .forum-post-rating {
  77     float: left;
  78 }
  79
  80 .forumpost .content .posting {
  81     overflow: auto;
  82     max-width: 100%;
  83 }
  84
  85 .forumpost .content .attachedimages img {
  86     max-width: 100%;
  87 }
  88
  89 .forumpost .post-word-count {
  90     font-size: .85em;
  91     font-style: italic;
  92 }
  93
  94 .forumpost .shortenedpost .post-word-count {
  95     display: inline;
  96     padding: 0 .3em;
  97 }
  98
  99 .path-mod-forum .forumolddiscuss,
 100 #page-mod-forum-search .c0 {
 101     text-align: right;
 102 }
 103
 104 .path-mod-forum .indent {
 105     margin-left: 3%;
 106 }
 107
 108 .path-mod-forum .forumheaderlist {
 109     width: 100%;
 110     border-width: 1px;
 111     border-style: solid;
 112     border-collapse: separate;
 113     margin-top: 10px;
 114 }
 115
 116 .path-mod-forum .forumheaderlist td {
 117     border-width: 1px 0 0 1px;
 118     border-style: solid;
 119 }
 120
 121 .path-mod-forum .forumheaderlist th.header.replies .iconsmall {
 122     margin: 0 .3em;
 123 }
 124
 125 .path-mod-forum .forumheaderlist .discussion .starter {
 126     vertical-align: middle;
 127 }
 128
 129 .path-mod-forum .forumheaderlist .discussion .pinned img {
 130     padding: 5px;
 131 }
 132
 133 .path-mod-forum .forumheaderlist .discussion .lastpost {
 134     white-space: nowrap;
 135     text-align: right;
 136 }
 137
 138 .path-mod-forum .forumheaderlist .replies {
 139     white-space: nowrap;
 140 }
 141
 142 .path-mod-forum .forumheaderlist thead .discussionsubscription {
 143     text-align: center;
 144 }
 145
 146 /** Styles for subscribers.php */
 147 #page-mod-forum-subscribers .subscriberdiv,
 148 #page-mod-forum-subscribers .subscribertable {
 149     width: 100%;
 150     vertical-align: top;
 151 }
 152
 153 #page-mod-forum-subscribers .subscribertable tr td {
 154     vertical-align: top;
 155 }
 156
 157 #page-mod-forum-subscribers .subscribertable tr td.actions {
 158     width: 16%;
 159     padding-top: 3em;
 160 }
 161
 162 #page-mod-forum-subscribers .subscribertable tr td.actions .actionbutton {
 163     margin: 0.3em 0;
 164     padding: 0.5em 0;
 165     width: 100%;
 166 }
 167
 168 #page-mod-forum-subscribers .subscribertable tr td.existing,
 169 #page-mod-forum-subscribers .subscribertable tr td.potential {
 170     width: 42%;
 171 }
 172
 173 /** Styles for discuss.php **/
 174 #page-mod-forum-discuss .discussioncontrols {
 175     width: 100%;
 176     margin: 5px;
 177 }
 178
 179 #page-mod-forum-discuss .discussioncontrols .controlscontainer {
 180     width: 100%;
 181     float: right;
 182 }
 183
 184 #page-mod-forum-discuss .discussioncontrols .discussioncontrol {
 185     float: left;
 186 }
 187
 188 #page-mod-forum-discuss .discussioncontrol.exporttoportfolio {
 189     text-align: left;
 190 }
 191
 192 #page-mod-forum-discuss .discussioncontrol.displaymode {
 193     padding-right: 10px;
 194 }
 195
 196 #page-mod-forum-discuss .discussioncontrol.movediscussion {
 197     padding-right: 10px;
 198 }
 199
 200 /** Styles for view.php **/
 201 #page-mod-forum-view .forumaddnew {
 202     margin-bottom: 20px;
 203 }
 204
 205 #page-mod-forum-view .groupmenu {
 206     float: left;
 207     text-align: left;
 208     white-space: nowrap;
 209 }
 210
 211 #page-mod-forum-index .subscription,
 212 #page-mod-forum-view .subscription {
 213     float: right;
 214     text-align: right;
 215     white-space: nowrap;
 216     margin: 5px 0;
 217 }
 218
 219 .discussion-list .userpicture,
 220 .discussion-list .grouppicture {
 221     height: 35px;
 222     width: 35px;
 223 }
 224
 225 /** Styles for search.php */
 226 #page-mod-forum-search .introcontent {
 227     padding: 15px;
 228     font-weight: bold;
 229 }
 230
 231 .path-mod-forum span.unread a:first-child {
 232     padding-right: 10px;
 233 }
 234
 235 .path-mod-forum span.unread img {
 236     margin-left: 5px;
 237 }
 238
 239 /** Unknown Styles ??? */
 240 #email .unsubscribelink {
 241     margin-top: 20px;
 242 }
 243
 244 /* Forumpost unread
 245 -------------------------*/
 246 .forumpost.unread .row.header,
 247 .path-course-view .unread,
 248 span.unread {
 249     background-color: #ffd;
 250 }
 251
 252 .forumpost.unread .row.header {
 253     border-bottom: 1px solid #ddd;
 254 }
 255
 256 /* Forumpost hash anchor target */
 257 .path-mod-forum :target > .forumpost:before {
 258     display: block;
 259     content: '';
 260     width: 4px;
 261     position: absolute;
 262     background: #0070a8;
 263     left: -1px;
 264     top: -1px;
 265     bottom: -1px;
 266 }
 267
 268 /* Discussion navigation */
 269 .path-mod-forum .discussion-nav {
 270     margin: .5em 0;
 271 }
 272
 273 .path-mod-forum .discussion-nav ul {
 274     margin: 0;
 275     list-style: none;
 276     padding-left: 0;
 277 }
 278
 279 .path-mod-forum .discussion-nav .next-discussion {
 280     float: right;
 281 }
 282
 283 .path-mod-forum .discussion-nav .prev-discussion {
 284     float: left;
 285 }
 286
 287 .path-mod-forum .preload-subscribe {
 288     background: url([[pix:mod_forum|t/subscribed]]) no-repeat -9999px -9999px;
 289 }
 290
 291 .path-mod-forum .preload-unsubscribe {
 292     background: url([[pix:mod_forum|t/unsubscribed]]) no-repeat -9999px -9999px;
 293 }
 294
 295 .path-mod-forum .discussionsubscription,
 296 .path-mod-forum .discussion-settings-menu,
 297 .path-mod-forum .discussionsubscription {
 298     margin-top: -10px;
 299     text-align: right;
 300     margin-bottom: 10px;
 301 }
 302
 303 .path-mod-forum .discussionsubscription > a > img,
 304 .path-mod-forum .discussionlock > a > img,
 305 .path-mod-forum .favourite-discussion > a > img,
 306 .path-mod-forum .discussion-settings-menu > a > img {
 307     width: 12px;
 308     padding: 0 4px;
 309 }
 310
 311 #page-mod-forum-view img.timedpost {
 312     margin-right: 5px;
 313 }
 314
 315 .path-mod-forum article .nav .nav-link:first-of-type {
 316     margin-left: auto;
 317 }
 318 .path-mod-forum.dir-rtl article .nav .nav-link:first-of-type {
 319     margin-left: 0;
 320     margin-right: auto;
 321 }
 322
 323 .path-mod-forum article .nav .nav-link + .nav-link {
 324     border-left: 1px solid #ddd;
 325 }
 326
 327 .privatereplyinfo {
 328     font-size: 80%;
 329 }
 330
 331 .forum-post-container:focus {
 332     outline: 0;
 333 }
 334
 335 /* This style is copied directly from the Bootstrap reboot file which adds button outline */
 336 /* stylelint-disable declaration-block-no-duplicate-properties */
 337 .post-actions .btn:focus {
 338     outline: 1px dotted;
 339     outline: 5px auto -webkit-focus-ring-color;
 340 }
 341
 342 .forum-post-container:focus > .focus-target {
 343     outline: 1px dotted;
 344     outline: 5px auto -webkit-focus-ring-color;
 345 }
 346 /* stylelint-enable declaration-block-no-duplicate-properties */
 347
 348 /* Forum grading non striked through line */
 349 .hr-sect {
 350     display: flex;
 351     flex-basis: 100%;
 352     font-weight: bold;
 353     align-items: center;
 354     margin: 8px 0;
 355 }
 356 .hr-sect::before,
 357 .hr-sect::after {
 358     content: "";
 359     flex-grow: 1;
 360     background: rgba(0, 0, 0, 0.35);
 361     height: 1px;
 362     font-size: 0;
 363     line-height: 0;
 364 }
 365 .hr-sect::before {
 366     margin-right: 15px;
 367 }
 368
 369 .hr-sect::after {
 370     margin-left: 15px;
 371 }