diff --git a/comments.php b/comments.php index 40dad8a0..ef93128a 100644 --- a/comments.php +++ b/comments.php @@ -16,6 +16,8 @@ return; } ?> -
- ' ); ?> +
+
+ ' ); ?> +
diff --git a/dist/css/blocks/common-rtl.css b/dist/css/blocks/common-rtl.css index 7313689f..09ca2407 100644 --- a/dist/css/blocks/common-rtl.css +++ b/dist/css/blocks/common-rtl.css @@ -99,6 +99,9 @@ margin-left: 0; } .wp-block-buttons[class][class][class] .wp-block-button__link[class] { display: block; } + .wp-block-buttons[class][class][class] > .wp-block { + margin-right: 0; + margin-left: 0; } /* Columns Blocks */ .wp-block-columns[class]:not(:first-child), diff --git a/dist/css/blocks/common.css b/dist/css/blocks/common.css index 31f1b321..0450a182 100644 --- a/dist/css/blocks/common.css +++ b/dist/css/blocks/common.css @@ -99,6 +99,9 @@ margin-right: 0; } .wp-block-buttons[class][class][class] .wp-block-button__link[class] { display: block; } + .wp-block-buttons[class][class][class] > .wp-block { + margin-left: 0; + margin-right: 0; } /* Columns Blocks */ .wp-block-columns[class]:not(:first-child), diff --git a/dist/css/blocks/nova-blocks/conversations-rtl.css b/dist/css/blocks/nova-blocks/conversations-rtl.css new file mode 100644 index 00000000..496379ba --- /dev/null +++ b/dist/css/blocks/nova-blocks/conversations-rtl.css @@ -0,0 +1,313 @@ +.novablocks-conversations { + --avatar-column-size: 2.8rem; + --comments-grid-gap: 1.4rem; + --component-accent-color: var(--current-color-primary); + --novablocks-conversations-width: 48em; + --field-description-color: var(--current-dark-primary); + --conversations-bg-color: var(--current-light-primary); + --conversations-reply-bg-color: var(--current-light-tertiary); + --comment-author-color: var(--component-accent-color); + --comment-links-color: var(--component-accent-color); + --comment-highlighted-color: #FFF2CE; + --comment-font-size: calc(var(--theme-body-final-font-size) * 1.05); + --label-font-size: var(--final-font-size); + --label-bg-color: var(--current-dark-primary); + --label-highlighted-bg-color: var(--theme-dark-primary); + --label-border-radius: 999em; + --comment-footer-font-size: var(--final-font-size); + --field-description-font-size: var(--final-font-size); + --novablocks-spacing: var(--theme-spacing-fluid-medium); } + .novablocks-conversations .comment-list[class] { + --novablocks-element-spacing-multiplier: 1.5; } + .novablocks-conversations .comment-footer-meta[class] * { + font-size: inherit; } + .novablocks-conversations .comment-footer-highlights[class], + .novablocks-conversations .commenter-background-label { + --font-size: 13; + --current-font-weight: regular; + font-size: var(--final-font-size); } + .novablocks-conversations .comment-dropdown-toggle { + --font-size: 15; + --current-font-weight: regular; + font-size: var(--final-font-size); } + .novablocks-conversations .comment-footer-meta[class] { + --font-size: 16; + font-size: var(--final-font-size); } + .novablocks-conversations .comment-form label { + --font-size: 14; } + .novablocks-conversations .comment-form label + .field-description:not(:empty) { + margin-top: calc(-1 * var(--theme-input-vertical-spacing)); } + .novablocks-conversations .comment-form .field-description[class] { + --font-size: 15; + font-size: var(--final-font-size); } + .novablocks-conversations .comment-highlighted { + --component-accent-color: var(--theme-dark-primary); + --comment-author-color: var(--theme-dark-primary); } + .novablocks-conversations .comment-highlightedby-humans { + padding-right: 0; } + .novablocks-conversations .comment-form p:not(:last-child) { + margin-bottom: 0; } + .novablocks-conversations .comment-dropdown-menu[class] { + min-width: 220px; } + .novablocks-conversations .form-submit { + width: 100%; } + .novablocks-conversations [id="submit"] { + --current-font-weight: regular !important; } + .novablocks-conversations .comment-footer-highlights { + --current-font-weight: bold; } + .novablocks-conversations .comment .comment-highlighted, + .novablocks-conversations .comment .comment-highlighted .comment-dropdown-toggle { + color: var(--theme-dark-primary); } + @media not screen and (min-width: 1000px) { + .novablocks-conversations .comment { + margin-right: calc( -1 * var(--theme-wrapper-sides-spacing)); + margin-left: calc( -1 * var(--theme-wrapper-sides-spacing)); } + .novablocks-conversations .comment > .comment-wrapper { + padding-right: var(--theme-wrapper-sides-spacing); + padding-left: var(--theme-wrapper-sides-spacing); } + .novablocks-conversations .comment.parent > .comment { + margin-right: 0; + margin-left: 0; } + .novablocks-conversations .comment.parent > .comment-wrapper { + color: var(--current-dark-primary); } + .novablocks-conversations .comment .comment-respond { + padding-right: var(--theme-wrapper-sides-spacing); + padding-left: var(--theme-wrapper-sides-spacing); } } + .novablocks-conversations .comment-author-name { + --font-size: 16; + font-size: var(--final-font-size); } + .novablocks-conversations .comment-dropdown-menu { + background-color: var(--current-light-primary); + color: var(--current-dark-primary); } + .novablocks-conversations .comment-dropdown-menu:after { + border-color: transparent transparent var(--current-light-primary); } + @media only screen and (min-width: 768px) { + .novablocks-conversations .comment-dropdown-menu { + top: calc(var(--current-line-height) * var(--final-font-size)); } } + .novablocks-conversations .commenter-background-label[class] { + position: relative; + background: none; + overflow: hidden; + z-index: 1; + color: var(--theme-light-primary); } + .novablocks-conversations .commenter-background-label[class]:before { + content: ''; + position: absolute; + right: 0; + top: 0; + width: 100%; + height: 100%; + background-color: var(--label-bg-color); + z-index: -1; + opacity: .5; } + .novablocks-conversations .comment-highlighted .commenter-background-label:before, + .novablocks-conversations .bypostauthor .commenter-background-label:before { + opacity: 1; } + .novablocks-conversations .bypostauthor .commenter-background-label:before { + background-color: var(--theme-color-primary); + color: var(--theme-light-primary); + opacity: 1; } + .novablocks-conversations .comment-dropdown-toggle { + color: currentColor; + margin-top: 0; + margin-bottom: 0; } + .novablocks-conversations .comments-pagination .page-numbers > li { + margin-top: 0; } + .novablocks-conversations .comments-pagination .page-numbers .page-numbers:not(.current) { + border-color: var(--current-dark-primary); } + .novablocks-conversations .comments-pagination .page-numbers .page-numbers:not(.current):hover { + border-color: var(--component-accent-color); + color: var(--theme-light-primary); } + .novablocks-conversations .fake-form-placeholder { + --novablocks-spacing: var(--theme-spacing-fluid-large); } + .novablocks-conversations .comment-form-comment .field-description { + margin-bottom: var(--theme-input-vertical-spacing); } + .novablocks-conversations .trix-hidden-input { + box-shadow: none; } + .novablocks-conversations .novablocks-conversations__notification-text span { + padding: .5em 1em; + border-radius: 999em; } + .novablocks-conversations .fake-input-button { + grid-row: 1/span 2; } + .novablocks-conversations #cancel-comment-reply-link { + opacity: 1; + color: var(--theme-button-background-color); } + @media not screen and (min-width: 480px) { + .novablocks-conversations .comment-form-cookies-consent[class] { + display: block; } + .novablocks-conversations .comment-form-cookies-consent[class] label { + margin-right: calc(var(--theme-checkbox-width) + 10px); } + .novablocks-conversations .comment-form-cookies-consent[class] input[type="checkbox"] { + margin-top: 5px; } + .novablocks-conversations input { + line-height: normal; } + .novablocks-conversations .commenter-background-label[class] { + padding-top: .2em; } } + +.novablocks-conversations__header { + display: flex; + align-items: baseline; + border-bottom: 4px solid; + padding-bottom: .3em; } + +.novablocks-conversations__title { + --current-font-weight: bold; + padding-left: .25em; } + +.novablocks-conversations__comments-count { + --font-size: 16; + color: var(--field-description-color); + font-size: var(--final-font-size); + opacity: .5; } + +.novablocks-conversations__notification-text[class] span { + background-color: var(--current-dark-primary); + color: var(--current-light-primary); } + +@media not screen and (min-width: 1000px) { + .novablocks-conversation__starter { + margin-right: calc(-1*var(--theme-wrapper-sides-spacing)); + margin-left: calc(-1*var(--theme-wrapper-sides-spacing)); } } + +.novablocks-conversation__starter-subtitle { + --font-size: 19.5; + --component-accent-color: var(--theme-dark-primary); + font-size: var(--final-font-size); } + +.novablocks-conversation__starter-message[class] { + --font-size: 18; + color: var(--theme-dark-primary); + font-size: var(--final-font-size); } + +.comments-area .entry-content { + padding-right: 0; + padding-left: 0; } + +.fake-input-button { + width: 100%; + height: auto; + max-width: 100%; + padding: var(--theme-input-padding); + color: var(--theme-input-color); + border-radius: var(--theme-input-border-radius); + background-color: var(--theme-input-background-color); + box-shadow: var(--theme-input-box-shadow); + border: 0; + transition: all .2s ease-in-out; + --font-size: var(--theme-input-font-size); + font-size: var(--final-font-size); + --current-font-family: var(--theme-input-font-family); + --current-font-weight: var(--theme-input-font-weight); + --current-font-style: var(--theme-input-font-style); + --current-line-height: var(--theme-input-line-height); + --current-letter-spacing: var(--theme-input-letter-spacing); + --current-text-transform: var(--theme-input-text-transform); + font-family: inherit; + -webkit-font-smoothing: initial; + -webkit-appearance: none; } + .fake-input-button:hover { + --theme-input-box-shadow: var(--theme-input-hover-box-shadow); } + .fake-input-button:focus, .fake-input-button:active { + --theme-input-border-color: var(--theme-input-focus-border-color); + --theme-input-box-shadow: var(--theme-input-focus-box-shadow); + outline: 0; } + .fake-input-button[disabled] { + border-color: var(--theme-input-disabled-border-color); + background-color: var(--theme-input-disabled-background-color); } + [class*="invalid"] .fake-input-button { + --theme-input-box-shadow: var(--theme-input-error-box-shadow); + --theme-input-color: var(--theme-input-error-color); + --theme-input-placeholder-color: var(--theme-input-error-color); + --theme-input-placeholder-opacity: 0; } + [class*="invalid"] .fake-input-button:hover { + --theme-input-box-shadow: var(--theme-input-error-box-shadow); } + [class*="invalid"] .fake-input-button:focus, [class*="invalid"] .fake-input-button:active { + --theme-input-box-shadow: var(--theme-input-focus-error-box-shadow); } + .fake-input-button[class] { + color: rgba(0, 0, 0, 0.5); } + .is-dark .fake-input-button { + color: rgba(255, 255, 255, 0.5); } + +.trix-contained-input[class] { + --trix-input-bg-color: var(--theme-input-background-color); + --trix-toolbar-border-color: rgba(0, 0, 0, 0.3); } + .is-dark .trix-contained-input[class] { + --trix-toolbar-border-color: rgb(255, 255, 255); } + +trix-editor[id][id][id]:before { + color: var(--theme-input-placeholder-color); + opacity: var(--theme-input-placeholder-opacity); + --current-font-weight: regular; } + +trix-editor h1 { + --font-size: var(--theme-heading-4-font-size); + font-size: var(--final-font-size); + --current-font-family: var(--theme-heading-4-font-family); + --current-font-weight: var(--theme-heading-4-font-weight); + --current-font-style: var(--theme-heading-4-font-style); + --current-line-height: var(--theme-heading-4-line-height); + --current-letter-spacing: var(--theme-heading-4-letter-spacing); + --current-text-transform: var(--theme-heading-4-text-transform); } + +trix-editor, +trix-toolbar { + width: 100%; + height: auto; + max-width: 100%; + padding: var(--theme-input-padding); + color: var(--theme-input-color); + border-radius: var(--theme-input-border-radius); + background-color: var(--theme-input-background-color); + box-shadow: var(--theme-input-box-shadow); + border: 0; + transition: all .2s ease-in-out; + --font-size: var(--theme-input-font-size); + font-size: var(--final-font-size); + --current-font-family: var(--theme-input-font-family); + --current-font-weight: var(--theme-input-font-weight); + --current-font-style: var(--theme-input-font-style); + --current-line-height: var(--theme-input-line-height); + --current-letter-spacing: var(--theme-input-letter-spacing); + --current-text-transform: var(--theme-input-text-transform); + font-family: inherit; + -webkit-font-smoothing: initial; + -webkit-appearance: none; + max-width: none; } + trix-editor:hover, + trix-toolbar:hover { + --theme-input-box-shadow: var(--theme-input-hover-box-shadow); } + trix-editor:focus, trix-editor:active, + trix-toolbar:focus, + trix-toolbar:active { + --theme-input-border-color: var(--theme-input-focus-border-color); + --theme-input-box-shadow: var(--theme-input-focus-box-shadow); + outline: 0; } + trix-editor[disabled], + trix-toolbar[disabled] { + border-color: var(--theme-input-disabled-border-color); + background-color: var(--theme-input-disabled-background-color); } + [class*="invalid"] trix-editor, [class*="invalid"] + trix-toolbar { + --theme-input-box-shadow: var(--theme-input-error-box-shadow); + --theme-input-color: var(--theme-input-error-color); + --theme-input-placeholder-color: var(--theme-input-error-color); + --theme-input-placeholder-opacity: 0; } + [class*="invalid"] trix-editor:hover, [class*="invalid"] + trix-toolbar:hover { + --theme-input-box-shadow: var(--theme-input-error-box-shadow); } + [class*="invalid"] trix-editor:focus, [class*="invalid"] trix-editor:active, [class*="invalid"] + trix-toolbar:focus, [class*="invalid"] + trix-toolbar:active { + --theme-input-box-shadow: var(--theme-input-focus-error-box-shadow); } + trix-editor[id], + trix-toolbar[id] { + border: 0; } + +trix-toolbar[id] { + padding: 0; + box-shadow: none; + border: 1px solid var(--trix-toolbar-border-color); + border-bottom: 0; } + +.is-dark .trix-button--icon:before { + filter: invert(1); } diff --git a/dist/css/blocks/nova-blocks/conversations.css b/dist/css/blocks/nova-blocks/conversations.css new file mode 100644 index 00000000..fdd856f5 --- /dev/null +++ b/dist/css/blocks/nova-blocks/conversations.css @@ -0,0 +1,313 @@ +.novablocks-conversations { + --avatar-column-size: 2.8rem; + --comments-grid-gap: 1.4rem; + --component-accent-color: var(--current-color-primary); + --novablocks-conversations-width: 48em; + --field-description-color: var(--current-dark-primary); + --conversations-bg-color: var(--current-light-primary); + --conversations-reply-bg-color: var(--current-light-tertiary); + --comment-author-color: var(--component-accent-color); + --comment-links-color: var(--component-accent-color); + --comment-highlighted-color: #FFF2CE; + --comment-font-size: calc(var(--theme-body-final-font-size) * 1.05); + --label-font-size: var(--final-font-size); + --label-bg-color: var(--current-dark-primary); + --label-highlighted-bg-color: var(--theme-dark-primary); + --label-border-radius: 999em; + --comment-footer-font-size: var(--final-font-size); + --field-description-font-size: var(--final-font-size); + --novablocks-spacing: var(--theme-spacing-fluid-medium); } + .novablocks-conversations .comment-list[class] { + --novablocks-element-spacing-multiplier: 1.5; } + .novablocks-conversations .comment-footer-meta[class] * { + font-size: inherit; } + .novablocks-conversations .comment-footer-highlights[class], + .novablocks-conversations .commenter-background-label { + --font-size: 13; + --current-font-weight: regular; + font-size: var(--final-font-size); } + .novablocks-conversations .comment-dropdown-toggle { + --font-size: 15; + --current-font-weight: regular; + font-size: var(--final-font-size); } + .novablocks-conversations .comment-footer-meta[class] { + --font-size: 16; + font-size: var(--final-font-size); } + .novablocks-conversations .comment-form label { + --font-size: 14; } + .novablocks-conversations .comment-form label + .field-description:not(:empty) { + margin-top: calc(-1 * var(--theme-input-vertical-spacing)); } + .novablocks-conversations .comment-form .field-description[class] { + --font-size: 15; + font-size: var(--final-font-size); } + .novablocks-conversations .comment-highlighted { + --component-accent-color: var(--theme-dark-primary); + --comment-author-color: var(--theme-dark-primary); } + .novablocks-conversations .comment-highlightedby-humans { + padding-left: 0; } + .novablocks-conversations .comment-form p:not(:last-child) { + margin-bottom: 0; } + .novablocks-conversations .comment-dropdown-menu[class] { + min-width: 220px; } + .novablocks-conversations .form-submit { + width: 100%; } + .novablocks-conversations [id="submit"] { + --current-font-weight: regular !important; } + .novablocks-conversations .comment-footer-highlights { + --current-font-weight: bold; } + .novablocks-conversations .comment .comment-highlighted, + .novablocks-conversations .comment .comment-highlighted .comment-dropdown-toggle { + color: var(--theme-dark-primary); } + @media not screen and (min-width: 1000px) { + .novablocks-conversations .comment { + margin-left: calc( -1 * var(--theme-wrapper-sides-spacing)); + margin-right: calc( -1 * var(--theme-wrapper-sides-spacing)); } + .novablocks-conversations .comment > .comment-wrapper { + padding-left: var(--theme-wrapper-sides-spacing); + padding-right: var(--theme-wrapper-sides-spacing); } + .novablocks-conversations .comment.parent > .comment { + margin-left: 0; + margin-right: 0; } + .novablocks-conversations .comment.parent > .comment-wrapper { + color: var(--current-dark-primary); } + .novablocks-conversations .comment .comment-respond { + padding-left: var(--theme-wrapper-sides-spacing); + padding-right: var(--theme-wrapper-sides-spacing); } } + .novablocks-conversations .comment-author-name { + --font-size: 16; + font-size: var(--final-font-size); } + .novablocks-conversations .comment-dropdown-menu { + background-color: var(--current-light-primary); + color: var(--current-dark-primary); } + .novablocks-conversations .comment-dropdown-menu:after { + border-color: transparent transparent var(--current-light-primary); } + @media only screen and (min-width: 768px) { + .novablocks-conversations .comment-dropdown-menu { + top: calc(var(--current-line-height) * var(--final-font-size)); } } + .novablocks-conversations .commenter-background-label[class] { + position: relative; + background: none; + overflow: hidden; + z-index: 1; + color: var(--theme-light-primary); } + .novablocks-conversations .commenter-background-label[class]:before { + content: ''; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + background-color: var(--label-bg-color); + z-index: -1; + opacity: .5; } + .novablocks-conversations .comment-highlighted .commenter-background-label:before, + .novablocks-conversations .bypostauthor .commenter-background-label:before { + opacity: 1; } + .novablocks-conversations .bypostauthor .commenter-background-label:before { + background-color: var(--theme-color-primary); + color: var(--theme-light-primary); + opacity: 1; } + .novablocks-conversations .comment-dropdown-toggle { + color: currentColor; + margin-top: 0; + margin-bottom: 0; } + .novablocks-conversations .comments-pagination .page-numbers > li { + margin-top: 0; } + .novablocks-conversations .comments-pagination .page-numbers .page-numbers:not(.current) { + border-color: var(--current-dark-primary); } + .novablocks-conversations .comments-pagination .page-numbers .page-numbers:not(.current):hover { + border-color: var(--component-accent-color); + color: var(--theme-light-primary); } + .novablocks-conversations .fake-form-placeholder { + --novablocks-spacing: var(--theme-spacing-fluid-large); } + .novablocks-conversations .comment-form-comment .field-description { + margin-bottom: var(--theme-input-vertical-spacing); } + .novablocks-conversations .trix-hidden-input { + box-shadow: none; } + .novablocks-conversations .novablocks-conversations__notification-text span { + padding: .5em 1em; + border-radius: 999em; } + .novablocks-conversations .fake-input-button { + grid-row: 1/span 2; } + .novablocks-conversations #cancel-comment-reply-link { + opacity: 1; + color: var(--theme-button-background-color); } + @media not screen and (min-width: 480px) { + .novablocks-conversations .comment-form-cookies-consent[class] { + display: block; } + .novablocks-conversations .comment-form-cookies-consent[class] label { + margin-left: calc(var(--theme-checkbox-width) + 10px); } + .novablocks-conversations .comment-form-cookies-consent[class] input[type="checkbox"] { + margin-top: 5px; } + .novablocks-conversations input { + line-height: normal; } + .novablocks-conversations .commenter-background-label[class] { + padding-top: .2em; } } + +.novablocks-conversations__header { + display: flex; + align-items: baseline; + border-bottom: 4px solid; + padding-bottom: .3em; } + +.novablocks-conversations__title { + --current-font-weight: bold; + padding-right: .25em; } + +.novablocks-conversations__comments-count { + --font-size: 16; + color: var(--field-description-color); + font-size: var(--final-font-size); + opacity: .5; } + +.novablocks-conversations__notification-text[class] span { + background-color: var(--current-dark-primary); + color: var(--current-light-primary); } + +@media not screen and (min-width: 1000px) { + .novablocks-conversation__starter { + margin-left: calc(-1*var(--theme-wrapper-sides-spacing)); + margin-right: calc(-1*var(--theme-wrapper-sides-spacing)); } } + +.novablocks-conversation__starter-subtitle { + --font-size: 19.5; + --component-accent-color: var(--theme-dark-primary); + font-size: var(--final-font-size); } + +.novablocks-conversation__starter-message[class] { + --font-size: 18; + color: var(--theme-dark-primary); + font-size: var(--final-font-size); } + +.comments-area .entry-content { + padding-left: 0; + padding-right: 0; } + +.fake-input-button { + width: 100%; + height: auto; + max-width: 100%; + padding: var(--theme-input-padding); + color: var(--theme-input-color); + border-radius: var(--theme-input-border-radius); + background-color: var(--theme-input-background-color); + box-shadow: var(--theme-input-box-shadow); + border: 0; + transition: all .2s ease-in-out; + --font-size: var(--theme-input-font-size); + font-size: var(--final-font-size); + --current-font-family: var(--theme-input-font-family); + --current-font-weight: var(--theme-input-font-weight); + --current-font-style: var(--theme-input-font-style); + --current-line-height: var(--theme-input-line-height); + --current-letter-spacing: var(--theme-input-letter-spacing); + --current-text-transform: var(--theme-input-text-transform); + font-family: inherit; + -webkit-font-smoothing: initial; + -webkit-appearance: none; } + .fake-input-button:hover { + --theme-input-box-shadow: var(--theme-input-hover-box-shadow); } + .fake-input-button:focus, .fake-input-button:active { + --theme-input-border-color: var(--theme-input-focus-border-color); + --theme-input-box-shadow: var(--theme-input-focus-box-shadow); + outline: 0; } + .fake-input-button[disabled] { + border-color: var(--theme-input-disabled-border-color); + background-color: var(--theme-input-disabled-background-color); } + [class*="invalid"] .fake-input-button { + --theme-input-box-shadow: var(--theme-input-error-box-shadow); + --theme-input-color: var(--theme-input-error-color); + --theme-input-placeholder-color: var(--theme-input-error-color); + --theme-input-placeholder-opacity: 0; } + [class*="invalid"] .fake-input-button:hover { + --theme-input-box-shadow: var(--theme-input-error-box-shadow); } + [class*="invalid"] .fake-input-button:focus, [class*="invalid"] .fake-input-button:active { + --theme-input-box-shadow: var(--theme-input-focus-error-box-shadow); } + .fake-input-button[class] { + color: rgba(0, 0, 0, 0.5); } + .is-dark .fake-input-button { + color: rgba(255, 255, 255, 0.5); } + +.trix-contained-input[class] { + --trix-input-bg-color: var(--theme-input-background-color); + --trix-toolbar-border-color: rgba(0, 0, 0, 0.3); } + .is-dark .trix-contained-input[class] { + --trix-toolbar-border-color: rgb(255, 255, 255); } + +trix-editor[id][id][id]:before { + color: var(--theme-input-placeholder-color); + opacity: var(--theme-input-placeholder-opacity); + --current-font-weight: regular; } + +trix-editor h1 { + --font-size: var(--theme-heading-4-font-size); + font-size: var(--final-font-size); + --current-font-family: var(--theme-heading-4-font-family); + --current-font-weight: var(--theme-heading-4-font-weight); + --current-font-style: var(--theme-heading-4-font-style); + --current-line-height: var(--theme-heading-4-line-height); + --current-letter-spacing: var(--theme-heading-4-letter-spacing); + --current-text-transform: var(--theme-heading-4-text-transform); } + +trix-editor, +trix-toolbar { + width: 100%; + height: auto; + max-width: 100%; + padding: var(--theme-input-padding); + color: var(--theme-input-color); + border-radius: var(--theme-input-border-radius); + background-color: var(--theme-input-background-color); + box-shadow: var(--theme-input-box-shadow); + border: 0; + transition: all .2s ease-in-out; + --font-size: var(--theme-input-font-size); + font-size: var(--final-font-size); + --current-font-family: var(--theme-input-font-family); + --current-font-weight: var(--theme-input-font-weight); + --current-font-style: var(--theme-input-font-style); + --current-line-height: var(--theme-input-line-height); + --current-letter-spacing: var(--theme-input-letter-spacing); + --current-text-transform: var(--theme-input-text-transform); + font-family: inherit; + -webkit-font-smoothing: initial; + -webkit-appearance: none; + max-width: none; } + trix-editor:hover, + trix-toolbar:hover { + --theme-input-box-shadow: var(--theme-input-hover-box-shadow); } + trix-editor:focus, trix-editor:active, + trix-toolbar:focus, + trix-toolbar:active { + --theme-input-border-color: var(--theme-input-focus-border-color); + --theme-input-box-shadow: var(--theme-input-focus-box-shadow); + outline: 0; } + trix-editor[disabled], + trix-toolbar[disabled] { + border-color: var(--theme-input-disabled-border-color); + background-color: var(--theme-input-disabled-background-color); } + [class*="invalid"] trix-editor, [class*="invalid"] + trix-toolbar { + --theme-input-box-shadow: var(--theme-input-error-box-shadow); + --theme-input-color: var(--theme-input-error-color); + --theme-input-placeholder-color: var(--theme-input-error-color); + --theme-input-placeholder-opacity: 0; } + [class*="invalid"] trix-editor:hover, [class*="invalid"] + trix-toolbar:hover { + --theme-input-box-shadow: var(--theme-input-error-box-shadow); } + [class*="invalid"] trix-editor:focus, [class*="invalid"] trix-editor:active, [class*="invalid"] + trix-toolbar:focus, [class*="invalid"] + trix-toolbar:active { + --theme-input-box-shadow: var(--theme-input-focus-error-box-shadow); } + trix-editor[id], + trix-toolbar[id] { + border: 0; } + +trix-toolbar[id] { + padding: 0; + box-shadow: none; + border: 1px solid var(--trix-toolbar-border-color); + border-bottom: 0; } + +.is-dark .trix-button--icon:before { + filter: invert(1); } diff --git a/dist/css/custom-properties-rtl.css b/dist/css/custom-properties-rtl.css index 261a04ae..5e66f83a 100644 --- a/dist/css/custom-properties-rtl.css +++ b/dist/css/custom-properties-rtl.css @@ -241,41 +241,41 @@ :root { --theme-input-padding: .35em; - --theme-input-color: var(--sm-dark-secondary); + --theme-input-color: var(--current-dark-secondary); --theme-input-error-color: var(--theme-error-color); - --theme-input-background-color: var(--sm-light-primary); - --theme-input-disabled-background-color: var(--sm-dark-secondary); + --theme-input-background-color: var(--current-light-primary); + --theme-input-disabled-background-color: var(--current-dark-secondary); --theme-input-overlay-shadow: inset 0px 0px 0px 1px rgba(var(--opacity-color), 0.70); - --theme-input-colored-shadow: inset 0px 0px 0px 1px var(--sm-dark-primary); + --theme-input-colored-shadow: inset 0px 0px 0px 1px var(--current-dark-primary); --theme-input-box-shadow: var(--theme-input-overlay-shadow), - var(--theme-input-colored-shadow); - --theme-input-border-color: var(--sm-light-tertiary); + var(--theme-input-colored-shadow); + --theme-input-border-color: var(--current-light-tertiary); --theme-input-error-border-color: var(--theme-input-error-color); - --theme-input-disabled-border-color: var(--sm-dark-secondary); + --theme-input-disabled-border-color: var(--current-dark-secondary); --theme-input-border-radius: 0px; --theme-input-focus-overlay-shadow: inset 0px 0px 0px 2px rgba(var(--opacity-color), 0.40); - --theme-input-focus-colored-shadow: inset 0px 0px 0px 2px var(--sm-color-primary); - --theme-input-focus-shadow: 0 0 9px -3px var(--sm-color-primary); + --theme-input-focus-colored-shadow: inset 0px 0px 0px 2px var(--current-color-primary); + --theme-input-focus-shadow: 0 0 9px -3px var(--current-color-primary); --theme-input-focus-box-shadow: var(--theme-input-focus-overlay-shadow), - var(--theme-input-focus-colored-shadow), - var(--theme-input-focus-shadow); + var(--theme-input-focus-colored-shadow), + var(--theme-input-focus-shadow); --theme-input-hover-overlay-shadow: inset 0px 0px 0px 1px rgba(var(--opacity-color), 0.30); - --theme-input-hover-colored-shadow: inset 0px 0px 0px 1px var(--sm-dark-primary); + --theme-input-hover-colored-shadow: inset 0px 0px 0px 1px var(--current-dark-primary); --theme-input-hover-box-shadow: var(--theme-input-hover-overlay-shadow), - var(--theme-input-hover-colored-shadow); + var(--theme-input-hover-colored-shadow); --theme-input-error-focus-overlay-shadow: 0px 0px 0px 2px rgba(var(--opacity-color), 0.40); --theme-input-error-focus-colored-shadow: 0px 0px 0px 2px var(--theme-input-error-color); --theme-input-error-focus-shadow: 0 0 9px -3px var(--theme-input-error-color); --theme-input-error-box-shadow: 0px 0px 0px 1px var(--theme-input-error-color); --theme-input-focus-error-box-shadow: var(--theme-input-error-focus-overlay-shadow), - var(--theme-input-error-focus-colored-shadow), - var(--theme-input-error-focus-shadow); + var(--theme-input-error-focus-colored-shadow), + var(--theme-input-error-focus-shadow); --theme-input-placeholder-color: var(--curent-dark-primary); --theme-input-placeholder-opacity: .5; --theme-checkbox-width: 1.25rem; --theme-checkbox-height: 1.25rem; - --theme-input-label-color: var(--sm-dark-secondary); - --theme-input-legend-color: var(--sm-dark-secondary); + --theme-input-label-color: var(--current-dark-secondary); + --theme-input-legend-color: var(--current-dark-secondary); --theme-input-vertical-spacing: var(--theme-spacing-tiny); --theme-input-horizontal-spacing: var(--theme-spacing-tiny); --opacity-color: 255, 255, 255; } diff --git a/dist/css/custom-properties.css b/dist/css/custom-properties.css index 261a04ae..5e66f83a 100644 --- a/dist/css/custom-properties.css +++ b/dist/css/custom-properties.css @@ -241,41 +241,41 @@ :root { --theme-input-padding: .35em; - --theme-input-color: var(--sm-dark-secondary); + --theme-input-color: var(--current-dark-secondary); --theme-input-error-color: var(--theme-error-color); - --theme-input-background-color: var(--sm-light-primary); - --theme-input-disabled-background-color: var(--sm-dark-secondary); + --theme-input-background-color: var(--current-light-primary); + --theme-input-disabled-background-color: var(--current-dark-secondary); --theme-input-overlay-shadow: inset 0px 0px 0px 1px rgba(var(--opacity-color), 0.70); - --theme-input-colored-shadow: inset 0px 0px 0px 1px var(--sm-dark-primary); + --theme-input-colored-shadow: inset 0px 0px 0px 1px var(--current-dark-primary); --theme-input-box-shadow: var(--theme-input-overlay-shadow), - var(--theme-input-colored-shadow); - --theme-input-border-color: var(--sm-light-tertiary); + var(--theme-input-colored-shadow); + --theme-input-border-color: var(--current-light-tertiary); --theme-input-error-border-color: var(--theme-input-error-color); - --theme-input-disabled-border-color: var(--sm-dark-secondary); + --theme-input-disabled-border-color: var(--current-dark-secondary); --theme-input-border-radius: 0px; --theme-input-focus-overlay-shadow: inset 0px 0px 0px 2px rgba(var(--opacity-color), 0.40); - --theme-input-focus-colored-shadow: inset 0px 0px 0px 2px var(--sm-color-primary); - --theme-input-focus-shadow: 0 0 9px -3px var(--sm-color-primary); + --theme-input-focus-colored-shadow: inset 0px 0px 0px 2px var(--current-color-primary); + --theme-input-focus-shadow: 0 0 9px -3px var(--current-color-primary); --theme-input-focus-box-shadow: var(--theme-input-focus-overlay-shadow), - var(--theme-input-focus-colored-shadow), - var(--theme-input-focus-shadow); + var(--theme-input-focus-colored-shadow), + var(--theme-input-focus-shadow); --theme-input-hover-overlay-shadow: inset 0px 0px 0px 1px rgba(var(--opacity-color), 0.30); - --theme-input-hover-colored-shadow: inset 0px 0px 0px 1px var(--sm-dark-primary); + --theme-input-hover-colored-shadow: inset 0px 0px 0px 1px var(--current-dark-primary); --theme-input-hover-box-shadow: var(--theme-input-hover-overlay-shadow), - var(--theme-input-hover-colored-shadow); + var(--theme-input-hover-colored-shadow); --theme-input-error-focus-overlay-shadow: 0px 0px 0px 2px rgba(var(--opacity-color), 0.40); --theme-input-error-focus-colored-shadow: 0px 0px 0px 2px var(--theme-input-error-color); --theme-input-error-focus-shadow: 0 0 9px -3px var(--theme-input-error-color); --theme-input-error-box-shadow: 0px 0px 0px 1px var(--theme-input-error-color); --theme-input-focus-error-box-shadow: var(--theme-input-error-focus-overlay-shadow), - var(--theme-input-error-focus-colored-shadow), - var(--theme-input-error-focus-shadow); + var(--theme-input-error-focus-colored-shadow), + var(--theme-input-error-focus-shadow); --theme-input-placeholder-color: var(--curent-dark-primary); --theme-input-placeholder-opacity: .5; --theme-checkbox-width: 1.25rem; --theme-checkbox-height: 1.25rem; - --theme-input-label-color: var(--sm-dark-secondary); - --theme-input-legend-color: var(--sm-dark-secondary); + --theme-input-label-color: var(--current-dark-secondary); + --theme-input-legend-color: var(--current-dark-secondary); --theme-input-vertical-spacing: var(--theme-spacing-tiny); --theme-input-horizontal-spacing: var(--theme-spacing-tiny); --opacity-color: 255, 255, 255; } diff --git a/dist/css/woocommerce/style-rtl.css b/dist/css/woocommerce/style-rtl.css index 06ddd4b0..2a004dd2 100644 --- a/dist/css/woocommerce/style-rtl.css +++ b/dist/css/woocommerce/style-rtl.css @@ -1,4 +1,4 @@ -#html #body #page .button, +#html #body #page .button:not(.trix-button), #html #body #page button:not([class]), #html #body #page input[type="submit"]:not(.ot-button):not(.search-submit) { display: inline-block; @@ -27,11 +27,11 @@ --current-line-height: var(--theme-button-line-height); --current-letter-spacing: var(--theme-button-letter-spacing); --current-text-transform: var(--theme-button-text-transform); } - #html #body #page .button:not([disabled]), + #html #body #page .button:not(.trix-button):not([disabled]), #html #body #page button:not([class]):not([disabled]), #html #body #page input[type="submit"]:not(.ot-button):not(.search-submit):not([disabled]) { cursor: pointer; } - #html #body #page .button:not([disabled]):hover, + #html #body #page .button:not(.trix-button):not([disabled]):hover, #html #body #page button:not([class]):not([disabled]):hover, #html #body #page input[type="submit"]:not(.ot-button):not(.search-submit):not([disabled]):hover { --current-button-background-color: var(--theme-button-hover-background-color); diff --git a/dist/css/woocommerce/style.css b/dist/css/woocommerce/style.css index fa8f0a42..7957371a 100644 --- a/dist/css/woocommerce/style.css +++ b/dist/css/woocommerce/style.css @@ -1,4 +1,4 @@ -#html #body #page .button, +#html #body #page .button:not(.trix-button), #html #body #page button:not([class]), #html #body #page input[type="submit"]:not(.ot-button):not(.search-submit) { display: inline-block; @@ -27,11 +27,11 @@ --current-line-height: var(--theme-button-line-height); --current-letter-spacing: var(--theme-button-letter-spacing); --current-text-transform: var(--theme-button-text-transform); } - #html #body #page .button:not([disabled]), + #html #body #page .button:not(.trix-button):not([disabled]), #html #body #page button:not([class]):not([disabled]), #html #body #page input[type="submit"]:not(.ot-button):not(.search-submit):not([disabled]) { cursor: pointer; } - #html #body #page .button:not([disabled]):hover, + #html #body #page .button:not(.trix-button):not([disabled]):hover, #html #body #page button:not([class]):not([disabled]):hover, #html #body #page input[type="submit"]:not(.ot-button):not(.search-submit):not([disabled]):hover { --current-button-background-color: var(--theme-button-hover-background-color); diff --git a/functions.php b/functions.php index 60c4709d..8ece5b46 100644 --- a/functions.php +++ b/functions.php @@ -144,6 +144,7 @@ function rosa2_register_scripts() { wp_register_style('rosa2-novablocks-header', get_template_directory_uri() . '/dist/css/blocks/nova-blocks/header.css', array(), '1.6.2'); wp_register_style('rosa2-novablocks-navigation', get_template_directory_uri() . '/dist/css/blocks/nova-blocks/navigation.css', array(), '1.6.2'); wp_register_style('rosa2-novablocks-media', get_template_directory_uri() . '/dist/css/blocks/nova-blocks/media.css', array(), '1.6.2'); + wp_register_style('rosa2-novablocks-conversations', get_template_directory_uri() . '/dist/css/blocks/nova-blocks/conversations.css', array(), '1.8.0'); wp_register_style( 'rosa2-blocks-common', get_template_directory_uri() . '/dist/css/blocks/common.css', array(), $theme->get( 'Version' ) ); wp_register_style( 'rosa2-blocks-editor', get_template_directory_uri() . '/dist/css/blocks/editor.css', array( 'rosa2-blocks-common' ), $theme->get( 'Version' ) ); @@ -222,8 +223,14 @@ function rosa2_scripts() { wp_register_script( 'gsap', '//pxgcdn.com/js/gsap/2.1.3/TweenMax' . $suffix . '.js', array( 'wp-mediaelement' ), null, true ); wp_enqueue_script( 'rosa2-app', get_template_directory_uri() . '/dist/js/scripts' . $suffix . '.js', array( 'jquery', 'gsap', 'gsap-split-text', 'hoverIntent', 'imagesloaded' ), $theme->get( 'Version' ), true ); - if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) { - wp_enqueue_script( 'comment-reply' ); + if ( is_singular() && comments_open() ) { + + wp_enqueue_style('rosa2-novablocks-conversations'); + + if ( get_option( 'thread_comments' ) ) { + wp_enqueue_script( 'comment-reply' ); + + } } if ( $is_old_wp_version && ! $is_gutenberg_plugin_active ) { diff --git a/inc/extras.php b/inc/extras.php index 5813774f..4fa8b6c8 100644 --- a/inc/extras.php +++ b/inc/extras.php @@ -327,7 +327,13 @@ function rosa2_parse_content_tags( $content ) { } if ( ! function_exists( 'rosa2_render_sharing_block' ) ) { + function rosa2_render_sharing_block() { + + if ( ! pixelgrade_option( 'display_sharing_button_on_single', false ) ) { + return; + } + if ( is_singular( 'post' ) ) { echo do_blocks( '' ); } diff --git a/inc/integrations/customify/customify.php b/inc/integrations/customify/customify.php index 77aa3155..d9286575 100644 --- a/inc/integrations/customify/customify.php +++ b/inc/integrations/customify/customify.php @@ -171,26 +171,39 @@ function rosa2_add_content_section_to_customify_config( $config ) { 'content_section' => array( 'title' => esc_html__( 'Content', '__theme_txtd' ), 'options' => array( - 'display_categories_on_archive' => array( + 'this_divider_8874320137' => array( + 'type' => 'html', + 'html' => '' . esc_html__( 'Archive', '__theme_txtd' ) . '' + ), + 'display_categories_on_archive' => array( 'type' => 'checkbox', - 'label' => esc_html__( 'Display Categories on Archives', '__theme_txtd' ), + 'label' => esc_html__( 'Display Categories', '__theme_txtd' ), 'default' => true, ), - 'display_tags_on_archive' => array( + 'display_tags_on_archive' => array( 'type' => 'checkbox', - 'label' => esc_html__( 'Display Tags on Archives', '__theme_txtd' ), + 'label' => esc_html__( 'Display Tags', '__theme_txtd' ), 'default' => false, ), - 'display_date_on_archive' => array( + 'display_date_on_archive' => array( 'type' => 'checkbox', - 'label' => esc_html__( 'Display Date on Archives', '__theme_txtd' ), + 'label' => esc_html__( 'Display Date', '__theme_txtd' ), 'default' => true, ), - 'display_author_on_archive' => array( + 'display_author_on_archive' => array( 'type' => 'checkbox', - 'label' => esc_html__( 'Display Author on Archives', '__theme_txtd' ), + 'label' => esc_html__( 'Display Author', '__theme_txtd' ), 'default' => false, ), + 'this_divider_8874320138' => array( + 'type' => 'html', + 'html' => '' . esc_html__( 'Article', '__theme_txtd' ) . '' + ), + 'display_sharing_button_on_single' => array( + 'type' => 'checkbox', + 'label' => esc_html__( 'Display Sharing Buttons', '__theme_txtd' ), + 'default' => false, + ) ), ), ); diff --git a/src/scss/blocks/core/button/_common.scss b/src/scss/blocks/core/button/_common.scss index ea7e44d1..19efadc1 100644 --- a/src/scss/blocks/core/button/_common.scss +++ b/src/scss/blocks/core/button/_common.scss @@ -90,5 +90,10 @@ $enable-button-block-styles: true !default; .wp-block-button__link[class] { display: block; } + + > .wp-block { + margin-left: 0; + margin-right: 0; + } } } diff --git a/src/scss/blocks/nova-blocks/conversations.scss b/src/scss/blocks/nova-blocks/conversations.scss new file mode 100644 index 00000000..938043db --- /dev/null +++ b/src/scss/blocks/nova-blocks/conversations.scss @@ -0,0 +1 @@ +@import "conversations/style"; diff --git a/src/scss/blocks/nova-blocks/conversations/_style.scss b/src/scss/blocks/nova-blocks/conversations/_style.scss new file mode 100644 index 00000000..8e812cc2 --- /dev/null +++ b/src/scss/blocks/nova-blocks/conversations/_style.scss @@ -0,0 +1,392 @@ +@import "../../../setup/typography"; +@import "../../../setup/mixins/specific"; +@import "../../../setup/variables"; +@import "../../../setup/mixins/media-queries"; +@import "../../../setup/mixins/placeholder"; +@import "../../../setup/mixins/font"; +@import "../../../setup/mixins/forms"; + +.novablocks-conversations { + --avatar-column-size: 2.8rem; + --comments-grid-gap: 1.4rem; + --component-accent-color: var(--current-color-primary); + --novablocks-conversations-width: 48em; + --field-description-color: var(--current-dark-primary); + --conversations-bg-color: var(--current-light-primary); + --conversations-reply-bg-color: var(--current-light-tertiary); + --comment-author-color: var(--component-accent-color); + --comment-links-color: var(--component-accent-color); + --comment-highlighted-color: #FFF2CE; + --comment-font-size: calc(var(--theme-body-final-font-size) * 1.05); + --label-font-size: var(--final-font-size); + --label-bg-color: var(--current-dark-primary); + --label-highlighted-bg-color: var(--theme-dark-primary); + --label-border-radius: 999em; + --comment-footer-font-size: var(--final-font-size); + --field-description-font-size: var(--final-font-size); + --novablocks-spacing: var(--theme-spacing-fluid-medium); + + .comment-list[class] { + --novablocks-element-spacing-multiplier: 1.5; + } + + .comment-footer-meta[class] { + + * { + font-size: inherit; + } + } + + .comment-footer-highlights[class], + .commenter-background-label { + --font-size: 13; + --current-font-weight: regular; + + font-size: var(--final-font-size); + } + + .comment-dropdown-toggle { + --font-size: 15; + --current-font-weight: regular; + + font-size: var(--final-font-size); + } + + .comment-footer-meta[class] { + --font-size: 16; + font-size: var(--final-font-size); + } + + .comment-form { + label { + --font-size: 14; + + + .field-description:not(:empty) { + margin-top: calc(-1 * var(--theme-input-vertical-spacing)); + } + } + + .field-description[class] { + --font-size: 15; + font-size: var(--final-font-size); + } + } + + .comment-highlighted { + --component-accent-color: var(--theme-dark-primary); + --comment-author-color: var(--theme-dark-primary); + } + + .comment-highlightedby-humans { + padding-left: 0; + } + + .comment-form p:not(:last-child) { + margin-bottom: 0; + } + + .comment-dropdown-menu[class] { + min-width: 220px; + } + + .form-submit { + width: 100%; + } + + [id="submit"] { + --current-font-weight: regular !important; + } + + .comment-footer-highlights { + --current-font-weight: bold; + } + + .comment { + + .comment-highlighted { + &, + .comment-dropdown-toggle { + color: var(--theme-dark-primary); + } + } + + @include below(lap) { + margin-left: calc( -1 * var(--theme-wrapper-sides-spacing) ); + margin-right: calc( -1 * var(--theme-wrapper-sides-spacing) ); + + > .comment-wrapper { + padding-left: var(--theme-wrapper-sides-spacing); + padding-right: var(--theme-wrapper-sides-spacing); + } + + &.parent { + > .comment { + margin-left: 0; + margin-right: 0; + } + + > .comment-wrapper { + color: var(--current-dark-primary); + } + } + + .comment-respond { + padding-left: var(--theme-wrapper-sides-spacing); + padding-right: var(--theme-wrapper-sides-spacing); + } + } + } + + .comment-author-name { + --font-size: 16; + font-size: var(--final-font-size); + } + + .comment-dropdown-menu { + background-color: var(--current-light-primary); + color: var(--current-dark-primary); + + &:after { + border-color: transparent transparent var(--current-light-primary); + } + + @include above(tablet) { + // Dropdown menu top will be always equal with + // text height which is font-size * line-height. + top: calc(var(--current-line-height) * var(--final-font-size)); + } + } + + .commenter-background-label[class] { + position: relative; + background: none; + overflow: hidden; + z-index: 1; + + color: var(--theme-light-primary); + + &:before { + content: ''; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + background-color: var(--label-bg-color); + z-index: -1; + opacity: .5; + } + } + + .comment-highlighted, + .bypostauthor { + + .commenter-background-label { + + &:before { + opacity: 1; + } + + } + } + + .bypostauthor { + .commenter-background-label { + + &:before { + background-color: var(--theme-color-primary); + color: var(--theme-light-primary); + + opacity: 1; + } + + } + } + + .comment-dropdown-toggle { + color: currentColor; + + margin-top: 0; + margin-bottom: 0; + } + + .comments-pagination { + + .page-numbers > li { + margin-top: 0; + } + + .page-numbers .page-numbers:not(.current) { + border-color: var(--current-dark-primary); + + &:hover { + border-color: var(--component-accent-color); + color: var(--theme-light-primary); + } + } + } + + .fake-form-placeholder { + --novablocks-spacing: var(--theme-spacing-fluid-large); + } + + .comment-form-comment { + .field-description { + margin-bottom: var(--theme-input-vertical-spacing); + } + } + + .trix-hidden-input { + box-shadow: none; + } + + .novablocks-conversations__notification-text span { + padding: .5em 1em; + border-radius: 999em; + } + + .fake-input-button { + grid-row: 1/span 2; + } + + #cancel-comment-reply-link { + opacity: 1; + color: var(--theme-button-background-color); + } + + @include below(mobile) { + .comment-form-cookies-consent[class] { + display: block; + + label { + margin-left: calc(var(--theme-checkbox-width) + 10px); + } + + input[type="checkbox"] { + margin-top: 5px; + } + } + + input { + line-height: normal; + } + + .commenter-background-label[class] { + padding-top: .2em; + } + } +} + +.novablocks-conversations__header { + display: flex; + align-items: baseline; + border-bottom: 4px solid; + padding-bottom: .3em; +} + +.novablocks-conversations__title { + --current-font-weight: bold; + padding-right: .25em; +} + +.novablocks-conversations__comments-count { + --font-size: 16; + color: var(--field-description-color); + + font-size: var(--final-font-size); + opacity: .5 +} + +.novablocks-conversations__notification-text[class] span { + background-color: var(--current-dark-primary); + color: var(--current-light-primary); +} + +.novablocks-conversation__starter { + @include below(lap) { + margin-left: calc(-1*var(--theme-wrapper-sides-spacing)); + margin-right: calc(-1*var(--theme-wrapper-sides-spacing)); + } +} + +.novablocks-conversation__starter-subtitle { + --font-size: 19.5; + --component-accent-color: var(--theme-dark-primary); + font-size: var(--final-font-size); +} + +.novablocks-conversation__starter-message[class] { + --font-size: 18; + color: var(--theme-dark-primary); + font-size: var(--final-font-size); +} + +.comments-area { + .entry-content { + padding-left: 0; + padding-right: 0; + } +} + +.fake-input-button { + @include field; + + @include specific(1) { + color: rgba( 0, 0, 0, 0.5 ); + } + + .is-dark & { + color: rgba( 255, 255, 255, 0.5 ); + } +} + +.trix-contained-input[class] { + --trix-input-bg-color: var(--theme-input-background-color); + --trix-toolbar-border-color: rgba(0, 0, 0, 0.3); + + .is-dark & { + --trix-toolbar-border-color: rgb(255, 255, 255); + } +} + +trix-editor { + &[id][id][id] { + + &:before { + color: var(--theme-input-placeholder-color); + opacity: var(--theme-input-placeholder-opacity); + --current-font-weight: regular; + } + } + + h1 { + @include apply-font(heading-4); + } +} + +trix-editor, +trix-toolbar { + @include field; + max-width: none; + + &[id] { + border: 0; + } +} + +trix-toolbar { + &[id] { + padding: 0; + box-shadow: none; + border: 1px solid var(--trix-toolbar-border-color); + border-bottom: 0; + } +} + +.trix-button--icon { + .is-dark & { + &:before { + filter: invert(1); + } + } +} diff --git a/src/scss/components/comments/_comment-form.scss b/src/scss/components/comments/_comment-form.scss index a20d4a6e..0e651477 100644 --- a/src/scss/components/comments/_comment-form.scss +++ b/src/scss/components/comments/_comment-form.scss @@ -28,7 +28,6 @@ + label { margin-top: 0; - margin-bottom: var(--theme-input-vertical-spacing); } } } diff --git a/src/scss/custom-properties/_field.scss b/src/scss/custom-properties/_field.scss index af1fa68d..32aa9534 100644 --- a/src/scss/custom-properties/_field.scss +++ b/src/scss/custom-properties/_field.scss @@ -1,60 +1,60 @@ :root { --theme-input-padding: .35em; - + @include above(tablet) { --theme-input-padding: .833em; } - - --theme-input-color: var(--sm-dark-secondary); + + --theme-input-color: var(--current-dark-secondary); --theme-input-error-color: var(--theme-error-color); - --theme-input-background-color: var(--sm-light-primary); - --theme-input-disabled-background-color: var(--sm-dark-secondary); - + --theme-input-background-color: var(--current-light-primary); + --theme-input-disabled-background-color: var(--current-dark-secondary); + --theme-input-overlay-shadow: inset 0px 0px 0px 1px rgba(var(--opacity-color), 0.70); - --theme-input-colored-shadow: inset 0px 0px 0px 1px var(--sm-dark-primary); - + --theme-input-colored-shadow: inset 0px 0px 0px 1px var(--current-dark-primary); + --theme-input-box-shadow: var(--theme-input-overlay-shadow), - var(--theme-input-colored-shadow); - - --theme-input-border-color: var(--sm-light-tertiary); + var(--theme-input-colored-shadow); + + --theme-input-border-color: var(--current-light-tertiary); --theme-input-error-border-color: var(--theme-input-error-color); - --theme-input-disabled-border-color: var(--sm-dark-secondary); + --theme-input-disabled-border-color: var(--current-dark-secondary); --theme-input-border-radius: 0px; - + --theme-input-focus-overlay-shadow: inset 0px 0px 0px 2px rgba(var(--opacity-color), 0.40); - --theme-input-focus-colored-shadow: inset 0px 0px 0px 2px var(--sm-color-primary); - --theme-input-focus-shadow: 0 0 9px -3px var(--sm-color-primary); - + --theme-input-focus-colored-shadow: inset 0px 0px 0px 2px var(--current-color-primary); + --theme-input-focus-shadow: 0 0 9px -3px var(--current-color-primary); + --theme-input-focus-box-shadow: var(--theme-input-focus-overlay-shadow), - var(--theme-input-focus-colored-shadow), - var(--theme-input-focus-shadow); - + var(--theme-input-focus-colored-shadow), + var(--theme-input-focus-shadow); + --theme-input-hover-overlay-shadow: inset 0px 0px 0px 1px rgba(var(--opacity-color), 0.30); - --theme-input-hover-colored-shadow: inset 0px 0px 0px 1px var(--sm-dark-primary); - + --theme-input-hover-colored-shadow: inset 0px 0px 0px 1px var(--current-dark-primary); + --theme-input-hover-box-shadow: var(--theme-input-hover-overlay-shadow), - var(--theme-input-hover-colored-shadow); - + var(--theme-input-hover-colored-shadow); + --theme-input-error-focus-overlay-shadow: 0px 0px 0px 2px rgba(var(--opacity-color), 0.40); --theme-input-error-focus-colored-shadow: 0px 0px 0px 2px var(--theme-input-error-color); --theme-input-error-focus-shadow: 0 0 9px -3px var(--theme-input-error-color); - + --theme-input-error-box-shadow: 0px 0px 0px 1px var(--theme-input-error-color); --theme-input-focus-error-box-shadow: var(--theme-input-error-focus-overlay-shadow), - var(--theme-input-error-focus-colored-shadow), - var(--theme-input-error-focus-shadow); - + var(--theme-input-error-focus-colored-shadow), + var(--theme-input-error-focus-shadow); + --theme-input-placeholder-color: var(--curent-dark-primary); --theme-input-placeholder-opacity: .5; - + --theme-checkbox-width: 1.25rem; --theme-checkbox-height: 1.25rem; - - --theme-input-label-color: var(--sm-dark-secondary); - --theme-input-legend-color: var(--sm-dark-secondary); - + + --theme-input-label-color: var(--current-dark-secondary); + --theme-input-legend-color: var(--current-dark-secondary); + --theme-input-vertical-spacing: var(--theme-spacing-tiny); --theme-input-horizontal-spacing: var(--theme-spacing-tiny); - + --opacity-color: 255, 255, 255; } diff --git a/src/scss/woocommerce/_fields.scss b/src/scss/woocommerce/_fields.scss index cfbfbbfc..8baf16ed 100644 --- a/src/scss/woocommerce/_fields.scss +++ b/src/scss/woocommerce/_fields.scss @@ -3,7 +3,7 @@ // @todo find a more reliable selector #html #body #page { - .button, + .button:not(.trix-button), button:not([class]), input[type="submit"]:not(.ot-button):not(.search-submit) { @include button; diff --git a/style-rtl.css b/style-rtl.css index 52afbe8e..7476da9e 100644 --- a/style-rtl.css +++ b/style-rtl.css @@ -2365,8 +2365,7 @@ table { .comment-form input[type="checkbox"] { vertical-align: middle; } .comment-form input[type="checkbox"] + label { - margin-top: 0; - margin-bottom: var(--theme-input-vertical-spacing); } + margin-top: 0; } .comment-notes { font-size: 85%; } diff --git a/style.css b/style.css index f4cf3bdc..b8fc19dd 100644 --- a/style.css +++ b/style.css @@ -2365,8 +2365,7 @@ table { .comment-form input[type="checkbox"] { vertical-align: middle; } .comment-form input[type="checkbox"] + label { - margin-top: 0; - margin-bottom: var(--theme-input-vertical-spacing); } + margin-top: 0; } .comment-notes { font-size: 85%; } diff --git a/template-parts/content-page.php b/template-parts/content-page.php index 9d8f332e..0f664294 100644 --- a/template-parts/content-page.php +++ b/template-parts/content-page.php @@ -16,9 +16,9 @@
diff --git a/template-parts/content-single.php b/template-parts/content-single.php index 6cff4e37..13365034 100644 --- a/template-parts/content-single.php +++ b/template-parts/content-single.php @@ -38,9 +38,9 @@