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   display: flex;
 407   align-items: center;
 408
 409   border: 1px solid #888;
 410   border-radius: 10px;
 411 }
 412
 413 .page-node-type-product .product .field--name-field-extra-images {
 414   padding: 5px;
 415
 416   display: flex;
 417   align-items: center;
 418
 419   border: 1px solid #888;
 420   border-radius: 10px;
 421 }
 422
 423 .page-node-type-product .product .field--name-field-extra-images .field--item {
 424   display: inline-block;
 425   margin: auto;
 426   padding: 5px;
 427 }
 428
 429 .page-node-type-product .product .field--name-field-categories,
 430 .page-node-type-product .product .field--name-field-vendor {
 431   margin: 10px 10px 20px 0px;
 432   padding: 10px;
 433   border: 1px solid #888;
 434   border-radius: 10px;
 435 }
 436
 437 .page-node-type-product .product .field--name-field-categories .field--item {
 438   display: list-item;
 439   list-style: circle;
 440   margin-left: 15px;
 441 }
 442
 443 /* product page colors */
 444 .page-node-type-product .product .field--name-field-image {
 445   background-color: #fff;
 446   border-color: #aaa;
 447 }
 448 .page-node-type-product .product .field--name-field-extra-images {
 449   background-color: #f3f3f3;
 450   border-color: #aaa;
 451 }
 452 .page-node-type-product .product .field--name-field-categories {
 453   background-color: #def;
 454   border-color: #8ad;
 455 }
 456 .page-node-type-product .product .field--name-field-vendor {
 457   background-color: #dfe;
 458   border-color: #8da;
 459 }
 460
 461 @media screen and (max-width: 767px) {
 462   .page-node-type-product .product .field--name-field-extra-images {
 463     margin: 10px auto 0px auto;
 464   }
 465
 466   .page-node-type-product .product .field--name-body,
 467   .page-node-type-product .product .field--name-field-vendor-product-link,
 468   .page-node-type-product .product .field--name-field-certification-details,
 469   .page-node-type-product .product .field--name-field-certification-date,
 470   .page-node-type-product .product .field--name-field-source-code-links {
 471     margin-bottom: 20px;
 472   }
 473
 474   .page-node-type-product .product .field--name-field-categories,
 475   .page-node-type-product .product .field--name-field-vendor {
 476     float: left;
 477   }
 478
 479   .page-node-type-product .product .field--name-body {
 480     clear: both;
 481   }
 482 }
 483
 484
 485 @media screen and (min-width: 768px) {
 486   .page-node-type-product .product .field--name-field-image {
 487     width: 382px;
 488     float: left;
 489   }
 490
 491   .page-node-type-product .product .field--name-field-extra-images {
 492     float: left;
 493     clear: left;
 494
 495     width: 382px;
 496     margin-top: 10px;
 497   }
 498
 499   .page-node-type-product .product .field--name-body,
 500   .page-node-type-product .product .field--name-field-vendor-product-link,
 501   .page-node-type-product .product .field--name-field-certification-details,
 502   .page-node-type-product .product .field--name-field-certification-date,
 503   .page-node-type-product .product .field--name-field-source-code-links {
 504     margin-left: 400px;
 505     margin-bottom: 20px;
 506   }
 507
 508   .page-node-type-product .product .field--name-field-categories {
 509     float: left;
 510     clear: left;
 511   }
 512
 513   .page-node-type-product .product .field--name-field-vendor {
 514     float: left;
 515   }
 516
 517 }
 518
 519
 520 /* News and Product Announcements */
 521
 522
 523 .page-node-type-product-announcement .page-header,
 524 .page-node-type-product-announcement .tabs--primary,
 525 .page-node-type-product-announcement .region-content,
 526 .page-node-type-general-news-item .page-header,
 527 .page-node-type-general-news-item .tabs--primary,
 528 .page-node-type-general-news-item .region-content,
 529 .page-node-type-page .page-header,
 530 .page-node-type-page .tabs--primary,
 531 .page-node-type-page .region-content,
 532 .path-news .page-header,
 533 .path-news .tabs--primary,
 534 .path-news .region-content {
 535   max-width: 800px;
 536   margin: 0 auto;
 537 }
 538
 539 /* don't apply above max-width rule to main page */
 540 .path-frontpage .page-header,
 541 .path-frontpage .tabs--primary,
 542 .path-frontpage .region-content {
 543   max-width: 2000px; /* high number beyond the max */
 544 }
 545
 546 .page-node-type-page .page-header {
 547   margin-bottom: 20px;
 548 }
 549
 550 .path-news h2,
 551 .block-views-blocknews-news-block article h2 {
 552   font-size: 25px;
 553 }
 554
 555 .page-node-type-product-announcement .author,
 556 .page-node-type-general-news-item .author {
 557   margin: 10px 0 20px 0;
 558   font-style: oblique;
 559 }
 560
 561 .page-node-type-product-announcement .field--name-body,
 562 .page-node-type-general-news-item .field--name-body {
 563   margin-bottom: 20px;
 564 }
 565
 566 .page-node-type-product-announcement .field--name-field-external-news-link,
 567 .page-node-type-general-news-item .field--name-field-external-news-link {
 568   margin-bottom: 20px;
 569 }
 570
 571 .page-node-type-product-announcement .field--name-field-vendor-page,
 572 .page-node-type-product-announcement .field--name-field-announced-products {
 573   margin-bottom: 20px;
 574 }
 575
 576
 577 /* Search Results */
 578
 579
 580 @media screen and (max-width: 600px) {
 581   .path-search .region-content ol {
 582     width: 300px;
 583   }
 584 }
 585 @media screen and (min-width: 601px) and (max-width 1000px) {
 586   .path-search .region-content ol {
 587     width: 560px;
 588   }
 589 }
 590 @media screen and (min-width: 1001px) {
 591   .path-search .region-content ol {
 592     width: 900px;
 593   }
 594 }
 595
 596 .path-search .region-content ol {
 597   margin: 0 auto;
 598   padding-left: 0;
 599   overflow: auto;
 600 }
 601
 602 .path-search .region-content li {
 603   width: 280px;
 604   height: 280px;
 605   margin: 0px auto;
 606   padding: 10px;
 607
 608   float: left;
 609
 610   list-style: none;
 611   overflow: hidden;
 612 }
 613
 614 .path-search .region-content li h3 {
 615   text-align: center;
 616 }
 617
 618 .path-search .region-content li .search-image {
 619   width: 100px;
 620   height: 100px;
 621
 622   margin: 0 auto;
 623
 624   display: flex;
 625   align-items: center;
 626 }
 627
 628 .path-search .region-content li img {
 629 }
 630
 631
 632 /* Footer */
 633
 634
 635 .footer {
 636   background: #333;
 637   color: #FFF;
 638 }
 639
 640 /* full page width for footer */
 641 .footer {
 642   width: 100%;
 643 }
 644
 645 .footer a { color: #edd400; }
 646
 647 .footer a:hover { color: #FFF; }
 648
 649 .footer h4 { font-weight: bold; }
 650
 651 .footer .copyright { font-size: 0.9em; text-align: center; width: 80%; margin-top: 1em; border-top: 1px solid #111; padding: 1em; }
 652
 653 #fsf-logo-footer { margin-bottom: 10px; }
 654
 655 @media print { #fsf-logo-footer { filter: invert(100%) } }
 656