Changeset 5562


Ignore:
Timestamp:
08/18/14 15:10:24 (10 years ago)
Author:
Twan Goosen
Message:

modularised VCR SCSS. Tweaked layout of collections table
Refs #594

Location:
VirtualCollectionRegistry/trunk/VirtualCollectionRegistry/src/main/webapp
Files:
7 added
1 edited

Legend:

Unmodified
Added
Removed

  • VirtualCollectionRegistry/trunk/VirtualCollectionRegistry/src/main/webapp/css/vcr.scss

    r5559 r5562  
    11@import 'CLARIN';
     2@import 'toggleborder';
     3@import 'table';
     4@import 'collectiondetails';
     5@import 'wizard';
     6@import 'feedback';
     7@import 'filterform';
     8@import 'popup';
    29
    310noscript {
    … …  
    2532}
    2633
    27 /*
    28  * wizard
    29  */
    30 div.wizard .wicketExtensionsWizardHeaderTitle {
    31     padding: 0px 10px;
    32     font-size: 16px;
    33     font-weight: bold;
    34 }
    35 
    36 div.wizard .wicketExtensionsWizardHeaderSummary {
    37     padding: 5px 10px 0 10px;
    38     font-style: italics;
    39 }
    40 
    41 div.wizard .wizardHeader {
    42     border-bottom: 1px solid #000000;
    43     margin: 0 0 10px 0;
    44     padding: 0 0 10px 0;
    45 }
    46 
    47 form.wizard {
    48     margin: 5px 4px;
    49     padding: 0;
    50     font-size: 100%;
    51     width: 978px;
    52     min-width: 978px;
    53 }
    54 
    55 form.wizard fieldset,
    56 div.wizard div.fieldset {
    57     clear: both;
    58     font-size: 100%;
    59     border: none;
    60     padding: 0 10px 0 10px;
    61     margin: 0 0 0 0;
    62 }
    63 
    64 form.wizard div,
    65 div.editDialog div {
    66     clear: left;
    67     display: block;
    68     /*  width: 354px;
    69       zoom: 1;
    70       margin: 5px 0 0 0;
    71       padding: 1px 3px;
    72     */
    73 }
    74 
    75 form.wizard .extrainfo {
    76     margin-left: 50px;
    77 }
    78 
    79 form.wizard .extrainfo a.extrainfotoggle {
    80     display: inline-block;
    81     float: right;
    82     vertical-align: top;
    83     width: 16px;
    84     height: 16px;
    85     background-image: url(help-128.png); /* from http://www.iconsdb.com/ */
    86     background-size: 16px 16px;
    87     background-repeat: no-repeat;
    88 }
    89 
    90 form.wizard .extrainfo a.extrainfotoggle span {
    91     display: none;
    92 }
    93 
    94 form.wizard div.notes, form.wizard div.sidenotes {
    95     display: inline-block;
    96     height: auto;
    97     padding: 5px;
    98     border: 1px solid #666666;
    99     background-color: #ffffe1;
    100     color: #666666;
    101 }
    102 
    103 form.wizard div.notes {
    104     width: 80%;
    105     margin: 0 0 10px 70px;
    106 }
    107 
    108 form.wizard div.sidenotes {
    109     float: right;
    110     width: 198px;
    111     margin: 0 0 10px 10px;
    112 }
    113 
    114 form.wizard div.notes h4 {
    115     /*
    116     background-image: url(/images/icon_info.gif);
    117     background-repeat: no-repeat;
    118     background-position: top left;
    119     */
    120     text-align: center;
    121     padding: 3px 0 3px 0; /*27px; */
    122     margin: 0 0 3px 0;
    123     border-width: 0 0 1px 0;
    124     border-style: solid;
    125     border-color: #666666;
    126     color: #666666;
    127     font-size: 100%;
    128 }
    129 
    130 form.wizard div.notes p {
    131     margin: 0em 0em 0.5em 0em;
    132     color: #666666;
    133     font-size: 80%;
    134 }
    135 
    136 form.wizard div.notes p.last {
    137     margin: 0em;
    138 }
    139 
    140 form.wizard div label {
    141     display: block;
    142     float: left;
    143     width: 140px;
    144     padding: 3px 5px;
    145     margin: 0 0 5px 0;
    146     text-align: right;
    147     font-weight: normal;
    148 }
    149 
    150 div.required label,
    151 label.required {
    152     font-weight: bold !important;
    153 }
    154 
    155 form.wizard textarea {
    156     font-family: Verdana, sans-serif;
    157     font-size: 100%;
    158     width: 570px;
    159     overflow: auto;
    160     margin-bottom: 5px;
    161 }
    162 
    163 #feedback ul {
    164     padding-left: 0px;
    165 }
    166 
    167 #feedback ul li {
    168     font-weight: bold;
    169     padding: 5px;
    170     list-style: none;   
    171 }
    172 
    173 #feedback ul li.feedbackPanelERROR {
    174     background: red;
    175 }
    176 
    177 form.wizard .wizardButtons {
    178     border-top: 1px solid #000000;
    179     margin: 10px 0 0 0;
    180     clear: both;
    181 }
    182 
    183 form.wizard .buttonbar {
    184     margin: 10px 220px 0 0;
    185     padding: 0 10px 0 0;
    186     text-align: right;
    187 }
    188 
    189 input.button {
    190     padding: 1px 4px;
    191     margin: 0 2px;
    192     color: #000000;
    193     background-color: #E9EEF7;
    194     border: 2px solid #D4DEEF;
    195     border-radius: 4px;
    196     -moz-border-radius: 4px;
    197 }
    198 
    199 form.wizard .buttonbar input.button:hover,
    200 div.modalDialog div.modalDialogButtons input.button:hover {
    201     color: #AE0000;
    202     background-color: #E9EEF7;
    203 }
    204 
    205 form.wizard .buttonbar  input.button[disabled],
    206 form.wizard .buttonbar  input.button[disabled]:hover,
    207 div.modalDialog div.modalDialogButtons input.button[disabled],
    208 div.modalDialog div.modalDialogButtons input.button[disabled]:hover {
    209     color: #AFAFAF;
    210     border-color: #EFEFEF;
    211 }
    212 
    213 /*
    214  * modal dialog
    215  */
    216 div.modalDialog {
    217     margin: 0;
    218     padding: 0;
    219 }
    220 
    221 div.modalDialog div.modalDialogContent {
    222     margin: 10px;
    223 }
    224 
    225 div.modalDialog div.modalDialogContent p {
    226     margin: 1em;
    227 }
    228 
    229 div.modalDialog div.modalDialogButtons {
    230     border-top: 1px solid #BBBBBB;
    231     margin: 0 5px 5px 5px;
    232     padding: 5px 0 0 0;
    233     text-align: center;
    234 }
    235 
    236 div.confirmationDialog {
    237     text-align: center;
    238 }
    239 
    240 div.longConfirmationDialog {
    241     text-align: left;
    242 }
    243 
    244 div.editDialog fieldset {
    245     border: none;
    246     margin: 0;
    247     padding: 0;
    248 }
    249 
    250 div.editDialog fieldset label {
    251     display: block;
    252     float: left;
    253     /* width: 100px; */
    254     padding: 3px 5px 3px 0;
    255     margin: 0 0 5px 0;
    256     text-align: right;
    257 }
    258 
    259 
    260 /*
    261  * dialog customizations
    262  */
    263 div.editCreatorDialog  fieldset label {
    264     width: 90px;
    265 }
    266 
    267 div.editCreatorDialog fieldset input,
    268 div.editCreatorDialog fieldset textarea {
    269     width: 255px;
    270 }
    271 
    272 div.editResourceDialog fieldset label {
    273     width: 70px;
    274 }
    275 
    276 div.editResourceDialog fieldset input,
    277 div.editResourceDialog fieldset textarea {
    278     width: 475px;
    279 }
    280 
    281 div.addResourcesDialog fieldset label {
    282     width: 85px;
    283 }
    284 
    285 div.addResourcesDialog fieldset input,
    286 div.addResourcesDialog fieldset textarea {
    287     width: 460px;
    288 }
    289 
    290 div.addKeywordDialog fieldset input {
    291     width: 285px;
    292 }
    293 
    294 /*
    295  * create virtual collection wizard
    296  */
    297 div.wizard a {
    298     font-weight: normal;
    299 }
    300 
    301 /*
    302 table {
    303     font-size: 100%;
    304     border-collapse: collapse;
    305 }
    306 
    307 table th,
    308 table td {
    309     padding: 2px;
    310     text-align: left;
    311     vertical-align: top;
    312 }
    313 
    314 table thead,
    315 table tfoot {
    316     color: inherit;
    317     background-color: #D4DEEF;
    318     border-top: 1px solid #000000;
    319     border-bottom: 1px solid #000000;
    320 }*/
    321 
    322 table td.action {
    323     width: 8em;
    324     text-align: right;
    325 }
    326 
    327 table.resourcesTable td.move {
    328     width: 5em;
    329 }
    330 
    331 table.resourcesTable tr.moving {
    332     background: #ccc;
    333 }
    334 
    335 table.moving tr:hover td {
    336     border-top: 6px solid #ccc;
    337 }
    338 
    339 table.moving tr.moving:hover td {
    340     border-top: 0px;
    341 }
    342 
    343 table.resourcesTable tr.moving td, table.resourcesTable tr.moving td a {
    344     color: #333;
    345 }
    346 
    347 /*
    348 table td.norecords-td {
    349     text-align: center;
    350     color: inherit;
    351     background-color: #FFFFFF;
    352 }
    353 
    354 table thead tr.navigation {
    355     border-bottom: 1px dotted #BBBBBB;
    356 }
    357 
    358 table tr.navigation div {
    359     clear: none !important;
    360 }
    361 */
    362 
    363 table.creatorsTable,
    364 table.resourcesTable {
    365     width: 805px;
    366 }
    367 
    368 table.creatorsTable td {
    369     width: 252px;
    370     overflow: hidden;
    371 }
    372 
    373 table td.type {
    374     width: 60px;
    375 }
    376 
    377 div.keywordsList {
    378     clear: none !important;
    379     width: 602px;
    380     margin-left: 160px;
    381     padding: 3px 0;
    382 }
    383 
    384 div.keywordsList div {
    385     clear: none;
    386 }
    387 
    388 div.keywordsList ul {
    389     list-style-type: square;
    390     margin: 0;
    391     padding: 0 0 0 16px;
    392 }
    393 
    394 div.keywordsList ul li {
    395     margin-top: 2px;
    396 }
    397 
    398 div.keywordsList ul li.first {
    399     margin-top: 0;
    400 }
    401 
    402 table.collectionsTable {
    403     width: auto;
    404     table-layout: fixed;
    405 }
    406 
    407 table.collectionsTable th,
    408 table.collectionsTable td {
    409     vertical-align: top;
    410 }
    411 
    412 table.collectionsTable.public th.name,
    413 table.collectionsTable.public td.name {
    414     width: 796px;
    415 }
    416 
    417 table.collectionsTable.private th.name,
    418 table.collectionsTable.private td.name {
    419     width: 732px;
    420 }
    421 
    422 table.collectionsTable td.name div.name {
    423     padding-left: 16px;
    424     background-image: url('../icons/bullet_arrow_down.png');
    425     background-repeat: no-repeat;
    426     background-position: center left;
    427     cursor: pointer;
    428 }
    429 
    430 table.collectionsTable td.name div.name:hover {
    431     color: #AE0000;
    432     background-color: inherit;
    433 }
    434 
    435 table.collectionsTable td.name div.name.detailsShown {
    436     padding-left: 16px;
    437     background-image: url('../icons/bullet_arrow_up.png');
    438     background-repeat: no-repeat;
    439     background-position: center left;
    440 }
    441 
    442 table.collectionsTable td.name div.name.noDetails{
    443     background-image: none;
    444 }
    445 
    446 table.collectionsTable td.name div.details {
    447     margin-left: 16px;
    448     margin-right: -248px;
    449     width: 964px;
    450 }
    451 
    452 table.collectionsTable td.name div.desc {
    453     text-align: justify;
    454     padding: 4px 0 0 0;
    455 }
    456 
    457 table.collectionsTable td.name div.actions {
    458     margin: 4px 0 2px 0;
    459 }
    460 
    461 table.collectionsTable th.state,
    462 table.collectionsTable td.state {
    463     width: 60px;
    464 }
    465 
    466 table.collectionsTable th.type,
    467 table.collectionsTable td.type {
    468     width: 80px;
    469 }
    470 
    471 table.collectionsTable th.created,
    472 table.collectionsTable td.created {
    473     width: 80px;
    474 }
    475 
    476 table.collectionsTable td.action,
    477 table.collectionsTable th.action {
    478     width: 12px;
    479 }
    480 
    481 table.collectionsTable.public td.action span,
    482 table.collectionsTable.private td.action div.popupTrigger span {
    483     display: none;
    484 }
    485 
    486 table.collectionsTable.public td.action a {
    487     display: block;
    488     width: 12px;
    489     height: 12px;
    490     margin-right: 2px;
    491     background: transparent url('../icons/magnifier.png') no-repeat center center;
    492 }
    493 
    494 table.collectionsTable.private td.action div.popupTrigger {
    495     display: block;
    496     width: 12px;
    497     height: 12px;
    498     margin-right: 2px;
    499     background: transparent url('../icons/wrench.png') no-repeat center center;
    500 }
    501 
    502 tr.headers a.wicket_orderNone {
    503     padding-right: 7px;
    504     background: transparent url('../icons/order_none.png') no-repeat center right;
    505 }
    506 
    507 tr.headers a.wicket_orderUp {
    508     padding-right: 7px;
    509     background: transparent url('../icons/order_up.png') no-repeat center right;
    510 }
    511 
    512 tr.headers a.wicket_orderDown {
    513     padding-right: 7px;
    514     background: transparent url('../icons/order_down.png') no-repeat center right;
    515 }
    516 
    517 div.toggleBorder {
    518     border-top: 1px solid #000000;
    519 }
    520 
    521 div.toggleBorder div.toggleBorderHeader {
    522     margin: 0;
    523     padding: 2px 2px 2px 16px;
    524     border-bottom: 1px solid #000000;
    525     color: inherit;
    526     background-color: #D4DEEF;
    527     background-image: url('../icons/bullet_arrow_up.png');
    528     background-repeat: no-repeat;
    529     background-position: center left;
    530     cursor: pointer;
    531 }
    532 
    533 div.toggleBorder div.toggleBorderHeader span {
    534     font-weight: bold;
    535 }
    536 
    537 div.toggleBorder div.toggleBorderHeader.collapsed {
    538     background-image: url('../icons/bullet_arrow_down.png');
    539     background-repeat: no-repeat;
    540     background-position: center left;
    541 }
    542 
    543 div.toggleBorder div.toggleBorderContent {
    544     margin: 0;
    545     padding: 5px;
    546 }
    547 
    548 form.filterForm {
    549     margin: 0;
    550     padding: 0;
    551 }
    552 
    553 form.filterForm fieldset {
    554     padding: 0;
    555     margin: 0;
    556     border: none;
    557 }
    558 
    559 form.filterForm div.optional {
    560     margin-bottom: 4px;
    561 }
    562 
    563 form.filterForm label {
    564     width: 75px !important;
    565 }
    566 
    567 form.filterForm input.name,
    568 form.filterForm input.desc {
    569     width: 790px;
    570 }
    571 
    572 div.popupMenu {
    573     -moz-box-shadow: 3px 3px 3px #888;
    574     -webkit-box-shadow: 3px 3px 3px #888;
    575     box-shadow: 3px 3px 3px #888;
    576     -moz-border-radius: 4px;
    577     border-radius: 4px;
    578 }
    579 
    580 div.popupMenu li a {
    581     color: #000000;
    582 }
    583 
    584 div.popupMenu li a:hover {
    585     color: #AE0000;
    586 }
    587 
    588 div.popupTrigger span.title {
    589     color: #AE0000;
    590 }
    591 
    592 
    593 div.collectionDetails div.property {
    594     clear: both;
    595     font-size: 100%;
    596     border: none;
    597     padding: 0 10px 0 10px;
    598     margin: 0 0 4px 0;
    599 }
    600 
    601 div.collectionDetails div label {
    602     display: block;
    603     float: left;
    604     width: 140px;
    605     padding: 0px 2px;
    606     margin: 0;
    607     text-align: right;
    608     font-weight: normal;
    609 }
    610 
    611 div.collectionDetails div label:after {
    612     content: ':';
    613 }
    614 
    615 div.collectionDetails div div {
    616     display: block;
    617     clear: none;
    618     padding: 0px 2px;
    619     margin-left: 144px;
    620 }
    621 
    622 div.collectionDetails ul.keywords {
    623     margin: 0 0 0 16px;
    624     padding: 0;
    625     list-style: square;
    626 }
    627 
    628 div.collectionDetails ul.creators {
    629     margin: 0;
    630     padding: 0;
    631     list-style: none;
    632 }
    633 
    634 div.collectionDetails ul.creators li {
    635     border-top: 1px dotted #000000;
    636     margin-top: 4px;
    637     padding-top: 4px;
    638 }
    639 
    640 div.collectionDetails ul.creators li.first {
    641     border-top: none;
    642     margin-top: 0;
    643     padding-top: 0;
    644 }
    645 
    646 div.collectionDetails.resources {
    647     padding: 0 !important;
    648 }
    649 
    650 div.collectionDetails.resources table {
    651     width: 100%;
    652 }
    653 
    654 div.collectionDetails.buttons {
    655     margin: 10px 0 10px 0;
    656     text-align: center;
    657 }
    658 
    65934.tooltipparent .tooltip {
    66035    display: none;
Note: See TracChangeset for help on using the changeset viewer.