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