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