manuelcillero/pagetop
manuelcillero/pagetop
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

✨ (bootsier): Añade AdminLTE 4 y Bootstrap Icons

Browse source 
Integra AdminLTE 4.0.0 (SCSS y JS), Bootstrap Icons 1.13.1 y las fuentes
Source Sans 3 VF; reorganiza los SCSS del tema con la nueva estructura
de *pagetop-build*.
This commit is contained in:
Manuel Cillero 2026-06-14 21:25:52 +02:00
parent f27790c3a2
commit 1bd97d5705
160 changed files with 13401 additions and 133 deletions
Download patch file Download diff file Expand all files Collapse all files

235
extensions/pagetop-bootsier/assets/adminlte-4.0.0/scss/_direct-chat.scss Normal file
View file

@ -0,0 +1,235 @@
//
// Component: Direct Chat
//
.direct-chat {
.card-body {
position: relative;
padding: 0;
overflow-x: hidden;
}
&.chat-pane-open {
.direct-chat-contacts {
transform: translate(0, 0);
}
}
&.timestamp-light {
.direct-chat-timestamp {
color: rgba(var(--#{$prefix}body-color-rgb), .65);
}
}
&.timestamp-dark {
.direct-chat-timestamp {
color: rgba(var(--#{$prefix}body-color-rgb), .9);
}
}
}
.direct-chat-messages {
height: 250px;
padding: 10px;
overflow: auto;
transform: translate(0, 0);
}
.direct-chat-msg,
.direct-chat-text {
display: block;
}
.direct-chat-msg {
@include clearfix();
margin-bottom: 10px;
}
.direct-chat-messages,
.direct-chat-contacts {
@include transition(transform .5s ease-in-out);
}
.direct-chat-text {
@if $enable-rounded {
@include border-radius($border-radius-lg);
}
position: relative;
padding: 5px 10px;
margin: 5px 0 0 50px;
color: $lte-direct-chat-default-font-color;
background-color: $lte-direct-chat-default-msg-bg;
border: 1px solid $lte-direct-chat-default-msg-border-color;
//Create the arrow
&::after,
&::before {
position: absolute;
top: 15px;
right: 100%;
width: 0;
height: 0;
pointer-events: none;
content: " ";
border: solid transparent;
border-right-color: $lte-direct-chat-default-msg-border-color;
}
&::after {
margin-top: -5px;
border-width: 5px;
}
&::before {
margin-top: -6px;
border-width: 6px;
}
.end & {
margin-right: 50px;
margin-left: 0;
&::after,
&::before {
right: auto;
left: 100%;
border-right-color: transparent;
border-left-color: $lte-direct-chat-default-msg-border-color;
}
}
}
.direct-chat-img {
@include border-radius(50%);
float: left;
width: 40px;
height: 40px;
.end & {
float: right;
}
}
.direct-chat-infos {
display: block;
margin-bottom: 2px;
font-size: $font-size-sm;
}
.direct-chat-name {
font-weight: 600;
}
.direct-chat-timestamp {
color: rgba(var(--#{$prefix}body-color-rgb), .75);
}
//Direct chat contacts pane
.direct-chat-contacts-open {
.direct-chat-contacts {
transform: translate(0, 0);
}
}
.direct-chat-contacts {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 250px;
overflow: auto;
color: var(--#{$prefix}body-bg);
background-color: var(--#{$prefix}body-color);
transform: translate(101%, 0);
}
.direct-chat-contacts-light {
background-color: var(--#{$prefix}light-bg-subtle);
.contacts-list-name {
color: var(--#{$prefix}body-color);
}
.contacts-list-date {
color: var(--#{$prefix}secondary-color);
}
.contacts-list-msg {
color: var(--#{$prefix}secondary-color);
}
}
//Contacts list -- for displaying contacts in direct chat contacts pane
.contacts-list {
@include list-unstyled();
> li {
@include clearfix();
padding: 10px;
margin: 0;
text-decoration: none;
border-bottom: 1px solid rgba($black, .2);
&:last-of-type {
border-bottom: 0;
}
a {
text-decoration: none;
}
}
}
.contacts-list-img {
@include border-radius(50%);
float: left;
width: 40px;
}
.contacts-list-info {
margin-left: 45px;
color: var(--#{$prefix}body-bg);
}
.contacts-list-name,
.contacts-list-status {
display: block;
}
.contacts-list-name {
font-weight: 600;
}
.contacts-list-status {
font-size: $font-size-sm;
}
.contacts-list-date {
font-weight: 400;
color: var(--#{$prefix}secondary-bg);
}
.contacts-list-msg {
color: var(--#{$prefix}secondary-bg);
}
.end > .direct-chat-text {
color: var(--#{$lte-prefix}direct-chat-color);
background-color: var(--#{$lte-prefix}direct-chat-bg);
border-color: var(--#{$lte-prefix}direct-chat-bg);
&::after,
&::before {
border-left-color: var(--#{$lte-prefix}direct-chat-bg);
}
}
// Color variants
@each $name, $color in $theme-colors {
.direct-chat-#{$name} {
--#{$lte-prefix}direct-chat-color: #{color-contrast($color)};
--#{$lte-prefix}direct-chat-bg: #{$color};
}
}