mirror of
https://github.com/bonfire-networks/bonfire-app.git
synced 2024-05-06 19:28:44 +00:00
747 lines
12 KiB
SCSS
747 lines
12 KiB
SCSS
/* This file is for your main application css. */
|
|
|
|
@import "../node_modules/nprogress/nprogress.css";
|
|
@import "../node_modules/@yaireo/tagify/dist/tagify.css";
|
|
@import "../../deps/bonfire_ui_common/assets/node_modules/@splidejs/splide/dist/css/splide.min.css";
|
|
@import "../../deps/bonfire_ui_common/assets/node_modules/glider-js/glider.min.css";
|
|
|
|
@tailwind base;
|
|
|
|
.badge.badge-lg {
|
|
height: 2.25rem;
|
|
padding-left: 1rem;
|
|
padding-right: 1rem;
|
|
}
|
|
|
|
.-secondary li a {
|
|
@apply !leading-normal !h-auto !tracking-normal
|
|
}
|
|
|
|
* {
|
|
-moz-box-sizing: border-box;
|
|
-webkit-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.max-w-screen {
|
|
max-width: var(--inner-window-width);
|
|
}
|
|
|
|
.glider-track {
|
|
@apply gap-3;
|
|
}
|
|
:root {
|
|
--inner-window-height: 100%;
|
|
--inner-window-width: 100%;
|
|
}
|
|
|
|
.overflowed {
|
|
height: var(--inner-window-height);
|
|
overflow-y: auto;
|
|
}
|
|
|
|
|
|
html,
|
|
body {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
[type='checkbox'], [type='radio'] {
|
|
background-color: transparent;
|
|
color: inherit;
|
|
}
|
|
|
|
#boundaries_selection tags, #boundaries_selection_tagify {
|
|
border: none;
|
|
}
|
|
|
|
|
|
@keyframes fadeIn {
|
|
0%{
|
|
opacity: 0;
|
|
}
|
|
100%{
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes fadeinLeft {
|
|
0%{
|
|
left: -50%;
|
|
}
|
|
100%{
|
|
left: 0;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.sortable-drag{
|
|
@apply !opacity-100 !bg-base-100;
|
|
}
|
|
|
|
|
|
.sortable-ghost {
|
|
@apply bg-base-300 opacity-100;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.active-comment:after {
|
|
position: absolute;
|
|
content: "";
|
|
@apply bg-primary rounded-full w-2 h-2 right-10 top-4;
|
|
}
|
|
|
|
.tagify {
|
|
@apply rounded;
|
|
--placeholder-color: hsl(var(--bc)/80);
|
|
--placeholder-color-focus: hsl(var(--bc)/80);
|
|
--input-color: hsl(var(--bc)/70);
|
|
--tags-border-color: hsl(var(--bc)/20);
|
|
--tag-bg: var(--in);
|
|
--tag-hover: var(--tag-bg);
|
|
--tag-remove-bg: var(--tag-bg);
|
|
}
|
|
.tagify--outside tag,
|
|
.tagify tag {
|
|
@apply rounded bg-info;
|
|
}
|
|
|
|
.tagify__dropdown__wrapper {
|
|
}
|
|
.tagify__dropdown__item {
|
|
@apply text-slate-800;
|
|
}
|
|
.tagify__dropdown__item:hover,
|
|
.tagify__dropdown__item--active {
|
|
}
|
|
|
|
.tagify--outside{
|
|
border: 0;
|
|
}
|
|
|
|
.tagify--outside .tagify__input{
|
|
@apply rounded;
|
|
order: -1;
|
|
flex: 100%;
|
|
border: 1px solid var(--tags-border-color);
|
|
transition: .1s;
|
|
}
|
|
|
|
.tagify--outside .tagify__input:hover{ border-color:var(--tags-hover-border-color); }
|
|
.tagify--outside.tagify--focus .tagify__input{
|
|
transition: 0s;
|
|
border-color: var(--tags-focus-border-color);
|
|
}
|
|
|
|
.badge-lg {
|
|
height: 2rem;
|
|
}
|
|
.menu svg path {
|
|
stroke-width: 1;
|
|
}
|
|
|
|
.full-height {
|
|
height: 100%;
|
|
}
|
|
|
|
|
|
.full_page {
|
|
height: calc(var(--inner-window-height)) ;
|
|
}
|
|
|
|
.widget {
|
|
height: calc(var(--inner-window-height) - 65px) ;
|
|
}
|
|
|
|
|
|
#bonfire_layout {
|
|
height: calc(var(--inner-window-height) - 60px);
|
|
overflow-y: auto;
|
|
}
|
|
@media (max-width: 768px) {
|
|
.widget {
|
|
height: 0;
|
|
}
|
|
#bonfire_layout {
|
|
height: 100%;
|
|
overflow-y: hidden;
|
|
}
|
|
}
|
|
|
|
.checkbox {
|
|
background-color: transparent;
|
|
}
|
|
|
|
[x-cloak] {
|
|
display: none !important;
|
|
}
|
|
|
|
.lined:before {
|
|
position: absolute;
|
|
content: "";
|
|
display: block;
|
|
width: 3px;
|
|
border-radius: 100px;
|
|
left: 0;
|
|
top: 0px;
|
|
bottom: 0px;
|
|
@apply bg-primary
|
|
}
|
|
|
|
.dropdown.open:before {
|
|
content: " ";
|
|
background: transparent;
|
|
display: block;
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
z-index: 10;
|
|
}
|
|
|
|
|
|
.wide {
|
|
width: 640px;
|
|
}
|
|
|
|
|
|
.main_reply_to {
|
|
padding-left: 0.75rem !important
|
|
}
|
|
|
|
/* LiveView specific classes for your customizations */
|
|
.phx-no-feedback.invalid-feedback,
|
|
.phx-no-feedback .invalid-feedback {
|
|
display: none;
|
|
}
|
|
|
|
.phx-click-loading {
|
|
opacity: 0.5;
|
|
transition: opacity 1s ease-out;
|
|
}
|
|
|
|
.phx-disconnected{
|
|
cursor: wait;
|
|
}
|
|
.phx-disconnected *{
|
|
pointer-events: none;
|
|
}
|
|
|
|
.phx-modal {
|
|
opacity: 1!important;
|
|
position: fixed;
|
|
z-index: 1;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: auto;
|
|
background-color: rgb(0,0,0);
|
|
background-color: rgba(0,0,0,0.4);
|
|
}
|
|
|
|
.phx-modal-content {
|
|
background-color: #fefefe;
|
|
margin: 15% auto;
|
|
padding: 20px;
|
|
border: 1px solid #888;
|
|
width: 80%;
|
|
}
|
|
|
|
.phx-modal-close {
|
|
color: #aaa;
|
|
float: right;
|
|
font-size: 28px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.phx-modal-close:hover,
|
|
.phx-modal-close:focus {
|
|
color: black;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
|
|
.invalid-feedback {
|
|
color: #a94442;
|
|
display: block;
|
|
margin: -1rem 0 2rem;
|
|
}
|
|
|
|
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
|
|
/* Import with */
|
|
/* @import './scrollbar-color.css'; */
|
|
|
|
:root {
|
|
--scrollbarTrack: hsla(var(--b2));
|
|
--scrollbarThumb: hsla(var(--bc)/0.1);
|
|
--scrollbarThumbHover: hsla(var(--bc)/0.2);
|
|
}
|
|
/* Scrollbar colors*/
|
|
/* width */
|
|
::-webkit-scrollbar {
|
|
width: 10px;
|
|
}
|
|
|
|
/* Track */
|
|
::-webkit-scrollbar-track {
|
|
background: var(--scrollbarTrack);
|
|
}
|
|
|
|
|
|
::-webkit-scrollbar-track:hover {
|
|
background: var(--b1);
|
|
}
|
|
|
|
|
|
/* Handle */
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--scrollbarThumb);
|
|
border-radius: 3px
|
|
}
|
|
|
|
/* Handle on hover */
|
|
|
|
|
|
.menu .menu-title>a, .menu .menu-title>span {
|
|
font-weight: normal
|
|
}
|
|
|
|
.feed_activity_action {
|
|
@apply flex items-center space-x-1 rounded cursor-pointer;
|
|
}
|
|
|
|
.feed_activity .dropdown-content {
|
|
transform: none
|
|
}
|
|
|
|
.feed_activity_text_active {
|
|
@apply text-primary;
|
|
}
|
|
|
|
.feed_activity_action:hover .feed_activity_icon {
|
|
@apply bg-base-300 bg-opacity-50;
|
|
}
|
|
|
|
.feed_activity_action:hover .feed_activity_text {
|
|
@apply text-opacity-100;
|
|
}
|
|
|
|
.feed_activity_action:hover .feed_activity_icon svg {
|
|
@apply text-base-content;
|
|
}
|
|
|
|
.feed_activity_icon_active {
|
|
@apply text-primary;
|
|
}
|
|
|
|
|
|
.feed_activity_icon {
|
|
@apply flex items-center rounded h-8 w-8 place-content-center;
|
|
}
|
|
|
|
|
|
|
|
.feed_activity_text {
|
|
@apply text-xs font-normal text-base-content flex;
|
|
}
|
|
|
|
.reply_to {
|
|
margin-left: 0 !important;
|
|
}
|
|
|
|
.comment_lined {
|
|
position: absolute;
|
|
content: "";
|
|
top: 50px;
|
|
bottom: -10px;
|
|
width: 2px;
|
|
left: 30px;
|
|
z-index: 999999;
|
|
@apply bg-base-200;
|
|
}
|
|
|
|
.profile_item:hover {
|
|
background-color: hsla(var(--bc)/var(--tw-bg-opacity,1));
|
|
}
|
|
|
|
.h-modal {
|
|
height: calc(var(--inner-window-height) - 48px);
|
|
}
|
|
|
|
.h-bonfire-logged {
|
|
height: calc(var(--inner-window-height) - 96px);
|
|
}
|
|
|
|
|
|
body {
|
|
scrollbar-gutter: stable both-edges;
|
|
}
|
|
|
|
html, body, a {
|
|
@apply text-base-content;
|
|
}
|
|
|
|
a, .link, .link-hover {
|
|
text-decoration-skip: objects;
|
|
text-decoration-skip-ink: auto;
|
|
}
|
|
|
|
.alert {
|
|
display: block;
|
|
}
|
|
|
|
|
|
article .prose {
|
|
color: hsla(var(--bc));
|
|
}
|
|
|
|
figure iframe {
|
|
max-width: 100%;
|
|
max-height: calc(var(--inner-window-height) - 60px);
|
|
}
|
|
article figure iframe {
|
|
max-height: calc(var(--inner-window-height) / 2.5);
|
|
}
|
|
|
|
.write_post_content {
|
|
@apply text-base-content;
|
|
--ck-color-engine-placeholder-text: hsla(var(--bc) / 0.8);
|
|
--ck-color-mention-background: transparent ;
|
|
--ck-color-mention-text: hsla(var(--sc) / 1) ;
|
|
}
|
|
|
|
.write_post_content .mention {
|
|
font-weight: 500;
|
|
}
|
|
|
|
|
|
.prose .mention {
|
|
@apply link-primary link-hover;
|
|
}
|
|
|
|
|
|
.ck.ck-placeholder:before,
|
|
.ck .ck-placeholder:before {
|
|
@apply text-base-content text-opacity-80;
|
|
}
|
|
|
|
.ck.ck-editor__editable_inline>:first-child {
|
|
margin-top: 8px !important;
|
|
}
|
|
|
|
.ck-balloon-panel_visible {
|
|
@apply !border-none !bg-neutral
|
|
}
|
|
|
|
.ck_list {
|
|
@apply !bg-neutral !border-none !shadow !menu !m-0 !p-0;
|
|
}
|
|
|
|
.ck-list__item {
|
|
cursor: pointer !important;
|
|
border-radius: 4px !important;
|
|
}
|
|
|
|
.ck.ck-list__item .ck-button {
|
|
cursor: pointer !important;
|
|
}
|
|
|
|
.mention_item-name {
|
|
@apply !text-neutral-content !font-semibold;
|
|
}
|
|
|
|
.mention_item-username {
|
|
@apply !ml-1 !font-light !text-neutral-content/80;
|
|
|
|
}
|
|
|
|
.ck.ck-list__item .ck-button.ck-on {
|
|
@apply !bg-base-content/5 !block !w-full;
|
|
}
|
|
|
|
.ck.ck-reset.ck-list.ck-mentions {
|
|
@apply p-1.5 rounded border-none;
|
|
}
|
|
|
|
.ck-content .mention {
|
|
@apply !text-primary !link;
|
|
}
|
|
|
|
.ck.ck-balloon-panel.ck-balloon-panel_caret_se.ck-balloon-panel_visible {
|
|
border-radius: 4px !important;
|
|
}
|
|
|
|
.editor_area#editor {
|
|
border: none !important;
|
|
}
|
|
|
|
.background-invisible:before {
|
|
content: "";
|
|
position: absolute;
|
|
z-index: -1;
|
|
background-color: hsla(var(--b3) / 1);
|
|
left: -8px;
|
|
right: -8px;
|
|
bottom: 0px;
|
|
display: block;
|
|
@apply top-0 tablet:top-[-1rem];
|
|
}
|
|
@media (max-width: 768px) {
|
|
.background-invisible:before {
|
|
top: 0rem;
|
|
}
|
|
}
|
|
|
|
.sm_background-invisible:before {
|
|
content: "";
|
|
position: absolute;
|
|
z-index: -1;
|
|
left: 0px;
|
|
right: 0px;
|
|
top: 0px;
|
|
bottom: -1rem;
|
|
display: block;
|
|
}
|
|
|
|
|
|
emoji-picker {
|
|
--emoji-size: 1.2rem;
|
|
--emoji-padding: 0.4rem;
|
|
--background: hsla(var(--b3) / 1);
|
|
--num-columns: 6;
|
|
--border-color: hsla(var(--b3) / 1);
|
|
--button-hover-background: hsla(var(--bc) / 4);
|
|
width: 280px;
|
|
height: 200px;
|
|
}
|
|
|
|
.no-padding {
|
|
padding: 0 !important;
|
|
}
|
|
|
|
@keyframes fade-out {
|
|
from {
|
|
opacity: 1;
|
|
}
|
|
to {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
.fade-out {
|
|
animation: fade-out 1s;
|
|
animation-delay: 5s;
|
|
animation-fill-mode: forwards;
|
|
opacity: 1;
|
|
}
|
|
|
|
@media (max-width: 1200px) {
|
|
.tooltip::before {
|
|
content: "";
|
|
display: none;
|
|
}
|
|
.tooltip::after {
|
|
content: "";
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.scrolling-container {
|
|
@apply h-full min-h-full min-h-[100px] max-h-[150px];
|
|
}
|
|
|
|
.ql-container {
|
|
font-size: 18px !important;
|
|
height: 100%;
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.ql-editor {
|
|
@apply h-full min-h-full;
|
|
flex: 1;
|
|
overflow-y: visible !important;
|
|
overflow-x: auto;
|
|
padding: 15px !important;
|
|
}
|
|
|
|
.ql-editor.ql-blank::before {
|
|
@apply !text-base-content/70;
|
|
}
|
|
|
|
.ql-html-textContainer div,
|
|
.ql-html-textContainer button,
|
|
.ql-html-textContainer span {
|
|
color: black;
|
|
}
|
|
|
|
.ql-mention-list-container {
|
|
width:270px;
|
|
border:1px solid #f0f0f0;
|
|
border-radius:4px;
|
|
background-color:#fff;
|
|
box-shadow:0 2px 12px 0 rgba(30,30,30,.08);
|
|
z-index:9001;
|
|
overflow:auto
|
|
}
|
|
|
|
.ql-tooltip {
|
|
z-index: 999999999;
|
|
}
|
|
.ql-mention-loading{line-height:44px;padding:0 20px;vertical-align:middle;font-size:16px}
|
|
.ql-mention-list{list-style:none;margin:0;padding:0;overflow:hidden}
|
|
.ql-mention-list-item{cursor:pointer;line-height:44px;font-size:16px;padding:0 20px;vertical-align:middle}
|
|
.ql-mention-list-item.disabled{cursor:auto}
|
|
.ql-mention-list-item.selected{background-color:#d3e1eb;text-decoration:none}
|
|
.ql-editor .mention {
|
|
@apply bg-slate-300;
|
|
height:24px;
|
|
width:65px;
|
|
border-radius:6px;
|
|
padding:3px 0;
|
|
margin-right:2px;
|
|
user-select:all
|
|
}
|
|
.ql-editor .mention a {
|
|
@apply text-slate-800;
|
|
text-decoration: none !important;
|
|
}
|
|
.ql-editor .mention>span {
|
|
margin: 0 3px
|
|
}
|
|
|
|
|
|
.modal-bottom :where(.modal-box) {
|
|
--tw-translate-y: 0;
|
|
}
|
|
|
|
.smart_input_container {
|
|
--tw-shadow: 0 10px 35px -5px rgb(0 0 0 / 0.8), 0 8px 10px -6px rgb(0 0 0 / 0.1);
|
|
}
|
|
|
|
.upload-entry img {
|
|
@apply w-full h-[140px] object-cover rounded-lg;
|
|
}
|
|
|
|
.media_container img.media-image {
|
|
@apply !h-[160px] !max-w-[160px] object-cover;
|
|
}
|
|
|
|
.media-entry button {
|
|
@apply w-full h-full
|
|
}
|
|
|
|
|
|
.media-single button {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.media-multiple button {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.prose {
|
|
word-break: break-word;
|
|
}
|
|
|
|
.hide {
|
|
display: none !important;
|
|
}
|
|
|
|
.modal-box {
|
|
width: 100% !important;
|
|
}
|
|
|
|
.tabs_nav .tab {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.tabs_nav_profile .tab {
|
|
@apply !py-4 !h-[3.5rem];
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.tabs_nav_profile .tab.tab-active {
|
|
border-bottom: 3px solid;
|
|
}
|
|
|
|
.tabs_nav .tab.tab-active {
|
|
border-bottom: 3px solid;
|
|
}
|
|
|
|
.not-distraction-free {
|
|
word-break: break-word;
|
|
}
|
|
|
|
.text-sm pre,
|
|
.text-sm code {
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.input-sizer.stacked {
|
|
align-items: stretch;
|
|
}
|
|
|
|
|
|
.input-sizer.stacked::after {
|
|
grid-area: 2 / 1;
|
|
}
|
|
|
|
.input-sizer.stacked textarea {
|
|
grid-area: 2 / 1;
|
|
}
|
|
|
|
.input-sizer::after, .input-sizer .textarea {
|
|
resize: none;
|
|
}
|
|
|
|
|
|
.input-sizer::after {
|
|
content: attr(data-value) ' ';
|
|
visibility: hidden;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.input-sizer {
|
|
display: inline-grid;
|
|
vertical-align: top;
|
|
align-items: center;
|
|
position: relative;
|
|
}
|
|
|
|
|
|
.splide__pagination__page.is-active {
|
|
@apply bg-base-content/70;
|
|
}
|
|
.splide__arrow:disabled {
|
|
opacity: 0;
|
|
}
|
|
|
|
.splide__arrow {
|
|
@apply text-base-content/80;
|
|
}
|
|
|
|
.dropdown.dropdown-open .dropdown-content, .dropdown.dropdown-hover:hover .dropdown-content, .dropdown:not(.dropdown-hover):focus .dropdown-content, .dropdown:not(.dropdown-hover):focus-within .dropdown-content {
|
|
height: auto;
|
|
}
|
|
|
|
.dropdown .dropdown-content {
|
|
height: 0;
|
|
} |