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 /* Lato font */
   7
   8 @font-face {
   9     font-family: "Lato";
  10     src: url("../fonts/Lato-Regular.ttf") format('truetype');
  11     font-weight: 400;
  12     font-style: normal;
  13 }
  14
  15 @font-face {
  16     font-family: "Lato";
  17     src: url('../fonts/Lato-RegularItalic.ttf') format('truetype');
  18     font-weight: 400;
  19     font-style: italic;
  20 }
  21
  22 @font-face {
  23     font-family: "Lato";
  24     src: url('../fonts/Lato-Bold.ttf') format('truetype');
  25     font-weight: 700;
  26     font-style: normal;
  27 }
  28
  29
  30 /* Universal */
  31
  32 @media screen {
  33
  34   body {
  35     font-family: "Lato", Helvetica, Arial, sans-serif;
  36     margin: 0;
  37     min-width: 320px;
  38   }
  39
  40   a { transition: 0.3s; }
  41
  42   section { position: relative; }
  43
  44 }
  45
  46 /* etcetera */
  47
  48 @media screen {
  49
  50   .visually-hidden.focusable:focus {
  51       position: absolute !important;
  52       background: #000;
  53       color: #FFF;
  54       padding: 0.5em;
  55       z-index: 9999;
  56   }
  57
  58   .main-container { min-height: 50vh; }
  59
  60   h2.block-title {
  61     background: #337AB7;
  62     color: #FFF;
  63     padding: 0.5em;
  64   }
  65
  66
  67
  68   h2.block-title a:visited,
  69   h2.block-title a:focus,
  70   h2.block-title a:active,
  71   h2.block-title a {
  72     color: #FFF;
  73   }
  74
  75   h2.block-title a:hover {
  76     color: #FFF;
  77   }
  78
  79   .feed-icons a {
  80     background: url('../images/rss.svg') top left no-repeat;
  81     background-size: contain;
  82     height: 20px;
  83     overflow: hidden;
  84     display: block;
  85     text-indent: 25px;
  86     font-size: 1em;
  87     width: fit-content;
  88     margin-top: 1em;
  89     float: right;
  90   }
  91
  92   .view-display-id-news_page .feed-icons a {
  93     margin-top: -30px;
  94   }
  95
  96   .more-link {
  97     border: 1px solid #ddd;
  98     border-radius: .5em;
  99     padding: .5em;
 100     text-align: center;
 101     width: 50%;
 102     margin: 0 auto;
 103     font-weight: bold;
 104     margin-top: 2em;
 105   }
 106
 107   .more-link:hover {
 108     background: #EEE;
 109     color: #000;
 110   }
 111
 112   .block-views {
 113     margin-top: 20px;
 114   }
 115
 116 }
 117
 118 /* Navbar */
 119
 120 @media screen {
 121
 122   .navbar-default {
 123     background: #000;
 124     color: #FFF;
 125     border: none;
 126     border-radius: 0px;
 127     box-sizing: content-box;
 128     align-items: center;
 129     min-height: 100px;
 130   }
 131
 132   .navbar-header,
 133   #navbar-collapse {
 134     max-width: 1150px;
 135     padding: 0;
 136     margin: 0 auto;
 137     border: none;
 138     overflow: hidden;
 139   }
 140
 141   .navbar-default .navbar-toggle { display: none; }
 142
 143   .navbar-header {
 144     position: absolute;
 145     top: 5px;
 146   }
 147
 148   .navbar-brand { display: none; }
 149
 150   #block-ryf-main-menu .navbar-nav { margin-left: 195px; }
 151
 152   .navbar-default .navbar-nav > li > a:focus {
 153     outline: none;
 154   }
 155
 156   .navbar-default .navbar-nav > li > a,
 157   .navbar-default .navbar-nav > li > a:link,
 158   .navbar-default .navbar-nav > li > a:visited {
 159     color: #FFF;
 160     background: #000;
 161     border-bottom: 2px solid transparent;
 162     padding-bottom: 10px;
 163     margin-bottom: 5px;
 164   }
 165
 166   .navbar-default .navbar-nav > li > a:focus,
 167   .navbar-default .navbar-nav > li.active > a:hover,
 168   .navbar-default .navbar-nav > li > a:hover {
 169     color: #edd400;
 170     background: #000;
 171     border-bottom: 2px solid #edd400;
 172     padding-bottom: 5px;
 173     margin-bottom: 10px;
 174   }
 175
 176   .navbar-default .navbar-nav > li > a.is-active {
 177     border-bottom: 2px solid #FFF;
 178     background: #000;
 179     padding-bottom: 5px;
 180     margin-bottom: 10px;
 181   }
 182
 183   .page-header {
 184     border-bottom: 2px solid #000;
 185     font-size: 2em;
 186   }
 187
 188   .region-header .search-block-form {
 189     width: 300px;
 190     float: right;
 191   }
 192
 193   nav .search-block-form {
 194     position: absolute;
 195     width: 300px;
 196     right: 10%;
 197     top: 30px;
 198   }
 199
 200   .region-navigation-collapsible .search-block-form {
 201     float: right;
 202     width: 210px;
 203   }
 204
 205 }
 206
 207 @media screen and (max-width: 767px) {
 208   #block-ryf-main-menu .navbar-nav { max-width: 130px; }
 209
 210 }
 211
 212 @media screen and (min-width: 768px) {
 213
 214   .navbar-default {
 215      margin-bottom: 100px;
 216   }
 217   .navbar-nav {
 218      margin-top: 40px;
 219   }
 220   .region-header .breadcrumb {
 221     position: absolute;
 222     top: -70px;
 223     left: 200px;
 224     background: none;
 225   }
 226   .region-navigation-collapsible .search-block-form {
 227     padding-top: 50px;
 228   }
 229 }
 230
 231 @media screen {
 232
 233   .maintenance-page #navbar {
 234     margin-bottom: 120px;
 235   }
 236 }
 237
 238
 239 /* Selectors */
 240
 241
 242 @media screen and (min-width: 768px) {
 243   .form-inline .form-item .select-wrapper {
 244     display: block;
 245   }
 246   .form-inline .form-actions {
 247     margin-top: 21px;
 248   }
 249 }
 250
 251 /* News */
 252
 253 @media screen {
 254
 255   .view-news article {
 256     padding: 0.5em;
 257     margin: 0 10%;
 258   }
 259
 260   .view-news p {
 261     line-height: 1.5em;
 262     font-size: 1.1em;
 263   }
 264
 265   .view-news .node-readmore {
 266     padding: 0.5em 1em;
 267     border: 1px solid #DDD;
 268     border-radius: 0.5em;
 269     float: right;
 270   }
 271
 272   .view-news .node-readmore:hover {
 273     background: #EEE;
 274     color: #000;
 275   }
 276
 277   .view-news footer {
 278     color: #999;
 279     padding: 0.5em;
 280     text-align: right;
 281   }
 282
 283 }
 284
 285
 286 /* RYF List */
 287
 288
 289 @media screen {
 290
 291   .ryf-list-row {
 292     padding: 0;
 293     margin: 0 auto;
 294     overflow: auto;
 295   }
 296
 297   .ryf-list {
 298     float: left;
 299     margin: 0;
 300     padding: 0.5em;
 301     position: relative;
 302     list-style: none;
 303   }
 304
 305   .ryf-list article {
 306     border: 1px solid #bbb;
 307     border-radius: 5px;
 308     padding: 1em;
 309     box-shadow: 2px 2px 5px #ddd;
 310     transition: 0.3s;
 311   }
 312
 313   .ryf-list article:hover {
 314     box-shadow: 0px 0px 5px #aaa;
 315   }
 316
 317   .ryf-list .field--type-image {
 318     border: 1px solid #ddd;
 319     border-left: 0px;
 320     border-right: 0px;
 321     background: #fff;
 322     height: 150px;
 323     width: 100%;
 324     overflow: hidden;
 325     border-radius: 5px;
 326     position: relative;
 327     text-align: center;
 328     display: flex;
 329     align-items: center;
 330   }
 331
 332   .ryf-list .field--type-image a {
 333     display: inline-block;
 334     margin: 0 auto;
 335   }
 336
 337   .ryf-list .field--type-image img {
 338     width: auto;
 339     max-height: 150px;
 340     margin: 0 auto;
 341     display: inline-block;
 342   }
 343
 344   .ryf-list h2 {
 345     text-align: left;
 346     font-size: 1.5em;
 347     line-height: 1.2em;
 348     margin: 0;
 349     padding: 0;
 350   }
 351
 352   .ryf-list .field--name-body {
 353     display: block;
 354     border-radius: 5px;
 355     width: 100%;
 356     height: 0px;
 357     margin-top: 0px;
 358     z-index: 99;
 359     position: relative;
 360     background: #00000088;
 361     color: white;
 362     padding: 0em;
 363     transition: 0.2s;
 364     cursor: default;
 365     overflow: hidden;
 366   }
 367
 368   .ryf-list:hover .field--name-body {
 369     height: 100px;
 370     margin-top: -100px;
 371     z-index: 99;
 372     position: relative;
 373     padding: 0.3em;
 374     transition: 0.3s;
 375   }
 376
 377   .ryf-list a {
 378     color: #337AB7;
 379   }
 380
 381   .ryf-list a:hover {
 382     color: #000;
 383   }
 384
 385   .ryf-list .list-inline li {
 386     font-size: 0.9em;
 387     border: 1px solid #ddd;
 388     width: auto;
 389     border-radius: 0.5em;
 390     padding: 0.3em 0.5em;
 391     margin-top: 5px;
 392     float: right;
 393   }
 394
 395   .ryf-list h2 a {
 396     display: inline-block;
 397     height: 55px;
 398     width: 100%;
 399     overflow: hidden;
 400     position: relative;
 401   }
 402
 403 /*
 404   .ryf-list h2 a:after {
 405     content: '(...)';
 406     float: right;
 407     display: block;
 408     position: absolute;
 409     bottom:5px;
 410     right: 2px;
 411     font-size: 0.8em;
 412   }
 413 */
 414
 415   .ryf-list .list-inline li:hover {
 416     background: #eee;
 417   }
 418
 419 }
 420
 421 @media screen and (min-width: 450px) and (max-width: 659px) {
 422   .ryf-list-row {
 423     max-width: 600px;
 424   }
 425   .ryf-list {
 426     max-width: 300px;
 427     float: none;
 428     margin: 0 auto;
 429   }
 430 }
 431 @media screen and (min-width: 660px) and (max-width: 767px) {
 432   .ryf-list-row {
 433     margin: 0 auto;
 434     max-width: 660px;
 435   }
 436   .ryf-list {
 437     max-width: 300px;
 438     float: left;
 439   }
 440   .auto-clear .col-xs-12:nth-child(odd){clear:left;}
 441 }
 442
 443 @media screen and (min-width: 55em) {
 444
 445   .ryf-list article {
 446       min-height: 270px
 447   }
 448
 449 }
 450
 451
 452 /* Vendors list */
 453
 454
 455 @media screen {
 456
 457   .vendors-list-row {
 458     padding: 10px;
 459     margin: 0 auto;
 460     overflow: auto;
 461   }
 462
 463   .vendors-list {
 464     margin-bottom: 40px;
 465     list-style: none;
 466
 467     overflow: auto;
 468   }
 469
 470   .vendors-list .views-field-field-icon {
 471     width: 220px;
 472     height: 220px;
 473
 474     display: flex;
 475     align-items: center;
 476
 477     margin: 0px auto 20px auto;
 478   }
 479
 480   .vendors-list .views-field-field-icon img {
 481     margin: 0 auto;
 482   }
 483
 484   .vendors-list .views-field-name,
 485   .vendors-list .views-field-field-description-summary,
 486   .vendors-list .views-field-description__value {
 487     max-width: 300px;
 488     margin: 0 auto 10px auto;
 489   }
 490
 491   .vendors-list .views-field-name {
 492     font-weight: bold;
 493     font-size: 18px;
 494     text-align: center;
 495   }
 496
 497 }
 498
 499
 500 /* Sidebars */
 501
 502
 503 @media screen and (max-width: 767px) {
 504   .path-products #block-views-block-categories-categories-block { display: none; }
 505 }
 506
 507
 508 /* Vendor and Category taxonomy term pages */
 509
 510
 511 @media screen {
 512
 513   .view-taxonomy-term .view-header .field--name-field-icon img {
 514     margin: 0 auto;
 515   }
 516
 517   .view-filters {
 518     clear: left;
 519   }
 520
 521   .view-taxonomy-term .view-header .field--name-field-vendor-support-link,
 522   .view-taxonomy-term .view-header .field--name-field-vendor-support-email {
 523     margin-top: 15px;
 524   }
 525
 526 }
 527
 528 @media screen and (max-width: 559px) {
 529   .view-taxonomy-term.view-display-id-taxonomy_term_vendor .view-header {
 530     margin: 0 auto 40px auto;
 531     overflow: auto;
 532   }
 533
 534   .view-taxonomy-term .view-header .field--name-field-icon {
 535     margin: 0 auto 20px auto;
 536     width: 220px;
 537   }
 538
 539   .view-taxonomy-term .view-header .field--name-description,
 540   .view-taxonomy-term .view-header .field--name-field-description-summary,
 541   .view-taxonomy-term .view-header .field--name-field-vendor-website,
 542   .view-taxonomy-term .view-header .field--name-field-vendor-support-link,
 543   .view-taxonomy-term .view-header .field--name-field-vendor-support-email {
 544     max-width: 360px;
 545     margin: 15px auto 0 auto;
 546     padding: 0 10px;
 547   }
 548
 549 }
 550
 551 @media screen and (min-width: 560px) {
 552   .view-taxonomy-term.view-display-id-taxonomy_term_vendor .view-header {
 553     margin: 0 0 40px 0;
 554     overflow: auto;
 555   }
 556
 557   .view-taxonomy-term .view-header .field--name-field-icon {
 558     width: 220px;
 559     float: left;
 560   }
 561
 562   .view-taxonomy-term .view-header .field--name-description,
 563   .view-taxonomy-term .view-header .field--name-field-description-summary,
 564   .view-taxonomy-term .view-header .field--name-field-vendor-website,
 565   .view-taxonomy-term .view-header .field--name-field-vendor-support-link,
 566   .view-taxonomy-term .view-header .field--name-field-vendor-support-email {
 567     margin: 15px auto 0 260px;
 568   }
 569
 570 }
 571
 572 @media screen and (min-width: 768px) {
 573   .view-taxonomy-term .view-header {
 574     max-width: 700px;
 575   }
 576 }
 577
 578
 579 /* Product */
 580
 581
 582 @media screen and (max-width: 767px) {
 583   .page-node-type-product .product {
 584     max-width: 382px;
 585     margin: 0 auto;
 586   }
 587 }
 588
 589 @media screen and (min-width: 768px) and (max-width: 991px) {
 590   .page-node-type-product .product {
 591     width: 700px;
 592     margin: 0 auto;
 593   }
 594 }
 595
 596 @media screen and (min-width: 992px) {
 597   .page-node-type-product .product {
 598     width: 800px;
 599     margin: 0 auto;
 600   }
 601 }
 602
 603 @media screen {
 604
 605   .page-node-type-product .product .field--name-field-image {
 606     padding: 10px;
 607
 608     border: 1px solid #888;
 609     border-radius: 10px;
 610   }
 611
 612   .page-node-type-product .product .field--name-field-image img {
 613     margin: 0 auto;
 614   }
 615
 616   .page-node-type-product .product .field--name-field-extra-images {
 617     padding: 0 11px;
 618     display: flex;
 619     align-items: center;
 620   }
 621
 622   .page-node-type-product .product .field--name-field-extra-images .field--item {
 623     display: inline-block;
 624     margin-right: 15px;
 625     padding: 5px;
 626   }
 627   .page-node-type-product .product .field--name-field-extra-images .field--item:last-child {
 628     margin-right: 0;
 629   }
 630
 631   .page-node-type-product .product .field--name-field-categories,
 632   .page-node-type-product .product .field--name-field-vendor {
 633     margin: 10px 10px 20px 0px;
 634     padding: 10px;
 635   }
 636
 637   .page-node-type-product .product .field--name-field-categories .field--item {
 638     display: list-item;
 639     list-style: circle;
 640     margin-left: 15px;
 641   }
 642
 643   /* Mostly from Bootstrap 3 button CSS */
 644   .page-node-type-product .product .field--name-field-vendor-product-link a {
 645       color: #fff;
 646       background-color: #337ab7;
 647       border-color: #2e6da4;
 648       display: inline-block;
 649       margin-bottom: 0;
 650       font-weight: normal;
 651       text-align: center;
 652       white-space: nowrap;
 653       vertical-align: middle;
 654       -ms-touch-action: manipulation;
 655       touch-action: manipulation;
 656       cursor: pointer;
 657       background-image: none;
 658       border: 1px solid transparent;
 659       padding: 6px 12px;
 660       font-size: 14px;
 661       line-height: 1.42857143;
 662       border-radius: 4px;
 663       -webkit-user-select: none;
 664       -moz-user-select: none;
 665       -ms-user-select: none;
 666       user-select: none;
 667       text-decoration: none;
 668   }
 669
 670   #block-views-block-categories-categories-block ul {
 671     margin: 0; padding: 0 10px;
 672     list-style: none;
 673   }
 674
 675   #block-views-block-categories-categories-block li {
 676     padding: 5px 10px;
 677     border: 1px solid #DDD;
 678     border-radius: 5px;
 679     list-style: none;
 680     margin: 5px 0;
 681   }
 682
 683   #block-views-block-categories-categories-block li:hover {
 684     background: #EEE;
 685     color: #000;
 686   }
 687
 688   #block-views-block-categories-categories-block a {
 689     width: 100%;
 690     display: block;
 691   }
 692
 693   /* product page colors */
 694   .page-node-type-product .product .field--name-field-image {
 695     background-color: #fff;
 696     border-color: #aaa;
 697   }
 698
 699 }
 700
 701 @media screen and (max-width: 767px) {
 702   .page-node-type-product .product .field--name-field-extra-images {
 703     margin: 10px auto 0px auto;
 704   }
 705
 706   .page-node-type-product .product .field--name-body,
 707   .page-node-type-product .product .field--name-field-product-announcement,
 708   .page-node-type-product .product .field--name-field-vendor-product-link,
 709   .page-node-type-product .product .field--name-field-certification-details,
 710   .page-node-type-product .product .field--name-field-certification-date,
 711   .page-node-type-product .product .field--name-field-source-code-links {
 712     padding-top: 20px;
 713   }
 714
 715   .page-node-type-product .product .field--name-field-categories,
 716   .page-node-type-product .product .field--name-field-vendor {
 717     margin-bottom: 0px;
 718     float: left;
 719   }
 720
 721   .page-node-type-product .product .field--name-body,
 722   .page-node-type-product .product .field--name-field-product-announcement,
 723   .page-node-type-product .product .field--name-field-vendor-product-link,
 724   .page-node-type-product .product .field--name-field-certification-details,
 725   .page-node-type-product .product .field--name-field-certification-date,
 726   .page-node-type-product .product .field--name-field-source-code-links {
 727     clear: both;
 728   }
 729 }
 730
 731
 732 @media screen and (min-width: 768px) {
 733   .page-node-type-product .product .field--name-field-image {
 734     width: 382px;
 735     float: left;
 736   }
 737
 738   .page-node-type-product .product .field--name-field-extra-images {
 739     float: left;
 740     clear: left;
 741     width: 382px;
 742     margin-top: 10px;
 743   }
 744
 745   .page-node-type-product .product .field--name-body,
 746   .page-node-type-product .product .field--name-field-product-announcement,
 747   .page-node-type-product .product .field--name-field-vendor-product-link,
 748   .page-node-type-product .product .field--name-field-certification-details,
 749   .page-node-type-product .product .field--name-field-certification-date,
 750   .page-node-type-product .product .field--name-field-source-code-links {
 751     margin-left: 400px;
 752     margin-top: 20px;
 753   }
 754
 755   .page-node-type-product .product .field--name-field-categories {
 756     float: left;
 757     clear: left;
 758   }
 759
 760   .page-node-type-product .product .field--name-field-vendor {
 761     float: left;
 762   }
 763
 764 }
 765
 766
 767 /* News and Product Announcements */
 768
 769
 770 @media screen {
 771
 772   .page-node-type-product-announcement .page-header,
 773   .page-node-type-product-announcement .tabs--primary,
 774   .page-node-type-product-announcement .region-content,
 775   .page-node-type-general-news-item .page-header,
 776   .page-node-type-general-news-item .tabs--primary,
 777   .page-node-type-general-news-item .region-content,
 778   .page-node-type-page .page-header,
 779   .page-node-type-page .tabs--primary,
 780   .page-node-type-page .region-content,
 781   .path-news .page-header,
 782   .path-news .tabs--primary,
 783   .path-news .region-content {
 784     max-width: 800px;
 785     margin: 0 auto;
 786   }
 787
 788   /* don't apply above max-width rule to main page */
 789   .path-frontpage .page-header,
 790   .path-frontpage .tabs--primary,
 791   .path-frontpage .region-content {
 792     max-width: 2000px; /* high number beyond the max */
 793   }
 794
 795   .page-node-type-page .page-header {
 796     margin-bottom: 20px;
 797   }
 798
 799   .path-news h2,
 800   .block-views-blocknews-news-block article h2 {
 801     font-size: 25px;
 802   }
 803
 804   .page-node-type-product-announcement .author,
 805   .page-node-type-general-news-item .author {
 806     margin: 10px 0 20px 0;
 807     font-style: oblique;
 808   }
 809
 810   .page-node-type-product-announcement .field--name-body,
 811   .page-node-type-general-news-item .field--name-body {
 812     margin-bottom: 20px;
 813   }
 814
 815   .page-node-type-product-announcement .field--name-field-external-news-link,
 816   .page-node-type-general-news-item .field--name-field-external-news-link {
 817     margin-bottom: 20px;
 818   }
 819
 820   .page-node-type-product-announcement .field--name-field-vendor-page,
 821   .page-node-type-product-announcement .field--name-field-announced-products {
 822     margin-bottom: 20px;
 823   }
 824
 825 }
 826
 827
 828 /* Search Results */
 829
 830
 831 @media screen and (max-width: 600px) {
 832   .path-search .region-content > ol {
 833     width: 300px;
 834   }
 835 }
 836 @media screen and (min-width: 601px) and (max-width 1000px) {
 837   .path-search .region-content > ol {
 838     width: 560px;
 839   }
 840 }
 841 @media screen and (min-width: 1001px) {
 842   .path-search .region-content > ol {
 843     width: 900px;
 844   }
 845 }
 846
 847 @media screen {
 848
 849   .path-search .region-content > ol {
 850     margin: 0 auto;
 851     padding-left: 0;
 852     overflow: auto;
 853   }
 854
 855   .path-search .region-content > ol li {
 856     width: 280px;
 857     height: 320px;
 858     margin: 0px auto;
 859     padding: 10px;
 860
 861     float: left;
 862
 863     list-style: none;
 864     overflow: hidden;
 865   }
 866
 867   .path-search .region-content > ol li h3 {
 868     text-align: center;
 869   }
 870
 871   .path-search .region-content > ol li .search-image {
 872     width: 220px;
 873     height: 220px;
 874
 875     margin: 0 auto;
 876
 877     display: flex;
 878     align-items: center;
 879   }
 880
 881   .path-search .region-content > ol li p {
 882     display: block;
 883     width: 220px;
 884     margin: 0 auto;
 885   }
 886
 887   .path-search .region-content > ol li img {
 888   }
 889 }
 890
 891
 892 /* Footer */
 893
 894 @media screen {
 895
 896   .footer {
 897     background: #333;
 898     color: #FFF;
 899   }
 900
 901   #email-signup .email-input {
 902     color: #000;
 903     display: block;
 904     margin-bottom: 10px;
 905   }
 906   #email-signup .action-button {
 907     color: #000;
 908     display: block;
 909   }
 910
 911   /* full page width for footer */
 912
 913   .footer {
 914     width: 100%;
 915   }
 916
 917   .footer a { color: #edd400; }
 918
 919   .footer a:hover { color: #FFF; }
 920
 921   .footer h4 { font-weight: bold; }
 922
 923   .footer .copyright { font-size: 0.9em; text-align: center; width: 80%; margin-top: 1em; border-top: 1px solid #111; padding: 1em; }
 924
 925   #fsf-logo-footer { margin-bottom: 10px; }
 926 }
 927
 928 @media print { #fsf-logo-footer { filter: invert(100%) } }
 929