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