css/style.css

   1 /**
   2  * If using a CSS pre-processor, tell it to overwrite this file. If not, place
   3  * your custom CSS modifications here.
   4  */
   5
   6 body { margin: 0; min-width: 320px; }
   7
   8 a { transition: 0.3s; }
   9
  10
  11 /* etcetera */
  12
  13
  14 .feed-icons,
  15 .more-link {
  16   margin-top: 15px;
  17   clear: both;
  18 }
  19 .more-link {
  20   font-weight: bold;
  21 }
  22
  23 .block-views {
  24   margin-top: 20px;
  25 }
  26
  27 /* Navbar */
  28
  29
  30 .navbar-default {
  31   background: #000;
  32   color: #FFF;
  33   border: none;
  34   border-radius: 0px;
  35   box-sizing: content-box;
  36   align-items: center;
  37   margin-bottom: 100px;
  38   min-height: 100px;
  39 }
  40
  41 .navbar-header,
  42 #navbar-collapse {
  43   max-width: 1150px;
  44   padding: 0;
  45   margin: 0 auto;
  46   border: none;
  47   overflow: hidden;
  48 }
  49
  50 .navbar-default .navbar-toggle { display: none; }
  51
  52 .navbar-header {
  53   position: absolute;
  54   top: 5px;
  55 }
  56
  57 .navbar-brand { display: none; }
  58
  59 #block-ryf-main-menu .navbar-nav { margin-left: 180px; }
  60
  61 .navbar-default .navbar-nav > li > a:focus {
  62   outline: none;
  63 }
  64
  65 .navbar-default .navbar-nav > li      > a,
  66 .navbar-default .navbar-nav > .active > a,
  67 .navbar-default .navbar-nav > li      > a:link,
  68 .navbar-default .navbar-nav > .active > a:link,
  69 .navbar-default .navbar-nav > li      > a:visited,
  70 .navbar-default .navbar-nav > .active > a:visited {
  71   color: #FFF;
  72   background: #000;
  73   border-bottom: 2px solid transparent;
  74   padding-bottom: 10px;
  75   margin-bottom: 5px;
  76 }
  77
  78 .navbar-default .navbar-nav > li      > a:hover,
  79 .navbar-default .navbar-nav > .active > a:hover,
  80 .navbar-default .navbar-nav > li      > a:active,
  81 .navbar-default .navbar-nav > .active > a:active {
  82   color: #edd400;
  83   background: #000;
  84   border-bottom: 2px solid #edd400;
  85   padding-bottom: 5px;
  86   margin-bottom: 10px;
  87 }
  88
  89 .page-header {
  90   border-bottom: 2px solid #000;
  91   font-size: 2em;
  92 }
  93
  94 .region-header .search-block-form {
  95   width: 300px;
  96   float: right;
  97 }
  98
  99 @media screen and (min-width: 520px) and (max-width: 599px) {
 100   .logo img { margin-left: 50px; }
 101   #block-ryf-main-menu .navbar-nav { margin-left: 230px; }
 102 }
 103
 104 @media screen and (min-width: 600px) and (max-width: 767px) {
 105   .logo img { margin-left: 100px; }
 106   #block-ryf-main-menu .navbar-nav { margin-left: 280px; }
 107 }
 108
 109 @media screen and (max-width: 767px) {
 110   .logo img { height: 150px; margin-top: 25px; }
 111   .navbar-default { min-height: 230px; margin-bottom: 30px; }
 112   #block-ryf-main-menu .navbar-nav { max-width: 130px; }
 113 }
 114
 115 @media screen and (min-width: 768px) {
 116   .navbar-nav { margin-top: 40px; }
 117 }
 118
 119
 120 /* Selectors */
 121
 122
 123 @media screen and (min-width: 768px) {
 124   .form-inline .form-item .select-wrapper {
 125     display: block;
 126   }
 127   .form-inline .form-actions {
 128     margin-top: 21px;
 129   }
 130 }
 131
 132
 133 /* RYF List */
 134
 135
 136 .ryf-list-row {
 137   padding: 0;
 138   margin: 0 auto;
 139   overflow: auto;
 140 }
 141
 142 .ryf-list {
 143   float: left;
 144   margin: 0;
 145   padding: 0.5em;
 146   position:relative;
 147   list-style: none;
 148 }
 149
 150 .ryf-list article {
 151   border: 1px solid #ececec;
 152   border-radius: 5px;
 153   padding: 1em;
 154   box-shadow: 2px 2px 5px #ddd;
 155   transition: 0.3s;
 156 }
 157
 158 .ryf-list article:hover {
 159   box-shadow: 0px 0px 5px #aaa;
 160 }
 161
 162 .ryf-list .field--type-image {
 163   width: 150px;
 164   height: 150px;
 165   background: #fff;
 166   border-radius: 10px;
 167   display: flex;
 168   align-items: center;
 169 }
 170
 171 .ryf-list .field--name-field-image {
 172   margin: 0 auto 10px auto;
 173 }
 174
 175 .ryf-list img {
 176   max-width: 150px;
 177   max-height: 150px;
 178   object-fit: contain;
 179   overflow: hidden;
 180 }
 181
 182 .ryf-list img:hover {
 183   border-radius: 0;
 184 }
 185
 186 .ryf-list h2 {
 187   text-align: left;
 188   font-size: 1.5em;
 189   font-weight: 500;
 190   line-height: 1.2em;
 191   margin: 0;
 192   padding: 0;
 193   padding-bottom: 1em;
 194 }
 195
 196 .ryf-list a {
 197   color: #118991;
 198   text-decoration: none;
 199 }
 200
 201 .ryf-list a:hover {
 202   color: #000;
 203 }
 204
 205 .ryf-list .node-readmore,
 206 .ryf-list .tags,
 207 .ryf-list .supplier {
 208   width: 100%;
 209   float: left;
 210   font-size: 0.9em;
 211   border-top: 1px solid #ccc4c4;
 212   margin-top: 5px;
 213   padding-top: 5px;
 214   color: #afadad;
 215 }
 216
 217 .ryf-list .node-readmore {
 218   text-align: right;
 219 }
 220
 221 @media screen and (min-width: 450px) and (max-width: 659px) {
 222   .ryf-list-row {
 223     max-width: 600px;
 224   }
 225   .ryf-list {
 226     max-width: 300px;
 227     float: none;
 228     margin: 0 auto;
 229   }
 230 }
 231 @media screen and (min-width: 660px) and (max-width: 767px) {
 232   .ryf-list-row {
 233     max-width: 600px;
 234   }
 235   .ryf-list-row {
 236     margin: 0 auto;
 237     max-width: 660px;
 238   }
 239   .ryf-list {
 240     max-width: 300px;
 241     float: left;
 242   }
 243   .auto-clear .col-xs-12:nth-child(odd){clear:left;}
 244 }
 245
 246
 247 /* Vendors list */
 248
 249
 250 .vendors-list-row {
 251   padding: 10px;
 252   margin: 0 auto;
 253   overflow: auto;
 254 }
 255
 256 @media screen and (max-width: 767px) {
 257   .vendors-list-row {
 258     margin: 0px auto;
 259   }
 260
 261   .vendors-list {
 262     margin-bottom: 40px;
 263     list-style: none;
 264
 265     overflow: auto;
 266   }
 267
 268   .vendors-list .views-field-field-icon {
 269     width: 220px;
 270
 271     margin: 0px auto 20px auto;
 272   }
 273
 274   .vendors-list .views-field-field-icon img {
 275     margin: 0 auto;
 276   }
 277
 278   .vendors-list .views-field-name,
 279   .vendors-list .views-field-description__value {
 280     max-width: 300px;
 281     margin: 0 auto 10px auto;
 282   }
 283
 284   .vendors-list .views-field-name {
 285     font-weight: bold;
 286     font-size: 18px;
 287     text-align: center;
 288   }
 289
 290 }
 291
 292 @media screen and (min-width: 768px) {
 293   .vendors-list-row {
 294     width: 600px;
 295     margin: 0px auto;
 296   }
 297
 298   .vendors-list {
 299     list-style: none;
 300     clear: left;
 301
 302     overflow: auto;
 303   }
 304
 305   .vendors-list .views-field-field-icon {
 306     width: 220px;
 307     height: 220px;
 308
 309     margin-bottom: 40px;
 310
 311     float: left;
 312   }
 313
 314   .vendors-list .views-field-field-icon img {
 315     margin: 0 auto;
 316   }
 317
 318   .vendors-list .views-field-name,
 319   .vendors-list .views-field-description__value {
 320     margin-left: 300px;
 321   }
 322
 323   .vendors-list .views-field-name {
 324     margin-bottom: 10px;
 325     font-weight: bold;
 326     font-size: 18px;
 327   }
 328 }
 329
 330
 331 /* Sidebars */
 332
 333
 334 @media screen and (max-width: 767px) {
 335   .path-products #block-views-block-categories-categories-block { display: none; }
 336 }
 337
 338
 339 /* Vendor and Category taxonomy term pages */
 340
 341
 342 .view-taxonomy-term .view-header .field--name-field-icon img {
 343   margin: 0 auto;
 344 }
 345
 346 .view-filters {
 347   clear: left;
 348 }
 349
 350 .view-taxonomy-term .view-header .field--name-field-vendor-support-link,
 351 .view-taxonomy-term .view-header .field--name-field-vendor-support-email {
 352   margin-top: 15px;
 353 }
 354
 355 @media screen and (max-width: 559px) {
 356   .view-taxonomy-term.view-display-id-taxonomy_term_vendor .view-header {
 357     margin: 0 auto 40px auto;
 358
 359     overflow: auto;
 360   }
 361
 362   .view-taxonomy-term .view-header .field--name-field-icon {
 363     margin: 0 auto 20px auto;
 364     width: 220px;
 365   }
 366
 367   .view-taxonomy-term .view-header .field--name-description,
 368   .view-taxonomy-term .view-header .field--name-field-vendor-support-link,
 369   .view-taxonomy-term .view-header .field--name-field-vendor-support-email {
 370     max-width: 360px;
 371     margin: 15px auto 0 auto;
 372     padding: 0 10px;
 373   }
 374
 375 }
 376
 377 @media screen and (min-width: 560px) {
 378   .view-taxonomy-term.view-display-id-taxonomy_term_vendor .view-header {
 379     margin: 0 0 40px 0;
 380
 381     overflow: auto;
 382   }
 383
 384   .view-taxonomy-term .view-header .field--name-field-icon {
 385     width: 220px;
 386
 387     float: left;
 388   }
 389
 390   .view-taxonomy-term .view-header .field--name-description,
 391   .view-taxonomy-term .view-header .field--name-field-vendor-support-link,
 392   .view-taxonomy-term .view-header .field--name-field-vendor-support-email {
 393     margin-left: 260px;
 394   }
 395
 396 }
 397
 398 @media screen and (min-width: 768px) {
 399   .view-taxonomy-term .view-header {
 400     max-width: 700px;
 401   }
 402 }
 403
 404
 405 /* Product */
 406
 407
 408 @media screen and (max-width: 767px) {
 409   .page-node-type-product .product {
 410     max-width: 382px;
 411     margin: 0 auto;
 412   }
 413 }
 414
 415 @media screen and (min-width: 768px) and (max-width: 991px) {
 416   .page-node-type-product .product {
 417     width: 700px;
 418     margin: 0 auto;
 419   }
 420 }
 421
 422 @media screen and (min-width: 992px) {
 423   .page-node-type-product .product {
 424     width: 800px;
 425     margin: 0 auto;
 426   }
 427 }
 428
 429 .page-node-type-product .product .field--name-field-image {
 430   padding: 10px;
 431
 432   border: 1px solid #888;
 433   border-radius: 10px;
 434 }
 435
 436 .page-node-type-product .product .field--name-field-image img {
 437   margin: 0 auto;
 438 }
 439
 440 .page-node-type-product .product .field--name-field-extra-images {
 441   padding: 5px;
 442
 443   display: flex;
 444   align-items: center;
 445
 446   border: 1px solid #888;
 447   border-radius: 10px;
 448 }
 449
 450 .page-node-type-product .product .field--name-field-extra-images .field--item {
 451   display: inline-block;
 452   margin: auto;
 453   padding: 5px;
 454 }
 455
 456 .page-node-type-product .product .field--name-field-categories,
 457 .page-node-type-product .product .field--name-field-vendor {
 458   margin: 10px 10px 20px 0px;
 459   padding: 10px;
 460   border: 1px solid #888;
 461   border-radius: 10px;
 462 }
 463
 464 .page-node-type-product .product .field--name-field-categories .field--item {
 465   display: list-item;
 466   list-style: circle;
 467   margin-left: 15px;
 468 }
 469
 470 /* product page colors */
 471 .page-node-type-product .product .field--name-field-image {
 472   background-color: #fff;
 473   border-color: #aaa;
 474 }
 475 .page-node-type-product .product .field--name-field-extra-images {
 476   background-color: #f3f3f3;
 477   border-color: #aaa;
 478 }
 479 .page-node-type-product .product .field--name-field-categories {
 480   background-color: #def;
 481   border-color: #8ad;
 482 }
 483 .page-node-type-product .product .field--name-field-vendor {
 484   background-color: #dfe;
 485   border-color: #8da;
 486 }
 487
 488 @media screen and (max-width: 767px) {
 489   .page-node-type-product .product .field--name-field-extra-images {
 490     margin: 10px auto 0px auto;
 491   }
 492
 493   .page-node-type-product .product .field--name-body,
 494   .page-node-type-product .product .field--name-field-vendor-product-link,
 495   .page-node-type-product .product .field--name-field-certification-details,
 496   .page-node-type-product .product .field--name-field-certification-date,
 497   .page-node-type-product .product .field--name-field-source-code-links {
 498     margin-bottom: 20px;
 499   }
 500
 501   .page-node-type-product .product .field--name-field-categories,
 502   .page-node-type-product .product .field--name-field-vendor {
 503     margin-bottom: 0px;
 504     float: left;
 505   }
 506
 507   .page-node-type-product .product .field--name-body {
 508     padding-top: 20px;
 509     clear: both;
 510   }
 511 }
 512
 513
 514 @media screen and (min-width: 768px) {
 515   .page-node-type-product .product .field--name-field-image {
 516     width: 382px;
 517     float: left;
 518   }
 519
 520   .page-node-type-product .product .field--name-field-extra-images {
 521     float: left;
 522     clear: left;
 523
 524     width: 382px;
 525     margin-top: 10px;
 526   }
 527
 528   .page-node-type-product .product .field--name-body,
 529   .page-node-type-product .product .field--name-field-vendor-product-link,
 530   .page-node-type-product .product .field--name-field-certification-details,
 531   .page-node-type-product .product .field--name-field-certification-date,
 532   .page-node-type-product .product .field--name-field-source-code-links {
 533     margin-left: 400px;
 534     margin-bottom: 20px;
 535   }
 536
 537   .page-node-type-product .product .field--name-field-categories {
 538     float: left;
 539     clear: left;
 540   }
 541
 542   .page-node-type-product .product .field--name-field-vendor {
 543     float: left;
 544   }
 545
 546 }
 547
 548
 549 /* News and Product Announcements */
 550
 551
 552 .page-node-type-product-announcement .page-header,
 553 .page-node-type-product-announcement .tabs--primary,
 554 .page-node-type-product-announcement .region-content,
 555 .page-node-type-general-news-item .page-header,
 556 .page-node-type-general-news-item .tabs--primary,
 557 .page-node-type-general-news-item .region-content,
 558 .page-node-type-page .page-header,
 559 .page-node-type-page .tabs--primary,
 560 .page-node-type-page .region-content,
 561 .path-news .page-header,
 562 .path-news .tabs--primary,
 563 .path-news .region-content {
 564   max-width: 800px;
 565   margin: 0 auto;
 566 }
 567
 568 /* don't apply above max-width rule to main page */
 569 .path-frontpage .page-header,
 570 .path-frontpage .tabs--primary,
 571 .path-frontpage .region-content {
 572   max-width: 2000px; /* high number beyond the max */
 573 }
 574
 575 .page-node-type-page .page-header {
 576   margin-bottom: 20px;
 577 }
 578
 579 .path-news h2,
 580 .block-views-blocknews-news-block article h2 {
 581   font-size: 25px;
 582 }
 583
 584 .page-node-type-product-announcement .author,
 585 .page-node-type-general-news-item .author {
 586   margin: 10px 0 20px 0;
 587   font-style: oblique;
 588 }
 589
 590 .page-node-type-product-announcement .field--name-body,
 591 .page-node-type-general-news-item .field--name-body {
 592   margin-bottom: 20px;
 593 }
 594
 595 .page-node-type-product-announcement .field--name-field-external-news-link,
 596 .page-node-type-general-news-item .field--name-field-external-news-link {
 597   margin-bottom: 20px;
 598 }
 599
 600 .page-node-type-product-announcement .field--name-field-vendor-page,
 601 .page-node-type-product-announcement .field--name-field-announced-products {
 602   margin-bottom: 20px;
 603 }
 604
 605
 606 /* Search Results */
 607
 608
 609 @media screen and (max-width: 600px) {
 610   .path-search .region-content > ol {
 611     width: 300px;
 612   }
 613 }
 614 @media screen and (min-width: 601px) and (max-width 1000px) {
 615   .path-search .region-content > ol {
 616     width: 560px;
 617   }
 618 }
 619 @media screen and (min-width: 1001px) {
 620   .path-search .region-content > ol {
 621     width: 900px;
 622   }
 623 }
 624
 625 .path-search .region-content > ol {
 626   margin: 0 auto;
 627   padding-left: 0;
 628   overflow: auto;
 629 }
 630
 631 .path-search .region-content > ol li {
 632   width: 280px;
 633   height: 280px;
 634   margin: 0px auto;
 635   padding: 10px;
 636
 637   float: left;
 638
 639   list-style: none;
 640   overflow: hidden;
 641 }
 642
 643 .path-search .region-content > ol li h3 {
 644   text-align: center;
 645 }
 646
 647 .path-search .region-content > ol li .search-image {
 648   width: 100px;
 649   height: 100px;
 650
 651   margin: 0 auto;
 652
 653   display: flex;
 654   align-items: center;
 655 }
 656
 657 .path-search .region-content > ol li img {
 658 }
 659
 660
 661 /* Footer */
 662
 663
 664 .footer {
 665   background: #333;
 666   color: #FFF;
 667 }
 668
 669 /* full page width for footer */
 670 .footer {
 671   width: 100%;
 672 }
 673
 674 .footer a { color: #edd400; }
 675
 676 .footer a:hover { color: #FFF; }
 677
 678 .footer h4 { font-weight: bold; }
 679
 680 .footer .copyright { font-size: 0.9em; text-align: center; width: 80%; margin-top: 1em; border-top: 1px solid #111; padding: 1em; }
 681
 682 #fsf-logo-footer { margin-bottom: 10px; }
 683
 684 @media print { #fsf-logo-footer { filter: invert(100%) } }
 685