mirror of
https://github.com/ash-project/ash_hq.git
synced 2024-09-20 13:23:38 +12:00
e2c039f861
Earmark will wrap list item contents in paragraphs only when there are sibling elements, meaning that the margins can be inconsistent
138 lines
2.3 KiB
CSS
138 lines
2.3 KiB
CSS
/* This file is for your main application CSS */
|
|
@import "tailwindcss/base";
|
|
@import "tailwindcss/components";
|
|
@import "tailwindcss/utilities";
|
|
|
|
@import "syntax.css";
|
|
|
|
/* Import scoped CSS rules for components */
|
|
@import "./_components.css";
|
|
|
|
.search-hit {
|
|
@apply text-primary-light-500 dark:text-primary-dark-300
|
|
}
|
|
|
|
@layer components {
|
|
.prose li p { @apply m-0; }
|
|
}
|
|
|
|
/* Alerts and form errors used by phx.new */
|
|
.alert {
|
|
padding: 15px;
|
|
margin-bottom: 20px;
|
|
border: 1px solid transparent;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.alert-info {
|
|
color: #31708f;
|
|
background-color: #d9edf7;
|
|
border-color: #bce8f1;
|
|
}
|
|
|
|
.alert-warning {
|
|
color: #8a6d3b;
|
|
background-color: #fcf8e3;
|
|
border-color: #faebcc;
|
|
}
|
|
|
|
.alert-danger {
|
|
color: #a94442;
|
|
background-color: #f2dede;
|
|
border-color: #ebccd1;
|
|
}
|
|
|
|
.alert p {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.alert:empty {
|
|
display: none;
|
|
}
|
|
|
|
.invalid-feedback {
|
|
color: #a94442;
|
|
display: block;
|
|
margin: -1rem 0 2rem;
|
|
}
|
|
|
|
/* LiveView specific classes for your customization */
|
|
.phx-no-feedback.invalid-feedback,
|
|
.phx-no-feedback .invalid-feedback {
|
|
display: none;
|
|
}
|
|
|
|
.phx-click-loading {
|
|
opacity: 0.5;
|
|
transition: opacity 1s ease-out;
|
|
}
|
|
|
|
.phx-loading {
|
|
cursor: wait;
|
|
}
|
|
|
|
.phx-modal {
|
|
opacity: 1 !important;
|
|
position: fixed;
|
|
z-index: 1;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: auto;
|
|
background-color: rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
.phx-modal-content {
|
|
background-color: #fefefe;
|
|
margin: 15vh 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;
|
|
}
|
|
|
|
|
|
/* Prevent scrolling beneath Topbar due to URL fragment */
|
|
html {
|
|
scroll-padding-top: 8.5rem;
|
|
}
|
|
@media (min-width: 1280px) {
|
|
html {
|
|
scroll-padding-top: 5rem;
|
|
}
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
/* Ensure dark-mode is applied to native elements, eg scrollbars */
|
|
.dark {
|
|
color-scheme: dark;
|
|
}
|
|
|
|
/* Constrain sidebar container size to screen height - Topbar height - mobile button height*/
|
|
.sidebar-container {
|
|
max-height: calc(100vh - 8.5rem);
|
|
}
|
|
|
|
@media (min-width: 1280px) {
|
|
/* Constrain sidebar container size to screen height - Topbar height */
|
|
.sidebar-container {
|
|
max-height: calc(100vh - 5rem);
|
|
}
|
|
}
|