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