grade/grading/form/rubric/styles.css

   1 /*
   2 .gradingform_rubric.editor[.frozen|.editable]
   3   .criteria
   4     .criterion[.first][.last][.odd|.even]
   5         .controls
   6             .moveup
   7                 [input type=submit]
   8             .delete
   9                 [input type=submit]
  10             .movedown
  11                 [input type=submit]
  12         .description
  13         .levels
  14             td.level[.first][.last][.odd|.even]
  15                 div.level-wrapper
  16                     .definition
  17                         [textarea]
  18                     .score
  19                         span
  20                             [input type=text]
  21                     .delete
  22                         [input type=submit]
  23         .addlevel
  24             [input type=submit]
  25         .remark
  26             textarea
  27     .addcriterion
  28         [input type=submit]
  29   .options
  30     .optionsheading
  31     .option.OPTIONNAME
  32
  33 .gradingform_rubric[.review][.evaluate[.editable|.frozen]]
  34   .criteria
  35     .criterion[.first][.last][.odd|.even]
  36         .description
  37         .levels
  38             td.level[.first][.last][.odd|.even]
  39                 div.level-wrapper
  40                     div.radio
  41                         input
  42                     .definition
  43                     .score
  44                         span
  45
  46 */
  47
  48 .gradingform_rubric_editform .status {
  49     font-weight: normal;
  50     text-transform: uppercase;
  51     font-size: 60%;
  52     padding: 0.25em;
  53     border: 1px solid #eee;
  54 }
  55
  56 .gradingform_rubric_editform .status.ready {
  57     background-color: #e7f1c3;
  58     border-color: #aea;
  59 }
  60
  61 .gradingform_rubric_editform .status.draft {
  62     background-color: #f3f2aa;
  63     border-color: #ee2;
  64 }
  65
  66 .gradingform_rubric {
  67     padding-bottom: 1.5em;
  68 }
  69
  70 .gradingform_rubric.editor .criterion .controls,
  71 .gradingform_rubric .criterion .description,
  72 .gradingform_rubric .criterion .levels,
  73 .gradingform_rubric.editor .criterion .addlevel,
  74 .gradingform_rubric .criterion .remark,
  75 .gradingform_rubric .criterion .levels .level {
  76     vertical-align: top;
  77 }
  78
  79 .gradingform_rubric.editor .criterion .controls,
  80 .gradingform_rubric .criterion .description,
  81 .gradingform_rubric.editor .criterion .addlevel,
  82 .gradingform_rubric .criterion .remark,
  83 .gradingform_rubric .criterion .levels .level {
  84     padding: 3px;
  85 }
  86
  87 .gradingform_rubric .criteria {
  88     height: 100%;
  89     display: flex;
  90     width: 100%;
  91     overflow: auto;
  92 }
  93
  94 .gradingform_rubric .criterion {
  95     border: 1px solid #ddd;
  96     overflow: hidden;
  97 }
  98
  99 .gradingform_rubric .criterion.even {
 100     background: #f0f0f0;
 101 }
 102
 103 .gradingform_rubric .criterion .description {
 104     min-width: 150px;
 105     font-weight: bold;
 106 }
 107
 108 .gradingform_rubric .criterion .levels table {
 109     width: 100%;
 110     height: 100%;
 111 }
 112
 113 .gradingform_rubric .criterion .levels,
 114 .gradingform_rubric .criterion .levels table,
 115 .gradingform_rubric .criterion .levels table tbody {
 116     padding: 0;
 117     margin: 0;
 118 }
 119
 120 .gradingform_rubric .criterion .levels .level {
 121     border-left: 1px solid #ddd;
 122     max-width: 150px;
 123 }
 124
 125 .gradingform_rubric .criterion .levels .level .level-wrapper {
 126     position: relative;
 127 }
 128
 129 .gradingform_rubric .criterion .levels .level.last {
 130     border-right: 1px solid #ddd;
 131 }
 132
 133 .gradingform_rubric .plainvalue.empty {
 134     font-style: italic;
 135     color: #aaa;
 136 }
 137
 138 .gradingform_rubric.editor .criterion .levels .level .delete {
 139     position: absolute;
 140     right: 0;
 141 }
 142
 143 .gradingform_rubric .criterion .levels .level .score {
 144     font-style: italic;
 145     color: #575;
 146     font-weight: bold;
 147     margin-top: 5px;
 148     white-space: nowrap;
 149 }
 150
 151 .gradingform_rubric .criterion .levels .level .score .scorevalue {
 152     padding-right: 5px;
 153 }
 154
 155 /* Make invisible the buttons 'Move up' for the first criterion and
 156    'Move down' for the last, because those buttons will make no change */
 157 .gradingform_rubric.editor .criterion.first .controls .moveup input,
 158 .gradingform_rubric.editor .criterion.last .controls .movedown input {
 159     display: none;
 160 }
 161
 162 /* evaluation */
 163 .gradingform_rubric .criterion .levels .level.currentchecked {
 164     background: #fff0f0;
 165 }
 166
 167 .gradingform_rubric .criterion .levels .level.checked {
 168     background: #d0ffd0;
 169     border: 1px solid #555;
 170 }
 171
 172 .gradingform_rubric.evaluate .criterion .levels .level:hover {
 173     background: #30ff30;
 174 }
 175
 176 /* replace buttons with images */
 177 .gradingform_rubric.editor .delete input,
 178 .gradingform_rubric.editor .duplicate input,
 179 .gradingform_rubric.editor .moveup input,
 180 .gradingform_rubric.editor .movedown input {
 181     text-indent: -1000em;
 182     cursor: pointer;
 183     border: none;
 184 }
 185
 186 .gradingform_rubric.editor .criterion .controls .delete input {
 187     width: 12px;
 188     height: 12px;
 189     background: transparent url([[pix:t/delete]]) no-repeat center top;
 190     margin: .3em .3em 0 .3em;
 191 }
 192
 193 .gradingform_rubric.editor .criterion .controls .duplicate input {
 194     width: 12px;
 195     height: 12px;
 196     background: transparent url([[pix:t/copy]]) no-repeat center top;
 197     margin: .3em .3em 0 .3em;
 198 }
 199
 200 .gradingform_rubric.editor .levels .level .delete input {
 201     width: 12px;
 202     height: 16px;
 203     background: transparent url([[pix:t/delete]]) no-repeat center center;
 204 }
 205
 206 .gradingform_rubric.editor .moveup input {
 207     width: 12px;
 208     height: 12px;
 209     background: transparent url([[pix:t/up]]) no-repeat center top;
 210     margin: .3em .3em 0 .3em;
 211 }
 212
 213 .gradingform_rubric.editor .movedown input {
 214     width: 12px;
 215     height: 12px;
 216     background: transparent url([[pix:t/down]]) no-repeat center top;
 217     margin: .3em .3em 0 .3em;
 218 }
 219
 220 .gradingform_rubric.editor .addcriterion input,
 221 .gradingform_rubric.editor .addlevel input {
 222     background: #fff url([[pix:t/add]]) no-repeat 7px 8px;
 223     display: block;
 224     color: #555;
 225     font-weight: bold;
 226     text-decoration: none;
 227 }
 228
 229 .gradingform_rubric.editor .addcriterion input {
 230     height: 30px;
 231     line-height: 29px;
 232     margin-bottom: 14px;
 233     padding-left: 20px;
 234     padding-right: 10px;
 235 }
 236
 237 .gradingform_rubric.editor .addlevel input {
 238     padding-left: 24px;
 239     padding-right: 8px;
 240 }
 241
 242 .gradingform_rubric .options .optionsheading {
 243     font-weight: bold;
 244     font-size: 1.1em;
 245     padding-bottom: 5px;
 246 }
 247
 248 .gradingform_rubric .options .option {
 249     padding-bottom: 2px;
 250 }
 251
 252 .gradingform_rubric .options .option label {
 253     margin-left: 5px;
 254 }
 255
 256 .gradingform_rubric .options .option .value {
 257     margin-left: 5px;
 258     font-weight: bold;
 259 }
 260
 261 .gradingform_rubric .criterion .levels.error {
 262     border: 1px solid red;
 263 }
 264
 265 .gradingform_rubric .criterion .description.error,
 266 .gradingform_rubric .criterion .levels .level .definition.error,
 267 .gradingform_rubric .criterion .levels .level .score.error {
 268     background: #fdd;
 269 }
 270
 271 .gradingform_rubric-regrade {
 272     padding: 10px;
 273     background: #fdd;
 274     border: 1px solid #f00;
 275     margin-bottom: 10px;
 276 }
 277
 278 .gradingform_rubric-restored {
 279     padding: 10px;
 280     background: #ffd;
 281     border: 1px solid #ff0;
 282     margin-bottom: 10px;
 283 }
 284
 285 .gradingform_rubric-error {
 286     color: red;
 287     font-weight: bold;
 288 }
 289
 290 /* special classes for elements created by rubriceditor.js */
 291 .gradingform_rubric.editor .hiddenelement {
 292     display: none;
 293 }
 294
 295 .gradingform_rubric.editor .pseudotablink {
 296     background-color: transparent;
 297     border: 0 solid;
 298     height: 1px;
 299     width: 1px;
 300     color: transparent;
 301     padding: 0;
 302     margin: 0;
 303     position: relative;
 304     float: right;
 305 }
 306
 307 .gradingpanel-gradingform_rubric [aria-checked="true"] {
 308     border: 1px solid black;
 309 }