CSS Template

style/_logon.scss

@@ -0,0 +1,27 @@
+/* Log on */
+
+#logon {
+	width: 300px;
+	transform: translate(-50%, -50%);
+	position: absolute;
+	left: 50%;
+	top: 40%;
+	padding: 1em;
+	
+	#pass_conf_box {
+		.fa-password {
+			&.first {
+				margin: -0.25em 0.25em 0 -0.25em;
+			}
+			&.second {
+				position: absolute;
+				margin: 0.25em 0 0 0.25em;
+			}
+		}
+	}
+	
+	#btn_box.registering #register {
+		margin-left: 100%;
+		transform: translateX(-100%);
+	}
+}

style/_template.scss

@@ -0,0 +1,267 @@
+/* Containers */
+
+body {
+	min-width: 700px;
+	font-family: $font_para, sans-serif;
+	font-size:1em;
+	background-color: $gray-300;
+	margin:0;
+	color: $col_main_1;
+}
+
+/* Typography */
+
+a:visited, a {
+	color: $col_main_1;
+	text-decoration: none;
+	font-weight: bold;
+}
+
+a:active, a:focus, input:active, input:focus  {
+	outline: none;
+}
+
+a:hover {
+	text-decoration: none;
+}
+
+/* Common Classes */
+
+.transition {
+	transition: all 0.3s ease 0s !important;
+}
+
+.bold {
+	font-weight: bold;
+}
+
+/* Common Classes - Containers */
+
+#container {
+	position: absolute;
+	left: 1em;
+	right: 1em;
+	top: 1em;
+	bottom: 1em;
+}
+
+/* Common Classes - Inputs */
+
+a.button {
+	font-weight:normal;
+	height:50px;
+	width:50px;
+	line-height:50px;
+	font-size: 1.0em;
+	text-align:center;
+	background:	url("../images/minicloud.png") 0 0 no-repeat;
+	color: $gray-600;
+}
+a.button:hover {
+	color:white;
+	background-position:0 -50px; 
+}
+a.button:active {
+	color:white;
+	background-position:0 -100px; 
+}
+
+.input-group-text i.fal {
+	@extend .fa-fw; 
+}
+
+/* Common Classes - Feedback */
+
+#feedback {
+	position: absolute;
+	width: 100%;
+	z-index: 1000;
+	
+	.alert {
+		top: 1em;
+		background: $gray-200;
+	}
+}
+
+/* Header */
+
+#header {
+	position: relative;
+	
+	#logo_box {
+		height: 138px;
+		width: 100%;
+		background: url('../images/logo.png') 0 0 no-repeat;
+	}
+
+	#desc_box {
+		position: absolute;
+		top: 0;
+		left: calc(116px + 1em);
+		height: 111px;
+		
+		.desc {
+			text-transform: uppercase;
+			font-family: 'Roboto', sans-serif;
+			font-size: 15px;
+			width: 70px;
+			transform: translateY(-50%);
+			top: 50%;
+			position: absolute;
+			
+			span {
+				color: $col_main_2;
+				font-weight: bold;
+			}
+		}
+	}
+}
+
+/* Menu */
+
+#menu {
+	position: absolute;
+	display: none;
+	top: 0;
+	right: 0;
+	
+	ul {
+		list-style: none;
+		
+		li {
+			display: inline;
+		}
+	}
+}
+
+/* Main */
+
+#main {
+	display: none;
+	margin-top: 1em;
+	position: absolute;
+	top:203px;
+	bottom: 2rem;
+	right:0;
+	left:0;
+	border-radius: 0.5em;
+	padding: 1em;
+
+	&:not(.no_frame) {
+		@extend .shadow;
+	}
+}
+
+/* Side */
+
+#side {
+	position: absolute;
+	left: 100%;
+	top: 203px;
+	padding: 1em;
+	bottom: 2rem;
+	overflow: hidden;
+	display: none;
+	
+	.tag {
+		margin-bottom: 1em;
+		
+		a {
+			@extend .shadow;
+			display: inline-block;
+			text-align: center;
+			width: 50px;
+			background: $gray-200;
+			border-radius: 0.5em;
+			font-size: 0.8rem;
+			line-height: 25px;
+			
+			&:hover {
+				color: $gray-200;
+				background: $gray-400;
+			}
+		}
+		
+		&.write a {
+			font-size: 1rem;
+			padding: 0;
+			line-height: 50px;
+		}
+	}
+}
+
+/* Settings */
+
+#settings table tr td {
+	text-align:left;
+} 
+
+/* Errors */
+
+#errors {
+	position:fixed;
+	bottom:-2px;
+	background-color:white;
+	width:696px;
+	border:2px solid red;
+}
+#errors ul li {
+	list-style-image: url(../images/error.png);
+	color:red;
+	font-weight: bold;
+	font-size:24px;
+}
+
+fieldset {
+	margin:20px auto;
+	width:90%;
+}
+
+fieldset p {
+	text-align: justify;
+}
+
+/* Feedback */
+
+.notice {
+	padding:0;
+	color:#997E60;
+}
+
+.error {
+	padding:0 0.5em;
+	color: red;
+	background:#FFB2B2;
+}
+.warning {
+	padding:0 0.5em;
+	color:orange;
+	background:#FFE4B2;
+}
+.success {
+	padding:0 0.5em;
+	color:green;
+	background:#B2D9B2;
+}
+
+/* Footer */
+
+footer {
+	position: absolute;
+	bottom: 0;
+	text-align: center;
+	color: $gray-400;
+	font-size: 0.8em;
+	width: 100%;
+	height: 2rem;
+	
+	span {
+		transform: translateY(-50%);
+		position: relative;
+		top: 50%;
+		
+		a {
+			color: $gray-400 !important;
+		}
+	}
+}

style/_variables.scss

@@ -0,0 +1,8 @@
+/* Colors
+
+*/
+
+$col_main_1: #907465; //Brown
+$col_main_2: #C81F3F; //Red
+
+$font_para: 'Quicksand';

style/catc.scss

@@ -0,0 +1,21 @@
+/* Variables */
+
+@import 'variables';
+
+/* Fonts */
+
+@import 'font-awesome';
+@import 'fonts';
+
+/* Plugins */
+
+@import 'bootstrap';
+@import 'quill';
+
+/* Template (theme) */
+
+@import 'template';
+
+/* Pages */
+
+@import 'logon';

style/scss.bat

@@ -0,0 +1 @@
+sass --unix-newline -l --style=compressed --watch catc.scss:catc.css