@nodecg/types/dist/dashboard/css/nodecg-theme.html

Dynamic broadcast graphics rendered in a browser

<dom-module id="nodecg-theme">
	<template>
		<style>
			:host,
			html {
				color: white;

				--nodecg-brand-blue: #00bebe;
				--nodecg-brand-blue-dark: #004949;
				--default-primary-color: var(--nodecg-brand-blue);
				--primary-color: var(--nodecg-brand-blue);

				--nodecg-accept-color: #32784a;
				--nodecg-benign-color: #525f78;
				--nodecg-configure-color: #6155bd;
				--nodecg-danger-color: #cf7e44;
				--nodecg-disabled-color: #8d8e91;
				--nodecg-execute-color: #ffc700;
				--nodecg-reject-color: #a33b3b;
				--nodecg-selected-color: #5280d9;

				--paper-toggle-button-checked-bar-color: var(--nodecg-brand-blue-dark);
				--paper-toggle-button-checked-button-color: var(--nodecg-brand-blue);
				--paper-toggle-button-checked-ink-color: var(--nodecg-brand-blue);
				--paper-toggle-button-label-color: white;
				--paper-toggle-button-unchecked-bar-color: #000000;
				--paper-toggle-button-unchecked-button-color: #7f7f7f;

				--paper-dialog-color: white;

				--paper-input-container-color: white;
				--paper-input-container-focus-color: white;
				--paper-input-container-input-color: white;
				--paper-slider-active-color: white;
				--paper-slider-knob-color: white;

				--paper-input-container: {
					--paper-input-container-color: var(--nodecg-brand-blue);
					--paper-input-container-focus-color: white;
					--paper-input-container-input-color: white;
				}

				--paper-input-suffix: {
					color: var(--nodecg-brand-blue);
				}

				--paper-dropdown-menu-icon: {
					color: var(--nodecg-brand-blue);
				}
			}

			vaadin-combo-box {
				--iron-icon-fill-color: var(--nodecg-brand-blue);
				--paper-input-suffix: {
					height: 24px;
					transform: translateY(-2px);
				}
			}

			vaadin-upload {
				--vaadin-upload-file-status-icon-complete: {
					color: var(--nodecg-brand-blue);
				}
				--vaadin-upload-file-name: {
					color: white;
				}
			}

			paper-button {
				background: var(--nodecg-background-color);
				border-radius: 0;
				color: var(--nodecg-foreground-color, white);
				font-size: 16px;
				font-weight: 300;
			}

			paper-button.nodecg-accept {
				--nodecg-background-color: var(--nodecg-accept-color);
			}

			paper-button.nodecg-benign {
				--nodecg-background-color: var(--nodecg-benign-color);
			}

			paper-button.nodecg-configure {
				--nodecg-background-color: var(--nodecg-configure-color);
			}

			paper-button.nodecg-danger {
				--nodecg-background-color: var(--nodecg-danger-color);
			}

			paper-button.nodecg-execute {
				--nodecg-background-color: var(--nodecg-execute-color);
				--nodecg-foreground-color: black;
			}

			paper-button.nodecg-reject {
				--nodecg-background-color: var(--nodecg-reject-color);
			}

			paper-button.nodecg-selected {
				--nodecg-background-color: var(--nodecg-selected-color);
			}

			paper-button[disabled] {
				--nodecg-background-color: var(--nodecg-disabled-color);
				color: #54575c;
			}

			paper-card {
				--paper-card-header-color: white;
				background-color: #2f3a4f;
				width: 100%;
			}

			paper-card[heading] {
				--paper-card-header: {
					background-color: #525f78;
					border-bottom: 5px solid var(--nodecg-brand-blue);
					font-weight: bold;
				}
			}

			.card-content > * {
				padding: 0 16px;
			}

			paper-dialog,
			paper-dialog-scrollable {
				background-color: #2f3a4f;
				color: white;
			}

			a {
				color: white;
				font-weight: 500;
				letter-spacing: 0.018em;
				text-decoration: underline;
			}
		</style>
	</template>
</dom-module>