mirror of
https://github.com/BobbyWibowo/lolisafe.git
synced 2024-12-13 16:06:21 +00:00
b77d4b7c65
Make ellipsis in pagination clickable. It will set focus to the jump to page input, and "select" its value. Allowing user to simply type in any numbers and press Enter to navigate. Bumped v1 version string.
256 lines
4.4 KiB
CSS
256 lines
4.4 KiB
CSS
body {
|
|
-webkit-animation: none;
|
|
animation: none;
|
|
}
|
|
|
|
#auth,
|
|
#dashboard {
|
|
display: none;
|
|
-webkit-animation: fadeInOpacity .5s;
|
|
animation: fadeInOpacity .5s;
|
|
}
|
|
|
|
.section {
|
|
background: none;
|
|
}
|
|
|
|
.menu-list a {
|
|
color: #3794d2;
|
|
-webkit-touch-callout: none;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
.menu-list a:hover {
|
|
color: #60a8dc;
|
|
background-color: #4d4d4d;
|
|
}
|
|
|
|
.menu-list a.is-active {
|
|
color: #eff0f1;
|
|
background-color: #3794d2;
|
|
}
|
|
|
|
.menu-list a[disabled] {
|
|
color: #7a7a7a;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.menu-list a[disabled]:hover {
|
|
background: none;
|
|
}
|
|
|
|
ul#albumsContainer {
|
|
border-left: 0;
|
|
padding-left: 0;
|
|
}
|
|
|
|
ul#albumsContainer li {
|
|
border-left: 1px solid #898b8d;
|
|
padding-left: .75em;
|
|
-webkit-animation: fadeInOpacity .5s;
|
|
animation: fadeInOpacity .5s;
|
|
}
|
|
|
|
#page.fade-in {
|
|
-webkit-animation: fadeInOpacity .5s;
|
|
animation: fadeInOpacity .5s
|
|
}
|
|
|
|
.pagination a:not([disabled]) {
|
|
color: #eff0f1;
|
|
border-color: #4d4d4d;
|
|
background-color: #31363b;
|
|
}
|
|
|
|
a.pagination-link:not(.is-current):hover,
|
|
a.pagination-next:not([disabled]):hover,
|
|
a.pagination-previous:not([disabled]):hover {
|
|
color: #eff0f1;
|
|
border-color: #60a8dc;
|
|
background-color: #31363b;
|
|
}
|
|
|
|
a.pagination-link.is-current {
|
|
background-color: #3794d2;
|
|
border-color: #3794d2;
|
|
}
|
|
|
|
a.pagination-link.is-current:hover {
|
|
border-color: #60a8dc;
|
|
}
|
|
|
|
li[data-action="page-ellipsis"] {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.label {
|
|
color: #bdc3c7;
|
|
}
|
|
|
|
.menu-list li ul {
|
|
border-left-color: #898b8d;
|
|
}
|
|
|
|
.image-container {
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
width: 200px;
|
|
height: 200px;
|
|
margin: 9px;
|
|
background-color: #31363b;
|
|
overflow: hidden;
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
position: relative;
|
|
-webkit-box-shadow: 0 20px 60px rgba(10, 10, 10, 0.05), 0 5px 10px rgba(10, 10, 10, 0.1), 0 1px 1px rgba(10, 10, 10, 0.2);
|
|
box-shadow: 0 20px 60px rgba(10, 10, 10, 0.05), 0 5px 10px rgba(10, 10, 10, 0.1), 0 1px 1px rgba(10, 10, 10, 0.2);
|
|
}
|
|
|
|
.image-container .title {
|
|
font-weight: normal;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.image-container .image {
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
height: 100%;
|
|
width: 100%;
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
-webkit-box-pack: center;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.image-container .image img {
|
|
max-height: 100%;
|
|
max-width: 100%;
|
|
height: auto;
|
|
width: auto;
|
|
}
|
|
|
|
.image-container .checkbox {
|
|
position: absolute;
|
|
top: .75rem;
|
|
left: .75rem;
|
|
}
|
|
|
|
.image-container .controls {
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
position: absolute;
|
|
top: .75rem;
|
|
right: .75rem;
|
|
}
|
|
|
|
.image-container .controls .button {
|
|
border-radius: 0;
|
|
}
|
|
|
|
.image-container .controls .button:not(:active):not(:hover) {
|
|
color: #fff;
|
|
background-color: rgba(49, 54, 59, .75);
|
|
}
|
|
|
|
.image-container .details {
|
|
position: absolute;
|
|
left: .75rem;
|
|
bottom: .75rem;
|
|
right: .75rem;
|
|
background-color: rgba(49, 54, 59, .75);
|
|
color: #eff0f1;
|
|
padding: .25rem;
|
|
font-size: .75rem;
|
|
}
|
|
|
|
.image-container .details p {
|
|
display: block;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.image-container .details p span {
|
|
font-weight: 800;
|
|
}
|
|
|
|
/* Make extra info appear on hover only on non-touch devices */
|
|
|
|
.no-touch .image-container .checkbox {
|
|
opacity: .5;
|
|
-webkit-transition: opacity .25s;
|
|
transition: opacity .25s;
|
|
}
|
|
|
|
.no-touch .image-container .controls,
|
|
.no-touch .image-container .details {
|
|
opacity: 0;
|
|
-webkit-transition: opacity .25s;
|
|
transition: opacity .25s;
|
|
}
|
|
|
|
.no-touch .image-container:hover .checkbox,
|
|
.no-touch .image-container:hover .controls,
|
|
.no-touch .image-container:hover .details {
|
|
opacity: 1;
|
|
}
|
|
|
|
#page {
|
|
/* fix overflow issue with flex */
|
|
min-width: 0;
|
|
}
|
|
|
|
.table-container {
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.table {
|
|
color: #bdc3c7;
|
|
background-color: #31363b;
|
|
font-size: .75rem;
|
|
}
|
|
|
|
.table tr:hover,
|
|
.table.is-striped tbody tr:nth-child(2n) {
|
|
background: none;
|
|
}
|
|
|
|
.table.is-striped tbody tr:hover,
|
|
.table.is-striped tbody tr:nth-child(2n):hover,
|
|
.tag {
|
|
background-color: #4d4d4d;
|
|
}
|
|
|
|
.table thead td,
|
|
.table thead th {
|
|
color: #eff0f1;
|
|
background-color: #ff3860;
|
|
}
|
|
|
|
.table td,
|
|
.table th {
|
|
border: 0;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.table th {
|
|
color: #eff0f1;
|
|
height: 2.25em;
|
|
}
|
|
|
|
.table .cell-indent {
|
|
padding-left: 2.25em;
|
|
}
|
|
|
|
.is-linethrough {
|
|
text-decoration: line-through
|
|
}
|