Rebrand as Playpen.

src/style.css

@@ -1,27 +1,27 @@
 /* Zen-style vertical tabs: a dark sidebar column with the terminal inset
    to its right. */
 
-.vtabs-window {
+.playpen-window {
   background-color: #0f0d14;
 }
 
-.vtabs-sidebar {
+.playpen-sidebar {
   background-color: #1b1823;
   border-right: 1px solid #2a2536;
 }
 
-.vtabs-sidebar headerbar {
+.playpen-sidebar headerbar {
   background: none;
   box-shadow: none;
   min-height: 38px;
 }
 
-.vtabs-list {
+.playpen-list {
   background: none;
   padding: 4px 6px;
 }
 
-.vtabs-list > row {
+.playpen-list > row {
   border-radius: 8px;
   margin: 1px 0;
   padding: 5px 8px;
@@ -29,126 +29,126 @@
   transition: background-color 120ms ease;
 }
 
-.vtabs-list > row:hover {
+.playpen-list > row:hover {
   background-color: #262133;
 }
 
-.vtabs-list > row:selected {
+.playpen-list > row:selected {
   background-color: #342c4a;
   color: #f0ecf8;
 }
 
-.vtabs-list > row:selected image {
+.playpen-list > row:selected image {
   color: #b29df5;
 }
 
 /* Keep the close button unobtrusive until the row is hovered or current. */
-.vtabs-close {
+.playpen-close {
   opacity: 0;
   min-width: 20px;
   min-height: 20px;
   padding: 0;
 }
 
-.vtabs-list > row:hover .vtabs-close,
-.vtabs-list > row:selected .vtabs-close {
+.playpen-list > row:hover .playpen-close,
+.playpen-list > row:selected .playpen-close {
   opacity: 0.65;
 }
 
-.vtabs-close:hover {
+.playpen-close:hover {
   opacity: 1;
 }
 
-.vtabs-content {
+.playpen-content {
   background-color: #0f0d14;
 }
 
 /* A view is the container for one tab's terminals. */
-.vtabs-view {
+.playpen-view {
   padding: 6px 6px 6px 0;
 }
 
 /* Paned itself draws nothing; the panes inside it carry the styling. */
-.vtabs-view paned {
+.playpen-view paned {
   background: none;
 }
 
 /* Each terminal sits in its own rounded frame so multiple panes in a view
    read as distinct surfaces. */
-.vtabs-pane {
+.playpen-pane {
   background-color: #16141c;
   border-radius: 10px;
   border: 1px solid #2a2536;
 }
 
-.vtabs-pane.active {
+.playpen-pane.active {
   border-color: #5b4d80;
 }
 
-.vtabs-pane-header {
+.playpen-pane-header {
   padding: 2px 4px 2px 10px;
   background-color: #1c1926;
   border-bottom: 1px solid #262133;
 }
 
-.vtabs-pane.active .vtabs-pane-header {
+.playpen-pane.active .playpen-pane-header {
   background-color: #241f33;
 }
 
-.vtabs-pane-title {
+.playpen-pane-title {
   font-size: 0.82em;
   color: #8f87a3;
 }
 
-.vtabs-pane.active .vtabs-pane-title {
+.playpen-pane.active .playpen-pane-title {
   color: #ded7ef;
 }
 
-.vtabs-pane-button {
+.playpen-pane-button {
   min-width: 22px;
   min-height: 22px;
   padding: 0;
   opacity: 0;
 }
 
-.vtabs-pane:hover .vtabs-pane-button,
-.vtabs-pane.active .vtabs-pane-button {
+.playpen-pane:hover .playpen-pane-button,
+.playpen-pane.active .playpen-pane-button {
   opacity: 0.55;
 }
 
-.vtabs-pane-button:hover {
+.playpen-pane-button:hover {
   opacity: 1;
 }
 
-.vtabs-pane-icon {
+.playpen-pane-icon {
   color: #6f6784;
   -gtk-icon-size: 14px;
 }
 
-.vtabs-pane.active .vtabs-pane-icon {
+.playpen-pane.active .playpen-pane-icon {
   color: #b29df5;
 }
 
 /* A web pane's navigation bar, below the pane header. Kept visually quieter
    than the header so the two rows don't compete. */
-.vtabs-nav {
+.playpen-nav {
   padding: 4px 6px;
   background-color: #16141c;
   border-bottom: 1px solid #262133;
 }
 
-.vtabs-nav-button {
+.playpen-nav-button {
   min-width: 24px;
   min-height: 24px;
   padding: 0;
   color: #b6afc7;
 }
 
-.vtabs-nav-button:disabled {
+.playpen-nav-button:disabled {
   opacity: 0.3;
 }
 
-.vtabs-nav-entry {
+.playpen-nav-entry {
   min-height: 24px;
   margin-left: 4px;
   padding: 2px 8px;
@@ -160,85 +160,85 @@
   box-shadow: none;
 }
 
-.vtabs-nav-entry:focus-within {
+.playpen-nav-entry:focus-within {
   border-color: #5b4d80;
 }
 
 /* The pane being dragged. There is no separate drop indicator: the layout
    rearranges live during the drag, so the view itself is the preview. */
-.vtabs-pane.dragging {
+.playpen-pane.dragging {
   opacity: 0.65;
   border-color: #b29df5;
 }
 
 /* Saved-layout menu, hanging off the sidebar header. */
-.vtabs-layout-menu {
+.playpen-layout-menu {
   min-width: 260px;
 }
 
-.vtabs-layout-menu button {
+.playpen-layout-menu button {
   padding: 4px 8px;
   border-radius: 6px;
 }
 
-.vtabs-layout-empty {
+.playpen-layout-empty {
   padding: 8px;
   color: #8f87a3;
   font-size: 0.9em;
 }
 
 /* Layout dialogs: opening one, and saving the current tab as one. */
-.vtabs-dialog {
+.playpen-dialog {
   background-color: #16141c;
 }
 
-.vtabs-dialog-content {
+.playpen-dialog-content {
   padding: 16px;
 }
 
-.vtabs-dialog-actions {
+.playpen-dialog-actions {
   padding: 12px 16px;
   border-top: 1px solid #262133;
 }
 
-.vtabs-dialog-heading {
+.playpen-dialog-heading {
   margin-top: 8px;
   font-weight: bold;
   color: #ded7ef;
 }
 
-.vtabs-dialog-label {
+.playpen-dialog-label {
   color: #b6afc7;
 }
 
-.vtabs-dialog-sublabel {
+.playpen-dialog-sublabel {
   font-size: 0.88em;
   color: #8f87a3;
 }
 
-.vtabs-dialog-hint {
+.playpen-dialog-hint {
   font-size: 0.85em;
   color: #8f87a3;
 }
 
-.vtabs-dialog-error {
+.playpen-dialog-error {
   color: #f2a0a0;
 }
 
 /* Each captured pane in the save dialog, so the sections read apart. */
-.vtabs-dialog-pane {
+.playpen-dialog-pane {
   padding: 8px;
   border: 1px solid #2a2536;
   border-radius: 8px;
 }
 
 /* Divider between panes. Wide enough to grab without hunting for it. */
-.vtabs-view paned > separator {
+.playpen-view paned > separator {
   background-color: #0f0d14;
   min-width: 6px;
   min-height: 6px;
 }
 
-.vtabs-view paned > separator:hover {
+.playpen-view paned > separator:hover {
   background-color: #4a3f6b;
 }