Rewrite all css to scss and refactor html

rpg-docs/client/views/GeneralCSS/color.css

@@ -1,83 +0,0 @@
-.red {
-	background-color: #F44336;
-}
-
-.pink {
-	background-color: #E91E63;
-}
-
-.purple {
-	background-color: #9C27B0;
-}
-
-.deep-purple {
-	background-color: #673AB7;
-}
-
-.indigo {
-	background-color: #3F51B5;
-}
-
-.blue {
-	background-color: #2196F3;
-}
-
-.light-blue {
-	background-color: #03A9F4;
-}
-
-.cyan {
-	background-color: #00BCD4;
-}
-
-.teal {
-	background-color: #009688;
-}
-
-.green {
-	background-color: #4CAF50;
-}
-
-.light-green {
-	background-color: #8BC34A;
-}
-
-.lime {
-	background-color: #CDDC39;
-}
-
-.yellow {
-	background-color: #FFEB3B;
-}
-
-.amber {
-	background-color: #FFC107;
-}
-
-.orange {
-	background-color: #FF9800;
-}
-
-.deep-orange {
-	background-color: #FF5722;
-}
-
-.brown {
-	background-color: #795548;
-}
-
-.grey {
-	background-color: #9E9E9E;
-}
-
-.blue-grey {
-	background-color: #607D8B;
-}
-
-.white {
-	background-color: #ffffff;
-}
-
-.black {
-	background-color: #262626;
-}

rpg-docs/client/views/GeneralCSS/general.css

@@ -1,189 +0,0 @@
-body /deep/ core-menu {
-	overflow-x: hidden !important;
-}
-
-td {
-	padding: 0;
-}
-
-table {
-	border-spacing: 0;
-}
-
-.summaryTable td{
-	text-align: right;
-	padding: 4px;
-	min-width: 80px;
-}
-
-.summaryTable td:first-child {
-	text-align: left;
-}
-
-core-item {
-	cursor: pointer;
-}
-
-.cardHeader {
-	height: 48px;
-	padding: 0 16px 0 16px;
-	align-content: center;
-	font-size: 14px;
-	font-weight: 400;
-	color: rgba(0, 0, 0, 0.54);
-}
-
-.clickable, .statCard, .abilityMiniCard {
-	cursor: pointer;
-}
-
-.resourceCards {
-	padding: 4px 4px 0 4px;
-	margin-bottom: -4px;
-}
-
-.resourceCards .card {
-	width: 180px;
-	margin: 4px;
-	flex-grow: 1;
-	flex-shrink: 1;
-}
-
-.grey-background, body {
-	background-color: #E0E0E0;
-}
-
-.center {
-	text-align: center;
-}
-
-.screen-center {
-	position: fixed;
-	top: 50%;
-	left: 50%;
-	-webkit-transform: translate(-50%, -50%);
-	transform: translate(-50%, -50%);
-}
-
-.scroll-y {
-	overflow-y: auto;
-}
-
-.fab-buffer {
-	height: 88px;
-	width: 100%;
-	order: 999;
-}
-
-*[hidden] {
-	visibility: hidden;
-}
-
-.hidden{
-	opacity: 0;
-}
-
-@media (max-width: 640px) {
-	html /deep/ paper-action-dialog[global-dialog] {
-		top: 0 !important;
-		left: 0 !important;
-		width: 100%;
-		height: 100%;
-		margin: 0;
-		border-radius: 0;
-	}
-}
-
-.floatyButton {
-	position: absolute;
-	bottom: 24px;
-	right: 24px;
-}
-
-.wideTable td {
-	padding: 4px 8px 4px 8px;
-}
-
-.wideTable table {
-	padding: 8px;
-}
-
-paper-fab-menu /deep/ .container {
-	padding: 24px !important;
-}
-
-paper-slider {
-	margin-left: -8px;
-}
-
-.list-subhead {
-	color: rgba(0,0,0,0.54);
-	font-size: 14px;
-	height: 40px;
-	padding-left: 16px;
-	font-weight: 500;
-}
-
-.whiteTop {
-	cursor: initial;
-	border-bottom: black solid 0.5px;
-	border-bottom: rgba(0,0,0,0.12) solid 1px;
-	background: white;
-	padding: 16px;
-	position: relative;
-	border-radius: 2px 2px 0 0;
-}
-
-.whiteTop paper-icon-button {
-	margin: -8px;
-}
-
-.fullwidth {
-	width: 100%;
-}
-
-.padded {
-	padding: 16px;
-}
-
-.listPadded {
-	padding: 0 0 16px 0; 
-}
-
-.rightPadded {
-	padding-right: 16px;
-}
-
-.bottomPadded {
-	padding-bottom: 16px;
-}
-
-.sideMargin {
-	margin-left: 16px;
-	margin-right: 16px;
-}
-
-.vertMargin {
-	margin-top: 16px;
-	margin-bottom: 16px;
-}
-
-.spaceAfter {
-	margin-bottom: 8px;
-}
-
-.s {
-	padding: 0 0 16px 0;
-}
-
-.leftRound{
-	border-radius: 2px 0 0 2px;
-}
-
-.preline {
-	white-space: pre-line;
-}
-
-.prewrap{
-	white-space: pre-wrap;
-}