Advertisement
swest

speaking-events-view CSS

Mar 1st, 2025
176
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 5.25 KB | None | 0 0
  1. header.event-title,
  2. .single-event-view .entry-header {
  3.     display: none;
  4. }
  5.  
  6. .event-details .event-description {
  7.     margin-bottom: 0.5em !important;
  8. }
  9.  
  10. .speaker-topic-wrapper {
  11.     display: grid;
  12.     grid-template-columns: 1fr 6fr;
  13.     gap: 2rem;
  14.     margin-left: 1rem;
  15.     margin-right: 1rem;
  16. }
  17.  
  18. .speaker-topic-wrapper .related-team-member {
  19.     order: 1;
  20.     display: flex;
  21.     flex-wrap: wrap;
  22.     aspect-ratio: 1;
  23.     object-fit: cover;
  24.     justify-self: center;
  25.     justify-content: center;
  26.     align-self: center;
  27.     align-items: center;
  28.     align-content: center;
  29. }
  30.  
  31. .team-member-name {
  32.     text-align: center;
  33.     font-weight: 500;
  34.     font-size: 1.1em;
  35.     margin-block-start: .5em !important;
  36.     margin-block-end: .5em !important;
  37. }
  38.  
  39. .speaker-topic-wrapper .topic-details {
  40.     order: 2;
  41. }
  42.  
  43. .speaker-topic-wrapper .topic-description {
  44.     margin-bottom: 1rem;
  45. }
  46.  
  47. .post-type-archive-event hr {
  48.     border-bottom-width: 1px;
  49.     color: var(--global-palette6);
  50.     margin-bottom: 1rem !important;
  51.     margin-top: 1rem !important;
  52. }
  53.  
  54. .topic-date-time {
  55.     margin-bottom: .5rem !important;
  56. }
  57.  
  58. .dpl.single-event b {
  59.     font-weight: 500 !important;
  60. }
  61.  
  62. .topic-title {
  63.     font-size: 1.5rem;
  64.     margin-top: .5rem !important;
  65.     margin-bottom: .5rem !important;
  66.     line-height: 1.1;
  67. }
  68.  
  69. .event-location {
  70.     display: flex;
  71.     flex-wrap: wrap;
  72.     align-content: center;
  73.     list-style-type: none;
  74.     margin-bottom: 0 !important;
  75.     padding-left: 0 !important;
  76. }
  77.  
  78. .post-type-archive-event .entry-content h2.topic-title a,
  79. .post-type-archive-event .entry-content a {
  80.     text-decoration: underline;
  81.     color: var(--global-palette1);
  82.     ;
  83.     transition: all 0.1s linear;
  84. }
  85.  
  86. .post-type-archive-event .entry-content a:hover {
  87.     text-decoration: underline;
  88.     text-decoration-color: currentcolor;
  89.     box-shadow: inset 0 -30px 0 0 var(--global-palette1);
  90.     color: var(--global-palette9) !important;
  91. }
  92.  
  93. .post-type-archive-event .entry-content h2.topic-title a:hover {
  94.     text-decoration: underline;
  95.     text-decoration-color: currentcolor;
  96.     box-shadow: inset 0 -40px 0 0 var(--global-palette1);
  97.     color: var(--global-palette9) !important;
  98. }
  99.  
  100. .topic-tags {
  101.     margin: 1em 0;
  102.     display: flex;
  103. }
  104.  
  105. .topic-attachments {
  106.     display: flex;
  107.     flex-wrap: wrap;
  108.     justify-content: flex-start;
  109. }
  110.  
  111. .topic-tag-list,
  112. .topic-attachment-list {
  113.     display: flex;
  114.     flex-wrap: wrap;
  115.     justify-content: flex-start;
  116.     align-content: center;
  117.     list-style-type: none;
  118.     padding-left: 0 !important;
  119.     margin-left: 20px !important;
  120.     margin-bottom: 1em !important;
  121. }
  122.  
  123. .topic-tag-list .tag-item {
  124.     color: var(--global-palette9);
  125.     background-color: var(--global-palette1);
  126.     border-radius: 20px;
  127.     font-size: .8em;
  128.     font-weight: 400;
  129.     padding: calc(.4em - 3px) calc(1em - 3px);
  130.     text-decoration: none;
  131.     margin-right: .8em;
  132.     transition: background-color 0.5s ease;
  133.     cursor: default;
  134.     /* change to pointer if these become linkable */
  135. }
  136.  
  137. .topic-attachment-list .attachment-download-button {
  138.     display: inline-block;
  139.     color: var(--global-palette2);
  140.     background-color: var(--global-palette3);
  141.     border: 1px solid var(--global-palette2);
  142.     border-radius: 3px;
  143.     font-size: 1em;
  144.     padding: calc(.4em - 2px) calc(1em - 2px);
  145.     text-decoration: none;
  146.     text-transform: uppercase;
  147.     transition: background-color 0.5s ease;
  148.     margin-right: .5em;
  149. }
  150.  
  151. .topic-attachment-list .attachment-download-button:hover {
  152.     color: var(--global-palette4);
  153.     background-color: var(--global-palette9);
  154.     border: 1px solid var(--global-palette4);
  155. }
  156.  
  157. .post-type-archive-event h2.topic-title a,
  158. .post-type-archive-event a {
  159.     text-decoration: underline;
  160.     color: var(--global-palette1);
  161.     transition: all 0.1s linear;
  162. }
  163.  
  164. .post-type-archive-event a:hover {
  165.     text-decoration: underline;
  166.     text-decoration-color: currentcolor;
  167.     box-shadow: inset 0 -30px 0 0 var(--global-palette1);
  168.     color: var(--global-palette9) !important;
  169. }
  170.  
  171. .post-type-archive-event h2.topic-title a:hover {
  172.     text-decoration: underline;
  173.     text-decoration-color: currentcolor;
  174.     box-shadow: inset 0 -40px 0 0 var(--global-palette1);
  175.     color: var(--global-palette9) !important;
  176. }
  177.  
  178. .truncate3 {
  179.     overflow: hidden;
  180.     text-overflow: ellipsis;
  181.     display: -webkit-box;
  182.     -webkit-line-clamp: 3;
  183.     line-clamp: 3;
  184.     /* number of lines to show */
  185.     -webkit-box-orient: vertical;
  186.     margin-top: 1rem;
  187. }
  188.  
  189. .post-type-archive-event .read-more-link {
  190.     text-align: right;
  191.     margin-top: .25rem !important;
  192.     margin-bottom: 1rem !important;
  193.     padding-left: 1rem;
  194.     padding-right: 3rem;
  195. }
  196.  
  197. .related-team-member {
  198.     aspect-ratio: 1;
  199.     width: 150px !important;
  200.     height: auto;
  201. }
  202.  
  203. .related-team-member .speaker-image {
  204.     aspect-ratio: 1;
  205.     object-fit: cover;
  206.     border-radius: 50%;
  207.     border: 5px solid var(--global-palette1);
  208.     justify-self: center;
  209. }
  210.  
  211. @media screen and (max-width: 767px) {
  212.     .kadence-column45900_bde0da-0a>.kt-inside-inner-col {
  213.         padding-top: 0 !important;
  214.         min-height: 25vh !important;
  215.         margin-top: -0.5em;
  216.     }
  217.  
  218.     .speaker-topic-wrapper {
  219.         grid-template-columns: 1fr;
  220.         margin-left: 0;
  221.         margin-right: 0;
  222.     }
  223.  
  224.     .team-member-details {
  225.         justify-self: center;
  226.     }
  227.  
  228.     .topic-date-time,
  229.     .topic-title {
  230.         text-align: center;
  231.     }
  232. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement