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