Add plum theme.

misc/theme-plum-community/Makefile

@@ -0,0 +1,6 @@
+PLUGIN_NAME=		theme-plum-community
+PLUGIN_VERSION=		0.1
+PLUGIN_COMMENT=		Plum theme
+PLUGIN_MAINTAINER=	[email protected]
+
+.include "../../Mk/plugins.mk"

misc/theme-plum-community/pkg-descr

@@ -0,0 +1,3 @@
+A theme using purple and greys.
+
+It's a light theme but there are no bright whites.

misc/theme-plum-community/src/opnsense/www/themes/plum/assets/stylesheets/_bootstrap-compass.scss

@@ -0,0 +1,7 @@
+@function twbs-font-path($path) {
+  @return font-url($path, true);
+}
+
+@function twbs-image-path($path) {
+  @return image-url($path, true);
+}

misc/theme-plum-community/src/opnsense/www/themes/plum/assets/stylesheets/_bootstrap-mincer.scss

@@ -0,0 +1,17 @@
+// Mincer asset helper functions
+//
+// This must be imported into a .css.ejs.scss file.
+// Then, <% %>-interpolations will be parsed as strings by Sass, and evaluated by EJS after Sass compilation.
+
+
+@function twbs-font-path($path) {
+  // do something like following
+  // from "path/to/font.ext#suffix" to "<%- asset_path(path/to/font.ext)) + #suffix %>"
+  // from "path/to/font.ext?#suffix" to "<%- asset_path(path/to/font.ext)) + ?#suffix %>"
+  // or from "path/to/font.ext" just "<%- asset_path(path/to/font.ext)) %>"
+  @return "<%- asset_path('#{$path}'.replace(/[#?].*$/, '')) + '#{$path}'.replace(/(^[^#?]*)([#?]?.*$)/, '$2') %>";
+}
+
+@function twbs-image-path($file) {
+  @return "<%- asset_path('#{$file}') %>";
+}

misc/theme-plum-community/src/opnsense/www/themes/plum/assets/stylesheets/_bootstrap-sprockets.scss

@@ -0,0 +1,7 @@
+@function twbs-font-path($path) {
+  @return font-path($path);
+}
+
+@function twbs-image-path($path) {
+  @return image-path($path);
+}

misc/theme-plum-community/src/opnsense/www/themes/plum/assets/stylesheets/bootstrap-dialog.less

@@ -0,0 +1,132 @@
+.modal-backdrop {
+    z-index: -1;
+}
+.bootstrap-dialog {
+    /* Icon animation Copied from font-awesome: http://fontawesome.io; */
+    .modal-header {
+        border-top-left-radius: 4px;
+        border-top-right-radius: 4px;
+    }
+    .bootstrap-dialog-title {
+        color: #fff;
+        display: inline-block;
+    }
+    .bootstrap-dialog-button-icon {
+        margin-right: 3px;
+    }
+    .bootstrap-dialog-close-button {
+        float: right;
+        filter: alpha(opacity=90);
+        -moz-opacity: 0.9;
+        -khtml-opacity: 0.9;
+        opacity: 0.9;
+    }
+    .bootstrap-dialog-close-button:hover {
+        cursor: pointer;
+        filter: alpha(opacity=100);
+        -moz-opacity: 1;
+        -khtml-opacity: 1;
+        opacity: 1;
+    }
+    .icon-spin {
+        display: inline-block;
+        -moz-animation: spin 2s infinite linear;
+        -o-animation: spin 2s infinite linear;
+        -webkit-animation: spin 2s infinite linear;
+        animation: spin 2s infinite linear;
+    }
+}
+.bootstrap-dialog.type-default {
+    .modal-header {
+        background-color: #427795;
+    }
+    .bootstrap-dialog-title {
+        color: #FFF;
+    }
+}
+.bootstrap-dialog.type-info {
+    .modal-header {
+        background-color: #c35d12;
+    }
+}
+.bootstrap-dialog.type-primary {
+    .modal-header {
+        background-color: #EA7105;
+    }
+}
+.bootstrap-dialog.type-success {
+    .modal-header {
+        background-color: #c35d12;
+    }
+}
+.bootstrap-dialog.type-warning {
+    .modal-header {
+        background-color: #CF361C;
+    }
+}
+.bootstrap-dialog.type-danger {
+    .modal-header {
+        background-color: #ee7822;
+    }
+}
+.bootstrap-dialog.size-large {
+    .bootstrap-dialog-title {
+        font-size: 24px;
+    }
+    .bootstrap-dialog-close-button {
+        font-size: 30px;
+    }
+    .bootstrap-dialog-message {
+        font-size: 18px;
+    }
+}
+@-moz-keyframes {
+    spin {
+        0%;
+    }
+}
+-moz-transform: {
+    rotate(0deg); {
+        100%;
+    }
+}
+@-webkit-keyframes {
+    spin {
+        0%;
+    }
+}
+-webkit-transform: {
+    rotate(0deg); {
+        100%;
+    }
+}
+@-o-keyframes {
+    spin {
+        0%;
+    }
+}
+-o-transform: {
+    rotate(0deg); {
+        100%;
+    }
+}
+@-ms-keyframes {
+    spin {
+        0%;
+    }
+}
+-ms-transform: {
+    rotate(0deg); {
+        100%;
+    }
+}
+@keyframes {
+    spin {
+        0%;
+    }
+}
+transform: {
+    rotate(0deg); {
+        100%;
+    }
+}