479 lines
12 KiB
SCSS
479 lines
12 KiB
SCSS
|
|
$break_phones: 900px;
|
|
$break_ss_screen: 1080px;
|
|
$break_s_screen: 1400px;
|
|
|
|
.marketplace {
|
|
$left_width: 150px;
|
|
text-align: left;
|
|
display: flex;
|
|
background-color: #EEE;
|
|
padding: 10px;
|
|
margin: 0 -10px;
|
|
|
|
@media screen and (max-width: $break_phones) {
|
|
display: block;
|
|
}
|
|
|
|
.left-panel {
|
|
width: $left_width;
|
|
|
|
@media screen and (max-width: $break_phones) {
|
|
width: initial;
|
|
}
|
|
|
|
.plugins-tags {
|
|
vertical-align: top;
|
|
display: inline-block;
|
|
width: 100%;
|
|
font-size: 1.1em;
|
|
|
|
@media screen and (max-width: $break_phones) {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin: 0 0 10px 10px;
|
|
}
|
|
|
|
.tag {
|
|
background: #FFF;
|
|
border-radius: 3px;
|
|
border: 1px solid #dddddd;
|
|
padding: 5px;
|
|
margin: 0 3px 3px 0;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
background: #d1d1d1;
|
|
}
|
|
|
|
&.active {
|
|
background: #747474;
|
|
color: #FFF;
|
|
border-color: transparent;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.right-panel {
|
|
padding-left: 5px;
|
|
width: 100%;
|
|
|
|
.left-panel+& {
|
|
width: calc(100% - #{$left_width});
|
|
}
|
|
|
|
.top-panel {
|
|
display: flex;
|
|
|
|
.filter-list {
|
|
flex: 1;
|
|
margin: 0 8px 5px 5px;
|
|
height: 25px;
|
|
}
|
|
|
|
.controls {
|
|
width: 170px;
|
|
|
|
.select2 {
|
|
.select2-selection.select2-selection--single {
|
|
height: 25px;
|
|
text-overflow: clip;
|
|
text-overflow: unset;
|
|
padding-left: 0;
|
|
}
|
|
.select2-selection.select2-selection--single:before {
|
|
content: '';
|
|
}
|
|
}
|
|
|
|
i {
|
|
vertical-align: middle;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
|
|
.plugins {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
position: relative;
|
|
|
|
@media screen and (max-width: $break_phones) {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.loading-plugins {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
-webkit-backdrop-filter: blur(2px);
|
|
backdrop-filter: blur(2px);
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
|
|
i.fas {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: calc(50% - 1.5rem);
|
|
color: white;
|
|
font-size: 3rem;
|
|
}
|
|
}
|
|
|
|
.plugin {
|
|
$margin_width: 10px;
|
|
width: calc(25% - #{$margin_width}); //minus margin
|
|
margin: calc(#{$margin_width} / 2);
|
|
margin-bottom: 10px;
|
|
border-radius: 3px;
|
|
background-color: #FFF;
|
|
border: 1px solid #c2c2c2;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
justify-content: space-between;
|
|
box-sizing: border-box;
|
|
|
|
@media screen and (max-width: $break_s_screen) {
|
|
width: calc(33% - #{$margin_width});
|
|
}
|
|
|
|
@media screen and (max-width: $break_ss_screen) {
|
|
width: calc(50% - #{$margin_width});
|
|
}
|
|
|
|
@media screen and (max-width: $break_phones) {
|
|
width: calc(100% - #{$margin_width});
|
|
}
|
|
|
|
.main {
|
|
display: flex;
|
|
padding-bottom: 5px;
|
|
|
|
.icon {
|
|
flex-shrink: 0;
|
|
padding: 5px;
|
|
width: 70px;
|
|
|
|
img {
|
|
object-fit: contain;
|
|
max-width: 50px;
|
|
max-height: 50px;
|
|
margin: 2px 10px;
|
|
}
|
|
|
|
.icon-text {
|
|
display: block;
|
|
margin-top: 2px;
|
|
text-align: center;
|
|
width: 50px;
|
|
height: 50px;
|
|
line-height: 50px;
|
|
font-size: 1.4em;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
margin: 2px 10px;
|
|
}
|
|
}
|
|
|
|
.details {
|
|
padding: 5px 10px;
|
|
|
|
.title {
|
|
margin: 2px 0 5px;
|
|
font-size: 1.25em;
|
|
}
|
|
|
|
.offers {
|
|
.badge {
|
|
margin: 1px;
|
|
padding: 2px 5px;
|
|
border-radius: 3px;
|
|
background-color: #d1d1d1;
|
|
border: 1px solid #5a5a5a;
|
|
color: #202020;
|
|
font-weight: bold;
|
|
|
|
&.glpi-network {
|
|
background-color: #ffd45f;
|
|
color: #352804;
|
|
border-color: #c69100;
|
|
}
|
|
|
|
i {
|
|
font-size: 10px;
|
|
margin: 1px 3px 0 0;
|
|
vertical-align: top;
|
|
color: rgba(0, 0, 0, .5);
|
|
}
|
|
}
|
|
}
|
|
|
|
.description {
|
|
margin: 5px 0;
|
|
}
|
|
}
|
|
|
|
.buttons {
|
|
width: 25px;
|
|
padding: 5px;
|
|
margin-left: auto;
|
|
|
|
button {
|
|
background-color: #FAFAFA;
|
|
border: 1px solid #dddddd;
|
|
cursor: pointer;
|
|
width: 25px;
|
|
padding: 3px 5px;
|
|
margin: 1px;
|
|
|
|
&:hover {
|
|
background-color: #dddddd;
|
|
}
|
|
|
|
i {
|
|
color: #666;
|
|
}
|
|
|
|
&[data-action="disable_plugin"] {
|
|
i {
|
|
color: #6ebb43;
|
|
}
|
|
}
|
|
|
|
&[data-action="download_plugin"]:hover,
|
|
&[data-action="install_plugin"]:hover,
|
|
&[data-action="enable_plugin"]:hover {
|
|
background-color: rgb(226, 247, 226);
|
|
border-color: rgb(91, 150, 91);
|
|
i {
|
|
color: rgb(74, 121, 74);
|
|
}
|
|
}
|
|
|
|
&[data-action="uninstall_plugin"]:hover,
|
|
&[data-action="disable_plugin"]:hover {
|
|
background-color: rgb(245, 199, 199);
|
|
border-color: rgb(190, 83, 83);
|
|
i {
|
|
color: rgb(105, 60, 60);
|
|
}
|
|
}
|
|
|
|
&.download_manually,
|
|
&.need_offers {
|
|
background-color: rgb(253, 240, 215);
|
|
border-color: rgb(221, 188, 125);
|
|
i {
|
|
color: #8f5a0a;
|
|
}
|
|
|
|
&:hover {
|
|
background-color: rgb(253, 227, 179);
|
|
border-color: rgb(97, 82, 54);
|
|
|
|
i {
|
|
color: rgb(97, 82, 54);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
progress {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
border: none;
|
|
width: 25px;
|
|
height: 5px;
|
|
|
|
&::-webkit-progress-bar {
|
|
background: transparent;
|
|
border: 1px solid #c2c2c2;
|
|
}
|
|
}
|
|
|
|
.plugin-error {
|
|
color: red;
|
|
margin: 1px;
|
|
padding: 3px 5px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.footer {
|
|
background-color: #FAFAFA;
|
|
border-top: 1px solid rgb(221, 221, 221);
|
|
display: flex;
|
|
align-items: stretch;
|
|
justify-content: space-between;
|
|
padding: 5px;
|
|
color: #666;
|
|
|
|
.misc-left {
|
|
.note {
|
|
width: 85px;
|
|
|
|
i.fas, i.far {
|
|
color: #ffbb00;
|
|
}
|
|
}
|
|
|
|
.links {
|
|
a {
|
|
i {
|
|
color: #999;
|
|
|
|
&:hover {
|
|
color: #000;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.misc-right {
|
|
width: calc(100% - 85px);
|
|
text-align: left;
|
|
|
|
i {
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.authors {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.misc-right {
|
|
i {
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.authors {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.license, .authors {
|
|
a {
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.pagination {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
|
|
li {
|
|
padding: 8px 16px;
|
|
transition: background-color .1s;
|
|
border: 1px solid #c2c2c2;
|
|
background-color: white;
|
|
|
|
&.current {
|
|
background-color: #979797;
|
|
border-color: #979797;
|
|
color: white;
|
|
font-weight: bold;
|
|
|
|
& + li {
|
|
border-left-width: 0;
|
|
}
|
|
}
|
|
|
|
&.nav-disabled {
|
|
color: #c2c2c2;
|
|
}
|
|
|
|
&.nb_plugin {
|
|
border: none;
|
|
background-color: transparent;
|
|
}
|
|
|
|
&.dots {
|
|
padding: 8px 10px;
|
|
}
|
|
|
|
&:not(.current):not(.nb_plugin):not(.nav-disabled):hover {
|
|
background-color: #ddd;
|
|
cursor: pointer;
|
|
}
|
|
|
|
&:first-child {
|
|
border-top-left-radius: 3px;
|
|
border-bottom-left-radius: 3px;
|
|
}
|
|
|
|
&:last-child {
|
|
border-top-right-radius: 3px;
|
|
border-bottom-right-radius: 3px;
|
|
}
|
|
|
|
&:not(:first-child) {
|
|
border-left-width: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.network-mail {
|
|
display: inline-block;
|
|
margin: 20px 10px;
|
|
}
|
|
}
|
|
|
|
&.installed {
|
|
.plugins {
|
|
.plugin {
|
|
min-height: 84px;
|
|
margin-bottom: 5px;
|
|
|
|
.main {
|
|
height: 100%;
|
|
|
|
.details {
|
|
flex: 1;
|
|
border-right: 1px solid #DDD;
|
|
padding: 5px 0 0 10px;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
|
|
.misc-right {
|
|
color: #8f8f8f;
|
|
}
|
|
}
|
|
|
|
.buttons {
|
|
width: 26px;
|
|
padding: 4px 5px;
|
|
}
|
|
}
|
|
|
|
.footer {
|
|
background: none;
|
|
border: none;
|
|
margin: -25px 36px 0 0;
|
|
|
|
.misc-left {
|
|
margin-left: 15px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|