Skip to content

Commit

Permalink
Merge branch 'preview'
Browse files Browse the repository at this point in the history
  • Loading branch information
@TrebledJ
TrebledJ committed Aug 30, 2024
2 parents 08f6432 + 37fffb2 commit e3d6ac1
Show file tree
Hide file tree
Showing 28 changed files with 1,789 additions and 36 deletions.
159 changes: 159 additions & 0 deletions assets/scss/comments.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,159 @@
// @import "comments/source-sans";
@import "comments/theme";
@import "comments/colours";

// The root web component tag
comentario-comments {

// Default theme properties (light)
@include theme-props();

// Dark theme properties, selected automatically with the dark mode, but only when no theme is explicitly set
@media (prefers-color-scheme: dark) {
html[data-theme=dark] & {
@include theme-props(dark);
}
}

// Dark theme properties selected explicitly with [theme="dark"] on the element
html[data-theme=dark] & {
@include theme-props(dark);
}
}

.comentario-root {
position: relative;
padding: 0;
width: 100%;
font-family: inherit;
font-size: 15px;
line-height: 1.5;
color: var(--cmntr-color);

@import "comments/common";
@import "comments/animations";
@import "comments/button";
@import "comments/table";
@import "comments/input";
@import "comments/badge";
@import "comments/dialog";
@import "comments/footer";
@import "comments/comment-editor";
@import "comments/comment-card";
@import "comments/placeholders";
@import "comments/sort-bar";
@import "comments/toolbar";

.comentario-backdrop {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 10;
background-color: rgba(var(--cmntr-bg), 60%);
backdrop-filter: blur(3px);
}

.comentario-message-box {
width: 100%;
margin-top: 1rem;
margin-bottom: 1rem;
border-radius: 4px;
background-color: var(--cmntr-success-bg);
color: var(--cmntr-success-color);

&.comentario-error {
background-color: var(--cmntr-danger-bg);
color: var(--cmntr-danger-color);
}

.comentario-message-box-body {
padding: 1rem;
text-align: center;
}

code {
pre {
padding: 12px;
font-family: 'DejaVu Sans Mono', 'Noto Mono', monospace;
}
}
}

.comentario-page-moderation-notice {
width: 100%;
padding-top: 16px;
padding-bottom: 16px;
text-align: center;
color: var(--cmntr-warning-color);
}

&.comentario-root-font {
* {font-family: 'Source Sans Pro', sans-serif;}
}

@each $i, $c in $colourise-map {

// Generate colouring classes for the left border
.comentario-border-#{$i} {
border-left: 2px solid #{$c} !important;
}

// Generate background colouring classes
.comentario-bg-#{$i} {
background-color: #{$c} !important;
}
}

// Anonymous (unregistered) is a special case
.comentario-border-anonymous {
border-left: 2px dashed var(--cmntr-muted-color) !important;
}
.comentario-bg-anonymous {
background-color: var(--cmntr-muted-color) !important;
background-image: url("data:image/svg+xml,%3Csvg height='800' width='800' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60.671 60.671' xml:space='preserve'%3E%3Cellipse style='fill:%23ffffff' cx='30.336' cy='12.097' rx='11.997' ry='12.097'/%3E%3Cpath style='fill:%23ffffff' d='M35.64 30.079H25.031c-7.021 0-12.714 5.739-12.714 12.821v17.771h36.037V42.9c0-7.082-5.693-12.821-12.714-12.821z'/%3E%3C/svg%3E%0A") !important;
background-repeat: no-repeat !important;
background-size: 80% !important;
background-position: bottom !important;
}

// Deleted user is another special case
.comentario-border-deleted {
border-left: 2px dotted var(--cmntr-deleted-bg) !important;
}
.comentario-bg-deleted {
background-color: var(--cmntr-deleted-bg) !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1em' viewBox='0 0 384 512'%3E%3Cpath style='fill:%23ffffff' d='M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-size: 50% !important;
background-position: center !important;
}
}


// Custom: overflow correction.
.comentario-card-expand-body {
// Set the width to anything to trigger the box to be slimmed down.
width: 80%; // Value is arbitrary?
}

.comentario-card-body {
// Handle overflow.
overflow: auto;
}

// Custom: align error box background with danger alert.
.comentario-root .comentario-message-box.comentario-error {
html[data-theme="light"] & {
background-color: #f8d7da;
}
html[data-theme="dark"] & {
background-color: #2c0b0e;
}
}

// Fix `code` color.
.comentario-error code {
color: inherit;
}
78 changes: 78 additions & 0 deletions assets/scss/comments/_animations.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
@import "colours";

$animation-duration: 250ms;

// Fade in-out

.comentario-fade-in {
animation: comentario-fade-in-animation $animation-duration ease-in-out forwards 1;
}

.comentario-fade-out {
animation: comentario-fade-out-animation $animation-duration ease-in-out forwards 1;
}

@keyframes comentario-fade-in-animation {
from {opacity: 0;}
to {opacity: 1;}
}

@keyframes comentario-fade-out-animation {
from {opacity: 1;}
to {opacity: 0;}
}

// Expand-collapse

.comentario-expand {
animation: comentario-expand-animation $animation-duration ease-in-out forwards 1;
}

.comentario-collapse {
animation: comentario-collapse-animation $animation-duration ease-in-out forwards 1;
}

@keyframes comentario-expand-animation {
from {
opacity: 0;
transform: translateY(-100%);
}
to {
opacity: 1;
transform: translateY(0);
}
}

@keyframes comentario-collapse-animation {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0;
transform: translateY(-100%);
}
}

// Background blinks

.comentario-bg-highlight {
animation: comentario-bg-highlight-animation 5s ease forwards 1;
}

.comentario-bg-blink {
animation: comentario-bg-blink-animation 2s ease forwards 1;
}

@keyframes comentario-bg-highlight-animation {
0% { background-color: transparent; }
10% { background-color: var(--cmntr-bg-highlight); }
50% { background-color: var(--cmntr-bg-highlight); }
100% { background-color: transparent; }
}

@keyframes comentario-bg-blink-animation {
0% { background-color: transparent; }
50% { background-color: var(--cmntr-bg-blink); }
100% { background-color: transparent; }
}
20 changes: 20 additions & 0 deletions assets/scss/comments/_badge.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
@import "colours";

.comentario-badge {
display: inline-block;
font-size: 9px;
margin-left: 8px;
padding: 2px 6px 2px 6px;
border-radius: 100px;
line-height: 17px;
text-transform: uppercase;
color: $white;
}

.comentario-badge-moderator {
background: $green-5;
}

.comentario-badge-pending {
background: $yellow-6;
}
94 changes: 94 additions & 0 deletions assets/scss/comments/_button.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
@import "colours";
@import "mixins";

.comentario-btn {
// Vars
--cmntr-btn-color: var(--cmntr-link-color);
--cmntr-btn-bg: transparent;
--cmntr-btn-hover-color: var(--cmntr-link-hover-color);
--cmntr-btn-hover-bg: transparent;
--cmntr-btn-active-color: var(--cmntr-link-hover-color);
--cmntr-btn-active-bg: transparent;

color: var(--cmntr-btn-color);
background-color: var(--cmntr-btn-bg);

display: inline-flex;
justify-content: center;
align-items: center;
text-align: center;
cursor: pointer;
line-height: 20px;
padding: 6px 12px;
border: 1px solid transparent;
border-radius: 0.15rem;
margin: 5px;
transition: color 0.4s, background-color 0.4s;
white-space: nowrap;

&:not(:disabled) {
&:hover, &:focus, &:active {
color: var(--cmntr-btn-hover-color);
background-color: var(--cmntr-btn-hover-bg);
opacity: 1;
}
}

&:disabled {
cursor: not-allowed !important;
opacity: 0.3 !important;
}

&:not(.comentario-btn-link):not(.comentario-btn-tool).comentario-btn-active {
color: var(--cmntr-btn-active-color);
background-color: var(--cmntr-btn-active-bg);
@include btn-active-shadow();
}

&:not(.comentario-btn-link):not(.comentario-btn-tool):not(.comentario-btn-active) {
@include btn-shadow();
}

&.comentario-btn-link.comentario-btn-active {
font-weight: bold;
}
}

.comentario-btn-sm {
font-size: 12px;
line-height: 16px;
padding: 3px 6px;
margin: 2.5px;
}

.comentario-submit-icon {
font-size: 20px;
}

@mixin make-btn($name, $color, $bg-color) {
.comentario-btn-#{$name} {
--cmntr-btn-color: #{$color};
--cmntr-btn-bg: #{$bg-color};
--cmntr-btn-hover-color: #{$color};
--cmntr-btn-hover-bg: #{lighten($bg-color, 15%)};
--cmntr-btn-active-color: #{$color};
--cmntr-btn-active-bg: #{darken($bg-color, 15%)};
}
}

@include make-btn("primary", $white, $primary);
@include make-btn("secondary", $white, $secondary);
@include make-btn("dark", $white, $dark);
@include make-btn("danger", $white, $red-8);
@include make-btn("facebook", $white, #1877f2);
@include make-btn("github", $white, $black);
@include make-btn("gitlab", $white, #fc6d26);
@include make-btn("google", $white, #4285f4);
@include make-btn("twitter", $white, #1da1f2);
@include make-btn("sso", $white, #7275ab);

.comentario-oauth-buttons {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
Loading

0 comments on commit e3d6ac1

Please sign in to comment.