Add dark theme, add user database field for theme and update profile form. Create new \App\Customization class that handles all user-customizable values.

This commit is contained in:
Buster Silver 2016-10-06 21:41:04 -05:00
parent 8ec0d81e20
commit 91466d298e
246 changed files with 13055 additions and 12959 deletions

View File

@ -255,6 +255,10 @@ $di['user'] = function($di) {
return NULL;
};
$di['customization'] = function($di) {
return new \App\Customization($di);
};
$di['view'] = function($di) {
$view = new \App\Mvc\View(APP_INCLUDE_BASE.'/templates');
$view->setFileExtension('phtml');
@ -267,6 +271,7 @@ $di['view'] = function($di) {
'url' => $di['url'],
'config' => $di['config'],
'flash' => $di['flash'],
'customization' => $di['customization'],
]);
return $view;
@ -277,50 +282,14 @@ $cache = $di->get('cache');
if (!APP_IS_COMMAND_LINE)
{
/** @var \Entity\User|null $user */
$user = $di->get('user');
/** @var \App\Customization $customization */
$customization = $di->get('customization');
// Set time zone.
if ($user !== null && !empty($user->timezone))
date_default_timezone_set($user->timezone);
/*
* Commands:
* find /var/azuracast/www -type f \( -name '*.php' -or -name '*.phtml' \) -print > list
* xgettext --files-from=list --language=PHP -o /var/azuracast/www/app/locale/default.pot
*
* find /var/azuracast/www/app/locale -name \*.po -execdir msgfmt default.po -o default.mo \;
*/
$locale = null;
$supported_locales = $config->application->locale->supported->toArray();
// Prefer user-based profile locale.
if ($user !== null && !empty($user->locale) && $user->locale !== 'default')
{
if (isset($supported_locales[$user->locale]))
$locale = $user->locale;
}
// Attempt to load from browser headers.
if (!$locale)
{
$browser_locale = Locale::acceptFromHttp($_SERVER['HTTP_ACCEPT_LANGUAGE']);
foreach($supported_locales as $lang_code => $lang_name)
{
if (strcmp(substr($browser_locale, 0, 2), substr($lang_code, 0, 2)) == 0)
{
$locale = $lang_code;
break;
}
}
}
// Default to system option.
if (!$locale)
$locale = $config->application->locale->default;
date_default_timezone_set($customization->getTimeZone());
// Localization
$locale = $customization->getLocale();
putenv("LANG=".$locale);
setlocale(LC_ALL, $locale);

View File

@ -61,6 +61,14 @@ $config = [
],
],
'themes' => [
'default' => 'light',
'available' => [
'light' => 'Light (Default)',
'dark' => 'Dark',
],
],
/* RESOURCES: Doctrine ORM Layer */
'doctrine' => [
'autoGenerateProxies' => (APP_APPLICATION_ENV == "development"),

View File

@ -0,0 +1,101 @@
<?php
namespace App;
use Entity\User;
use Interop\Container\ContainerInterface;
class Customization
{
/** @var ContainerInterface */
protected $di;
/** @var User|null */
protected $user;
/** @var Config */
protected $config;
public function __construct(ContainerInterface $di)
{
$this->di = $di;
$this->user = $di['user'];
$this->config = $di['config'];
}
/**
* Get the user's custom time zone or the system default.
*
* @return string
*/
public function getTimeZone()
{
if ($this->user !== null && !empty($this->user->timezone))
return $this->user->timezone;
else
return date_default_timezone_get();
}
/*
* Locale Commands:
* find /var/azuracast/www -type f \( -name '*.php' -or -name '*.phtml' \) -print > list
* xgettext --files-from=list --language=PHP -o /var/azuracast/www/app/locale/default.pot
*
* find /var/azuracast/www/app/locale -name \*.po -execdir msgfmt default.po -o default.mo \;
*/
/**
* Return the user-customized, browser-specified or system default locale.
*
* @return string
*/
public function getLocale()
{
$locale = null;
$supported_locales = $this->config->application->locale->supported->toArray();
// Prefer user-based profile locale.
if ($this->user !== null && !empty($this->user->locale) && $this->user->locale !== 'default')
{
if (isset($supported_locales[$this->user->locale]))
$locale = $this->user->locale;
}
// Attempt to load from browser headers.
if (!$locale)
{
$browser_locale = \Locale::acceptFromHttp($_SERVER['HTTP_ACCEPT_LANGUAGE']);
foreach($supported_locales as $lang_code => $lang_name)
{
if (strcmp(substr($browser_locale, 0, 2), substr($lang_code, 0, 2)) == 0)
{
$locale = $lang_code;
break;
}
}
}
// Default to system option.
if (!$locale)
$locale = $this->config->application->locale->default;
return $locale;
}
/**
* Returns the user-customized or system default theme.
*
* @return string
*/
public function getTheme()
{
if ($this->user !== null && !empty($this->user->theme))
{
$available_themes = $this->config->application->themes->available->toArray();
if (isset($available_themes[$this->user->theme]))
return $this->user->theme;
}
return $this->config->application->themes->default;
}
}

View File

@ -77,6 +77,9 @@ class User extends \App\Doctrine\Entity
/** @Column(name="locale", type="string", length=25, nullable=true) */
protected $locale;
/** @Column(name="theme", type="string", length=25, nullable=true) */
protected $theme;
/** @Column(name="created_at", type="integer") */
protected $created_at;

View File

@ -0,0 +1,34 @@
<?php
namespace Migration;
use Doctrine\DBAL\Migrations\AbstractMigration;
use Doctrine\DBAL\Schema\Schema;
/**
* Auto-generated Migration: Please modify to your needs!
*/
class Version20161007021719 extends AbstractMigration
{
/**
* @param Schema $schema
*/
public function up(Schema $schema)
{
// this up() migration is auto-generated, please modify it to your needs
$this->abortIf($this->connection->getDatabasePlatform()->getName() != 'mysql', 'Migration can only be executed safely on \'mysql\'.');
$this->addSql('ALTER TABLE users ADD theme VARCHAR(25) DEFAULT NULL');
}
/**
* @param Schema $schema
*/
public function down(Schema $schema)
{
// this down() migration is auto-generated, please modify it to your needs
$this->abortIf($this->connection->getDatabasePlatform()->getName() != 'mysql', 'Migration can only be executed safely on \'mysql\'.');
$this->addSql('ALTER TABLE users DROP theme');
}
}

View File

@ -55,6 +55,12 @@ return [
'default' => 'default',
]],
'theme' => ['radio', [
'label' => _('Site Theme'),
'options' => $config->application->themes->available->toArray(),
'default' => $config->application->themes->default,
]],
],
],

View File

@ -5,6 +5,10 @@
<script type="text/javascript" src="//code.highcharts.com/highcharts-more.js"></script>
<script type="text/javascript" src="//code.highcharts.com/modules/exporting.js"></script>
<?php if ($customization->getTheme() == 'dark'): ?>
<script type="text/javascript" src="<?=$url->content('js/highcharts/dark-blue.js') ?>"></script>
<?php endif; ?>
<script type="text/javascript" src="<?=$url->content('vendors/bower_components/jPlayer/dist/jplayer/jquery.jplayer.min.js') ?>"></script>
<script type="text/javascript" src="<?=$url->content('vendors/bower_components/store-js/store.min.js') ?>"></script>
<script type="text/javascript" src="<?=$url->content('js/radio.js') ?>"></script>

View File

@ -4,6 +4,10 @@
<script type="text/javascript" src="//code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="//code.highcharts.com/highcharts-more.js"></script>
<script type="text/javascript" src="//code.highcharts.com/modules/exporting.js"></script>
<?php if ($customization->getTheme() == 'dark'): ?>
<script type="text/javascript" src="<?=$url->content('js/highcharts/dark-blue.js') ?>"></script>
<?php endif; ?>
<?php $this->stop('custom_js') ?>
<script type="text/javascript">

View File

@ -24,7 +24,7 @@ if (APP_APPLICATION_ENV != "production")
<link rel="stylesheet" type="text/css" href="<?=$url->content('vendors/bower_components/components-font-awesome/css/font-awesome.min.css') ?>">
<link rel="stylesheet" type="text/css" href="<?=$url->content('vendors/bower_components/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.min.css') ?>">
<link rel="stylesheet" type="text/css" href="<?=$url->content('vendors/bootgrid/jquery.bootgrid.min.css') ?>">
<link rel="stylesheet" type="text/css" href="<?=$url->content('css/app.css') ?>">
<link rel="stylesheet" type="text/css" href="<?=$url->content('css/'.$customization->getTheme().'.css') ?>">
<?=$this->section('custom_css') ?>
@ -37,11 +37,11 @@ var APP_BaseUrl = '<?=$url->named('home') ?>';
var APP_ContentPath = '<?=$url->content('') ?>';
</script>
</head>
<body class="<?=$page_class ?> <?php if (!empty($station)): ?>toggled sw-toggled<?php endif; ?>">
<header id="header" class="clearfix" data-current-skin="blue" style="background-image: url('<?=$url->content('img/header_bg.png') ?>');" data-rjs="3">
<ul class="header-inner">
<body class="<?=$page_class ?>">
<header id="header" class="clearfix" data-ma-theme="blue" style="background-image: url('<?=$url->content('img/header_bg.png') ?>');" data-rjs="3">
<ul class="h-inner">
<?php if (!empty($station)): ?>
<li id="menu-trigger" data-trigger="#sidebar">
<li class="hi-trigger ma-trigger" data-ma-action="sidebar-open" data-ma-target="#sidebar">
<div class="line-wrap">
<div class="line top"></div>
<div class="line center"></div>
@ -57,7 +57,7 @@ var APP_ContentPath = '<?=$url->content('') ?>';
</li>
<li class="pull-right">
<ul class="top-menu">
<ul class="hi-menu">
<!--
<li id="top-search">
<a href=""><i class="tm-icon zmdi zmdi-search"></i></a>
@ -65,7 +65,7 @@ var APP_ContentPath = '<?=$url->content('') ?>';
-->
<li class="dropdown" id="radio-player-controls">
<a data-toggle="dropdown" href=""><i class="tm-icon zmdi zmdi-radio"></i></a>
<a data-toggle="dropdown" href=""><i class="him-icon zmdi zmdi-radio"></i></a>
<ul class="dropdown-menu dm-icon pull-right">
<li>
<a href="javascript:;" class="jp-pause"><i class="zmdi zmdi-pause"></i> <?=_('Pause') ?></a>
@ -88,7 +88,7 @@ var APP_ContentPath = '<?=$url->content('') ?>';
</li>
<li class="dropdown">
<a data-toggle="dropdown" href=""><i class="tm-icon zmdi zmdi-more-vert"></i></a>
<a data-toggle="dropdown" href=""><i class="him-icon zmdi zmdi-more-vert"></i></a>
<ul class="dropdown-menu dm-icon pull-right">
<? if ($acl->isAllowed('view administration')): ?>
<li><a href="<?=$url->named('admin:index:index') ?>"><i class="fa fa-cog"></i> <?=_('System Administration') ?></a></li>
@ -121,7 +121,7 @@ var APP_ContentPath = '<?=$url->content('') ?>';
</aside>
<?php endif; ?>
<section id="content">
<section id="content" <?php if (empty($station)): ?>class="content-alt"<?php endif; ?>>
<div class="container">
<?php if ($manual): ?>
<?=$this->section('content') ?>
@ -168,8 +168,7 @@ var APP_ContentPath = '<?=$url->content('') ?>';
<script type="text/javascript" src="<?=$url->content('vendors/bower_components/autosize/dist/autosize.js') ?>"></script>
<script type="text/javascript" src="<?=$url->content('vendors/bootgrid/jquery.bootgrid.updated.js') ?>"></script>
<script type="text/javascript" src="<?=$url->content('js/functions.js') ?>"></script>
<script type="text/javascript" src="<?=$url->content('js/app.js') ?>"></script>
<script type="text/javascript" src="<?=$url->content('js/app.min.js') ?>"></script>
<? if ($flash->hasMessages()): ?>
<script type="text/javascript">

View File

@ -42,8 +42,7 @@ if (APP_APPLICATION_ENV != "production")
<script type="text/javascript" src="<?=$url->content('vendors/bower_components/Waves/dist/waves.min.js') ?>"></script>
<script type="text/javascript" src="<?=$url->content('vendors/bootstrap-growl/bootstrap-growl.min.js') ?>"></script>
<script type="text/javascript" src="<?=$url->content('js/functions.js') ?>"></script>
<script type="text/javascript" src="<?=$url->content('js/app.js') ?>"></script>
<script type="text/javascript" src="<?=$url->content('js/app.min.js') ?>"></script>
<? if ($flash->hasMessages()): ?>
<script type="text/javascript">

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

5
web/static/css/dark.css Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

5
web/static/css/light.css Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -9,16 +9,35 @@ module.exports = function(grunt) {
paths: ["/var/azuracast/www/web/static/css"],
compress: true,
sourceMap: true,
sourceMapURL: '/static/css/app.css.map',
sourceMapBasepath: '/var/azuracast/www/web',
sourceMapRootpath: '/'
sourceMapRootpath: '/',
sourceMapBasepath: function (f) {
this.sourceMapURL = this.sourceMapFilename.substr(this.sourceMapFilename.lastIndexOf('/') + 1);
return "wwwroot/";
}
},
files: {
"/var/azuracast/www/web/static/css/app.css": "/var/azuracast/www/web/static/less/app.less",
"/var/azuracast/www/web/static/css/light.css": "/var/azuracast/www/web/static/less/light.less",
"/var/azuracast/www/web/static/css/dark.css": "/var/azuracast/www/web/static/less/dark.less"
},
cleancss: true
}
},
concat: {
dist: {
src: ['/var/azuracast/www/web/static/js/inc/**/*.js'],
dest: '/var/azuracast/www/web/static/js/app.js'
}
},
uglify: {
options: {
mangle: false
},
my_target: {
files: {
'/var/azuracast/www/web/static/js/app.min.js': ['/var/azuracast/www/web/static/js/app.js']
}
}
},
csssplit: {
your_target: {
src: ['/var/azuracast/www/web/static/css/app.css'],
@ -30,14 +49,18 @@ module.exports = function(grunt) {
}
},
watch: {
//styles: {
less: {
files: ['/var/azuracast/www/web/static/less/**/*.less'], // which files to watch
tasks: ['less'],
options: {
nospawn: true,
livereload: 8122,
livereload: 8122
}
//}
},
js: {
files: ['/var/azuracast/www/web/static/js/inc/**/*.js'], // which files to watch
tasks: ['concat', 'uglify']
}
}
});
@ -46,8 +69,10 @@ module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-csssplit');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-concat');
// Default task(s).
grunt.registerTask('default', ['less']);
grunt.registerTask('default', ['less', 'concat', 'uglify']);
grunt.registerTask('js', ['concat', 'uglify']);
};

File diff suppressed because it is too large Load Diff

1
web/static/js/app.min.js vendored Normal file

File diff suppressed because one or more lines are too long

View File

@ -5,9 +5,9 @@
Highcharts.theme = {
chart: {
backgroundColor: 'rgba(51, 51, 51, 0)',
backgroundColor: '#2b343a',
className: 'dark-container',
plotBackgroundColor: 'rgba(51, 51, 51, 0)',
plotBackgroundColor: '#2b343a',
plotBorderColor: '#888888',
plotBorderWidth: 1
},

View File

@ -0,0 +1,243 @@
$(document).ready(function () {
$('body').on('click', '[data-ma-action]', function (e) {
e.preventDefault();
var $this = $(this);
var action = $(this).data('ma-action');
switch (action) {
/*-------------------------------------------
Sidebar & Chat Open/Close
---------------------------------------------*/
case 'sidebar-open':
var target = $this.data('ma-target');
var backdrop = '<div data-ma-action="sidebar-close" class="ma-backdrop" />';
$('body').addClass('sidebar-toggled');
$('#header, #header-alt, #main').append(backdrop);
$this.addClass('toggled');
$(target).addClass('toggled');
break;
case 'sidebar-close':
$('body').removeClass('sidebar-toggled');
$('.ma-backdrop').remove();
$('.sidebar, .ma-trigger').removeClass('toggled')
break;
/*-------------------------------------------
Mainmenu Submenu Toggle
---------------------------------------------*/
case 'submenu-toggle':
$this.next().slideToggle(200);
$this.parent().toggleClass('toggled');
break;
/*-------------------------------------------
Top Search Open/Close
---------------------------------------------*/
//Open
case 'search-open':
$('#header').addClass('search-toggled');
$('#top-search-wrap input').focus();
break;
//Close
case 'search-close':
$('#header').removeClass('search-toggled');
break;
/*-------------------------------------------
Header Notification Clear
---------------------------------------------*/
case 'clear-notification':
var x = $this.closest('.list-group');
var y = x.find('.list-group-item');
var z = y.size();
$this.parent().fadeOut();
x.find('.list-group').prepend('<i class="grid-loading hide-it"></i>');
x.find('.grid-loading').fadeIn(1500);
var w = 0;
y.each(function(){
var z = $(this);
setTimeout(function(){
z.addClass('animated fadeOutRightBig').delay(1000).queue(function(){
z.remove();
});
}, w+=150);
})
//Popup empty message
setTimeout(function(){
$('#notifications').addClass('empty');
}, (z*150)+200);
break;
/*-------------------------------------------
Fullscreen Browsing
---------------------------------------------*/
case 'fullscreen':
//Launch
function launchIntoFullscreen(element) {
if(element.requestFullscreen) {
element.requestFullscreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if(element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}
//Exit
function exitFullscreen() {
if(document.exitFullscreen) {
document.exitFullscreen();
} else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if(document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
launchIntoFullscreen(document.documentElement);
break;
/*-------------------------------------------
Clear Local Storage
---------------------------------------------*/
case 'clear-localstorage':
swal({
title: "Are you sure?",
text: "All your saved localStorage values will be removed",
type: "warning",
showCancelButton: true,
confirmButtonText: "Yes, delete it!",
closeOnConfirm: false
}, function(){
localStorage.clear();
swal("Done!", "localStorage is cleared", "success");
});
break;
/*-------------------------------------------
Print
---------------------------------------------*/
case 'print':
window.print();
break;
/*-------------------------------------------
Login Window Switch
---------------------------------------------*/
case 'login-switch':
var loginblock = $this.data('ma-block');
var loginParent = $this.closest('.lc-block');
loginParent.removeClass('toggled');
setTimeout(function(){
$(loginblock).addClass('toggled');
});
break;
/*-------------------------------------------
Profile Edit/Edit Cancel
---------------------------------------------*/
//Edit
case 'profile-edit':
$this.closest('.pmb-block').toggleClass('toggled');
break;
case 'profile-edit-cancel':
$(this).closest('.pmb-block').removeClass('toggled');
break;
/*-------------------------------------------
Action Header Open/Close
---------------------------------------------*/
//Open
case 'action-header-open':
ahParent = $this.closest('.action-header').find('.ah-search');
ahParent.fadeIn(300);
ahParent.find('.ahs-input').focus();
break;
//Close
case 'action-header-close':
ahParent.fadeOut(300);
setTimeout(function(){
ahParent.find('.ahs-input').val('');
}, 350);
break;
/*-------------------------------------------
Wall Comment Open/Close
---------------------------------------------*/
//Open
case 'wall-comment-open':
if(!($this).closest('.wic-form').hasClass('toggled')) {
$this.closest('.wic-form').addClass('toggled');
}
break;
//Close
case 'wall-comment-close':
$this.closest('.wic-form').find('textarea').val('');
$this.closest('.wic-form').removeClass('toggled');
break;
/*-------------------------------------------
Todo Form Open/Close
---------------------------------------------*/
//Open
case 'todo-form-open':
$this.closest('.t-add').addClass('toggled');
break;
//Close
case 'todo-form-close':
$this.closest('.t-add').removeClass('toggled');
$this.closest('.t-add').find('textarea').val('');
break;
}
});
});

101
web/static/js/inc/charts.js Normal file
View File

@ -0,0 +1,101 @@
$(document).ready(function () {
/*-------------------------------------------
Sparkline
---------------------------------------------*/
function sparklineBar(id, values, height, barWidth, barColor, barSpacing) {
$('.'+id).sparkline(values, {
type: 'bar',
height: height,
barWidth: barWidth,
barColor: barColor,
barSpacing: barSpacing
})
}
function sparklineLine(id, values, width, height, lineColor, fillColor, lineWidth, maxSpotColor, minSpotColor, spotColor, spotRadius, hSpotColor, hLineColor) {
$('.'+id).sparkline(values, {
type: 'line',
width: width,
height: height,
lineColor: lineColor,
fillColor: fillColor,
lineWidth: lineWidth,
maxSpotColor: maxSpotColor,
minSpotColor: minSpotColor,
spotColor: spotColor,
spotRadius: spotRadius,
highlightSpotColor: hSpotColor,
highlightLineColor: hLineColor
});
}
function sparklinePie(id, values, width, height, sliceColors) {
$('.'+id).sparkline(values, {
type: 'pie',
width: width,
height: height,
sliceColors: sliceColors,
offset: 0,
borderWidth: 0
});
}
// Mini Chart - Bar Chart 1
if ($('.stats-bar')[0]) {
sparklineBar('stats-bar', [6,4,8,6,5,6,7,8,3,5,9,5,8,4], '35px', 3, '#d6d8d9', 2);
}
// Mini Chart - Bar Chart 2
if ($('.stats-bar-2')[0]) {
sparklineBar('stats-bar-2', [4,7,6,2,5,3,8,6,6,4,8,6,5,8], '35px', 3, '#d6d8d9', 2);
}
// Mini Chart - Line Chart 1
if ($('.stats-line')[0]) {
sparklineLine('stats-line', [9,4,6,5,6,4,5,7,9,3,6,5], 68, 35, '#fff', 'rgba(0,0,0,0)', 1.25, '#d6d8d9', '#d6d8d9', '#d6d8d9', 3, '#fff', '#d6d8d9');
}
// Mini Chart - Line Chart 2
if ($('.stats-line-2')[0]) {
sparklineLine('stats-line-2', [5,6,3,9,7,5,4,6,5,6,4,9], 68, 35, '#fff', 'rgba(0,0,0,0)', 1.25, '#d6d8d9', '#d6d8d9', '#d6d8d9', 3, '#fff', '#d6d8d9');
}
// Mini Chart - Pie Chart 1
if ($('.stats-pie')[0]) {
sparklinePie('stats-pie', [20, 35, 30, 5], 45, 45, ['#fff', 'rgba(255,255,255,0.7)', 'rgba(255,255,255,0.4)', 'rgba(255,255,255,0.2)']);
}
// Dash Widget Line Chart
if ($('.dash-widget-visits')[0]) {
sparklineLine('dash-widget-visits', [9,4,6,5,6,4,5,7,9,3,6,5], '100%', '70px', 'rgba(255,255,255,0.7)', 'rgba(0,0,0,0)', 1, 'rgba(255,255,255,0.4)', 'rgba(255,255,255,0.4)', 'rgba(255,255,255,0.4)', 5, 'rgba(255,255,255,0.4)', '#fff');
}
/*-------------------------------------------
Easy Pie Charts
---------------------------------------------*/
function easyPieChart(id, trackColor, scaleColor, barColor, lineWidth, lineCap, size) {
$('.'+id).easyPieChart({
trackColor: trackColor,
scaleColor: scaleColor,
barColor: barColor,
lineWidth: lineWidth,
lineCap: lineCap,
size: size
});
}
// Main Pie Chart
if ($('.main-pie')[0]) {
easyPieChart('main-pie', 'rgba(0,0,0,0.2)', 'rgba(255,255,255,0)', 'rgba(255,255,255,0.7)', 2, 'butt', 148);
}
// Others
if ($('.sub-pie-1')[0]) {
easyPieChart('sub-pie-1', 'rgba(0,0,0,0.2)', 'rgba(255,255,255,0)', 'rgba(255,255,255,0.7)', 2, 'butt', 95);
}
if ($('.sub-pie-2')[0]) {
easyPieChart('sub-pie-2', 'rgba(0,0,0,0.2)', 'rgba(255,255,255,0)', 'rgba(255,255,255,0.7)', 2, 'butt', 95);
}
});

View File

@ -0,0 +1,103 @@
$(document).ready(function(){
/*----------------------------------------------
Make some random data for Flot Line Chart
----------------------------------------------*/
var data1 = [[1,60], [2,30], [3,50], [4,100], [5,10], [6,90], [7,85]];
var data2 = [[1,20], [2,90], [3,60], [4,40], [5,100], [6,25], [7,65]];
var data3 = [[1,100], [2,20], [3,60], [4,90], [5,80], [6,10], [7,5]];
// Create an Array push the data + Draw the bars
var barData = [
{
label: 'Tokyo',
data: data1,
color: '#dbdddd'
},
{
label: 'Seoul',
data: data2,
color: '#636c72'
},
{
label: 'Beijing',
data: data3,
color: '#3e4a51'
}
]
/*---------------------------------
Let's create the chart
---------------------------------*/
if ($('#bar-chart')[0]) {
$.plot($("#bar-chart"), barData, {
series: {
bars: {
show: true,
barWidth: 0.05,
order: 1,
fill: 1
}
},
grid : {
borderWidth: 1,
borderColor: '#333c42',
show : true,
hoverable : true,
clickable : true
},
yaxis: {
tickColor: '#333c42',
tickDecimals: 0,
font :{
lineHeight: 13,
style: "normal",
color: "#9f9f9f",
},
shadowSize: 0
},
xaxis: {
tickColor: '#333c42',
tickDecimals: 0,
font :{
lineHeight: 13,
style: "normal",
color: "#9f9f9f"
},
shadowSize: 0
},
legend:{
container: '.flc-bar',
backgroundOpacity: 0.5,
noColumns: 0,
backgroundColor: "white",
lineWidth: 0
}
});
}
/*---------------------------------
Tooltips for Flot Charts
---------------------------------*/
if ($(".flot-chart")[0]) {
$(".flot-chart").bind("plothover", function (event, pos, item) {
if (item) {
var x = item.datapoint[0].toFixed(2),
y = item.datapoint[1].toFixed(2);
$(".flot-tooltip").html(item.series.label + " of " + x + " = " + y).css({top: item.pageY+5, left: item.pageX+5}).show();
}
else {
$(".flot-tooltip").hide();
}
});
$("<div class='flot-tooltip' class='chart-tooltip'></div>").appendTo("body");
}
});

View File

@ -0,0 +1,88 @@
$(document).ready(function(){
/*-----------------------------------------
Make some random data for the Chart
-----------------------------------------*/
var d1 = [];
for (var i = 0; i <= 10; i += 1) {
d1.push([i, parseInt(Math.random() * 30)]);
}
var d2 = [];
for (var i = 0; i <= 20; i += 1) {
d2.push([i, parseInt(Math.random() * 30)]);
}
var d3 = [];
for (var i = 0; i <= 10; i += 1) {
d3.push([i, parseInt(Math.random() * 30)]);
}
/*---------------------------------
Chart Options
---------------------------------*/
var options = {
series: {
shadowSize: 0,
curvedLines: { //This is a third party plugin to make curved lines
apply: true,
active: true,
monotonicFit: true
},
lines: {
show: false,
lineWidth: 0,
},
},
grid: {
borderWidth: 0,
labelMargin:10,
hoverable: true,
clickable: true,
mouseActiveRadius:6,
},
xaxis: {
tickDecimals: 0,
ticks: false
},
yaxis: {
tickDecimals: 0,
ticks: false
},
legend: {
show: false
}
};
/*---------------------------------
Let's create the chart
---------------------------------*/
if ($("#curved-line-chart")[0]) {
$.plot($("#curved-line-chart"), [
{data: d1, lines: { show: true, fill: 0.98 }, label: 'Product 1', stack: true, color: '#1f292f' },
{data: d3, lines: { show: true, fill: 0.98 }, label: 'Product 2', stack: true, color: '#dbdddd' }
], options);
}
/*---------------------------------
Tooltips for Flot Charts
---------------------------------*/
if ($(".flot-chart")[0]) {
$(".flot-chart").bind("plothover", function (event, pos, item) {
if (item) {
var x = item.datapoint[0].toFixed(2),
y = item.datapoint[1].toFixed(2);
$(".flot-tooltip").html(item.series.label + " of " + x + " = " + y).css({top: item.pageY+5, left: item.pageX+5}).show();
}
else {
$(".flot-tooltip").hide();
}
});
$("<div class='flot-tooltip' class='chart-tooltip'></div>").appendTo("body");
}
});

View File

@ -0,0 +1,107 @@
$(document).ready(function(){
/*---------------------------------
Make some random data
---------------------------------*/
var data = [];
var totalPoints = 300;
var updateInterval = 30;
function getRandomData() {
if (data.length > 0)
data = data.slice(1);
while (data.length < totalPoints) {
var prev = data.length > 0 ? data[data.length - 1] : 50,
y = prev + Math.random() * 10 - 5;
if (y < 0) {
y = 0;
} else if (y > 90) {
y = 90;
}
data.push(y);
}
var res = [];
for (var i = 0; i < data.length; ++i) {
res.push([i, data[i]])
}
return res;
}
/*---------------------------------
Create Chart
---------------------------------*/
if ($('#dynamic-chart')[0]) {
var plot = $.plot("#dynamic-chart", [ getRandomData() ], {
series: {
label: "Server Process Data",
lines: {
show: true,
lineWidth: 0.2,
fill: 0.6
},
color: '#fff',
shadowSize: 0,
},
yaxis: {
min: 0,
max: 100,
tickColor: '#333c42',
font :{
lineHeight: 13,
style: "normal",
color: "#9f9f9f",
},
shadowSize: 0,
},
xaxis: {
tickColor: '#333c42',
show: true,
font :{
lineHeight: 13,
style: "normal",
color: "#9f9f9f",
},
shadowSize: 0,
min: 0,
max: 250
},
grid: {
borderWidth: 1,
borderColor: '#333c42',
labelMargin:10,
hoverable: true,
clickable: true,
mouseActiveRadius:6,
},
legend:{
container: '.flc-dynamic',
backgroundOpacity: 0.5,
noColumns: 0,
backgroundColor: "white",
lineWidth: 0
}
});
/*---------------------------------
Update
---------------------------------*/
function update() {
plot.setData([getRandomData()]);
// Since the axes don't change, we don't need to call plot.setupGrid()
plot.draw();
setTimeout(update, updateInterval);
}
update();
}
});

View File

@ -0,0 +1,123 @@
$(document).ready(function(){
/*---------------------------------------------------
Make some random data for Recent Items chart
---------------------------------------------------*/
var data = [];
var totalPoints = 100;
function getRandomData() {
if (data.length > 0)
data = data.slice(1);
while (data.length < totalPoints) {
var prev = data.length > 0 ? data[data.length - 1] : 50,
y = prev + Math.random() * 10 - 5;
if (y < 0) {
y = 0;
} else if (y > 90) {
y = 90;
}
data.push(y);
}
var res = [];
for (var i = 0; i < data.length; ++i) {
res.push([i, data[i]])
}
return res;
}
/*---------------------------------------------------
Make some random data for Flot Line Chart
---------------------------------------------------*/
var d1 = [];
for (var i = 0; i <= 10; i += 1) {
d1.push([i, parseInt(Math.random() * 30)]);
}
var d2 = [];
for (var i = 0; i <= 20; i += 1) {
d2.push([i, parseInt(Math.random() * 30)]);
}
var d3 = [];
for (var i = 0; i <= 10; i += 1) {
d3.push([i, parseInt(Math.random() * 30)]);
}
/*---------------------------------
Chart Options
---------------------------------*/
var options = {
series: {
shadowSize: 0,
lines: {
show: false,
lineWidth: 0,
},
},
grid: {
borderWidth: 0,
labelMargin:10,
hoverable: true,
clickable: true,
mouseActiveRadius:6,
},
xaxis: {
tickDecimals: 0,
ticks: false
},
yaxis: {
tickDecimals: 0,
ticks: false
},
legend: {
show: false
}
};
/*---------------------------------
Regular Line Chart
---------------------------------*/
if ($("#line-chart")[0]) {
$.plot($("#line-chart"), [
{data: d1, lines: { show: true, fill: 0.98 }, label: 'Product 1', stack: true, color: '#1f292f' },
{data: d3, lines: { show: true, fill: 0.98 }, label: 'Product 2', stack: true, color: '#dbdddd' }
], options);
}
/*---------------------------------
Recent Items Table Chart
---------------------------------*/
if ($("#recent-items-chart")[0]) {
$.plot($("#recent-items-chart"), [
{data: getRandomData(), lines: { show: true, fill: 0.1 }, label: 'Items', stack: true, color: '#dbdddd' },
], options);
}
/*---------------------------------
Tooltips for Flot Charts
---------------------------------*/
if ($(".flot-chart")[0]) {
$(".flot-chart").bind("plothover", function (event, pos, item) {
if (item) {
var x = item.datapoint[0].toFixed(2),
y = item.datapoint[1].toFixed(2);
$(".flot-tooltip").html(item.series.label + " of " + x + " = " + y).css({top: item.pageY+5, left: item.pageX+5}).show();
}
else {
$(".flot-tooltip").hide();
}
});
$("<div class='flot-tooltip' class='chart-tooltip'></div>").appendTo("body");
}
});

View File

@ -0,0 +1,88 @@
$(document).ready(function(){
var pieData = [
{data: 1, color: '#dbdddd', label: 'Toyota'},
{data: 2, color: '#636c72', label: 'Nissan'},
{data: 3, color: '#3e4a51', label: 'Hyundai'},
{data: 4, color: '#1f292f', label: 'Scion'},
{data: 4, color: '#ffffff', label: 'Daihatsu'},
]
/*---------------------------------
Pie Chart
---------------------------------*/
if($('#pie-chart')[0]){
$.plot('#pie-chart', pieData, {
series: {
pie: {
show: true,
stroke: {
width: 0,
},
},
},
legend: {
container: '.flc-pie',
backgroundOpacity: 0.5,
noColumns: 0,
backgroundColor: "white",
lineWidth: 0
},
grid: {
hoverable: true,
clickable: true
},
tooltip: true,
tooltipOpts: {
content: "%p.0%, %s", // show percentages, rounding to 2 decimal places
shifts: {
x: 20,
y: 0
},
defaultTheme: false,
cssClass: 'flot-tooltip'
}
});
}
/*---------------------------------
Donut Chart
---------------------------------*/
if($('#donut-chart')[0]){
$.plot('#donut-chart', pieData, {
series: {
pie: {
innerRadius: 0.5,
show: true,
stroke: {
width: 0,
color: '#2b343a'
},
},
},
legend: {
container: '.flc-donut',
backgroundOpacity: 0.5,
noColumns: 0,
backgroundColor: "white",
lineWidth: 0
},
grid: {
hoverable: true,
clickable: true
},
tooltip: true,
tooltipOpts: {
content: "%p.0%, %s", // show percentages, rounding to 2 decimal places
shifts: {
x: 20,
y: 0
},
defaultTheme: false,
cssClass: 'flot-tooltip'
}
});
}
});

View File

@ -0,0 +1,497 @@
/*----------------------------------------------------------
Detect Mobile Browser
-----------------------------------------------------------*/
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
$('html').addClass('ismobile');
}
$(window).load(function () {
/*-----------------------------------------------------------
Page Loader
-----------------------------------------------------------*/
if($('.page-loader')[0]) {
setTimeout (function () {
$('.page-loader').fadeOut();
}, 500);
}
})
$(document).ready(function(){
/*----------------------------------------------------------
Scrollbar
-----------------------------------------------------------*/
function scrollBar(selector, theme, mousewheelaxis) {
$(selector).mCustomScrollbar({
theme: theme,
scrollInertia: 100,
axis:'mousewheelaxis',
mouseWheel: {
enable: true,
axis: mousewheelaxis,
preventDefault: true
}
});
}
if (!$('html').hasClass('ismobile')) {
//On Custom Class
if ($('.c-overflow')[0]) {
scrollBar('.c-overflow', 'minimal-dark', 'y');
}
}
/*----------------------------------------------------------
Dropdown Menu
-----------------------------------------------------------*/
if($('.dropdown')[0]) {
//Propagate
$('body').on('click', '.dropdown.open .dropdown-menu', function(e){
e.stopPropagation();
});
$('.dropdown').on('shown.bs.dropdown', function (e) {
if($(this).attr('data-animation')) {
$animArray = [];
$animation = $(this).data('animation');
$animArray = $animation.split(',');
$animationIn = 'animated '+$animArray[0];
$animationOut = 'animated '+ $animArray[1];
$animationDuration = ''
if(!$animArray[2]) {
$animationDuration = 500; //if duration is not defined, default is set to 500ms
}
else {
$animationDuration = $animArray[2];
}
$(this).find('.dropdown-menu').removeClass($animationOut)
$(this).find('.dropdown-menu').addClass($animationIn);
}
});
$('.dropdown').on('hide.bs.dropdown', function (e) {
if($(this).attr('data-animation')) {
e.preventDefault();
$this = $(this);
$dropdownMenu = $this.find('.dropdown-menu');
$dropdownMenu.addClass($animationOut);
setTimeout(function(){
$this.removeClass('open')
}, $animationDuration);
}
});
}
/*----------------------------------------------------------
Calendar Widget
-----------------------------------------------------------*/
if($('#calendar-widget')[0]) {
(function(){
$('#calendar-widget #cw-body').fullCalendar({
contentHeight: 'auto',
theme: true,
header: {
right: '',
center: 'prev, title, next',
left: ''
},
defaultDate: '2014-06-12',
editable: true,
events: [
{
title: 'All Day',
start: '2014-06-01',
},
{
title: 'Long Event',
start: '2014-06-07',
end: '2014-06-10',
},
{
id: 999,
title: 'Repeat',
start: '2014-06-09',
},
{
id: 999,
title: 'Repeat',
start: '2014-06-16',
},
{
title: 'Meet',
start: '2014-06-12',
end: '2014-06-12',
},
{
title: 'Lunch',
start: '2014-06-12',
},
{
title: 'Birthday',
start: '2014-06-13',
},
{
title: 'Google',
url: 'http://google.com/',
start: '2014-06-28',
}
]
});
//Display Current Date as Calendar widget header
var mYear = moment().format('YYYY');
var mDay = moment().format('dddd, MMM D');
$('#calendar-widget .cwh-year').html(mYear);
$('#calendar-widget .cwh-day').html(mDay);
})();
}
/*----------------------------------------------------------
Weather Widget
-----------------------------------------------------------*/
if ($('#weather-widget')[0]) {
$.simpleWeather({
location: 'Austin, TX',
woeid: '',
unit: 'f',
success: function(weather) {
html = '<div class="weather-status">'+weather.temp+'&deg;'+weather.units.temp+'</div>';
html += '<ul class="weather-info"><li>'+weather.city+', '+weather.region+'</li>';
html += '<li class="currently">'+weather.currently+'</li></ul>';
html += '<div class="weather-icon wi-'+weather.code+'"></div>';
html += '<div class="dw-footer"><div class="weather-list tomorrow">';
html += '<span class="weather-list-icon wi-'+weather.forecast[2].code+'"></span><span>'+weather.forecast[1].high+'/'+weather.forecast[1].low+'</span><span>'+weather.forecast[1].text+'</span>';
html += '</div>';
html += '<div class="weather-list after-tomorrow">';
html += '<span class="weather-list-icon wi-'+weather.forecast[2].code+'"></span><span>'+weather.forecast[2].high+'/'+weather.forecast[2].low+'</span><span>'+weather.forecast[2].text+'</span>';
html += '</div></div>';
$("#weather-widget").html(html);
},
error: function(error) {
$("#weather-widget").html('<p>'+error+'</p>');
}
});
}
/*----------------------------------------------------------
Auto Size Textare
-----------------------------------------------------------*/
if ($('.auto-size')[0]) {
autosize($('.auto-size'));
}
/*----------------------------------------------------------
Text Field
-----------------------------------------------------------*/
//Add blue animated border and remove with condition when focus and blur
if($('.fg-line')[0]) {
$('body').on('focus', '.fg-line .form-control', function(){
$(this).closest('.fg-line').addClass('fg-toggled');
})
$('body').on('blur', '.form-control', function(){
var p = $(this).closest('.form-group, .input-group');
var i = p.find('.form-control').val();
if (p.hasClass('fg-float')) {
if (i.length == 0) {
$(this).closest('.fg-line').removeClass('fg-toggled');
}
}
else {
$(this).closest('.fg-line').removeClass('fg-toggled');
}
});
}
//Add blue border for pre-valued fg-flot text feilds
if($('.fg-float')[0]) {
$('.fg-float .form-control').each(function(){
var i = $(this).val();
if (!i.length == 0) {
$(this).closest('.fg-line').addClass('fg-toggled');
}
});
}
/*----------------------------------------------------------
Audio and Video Player
-----------------------------------------------------------*/
if($('audio, video')[0]) {
$('video,audio').mediaelementplayer();
}
/*----------------------------------------------------------
Chosen
-----------------------------------------------------------*/
if($('.chosen')[0]) {
$('.chosen').chosen({
width: '100%',
allow_single_deselect: true
});
}
/*----------------------------------------------------------
NoUiSlider (Input Slider)
-----------------------------------------------------------*/
//Basic
if ($('#input-slider')[0]) {
var slider = document.getElementById ('input-slider');
noUiSlider.create (slider, {
start: [20],
connect: 'lower',
range: {
'min': 0,
'max': 100
}
});
}
//Range
if ($('#input-slider-range')[0]) {
var sliderRange = document.getElementById ('input-slider-range');
noUiSlider.create (sliderRange, {
start: [40, 70],
connect: true,
range: {
'min': 0,
'max': 100
}
});
}
//Range with value
if($('#input-slider-value')[0]) {
var sliderRangeValue = document.getElementById('input-slider-value');
noUiSlider.create(sliderRangeValue, {
start: [10, 50],
connect: true,
range: {
'min': 0,
'max': 100
}
});
sliderRangeValue.noUiSlider.on('update', function( values, handle ) {
document.getElementById('input-slider-value-output').innerHTML = values[handle];
});
}
/*----------------------------------------------------------
Input Mask
-----------------------------------------------------------*/
if ($('input-mask')[0]) {
$('.input-mask').mask();
}
/*----------------------------------------------------------
Farbtastic Color Picker
-----------------------------------------------------------*/
if ($('.color-picker')[0]) {
$('.color-picker').each(function(){
var colorOutput = $(this).closest('.cp-container').find('.cp-value');
$(this).farbtastic(colorOutput);
});
}
/*-----------------------------------------------------------
Summernote HTML Editor
-----------------------------------------------------------*/
if ($('.html-editor')[0]) {
$('.html-editor').summernote({
height: 150
});
}
if($('.html-editor-click')[0]) {
//Edit
$('body').on('click', '.hec-button', function(){
$('.html-editor-click').summernote({
focus: true
});
$('.hec-save').show();
})
//Save
$('body').on('click', '.hec-save', function(){
$('.html-editor-click').code();
$('.html-editor-click').destroy();
$('.hec-save').hide();
});
}
//Air Mode
if($('.html-editor-airmod')[0]) {
$('.html-editor-airmod').summernote({
airMode: true
});
}
/*-----------------------------------------------------------
Date Time Picker
-----------------------------------------------------------*/
//Date Time Picker
if ($('.date-time-picker')[0]) {
$('.date-time-picker').datetimepicker();
}
//Time
if ($('.time-picker')[0]) {
$('.time-picker').datetimepicker({
format: 'LT'
});
}
//Date
if ($('.date-picker')[0]) {
$('.date-picker').datetimepicker({
format: 'DD/MM/YYYY'
});
}
$('.date-picker').on('dp.hide', function(){
$(this).closest('.dtp-container').removeClass('fg-toggled');
$(this).blur();
})
/*-----------------------------------------------------------
Form Wizard
-----------------------------------------------------------*/
if ($('.form-wizard-basic')[0]) {
$('.form-wizard-basic').bootstrapWizard({
tabClass: 'fw-nav',
'nextSelector': '.next',
'previousSelector': '.previous'
});
}
/*-----------------------------------------------------------
Waves
-----------------------------------------------------------
(function(){
Waves.attach('.btn:not(.btn-icon):not(.btn-float)');
Waves.attach('.btn-icon, .btn-float', ['waves-circle', 'waves-float']);
Waves.init();
})();
*/
/*----------------------------------------------------------
Lightbox
-----------------------------------------------------------*/
if ($('.lightbox')[0]) {
$('.lightbox').lightGallery({
enableTouch: true
});
}
/*-----------------------------------------------------------
Link prevent
-----------------------------------------------------------*/
$('body').on('click', '.a-prevent', function(e){
e.preventDefault();
});
/*----------------------------------------------------------
Bootstrap Accordion Fix
-----------------------------------------------------------*/
if ($('.collapse')[0]) {
//Add active class for opened items
$('.collapse').on('show.bs.collapse', function (e) {
$(this).closest('.panel').find('.panel-heading').addClass('active');
});
$('.collapse').on('hide.bs.collapse', function (e) {
$(this).closest('.panel').find('.panel-heading').removeClass('active');
});
//Add active class for pre opened items
$('.collapse.in').each(function(){
$(this).closest('.panel').find('.panel-heading').addClass('active');
});
}
/*-----------------------------------------------------------
Tooltips
-----------------------------------------------------------*/
if ($('[data-toggle="tooltip"]')[0]) {
$('[data-toggle="tooltip"]').tooltip();
}
/*-----------------------------------------------------------
Popover
-----------------------------------------------------------*/
if ($('[data-toggle="popover"]')[0]) {
$('[data-toggle="popover"]').popover();
}
/*-----------------------------------------------------------
IE 9 Placeholder
-----------------------------------------------------------*/
if($('html').hasClass('ie9')) {
$('input, textarea').placeholder({
customClass: 'ie9-placeholder'
});
}
/*-----------------------------------------------------------
Typeahead Auto Complete
-----------------------------------------------------------*/
if($('.typeahead')[0]) {
var statesArray = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
];
var states = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.whitespace,
queryTokenizer: Bloodhound.tokenizers.whitespace,
local: statesArray
});
$('.typeahead').typeahead({
hint: true,
highlight: true,
minLength: 1
},
{
name: 'states',
source: states
});
}
});

View File

@ -0,0 +1,27 @@
$(window).load(function() {
function notify(message, type) {
$.growl({
message: message
}, {
type: type,
allow_dismiss: true,
label: 'Cancel',
className: 'btn-xs btn-inverse align-right',
placement: {
from: 'top',
align: 'right'
},
delay: 10000,
animate: {
enter: 'animated fadeIn',
exit: 'animated fadeOut'
},
offset: {
x: 20,
y: 85
}
});
}
});

View File

@ -0,0 +1,3 @@
I have created a seperate folder(flot-charts) for Flot Chart items.
Each and every Flot chart I have used in this template have it's own js file inside flot-charts folder
in order to get a clear picture of codes.

View File

@ -1,222 +0,0 @@
/**
* Ponyville Live! Global JavaScript
* Made with love for the ponyfolk. /)
*/
$(function() {
processMultiRows();
$('a[data-toggle="tab"]').on('shown', function (e) {
processMultiRows();
});
if ($('html').hasClass('theme_dark'))
{
$('.btn.btn-inverse').addClass('btn-normal');
$('.btn').not('.btn-inverse,.btn-primary,.btn-success,.btn-warning,.btn-error').addClass('btn-inverse');
$('.btn.btn-normal').removeClass('btn-inverse btn-normal');
$('div.navbar').addClass('navbar-inverse');
}
$('#btn-tune-in,.btn-tune-in').click(function(e) {
var href = $(this).attr('href');
window.open(href, "pvlplayer", "width=400,height=600,menubar=0,toolbar=0,location=0,status=1");
e.preventDefault();
return false;
});
/* Indicate Flash support */
$('html').addClass(typeof swfobject !== 'undefined' && swfobject.getFlashPlayerVersion().major !== 0 ? 'flash' : 'no-flash');
/* Autoselect */
$('.autoselect').each(function() {
var active = $(this).attr('rel');
$(this).find('[rel="'+active+'"]').addClass('active');
});
/* Link fixes for iOS Apps */
if (('standalone' in window.navigator) && window.navigator.standalone) {
$('a').live('click', function() {
if(!$(this).hasClass('noeffect')) {
window.location = $(this).attr('href');
return false;
}
});
}
/* Carousel and touch support. */
$('.carousel').carousel({
interval: 10000
});
if ($().hammer)
{
var hammer_options = {};
$('.carousel')
.hammer(hammer_options)
.on("swipeleft", function(ev) {
$(this).carousel('next');
})
.on("swiperight", function(ev) {
$(this).carousel('prev');
});
}
if ($.fn.nanoScroller)
{
$(".nano").nanoScroller();
}
/* Song Information button. */
$('.btn-show-song-info').on('click', function(e) {
e.preventDefault();
var song_id = $(this).data('id');
showSongInfo(song_id);
});
/* Time synchronization. */
updateTime();
});
/* Song biography popup. */
function showSongInfo(song_id)
{
console.log('Song information for ID: '+song_id);
// All Song ID hashes are uniform length.
if (song_id.length != 32)
return false;
var info_url = DF_BaseUrl+'/song/index/id/'+song_id;
modalPopup(info_url, {
'width': 600,
'minWidth': 600,
'maxWidth': 600,
'height': 500,
'minHeight': 500,
'maxHeight': 500,
'onComplete': function() {
cleanUpSongInfo(); // Loaded in remote URL.
}
});
}
/* Clock synchronization. */
var clock_timeout;
var clock_interval = 60000;
function updateTime()
{
clearTimeout(clock_timeout);
var new_current_time = moment().utcOffset(PVL_UtcOffset).format('h:mmA');
$('.current_time').text(new_current_time);
clock_timeout = setTimeout('updateTime()', clock_interval);
}
/* Fancybox (or iFrame if fancybox isn't available). */
function modalPopup(popup_url, params)
{
closeAllDropdowns();
params = $.extend({
'type': 'ajax',
'href': popup_url,
'width': 600,
'height': 500
}, params);
console.log(params);
// Detect iframe.
if (window!=window.top || !$.fn.fancybox)
window.open(popup_url,'PVLModalPopup','menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height='+params.height+',width='+params.width);
else
$.fancybox.open(params);
}
function intOrZero(number)
{
return parseInt(number) || 0;
}
function getUnixTimestamp()
{
return Math.round((new Date()).getTime() / 1000);
}
function addParameter(url, parameterName, parameterValue, atStart)
{
replaceDuplicates = true;
if(url.indexOf('#') > 0){
var cl = url.indexOf('#');
urlhash = url.substring(url.indexOf('#'),url.length);
} else {
urlhash = '';
cl = url.length;
}
sourceUrl = url.substring(0,cl);
var urlParts = sourceUrl.split("?");
var newQueryString = "";
if (urlParts.length > 1)
{
var parameters = urlParts[1].split("&");
for (var i=0; (i < parameters.length); i++)
{
var parameterParts = parameters[i].split("=");
if (!(replaceDuplicates && parameterParts[0] == parameterName))
{
if (newQueryString == "")
newQueryString = "?";
else
newQueryString += "&";
newQueryString += parameterParts[0] + "=" + (parameterParts[1]?parameterParts[1]:'');
}
}
}
if (newQueryString == "")
newQueryString = "?";
if(atStart){
newQueryString = '?'+ parameterName + "=" + parameterValue + (newQueryString.length>1?'&'+newQueryString.substring(1):'');
} else {
if (newQueryString !== "" && newQueryString != '?')
newQueryString += "&";
newQueryString += parameterName + "=" + (parameterValue?parameterValue:'');
}
return urlParts[0] + newQueryString + urlhash;
}
function processMultiRows()
{
// Add support for multiple rows for all divisible-by-12 columns.
_.forEach([2, 3, 4, 6, 12], function(j) {
var num_per_row = 12 / j;
$('.row-multiple').each(function() {
var i = 0;
$(this).find('.span'+j).removeClass('start-of-row');
$(this).find('.span'+j+':visible').each(function() {
i++;
if (num_per_row == 1 || i % num_per_row == 1)
$(this).addClass('start-of-row');
});
});
});
}
function closeAllDropdowns()
{
$('.dropdown.open').removeClass('open');
$('.btn-group.open').removeClass('open');
}

View File

@ -1,232 +0,0 @@
/**
* DF Core Layout jQuery Functions
*/
var is_compact;
var is_narrow;
$(function() {
/* Auto-header navigation. */
$('div.navbar a.here').closest('li').addClass('active');
$('div.navbar div.nav-collapse > ul').addClass('nav');
$('ul.nav li > ul').each(function() {
$(this).closest('li').addClass('dropdown');
$(this).prev('a').attr('href', '#').attr('data-toggle', 'dropdown').addClass('dropdown-toggle').append(' <b class="caret"></b>');
$(this).addClass('dropdown-menu');
});
$('div.navbar.navbar-unloaded').removeClass('navbar-unloaded');
/* Register global AJAX handler. */
$.ajaxSetup({ global: true });
$(document.body).ajaxComplete(function(e) {
initPage(e.target);
});
/* Adding classes for resizing */
handleResize();
$(window).resize(handleResize);
initPage($(document.body));
});
function handleResize()
{
var width = $(window).width();
is_compact = (width < 768);
is_narrow = (width < 980);
}
/* Page initialization function. */
function initPage(page) {
/* Clean up display of forms. */
$(page).find('form.df-form').not('.df-form-loaded').each(function() {
$(this).find('input[type="submit"],input[type="reset"],button')
.not('.mid-form')
.addClass('btn')
.wrapAll('<div class="form-actions" />');
$(this).find('button[type="submit"],input[type="submit"]')
.addClass('btn-primary');
var input_lists = $(this).find('input[type="checkbox"],input[type="radio"]');
if (input_lists.length > 0)
{
input_lists.closest('label').contents().filter(function() {
return this.nodeType == 3;
}).before(' ').wrap('<span />');
}
$(this).find('fieldset legend + span.help-block').each(function() {
$(this).prev('legend').append('<br><small>'+$(this).html()+'</small>');
$(this).remove();
});
$(this).find('span.error').closest('div.clearfix').addClass('error');
// Repair smart quotes and other error-causing Unicode elements.
$(this).submit(function(e) {
$(this).find('input[type="text"],textarea').each(function() {
var s = $(this).val();
s = s.replace( /\u2018|\u2019|\u201A|\uFFFD/g, "'" );
s = s.replace( /\u201c|\u201d|\u201e/g, '"' );
s = s.replace( /\u02C6/g, '^' );
s = s.replace( /\u2039/g, '<' );
s = s.replace( /\u203A/g, '>' );
s = s.replace( /\u2013/g, '-' );
s = s.replace( /\u2014/g, '--' );
s = s.replace( /\u2026/g, '...' );
s = s.replace( /\u00A9/g, '(c)' );
s = s.replace( /\u00AE/g, '(r)' );
s = s.replace( /\u2122/g, 'TM' );
s = s.replace( /\u00BC/g, '1/4' );
s = s.replace( /\u00BD/g, '1/2' );
s = s.replace( /\u00BE/g, '3/4' );
s = s.replace(/[\u02DC|\u00A0]/g, " ");
$(this).val(s);
});
});
$(this).addClass('df-form-loaded');
});
/* Bootstrap 2.0 forward compatibility */
$(page).find('.datatable').addClass('table table-bordered');
$(page).find('form .actions').addClass('form-actions');
$(page).find('.btn.primary,.btn.blue').addClass('btn-primary');
$(page).find('.btn.warning,.btn.yellow').addClass('btn-warning');
$(page).find('.btn.danger,.btn.red').addClass('btn-danger');
$(page).find('.btn.success,btn.green').addClass('btn-success');
$(page).find('.btn.small').addClass('btn-small');
$(page).find('.btn.large').addClass('btn-large');
$(page).find('.alert-message').addClass('alert');
$(page).find('.block-message').addClass('alert-block');
$(page).find('.alert.info,.alert.blue').addClass('alert-info');
$(page).find('.alert.danger,.alert.red').addClass('alert-danger');
$(page).find('.alert.success,alert.green').addClass('alert-success');
/* Form validation. */
if (jQuery.fn.validate)
{
$(page).find('form.validate').validate();
}
/* Tooltips */
if (jQuery.fn.tooltip)
{
$(page).find('a[rel=tooltip]').tooltip({placement: 'right', html: true});
}
/* Pagination */
$(page).find('div.pagination li.disabled, div.pagination li.active').click(function(e) {
e.preventDefault();
return false;
});
/* Automatically add zebra-stripes to tables and lists.
* Note that 0-based indexing requires that the "even" and "odd" accessors be switched. */
$(page).find('table.datatable.zebra tbody tr:nth-child(odd)').removeClass('odd even').addClass('odd');
$(page).find('table.datatable.zebra tbody tr:nth-child(even)').removeClass('odd even').addClass('even');
$(page).find('dl.zebra:odd,fieldset.zebra:odd').addClass('odd');
$(page).find('dl.zebra:even,fieldset.zebra:even').addClass('even');
/* Wrappers for confirmation functions. */
$(page).find('.confirm-action,.confirm-delete,.btn.warning').click(function(e) {
var thistitle = $(this).attr('title');
if (thistitle)
var message = 'Are you sure you want to '+thistitle+'?';
else
var message = 'Are you sure you want to complete this action?';
if (!confirm(message))
{
e.preventDefault();
return false;
}
});
/* Disable submit button to prevent double submissions */
$(page).find('form').submit(function(){
if (!$(this).hasClass('no-disable'))
$(this).find('input[type=submit],button[type=submit]').attr('disabled', 'disabled').addClass('disabled').val('Working...');
});
/* Suppress the backspace key. */
$(page).find('select').keypress(function(event) { return cancelBackspace(event) });
$(page).find('select').keydown(function(event) { return cancelBackspace(event) });
/* Apply "equal heights" rules */
$(page).find('div.equal-heights').each(function() {
var elements = $(this).find('div[class^=span]');
elements.equalHeight();
$(window).resize(function() {
elements.equalHeight();
});
});
/* Form validation. */
if (jQuery.fn.fancybox)
{
var height = screen.height/2;
$(page).find('.fancybox').fancybox({
maxWidth : 1280,
maxHeight : 720,
autoSize : true,
fitToView : true,
width : height * 16/9,
height : height,
aspectRatio : true,
arrows : false,
closeClick : false,
closeBtn : true,
openEffect : 'none',
closeEffect : 'none',
helpers : { media : {} }
});
}
}
/* Prevents the backspace key from navigating backwards on dropdown forms. */
function cancelBackspace(event) {
if (event.keyCode == 8) {
return false;
}
}
(function($) {
/* Make all elements in a group have the same height. */
$.fn.extend({
equalHeight: function() {
if (is_compact)
{
$(this).height('auto');
}
else
{
var tallest = 0;
$(this).each(function() {
$(this).height('auto');
var thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
$(this).height(tallest);
}
}
});
})(jQuery);

View File

@ -1,190 +0,0 @@
(function (root, factory) {
'use strict';
if (typeof define === 'function' && define.amd) {
// AMD environment
define('notify', [], function () {
return factory(root, document);
});
} else if (typeof exports === 'object') {
// CommonJS environment
module.exports = factory(root, document);
} else {
// Browser environment
root.Notify = factory(root, document);
}
}(window, function (w, d) {
'use strict';
function isFunction (item) {
return typeof item === 'function';
}
function Notify(title, options) {
if (typeof title !== 'string') {
throw new Error('Notify(): first arg (title) must be a string.');
}
this.title = title;
this.options = {
icon: '',
body: '',
tag: '',
notifyShow: null,
notifyClose: null,
notifyClick: null,
notifyError: null,
permissionGranted: null,
permissionDenied: null,
timeout: null
};
this.permission = null;
if (!Notify.isSupported) {
return;
}
//User defined options for notification content
if (typeof options === 'object') {
for (var i in options) {
if (options.hasOwnProperty(i)) {
this.options[i] = options[i];
}
}
//callback when notification is displayed
if (isFunction(this.options.notifyShow)) {
this.onShowCallback = this.options.notifyShow;
}
//callback when notification is closed
if (isFunction(this.options.notifyClose)) {
this.onCloseCallback = this.options.notifyClose;
}
//callback when notification is clicked
if (isFunction(this.options.notifyClick)) {
this.onClickCallback = this.options.notifyClick;
}
//callback when notification throws error
if (isFunction(this.options.notifyError)) {
this.onErrorCallback = this.options.notifyError;
}
}
}
// true if the browser supports HTML5 Notification
Notify.isSupported = 'Notification' in w;
// true if the permission is not granted
Notify.needsPermission = !(Notify.isSupported && Notification.permission === 'granted');
// asks the user for permission to display notifications. Then calls the callback functions is supplied.
Notify.requestPermission = function (onPermissionGrantedCallback, onPermissionDeniedCallback) {
if (!Notify.isSupported) {
return;
}
w.Notification.requestPermission(function (perm) {
switch (perm) {
case 'granted':
if (isFunction(onPermissionGrantedCallback)) {
onPermissionGrantedCallback();
}
break;
case 'denied':
if (isFunction(onPermissionDeniedCallback)) {
onPermissionDeniedCallback();
}
break;
}
});
};
Notify.prototype.show = function () {
if (!Notify.isSupported) {
return;
}
this.myNotify = new Notification(this.title, {
'body': this.options.body,
'tag' : this.options.tag,
'icon' : this.options.icon
});
if (this.options.timeout && !isNaN(this.options.timeout)) {
setTimeout(this.close.bind(this), this.options.timeout * 1000);
}
this.myNotify.addEventListener('show', this, false);
this.myNotify.addEventListener('error', this, false);
this.myNotify.addEventListener('close', this, false);
this.myNotify.addEventListener('click', this, false);
};
Notify.prototype.onShowNotification = function (e) {
if (this.onShowCallback) {
this.onShowCallback(e);
}
};
Notify.prototype.onCloseNotification = function (e) {
if (this.onCloseCallback) {
this.onCloseCallback(e);
}
this.destroy();
};
Notify.prototype.onClickNotification = function (e) {
if (this.onClickCallback) {
this.onClickCallback(e);
}
};
Notify.prototype.onErrorNotification = function (e) {
if (this.onErrorCallback) {
this.onErrorCallback(e);
}
this.destroy();
};
Notify.prototype.destroy = function () {
this.myNotify.removeEventListener('show', this, false);
this.myNotify.removeEventListener('error', this, false);
this.myNotify.removeEventListener('close', this, false);
this.myNotify.removeEventListener('click', this, false);
};
Notify.prototype.close = function () {
this.myNotify.close();
};
Notify.prototype.handleEvent = function (e) {
switch (e.type) {
case 'show':
this.onShowNotification(e);
break;
case 'close':
this.onCloseNotification(e);
break;
case 'click':
this.onClickNotification(e);
break;
case 'error':
this.onErrorNotification(e);
break;
}
};
return Notify;
}));

View File

@ -1,42 +0,0 @@
/**
* Ponyville Live!
* Podcast Episode Management
*/
$(function() {
$('a.podcast-episode').each(function() {
var link_href = $(this).attr('href');
if (link_href.indexOf('youtube') != -1)
{
$(this).addClass('fancybox fancybox.media');
}
else if (link_href.indexOf('soundcloud') != -1)
{
$(this).addClass('fancybox fancybox.iframe');
}
else
{
$(this).attr('target', '_blank');
}
// Trigger AJAX call to log play on video, even if played modally or launched in new page.
$(this).on('click', function(e) {
var analytics_url = $(this).data('log');
if (analytics_url)
{
jQuery.ajax({
'type': 'GET',
'url': analytics_url,
'dataType': 'json'
}).done(function(return_data) {
console.log(return_data);
});
}
});
});
});

View File

@ -1,835 +0,0 @@
/**
* Ponyville Live!
* Radio Player Script
*/
var volume = 70;
var nowplaying_song,
nowplaying_song_id,
nowplaying_url,
nowplaying_station,
np_cache;
var vote_ratelimit = false;
var is_playing,
jp_is_playing;
var socket;
$(function() {
// Check webstorage for existing volume preference.
if (store.enabled && store.get('pvlive_player_volume') !== undefined)
volume = store.get('pvlive_player_volume', 70);
$('.nowplaying-status').hide();
$('.station').click(function(e) {
if (!$(this).closest('.station').hasClass('playing'))
{
e.preventDefault();
playStation($(this).attr('id'));
}
});
// Toggle display of the "Playback History" pane.
$('.station .btn-show-history').click(function(e) {
e.preventDefault();
$(this).closest('.station').find('.station-history').slideToggle();
});
// "Like" links.
$('.station .vote-wrapper a').click(function(e)
{
e.preventDefault();
// Vote rate limiting.
if (vote_ratelimit)
return false;
vote_ratelimit = true;
// Action to call remotely.
if ($(this).hasClass('btn-active'))
var vote_function = 'clearvote';
else if ($(this).hasClass('btn-like'))
var vote_function = 'like';
else
var vote_function = 'dislike';
// Trigger AJAX call.
var songhist_id = intOrZero($(this).closest('.station').data('historyid'));
if (songhist_id == 0)
return false;
/*
var remote_url;
if (typeof DF_ApiUrl !== 'undefined' && DF_ApiUrl != '')
remote_url = DF_ApiUrl+'/song/'+vote_function;
else
*/
var remote_url = DF_BaseUrl+'/api/song/'+vote_function;
jQuery.ajax({
'type': 'GET',
'url': remote_url,
'dataType': 'json',
'data': {
'sh_id': songhist_id,
'client': 'pvlwebapp'
},
'xhrFields': {
'withCredentials': true
}
}).done(function(return_data) {
vote_ratelimit = false;
console.log(return_data);
});
// Update local graphics and text.
var score_display = $(this).closest('.vote-wrapper').find('.nowplaying-score');
var score_original = intOrZero(score_display.data('original'));
if (vote_function == 'clearvote')
{
$(this).removeClass('btn-active');
score_display.text(score_original);
}
else
{
$(this).siblings('a').removeClass('btn-active');
$(this).addClass('btn-active');
if (vote_function == 'like')
var new_score = score_original + 1;
else
var new_score = score_original - 1;
score_display.text(new_score);
}
return false;
});
// Social links.
$('.station .btn-share-station').click(function(e) {
e.preventDefault();
e.stopPropagation();
closeAllDropdowns();
var shareLink = document.URL;
var nowplaying_title = $(this).closest('.station').find('.nowplaying-artist').text();
var nowplaying_artist = $(this).closest('.station').find('.nowplaying-title').text();
if (nowplaying_artist)
var shareTitle = '"'+nowplaying_title+'" by '+nowplaying_artist;
else
var shareTitle = '"'+nowplaying_title+'"';
var station_name = $(this).closest('.station').data('name');
shareTitle = 'I\'m tuned in to '+shareTitle+' on '+station_name+'. Check it out!';
var shareMedia = $(this).closest('.station').find('.station-image').prop('src');
if ($(this).hasClass('btn-share-facebook'))
{
window.open('//www.facebook.com/share.php?s=100&p[url]=' + encodeURIComponent(shareLink) + '&p[images][0]=' + encodeURIComponent(shareMedia) + '&p[title]=' + encodeURIComponent(shareTitle),'Facebook','menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');
}
else if ($(this).hasClass('btn-share-twitter'))
{
window.open('//twitter.com/home?status=' + encodeURIComponent(shareTitle) + '+' + encodeURIComponent(shareLink),'Twitter','menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');
}
});
// Song profile link.
$('.station .song-info, .station .btn-song-info').on('click', function(e) {
if ($(this).closest('.station').hasClass('playing'))
{
e.preventDefault();
e.stopPropagation();
var song_id = $(this).closest('.station').data('songid');
if (song_id != "")
showSongInfo(song_id);
return false;
}
});
/* Upcoming Schedule button. */
$('.nowplaying-onair, .btn-station-schedule').on('click', function(e) {
if ($(this).closest('.station').hasClass('playing'))
{
e.preventDefault();
var station_id = $(this).closest('.station').data('id');
showStationSchedule(station_id);
}
});
// "Browse Stations" link.
$('#btn_browse_stations').click(function(e) {
playInPopUp(0);
e.preventDefault();
});
/* Switch Stream button. */
$('.btn-switch-stream').on('click', function(e) {
e.preventDefault();
// Stop the current playing song.
stopAllPlayers();
var station = $(this).closest('.station');
var stream_id = $(this).closest('li').attr('rel');
station.data('streamid', stream_id);
station.removeData('songid');
nowplaying_song_id = null;
nowplaying_song = null;
// Force stream metadata switch.
processNowPlaying();
// Play the new stream URL.
playStation(station.attr('id'));
// Persist the stream change for future page loads.
jQuery.ajax({
'type': 'POST',
'url': DF_BaseUrl+'/profile/stream',
'dataType': 'text',
'data': {
'station': station.data('id'),
'stream': stream_id
}
}).done(function(return_data) {
console.log('Persist stream preference: '+return_data);
});
});
/* Websocket Interaction */
socket = io(pvlnode_remote_url, {path: pvlnode_remote_path});
socket.on('connect', function(){});
socket.on('disconnect', function(){});
socket.on('nowplaying', function(e) {
console.log('Nowplaying updated.');
np_cache = e;
processNowPlaying();
console.log(np_cache);
// Send message to iframe listeners.
top.postMessage({
type: 'nowplaying',
body: JSON.stringify(e)
}, '*');
});
socket.on('schedule.event_upcoming', function(e) {
console.log(e);
var station_name = e.station.name;
var station_image = e.station.image_url;
var station_id = 'station_'+ e.station.shortcode;
// Only show events for visible stations.
if ($('#'+station_id).length == 0)
return false;
var event_name = e.event.title;
var event_url = e.event.web_url;
notify(station_image, event_name, 'Coming up on '+station_name, {
tag: 'event_upcoming',
timeout: 15
});
// Send message to iframe listeners.
top.postMessage({
type: 'event_upcoming',
body: JSON.stringify(e)
}, '*');
});
socket.on('podcast.new_episode', function(e) {
console.log(e);
// Don't show on embedded pages.
if (window.self !== window.top)
return false;
var podcast_name = e.podcast.name;
var podcast_image = e.podcast.image_url;
var episode_name = e.episode.title;
var episode_url = e.episode.web_url;
notify(podcast_image, podcast_name, 'New episode available:\n'+episode_name, {
tag: 'podcast_episode',
timeout: 15
});
// Send message to iframe listeners.
top.postMessage({
type: 'podcast_episode',
body: JSON.stringify(e)
}, '*');
});
// Autoplay registration.
if (typeof pvl_autoplay_station !== "undefined") {
var autoplay_triggered = false;
socket.on('nowplaying', function(e) {
if (!autoplay_triggered) {
autoplay_triggered = true;
playStation($('.station[data-id="'+pvl_autoplay_station+'"]').attr('id'));
}
});
}
// Remote volume parameter registration.
if (typeof pvl_autoplay_volume !== "undefined") {
volume = pvl_autoplay_volume;
}
});
function processNowPlaying()
{
var listener_total = 0;
var listeners_by_type = [];
_.each(np_cache, function(station_info, station_id)
{
var category = station_info.station.category;
var listeners = 0;
if (category == 'video')
listeners = processVideoNowPlayingRow(station_info, station_id);
else
listeners = processAudioNowPlayingRow(station_info, station_id);
listener_total += listeners;
if (typeof(listeners_by_type[category]) == 'undefined')
listeners_by_type[category] = 0;
listeners_by_type[category] += listeners;
});
// Aggregate listener totals.
for(type_name in listeners_by_type)
{
$('#nowplaying-listeners-'+type_name).html('<i class="icon-user"></i>&nbsp;'+listeners_by_type[type_name]);
}
$('#nowplaying-listeners-total').html('<i class="icon-user"></i>&nbsp;'+listener_total);
if ($('.video-channel.online').length > 0)
{
$('.video-listing').show();
processMultiRows();
}
else
{
$('.video-listing').hide();
}
}
function processAudioNowPlayingRow(station_info, station_id)
{
var station = $('#station_'+station_id);
var station_exists = (station.length != 0);
var listener_total = 0;
if (!station_exists)
return 0;
var stream_id = parseInt(station.data('streamid'));
var stream = _(station_info.streams).find({'id': stream_id });
if (typeof stream == 'undefined')
{
station.hide();
return 0;
}
// Set stream URL.
station.data('stream', stream.url);
station.data('type', stream.type);
// Highlight active stream.
station.find('.stream-switcher ul li').removeClass('active');
station.find('.stream-switcher ul li[rel="'+stream_id+'"]').addClass('active');
// Format title.
var song_tooltip = '';
if (!stream.current_song.title)
{
station.find('.nowplaying-artist').text(stream.current_song.text);
station.find('.nowplaying-title').text('');
song_tooltip += stream.current_song.text;
}
else
{
station.find('.nowplaying-artist').text(stream.current_song.title);
station.find('.nowplaying-title').text(stream.current_song.artist);
song_tooltip += stream.current_song.title + "\n" + stream.current_song.artist;
}
if (_.size(stream.current_song.external) > 0)
{
station.find('.song-info-button').show();
song_tooltip += "\n" + 'More Info Available';
}
else
{
station.find('.song-info-button').hide();
}
// Set hover tooltip for song.
station.find('.song-info').attr('title', song_tooltip);
// Show stream info if non-default.
if (station.data('defaultstream') != stream_id)
{
station.find('.genre-info').hide();
station.find('.stream-info').html('<i class="icon-code-fork"></i> '+stream.name).show();
}
else
{
station.find('.genre-info').show();
station.find('.stream-info').hide();
}
// Trigger notification of song change.
if (station.hasClass('playing'))
{
if (stream.current_song.id != nowplaying_song_id && jp_is_playing) {
notify(station.data('image'), station_info.station.name, stream.current_song.text, { tag: 'nowplaying' });
}
nowplaying_song = stream.current_song.text;
nowplaying_song_id = stream.current_song.id;
}
// Post listener count.
var station_listeners = intOrZero(station_info.listeners.current);
if (station_listeners >= 0)
{
listener_total += station_listeners;
station.find('.nowplaying-listeners').show().html('<i class="icon-user"></i>&nbsp;'+station_listeners);
}
else
{
station.find('.nowplaying-listeners').hide();
}
// Post listener count for each stream.
_(station_info.streams).forEach(function(stream_row)
{
var stream_listeners = intOrZero(stream_row.listeners.current);
if (stream_row.status == 'online')
station.find('li[rel="'+stream_row.id+'"]').show();
else
station.find('li[rel="'+stream_row.id+'"]').hide();
station.find('li[rel="'+stream_row.id+'"] .nowplaying-stream-listeners').html('<i class="icon-user"></i>'+stream_listeners);
});
// Style offline/online stations properly.
if (stream.status == 'offline')
{
station.addClass('offline');
if (station.data('inactive') == 'hide')
station.hide();
}
else
{
station.removeClass('offline');
if (!station.is(':visible'))
station.show();
}
// Set event data.
var event_info;
if (station_info.event.title)
{
event_info = station_info.event;
station.find('.nowplaying-onair').show().html('<i class="icon-star"></i>&nbsp;On Air: '+event_info.title);
}
else if (station_info.event_upcoming.title)
{
event_info = station_info.event_upcoming;
station.find('.nowplaying-onair').show().html('<i class="icon-star"></i>&nbsp;In '+intOrZero(event_info.minutes_until)+' mins: '+event_info.title);
}
else
{
station.find('.nowplaying-onair').empty().hide();
}
// Set station history.
if (stream.song_history)
{
var history_block = '';
var i = 1;
_(stream.song_history).forEach(function(history_row) {
var history_song;
if (history_row.song.title != '')
history_song = history_row.song.artist+' - '+history_row.song.title;
else
history_song = history_row.song.text;
history_block += '<div>#'+i+': <a href="#" onclick="showSongInfo(\''+history_row.song.id+'\'); return false;">'+history_song+'</a></div>';
i++;
});
station.find('.station-history').html(history_block);
}
var current_song_id = station.data('songid');
var song_id = stream.current_song.id;
// Detect a change in song.
if (current_song_id != song_id)
{
station.find('.vote-wrapper a').removeClass('btn-active');
var song_score = intOrZero(stream.current_song.score);
station.find('.nowplaying-score').data('original', song_score).text(song_score);
}
station.data('songid', song_id);
var song_history_id = intOrZero(stream.current_song.sh_id);
station.data('historyid', song_history_id);
return listener_total;
}
function processVideoNowPlayingRow(station_info, station_id)
{
var listener_total = 0;
_(station_info.streams).forEach(function(stream_info) {
var station = $('#channel_' + station_id + '_' + stream_info.id);
var station_exists = (station.length != 0);
if (!station_exists)
return 0;
// Post listener count.
var station_listeners = intOrZero(stream_info.meta.listeners);
if (station_listeners >= 0)
{
listener_total += station_listeners;
station.find('.nowplaying-listeners').show().html('<i class="icon-user"></i>&nbsp;' + station_listeners);
}
else
{
station.find('.nowplaying-listeners').hide();
}
if (stream_info.on_air.thumbnail)
{
station.find('img.video-thumbnail').attr('src', stream_info.on_air.thumbnail);
}
// Style offline/online stations properly.
if (stream_info.meta.status == 'offline')
{
station.removeClass('online offline').addClass('offline').hide();
}
else
{
if (!station.is(':visible'))
{
notify(station_info.station.image_url, station_info.station.name, 'Stream online!', {tag: 'nowplaying'});
}
station.removeClass('online offline').addClass('online').show();
}
// Set event data.
var event_info;
if (station_info.event.title)
{
event_info = station_info.event;
station.find('.nowplaying-onair').show().find('.nowplaying-inner').html('<i class="icon-star"></i>&nbsp;On Air: ' + event_info.title);
}
else if (station_info.event_upcoming.title)
{
event_info = station_info.event_upcoming;
station.find('.nowplaying-onair').show().find('.nowplaying-inner').html('<i class="icon-star"></i>&nbsp;In ' + intOrZero(event_info.minutes_until) + ' mins: ' + event_info.title);
}
else
{
station.find('.nowplaying-onair').empty().hide();
}
});
return listener_total;
}
function playStation(id)
{
var station = $('#'+id);
var stream_type = station.data('type');
var stream_url = station.data('stream');
nowplaying_url = stream_url;
var currently_playing = station.hasClass('playing');
if (currently_playing)
{
stopAllPlayers();
}
else
{
if (stream_url && stream_type)
{
stopAllPlayers();
station.find('.station-player-container').append('<div id="pvl-jplayer"></div><div id="pvl-jplayer-controls"></div>');
$('#pvl-jplayer-controls').append($('#pvl-jplayer-controls-image').html());
$("#pvl-jplayer").jPlayer({
ready: function (event) {
ready = true;
startPlayer(nowplaying_url);
},
pause: function() {
stopAllPlayers();
},
play: function() {
jp_is_playing = true;
},
suspend: function(event) {
console.log('Stream Suspended');
jp_is_playing = false;
},
error: function(event) {
var error_details = event.jPlayer.error;
console.log('Error: '+error_details.message+' - '+error_details.hint);
jp_is_playing = false;
// Auto-replay if Media URL load failure.
if (error_details.message == 'Media URL could not be loaded.')
startPlayer(nowplaying_url);
else
stopAllPlayers();
},
volumechange: function(event) {
volume = Math.round(event.jPlayer.options.volume * 100);
// Persist to local webstorage if enabled.
if (store.enabled)
store.set('pvlive_player_volume', volume);
},
wmode: 'window',
swfPath: DF_ContentPath+'/jplayer/jquery.jplayer.swf',
solution: (canPlayMp3()) ? 'html, flash' : 'flash',
supplied: 'mp3',
preload: 'none',
volume: (volume/100),
muted: false,
backgroundColor: '#000000',
cssSelectorAncestor: '#pvl-jplayer-controls',
errorAlerts: false,
warningAlerts: false
});
station.addClass('playing');
nowplaying_station = id;
$('#tunein_player').data('current_station', station.data('id'));
// Force a reload of the "now playing" data.
processNowPlaying();
// Log in Google Analytics
ga('send', 'event', 'Station', 'Play', station.data('name'));
}
else
{
$('#player').text('Error: This stream is not currently active. Please select another stream to continue.');
}
}
}
var check_interval;
function startPlayer()
{
var stream = {
title: "Ponyville Live!",
mp3: getPlaybackUrl()
};
$("#pvl-jplayer").jPlayer("setMedia", stream).jPlayer("play");
is_playing = true;
check_interval = setInterval('checkPlayer()', 1500);
}
function getPlaybackUrl()
{
var playback_url = addParameter(nowplaying_url, 'played_at', getUnixTimestamp());
console.log('Playback URL: '+playback_url);
return playback_url;
}
function checkPlayer()
{
if (is_playing && !jp_is_playing)
{
clearInterval(check_interval);
startPlayer();
}
}
function stopAllPlayers()
{
if ($("#pvl-jplayer").length > 0 && is_playing)
{
try
{
$('#pvl-jplayer').jPlayer('stop');
}
catch(e) {}
try
{
$('#pvl-jplayer').jPlayer("clearMedia").jPlayer("destroy");
}
catch(e) {}
}
is_playing = false;
nowplaying_station = null;
$('.station .station-player-container').empty();
$('.station-history').hide();
$('.station').removeClass('playing');
$('#tunein_player').removeData('current_station');
}
function canPlayMp3()
{
if (isIE())
return false;
if (isSteam())
return false;
var a = document.createElement('audio');
var can_play_mp3 = !!(a.canPlayType && a.canPlayType('audio/mpeg;').replace(/no/, ''));
return can_play_mp3;
}
function isIE () {
var myNav = navigator.userAgent.toLowerCase();
return (myNav.indexOf('msie') != -1) ? parseInt(myNav.split('msie')[1]) : false;
}
function isSteam() {
var myNav = navigator.userAgent.toLowerCase();
return (myNav.indexOf('gameoverlay') != -1) ? true : false;
}
function playInPopUp(station_id) {
var current_station = $('#tunein_player').data('current_station');
if (station_id == 'current')
station_id = current_station;
if (current_station)
stopAllPlayers();
if (station_id !== undefined)
orig_url += '/id/'+station_id;
// Force mobile page.
orig_url = '//ponyvillelive.com/mobile';
window.open(orig_url, 'pvl_player', 'height=600,width=400,status=yes,scrollbars=yes', true);
}
/* Station schedule popup. */
function showStationSchedule(station_id)
{
console.log('Station Upcoming Schedule: '+station_id);
var url = DF_BaseUrl+'/index/upcoming/id/'+station_id;
modalPopup(url, {
'width': 400,
'minWidth': 400,
'maxWidth': 400,
'maxHeight': 500
});
}
/**
* Utility Functions
*/
function notify(image, title, description, opts)
{
// Defaults (including title/desc parameters).
var options = {
tag: 'pvlnotify',
icon: image,
body: description,
timeout: 5,
notifyClose: null,
notifyClick: null
};
// Merge options.
for (var i in opts) {
if (opts.hasOwnProperty(i)) {
options[i] = opts[i];
}
}
if (DF_AppEnv != 'production') {
var dev_env_name = DF_AppEnv.charAt(0).toUpperCase() + DF_AppEnv.slice(1);
title = '('+dev_env_name+') '+title;
}
// Always request permission, skip to granted if already done.
Notify.requestPermission(function() {
console.log([title, options]);
var notice = new Notify(title, options);
notice.show();
});
}

View File

@ -1,106 +0,0 @@
/*
* Load Main Bootstrap LESS files
*/
@import '../vendors/bower_components/bootstrap/less/bootstrap';
/*
* LESS Plugins
*/
@import 'inc/less-plugins/for';
/*
* Variable and Mixin
*/
@import 'inc/variables';
@import 'inc/mixin';
/*
* Load Font
*/
@import 'inc/font';
/*
* Vendors
*/
@import '../vendors/weather-icons/weather-icons';
@import '../vendors/fileinput/fileinput';
@import '../vendors/bower_components/material-shadows/material-shadows';
// @import '../vendors/bower_components/Waves/src/less/waves';
/*
* Load Website related LESS files
*/
@import 'inc/generics';
@import 'inc/bootstrap-overrides';
@import 'inc/base';
@import 'inc/list';
@import 'inc/header';
@import 'inc/sidebar';
@import 'inc/dropdown';
@import 'inc/listview';
@import 'inc/progress-bar';
@import 'inc/chat';
@import 'inc/tabs';
@import 'inc/card';
@import 'inc/chart';
@import 'inc/widgets';
@import 'inc/table';
@import 'inc/todo';
@import 'inc/button';
@import 'inc/form';
@import 'inc/pagination';
@import 'inc/popover';
@import 'inc/wizard';
@import 'inc/alert';
@import 'inc/media';
@import 'inc/modal';
@import 'inc/panel';
@import 'inc/tooltip';
@import 'inc/breadcrumb';
@import 'inc/messages';
@import 'inc/404';
@import 'inc/login';
@import 'inc/profile';
@import 'inc/photos';
@import 'inc/contacts';
@import 'inc/shadow';
@import 'inc/misc';
@import 'inc/ie-warning';
@import 'inc/footer';
@import 'inc/pricing-table';
@import 'inc/invoice';
@import 'inc/wall';
@import 'inc/skin';
@import 'inc/preloader';
@import 'inc/print';
/*
* Vendor Overrides
*/
@import 'inc/vendor-overrides/mediaelement';
@import 'inc/vendor-overrides/fullcalendar';
@import 'inc/vendor-overrides/bootgrid';
@import 'inc/vendor-overrides/bootstrap-select';
@import 'inc/vendor-overrides/chosen';
@import 'inc/vendor-overrides/noUiSlider';
@import 'inc/vendor-overrides/farbtastic';
@import 'inc/vendor-overrides/summernote';
@import 'inc/vendor-overrides/bootstrap-datetimepicker';
@import 'inc/vendor-overrides/fileinput';
@import 'inc/vendor-overrides/light-gallery';
// @import 'inc/vendor-overrides/waves';
@import 'inc/vendor-overrides/sweetalert';
@import 'inc/vendor-overrides/typeahead';
@import 'inc/vendor-overrides/malihu-custom-scrollbar';
/*
* Custom Pages
*/
@import 'pages/legacy';
@import 'pages/files';
@import 'pages/radio';

111
web/static/less/dark.less Normal file
View File

@ -0,0 +1,111 @@
/*
* Load Main Bootstrap LESS files
*/
@import '../vendors/bower_components/bootstrap/less/bootstrap';
/*
* LESS Plugins
*/
@import 'dark/less-plugins/for';
/*
* Variable and Mixin
*/
@import 'dark/variables';
@import 'dark/mixin';
/*
* Load Font
*/
@import 'dark/font';
/*
* Vendors
*/
@import '../vendors/weather-icons/weather-icons';
@import '../vendors/fileinput/fileinput';
@import '../vendors/bower_components/material-shadows/material-shadows';
/* @import '../vendors/bower_components/Waves/src/less/waves'; */
/*
* Load Website related LESS files
*/
@import 'dark/generics';
@import 'dark/bootstrap-overrides';
@import 'dark/base';
@import 'dark/list';
@import 'dark/header';
@import 'dark/sidebar';
@import 'dark/dropdown';
@import 'dark/list-group';
@import 'dark/progress-bar';
@import 'dark/chat';
@import 'dark/tabs';
@import 'dark/card';
@import 'dark/chart';
@import 'dark/widgets';
@import 'dark/table';
@import 'dark/todo';
@import 'dark/button';
@import 'dark/form';
@import 'dark/pagination';
@import 'dark/popover';
@import 'dark/wizard';
@import 'dark/alert';
@import 'dark/media';
@import 'dark/modal';
@import 'dark/panel';
@import 'dark/tooltip';
@import 'dark/breadcrumb';
@import 'dark/messages';
@import 'dark/404';
@import 'dark/login';
@import 'dark/profile';
@import 'dark/photos';
@import 'dark/contacts';
@import 'dark/shadow';
@import 'dark/misc';
@import 'dark/ie-warning';
@import 'dark/footer';
@import 'dark/pricing-table';
@import 'dark/invoice';
@import 'dark/wall';
/* @import 'dark/skin'; */
@import 'dark/preloader';
@import 'dark/print';
/*
* Vendor Overrides
*/
@import 'dark/vendor-overrides/mediaelement';
@import 'dark/vendor-overrides/fullcalendar';
@import 'dark/vendor-overrides/bootgrid';
@import 'dark/vendor-overrides/bootstrap-select';
@import 'dark/vendor-overrides/chosen';
@import 'dark/vendor-overrides/noUiSlider';
@import 'dark/vendor-overrides/farbtastic';
@import 'dark/vendor-overrides/summernote';
@import 'dark/vendor-overrides/bootstrap-datetimepicker';
@import 'dark/vendor-overrides/fileinput';
@import 'dark/vendor-overrides/light-gallery';
/* @import 'dark/vendor-overrides/waves'; */
@import 'dark/vendor-overrides/sweetalert';
@import 'dark/vendor-overrides/typeahead';
@import 'dark/vendor-overrides/malihu-custom-scrollbar';
/**
* App Page Overrides
*/
@import 'pages/header';
@import 'pages/sidebar';
@import 'pages/legacy';
@import 'pages/files';
@import 'pages/radio';

View File

@ -0,0 +1,66 @@
.four-zero {
height: 100vh;
}
.fz-block {
background: @card-bg;
border-radius: 2px;
position: absolute;
top: 50%;
margin-top: -150px;
text-align: center;
padding: 25px;
height: 300px;
width: 500px;
left: 50%;
margin-left: -250px;
h2 {
font-size: 130px;
line-height: 100%;
font-weight: 100;
}
@media (max-width: @screen-xs-max) {
width: ~"calc(100% - 40px)";
left: 20px;
margin-left: 0;
height: 260px;
margin-top: -130px;
h2 {
font-size: 90px;
}
}
small {
display: block;
font-size: 26px;
margin-top: -10px
}
}
.fzb-links {
margin-top: 20px;
& > a {
font-size: 16px;
display: inline-block;
color: @text-color;
margin: 0 1px;
line-height: 30px;
width: 30px;
height: 30px;
background: rgba(0, 0, 0, 0.09);
border-radius: 50%;
text-align: center;
&:hover {
background: rgba(0, 0, 0, 0.2);
}
}
}

View File

@ -0,0 +1,28 @@
.alert {
padding-left: 30px;
font-size: 13px;
span {
cursor: pointer;
}
&:not(.alert-dismissible) {
padding-right: 30px;
}
&.alert-dismissable {
padding-right: 44px;
}
&.growl-animated {
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
}
}
.alert-default {
.alert-variant(#fff; #fff; @text-dark);
}
.alert-link {
color: #fff !important;
}

View File

@ -4,7 +4,8 @@
*,
*:active,
*:hover {
*:hover,
*:focus {
outline: none !important;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}
@ -12,18 +13,28 @@
html {
overflow-x: ~"hidden\0/";
-ms-overflow-style: none;
&:not(.ie9) {
body {
overflow-y: scroll;
}
}
&.ismobile * {
cursor: pointer;
}
}
html, body {
min-height: 100vh;
}
min-height: 100vh;
}
body {
font-weight: 400;
position: relative;
}
audio, video {
audio, video {
outline: none;
}
@ -31,10 +42,6 @@ p {
margin-bottom: 20px;
}
small {
font-size: 11px;
}
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
small {
font-size: 12px;
@ -45,33 +52,38 @@ h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
position: relative;
padding-bottom: @footer-height;
padding-top: @header-height + 30;
min-height: 100vh;
}
.sidebar-toggled {
#main {
height: 100vh;
overflow: hidden;
}
}
.container {
&.c-alt {
&.container-alt {
max-width: 1170px;
}
}
@media (min-width: @screen-sm-min) and (max-width: @screen-md-max) {
#content {
#content {
&:not(.content-alt) {
@media (min-width: (@screen-lg-min + 80)) {
padding-left: @sidebar-left-width + 15;
padding-right: 15px;
}
}
@media (min-width: (@screen-sm-min)) and (max-width: (@screen-md-max + 80)) {
padding-left: 15px;
padding-right: 15px;
}
}
body {
&.sw-toggled {
#content {
@media (min-width: @screen-lg-min) {
padding-left: @sidebar-left-width;
}
&.content-alt {
max-width: 1200px;
margin: 0 auto;
& > .container {
@media (min-width: @screen-lg-min) {
width: ~"calc(100% - 30px)";
}
}
}
}
}
}

View File

@ -1,6 +1,6 @@
/*
* Media - Overriding the Media object to 3.2 version in order to prevent issues like text overflow.
*/
/*------------------------------------------------------------------------------------------------------------
Media - Overriding the Media object to 3.2 version in order to prevent issues like text overflow.
--------------------------------------------------------------------------------------------------------------*/
.media {
.clearfix();

View File

@ -0,0 +1,25 @@
.breadcrumb {
border-bottom: 1px solid rgba(255,255,255,0.04);
border-radius: 0;
margin-top: -27px;
margin-bottom: 50px;
@media(min-width: (@screen-lg-min + 80)) {
padding: 10px 33px 11px 300px;
}
@media(max-width: (@screen-md-max + 80)) {
padding: 10px 33px 11px;
}
& > li {
& > a {
color: @text-color;
&:hover {
color: @breadcrumb-active-color;
}
}
}
}

View File

@ -0,0 +1,125 @@
.btn {
border: 0;
text-transform: uppercase;
&[class*="bgm-"]:not(.bgm-white) {
color: #fff;
}
.caret {
margin-top: -3px;
}
}
.btn-group, .btn-group-vertical {
.btn,
.btn:active,
.btn:focus,
.btn-group {
box-shadow: none !important;
}
.btn {
margin: 0;
}
}
.btn-xs {
.button-size(2px; @padding-xs-horizontal; 11px; @line-height-small; @border-radius-small);
}
.btn-link {
text-decoration: none;
border-radius: 2px;
color: @text-color;
&:hover {
color: #fff;
}
}
.btn-inverse {
.button-variant(#fff, #454545, transparent);
}
.btn-icon {
border-radius: 50%;
width: 40px;
line-height: 42px;
height: 40px;
padding: 0;
text-align: center;
.zmdi {
font-size: 17px;
}
}
.btn-icon-text {
& > .zmdi {
font-size: 15px;
vertical-align: top;
display: inline-block;
margin-top: 2px;
line-height: 100%;
margin-right: 5px;
}
}
.btn-float {
width: 50px;
height: 50px;
border-radius: 50%;
line-height: 46px !important;
&:not(.m-btn) {
position: absolute !important;
}
i {
font-size: 23px;
.transition(all);
.transition-duration(500ms);
}
&:hover {
i {
.rotate(360deg);
}
}
&:not(.bgm-white):not(.bgm-gray):not(.btn-default) {
& > i {
color: #fff;
}
}
&.bgm-white,
&.bgm-gray {
& > i {
color: #333;
}
}
}
.open .btn {
outline: none !important;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
&:focus, &:active {
outline: none !important;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}
}
/*----------------------------------------
Material Design Add button
------------------------------------------*/
.m-btn {
z-index: 1;
bottom: 40px;
right: 40px;
position: fixed !important;
}

View File

@ -0,0 +1,69 @@
.card {
position: relative;
background: @card-bg;
box-shadow: @card-shadow;
margin-bottom: @grid-gutter-width;
.card-header {
position: relative;
padding: 23px 25px;
h2 {
margin: 0;
line-height: 100%;
font-size: 17px;
font-weight: 400;
small {
display: block;
margin-top: 5px;
line-height: 160%;
}
}
&.ch-alt {
background-color: rgba(255, 255, 255, 0.02);
}
&[class*="bgm-"] {
h2, h2 small {
color: #fff;
}
}
.actions {
position: absolute;
right: 10px;
z-index: 2;
top: 15px;
}
.btn-float {
right: 25px;
bottom: -23px;
z-index: 1;
}
}
a.card-header {
display: block;
}
a.ch-alt:hover {
background-color: rgba(255, 255, 255, 0.055);
}
.card-body {
&.card-padding {
padding: 25px 27px;
}
&.card-padding-sm {
padding: 15px;
}
}
}
.card-header:not(.ch-alt):not([class*="bgm-"]) + .card-padding {
padding-top: 0;
}

View File

@ -13,16 +13,19 @@
}
.mini-charts-item {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
box-shadow: @card-shadow;
position: relative;
margin-bottom: 30px;
background-color: @card-bg;
.chart {
padding: 15px;
padding: 19px;
float: left;
&.chart-pie {
margin: 0 20px;
padding: 14px 11px;
}
}
@ -36,7 +39,6 @@
line-height: 100%;
font-size: 22px;
font-weight: 300;
color: #fff;
}
& > small {
@ -62,9 +64,9 @@
.transition-duration(500ms);
.backface-visibility(hidden);
content: "";
width: 113px;
width: 105px;
height: 100%;
background: rgba(0,0,0,0.1);
background: rgba(255,255,255,0.04);
position: absolute;
left: 0;
top: 0;
@ -81,9 +83,9 @@
}
}
/*
* Sparkline Tooltip
*/
/*------------------------------
Sparkline Tooltip
-------------------------------*/
#jqstooltip {
min-width: 21px;
min-height: 23px;
@ -91,7 +93,6 @@
border: 0;
background: #fff;
box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
background-color: #fff;
.jqsfield {
font-size: 12px;
@ -106,9 +107,9 @@
}
}
/*
* Easy Pie Charts
*/
/*------------------------------
Easy Pie Charts
-------------------------------*/
.epc-item {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
@ -149,10 +150,6 @@
font-size: 30px;
}
}
.pie-title {
color: #fff;
}
}
&:not(.main-pie) {
@ -176,9 +173,9 @@
}
/*
* Recet Items Table Chart
*/
/*------------------------------
Recent Items Table Chart
-------------------------------*/
#recent-items-chart {
width: ~"calc(100% + 19px)";
height: 150px;
@ -187,9 +184,9 @@
}
/*
* Flot Chart
*/
/*------------------------------
Flot Chart
-------------------------------*/
[class*="flot-chart"] {
width: 100%;
display: block;
@ -238,6 +235,7 @@
.legendLabel {
padding: 0 8px 0 3px;
color: @text-color;
}
}

View File

@ -0,0 +1,79 @@
#chat {
padding: 20px 0 5px;
width: @sidebar-right-width;
right: -(@sidebar-right-width + 20);
box-shadow: 0 0 30px #0E1215;
&.toggled {
right: 0;
}
.chat-search {
padding: 20px 20px 15px 20px;
.form-control {
background-repeat: no-repeat;
background-position: left center;
padding-left: 30px;
background-color: transparent;
.placeholder(rgba(255, 255, 255, 0.3));
&:focus {
padding: 0 30px 0 0;
& + .zmdi-search {
left: ~"calc(100% - 15px)";
}
}
}
.form-control, .zmdi-search {
.transition(all);
.transition-duration(300ms);
}
.zmdi-search {
position: absolute;
left: 0;
bottom: 6px;
font-size: 20px;
color: rgba(255, 255, 255, 0.3);
}
}
.lg-body {
height: ~"calc(100% - 70px)";
}
}
/*------------------------------
Chat Status Icons
-------------------------------*/
[class*="chat-status"] {
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
top: -3px;
right: 12px;
border: 2px solid #FFF;
}
/* Simple Mixin */
.chat-status(@color) {
box-shadow: 0 0 0 1px @color;
background: @color;
}
.chat-status-online {
.chat-status(#1EC01E);
}
.chat-status-offline {
.chat-status(#E73F3F);
}
.chat-status-busy {
.chat-status(#FFA500);
}

View File

@ -0,0 +1,71 @@
.contacts {
&:not(.c-profile) {
padding: 0 8px;
}
& > [class*="col-"] {
padding: 0 10px;
}
.c-item {
border-radius: 2px;
margin-bottom: 24px;
background-color: rgba(255,255,255,0.04);
.ci-avatar {
display: block;
img {
width: 100%;
border-radius: 2px 2px 0 0;
}
}
}
.ci-avatar {
margin: -1px -1px 0;
}
.c-info {
text-align: center;
margin-top: 15px;
padding: 0 5px;
strong {
font-size: 14px;
font-weight: normal;
color: #fff;
}
small {
margin-top: 3px;
color: @text-muted;
}
strong,
small {
.text-overflow();
display: block;
}
}
.c-footer {
margin-top: 18px;
& > button {
padding: 7px 10px;
display: block;
width: 100%;
text-align: center;
background: rgba(255, 255, 255, 0.04);
border: 0;
border-radius: 0;
& > i {
font-size: 16px;
vertical-align: middle;
margin-top: -3px;
}
}
}
}

View File

@ -0,0 +1,56 @@
.dropdown:not([data-animation]) .dropdown-menu {
.animated(fadeIn, 300ms);
}
.dropdown-menu {
box-shadow: @dropdown-shadow;
padding: 10px 0;
border-radius: 3px;
top: -1px;
margin: 0;
border: 0;
color: @text-dark;
& > li > a {
padding: 10px 20px;
.transition(background-color);
.transition-duration(300ms);
}
&[class*="bgm-"] {
& > li > a {
color: #fff;
}
}
}
.dropup {
.dropdown-menu {
bottom: -2px;
}
}
.dm-icon {
& > li > a > .zmdi {
line-height: 100%;
vertical-align: top;
font-size: 18px;
width: 28px;
}
}
.dropdown-menu-lg {
width: 300px;
}
.dropdown-header {
padding: 3px 17px;
margin-top: 10px;
color: #b1b1b1;
text-transform: uppercase;
font-weight: normal;
}
.btn-group.open .dropdown-toggle {
box-shadow: none;
}

View File

@ -0,0 +1,29 @@
/*--------------------
Roboto Light
---------------------*/
.font-face(roboto, 'Roboto-Light-webfont', 300, normal);
/*--------------------
Roboto Regular
---------------------*/
.font-face(roboto, 'Roboto-Regular-webfont', 400, normal);
/*--------------------
Roboto Medium
---------------------*/
.font-face(roboto, 'Roboto-Medium-webfont', 500, normal);
/*--------------------
Roboto Bold
---------------------*/
.font-face(roboto, 'Roboto-Bold-webfont', 700, normal);
/*--------------------
Satisfy
---------------------*/
.font-face(satisfy, 'satisfy', 400, normal);

View File

@ -0,0 +1,36 @@
#footer {
position: absolute;
bottom: 0;
text-align: center;
width: 100%;
height: @footer-height;
color: #a2a2a2;
padding-top: 35px;
padding-bottom: 15px;
.opacity(0.5);
@media (min-width: (@screen-lg-min + 80)) {
padding-left: @sidebar-left-width;
}
.f-menu {
display: block;
width: 100%;
.list-inline();
margin-top: 8px;
& > li > a {
color: #a2a2a2;
&:hover {
color: #777;
}
}
}
}
.sidebar-toggled {
#footer {
display: none;
}
}

View File

@ -0,0 +1,497 @@
label {
font-weight: 500;
}
/*-----------------------------------
Reset Focus and Active shadows
------------------------------------*/
input:active,
input:focus {
outline: 0;
box-shadow: none !important;
}
.form-control {
box-shadow: none !important;
resize: none;
&:active,
&:focus {
box-shadow: none;
}
&:not(.fc-alt) {
border-left: 0;
border-right: 0;
border-top: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding: 0;
&.auto-size {
padding-top: 6px;
}
}
}
.form-group {
margin-bottom: 25px;
}
.form-control-alt {
border-bottom: 1px solid #e0e0e0;
&:focus {
border-color: #d6d6d6;
}
color: #000;
}
/*------------------------
Checkbox and Radio
-------------------------*/
.input-helper:before,
.input-helper:after,
.checkbox label:before,
.radio label:before,
.radio-inline:before,
.checkbox-inline:before {
.transition(all);
.transition-duration(250ms);
}
.checkbox, .radio {
padding-top: 0 !important;
label {
display: block;
padding-left: 30px;
}
input {
top: 0;
left: 0;
margin-left: 0 !important;
z-index: 1;
cursor: pointer;
.opacity(0);
margin-top: 0;
&:checked + .input-helper {
&:before {
border-color: @off-white;
}
}
}
.input-helper {
&:before, &:after {
position: absolute;
content: "";
}
&:before {
left: 0;
border: 2px solid rgba(255, 255, 255, 0.4);
}
}
&.disabled {
.opacity(0.6);
}
}
.checkbox {
input {
width: 17px;
height: 17px;
&:checked + .input-helper {
&:before {
background-color: @off-white;
}
&:after {
.opacity(1);
.scale(1);
}
}
}
.input-helper {
&:before {
top: 0;
width: 17px;
height: 17px;
border-radius: 2px;
}
&:after {
.opacity(0);
.scale(0);
content: '\f26b';
font-family: @font-icon-md;
position: absolute;
font-size: 13px;
left: 2px;
top: 1px;
color: @card-bg;
font-weight: bold;
}
}
}
.radio {
input {
width: 19px;
height: 19px;
&:checked + .input-helper {
&:after {
.scale(1);
}
}
}
.input-helper {
&:before {
top: -1px;
width: 19px;
height: 19px;
border-radius: 50%;
}
&:after {
width: 9px;
height: 9px;
background: @off-white ;
border-radius: 50%;
top: 4px;
left: 5px;
.scale(0);
}
}
}
.checkbox-inline,
.radio-inline {
vertical-align: top;
margin-top: 0;
padding-left: 25px;
}
/*-------------------------
Select
--------------------------*/
html:not(.ie9) {
.select {
position: relative;
.select-bg();
&:not(.fg-line):before {
right: 0;
}
&.fg-line:before {
right: 10px;
}
}
}
/*-------------------------
Input Group Addon
--------------------------*/
.input-group {
&:not(.input-group-lg):not(.input-group-sm) .input-group-addon {
font-size: 15px;
}
}
.input-group-addon {
border-width: 0px 0px 1px 0px;
min-width: 42px;
& > .zmdi {
position: relative;
top: 3px;
}
}
/*-------------------------
Input Feilds
--------------------------*/
.fg-line {
position: relative;
vertical-align: top;
&:not(.form-group) {
display: inline-block;
width: 100%;
}
.form-control {
&:disabled {
color: rgba(255,255,255,0.3);
background: transparent;
}
}
&:not(.disabled):after,
&:not(.readonly):after {
position: absolute;
z-index: 3;
bottom: 0;
left: 0;
height: 2px;
width: 100%;
content: "";
.scale(0);
.transition(all);
.transition-duration(300ms);
}
&:not([class*=has-]):after {
background: @off-white;
}
&.readonly .form-control {
color: #9d9d9d;
background: transparent;
}
&.fg-toggled {
&:after {
.scale(1);
}
}
}
.fg-line-alt {
&:not([class*=has-]):after {
background: @m-blue;
}
}
.fg-float {
margin-top: 2px;
position: relative;
.form-control {
position: relative;
background: transparent;
z-index: 1;
}
.fg-label {
.transition(all);
.transition-duration(200ms);
position: absolute;
top: 5px;
font-weight: 400;
color: @off-white;
pointer-events: none;
z-index: 0;
left: 0;
white-space: nowrap;
}
.fg-toggled .fg-label {
top: -20px;
font-size: 11px;
opacity: 0.3;
}
}
.control-label {
font-weight: normal;
}
/*-------------------------
Toggle Switch
--------------------------*/
.ts-color(@color){
input {
&:not(:disabled) {
&:checked {
& + .ts-helper {
background: fade(@color, 50%);
&:before {
background: @color;
}
&:active {
&:before {
box-shadow: 0 2px 8px rgba(0,0,0,0.28), 0 0 0 20px fade(@color, 20%);
}
}
}
}
}
}
}
.toggle-switch {
display: inline-block;
vertical-align: top;
.user-select(none);
.ts-label {
display: inline-block;
margin: 0 20px 0 0;
vertical-align: top;
-webkit-transition: color 0.56s cubic-bezier(0.4, 0, 0.2, 1);
transition: color 0.56s cubic-bezier(0.4, 0, 0.2, 1);
}
.ts-helper {
display: inline-block;
position: relative;
width: 40px;
height: 16px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.07);
-webkit-transition: background 0.28s cubic-bezier(0.4, 0, 0.2, 1);
transition: background 0.28s cubic-bezier(0.4, 0, 0.2, 1);
vertical-align: middle;
cursor: pointer;
&:before {
content: '';
position: absolute;
top: -4px;
left: -4px;
width: 24px;
height: 24px;
background: #fafafa;
box-shadow: 0 2px 8px rgba(0,0,0,0.28);
border-radius: 50%;
webkit-transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
}
&:not(.disabled) {
.ts-helper {
&:active {
&:before {
box-shadow: 0 2px 8px rgba(0,0,0,0.28), 0 0 0 20px rgba(128,128,128,0.1);
}
}
}
}
input {
position: absolute;
z-index: 1;
width: 46px;
margin: 0 0 0 -4px;
height: 24px;
.opacity(0);
cursor: pointer;
&:checked {
& + .ts-helper {
&:before {
left: 20px;
}
}
}
}
&:not([data-ts-color]){
.ts-color(@m-teal);
}
&.disabled {
.opacity(0.6);
}
&[data-ts-color="red"] {
.ts-color(@m-red);
}
&[data-ts-color="blue"] {
.ts-color(@m-blue);
}
&[data-ts-color="amber"] {
.ts-color(@m-amber);
}
&[data-ts-color="purple"] {
.ts-color(@m-purple);
}
&[data-ts-color="pink"] {
.ts-color(@m-pink);
}
&[data-ts-color="lime"] {
.ts-color(@m-lime);
}
&[data-ts-color="cyan"] {
.ts-color(@m-cyan);
}
&[data-ts-color="green"] {
.ts-color(@m-green);
}
}
/*-------------------------
Validation
--------------------------*/
.checkbox-fgline-validation(@color) {
.checkbox .input-helper {
&:before {
border-color: lighten(@color, 20%);
}
&:after {
border-bottom-color: lighten(@color, 10%);;
border-left-color: lighten(@color, 10%);
}
}
.fg-line:after {
background: @color;
}
}
.has-error {
.checkbox-fgline-validation(@m-red);
}
.has-success {
.checkbox-fgline-validation(@m-green);
}
.has-warning {
.checkbox-fgline-validation(@m-orange);
}
/*-------------------------
IE 9 Placeholder
--------------------------*/
.ie9-placeholder {
color: #888 !important;
font-weight: normal;
}
/*-----------------------------------
Fix Textarea Scrollbar in IE9
------------------------------------*/
.ie9 {
textarea {
overflow: auto !important;
}
}

View File

@ -0,0 +1,158 @@
/*---------------------------------------------------------------------------
Generate Margin Class
margin, margin-top, margin-bottom, margin-left, margin-right
----------------------------------------------------------------------------*/
.margin (@label, @size: 1, @key:1) when (@size =< 30){
.m-@{key} {
margin: @size !important;
}
.m-t-@{key} {
margin-top: @size !important;
}
.m-b-@{key} {
margin-bottom: @size !important;
}
.m-l-@{key} {
margin-left: @size !important;
}
.m-r-@{key} {
margin-right: @size !important;
}
.margin(@label - 5; @size + 5; @key + 5);
}
.margin(25, 0px, 0);
/*---------------------------------------------------------------------------
Generate Padding Class
padding, padding-top, padding-bottom, padding-left, padding-right
----------------------------------------------------------------------------*/
.padding (@label, @size: 1, @key:1) when (@size =< 30){
.p-@{key} {
padding: @size !important;
}
.p-t-@{key} {
padding-top: @size !important;
}
.p-b-@{key} {
padding-bottom: @size !important;
}
.p-l-@{key} {
padding-left: @size !important;
}
.p-r-@{key} {
padding-right: @size !important;
}
.padding(@label - 5; @size + 5; @key + 5);
}
.padding(25, 0px, 0);
/*---------------------------------------------------------------------------
Generate Font-Size Classes (8px - 20px)
----------------------------------------------------------------------------*/
.font-size (@label, @size: 8, @key:10) when (@size =< 20){
.f-@{key} {
font-size: @size !important;
}
.font-size(@label - 1; @size + 1; @key + 1);
}
.font-size(20, 8px, 8);
/*-------------------------
Font Weight
--------------------------*/
.f-300 { font-weight: 300 !important; }
.f-400 { font-weight: 400 !important; }
.f-500 { font-weight: 500 !important; }
.f-700 { font-weight: 700 !important; }
/*-------------------------
Position
--------------------------*/
.p-relative { position: relative !important; }
.p-absolute { position: absolute !important; }
.p-fixed { position: fixed !important; }
.p-static { position: static !important; }
/*-------------------------
Overflow
--------------------------*/
.o-hidden { overflow: hidden !important; }
.o-visible { overflow: visible !important; }
.o-auto { overflow: auto !important; }
/*-------------------------
Display
--------------------------*/
.d-block { display: block !important; }
.di-block { display: inline-block !important; }
/*-------------------------------
Material Background Colors
--------------------------------*/
@array: c-white bgm-white @m-white, c-black bgm-black @m-black, c-brown bgm-brown @m-brown, c-pink bgm-pink @m-pink, c-red bgm-red @m-red, c-blue bgm-blue @m-blue, c-purple bgm-purple @m-purple, c-deeppurple bgm-deeppurple @m-deeppurple, c-lightblue bgm-lightblue @m-lightblue, c-cyan bgm-cyan @m-cyan, c-teal bgm-teal @m-teal, c-green bgm-green @m-green, c-lightgreen bgm-lightgreen @m-lightgreen, c-lime bgm-lime @m-lime, c-yellow bgm-yellow @m-yellow, c-amber bgm-amber @m-amber, c-orange bgm-orange @m-orange, c-deeporange bgm-deeporange @m-deeporange, c-gray bgm-gray @m-gray, c-bluegray bgm-bluegray @m-bluegray, c-indigo bgm-indigo @m-indigo;
.for(@array); .-each(@value) {
@name: extract(@value, 1);
@name2: extract(@value, 2);
@color: extract(@value, 3);
&.@{name2} {
background-color: @color !important;
}
&.@{name} {
color: @color !important;
}
}
/*-------------------------
Background Colors
--------------------------*/
.bg-black-trp { background-color: rgba(0,0,0,0.1) !important; }
/*-------------------------
Border
--------------------------*/
.b-0 { border: 0 !important; }
/*-------------------------
width
--------------------------*/
.w-100 { width: 100% !important; }
/*-------------------------
Border Radius
--------------------------*/
.brd-2 { border-radius: 2px; }
/*-------------------------
Gray Filter
--------------------------*/
.gray-filter {
.gray-filter();
}

View File

@ -0,0 +1,387 @@
/*--------------------------------------------------
Common header classes & IDs
Do not remove this
---------------------------------------------------*/
.h-inner {
list-style: none;
padding: 17px 0;
margin-bottom: 0;
position: relative;
& > li {
&:not(.pull-right) {
float: left;
}
}
}
.hi-logo {
a {
color: @off-white;
text-transform: uppercase;
display: block;
font-size: 16px;
}
}
.hi-trigger {
position: relative;
cursor: pointer;
margin-left: -5px;
display: none;
&:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 45px;
height: 45px;
border-radius: 50%;
background: @card-bg;
.transition(all);
.transition-duration(300ms);
.scale(0);
z-index: 0;
margin-top: -22px;
margin-left: -22px;
}
&.toggled {
&:before {
.scale(1);
}
}
}
.hi-menu {
list-style: none;
padding: 0;
& > li {
display: inline-block;
margin: 0 1px;
vertical-align: top;
min-width: 50px;
@media (max-width: @screen-xs-max) {
position: static !important;
}
.dropdown-menu {
top: -5px;
}
.dropdown-menu-lg {
padding: 0;
.lg-body {
min-height: 350px;
overflow-x: hidden;
}
}
& > a {
color: @off-white;
display: block;
text-align: center;
z-index: 1;
position: relative;
& > .him-icon {
font-size: 24px;
line-height: 36px;
}
& > .him-label {
line-height: 35px;
white-space: nowrap;
padding: 0 10px;
font-size: @font-size-base + 1;
text-transform: uppercase;
}
& > .him-counts {
position: absolute;
font-style: normal;
background: #C13228;
padding: 1px 5px;
border-radius: 2px;
right: 7px;
top: -3px;
font-size: 10px;
line-height: 15px;
}
}
&.toggled > a,
&:hover > a {
background-color: rgba(255,255,255,0.04);
}
}
@media (max-width: @screen-xs-max) {
.dropdown-menu-lg {
width: ~"calc(100% - 28px)" !important;
}
.dropdown-menu {
right: 14px;
top: 55px !important;
}
}
}
.him-notification {
&:before {
content: "";
position: absolute;
width: 100%;
height: ~"calc(100% - 70px)";
background: url(../img/notifications.png) no-repeat center;
.transition(all);
.transition-duration(400ms);
.scale-rotate(0, -180deg);
.opacity(0);
top: 42px;
}
&.empty:before {
.scale-rotate(1, 0deg);
.opacity(1);
}
}
/* Full Screen */
:-webkit-full-screen [data-ma-action="fullscreen"] { display: none; }
:-moz-full-screen [data-ma-action="fullscreen"] { display: none; }
:-ms-fullscreen [data-ma-action="fullscreen"] { display: none; }
:full-screen [data-ma-action="fullscreen"] { display: none; }
:fullscreen [data-ma-action="fullscreen"] { display: none; }
/* ----------------------------- End common header classes and IDs------------------------------------- */
/*--------------------------------------------------
For header type 1 only
You may remove these if you opt header 2
---------------------------------------------------*/
#header {
background-color: @header-bg;
min-height: @header-height;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
.user-select(none);
position: fixed;
z-index: 11;
width: 100%;
left: 0;
top: 0;
padding: 0 20px;
@media(max-width: @screen-xs-max) {
padding: 0px 8px;
}
.hi-logo a {
padding: 7px 10px;
}
.ma-backdrop {
position: absolute;
}
.hi-trigger {
@media(max-width: (@screen-md-max + 80)) {
display: inline-block;
}
}
&.search-toggled {
.h-search-wrap {
top: 0;
.opacity(1);
}
}
}
.h-search-wrap {
position: absolute;
top: -65px;
left: 0;
width: 100%;
height: @header-height;
background: @header-bg;
.transition(all);
.transition-duration(300ms);
.opacity(0);
z-index: 10;
input[type="text"] {
border: 0;
height: 40px;
padding: 0 10px 0 55px;
font-size: 18px;
border-radius: 2px;
background-color: #fff;
width: 100%;
color: @text-dark;
}
.hsw-close {
position: absolute;
top: 15px;
font-size: 23px;
font-style: normal;
width: 45px;
text-align: center;
border-radius: 2px 0px 0px 2px;
cursor: pointer;
left: 15px;
height: 40px;
padding-top: 9px;
color: @header-bg;
&:hover {
background-color: #eee;
}
@media (max-width: @screen-xs-max) {
right: 7px;
}
}
}
.hsw-inner {
position: relative;
padding: 15px;
max-width: 700px;
display: block;
margin: 0 auto;
}
/* ----------------------------- End header type 1 ------------------------------------- */
/*--------------------------------------------------
For Header type 2 only
You may remove these if you opt header 1
---------------------------------------------------*/
#header-alt {
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
position: relative;
margin-bottom: -50px;
z-index: 10;
background-color: @header-bg;
padding: 15px 10px 0 35px;
@media (min-width: @screen-md-min) {
&:before {
content: "";
position: absolute;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.08);
width: 100%;
height: 49px;
z-index: -1;
}
}
@media (max-width: @screen-xs-max) {
padding: 5px 5px 0 25px;
}
.hi-trigger {
top: -7px;
left: -15px;
@media (max-width: @screen-sm-max) {
display: inline-block;
}
}
.ma-backdrop {
position: absolute;
}
.ha-search {
margin-bottom: 25px;
padding-right: 25px;
input[type="text"] {
width: 100%;
background: transparent;
border: 0;
border-bottom: 1px solid @input-border;
font-size: 15px;
font-weight: 300;
padding: 6px 0 6px 30px;
.placeholder(@off-white);
&.ie9-placeholder {
color: @off-white !important;
}
}
.fg-line {
max-width: 500px;
position: relative;
&:before {
content: '\f1c3';
font-family: @font-icon-md;
position: absolute;
left: 0;
bottom: 1px;
font-size: 22px;
}
}
}
}
.ha-menu {
@media(min-width: @screen-md-min) {
& > ul {
list-style: none;
padding: 0;
margin: 0;
& > li {
display: inline-block;
vertical-align: top;
&:not(.active) > a {
color: rgba(255,255,255,0.3);
}
&.active > a {
color: @off-white;
box-shadow: inset 0px -2px 0 0px @off-white;
}
& > a {
text-transform: uppercase;
padding: 15px 12px;
display: block;
&:hover {
color: #fff;
}
}
.dropdown-menu {
min-width: 100%;
}
}
}
}
@media(max-width: @screen-sm-max) {
display: none;
}
}

View File

@ -0,0 +1,24 @@
.invoice {
min-width: 1100px;
max-width: 1170px;
}
.i-logo {
width: 150px;
}
.i-info {
background-color: rgba(255,255,255,0.04);
}
.i-table {
.highlight {
background-color: #eee;
border-bottom: 1px solid darken(#eee, 3%);
}
td.highlight {
font-size: 14px;
font-weight: 500;
}
}

View File

@ -0,0 +1,108 @@
.list-group {
margin-bottom: 0;
.list-group-item {
border: 0;
margin: 0;
padding: 15px 25px;
& > .checkbox.pull-left {
margin: 0;
}
}
&.lg-odd-white {
.list-group-item:nth-child(odd) {
background-color: @list-group-hover-bg;
}
}
&.lg-even-white {
.list-group-item:nth-child(even) {
background-color: @list-group-hover-bg;
}
}
}
.lg-header {
text-align: center;
padding: 15px 10px 13px;
line-height: 100%;
text-transform: uppercase;
border-bottom: 1px solid #F0F0F0;
font-weight: 500;
color: #4C4C4C;
margin-bottom: 10px;
.actions {
position: absolute;
top: 5px;
right: 10px;
}
}
.lgi-img {
width: 40px;
height: 40px;
border-radius: 50%;
}
.lgi-heading {
color: @off-white;
margin-bottom: 4px;
}
.lgi-heading,
.lgi-text {
.text-overflow();
}
.lgi-text {
display: block;
font-size: 12px;
color: rgba(255, 255, 255, 0.3);
&:not(:last-child) {
margin-bottom: 4px;
}
}
.lgi-checkbox {
margin-top: 8px;
margin-bottom: 0;
}
.lgi-attrs {
list-style: none;
padding: 0;
margin: 0;
& > li {
display: inline-block;
border: 1px solid @input-border;
margin: 2px 2px 2px 0;
padding: 2px 5px;
font-size: 12px;
color: @text-muted;
& > a {
display: block;
}
}
}
.list-group-light {
.list-group-item {
&:hover {
background-color: rgba(0,0,0,0.05);
}
}
.lgi-heading {
color: #000;
}
.lgi-text {
color: #A9A9A9;
}
}

View File

@ -0,0 +1,144 @@
.login-content {
min-height: 100vh;
text-align: center;
&:before {
display: inline-block;
content: '';
height: 100vh;
width: 1px;
vertical-align: middle;
}
}
.lc-block {
max-width: 500px;
padding: 20px 0;
width: 80%;
display: inline-block;
vertical-align: middle;
position: relative;
&:not(.toggled) {
display: none;
}
&.toggled {
.animated(fadeInUp, 300ms);
z-index: 10;
}
&:not(.lc-block-alt) {
.lcb-form {
padding: 35px 55px 35px 25px;
}
.btn-login {
top: 50%;
margin-top: -43px;
right: -25px;
}
}
.checkbox {
margin: 5px 0 0 42px;
text-align: left;
}
}
.lcb-form {
background: @card-bg;
box-shadow: @card-shadow;
border-radius: 2px;
}
/*-----------------------------
Login Navigation
------------------------------*/
.lcb-navigation {
margin-top: 15px;
a, a span {
.transition(width);
.transition-duration(200ms);
}
a {
color: @text-color;
display: inline-block;
background: rgba(255, 255, 255, 0.04);
margin: 0 1px;
width: 30px;
height: 30px;
border-radius: 20px;
vertical-align: top;
white-space: nowrap;
text-align: left;
i {
width: 30px;
font-style: normal;
font-size: 16px;
display: inline-block;
vertical-align: top;
text-align: center;
line-height: 30px;
}
span {
width: 0;
overflow: hidden;
display: inline-block;
line-height: 29px;
margin-left: -3px;
}
&:hover {
span {
width: 100%;
}
}
&[data-ma-block="#l-register"]:hover {
width: 95px;
}
&[data-ma-block="#l-forget-password"]:hover {
width: 147px;
}
&[data-ma-block="#l-login"]:hover {
width: 85px;
}
}
}
/*-----------------------------
Lockscreen
------------------------------*/
.lc-block-alt {
.lcb-form {
padding: 70px 35px 60px;
}
.btn-login {
bottom: 0;
left: 50%;
margin-left: -25px;
}
}
.lcb-user {
width: 100px;
height: 100px;
border-radius: 50%;
border: 4px solid @off-white;
position: absolute;
top: -35px;
left: 50%;
margin-left: -50px;
box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.18);
}

View File

@ -0,0 +1,128 @@
.thumbnail {
a&:hover,
a&:focus,
a&.active {
border-color: #484848;
}
}
/*-------------------------
Lightbox
-------------------------*/
.lightbox {
.lightbox-item {
overflow: hidden;
& > img {
.transition(all);
.transition-duration(200ms);
width: 100%;
border-radius: 2px;
}
&:hover {
cursor: pointer;
img {
.scale-rotate(1.35, 10deg);
}
}
}
[data-src] {
.clearfix();
}
.lightbox-item:not(.p-item) {
position: relative;
}
}
/*-------------------------
Carousel
--------------------------*/
.carousel {
.carousel-control {
.transition(all);
.transition-duration(250ms);
.opacity(0);
.zmdi {
position: absolute;
top: 50%;
left: 50%;
line-height: 100%;
@media screen and (min-width: @screen-sm-min) {
font-size: 60px;
width: 60px;
height: 60px;
margin-top: -30px;
margin-left: -30px;
}
@media screen and (max-width: @screen-sm-max) {
width: 24px;
height: 24px;
margin-top: -12px;
margin-left: -12px;
}
}
}
&:hover {
.carousel-control {
.opacity(1);
}
}
.carousel-caption {
background: rgba(0,0,0,0.6);
left: 0;
right: 0;
bottom: 0;
width: 100%;
padding-bottom: 50px;
& > h3 {
color: #fff;
margin: 0 0 5px;
font-weight: 300;
}
& > p {
margin: 0;
}
@media screen and (max-width: @screen-sm-max) {
display: none;
}
}
.carousel-indicators {
margin: 0;
left: 0;
bottom: 0;
width: 100%;
padding: 0 0 6px;
background: rgba(0,0,0,0.6);
li {
border-radius: 0;
width: 15px;
border: 0;
background: #fff;
height: 3px;
margin: 0;
.transition(all);
.transition-duration(250ms);
&.active {
width: 25px;
height: 3px;
background: @m-orange;
}
}
}
}

View File

@ -0,0 +1,227 @@
.messages {
border: 1px solid @card-bg;
height: ~"calc(100vh - 130px)";
position: relative;
overflow: hidden;
header {
min-height: 55px;
.actions {
position: absolute;
top: 12px;
right: 13px;
}
}
}
/*-----------------------------------
Sidebar
------------------------------------*/
.m-sidebar {
width: 300px;
border-right: 1px solid @card-bg;
position: absolute;
height: 100%;
left: 0;
top: 0;
z-index: 1;
background: @body-bg;
@media(max-width: @screen-xs-max) {
width: 60px;
.list-group-item {
padding: 10px !important;
}
.ms-time {
display: none;
}
}
header {
background-color: @card-bg;
padding: 20px;
h2 {
line-height: 100%;
font-size: 15px;
margin: 0;
text-transform: uppercase;
font-weight: 400;
}
}
.lgi-heading {
max-width: 120px;
}
.list-group {
height: ~"calc(100% - 130px)";
}
/* Scrollbar fix */
.mCSB_scrollTools {
z-index: 2;
}
}
.ms-time {
position: absolute;
top: 16px;
right: 25px;
color: rgba(255,255,255,0.2);
}
.ms-search {
padding: 20px 25px;
position: relative;
.zmdi-search {
position: absolute;
left: 0px;
top: 8px;
font-size: 20px;
}
input {
padding-left: 25px !important;
}
}
/*-----------------------------------
Body
------------------------------------*/
.m-body {
position: relative;
height: 100%;
@media(min-width: @screen-sm-min) {
padding-left: 300px;
}
@media(max-width: @screen-xs-max) {
padding-left: 60px;
}
}
.mb-header {
background-color: @card-bg;
box-shadow: 0px -1px 0px 1px rgba(255,255,255,0.04);
position: relative;
z-index: 2;
}
.mbh-user {
padding: 12px 20px;
& > img {
width: 30px;
height: 30px;
border-radius: 50%;
float: left;
margin-right: 15px;
}
}
.mb-list {
height: ~"calc(100% - 55px)";
position: relative;
}
.mbl-messages {
padding: 50px 50px 0;
height: ~"calc(100vh - 259px)";
overflow-x: hidden;
@media(max-width: @screen-xs-max) {
padding: 20px 20px 0;
}
}
.mblm-item {
position: relative;
margin-bottom: 10px;
& > div {
display: inline-block;
max-width: 70%;
padding: 15px 20px;
border-radius: 2px;
position: relative;
}
small {
display: block;
color: @text-muted;
padding: 5px 20px;
}
}
.mblm-item-left > div {
background-color: @card-bg;
}
.mblm-item-right {
text-align: right;
& > div {
background-color: @off-white;
color: @text-dark;
}
}
.mblmi-img {
margin: -10px -15px;
img {
max-width: 250px;
border-radius: 2px;
}
}
.mbl-compose {
background-color: @card-bg;
height: 70px;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 15px 65px 15px 15px;
textarea {
height: 100%;
width: 100%;
border-radius: 2px;
border: 0;
resize: none;
background: rgba(0, 0, 0, 0.2);
padding: 5px 10px;
color: @text-color;
.transition(background-color);
.transition-duration(300ms);
&:focus {
background-color: @off-white;
color: @text-dark;
}
}
button {
position: absolute;
top: 14px;
right: 15px;
background: transparent;
border: 0;
font-size: 25px;
&:hover {
color: #fff;
}
}
}

View File

@ -0,0 +1,333 @@
/*--------------------------------------------------
Block Header
Used for Heading outside the Cards.
---------------------------------------------------*/
.block-header {
@media screen and (min-width: @screen-sm-min) {
padding: 0 22px;
}
@media screen and (max-width: @screen-sm-max) {
padding: 0 18px;
}
margin-bottom: 25px;
position: relative;
& > h2 {
font-size: 15px;
margin: 0;
text-transform: uppercase;
font-weight: 400;
& > small {
display: block;
text-transform: none;
margin-top: 8px;
margin-bottom: 20px;
color: @headings-small-color;
line-height: 140%;
}
}
.actions {
position: absolute;
right: 10px;
top: -5px;
z-index: 4;
}
}
/*-------------------------
Actions
--------------------------*/
.actions {
list-style: none;
padding: 0;
z-index: 3;
margin: 0;
& > li {
display: inline-block;
vertical-align: baseline;
}
& > li > a,
& > a {
width: 30px;
height: 30px;
display: inline-block;
text-align: center;
padding-top: 5px;
border-radius: 50%;
margin: 0 2px;
& > i {
color: rgba(255,255,255,0.5);
font-size: 20px;
}
&:hover {
background-color: rgba(255,255,255,0.07);
& > i {
color: @off-white
}
}
}
}
.actions-alt {
& > li {
& > a {
& > i {
color: #adadad;
}
&:hover {
background-color: rgba(0,0,0,0.07);
& > i {
color: #333;
}
}
}
}
}
/*-------------------------
Collapse Menu Icons
--------------------------*/
.line-wrap {
width: 18px;
height: 12px;
margin: 12px 17px;
cursor: pointer;
&, .line {
.transition(all);
.transition-duration(300ms);
}
.line{
width: 18px;
height: 2px;
background-color: #fff;
&.center {
margin: 3px 0;
}
}
}
.toggled {
.line-wrap {
.rotate(180deg);
.line {
&.top {
width: 12px;
transform: translateX(8px) translateY(1px) rotate(45deg);
-webkit-transform: translateX(8px) translateY(1px) rotate(45deg);
}
&.bottom {
width: 12px;
transform: translateX(8px) translateY(-1px) rotate(-45deg);
-webkit-transform: translateX(8px) translateY(-1px) rotate(-45deg);
}
}
}
}
/*-------------------------
Load More
--------------------------*/
.load-more {
text-align: center;
margin-top: 30px;
a {
padding: 8px 10px 6px;
display: inline-block;
background-color: @off-white;
border-radius: 2px;
white-space: nowrap;
color: #333;
i {
font-size: 20px;
vertical-align: middle;
position: relative;
margin-top: -2px;
margin-right: 3px;
}
&:hover {
background-color: #fff;
}
}
}
/*-------------------------
View More
--------------------------*/
.view-more {
display: block;
text-align: center;
padding: 10px 10px 11px;
line-height: 100%;
font-size: 11px;
margin-top: 20px;
text-transform: uppercase;
&:not(.view-more-light) {
color: @text-muted;
&:hover {
color: @off-white;
}
}
&.view-more-light {
color: #828282;
&:hover {
color: #333;
}
}
}
/*-------------------------
Page Loader
--------------------------*/
.page-loader {
background: #1E262B;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1000;
.preloader {
width: 50px;
position: absolute;
left: 50%;
margin-left: -25px;
top: 50%;
margin-top: -55px;
.animated(fadeIn, 3000ms);
p {
white-space: nowrap;
position: relative;
left: -9px;
top: 22px;
color: rgba(255,255,255,0.3);
}
}
}
/*----------------------------------------
Action Header
-----------------------------------------*/
.action-header {
padding: 25px 30px;
line-height: 100%;
position: relative;
z-index: 1;
min-height: 65px;
background-color: rgba(255, 255, 255, 0.04);
.actions {
position: absolute;
top: 18px;
right: 17px;
z-index: 10;
}
}
.ah-label {
font-size: 15px;
}
.ah-search {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 11;
background-color: #454E53;
display: none;
}
.ahs-input {
border: 0;
padding: 0 26px;
height: 100%;
font-size: 15px;
width: 100%;
background: transparent;
line-height: 60px;
color: #fff;
.placeholder(@off-white);
}
.ahs-close {
font-style: normal;
position: absolute;
top: 23px;
right: 25px;
font-size: 17px;
line-height: 100%;
text-align: center;
cursor: pointer;
background: @off-white;
width: 18px;
height: 18px;
border-radius: 50%;
color: #333;
&:hover {
opacity: 0.7;
}
}
/*----------------------------------
Backdrop
-----------------------------------*/
.ma-backdrop {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 9;
cursor: pointer;
}
.ma-backdrop-alt {
position: absolute;
}
/*----------------------------------
Avatar
-----------------------------------*/
[class*="avatar-img"] {
border-radius: 50%;
}
.avatar-img {
width: 42px;
}

View File

@ -0,0 +1,184 @@
/*-------------------------
Font Face
--------------------------*/
.font-face(@family, @name, @weight: 300, @style){
@font-face{
font-family: @family;
src:url('../fonts/@{family}/@{name}.eot');
src:url('../fonts/@{family}/@{name}.eot?#iefix') format('embedded-opentype'),
url('../fonts/@{family}/@{name}.woff') format('woff'),
url('../fonts/@{family}/@{name}.ttf') format('truetype'),
url('../fonts/@{family}/@{name}.svg#icon') format('svg');
font-weight: @weight;
font-style: @style;
}
}
/*--------------------------------------------------
Background Repeat + Position
---------------------------------------------------*/
.bg-option(@repeat: no-repeat, @position: center) {
background-repeat: @repeat;
background-position: @position;
}
/*--------------------------------------------------
CSS Animations based on animate.css
---------------------------------------------------*/
.animated(@name, @duration) {
-webkit-animation-name: @name;
animation-name: @name;
-webkit-animation-duration: @duration;
animation-duration: @duration;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
/*--------------------------------------------------
CSS Transform - Scale and Rotate
---------------------------------------------------*/
.scale-rotate(@scale, @rotate) {
-webkit-transform: scale(@scale) rotate(@rotate);
-ms-transform: scale(@scale) rotate(@rotate);
-o-transform: scale(@scale) rotate(@rotate);
transform: scale(@scale) rotate(@rotate);
}
/*-------------------------
User Select
--------------------------*/
.user-select (@val) {
-webkit-touch-callout: @val;
-webkit-user-select: @val;
-khtml-user-select: @val;
-moz-user-select: @val;
-ms-user-select: @val;
user-select: @val;
}
/*-------------------------
Background Image Cover
--------------------------*/
.bg-cover(@image) {
background-image: url(@image);
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center;
}
.bg-cover-inline() {
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center;
}
/*-------------------------
Tab Focus
--------------------------*/
.tab-focus() {
outline: none !important;
}
/*--------------------------------------------------
Override Bootstrap Button Mixin
---------------------------------------------------*/
.button-variant(@color; @background; @border) {
color: @color;
background-color: @background;
border-color: @border;
&:hover,
&:focus,
&.focus,
&:active,
.open > .dropdown-toggle& {
color: @color;
background-color: @background;
border-color: transparent;
&:hover,
&:focus,
&.focus {
color: @color;
background-color: @background;
border-color: transparent
}
}
&:active,
&.active,
.open > .dropdown-toggle& {
background-image: none;
}
&.disabled,
&[disabled],
fieldset[disabled] & {
&,
&:hover,
&:focus,
&.focus,
&:active {
background-color: @background;
border-color: @border;
}
}
.badge {
color: @background;
background-color: @color;
}
}
/*-------------------------
Scale 3d
--------------------------*/
.scale3d(...) {
@process: ~`(function(e){return e=e||"1, 1, 1"})((function(){var e="@{arguments}";return e=e.replace(/^\[|\]$/g,"")})())`;
-webkit-transform: scale3d(@process);
-moz-transform: scale3d(@process);
-ms-transform: scale3d(@process);
-o-transform: scale3d(@process);
transform: scale3d(@process);
}
/*-------------------------
Select BG
--------------------------*/
.select-bg() {
&:before {
position: absolute;
top: 0;
right: 0;
content: "";
height: ~"calc(100% - 2px)";
width: 30px;
background-position: right ~"calc(100% - 7px)";
background-repeat: no-repeat;
.img-retina('../img/select.png', '../img/select@2x.png', 12px, 12px);
pointer-events: none;
z-index: 5;
}
}
/*-------------------------
Filter Grayscale
--------------------------*/
.gray-filter() {
filter: gray;
filter: grayscale(100%);
filter: url(../img/desaturate.svg#greyscale);
}

View File

@ -0,0 +1,33 @@
.modal {
color: @text-muted-dark;
.modal-content {
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.31);
border-radius: 3px;
border: 0;
}
.modal-header {
padding: 23px 26px;
}
.modal-title {
color: #333;
}
.modal-body {
padding: 0 26px 10px;
}
.modal-footer {
.btn-link {
font-size: 14px;
color: #000;
font-weight: 500;
&:hover {
background-color: #eee;
}
}
}
}

View File

@ -0,0 +1,52 @@
.pagination {
border-radius: 0;
& > li {
margin: 0 2px;
display: inline-block;
vertical-align: top;
& > a,
& > span {
border-radius: 50% !important;
padding: 0;
width: 40px;
height: 40px;
line-height: 38px;
text-align: center;
font-size: 14px;
z-index: 1;
position: relative;
cursor: pointer;
& > .zmdi {
font-size: 22px;
line-height: 39px;
}
}
&.disabled {
.opacity(0.5);
}
}
}
/*-------------------------
Listview Pagination
--------------------------*/
.lg-pagination {
width: 100%;
text-align: center;
padding: 40px 0;
margin-top: 0;
margin-bottom: 0;
}
/*-------------------------
Pager
--------------------------*/
.pager li > a, .pager li > span {
padding: 5px 10px 6px;
color: @pagination-color;
}

View File

@ -0,0 +1,91 @@
.panel {
box-shadow: none;
border: 0;
}
.panel-title {
& > a {
padding: 10px 15px;
display: block;
font-size: 13px;
}
}
.panel-collapse {
margin-bottom: 10px !important;
.panel-heading {
position: relative;
&:before,
&:after,
.panel-title > a:before,
.panel-title > a:after {
.transition(all);
.transition-duration(300ms);
.backface-visibility(hidden);
position: absolute;
}
.panel-title {
& > a {
padding: 8px 5px 16px 30px;
color: rgba(255,255,255,0.5);
position: relative;
&:before {
bottom: 0;
left: 0;
height: 2px;
width: 100%;
content: "";
background: rgba(255, 255, 255, 0.1);
}
}
}
&:before,
&:after {
font-family: @font-icon-md;
position: absolute;
left: 3px;
top: 3px;
font-size: 18px;
}
&:before {
content: "\f278";
.scale(1);
}
&:after {
.scale(0);
content: "\f273";
}
&.active {
.panel-title > a {
color: #fff;
&:before {
background: rgba(255, 255, 255, 0.7);
}
}
&:before {
.scale(0);
}
&:after {
.scale(1);
}
}
}
.panel-body {
border-top: 0 !important;
padding-left: 5px;
padding-right: 5px;
}
}

View File

@ -0,0 +1,71 @@
.photos {
margin: 2px 0 0;
.lightbox {
margin: 0 -8px;
}
&:not(.p-timeline) {
[data-src] {
padding: 3px;
.transition(all);
.transition-duration(150ms);
}
}
}
.p-timeline {
position: relative;
padding-left: 80px;
margin-bottom: 75px;
[data-src] {
float: left;
width: 70px;
height: 70px;
margin: 0 3px 3px 0;
}
&:last-child .pt-line:before {
height: 100%;
}
}
.ptb-title {
font-size: 15px;
font-weight: 400;
margin-bottom: 20px;
}
.pt-line {
position: absolute;
left: 0;
top: 0;
height: 100%;
line-height: 14px;
color: rgba(255, 255, 255, 0.3);
&:before,
&:after {
content: "";
position: absolute;
}
&:before {
width: 1px;
height: ~"calc(100% + 62px)";
background: rgba(255, 255, 255, 0.1);
top: 15px;
right: -20px;
}
&:after {
top: 2px;
right: -26px;
width: 13px;
height: 13px;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
}
}

View File

@ -0,0 +1,24 @@
.popover {
box-shadow: 0 2px 30px rgba(0, 0, 0, 0.2);
color: @text-muted-dark;
}
.popover-title {
border-bottom: 0;
padding: 20px 20px 15px;
font-size: 12px;
text-transform: uppercase;
color: #333;
& + .popover-content {
padding-top: 0;
}
}
.popover-content {
padding: 20px;
p {
margin-bottom: 0;
}
}

View File

@ -0,0 +1,68 @@
.pt-inner {
text-align: center;
.pti-header {
padding: 45px 10px 70px;
position: relative;
margin-bottom: 15px;
& > h2 {
margin: 0;
line-height: 100%;
font-weight: 100;
font-size: 50px;
small {
letter-spacing: 0;
vertical-align: top;
font-size: 16px;
font-weight: 100;
}
}
.ptih-title {
background-color: rgba(255,255,255,0.04);
padding: 8px 10px 9px;
text-transform: uppercase;
margin: 0 -10px;
position: absolute;
width: 100%;
bottom: 0;
}
}
.pti-body {
padding: 0 23px;
.ptib-item {
padding: 15px 0;
font-weight: 400;
&:not(:last-child) {
border-bottom: 1px solid @input-border;
}
}
}
.pti-footer {
padding: 10px 20px 30px;
margin-top: 20px;
& > a {
width: 60px;
height: 60px;
border-radius: 50%;
text-align: center;
display: inline-block;
line-height: 60px;
font-size: 30px;
background-color: @off-white;
color: @text-dark;
&:hover {
background-color: #fff;
}
}
}
}

View File

@ -18,9 +18,9 @@
display: none !important;
}
/*
* INVOICE
*/
/*-------------------------
Invoice
--------------------------*/
.invoice {
padding: 30px !important;

View File

@ -0,0 +1,365 @@
#profile-main {
min-height: 500px;
position: relative;
.pm-overview {
background: rgba(255,255,255,0.04);
overflow-y: auto;
@media (min-width: 1200px) {
width: 300px;
}
@media (min-width: @screen-sm-min) and (max-width: 1200px) {
width: 250px;
}
@media (min-width: @screen-sm-min) {
position: absolute;
left: 0;
top: 0;
height: 100%;
}
@media (max-width: @screen-xs-max) {
width: 100%;
text-align: center;
margin-bottom: 20px;
}
}
.pm-body {
@media (min-width: 1200px) {
padding-left: 300px;
}
@media (min-width: @screen-sm-min) and (max-width: 1200px) {
padding-left: 250px;
}
@media (max-width: @screen-xs-max) {
padding-left: 0;
}
}
.pmo-pic {
position: relative;
margin: 20px;
img {
@media(min-width: @screen-sm-min) {
width: 100%;
border-radius: 2px 2px 0 0;
}
@media(max-width: @screen-xs-max) {
width: 180px;
display: inline-block;
height: 180px;
border-radius: 50%;
border: 4px solid #fff;
.z-depth(2);
}
}
.pmo-stat {
border-radius: 0 0 2px 2px;
text-align: center;
padding: 30px 5px 0;
@media(min-width: @screen-sm-min) {
background: @off-white;
padding-bottom: 15px;
color: @text-dark;
h2 {
color: @text-dark;
}
}
}
.pmop-edit {
position: absolute;
top: 0;
left: 0;
color: #fff;
background: rgba(0, 0, 0, 0.38);
text-align: center;
padding: 10px 10px 11px;
&:hover {
background: rgba(0, 0, 0, 0.8);
}
i {
font-size: 18px;
vertical-align: middle;
margin-top: -3px;
}
@media (min-width: @screen-sm-min) {
width: 100%;
.opacity(0);
i {
margin-right: 4px;
}
}
}
&:hover {
.pmop-edit {
.opacity(1);
}
}
.pmop-message {
position: absolute;
bottom: 27px;
left: 50%;
margin-left: -25px;
.dropdown-menu {
padding: 5px 0 55px;
left: -90px;
width: 228px;
height: 150px;
top: -74px;
.transform-origin(center);
textarea {
width: 100%;
height: 95px;
border: 0;
resize: none;
padding: 10px 19px;
}
button {
bottom: 5px;
left: 88px;
}
}
}
}
.pmb-block {
margin-bottom: 20px;
@media (min-width: 1200px) {
padding: 40px 42px 0;
}
@media (max-width: 1199px) {
padding: 30px 20px 0;
}
&:last-child {
margin-bottom: 50px;
}
.pmbb-header {
margin-bottom: 25px;
position: relative;
.actions {
position: absolute;
top: -2px;
right: 0;
}
h2 {
margin: 0;
font-weight: 100;
font-size: 20px;
}
}
.pmbb-edit {
position: relative;
z-index: 1;
display: none;
}
.pmbb-edit,
.pmbb-view {
.animated(fadeIn, 1000ms);
}
&.toggled {
.pmbb-edit {
display: block;
background: rgba(255, 255, 255, 0.04);
padding: 23px 30px;
}
.pmbb-view {
display: none;
}
}
}
.pmo-block {
padding: 25px;
& > h2 {
font-size: 16px;
margin: 0 0 15px;
}
}
.pmo-items {
.pmob-body {
padding: 0 10px;
}
a {
display: block;
padding: 4px;
img {
width: 100%;
}
}
}
}
.pmo-contact {
ul {
list-style: none;
margin: 0;
padding: 0;
li {
position: relative;
padding: 8px 0 8px 35px;
i {
font-size: 18px;
vertical-align: top;
line-height: 100%;
position: absolute;
left: 0;
width: 18px;
text-align: center;
}
}
}
}
.pmo-map {
margin: 20px -21px -18px;
display: block;
img {
width: 100%;
}
}
.p-header {
position: relative;
margin: 0 -7px;
.actions {
position: absolute;
top: -18px;
right: 0;
}
}
.p-menu {
list-style: none;
padding: 0 5px;
margin: 0 0 30px;
& > li {
display: inline-block;
vertical-align: top;
& > a {
display: block;
padding: 5px 20px 5px 0;
font-weight: 500;
text-transform: uppercase;
font-size: 15px;
color: rgba(255,255,255,0.4);
& > i {
margin-right: 4px;
font-size: 20px;
vertical-align: middle;
margin-top: -5px;
}
}
&.active > a {
color: @off-white;
}
&:not(.active) > a:hover {
color: rgba(255,255,255,0.7);
}
}
.pm-search {
@media(max-width: @screen-sm-max) {
margin: 20px 2px 30px;
display: block;
input[type="text"] {
width: 100%;
border: 1px solid #ccc;
}
}
}
.pms-inner {
margin: -2px 0 0;
position: relative;
top: -2px;
overflow: hidden;
white-space: nowrap;
i {
vertical-align: top;
font-size: 20px;
line-height: 100%;
position: absolute;
left: 9px;
top: 8px;
cursor: pointer;
color: rgba(255,255,255,0.4);
}
input[type="text"] {
height: 35px;
border-radius: 2px;
padding: 0 10px 0 40px;
background: transparent;
@media(min-width: @screen-sm-min) {
border: 1px solid transparent;
width: 50px;
position: relative;
z-index: 1;
.transition(all);
.transition-duration(300ms);
&:focus {
border-color: @input-border;
width: 200px;
}
}
@media (max-width: @screen-xs-max) {
border: 1px solid @input-border;
}
&:not(:focus) {
cursor: pointer;
}
}
}
}

View File

@ -0,0 +1,228 @@
.sidebar {
position: fixed;
background: @card-bg;
height: ~"calc(100% - 65px)";
top: @header-height;
.transition(all);
.transition-duration(300ms);
z-index: 10;
overflow-y: auto;
box-shadow: @card-shadow;
}
#sidebar {
width: @sidebar-left-width;
@media(max-width: (@screen-md-max + 80)) {
.translate3d(-@sidebar-left-width, 0, 0);
box-shadow: 0 0 30px #0E1215;
&.toggled {
.translate3d(0, 0, 0);
}
}
}
.sidebar-alt {
top: 0;
height: 100%;
.translate3d(-@sidebar-left-width, 0, 0);
&.toggled {
.translate3d(0, 0, 0);
}
}
.main-menu {
list-style: none;
padding-left: 0;
a {
.transition(color);
.transition-duration(300ms);
}
a:hover,
.active > a,
a.active {
color: #fff;
}
& > li {
& > a {
display: block;
position: relative;
color: rgba(255, 255, 255, 0.65);
& > i {
position: absolute;
left: 25px;
font-size: 20px;
top: 0;
width: 25px;
text-align: center;
padding: 13px 0;
}
}
&:not(.mm-profile) > a {
padding: 14px 20px 14px 65px;
}
& > a:hover,
&.active > a {
background-color: rgba(255, 255, 255, 0.04);
}
}
}
.mm-profile {
& > a {
display: block;
padding: 20px;
color: #fff;
& > img {
width: 30px;
height: 30px;
padding-right: 0 !important;
border-radius: 50%;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.13);
margin-top: 3px;
float: left;
}
}
.media-body {
padding: 2px 10px 0px 15px;
small {
display: block;
color: rgba(255, 255, 255, 0.35);
}
}
}
.sub-menu {
a {
color: rgba(255, 255, 255, 0.4);
}
& > a {
position: relative;
&:before, &:after {
position: absolute;
top: 50%;
margin-top: -11px;
font-family: @font-icon-md;
font-size: 17px;
right: 15px;
.transition(all);
.transition-duration(250ms);
.backface-visibility(hidden);
.opacity(0);
}
&:before {
content: "\f278";
.scale(1);
}
&:after {
content: "\f273";
.scale(0);
}
&:hover {
&:before,
&:after {
.opacity(0.7);
}
}
}
&.toggled,
&.active {
& > a {
&:before,
&:after {
.opacity(0.7);
}
}
}
&.toggled {
& > a {
&:before {
content: "\f278";
.scale(0);
}
&:after {
content: "\f273";
.scale(1);
}
}
}
ul {
list-style: none;
display: none;
padding: 0;
& > li {
& > a {
padding: 8px 20px 8px 65px;
display: block;
}
&:first-child > a {
padding-top: 14px;
}
&:last-child > a {
padding-bottom: 16px;
}
ul {
font-size: 12px;
margin: 10px 0;
background-color: rgba(255, 255, 255, 0.03);
}
}
}
&.active {
& > ul {
display: block;
}
}
}
/*-------------------------
For Stupid IE9
--------------------------*/
.ie9 {
#sidebar {
@media(max-width: (@screen-md-max + 80)) {
display: none;
&.toggled {
display: block;
}
}
}
.sidebar-alt {
display: none;
&.toggled {
display: block;
}
}
}

View File

@ -0,0 +1,89 @@
.table {
margin-bottom: 0;
& > thead > tr > th {
background-color: rgba(255, 255, 255, 0.04);
vertical-align: middle;
font-weight: 500;
border-width: 1px;
text-transform: uppercase;
}
&.table-inner {
border: 0;
}
& > thead > tr,
& > tbody > tr,
& > tfoot > tr {
& > th, & > td {
&:first-child {
padding-left: 30px;
}
&:last-child {
padding-right: 30px;
}
}
}
& > tbody, & > tfoot {
& > tr {
&.active,
&.warning,
&.succes,
&.danger {
& > td {
border: 0;
}
}
&:last-child > td > {
padding-bottom: 20px;
}
}
}
}
.table-striped {
td, th {
border: 0 !important;
}
}
.table-bordered {
border-bottom: 0;
border-left: 0;
border-right: 0;
& > tbody > tr {
& > td, & > th {
border-bottom: 0;
border-left: 0;
&:last-child {
border-right: 0;
}
}
}
& > thead > tr > th {
border-left: 0;
&:last-child {
border-right: 0;
}
}
}
.table-vmiddle {
td {
vertical-align: middle !important;
}
}
.table-responsive {
border: 0;
}

View File

@ -0,0 +1,86 @@
.tab-nav {
list-style: none;
padding: 0;
white-space: nowrap;
margin: 0;
overflow: auto;
box-shadow: inset 0 -2px 0 0 rgba(255, 255, 255, 0.1);
width: 100%;
li {
display: inline-block;
vertical-align: top;
& > a {
display: inline-block;
color: rgba(255, 255, 255, 0.4);
text-transform: uppercase;
position: relative;
width: 100%;
.transition(all);
.transition-duration(250ms);
font-weight: 500;
&:after {
content: "";
height: 2px;
position: absolute;
width: 100%;
left: 0;
bottom: 0;
.transition(all);
.transition-duration(250ms);
.scale(0);
background: @off-white;
}
@media (min-width: @screen-sm-min) {
padding: 15px;
}
@media (max-width: @screen-sm-min) {
padding: 15px 8px;
}
&:hover {
color: rgba(255, 255, 255, 0.75);
}
}
&.active {
& > a {
color: #fff;
&:after {
.scale(1);
}
}
}
}
&.tab-nav-right {
text-align: right;
}
&.tn-justified {
& > li {
display: table-cell;
width: 1%;
text-align: center;
}
}
&.tn-icon {
& > li {
.zmdi {
font-size: 22px;
line-height: 100%;
min-height: 25px;
}
}
}
}
.tab-content {
padding: 20px 0;
}

View File

@ -0,0 +1,139 @@
#todo {
font-family: 'satisfy', cursive;
.card-header {
padding: 28px 35px 20px;
h2 {
font-size: 25px;
small {
font-size: 18px;
margin-top: 0;
}
}
}
.card-body {
font-size: 18px;
position: relative;
}
.list-group-item {
padding: 0;
.actions {
margin-top: 7px;
}
}
.checkbox {
.input-helper {
&:before,
&:after {
top: 2px;
}
}
input:checked + i + span {
text-decoration: line-through;
}
}
}
.t-add,
.ta-block,
.ta-btn {
.transition(all);
.backface-visibility(hidden);
.transition-duration(250ms);
}
.t-add {
width: 50px;
height: 50px;
border-radius: 50%;
position: absolute;
background: #fff;
top: -25px;
right: 23px;
max-height: 300px;
.ta-block {
overflow: hidden;
.opacity(0);
textarea {
padding: 25px 25px 45px;
resize: none;
width: 100%;
font-size: 24px;
color: @m-amber;
position: absolute;
height: 100%;
border: 0;
outline: none;
}
}
&:not(.toggled) {
overflow: hidden;
.ta-btn {
position: relative;
z-index: 1;
display: inline-block;
width: 50px;
height: 50px;
cursor: pointer;
text-align: center;
font-size: 23px;
color: @text-dark;
line-height: 51px;
}
}
&.toggled {
width: ~"calc(100% - 47px)";
height: ~"calc(100% - 25px)";
border-radius: 2px;
top: 0;
z-index: 1;
box-shadow: 0 5px 8px rgba(0, 0, 0, 0.2);
overflow: visible;
.ta-btn {
.scale(0);
display: none;
}
.ta-block {
.opacity(1);
.tab-actions {
position: absolute;
bottom: 0;
width: 100%;
padding: 5px 10px;
border-top: 1px solid #EEE;
z-index: 1;
& > a {
font-size: 25px;
padding: 0 6px;
border-radius: 50%;
text-align: center;
height: 40px;
width: 40px;
line-height: 48px;
display: inline-block;
color: @text-dark;
&:hover {
background-color: #eee;
}
}
}
}
}
}

View File

@ -1,4 +1,4 @@
.tooltip-inner {
border-radius: 1px;
padding: 3px 10px 5px;
padding: 8px 15px 8px;
}

View File

@ -0,0 +1,337 @@
/*-------------------------
Font Icon Family
--------------------------*/
@font-icon-md: 'Material-Design-Iconic-Font';
/*-------------------------
Grid System
--------------------------*/
@container-large-desktop: 100%;
@container-tablet: 100%;
@container-desktop: 100%;
/*-------------------------
Typography
--------------------------*/
@body-bg: #222c32;
@text-color: rgba(255,255,255,0.7);
@font-family-sans-serif: roboto;
@font-size-base: 13px;
@link-hover-decoration: none;
@headings-color: @off-white;
@headings-small-color: rgba(255, 255, 255, 0.4);
@text-muted: @headings-small-color;
@link-color: @m-cyan;
@link-hover-color: lighten(@m-cyan, 10%);
/*-------------------------
Border Radius
--------------------------*/
@border-radius-base: 2px;
@border-radius-large: 4px;
@border-radius-small: 2px;
/*-------------------------
Tabs
--------------------------*/
@nav-tabs-border-color: #fff;
@nav-tabs-active-link-hover-border-color: #fff;
@nav-tabs-active-link-hover-bg: transparent;
/*-------------------------
Form
--------------------------*/
@input-border: rgba(255,255,255,0.06);
@input-color: @off-white;
@input-border-radius: 0;
@input-border-radius-large: 0px;
@input-height-large: 40px;
@input-height-base: 35px;
@input-height-small: 30px;
@input-border-focus: rgba(255,255,255,0.06);
@input-bg: transparent;
@input-color-placeholder: rgba(255,255,255,0.4);
/*-------------------------
Table
--------------------------*/
@table-bg: transparent;
@table-border-color: rgba(255, 255, 255, 0.02);
@table-cell-padding: 15px;
@table-condensed-cell-padding: 10px;
@table-bg-accent: rgba(255, 255, 255, 0.02);
@table-bg-active: rgba(255, 255, 255, 0.02);
@table-bg-hover: @table-bg-accent;
/*-------------------------
Input Group
--------------------------*/
@input-group-addon-bg: transparent;
@input-group-addon-border-color: transparent;
/*-------------------------
Pagination
--------------------------*/
@pagination-bg: rgba(255,255,255,0.1);
@pagination-border: transparent;
@pagination-color: @off-white;
@pagination-active-bg: #fff;
@pagination-active-border: transparent;
@pagination-active-color: #313C42;
@pagination-disabled-bg: rgba(255, 255, 255, 0.1);
@pagination-disabled-border: transparent;
@pagination-disabled-color: rgba(255,255,255,0.5);
@pagination-hover-color: @off-white;
@pagination-hover-bg: rgba(255,255,255,0.2);
@pagination-hover-border: transparent;
@pager-border-radius: 5px;
/*-------------------------
Popover
--------------------------*/
@popover-fallback-border-color: transparent;
@popover-border-color: transparent;
@zindex-popover: 10;
/*-------------------------
Dropdown
--------------------------*/
@dropdown-fallback-border: transparent;
@dropdown-border: transparent;
@dropdown-divider-bg: '';
@dropdown-link-hover-bg: rgba(0,0,0,0.075);
@dropdown-link-color: #333;
@dropdown-link-hover-color: #333;
@dropdown-link-disabled-color: #e4e4e4;
@dropdown-divider-bg: rgba(0,0,0,0.08);
@dropdown-link-active-color: #333;
@dropdown-link-active-bg: rgba(0, 0, 0, 0.075);
@zindex-dropdown: 9;
@dropdown-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
/*-------------------------
Thumbnail
--------------------------*/
@thumbnail-bg: #333C42;
@thumbnail-caption-padding: 10px 15px;
@thumbnail-border: #333C42;
@thumbnail-padding: 3px;
/*-------------------------
Alerts
--------------------------*/
@alert-success-border: transparent;
@alert-info-border: transparent;
@alert-warning-border: transparent;
@alert-danger-border: transparent;
@alert-inverse-border: transparent;
@alert-success-bg: @m-green;
@alert-info-bg: @m-blue;
@alert-warning-bg: @m-amber;
@alert-danger-bg: @m-red;
@alert-inverse-bg: #333;
@alert-success-text: #fff;
@alert-info-text: #fff;
@alert-warning-text: #fff;
@alert-danger-text: #fff;
@alert-inverse-text: #fff;
/*-------------------------
Form Validations
--------------------------*/
@state-success-text: lighten(@m-green, 8%);
@state-warning-text: lighten(@m-orange, 8%);
@state-danger-text: lighten(@m-red, 8%);
@state-success-bg: lighten(@m-green, 8%);
@state-warning-bg: lighten(@m-orange, 8%);
@state-danger-bg: lighten(@m-red, 8%);
/*-------------------------
Buttons
--------------------------*/
@border-radius-base: 2px;
@border-radius-large: 2px;
@border-radius-small: 2px;
@btn-font-weight: 400;
@btn-default-bg: @off-white;
/*-------------------------
Carousel
--------------------------*/
@carousel-caption-color: #fff;
/*-------------------------
Modal
--------------------------*/
@modal-content-fallback-border-color: transparent;
@modal-content-border-color: transparent;
@modal-backdrop-bg: #000;
@modal-header-border-color: transparent;
@modal-title-line-height: transparent;
@modal-footer-border-color: transparent;
@zindex-modal-background: 11;
/*-------------------------
Tooltips
--------------------------*/
@tooltip-bg: @off-white;
@tooltip-opacity: 1;
@tooltip-color: @text-dark;
/*-------------------------
Popover
--------------------------*/
@zindex-popover: 9;
@popover-title-bg: #fff;
@popover-border-color: #fff;
@popover-fallback-border-color: #fff;
/*-------------------------
Breadcrumbs
--------------------------*/
@breadcrumb-bg: transparent;
@breadcrumb-padding-horizontal: 20px;
@breadcrumb-color: @text-color;
@breadcrumb-active-color: #7c7c7c;
/*-------------------------
Jumbotron
--------------------------*/
@jumbotron-bg: rgba(255, 255, 255, 0.04);
/* ------------------------
List Group
--------------------------*/
@list-group-bg: transparent;
@list-group-border: #f4f4f4;
@list-group-active-color: #000;
@list-group-active-bg: rgba(255, 255, 255, 0.04);
@list-group-active-border: @list-group-border;
@list-group-disabled-color: #B5B4B4;
@list-group-disabled-bg: #fff;
@list-group-disabled-text-color: #B5B4B4;
@list-group-hover-bg: rgba(255, 255, 255, 0.02);
/*-------------------------
Badges
--------------------------*/
@badge-color: @text-dark;
@badge-bg: @off-white;
@badge-border-radius: 2px;
@badge-font-weight: 400;
@badge-active-color: @text-dark;
@badge-active-bg: #fff;
/*-------------------------
Material Colors
--------------------------*/
@m-white: #fff;
@m-black: #000000;
@m-blue: #2196F3;
@m-red: #F44336;
@m-purple: #9C27B0;
@m-deeppurple: #673AB7;
@m-lightblue: #03A9F4;
@m-cyan: #00BCD4;
@m-teal: #009688;
@m-green: #4CAF50;
@m-lightgreen: #8BC34A;
@m-lime: #CDDC39;
@m-yellow: #FFEB3B;
@m-amber: #FFC107;
@m-orange: #FF9800;
@m-deeporange: #FF5722;
@m-gray: #9E9E9E;
@m-bluegray: #607D8B;
@m-indigo: #3F51B5;
@m-pink: #E91E63;
@m-brown: #795548;
/*-------------------------
Bootstrap Branding
--------------------------*/
@brand-primary: @m-blue;
@brand-success: @m-green;
@brand-info: @m-cyan;
@brand-warning: @m-orange;
@brand-danger: @m-red;
@app-gray: #F7F7F7;
/*-------------------------
Progress Bar
--------------------------*/
@progress-bg: rgba(255, 255, 255, 0.1);
@progress-bar-bg: @off-white;
/*-------------------------
Colors
--------------------------*/
@ace: #F7F7F7;
@off-white: #D8DADA;
@text-dark: #2b343a;
@text-muted-dark: #7D7D7D;
/*-------------------------
Blocks
--------------------------*/
@sidebar-left-width: 268px;
@sidebar-right-width: 280px;
@footer-height: 110px;
/*-------------------------
Header
--------------------------*/
@header-bg: #1E262B;
@header-height: 70px;
/*-------------------------
Card
--------------------------*/
@card-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
@card-bg: #2b343a;
/*-------------------------
Code
--------------------------*/
@code-color: @text-color;
@code-bg: rgba(255, 255, 255, 0.04);
/*-------------------------
Panel
--------------------------*/
@panel-bg: transparent;
@panel-heading-padding: 0;

View File

@ -0,0 +1,141 @@
.bootgrid-footer .infoBar, .bootgrid-header .actionBar {
text-align: left;
}
.bootgrid-footer .search, .bootgrid-header .search {
vertical-align: top;
}
.bootgrid-header {
padding: 0 25px 10px;
.search {
border: 1px solid @input-border;
.form-control, .input-group-addon {
border: 0;
}
.glyphicon-search {
vertical-align: top;
padding: 9px 10px 0;
&:before {
content: "\f1c3";
font-family: @font-icon-md;
font-size: 17px;
vertical-align: top;
line-height: 100%;
}
}
@media (min-width: @screen-xs-min) {
width: 300px;
}
@media (max-width: @screen-xs-min) {
width: 100%;
padding-right: 90px;
}
}
.actions {
box-shadow: none;
.btn-group {
border: 1px solid @input-border;
.btn {
height: 35px;
box-shadow: none !important;
background: transparent;
color: @off-white;
}
.dropdown-menu {
.dropdown-item {
color: #747474;
}
@media (min-width: @screen-sm-min) {
left: 0;
margin-top: 1px;
}
}
.caret {
display: none;
}
.zmdi {
line-height: 100%;
font-size: 18px;
vertical-align: top;
}
}
@media (max-width: @screen-xs-min) {
position: absolute;
top: 0;
right: 15px;
}
}
.checkbox {
color: @text-dark;
margin: 10px 15px;
}
}
.bootgrid-table th > .column-header-anchor {
color: @off-white;
}
.bootgrid-table th:active, .bootgrid-table th:hover {
background-color: rgba(255, 255, 255, 0.1);
}
.bootgrid-table th > .column-header-anchor > .icon {
top: 0;
font-size: 20px;
line-height: 100%;
}
.bootgrid-footer {
.col-sm-6 {
padding: 10px 30px 20px;
@media (max-width: @screen-sm-min) {
text-align: center;
}
}
.infoBar {
@media (max-width: @screen-sm-min) {
display: none;
}
.infos {
border: 1px solid @input-border;
display: inline-block;
float: right;
padding: 7px 30px;
font-size: 12px;
margin-top: 5px;
}
}
}
.select-cell {
.checkbox {
margin: 0;
}
}
.command-edit, .command-delete {
background: rgba(255, 255, 255, 0.1);
}
.bootgrid-table td.loading, .bootgrid-table td.no-results {
background-color: @card-bg;
}

View File

@ -0,0 +1,205 @@
.bootstrap-datetimepicker-widget {
padding: 0 !important;
margin: 0 !important;
width: auto !important;
&:after, &:before { display: none !important; }
table td {
text-shadow: none;
span {
margin: 0;
color: @off-white;
&:hover { background: transparent; }
}
}
.glyphicon { font-family: @font-icon-md; font-size: 18px; }
.glyphicon-chevron-left:before { content: "\f2ff"; }
.glyphicon-chevron-right:before { content: "\f301"; }
.glyphicon-time:before { content: "\f337"; }
.glyphicon-calendar:before { content: "\f32e"; }
.glyphicon-chevron-up:before { content: "\f1e5"; }
.glyphicon-chevron-down:before { content: "\f1e4"; }
a[data-action] {
color: #1F292F !important;
}
}
.timepicker-picker {
.btn { box-shadow: none !important; }
table {
tbody tr + tr:not(:last-child) {
background: #1F292F;
color: #fff;
td {
border-radius: 0;
}
}
}
.btn,
.btn:hover {
background: #fff;
color: @card-bg !important;
}
}
.datepicker {
table {
thead {
tr {
th {
border-radius: 0;
color: #fff;
.glyphicon {
width: 30px;
height: 30px;
border-radius: 50%;
line-height: 29px;
}
&:hover .glyphicon {
background: rgba(0, 0, 0, 0.2);
}
}
&:first-child {
th {
background: #1F292F;
padding: 20px 0;
&:hover {
background: #1F292F;
}
&.picker-switch {
font-size: 16px;
font-weight: 400;
text-transform: uppercase;
}
}
}
&:last-child {
th {
&:first-child { padding-left: 20px; }
&:last-child { padding-right: 20px; }
text-transform: uppercase;
font-weight: normal;
font-size: 11px;
}
&:not(:only-child) {
background: darken(#1F292F, 3%);
}
}
}
}
tbody {
tr {
&:last-child {
td {
padding-bottom: 25px;
}
}
td {
&:first-child {
padding-left: 13px;
}
&:last-child {
padding-right: 13px;
}
}
}
}
td {
&.day {
width: 35px;
height: 35px;
line-height: 20px;
color: #333;
position: relative;
padding: 0;
background: transparent;
&:hover {
background: none;
}
&:before {
content: "";
width: 35px;
height: 35px;
border-radius: 50%;
margin-bottom: -33px;
display: inline-block;
background: transparent;
position: static;
text-shadow: none;
border-bottom-color: transparent !important;
}
&.old, &.new {
color: #CDCDCD;
}
}
&:not(.today):not(.active) {
&:hover:before {
background: #F0F0F0;
}
}
&.today {
color: #333;
&:before {
background-color: #E2E2E2;
}
}
&.active {
color: #fff;
&:before {
background-color: #1F292F;
}
}
}
}
}
.datepicker-months .month,
.datepicker-years .year,
.timepicker-minutes .minute,
.timepicker-hours .hour {
border-radius: 50%;
&:not(.active) {
&:hover {
background: #F0F0F0;
}
}
&.active {
background: #1F292F;
}
}
.timepicker-minutes .minute,
.timepicker-hours .hour {
padding: 0;
}

View File

@ -0,0 +1,103 @@
.bootstrap-select {
.dropdown-toggle:focus {
outline: none !important;
}
.bs-caret {
display: none;
}
& > .btn-default {
background: none !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
border-radius: 0;
padding-left: 0;
padding-right: 0;
position: relative;
color: @off-white;
&:hover {
color: @off-white;
}
.select-bg();
}
.bs-searchbox {
padding: 5px 5px 5px 40px;
position: relative;
background: #f7f7f7;
margin-top: -10px;
&:before {
position: absolute;
left: 0;
top: 1px;
width: 40px;
height: 100%;
content: "\f1c3";
font-family: @font-icon-md;
font-size: 25px;
padding: 4px 0 0 15px;
color: #313C42;
}
input {
border: 0;
background: transparent;
color: @text-dark;
}
}
&.btn-group {
.dropdown-menu {
li {
a.opt {
padding-left: 17px;
}
}
.no-results {
padding: 8px 8px 0;
background-color: #fff;
}
}
}
.check-mark {
margin-top: -5px !important;
font-size: 19px;
.transition(all);
.transition-duration(200ms);
.scale(0);
display: block !important;
position: absolute;
top: 11px;
right: 15px;
&:before {
content: "\f26b";
font-family: @font-icon-md;
}
}
.selected {
.check-mark {
.scale(1);
}
}
.notify {
bottom: 0 !important;
margin: 0 !important;
width: 100% !important;
border: 0 !important;
background: @m-red !important;
color: #fff !important;
text-align: center;
}
&:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
width: 100%;
}
}

View File

@ -3,44 +3,30 @@
box-shadow: @dropdown-shadow;
margin-top: 1px;
border: 0;
left: 0;
.scale(0);
.opacity(0);
.transform-origin(top left);
.transition(transform opacity);
.transition-duration(250ms);
top: 0;
border-radius: 2px;
}
&.chosen-with-drop {
.chosen-drop {
.scale(1);
.opacity(1);
}
.chosen-single:after {
width: 100%;
}
}
.chosen-results {
margin: 0;
padding: 0;
max-height: 300px;
li {
padding: 10px 17px;
width: 100%;
&.highlighted {
background: @dropdown-link-hover-bg;
color: @dropdown-link-hover-color;
}
&.result-selected {
background: transparent;
color: @text-color;
position: relative;
color: #444;
&:before {
content: "\f26b";
font-family: @font-icon-md;
@ -48,14 +34,15 @@
right: 15px;
top: 10px;
font-size: 19px;
color: @card-bg;
}
}
&.group-result {
&:not(:first-child) {
border-top: 1px solid #eee;
}
color: #B2B2B2;
font-weight: normal;
padding: 16px 15px 6px;
@ -66,7 +53,8 @@
}
.chosen-container-single {
.chosen-single {
.chosen-single {
border-radius: 0;
overflow: visible;
height: 34px;
@ -76,30 +64,20 @@
border-bottom: 1px solid @input-border;
background: none;
box-shadow: none;
&:after {
content: "";
width: 0;
background: @m-blue;
height: 2px;
position: absolute;
left: 0;
bottom: -1px;
.transition(width);
.transition-duration(300ms);
}
color: @off-white;
text-transform: none;
.select-bg();
div b {
.img-retina('../img/select.png', '../img/select@2x.png', 12px, 12px);
background-repeat: no-repeat;
background-position: right 12px;
display: none;
}
}
.chosen-search {
padding: 5px 5px 5px 40px;
background: @ace;
background: #F7F7F7;
&:before {
content: "\f1c3";
font-family: @font-icon-md;
@ -109,14 +87,16 @@
width: 40px;
height: 100%;
font-size: 25px;
padding: 5px 0 0 15px;
padding: 5px 0 0 15px;
color: @card-bg;
}
input[type=text] {
border: 0;
height: 35px;
line-height: 1.42857143;
background: none;
background-image: none !important;
color: @card-bg;
}
}
}
@ -127,47 +107,52 @@
}
.chosen-container-multi {
.chosen-choices {
padding: 0;
border: 0;
border-bottom: 1px solid @input-border;
background: none;
box-shadow: none;
li {
&.search-choice {
border-radius: 2px;
margin: 4px 4px 0 0;
background: darken(@ace, 5%);
background: rgba(266,255,255,0.1);
padding: 5px 23px 5px 8px;
border: 0;
box-shadow: none;
.search-choice-close {
background-image: none;
&:before {
display: inline-block;
font-family: @font-icon-md;
content: "\f135";
position: relative;
top: 1px;
color: #9C9C9C;
z-index: 2;
font-size: 12px;
}
}
color: @off-white;
font-size: 12px;
}
&.search-field {
input[type=text] {
padding: 0;
height: 31px;
}
}
}
}
}
}
.search-choice-close {
cursor: pointer;
&:before {
display: inline-block;
font-family: @font-icon-md;
content: "\f135";
position: relative;
top: 1px;
color: @off-white;
z-index: 2;
background: #454F55;
font-size: 12px;
}
}
select.chosen {
display: none;
}

View File

@ -0,0 +1,25 @@
.cp-container {
position: relative;
& > .input-group {
input.cp-value {
color: @off-white !important;
background: transparent !important;
}
.dropdown-menu {
padding: 20px;
margin-left: -1px;
}
}
i.cp-value {
width: 25px;
height: 25px;
border-radius: 2px;
position: absolute;
top: 0;
right: 15px;
}
}

View File

@ -0,0 +1,55 @@
.fileinput {
position: relative;
padding-right: 35px;
.close {
position: absolute;
top: 5px;
font-size: 12px;
float: none;
opacity: 1;
font-weight: 500;
border: 1px solid rgba(255,255,255,0.4);
width: 19px;
text-align: center;
height: 19px;
line-height: 16px;
border-radius: 50%;
right: 0;
color: @text-color;
visibility: hidden;
}
.btn-file {
}
.input-group-addon {
padding: 0 10px;
vertical-align: middle;
}
.fileinput-preview {
width: 200px;
height: 150px;
position: relative;
background: rgba(255, 255, 255, 0.04);
border: 0;
img {
display: inline-block;
vertical-align: middle;
margin-top: -13px;
}
&:after {
content: "";
display: inline-block;
vertical-align: middle;
}
}
}
.fileinput-exists .close {
visibility: visible;
}

View File

@ -0,0 +1,319 @@
#fc-actions {
position: absolute;
bottom: 10px;
right: 12px;
& > li > a > i {
color: #fff;
}
}
.fc {
td, th {
border-color: transparent;
}
th {
font-weight: 400;
padding: 5px 0;
}
table {
background: transparent;
tr {
& > td:first-child {
border-left-width: 0;
}
}
}
}
.fc-day-number {
color: rgba(255, 255, 255, 0.3);
}
#calendar-widget {
.fc-toolbar {
h2 {
font-size: 16px;
color: @off-white;
}
}
.fc-day-number {
text-align: center;
}
.fc-day-grid-event {
margin: 1px 3px 1px;
}
.ui-widget-header th,
.ui-widget-header {
border-width: 0;
}
}
#calendar {
.fc-view-container {
padding: 20px;
}
.fc-toolbar {
height: 300px;
.bg-cover('../img/cal-header.jpg');
background-position: inherit;
h2 {
font-size: 20px;
color: #fff;
}
&:before {
content: "";
height: 50px;
width: 100%;
background: rgba(0, 0, 0, 0.36);
position: absolute;
bottom: 0;
left: 0;
}
.fc-center {
margin-top: 238px;
position: relative;
}
.ui-button {
margin-top: 3px;
span {
color: #fff;
}
&:hover span {
color: #333;
}
}
@media screen and (max-width: @screen-sm-max) {
height: 200px;
.fc-center {
margin-top: 138px;
}
}
}
.fc-day-number {
@media screen and (min-width: @screen-sm-max) {
font-size: 25px;
letter-spacing: -2px;
}
padding-left: 10px !important;
color: #CCC;
text-align: left !important;
}
.fc-day-header {
color: #333 !important;
text-align: left !important;
}
.fc-day-grid-event {
margin: 1px 9px 0;
}
}
.fc-day-header {
font-size: 0;
padding-bottom: 20px !important;
&:first-letter {
font-size: 14px;
color: #c2c2c2;
text-align: left;
border-bottom-width: 0;
border-right-color: #eee;
padding: 10px 12px;
text-transform: uppercase;
font-weight: 700;
}
}
.fc-today {
color: @m-amber;
}
.fc-toolbar {
margin-bottom: 0;
padding: 20px 17px 19px;
position: relative;
h2 {
margin-top: 7px;
}
.ui-button {
border: 0;
background: 0 0;
padding: 0;
outline: none !important;
text-align: center;
width: 30px;
height: 30px;
border-radius: 50%;
&:hover {
background: #fff;
color: #333;
}
& > span {
position: relative;
font-family: @font-icon-md;
font-size: 24px;
line-height: 100%;
width: 30px;
display: block;
margin-top: 2px;
&:before {
position: relative;
z-index: 1;
}
&.ui-icon-circle-triangle-w:before {
content: "\f2fa";
}
&.ui-icon-circle-triangle-e:before {
content: "\f2fb";
}
}
}
}
.fc-event {
padding: 0;
font-size: 11px;
border-radius: 2px;
border: 0;
background-color: rgba(255,255,255,0.1);
.fc-title {
padding: 2px 8px;
display: block;
.text-overflow();
}
.fc-time {
float: left;
background: rgba(0, 0, 0, 0.2);
padding: 2px 6px;
margin: 0 0 0 -1px;
}
}
.fc-view, .fc-view > table {
border: 0;
overflow: hidden;
}
.fc-view > table > tbody > tr > .ui-widget-content {
border-top: 0;
}
div.fc-row {
margin-right: 0 !important;
border: 0 !important;
}
.fc-today {
color: @m-amber !important;
}
/* Even Tag Color */
.event-tag {
margin-top: 5px;
& > span {
border-radius: 50%;
width: 30px;
height: 30px;
margin-right: 3px;
position: relative;
display: inline-block;
cursor: pointer;
&:hover {
.opacity(0.8);
}
&.selected {
&:before {
font-family: @font-icon-md;
content: "\f26b";
position: absolute;
text-align: center;
top: 3px;
width: 100%;
font-size: 17px;
color: #FFF;
}
}
}
}
hr.fc-divider {
border-width: 1px;
border-color: #eee;
}
.fc-day-grid-container.fc-scroller {
height: auto !important;
overflow: hidden !important;
}
/* Even Tag Color */
.event-tag {
margin-top: 5px;
& > span {
border-radius: 50%;
width: 30px;
height: 30px;
margin-right: 3px;
position: relative;
display: inline-block;
cursor: pointer;
&:hover {
.opacity(0.8);
}
&.selected {
&:before {
font-family: @font-icon-md;
content: "\f26b";
position: absolute;
text-align: center;
top: 3px;
width: 100%;
font-size: 17px;
color: #FFF;
}
}
}
}

View File

@ -0,0 +1,111 @@
.lg-outer {
.lg-thumb-outer {
background-color: #1D1D1D;
}
.lg-thumb-item {
border-radius: 50%;
width: 60px !important;
display: inline-block;
height: 60px;
border: 0;
float: none;
margin: 0 5px;
&:hover {
box-shadow: 0 0 0px 4px rgba(255, 255, 255, 0.1);
}
}
.lg-image {
border-radius: 3px;
}
.lg-toogle-thumb {
border-radius: 50%;
color: #333;
height: 51px;
width: 51px;
line-height: 41px;
background-color: #fff;
.transition(all);
.transition-duration(800ms);
&:hover {
.rotate(360deg);
color: #000;
}
}
&:not(.lg-thumb-open) .lg-toogle-thumb {
top: -70px;
}
&.lg-thumb-open .lg-toogle-thumb {
top: -26px;
}
}
.lg-thumb.group {
padding: 20px 0;
}
.lg-slide {
em {
font-style: normal;
h3 {
color: #fff;
margin-bottom: 5px;
}
}
.video-cont {
.z-depth(2);
}
}
.lg-outer .lg-item {
background-image: none !important;
&:before {
content: '';
width: 50px;
height: 50px;
border-radius: 50%;
border: 2px solid rgba(255,255,255,0.1);
border-right-color: #fff;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
.animation-name(loader);
.animation-duration(1000ms);
.animation-iteration-count(infinite);
.animation-timing-function(linear);
}
}
@-webkit-keyframes loader {
0% {
.rotate(0deg)
}
100% {
.rotate(360deg)
}
}
.loading > i {
width: 100%;
height: 100%;
display: block;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation: loader 1.1s infinite linear;
animation: loader 1.1s infinite linear;
border-left-color: #fff;
border-style: solid;
}

View File

@ -13,15 +13,19 @@
&.mCSB_scrollTools_horizontal {
height: 10px;
}
.mCSB_draggerContainer {
z-index: 10;
}
}
.mCS-minimal-dark {
&.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
background: rgba(0,0,0,0.4);
background: #6b7175;
}
&.mCSB_scrollTools_onDrag .mCSB_dragger .mCSB_dragger_bar {
background: rgba(0,0,0,0.5) !important;
background: #6b7175 !important;
}
}

View File

@ -0,0 +1,87 @@
.mejs-container {
outline: none;
.mejs-controls {
background: #1E262B;
height: 50px;
padding: 10px 5px 0;
div {
height: 5px;
}
div.mejs-time-rail {
position: absolute;
left: 0;
top: 0;
padding: 0;
width: 100% !important;
.mejs-time-total {
margin: 0;
width: 100% !important;
background: #1E262B;
}
.mejs-time-loaded {
background: #4f5f6a;
}
.mejs-time-current {
background: @off-white;
}
.mejs-time-buffering {
background: #1E262B;
}
span:not(.mejs-time-float), a {
border-radius: 0;
height: 3px;
}
}
.mejs-button {
button {
background-color: #1E262B;
width: 15px;
height: 15px;
background-position: center;
&:focus {
outline: none !important;
}
}
}
.mejs-volume-button {
position: absolute;
right: 35px;
}
.mejs-play button {
.img-retina('../img/icons/play.png', '../img/icons/play@2x.png', 15px, 15px);
}
.mejs-pause button {
.img-retina('../img/icons/pause.png', '../img/icons/pause@2x.png', 15px, 15px);
}
.mejs-mute button {
.img-retina('../img/icons/speaker.png', '../img/icons/speaker@2x.png', 15px, 15px);
}
.mejs-unmute button {
.img-retina('../img/icons/speaker-2.png', '../img/icons/speaker-2@2x.png', 15px, 15px);
}
.mejs-fullscreen-button {
position: absolute;
right: 5px;
button {
.img-retina('../img/icons/fullscreen.png', '../img/icons/fullscreen@2x.png', 15px, 15px);
}
}
}
}

View File

@ -0,0 +1,56 @@
.noUi-target {
border-radius: 0;
box-shadow: none;
border: 0;
}
.noUi-background {
background: #212B31;
box-shadow: none;
}
.noUi-horizontal {
height: 3px;
.noUi-handle {
top: -8px;
}
}
.noUi-vertical {
width: 3px;
}
.noUi-connect {
background: @off-white;
}
.noUi-horizontal,
.noUi-vertical {
.noUi-handle {
width: 19px;
height: 19px;
border: 0;
border-radius: 100%;
box-shadow: none;
.transition(box-shadow);
.transition-duration(200ms);
cursor: pointer;
position: relative;
&:before,
&:after {
display: none;
}
}
.noUi-active {
box-shadow: 0 0 0 13px rgba(0,0,0,0.1);
}
}
.noUi-tooltip {
border: 0;
background: #212B31;
padding: 5px 10px;
}

View File

@ -0,0 +1,206 @@
.note-editor,
.note-popover {
.note-toolbar,
.popover-content {
border: 0;
margin: 0;
padding: 10px 0 15px;
text-align: center;
& > .btn-group {
display: inline-block;
float: none;
box-shadow: none;
}
.note-palette-title {
margin: 0 !important;
padding: 10px 0 !important;
font-size: 13px !important;
text-align: center !important;
border: 0 !important;
}
.note-color-reset {
padding: 0 0 10px !important;
margin: 0 !important;
background: none;
text-align: center;
}
.note-color {
.dropdown-menu {
min-width: 335px;
}
}
}
.fa {
font-style: normal;
font-size: 20px;
vertical-align: middle;
&:before {
font-family: @font-icon-md;
}
&.fa-magic:before {
content: "\f16a";
}
&.fa-bold:before {
content: "\f23d";
}
&.fa-italic:before {
content: "\f245";
}
&.fa-underline:before {
content: "\f24f";
}
&.fa-font:before {
content: "\f242";
}
&.fa-list-ul:before {
content: "\f247";
}
&.fa-list-ol:before {
content: "\f248";
}
&.fa-align-left:before {
content: "\f23b";
}
&.fa-align-right:before {
content: "\f23c";
}
&.fa-align-center:before {
content: "\f239";
}
&.fa-align-justify:before {
content: "\f23a";
}
&.fa-indent:before {
content: "\f244";
}
&.fa-outdent:before {
content: "\f243";
}
&.fa-text-height:before {
content: "\f246";
}
&.fa-table:before {
content: "\f320";
}
&.fa-link:before {
content: "\f18e";
}
&.fa-picture-o:before {
content: "\f17f";
}
&.fa-minus:before {
content: "\f22f";
}
&.fa-arrows-alt:before {
content: "\f16d";
}
&.fa-code:before {
content: "\f13a";
}
&.fa-question:before {
content: "\f1f5";
}
&.fa-eraser:before {
content: "\f23f";
}
&.fa-square:before {
content: "\f279";
}
&.fa-circle-o:before {
content: "\f26c";
}
&.fa-times:before {
content: "\f136";
}
}
.note-air-popover {
.arrow {
left: 20px;
}
}
}
.note-editor {
overflow: visible;
border: 0;
.btn {
height: 40px;
background-color: #2B343A;
color: rgba(255, 255, 255, 0.56);
&:hover,
&.active {
background: #222C32;
color: #fff;
}
}
.note-toolbar {
background: #333C42;
}
.note-editing-area {
.note-editable {
color: @text-color;
padding: 20px 23px;
background-color: #3A4348;
}
.note-codable {
background-color: @body-bg;
}
}
.note-statusbar {
background-color: #4B5257;
.note-resizebar {
height: 5px;
.note-icon-bar {
display: none;
}
}
}
.dropdown-menu {
.btn {
background-color: #fff;
color: @text-dark;
}
}
}

View File

@ -0,0 +1,39 @@
.sweet-alert {
border-radius: 2px;
padding: 35px;
color: @text-dark;
font-family: @font-family-base;
h2 {
font-size: 16px;
position: relative;
z-index: 1;
color: #333;
line-height: 100%;
margin: 0 0 15px;
font-weight: 500;
}
p {
font-size: 13px;
color: @text-muted-dark;
font-weight: 400;
}
button {
padding: 6px 12px;
font-size: 13px;
border-radius: 2px;
box-shadow: none !important;
margin: 26px 1px 0 1px;
font-size: 12px;
text-transform: uppercase;
font-weight: 400;
margin-top: 30px;
}
.sa-icon {
margin-top: 0;
margin-bottom: 30px;
}
}

View File

@ -1,25 +1,18 @@
.twitter-typeahead {
width: 100%;
.tt-menu {
min-width: 200px;
background: #fff;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
display: block !important;
z-index: 2 !important;
.scale(0);
.opacity(0);
.transition(all);
.transition-duration(300ms);
.backface-visibility(hidden);
.transform-origin(top left);
display: none;
.animated(fadeIn, 300ms);
&.tt-open:not(.tt-empty) {
.scale(1);
.opacity(1);
display: block;
}
}
.tt-suggestion {
padding: 8px 17px;
color: #333;
@ -30,7 +23,7 @@
.tt-cursor {
background-color: rgba(0,0,0,0.075);
}
.tt-hint {
color: #818181 !important;
}

View File

@ -0,0 +1,198 @@
/*-------------------------------
Post
--------------------------------*/
.wp-text {
border: 0;
display: block;
width: 100%;
resize: none !important;
padding: 20px 25px;
background-color: transparent;
}
.wp-media {
background: rgba(255,255,255,.04);
border: 1px solid #E4E4E4;
padding: 12px 15px;
margin: 10px 20px 20px;
text-align: center;
}
.wp-actions {
padding: 10px 15px 10px 20px;
background-color: rgba(255,255,255,.04);
}
.wpa-media-list {
& > a {
font-size: 20px;
margin-right: 8px;
color: rgba(255, 255, 255, 0.35);
&:hover {
color: rgba(255, 255, 255, 0.8);
}
}
}
/*-------------------------------
Post Listings
--------------------------------*/
.wis-numbers {
float: left;
& > span {
margin-right: -1px;
padding: 7px 12px;
border: 1px solid #3D474E;
float: left;
font-weight: 500;
& > i {
line-height: 100%;
vertical-align: top;
position: relative;
top: 3px;
font-size: 15px;
margin-right: 2px;
}
&.active {
color: @m-green;
}
}
}
.wis-commentors {
float: right;
& > a {
display: inline-block;
margin-left: 2px;
& > img {
width: 33px;
height: 33px;
border-radius: 50%;
&:hover {
.opacity(0.85);
}
}
}
}
/*-------------------------------
Post Gallery
--------------------------------*/
.wi-preview {
text-align: center;
@media screen and (min-width: @screen-sm-min) {
margin: 0 -23px 20px;
}
@media screen and (max-width: @screen-sm-max) {
margin: 0 -16px 20px;
}
.wip-item {
display: block;
float: left;
position: relative;
overflow: hidden;
border: 2px solid @card-bg;
.bg-cover-inline();
cursor: pointer;
&:hover {
.opacity(0.9);
}
& > img {
display: none;
}
&:first-child:nth-last-child(2),
&:first-child:nth-last-child(2) ~ div {
width: 50%;
padding-bottom: 40%;
}
&:first-child:nth-last-child(3),
&:first-child:nth-last-child(3) ~ div,
&:first-child:nth-last-child(4),
&:first-child:nth-last-child(4) ~ div:not(:last-child),
&:first-child:nth-last-child(5),
&:first-child:nth-last-child(5) ~ div:not(:nth-last-of-type(-n+2)),
&:first-child:nth-last-child(6),
&:first-child:nth-last-child(6) ~ div,
&:first-child:nth-last-child(7) ~ div:nth-last-of-type(-n+3) {
width: 33.333333%;
padding-bottom: 30%;
}
&:first-child:nth-last-child(5) ~ div:nth-last-of-type(-n+2) {
width: 50%;
padding-bottom: 40%;
}
&:first-child:nth-last-child(7),
&:first-child:nth-last-child(7) ~ div:not(:nth-last-of-type(-n+3)),
&:first-child:nth-last-child(n+8),
&:first-child:nth-last-child(n+8) ~ div {
width: 25%;
padding-bottom: 22%;
}
&:only-child,
&:first-child:nth-last-child(4) ~ div:nth-child(4) {
width: 100%;
padding-bottom: 50%;
}
}
}
/*-------------------------------
Post Comments
--------------------------------*/
.wi-comments {
background: rgba(255,255,255,.02);
.list-group {
margin-bottom: -10px;
padding-top: 10px;
}
}
.wic-form {
padding: 20px 23px;
textarea {
width: 100%;
resize: none;
border: 1px solid @input-border;
padding: 12px 15px;
height: 45px;
background-color: transparent;
}
&.toggled {
textarea {
height: auto;
}
.wicf-actions {
display: block;
}
}
}
.wicf-actions {
margin-top: 10px;
display: none;
}

View File

@ -0,0 +1,454 @@
.dw-item {
position: relative;
min-height: 400px;
margin-bottom: 30px;
box-shadow: @card-shadow;
background-color: @card-bg;
}
.dwi-header {
position: relative;
}
.dwi-header-img {
.bg-cover-inline();
height: 155px;
}
.dw-footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
}
.dwih-title {
padding: 12px 20px;
position: absolute;
width: 100%;
left: 0;
}
/*-------------------------
Site Visits
--------------------------*/
#site-visits {
.dwi-header {
margin-bottom: 15px;
padding-bottom: 38px;
canvas {
width: 100% !important;
}
}
.dwih-title {
bottom: 0;
}
.sv-item {
small {
color: rgba(255, 255, 255, 0.3);
}
h3 {
font-weight: normal;
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.pull-right {
margin-top: 5px;
.opacity(0.7);
}
}
}
/*-------------------------
Best Selling Item
--------------------------*/
#best-selling {
.dwi-header {
.dwih-title {
padding-bottom: 30px;
top: 0;
#gradient > .vertical(rgba(0,0,0,0.6); rgba(0,0,0,0));
}
.bs-main {
padding: 15px;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
#gradient > .vertical(rgba(0,0,0,0); rgba(0,0,0,0.6));
& > h2 {
font-size: 20px;
margin: 5px 0 0 0;
line-height: 100%;
}
}
}
}
/*-------------------------
Weather
--------------------------*/
#weather-widget {
padding: 20px 20px 0;
.weather-status {
font-size: 40px;
line-height: 100%;
}
.weather-icon {
text-align: center;
margin-top: 10px;
height: 150px;
.bg-option();
.opacity(0.8);
/* Weather Icons */
.wi-item(@icon) {
.img-retina('../img/icons/weather/@{icon}.png', '../img/icons/weather/@{icon}@2x.png', 125px, 125px);
}
&.wi-0 { .wi-item(0); }
&.wi-1 { .wi-item(1); }
&.wi-2 { .wi-item(2); }
&.wi-3 { .wi-item(3); }
&.wi-4 { .wi-item(2); }
&.wi-5 { .wi-item(5); }
&.wi-6 { .wi-item(5); }
&.wi-7 { .wi-item(5); }
&.wi-8 { .wi-item(5); }
&.wi-9 { .wi-item(9); }
&.wi-10 { .wi-item(5); }
&.wi-11 { .wi-item(9); }
&.wi-12 { .wi-item(9); }
&.wi-13 { .wi-item(9); }
&.wi-14 { .wi-item(9); }
&.wi-15 { .wi-item(5); }
&.wi-16 { .wi-item(9); }
&.wi-17 { .wi-item(5); }
&.wi-18 { .wi-item(18); }
&.wi-19 { .wi-item(19); }
&.wi-20 { .wi-item(19); }
&.wi-21 { .wi-item(19); }
&.wi-22 { .wi-item(19); }
&.wi-23 { .wi-item(19); }
&.wi-24 { .wi-item(24); }
&.wi-25 { .wi-item(24); }
&.wi-26 { .wi-item(26); }
&.wi-27 { .wi-item(27); }
&.wi-28 { .wi-item(28); }
&.wi-29 { .wi-item(27); }
&.wi-30 { .wi-item(28); }
&.wi-31 { .wi-item(31); }
&.wi-32 { .wi-item(32); }
&.wi-33 { .wi-item(31); }
&.wi-34 { .wi-item(32); }
&.wi-35 { .wi-item(5); }
&.wi-36 { .wi-item(32); }
&.wi-37 { .wi-item(2); }
&.wi-38 { .wi-item(2); }
&.wi-39 { .wi-item(2); }
&.wi-40 { .wi-item(5); }
&.wi-41 { .wi-item(5); }
&.wi-42 { .wi-item(9); }
&.wi-43 { .wi-item(5); }
&.wi-44 { .wi-item(27); }
&.wi-45 { .wi-item(2); }
&.wi-46 { .wi-item(18); }
&.wi-47 { .wi-item(2); }
}
.weather-info {
list-style: none;
padding: 0;
margin: 3px 0 0 0;
& > li {
display: inline-block;
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 2px 10px 3px;
margin-right: 5px;
}
}
.dw-footer {
background: rgba(255, 255, 255, 0.02);
padding: 10px 20px;
}
.weather-list {
font-size: 16px;
.text-overflow();
& > span {
margin-right: 7px;
display: inline-block;
line-height: 40px;
vertical-align: top;
.wli-icon(@icon) {
background-image: url('../img/icons/weather/@{icon}.png');
}
&.weather-list-icon {
width: 35px;
height: 35px;
.bg-option();
background-size: 30px 30px;
&.wi-0 { .wli-icon(0); }
&.wi-1 { .wli-icon(1); }
&.wi-2 { .wli-icon(2); }
&.wi-3 { .wli-icon(3); }
&.wi-4 { .wli-icon(2); }
&.wi-5 { .wli-icon(5); }
&.wi-6 { .wli-icon(5); }
&.wi-7 { .wli-icon(5); }
&.wi-8 { .wli-icon(5); }
&.wi-9 { .wli-icon(9); }
&.wi-10 { .wli-icon(5); }
&.wi-11 { .wli-icon(9); }
&.wi-12 { .wli-icon(9); }
&.wi-13 { .wli-icon(9); }
&.wi-14 { .wli-icon(9); }
&.wi-15 { .wli-icon(5); }
&.wi-16 { .wli-icon(9); }
&.wi-17 { .wli-icon(5); }
&.wi-18 { .wli-icon(18); }
&.wi-19 { .wli-icon(19); }
&.wi-20 { .wli-icon(19); }
&.wi-21 { .wli-icon(19); }
&.wi-22 { .wli-icon(19); }
&.wi-23 { .wli-icon(19); }
&.wi-24 { .wli-icon(24); }
&.wi-25 { .wli-icon(24); }
&.wi-26 { .wli-icon(26); }
&.wi-27 { .wli-icon(27); }
&.wi-28 { .wli-icon(28); }
&.wi-29 { .wli-icon(27); }
&.wi-30 { .wli-icon(28); }
&.wi-31 { .wli-icon(31); }
&.wi-32 { .wli-icon(32); }
&.wi-33 { .wli-icon(31); }
&.wi-34 { .wli-icon(32); }
&.wi-35 { .wli-icon(5); }
&.wi-36 { .wli-icon(32); }
&.wi-37 { .wli-icon(2); }
&.wi-38 { .wli-icon(2); }
&.wi-39 { .wli-icon(2); }
&.wi-40 { .wli-icon(5); }
&.wi-41 { .wli-icon(5); }
&.wi-42 { .wli-icon(9); }
&.wi-43 { .wli-icon(5); }
&.wi-44 { .wli-icon(27); }
&.wi-45 { .wli-icon(2); }
&.wi-46 { .wli-icon(18); }
&.wi-47 { .wli-icon(2); }
}
& > i {
line-height: 100%;
font-size: 39px;
}
}
}
}
/*-------------------------
Profile View
--------------------------*/
.profile-view {
text-align: center;
.pv-header {
position: relative;
height: 145px;
width: 100%;
.bg-cover('../img/headers/sm/4.png');
& > .pv-main {
border-radius: 50%;
width: 130px;
position: absolute;
height: 130px;
bottom: -50px;
left: 50%;
margin-left: -65px;
.transition(all);
.transition-duration(300ms);
}
}
.pv-body {
margin-top: 70px;
padding: 0 20px 20px;
& > h2 {
margin: 0;
line-height: 100%;
font-size: 20px;
font-weight: 400;
}
& > small {
display: block;
margin: 10px 0 15px;
}
.pv-contact,
.pv-follow {
padding: 0;
list-style: none;
& > li {
display: inline-block;
}
}
.pv-follow {
margin: 20px -20px;
padding: 10px;
background-color: rgba(255, 255, 255, 0.04);
& > li {
padding: 0 10px;
}
}
.pv-contact {
& > li {
margin: 0 5px;
& > .zmdi {
line-height: 100%;
vertical-align: text-bottom;
font-size: 22px;
}
}
}
}
&:hover {
.pv-main {
.scale(1.2);
}
}
}
/*-------------------------
Picture List
--------------------------*/
.picture-list {
.pl-body {
padding: 2px;
[class*="col-"] {
padding: 2px;
& > a {
display: block;
img {
width: 100%;
}
}
}
.clearfix();
}
}
/*-------------------------
Social
--------------------------*/
.go-social {
.card-body {
padding: 0 15px 20px;
[class*="col-"] {
padding: 12px;
img {
.transition(all);
.transition-duration(200ms);
.backface-visibility(hidden);
}
&:hover {
img {
.scale(1.2);
}
}
}
}
}
/*-------------------------
Rating
--------------------------*/
.rating-list {
padding: 0 0 20px;
.rl-star {
margin-top: 10px;
margin-bottom: 4px;
.zmdi {
font-size: 20px;
&:not(.active) {
color: rgba(255,255,255,0.1);
}
&.active {
color: @off-white;
}
}
}
.media {
.zmdi-star {
line-height: 100%;
font-size: 22px;
color: @off-white;
vertical-align: middle;
position: relative;
top: -2px;
left: 6px;
}
.media-body {
padding: 7px 10px 0 5px;
}
}
}
/*-------------------------
Calendar
--------------------------*/
.cwh-year {
color: rgba(255, 255, 255, 0.4);
font-size: 15px;
}
.cwh-day {
font-size: 25px;
line-height: 100%;
}

View File

@ -0,0 +1,13 @@
.fw-container {
.tab-content {
padding: 25px 0;
}
.fw-footer {
text-align: center;
margin: 30px 0 0;
width: 100%;
border-top: 2px solid rgba(255, 255, 255, 0.1);
padding: 15px 0;
}
}

View File

@ -1,91 +0,0 @@
.four-zero-content {
padding: 20px;
background: #FFFFFF url('../img/hexbg.png') center center;
background-size: cover;
&:before {
height: 50%;
width: 100%;
position: absolute;
top: 0;
left: 0;
content: "";
}
}
.four-zero {
background: @m-blue;
box-shadow: 0 1px 11px rgba(0, 0, 0, 0.27);
border-radius: 2px;
position: absolute;
top: 50%;
margin-top: -150px;
color: #fff;
text-align: center;
padding: 15px;
height: 300px;
width: 500px;
left: 50%;
margin-left: -250px;
h2 {
font-size: 130px;
}
@media (max-width: @screen-xs-max) {
width: ~"calc(100% - 40px)";
left: 20px;
margin-left: 0;
height: 260px;
margin-top: -130px;
h2 {
font-size: 90px;
}
}
h2 {
line-height: 100%;
color: #fff;
font-weight: 100;
}
small {
display: block;
font-size: 26px;
margin-top: -10px
}
footer {
background: rgba(0,0,0,0.13);
position: absolute;
left: 0;
bottom: 0;
width: 100%;
padding: 10px;
& > a {
font-size: 21px;
display: inline-block;
color: #FFF;
margin: 0 1px;
line-height: 40px;
width: 40px;
height: 40px;
background: rgba(0, 0, 0, 0.09);
border-radius: 50%;
text-align: center;
.transition(all);
.transition-duration(300ms);
&:hover {
background: rgba(0, 0, 0, 0.2);
}
}
}
}

View File

@ -1,73 +0,0 @@
//
// Alerts
// --------------------------------------------------
// Base styles
// -------------------------
.alert {
padding: @alert-padding;
margin-bottom: @line-height-computed;
border: 1px solid transparent;
border-radius: @alert-border-radius;
// Headings for larger alerts
h4 {
margin-top: 0;
// Specified for the h4 to prevent conflicts of changing @headings-color
color: inherit;
}
// Provide class for links that match alerts
.alert-link {
font-weight: @alert-link-font-weight;
}
// Improve alignment and spacing of inner content
> p,
> ul {
margin-bottom: 0;
}
> p + p {
margin-top: 5px;
}
}
// Dismissible alerts
//
// Expand the right padding and account for the close button's positioning.
.alert-dismissable, // The misspelled .alert-dismissable was deprecated in 3.2.0.
.alert-dismissible {
padding-right: (@alert-padding + 20);
// Adjust close link position
.close {
position: relative;
top: -2px;
right: -21px;
color: inherit;
}
}
// Alternate styles
//
// Generate contextual modifier classes for colorizing the alert.
.alert-success {
.alert-variant(@alert-success-bg; @alert-success-border; @alert-success-text);
}
.alert-info {
.alert-variant(@alert-info-bg; @alert-info-border; @alert-info-text);
}
.alert-warning {
.alert-variant(@alert-warning-bg; @alert-warning-border; @alert-warning-text);
}
.alert-danger {
.alert-variant(@alert-danger-bg; @alert-danger-border; @alert-danger-text);
}

Some files were not shown because too many files have changed in this diff Show More