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