[Summary view] [Print] [Text view]

   1  /* some very targetted corrections to roll back nameclashes between
   2   * Moodle and Bootstrap like .row, .label, .content, .controls
   3   *
   4   * Mostly relies on these styles being more specific than the Bootstrap
   5   * ones in order to overule them.
   6   */
   7  
   8  // .label vs .label
   9  
  10  li.activity.label,
  11  .file-picker td.label {
  12      background: inherit;
  13      color: inherit;
  14      border: inherit;
  15      text-shadow: none;
  16      padding: 8px;
  17      white-space: normal;
  18      display: block;
  19      font-size: inherit;
  20      line-height: inherit;
  21  }
  22  .file-picker td.label {
  23      display: table-cell;
  24      text-align: right;
  25  }
  26  
  27  // Some of this dialog is sized in ems so a different font size
  28  // effects the whole layout.
  29  .choosercontainer #chooseform .option label {
  30      font-size: 12px;
  31  }
  32  
  33  /* block.invisible vs .invisible
  34   * block.hidden vs .invisible
  35   *
  36   * uses .invisible where the rest of Moodle uses .dimmed
  37   * fixible in block renderer?
  38   *
  39   * There's seems to be even more naming confusion here since,
  40   * blocks can be actually 'visible' (or not) to students,
  41   * marked 'visible' but really just dimmed to indicate to editors
  42   * that students can't see them or  'visible' to the user who
  43   * collapses them, 'visible' if you have the right role and in
  44   * different circumstances different sections of a block can
  45   * be 'visible' or not.
  46   *
  47   * currently worked around in renderers.php function block{}
  48   * by rewriting the class name "invisible" to "dimmed",
  49   * though the blocks don't look particularly different apart
  50   * from their contents disappearing. Maybe try .muted? or
  51   * dimming all the edit icons apart from unhide, might be a
  52   * nice effect, though they'd still be active. Maybe reverse
  53   * it to white?
  54   */
  55  
  56  li.section.hidden,
  57  .block.hidden,
  58  .block.invisible {
  59      visibility: visible;
  60      display: block;
  61  }
  62  
  63  
  64  /* .row vs .row
  65   *
  66   * very tricky to track down this when it goes wrong,
  67   * since the styles are applied to generated content
  68   *
  69   * basically if you see things shifted left or right compared
  70   * with where they should be check for a .row
  71   */
  72  
  73  #turnitintool_style .row,
  74  .forumpost .row {
  75      margin-left: 0 !important;
  76      // not sure if this needs !important
  77  }
  78  #turnitintool_style .row:before,
  79  #turnitintool_style .row:after,
  80  .forumpost .row:before,
  81  .forumpost .row:after {
  82      content: none;
  83  }
  84  /* fieldset.hidden vs .hidden
  85   *
  86   * Moodle uses fieldset.hidden for mforms, to signify a collection of
  87   * form elements that don't have a box drawn round them. Bootstrap
  88   * uses hidden for stuff that is hidden in various responsive modes.
  89   *
  90   * Relatedly, there is also fieldset.invisiblefieldset which hides the
  91   * border and sets the display to inline.
  92   *
  93   * Originally this just set block and visible, but it is used
  94   * in random question dialogue in Quiz,
  95   * that dialogue is hidden and shown, so when hidden the
  96   * above workaround leaves you with a button floating around
  97   */
  98  
  99  fieldset.hidden {
 100      display: inherit;
 101      visibility: inherit;
 102  }
 103  
 104  
 105  /* .controls vs .controls
 106   *
 107   * in expanding course list, can be fixed in renderer though
 108   */
 109  
 110  
 111  /* .btn vs .btn
 112   *
 113   * links, inputs and buttons are commonly styled with .btn in
 114   * bootstrap but it seems that some buttons in Moodle are
 115   * wrapped in div.btn e.g. the login block's "login" button
 116   */
 117  
 118  div.c1.btn {
 119      display: block;
 120      padding: 0;
 121      margin-bottom: 0;
 122      font-size: inherit;
 123      line-height: inherit;
 124      text-align: inherit;
 125      vertical-align: inherit;
 126      cursor: default;
 127      color: inherit;
 128      text-shadow: inherit;
 129      background-color: inherit;
 130      background-image: none;
 131      background-repeat: no-repeat;
 132      border: none;
 133      border-radius: 0;
 134      box-shadow: none;
 135  }
 136  /* .container vs .container
 137   *
 138   * bootstrap uses .container to set the width of the layout at 960px or so, Moodle uses it
 139   * in the Quiz to contain the questions to add. If you don't overule the Bootstrap code,
 140   * it becomes near unuseable.
 141   */
 142  
 143  #questionbank + .container {
 144      width: auto;
 145  }
 146  // In Moodle .hide is the eye icon
 147  // In Bootstrap it hides things
 148  img.hide {
 149      display: inherit;
 150  }
 151  
 152  // Bootstrap adds a background sprite to anything with classname starting "icon-".
 153  // we only want to load it if we use them in content.
 154  .icon-bar,
 155  img.icon-post,
 156  img.icon-info,
 157  img.icon-warn,
 158  img.icon-pre {
 159      background-image: none;
 160  }
 161  
 162  // Weird big margins on login page
 163  .loginbox.twocolumns,
 164  .loginbox.twocolumns {
 165      .signuppanel,
 166      .loginpanel {
 167          padding: 0px;
 168          margin: 0px;
 169      }
 170  }
 171  
 172  //Bootstrap needs tooltips to be specified. Moodle does not use this
 173  .tooltip {
 174      .opacity(100);
 175      display: inline;
 176  }
 177  
 178  // Allow the custom menu to expand/collapse when the user hovers over it with JS disabled.
 179  body:not(.jsenabled) .dropdown:hover > .dropdown-menu {
 180      display: block;
 181      margin-top: -6px; // We need to move it up to counter the arrows as they introduce hover bugs.
 182  }
 183  
 184  // Extends bootstrapbase/less/bootstrap/navbar.less
 185  // to enable scroll in the language menu.
 186  body:not(.jsenabled) .langmenu:hover > .dropdown-menu,
 187  .langmenu.open > .dropdown-menu {
 188      display: block;
 189      max-height: 150px;
 190      overflow-y: auto;
 191  }
 192  
 193  // Extends bootstrapbase/less/bootstrap/type.less
 194  // to enable ol lists to use a larger number set.
 195  
 196  ol {
 197      margin: 0 0 @baseLineHeight / 2 2.5em;
 198  }
 199  
 200  .dir-rtl {
 201      ol {
 202          margin: 0 2.5em @baseLineHeight / 2 0;
 203      }
 204  }