codecharta-visualization 1.119.1 → 1.120.0

package/app/codeCharta/ui/ribbonBar/showScenariosButton/scenarioHelper.spec.ts

@@ -1,320 +0,0 @@
-import { ScenarioHelper, ScenarioItem, ScenarioMetricProperty } from "./scenarioHelper"
-import { RecursivePartial, Scenario, Settings } from "../../../codeCharta.model"
-import { Vector3 } from "three"
-import scenarioJson from "../../../assets/scenarios.json"
-import { ExportScenario } from "../../../codeCharta.api.model"
-import {
-	DEFAULT_STATE,
-	PARTIAL_SETTINGS,
-	SCENARIO,
-	SCENARIO_ITEM_WITH_EVERYTHING_SAVED,
-	SCENARIO_WITH_ONLY_HEIGHT
-} from "../../../util/dataMocks"
-
-describe("scenarioHelper", () => {
-	const scenarios: ExportScenario[] = scenarioJson
-
-	beforeEach(() => {
-		ScenarioHelper["scenarios"].set("Scenario1", SCENARIO)
-		ScenarioHelper["scenarios"].set("Scenario2", SCENARIO_WITH_ONLY_HEIGHT)
-	})
-
-	describe("importScenarios", () => {
-		it("should convert vectors when importing scenarios", () => {
-			scenarios[0].camera = {
-				camera: { x: 0, y: 1, z: 2 } as Vector3,
-				cameraTarget: { x: 0, y: 1, z: 2 } as Vector3
-			}
-			const result = ScenarioHelper.importScenarios(scenarios)
-
-			expect(result[0].camera.camera.clone).not.toBeUndefined()
-		})
-	})
-	describe("getScenarioSettingsByName", () => {
-		it("should return Settings for Scenario1", () => {
-			const result = ScenarioHelper.getScenarioSettings(ScenarioHelper["scenarios"].get("Scenario1"))
-
-			expect(result).toEqual(PARTIAL_SETTINGS)
-		})
-		it("should return Settings for Scenario2", () => {
-			const result = ScenarioHelper.getScenarioSettings(ScenarioHelper["scenarios"].get("Scenario2"))
-			const expected = {
-				dynamicSettings: { heightMetric: "mcc" },
-				appSettings: { amountOfTopLabels: 31, scaling: new Vector3(1, 1.8, 1) }
-			}
-
-			expect(result).toEqual(expected)
-		})
-		it("should return an settingsobject with empty dynamic- and appSettings if the list does not contain the scenario", () => {
-			const result = ScenarioHelper.getScenarioSettings(undefined)
-			const expected: RecursivePartial<Settings> = { dynamicSettings: {}, appSettings: {} }
-
-			expect(result).toEqual(expected)
-		})
-	})
-
-	describe("getScenarioItems", () => {
-		beforeEach(() => {
-			ScenarioHelper["scenarios"].clear()
-		})
-		it("should get all the items with its visibility", () => {
-			ScenarioHelper["scenarios"].set("Scenario1", SCENARIO)
-
-			const expected: ScenarioItem[] = SCENARIO_ITEM_WITH_EVERYTHING_SAVED
-
-			const result = ScenarioHelper.getScenarioItems({
-				nodeMetricData: [{ name: "mcc", maxValue: 56, minValue: 1 }],
-				edgeMetricData: [{ name: "pairingRate", maxValue: 47, minValue: 1 }]
-			})
-
-			expect(result).toEqual(expected)
-		})
-
-		it("should set isScenarioApplicable to true when metric is in metricData", () => {
-			ScenarioHelper["scenarios"].set("Scenario2", SCENARIO_WITH_ONLY_HEIGHT)
-
-			const expected: ScenarioItem[] = [
-				{
-					scenarioName: "Scenario2",
-					isScenarioApplicable: true,
-					icons: [
-						{
-							faIconClass: "fa-video-camera",
-							isSaved: false,
-							tooltip: "Camera angle"
-						},
-						{
-							faIconClass: "fa-arrows-alt",
-							isSaved: false,
-							tooltip: "Area metric"
-						},
-						{
-							faIconClass: "fa-arrows-v",
-							isSaved: true,
-							tooltip: "Height metric"
-						},
-						{
-							faIconClass: "fa-paint-brush",
-							isSaved: false,
-							tooltip: "Color metric"
-						},
-						{
-							faIconClass: "fa-exchange",
-							isSaved: false,
-							tooltip: "Edge metric"
-						}
-					]
-				}
-			]
-
-			const result = ScenarioHelper.getScenarioItems({
-				nodeMetricData: [{ name: "mcc", maxValue: 56, minValue: 1 }],
-				edgeMetricData: [{ name: "None", maxValue: 0, minValue: 1 }]
-			})
-
-			expect(result).toEqual(expected)
-		})
-
-		it("should not be applicable when EdgeMetric is not existing", () => {
-			ScenarioHelper["scenarios"].set("Scenario1", SCENARIO)
-
-			const expected: ScenarioItem[] = SCENARIO_ITEM_WITH_EVERYTHING_SAVED
-
-			const result = ScenarioHelper.getScenarioItems({
-				nodeMetricData: [
-					{ name: "mcc", maxValue: 56, minValue: 1 },
-					{ name: "rloc", maxValue: 43, minValue: 1 }
-				],
-				edgeMetricData: [{ name: "unavailableMetric", maxValue: 0, minValue: 1 }]
-			})
-
-			expect(result).toEqual(expected)
-		})
-	})
-
-	describe("addScenario", () => {
-		const scenarioProperties: ScenarioMetricProperty[] = [
-			{
-				metricType: "Camera-Position",
-				metricName: null,
-				savedValues: SCENARIO.camera,
-				isSelected: true,
-				isDisabled: false
-			},
-			{
-				metricType: "Area-Metric",
-				metricName: "rloc",
-				savedValues: SCENARIO.area.margin,
-				isSelected: true,
-				isDisabled: false
-			},
-			{
-				metricType: "Color-Metric",
-				metricName: "mcc",
-				savedValues: { colorRange: SCENARIO.color.colorRange, mapColors: SCENARIO.color.mapColors },
-				isSelected: true,
-				isDisabled: false
-			},
-			{
-				metricType: "Height-Metric",
-				metricName: "mcc",
-				savedValues: { heightSlider: SCENARIO.height.heightSlider, labelSlider: SCENARIO.height.labelSlider },
-				isSelected: true,
-				isDisabled: false
-			},
-			{
-				metricType: "Edge-Metric",
-				metricName: "pairingRate",
-				savedValues: { edgePreview: SCENARIO.edge.edgePreview, edgeHeight: SCENARIO.edge.edgeHeight },
-				isSelected: true,
-				isDisabled: false
-			}
-		]
-
-		beforeEach(() => {
-			ScenarioHelper["scenarios"].clear()
-		})
-
-		it("should add the new Scenario into the scenarios", () => {
-			ScenarioHelper.addScenario(SCENARIO.name, scenarioProperties)
-			const lastScenarioOfScenarios: RecursivePartial<Scenario> = [...ScenarioHelper["scenarios"].values()].pop()
-
-			expect(lastScenarioOfScenarios).toEqual(SCENARIO)
-		})
-		it("should call setScenariosToLocalStorage with scenarios", () => {
-			ScenarioHelper["setScenariosToLocalStorage"] = jest.fn()
-
-			ScenarioHelper.addScenario(SCENARIO.name, scenarioProperties)
-
-			expect(ScenarioHelper["setScenariosToLocalStorage"]).toHaveBeenCalledWith(ScenarioHelper["scenarios"])
-		})
-	})
-
-	describe("createNewScenario", () => {
-		const scenarioAttributeContent: ScenarioMetricProperty[] = [
-			{
-				metricType: "Camera-Position",
-				metricName: null,
-				savedValues: { camera: new Vector3(0, 300, 1000), cameraTarget: new Vector3(1, 1, 1) },
-				isSelected: true,
-				isDisabled: false
-			},
-			{
-				metricType: "Area-Metric",
-				metricName: "rloc",
-				savedValues: 48,
-				isSelected: true,
-				isDisabled: false
-			},
-			{
-				metricType: "Color-Metric",
-				metricName: "mcc",
-				savedValues: { colorRange: { from: 19, to: 67 }, mapColors: DEFAULT_STATE.appSettings.mapColors },
-				isSelected: true,
-				isDisabled: false
-			},
-			{
-				metricType: "Height-Metric",
-				metricName: "mcc",
-				savedValues: { heightSlider: new Vector3(1, 1.8, 1), labelSlider: 31 },
-				isSelected: true,
-				isDisabled: false
-			},
-			{
-				metricType: "Edge-Metric",
-				metricName: "pairingRate",
-				savedValues: { edgePreview: 5, edgeHeight: 4 },
-				isSelected: true,
-				isDisabled: false
-			}
-		]
-
-		it("should create a Scenario according to the given scenarioAttributeContent ", () => {
-			const result: RecursivePartial<Scenario> = ScenarioHelper.createNewScenario("Scenario1", scenarioAttributeContent)
-
-			expect(result).toEqual(SCENARIO)
-		})
-
-		it("should create a Scenario only with height attributes", () => {
-			const scenarioAttributeContentWithOnlyHeight: ScenarioMetricProperty[] = [
-				{
-					metricType: "Height-Metric",
-					metricName: "mcc",
-					savedValues: { heightSlider: new Vector3(1, 1.8, 1), labelSlider: 31 },
-					isSelected: true,
-					isDisabled: false
-				},
-				{
-					metricType: "Color-Metric",
-					metricName: "mcc",
-					savedValues: { colorRange: { from: 19, to: 67 }, mapColors: DEFAULT_STATE.appSettings.mapColors },
-					isSelected: false,
-					isDisabled: false
-				}
-			]
-
-			const result: RecursivePartial<Scenario> = ScenarioHelper.createNewScenario("Scenario2", scenarioAttributeContentWithOnlyHeight)
-
-			expect(result).toEqual(SCENARIO_WITH_ONLY_HEIGHT)
-		})
-	})
-
-	describe("deleteScenario", () => {
-		beforeEach(() => {
-			ScenarioHelper["scenarios"].clear()
-		})
-		it("should remove the Scenario from Scenarios", () => {
-			ScenarioHelper["scenarios"].set("Scenario", { name: "Scenario", area: { areaMetric: "mcc", margin: 48 } })
-			ScenarioHelper.deleteScenario("Scenario")
-
-			expect(ScenarioHelper["scenarios"]).toEqual(new Map<string, RecursivePartial<Scenario>>())
-		})
-
-		it("should not delete an Element when it doesn't exist ", () => {
-			ScenarioHelper["scenarios"].set("Scenario", { name: "Scenario", area: { areaMetric: "mcc", margin: 48 } })
-
-			ScenarioHelper.deleteScenario("UnknownScenario")
-			const expected = new Map<string, RecursivePartial<Scenario>>()
-			expected.set("Scenario", { name: "Scenario", area: { areaMetric: "mcc", margin: 48 } })
-
-			expect(ScenarioHelper["scenarios"]).toEqual(expected)
-		})
-
-		it("should find the specific Scenario and delete it ", () => {
-			ScenarioHelper["scenarios"].set("Scenario1", {
-				name: "Scenario1",
-				area: { areaMetric: "rloc", margin: 48 }
-			})
-			ScenarioHelper["scenarios"].set("Scenario2", {
-				name: "Scenario2",
-				height: { heightMetric: "mcc", labelSlider: 2 }
-			})
-			ScenarioHelper["scenarios"].set("Scenario3", { name: "Scenario3", color: { colorMetric: "mcc" } })
-
-			ScenarioHelper.deleteScenario("Scenario2")
-			const expected = new Map<string, RecursivePartial<Scenario>>()
-			expected.set("Scenario1", { name: "Scenario1", area: { areaMetric: "rloc", margin: 48 } })
-			expected.set("Scenario3", { name: "Scenario3", color: { colorMetric: "mcc" } })
-
-			expect(ScenarioHelper["scenarios"]).toEqual(expected)
-		})
-
-		it("should call setScenariosToLocalStorage", () => {
-			ScenarioHelper["setScenariosToLocalStorage"] = jest.fn()
-
-			ScenarioHelper.deleteScenario("Complexity")
-
-			expect(ScenarioHelper["setScenariosToLocalStorage"]).toHaveBeenCalled()
-		})
-	})
-
-	describe("isScenarioExisting ", () => {
-		it("should return true if Scenario is existing", () => {
-			expect(ScenarioHelper.isScenarioExisting("Scenario2")).toBeTruthy()
-		})
-
-		it("should return true if Scenario is existing", () => {
-			expect(ScenarioHelper.isScenarioExisting("someScenario")).toBeFalsy()
-		})
-	})
-})

package/app/codeCharta/ui/ribbonBar/showScenariosButton/scenarioHelper.ts

@@ -1,261 +0,0 @@
-"use strict"
-import {
-	LocalStorageScenarios,
-	DynamicSettings,
-	RecursivePartial,
-	Scenario,
-	MetricData,
-	AppSettings,
-	Settings
-} from "../../../codeCharta.model"
-import { convertToVectors } from "../../../util/settingsHelper"
-import defaultScenarios from "../../../assets/scenarios.json"
-import { ExportScenario } from "../../../codeCharta.api.model"
-import { Vector3 } from "three"
-
-export type ScenarioMetricType = "Camera-Position" | "Edge-Metric" | "Area-Metric" | "Height-Metric" | "Color-Metric"
-
-export type ScenarioMetricProperty = {
-	metricType: ScenarioMetricType
-	metricName: string
-	isSelected: boolean
-	isDisabled: boolean
-	savedValues: unknown
-}
-
-export interface ScenarioItem {
-	scenarioName: string
-	isScenarioApplicable: boolean
-	icons: { faIconClass: string; isSaved: boolean; tooltip: string }[]
-}
-
-export class ScenarioHelper {
-	private static readonly SCENARIOS_LOCAL_STORAGE_VERSION = "1.0.0"
-	private static readonly SCENARIOS_LOCAL_STORAGE_ELEMENT = "scenarios"
-	static scenarios: Map<string, RecursivePartial<Scenario>> = ScenarioHelper.loadScenarios()
-
-	static getScenarioItems(metricData: MetricData) {
-		const scenarioItems: ScenarioItem[] = []
-
-		for (const scenario of this.scenarios.values()) {
-			scenarioItems.push({
-				scenarioName: scenario.name,
-				isScenarioApplicable: this.isScenarioApplicable(scenario, metricData),
-				icons: [
-					{
-						faIconClass: "fa-video-camera",
-						isSaved: Boolean(scenario.camera),
-						tooltip: "Camera angle"
-					},
-					{
-						faIconClass: "fa-arrows-alt",
-						isSaved: Boolean(scenario.area),
-						tooltip: "Area metric"
-					},
-					{
-						faIconClass: "fa-arrows-v",
-						isSaved: Boolean(scenario.height),
-						tooltip: "Height metric"
-					},
-					{
-						faIconClass: "fa-paint-brush",
-						isSaved: Boolean(scenario.color),
-						tooltip: "Color metric"
-					},
-					{
-						faIconClass: "fa-exchange",
-						isSaved: Boolean(scenario.edge),
-						tooltip: "Edge metric"
-					}
-				]
-			})
-		}
-		return scenarioItems
-	}
-
-	private static isScenarioApplicable(scenario: RecursivePartial<Scenario>, metricData: MetricData) {
-		const { area, color, height, edge } = scenario
-
-		if (area || color || height) {
-			const nodeMetricSet = new Set(metricData.nodeMetricData.map(data => data.name))
-
-			if (
-				(area && !nodeMetricSet.has(area.areaMetric)) ||
-				(color && !nodeMetricSet.has(color.colorMetric)) ||
-				(height && !nodeMetricSet.has(height.heightMetric))
-			) {
-				return false
-			}
-		}
-
-		return !(edge && !metricData.edgeMetricData.some(x => x.name === edge.edgeMetric))
-	}
-
-	private static getPreLoadScenarios() {
-		const scenariosAsSettings = this.importScenarios(defaultScenarios)
-		const scenario: Map<string, RecursivePartial<Scenario>> = new Map()
-		for (const setting of scenariosAsSettings) {
-			scenario.set(setting.name, this.transformScenarioAsSettingsToScenario(setting))
-		}
-		return scenario
-	}
-
-	private static transformScenarioAsSettingsToScenario(exportScenario: ExportScenario) {
-		const scenario: RecursivePartial<Scenario> = { name: exportScenario.name }
-		const { dynamicSettings, appSettings } = exportScenario.settings
-
-		if (dynamicSettings.areaMetric !== undefined) {
-			scenario.area = {
-				areaMetric: dynamicSettings.areaMetric,
-				margin: dynamicSettings.margin
-			}
-		}
-		if (dynamicSettings.heightMetric !== undefined) {
-			scenario.height = {
-				heightMetric: dynamicSettings.heightMetric,
-				labelSlider: appSettings.amountOfTopLabels,
-				heightSlider: appSettings.scaling
-			}
-		}
-		if (dynamicSettings.colorMetric !== undefined) {
-			scenario.color = {
-				colorMetric: dynamicSettings.colorMetric,
-				colorRange: dynamicSettings.colorRange,
-				mapColors: appSettings.mapColors
-			}
-		}
-		if (dynamicSettings.edgeMetric !== undefined) {
-			scenario.edge = {
-				edgeMetric: dynamicSettings.edgeMetric,
-				edgeHeight: appSettings.edgeHeight,
-				edgePreview: appSettings.amountOfEdgePreviews
-			}
-		}
-
-		return scenario
-	}
-
-	private static setScenariosToLocalStorage(scenarios: Map<string, RecursivePartial<Scenario>>) {
-		const newLocalStorageElement: LocalStorageScenarios = {
-			version: this.SCENARIOS_LOCAL_STORAGE_VERSION,
-			scenarios: [...scenarios]
-		}
-		localStorage.setItem(this.SCENARIOS_LOCAL_STORAGE_ELEMENT, JSON.stringify(newLocalStorageElement))
-	}
-
-	private static loadScenarios() {
-		const ccLocalStorage: LocalStorageScenarios = JSON.parse(localStorage.getItem(this.SCENARIOS_LOCAL_STORAGE_ELEMENT))
-		if (ccLocalStorage) {
-			return new Map(ccLocalStorage.scenarios)
-		}
-		const scenarios = this.getPreLoadScenarios()
-		this.setScenariosToLocalStorage(scenarios)
-		return scenarios
-	}
-
-	static addScenario(scenarioName: string, scenarioMetricProperties: ScenarioMetricProperty[]) {
-		const newScenario = ScenarioHelper.createNewScenario(scenarioName, scenarioMetricProperties)
-		this.scenarios.set(newScenario.name, newScenario)
-		this.setScenariosToLocalStorage(this.scenarios)
-	}
-
-	static createNewScenario(scenarioName: string, scenarioMetricProperties: ScenarioMetricProperty[]) {
-		const newScenario: RecursivePartial<Scenario> = { name: scenarioName }
-
-		for (const property of scenarioMetricProperties.filter(p => p.isSelected)) {
-			switch (property.metricType) {
-				case "Camera-Position":
-					newScenario.camera = {
-						camera: property.savedValues["camera"],
-						cameraTarget: property.savedValues["cameraTarget"]
-					}
-					break
-
-				case "Area-Metric":
-					newScenario.area = {
-						areaMetric: property.metricName,
-						margin: property.savedValues as number
-					}
-					break
-
-				case "Height-Metric":
-					newScenario.height = {
-						heightMetric: property.metricName,
-						heightSlider: property.savedValues["heightSlider"],
-						labelSlider: property.savedValues["labelSlider"]
-					}
-					break
-
-				case "Color-Metric":
-					newScenario.color = {
-						colorMetric: property.metricName,
-						colorRange: property.savedValues["colorRange"],
-						mapColors: property.savedValues["mapColors"]
-					}
-					break
-
-				case "Edge-Metric":
-					newScenario.edge = {
-						edgeMetric: property.metricName,
-						edgePreview: property.savedValues["edgePreview"],
-						edgeHeight: property.savedValues["edgeHeight"]
-					}
-					break
-
-				default:
-					throw new Error(`Unknown metric type "${property.metricType}" detected`)
-			}
-		}
-
-		return newScenario
-	}
-
-	static deleteScenario(scenarioName: string) {
-		this.scenarios.delete(scenarioName)
-		this.setScenariosToLocalStorage(this.scenarios)
-	}
-
-	static getScenarioSettings(scenario: RecursivePartial<Scenario>): RecursivePartial<Settings> {
-		const partialDynamicSettings: RecursivePartial<DynamicSettings> = {}
-		const partialAppSettings: RecursivePartial<AppSettings> = {}
-
-		if (scenario) {
-			if (scenario.area) {
-				partialDynamicSettings.areaMetric = scenario.area.areaMetric
-				partialDynamicSettings.margin = scenario.area.margin
-			}
-			if (scenario.height) {
-				partialDynamicSettings.heightMetric = scenario.height.heightMetric
-				partialAppSettings.amountOfTopLabels = scenario.height.labelSlider
-				partialAppSettings.scaling = scenario.height.heightSlider
-			}
-			if (scenario.color) {
-				partialDynamicSettings.colorMetric = scenario.color.colorMetric
-				partialDynamicSettings.colorRange = scenario.color.colorRange
-				partialAppSettings.mapColors = scenario.color.mapColors
-			}
-			if (scenario.edge) {
-				partialDynamicSettings.edgeMetric = scenario.edge.edgeMetric
-				partialAppSettings.edgeHeight = scenario.edge.edgeHeight
-				partialAppSettings.amountOfEdgePreviews = scenario.edge.edgePreview
-			}
-		}
-
-		return { appSettings: partialAppSettings, dynamicSettings: partialDynamicSettings }
-	}
-
-	static importScenarios(scenarios: ExportScenario[]) {
-		for (const scenario of scenarios) {
-			convertToVectors(scenario.settings)
-			if (scenario.camera) {
-				scenario.camera.camera = new Vector3(scenario.camera.camera.x, scenario.camera.camera.y, scenario.camera.camera.z)
-				scenario.camera.cameraTarget = new Vector3(scenario.camera.camera.x, scenario.camera.camera.y, scenario.camera.camera.z)
-			}
-		}
-		return scenarios
-	}
-
-	static isScenarioExisting(scenarioName: string) {
-		return this.scenarios.has(scenarioName)
-	}
-}

package/app/codeCharta/ui/ribbonBar/showScenariosButton/scenarios/scenarios.component.html

@@ -1,27 +0,0 @@
-<div class="cc-row">
-	<button class="cc-apply-scenario-button" disabled>Metric Scenarios</button>
-	<button title="Create a custom scenario" class="cc-action-button cc-add" (click)="addScenario()"><i class="fa fa-plus"></i></button>
-</div>
-
-<mat-divider></mat-divider>
-
-<div *ngFor="let scenario of scenarios" class="cc-row">
-	<button
-		title="Apply scenario"
-		class="cc-apply-scenario-button"
-		[disabled]="!scenario.isScenarioApplicable"
-		(click)="scenarioService.applyScenario(scenario.scenarioName)"
-	>
-		{{ scenario.scenarioName }}
-	</button>
-	<span [title]="icon.tooltip" class="cc-scenario-content-icons" *ngFor="let icon of scenario.icons">
-		<i class="fa {{ icon.faIconClass }}" [class.cc-is-saved]="icon.isSaved"></i>
-	</span>
-	<button
-		title="Remove custom scenario"
-		class="cc-action-button cc-remove"
-		(click)="scenarioService.removeScenario(scenario.scenarioName)"
-	>
-		<i class="fa fa-minus-square"></i>
-	</button>
-</div>

package/app/codeCharta/ui/ribbonBar/showScenariosButton/scenarios/scenarios.component.scss

@@ -1,66 +0,0 @@
-@use "../../../../../material/theme";
-
-.mat-mdc-menu-panel.cc-scenarios-menu {
-	width: 420px;
-	max-width: unset;
-
-	.mat-mdc-menu-content {
-		padding: 0;
-	}
-
-	.cc-row {
-		display: flex;
-		height: 48px;
-		align-items: center;
-
-		[disabled] {
-			color: rgba(0, 0, 0, 0.38);
-		}
-
-		.cc-apply-scenario-button {
-			padding-left: 16px;
-			padding-right: 16px;
-			height: 100%;
-			flex: 1;
-			text-align: left;
-			background-color: unset;
-
-			&:hover:not([disabled]) {
-				background-color: rgba(158, 158, 158, 0.2);
-			}
-		}
-
-		.cc-action-button {
-			width: 52px;
-			height: 100%;
-			display: inline-flex;
-			justify-content: center;
-			align-items: center;
-
-			&.cc-add {
-				background-color: theme.$cc-primary-color;
-			}
-
-			&.cc-remove {
-				border-left: 1px solid rgba(0, 0, 0, 0.12);
-				color: #b30000;
-				background-color: unset;
-				&:hover:not([disabled]) {
-					background-color: rgba(158, 158, 158, 0.2);
-				}
-			}
-		}
-
-		i.fa {
-			font-size: x-small;
-		}
-
-		.cc-scenario-content-icons {
-			padding: 0 8px;
-			color: #d3d3d3;
-			i.fa.cc-is-saved {
-				color: black;
-			}
-		}
-	}
-}