tmdinosaurcenter
/
tainacan-theme
mirror of https://github.com/tainacan/tainacan-theme.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Adds styling to collection collor picker.

This commit is contained in:
mateuswetah 2019-02-27 12:15:21 -03:00
parent 3e894e781c
commit 8f0cde36d4
4 changed files with 75 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

133
src/assets/js/spectrum.css
View File

@ -53,7 +53,7 @@ License: MIT
top:0; top:0;
right:0; right:0;
bottom:0; bottom:0;
left:84%; left: 87%;
height: 100%; height: 100%;
} }
@ -225,9 +225,9 @@ License: MIT
.sp-fill { padding-top: 60%; } .sp-fill { padding-top: 60%; }
} }
.sp-dragger { .sp-dragger {
border-radius: 5px; border-radius: 10px;
height: 5px; height: 6px;
width: 5px; width: 6px;
border: 1px solid #fff; border: 1px solid #fff;
background: #000; background: #000;
cursor: pointer; cursor: pointer;
@ -255,12 +255,12 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
.sp-container { .sp-container {
border-radius: 0; border-radius: 0;
background-color: #ECECEC; background-color: white;
border: solid 1px #f0c49B; border: solid 1px #dbdbdb;
padding: 0; padding: 10px;
} }
.sp-container, .sp-container button, .sp-container input, .sp-color, .sp-hue, .sp-clear { .sp-container, .sp-container button, .sp-container input, .sp-color, .sp-hue, .sp-clear {
font: normal 12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; font: normal 12px "Roboto", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-ms-box-sizing: border-box; -ms-box-sizing: border-box;
@ -270,7 +270,7 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
margin-bottom: 3px; margin-bottom: 3px;
} }
.sp-color, .sp-hue, .sp-clear { .sp-color, .sp-hue, .sp-clear {
border: solid 1px #666; border: none;
} }
/* Input */ /* Input */
@ -284,36 +284,38 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
} }
.sp-input { .sp-input {
font-size: 12px !important; font-size: 12px !important;
border: 1px inset; border: 1px solid #dbdbdb;
padding: 4px 5px; padding: 4px 5px;
margin: 0; margin: 0;
width: 100%; width: 100%;
background:transparent; background: white;
border-radius: 3px; color: #454647;
color: #222;
} }
.sp-input:focus { .sp-input:focus {
border: 1px solid orange; border: 1px solid #cbcbcb;
box-shadow: none;
} }
.sp-input.sp-validation-error { .sp-input.sp-validation-error {
border: 1px solid red; border: 1px solid #a23939;
background: #fdd; background: #eadadc
} }
.sp-picker-container , .sp-palette-container { .sp-picker-container , .sp-palette-container {
float:left; float:left;
position: relative; position: relative;
padding: 10px; padding: 12px;
padding-bottom: 300px; padding-bottom: 300px;
margin-bottom: -290px; margin-bottom: -290px;
} }
.sp-picker-container { .sp-picker-container {
width: 172px; width: 172px;
border-left: solid 1px #fff; margin-left: 12px;
} }
/* Palettes */ /* Palettes */
.sp-palette-container { .sp-palette-container .sp-palette-row-selection {
border-right: solid 1px #ccc; margin-top: 12px;
border-top: 1px solid #dbdbdb;
padding-top: 10px;
} }
.sp-palette-only .sp-palette-container { .sp-palette-only .sp-palette-container {
@ -328,7 +330,7 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
height: 15px; height: 15px;
margin: 3px; margin: 3px;
cursor: pointer; cursor: pointer;
border:solid 2px transparent; border: none;
} }
.sp-palette .sp-thumb-el:hover, .sp-palette .sp-thumb-el.sp-thumb-active { .sp-palette .sp-thumb-el:hover, .sp-palette .sp-thumb-el.sp-thumb-active {
border-color: orange; border-color: orange;
@ -358,44 +360,49 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
/* Buttons */ /* Buttons */
.sp-palette-button-container, .sp-palette-button-container,
.sp-button-container { .sp-button-container {
margin-top: 12px;
float: right; float: right;
} }
.sp-button-container {
margin-top: 12px;
}
/* Replacer (the little preview div that shows up instead of the <input>) */ /* Replacer (the little preview div that shows up instead of the <input>) */
.sp-replacer { .sp-replacer {
margin:0; margin:0;
overflow:hidden; overflow:hidden;
cursor:pointer; cursor:pointer;
padding: 4px; padding: 0px;
display:inline-block; display:inline-block;
*zoom: 1; *zoom: 1;
*display: inline; *display: inline;
border: solid 1px #91765d; border: none;
background: #eee; border-radius: 42px;
background: transparent;
color: #333; color: #333;
vertical-align: middle; vertical-align: middle;
} }
.sp-replacer:hover, .sp-replacer.sp-active { .sp-replacer:hover, .sp-replacer.sp-active {
border-color: #F0C49B;
color: #111; color: #111;
} }
.sp-replacer.sp-disabled { .sp-replacer.sp-disabled {
cursor:default; cursor:default;
border-color: silver;
color: silver; color: silver;
} }
.sp-dd { .sp-dd {
padding: 2px 0; padding: 9px 4px;
height: 16px; height: 16px;
line-height: 16px; line-height: 16px;
float:left; float:left;
font-size:10px; font-size:10px;
color: #298596;
} }
.sp-preview { .sp-preview {
position:relative; position:relative;
width:25px; width:32px;
height: 20px; height: 32px;
border: solid 1px #222; border-radius: 42px;
border: none;
margin-right: 5px; margin-right: 5px;
float:left; float:left;
z-index: 0; z-index: 0;
@ -406,10 +413,11 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
max-width: 220px; max-width: 220px;
} }
.sp-palette .sp-thumb-el { .sp-palette .sp-thumb-el {
width:16px; width: 32px;
height: 16px; height: 32px;
margin:2px 1px; margin: 3px;
border: solid 1px #d0d0d0; border: none;
border-radius: 42px;
} }
.sp-container { .sp-container {
@ -419,57 +427,35 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
/* Buttons: http://hellohappy.org/css3-buttons/ */ /* Buttons: http://hellohappy.org/css3-buttons/ */
.sp-container button { .sp-container button {
background-color: #eeeeee; background-color: #25a189;
background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc); border: none;
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc); border-radius: 4px;
background-image: -ms-linear-gradient(top, #eeeeee, #cccccc); color: white;
background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
background-image: linear-gradient(to bottom, #eeeeee, #cccccc);
border: 1px solid #ccc;
border-bottom: 1px solid #bbb;
border-radius: 3px;
color: #333;
font-size: 14px; font-size: 14px;
line-height: 1; line-height: 1;
padding: 5px 4px; padding: 8px;
text-align: center; text-align: center;
text-shadow: 0 1px 0 #eee; text-shadow: none;
vertical-align: middle; vertical-align: middle;
} }
.sp-container button:hover { .sp-container button:hover {
background-color: #dddddd;
background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb);
background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb);
background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb);
background-image: -o-linear-gradient(top, #dddddd, #bbbbbb);
background-image: linear-gradient(to bottom, #dddddd, #bbbbbb);
border: 1px solid #bbb;
border-bottom: 1px solid #999;
cursor: pointer; cursor: pointer;
text-shadow: 0 1px 0 #ddd;
}
.sp-container button:active {
border: 1px solid #aaa;
border-bottom: 1px solid #888;
-webkit-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
-moz-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
-ms-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
-o-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
} }
.sp-cancel { .sp-cancel {
font-size: 11px; background-color: transparent;
color: #d93f3f !important; border-radius: 4px;
margin:0; color: #a23939 !important;
padding:2px; border: 1px solid #454647;
margin-right: 5px; padding: 4px 8px;
font-size: 14px;
margin-right: 8px;
vertical-align: middle; vertical-align: middle;
text-decoration:none; text-decoration: none;
} }
.sp-cancel:hover { .sp-cancel:hover {
color: #d93f3f !important; color: #a23939 !important;
text-decoration: underline; cursor: pointer;
text-decoration: none;
} }
@ -484,6 +470,7 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
.sp-preview-inner, .sp-alpha-inner, .sp-thumb-inner { .sp-preview-inner, .sp-alpha-inner, .sp-thumb-inner {
display:block; display:block;
position:absolute; position:absolute;
border-radius: 42px;
top:0;left:0;bottom:0;right:0; top:0;left:0;bottom:0;right:0;
} }

4
src/functions/class-tainacanthemecollectioncolor.php
View File

@ -66,7 +66,6 @@ class TainacanThemeCollectionColor {
</div> </div>
</span> </span>
<div class="control is-clearfix"> <div class="control is-clearfix">
<p style="font-weight: 600;"><?php _e( 'Picker color', 'tainacan-interface' ); ?></p>
<input type="text" value="" id="colorpicker" name="<?php echo $this->tainacan_background_color; ?>"> <input type="text" value="" id="colorpicker" name="<?php echo $this->tainacan_background_color; ?>">
</div> </div>
</div> </div>
@ -94,7 +93,8 @@ class TainacanThemeCollectionColor {
value="#fff" value="#fff"
name="<?php echo $this->tainacan_text_color; ?>" name="<?php echo $this->tainacan_text_color; ?>"
id="white" checked> id="white" checked>
<label for="white" id="color-white" class="color-text"><?php _e( 'White', 'tainacan-interface' ); ?></label> <label for="white" id="color-white" class="color-text">
<?php _e( 'White', 'tainacan-interface' ); ?></label>
<input <input
type="radio" type="radio"
value="#000" value="#000"

6
src/functions/collection-color.css
View File

@ -45,6 +45,9 @@
color: #fff; color: #fff;
margin-right: 1rem; margin-right: 1rem;
padding: 0.8rem; padding: 0.8rem;
border-radius: 3px;
padding: 0.7rem 1.25rem;
font-size: 0.875rem;
} }
.tainacan-collection--change-text-color .color-text[for="black"] { .tainacan-collection--change-text-color .color-text[for="black"] {
@ -52,4 +55,7 @@
color: #000; color: #000;
margin-right: 1rem; margin-right: 1rem;
padding: 0.8rem; padding: 0.8rem;
border-radius: 3px;
padding: 0.7rem 1.25rem;
font-size: 0.875rem;
} }

10
src/functions/collection-color.js
View File

@ -1,6 +1,9 @@
jQuery( document ).on( 'tainacan-collection-hook-reload', function() { jQuery( document ).on( 'tainacan-collection-hook-reload', function() {
jQuery( "#colorpicker" ).spectrum({ jQuery( "#colorpicker" ).spectrum({
showPalette: true, showPalette: true,
showInput: true,
showButtons: false,
preferredFormat: "hex",
cancelText: tainacan_colorPickerVars.cancelText, cancelText: tainacan_colorPickerVars.cancelText,
chooseText: tainacan_colorPickerVars.chooseText, chooseText: tainacan_colorPickerVars.chooseText,
togglePaletteMoreText: tainacan_colorPickerVars.togglePaletteMoreText, togglePaletteMoreText: tainacan_colorPickerVars.togglePaletteMoreText,
@ -8,9 +11,10 @@ jQuery( document ).on( 'tainacan-collection-hook-reload', function() {
clearText: tainacan_colorPickerVars.clearText, clearText: tainacan_colorPickerVars.clearText,
noColorSelectedText: tainacan_colorPickerVars.noColorSelectedText, noColorSelectedText: tainacan_colorPickerVars.noColorSelectedText,
palette: [ palette: [
['#298596', '#a55032', '#af2e48', '#c58738', '#4ebfa7'], ['#754E24', '#8c442c', '#A12B42', '#955ba5', '#4751a3'],
['#288698', '#2db4c1', '#499dd6', '#4751a3', '#955ba5'], ['#D3A978', '#D88C74', '#DB7B8F', '#BE9BCA', '#A5ACDA'],
['#2c2d2d'] ['#1D5C86', '#185F6D', '#205E6F', '#255F56', '#2c2d2d'],
['#6CADDF', '#6ECBDE', '#7CCED0', '#7ECDC4', '#cbcbcb']
], ],
move: function( color ) { move: function( color ) {
jQuery( '.color-text' ).css( 'background-color', color.toHexString() ); jQuery( '.color-text' ).css( 'background-color', color.toHexString() );