There may already be a CSS class that gets added when a panel is in "Editing" state; if not this would be pretty easy to add. I'm curious if there are any WMF conventions for how to name these kinds of classes – BEM style, is-editing, panel--is-editing, etc. At a previous job we leaned heavily on a modified BEM style that worked like this (we used SASS but I think things would be similar in LESS):

.my-component {
  background-color: rebeccapurple;

  &__some-child-element {
    font-weight: bold;
  }

  &.is-active {
    border: solid 1px #000;
  }
}

Child element classes for a given component would come out with the lowest specificity possible (.my-component__some-child-element as a single rule); the modifier rule would have an additional level of specificity because it might need to override something else: .my-component.is-active.

Regardless of the conventions we are using, this is a pretty quick change to implement.

Got this working locally – here are some screengrabs. It is pretty subtle. I tried to upload a .mov clip but Phabricator doesn't allow that apparently.

Nothing editable:

Captions editable:

Depicts editable:

On a related note, is anyone else bothered by the way that the captions button "jumps" from the top right of the panel when you click "Edit", to the lower right of the panel when it is in edit mode? The Depicts button stays in the same place as it toggles between "Edit" and "Publish", which I consider to be a more intuitive behavior.

I'll submit a patch shortly, and then maybe someone can put this up on labs for visual review.

Change 493344 had a related patch set uploaded (by Eric Gardner; owner: Eric Gardner):
[mediawiki/extensions/WikibaseMediaInfo@master] Add a visual indicator to Captions/Depicts panels when in edit mode

https://gerrit.wikimedia.org/r/493344

I like the change., thanks for the screenshots.

Yes, it's bothered me for some time that Captions & Depicts publish buttons aren't consistent. I'd like them to be the same (and prefer the Depicts version).

Change 493344 merged by jenkins-bot:
[mediawiki/extensions/WikibaseMediaInfo@master] Add a visual indicator to Captions/Depicts panels when in edit mode

https://gerrit.wikimedia.org/r/493344

Patch merged (and pulled onto labs)

@PDrouin-WMF can you submit a ticket to make those buttons consistent? :)

Tested on labs, works but is very subtle. Perhaps too subtle, but far from a major concern right now :)

@Ramsey-WMF I'm okay with erring on the side of subtle for now. Happy to re-open down the road if we decide we want to change the visuals – it will now just be a matter of changing that CSS rule since the JS is in place.