mirror of
https://github.com/codeninjasllc/codecombat.git
synced 2024-11-28 01:55:38 -05:00
Merge branch 'master' of https://github.com/codecombat/codecombat
This commit is contained in:
Nick Winter
commit
e64796bba6
15 changed files with 386 additions and 128 deletions
|
|
@ -74,7 +74,6 @@ class AudioPlayer extends CocoClass
|
|||
filename = "/file/interface/#{name}#{@ext}"
|
||||
if filename of cache and createjs.Sound.loadComplete filename
|
||||
@playSound name, volume
|
||||
createjs.Sound.play name
|
||||
else
|
||||
@preloadInterfaceSounds [name] unless filename of cache
|
||||
@soundsToPlayWhenLoaded[name] = volume
|
||||
|
|
|
|||
|
|
@ -36,8 +36,12 @@ module.exports = class LevelLoader extends CocoClass
|
|||
|
||||
playJingle: ->
|
||||
return if @headless
|
||||
jingles = ["ident_1", "ident_2"]
|
||||
AudioPlayer.playInterfaceSound jingles[Math.floor Math.random() * jingles.length]
|
||||
# Apparently the jingle, when it tries to play immediately during all this loading, you can't hear it.
|
||||
# Add the timeout to fix this weird behavior.
|
||||
f = ->
|
||||
jingles = ["ident_1", "ident_2"]
|
||||
AudioPlayer.playInterfaceSound jingles[Math.floor Math.random() * jingles.length]
|
||||
setTimeout f, 500
|
||||
|
||||
# Session Loading
|
||||
|
||||
|
|
|
|||
|
|
@ -93,6 +93,11 @@ module.exports = class LoadingScreen extends CocoClass
|
|||
@text.text = "BUILDING" if @progress is 1
|
||||
@progressBar.scaleX = @progress
|
||||
@stage.update()
|
||||
|
||||
showReady: ->
|
||||
@text.text = 'READY'
|
||||
@text.regX = @text.getMeasuredWidth() / 2
|
||||
@stage.update()
|
||||
|
||||
destroy: ->
|
||||
@stage.canvas = null
|
||||
|
|
|
|||
|
|
@ -1,42 +1,27 @@
|
|||
#wizard-settings-view
|
||||
h3#loading
|
||||
h3
|
||||
text-align: center
|
||||
|
||||
#color-settings
|
||||
float: left
|
||||
width: 600px
|
||||
margin-left: 30px
|
||||
|
||||
canvas
|
||||
float: left
|
||||
border: 2px solid black
|
||||
margin: 20px
|
||||
|
||||
.color-group
|
||||
clear: both
|
||||
padding-bottom: 10px
|
||||
margin-bottom: 10px
|
||||
border-bottom: 1px solid gray
|
||||
|
||||
.name-cell
|
||||
float: left
|
||||
width: 100px
|
||||
padding-top: 2px
|
||||
|
||||
input
|
||||
margin-right: 10px
|
||||
position: relative
|
||||
top: -3px
|
||||
|
||||
.checkbox-cell
|
||||
float: left
|
||||
width: 40px
|
||||
|
||||
.slider-cell
|
||||
margin-bottom: 10px
|
||||
float: left
|
||||
width: 120px
|
||||
|
||||
.selector
|
||||
width: 100px
|
||||
|
||||
#tinting-display
|
||||
float: right
|
||||
|
||||
width: 450px
|
||||
margin: 0 auto
|
||||
|
||||
#color-settings table
|
||||
float: left
|
||||
width: 250px
|
||||
|
||||
.minicolors-input
|
||||
display: none
|
||||
|
||||
.minicolors-swatch
|
||||
position: static
|
||||
width: 40px
|
||||
cursor: pointer
|
||||
|
||||
.enabled-cell
|
||||
width: 30px
|
||||
|
||||
.color-cell
|
||||
width: 50px
|
||||
|
|
@ -1,20 +1,18 @@
|
|||
#color-settings
|
||||
table.table.table-bordered
|
||||
tr
|
||||
th
|
||||
th Color
|
||||
th Group
|
||||
for group in colorGroups
|
||||
tr.color-group(data-name=group.name)
|
||||
td.enabled-cell
|
||||
input(type='checkbox', checked=group.exists, id=group.name).color-group-checkbox
|
||||
td.color-cell
|
||||
input.minicolors(type=hidden, value=group.rgb, name=group.name)
|
||||
td.group-cell
|
||||
label(for=group.name, data-i18n='wizard_settings.' + group.dasherized)= group.humanized
|
||||
|
||||
canvas#tinting-display(width=200, height=200).img-rounded
|
||||
|
||||
#color-settings
|
||||
for group in colorGroups
|
||||
.color-group(data-name=group.name)
|
||||
div.name-cell
|
||||
input(type='checkbox', checked=group.exists).color-group-checkbox
|
||||
span(data-i18n='wizard_settings.' + group.dasherized)= group.humanized
|
||||
div.sliders
|
||||
div.slider-cell
|
||||
label(for=group.humanized+"_hue", data-i18n="wizard_settings.hue") Hue
|
||||
.selector(id=group.humanized+"_hue", name=group.name+'.hue', data-key='hue')
|
||||
div.slider-cell
|
||||
label(for=group.humanized+"_saturation", data-i18n="wizard_settings.saturation") Saturation
|
||||
.selector(id=group.humanized+"_saturation", name=group.name+'.saturation', data-key='saturation')
|
||||
div.slider-cell
|
||||
label(for=group.humanized+"_lightness", data-i18n="wizard_settings.lightness") Lightness
|
||||
.selector(id=group.humanized+"_lightness", name=group.name+'.lightness', data-key='lightness')
|
||||
div.clearfix
|
||||
div.clearfix
|
||||
div.clearfix
|
||||
|
|
@ -69,7 +69,7 @@ block content
|
|||
| Here on CodeCombat, you're going to become a powerful wizard–not
|
||||
| just in the game, but also in real life.
|
||||
span
|
||||
a(href="", data-i18n="legal.url_hire_programmers")
|
||||
a(href="https://code.org/stats", data-i18n="legal.url_hire_programmers")
|
||||
| No one can hire programmers fast enough
|
||||
span ,
|
||||
span(data-i18n="legal.recruitment_description_suffix")
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
extends /templates/modal/modal_base
|
||||
|
||||
block modal-header-content
|
||||
h3(data-i18n="wizard_settings.title") Wizard Settings
|
||||
h3(data-i18n="wizard_settings.title2") Customize Your Character
|
||||
|
||||
block modal-body-content
|
||||
div.wizard-name-line.form-group
|
||||
label.control-label(for="name")
|
||||
| Name
|
||||
| Your Wizardly Name:
|
||||
input#wizard-settings-name(name="name", type="text", value="#{me.get('name')||''}")
|
||||
|
||||
#wizard-settings-view
|
||||
|
|
|
|||
|
|
@ -13,7 +13,6 @@ module.exports = class SettingsView extends View
|
|||
events:
|
||||
'click #save-button': 'save'
|
||||
'change #settings-panes input': 'save'
|
||||
'change input[type="range"]': 'updateWizardColor'
|
||||
'click #toggle-all-button': 'toggleEmailSubscriptions'
|
||||
|
||||
constructor: (options) ->
|
||||
|
|
@ -46,7 +45,6 @@ module.exports = class SettingsView extends View
|
|||
)
|
||||
|
||||
@chooseTab(location.hash.replace('#',''))
|
||||
@updateWizardColor()
|
||||
WizardSettingsView = new WizardSettingsView()
|
||||
WizardSettingsView.on 'change', @save, @
|
||||
@insertSubView WizardSettingsView
|
||||
|
|
@ -71,15 +69,6 @@ module.exports = class SettingsView extends View
|
|||
c.subs[sub] = 1 for sub in c.me.get('emailSubscriptions') or ['announcement', 'tester', 'level_creator', 'developer']
|
||||
c
|
||||
|
||||
getWizardColor: ->
|
||||
parseInt($('#wizard-color-1', @$el).val()) / 100
|
||||
|
||||
updateWizardColor: =>
|
||||
rgb = hslToRgb(@getWizardColor(), 1.0, 0.6)
|
||||
rgb = (parseInt(val) for val in rgb)
|
||||
newColor = "rgb(#{rgb[0]},#{rgb[1]},#{rgb[2]})"
|
||||
$('.range-color', @$el).css('background-color', newColor)
|
||||
|
||||
getSubscriptions: ->
|
||||
inputs = $('#email-pane input[type="checkbox"]', @$el)
|
||||
inputs = ($(i) for i in inputs)
|
||||
|
|
@ -99,6 +88,8 @@ module.exports = class SettingsView extends View
|
|||
if res?
|
||||
forms.applyErrorsToForm(@$el, res)
|
||||
return
|
||||
|
||||
return unless me.hasLocalChanges()
|
||||
|
||||
res = me.save()
|
||||
return unless res
|
||||
|
|
@ -131,7 +122,6 @@ module.exports = class SettingsView extends View
|
|||
grabOtherData: ->
|
||||
me.set('name', $('#name', @$el).val())
|
||||
me.set('email', $('#email', @$el).val())
|
||||
me.set('wizardColor1', @getWizardColor())
|
||||
me.set('emailSubscriptions', @getSubscriptions())
|
||||
|
||||
adminCheckbox = @$el.find('#admin')
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ template = require 'templates/account/wizard_settings'
|
|||
{me} = require('lib/auth')
|
||||
ThangType = require 'models/ThangType'
|
||||
SpriteBuilder = require 'lib/sprites/SpriteBuilder'
|
||||
{hslToHex, hexToHSL} = require 'lib/utils'
|
||||
|
||||
module.exports = class WizardSettingsView extends CocoView
|
||||
id: 'wizard-settings-view'
|
||||
|
|
@ -12,8 +13,8 @@ module.exports = class WizardSettingsView extends CocoView
|
|||
events:
|
||||
'change .color-group-checkbox': (e) ->
|
||||
colorGroup = $(e.target).closest('.color-group')
|
||||
@updateSliderVisibility(colorGroup)
|
||||
@updateColorSettings(colorGroup)
|
||||
@updateSwatchVisibility(colorGroup)
|
||||
|
||||
constructor: ->
|
||||
super(arguments...)
|
||||
|
|
@ -36,12 +37,16 @@ module.exports = class WizardSettingsView extends CocoView
|
|||
wizardSettings = me.get('wizard')?.colorConfig or {}
|
||||
|
||||
colorGroups = @wizardThangType.get('colorGroups') or {}
|
||||
f = (name) -> {
|
||||
dasherized: _.string.dasherize(name)
|
||||
humanized: _.string.humanize name
|
||||
name: name
|
||||
exists: wizardSettings[name]
|
||||
}
|
||||
f = (name) ->
|
||||
hslObj = wizardSettings[name]
|
||||
hsl = if hslObj then [hslObj.hue, hslObj.saturation, hslObj.lightness] else [0, 0.5, 0.5]
|
||||
return {
|
||||
dasherized: _.string.dasherize(name)
|
||||
humanized: _.string.humanize name
|
||||
name: name
|
||||
exists: wizardSettings[name]
|
||||
rgb: hslToHex(hsl)
|
||||
}
|
||||
c.colorGroups = (f(colorName) for colorName in _.keys colorGroups)
|
||||
c
|
||||
|
||||
|
|
@ -50,27 +55,29 @@ module.exports = class WizardSettingsView extends CocoView
|
|||
wizardSettings = me.get('wizard') or {}
|
||||
wizardSettings.colorConfig ?= {}
|
||||
|
||||
@$el.find('.selector').each (i, slider) =>
|
||||
[groupName, prop] = $(slider).attr('name').split('.')
|
||||
value = 100 * (wizardSettings.colorConfig[groupName]?[prop] ? 0.5)
|
||||
@initSlider $(slider), value, @onSliderChanged
|
||||
@$el.find('.minicolors').each (e, minicolor) =>
|
||||
$(minicolor).minicolors({
|
||||
change: => @updateColorSettings($(minicolor).closest('.color-group'))
|
||||
changeDelay: 200
|
||||
})
|
||||
|
||||
@$el.find('.color-group').each (i, colorGroup) =>
|
||||
@updateSliderVisibility($(colorGroup))
|
||||
@updateSwatchVisibility($(colorGroup))
|
||||
|
||||
updateSliderVisibility: (colorGroup) ->
|
||||
updateSwatchVisibility: (colorGroup) ->
|
||||
enabled = colorGroup.find('.color-group-checkbox').prop('checked')
|
||||
colorGroup.find('.sliders').toggle Boolean(enabled)
|
||||
|
||||
updateColorSettings: (colorGroup) ->
|
||||
wizardSettings = me.get('wizard') or {}
|
||||
colorGroup.find('.minicolors-swatch').toggle Boolean(enabled)
|
||||
|
||||
updateColorSettings: (colorGroup) =>
|
||||
wizardSettings = _.cloneDeep(me.get('wizard')) or {}
|
||||
wizardSettings.colorConfig ?= {}
|
||||
colorName = colorGroup.data('name')
|
||||
wizardSettings.colorConfig[colorName] ?= {}
|
||||
if colorGroup.find('.color-group-checkbox').prop('checked')
|
||||
config = {}
|
||||
colorGroup.find('.selector').each (i, slider) ->
|
||||
config[$(slider).data('key')] = $(slider).slider('value') / 100
|
||||
input = colorGroup.find('.minicolors-input')
|
||||
hex = input.val()
|
||||
hsl = hexToHSL(hex)
|
||||
config = {hue: hsl[0], saturation:hsl[1], lightness:hsl[2]}
|
||||
wizardSettings.colorConfig[colorName] = config
|
||||
else
|
||||
delete wizardSettings.colorConfig[colorName]
|
||||
|
|
@ -79,9 +86,6 @@ module.exports = class WizardSettingsView extends CocoView
|
|||
@updateMovieClip()
|
||||
@trigger 'change'
|
||||
|
||||
onSliderChanged: (e, result) =>
|
||||
@updateColorSettings $(result.handle).closest('.color-group')
|
||||
|
||||
initStage: ->
|
||||
@stage = new createjs.Stage(@$el.find('canvas')[0])
|
||||
@updateMovieClip()
|
||||
|
|
|
|||
|
|
@ -117,6 +117,7 @@ module.exports = class CocoView extends Backbone.View
|
|||
visibleModal.willDisappear() if visibleModal
|
||||
visibleModal.destroy()
|
||||
visibleModal = null
|
||||
window.currentModal = null
|
||||
#$('#modal-wrapper .modal').off 'hidden.bs.modal', @modalClosed
|
||||
if waitingModal
|
||||
wm = waitingModal
|
||||
|
|
|
|||
|
|
@ -21,7 +21,13 @@ module.exports = class WizardSettingsModal extends View
|
|||
|
||||
onNameChange: ->
|
||||
me.set('name', $('#wizard-settings-name').val())
|
||||
@checkNameExists()
|
||||
|
||||
checkNameExists: ->
|
||||
forms.clearFormAlerts(@$el)
|
||||
success = (id) => forms.applyErrorsToForm(@$el, {property:'name', message:'is already taken'}) if id and id isnt me.id
|
||||
$.ajax("/db/user/#{me.get('name')}/nameToID", {success: success})
|
||||
|
||||
onWizardSettingsDone: ->
|
||||
forms.clearFormAlerts(@$el)
|
||||
res = me.validate()
|
||||
|
|
|
|||
|
|
@ -126,34 +126,14 @@ module.exports = class PlayLevelView extends View
|
|||
|
||||
onLevelLoaderLoaded: =>
|
||||
# Save latest level played in local storage
|
||||
if localStorage?
|
||||
localStorage["lastLevel"] = @levelID
|
||||
|
||||
@session = @levelLoader.session
|
||||
@world = @levelLoader.world
|
||||
@level = @levelLoader.level
|
||||
if window.currentModal and not window.currentModal.destroyed
|
||||
@loadingScreen.showReady()
|
||||
return Backbone.Mediator.subscribeOnce 'modal-closed', @onLevelLoaderLoaded, @
|
||||
|
||||
localStorage["lastLevel"] = @levelID if localStorage?
|
||||
@grabLevelLoaderData()
|
||||
team = @getQueryVariable("team") ? @world.teamForPlayer(0)
|
||||
|
||||
opponentSpells = []
|
||||
for spellTeam, spells of @session.get('teamSpells') ? otherSession?.get('teamSpells') ? {}
|
||||
continue if spellTeam is team or not team
|
||||
opponentSpells = opponentSpells.concat spells
|
||||
|
||||
otherSession = @levelLoader.opponentSession
|
||||
opponentCode = otherSession?.get('submittedCode') or {}
|
||||
myCode = @session.get('code') or {}
|
||||
for spell in opponentSpells
|
||||
[thang, spell] = spell.split '/'
|
||||
c = opponentCode[thang]?[spell]
|
||||
myCode[thang] ?= {}
|
||||
if c then myCode[thang][spell] = c else delete myCode[thang][spell]
|
||||
@session.set('code', myCode)
|
||||
if @session.get('multiplayer') and otherSession?
|
||||
# For now, ladderGame will disallow multiplayer, because session code combining doesn't play nice yet.
|
||||
@session.set 'multiplayer', false
|
||||
|
||||
@levelLoader.destroy()
|
||||
@levelLoader = null
|
||||
@loadOpponentTeam(team)
|
||||
@loadingScreen.destroy()
|
||||
@god.level = @level.serialize @supermodel
|
||||
@god.worldClassMap = @world.classMap
|
||||
|
|
@ -161,17 +141,44 @@ module.exports = class PlayLevelView extends View
|
|||
@initSurface()
|
||||
@initGoalManager()
|
||||
@initScriptManager()
|
||||
@insertSubviews ladderGame: otherSession?
|
||||
@insertSubviews ladderGame: @otherSession?
|
||||
@initVolume()
|
||||
@session.on 'change:multiplayer', @onMultiplayerChanged, @
|
||||
@originalSessionState = _.cloneDeep(@session.get('state'))
|
||||
@register()
|
||||
@controlBar.setBus(@bus)
|
||||
@surface.showLevel()
|
||||
if otherSession
|
||||
if @otherSession
|
||||
# TODO: colorize name and cloud by team, colorize wizard by user's color config
|
||||
@surface.createOpponentWizard id: otherSession.get('creator'), name: otherSession.get('creatorName'), team: otherSession.get('team')
|
||||
@surface.createOpponentWizard id: @otherSession.get('creator'), name: @otherSession.get('creatorName'), team: @otherSession.get('team')
|
||||
|
||||
grabLevelLoaderData: ->
|
||||
@session = @levelLoader.session
|
||||
@world = @levelLoader.world
|
||||
@level = @levelLoader.level
|
||||
@otherSession = @levelLoader.opponentSession
|
||||
@levelLoader.destroy()
|
||||
@levelLoader = null
|
||||
|
||||
loadOpponentTeam: (myTeam) ->
|
||||
opponentSpells = []
|
||||
for spellTeam, spells of @session.get('teamSpells') ? @otherSession?.get('teamSpells') ? {}
|
||||
continue if spellTeam is myTeam or not myTeam
|
||||
opponentSpells = opponentSpells.concat spells
|
||||
|
||||
opponentCode = @otherSession?.get('submittedCode') or {}
|
||||
myCode = @session.get('code') or {}
|
||||
for spell in opponentSpells
|
||||
[thang, spell] = spell.split '/'
|
||||
c = opponentCode[thang]?[spell]
|
||||
myCode[thang] ?= {}
|
||||
if c then myCode[thang][spell] = c else delete myCode[thang][spell]
|
||||
@session.set('code', myCode)
|
||||
if @session.get('multiplayer') and @otherSession?
|
||||
# For now, ladderGame will disallow multiplayer, because session code combining doesn't play nice yet.
|
||||
@session.set 'multiplayer', false
|
||||
|
||||
|
||||
onSupermodelLoadedOne: =>
|
||||
@modelsLoaded ?= 0
|
||||
@modelsLoaded += 1
|
||||
|
|
|
|||
|
|
@ -130,6 +130,11 @@ UserHandler = class UserHandler extends Handler
|
|||
res.send results
|
||||
res.end()
|
||||
|
||||
nameToID: (req, res, name) ->
|
||||
User.findOne({nameLower:name.toLowerCase()}).exec (err, otherUser) ->
|
||||
res.send(if otherUser then otherUser._id else JSON.stringify(''))
|
||||
res.end()
|
||||
|
||||
post: (req, res) ->
|
||||
return @sendBadInputError(res, 'No input.') if _.isEmpty(req.body)
|
||||
return @sendBadInputError(res, 'Must have an anonymous user to post with.') unless req.user
|
||||
|
|
@ -147,6 +152,7 @@ UserHandler = class UserHandler extends Handler
|
|||
return @agreeToCLA(req, res) if args[1] is 'agreeToCLA'
|
||||
return @avatar(req, res, args[0]) if args[1] is 'avatar'
|
||||
return @getNamesByIds(req, res) if args[1] is 'names'
|
||||
return @nameToID(req, res, args[0]) if args[1] is 'nameToID'
|
||||
return @sendNotFoundError(res)
|
||||
|
||||
agreeToCLA: (req, res) ->
|
||||
|
|
|
|||
8
vendor/scripts/jquery.minicolors.min.js
vendored
Normal file
8
vendor/scripts/jquery.minicolors.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
245
vendor/styles/jquery.minicolors.css
vendored
Normal file
245
vendor/styles/jquery.minicolors.css
vendored
Normal file
|
|
@ -0,0 +1,245 @@
|
|||
.minicolors {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.minicolors-swatch {
|
||||
position: absolute;
|
||||
vertical-align: middle;
|
||||
background: url(/images/jquery.minicolors.png) -80px 0;
|
||||
border: solid 1px #ccc;
|
||||
cursor: text;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.minicolors-swatch-color {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.minicolors input[type=hidden] + .minicolors-swatch {
|
||||
width: 28px;
|
||||
position: static;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Panel */
|
||||
.minicolors-panel {
|
||||
position: absolute;
|
||||
width: 173px;
|
||||
height: 152px;
|
||||
background: white;
|
||||
border: solid 1px #CCC;
|
||||
box-shadow: 0 0 20px rgba(0, 0, 0, .2);
|
||||
z-index: 99999;
|
||||
-moz-box-sizing: content-box;
|
||||
-webkit-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.minicolors-panel.minicolors-visible {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Panel positioning */
|
||||
.minicolors-position-top .minicolors-panel {
|
||||
top: -154px;
|
||||
}
|
||||
|
||||
.minicolors-position-right .minicolors-panel {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.minicolors-position-bottom .minicolors-panel {
|
||||
top: auto;
|
||||
}
|
||||
|
||||
.minicolors-position-left .minicolors-panel {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.minicolors-with-opacity .minicolors-panel {
|
||||
width: 194px;
|
||||
}
|
||||
|
||||
.minicolors .minicolors-grid {
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: 1px;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background: url(/images/jquery.minicolors.png) -120px 0;
|
||||
cursor: crosshair;
|
||||
}
|
||||
|
||||
.minicolors .minicolors-grid-inner {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.minicolors-slider-saturation .minicolors-grid {
|
||||
background-position: -420px 0;
|
||||
}
|
||||
|
||||
.minicolors-slider-saturation .minicolors-grid-inner {
|
||||
background: url(/images/jquery.minicolors.png) -270px 0;
|
||||
}
|
||||
|
||||
.minicolors-slider-brightness .minicolors-grid {
|
||||
background-position: -570px 0;
|
||||
}
|
||||
|
||||
.minicolors-slider-brightness .minicolors-grid-inner {
|
||||
background: black;
|
||||
}
|
||||
|
||||
.minicolors-slider-wheel .minicolors-grid {
|
||||
background-position: -720px 0;
|
||||
}
|
||||
|
||||
.minicolors-slider,
|
||||
.minicolors-opacity-slider {
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: 152px;
|
||||
width: 20px;
|
||||
height: 150px;
|
||||
background: white url(/images/jquery.minicolors.png) 0 0;
|
||||
cursor: row-resize;
|
||||
}
|
||||
|
||||
.minicolors-slider-saturation .minicolors-slider {
|
||||
background-position: -60px 0;
|
||||
}
|
||||
|
||||
.minicolors-slider-brightness .minicolors-slider {
|
||||
background-position: -20px 0;
|
||||
}
|
||||
|
||||
.minicolors-slider-wheel .minicolors-slider {
|
||||
background-position: -20px 0;
|
||||
}
|
||||
|
||||
.minicolors-opacity-slider {
|
||||
left: 173px;
|
||||
background-position: -40px 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.minicolors-with-opacity .minicolors-opacity-slider {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Pickers */
|
||||
.minicolors-grid .minicolors-picker {
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
left: 70px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border: solid 1px black;
|
||||
border-radius: 10px;
|
||||
margin-top: -6px;
|
||||
margin-left: -6px;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.minicolors-grid .minicolors-picker > div {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 8px;
|
||||
border: solid 2px white;
|
||||
-moz-box-sizing: content-box;
|
||||
-webkit-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
.minicolors-picker {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 18px;
|
||||
height: 2px;
|
||||
background: white;
|
||||
border: solid 1px black;
|
||||
margin-top: -2px;
|
||||
-moz-box-sizing: content-box;
|
||||
-webkit-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
/* Inline controls */
|
||||
.minicolors-inline {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.minicolors-inline .minicolors-input {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.minicolors-inline .minicolors-panel {
|
||||
position: relative;
|
||||
top: auto;
|
||||
left: auto;
|
||||
box-shadow: none;
|
||||
z-index: auto;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* Default theme */
|
||||
.minicolors-theme-default .minicolors-swatch {
|
||||
top: 5px;
|
||||
left: 5px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
.minicolors-theme-default.minicolors-position-right .minicolors-swatch {
|
||||
left: auto;
|
||||
right: 5px;
|
||||
}
|
||||
.minicolors-theme-default.minicolors {
|
||||
width: auto;
|
||||
display: inline-block;
|
||||
}
|
||||
.minicolors-theme-default .minicolors-input {
|
||||
height: 20px;
|
||||
width: auto;
|
||||
display: inline-block;
|
||||
padding-left: 26px;
|
||||
}
|
||||
.minicolors-theme-default.minicolors-position-right .minicolors-input {
|
||||
padding-right: 26px;
|
||||
padding-left: inherit;
|
||||
}
|
||||
|
||||
/* Bootstrap theme */
|
||||
.minicolors-theme-bootstrap .minicolors-swatch {
|
||||
top: 3px;
|
||||
left: 3px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.minicolors-theme-bootstrap.minicolors-position-right .minicolors-swatch {
|
||||
left: auto;
|
||||
right: 3px;
|
||||
}
|
||||
.minicolors-theme-bootstrap .minicolors-input {
|
||||
padding-left: 44px;
|
||||
}
|
||||
.minicolors-theme-bootstrap.minicolors-position-right .minicolors-input {
|
||||
padding-right: 44px;
|
||||
padding-left: 12px;
|
||||
}
|
||||
Loading…
Reference in a new issue