aboutsummaryrefslogtreecommitdiff
path: root/color
diff options
context:
space:
mode:
Diffstat (limited to 'color')
-rw-r--r--color/base.pngbin0 -> 193 bytes
-rw-r--r--color/color.inc194
-rw-r--r--color/preview.css92
-rw-r--r--color/preview.html45
-rw-r--r--color/preview.js136
5 files changed, 467 insertions, 0 deletions
diff --git a/color/base.png b/color/base.png
new file mode 100644
index 0000000..6cea0cd
--- /dev/null
+++ b/color/base.png
Binary files differ
diff --git a/color/color.inc b/color/color.inc
new file mode 100644
index 0000000..2409a6f
--- /dev/null
+++ b/color/color.inc
@@ -0,0 +1,194 @@
+<?php
+// $Id$
+
+/**
+ * @file
+ * Color module integration.
+ */
+
+// The preview looks like PURE crap when Sky is not the admin theme and alters
+// to change the current theme temporarily have zero effect. Attempting to make
+// the preview work with Seven or any other theme for that matter, would be a
+// LOT of work that would negatively affect the code quality itself, which I'm
+// not willing to do. As a result the preview is only supported when Sky is
+// the active theme for that page, so I've created a module to handle this:
+// http://drupal.org/project/colortheme
+
+global $theme;
+$css = ($theme == 'sky') ? 'color/preview.css' : array();
+$js = ($theme == 'sky') ? 'color/preview.js' : array();
+
+
+$info = array(
+ 'fields' => array(
+ 'page_background' => t('Background'),
+ 'text' => t('Foreground'),
+ 'site_name' => t('Site name'),
+ 'site_slogan' => t('Site slogan'),
+ 'navigation_background' => t('Background'),
+ 'navigation_foreground' => t('Foreground'),
+ 'title_page' => t('Page title'),
+ 'title_block' => t('Block title'),
+ 'title_linked' => t('Linked titles'),
+ 'link' => t('Links'),
+ 'link_hover' => t('Links hover'),
+ 'tab_background' => t('Background'),
+ 'tab_foreground' => t('Foreground'),
+ 'tab_background_active' => t('Background hover'),
+ 'tab_foreground_active' => t('Foreground hover'),
+ 'node_links_background' => t('Background'),
+ 'node_links_foreground' => t('Foreground'),
+ 'node_links_background_hover' => t('Background hover'),
+ 'node_links_foreground_hover' => t('Foreground hover'),
+ 'footer_background' => t('Background'),
+ 'footer_foreground' => t('Foreground'),
+ 'footer_links' => t('Links'),
+ 'footer_links_hover' => t('Links hover'),
+ 'header_foreground' => t('Foreground'),
+ 'header_links' => t('Links'),
+ 'header_links_hover' => t('Links hover'),
+ ),
+ 'schemes' => array(
+ 'default' => array(
+ 'title' => t('Vanilla Sky (default)'),
+ 'colors' => array(
+ 'page_background' => '#efedea',
+ 'text' => '#000000',
+ 'tab_background' => '#fffffe',
+ 'tab_foreground' => '#101010',
+ 'tab_background_active' => '#efedeb',
+ 'tab_foreground_active' => '#111111',
+ 'site_name' => '#4c4742',
+ 'site_slogan' => '#837b72',
+ 'navigation_background' => '#e1dfdc',
+ 'navigation_foreground' => '#4d453e',
+ 'title_page' => '#100001',
+ 'title_block' => '#5e5247',
+ 'title_linked' => '#100011',
+ 'link' => '#1c6ea0',
+ 'link_hover' => '#42a9be',
+ 'node_links_background' => '#e7e5e3',
+ 'node_links_foreground' => '#100100',
+ 'node_links_background_hover' => '#d7d5d3',
+ 'node_links_foreground_hover' => '#100101',
+ 'footer_background' => '#e3e1df',
+ 'footer_foreground' => '#010101',
+ 'footer_links' => '#126598',
+ 'footer_links_hover' => '#127ba5',
+ 'header_foreground' => '#101000',
+ 'header_links' => '#0679be',
+ 'header_links_hover' => '#42a9ba',
+ ),
+ ),
+ 'blue' => array(
+ 'title' => t('Blue Sky'),
+ 'colors' => array(
+ 'page_background' => '#195594',
+ 'text' => '#000000',
+ 'tab_background' => '#eeeeee',
+ 'tab_foreground' => '#000000',
+ 'tab_background_active' => '#ededed',
+ 'tab_foreground_active' => '#000000',
+ 'site_name' => '#ffffff',
+ 'site_slogan' => '#ffffff',
+ 'navigation_background' => '#5d9dd0',
+ 'navigation_foreground' => '#ffffff',
+ 'title_page' => '#100001',
+ 'title_block' => '#888888',
+ 'title_linked' => '#000000',
+ 'link' => '#2897d7',
+ 'link_hover' => '#1473d7',
+ 'node_links_background' => '#eeeeee',
+ 'node_links_foreground' => '#000002',
+ 'node_links_background_hover' => '#aaaaaa',
+ 'node_links_foreground_hover' => '#000003',
+ 'footer_background' => '#eeeeee',
+ 'footer_foreground' => '#000000',
+ 'footer_links' => '#2897d7',
+ 'footer_links_hover' => '#1473d7',
+ 'header_foreground' => '#ffffff',
+ 'header_links' => '#78bbe2',
+ 'header_links_hover' => '#42a9be',
+ ),
+ ),
+ 'purple' => array(
+ 'title' => t('Purple'),
+ 'colors' => array(
+ 'page_background' => '#382d49',
+ 'text' => '#000000',
+ 'tab_background' => '#efedea',
+ 'tab_foreground' => '#000000',
+ 'tab_background_active' => '#382d48',
+ 'tab_foreground_active' => '#ffffff',
+ 'site_name' => '#ffffff',
+ 'site_slogan' => '#ccbcd2',
+ 'navigation_background' => '#ada2b4',
+ 'navigation_foreground' => '#000000',
+ 'title_page' => '#5f3276',
+ 'title_block' => '#666666',
+ 'title_linked' => '#482762',
+ 'link' => '#4f1b88',
+ 'link_hover' => '#8e45d3',
+ 'node_links_background' => '#ddd6e0',
+ 'node_links_foreground' => '#000000',
+ 'node_links_background_hover' => '#d7d5d3',
+ 'node_links_foreground_hover' => '#000000',
+ 'footer_background' => '#4a3f5a',
+ 'footer_foreground' => '#f8f2f2',
+ 'footer_links' => '#b195b0',
+ 'footer_links_hover' => '#42a9be',
+ 'header_foreground' => '#cccccc',
+ 'header_links' => '#997da6',
+ 'header_links_hover' => '#42a9be',
+ ),
+ ),
+ 'red' => array(
+ 'title' => t('Red'),
+ 'colors' => array(
+ 'page_background' => '#a21a2e',
+ 'text' => '#000000',
+ 'tab_background' => '#fffffe',
+ 'tab_foreground' => '#101010',
+ 'tab_background_active' => '#efedeb',
+ 'tab_foreground_active' => '#111111',
+ 'site_name' => '#ffffff',
+ 'site_slogan' => '#ffffff',
+ 'navigation_background' => '#8a0509',
+ 'navigation_foreground' => '#ffffff',
+ 'title_page' => '#000000',
+ 'title_block' => '#999999',
+ 'title_linked' => '#000000',
+ 'link' => '#cf3f54',
+ 'link_hover' => '#42a9be',
+ 'node_links_background' => '#e7e5e3',
+ 'node_links_foreground' => '#54493e',
+ 'node_links_background_hover' => '#d7d5d3',
+ 'node_links_foreground_hover' => '#42382e',
+ 'footer_background' => '#8a0509',
+ 'footer_foreground' => '#ffffff',
+ 'footer_links' => '#aaaaaa',
+ 'footer_links_hover' => '#42a9be',
+ 'header_foreground' => '#ffffff',
+ 'header_links' => '#aaaaaa',
+ 'header_links_hover' => '#42a9be',
+ ),
+ ),
+ ),
+
+ // Misc settings.
+ 'css' => array('css/colors.css'),
+ 'base_image' => 'color/base.png',
+ 'blend_target' => '#ffffff',
+ 'copy' => array('logo.png'),
+
+ // Preview files.
+ 'preview_css' => $css,
+ 'preview_js' => $js,
+ 'preview_html' => 'color/preview.html',
+
+ // Unused.
+ 'gradients' => array(),
+ 'fill' => array(),
+ 'slices' => array(),
+);
+
diff --git a/color/preview.css b/color/preview.css
new file mode 100644
index 0000000..ecb2628
--- /dev/null
+++ b/color/preview.css
@@ -0,0 +1,92 @@
+/* $Id*/
+
+/* Page tweaks
+-------------------------------------------------------------------------*/
+.region-content {
+ padding-top: 0;
+}
+h1.title
+.region-help {
+ padding-left: 16px;
+ padding-right: 16px;
+}
+#content > div.inner {
+ padding-left: 0;
+ padding-right: 0;
+}
+
+
+/* Color scheme form
+-------------------------------------------------------------------------*/
+fieldset#color_scheme_form {
+ font-size: 0.923em;
+ padding: 0;
+ margin: 0;
+ border: none;
+}
+#color_scheme_form .color-form {
+ max-width: none;
+}
+#color_scheme_form > legend {
+ position: absolute;
+ clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
+ clip: rect(1px, 1px, 1px, 1px);
+}
+fieldset#color_scheme_form > .fieldset-wrapper {
+ padding: 0;
+}
+.form-item-scheme label {
+ display: inline;
+ margin: 0 1em 0 1em;
+}
+/* Palette */
+#color_scheme_form #palette fieldset {
+ margin: 1em 0 0 0;
+ border: none;
+}
+#color_scheme_form .color-form label {
+ margin-left: 0;
+}
+#color_scheme_form #palette .form-item {
+ padding: 0;
+}
+#color_scheme_form .color-form input.form-text {
+ padding: 0.1em;
+ border-width: 1px;
+}
+#color_scheme_form #palette .item-selected {
+ background-color: transparent;
+ font-weight: bold;
+}
+/* Lock icons */
+#color_scheme_form .hook {
+ display: none;
+}
+#color_scheme_form #palette .lock {
+ background: url(../images/black.png) no-repeat 0 -66px;
+ top: 0;
+ left: auto;
+ width: 20px;
+ height: 25px;
+}
+#color_scheme_form #palette .unlocked {
+ background: url(../images/gray.png) no-repeat 0 -66px;
+}
+
+
+/* Preview
+-------------------------------------------------------------------------*/
+#color_scheme_form .color-form > h2 {
+ background-color: transparent;
+ color: #999;
+ font-size: 1em;
+ font-weight: bold;
+ letter-spacing: 0.25em;
+ padding-left: 0.5em;
+ text-transform: uppercase;
+}
+#preview {
+ padding: 1em 0 0 0;
+ margin-bottom: 1em;
+ border-bottom: solid 1px #e6e4e2;
+}
diff --git a/color/preview.html b/color/preview.html
new file mode 100644
index 0000000..c8a5d41
--- /dev/null
+++ b/color/preview.html
@@ -0,0 +1,45 @@
+<div id="preview" class="clearfix grid-16 alpha omega">
+<div id="preview-main" class="grid-10 alpha">
+ <div class="region-content">
+ <article class="node teaser">
+ <h2 class="node-title title"><a href="#">Linked node teaser title</a></h2>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+ eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+ ad minim veniam, <a href="#">quis nostrud exercitation ullamco laboris
+ nisi ut</a> aliquip ex ea commodo consequat. Duis aute irure dolor in
+ reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+ pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+ culpa qui officia deserunt mollit anim id est laborum.</p>
+ <footer>
+ <nav class="links">
+ <ul class="links inline">
+ <li class="node-readmore first"><a href="#" rel="tag" title="Hi!">Read more<span class="element-invisible"> about Hi!</span></a></li>
+ <li class="comment_forbidden last"><span><a href="#">Log in</a> or <a href="#">register</a> to post comments</span></li>
+ </ul>
+ </nav>
+ </footer>
+ </article>
+ </div>
+</div>
+<div id="preview-sidebar" class="sidebar grid-6 omega">
+ <div class="block last">
+ <div class="inner">
+ <h2 class="block-title">Block title</h2>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+ eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+ minim veniam, quis nostrud <a href="#">exercitation ullamco</a> laboris
+ nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+ reprehenderit.</p>
+ </div>
+ </div>
+</div>
+<div class="item-list grid-10"><ul class="pager"><li class="pager-current first">1</li>
+<li class="pager-item"><a href="/node?page=1" title="Go to page 2" class="active">2</a></li>
+<li class="pager-item"><a href="/node?page=2" title="Go to page 3" class="active">3</a></li>
+<li class="pager-item"><a href="/node?page=3" title="Go to page 4" class="active">4</a></li>
+<li class="pager-item"><a href="/node?page=4" title="Go to page 5" class="active">5</a></li>
+<li class="pager-item"><a href="/node?page=5" title="Go to page 6" class="active">6</a></li>
+<li class="pager-next"><a href="/node?page=1" title="Go to next page" class="active">next ›</a></li>
+<li class="pager-last last"><a href="/node?page=5" title="Go to last page" class="active">last »</a></li>
+</ul></div>
+</div>
diff --git a/color/preview.js b/color/preview.js
new file mode 100644
index 0000000..2644a06
--- /dev/null
+++ b/color/preview.js
@@ -0,0 +1,136 @@
+// $Id$
+(function ($) {
+ Drupal.color = {
+ callback: function(context, settings, form, farb, height, width) {
+
+ // Apply grid classes to the farbtastic container.
+ $('#placeholder').addClass('grid-4').addClass('push-6').addClass('alpha').addClass('omega');
+
+ var wrapper = $('#container');
+
+ $('#edit-scheme').change(function() {
+ var current = $(this).val();
+ var scheme = settings.color.schemes[current];
+ for (var i in scheme) {
+ $('#palette input[name="palette['+ i + ']"]', form).val(scheme[i]).css('background-color', scheme[i]);
+ };
+ Drupal.color.callback(context, settings, form, farb, height, width);
+ });
+
+ // Make variables for the selectors so the processing is more readable.
+ var page = 'html, body';
+ var tabs = '#skip-link a, .tabs a';
+ var tabs_active = '.tabs a.active';
+ var site_name = 'h1.site-name a';
+ var site_slogan = 'h2.site-slogan';
+ var navigation = '.region-navigation .content ul a, .region-navigation .content ul a:visited';
+ var title_page = 'h1.title';
+ var title_block = 'h2.block-title';
+ var title_linked = 'h2.title a';
+ var links = 'a, .a:visited';
+ var node_links = 'article .links a, article .links a:visited';
+ var header = '.region-header, .region-navigation, .region-header h2.block-title, .region-navigation h2.block-title';
+ var header_links = '.region-header a, .region-header a:visited';
+ var footer = '.breadcrumb, footer.section, footer.section .block-title';
+ var footer_links = '.breadcrumb a, footer.section a, footer.section a:visited';
+
+ // Page
+ $(page, context)
+ .css('background-color', $('#palette input[name="palette[page_background]"]', form).val())
+ .css('color', $('#palette input[name="palette[page_foreground]"]', form).val());
+
+ // Links
+ $(links, wrapper).css('color', $('#palette input[name="palette[links]"]', form).val());
+ $(links, wrapper).hover(function() {
+ $(this).css('color', $('#palette input[name="palette[links_hover]"]', form).val());
+ }, function() {
+ $(this).css('color', $('#palette input[name="palette[links]"]', form).val());
+ });
+
+ // Identity
+ $(site_name, context).css('color', $('#palette input[name="palette[site_name]"]', form).val());
+ $(site_slogan, context).css('color', $('#palette input[name="palette[site_slogan]"]', form).val());
+
+ // Navigation
+ $(navigation, context).css('background-color', $('#palette input[name="palette[navigation_background]"]', form).val())
+ .css('color', $('#palette input[name="palette[navigation_foreground]"]', form).val());
+ $(navigation, context).hover(function() {
+ $(this).css({
+ backgroundColor: '#fff',
+ color: $('#palette input[name="palette[page_foreground]"]', form).val(),
+ })
+ }, function() {
+ $(this).css('background-color', $('#palette input[name="palette[navigation_background]"]', form).val())
+ .css('color', $('#palette input[name="palette[navigation_foreground]"]', form).val());
+ });
+
+ // Tabs
+ $(tabs, context).css({
+ backgroundColor: $('#palette input[name="palette[tab_background]"]', form).val(),
+ color: $('#palette input[name="palette[tab_foreground]"]', form).val()
+ });
+ $(tabs, context).not(tabs_active).hover(function() {
+ $(this).css({
+ backgroundColor: $('#palette input[name="palette[tab_background_active]"]', form).val(),
+ color: $('#palette input[name="palette[tab_foreground_active]"]', form).val(),
+ })
+ }, function() {
+ $(this).css({
+ backgroundColor: $('#palette input[name="palette[tab_background]"]', form).val(),
+ color: $('#palette input[name="palette[tab_foreground]"]', form).val()
+ })
+ });
+ $(tabs_active, context).css({
+ backgroundColor: $('#palette input[name="palette[tab_background_active]"]', form).val(),
+ color: $('#palette input[name="palette[tab_foreground_active]"]', form).val(),
+ });
+ $(tabs_active, context).hover(function() {
+ $(this).css({
+ backgroundColor: $('#palette input[name="palette[tab_background_active]"]', form).val(),
+ color: $('#palette input[name="palette[tab_foreground_active]"]', form).val(),
+ })
+ }, function() {
+ $(this).css({
+ backgroundColor: $('#palette input[name="palette[tab_background_active]"]', form).val(),
+ color: $('#palette input[name="palette[tab_foreground_active]"]', form).val(),
+ })
+ });
+
+ // Titles
+ $(title_page, context).css('color', $('#palette input[name="palette[title_page]"]', form).val());
+ $(title_block, context).css('color', $('#palette input[name="palette[title_block]"]', form).val());
+ $(title_linked, context).css('color', $('#palette input[name="palette[title_linked]"]', form).val());
+
+ // Node links
+ $(node_links, context).css('background-color', $('#palette input[name="palette[node_links_background]"]', form).val())
+ .css('color', $('#palette input[name="palette[node_links_foreground]"]', form).val());
+ $(node_links, context).hover(function() {
+ $(this).css('background-color', $('#palette input[name="palette[node_links_background_hover]"]', form).val())
+ .css('color', $('#palette input[name="palette[node_links_foreground_hover]"]', form).val());
+ }, function() {
+ $(this).css('background-color', $('#palette input[name="palette[node_links_background]"]', form).val())
+ .css('color', $('#palette input[name="palette[node_links_foreground]"]', form).val());
+ });
+
+ // Header
+ $(header, context).css('color', $('#palette input[name="palette[header_foreground]"]', form).val())
+ $(header_links, context).css('color', $('#palette input[name="palette[header_links]"]', form).val());
+ $(header_links, context).hover(function() {
+ $(this).css('color', $('#palette input[name="palette[header_links_hover]"]', form).val());
+ }, function() {
+ $(this).css('color', $('#palette input[name="palette[header_links]"]', form).val());
+ });
+
+ // Footer
+ $(footer, context).css('background-color', $('#palette input[name="palette[footer_background]"]', form).val())
+ .css('color', $('#palette input[name="palette[footer_foreground]"]', form).val());
+ $(footer_links, context).css('color', $('#palette input[name="palette[footer_links]"]', form).val());
+ $(footer_links, context).hover(function() {
+ $(this).css('color', $('#palette input[name="palette[footer_links_hover]"]', form).val());
+ }, function() {
+ $(this).css('color', $('#palette input[name="palette[footer_links]"]', form).val());
+ });
+
+ }
+ };
+})(jQuery);
generated by cgit v1.2.3 (git 2.39.1) at 2024-04-19 21:47:14 +0000