You are here

node.css in Drupal 10

Node specific styles.

File

core/themes/olivero/css/components/node.css
View source
  1. /*
  2. * DO NOT EDIT THIS FILE.
  3. * See the following change record for more information,
  4. * https://www.drupal.org/node/3084859
  5. * @preserve
  6. */
  7. /**
  8. * @file
  9. * Node specific styles.
  10. */
  11. /*
  12. * Media query breakpoints.
  13. * Processed by postcss/postcss-custom-media.
  14. */
  15. /* Navigation related breakpoints */
  16. /* Grid related breakpoints */
  17. /* Grid shifts from 6 to 14 columns. */
  18. /* Width of the entire grid maxes out. */
  19. .node__meta {
  20. display: flex;
  21. align-items: center;
  22. margin-bottom: var(--sp1);
  23. color: var(--color-text-neutral-soft);
  24. font-size: 0.875rem;
  25. line-height: var(--sp)
  26. }
  27. .node__meta a {
  28. font-weight: bold;
  29. }
  30. @media (min-width: 31.25rem) {
  31. .node__meta {
  32. margin-bottom: var(--sp2)
  33. }
  34. }
  35. [dir="ltr"] .node__author-image img {
  36. margin-right: var(--sp0-5)
  37. }
  38. [dir="rtl"] .node__author-image img {
  39. margin-left: var(--sp0-5)
  40. }
  41. .node__author-image img {
  42. width: var(--sp2-5);
  43. height: var(--sp2-5);
  44. object-fit: cover;
  45. border-radius: 50%;
  46. }
  47. .node__title a {
  48. padding-bottom: 0.1875rem;
  49. transition: background-size 0.2s, color 0.2s;
  50. text-decoration: none;
  51. color: var(--color-text-neutral-loud);
  52. background-color: transparent;
  53. background-image: linear-gradient(var(--color--primary-50), var(--color--primary-50)); /* Two values are needed for IE11 support. */
  54. background-repeat: no-repeat;
  55. background-position: bottom left; /* LTR */
  56. background-size: 0 0.1875rem
  57. }
  58. .node__title a:hover,
  59. .node__title a:focus {
  60. color: var(--color-text-primary-medium);
  61. }
  62. [dir="rtl"] .node__title {
  63. background-position: bottom right;
  64. }
  65. .node__content {
  66. padding-bottom: var(--sp1-5)
  67. }
  68. @media (min-width: 62.5rem) {
  69. .node__content {
  70. padding-bottom: var(--sp3)
  71. }
  72. }
  73. .node--unpublished {
  74. /* There is no variable for the color - #fff4f4. */
  75. background-color: #fff4f4;
  76. }