convert css to scss

include/css/webmum.style.css

@@ -0,0 +1,237 @@
+body {
+  font-family: arial, serif;
+  font-size: 12px;
+  margin: 0;
+  background-color: white; }
+
+/* Header Styles */
+#header {
+  position: relative;
+  height: 50px;
+  width: 100%;
+  background: #0f0f0f linear-gradient(#3f3f3f, #0f0f0f);
+  color: white;
+  line-height: 50px;
+  box-sizing: border-box;
+  padding-left: 20px;
+  padding-right: 20px; }
+  #header div.title {
+    float: left;
+    height: 50px;
+    width: auto; }
+    #header div.title a {
+      font-size: 15px;
+      color: white;
+      text-decoration: none; }
+      #header div.title a:hover {
+        text-decoration: underline; }
+  #header div.header-menu {
+    float: left;
+    padding-left: 100px; }
+  #header div.header-button {
+    float: left;
+    height: 50px;
+    margin-right: 30px;
+    color: white; }
+    #header div.header-button a {
+      color: white;
+      text-decoration: none; }
+      #header div.header-button a:hover {
+        text-decoration: underline; }
+
+/* Content Styles */
+#content {
+  height: auto;
+  min-height: calc(100vh - 150px);
+  padding: 20px;
+  background-color: white;
+  /* Form Styles */
+  /* Button Styles */
+  /* Table Styles */
+  /* Notification Styles */ }
+  #content h1 {
+    color: #3e3b3b; }
+  #content a {
+    color: blue;
+    text-decoration: none; }
+    #content a:hover {
+      text-decoration: underline; }
+  #content .form {
+    margin: 25px 0; }
+    #content .form .input-group,
+    #content .form .buttons {
+      padding-bottom: 10px; }
+    #content .form .input-group > label {
+      font-weight: bold;
+      line-height: 22px;
+      font-size: 13px; }
+    #content .form .input-group > .input-info {
+      padding-bottom: 5px;
+      color: #999; }
+    #content .form .input input,
+    #content .form .input textarea,
+    #content .form .input select {
+      background: #fefefe;
+      border: 1px solid #c8c8c8;
+      border-radius: 3px;
+      margin-bottom: 5px;
+      padding: 0 10px;
+      box-shadow: inset 1px 1px 3px #e6e6e6; }
+      #content .form .input input:focus,
+      #content .form .input textarea:focus,
+      #content .form .input select:focus {
+        border: 1px solid #898989; }
+    #content .form .input input {
+      min-width: 180px; }
+    #content .form .input input[type="number"] {
+      padding-right: 0;
+      min-width: 190px; }
+    #content .form .input textarea {
+      min-height: 150px;
+      min-width: 400px;
+      line-height: 18px !important;
+      padding-top: 8px;
+      padding-bottom: 8px; }
+    #content .form .input select {
+      padding: 8px 10px 9px;
+      min-width: 200px; }
+      #content .form .input select option[value=""] {
+        color: #ccc; }
+    #content .form .input input,
+    #content .form .input textarea, #content .form .input.input-labeled.input-labeled-left > *:first-child, #content .form .input.input-labeled.input-labeled-right > *:last-child {
+      line-height: 33px; }
+    #content .form .input.input-labeled.input-labeled-left > *:first-child, #content .form .input.input-labeled.input-labeled-right > *:last-child {
+      background: #eee;
+      border: 1px solid #c8c8c8;
+      border-radius: 3px;
+      display: inline-block;
+      margin: 0 0 0 3px;
+      padding: 0 10px;
+      position: absolute; }
+    #content .form .input.input-action > *:first-child, #content .form .input.input-labeled > *:first-child {
+      border-top-right-radius: 0 !important;
+      border-bottom-right-radius: 0 !important;
+      margin-right: -4px; }
+    #content .form .input.input-action > *:last-child, #content .form .input.input-labeled > *:last-child {
+      border-top-left-radius: 0 !important;
+      border-bottom-left-radius: 0 !important; }
+  #content .buttons {
+    margin: 15px 0; }
+  #content .form .buttons {
+    margin: 0; }
+  #content .buttons.buttons-horizontal .button {
+    display: block;
+    margin-top: 10px; }
+    #content .buttons.buttons-horizontal .button:first-child {
+      margin-top: 0; }
+  #content .button {
+    background: #dddddd;
+    background: linear-gradient(white, #eaeaea);
+    border: 1px solid #c8c8c8;
+    border-radius: 3px;
+    font-family: arial, serif;
+    transition: all 0.2s;
+    height: auto;
+    min-width: 200px;
+    width: 200px;
+    line-height: 31px;
+    font-size: 13px;
+    text-align: center;
+    color: #393939;
+    text-decoration: none; }
+    #content .button:hover {
+      box-shadow: 1px 1px 4px #dbdbdb;
+      text-decoration: none;
+      cursor: pointer; }
+  #content a.button {
+    display: inline-block; }
+  #content .button.button-large,
+  #content .buttons.button-large .button {
+    min-width: 300px;
+    width: 300px;
+    font-size: 15px;
+    line-height: 45px;
+    color: #393939; }
+  #content .button.button-primary,
+  #content .buttons.button-primary .button {
+    background: #666;
+    background: linear-gradient(#999999, #666666);
+    border-color: #444;
+    color: #fff; }
+    #content .button.button-primary:hover, #content .button.button-primary:active,
+    #content .buttons.button-primary .button:hover,
+    #content .buttons.button-primary .button:active {
+      background: #777;
+      background: linear-gradient(#777777, #444444);
+      border-color: #333;
+      color: #fff; }
+  #content .table {
+    margin: 25px 0;
+    border-collapse: collapse;
+    border: none; }
+    #content .table a {
+      color: #9494ff; }
+    #content .table thead th {
+      line-height: 38px;
+      padding: 2px 15px 0;
+      border: 1px solid #b3b0b0;
+      background: #eeeeee;
+      background: linear-gradient(white, #eaeaea);
+      font-size: 13px; }
+    #content .table tfoot th {
+      line-height: 33px;
+      text-align: left;
+      padding: 0 10px;
+      font-weight: normal;
+      color: #999; }
+    #content .table tbody td {
+      line-height: 21px;
+      padding: 9px 10px;
+      border: 1px solid #b3b0b0; }
+    #content .table tbody > tr:hover {
+      background-color: #eaeaea; }
+    #content .table tbody > tr.warning {
+      background-color: #fcf897; }
+    #content .table tbody > tr:hover a {
+      color: blue; }
+  #content .table-compact {
+    margin: 5px 0; }
+  #content .notification {
+    height: auto;
+    width: 100%;
+    margin: 15px 0;
+    text-align: center;
+    border: 1px solid;
+    border-radius: 3px;
+    padding: 15px 10px;
+    box-sizing: border-box; }
+    #content .notification.notification-fail {
+      background-color: #fcacac;
+      border-color: red; }
+    #content .notification.notification-warning {
+      background-color: #fcf897;
+      border-color: #ffe600; }
+    #content .notification.notification-success {
+      background-color: #b6ffb7;
+      border-color: green; }
+
+/* Footer Styles */
+#footer {
+  position: relative;
+  width: 100%;
+  background-color: white;
+  padding: 15px 20px;
+  box-sizing: border-box;
+  color: grey; }
+  #footer a {
+    color: #888888; }
+    #footer a:hover {
+      color: #666666; }
+  #footer ul {
+    list-style: none; }
+  #footer li {
+    display: inline-block; }
+    #footer li:not(:last-child):after {
+      content: '|';
+      color: #444444;
+      padding: 0 6px; }

include/php/template/layout.php

@@ -2,7 +2,7 @@
 <html>
 <head>
 	<title>WebMUM</title>
-	<link rel=stylesheet href="<?php echo Router::url('include/css/style.css'); ?>" type="text/css" media=screen>
+	<link rel=stylesheet href="<?php echo Router::url('include/css/webmum.style.css?v=1.00'); ?>" type="text/css" media=screen>
 	<script type="text/javascript">
 		function generatePassword() {
 			var length = <?php echo Config::get('password.min_length', 8) + 1; ?>,

include/scss/partials/_styles.scss

@@ -0,0 +1,299 @@
+body {
+  font-family: arial, serif;
+  font-size: 12px;
+  margin: 0;
+  background-color: white;
+}
+
+/* Header Styles */
+#header {
+  position: relative;
+  height: 50px;
+  width: 100%;
+  background: rgba(15, 15, 15, 1) linear-gradient(rgba(63, 63, 63, 1), rgba(15, 15, 15, 1));
+  color: white;
+  line-height: 50px;
+  box-sizing: border-box;
+  padding-left: 20px;
+  padding-right: 20px;
+  div.title {
+    float: left;
+    height: 50px;
+    width: auto;
+    a {
+      font-size: 15px;
+      color: white;
+      text-decoration: none;
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+  div.header-menu {
+    float: left;
+    padding-left: 100px;
+  }
+  div.header-button {
+    float: left;
+    height: 50px;
+    margin-right: 30px;
+    color: white;
+    a {
+      color: white;
+      text-decoration: none;
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+}
+
+/* Content Styles */
+#content {
+  height: auto;
+  min-height: calc(100vh - 150px);
+  padding: 20px;
+  background-color: white;
+  h1 {
+    color: rgba(62, 59, 59, 1);
+  }
+  a {
+    color: blue;
+    text-decoration: none;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+  /* Form Styles */
+  .form {
+    margin: 25px 0;
+    .input-group,
+    .buttons {
+      padding-bottom: 10px;
+    }
+    .input-group > label {
+      font-weight: bold;
+      line-height: 22px;
+      font-size: 13px;
+    }
+    .input-group > .input-info {
+      padding-bottom: 5px;
+      color: #999;
+    }
+    .input {
+      input,
+      textarea,
+      select {
+        background: #fefefe;
+        border: 1px solid rgba(200, 200, 200, 1);
+        border-radius: 3px;
+        margin-bottom: 5px;
+        padding: 0 10px;
+        box-shadow: inset 1px 1px 3px rgba(230, 230, 230, 1);
+        &:focus {
+          border: 1px solid rgba(137, 137, 137, 1);
+        }
+      }
+      input {
+        min-width: 180px;
+      }
+      input[type="number"] {
+        padding-right: 0;
+        min-width: 190px;
+      }
+      textarea {
+        min-height: 150px;
+        min-width: 400px;
+        line-height: 18px !important;
+        padding-top: 8px;
+        padding-bottom: 8px;
+      }
+      select {
+        padding: 8px 10px 9px;
+        min-width: 200px;
+        option[value=""] {
+          color: #ccc;
+        }
+      }
+      input,
+      textarea,
+      &.input-labeled.input-labeled-left > *:first-child,
+      &.input-labeled.input-labeled-right > *:last-child {
+        line-height: 33px;
+      }
+      &.input-labeled.input-labeled-left > *:first-child,
+      &.input-labeled.input-labeled-right > *:last-child {
+        background: #eee;
+        border: 1px solid rgba(200, 200, 200, 1);
+        border-radius: 3px;
+        display: inline-block;
+        margin: 0 0 0 3px;
+        padding: 0 10px;
+        position: absolute;
+      }
+      &.input-action,
+      &.input-labeled {
+        > *:first-child {
+          border-top-right-radius: 0 !important;
+          border-bottom-right-radius: 0 !important;
+          margin-right: -4px;
+        }
+        > *:last-child {
+          border-top-left-radius: 0 !important;
+          border-bottom-left-radius: 0 !important;
+        }
+      }
+    }
+  }
+  /* Button Styles */
+  .buttons {
+    margin: 15px 0;
+  }
+  .form .buttons {
+    margin: 0;
+  }
+  .buttons.buttons-horizontal .button {
+    display: block;
+    margin-top: 10px;
+    &:first-child {
+      margin-top: 0;
+    }
+  }
+  .button {
+    background: #dddddd;
+    background: linear-gradient(#ffffff, #eaeaea);
+    border: 1px solid rgba(200, 200, 200, 1);
+    border-radius: 3px;
+    font-family: arial, serif;
+    transition: all 0.2s;
+    height: auto;
+    min-width: 200px;
+    width: 200px;
+    line-height: 31px;
+    font-size: 13px;
+    text-align: center;
+    color: rgba(57, 57, 57, 1);
+    text-decoration: none;
+    &:hover {
+      box-shadow: 1px 1px 4px #dbdbdb;
+      text-decoration: none;
+      cursor: pointer;
+    }
+  }
+  a.button {
+    display: inline-block;
+  }
+  .button.button-large,
+  .buttons.button-large .button {
+    min-width: 300px;
+    width: 300px;
+    font-size: 15px;
+    line-height: 45px;
+    color: rgba(57, 57, 57, 1);
+  }
+  .button.button-primary,
+  .buttons.button-primary .button {
+    background: #666;
+    background: linear-gradient(#999, #666);
+    border-color: #444;
+    color: #fff;
+    &:hover,
+    &:active {
+      background: #777;
+      background: linear-gradient(#777777, #444);
+      border-color: #333;
+      color: #fff;
+    }
+  }
+  /* Table Styles */
+  .table {
+    margin: 25px 0;
+    border-collapse: collapse;
+    border: none;
+    a {
+      color: rgb(148, 148, 255);
+    }
+    thead th {
+      line-height: 38px;
+      padding: 2px 15px 0;
+      border: 1px solid rgba(179, 176, 176, 1);
+      background: #eeeeee;
+      background: linear-gradient(#ffffff, #eaeaea);
+      font-size: 13px;
+    }
+    tfoot th {
+      line-height: 33px;
+      text-align: left;
+      padding: 0 10px;
+      font-weight: normal;
+      color: #999;
+    }
+    tbody td {
+      line-height: 21px;
+      padding: 9px 10px;
+      border: 1px solid rgba(179, 176, 176, 1);
+    }
+    tbody > tr:hover {
+      background-color: rgba(234, 234, 234, 1);
+    }
+    tbody > tr.warning {
+      background-color: #fcf897;
+    }
+    tbody > tr:hover a {
+      color: blue;
+    }
+  }
+  .table-compact {
+    margin: 5px 0;
+  }
+  /* Notification Styles */
+  .notification {
+    height: auto;
+    width: 100%;
+    margin: 15px 0;
+    text-align: center;
+    border: 1px solid;
+    border-radius: 3px;
+    padding: 15px 10px;
+    box-sizing: border-box;
+    &.notification-fail {
+      background-color: #fcacac;
+      border-color: red;
+    }
+    &.notification-warning {
+      background-color: #fcf897;
+      border-color: #ffe600;
+    }
+    &.notification-success {
+      background-color: rgba(182, 255, 183, 1);
+      border-color: green;
+    }
+  }
+}
+
+/* Footer Styles */
+#footer {
+  position: relative;
+  width: 100%;
+  background-color: white;
+  padding: 15px 20px;
+  box-sizing: border-box;
+  color: grey;
+  a {
+    color: #888888;
+    &:hover {
+      color: #666666;
+    }
+  }
+  ul {
+    list-style: none;
+  }
+  li {
+    display: inline-block;
+    &:not(:last-child):after {
+      content: '|';
+      color: #444444;
+      padding: 0 6px;
+    }
+  }
+}

include/scss/partials/_variables.scss

@@ -0,0 +1,4 @@
+// @file
+// SASS partials import
+// -----------------------------------------------------------------------------
+

include/scss/webmum.style.scss

@@ -0,0 +1,6 @@
+// @file
+// SASS partials import
+// -----------------------------------------------------------------------------
+
+@import "partials/variables";
+@import "partials/styles";