p5.js-web-editor/client/styles/components/_toolbar.scss

.toolbar__play-button {
	&--unsaved, &--clone {
		// for some reason, I cannot manage to have PreviewFrame save _and_ actuall yload the project (it stops the playback)
		// pressing twice works. So just show a floppy the first time around :-)
		svg {
			display: none;
		}
		&::after{
			content: '\1F4BE'; // save floppy
		}
		// background-color: blue !important;
	}

	@include themify() {
		@extend %toolbar-button;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 0 0 #{3 / $base-font-size}rem;
		&--selected {
			@extend %toolbar-button--selected;
		}
		&:disabled {
			cursor: auto;
			& g, & path {
				fill: getThemifyVariable('button-border-color');
			}
			&:hover {
				background-color: getThemifyVariable('toolbar-button-background-color');
				& g, & path {
					fill: getThemifyVariable('button-border-color');
				}
			}
	    }
	}
	margin-right: #{15 / $base-font-size}rem;
	span {
		padding-left: #{4 / $base-font-size}rem;
		display: flex;
		align-items: center;
		justify-content: center;
		width: #{20 / $base-font-size}rem;
		height: #{20 / $base-font-size}rem;
	}
}

.toolbar__play-sketch-button {
	@extend %hidden-element;
}

.toolbar__stop-button {
	@include themify() {
		@extend %toolbar-button;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: #{15 / $base-font-size}rem;
		padding: 0;
		&--selected {
			@extend %toolbar-button--selected;
		}
	}
	span {
		display: flex;
		align-items: center;
		justify-content: center;
		width: #{20 / $base-font-size}rem;
		height: #{20 / $base-font-size}rem;
	}
}

.toolbar__preferences-button {
	@include themify() {
		@extend %toolbar-button;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0;
		&--selected {
			@extend %toolbar-button--selected;
		}
	}
	margin-left: auto;
	& span {
		padding-left: #{1 / $base-font-size}rem;
		display: flex;
		align-items: center;
		justify-content: center;
		width: #{20 / $base-font-size}rem;
		height: #{20 / $base-font-size}rem;
	}
}

.toolbar__logo {
	margin-right: #{30 / $base-font-size}rem;
	@include themify() {
		& g, & path {
			fill: getThemifyVariable('logo-color');
		}
	}
}

.toolbar {
	padding: #{10 / $base-font-size}rem #{20 / $base-font-size}rem;
	display: flex;
	align-items: center;
	@include themify() {
		border-bottom: 1px dashed map-get($theme-map, 'nav-border-color');
	}
}

.toolbar__project-name-container {
	@include themify() {
		border-color: getThemifyVariable('inactive-text-color');
	}
	margin-left: #{10 / $base-font-size}rem;
	padding-left: #{10 / $base-font-size}rem;
  display: flex;
  align-items: center;
}

.toolbar__project-name {
	@include themify() {
		color: getThemifyVariable('secondary-text-color');
		&:hover {
		color: getThemifyVariable('logo-color');
		  & .toolbar__edit-name-button path {
		  	fill: getThemifyVariable('logo-color');
		  }
		}
	}
	cursor: pointer;
	display: flex;
	align-items: center;

	.toolbar__project-name-container--editing & {
		display: none;
	}
}

.toolbar__project-name-input {
	display: none;
	border: 0px;
	.toolbar__project-name-container--editing & {
		display: block;
	}
}

.toolbar__project-owner {
	margin-left: #{5 / $base-font-size}rem;
	@include themify() {
		color: getThemifyVariable('secondary-text-color');
	}
}

.toolbar__autorefresh-label {
	@include themify() {
		color: getThemifyVariable('secondary-text-color');
	}
	margin-left: #{5 / $base-font-size}rem;
	font-size: #{12 / $base-font-size}rem;
}

.toolbar__edit-name-button {
	display: inline-block;
	vertical-align: top;
	width: #{18 / $base-font-size}rem;
	height: #{18 / $base-font-size}rem;
	@include themify() {
		& path {
			fill: getThemifyVariable('secondary-text-color');
		}
	}
}