Separate style and script about bigpicture

[henrygd]

Hi Jim,

You should be able to override the style with your own CSS.

Like if you wanted a blue close button for captions you could do

#bp_caption .bp-x {
  background: #4083d7!important;
}

Is there something in particular you're having trouble with?

[jimblue]

@henrygd it's not a trouble but more giving flexibility to adapt the style to different design.
It's only about background color...

[henrygd]

I'd like to leave it as is because I think part of the appeal is that it's an easy one file drop in solution.

But here's the scss if you want it. You can delete lines 156-158 in the script if you use this directly.

#bp_caption {
  bottom: 0;
  left: 0;
  right: 0;
  position: fixed;
  opacity: 0;
}

#bp_container {
  bottom: 0;
  left: 0;
  right: 0;
  position: fixed;
  opacity: 0;
  > * {
    position: absolute;
    right: 0;
  }
}

.bp-x, #bp_loader {
  position: absolute;
  right: 0;
}

#bp_container {
  top: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.7);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s;
}

#bp_loader {
  top: 0;
  left: 0;
  bottom: 0;
  display: -webkit-flex;
  display: flex;
  margin: 0;
  cursor: wait;
  z-index: 9;
  svg {
    width: 40%;
    max-height: 40%;
    margin: auto;
    -webkit-animation: ldr .7s infinite linear;
    animation: -webkit-ldr .7s infinite linear;
    animation: ldr .7s infinite linear;
  }
}

@-webkit-keyframes ldr {
  to {
    -webkit-transform: rotate(1turn);
    transform: -webkit-rotate(1turn);
    transform: rotate(1turn);
  }
}


@keyframes ldr {
  to {
    -webkit-transform: rotate(1turn);
    transform: -webkit-rotate(1turn);
    transform: rotate(1turn);
  }
}


#bp_container img, #bp_sv, #bp_vid {
  max-height: 96%;
  max-width: 96%;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  box-shadow: 0 0 3em rgba(0, 0, 0, 0.4);
  z-index: -1;
}

#bp_sv {
  width: 171vh;
}

#bp_caption {
  font-size: .9em;
  padding: 1.3em;
  background: rgba(15, 15, 15, 0.94);
  color: #fff;
  text-align: center;
  transition: opacity .3s;
}

.bp-x {
  font-family: Arial;
  top: 0;
  cursor: pointer;
  opacity: .8;
  font-size: 3em;
  padding: 0 .3em;
  color: #fff;
  background: transparent;
  border: 0;
  text-shadow: 0 0 2px #000;
}

#bp_caption .bp-x {
  left: 2%;
  top: auto;
  right: auto;
  bottom: 100%;
  padding: 0 .6em;
  background: #d74040;
  border-radius: 2px 2px 0 0;
  font-size: 2.3em;
  text-shadow: none;
}

.bp-x {
  &:hover, &:focus {
    opacity: 1;
  }
  &:active {
    outline: 0;
  }
}

@media (max-aspect-ratio: 9 / 5) {
  #bp_sv {
    height: 53vw;
  }
}

[jimblue]

Not good solution for long term use (updating will be a pain in the ass)

What you could do is separate style and js and put them in a source folder while compile version will stay in dist folder.

That way you'll keep thing simple as you like while offering a possibility of customisation.

What do you think ? 😄

[henrygd]

That's a good suggestion, but everything is so simple that I don't know if it's really needed. Not many people are going to change the style and those that do are only going to be concerned with a few lines. Using !important seems like a reasonable solution to me.

[jimblue]

Nah! !important is the worst... But no worries I understand your point 😄