LeadMagnet/leadchat
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

feat: Dark Mode (#7471)

Browse Source
This commit is contained in:
Sivin Varghese
2023-07-21 22:10:25 +05:30
committed by GitHub
parent 480f34803b
commit 40ec0d109a
264 changed files with 2935 additions and 6817 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
app/javascript/dashboard/assets/scss/widgets/_buttons.scss
View File

@@ -42,10 +42,10 @@
}
&.hollow {
@apply border border-slate-200 text-woot-700 dark:text-woot-100 hover:bg-woot-50 dark:hover:bg-woot-900;
@apply border border-slate-200 dark:border-slate-600 text-woot-700 dark:text-woot-100 hover:bg-woot-50 dark:hover:bg-woot-900;
&.secondary {
@apply text-slate-700 dark:text-slate-100 hover:bg-slate-50 dark:hover:bg-slate-700;
@apply text-slate-700 border-slate-200 dark:border-slate-600 dark:text-slate-100 hover:bg-slate-50 dark:hover:bg-slate-700;
}
&.success {
@@ -98,7 +98,7 @@
}
&.warning {
@apply bg-yellow-100 dark:bg-yellow-100 text-yellow-700 dark:text-yellow-100 hover:bg-yellow-200 dark:hover:bg-yellow-200;
@apply bg-yellow-100 dark:bg-yellow-100 text-yellow-700 dark:text-yellow-700 hover:bg-yellow-200 dark:hover:bg-yellow-200;
}
}
@@ -118,11 +118,11 @@
}
&.warning {
@apply text-yellow-700 dark:text-yellow-100;
@apply text-yellow-700 dark:text-yellow-700;
}
&:hover {
@apply hover:bg-woot-50 dark:hover:bg-woot-300;
@apply hover:bg-woot-50 dark:hover:bg-woot-900/50 hover:text-woot-500 dark:hover:text-woot-100;
&.secondary {
@apply hover:bg-slate-50 dark:hover:bg-slate-700;
@@ -137,7 +137,7 @@
}
&.warning {
@apply hover:bg-yellow-50 dark:hover:bg-yellow-800;
@apply hover:bg-yellow-50 dark:hover:bg-yellow-100;
}
}

67
app/javascript/dashboard/assets/scss/widgets/_conv-header.scss
View File

@@ -1,66 +1 @@
$resolve-button-width: 8.25rem;
// Conversation header - Light BG
.conv-header {
@include background-white;
@include flex;
@include flex-align($x: justify, $y: middle);
@include border-normal-bottom;
padding: var(--space-small) var(--space-normal);
.multiselect-box {
@include flex;
@include flex-align($x: justify, $y: middle);
border: 1px solid var(--color-border);
border-radius: var(--space-smaller);
margin-right: var(--space-small);
width: 13.5rem;
.icon {
color: $medium-gray;
font-size: $font-size-default;
line-height: 2.375rem;
padding-left: $space-slab;
padding-right: $space-smaller;
}
.multiselect {
border-radius: var(--border-radius-small);
margin: 0;
min-width: 0;
.multiselect__tags {
border-color: transparent;
}
}
}
// User thumbnail and text
.user {
@include flex;
@include flex-align($x: center, $y: middle);
margin-right: var(--space-normal);
min-width: 0;
.user--profile__meta {
align-items: flex-start;
display: flex;
flex-direction: column;
justify-content: flex-start;
margin-left: var(--space-small);
min-width: 0;
}
}
}
.header-actions-wrap {
align-items: center;
display: flex;
flex-direction: row;
flex-grow: 1;
justify-content: flex-end;
&.has-open-sidebar {
justify-content: flex-end;
}
}
// File to be removed

107
app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss
View File

@@ -10,114 +10,7 @@
}
.conversation {
@include flex;
@include flex-shrink;
border-left: var(--space-micro) solid transparent;
cursor: pointer;
padding: 0 var(--space-normal);
position: relative;
&.active {
animation: left-shift-animation 0.25s $swift-ease-out-function;
background: var(--color-background);
border-left-color: var(--color-woot);
}
.conversation--details {
padding: var(--space-slab) 0;
}
.conversation--user {
font-size: var(--font-size-small);
margin: 0 var(--space-small);
text-transform: capitalize;
.label {
left: var(--space-one);
max-width: var(--space-jumbo);
overflow: hidden;
position: relative;
text-overflow: ellipsis;
top: var(--space-one);
white-space: nowrap;
}
}
.conversation--message {
color: var(--color-body);
font-size: var(--font-size-small);
font-weight: var(--font-weight-normal);
height: var(--space-medium);
line-height: var(--space-medium);
margin: 0 var(--space-small);
max-width: 96%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 16.875rem;
img,
svg {
display: inline-block;
}
}
.conversation--meta {
@include flex;
flex-direction: column;
position: absolute;
right: var(--space-normal);
top: var(--space-normal);
.unread {
@include round-corner;
@include light-shadow;
background: darken($success-color, 3%);
color: var(--white);
display: none;
font-size: var(--font-size-micro);
font-weight: var(--font-weight-black);
height: var(--space-normal);
line-height: var(--space-normal);
margin-left: auto;
margin-top: var(--space-smaller);
min-width: var(--space-normal);
padding: 0 var(--space-smaller);
text-align: center;
}
.timestamp {
color: $dark-gray;
font-size: var(--font-size-micro);
font-weight: var(--font-weight-normal);
line-height: var(--space-normal);
margin-left: auto;
}
}
&.unread-chat {
.unread {
display: inline-block;
}
.conversation--message {
font-weight: var(--font-weight-bold);
}
.conversation--user {
font-weight: var(--font-weight-bold);
}
}
&.compact {
padding-left: 0;
.conversation--details {
border-radius: var(--border-radius-small);
margin-left: 0;
padding-left: var(--space-two);
padding-right: var(--space-small);
}
}
}

292
app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss
View File

@@ -1,352 +1,211 @@
// scss-lint:disable MergeableSelector
@mixin bubble-with-types {
padding: $space-small $space-normal;
margin: 0;
background: $color-woot;
border-radius: $space-one;
color: var(--white);
font-size: $font-size-small;
font-weight: $font-weight-normal;
position: relative;
@apply py-2 text-sm font-normal bg-woot-500 dark:bg-woot-500 relative px-4 m-0 text-white dark:text-white;
.message-text__wrap {
position: relative;
@apply relative;
.link {
color: var(--white);
text-decoration: underline;
@apply text-white dark:text-white underline;
}
}
.image,
.video {
cursor: pointer;
position: relative;
@apply cursor-pointer relative;
.modal-container {
text-align: center;
@apply text-center;
}
.modal-image {
max-height: 76vh;
max-width: 76vw;
@apply max-h-[76vh] max-w-[76vw];
}
.modal-video {
max-height: 76vh;
max-width: 76vw;
@apply max-h-[76vh] max-w-[76vw];
}
&::before {
background-image: linear-gradient(
-180deg,
transparent 3%,
$color-heading 130%
);
bottom: 0;
content: '';
height: 20%;
left: 0;
opacity: 0.8;
position: absolute;
width: 100%;
@apply bg-gradient-to-t from-transparent via-transparent to-slate-800 bg-repeat bg-clip-border bottom-0 h-[20%] content-[''] left-0 absolute w-full opacity-80;
}
}
}
.conversations-list-wrap {
@include flex;
border-right: 1px solid var(--s-50);
flex-direction: column;
.load-more-conversations {
font-size: $font-size-small;
margin: 0;
padding: $space-normal;
width: 100%;
}
.end-of-list-text {
padding: $space-normal;
}
.conversations-list {
flex: 1 1;
overflow-y: auto;
@include breakpoint(large up) {
@include scroll-on-hover;
}
}
.chat-list__top {
@include flex;
align-items: center;
justify-content: space-between;
padding: 0 var(--space-normal);
}
.content-box {
text-align: center;
}
}
.conversation-panel {
@include flex;
flex: 1 1 1px;
flex-direction: column;
height: 100%;
margin: 0;
overflow-y: auto;
padding-bottom: var(--space-normal);
position: relative;
@apply flex-shrink flex-grow basis-px flex flex-col overflow-y-auto relative h-full m-0 pb-4;
}
.conversation-panel > li {
@include flex;
@include flex-shrink;
margin: $zero $zero $space-micro;
position: relative;
&:first-child {
margin-top: auto;
}
&:last-child {
margin-bottom: 0;
}
@apply flex flex-shrink-0 flex-grow-0 flex-auto max-w-full mt-0 mr-0 mb-1 ml-0 relative first:mt-auto last:mb-0;
&.unread--toast {
+ .right {
margin-bottom: var(--space-micro);
@apply mb-1;
}
+ .left {
margin-bottom: 0;
@apply mb-0;
}
span {
@include elegant-card;
@include round-corner;
background: $color-woot;
color: var(--white);
font-size: $font-size-mini;
font-weight: $font-weight-medium;
margin: $space-one auto;
padding: $space-smaller $space-two;
@apply shadow-lg rounded-full bg-woot-500 dark:bg-woot-500 text-white dark:text-white text-xs font-medium my-2.5 mx-auto px-2.5 py-1.5;
}
}
.bubble {
@include bubble-with-types;
text-align: left;
word-wrap: break-word;
@apply text-left break-words;
.aplayer {
box-shadow: none;
@apply shadow-none;
font-family: inherit;
}
}
&.left {
.bubble {
@include border-normal;
background: $white;
border-bottom-left-radius: $space-smaller;
border-top-left-radius: $space-smaller;
color: $color-body;
margin-right: auto;
word-break: break-word;
@apply border border-slate-50 dark:border-slate-700 bg-white dark:bg-slate-700 text-black-900 dark:text-slate-50 rounded-r-lg rounded-l mr-auto break-words;
&.is-image {
border-radius: var(--border-radius-large);
@apply rounded-lg;
}
.link {
color: $color-primary-dark;
@apply text-woot-600 dark:text-woot-600;
}
.file {
.text-block-title {
color: $color-body;
@apply text-slate-700 dark:text-woot-300;
}
.icon-wrap {
color: $color-woot;
@apply text-woot-600 dark:text-woot-600;
}
.download {
color: $color-primary-dark;
@apply text-woot-600 dark:text-woot-600;
}
}
}
+ .right {
margin-top: $space-one;
@apply mt-2.5;
.bubble {
border-top-right-radius: $space-one;
@apply rounded-tr-lg;
}
}
+ .unread--toast {
+ .right {
margin-top: $space-one;
@apply mt-2.5;
.bubble {
border-top-right-radius: $space-one;
@apply rounded-tr-lg;
}
}
+ .left {
margin-top: 0;
@apply mt-0;
}
}
}
&.right {
@include flex-align(right, null);
@apply justify-end;
.wrap {
align-items: flex-end;
display: flex;
margin-right: $space-normal;
text-align: right;
@apply flex items-end mr-4 text-right;
.sender--info {
padding: var(--space-small) 0 var(--space-smaller) var(--space-small);
@apply pt-2 pb-1 pr-0 pl-2;
}
}
.bubble {
border-bottom-right-radius: $space-smaller;
border-top-right-radius: $space-smaller;
margin-left: auto;
word-break: break-word;
@apply ml-auto break-words rounded-l-lg rounded-r;
&.is-private {
background: lighten($warning-color, 32%);
border: 1px solid lighten($warning-color, 15%);
color: $color-heading;
position: relative;
&::before {
bottom: 0;
color: $medium-gray;
position: absolute;
right: $space-one;
top: $space-smaller + $space-micro;
}
@apply text-black-900 dark:text-black-900 relative border border-solid bg-[#fff3d5] border-[#ffd97a] dark:bg-[#fff3d5] dark:border-[#ffd97a];
}
&.is-image {
border-radius: var(--border-radius-large);
@apply rounded-lg;
}
}
+ .left {
margin-top: $space-one;
@apply mt-2.5;
.bubble {
border-top-left-radius: $space-one;
@apply rounded-tl-lg;
}
}
+ .unread--toast {
+ .left {
margin-top: $space-one;
@apply rounded-lg;
.bubble {
border-top-left-radius: $space-one;
@apply rounded-tl-lg;
}
}
+ .right {
margin-top: 0;
@apply mt-0;
}
}
}
&.center {
justify-content: center;
@apply items-center justify-center;
}
.wrap {
--bubble-max-width: 31rem;
margin: $zero $space-normal;
max-width: Min(var(--bubble-max-width), 84%);
max-width: Min(31rem, 84%);
@apply my-0 mx-4;
.sender--name {
font-size: $font-size-mini;
margin-bottom: $space-smaller;
@apply text-xs mb-1;
}
}
.sender--thumbnail {
@include round-corner();
height: $space-slab;
margin-right: $space-one;
margin-top: $space-micro;
width: $space-slab;
@apply h-3 mr-3 mt-0.5 w-3 rounded-full;
}
.activity-wrap {
background: var(--s-50);
border: 1px solid var(--s-100);
border-radius: var(--border-radius-medium);
display: flex;
font-size: var(--font-size-small);
justify-content: center;
margin: var(--space-smaller) 0;
padding: var(--space-smaller) var(--space-micro) var(--space-smaller)
var(--space-one);
@apply flex justify-center text-sm my-1 mx-0 py-1 pr-0.5 pl-2.5 bg-slate-50 dark:bg-slate-600 text-slate-800 dark:text-slate-100 rounded-md border border-slate-100 dark:border-slate-600 border-solid;
.is-text {
align-items: center;
display: inline-flex;
text-align: start;
@include breakpoint(xxxlarge up) {
display: flex;
}
@apply inline-flex items-center text-start 2xl:flex;
}
}
}
.activity-wrap .message-text__wrap {
.text-content p {
margin-bottom: 0;
@apply mb-0;
}
}
.conversation-footer {
display: flex;
flex-direction: column;
position: relative;
@apply flex relative flex-col;
}
.typing-indicator-wrap {
align-items: center;
display: flex;
height: 0;
position: absolute;
top: -$space-large;
width: 100%;
@apply items-center flex h-0 absolute w-full -top-8;
.typing-indicator {
@include elegant-card;
@include round-corner;
background: var(--white);
color: $color-light-gray;
font-size: $font-size-mini;
font-weight: $font-weight-bold;
margin: $space-one auto;
padding: $space-small $space-normal $space-small $space-two;
@apply py-2 pr-4 pl-5 bg-white dark:bg-slate-700 text-slate-800 dark:text-slate-100 text-xs font-semibold my-2.5 mx-auto;
.gif {
margin-left: $space-small;
width: $space-medium;
@apply ml-2 w-6;
}
}
}
@@ -358,16 +217,15 @@
h4,
h5,
h6 {
color: var(--color-body);
@apply text-slate-800 dark:text-slate-100;
}
a {
color: var(--color-woot);
text-decoration: underline;
@apply text-woot-500 dark:text-woot-500 underline;
}
p:last-child {
margin-bottom: 0;
@apply mb-0;
}
}
@@ -378,54 +236,14 @@
h4,
h5,
h6 {
color: var(--white);
@apply text-white dark:text-white;
}
a {
color: var(--white);
text-decoration: underline;
@apply text-white dark:text-white underline;
}
p:last-child {
margin-bottom: 0;
}
}
.conversation-sidebar-wrap {
flex: 0 0;
flex-basis: 100%;
height: auto;
overflow: auto;
z-index: var(--z-index-low);
@include breakpoint(medium up) {
flex-basis: 17.5rem;
}
@include breakpoint(large up) {
flex-basis: 18.75rem;
}
@include breakpoint(xlarge up) {
flex-basis: 19.375rem;
}
@include breakpoint(xxlarge up) {
flex-basis: 20.625rem;
}
@include breakpoint(xxxlarge up) {
flex-basis: 25rem;
}
}
.activity-wrap {
.message-text--metadata {
.time {
@include breakpoint(xlarge up) {
margin-left: var(--space-small);
}
}
@apply mb-0;
}
}

49
app/javascript/dashboard/assets/scss/widgets/_forms.scss
View File

@@ -1,5 +1,29 @@
// scss-lint:disable QualifyingElement
label {
@apply text-slate-800 dark:text-slate-200;
}
textarea {
@apply bg-white dark:bg-slate-900 focus:bg-white focus:dark:bg-slate-900 text-slate-900 dark:text-slate-100 border-slate-200 dark:border-slate-600;
}
input {
@apply bg-white dark:bg-slate-900 focus:bg-white focus:dark:bg-slate-900 text-slate-900 dark:text-slate-100 border-slate-200 dark:border-slate-600;
&[disabled] {
@apply bg-slate-200 dark:bg-slate-700 text-slate-400 dark:text-slate-400 border-slate-200 dark:border-slate-600;
}
}
input[type='file'] {
@apply bg-white dark:bg-slate-800;
}
select {
@apply bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100 border-slate-200 dark:border-slate-600;
}
.error {
input[type='color'],
input[type='date'],
@@ -19,17 +43,11 @@
textarea,
select,
.multiselect > .multiselect__tags {
@include thin-border(var(--r-400));
@apply border border-solid border-red-400 dark:border-red-400;
}
.message {
color: var(--r-400);
display: block;
font-size: var(--font-size-small);
font-weight: $font-weight-normal;
margin-bottom: $space-one;
margin-top: -$space-normal;
width: 100%;
@apply text-red-400 dark:text-red-400 block text-sm mb-2.5 w-full;
}
}
@@ -42,26 +60,19 @@ input {
}
.input-wrap {
color: $color-heading;
font-size: $font-size-small;
font-weight: $font-weight-medium;
@apply text-slate-800 dark:text-slate-100 text-sm font-medium;
}
.help-text {
font-weight: $font-weight-normal;
@apply font-normal text-slate-600 dark:text-slate-400;
}
.input-group.small {
input {
font-size: var(--font-size-small);
height: var(--space-large);
@apply text-sm h-8;
}
.error {
border-color: var(--r-400);
@apply border-red-400 dark:border-red-400;
}
}
label {
@apply dark:text-slate-300;
}

81
app/javascript/dashboard/assets/scss/widgets/_modal.scss
View File

@@ -1,116 +1,79 @@
@import '~dashboard/assets/scss/variables';
@import '~dashboard/assets/scss/mixins';
.modal-mask {
@include flex;
@include flex-align(center, middle);
background-color: $masked-bg;
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 9990;
// @include flex;
// @include flex-align(center, middle);
@apply flex items-center justify-center bg-modal dark:bg-modal z-[9990] h-full left-0 fixed top-0 w-full;
}
.modal--close {
position: absolute;
right: $space-small;
top: $space-small;
&:hover {
background: $color-background;
}
@apply absolute right-2 rtl:right-[unset] rtl:left-2 top-2;
}
.page-top-bar {
padding: $space-large $space-large $zero;
@apply px-8 pt-9 pb-0;
img {
max-height: 3.75rem;
@apply max-h-[3.75rem];
}
}
.modal-container {
@include normal-shadow;
border-radius: $space-smaller;
max-height: 100%;
overflow: auto;
position: relative;
width: 37.5rem;
@apply shadow-md rounded-sm max-h-full overflow-auto relative w-[37.5rem];
&.medium {
max-width: 80%;
width: 56.25rem;
@apply max-w-[80%] w-[56.25rem];
}
.content-box {
height: auto;
padding: 0;
@apply h-auto p-0;
}
h2 {
color: $color-heading;
font-size: $font-size-medium;
font-weight: $font-weight-bold;
@apply text-slate-800 dark:text-slate-100 text-lg font-semibold;
}
p {
font-size: $font-size-small;
margin: 0;
padding: 0;
@apply text-sm m-0 p-0 text-slate-600 mt-2 text-sm dark:text-slate-300;
}
.content {
padding: $space-large;
@apply p-8;
}
form,
.modal-content {
align-self: center;
padding: $space-large;
@apply pt-4 pb-8 px-8 self-center;
a {
padding: $space-normal;
@apply p-4;
}
}
.modal-footer {
@include flex;
@include flex-align($x: flex-end, $y: middle);
padding: $space-small $zero;
.button {
margin-left: var(--space-small);
}
&:first-child {
.button {
margin-left: 0;
}
}
// @include flex;
// @include flex-align($x: flex-end, $y: middle);
@apply flex justify-end items-center py-2 px-0 gap-2;
&.justify-content-end {
justify-content: end;
@apply justify-end;
}
}
.delete-item {
padding: $space-large;
@apply p-8;
button {
margin: 0;
@apply m-0;
}
}
}
.modal-enter,
.modal-leave {
opacity: 0;
@apply opacity-0;
}
.modal-enter .modal-container,
.modal-leave .modal-container {
transform: scale(1.1);
// @apply transform scale-110;
}

28
app/javascript/dashboard/assets/scss/widgets/_states.scss
View File

@@ -1,27 +1 @@
// EMPTY STATES
.empty-state {
padding: $space-jumbo $space-smaller;
.title,
.message {
display: block;
text-align: center;
width: 100%;
}
.title {
font-size: $font-size-giga;
font-weight: $font-weight-feather;
}
.message {
color: $color-gray;
margin: $space-normal auto;
width: 90%;
}
.button {
margin-top: $space-medium;
}
}
// To be removed

61
app/javascript/dashboard/assets/scss/widgets/_tabs.scss
View File

@@ -1,100 +1,69 @@
.tabs--container {
display: flex;
@apply flex;
}
.tabs--container--with-border {
@include border-normal-bottom;
@apply border-b border-slate-50 dark:border-slate-800/50;
}
.tabs {
border-left-width: 0;
border-right-width: 0;
border-top-width: 0;
display: flex;
min-width: var(--space-mega);
padding: 0 var(--space-normal);
@apply border-r-0 border-l-0 border-t-0 flex min-w-[6.25rem] py-0 px-4;
}
.tabs--with-scroll {
@apply overflow-hidden py-0 px-1;
max-width: calc(100% - 64px);
overflow: hidden;
padding: 0 var(--space-smaller);
}
.tabs--scroll-button {
align-items: center;
border-radius: 0;
cursor: pointer;
display: flex;
height: auto;
justify-content: center;
min-width: var(--space-large);
@apply items-center rounded-none cursor-pointer flex h-auto justify-center min-w-[2rem];
}
// Tab chat type
.tab--chat-type {
@include flex;
@apply flex;
.tabs-title {
a {
font-size: var(--font-size-default);
font-weight: var(--font-weight-medium);
padding-bottom: var(--space-slab);
padding-top: var(--space-slab);
@apply text-base font-medium py-3;
}
}
}
.tabs-title {
flex-shrink: 0;
margin: 0 var(--space-small);
@apply flex-shrink-0 my-0 mx-2;
.badge {
background: var(--color-background);
border-radius: var(--space-small);
color: var(--color-gray);
font-size: var(--font-size-micro);
font-weight: var(--font-weight-black);
margin: 0 var(--space-smaller);
padding: var(--space-smaller);
@apply bg-slate-50 dark:bg-slate-800 rounded-md text-slate-600 dark:text-slate-100 h-5 flex items-center justify-center text-xxs font-semibold my-0 mx-1 px-1 py-0;
}
&:first-child {
margin-left: 0;
@apply ml-0;
}
&:last-child {
margin-right: 0;
@apply mr-0;
}
&:hover,
&:focus {
a {
color: darken($medium-gray, 20%);
@apply text-slate-800 dark:text-slate-100;
}
}
a {
align-items: center;
border-bottom: 2px solid transparent;
color: $medium-gray;
display: flex;
flex-direction: row;
font-size: var(--font-size-small);
position: relative;
top: 1px;
@apply flex items-center flex-row border-b border-transparent text-slate-600 dark:text-slate-200 text-sm top-[1px] relative;
transition: border-color 0.15s $swift-ease-out-function;
}
&.is-active {
a {
border-bottom-color: var(--color-woot);
color: var(--color-woot);
@apply border-b border-woot-500 text-woot-500 dark:text-woot-500;
}
.badge {
background: $color-extra-light-blue;
color: var(--color-woot);
@apply bg-woot-50 dark:bg-woot-500 text-woot-500 dark:text-woot-50 dark:bg-opacity-40;
}
}
}

64
app/javascript/dashboard/assets/scss/widgets/_woot-tables.scss
View File

@@ -1,20 +1,19 @@
table {
border-spacing: 0;
font-size: var(--font-size-small);
@apply border-spacing-0 text-sm;
thead {
th {
@apply font-medium text-left uppercase text-slate-900 dark:text-slate-200;
@apply font-semibold tracking-[1px] text-left uppercase text-slate-900 dark:text-slate-200;
}
}
tbody {
tr {
@apply border-b border-slate-50 dark:border-slate-700;
@apply border-b border-slate-50 dark:border-slate-800/30;
}
td {
padding: var(--space-small);
@apply p-2.5 text-slate-700 dark:text-slate-100;
}
}
}
@@ -22,37 +21,68 @@ table {
.woot-table {
tr {
.show-if-hover {
opacity: 0;
transition: opacity 0.2s $swift-ease-out-function;
@apply opacity-0;
}
&:hover {
.show-if-hover {
opacity: 1;
@apply opacity-100;
}
}
}
.agent-name {
display: block;
font-weight: var(--font-weight-medium);
text-transform: capitalize;
@apply block font-medium capitalize;
}
.woot-thumbnail {
border-radius: 50%;
height: 3.125rem;
width: 3.125rem;
@apply rounded-full h-[3.125rem] w-[3.125rem];
}
.button-wrapper {
@include flex-align(left, null);
@include flex;
flex-direction: row;
min-width: 12.5rem;
@apply flex justify-start flex-row min-w-[12.5rem] gap-1;
}
.button {
margin: 0;
}
}
.ve-table {
.ve-table-container.ve-table-border-around {
@apply border-slate-200 dark:border-slate-700;
}
.ve-table-content {
.ve-table-header .ve-table-header-tr .ve-table-header-th {
@apply bg-slate-50 dark:bg-slate-800 text-slate-800 dark:text-slate-100 border-slate-100 dark:border-slate-700/50;
}
.ve-table-body .ve-table-body-tr .ve-table-body-td {
@apply bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100 border-slate-75 dark:border-slate-800;
}
.ve-table-body.ve-table-row-hover .ve-table-body-tr:hover td {
@apply bg-slate-50 dark:bg-slate-700 text-slate-800 dark:text-slate-100;
}
}
}
.table-pagination {
.ve-pagination-total {
@apply text-slate-600 dark:text-slate-200;
}
.ve-pagination-goto {
@apply text-slate-600 dark:text-slate-200;
}
.ve-pagination-li {
@apply bg-white dark:bg-slate-900 text-slate-600 dark:text-slate-200 border-slate-75 dark:border-slate-700;
}
.ve-pagination-goto-input {
@apply bg-white dark:bg-slate-900 text-slate-600 dark:text-slate-200;
}
}