Project

General

Profile

Download (7.25 KB) Statistics
| Branch: | Tag: | Revision:
1
/**
2
 * @file
3
 * cdm_dataportal specific styling
4
 *
5
 * Style the markup found in the cdm_dataportal module.
6
 */
7

    
8
@import "init";
9

    
10

    
11
$page-part-margin: $base-line-height * 1;
12

    
13
// style links only for content in blocks and node and backbutton
14
// added also #identificationKey since there are not yet drupal nodes
15
// #content requires the fix below!
16
.block, .node, #identificationKey, #content {
17
  @include cdm-link-style;
18
}
19

    
20
.node-cdm-name {
21
  .name-page-name {
22
    margin-top: $zen-gutter-width / 2;
23
    margin-bottom: $zen-gutter-width / 2;
24
  }
25
  .registered_name{
26
    font-weight: bold;
27
  }
28
  .type-status {
29
    font-weight: bold;
30
  }
31
}
32

    
33
#content {
34
  a.tabs-primary__tab-link {
35
    color: #333; // increasing specificity to avoid the color of the tabs to be overwritten
36
  }
37

    
38
  table {
39
    th {
40
      text-align: left;
41
    }
42
    caption-side: top;
43
    caption {
44
      text-align: right;
45
      font-size: smaller;
46
    }
47
  }
48
}
49

    
50
  #page-toc {
51
    float:right;
52
    background-color: $page-background-color;
53
    h3 {
54
      margin-top: 0;
55
      line-height: $base-line-height;
56
    }
57
  }
58

    
59
  #taxonProfileImage{
60
    float: left;
61
  }
62

    
63
  .block-cdm-dataportal-feature {
64
    .content-caption {
65
      text-align: right;
66
    }
67
    .label { // for CategoricalData and QuantitativeData but could be used for other situations, therefore style rule is not too specific
68
      font-style: italic;
69
    }
70
  }
71

    
72
  .block-cdm-dataportal-feature,  .media-caption, .specimens { // TODO .specimens may be obsolete
73
    clear: both;
74
    margin-bottom: $page-part-margin;
75
    dt {
76
      float: left;
77
      font-weight: bold;
78
      margin-right: 0.3em;
79
    }
80
    dd {
81
      margin: 0;
82
      margin-left: $zen-gutter-width;
83
    }
84
    dl dl {
85
      margin: 0; /* reset default from cdm_dataportal.css */
86
    }
87
  }
88

    
89
  .breadcrumbs li {
90
    padding: 0 0 0 0;
91
  }
92

    
93
  .description-table .described-entities {
94
    .label {
95
      font-weight: bold;
96
    }
97

    
98
  }
99

    
100
  /*
101
   * Search results
102
   */
103

    
104

    
105
  #search_results{
106
    @include cdm-link-style;
107

    
108
    table {
109
      margin: 1em 0;
110
    }
111
  }
112

    
113
  div.cdm-item-list {
114
    .label {
115
      // color: #9a9a9a;
116
    }
117
    div.item {
118
      margin: $base-line-height / 2 0;
119
    }
120
  }
121

    
122
  /*
123
   * Taxon page and parts
124
   */
125

    
126
  .page-part {
127
    margin-bottom: $page-part-margin;
128
    clear: none;
129
  }
130

    
131
  /*
132
   * definition list container rendered by the
133
   * drupal theme function theme_description_list()
134
   */
135
  .description_list {
136
    h3 {
137
      font-size: $base-font-size;
138
      line-height: $base-line-height;
139
      font-weight: bold;
140
    }
141
  }
142

    
143

    
144

    
145
  /*
146
   * Synonymy
147
   */
148

    
149
  #synonymy {
150
    div.accepted-name {
151
      margin-bottom: -1em;
152
      margin-top: 1em;
153
    }
154

    
155
    .homotypic-synonymy-group, .heterotypic-synonymy-group, .taxon-relationships {
156
      border-bottom: 1px solid #DEDEDE;
157
      /* replace padding by margin */
158
      margin: 1em 0px;
159
      padding: 0;
160
    }
161
  }
162

    
163
  /*
164
   * Media
165
   */
166
  dl.media-caption {
167
    margin: 0;
168
  }
169
  .media-caption {
170
    dd {
171
      margin-left: 0;
172
      .title {
173
        font-size: 100%;
174
      }
175
    }
176
  }
177
  .image-gallerie td.caption {
178
    padding-bottom: 1em;
179
  }
180

    
181
  /*
182
   * specimens and type designations
183
   */
184
  #specimens {
185
    table.media_gallery {
186
      margin-top: 0.2em;
187
    }
188
    .description_list {
189
      clear: both;
190
      h3 {
191
        margin-top: 0;
192
        background-color: #ddd;
193
      }
194
      h4 {
195
        clear: left;
196
        margin-bottom: 0;
197
        font-style: italic;
198
      }
199
    }
200
    .dynabox_content {
201
      margin-left: $zen-gutter-width / 2;
202
      margin-right: $zen-gutter-width / 2;
203
    }
204
    .block-cdm-dataportal-feature {
205
      margin-left: $zen-gutter-width;
206
      margin-bottom: 0;
207
      h2 {
208
        font-size: $base-font-size;
209
        line-height: $base-line-height;
210
        font-weight: bold;
211
      }
212
    }
213

    
214
    ul.typeDesignations {
215
      clear: both;
216
    }
217
    .dna-sequence div {
218
      font-size: $base-font-size;
219
      font-family: monospace;
220
      clear: left;
221
      padding-left: $zen-gutter-width;
222
    }
223
    .derived_from {
224
      clear: both;
225
    }
226
  }
227

    
228
  // derivatives tree view (see also derivation-tree.js)
229
  $tree-entry-vspace: 0; //$base-font-size / 10; TODO remove
230
  $tree-line-style: 3px solid $tabs-border;
231
  $tree-lines-top-offset: $base-line-height / 7;
232
  $tree-lines-left-offset: $base-line-height / 7;
233
  div.derived-unit-tree,
234
  ul.derived-unit-sub-tree,
235
  ul.derived-unit-sub-tree ul {
236
    list-style: none;
237
    margin: 0 0 0 $tree-lines-left-offset;
238
    padding: 0;
239

    
240
    .unit-content {
241
      background-color: $menu-bar-background-color;
242
      margin-left: 1em;
243
    }
244
   .unit-label {
245
      cursor: pointer;
246
    }
247
    .unit-label:hover {
248
      background-color: $menu-bar-background-color;
249
    }
250
  }
251

    
252
  div.derived-unit-tree-root {
253
    .unit-content-wrapper {
254
      border-left: $tree-line-style;
255
      margin-left: $tree-lines-left-offset;
256
    }
257
    div.item-list { // class .item-list is defined by drupal theme function
258
      margin-top: $tree-lines-top-offset;
259
    }
260
  }
261

    
262
  ul.derived-unit-sub-tree{
263
    ul {
264
      margin-left: 1.0em;
265
    }
266
    li {
267
      position: relative;
268

    
269
      margin-left: 0;
270
      padding-left: 1em;
271
      margin-top: -$tree-lines-top-offset;
272
      margin-bottom: $tree-entry-vspace;
273
      line-height: $base-line-height;
274

    
275
      border-left: $tree-line-style;
276
    }
277
    li:last-child {
278
      border-left: none;
279
    }
280
    li:before {
281
      position: absolute;
282
      top: $tree-lines-top-offset;
283
      left: 0;
284

    
285
      width: 0.5em; /* width of horizontal line */
286
      height: 0.5em; /* vertical position of line */
287
      vertical-align: top;
288
      border-bottom: $tree-line-style;
289
      content: "";
290
      display: inline-block;
291
    }
292
    li:last-child:before {
293
      border-left: $tree-line-style;
294
    }
295
  }
296

    
297
  /*
298
   * Map
299
   */
300
  .openlayers-container {
301
    margin-top: $zen-gutter-width / 4;
302
    margin-bottom: $zen-gutter-width / 4;
303
  }
304

    
305
  /*
306
   * Registration page & items
307
   */
308
  .registration {
309

    
310
    .type-status{
311
      font-weight: bold;
312
    }
313

    
314
    .registration-date-and-institute {
315
      color: #999;
316
    }
317

    
318

    
319
    .published-name {
320
      .TaxonName .name {
321
        font-weight: bold;
322
      }
323
    }
324
    .typified-name .cdm\:TaxonName {
325
      color: #999;
326
      a {
327
        color: #999;
328
      }
329
      .TaxonName .name {
330
        font-weight: bold;
331
      }
332
    }
333

    
334
    .registration-summary {
335
      .registered_name .name {
336
        font-weight: bold;
337
      }
338
      .referenced_typified_name {
339
        color: #999;
340
      }
341
      .label {
342
        font-weight: bold;
343
      }
344
    }
345
  }
346

    
347
  /*
348
   * Theme settings page
349
   */
350
  #system-theme-settings {
351

    
352
    .image-preview {
353
      width: 600px;
354
      max-height: 150px;
355
      overflow: auto; // let it scroll
356
      img {
357
        max-width: none; /* reset style in mormalize.scss */
358
      }
359

    
360
    }
361
  }
362

    
363
  /*****************************************************************************************
364
   * RESPONSIVE
365
   *
366
   * using the same media queries here as in layout/_responsive.scss
367
   *****************************************************************************************/
368

    
369
  #classification-breadcrumbs {
370
    font-size: 1.5em;
371
    line-height: 1.5em;
372
  }
373

    
374
  @media all and (min-width: 480px) and (max-width: 959px) {
375

    
376

    
377
  }
378

    
379
  @media all and (min-width: 960px) {
380
    #classification-breadcrumbs {
381
      font-size: 1em;
382
    }
383
  }
384

    
385
/***************************
386
 * TESTING ONLY 2020-02-20
387
 */
388
.font-noto {
389
  font-family: $noto-sans !important;
390
}
(7-7/13)