BrainMinder/assets/static/css/orig.css
2024-11-17 20:12:20 +01:00

1271 lines
17 KiB
CSS

.w3-disabled,
.w3-btn:disabled,
.w3-button:disabled {
cursor: not-allowed;
opacity: 0.3
}
.w3-disabled *,
:disabled * {
pointer-events: none
}
.w3-btn.w3-disabled:hover,
.w3-btn:disabled:hover {
box-shadow: none
}
.w3-badge,
.w3-tag {
background-color: #000;
color: #fff;
display: inline-block;
padding-left: 8px;
padding-right: 8px;
text-align: center
}
.w3-badge {
border-radius: 50%
}
.w3-tooltip,
.w3-display-container {
position: relative
}
.w3-tooltip .w3-text {
display: none
}
.w3-tooltip:hover .w3-text {
display: inline-block
}
.w3-ripple:active {
opacity: 0.5
}
.w3-ripple {
transition: opacity 0s
}
.w3-bar-block .w3-dropdown-hover,
.w3-bar-block .w3-dropdown-click {
width: 100%
}
.w3-bar-block .w3-dropdown-hover .w3-dropdown-content,
.w3-bar-block .w3-dropdown-click .w3-dropdown-content {
min-width: 100%
}
.w3-bar-block .w3-dropdown-hover .w3-button,
.w3-bar-block .w3-dropdown-click .w3-button {
width: 100%;
text-align: left;
padding: 8px 16px
}
.w3-main,
#main {
transition: margin-left .4s
}
.w3-modal {
z-index: 100;
padding-top: 100px;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
display: block;
}
.w3-modal-content {
margin: auto;
background-color: #fff;
position: relative;
padding: 0;
outline: 0;
width: 600px;
color: rgb(84, 84, 84);
}
.w3-modal-content h5 {
font-weight: 600 !important;
}
.w3-bar {
width: 100%;
overflow: hidden
}
.w3-center .w3-bar {
display: inline-block;
width: auto
}
.w3-bar .w3-bar-item {
padding: 6px 16px;
float: left;
width: auto;
border: none;
display: block;
outline: 0
}
.w3-bar .w3-dropdown-hover,
.w3-bar .w3-dropdown-click {
position: static;
float: left
}
.w3-bar .w3-button {
white-space: normal
}
.w3-bar-block .w3-bar-item {
width: 100%;
display: block;
padding: 8px 16px;
text-align: left;
border: none;
white-space: normal;
float: none;
outline: 0
}
.w3-bar-block.w3-center .w3-bar-item {
text-align: center
}
.w3-block {
display: block;
width: 100%
}
.w3-responsive {
display: block;
overflow-x: auto
}
.w3-container:after,
.w3-container:before,
.w3-panel:after,
.w3-panel:before,
.w3-row:after,
.w3-row:before,
.w3-row-padding:after,
.w3-row-padding:before,
.w3-cell-row:before,
.w3-cell-row:after,
.w3-clear:after,
.w3-clear:before,
.w3-bar:before,
.w3-bar:after {
content: "";
display: table;
clear: both
}
.w3-col,
.w3-half,
.w3-third,
.w3-twothird,
.w3-threequarter,
.w3-quarter {
float: left;
width: 100%
}
.w3-col.s1 {
width: 8.33333%
}
.w3-col.s2 {
width: 16.66666%
}
.w3-col.s3 {
width: 24.99999%
}
.w3-col.s4 {
width: 33.33333%
}
.w3-col.s5 {
width: 41.66666%
}
.w3-col.s6 {
width: 49.99999%
}
.w3-col.s7 {
width: 58.33333%
}
.w3-col.s8 {
width: 66.66666%
}
.w3-col.s9 {
width: 74.99999%
}
.w3-col.s10 {
width: 83.33333%
}
.w3-col.s11 {
width: 91.66666%
}
.w3-col.s12 {
width: 99.99999%
}
@media (min-width:601px) {
.w3-col.m1 {
width: 8.33333%
}
.w3-col.m2 {
width: 16.66666%
}
.w3-col.m3,
.w3-quarter {
width: 24.99999%
}
.w3-col.m4,
.w3-third {
width: 33.33333%
}
.w3-col.m5 {
width: 41.66666%
}
.w3-col.m6,
.w3-half {
width: 49.99999%
}
.w3-col.m7 {
width: 58.33333%
}
.w3-col.m8,
.w3-twothird {
width: 66.66666%
}
.w3-col.m9,
.w3-threequarter {
width: 74.99999%
}
.w3-col.m10 {
width: 83.33333%
}
.w3-col.m11 {
width: 91.66666%
}
.w3-col.m12 {
width: 99.99999%
}
}
@media (min-width:993px) {
.w3-col.l1 {
width: 8.33333%
}
.w3-col.l2 {
width: 16.66666%
}
.w3-col.l3 {
width: 24.99999%
}
.w3-col.l4 {
width: 33.33333%
}
.w3-col.l5 {
width: 41.66666%
}
.w3-col.l6 {
width: 49.99999%
}
.w3-col.l7 {
width: 58.33333%
}
.w3-col.l8 {
width: 66.66666%
}
.w3-col.l9 {
width: 74.99999%
}
.w3-col.l10 {
width: 83.33333%
}
.w3-col.l11 {
width: 91.66666%
}
.w3-col.l12 {
width: 99.99999%
}
}
.w3-rest {
overflow: hidden
}
.w3-stretch {
margin-left: -16px;
margin-right: -16px
}
.w3-content,
.w3-auto {
margin-left: auto;
margin-right: auto
}
.w3-content {
max-width: 980px
}
.w3-auto {
max-width: 1140px
}
.w3-cell-row {
display: table;
width: 100%
}
.w3-cell {
display: table-cell
}
.w3-cell-top {
vertical-align: top
}
.w3-cell-middle {
vertical-align: middle
}
.w3-cell-bottom {
vertical-align: bottom
}
.w3-show-inline-block {
display: inline-block !important
}
@media (max-width:1205px) {
.w3-auto {
max-width: 95%
}
}
@media (max-width:600px) {
.w3-modal-content {
margin: 0 10px;
width: auto !important
}
.w3-modal {
padding-top: 30px
}
.w3-dropdown-hover.w3-mobile .w3-dropdown-content,
.w3-dropdown-click.w3-mobile .w3-dropdown-content {
position: relative
}
.w3-mobile {
display: block;
width: 100% !important
}
.w3-bar-item.w3-mobile,
.w3-dropdown-hover.w3-mobile,
.w3-dropdown-click.w3-mobile {
text-align: center
}
.w3-dropdown-hover.w3-mobile,
.w3-dropdown-hover.w3-mobile .w3-btn,
.w3-dropdown-hover.w3-mobile .w3-button,
.w3-dropdown-click.w3-mobile,
.w3-dropdown-click.w3-mobile .w3-btn,
.w3-dropdown-click.w3-mobile .w3-button {
width: 100%
}
}
@media (max-width:768px) {
#modal-confirm-dialog-content {
width: 400px;
}
.w3-modal-content {
width: 500px
}
.w3-modal {
padding-top: 50px
}
}
@media (min-width:993px) {
#modal-confirm-dialog-content {
width: 600px;
}
.w3-modal-content {
width: 900px
}
}
@media (max-width:992px) {
.w3-main {
margin-left: 0 !important;
margin-right: 0 !important
}
.w3-auto {
max-width: 100%
}
}
.w3-top,
.w3-bottom {
position: fixed;
width: 100%;
z-index: 1
}
.w3-top {
top: 0
}
.w3-bottom {
bottom: 0
}
.w3-overlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 4;
}
.w3-circle {
border-radius: 50%
}
.w3-round-small {
border-radius: 2px
}
.w3-round,
.w3-round-medium {
border-radius: 4px
}
.w3-round-large {
border-radius: 8px
}
.w3-round-xlarge {
border-radius: 16px
}
.w3-round-xxlarge {
border-radius: 32px
}
.w3-row-padding,
.w3-row-padding>.w3-half,
.w3-row-padding>.w3-third,
.w3-row-padding>.w3-twothird,
.w3-row-padding>.w3-threequarter,
.w3-row-padding>.w3-quarter,
.w3-row-padding>.w3-col {
padding: 0 8px
}
.w3-container,
.w3-panel {
padding: 0.01em 4px
}
.w3-panel {
margin-top: 4px;
margin-bottom: 4px
}
.w3-spin {
animation: w3-spin 2s infinite linear
}
@keyframes w3-spin {
0% {
transform: rotate(0deg)
}
100% {
transform: rotate(359deg)
}
}
.w3-animate-fading {
animation: fading 10s infinite
}
@keyframes fading {
0% {
opacity: 0
}
50% {
opacity: 1
}
100% {
opacity: 0
}
}
.w3-animate-opacity {
animation: opac 0.8s
}
@keyframes opac {
from {
opacity: 0
}
to {
opacity: 1
}
}
.w3-animate-top {
position: relative;
animation: animatetop 0.4s
}
@keyframes animatetop {
from {
top: -300px;
opacity: 0
}
to {
top: 0;
opacity: 1
}
}
.w3-animate-left {
position: relative;
animation: animateleft 0.4s
}
@keyframes animateleft {
from {
left: -300px;
opacity: 0
}
to {
left: 0;
opacity: 1
}
}
.w3-animate-right {
position: relative;
animation: animateright 0.4s
}
@keyframes animateright {
from {
right: -300px;
opacity: 0
}
to {
right: 0;
opacity: 1
}
}
.w3-animate-bottom {
position: relative;
animation: animatebottom 0.4s
}
@keyframes animatebottom {
from {
bottom: -300px;
opacity: 0
}
to {
bottom: 0;
opacity: 1
}
}
.w3-animate-zoom {
animation: animatezoom 0.6s
}
@keyframes animatezoom {
from {
transform: scale(0)
}
to {
transform: scale(1)
}
}
.w3-animate-input {
transition: width 0.4s ease-in-out
}
.w3-animate-input:focus {
width: 100% !important
}
.w3-opacity,
.w3-hover-opacity:hover {
opacity: 0.60
}
.w3-opacity-off,
.w3-hover-opacity-off:hover {
opacity: 1
}
.w3-opacity-max {
opacity: 0.25
}
.w3-opacity-min {
opacity: 0.75
}
.w3-greyscale-max,
.w3-grayscale-max,
.w3-hover-greyscale:hover,
.w3-hover-grayscale:hover {
filter: grayscale(100%)
}
.w3-greyscale,
.w3-grayscale {
filter: grayscale(75%)
}
.w3-greyscale-min,
.w3-grayscale-min {
filter: grayscale(50%)
}
.w3-sepia {
filter: sepia(75%)
}
.w3-sepia-max,
.w3-hover-sepia:hover {
filter: sepia(100%)
}
.w3-sepia-min {
filter: sepia(50%)
}
.w3-left-align {
text-align: left !important
}
.w3-right-align {
text-align: right !important
}
.w3-justify {
text-align: justify !important
}
.w3-center {
text-align: center !important
}
.w3-border-0 {
border: 0 !important
}
.w3-border {
border: 1px solid #ccc !important
}
.w3-border-top {
border-top: 1px solid #ccc !important
}
.w3-border-bottom {
border-bottom: 1px solid #ccc !important
}
.w3-border-left {
border-left: 1px solid #ccc !important
}
.w3-border-right {
border-right: 1px solid #ccc !important
}
.w3-topbar {
border-top: 6px solid #ccc !important
}
.w3-bottombar {
border-bottom: 6px solid #ccc !important
}
.w3-leftbar {
border-left: 6px solid #ccc !important
}
.w3-rightbar {
border-right: 6px solid #ccc !important
}
.w3-section,
.w3-code {
margin-top: 16px !important;
margin-bottom: 16px !important
}
.w3-margin {
margin: 16px !important
}
.w3-margin-top {
margin-top: 16px !important
}
.w3-margin-bottom {
margin-bottom: 16px !important
}
.w3-margin-left {
margin-left: 16px !important
}
.w3-margin-right {
margin-right: 16px !important
}
.w3-padding-small {
padding: 4px 8px !important
}
.w3-padding {
padding: 8px 16px !important
}
.w3-padding-large {
padding: 12px 24px !important
}
.w3-padding-16 {
padding-top: 16px !important;
padding-bottom: 16px !important
}
.w3-padding-24 {
padding-top: 24px !important;
padding-bottom: 24px !important
}
.w3-padding-32 {
padding-top: 32px !important;
padding-bottom: 32px !important
}
.w3-padding-48 {
padding-top: 48px !important;
padding-bottom: 48px !important
}
.w3-padding-64 {
padding-top: 64px !important;
padding-bottom: 64px !important
}
.w3-padding-top-64 {
padding-top: 64px !important
}
.w3-padding-top-48 {
padding-top: 48px !important
}
.w3-padding-top-32 {
padding-top: 32px !important
}
.w3-padding-top-24 {
padding-top: 24px !important
}
.w3-left {
float: left !important
}
.w3-right {
float: right !important
}
.w3-button:hover {
color: #000 !important;
background-color: #ccc !important
}
.w3-transparent,
.w3-hover-none:hover {
background-color: transparent !important
}
.w3-hover-none:hover {
box-shadow: none !important
}
.alert-success {
color: #000;
background-color: #ccc;
}
.alert-failure {
color: #fff;
background-color: #b91d47;
}
.links-list a:not(:last-of-type)::after {
content: " | "
}
.label-check {
margin-left: 5px;
}
.w3-row .threequarter {
width: 75%;
float: left;
}
.w3-row .quarter {
width: 25%;
float: left;
}
.w3-button.w3-edit {
background-color: #f1f1f1;
}
.w3-button.w3-edit:hover {
background-color: var(--bg-primary-color);
}
.w3-button.w3-delete {
background-color: #f1f1f1;
}
.w3-button.w3-delete:hover {
background-color: #b91d47 !important;
}
.fields {
margin-bottom: 20px;
}
.fields li {
padding-left: 0;
}
.footerNavbar-container {
position: fixed;
bottom: 5px;
width: 100%;
padding-right: 8px;
}
.footerNavbar {
overflow: hidden;
width: 100%;
background-color: var(--bg-primary-color);
}
.footerNavbar .w3-bar-item {
padding: 3px;
}
.footerNavbar .w3-bar-item p {
margin-top: 0;
margin-bottom: 0;
font-size: 10pt;
}
.footerNavbar .w3-btn {
padding: 6px 4px;
}
#searchSidebar {
display: none;
}
#overlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 4;
cursor: pointer;
}
#message {
visibility: hidden;
min-width: 250px;
margin-left: -125px;
text-align: center;
border-radius: 2px;
padding: 16px;
position: fixed;
z-index: 1;
left: 50%;
bottom: 36px;
}
#message.show {
visibility: visible;
}
.tag {
display: inline-block;
}
.field-label {
font-weight: bold;
}
.summary {
background-color: #fff;
padding: 4px
}
.summary p {
padding: 0;
margin: 0;
}
tr.htmx-swapping td {
opacity: 0;
transition: opacity 1s ease-out;
}
#items_search, #all_items_search {
position: sticky;
top: 50px;
z-index: 2;
background-color: #ddd;
padding-top: 4px;
padding-bottom: 4px;
}
.panel-search {
background-color: #fff;
padding: 4px;
}
table.stickyheader thead {
position: sticky;
top: 50px;
z-index: 2;
}
table.stickyheader.searchopened thead {
top: 180px;
}
.input-container {
display: flex;
max-width: 100%;
overflow: hidden;
}
.input-container .prefix {
margin-right: 8px;
}
.input-container input {
flex-grow: 1;
border: none;
outline: none;
padding: 8px;
}
.input-container:focus-within {
border-color: #777;
}
/* Small */
@media (max-width:600px) {
i {
font-size: 20px;
}
fieldset {
margin-bottom: 10px;
}
#quickbox-content {
padding-top: var(--quickbox-topbar-height);
}
#message {
min-width: 100%;
margin-left: 0;
margin-right: 0;
left: 0;
}
.page-container {
padding-bottom: 100px;
}
#page-title i {
font-size: 20px;
}
#searchBar #searchText {
width: 250px;
}
#form-login {
width: 96%;
}
#searchBar {
display: none;
}
#searchSidebar {
display: block;
}
.w3-table-all.responsive table,
.w3-table-all.responsive thead,
.w3-table-all.responsive tbody,
.w3-table-all.responsive th,
.w3-table-all.responsive td,
.w3-table-all.responsive tr {
display: block;
}
.w3-table-all thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
.w3-table-all.responsive tr {
margin-bottom: 10px;
border: 1px solid #ddd;
}
.w3-table-all.responsive td {
border: none;
position: relative;
padding-left: 30%;
}
.w3-table-all.responsive td.no-label {
padding-left: 6px;
}
.w3-table-all.responsive td.title {
color: #2b5797;
font-weight: 400;
font-size: 18px;
}
.w3-table-all.responsive td:before {
position: absolute;
left: 6px;
content: attr(data-label);
font-weight: bold;
}
.w3-table-all.responsive td.no-label:before {
position: absolute;
left: 6px;
content: "";
font-weight: bold;
}
.w3-modal-full {
width: 100vw !important;
height: 100vh !important;
padding-top:0 !important;
background-color: #fff;
}
.w3-modal-full .w3-modal-content {
margin:0 !important;
}
}
@media (max-width:992px) {
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 46px;
height: 24px;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 16px;
width: 16px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked+.slider {
background-color: #2b5797;
}
input:focus+.slider {
box-shadow: 0 0 1px #2b5797;
}
input:checked+.slider:before {
-webkit-transform: translateX(22px);
-ms-transform: translateX(22px);
transform: translateX(22px);
}
/* Rounded sliders */
.slider.round {
border-radius: 24px;
}
.slider.round:before {
border-radius: 50%;
}
}
/* Medium */
@media (max-width:992px) and (min-width:601px) {
#page-title-container h5 {
padding-left: 0px;
}
}
/* Min medium */
@media (min-width:601px) {
.home-card-summary {
height: 250px;
overflow: auto;
}
#quickbox {
width: 400px;
position: fixed;
top: 50px;
left: calc(100vw - 420px);
height: calc(100vh - 50px);
background-color: #fff !important;
border-left: 2px solid #fff;
border-top: 2px solid #fff;
}
#quickbox-top-bar {
position: relative;
}
#quickbox-footer {
position: relative;
}
#quickbox-content {
height: calc(100vh - var(--quickbox-footer-height) - var(--quickbox-footer-height) - 42px);
}
}