First commit
This commit is contained in:
Nathan
@@ -0,0 +1,291 @@
|
||||
#addLinkedAlbum {
|
||||
display:none;
|
||||
}
|
||||
|
||||
.linkedAlbumPopIn {
|
||||
position: fixed;
|
||||
z-index: 102;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
background-color: rgba(0,0,0,0.7);
|
||||
}
|
||||
|
||||
.linkedAlbumPopInContainer {
|
||||
display:flex;
|
||||
position:absolute;
|
||||
left:50%;
|
||||
top: 50%;
|
||||
transform:translate(-50%, -48%);
|
||||
text-align:left;
|
||||
padding:20px;
|
||||
flex-direction:column;
|
||||
border-radius:15px;
|
||||
align-items:center;
|
||||
width: 460px;
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
.linkedAlbumPopInContainer.big {
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
.ClosePopIn {
|
||||
position: absolute;
|
||||
right: -40px;
|
||||
top: -40px;
|
||||
font-size: 30px;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
.ClosePopIn:hover {
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.linkedAlbumPopInContainer .AddIconContainer {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.linkedAlbumPopInContainer .AddIcon {
|
||||
border-radius: 9999px;
|
||||
padding: 10px;
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.linkedAlbumPopInContainer .AddIconTitle {
|
||||
font-size: 1.4em;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
#linkedAlbumSearch .search-icon {
|
||||
position: absolute;
|
||||
transform: translate(7px, 8px);
|
||||
font-size: 18px;
|
||||
top: auto;
|
||||
}
|
||||
|
||||
.search-cancel-linked-album {
|
||||
opacity: 0.4;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
font-size: 18px;
|
||||
transform: translate(215px, 8px);
|
||||
}
|
||||
|
||||
.search-cancel-linked-album:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.linkedAlbumPopInContainer .searching {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.linkedAlbumPopInContainer #searchResult {
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
max-height: 400px;
|
||||
margin: 10px 0 0 0;
|
||||
}
|
||||
|
||||
.put-to-root {
|
||||
width: 220px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.put-to-root p {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Prefill */
|
||||
.display-subcat {
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
.display-subcat:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.display-subcat::before {
|
||||
transition: 0.5s;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.display-subcat.open::before {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.search-result-item {
|
||||
margin: 10px 0px;
|
||||
padding: 5px 10px;
|
||||
height: 25px;
|
||||
border-radius: 5px;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.search-result-item .item-add {
|
||||
margin-left: auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.notClickable {
|
||||
opacity: 0.3;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.notClickable:hover {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.search-result-item.already-in {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.prefill-results-item {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.search-result-path {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 350px;
|
||||
direction: rtl;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.search-result-path.not-rtl {
|
||||
direction: ltr !important;
|
||||
text-overflow: unset !important;
|
||||
}
|
||||
|
||||
.search-result-path-name {
|
||||
unicode-bidi: plaintext;
|
||||
}
|
||||
|
||||
.search-result-subcat-item {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.and-more{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Album selector View */
|
||||
.album-create {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.album-selector,
|
||||
.album-create {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.linked-album-subtitle {
|
||||
margin: 0 0 30px 0;
|
||||
}
|
||||
|
||||
.linked-album-subtitle p {
|
||||
margin: 0;
|
||||
font-style: italic;
|
||||
font-weight: 700;
|
||||
color: #AAAAAA;
|
||||
}
|
||||
|
||||
.linked-add-album {
|
||||
display: none;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.album-switch-bottom {
|
||||
width: 100%;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.album-switch-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 5px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.switch-input {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.linked-album-input-container {
|
||||
width: 100%;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.linked-album-input-container.album-name {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.linked-album-input-container .user-property-input,
|
||||
.linked-add-radio-input {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.linked-add-radio-input {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.linked-add-radio-input input {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.linked-add-radio-input label {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.linked-album-create-btn {
|
||||
display: flex;
|
||||
margin-top: auto;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.linked-album-create-btn p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.linked-button-cancel {
|
||||
cursor: pointer;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.linked-button-cancel:hover {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.AddAlbumErrors {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
#linkedAddAlbumErrors {
|
||||
margin: 0;
|
||||
text-align: start;
|
||||
padding: 10px;
|
||||
}
|
||||
@@ -0,0 +1,331 @@
|
||||
/* -------------
|
||||
Head Buttons
|
||||
-------------
|
||||
|
||||
.head-button-1
|
||||
|
||||
or
|
||||
|
||||
.head-button-2
|
||||
|
||||
*/
|
||||
|
||||
.head-button-1, .head-button-2 {
|
||||
position: relative;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
cursor: pointer;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.head-button-1:active, .head-button-2:active {
|
||||
box-shadow: none;
|
||||
transform: translateY(2px);
|
||||
}
|
||||
|
||||
.head-button-1 {
|
||||
color: white;
|
||||
background: #ffa646;
|
||||
box-shadow: 0px 2px #bb7932;
|
||||
}
|
||||
|
||||
.head-button-1 p, .head-button-2 p {
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.head-button-1:hover {
|
||||
background: #ff7700;
|
||||
text-decoration: none !important;
|
||||
color: white;
|
||||
transition: all 125ms ease-out;
|
||||
}
|
||||
|
||||
.head-button-2 {
|
||||
background: #fafafa;
|
||||
box-shadow: 0px 2px #00000024;
|
||||
}
|
||||
|
||||
.head-button-2:hover {
|
||||
text-decoration: none !important;
|
||||
color: inherit !important;
|
||||
}
|
||||
|
||||
/* -------------
|
||||
Advanced filter
|
||||
-------------
|
||||
|
||||
.advanced-filter-btn.icon-filter(.advanced-filter-open)
|
||||
...
|
||||
.advanced-filter(.advanced-filter-open)
|
||||
.advanced-filter-header
|
||||
.advanced-filter-title
|
||||
.advanced-filter-close.icon-cancel
|
||||
.advanced-filter-container
|
||||
.advanced-filter-item
|
||||
.advanced-filter-item-label
|
||||
.advanced-filter-item-container
|
||||
// Put here your filter
|
||||
...
|
||||
*/
|
||||
|
||||
.advanced-filter-btn {
|
||||
width: 70px;
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
background-color: #F3F3F3;
|
||||
}
|
||||
|
||||
.advanced-filter-btn::before { /* Change icon size */
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.advanced-filter-btn.advanced-filter-open::after {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 16px;
|
||||
background-color: inherit;
|
||||
bottom: -16px;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.advanced-filter {
|
||||
display: none;
|
||||
padding: 15px;
|
||||
font-size: 1em;
|
||||
flex-direction: column;
|
||||
|
||||
background-color: #F3F3F3;
|
||||
}
|
||||
|
||||
.advanced-filter.advanced-filter-open {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.advanced-filter-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.advanced-filter-title {
|
||||
font-weight: bold;
|
||||
|
||||
color: #3e3e3e;
|
||||
}
|
||||
|
||||
.advanced-filter-close {
|
||||
font-size: 1.8em;
|
||||
color: #C5C5C5;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.advanced-filter-close:hover {
|
||||
color: #ff7700;
|
||||
}
|
||||
|
||||
.advanced-filter-container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.advanced-filter-item:not(:last-child) {
|
||||
margin-right: 30px;
|
||||
}
|
||||
|
||||
.advanced-filter-item-label {
|
||||
text-align: left;
|
||||
display: flex;
|
||||
margin-bottom: 5px;
|
||||
|
||||
color:#3e3e3e;
|
||||
}
|
||||
|
||||
.advanced-filter-item-container {
|
||||
position: relative;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Set Margin if the last element is a slider */
|
||||
.advanced-filter-item:last-child .advanced-filter-item-container .slider-bar-wrapper {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
/* -------------
|
||||
Advanced filter Select
|
||||
-------------
|
||||
|
||||
.advanced-filter-select-container
|
||||
select.advanced-filter-select
|
||||
|
||||
or (generated by selectize.js)
|
||||
|
||||
.advanced-filter-item-container
|
||||
.selectize-control
|
||||
.selectize-input
|
||||
*/
|
||||
|
||||
.user-action-select-container::before, .advanced-filter-select-container::before {
|
||||
content: '\e835'; font-size: 14px; position: absolute; font-family: "fontello"; color: #6E6E6E; pointer-events: none;
|
||||
}
|
||||
|
||||
.advanced-filter-select-container::before {
|
||||
top: 8px; right:10px
|
||||
}
|
||||
|
||||
.advanced-filter-select {
|
||||
display: block;
|
||||
border: solid 1px #D4D4D4;
|
||||
padding: 8px 10px;
|
||||
height: 34px;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.advanced-filter-item-container .selectize-control .selectize-input {
|
||||
border: solid 1px #D4D4D4 !important;
|
||||
padding: 8px 10px !important;
|
||||
height: 34px;
|
||||
background: white !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.advanced-filter-item-container .selectize-control .selectize-input .item {
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
||||
/* -------------
|
||||
Info Framed
|
||||
-------------
|
||||
|
||||
.info-framed
|
||||
.info-framed-icon
|
||||
i or img
|
||||
.info-framed-container
|
||||
.info-framed-title
|
||||
div
|
||||
div
|
||||
...
|
||||
|
||||
*/
|
||||
|
||||
.info-framed {
|
||||
display: flex;
|
||||
border: #EEE solid 2px;
|
||||
padding: 20px;
|
||||
border-radius: 5px;
|
||||
margin: 0px 10px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
a.info-framed:hover {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.info-framed-icon {
|
||||
font-size: 34px;
|
||||
margin-right: 20px;
|
||||
display: flex;
|
||||
color: #3c3c3c;
|
||||
}
|
||||
|
||||
.info-framed-icon i {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.info-framed-container {
|
||||
margin: 0;
|
||||
display: inline-table;
|
||||
}
|
||||
|
||||
.info-framed-container > * {
|
||||
margin: 0;
|
||||
word-wrap: anywhere;
|
||||
}
|
||||
|
||||
.info-framed-title {
|
||||
color: #3c3c3c;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* -------------
|
||||
Info
|
||||
-------------
|
||||
|
||||
.info-message.icon-*, .info-warning.icon-*, .info-error.icon-*
|
||||
p
|
||||
(a)
|
||||
|
||||
*/
|
||||
|
||||
.info-message, .info-warning, .info-error {
|
||||
height: 35px;
|
||||
overflow: hidden;
|
||||
border-radius: 20px;
|
||||
display: flex;
|
||||
padding: 0px 10px 0px 0px;
|
||||
font-weight: bold;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.info.hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.info-message p, .info-warning p, .info-error p {
|
||||
margin: auto;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
text-align: initial;
|
||||
}
|
||||
|
||||
.info-message::before, .info-warning::before, .info-error::before {
|
||||
line-height: 35px;
|
||||
margin: 0px 10px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.info-warning {
|
||||
color: #ee8800;
|
||||
background-color:#ffdd99;
|
||||
}
|
||||
|
||||
.info-message {
|
||||
display: none;
|
||||
background-color: #c2f5c2;
|
||||
color: #0a0;
|
||||
}
|
||||
|
||||
.info-error {
|
||||
color: #f22;
|
||||
background-color: #ffd5dc;
|
||||
display: none;
|
||||
animation-name: info-error-appear ;
|
||||
animation-duration: 0.4s;
|
||||
animation-timing-function: ease;
|
||||
}
|
||||
|
||||
.info-message a:hover, .info-warning a:hover, .info-error a:hover {
|
||||
color: white;
|
||||
}
|
||||
|
||||
@keyframes info-error-appear {
|
||||
25% { transform: translateX(-10px)}
|
||||
50% { transform: translateX(10px)}
|
||||
75% { transform: translateX(-10px)}
|
||||
100% { transform: translateX(0px)}
|
||||
}
|
||||
|
||||
.tree .badge-container i.icon-imagefolder-01.nb-sub-photos:before{
|
||||
margin-right:0.5em!important;
|
||||
}
|
||||
Reference in New Issue
Block a user