Merge branch 'feature-bootstrap5'

# Conflicts:
#	package.json
#	tests/Unit/Renderer/Twig/Extensions/GlobalsTest.php
#	webpack.config.js
#	yarn.lock
main
Igor Scheller 3 years ago
commit f201b2f1c8

1
.gitignore vendored

@ -39,3 +39,4 @@ _vimrc_local.vim
/node_modules
/public/assets
/package-lock.json
/yarn-error.log

@ -41,7 +41,7 @@ The Engelsystem may be installed manually or by using the provided [docker setup
* Recommended: Directory Listing should be disabled.
* There must be a MySQL database set up with a user who has full rights to that database.
* If necessary, create a ```config/config.php``` to override values from ```config/config.default.php```.
* To remove values from the `footer_items`, `available_themes`, `locales`, `tshirt_sizes` or `headers` lists the config file has to be renamed.
* To remove values from the `footer_items`, `themes`, `locales`, `tshirt_sizes` or `headers` lists the config file has to be renamed.
* To import the database, the ```bin/migrate``` script has to be run. If you can't execute scripts, you can use the `initial-install.sql` file from the release zip.
* In the browser, login with credentials ```admin``` : ```asdfasdf``` and change the password.

@ -109,24 +109,82 @@ return [
// Default theme, 1=style1.css
'theme' => env('THEME', 1),
// Available themes
'available_themes' => [
'15' => 'Engelsystem DiVOC R2R',
'14' => 'Engelsystem rC3 teal (2020)',
'13' => 'Engelsystem rC3 violet (2020)',
'12' => 'Engelsystem 36c3 (2019)',
'10' => 'Engelsystem cccamp19 green (2019)',
'9' => 'Engelsystem cccamp19 yellow (2019)',
'8' => 'Engelsystem cccamp19 blue (2019)',
'7' => 'Engelsystem 35c3 dark (2018)',
'6' => 'Engelsystem 34c3 dark (2017)',
'5' => 'Engelsystem 34c3 light (2017)',
'4' => 'Engelsystem 33c3 (2016)',
'3' => 'Engelsystem 32c3 (2015)',
'2' => 'Engelsystem cccamp15',
'11' => 'Engelsystem high contrast',
'0' => 'Engelsystem light',
'1' => 'Engelsystem dark',
'themes' => [
14 => [
'name' => 'Engelsystem rC3 teal (2020)',
'type' => 'dark',
'navbar_classes' => 'navbar-dark bg-black border-dark',
],
13 => [
'name' => 'Engelsystem rC3 violet (2020)',
'type' => 'dark',
'navbar_classes' => 'navbar-dark bg-black border-dark',
],
12 => [
'name' => 'Engelsystem 36c3 (2019)',
'type' => 'dark',
'navbar_classes' => 'navbar-dark bg-black border-dark',
],
10 => [
'name' => 'Engelsystem cccamp19 green (2019)',
'type' => 'dark',
'navbar_classes' => 'navbar-dark bg-black border-dark',
],
9 => [
'name' => 'Engelsystem cccamp19 yellow (2019)',
'type' => 'dark',
'navbar_classes' => 'navbar-dark bg-black border-dark',
],
8 => [
'name' => 'Engelsystem cccamp19 blue (2019)',
'type' => 'dark',
'navbar_classes' => 'navbar-dark bg-black border-dark',
],
7 => [
'name' => 'Engelsystem 35c3 dark (2018)',
'type' => 'dark',
'navbar_classes' => 'navbar-primary bg-black border-primary',
],
6 => [
'name' => 'Engelsystem 34c3 dark (2017)',
'type' => 'dark',
'navbar_classes' => 'navbar-dark bg-black border-dark',
],
5 => [
'name' => 'Engelsystem 34c3 light (2017)',
'type' => 'light',
'navbar_classes' => 'navbar-light bg-light',
],
4 => [
'name' => 'Engelsystem 33c3 (2016)',
'type' => 'dark',
'navbar_classes' => 'navbar-dark bg-body border-dark',
],
3 => [
'name' => 'Engelsystem 32c3 (2015)',
'type' => 'light',
'navbar_classes' => 'navbar-dark bg-black border-dark',
],
2 => [
'name' => 'Engelsystem cccamp15',
'type' => 'light',
'navbar_classes' => 'navbar-light bg-light',
],
11 => [
'name' => 'Engelsystem high contrast',
'type' => 'dark',
'navbar_classes' => 'navbar-dark bg-black border-dark',
],
0 => [
'name' => 'Engelsystem light',
'type' => 'light',
'navbar_classes' => 'navbar-light bg-light',
],
1 => [
'name' => 'Engelsystem dark',
'type' => 'dark',
'navbar_classes' => 'navbar-dark bg-black border-dark',
],
],
// Redirect to this site after logging in or when pressing the top-left button
@ -254,7 +312,7 @@ return [
'X-Content-Type-Options' => 'nosniff',
'X-Frame-Options' => 'sameorigin',
'Referrer-Policy' => 'strict-origin-when-cross-origin',
'Content-Security-Policy' => 'default-src \'self\' \'unsafe-inline\' \'unsafe-eval\'',
'Content-Security-Policy' => 'default-src \'self\' \'unsafe-inline\' \'unsafe-eval\'; img-src \'self\' data:;',
'X-XSS-Protection' => '1; mode=block',
'Feature-Policy' => 'autoplay \'none\'',
//'Strict-Transport-Security' => 'max-age=7776000',

@ -286,7 +286,7 @@ function angeltypes_list_controller()
button(
page_link_to('angeltypes', ['action' => 'view', 'angeltype_id' => $angeltype['id']]),
__('view'),
'btn-xs'
'btn-sm'
)
];
@ -294,12 +294,12 @@ function angeltypes_list_controller()
$actions[] = button(
page_link_to('angeltypes', ['action' => 'edit', 'angeltype_id' => $angeltype['id']]),
__('edit'),
'btn-xs'
'btn-sm'
);
$actions[] = button(
page_link_to('angeltypes', ['action' => 'delete', 'angeltype_id' => $angeltype['id']]),
__('delete'),
'btn-xs'
'btn-sm'
);
}
@ -310,18 +310,18 @@ function angeltypes_list_controller()
['action' => 'delete', 'user_angeltype_id' => $angeltype['user_angeltype_id']]
),
__('leave'),
'btn-xs'
'btn-sm'
);
} else {
$actions[] = button(
page_link_to('user_angeltypes', ['action' => 'add', 'angeltype_id' => $angeltype['id']]),
__('join'),
'btn-xs'
'btn-sm'
);
}
$angeltype['restricted'] = $angeltype['restricted'] ? glyph('book') : '';
$angeltype['no_self_signup'] = $angeltype['no_self_signup'] ? '' : glyph('share');
$angeltype['restricted'] = $angeltype['restricted'] ? icon('book') : '';
$angeltype['no_self_signup'] = $angeltype['no_self_signup'] ? '' : icon('pencil-square');
$angeltype['name'] = '<a href="'
. page_link_to('angeltypes', ['action' => 'view', 'angeltype_id' => $angeltype['id']])

@ -16,7 +16,7 @@ function user_angeltypes_unconfirmed_hint()
$unconfirmed_links = [];
foreach ($unconfirmed_user_angeltypes as $user_angeltype) {
$unconfirmed_links[] = '<a href="'
$unconfirmed_links[] = '<a class="text-info" href="'
. page_link_to('angeltypes', ['action' => 'view', 'angeltype_id' => $user_angeltype['angeltype_id']])
. '">' . $user_angeltype['name']
. ' (+' . $user_angeltype['count'] . ')'

@ -24,7 +24,7 @@ function user_driver_license_required_hint()
if ($angeltype['requires_driver_license']) {
return sprintf(
__('You joined an angeltype which requires a driving license. Please edit your driving license information here: %s.'),
'<a href="' . user_driver_license_edit_link() . '">' . __('driving license information') . '</a>'
'<a href="' . user_driver_license_edit_link() . '" class="text-info">' . __('driving license information') . '</a>'
);
}
}

@ -0,0 +1,33 @@
<?php
declare(strict_types=1);
use Engelsystem\Renderer\Twig\Extensions\Globals;
/**
* @return int
*/
function theme_id(): int
{
/** @var Globals $globals */
$globals = app(Globals::class);
$globals = $globals->getGlobals();
return $globals['themeId'];
}
/**
* @return array
*/
function theme(): array
{
$theme_id = theme_id();
return config('themes')[$theme_id];
}
/**
* @return string
*/
function theme_type(): string
{
return theme()['type'];
}

@ -57,6 +57,7 @@ $includeFiles = [
__DIR__ . '/../includes/controller/user_worklog_controller.php',
__DIR__ . '/../includes/helper/graph_helper.php',
__DIR__ . '/../includes/helper/legacy_helper.php',
__DIR__ . '/../includes/helper/message_helper.php',
__DIR__ . '/../includes/helper/email_helper.php',

@ -213,9 +213,9 @@ function admin_active()
$userData['shirt_size'] = (isset($tshirt_sizes[$shirtSize]) ? $tshirt_sizes[$shirtSize] : '');
$userData['work_time'] = round($usr['shift_length'] / 60)
. ' min (' . sprintf('%.2f', $usr['shift_length'] / 3600) . '&nbsp;h)';
$userData['active'] = glyph_bool($usr->state->active == 1);
$userData['force_active'] = glyph_bool($usr->state->force_active == 1);
$userData['tshirt'] = glyph_bool($usr->state->got_shirt == 1);
$userData['active'] = icon_bool($usr->state->active == 1);
$userData['force_active'] = icon_bool($usr->state->force_active == 1);
$userData['tshirt'] = icon_bool($usr->state->got_shirt == 1);
$userData['shift_count'] = $usr['shift_count'];
$actions = [];
@ -228,7 +228,7 @@ function admin_active()
$parameters['show_all_shifts'] = 1;
}
$actions[] = form(
[form_submit('submit', __('set active'), 'btn-xs', false)],
[form_submit('submit', __('set active'), 'btn-sm', false)],
page_link_to('admin_active', $parameters)
);
}
@ -241,7 +241,7 @@ function admin_active()
$parametersRemove['show_all_shifts'] = 1;
}
$actions[] = form(
[form_submit('submit', __('remove active'), 'btn-xs', false)],
[form_submit('submit', __('remove active'), 'btn-sm', false)],
page_link_to('admin_active', $parametersRemove)
);
}
@ -254,7 +254,7 @@ function admin_active()
$parametersShirt['show_all_shifts'] = 1;
}
$actions[] = form(
[form_submit('submit', __('got t-shirt'), 'btn-xs', false)],
[form_submit('submit', __('got t-shirt'), 'btn-sm', false)],
page_link_to('admin_active', $parametersShirt)
);
}
@ -267,7 +267,7 @@ function admin_active()
$parameters['show_all_shifts'] = 1;
}
$actions[] = form(
[form_submit('submit', __('remove t-shirt'), 'btn-xs', false)],
[form_submit('submit', __('remove t-shirt'), 'btn-sm', false)],
page_link_to('admin_active', $parameters)
);
}

@ -95,16 +95,21 @@ function admin_arrive()
$plannedDepartureDate = $usr->personalData->planned_departure_date;
$arrivalDate = $usr->state->arrival_date;
$plannedArrivalDate = $usr->personalData->planned_arrival_date;
$usr['rendered_planned_departure_date'] = $plannedDepartureDate ? $plannedDepartureDate->format(__('Y-m-d')) : '-';
$usr['rendered_planned_departure_date'] = $plannedDepartureDate
? $plannedDepartureDate->format(__('Y-m-d'))
: '-';
$usr['rendered_planned_arrival_date'] = $plannedArrivalDate ? $plannedArrivalDate->format(__('Y-m-d')) : '-';
$usr['rendered_arrival_date'] = $arrivalDate ? $arrivalDate->format(__('Y-m-d')) : '-';
$usr['arrived'] = glyph_bool($usr->state->arrived);
$usr['arrived'] = icon_bool($usr->state->arrived);
$usr['actions'] = form([
form_hidden('action', $usr->state->arrived ? 'reset' : 'arrived'),
form_hidden('user', $usr->id),
form_submit(
'submit', $usr->state->arrived ? __('reset') : __('arrived'), 'btn-xs', true,
$usr->state->arrived ? 'default' : 'primary'
'submit',
$usr->state->arrived ? __('reset') : __('arrived'),
'btn-sm',
true,
$usr->state->arrived ? 'secondary' : 'primary'
),
]);

@ -94,10 +94,10 @@ function admin_free()
'dect' => sprintf('<a href="tel:%s">%1$s</a>', $usr->contact->dect),
'email' => $usr->settings->email_human
? sprintf('<a href="email:%s">%1$s</a>', $email)
: glyph('eye-close'),
: icon('eye-slash'),
'actions' =>
auth()->can('admin_user')
? button(page_link_to('admin_user', ['id' => $usr->id]), __('edit'), 'btn-xs')
? button(page_link_to('admin_user', ['id' => $usr->id]), __('edit'), 'btn-sm')
: ''
];
}
@ -105,9 +105,9 @@ function admin_free()
form([
div('row', [
div('col-md-12 form-inline', [
div('inline-form-spacing', [
form_text('search', __('Search'), $search),
form_select('angeltype', __('Angeltype'), $angel_types, $angelType),
div('row', [
form_text('search', __('Search'), $search, null, null, null, 'col'),
form_select('angeltype', __('Angeltype'), $angel_types, $angelType, '', 'col'),
form_submit('submit', __('Search'))
]),
]),

@ -42,7 +42,7 @@ function admin_groups()
page_link_to('admin_groups',
['action' => 'edit', 'id' => $group['UID']]),
__('edit'),
'btn-xs'
'btn-sm'
)
];
}

@ -22,17 +22,17 @@ function admin_rooms()
foreach ($rooms_source as $room) {
$rooms[] = [
'name' => Room_name_render($room),
'map_url' => glyph_bool($room->map_url),
'map_url' => icon_bool($room->map_url),
'actions' => table_buttons([
button(
page_link_to('admin_rooms', ['show' => 'edit', 'id' => $room->id]),
__('edit'),
'btn-xs'
'btn-sm'
),
button(
page_link_to('admin_rooms', ['show' => 'delete', 'id' => $room->id]),
__('delete'),
'btn-xs'
'btn-sm'
)
])
];

@ -291,7 +291,7 @@ function admin_shifts()
foreach ($shifts as $shift) {
$shifts_table_entry = [
'timeslot' =>
'<span class="glyphicon glyphicon-time"></span> '
icon('clock') . ' '
. date('Y-m-d H:i', $shift['start'])
. ' - '
. date('H:i', $shift['end'])
@ -332,13 +332,13 @@ function admin_shifts()
form_hidden('change_hours', implode(', ', $change_hours)),
form_hidden('angelmode', $angelmode),
form_hidden('shift_over_midnight', $shift_over_midnight ? 'true' : 'false'),
form_submit('back', glyph('menu-left') . __('back')),
form_submit('back', icon('chevron-left') . __('back')),
table([
'timeslot' => __('Time and location'),
'title' => __('Type and title'),
'needed_angels' => __('Needed angels')
], $shifts_table),
form_submit('submit', glyph('floppy-disk') . __('Save'))
form_submit('submit', icon('save') . __('Save'))
])
]);
}
@ -468,7 +468,7 @@ function admin_shifts()
])
])
]),
form_submit('preview', glyph('search') . __('Preview'))
form_submit('preview', icon('search') . __('Preview'))
])
]);
}

@ -181,7 +181,7 @@ function admin_user()
}
$html .= buttons([
button(user_delete_link($user_source->id), glyph('lock') . __('delete'), 'btn-danger')
button(user_delete_link($user_source->id), icon('trash') . __('delete'), 'btn-danger')
]);
$html .= "<hr />";

@ -440,5 +440,5 @@ function guest_register()
*/
function entry_required()
{
return '<span class="text-info glyphicon glyphicon-warning-sign"></span>';
return icon('exclamation-triangle', 'text-info');
}

@ -24,7 +24,7 @@ function user_unread_messages()
->count();
if ($new_messages > 0) {
return ' <span class="badge danger">' . $new_messages . '</span>';
return ' <span class="badge bg-danger">' . $new_messages . '</span>';
}
}
return '';
@ -75,7 +75,7 @@ function user_messages()
$receiver_user_source = $message->receiver;
$messages_table_entry = [
'new' => !$message->read ? '<span class="glyphicon glyphicon-envelope"></span>' : '',
'new' => !$message->read ? icon('envelope') : '',
'timestamp' => $message->created_at->format(__('Y-m-d H:i')),
'from' => User_Nick_render($sender_user_source),
'to' => User_Nick_render($receiver_user_source),
@ -87,14 +87,14 @@ function user_messages()
$messages_table_entry['actions'] = button(
page_link_to('user_messages', ['action' => 'read', 'id' => $message->id]),
__('mark as read'),
'btn-xs'
'btn-sm'
);
}
} else {
$messages_table_entry['actions'] = button(
page_link_to('user_messages', ['action' => 'delete', 'id' => $message->id]),
__('delete message'),
'btn-xs'
'btn-sm'
);
}
$messages_table[] = $messages_table_entry;

@ -169,7 +169,13 @@ function user_settings()
{
$request = request();
$config = config();
$themes = config('available_themes');
$themesConfig = config('themes');
$themes = [];
foreach ($themesConfig as $themeIndex => $themeConfig) {
$themes[$themeIndex] = $themeConfig['name'];
}
$enable_tshirt_size = config('enable_tshirt_size');
$tshirt_sizes = config('tshirt_sizes');

@ -269,7 +269,7 @@ function view_user_shifts()
button(
'javascript: checkOwnTypes(\'selection_types\', ' . json_encode($ownTypes) . ')',
__('Own'),
'hidden-print'
'd-print-none'
),
]
),
@ -281,8 +281,9 @@ function view_user_shifts()
. __('Description of the jobs.')
. '</a>',
'shifts_table' => msg() . $shiftCalendarRenderer->render(),
'ical_text' => ical_hint(),
'ical_text' => div('mt-3', ical_hint()),
'filter' => __('Filter'),
'filter_toggle' => __('shifts.filter.toggle'),
'set_yesterday' => __('Yesterday'),
'set_today' => __('Today'),
'set_tomorrow' => __('Tomorrow'),
@ -292,7 +293,7 @@ function view_user_shifts()
'set_next_8h' => __('next 8h'),
'buttons' => button(
public_dashboard_link(),
glyph('dashboard') . __('Public Dashboard')
icon('speedometer2') . __('Public Dashboard')
)
])
])
@ -318,7 +319,9 @@ function ical_hint()
page_link_to('shifts_json_export', ['key' => $user->api_key]),
page_link_to('user_myshifts', ['reset' => 1])
)
. ' <button class="btn btn-xs btn-danger" data-toggle="collapse" data-target="#collapseApiKey" aria-expanded="false" aria-controls="collapseApiKey">
. ' <button class="btn btn-sm btn-danger" type="button"
data-bs-toggle="collapse" data-bs-target="#collapseApiKey"
aria-expanded="false" aria-controls="collapseApiKey">
' . __('Show API Key') . '
</button>'
. '</p>'
@ -351,8 +354,8 @@ function make_select($items, $selected, $name, $title = null, $additionalButtons
}
$buttons = [];
$buttons[] = button('javascript: checkAll(\'selection_' . $name . '\', true)', __('All'), 'hidden-print');
$buttons[] = button('javascript: checkAll(\'selection_' . $name . '\', false)', __('None'), 'hidden-print');
$buttons[] = button('javascript: checkAll(\'selection_' . $name . '\', true)', __('All'), 'd-print-none');
$buttons[] = button('javascript: checkAll(\'selection_' . $name . '\', false)', __('None'), 'd-print-none');
$buttons = array_merge($buttons, $additionalButtons);
$html .= buttons($buttons);
@ -362,7 +365,7 @@ function make_select($items, $selected, $name, $title = null, $additionalButtons
. '<label><input type="checkbox" name="' . $name . '[]" value="' . $i['id'] . '" '
. (in_array($i['id'], $selected) ? ' checked="checked"' : '')
. ' > ' . $i['name'] . '</label>'
. (!isset($i['enabled']) || $i['enabled'] ? '' : glyph('lock'))
. (!isset($i['enabled']) || $i['enabled'] ? '' : icon('lock'))
. '</div>';
}
$html .= '<div id="selection_' . $name . '" class="selection ' . $name . '">' . "\n";

@ -29,14 +29,12 @@ function form_spinner($name, $label, $value)
return form_element($label, '
<div class="input-group">
<input id="spinner-' . $name . '" class="form-control" name="' . $name . '" value="' . $value . '" />
<div class="input-group-btn">
<button id="spinner-' . $name . '-down" class="btn btn-default" type="button">
<span class="glyphicon glyphicon-minus"></span>
</button>
<button id="spinner-' . $name . '-up" class="btn btn-default" type="button">
<span class="glyphicon glyphicon-plus"></span>
</button>
</div>
<button id="spinner-' . $name . '-down" class="btn btn-secondary" type="button">
' . icon('dash-lg') . '
</button>
<button id="spinner-' . $name . '-up" class="btn btn-secondary" type="button">
' . icon('plus-lg') . '
</button>
</div>
<script type="text/javascript">
$(\'#spinner-' . $name . '-down\').click(function() {
@ -72,7 +70,7 @@ function form_date($name, $label, $value, $start_date = '', $end_date = '')
return form_element($label, '
<div class="input-group date" id="' . $dom_id . '" data-min-date="' . $start_date . '" data-max-date="' . $end_date . '">
<input type="date" placeholder="YYYY-MM-DD" name="' . $name . '" class="form-control" value="' . htmlspecialchars($value) . '" autocomplete="off">'
. '<span class="input-group-addon">' . glyph('th') . '</span>
. '<span class="input-group-text">' . icon('grid-3x3-gap-fill') . '</span>
</div>
', $dom_id);
}
@ -94,12 +92,12 @@ function form_datetime(string $name, string $label, $value)
}
return form_element($label, sprintf('
<div class="input-group datetime" id="%s">
<div class="input-group datetime" id="%s" data-target-input="nearest">
<input type="datetime-local" placeholder="YYYY-MM-DD HH:MM" name="%s"
class="form-control" value="%s" autocomplete="off">'
. '<span class="input-group-addon">' . glyph('th') . '</span>
class="form-control" value="%s" autocomplete="off" data-target="#%s">'
. '<span class="input-group-text">' . icon('grid-3x3-gap-fill') . '</span>
</div>
', $dom_id, $name, htmlspecialchars($value ? $value->format('Y-m-d H:i') : '')), $dom_id);
', $dom_id, $name, htmlspecialchars($value ? $value->format('Y-m-d H:i') : ''), $dom_id), $dom_id);
}
/**
@ -214,7 +212,7 @@ function form_radio($name, $label, $selected, $value)
function form_info($label, $text = '')
{
if ($label == '') {
return '<span class="help-block">' . glyph('info-sign') . $text . '</span>';
return '<span class="help-block">' . icon('info-circle') . $text . '</span>';
}
if ($text == '') {
return '<h4>' . $label . '</h4>';
@ -257,10 +255,11 @@ function form_submit($name, $label, $class = '', $wrapForm = true, $buttonType =
* @param bool $disabled
* @param int|null $maxlength
* @param string|null $autocomplete
* @param string|null $class
*
* @return string
*/
function form_text($name, $label, $value, $disabled = false, $maxlength = null, $autocomplete = null)
function form_text($name, $label, $value, $disabled = false, $maxlength = null, $autocomplete = null, $class = '')
{
$disabled = $disabled ? ' disabled="disabled"' : '';
$maxlength = $maxlength ? ' maxlength=' . (int)$maxlength : '';
@ -270,7 +269,8 @@ function form_text($name, $label, $value, $disabled = false, $maxlength = null,
$label,
'<input class="form-control" id="form_' . $name . '" type="text" name="' . $name
. '" value="' . htmlspecialchars($value) . '"' . $maxlength . $disabled . $autocomplete . '/>',
'form_' . $name
'form_' . $name,
$class
);
}
@ -404,14 +404,16 @@ function form_textarea($name, $label, $value, $disabled = false)
* @param string[] $values
* @param string $selected
* @param string $selectText
* @param string $class
* @return string
*/
function form_select($name, $label, $values, $selected, $selectText = '')
function form_select($name, $label, $values, $selected, $selectText = '', $class = '')
{
return form_element(
$label,
html_select_key('form_' . $name, $name, $values, $selected, $selectText),
'form_' . $name
'form_' . $name,
$class
);
}
@ -421,15 +423,21 @@ function form_select($name, $label, $values, $selected, $selectText = '')
* @param string $label
* @param string $input
* @param string $for
* @param string $class
* @return string
*/
function form_element($label, $input, $for = '')
function form_element($label, $input, $for = '', $class = '')
{
$class = $class ? ' ' . $class : '';
if (empty($label)) {
return '<div class="form-group">' . $input . '</div>';
return '<div class="mb-3' . $class . '">' . $input . '</div>';
}
return '<div class="form-group">' . '<label for="' . $for . '">' . $label . '</label>' . $input . '</div>';
return '<div class="mb-3' . $class . '">'
. '<label class="form-label" for="' . $for . '">' . $label . '</label>'
. $input
. '</div>';
}
/**

@ -60,24 +60,24 @@ function make_user_submenu()
$user_submenu = make_language_select();
if (auth()->can('user_settings') || auth()->can('logout')) {
$user_submenu[] = toolbar_item_divider();
$user_submenu[] = toolbar_dropdown_item_divider();
}
if (auth()->can('user_settings')) {
$user_submenu[] = toolbar_item_link(
$user_submenu[] = toolbar_dropdown_item(
page_link_to('user_settings'),
'list-alt',
__('Settings'),
$page == 'user_settings'
$page == 'user_settings',
'gear'
);
}
if (auth()->can('logout')) {
$user_submenu[] = toolbar_item_link(
$user_submenu[] = toolbar_dropdown_item(
page_link_to('logout'),
'log-out',
__('Logout'),
$page == 'logout'
$page == 'logout',
'box-arrow-left',
);
}
@ -116,7 +116,7 @@ function make_navigation()
// path => [name, permission]
'admin_arrive' => 'Arrive angels',
'admin_active' => 'Active angels',
'admin_user' => 'All Angels',
'users' => ['All Angels', 'admin_user'],
'admin_free' => 'Free angels',
'admin/questions' => ['Answer questions', 'question.edit'],
'shifttypes' => 'Shifttypes',
@ -138,9 +138,8 @@ function make_navigation()
}
$title = ((array)$options)[0];
$admin_menu[] = toolbar_item_link(
$admin_menu[] = toolbar_dropdown_item(
page_link_to($menu_page),
'',
__($title),
$menu_page == $page
);
@ -150,7 +149,7 @@ function make_navigation()
$menu[] = toolbar_dropdown('', __('Admin'), $admin_menu);
}
return '<ul class="nav navbar-nav">' . join("\n", $menu) . '</ul>';
return '<ul class="navbar-nav mb-2 mb-lg-0">' . join("\n", $menu) . '</ul>';
}
/**
@ -187,13 +186,13 @@ function make_room_navigation($menu)
$rooms = Rooms();
$room_menu = [];
if (auth()->can('admin_rooms')) {
$room_menu[] = toolbar_item_link(page_link_to('admin_rooms'), 'list', __('Manage rooms'));
$room_menu[] = toolbar_dropdown_item(page_link_to('admin_rooms'), __('Manage rooms'), false, 'list');
}
if (count($room_menu) > 0) {
$room_menu[] = toolbar_item_divider();
$room_menu[] = toolbar_dropdown_item_divider();
}
foreach ($rooms as $room) {
$room_menu[] = toolbar_item_link(room_link($room), 'map-marker', $room->name);
$room_menu[] = toolbar_dropdown_item(room_link($room), $room->name, false, 'geo-alt');
}
if (count($room_menu) > 0) {
$menu[] = toolbar_dropdown('map-marker', __('Rooms'), $room_menu);
@ -215,9 +214,8 @@ function make_language_select()
foreach (config('locales') as $locale => $name) {
$url = url($request->getPathInfo(), ['set-locale' => $locale]);
$items[] = toolbar_item_link(
$items[] = toolbar_dropdown_item(
htmlspecialchars($url),
'',
$name,
$locale == $activeLocale
);
@ -241,7 +239,7 @@ function admin_new_questions()
return null;
}
return '<a href="' . page_link_to('/admin/questions') . '">'
return '<a class="text-info" href="' . page_link_to('/admin/questions') . '">'
. __('There are unanswered questions!')
. '</a>';
}

@ -1,5 +1,7 @@
<?php
use Illuminate\Support\Str;
/**
* Render a stat for dashborad (big number with label).
* If no style given, style is danger if number > 0, and success if number == 0.
@ -18,7 +20,7 @@ function stats($label, $number, $style = null)
$style = 'success';
}
}
return div('stats stats-' . $style, [
return div('col stats stats-' . $style, [
$label,
div('number', [
$number
@ -38,28 +40,34 @@ function tabs($tabs, $selected = 0)
$tab_header = [];
$tab_content = [];
foreach ($tabs as $header => $content) {
$class = '';
$active = false;
$id = $header;
$href = '#' . $id;
if (count($tab_header) == $selected) {
$class = 'active';
$active = true;
}
if (is_array($content)) {
$href = $content['href'];
$content = null;
$id = null;
}
$tab_header[] = '<li role="presentation" class="' . $class . '">
<a href="'. $href . '"'
. ($id ? ' aria-controls="' . $id . '" role="tab" data-toggle="tab"' : '')
$tab_header[] = '<li role="presentation" class="nav-item">
<a href="'. $href . '" class="nav-link' . ($active ? ' active' : '') . '" role="tab"'
. ($id ? ' id="' . $id . '-tab"' : '')
. ($id ? ' aria-controls="' . $id . '" data-bs-target="#' . $id . '" data-bs-toggle="tab" role="tab"' : '')
. ($id && $active ? ' aria-selected="true"' : ' aria-selected="false"')
. '>'
. $header . '</a></li>';
$tab_content[] = $content ? '<div role="tabpanel" class="tab-pane ' . $class . '" id="' . $id . '">'
$tab_content[] = $content
? '<div role="tabpanel" class="tab-pane' . ($active ? ' show active' : '') . '" id="' . $id . '"'
. ' aria-labelledby="' . $id . '-tab"'
. '>'
. $content
. '</div>' : '';
. '</div>'
: '';
}
return div('', [
'<ul class="nav nav-tabs" role="tablist">' . join($tab_header) . '</ul>',
'<ul class="nav nav-tabs mb-3" role="tablist">' . join($tab_header) . '</ul>',
'<div class="tab-content">' . join($tab_content) . '</div>'
]);
}
@ -82,9 +90,9 @@ function mute($text)
* @param string $class default, primary, info, success, warning, danger
* @return string
*/
function label($content, $class = 'default')
function badge($content, $class = 'default')
{
return '<span class="label label-' . $class . '">' . $content . '</span>';
return '<span class="badge rounded-pill bg-' . $class . '">' . $content . '</span>';
}
/**
@ -108,14 +116,16 @@ function progress_bar($valuemin, $valuemax, $valuenow, $class = '', $content = '
}
/**
* Render glyphicon
* Render bootstrap icon
*
* @param string $icon_name
* @param string $class
*
* @param string $glyph_name
* @return string
*/
function glyph($glyph_name)
function icon(string $icon_name, string $class = ''): string
{
return ' <span class="glyphicon glyphicon-' . $glyph_name . '"></span> ';
return ' <span class="bi bi-' . $icon_name . ($class ? ' ' . $class : '') . '"></span> ';
}
/**
@ -124,10 +134,10 @@ function glyph($glyph_name)
* @param boolean $boolean
* @return string
*/
function glyph_bool($boolean)
function icon_bool($boolean)
{
return '<span class="text-' . ($boolean ? 'success' : 'danger') . '">'
. glyph($boolean ? 'ok' : 'remove')
. icon($boolean ? 'check-lg' : 'x-lg')
. '</span>';
}
@ -169,77 +179,98 @@ function toolbar_pills($items)
* Render a link for a toolbar.
*
* @param string $href
* @param string $glyphicon
* @param string $icon
* @param string $label
* @param bool $selected
* @param bool $active
* @return string
*/
function toolbar_item_link($href, $glyphicon, $label, $selected = false)
function toolbar_item_link($href, $icon, $label, $active = false)
{
return '<li class="' . ($selected ? 'active' : '') . '">'
. '<a href="' . $href . '">'
. ($glyphicon != '' ? '<span class="glyphicon glyphicon-' . $glyphicon . '"></span> ' : '')
return '<li class="nav-item">'
. '<a class="nav-link ' . ($active ? 'active' : '') . '" href="' . $href . '">'
. ($icon != '' ? '<span class="bi bi-' . $icon . '"></span> ' : '')
. $label
. '</a>'
. '</li>';
}
/**
* @return string
*/
function toolbar_item_divider()
function toolbar_dropdown_item(string $href, string $label, bool $active, string $icon = null): string
{
return strtr(
'<li><a class="dropdown-item{active}" href="{href}">{icon} {label}</a></li>',
[
'{href}' => $href,
'{icon}' => $icon === null ? '' : '<i class="bi bi-' . $icon . '"></i>',
'{label}' => $label,
'{active}' => $active ? ' active' : ''
]
);
}
function toolbar_dropdown_item_divider(): string
{
return '<li class="divider"></li>';
return '<li><hr class="dropdown-divider"></li>';
}
/**
* @param string $glyphicon
* @param string $icon
* @param string $label
* @param array $submenu
* @param string $class
* @return string
*/
function toolbar_dropdown($glyphicon, $label, $submenu, $class = '')
function toolbar_dropdown($icon, $label, $submenu, $class = ''): string
{
return '<li class="dropdown ' . $class . '">'
. '<a href="#" class="dropdown-toggle" data-toggle="dropdown">'
. ($glyphicon != '' ? '<span class="glyphicon glyphicon-' . $glyphicon . '"></span> ' : '')
. $label
. '<span class="caret"></span></a>'
. '<ul class="dropdown-menu" role="menu">'
. join("\n", $submenu)
. '</ul></li>';
$template =<<<EOT
<li class="nav-item dropdown {class}">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
{icon} {label}
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
{submenu}
</ul>
</li>
EOT;
return strtr(
$template,
[
'{class}' => $class,
'{label}' => $label,
'{icon}' => empty($icon) ? '' : '<i class="bi ' . $icon . '"></i>',
'{submenu}' => join("\n", $submenu)
]
);
}
/**
* @param string $glyphicon
* @param string $icon
* @param string $label
* @param string[] $content
* @param string $class
*
* @return string
*/
function toolbar_popover($glyphicon, $label, $content, $class = '')
function toolbar_popover($icon, $label, $content, $class = '')
{
$dom_id = md5(microtime() . $glyphicon . $label);
return '<li class="dropdown messages ' . $class . '">'
. '<a id="' . $dom_id . '" href="#" tabindex="0">'
. ($glyphicon != '' ? '<span class="glyphicon glyphicon-' . $glyphicon . '"></span> ' : '')
$dom_id = md5(microtime() . $icon . $label);
return '<li class="nav-item nav-item--userhints d-flex align-items-center ' . $class . '">'
. '<a id="' . $dom_id . '" href="#" tabindex="0" class="nav-link">'
. ($icon ? icon($icon) : '')
. $label
. ' <span class="caret"></span></a>'
. '<small class="bi bi-caret-down-fill"></small>'
. '</a>'
. '<script type="text/javascript">
$(function(){
$(\'#' . $dom_id . '\').popover({
trigger: \'click\',
html: true,
content: \'' . addslashes(join('', $content)) . '\',
placement: \'bottom\',
container: \'#navbar-offcanvas\'
})
});
new bootstrap.Popover(document.getElementById(\'' . $dom_id . '\'), {
container: \'body\',
html: true,
content: \'' . addslashes(join('', $content)) . '\',
placement: \'bottom\',
customClass: \'popover--userhints\'
})
</script></li>';
}
/**
* Generiert HTML Code für eine "Seite".
* Fügt dazu die übergebenen Elemente zusammen.
@ -282,10 +313,10 @@ function description($data)
$elements = [];
foreach ($data as $label => $description) {
if (!empty($label) && !empty($description)) {
$elements[] = '<dt>' . $label . '</dt><dd>' . $description . '</dd>';
$elements[] = '<dt class="col-sm-1">' . $label . '</dt><dd class="col-sm-11">' . $description . '</dd>';
}
}
return '<dl class="dl-horizontal">' . join($elements) . '</dl>';
return '<dl class="row">' . join($elements) . '</dl>';
}
/**
@ -362,7 +393,11 @@ function render_table($columns, $rows, $data = true)
*/
function button($href, $label, $class = '')
{
return '<a href="' . $href . '" class="btn btn-default ' . $class . '">' . $label . '</a>';
if (!Str::contains(str_replace(['btn-sm', 'btn-xl'], '', $class), 'btn-')) {
$class = 'btn-secondary' . ($class ? ' ' . $class : '');
}
return '<a href="' . $href . '" class="btn ' . $class . '">' . $label . '</a>';
}
/**
@ -375,20 +410,21 @@ function button($href, $label, $class = '')
*/
function button_js($javascript, $label, $class = '')
{
return '<a onclick="' . $javascript . '" href="#" class="btn btn-default ' . $class . '">' . $label . '</a>';
return '<a onclick="' . $javascript . '" href="#" class="btn btn-secondary ' . $class . '">' . $label . '</a>';
}
/**
* Rendert einen Knopf mit Glyph
* Renders a button with an icon
*
* @param string $href
* @param string $glyph
* @param string $icon
* @param string $class
*
* @return string
*/
function button_glyph($href, $glyph, $class = '')
function button_icon($href, $icon, $class = '')
{
return button($href, glyph($glyph), $class);
return button($href, icon($icon), $class);
}
/**
@ -399,7 +435,7 @@ function button_glyph($href, $glyph, $class = '')
*/
function button_help($topic = '')
{
return button(config('documentation_url') . $topic, glyph('question-sign'), 'btn-sm');
return button(config('documentation_url') . $topic, icon('question-circle'), 'btn-sm');
}
/**
@ -410,7 +446,7 @@ function button_help($topic = '')
*/
function buttons($buttons = [])
{
return '<div class="form-group">' . table_buttons($buttons) . '</div>';
return '<div class="mb-3">' . table_buttons($buttons) . '</div>';
}
/**

@ -22,7 +22,7 @@ function AngelType_name_render($angeltype, $plain = false)
}
return '<a href="' . angeltype_link($angeltype['id']) . '">'
. ($angeltype['restricted'] ? glyph('book') : '') . $angeltype['name']
. ($angeltype['restricted'] ? icon('book') : '') . $angeltype['name']
. '</a>';
}
@ -37,17 +37,17 @@ function AngelType_render_membership($user_angeltype)
if (!empty($user_angeltype['user_angeltype_id'])) {
if ($user_angeltype['restricted']) {
if (empty($user_angeltype['confirm_user_id'])) {
return glyph('book') . __('Unconfirmed');
return icon('book') . __('Unconfirmed');
} elseif ($user_angeltype['supporter']) {
return glyph_bool(true) . __('Supporter');
return icon_bool(true) . __('Supporter');
}
return glyph_bool(true) . __('Member');
return icon_bool(true) . __('Member');
} elseif ($user_angeltype['supporter']) {
return glyph_bool(true) . __('Supporter');
return icon_bool(true) . __('Supporter');
}
return glyph_bool(true) . __('Member');
return icon_bool(true) . __('Member');
}
return glyph_bool(false);
return icon_bool(false);
}
/**
@ -60,8 +60,8 @@ function AngelType_delete_view($angeltype)
info(sprintf(__('Do you want to delete angeltype %s?'), $angeltype['name']), true),
form([
buttons([
button(page_link_to('angeltypes'), glyph('remove') . __('cancel')),
form_submit('delete', glyph('ok') . __('delete'), 'btn-danger', false),
button(page_link_to('angeltypes'), icon('x-lg') . __('cancel')),
form_submit('delete', icon('trash') . __('delete'), 'btn-danger', false),
])
]),
], true);
@ -142,7 +142,7 @@ function AngelType_view_buttons($angeltype, $user_angeltype, $admin_angeltypes,
if ($angeltype['requires_driver_license']) {
$buttons[] = button(
user_driver_license_edit_link($user),
glyph('road') . __('my driving license')
icon('wallet2') . __('my driving license')
);
}
@ -205,13 +205,13 @@ function AngelType_view_members($angeltype, $members, $admin_user_angeltypes, $a
$member->name = User_Nick_render($member) . User_Pronoun_render($member);
$member['dect'] = $member->contact->dect;
if ($angeltype['requires_driver_license']) {
$member['wants_to_drive'] = glyph_bool($member['wants_to_drive']);
$member['has_car'] = glyph_bool($member['has_car']);
$member['has_license_car'] = glyph_bool($member['has_license_car']);
$member['has_license_3_5t_transporter'] = glyph_bool($member['has_license_3_5t_transporter']);
$member['has_license_7_5t_truck'] = glyph_bool($member['has_license_7_5t_truck']);
$member['has_license_12_5t_truck'] = glyph_bool($member['has_license_12_5t_truck']);
$member['has_license_forklift'] = glyph_bool($member['has_license_forklift']);
$member['wants_to_drive'] = icon_bool($member['wants_to_drive']);
$member['has_car'] = icon_bool($member['has_car']);
$member['has_license_car'] = icon_bool($member['has_license_car']);
$member['has_license_3_5t_transporter'] = icon_bool($member['has_license_3_5t_transporter']);
$member['has_license_7_5t_truck'] = icon_bool($member['has_license_7_5t_truck']);
$member['has_license_12_5t_truck'] = icon_bool($member['has_license_12_5t_truck']);
$member['has_license_forklift'] = icon_bool($member['has_license_forklift']);
}
if ($angeltype['restricted'] && empty($member['confirm_user_id'])) {
@ -222,7 +222,7 @@ function AngelType_view_members($angeltype, $members, $admin_user_angeltypes, $a
['action' => 'confirm', 'user_angeltype_id' => $member['user_angeltype_id']]
),
__('confirm'),
'btn-xs'
'btn-sm'
),
button(
page_link_to(
@ -230,7 +230,7 @@ function AngelType_view_members($angeltype, $members, $admin_user_angeltypes, $a
['action' => 'delete', 'user_angeltype_id' => $member['user_angeltype_id']]
),
__('deny'),
'btn-xs'
'btn-sm'
)
]);
$members_unconfirmed[] = $member;
@ -244,7 +244,7 @@ function AngelType_view_members($angeltype, $members, $admin_user_angeltypes, $a
'supporter' => 0
]),
__('Remove supporter rights'),
'btn-xs'
'btn-sm'
)
]);
} else {
@ -260,7 +260,7 @@ function AngelType_view_members($angeltype, $members, $admin_user_angeltypes, $a
'user_angeltype_id' => $member['user_angeltype_id'],
'supporter' => 1
]),
__('Add supporter rights'), 'btn-xs')
__('Add supporter rights'), 'btn-sm')
: '',
button(
page_link_to('user_angeltypes', [
@ -268,7 +268,7 @@ function AngelType_view_members($angeltype, $members, $admin_user_angeltypes, $a
'user_angeltype_id' => $member['user_angeltype_id']
]),
__('remove'),
'btn-xs'
'btn-sm'
)
]);
}
@ -403,7 +403,7 @@ function AngelType_view_info(
$info[] = '<h3>' . __('Description') . '</h3>';
$parsedown = new Parsedown();
if ($angeltype['description'] != '') {
$info[] = '<div class="well">' . $parsedown->parse($angeltype['description']) . '</div>';
$info[] = $parsedown->parse($angeltype['description']);
}
list($supporters, $members_confirmed, $members_unconfirmed) = AngelType_view_members(
@ -455,11 +455,11 @@ function AngelType_view_info(
$info[] = buttons([
button(
page_link_to('user_angeltypes', ['action' => 'confirm_all', 'angeltype_id' => $angeltype['id']]),
glyph('ok') . __('confirm all')
icon('check-lg') . __('confirm all')
),
button(
page_link_to('user_angeltypes', ['action' => 'delete_all', 'angeltype_id' => $angeltype['id']]),
glyph('remove') . __('deny all')
icon('trash') . __('deny all')
)
]);
$info[] = table($table_headers, $members_unconfirmed);
@ -502,8 +502,8 @@ function AngelTypes_list_view($angeltypes, $admin_angeltypes)
]),
table([
'name' => __('Name'),
'restricted' => glyph('book') . __('Requires introduction'),
'no_self_signup' => glyph('share') . __('Self Sign Up Allowed'),
'restricted' => icon('book') . __('Requires introduction'),
'no_self_signup' => icon('pencil-square') . __('Self Sign Up Allowed'),
'membership' => __('Membership'),
'actions' => ''
], $angeltypes)
@ -553,7 +553,7 @@ function AngelTypes_about_view_angeltype($angeltype)
);
}
if ($angeltype['description'] != '') {
$html .= '<div class="well">' . $parsedown->parse($angeltype['description']) . '</div>';
$html .= $parsedown->parse($angeltype['description']);
}
$html .= '<hr />';
@ -581,9 +581,9 @@ function AngelTypes_about_view($angeltypes, $user_logged_in)
$buttons[] = button(page_link_to('login'), __('Login'));
}
$faqUrl = config('faq_url');
if (!empty($faqUrl)) {
$buttons[] = button($faqUrl, __('FAQ'), 'btn-primary');
$footerConfig = config('footer_items');
if (!empty($footerConfig['FAQ'])) {
$buttons[] = button($footerConfig['FAQ'], __('FAQ'), 'btn-primary');
}
$content = [

@ -34,33 +34,35 @@ function public_dashboard_view($stats, $free_shifts)
$isFiltered = request()->get('filtered');
$filter = collect(session()->get('shifts-filter'))->only(['rooms', 'types'])->toArray();
return page([
div('public-dashboard', [
div('first', [
stats(__('Angels needed in the next 3 hrs'), $stats['needed-3-hours']),
stats(__('Angels needed for nightshifts'), $stats['needed-night']),
stats(__('Angels currently working'), $stats['angels-working'], 'default'),
stats(__('Hours to be worked'), $stats['hours-to-work'], 'default'),
'<script>
$(function() {
setInterval(function() {
$(\'#public-dashboard\').load(window.location.href + \' #public-dashboard\');
}, 60000);
})
</script>'
], 'statistics'),
$needed_angels
], 'public-dashboard'),
div('wrapper', [
div('public-dashboard', [
div('first row', [
stats(__('Angels needed in the next 3 hrs'), $stats['needed-3-hours']),
stats(__('Angels needed for nightshifts'), $stats['needed-night']),
stats(__('Angels currently working'), $stats['angels-working'], 'default'),
stats(__('Hours to be worked'), $stats['hours-to-work'], 'default'),
'<script>
$(function() {
setInterval(function() {
$(\'#content .wrapper\').load(window.location.href + \' #public-dashboard\');
}, 60000);
})
</script>'
], 'statistics'),
$needed_angels
], 'public-dashboard'),
]),
div('first col-md-12 text-center', [buttons([
button_js(
'
$(\'#navbar-collapse-1,.navbar-nav,.navbar-toggle,#footer,#fullscreen-button\').remove();
$(\'.navbar-brand\').append(\' ' . __('Public Dashboard') . '\');
',
glyph('fullscreen') . __('Fullscreen')
icon('fullscreen') . __('Fullscreen')
),
auth()->user() ? button(
public_dashboard_link($isFiltered ? [] : ['filtered' => 1] + $filter),
glyph('filter') . ($isFiltered ? __('All') : __('Filtered'))
icon('filter') . ($isFiltered ? __('All') : __('Filtered'))
) : ''
])], 'fullscreen-button'),
]);
@ -74,27 +76,32 @@ function public_dashboard_view($stats, $free_shifts)
*/
function public_dashboard_shift_render($shift)
{
$panel_body = glyph('time') . $shift['start'] . ' - ' . $shift['end'];
$panel_body = icon('clock') . $shift['start'] . ' - ' . $shift['end'];
$panel_body .= ' (' . $shift['duration'] . '&nbsp;h)';
$panel_body .= '<br>' . glyph('tasks') . $shift['shifttype_name'];
$panel_body .= '<br>' . icon('list-task') . $shift['shifttype_name'];
if (!empty($shift['title'])) {
$panel_body .= ' (' . $shift['title'] . ')';
}
$panel_body .= '<br>' . glyph('map-marker') . $shift['room_name'];
$panel_body .= '<br>' . icon('geo-alt') . $shift['room_name'];
foreach ($shift['needed_angels'] as $needed_angels) {
$panel_body .= '<br>' . glyph('user')
$panel_body .= '<br>' . icon('person')
. '<span class="text-' . $shift['style'] . '">'
. $needed_angels['need'] . ' &times; ' . $needed_angels['angeltype_name']
. '</span>';
}
return div('col-md-3', [
div('dashboard-panel panel panel-' . $shift['style'], [
div('panel-body', [
'<a class="panel-link" href="' . shift_link($shift) . '"></a>',
$type = 'bg-dark';
if (theme_type() == 'light') {
$type = 'bg-light';
}
return div('col-md-3 mb-3', [
div('dashboard-card card border-' . $shift['style'] . ' ' . $type, [
div('card-body', [
'<a class="card-link" href="' . shift_link($shift) . '"></a>',
$panel_body
])
])

@ -24,7 +24,7 @@ function Room_view(Room $room, ShiftsFilterRenderer $shiftsFilterRenderer, Shift
if ($room->description) {
$description = '<h3>' . __('Description') . '</h3>';
$parsedown = new Parsedown();
$description .= '<div class="well">' . $parsedown->parse($room->description) . '</div>';
$description .= $parsedown->parse($room->description);
}
$tabs = [];
@ -51,7 +51,7 @@ function Room_view(Room $room, ShiftsFilterRenderer $shiftsFilterRenderer, Shift
$selected_tab = count($tabs) - 1;
}
return page_with_title(glyph('map-marker') . $room->name, [
return page_with_title(icon('geo-alt') . $room->name, [
$assignNotice,
$description,
auth()->can('admin_rooms') ? buttons([
@ -78,8 +78,8 @@ function Room_view(Room $room, ShiftsFilterRenderer $shiftsFilterRenderer, Shift
function Room_name_render(Room $room)
{
if (auth()->can('view_rooms')) {
return '<a href="' . room_link($room) . '">' . glyph('map-marker') . $room->name . '</a>';
return '<a href="' . room_link($room) . '">' . icon('geo-alt') . $room->name . '</a>';
}
return glyph('map-marker') . $room->name;
return icon('geo-alt') . $room->name;
}

@ -204,8 +204,13 @@ class ShiftCalendarRenderer
$rendered_until += ShiftCalendarRenderer::SECONDS_PER_ROW;
}
$bg = '';
if (theme_type() === 'light') {
$bg = 'bg-light';
}
return div('lane', [
div('header', $lane->getHeader()),
div('header ' . $bg, $lane->getHeader()),
$html
]);
}
@ -244,8 +249,13 @@ class ShiftCalendarRenderer
*/
private function renderTimeLane()
{
$bg = '';
if (theme_type() === 'light') {
$bg = 'bg-light';
}
$time_slot = [
div('header', [
div('header ' . $bg, [
__('Time')
])
];
@ -311,12 +321,12 @@ class ShiftCalendarRenderer
*/
private function renderLegend()
{
return div('legend', [
label(__('Your shift'), 'primary'),
label(__('Help needed'), 'danger'),
label(__('Other angeltype needed / collides with my shifts'), 'warning'),
label(__('Shift is full'), 'success'),
label(__('Shift running/ended or user not arrived/allowed'), 'default')
return div('legend mt-3', [
badge(__('Your shift'), 'primary'),
badge(__('Help needed'), 'danger'),
badge(__('Other angeltype needed / collides with my shifts'), 'warning'),
badge(__('Shift is full'), 'success'),
badge(__('Shift running/ended or user not arrived/allowed'), 'secondary')
]);
}
}

@ -5,6 +5,9 @@ namespace Engelsystem;
use Engelsystem\Models\Room;
use Engelsystem\Models\User\User;
use function config;
use function theme_type;
/**
* Renders a single shift for the shift calendar
*/
@ -23,7 +26,7 @@ class ShiftCalendarShiftRenderer
{
$info_text = '';
if ($shift['title'] != '') {
$info_text = glyph('info-sign') . $shift['title'] . '<br>';
$info_text = icon('info-circle') . $shift['title'] . '<br>';
}
list($shift_signup_state, $shifts_row) = $this->renderShiftNeededAngeltypes(
$shift,
@ -48,10 +51,10 @@ class ShiftCalendarShiftRenderer
. ($blocks * ShiftCalendarRenderer::BLOCK_HEIGHT - ShiftCalendarRenderer::MARGIN)
. 'px;',
div(
'shift panel panel-' . $class,
'shift card bg-' . $class,
[
$this->renderShiftHead($shift, $class, $shift_signup_state->getFreeEntries()),
div('panel-body', [
div('card-body ' . $this->classBg(), [
$info_text,
Room_name_render($room)
]),
@ -79,7 +82,7 @@ class ShiftCalendarShiftRenderer
case ShiftSignupState::NOT_ARRIVED:
case ShiftSignupState::NOT_YET:
case ShiftSignupState::SHIFT_ENDED:
return 'default';
return 'light';
case ShiftSignupState::ANGELTYPE:
case ShiftSignupState::COLLIDES:
@ -88,7 +91,7 @@ class ShiftCalendarShiftRenderer
case ShiftSignupState::FREE:
return 'danger';
default:
return '';
return 'secondary';
}
}
@ -133,17 +136,17 @@ class ShiftCalendarShiftRenderer
}
if (auth()->can('user_shifts_admin')) {
$html .= '<li class="list-group-item">';
$html .= '<li class="list-group-item d-flex align-items-center ' . $this->classBg() . '">';
$html .= button(shift_entry_create_link_admin($shift),
glyph('plus') . __('Add more angels'),
'btn-xs'
icon('plus-lg') . __('Add more angels'),
'btn-sm'
);
$html .= '</li>';
}
if ($html != '') {
return [
$shift_signup_state,
'<ul class="list-group">' . $html . '</ul>'
'<ul class="list-group list-group-flush">' . $html . '</ul>'
];
}
@ -167,8 +170,8 @@ class ShiftCalendarShiftRenderer
{
$entry_list = [];
foreach ($shift_entries as $entry) {
$style = $entry['freeloaded'] ? ' text-decoration: line-through;' : '';
$entry_list[] = '<span style="' . $style . '">' . User_Nick_render($entry) . '</span>';
$class = $entry['freeloaded'] ? 'text-decoration-line-through' : '';
$entry_list[] = '<span class="text-nowrap ' . $class . '">' . User_Nick_render($entry) . '</span>';
}
$shift_signup_state = Shift_signup_allowed(
$user,
@ -186,14 +189,14 @@ class ShiftCalendarShiftRenderer
case ShiftSignupState::ADMIN:
case ShiftSignupState::FREE:
// When admin or free display a link + button for sign up
$entry_list[] = '<a href="'
$entry_list[] = '<a class="me-1 text-nowrap" href="'
. shift_entry_create_link($shift, $angeltype)
. '">'
. $inner_text
. '</a> '
. button(
shift_entry_create_link($shift, $angeltype),
__('Sign up'), 'btn-xs btn-primary hidden-print'
__('Sign up'), 'btn-sm btn-primary text-nowrap d-print-none'
);
break;
@ -214,7 +217,7 @@ class ShiftCalendarShiftRenderer
case ShiftSignupState::ANGELTYPE:
if ($angeltype['restricted'] == 1) {
// User has to be confirmed on the angeltype first
$entry_list[] = $inner_text . glyph('book');
$entry_list[] = $inner_text . icon('book');
} else {
// Add link to join the angeltype first
$entry_list[] = $inner_text . '<br />'
@ -224,7 +227,7 @@ class ShiftCalendarShiftRenderer
['action' => 'add', 'angeltype_id' => $angeltype['id']]
),
sprintf(__('Become %s'), $angeltype['name']),
'btn-xs'
'btn-sm'
);
}
break;
@ -240,8 +243,8 @@ class ShiftCalendarShiftRenderer
break;
}
$shifts_row = '<li class="list-group-item">';
$shifts_row .= '<strong>' . AngelType_name_render($angeltype) . ':</strong> ';
$shifts_row = '<li class="list-group-item d-flex flex-wrap align-items-center ' . $this->classBg() . '">';
$shifts_row .= '<strong class="me-1">' . AngelType_name_render($angeltype) . ':</strong> ';
$shifts_row .= join(', ', $entry_list);
$shifts_row .= '</li>';
return [
@ -250,6 +253,20 @@ class ShiftCalendarShiftRenderer
];
}
/**
* Return the corresponding bg class
*
* @return string
*/
private function classBg(): string
{
if (theme_type() === 'light') {
return 'bg-white';
}
return 'bg-dark';
}
/**
* Renders the shift header
*
@ -261,16 +278,16 @@ class ShiftCalendarShiftRenderer
{
$header_buttons = '';
if (auth()->can('admin_shifts')) {
$header_buttons = '<div class="pull-right hidden-print">' . table_buttons([
$header_buttons = '<div class="ms-auto d-print-none">' . table_buttons([
button(
page_link_to('user_shifts', ['edit_shift' => $shift['SID']]),
glyph('edit'),
"btn-$class btn-xs"
icon('pencil'),
"btn-$class btn-sm border-light"
),
button(
page_link_to('user_shifts', ['delete_shift' => $shift['SID']]),
glyph('trash'),
"btn-$class btn-xs"
icon('trash'),
"btn-$class btn-sm border-light"
)
]) . '</div>';
}
@ -278,12 +295,12 @@ class ShiftCalendarShiftRenderer
. date('H:i', $shift['end']) . ' &mdash; '
. $shift['name'];
if($needed_angeltypes_count > 0) {
$shift_heading = '<span class="badge">' . $needed_angeltypes_count . '</span> ' . $shift_heading;
if ($needed_angeltypes_count > 0) {
$shift_heading = '<span class="badge bg-light text-danger me-1">' . $needed_angeltypes_count . '</span> ' . $shift_heading;
}
return div('panel-heading', [
'<a href="' . shift_link($shift) . '">' . $shift_heading . '</a>',
return div('card-header d-flex align-items-center', [
'<a class="d-flex align-items-center text-white" href="' . shift_link($shift) . '">' . $shift_heading . '</a>',
$header_buttons
]);
}

@ -25,8 +25,8 @@ function ShiftEntry_delete_view_admin($shift, $angeltype, $signoff_user)
), true),
form([
buttons([
button(user_link($signoff_user->id), glyph('remove') . __('cancel')),
form_submit('delete', glyph('ok') . __('delete'), 'btn-danger', false)
button(user_link($signoff_user->id), icon('x-lg') . __('cancel')),
form_submit('delete', icon('trash') . __('delete'), 'btn-danger', false)
]),
]),
]);
@ -54,8 +54,8 @@ function ShiftEntry_delete_view($shift, $angeltype, $signoff_user_id)
form([
buttons([
button(user_link($signoff_user_id), glyph('remove') . __('cancel')),
form_submit('delete', glyph('ok') . __('delete'), 'btn-danger', false),
button(user_link($signoff_user_id), icon('x-lg') . __('cancel')),
form_submit('delete', icon('trash') . __('delete'), 'btn-danger', false),
]),
]),
]);
@ -91,7 +91,7 @@ function ShiftEntry_create_view_admin($shift, Room $room, $angeltype, $angeltype
form([
form_select('angeltype_id', __('Angeltype'), $angeltypes_select, $angeltype['id']),
form_select('user_id', __('User'), $users_select, $signup_user->id),
form_submit('submit', glyph('ok') . __('Save'))
form_submit('submit', icon('check-lg') . __('Save'))
])
]);
}
@ -116,7 +116,7 @@ function ShiftEntry_create_view_supporter($shift, Room $room, $angeltype, $signu
AngelType_name_render($angeltype)), true),
form([
form_select('user_id', __('User'), $users_select, $signup_user->id),
form_submit('submit', glyph('ok') . __('Save'))
form_submit('submit', icon('check-lg') . __('Save'))
])
]);
}
@ -139,7 +139,7 @@ function ShiftEntry_create_view_user($shift, Room $room, $angeltype, $comment)
info(sprintf(__('Do you want to sign up for this shift as %s?'), AngelType_name_render($angeltype)), true),
form([
form_textarea('comment', __('Comment (for your eyes only):'), $comment),
form_submit('submit', glyph('ok') . __('Save'))
form_submit('submit', icon('check-lg') . __('Save'))
])
]);
}

@ -22,10 +22,10 @@ function ShiftType_delete_view($shifttype)
info(sprintf(__('Do you want to delete shifttype %s?'), $shifttype['name']), true),
form([
buttons([
button(page_link_to('shifttypes'), glyph('remove') . __('cancel')),
button(page_link_to('shifttypes'), icon('x-lg') . __('cancel')),
form_submit(
'delete',
glyph('ok') . __('delete'),
icon('trash') . __('delete'),
'btn-danger',
false
),
@ -121,12 +121,12 @@ function ShiftTypes_list_view($shifttypes)
['action' => 'edit', 'shifttype_id' => $shifttype['id']]
),
__('edit'),
'btn-xs'
'btn-sm'
),
button(
page_link_to('shifttypes', ['action' => 'delete', 'shifttype_id' => $shifttype['id']]),
__('delete'),
'btn-xs'
'btn-sm'
)
]);
}

@ -58,13 +58,13 @@ class ShiftsFilterRenderer
if ($dashboardFilter) {
$toolbar[] = sprintf(
'<li role="presentation"><a href="%s">%s</a></li>',
'<li role="presentation"><a class="nav-link" href="%s">%s</a></li>',
url('/public-dashboard', ['filtered' => true] + $dashboardFilter),
glyph('dashboard') . __('Dashboard')
icon('speedometer2') . __('Dashboard')
);
}
}
return div('form-group', [
return div('mb-3', [
toolbar_pills($toolbar)
]);
}

@ -26,17 +26,17 @@ function Shift_view_header($shift, Room $room)
div('col-sm-3 col-xs-6', [
'<h4>' . __('Start') . '</h4>',
'<p class="lead' . (time() >= $shift['start'] ? ' text-success' : '') . '">',
glyph('calendar') . date(__('Y-m-d'), $shift['start']),
icon('calendar3') . date(__('Y-m-d'), $shift['start']),
'<br />',
glyph('time') . date('H:i', $shift['start']),
icon('clock') . date('H:i', $shift['start']),
'</p>'
]),
div('col-sm-3 col-xs-6', [
'<h4>' . __('End') . '</h4>',
'<p class="lead' . (time() >= $shift['end'] ? ' text-success' : '') . '">',
glyph('calendar') . date(__('Y-m-d'), $shift['end']),
icon('calendar3') . date(__('Y-m-d'), $shift['end']),
'<br />',
glyph('time') . date('H:i', $shift['end']),
icon('clock') . date('H:i', $shift['end']),
'</p>'
]),
div('col-sm-3 col-xs-6', [
@ -55,14 +55,14 @@ function Shift_editor_info_render($shift)
$info = [];
if (!empty($shift['created_by_user_id'])) {
$info[] = sprintf(
glyph('plus') . __('created at %s by %s'),
icon('plus-lg') . __('created at %s by %s'),
date('Y-m-d H:i', $shift['created_at_timestamp']),
User_Nick_render(User::find($shift['created_by_user_id']))
);
}
if (!empty($shift['edited_by_user_id'])) {
$info[] = sprintf(
glyph('pencil') . __('edited at %s by %s'),
icon('pencil') . __('edited at %s by %s'),
date('Y-m-d H:i', $shift['edited_at_timestamp']),
User_Nick_render(User::find($shift['edited_by_user_id']))
);
@ -159,10 +159,10 @@ function Shift_view($shift, $shifttype, Room $room, $angeltypes_source, ShiftSig
$buttons = [];
if ($shift_admin || $admin_shifttypes || $admin_rooms) {
$buttons = [
$shift_admin ? button(shift_edit_link($shift), glyph('pencil') . __('edit')) : '',
$shift_admin ? button(shift_delete_link($shift), glyph('trash') . __('delete')) : '',
$shift_admin ? button(shift_edit_link($shift), icon('pencil') . __('edit')) : '',
$shift_admin ? button(shift_delete_link($shift), icon('trash') . __('delete')) : '',
$admin_shifttypes ? button(shifttype_link($shifttype), $shifttype['name']) : '',
$admin_rooms ? button(room_link($room), glyph('map-marker') . $room->name) : '',
$admin_rooms ? button(room_link($room), icon('geo-alt') . $room->name) : '',
];
}
$buttons[] = button(user_link(auth()->user()->id), '<span class="icon-icon_angel"></span> ' . __('My shifts'));
@ -213,7 +213,7 @@ function Shift_view_render_needed_angeltype($needed_angeltype, $angeltypes, $shi
}
$needed_angels .= '<div class="list-group-item">';
$needed_angels .= '<div class="pull-right">' . Shift_signup_button_render($shift, $angeltype) . '</div>';
$needed_angels .= '<div class="float-end m-3">' . Shift_signup_button_render($shift, $angeltype) . '</div>';
$needed_angels .= '<h3>' . AngelType_name_render($angeltype) . '</h3>';
$bar_max = max($needed_angeltype['count'] * 10, $needed_angeltype['taken'] * 10, 10);
@ -253,15 +253,15 @@ function Shift_view_render_shift_entry($shift_entry, $user_shift_admin, $angelty
}
$isUser = $shift_entry['UID'] == auth()->user()->id;
if ($user_shift_admin || $angeltype_supporter || $isUser) {
$entry .= ' <div class="btn-group">';
$entry .= ' <div class="btn-group m-1">';
if ($user_shift_admin || $isUser) {
$entry .= button_glyph(
$entry .= button_icon(
page_link_to('user_myshifts', ['edit' => $shift_entry['id'], 'id' => $shift_entry['UID']]),
'pencil',
'btn-xs'
'btn-sm'
);
}
$entry .= button_glyph(shift_entry_delete_link($shift_entry), 'trash', 'btn-xs');
$entry .= button_icon(shift_entry_delete_link($shift_entry), 'trash', 'btn-sm');
$entry .= '</div>';
}
return $entry;

@ -24,9 +24,9 @@ function UserAngelType_update_view($user_angeltype, $user, $angeltype, $supporte
buttons([
button(
page_link_to('angeltypes', ['action' => 'view', 'angeltype_id' => $angeltype['id']]),
glyph('remove') . __('cancel')
icon('x-lg') . __('cancel')
),
form_submit('submit', glyph('ok') . __('yes'), 'btn-primary', false),
form_submit('submit', icon('check-lg') . __('yes'), 'btn-primary', false),
]),
], page_link_to('user_angeltypes', [
'action' => 'update',
@ -52,9 +52,9 @@ function UserAngelTypes_delete_all_view($angeltype)
'angeltypes',
['action' => 'view', 'angeltype_id' => $angeltype['id']]
),
glyph('remove') . __('cancel')
icon('x-lg') . __('cancel')
),
form_submit('deny_all', glyph('ok') . __('yes'), 'btn-primary', false)
form_submit('deny_all', icon('check-lg') . __('yes'), 'btn-primary', false)
]),
], page_link_to('user_angeltypes', ['action' => 'delete_all', 'angeltype_id' => $angeltype['id']])),
]);
@ -71,8 +71,8 @@ function UserAngelTypes_confirm_all_view($angeltype)
info(sprintf(__('Do you really want to confirm all users for %s?'), $angeltype['name']), true),
form([
buttons([
button(angeltype_link($angeltype['id']), glyph('remove') . __('cancel')),
form_submit('confirm_all', glyph('ok') . __('yes'), 'btn-primary', false),
button(angeltype_link($angeltype['id']), icon('x-lg') . __('cancel')),
form_submit('confirm_all', icon('check-lg') . __('yes'), 'btn-primary', false),
]),
], page_link_to('user_angeltypes', ['action' => 'confirm_all', 'angeltype_id' => $angeltype['id']])),
]);
@ -95,8 +95,8 @@ function UserAngelType_confirm_view($user_angeltype, $user, $angeltype)
), true),
form([
buttons([
button(angeltype_link($angeltype['id']), glyph('remove') . __('cancel')),
form_submit('confirm_user', glyph('ok') . __('yes'), 'btn-primary', false),
button(angeltype_link($angeltype['id']), icon('x-lg') . __('cancel')),
form_submit('confirm_user', icon('check-lg') . __('yes'), 'btn-primary', false),
]),
], page_link_to('user_angeltypes', ['action' => 'confirm', 'user_angeltype_id' => $user_angeltype['id']])),
]);
@ -119,8 +119,8 @@ function UserAngelType_delete_view($user_angeltype, $user, $angeltype)
), true),
form([
buttons([
button(angeltype_link($angeltype['id']), glyph('remove') . __('cancel')),
form_submit('delete', glyph('ok') . __('yes'), 'btn-primary', false),
button(angeltype_link($angeltype['id']), icon('x-lg') . __('cancel')),
form_submit('delete', icon('check-lg') . __('yes'), 'btn-primary', false),
]),
], page_link_to('user_angeltypes', ['action' => 'delete', 'user_angeltype_id' => $user_angeltype['id']])),
], true);
@ -172,8 +172,8 @@ function UserAngelType_join_view($user, $angeltype)
), true),
form([
buttons([
button(angeltype_link($angeltype['id']), glyph('remove') . __('cancel')),
form_submit('submit', glyph('ok') . __('save'), 'btn-primary', false)
button(angeltype_link($angeltype['id']), icon('x-lg') . __('cancel')),
form_submit('submit', icon('check-lg') . __('save'), 'btn-primary', false)
]),
], page_link_to(
'user_angeltypes',

@ -20,8 +20,7 @@ function UserDriverLicense_edit_view($user_source, $wants_to_drive, $user_driver
form([
form_info(__('Privacy'), __('Your driving license information is only visible for supporters and admins.')),
form_checkbox('wants_to_drive', __('I am willing to drive a car for the event'), $wants_to_drive),
div('panel panel-default', [
div('panel-body', [
div('m-3', [
form_checkbox(
'has_car',
__('I have my own car with me and am willing to use it for the event (You\'ll get reimbursed for fuel)'),
@ -49,7 +48,6 @@ function UserDriverLicense_edit_view($user_source, $wants_to_drive, $user_driver
__('Forklift'),
$user_driver_license['has_license_forklift']
)
])
], 'driving_license'),
form_submit('submit', __('Save'))
]),

@ -18,10 +18,10 @@ class UserHintsRenderer
{
if (count($this->hints) > 0) {
$hint_class = $this->important ? 'danger' : 'info';
$glyphicon = $this->important ? 'warning-sign' : 'info-sign';
$icon = $this->important ? 'exclamation-triangle' : 'info-circle';
return toolbar_popover(
$glyphicon . ' text-' . $hint_class, '', $this->hints, 'bg-' . $hint_class
$icon . ' text-white', '', $this->hints, 'bg-' . $hint_class
);
}

@ -18,8 +18,8 @@ function UserWorkLog_delete_view(User $user)
), true),
form([
buttons([
button(user_link($user->id), glyph('remove') . __('cancel')),
form_submit('submit', glyph('ok') . __('delete'), 'btn-danger', false),
button(user_link($user->id), icon('x-lg') . __('cancel')),
form_submit('submit', icon('check-lg') . __('delete'), 'btn-danger', false),
]),
]),
]);

@ -140,7 +140,7 @@ function User_delete_view($user)
return page_with_title(sprintf(__('Delete %s'), User_Nick_render($user)), [
msg(),
buttons([
button(user_edit_link($user->id), glyph('chevron-left') . __('back'))
button(user_edit_link($user->id), icon('chevron-left') . __('back'))
]),
error(
__('Do you really want to delete the user including all his shifts and every other piece of his data?'),
@ -164,7 +164,7 @@ function User_edit_vouchers_view($user)
return page_with_title(sprintf(__('%s\'s vouchers'), User_Nick_render($user)), [
msg(),
buttons([
button(user_link($user->id), glyph('chevron-left') . __('back'))
button(user_link($user->id), icon('chevron-left') . __('back'))
]),
info(sprintf(
__('Angel should receive at least %d vouchers.'),
@ -208,12 +208,12 @@ function Users_view(
$u['first_name'] = $user->personalData->first_name;
$u['last_name'] = $user->personalData->last_name;
$u['dect'] = sprintf('<a href="tel:%s">%1$s</a>', $user->contact->dect);
$u['arrived'] = glyph_bool($user->state->arrived);
$u['arrived'] = icon_bool($user->state->arrived);
$u['got_voucher'] = $user->state->got_voucher;
$u['freeloads'] = $user->getAttribute('freeloads');
$u['active'] = glyph_bool($user->state->active);
$u['force_active'] = glyph_bool($user->state->force_active);
$u['got_shirt'] = glyph_bool($user->state->got_shirt);
$u['active'] = icon_bool($user->state->active);
$u['force_active'] = icon_bool($user->state->force_active);
$u['got_shirt'] = icon_bool($user->state->got_shirt);
$u['shirt_size'] = $user->personalData->shirt_size;
$u['arrival_date'] = $user->personalData->planned_arrival_date
? $user->personalData->planned_arrival_date->format(__('Y-m-d')) : '';
@ -221,7 +221,7 @@ function Users_view(
? $user->personalData->planned_departure_date->format(__('Y-m-d')) : '';
$u['last_login_at'] = $user->last_login_at ? $user->last_login_at->format(__('m/d/Y h:i a')) : '';
$u['actions'] = table_buttons([
button_glyph(page_link_to('admin_user', ['id' => $user->id]), 'edit', 'btn-xs')
button_icon(page_link_to('admin_user', ['id' => $user->id]), 'pencil-square', 'btn-sm')
]);
$usersList[] = $u;
}
@ -269,7 +269,7 @@ function Users_view(
return page_with_title(__('All users'), [
msg(),
buttons([
button(page_link_to('register'), glyph('plus') . __('New user'))
button(page_link_to('register'), icon('plus-lg') . __('New user'))
]),
table($user_table_headers, $usersList)
]);
@ -390,9 +390,9 @@ function User_view_myshift($shift, $user_source, $its_me)
}
$myshift = [
'date' => glyph('calendar')
'date' => icon('calendar3')
. date('Y-m-d', $shift['start']) . '<br>'
. glyph('time') . date('H:i', $shift['start'])
. icon('clock') . date('H:i', $shift['start'])
. ' - '
. date('H:i', $shift['end']),
'duration' => sprintf('%.2f', ($shift['end'] - $shift['start']) / 3600) . '&nbsp;h',
@ -418,20 +418,20 @@ function User_view_myshift($shift, $user_source, $its_me)
}
$myshift['actions'] = [
button(shift_link($shift), glyph('eye-open') . __('view'), 'btn-xs')
button(shift_link($shift), icon('eye') . __('view'), 'btn-sm')
];
if ($its_me || auth()->can('user_shifts_admin')) {
$myshift['actions'][] = button(
page_link_to('user_myshifts', ['edit' => $shift['id'], 'id' => $user_source->id]),
glyph('edit') . __('edit'),
'btn-xs'
icon('pencil-square') . __('edit'),
'btn-sm'
);
}
if (Shift_signout_allowed($shift, ['id' => $shift['TID']], $user_source->id)) {
$myshift['actions'][] = button(
shift_entry_delete_link($shift),
glyph('trash') . __('sign off'),
'btn-xs'
icon('trash') . __('sign off'),
'btn-sm'
);
}
$myshift['actions'] = table_buttons($myshift['actions']);
@ -518,19 +518,19 @@ function User_view_worklog(Worklog $worklog, $admin_user_worklog_privilege)
$actions = table_buttons([
button(
user_worklog_edit_link($worklog),
glyph('edit') . __('edit'),
'btn-xs'
icon('pencil-square') . __('edit'),
'btn-sm'
),
button(
user_worklog_delete_link($worklog),
glyph('trash') . __('delete'),
'btn-xs'
icon('trash') . __('delete'),
'btn-sm'
)
]);
}
return [
'date' => glyph('calendar') . date('Y-m-d', $worklog->worked_at->timestamp),
'date' => icon('calendar3') . date('Y-m-d', $worklog->worked_at->timestamp),
'duration' => sprintf('%.2f', $worklog->hours) . ' h',
'room' => '',
'shift_info' => __('Work log entry'),
@ -615,45 +615,45 @@ function User_view(
. (config('enable_user_name') ? ' <small>' . $user_name . '</small>' : ''),
[
msg(),
div('row space-top', [
div('row m-3', [
div('col-md-12', [
buttons([
$admin_user_privilege ? button(
page_link_to('admin_user', ['id' => $user_source->id]),
glyph('edit') . __('edit')
icon('pencil-square') . __('edit')
) : '',
$admin_user_privilege ? button(
user_driver_license_edit_link($user_source),
glyph('road') . __('driving license')
icon('wallet2') . __('driving license')
) : '',
(($admin_user_privilege || $auth->can('admin_arrive')) && !$user_source->state->arrived) ?
form([
form_hidden('action', 'arrived'),
form_hidden('user', $user_source->id),
form_submit('submit', __('arrived'), '', false, 'default')
form_submit('submit', __('arrived'), '', false, 'primary')
], page_link_to('admin_arrive'), true) : '',
$admin_user_privilege ? button(
page_link_to(
'users',
['action' => 'edit_vouchers', 'user_id' => $user_source->id]
),
glyph('cutlery') . __('Edit vouchers')
icon('file-binary-fill') . __('Edit vouchers')
) : '',
$admin_user_worklog_privilege ? button(
user_worklog_add_link($user_source),
glyph('list') . __('Add work log')
icon('list') . __('Add work log')
) : '',
$its_me ? button(
page_link_to('user_settings'),
glyph('list-alt') . __('Settings')
icon('gear') . __('Settings')
) : '',
($its_me && $auth->can('ical')) ? button(
page_link_to('ical', ['key' => $user_source->api_key]),
glyph('calendar') . __('iCal Export')
icon('calendar3') . __('iCal Export')
) : '',
($its_me && $auth->can('shifts_json_export')) ? button(
page_link_to('shifts_json_export', ['key' => $user_source->api_key]),
glyph('export') . __('JSON Export')
icon('box-arrow-up-right') . __('JSON Export')
) : '',
($its_me && (
$auth->can('shifts_json_export')
@ -661,14 +661,14 @@ function User_view(
|| $auth->can('atom')
)) ? button(
page_link_to('user_myshifts', ['reset' => 1]),
glyph('repeat') . __('Reset API key')
icon('arrow-repeat') . __('Reset API key')
) : ''
])
])
]),
div('row', [
div('col-md-2', [
heading(glyph('phone')
heading(icon('phone')
. '<a href="tel:' . $user_source->contact->dect . '">'
. $user_source->contact->dect, 1)
. '</a>'
@ -681,7 +681,7 @@ function User_view(
($its_me || $admin_user_privilege) ? '<h2>' . __('Shifts') . '</h2>' : '',
$myshifts_table,
($its_me && $nightShiftsConfig['enabled']) ? info(
glyph('info-sign') . sprintf(
icon('info-circle') . sprintf(
__('Your night shifts between %d and %d am count twice.'),
$nightShiftsConfig['start'],
$nightShiftsConfig['end']
@ -734,7 +734,7 @@ function User_view_state_user($user_source)
];
if ($user_source->state->arrived) {
$state[] = '<span class="text-success">' . glyph('home') . __('Arrived') . '</span>';
$state[] = '<span class="text-success">' . icon('house') . __('Arrived') . '</span>';
} else {
$state[] = '<span class="text-danger">' . __('Not arrived') . '</span>';
}
@ -755,13 +755,13 @@ function User_view_state_admin($freeloader, $user_source)
$state = [];
if ($freeloader) {
$state[] = '<span class="text-danger">' . glyph('exclamation-sign') . __('Freeloader') . '</span>';
$state[] = '<span class="text-danger">' . icon('exclamation-circle') . __('Freeloader') . '</span>';
}
$state[] = User_shift_state_render($user_source);
if ($user_source->state->arrived) {
$state[] = '<span class="text-success">' . glyph('home')
$state[] = '<span class="text-success">' . icon('house')
. sprintf(
__('Arrived at %s'),
$user_source->state->arrival_date ? $user_source->state->arrival_date->format('Y-m-d') : ''
@ -791,7 +791,7 @@ function User_view_state_admin($freeloader, $user_source)
$availableCount = max($voucherCount, $availableCount);
if ($user_source->state->got_voucher > 0) {
$state[] = '<span class="text-success">'
. glyph('cutlery')
. icon('file-binary-fill')
. __('Got %s of %s vouchers', [$voucherCount, $availableCount])
. '</span>';
} else {
@ -817,7 +817,7 @@ function User_angeltypes_render($user_angeltypes)
$class = 'text-warning';
}
$output[] = '<a href="' . angeltype_link($angeltype['id']) . '" class="' . $class . '">'
. ($angeltype['supporter'] ? glyph('education') : '') . $angeltype['name']
. ($angeltype['supporter'] ? icon('patch-check') : '') . $angeltype['name']
. '</a>';
}
return div('col-md-2', [
@ -934,7 +934,7 @@ function render_user_departure_date_hint()
{
if (config('enable_planned_arrival') && !auth()->user()->personalData->planned_departure_date) {
$text = __('Please enter your planned date of departure on your settings page to give us a feeling for teardown capacities.');
return render_profile_link($text, null, 'alert-link');
return render_profile_link($text, null, 'text-danger');
}
return null;
@ -980,7 +980,7 @@ function render_user_tshirt_hint()
{
if (config('enable_tshirt_size') && !auth()->user()->personalData->shirt_size) {
$text = __('You need to specify a tshirt size in your settings!');
return render_profile_link($text, null, 'alert-link');
return render_profile_link($text, null, 'text-danger');
}
return null;
@ -994,7 +994,7 @@ function render_user_dect_hint()
$user = auth()->user();
if ($user->state->arrived && config('enable_dect') && !$user->contact->dect) {
$text = __('You need to specify a DECT phone number in your settings! If you don\'t have a DECT phone, just enter \'-\'.');
return render_profile_link($text, null, 'alert-link');
return render_profile_link($text, null, 'text-danger');
}
return null;

@ -6,44 +6,42 @@
"author": "https://github.com/engelsystem/engelsystem/contributors",
"license": "GPL-2.0-or-later",
"scripts": {
"build": "NODE_ENV=production run-s build:clean build:webpack",
"build": "(export NODE_ENV=production && yarn build:clean && yarn build:webpack)",
"build:clean": "rimraf public/assets",
"build:webpack": "webpack",
"build:watch": "webpack --watch"
},
"dependencies": {
"bootstrap": "^3",
"@popperjs/core": "^2.9.2",
"bootstrap": "^5.1.0",
"chart.js": "^2.9.3",
"core-js": "^3.6.5",
"eonasdan-bootstrap-datetimepicker": "^4.17.47",
"jquery": "^3.5.1",
"jquery-ui": "^1.11.2",
"moment": "^2.27.0",
"moment-timezone": "^0.5.31",
"select2": "^4.0.13",
"select2-bootstrap-theme": "0.1.0-beta.10"
"select2-bootstrap-5-theme": "^1.1.1",
"tempusdominus-bootstrap-4": "^5.39.0"
},
"devDependencies": {
"@babel/core": "^7.11.5",
"@babel/preset-env": "^7.11.5",
"autoprefixer": "^10.2.5",
"babel-loader": "^8.1.0",
"css-loader": "^5.2.5",
"css-minimizer-webpack-plugin": "^3.0.0",
"bootstrap-icons": "^1.4.1",
"css-loader": "^5.2.2",
"css-minimizer-webpack-plugin": "^2.0.0",
"file-loader": "^6.1.0",
"less": "^4.1.1",
"less-loader": "^9.0.0",
"mini-css-extract-plugin": "^1.6.0",
"mkdirp": "^1.0.4",
"npm-run-all": "^4.1.3",
"postcss": "^8.3.0",
"postcss-loader": "^5.3.0",
"postcss": "^8.2.8",
"postcss-loader": "^5.2.0",
"rimraf": "^3.0.2",
"sass": "^1.35.1",
"sass-loader": "^12.0.0",
"style-loader": "^2.0.0",
"terser-webpack-plugin": "^5.1.2",
"webpack": "^5.37.1",
"webpack-cli": "^4.7.0"
},
"resolutions": {
"moment-timezone": "^0.5"
"terser-webpack-plugin": "^5.1.1",
"webpack": "^5.33.2",
"webpack-cli": "^4.6.0"
}
}

@ -108,7 +108,13 @@ $(function () {
maxDate: '',
locale: $('html').attr('lang'),
format: element.format,
widgetPositioning: {horizontal: 'auto', vertical: 'bottom'}
widgetPositioning: {horizontal: 'auto', vertical: 'bottom'},
icons: {
time: 'bi bi-clock',
date: 'bi bi-calendar',
up: 'bi bi-arrow-up',
down: 'bi bi-arrow-down'
}
};
$.extend(opts, elem.data());
if (opts.minDate.length === 0) {
@ -120,13 +126,19 @@ $(function () {
elem.children('input').attr('type', 'text');
elem.children().on('click', function (ev) {
ev.stopImmediatePropagation();
if (typeof elem.data('DateTimePicker') === 'undefined') {
if (typeof elem.data('datetimepicker') === 'undefined') {
elem.datetimepicker(opts);
elem.data('DateTimePicker').show();
elem.data('datetimepicker').show();
// close on click anywhere outside
$(document).on('click', () => {
elem.data('datetimepicker').hide()
})
} else {
elem.data('DateTimePicker').toggle();
elem.data('datetimepicker').toggle();
}
});
});
});
});
@ -140,19 +152,29 @@ $(function () {
var opts = {
locale: $('html').attr('lang'),
format: 'HH:mm',
widgetPositioning: {horizontal: 'auto', vertical: 'bottom'}
widgetPositioning: {horizontal: 'auto', vertical: 'bottom'},
icons: {
up: 'bi bi-arrow-up',
down: 'bi bi-arrow-down'
}
};
$.extend(opts, elem.data());
elem.children('input').attr('type', 'text');
elem.children('input').on('click', function (ev) {
ev.stopImmediatePropagation();
if (typeof elem.data('DateTimePicker') === 'undefined') {
if (typeof elem.data('datetimepicker') === 'undefined') {
elem.datetimepicker(opts);
elem.data('DateTimePicker').show();
elem.data('datetimepicker').show();
// close on click anywhere outside
$(document).on('click', () => {
elem.data('datetimepicker').hide()
})
} else {
elem.data('DateTimePicker').toggle();
elem.data('datetimepicker').toggle();
}
});
});
});
@ -177,24 +199,21 @@ $(function () {
});
});
/**
* Enable select2
*/
$(function () {
$.fn.select2.defaults.set('theme', 'bootstrap');
$('select').select2();
});
$('select').select2({
theme: 'bootstrap-5',
});
})
/**
* Show oauth buttons on welcome title click
*/
$(function () {
$('#welcome-title').on('click', function () {
$('.form-group.btn-group .btn.hidden').removeClass('hidden');
$('.btn-group.btn-group .btn.d-none').removeClass('d-none');
});
$('#oauth-settings-title').on('click', function () {
$('table tr.hidden').removeClass('hidden');
$('table tr.d-none').removeClass('d-none');
});
});
@ -209,7 +228,7 @@ window.addEventListener('DOMContentLoaded', () => {
return;
}
filter.classList.remove('in');
filter.classList.remove('show');
});
$(() => {
if (typeof (localStorage) === 'undefined') {

@ -1,13 +0,0 @@
;(function($, window, document, undefined) {
'use strict';
$(document).ready(function () {
$('[data-toggle="offcanvas"]').click(function () {
var button = $(this);
button.toggleClass('is-open')
$(button.attr('data-target')).toggleClass('in');
});
});
}(jQuery, window, window.document));

@ -1,12 +1,11 @@
require('core-js/stable');
window.$ = window.jQuery = require('jquery');
require('jquery-ui');
require('bootstrap');
window.bootstrap = require('bootstrap');
window.moment = require('moment');
require('moment/locale/de');
require('eonasdan-bootstrap-datetimepicker');
require('tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4');
require('chart.js');
require('./offcanvas');
require('./forms');
require('./sticky-headers');
require('./moment-countdown');

@ -1,20 +1,55 @@
@import "../../../node_modules/bootstrap/less/bootstrap";
@import "../../../node_modules/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css";
@import "../../../node_modules/select2/dist/css/select2.min.css";
@import "../../../node_modules/select2-bootstrap-theme/src/select2-bootstrap.less";
// Basic variables
@use "sass:map";
// select 2 variables
$link-decoration: none !default;
$link-hover-decoration: underline !default;
$nav-tabs-link-active-color: #fff !default;
$nav-tabs-link-active-bg: $primary !default;
$nav-tabs-link-active-border-color: none !default;
// Imports
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
$custom-colors: (
black: #000
);
$theme-colors: map-merge($theme-colors, $custom-colors);
@import "~bootstrap/scss/bootstrap";
@import "~bootstrap-icons/font/bootstrap-icons.css";
@import "~tempusdominus-bootstrap-4/build/css/tempusdominus-bootstrap-4";
@import "~select2/src/scss/core";
@import "~select2-bootstrap-5-theme/src/include-all";
@import "error";
// temporary bg-body fix (remove once Bootstrap 5.1.1 has been released)
.bg-body {
--bs-bg-opacity: 1;
background-color: $body-bg !important;
}
$navbar-height: 3.125rem;
body {
padding-top: 50px;
padding-top: 70px;
}
.footer a {
color: @text-muted;
color: $text-muted;
}
.first {
clear: both;
margin-top: 30px;
.text-inherit {
color: inherit;
&:hover {
color: inherit;
}
}
.text-big {
@ -25,7 +60,7 @@ body {
}
.icon-icon_angel {
background-color: @text-color;
background-color: $body-color;
display: inline-block;
width: 1em;
@ -35,29 +70,50 @@ body {
mask-size: cover;
}
.text-light .icon-icon_angel {
background-color: map.get($theme-colors, "light");
}
.dark .icon-icon_angel {
background-color: map.get($theme-colors, "dark");
}
a .icon-icon_angel {
background-color: @link-color;
background-color: $link-color;
}
.navbar .icon-icon_angel {
background-color: @navbar-default-link-disabled-color;
background-color: $nav-link-disabled-color;
}
.navbar-brand .icon-icon_angel {
background-color: @navbar-default-brand-color;
background-color: $body-color;
}
.nav-item--userhints {
margin: -$navbar-padding-y 0;
}
.popover--userhints .alert:last-of-type {
margin-bottom: 0;
}
table a > .icon-icon_angel {
background-color: @text-color;
background-color: $body-color;
}
.table .form-group {
margin-bottom: 0;
}
.input-group.datetime,
.input-group.time {
.bootstrap-datetimepicker-widget {
inset: 42px auto auto 0 !important;
}
}
.stats {
.make-md-column(3);
.make-xs-column(6);
font-size: 20px;
height: 150px;
text-align: center;
@ -67,7 +123,7 @@ table a > .icon-icon_angel {
font-weight: 200;
}
@media (max-width: @screen-md) {
@media (max-width: map-get($grid-breakpoints, 'md')) {
font-size: inherit;
.number {
font-size: 40px;
@ -77,23 +133,23 @@ table a > .icon-icon_angel {
.stats-danger {
color: @brand-danger;
color: map-get($theme-colors, 'danger');
}
.stats-warning {
color: @brand-warning;
color: map-get($theme-colors, 'warning');
}
.stats-success {
color: @brand-success;
color: map-get($theme-colors, 'success');
}
.dashboard-panel {
.dashboard-card {
position: relative;
font-size: 20px;
color: @headings-color;
color: $headings-color;
.panel-link {
.card-link {
position: absolute;
width: 100%;
height: 100%;
@ -101,48 +157,18 @@ table a > .icon-icon_angel {
left: 0;
text-decoration: none; /* No underlines on the link */
z-index: 10; /* Places the link above everything else in the div */
background-color: @brand-primary; /* Fix to make div clickable in IE */
background-color: $primary; /* Fix to make div clickable in IE */
opacity: 0; /* Fix to make div clickable in IE */
filter: alpha(opacity=1); /* Fix to make div clickable in IE */
}
.panel-link:hover {
.card-link:hover {
opacity: 0.3;
}
}
.panel-primary .panel-heading a {
color: @panel-primary-text;
background-color: @panel-primary-heading-bg;
}
.panel-default .panel-heading a {
color: @panel-default-text;
background-color: @panel-default-heading-bg;
}
.panel-info .panel-heading a {
color: @panel-info-text;
background-color: @panel-info-heading-bg;
}
.panel-success .panel-heading a {
color: @panel-success-text;
background-color: @panel-success-heading-bg;
}
.panel-warning .panel-heading a {
color: @panel-warning-text;
background-color: @panel-warning-heading-bg;
}
.panel-danger .panel-heading a {
color: @panel-danger-text;
background-color: @panel-danger-heading-bg;
}
.select2-dropdown {
background-color: @input-bg;
background-color: $input-bg;
}
.selection .checkbox {
@ -157,39 +183,38 @@ table a > .icon-icon_angel {
width: 100%;
.lane {
background: @table-bg-accent;
background: $table-striped-bg;
flex-grow: 1;
min-width: 280px;
width: 280px;
flex-shrink: 1;
.header {
background: @panel-bg;
border-bottom: 1px solid @table-border-color;
border-bottom: 1px solid $table-border-color;
height: 30px;
padding: 5px 5px 5px 16px;
}
.tick {
height: 30px;
border-top: 1px solid darken(@table-bg-accent, 2%);
border-top: 1px solid darken($table-striped-bg, 2%);
}
.tick.hour {
border-top: 2px solid @table-border-color;
border-top: 2px solid $table-border-color;
font-size: 0.9em;
padding-left: 5px;
}
.tick.day {
border-top: 2px solid @brand-primary;
border-top: 2px solid $primary;
font-size: 0.9em;
padding-left: 5px;
}
}
.lane.time {
border-right: 1px solid @table-border-color;
border-right: 1px solid $table-border-color;
flex-grow: 0;
min-width: 50px;
width: 50px;
@ -213,10 +238,6 @@ table a > .icon-icon_angel {
}
}
.space-top {
margin-top: 15px;
}
.column_duration {
text-align: right;
}
@ -250,22 +271,12 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
overflow-x: inherit;
}
.inline-form-spacing {
margin-bottom: @form-group-margin-bottom;
}
.user-settings .settings-menu ul {
margin-top: @line-height-computed;
}
span.ref-id[id] {
padding-top: 50px;
}
.faq {
.panel-heading h3 {
margin: 0;
.card-header {
small a.ref-link {
display: none;
}
@ -278,6 +289,27 @@ span.ref-id[id] {
}
}
// Cards
.card-body > *:last-child {
margin-bottom: 0;
}
.card-header {
&.bg-dark {
color: map.get($theme-colors, "light");
}
&.bg-light {
color: map.get($theme-colors, "dark");
}
}
// code tag
code {
background-color: $input-disabled-bg;
@include border-radius($input-border-radius);
}
@keyframes pulse {
0% {
transform: rotate(0deg);
@ -327,12 +359,12 @@ span.ref-id[id] {
padding: 2px 6px;
margin-top: 6px;
margin-bottom: 4px;
max-height: @navbar-height;
max-height: $navbar-height;
.icon {
border-color: @brand-primary;
border-color: $primary;
font-weight: bold;
color: @brand-primary;
color: $primary;
font-size: 25px;
&-close {
padding: 0 3px;
@ -349,59 +381,7 @@ span.ref-id[id] {
}
}
@media screen and (max-width: @grid-float-breakpoint-max) {
#navbar-offcanvas {
display: block;
position: absolute;
width: 90%;
height: calc( 100vh - @navbar-height);
max-height: unset;
left: 101%;
top: @navbar-height + 1;
// extra padding because mobile Safari displays a bottom bar hiding parts of the menu
padding-bottom: 75px;
transition: left .3s ease-in-out;
background: @navbar-default-bg;
margin: 0 !important; // Overridden in theme with high specifity:
// .container > .navbar-header,
// .container-fluid > .navbar-header,
// .container > .navbar-collapse,
// .container-fluid > .navbar-collapse
// Is open
&.collapse.in {
left: 10%;
display: block;
overflow-y: auto;
box-shadow: -5px 20px 20px 0 rgba(0, 0, 0, 0.5), 5px 0 5px -5px rgba(0, 0, 0, 0.5);
}
// Hide current page in nav.
.nav > li.active {
display: none;
}
.caret {
float: right;
margin-top: 7px;
}
}
.navbar-toggle {
align-items: center;
font-size: 18px;
display: flex;
height: 38px;
justify-content: center;
padding: 0;
transform: none;
width: 38px;
.icon-close {
padding: 0;
}
}
// Forms
.form-label {
font-weight: $font-weight-bold;
}

@ -0,0 +1,33 @@
// Used for shift overview cards headers
@each $state, $value in $theme-colors {
$card-background: darken($value, 35%);
$card-border: $value;
$card-color: $value;
@if (contrast-ratio($card-background, $card-color) < $min-contrast-ratio*.7) {
$card-color: mix($value, color-contrast($card-background), 40%);
}
.card.bg-#{"" + $state} .card-header {
background-color: $card-background;
border-color: $card-border;
.badge.bg-light {
background-color: $card-color !important;
}
.badge.text-#{"" + $state} {
color: $card-background !important;
}
a.text-white {
color: $card-color !important;
}
.btn-#{"" + $state} {
background-color: $card-background;
border-color: $card-border !important;
color: $card-color;
}
}
}

@ -45,37 +45,6 @@ THE SOFTWARE.
// Bootswatch
// -----------------------------------------------------
// Navbar =====================================================================
// Buttons ====================================================================
// Typography =================================================================
.text-primary,
.text-primary:hover {
color: @brand-primary;
}
.text-success,
.text-success:hover {
color: @brand-success;
}
.text-danger,
.text-danger:hover {
color: @brand-danger;
}
.text-warning,
.text-warning:hover {
color: @brand-warning;
}
.text-info,
.text-info:hover {
color: @brand-info;
}
// Tables =====================================================================
table,
@ -88,12 +57,12 @@ table,
}
.text-muted {
color: @text-muted;
color: $text-muted;
}
}
.table-responsive > .table {
background-color: @table-bg;
background-color: $table-bg;
}
// Forms ======================================================================
@ -102,13 +71,13 @@ table,
.help-block,
.control-label,
.form-control-feedback {
color: @brand-warning;
color: $warning;
}
.form-control,
.form-control:focus,
.input-group-addon {
border-color: @brand-warning;
border-color: $warning;
}
}
@ -116,13 +85,13 @@ table,
.help-block,
.control-label,
.form-control-feedback {
color: @brand-danger;
color: $danger;
}
.form-control,
.form-control:focus,
.input-group-addon {
border-color: @brand-danger;
border-color: $danger;
}
}
@ -130,13 +99,13 @@ table,
.help-block,
.control-label,
.form-control-feedback {
color: @brand-success;
color: $success;
}
.form-control,
.form-control:focus,
.input-group-addon {
border-color: @brand-success;
border-color: $success;
}
}
@ -158,7 +127,7 @@ table,
.alert-link,
a {
color: @alert-warning-text;
color: $alert-warning-text;
text-decoration: underline;
}
@ -183,21 +152,9 @@ table,
// Containers =================================================================
a.thumbnail:hover,
a.thumbnail:focus,
a.thumbnail.active {
border-color: @thumbnail-border;
}
.jumbotron {
h1, h2, h3, h4, h5, h6 {
color: #fff;
}
}
// code tag
code {
background-color: @input-bg-disabled;
color: @input-color;
}

@ -1,873 +0,0 @@
// cyborg_variables
@import "../../../node_modules/bootstrap/less/variables";
/*
The MIT License (MIT)
Copyright (c) 2013 Thomas Park
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
*/
// Cyborg 3.2.0
// Variables
// --------------------------------------------------
//== Colors
//
//## Gray and brand colors for use across Bootstrap.
// needs change
@gray-darker: #222; // #222
@gray-dark: #333; // #333
@gray: #555; // #555
@gray-light: #999; // #999
@gray-lighter: #eee; // #eee
@brand-primary: #99ba00;
@brand-success: #99ba00;
@brand-info: #0076ba;
@brand-warning: #ffc600;
@brand-danger: #d9534f;
//== Scaffolding
//
//## Settings for some of the most global styles.
//** Background color for `<body>`.
@body-bg: #060606;
//** Global text color on `<body>`.
@text-color: @gray-light;
//** Global textual link color.
@link-color: @brand-primary;
//** Link hover color set via `darken()` function.
@link-hover-color: @link-color;
//== Typography
//
//## Font, line-height, and color for body text, headings, and more.
@font-family-serif: Georgia, "Times New Roman", Times, serif;
//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base: @font-family-sans-serif;
@font-size-base: 14px;
@font-size-large: ceil((@font-size-base * 1.25)); // ~18px
@font-size-small: ceil((@font-size-base * 0.85)); // ~12px
@font-size-h1: 34px;
@font-size-h2: 24px;
@font-size-h3: 20px;
@font-size-h4: 20px;
@font-size-h5: 20px;
@font-size-h6: 16px;
//** Unit-less `line-height` for use in components like buttons.
@line-height-base: 1.428571429; // 20/14
//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
@line-height-computed: floor((@font-size-base * @line-height-base)); // ~20px
//** By default, this inherits from the `<body>`.
@headings-font-family: @font-family-base;
@headings-font-weight: 500;
@headings-line-height: 1.1;
@headings-color: #fff;
//== Iconography
//
//## Specify custom location and filename of the included Glyphicons icon font.
//## Useful for those including Bootstrap via Bower.
//** File name for all font files.
@icon-font-name: "glyphicons-halflings-regular";
//** Element ID within SVG icon file.
@icon-font-svg-id: "glyphicons_halflingsregular";
//== Components
//
//## Define common padding and border radius sizes and more.
//## Values based on 14px text and 1.428 line-height (~20px to start).
@padding-base-vertical: 8px;
@padding-base-horizontal: 12px;
@padding-large-vertical: 14px;
@padding-large-horizontal: 16px;
@padding-small-vertical: 5px;
@padding-small-horizontal: 10px;
@padding-xs-vertical: 1px;
@padding-xs-horizontal: 5px;
@line-height-large: 1.33;
@line-height-small: 1.5;
@border-radius-base: 4px;
@border-radius-large: 6px;
@border-radius-small: 3px;
//** Global color for active items (e.g., navs or dropdowns).
@component-active-color: #fff;
//** Global background color for active items (e.g., navs or dropdowns).
@component-active-bg: @brand-primary;
//** Width of the `border` for generating carets that indicator dropdowns.
@caret-width-base: 4px;
//** Carets increase slightly in size for larger components.
@caret-width-large: 5px;
//== Tables
//
//## Customizes the `.table` component with basic values, each used across all table variations.
//** Padding for `<th>`s and `<td>`s.
@table-cell-padding: 8px;
//** Padding for cells in `.table-condensed`.
@table-condensed-cell-padding: 5px;
//** Default background color used for all tables.
@table-bg: darken(@gray-darker, 4%);
//** Background color used for `.table-striped`.
@table-bg-accent: darken(@table-bg, 6%);
//** Background color used for `.table-hover`.
@table-bg-hover: @gray-dark;
@table-bg-active: @table-bg-hover;
//** Border color for table and cell borders.
@table-border-color: @gray-dark;
//== Buttons
//
//## For each of Bootstrap's buttons, define text, background and border color.
@btn-font-weight: normal;
@btn-default-color: #000;
@btn-default-bg: @gray-light;
@btn-default-border: darken(@btn-default-bg, 10%);
@btn-primary-color: @btn-default-color;
@btn-primary-bg: @brand-primary;
@btn-primary-border: darken(@btn-primary-bg, 10%);
@btn-success-color: @btn-default-color;
@btn-success-bg: @brand-success;
@btn-success-border: darken(@btn-success-bg, 10%);
@btn-info-color: @btn-default-color;
@btn-info-bg: @brand-info;
@btn-info-border: darken(@btn-info-bg, 10%);
@btn-warning-color: @btn-default-color;
@btn-warning-bg: @brand-warning;
@btn-warning-border: darken(@btn-warning-bg, 10%);
@btn-danger-color: @btn-default-color;
@btn-danger-bg: @brand-danger;
@btn-danger-border: darken(@btn-danger-bg, 10%);
@btn-link-disabled-color: @gray-light;
//== Forms
//
//##
//** `<input>` background color
@input-bg: #000;
//** `<input disabled>` background color
@input-bg-disabled: @gray-darker;
//** Text color for `<input>`s
@input-color: @text-color;
//** `<input>` border color
@input-border: @gray-dark;
//** `<input>` border radius
@input-border-radius: @border-radius-base;
//** Border color for inputs on focus
@input-border-focus: #66afe9;
//** Placeholder text color
@input-color-placeholder: @gray-light;
//** Default `.form-control` height
@input-height-base: (@line-height-computed + (@padding-base-vertical * 2) + 2);
//** Large `.form-control` height
@input-height-large: (ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2);
//** Small `.form-control` height
@input-height-small: (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2);
@legend-color: @text-color;
@legend-border-color: @gray-dark;
//** Background color for textual input addons
@input-group-addon-bg: @gray-light;
//** Border color for textual input addons
@input-group-addon-border-color: @input-border;
//== Dropdowns
//
//## Dropdown menu container and contents.
//** Background for the dropdown menu.
@dropdown-bg: @gray-darker;
//** Dropdown menu `border-color`.
@dropdown-border: rgba(255,255,255,0.1);
//** Dropdown menu `border-color` **for IE8**.
@dropdown-fallback-border: #444;
//** Divider color for between dropdown items.
@dropdown-divider-bg: rgba(255,255,255,0.1);
//** Dropdown link text color.
@dropdown-link-color: #fff;
//** Hover color for dropdown links.
@dropdown-link-hover-color: #fff;
//** Hover background for dropdown links.
@dropdown-link-hover-bg: @dropdown-link-active-bg;
//** Active dropdown menu item text color.
@dropdown-link-active-color: #fff;
//** Active dropdown menu item background color.
@dropdown-link-active-bg: @component-active-bg;
//** Disabled dropdown menu item background color.
@dropdown-link-disabled-color: @text-muted;
//** Text color for headers within dropdown menus.
@dropdown-header-color: @text-muted;
//** Deprecated `@dropdown-caret-color` as of v3.1.0
@dropdown-caret-color: #000;
//-- Z-index master list
//
// Warning: Avoid customizing these values. They're used for a bird's eye view
// of components dependent on the z-axis and are designed to all work together.
//
// Note: These variables are not generated into the Customizer.
@zindex-navbar: 1000;
@zindex-dropdown: 1000;
@zindex-popover: 1060;
@zindex-tooltip: 1070;
@zindex-navbar-fixed: 1030;
@zindex-modal-background: 1040;
@zindex-modal: 1050;
//== Media queries breakpoints
//
//## Define the breakpoints at which your layout will change, adapting to different screen sizes.
// Extra small screen / phone
//** Deprecated `@screen-xs` as of v3.0.1
@screen-xs: 480px;
//** Deprecated `@screen-xs-min` as of v3.2.0
@screen-xs-min: @screen-xs;
//** Deprecated `@screen-phone` as of v3.0.1
@screen-phone: @screen-xs-min;
// Small screen / tablet
//** Deprecated `@screen-sm` as of v3.0.1
@screen-sm: 768px;
@screen-sm-min: @screen-sm;
//** Deprecated `@screen-tablet` as of v3.0.1
@screen-tablet: @screen-sm-min;
// Medium screen / desktop
//** Deprecated `@screen-md` as of v3.0.1
@screen-md: 992px;
@screen-md-min: @screen-md;
//** Deprecated `@screen-desktop` as of v3.0.1
@screen-desktop: @screen-md-min;
// Large screen / wide desktop
//** Deprecated `@screen-lg` as of v3.0.1
@screen-lg: 1200px;
@screen-lg-min: @screen-lg;
//** Deprecated `@screen-lg-desktop` as of v3.0.1
@screen-lg-desktop: @screen-lg-min;
// So media queries don't overlap when required, provide a maximum
@screen-xs-max: (@screen-sm-min - 1);
@screen-sm-max: (@screen-md-min - 1);
@screen-md-max: (@screen-lg-min - 1);
//== Grid system
//
//## Define your custom responsive grid.
//** Number of columns in the grid.
@grid-columns: 12;
//** Padding between columns. Gets divided in half for the left and right.
@grid-gutter-width: 30px;
// Navbar collapse
//** Point at which the navbar becomes uncollapsed.
@grid-float-breakpoint: @screen-sm-min;
//** Point at which the navbar begins collapsing.
@grid-float-breakpoint-max: (@grid-float-breakpoint - 1);
//== Container sizes
//
//## Define the maximum width of `.container` for different screen sizes.
// Small screen / tablet
@container-tablet: ((720px + @grid-gutter-width));
//** For `@screen-sm-min` and up.
@container-sm: @container-tablet;
// Medium screen / desktop
@container-desktop: ((940px + @grid-gutter-width));
//** For `@screen-md-min` and up.
@container-md: @container-desktop;
// Large screen / wide desktop
@container-large-desktop: ((1140px + @grid-gutter-width));
//** For `@screen-lg-min` and up.
@container-lg: @container-large-desktop;
//== Navbar
//
//##
// Basics of a navbar
@navbar-height: 50px;
@navbar-margin-bottom: @line-height-computed;
@navbar-border-radius: @border-radius-base;
@navbar-padding-horizontal: floor((@grid-gutter-width / 2));
@navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2);
@navbar-collapse-max-height: 340px;
@navbar-default-color: @text-color;
@navbar-default-bg: @body-bg;
@navbar-default-border: @gray-dark;
// Navbar links
@navbar-default-link-color: @text-color;
@navbar-default-link-hover-color: #fff;
@navbar-default-link-hover-bg: transparent;
@navbar-default-link-active-color: #fff;
@navbar-default-link-active-bg: transparent;
@navbar-default-link-disabled-color: @gray-light;
@navbar-default-link-disabled-bg: transparent;
// Navbar brand label
@navbar-default-brand-color: #fff;
@navbar-default-brand-hover-color: #fff;
@navbar-default-brand-hover-bg: transparent;
// Navbar toggle
@navbar-default-toggle-hover-bg: @gray-dark;
@navbar-default-toggle-icon-bar-bg: #ccc;
@navbar-default-toggle-border-color: @gray-dark;
// Inverted navbar
// Reset inverted navbar basics
@navbar-inverse-color: @gray-light;
@navbar-inverse-bg: @gray-darker;
@navbar-inverse-border: darken(@navbar-inverse-bg, 10%);
// Inverted navbar links
@navbar-inverse-link-color: @gray-light;
@navbar-inverse-link-hover-color: #fff;
@navbar-inverse-link-hover-bg: transparent;
@navbar-inverse-link-active-color: @navbar-inverse-link-hover-color;
@navbar-inverse-link-active-bg: transparent;
@navbar-inverse-link-disabled-color: #aaa;
@navbar-inverse-link-disabled-bg: transparent;
// Inverted navbar brand label
@navbar-inverse-brand-color: #fff;
@navbar-inverse-brand-hover-color: #fff;
@navbar-inverse-brand-hover-bg: transparent;
// Inverted navbar toggle
@navbar-inverse-toggle-hover-bg: #333;
@navbar-inverse-toggle-icon-bar-bg: #fff;
@navbar-inverse-toggle-border-color: #333;
//== Navs
//
//##
//=== Shared nav styles
@nav-link-padding: 10px 15px;
@nav-link-hover-bg: @gray-darker;
@nav-disabled-link-color: @gray-light;
@nav-disabled-link-hover-color: @gray-light;
@nav-open-link-hover-color: @gray-darker;
//== Tabs
@nav-tabs-border-color: @gray-dark;
@nav-tabs-link-hover-border-color: transparent;
@nav-tabs-active-link-hover-bg: @brand-primary;
@nav-tabs-active-link-hover-color: #fff;
@nav-tabs-active-link-hover-border-color: @gray-dark;
@nav-tabs-justified-link-border-color: #ddd;
@nav-tabs-justified-active-link-border-color: @body-bg;
//== Pills
@nav-pills-border-radius: @border-radius-base;
@nav-pills-active-link-hover-bg: @component-active-bg;
@nav-pills-active-link-hover-color: @component-active-color;
//== Pagination
//
//##
@pagination-color: #fff;
@pagination-bg: @gray-darker;
@pagination-border: @gray-dark;
@pagination-hover-color: #000;
@pagination-hover-bg: @component-active-bg;
@pagination-hover-border: transparent;
@pagination-active-color: #000;
@pagination-active-bg: @brand-primary;
@pagination-active-border: transparent;
@pagination-disabled-color: @gray-light;
@pagination-disabled-bg: @gray-darker;
@pagination-disabled-border: @gray-dark;
//== Pager
//
//##
@pager-bg: @pagination-bg;
@pager-border: @pagination-border;
@pager-border-radius: 15px;
@pager-hover-bg: @pagination-hover-bg;
@pager-active-bg: @pagination-active-bg;
@pager-active-color: @pagination-active-color;
@pager-disabled-color: @gray-light;
//== Jumbotron
//
//##
@jumbotron-padding: 30px;
@jumbotron-color: inherit;
@jumbotron-bg: darken(@gray-darker, 5%);
@jumbotron-heading-color: inherit;
@jumbotron-font-size: ceil((@font-size-base * 1.5));
//== Form states and alerts
//
//## Define colors for form feedback states and, by default, alerts.
@state-success-text: @brand-success;
@state-success-bg: darken(@brand-success, 40%);
@state-success-border: @brand-success;
@state-info-text: @brand-info;
@state-info-bg: darken(@brand-info, 40%);
@state-info-border: @brand-info;
@state-warning-text: @brand-warning;
@state-warning-bg: darken(@brand-warning, 40%);
@state-warning-border: @brand-warning;
@state-danger-text: @brand-danger;
@state-danger-bg: darken(@brand-danger, 40%);
@state-danger-border: @brand-danger;
//== Tooltips
//
//##
//** Tooltip max width
@tooltip-max-width: 200px;
//** Tooltip text color
@tooltip-color: #fff;
//** Tooltip background color
@tooltip-bg: rgba(0,0,0,.9);
@tooltip-opacity: .9;
//** Tooltip arrow width
@tooltip-arrow-width: 5px;
//** Tooltip arrow color
@tooltip-arrow-color: @tooltip-bg;
//== Popovers
//
//##
//** Popover body background color
@popover-bg: lighten(@body-bg, 10%);
//** Popover maximum width
@popover-max-width: 276px;
//** Popover border color
@popover-border-color: rgba(0,0,0,.2);
//** Popover fallback border color
@popover-fallback-border-color: #999;
//** Popover title background color
@popover-title-bg: darken(@popover-bg, 3%);
//** Popover arrow width
@popover-arrow-width: 10px;
//** Popover arrow color
@popover-arrow-color: @popover-bg;
//** Popover outer arrow width
@popover-arrow-outer-width: (@popover-arrow-width + 1);
//** Popover outer arrow color
@popover-arrow-outer-color: fadein(@popover-border-color, 5%);
//** Popover outer arrow fallback color
@popover-arrow-outer-fallback-color: darken(@popover-fallback-border-color, 20%);
//== Labels
//
//##
//** Default label background color
@label-default-bg: @btn-default-bg;
//** Primary label background color
@label-primary-bg: @brand-primary;
//** Success label background color
@label-success-bg: @brand-success;
//** Info label background color
@label-info-bg: @brand-info;
//** Warning label background color
@label-warning-bg: @brand-warning;
//** Danger label background color
@label-danger-bg: @brand-danger;
//** Default label text color
@label-color: #fff;
//** Default text color of a linked label
@label-link-hover-color: #fff;
//== Modals
//
//##
//** Padding applied to the modal body
@modal-inner-padding: 20px;
//** Padding applied to the modal title
@modal-title-padding: 15px;
//** Modal title line-height
@modal-title-line-height: @line-height-base;
//** Background color of modal content area
@modal-content-bg: lighten(@body-bg, 10%);
//** Modal content border color
@modal-content-border-color: rgba(0,0,0,.2);
//** Modal content border color **for IE8**
@modal-content-fallback-border-color: #999;
//** Modal backdrop background color
@modal-backdrop-bg: #000;
//** Modal backdrop opacity
@modal-backdrop-opacity: .5;
//** Modal header border color
@modal-header-border-color: @gray-dark;
//** Modal footer border color
@modal-footer-border-color: @modal-header-border-color;
@modal-lg: 900px;
@modal-md: 600px;
@modal-sm: 300px;
//== Alerts
//
//## Define alert colors, border radius, and padding.
@alert-padding: 15px;
@alert-border-radius: @border-radius-base;
@alert-link-font-weight: bold;
@alert-success-bg: @state-success-bg;
@alert-success-text: @state-success-text;
@alert-success-border: @state-success-border;
@alert-info-bg: @state-info-bg;
@alert-info-text: @state-info-text;
@alert-info-border: @state-info-border;
@alert-warning-bg: @state-warning-bg;
@alert-warning-text: @state-warning-text;
@alert-warning-border: @state-warning-border;
@alert-danger-bg: @state-danger-bg;
@alert-danger-text: @state-danger-text;
@alert-danger-border: @state-danger-border;
//== Progress bars
//
//##
//** Background color of the whole progress component
@progress-bg: @gray-darker;
//** Progress bar text color
@progress-bar-color: #fff;
//** Default progress bar color
@progress-bar-bg: @brand-primary;
//** Success progress bar color
@progress-bar-success-bg: @brand-success;
//** Warning progress bar color
@progress-bar-warning-bg: @brand-warning;
//** Danger progress bar color
@progress-bar-danger-bg: @brand-danger;
//** Info progress bar color
@progress-bar-info-bg: @brand-info;
//== List group
//
//##
//** Background color on `.list-group-item`
@list-group-bg: @gray-darker;
//** `.list-group-item` border color
@list-group-border: @gray-dark;
//** List group border radius
@list-group-border-radius: @border-radius-base;
//** Background color of single list items on hover
@list-group-hover-bg: lighten(@list-group-bg, 15%);
//** Text color of active list items
@list-group-active-color: @component-active-color;
//** Background color of active list items
@list-group-active-bg: @component-active-bg;
//** Border color of active list elements
@list-group-active-border: @list-group-active-bg;
//** Text color for content within active list items
@list-group-active-text-color: lighten(@list-group-active-bg, 40%);
//** Text color of disabled list items
@list-group-disabled-color: @gray-light;
//** Background color of disabled list items
@list-group-disabled-bg: @gray-lighter;
//** Text color for content within disabled list items
@list-group-disabled-text-color: @list-group-disabled-color;
@list-group-link-color: @text-color;
@list-group-link-hover-color: @list-group-link-color;
@list-group-link-heading-color: #fff;
//== Panels
//
//##
@panel-bg: @gray-darker;
@panel-body-padding: 15px;
@panel-heading-padding: 10px 15px;
@panel-footer-padding: @panel-heading-padding;
@panel-border-radius: @border-radius-base;
//** Border color for elements within panels
@panel-inner-border: @gray-dark;
@panel-default-text: @text-color;
@panel-default-border: @panel-inner-border;
@panel-default-heading-bg: lighten(@gray-darker, 10%);
@panel-footer-bg: @panel-default-heading-bg;
@panel-primary-text: #fff;
@panel-primary-border: @brand-primary;
@panel-primary-heading-bg: @brand-primary;
@panel-success-text: @state-success-text;
@panel-success-border: @state-success-border;
@panel-success-heading-bg: @state-success-bg;
@panel-info-text: @state-info-text;
@panel-info-border: @state-info-border;
@panel-info-heading-bg: @state-info-bg;
@panel-warning-text: @state-warning-text;
@panel-warning-border: @state-warning-border;
@panel-warning-heading-bg: @state-warning-bg;
@panel-danger-text: @state-danger-text;
@panel-danger-border: @state-danger-border;
@panel-danger-heading-bg: @state-danger-bg;
//== Thumbnails
//
//##
//** Padding around the thumbnail image
@thumbnail-padding: 4px;
//** Thumbnail background color
@thumbnail-bg: @gray-dark;
//** Thumbnail border color
@thumbnail-border: @gray-dark;
//** Thumbnail border radius
@thumbnail-border-radius: @border-radius-base;
//** Custom text color for thumbnail captions
@thumbnail-caption-color: @text-color;
//** Padding around the thumbnail caption
@thumbnail-caption-padding: 9px;
//== Wells
//
//##
@well-bg: darken(@gray-darker, 5%);
@well-border: darken(@well-bg, 7%);
//== Badges
//
//##
@badge-color: #000;
//** Linked badge text color on hover
@badge-link-hover-color: #000;
@badge-bg: @brand-primary;
//** Badge text color in active nav link
@badge-active-color: @brand-primary;
//** Badge background color in active nav link
@badge-active-bg: #fff;
@badge-font-weight: bold;
@badge-line-height: 1;
@badge-border-radius: 10px;
//== Breadcrumbs
//
//##
@breadcrumb-padding-vertical: 8px;
@breadcrumb-padding-horizontal: 15px;
//** Breadcrumb background color
@breadcrumb-bg: @gray-darker;
//** Breadcrumb text color
@breadcrumb-color: #fff;
//** Text color of current page in the breadcrumb
@breadcrumb-active-color: @text-color;
//** Textual separator for between breadcrumb elements
@breadcrumb-separator: "/";
//== Carousel
//
//##
@carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6);
@carousel-control-color: #fff;
@carousel-control-width: 15%;
@carousel-control-opacity: .5;
@carousel-control-font-size: 20px;
@carousel-indicator-active-bg: #fff;
@carousel-indicator-border-color: #fff;
@carousel-caption-color: #fff;
//== Close
//
//##
@close-font-weight: bold;
@close-color: #000;
@close-text-shadow: 0 1px 0 #fff;
//== Code
//
//##
@code-color: #c7254e;
@code-bg: #f9f2f4;
@kbd-color: #fff;
@kbd-bg: #333;
@pre-bg: #f5f5f5;
@pre-color: @gray-dark;
@pre-border-color: #ccc;
@pre-scrollable-max-height: 340px;
//== Type
//
//##
//** Horizontal offset for forms and lists.
@component-offset-horizontal: 180px;
//** Text muted color
@text-muted: @gray-light;
//** Abbreviations and acronyms border color
@abbr-border-color: @gray-light;
//** Headings small color
@headings-small-color: @brand-primary;
//** Blockquote small color
@blockquote-small-color: @gray;
//** Blockquote font size
@blockquote-font-size: (@font-size-base * 1.25);
//** Blockquote border color
@blockquote-border-color: @gray-dark;
//** Page header border color
@page-header-border-color: @gray-dark;
//** Width of horizontal description list titles
@dl-horizontal-offset: @component-offset-horizontal;
//** Horizontal line color.
@hr-border: @gray-dark;
@import "base";

@ -0,0 +1,696 @@
// cyborg_variables
/*
The MIT License (MIT)
Copyright (c) 2013 Thomas Park
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
*/
@use "sass:math";
// Cyborg 3.2.0
// Variables
// --------------------------------------------------
//== Colors
//## Gray and brand colors for use across Bootstrap.
$gray-darker: #222 !default;
$gray-dark: #333 !default;
$gray: #555 !default;
$gray-light: #999 !default;
$gray-lighter: #eee !default;
$primary: #437aca !default;
$success: #99ba00 !default;
$info: #0076ba !default;
$warning: #ffc600 !default;
$danger: #d9534f !default;
//== Scaffolding
//
//## Settings for some of the most global styles.
$body-bg: #060606 !default;
$body-color: $gray-light !default;
//** Global text color on `<body>`.
$text-color: $gray-light !default;
$text-muted: $gray-light !default;
//** Global textual link color.
$link-color: $primary !default;
//** Link hover color set via `darken()` function.
$link-hover-color: $link-color !default;
//== Typography
//
//## Font, line-height, and color for body text, headings, and more.
$font-size-base: 1rem !default;
$font-size-large: ceil(($font-size-base * 1.25)) !default; // ~18px
$font-size-small: ceil(($font-size-base * 0.85)) !default; // ~12px
$font-size-h1: 34px !default;
$font-size-h2: 24px !default;
$font-size-h3: 20px !default;
$font-size-h4: 20px !default;
$font-size-h5: 20px !default;
$font-size-h6: 16px !default;
//** Unit-less `line-height` for use in components like buttons.
$line-height-base: 1.5 !default;
//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
$line-height-computed: floor(($font-size-base * $line-height-base)) !default; // ~20px
//** By default, this inherits from the `<body>`.
$headings-font-weight: 500 !default;
$headings-line-height: 1.1 !default;
$headings-color: #fff !default;
//== Components
//
//## Define common padding and border radius sizes and more.
//## Values based on 14px text and 1.428 line-height (~20px to start).
$line-height-large: 1.33 !default;
$line-height-small: 1.5 !default;
$border-radius-base: 4px !default;
$border-radius-large: 6px !default;
$border-radius-small: 3px !default;
//** Global color for active items (e.g., navs or dropdowns).
$component-active-color: #fff !default;
//** Global background color for active items (e.g., navs or dropdowns).
$component-active-bg: $primary !default;
//** Width of the `border` for generating carets that indicator dropdowns.
$caret-width-base: 4px !default;
//** Carets increase slightly in size for larger components.
$caret-width-large: 5px !default;
//== Tables
//
//## Customizes the `.table` component with basic values, each used across all table variations.
//** Padding for `<th>`s and `<td>`s.
$table-cell-padding: 8px !default;
//** Padding for cells in `.table-condensed`.
$table-condensed-cell-padding: 5px !default;
//** Default background color used for all tables.
$table-bg: darken($gray-darker, 4%) !default;
//** Background color used for `.table-striped`.
$table-bg-accent: darken($table-bg, 6%) !default;
//** Background color used for `.table-hover`.
$table-bg-hover: $gray-dark !default;
$table-bg-active: $table-bg-hover !default;
//** Border color for table and cell borders.
$table-border-color: $gray-dark !default;
//== Forms
//
//##
//** `<input>` background color
$input-bg: $gray-darker !default;
//** `<input disabled>` background color
$input-bg-disabled: $gray-darker !default;
//** Text color for `<input>`s
$input-color: $text-color !default;
//** `<input>` border color
$input-border-color: $gray-dark !default;
//** `<input>` border radius
$input-border-radius: $border-radius-base !default;
//** Border color for inputs on focus
$input-border-focus: #66afe9 !default;
//** Placeholder text color
$input-color-placeholder: $gray-light !default;
$legend-color: $text-color !default;
$legend-border-color: $gray-dark !default;
//** Background color for textual input addons
$input-group-addon-bg: $gray-light !default;
//** Border color for textual input addons
$input-group-addon-border-color: $input-border-color !default;
$form-label-font-weight: bold !default;
//== Dropdowns
//
//## Dropdown menu container and contents.
$dropdown-bg: $gray-darker !default;
$dropdown-border: rgba(255,255,255,0.1) !default;
$dropdown-fallback-border: #444;
$dropdown-divider-bg: rgba(255,255,255,0.1) !default;
//** Active dropdown menu item text color.
$dropdown-link-active-color: #fff !default;
//** Active dropdown menu item background color.
$dropdown-link-active-bg: $component-active-bg !default;
//** Dropdown link text color.
$dropdown-link-color: #fff !default;
//** Hover color for dropdown links.
$dropdown-link-hover-color: #fff !default;
//** Hover background for dropdown links.
$dropdown-link-hover-bg: $dropdown-link-active-bg !default;
//** Disabled dropdown menu item background color.
$dropdown-link-disabled-color: $text-muted !default;
//** Text color for headers within dropdown menus.
$dropdown-header-color: $text-muted !default;
//** Deprecated `$dropdown-caret-color` as of v3.1.0
$dropdown-caret-color: #000 !default;
//-- Z-index master list
//
// Warning: Avoid customizing these values. They're used for a bird's eye view
// of components dependent on the z-axis and are designed to all work together.
//
// Note: These variables are not generated into the Customizer.
$zindex-navbar: 1000 !default;
$zindex-dropdown: 1000 !default;
$zindex-popover: 1060 !default;
$zindex-tooltip: 1070 !default;
$zindex-navbar-fixed: 1030 !default;
$zindex-modal-background: 1040 !default;
$zindex-modal: 1050 !default;
//== Media queries breakpoints
//
//## Define the breakpoints at which your layout will change, adapting to different screen sizes.
// Extra small screen / phone
//** Deprecated `$screen-xs` as of v3.0.1
$screen-xs: 480px !default;
//** Deprecated `$screen-xs-min` as of v3.2.0
$screen-xs-min: $screen-xs !default;
//** Deprecated `$screen-phone` as of v3.0.1
$screen-phone: $screen-xs-min !default;
// Small screen / tablet
//** Deprecated `$screen-sm` as of v3.0.1
$screen-sm: 768px !default;
$screen-sm-min: $screen-sm !default;
//** Deprecated `$screen-tablet` as of v3.0.1
$screen-tablet: $screen-sm-min !default;
// Medium screen / desktop
//** Deprecated `$screen-md` as of v3.0.1
$screen-md: 992px !default;
$screen-md-min: $screen-md !default;
//** Deprecated `$screen-desktop` as of v3.0.1
$screen-desktop: $screen-md-min !default;
// Large screen / wide desktop
//** Deprecated `$screen-lg` as of v3.0.1
$screen-lg: 1200px !default;
$screen-lg-min: $screen-lg !default;
//** Deprecated `$screen-lg-desktop` as of v3.0.1
$screen-lg-desktop: $screen-lg-min !default;
// So media queries don't overlap when required, provide a maximum
$screen-xs-max: ($screen-sm-min - 1) !default;
$screen-sm-max: ($screen-md-min - 1) !default;
$screen-md-max: ($screen-lg-min - 1) !default;
//== Grid system
//
//## Define your custom responsive grid.
//** Number of columns in the grid.
$grid-columns: 12 !default;
//** Padding between columns. Gets divided in half for the left and right.
$grid-gutter-width: 30px !default;
// Navbar collapse
//** Point at which the navbar becomes uncollapsed.
$grid-float-breakpoint: $screen-sm-min !default;
//** Point at which the navbar begins collapsing.
$grid-float-breakpoint-max: ($grid-float-breakpoint - 1) !default;
//== Container sizes
//
//## Define the maximum width of `.container` for different screen sizes.
// Small screen / tablet
$container-tablet: ((720px + $grid-gutter-width)) !default;
//** For `$screen-sm-min` and up.
$container-sm: $container-tablet !default;
// Medium screen / desktop
$container-desktop: ((940px + $grid-gutter-width)) !default;
//** For `$screen-md-min` and up.
$container-md: $container-desktop !default;
// Large screen / wide desktop
$container-large-desktop: ((1140px + $grid-gutter-width)) !default;
//** For `$screen-lg-min` and up.
$container-lg: $container-large-desktop !default;
//== Navbar
//
//##
// Basics of a navbar
$navbar-height: 3.125rem !default;
$navbar-margin-bottom: $line-height-computed !default;
$navbar-border-radius: $border-radius-base !default;
$navbar-padding-horizontal: floor(math.div($grid-gutter-width, 2)) !default;
$navbar-padding-vertical: math.div($navbar-height - $line-height-computed, 2) !default;
$navbar-collapse-max-height: 340px !default;
$navbar-default-color: $text-color !default;
$navbar-default-bg: $body-bg !default;
$navbar-default-border: $gray-dark !default;
// Navbar links
$navbar-default-link-color: $text-color !default;
$navbar-default-link-hover-color: #fff !default;
$navbar-default-link-hover-bg: transparent !default;
$navbar-default-link-active-color: #fff !default;
$navbar-default-link-active-bg: transparent !default;
$navbar-default-link-disabled-color: $gray-light !default;
$navbar-default-link-disabled-bg: transparent !default;
// Navbar brand label
$navbar-default-brand-color: #fff !default;
$navbar-default-brand-hover-color: #fff !default;
$navbar-default-brand-hover-bg: transparent !default;
// Navbar toggle
$navbar-default-toggle-hover-bg: $gray-dark !default;
$navbar-default-toggle-icon-bar-bg: #ccc !default;
$navbar-default-toggle-border-color: $gray-dark !default;
// Inverted navbar
// Reset inverted navbar basics
$navbar-inverse-color: $gray-light !default;
$navbar-inverse-bg: $gray-darker !default;
$navbar-inverse-border: darken($navbar-inverse-bg, 10%) !default;
// Inverted navbar links
$navbar-inverse-link-color: $gray-light !default;
$navbar-inverse-link-hover-color: #fff !default;
$navbar-inverse-link-hover-bg: transparent !default;
$navbar-inverse-link-active-color: $navbar-inverse-link-hover-color !default;
$navbar-inverse-link-active-bg: transparent !default;
$navbar-inverse-link-disabled-color: #aaa !default;
$navbar-inverse-link-disabled-bg: transparent !default;
// Inverted navbar brand label
$navbar-inverse-brand-color: #fff !default;
$navbar-inverse-brand-hover-color: #fff !default;
$navbar-inverse-brand-hover-bg: transparent !default;
// Inverted navbar toggle
$navbar-inverse-toggle-hover-bg: #333 !default;
$navbar-inverse-toggle-icon-bar-bg: #fff !default;
$navbar-inverse-toggle-border-color: #333 !default;
//== Navs
//
//##
//=== Shared nav styles
$nav-link-padding: 10px 15px !default;
$nav-link-hover-bg: $gray-darker !default;
$nav-disabled-link-color: $gray-light !default;
$nav-disabled-link-hover-color: $gray-light !default;
$nav-open-link-hover-color: $gray-darker !default;
//== Tabs
$nav-tabs-border-color: $gray-dark !default;
$nav-tabs-link-hover-border-color: transparent !default;
$nav-tabs-active-link-hover-bg: $primary !default;
$nav-tabs-active-link-hover-color: #fff !default;
$nav-tabs-active-link-hover-border-color: $gray-dark !default;
$nav-tabs-justified-link-border-color: #ddd !default;
$nav-tabs-justified-active-link-border-color: $body-bg !default;
//== Pills
$nav-pills-border-radius: $border-radius-base !default;
$nav-pills-active-link-hover-bg: $component-active-bg !default;
$nav-pills-active-link-hover-color: $component-active-color !default;
//== Pagination
//
//##
$pagination-color: #fff !default;
$pagination-bg: $gray-darker !default;
$pagination-border: $gray-dark !default;
$pagination-hover-color: #000 !default;
$pagination-hover-bg: $component-active-bg !default;
$pagination-hover-border: transparent !default;
$pagination-active-color: #000 !default;
$pagination-active-bg: $primary !default;
$pagination-active-border: transparent !default;
$pagination-disabled-color: $gray-light !default;
$pagination-disabled-bg: $gray-darker !default;
$pagination-disabled-border: $gray-dark !default;
//== Pager
//
//##
$pager-bg: $pagination-bg !default;
$pager-border: $pagination-border !default;
$pager-border-radius: 15px !default;
$pager-hover-bg: $pagination-hover-bg !default;
$pager-active-bg: $pagination-active-bg !default;
$pager-active-color: $pagination-active-color !default;
$pager-disabled-color: $gray-light !default;
//== Jumbotron
//
//##
$jumbotron-padding: 30px !default;
$jumbotron-color: inherit !default;
$jumbotron-bg: darken($gray-darker, 5%) !default;
$jumbotron-heading-color: inherit !default;
$jumbotron-font-size: ceil(($font-size-base * 1.5)) !default;
//== Form states and alerts
//
//## Define colors for form feedback states and, by default, alerts.
$state-success-text: $success !default;
$state-success-bg: darken($success, 40%) !default;
$state-success-border: $success !default;
$state-info-text: $info !default;
$state-info-bg: darken($info, 40%) !default;
$state-info-border: $info !default;
$state-warning-text: $warning !default;
$state-warning-bg: darken($warning, 40%) !default;
$state-warning-border: $warning !default;
$state-danger-text: $danger !default;
$state-danger-bg: darken($danger, 40%) !default;
$state-danger-border: $danger !default;
//== Tooltips
//
//##
$tooltip-max-width: 200px !default;
$tooltip-color: #fff !default;
$tooltip-bg: rgba(0,0,0,.9) !default;
$tooltip-opacity: .9 !default;
$tooltip-arrow-width: 5px !default;
$tooltip-arrow-color: $tooltip-bg !default;
//== Popovers
//
//##
$popover-bg: lighten($body-bg, 10%) !default;
$popover-max-width: 276px !default;
$popover-border-color: rgba(0,0,0,.2) !default;
$popover-fallback-border-color: #999 !default !default;
//** Popover title background color
$popover-title-bg: darken($popover-bg, 3%) !default;
//** Popover arrow width
$popover-arrow-width: 10px !default;
//** Popover arrow color
$popover-arrow-color: $popover-bg !default;
//** Popover outer arrow width
$popover-arrow-outer-width: ($popover-arrow-width + 1) !default;
//** Popover outer arrow color
$popover-arrow-outer-color: fadein($popover-border-color, 5%) !default;
//** Popover outer arrow fallback color
$popover-arrow-outer-fallback-color: darken($popover-fallback-border-color, 20%) !default;
//== Labels
//
//##
$label-primary-bg: $primary !default;
$label-success-bg: $success !default;
$label-info-bg: $info !default;
$label-warning-bg: $warning !default;
$label-danger-bg: $danger !default;
//** Default label text color
$label-color: #fff !default;
//** Default text color of a linked label
$label-link-hover-color: #fff !default;
//== Modals
//
//##
//** Padding applied to the modal body
$modal-inner-padding: 1.25rem !default;
//** Padding applied to the modal title
$modal-title-padding: 15px !default;
//** Modal title line-height
$modal-title-line-height: $line-height-base !default;
//** Background color of modal content area
$modal-content-bg: lighten($body-bg, 10%) !default;
//** Modal content border color
$modal-content-border-color: rgba(0,0,0,.2) !default;
//** Modal content border color **for IE8**
$modal-content-fallback-border-color: #999 !default;
//** Modal backdrop background color
$modal-backdrop-bg: #000 !default;
//** Modal backdrop opacity
$modal-backdrop-opacity: .5 !default;
//** Modal header border color
$modal-header-border-color: $gray-dark !default;
//** Modal footer border color
$modal-footer-border-color: $modal-header-border-color !default;
$modal-lg: 900px !default;
$modal-md: 600px !default;
$modal-sm: 300px !default;
//== Alerts
//
//## Define alert colors, border radius, and padding.
$alert-padding: 15px !default;
$alert-border-radius: $border-radius-base !default;
$alert-link-font-weight: bold !default;
$alert-success-bg: $state-success-bg !default;
$alert-success-text: $state-success-text !default;
$alert-success-border: $state-success-border !default;
$alert-info-bg: $state-info-bg !default;
$alert-info-text: $state-info-text !default;
$alert-info-border: $state-info-border !default;
$alert-warning-bg: $state-warning-bg !default;
$alert-warning-text: $state-warning-text !default;
$alert-warning-border: $state-warning-border !default;
$alert-danger-bg: $state-danger-bg !default;
$alert-danger-text: $state-danger-text !default;
$alert-danger-border: $state-danger-border !default;
//== Progress bars
//
//##
//** Background color of the whole progress component
$progress-bg: $gray-darker !default;
//** Progress bar text color
$progress-bar-color: #fff !default;
//** Default progress bar color
$progress-bar-bg: $primary !default;
//** Success progress bar color
$progress-bar-success-bg: $success !default;
//** Warning progress bar color
$progress-bar-warning-bg: $warning !default;
//** Danger progress bar color
$progress-bar-danger-bg: $danger !default;
//** Info progress bar color
$progress-bar-info-bg: $info !default;
//== List group
//
//##
//** Background color on `.list-group-item`
$list-group-bg: $gray-darker !default;
//** `.list-group-item` border color
$list-group-border: $gray-dark !default;
//** List group border radius
$list-group-border-radius: $border-radius-base !default;
//** Background color of single list items on hover
$list-group-hover-bg: lighten($list-group-bg, 15%) !default;
//** Text color of active list items
$list-group-active-color: $component-active-color !default;
//** Background color of active list items
$list-group-active-bg: $component-active-bg !default;
//** Border color of active list elements
$list-group-active-border: $list-group-active-bg !default;
//** Text color for content within active list items
$list-group-active-text-color: lighten($list-group-active-bg, 40%) !default;
//** Text color of disabled list items
$list-group-disabled-color: $gray-light !default;
//** Background color of disabled list items
$list-group-disabled-bg: $gray-lighter !default;
//** Text color for content within disabled list items
$list-group-disabled-text-color: $list-group-disabled-color !default;
$list-group-link-color: $text-color !default;
$list-group-link-hover-color: $list-group-link-color !default;
$list-group-link-heading-color: #fff !default;
//== Breadcrumbs
//
//##
$breadcrumb-padding-vertical: 8px !default;
$breadcrumb-padding-horizontal: 15px !default;
$breadcrumb-bg: $gray-darker !default;
$breadcrumb-color: #fff !default;
//** Text color of current page in the breadcrumb
$breadcrumb-active-color: $text-color !default;
//** Textual separator for between breadcrumb elements
$breadcrumb-separator: "/" !default;
//== Carousel
//
//##
$carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6) !default;
$carousel-control-color: #fff !default;
$carousel-control-width: 15% !default;
$carousel-control-opacity: .5 !default;
$carousel-control-font-size: 20px !default;
$carousel-indicator-active-bg: #fff !default;
$carousel-indicator-border-color: #fff !default;
$carousel-caption-color: #fff !default;
//== Close
//
//##
$close-font-weight: bold !default;
$close-color: #000 !default;
$close-text-shadow: 0 1px 0 #fff !default;
//== Code
//
//##
$code-color: #c7254e !default;
$code-bg: #f9f2f4 !default;
$kbd-color: #fff !default;
$kbd-bg: #333 !default;
$pre-bg: #f5f5f5 !default;
$pre-color: $gray-dark !default;
$pre-border-color: #ccc !default;
$pre-scrollable-max-height: 340px !default;
//== Type
//
//##
//** Horizontal offset for forms and lists.
$component-offset-horizontal: 180px !default;
//** Abbreviations and acronyms border color
$abbr-border-color: $gray-light !default;
//** Headings small color
$headings-small-color: $primary !default;
//** Blockquote small color
$blockquote-small-color: $gray !default;
//** Blockquote font size
$blockquote-font-size: ($font-size-base * 1.25) !default;
//** Blockquote border color
$blockquote-border-color: $gray-dark !default;
//** Page header border color
$page-header-border-color: $gray-dark !default;
//** Width of horizontal description list titles
$dl-horizontal-offset: $component-offset-horizontal !default;
//** Horizontal line color.
$hr-border: $gray-dark !default;
@import "base.scss";

@ -0,0 +1,5 @@
// All dark themes
$input-group-addon-color: #222;
$input-disabled-bg: #111;
$alert-bg-scale: 70%;
$secondary: #222;

@ -0,0 +1,7 @@
// All light themes
$secondary: #bec4ce;
.btn.btn-secondary {
background-color: rgba(255, 255, 255, 0.3);
}

@ -1,2 +0,0 @@
// light
@import "base.less";

@ -0,0 +1,16 @@
// light theme
@import "light";
$primary: #337ab7;
$light: #f5f5f5;
@import "base.scss";
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
&.bg-primary,
&.bg-success,
&.bg-danger {
color: #fff;
}
}

@ -1,98 +0,0 @@
// dark
@import "cyborg_variables.less";
// Variables
// --------------------------------------------------
//== changed Colors
@gray-dark: #282828; // #333
@gray-light: #888; // #999
@gray-lighter: #ADAFAE; // #eee
@brand-primary: #428bca;
@brand-success: #5cb85c;
@brand-info: #5bc0de;
@brand-warning: #f0ad4e;
//== changed Buttons
@btn-default-color: #fff;
@btn-default-bg: lighten(@gray-dark, 10%);
@btn-primary-border: darken(@btn-default-bg, 10%);
@btn-success-border: @btn-primary-border;
@btn-info-border: @btn-primary-border;
@btn-warning-border: @btn-primary-border;
@btn-danger-border: @btn-primary-border;
@btn-link-disabled-color: @gray-light;
//== changed Forms
@input-bg: @gray-darker;
@input-bg-disabled: lighten(@gray-lighter,15%);
@input-group-addon-bg: @gray-lighter;
//== changed Pagination
@pagination-hover-color: #fff;
@pagination-active-color: #fff;
//== changed Form states and alerts
@state-success-text: #fff;
@state-success-bg: @brand-success;
@state-success-border: darken(@state-success-bg, 5%);
@state-info-text: #fff;
@state-info-bg: @brand-info;
@state-info-border: darken(@state-info-bg, 7%);
@state-warning-text: #fff;
@state-warning-bg: @brand-warning;
@state-warning-border: darken(@state-warning-bg, 3%);
@state-danger-text: #fff;
@state-danger-bg: @brand-danger;
@state-danger-border: darken(@state-danger-bg, 3%);
//== changed Badges
@badge-color: #fff;
@badge-link-hover-color: #fff;
//== changed Type
@headings-small-color: @gray-light;
// Bootswatch
// -----------------------------------------------------
@import "cyborg_styles.less";
// added Forms ======================================================================
.input-group-addon {
background-color: @btn-default-bg;
}
// different code tag
code {
background-color: @state-info-bg;
color: @state-info-text;
}

@ -0,0 +1,85 @@
// Variables
// --------------------------------------------------
@import "dark";
//== changed Colors
$gray-darker: #222;
$gray-dark: #282828;
$gray-light: #888;
$gray-lighter: #ADAFAE;
$primary: #437aca;
$secondary: #424242;
$success: #00c960;
$info: #3dbddf;
$warning: #f6b345;
$danger: #e93a44;
$text-muted: $gray-light;
$btn-link-disabled-color: $gray-light;
//== changed Forms
$input-bg: $gray-darker;
$input-bg-disabled: lighten($gray-lighter,15%);
$input-group-addon-bg: $gray-lighter;
//== changed Pagination
$pagination-hover-color: #fff;
$pagination-active-color: #fff;
//== changed Form states and alerts
$state-success-text: #fff;
$state-success-bg: $success;
$state-success-border: darken($state-success-bg, 5%);
$state-info-text: #fff;
$state-info-bg: $info;
$state-info-border: darken($state-info-bg, 7%);
$state-warning-text: #fff;
$state-warning-bg: $warning;
$state-warning-border: darken($state-warning-bg, 3%);
$state-danger-text: #fff;
$state-danger-bg: $danger;
$state-danger-border: darken($state-danger-bg, 3%);
$headings-small-color: $gray-light;
code {
background-color: $state-info-bg;
color: $state-info-text;
}
$alert-bg-scale: 0%;
$alert-border-scale: 0%;
$alert-color-scale: 0%;
.alert {
color: #fff !important;
.text-danger,
.text-info {
color: #fff !important;
}
}
// dark
@import "cyborg_variables";
@import "cyborg_styles";
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
&.bg-warning,
&.bg-info {
color: #000;
}
}

@ -1,57 +0,0 @@
// cccamp19 green (2019)
@import "cyborg_variables.less";
// Variables
// --------------------------------------------------
//== changed Colors
@gray-dark: #282828; // #333
@gray-light: #888; // #999
@gray-lighter: #ADAFAE; // #eee
@brand-primary: #99ba00;
@import "cyborg_styles.less";
// Specials for cccamp19 design
.navbar-brand {
.icon-icon_angel {
background-color: @brand-primary;
}
strong {
font-weight: lighter;
color: @brand-primary;
text-shadow:
0 0 10px @brand-primary,
0 0 20px @brand-primary,
0 0 30px @brand-primary,
0 0 40px @brand-primary,
0 0 70px @brand-primary,
0 0 80px @brand-primary;
}
}
h1 {
font-weight: lighter;
color: @brand-primary;
text-shadow: 0 0 10px @brand-primary;
.icon-icon_angel {
background-color: @brand-primary;
}
}
.panel-title {
color: #fff;
}
.input-group-addon {
color: #000;
.icon-icon_angel {
background-color: #000;
}
}

@ -0,0 +1,64 @@
// cccamp19 green (2019)
// Variables
// --------------------------------------------------
@import "dark";
//== changed Colors
$gray-dark: #282828;
$gray-light: #888;
$gray-lighter: #ADAFAE;
$brand-primary: #99ba00;
$primary: $brand-primary;
$text-muted: $primary;
@import "cyborg_variables.scss";
@import "cyborg_styles.scss";
// Specials for cccamp19 design
@import "card-glow";
.navbar-brand {
.icon-icon_angel {
background-color: $brand-primary;
}
strong {
font-weight: normal;
color: $brand-primary;
text-shadow:
0 0 10px $brand-primary,
0 0 20px $brand-primary,
0 0 30px $brand-primary,
0 0 40px $brand-primary,
0 0 70px $brand-primary,
0 0 80px $brand-primary;
}
}
h1 {
font-weight: normal;
color: $brand-primary;
text-shadow: 0 0 10px $brand-primary;
.icon-icon_angel {
background-color: $brand-primary;
}
}
.input-group-addon {
color: #000;
.icon-icon_angel {
background-color: #000;
}
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
&.bg-warning {
color: #000;
}
}

@ -1,104 +0,0 @@
// high contrast
@import "cyborg_variables.less";
// Variables
// --------------------------------------------------
//== Colors
@gray-dark: #282828; // #333
@gray-light: #888; // #999
@gray-lighter: #ADAFAE; // #eee
@brand-primary: #72abfa;
@brand-success: #5cb85c;
@brand-info: #5bc0de;
@brand-warning: #f0ad4e;
//== Scaffolding
@body-bg: #000;
@text-color: #fff;
//== Buttons
@btn-default-color: #fff;
@btn-default-bg: lighten(@gray-dark, 10%);
@btn-primary-color: #000;
@btn-primary-border: darken(@btn-default-bg, 10%);
@btn-success-color: #000;
@btn-success-border: darken(@btn-default-bg, 10%);
@btn-info-color: #000;
@btn-info-border: darken(@btn-default-bg, 10%);
@btn-warning-color: #000;
@btn-warning-border: darken(@btn-default-bg, 10%);
@btn-danger-color: #000;
@btn-danger-border: darken(@btn-default-bg, 10%);
//== Forms
@input-bg: @gray-darker;
@input-bg-disabled: @gray-lighter;
@input-group-addon-bg: @gray-lighter;
//== Pagination
@pagination-hover-color: #fff;
//== Labels
@label-default-bg: lighten(@btn-default-bg, 20%);
@label-color: #000;
@label-link-hover-color: #000;
//== Badges
@badge-link-hover-color: #fff;
//== Type
@text-muted: @gray-lighter;
@abbr-border-color: @gray-lighter;
@headings-small-color: @gray-lighter;
// Bootswatch
// -----------------------------------------------------
@import "cyborg_styles.less";
// Typography =================================================================
.text-danger,
.text-danger:hover {
color: lighten(@brand-danger, 10%);
}
// Forms ======================================================================
.legend {
margin-top: 20px;
}
.input-group-addon {
background-color: @btn-default-bg;
}
// Containers =================================================================
.panel-info .panel-title {
color: #000;
}
// code tag
code {
background-color: @btn-default-bg;
color: @input-color;
}

@ -0,0 +1,114 @@
// high contrast
// Variables
// --------------------------------------------------
@import "dark";
//== Colors
$gray-dark: #282828;
$gray-darker: #222;
$gray-light: #888;
$gray-lighter: #ADAFAE;
$brand-primary: #72abfa;
$primary: $brand-primary;
$brand-success: #5cb85c;
$success: $brand-success;
$brand-info: #5bc0de;
$info: $brand-info;
$brand-danger: #d9534f;
$danger: $brand-danger;
$brand-warning: #f0ad4e;
$warning: $brand-warning;
//== Scaffolding
$body-bg: #000;
$body-color: #fff;
//== Buttons
$btn-color: #fff;
$btn-default-bg: lighten($gray-dark, 10%);
$btn-primary-color: #000;
$btn-primary-border: darken($btn-default-bg, 10%);
$btn-success-color: #000;
$btn-success-border: darken($btn-default-bg, 10%);
$btn-info-color: #000;
$btn-info-border: darken($btn-default-bg, 10%);
$btn-warning-color: #000;
$btn-warning-border: darken($btn-default-bg, 10%);
$btn-danger-color: #000;
$btn-danger-border: darken($btn-default-bg, 10%);
//== Forms
$input-bg: $gray-darker;
$input-bg-disabled: $gray-lighter;
$input-group-addon-bg: $gray-lighter;
//== Pagination
$pagination-hover-color: #fff;
//== Labels
$label-default-bg: lighten($btn-default-bg, 20%);
$label-color: #000;
$label-link-hover-color: #000;
//== Type
$text-muted: $gray-lighter;
$abbr-border-color: $gray-lighter;
$headings-small-color: $gray-lighter;
// Bootswatch
// -----------------------------------------------------
@import "cyborg_variables.scss";
@import "cyborg_styles.scss";
// Typography =================================================================
.text-danger,
.text-danger:hover {
color: lighten($brand-danger, 10%);
}
// Forms ======================================================================
.legend {
margin-top: 20px;
}
.input-group-addon {
background-color: $btn-default-bg;
}
// code tag
code {
background-color: $btn-default-bg;
color: #fff;
}
.navbar-dark .navbar-nav .nav-link {
color: #fff;
}
.badge {
color: #000 !important;
&.bg-dark {
color: #fff !important;
}
}

@ -1,107 +0,0 @@
// 36c3
@import "cyborg_variables.less";
//== Colors
@gray-dark: #282828; // #333
@gray-light: #888; // #999
@gray-lighter: #D0D0CE; // #eee
@black: #000;
@brand-primary: #fe5000;
@brand-success: #00bb31;
@brand-info: #5bc0de;
@brand-warning: #febb00;
@brand-danger: #bb3100;
//== Scaffolding
@body-bg: #000;
@text-color: @gray-lighter;
//== Buttons
@btn-default-color: @gray-lighter;
@btn-default-bg: lighten(@gray-dark, 10%);
@btn-primary-color: @black;
@btn-primary-border: darken(@btn-default-bg, 10%);
@btn-success-color: @black;
@btn-success-border: darken(@btn-default-bg, 10%);
@btn-info-color: @black;
@btn-info-border: darken(@btn-default-bg, 10%);
@btn-warning-color: @black;
@btn-warning-border: darken(@btn-default-bg, 10%);
@btn-danger-border: darken(@btn-default-bg, 10%);
//== Forms
@input-bg: @gray-darker;
@input-bg-disabled: darken(@gray-dark, 10%);
@input-group-addon-bg: @gray-lighter;
//== Pagination
@pagination-color: @black;
@pagination-hover-color: @black;
@pagination-active-color: @black;
//== Labels
@label-color: #000;
@label-link-hover-color: @gray-dark;
//== Panels
@panel-primary-text: #000;
//== Badges
@badge-color: @black;
@badge-link-hover-color: @black;
//== Type
@headings-small-color: @gray-light;
// Bootswatch
// -----------------------------------------------------
@import "cyborg_styles.less";
// Forms ======================================================================
.input-group-addon {
background-color: @btn-default-bg;
}
// Containers =================================================================
// datetimepicker
.bootstrap-datetimepicker-widget {
.timepicker-hour,
.timepicker-minute,
[data-action='selectHour'],
[data-action='selectMinute'],
[data-action='incrementHours'],
[data-action='decrementHours'],
[data-action='incrementMinutes'],
[data-action='decrementMinutes'] {
&:hover {
color: @gray;
}
}
}
// code tag
code {
background-color: @btn-default-bg;
color: @input-color;
}

@ -0,0 +1,109 @@
// 36c3
//== Colors
@import "dark";
$gray-dark: #282828;
$gray-darker: #222;
$gray-light: #888;
$gray-lighter: #D0D0CE;
$black: #000;
$brand-primary: #fe5000;
$primary: $brand-primary;
$brand-success: #00bb31;
$success: $brand-success;
$brand-info: #5bc0de;
$info: $brand-info;
$brand-warning: #febb00;
$warning: $brand-warning;
$brand-danger: #bb3100;
$danger: $brand-danger;
//== Scaffolding
$body-bg: #000;
$text-color: $gray-lighter;
//== Buttons
$btn-color: $gray-lighter;
$btn-default-bg: lighten($gray-dark, 10%);
$btn-primary-color: $black;
$btn-primary-border: darken($btn-default-bg, 10%);
$btn-success-color: $black;
$btn-success-border: darken($btn-default-bg, 10%);
$btn-info-color: $black;
$btn-info-border: darken($btn-default-bg, 10%);
$btn-warning-color: $black;
$btn-warning-border: darken($btn-default-bg, 10%);
$btn-danger-border: darken($btn-default-bg, 10%);
//== Forms
$input-bg: $gray-darker;
$input-bg-disabled: darken($gray-dark, 10%);
$input-group-addon-bg: $gray-lighter;
//== Pagination
$pagination-color: $black;
$pagination-hover-color: $black;
$pagination-active-color: $black;
//== Labels
$label-color: #000;
$label-link-hover-color: $gray-dark;
//== Badges
$badge-color: $black;
//== Type
$headings-small-color: $gray-light;
// Bootswatch
// -----------------------------------------------------
@import "cyborg_variables.scss";
@import "cyborg_styles.scss";
// Forms ======================================================================
.input-group-addon {
background-color: $btn-default-bg;
}
// Containers =================================================================
// datetimepicker
.bootstrap-datetimepicker-widget {
.timepicker-hour,
.timepicker-minute,
[data-action='selectHour'],
[data-action='selectMinute'],
[data-action='incrementHours'],
[data-action='decrementHours'],
[data-action='incrementMinutes'],
[data-action='decrementMinutes'] {
&:hover {
color: $gray;
}
}
}
// code tag
code {
background-color: $btn-default-bg;
color: $input-color;
}

@ -1,164 +0,0 @@
// rc3
@import "cyborg_variables.less";
//== Colors
@gray-darker: #100e23;
@gray-dark: lighten(@gray-darker, 15%);
@gray: lighten(@gray-dark, 15%);
@gray-light: lighten(@gray, 15%);
@gray-lighter: lighten(@gray-light, 15%);
@black: #000;
@brand-primary: #6800e7;
@brand-success: #05b9ec;
@brand-info: #670295;
@brand-warning: #fff900;
@brand-danger: #b239ff;
//== Scaffolding
@body-bg: #000;
@text-color: @gray-lighter;
@link-color: #fff;
//== Typography
@font-face {
font-family: 'Montserrat';
src: url('theme13/Montserrat-Regular.woff2') format('woff2'),
url('theme13/Montserrat-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Orbitron';
src: url('theme13/Orbitron-Regular.woff2') format('woff2'),
url('theme13/Orbitron-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-family-sans-serif: 'Montserrat', Helvetica Neue, Helvetica, Arial, sans-serif;
@font-family-serif: 'Orbitron', Georgia, "Times New Roman", Times, serif;
@headings-font-family: @font-family-serif;
//== Buttons
@btn-default-color: #fff;
@btn-default-bg: lighten(@gray-dark, 10%);
@btn-primary-color: #fff;
@btn-primary-border: darken(@btn-default-bg, 10%);
@btn-success-color: #fff;
@btn-success-border: darken(@btn-default-bg, 10%);
@btn-info-color: #fff;
@btn-info-border: darken(@btn-default-bg, 10%);
@btn-warning-color: #fff;
@btn-warning-border: darken(@btn-default-bg, 10%);
@btn-danger-color: #fff;
@btn-danger-border: darken(@btn-default-bg, 10%);
//== Forms
@input-bg: @gray-darker;
@input-bg-disabled: darken(@gray-dark, 10%);
@input-group-addon-bg: @gray-lighter;
//== Pagination
@pagination-color: @black;
@pagination-hover-color: @black;
@pagination-active-color: @black;
//== Form states and alerts
@state-success-text: #fff;
@state-info-text: #fff;
@state-warning-text: #fff;
@state-danger-text: #fff;
//== Labels
@label-link-hover-color: @gray-dark;
//== Panels
@panel-primary-text: #000;
@panel-success-text: #fff;
@panel-info-text: #fff;
@panel-warning-text: #fff;
@panel-danger-text: #fff;
//== Badges
@badge-color: @black;
@badge-link-hover-color: @black;
//== Type
@headings-small-color: @gray-light;
// Bootswatch
// -----------------------------------------------------
@import "cyborg_styles.less";
// Forms ======================================================================
.input-group-addon {
background-color: @btn-default-bg;
}
// Containers =================================================================
// datetimepicker
.bootstrap-datetimepicker-widget {
.timepicker-hour,
.timepicker-minute,
[data-action='selectHour'],
[data-action='selectMinute'],
[data-action='incrementHours'],
[data-action='decrementHours'],
[data-action='incrementMinutes'],
[data-action='decrementMinutes'] {
&:hover {
color: @gray;
}
}
}
// code tag
code {
background-color: @input-bg-disabled;
color: @input-color;
}
// Specials ===================================================================
body {
background: #000 url('theme13/background.jpg') no-repeat top left;
}
.navbar.navbar-default {
background: rgba(0,0,0,0.8);
backdrop-filter: blur(6px);
}

@ -0,0 +1,164 @@
// rc3 violet
//== Colors
@import "dark";
$gray-darker: #100e23;
$gray-dark: lighten($gray-darker, 15%);
$gray: lighten($gray-dark, 15%);
$gray-light: lighten($gray, 15%);
$gray-lighter: lighten($gray-light, 15%);
$black: #000;
$brand-primary: #6800e7;
$primary: $brand-primary;
$brand-success: #05b9ec;
$secondary: #3a327e;
$success: $brand-success;
$brand-info: #670295;
$info: $brand-info;
$brand-warning: #fff900;
$warning: $brand-warning;
$brand-danger: #b239ff;
$danger: $brand-danger;
//== Scaffolding
$body-bg: #000;
$text-color: $gray-lighter;
$link-color: #fff;
//== Typography
@font-face {
font-family: 'Montserrat';
src: url('theme13/Montserrat-Regular.woff2') format('woff2'),
url('theme13/Montserrat-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Orbitron';
src: url('theme13/Orbitron-Regular.woff2') format('woff2'),
url('theme13/Orbitron-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
$font-family-sans-serif: 'Montserrat', Helvetica Neue, Helvetica, Arial, sans-serif;
$font-family-serif: 'Orbitron', Georgia, "Times New Roman", Times, serif;
$headings-font-family: $font-family-serif;
//== Buttons
$btn-color: #fff;
$btn-default-bg: lighten($gray-dark, 10%);
$btn-primary-color: #fff;
$btn-primary-border: darken($btn-default-bg, 10%);
$btn-success-color: #fff;
$btn-success-border: darken($btn-default-bg, 10%);
$btn-info-color: #fff;
$btn-info-border: darken($btn-default-bg, 10%);
$btn-warning-color: #fff;
$btn-warning-border: darken($btn-default-bg, 10%);
$btn-danger-color: #fff;
$btn-danger-border: darken($btn-default-bg, 10%);
//== Forms
$input-bg: $gray-darker;
$input-bg-disabled: darken($gray-dark, 10%);
$input-group-addon-bg: $gray-lighter;
//== Pagination
$pagination-color: $black;
$pagination-hover-color: $black;
$pagination-active-color: $black;
//== Form states and alerts
$state-success-text: #fff;
$state-info-text: #fff;
$state-warning-text: #fff;
$state-danger-text: #fff;
//== Labels
$label-link-hover-color: $gray-dark;
//== Badges
$badge-color: $black;
//== Type
$headings-small-color: $gray-light;
// Bootswatch
// -----------------------------------------------------
@import "cyborg_variables.scss";
@import "cyborg_styles.scss";
// Forms ======================================================================
.input-group-addon {
background-color: $btn-default-bg;
}
// Containers =================================================================
// datetimepicker
.bootstrap-datetimepicker-widget {
.timepicker-hour,
.timepicker-minute,
[data-action='selectHour'],
[data-action='selectMinute'],
[data-action='incrementHours'],
[data-action='decrementHours'],
[data-action='incrementMinutes'],
[data-action='decrementMinutes'] {
&:hover {
color: $gray;
}
}
}
// code tag
code {
background-color: $input-bg-disabled;
color: $input-color;
}
// Specials ===================================================================
body {
background: #000 url('theme13/background.jpg') no-repeat top left;
}
.navbar.navbar-default {
background: rgba(0,0,0,0.8);
backdrop-filter: blur(6px);
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
&.bg-warning {
color: #000;
}
}

@ -1,165 +0,0 @@
// rc3 teal
@import "cyborg_variables.less";
//== Colors
@gray-darker: #0e1c23;
@gray-dark: lighten(@gray-darker, 15%);
@gray: lighten(@gray-dark, 15%);
@gray-light: lighten(@gray, 15%);
@gray-lighter: lighten(@gray-light, 15%);
@black: #000;
@brand-primary: #05b9ec;
@brand-success: #02fae0;
@brand-info: #025d83;
@brand-warning: #6800e7;
@brand-danger: #b239ff;
//== Scaffolding
@body-bg: #000;
@text-color: @gray-lighter;
@link-color: #fff;
//== Typography
@font-face {
font-family: 'Montserrat';
src: url('theme13/Montserrat-Regular.woff2') format('woff2'),
url('theme13/Montserrat-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Orbitron';
src: url('theme13/Orbitron-Regular.woff2') format('woff2'),
url('theme13/Orbitron-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-family-sans-serif: 'Montserrat', Helvetica Neue, Helvetica, Arial, sans-serif;
@font-family-serif: 'Orbitron', Georgia, "Times New Roman", Times, serif;
@headings-font-family: @font-family-serif;
//== Buttons
@btn-default-color: #fff;
@btn-default-bg: lighten(@gray-dark, 10%);
@btn-primary-color: #fff;
@btn-primary-border: darken(@btn-default-bg, 10%);
@btn-success-color: #fff;
@btn-success-border: darken(@btn-default-bg, 10%);
@btn-info-color: #fff;
@btn-info-border: darken(@btn-default-bg, 10%);
@btn-warning-color: #fff;
@btn-warning-border: darken(@btn-default-bg, 10%);
@btn-danger-color: #fff;
@btn-danger-border: darken(@btn-default-bg, 10%);
//== Forms
@input-bg: @gray-darker;
@input-bg-disabled: darken(@gray-dark, 10%);
@input-group-addon-bg: @gray-lighter;
//== Pagination
@pagination-color: @black;
@pagination-hover-color: @black;
@pagination-active-color: @black;
//== Form states and alerts
@state-success-text: #fff;
@state-info-text: #fff;
@state-warning-text: #fff;
@state-danger-text: #fff;
//== Labels
@label-link-hover-color: @gray-dark;
//== Panels
@panel-primary-text: #000;
@panel-success-text: #fff;
@panel-info-text: #fff;
@panel-warning-text: #fff;
@panel-danger-text: #fff;
//== Badges
@badge-color: @black;
@badge-link-hover-color: @black;
//== Type
@headings-small-color: @gray-light;
// Bootswatch
// -----------------------------------------------------
@import "cyborg_styles.less";
// Forms ======================================================================
.input-group-addon {
background-color: @btn-default-bg;
}
// Containers =================================================================
// datetimepicker
.bootstrap-datetimepicker-widget {
.timepicker-hour,
.timepicker-minute,
[data-action='selectHour'],
[data-action='selectMinute'],
[data-action='incrementHours'],
[data-action='decrementHours'],
[data-action='incrementMinutes'],
[data-action='decrementMinutes'] {
&:hover {
color: @gray;
}
}
}
// code tag
code {
background-color: @input-bg-disabled;
color: @input-color;
}
// Specials ===================================================================
body {
background: #000 url('theme13/background14.jpg') no-repeat top left;
}
.navbar.navbar-default {
background: rgba(0,0,0,0.8);
backdrop-filter: blur(6px);
}

@ -0,0 +1,158 @@
// rc3 teal
//== Colors
@import "dark";
$gray-darker: #0e1c23;
$gray-dark: lighten($gray-darker, 15%);
$gray: lighten($gray-dark, 15%);
$gray-light: lighten($gray, 15%);
$gray-lighter: lighten($gray-light, 15%);
$black: #000;
$brand-primary: #05b9ec;
$primary: $brand-primary;
$secondary: #32657e;
$brand-success: #02fae0;
$success: $brand-success;
$brand-info: #025d83;
$info: $brand-info;
$brand-warning: #6800e7;
$warning: $brand-warning;
$brand-danger: #b239ff;
$danger: $brand-danger;
//== Scaffolding
$body-bg: #000;
$text-color: $gray-lighter;
$link-color: #fff;
//== Typography
@font-face {
font-family: 'Montserrat';
src: url('theme13/Montserrat-Regular.woff2') format('woff2'),
url('theme13/Montserrat-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Orbitron';
src: url('theme13/Orbitron-Regular.woff2') format('woff2'),
url('theme13/Orbitron-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
$font-family-sans-serif: 'Montserrat', Helvetica Neue, Helvetica, Arial, sans-serif;
$font-family-serif: 'Orbitron', Georgia, "Times New Roman", Times, serif;
$headings-font-family: $font-family-serif;
//== Buttons
$btn-color: #fff;
$btn-default-bg: lighten($gray-dark, 10%);
$btn-primary-color: #fff;
$btn-primary-border: darken($btn-default-bg, 10%);
$btn-success-color: #fff;
$btn-success-border: darken($btn-default-bg, 10%);
$btn-info-color: #fff;
$btn-info-border: darken($btn-default-bg, 10%);
$btn-warning-color: #fff;
$btn-warning-border: darken($btn-default-bg, 10%);
$btn-danger-color: #fff;
$btn-danger-border: darken($btn-default-bg, 10%);
//== Forms
$input-bg: $gray-darker;
$input-bg-disabled: darken($gray-dark, 10%);
$input-group-addon-bg: $gray-lighter;
//== Pagination
$pagination-color: $black;
$pagination-hover-color: $black;
$pagination-active-color: $black;
//== Form states and alerts
$state-success-text: #fff;
$state-info-text: #fff;
$state-warning-text: #fff;
$state-danger-text: #fff;
//== Labels
$label-link-hover-color: $gray-dark;
//== Badges
$badge-color: $black;
//== Type
$headings-small-color: $gray-light;
// Bootswatch
// -----------------------------------------------------
@import "cyborg_variables.scss";
@import "cyborg_styles.scss";
// Forms ======================================================================
.input-group-addon {
background-color: $btn-default-bg;
}
// Containers =================================================================
// datetimepicker
.bootstrap-datetimepicker-widget {
.timepicker-hour,
.timepicker-minute,
[data-action='selectHour'],
[data-action='selectMinute'],
[data-action='incrementHours'],
[data-action='decrementHours'],
[data-action='incrementMinutes'],
[data-action='decrementMinutes'] {
&:hover {
color: $gray;
}
}
}
// code tag
code {
background-color: $input-bg-disabled;
color: $input-color;
}
// Specials ===================================================================
body {
background: #000 url('theme13/background14.jpg') no-repeat top left;
}
.navbar.navbar-default {
background: rgba(0,0,0,0.8);
backdrop-filter: blur(6px);
}

File diff suppressed because it is too large Load Diff

@ -1,28 +0,0 @@
// cccamp15
@import "../../../node_modules/bootstrap/less/variables";
@brand-primary: #758499;
@brand-success: #7b9c41;
@brand-info: #9c7357;
@brand-warning: #e3a14d;
@brand-danger: #7f528b;
@link-color: #58585a;
@state-success-text: #638232;
@state-success-bg: lighten(@brand-success,50%);
@state-success-border: @brand-success;
@state-info-text: #826045;
@state-info-bg: lighten(@brand-info,50%);
@state-info-border: @brand-info;
@state-warning-text: #bc8640;
@state-warning-bg: lighten(@brand-warning,50%);
@state-warning-border: @brand-warning;
@state-danger-text: #694374;
@state-danger-bg: lighten(@brand-danger,50%);
@state-danger-border: @brand-danger;
@import "base.less";

@ -0,0 +1,39 @@
// cccamp15
@import "light";
$brand-primary: #758499;
$primary: #758499;
$brand-success: #7b9c41;
$success: #7b9c41;
$brand-info: #9c7357;
$info: #9c7357;
$brand-warning: #e3a14d;
$warning: #e3a14d;
$brand-danger: #7f528b;
$danger: #7f528b;
$link-color: #58585a;
$state-success-text: #638232;
$state-success-bg: lighten($brand-success,50%);
$state-success-border: $brand-success;
$state-info-text: #826045;
$state-info-bg: lighten($brand-info,50%);
$state-info-border: $brand-info;
$state-warning-text: #bc8640;
$state-warning-bg: lighten($brand-warning,50%);
$state-warning-border: $brand-warning;
$state-danger-text: #694374;
$state-danger-bg: lighten($brand-danger,50%);
$state-danger-border: $brand-danger;
@import "base.scss";
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
&.bg-danger {
color: #fff;
}
}

@ -1,56 +0,0 @@
// 32c3 (2015)
@import "../../../node_modules/bootstrap/less/variables";
@brand-primary: #f19224;
@brand-success: #39AB50;
@brand-info: #6618F9;
@brand-warning: #DAD216;
@brand-danger: #DA1639;
@state-success-text: @brand-success;
@state-success-bg: lighten(@brand-success,40%);
@state-success-border: @brand-success;
@state-info-text: @brand-info;
@state-info-bg: lighten(@brand-info,40%);
@state-info-border: @brand-info;
@state-warning-text: @brand-warning;
@state-warning-bg: lighten(@brand-warning,40%);
@state-warning-border: @brand-warning;
@state-danger-text: @brand-danger;
@state-danger-bg: lighten(@brand-danger,40%);
@state-danger-border: @brand-danger;
@navbar-default-color: #fff;
@navbar-default-bg: #000;
@navbar-default-border: #000;
@navbar-default-link-color: #fff;
@navbar-default-link-hover-color: #ddd;
@navbar-default-link-hover-bg: #222;
@navbar-default-link-active-color: @brand-primary;
@navbar-default-link-active-bg: #000;
@navbar-default-link-disabled-color:#777;
@navbar-default-link-disabled-bg: #000;
@navbar-default-brand-color: #fff;
@navbar-default-brand-hover-color: @brand-primary;
@navbar-default-brand-hover-bg: #000;
.navbar {
.bg-info {
background-color: darken(@brand-info, 30%);
}
.bg-danger {
background-color: darken(@brand-danger, 30%);
}
}
#shifts td a {
color: #000;
}
@import "base.less";

@ -0,0 +1,75 @@
// 32c3 (2015)
@import "light";
$brand-primary: #f19224;
$primary: #f19224;
$brand-success: #39AB50;
$success: #39AB50;
$brand-info: #6618F9;
$info: #6618F9;
$brand-warning: #DAD216;
$warning: #DAD216;
$brand-danger: #DA1639;
$danger: #DA1639;
$state-success-text: $brand-success;
$state-success-bg: lighten($brand-success,40%);
$state-success-border: $brand-success;
$state-info-text: $brand-info;
$state-info-bg: lighten($brand-info,40%);
$state-info-border: $brand-info;
$state-warning-text: $brand-warning;
$state-warning-bg: lighten($brand-warning,40%);
$state-warning-border: $brand-warning;
$state-danger-text: $brand-danger;
$state-danger-bg: lighten($brand-danger,40%);
$state-danger-border: $brand-danger;
$navbar-default-color: #fff;
$navbar-default-bg: #000;
$navbar-default-border: #000;
$navbar-default-link-color: #fff;
$navbar-default-link-hover-color: #ddd;
$navbar-default-link-hover-bg: #222;
$navbar-default-link-active-color: $brand-primary;
$navbar-default-link-active-bg: #000;
$navbar-default-link-disabled-color:#777;
$navbar-default-link-disabled-bg: #000;
$navbar-default-brand-color: #fff;
$navbar-default-brand-hover-color: $brand-primary;
$navbar-default-brand-hover-bg: #000;
.navbar {
.bg-info {
background-color: darken($brand-info, 30%);
}
.bg-danger {
background-color: darken($brand-danger, 30%);
}
}
#shifts td a {
color: #000;
}
.card.bg-info .card-header a {
color: lighten($brand-info, 50%);
&:hover {
color: lighten($brand-info, 50%);
}
}
@import "base.scss";
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
&.bg-info {
color: #fff;
}
}

@ -1,112 +0,0 @@
// 33c3 (2016)
@import "cyborg_variables.less";
// Variables
// --------------------------------------------------
//== changed Colors
@gray-dark: #282828; // #333
@gray-light: #888; // #999
@gray-lighter: #ADAFAE; // #eee
@brand-primary: rgb(0, 156, 139);
@brand-success: rgb(141, 193, 35);
@brand-info: rgb(70, 71, 73);
@brand-warning: rgb(255, 244, 95);
@brand-danger: rgb(277, 38, 60);
//== changed Scaffolding
@body-bg: #1d1d1b;
//== changed Buttons
@btn-default-color: #fff;
@btn-default-bg: lighten(@gray-dark, 10%);
@btn-primary-border: darken(@btn-default-bg, 10%);
@btn-success-border: darken(@btn-default-bg, 10%);
@btn-info-border: darken(@btn-default-bg, 10%);
@btn-warning-border: darken(@btn-default-bg, 10%);
@btn-danger-border: darken(@btn-default-bg, 10%);
//== changed Forms
@input-bg: @gray-darker;
@input-bg-disabled: @gray-lighter;
@input-group-addon-bg: @gray-lighter;
//== Pagination
@pagination-hover-color: #fff;
@pagination-active-color: #fff;
//== changed Form states and alerts
@state-success-text: #fff;
@state-success-bg: @brand-success;
@state-success-border: darken(@state-success-bg, 5%);
@state-info-text: #fff;
@state-info-bg: @brand-info;
@state-info-border: darken(@state-info-bg, 7%);
@state-warning-text: darken(@brand-warning, 40%);
@state-warning-bg: @brand-warning;
@state-warning-border: darken(@state-warning-bg, 3%);
@state-danger-text: #fff;
@state-danger-bg: @brand-danger;
@state-danger-border: darken(@state-danger-bg, 3%);
//== changed Badges
@badge-color: #fff;
@badge-link-hover-color: #fff;
//== changed Type
@headings-small-color: @gray-light;
// Bootswatch
// -----------------------------------------------------
@import "cyborg_styles.less";
// added Forms ======================================================================
.input-group-addon {
background-color: @btn-default-bg;
}
// added Containers =================================================================
.label-warning, .label-success, .progress-bar-warning, .progress-bar-success,
.panel-warning .panel-heading, .panel-warning .panel-heading a,
.panel-success .panel-heading, .panel-success .panel-heading a {
color: @gray-darker;
}
// different code tag
code {
background-color: @state-info-bg;
color: @state-info-text;
}

@ -0,0 +1,124 @@
// 33c3 (2016)
@import "dark";
// Variables
//== changed Colors
$gray-dark: #282828;
$gray-darker: #222;
$gray-light: #888;
$gray-lighter: #ADAFAE;
$brand-primary: rgb(0, 156, 139);
$primary: rgb(0, 156, 139);
$secondary: #424242;
$brand-success: rgb(141, 193, 35);
$success: rgb(141, 193, 35);
$brand-info: rgb(70, 71, 73);
$info: rgb(70, 71, 73);
$brand-warning: rgb(255, 244, 95);
$warning: rgb(255, 244, 95);
$brand-danger: rgb(277, 38, 60);
$danger: rgb(277, 38, 60);
$text-muted: lighten($gray-light, 25%);
//== changed Scaffolding
$body-bg: #1d1d1b;
$alert-bg-scale: 0%;
//== changed Buttons
$btn-color: #fff;
$btn-default-bg: lighten($gray-dark, 10%);
$btn-primary-border: darken($btn-default-bg, 10%);
$btn-success-border: darken($btn-default-bg, 10%);
$btn-info-border: darken($btn-default-bg, 10%);
$btn-warning-border: darken($btn-default-bg, 10%);
$btn-danger-border: darken($btn-default-bg, 10%);
//== changed Forms
$input-bg: $gray-darker;
$input-bg-disabled: $gray-lighter;
$input-group-addon-bg: $gray-lighter;
//== Pagination
$pagination-hover-color: #fff;
$pagination-active-color: #fff;
//== changed Form states and alerts
$state-success-text: #fff;
$state-success-bg: $brand-success;
$state-success-border: darken($state-success-bg, 5%);
$state-info-text: #fff;
$state-info-bg: $brand-info;
$state-info-border: darken($state-info-bg, 7%);
$state-warning-text: darken($brand-warning, 40%);
$state-warning-bg: $brand-warning;
$state-warning-border: darken($state-warning-bg, 3%);
$state-danger-text: #fff;
$state-danger-bg: $brand-danger;
$state-danger-border: darken($state-danger-bg, 3%);
//== changed Badges
$badge-color: #fff;
//== changed Type
$headings-small-color: $gray-light;
// Bootswatch
// -----------------------------------------------------
@import "cyborg_variables.scss";
@import "cyborg_styles.scss";
// added Forms ======================================================================
.input-group-addon {
background-color: $btn-default-bg;
}
.badge.bg-warning {
color: #000;
}
.card.bg-secondary .card-header,
.card.bg-secondary .card-footer {
color: $gray-lighter;
}
// different code tag
code {
background-color: $state-info-bg;
color: $state-info-text;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
&.bg-warning {
color: #000;
}
}

@ -1,32 +0,0 @@
// 34c3 light (2017)
@import "../../../node_modules/bootstrap/less/variables";
@brand-primary: rgb(164, 28, 49);
@brand-success: rgb(153, 204, 0);
@brand-info: rgb(0, 204, 255);
@brand-warning: rgb(255, 255, 51);
@brand-danger: rgb(255, 102, 0);
@link-color: @brand-primary;
@state-success-text: darken(@brand-success,40%);
@state-success-bg: lighten(@brand-success,40%);
@state-success-border: @brand-success;
@state-info-text: darken(@brand-info,40%);
@state-info-bg: lighten(@brand-info,40%);
@state-info-border: @brand-info;
@state-warning-text: darken(@brand-warning,40%);
@state-warning-bg: @brand-warning;
@state-warning-border: darken(@brand-warning,40%);
@state-danger-text: darken(@brand-danger,40%);
@state-danger-bg: lighten(@brand-danger,40%);
@state-danger-border: @brand-danger;
.label.label-warning {
color: #000;
}
@import "base.less";

@ -0,0 +1,43 @@
// 34c3 light (2017)
@import "light";
$brand-primary: rgb(164, 28, 49);
$primary: rgb(164, 28, 49);
$brand-success: rgb(153, 204, 0);
$success: rgb(153, 204, 0);
$brand-info: rgb(0, 204, 255);
$info: rgb(0, 204, 255);
$brand-warning: rgb(255, 255, 51);
$warning: rgb(255, 255, 51);
$brand-danger: rgb(255, 102, 0);
$danger: rgb(255, 102, 0);
$link-color: $brand-primary;
$state-success-text: darken($brand-success,40%);
$state-success-bg: lighten($brand-success,40%);
$state-success-border: $brand-success;
$state-info-text: darken($brand-info,40%);
$state-info-bg: lighten($brand-info,40%);
$state-info-border: $brand-info;
$state-warning-text: darken($brand-warning,40%);
$state-warning-bg: $brand-warning;
$state-warning-border: darken($brand-warning,40%);
$state-danger-text: darken($brand-danger,40%);
$state-danger-bg: lighten($brand-danger,40%);
$state-danger-border: $brand-danger;
.badge.bg-warning {
color: #000;
}
@import "base.scss";
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
&.bg-primary {
color: #fff;
}
}

@ -1,152 +0,0 @@
// 34c3 dark (2017)
@import "cyborg_variables.less";
// Variables
// --------------------------------------------------
//== changed Colors
@gray-dark: #282828; // #333
@gray-light: #888; // #999
@gray-lighter: #ADAFAE; // #eee
@brand-primary: rgb(164, 28, 49);
@brand-success: rgb(153, 204, 0);
@brand-info: rgb(0, 204, 255);
@brand-warning: rgb(255, 255, 51);
@brand-danger: rgb(255, 102, 0);
.label.label-warning, .progress-bar.progress-bar-warning {
color: #000;
}
//== changed Buttons
@btn-default-color: #fff;
@btn-default-bg: lighten(@gray-dark, 10%);
@btn-primary-border: darken(@btn-default-bg, 10%);
@btn-success-border: @btn-primary-border;
@btn-info-border: @btn-primary-border;
@btn-warning-border: @btn-primary-border;
@btn-danger-border: @btn-primary-border;
@btn-link-disabled-color: @gray-light;
//== changed Forms
@input-bg: @gray-darker;
@input-bg-disabled: @gray-lighter;
@input-group-addon-bg: @gray-lighter;
//== changed Pagination
@pagination-hover-color: #fff;
@pagination-active-color: #fff;
//== changed Form states and alerts
@state-success-text: #fff;
@state-success-bg: @brand-success;
@state-success-border: darken(@state-success-bg, 5%);
@state-info-text: #fff;
@state-info-bg: @brand-info;
@state-info-border: darken(@state-info-bg, 7%);
@state-warning-text: #000;
@state-warning-bg: @brand-warning;
@state-warning-border: darken(@state-warning-bg, 3%);
@state-danger-text: #fff;
@state-danger-bg: @brand-danger;
@state-danger-border: darken(@state-danger-bg, 3%);
//== changed List group
@list-group-bg: darken(@gray-darker, 10%);
//== changed Panels
@panel-bg: darken(@gray-darker, 10%);
@panel-default-heading-bg: darken(@gray-darker, 5%);
//== changed Badges
@badge-color: #fff;
@badge-link-hover-color: #fff;
//== changed Type
@headings-small-color: @gray-light;
// Bootswatch
// -----------------------------------------------------
@import "cyborg_styles.less";
// Typography =================================================================
.text-primary,
.text-primary:hover,
a.text-primary,
a.text-primary:hover {
color: @brand-primary;
}
.text-success,
.text-success:hover,
a.text-success,
a.text-success:hover {
color: @brand-success;
}
.text-danger,
.text-danger:hover,
a.text-danger,
a.text-danger:hover {
color: @brand-danger;
}
.text-warning,
.text-warning:hover,
a.text-warning,
a.text-warning:hover {
color: @brand-warning;
}
.text-info,
.text-info:hover,
a.text-info,
a.text-info:hover {
color: @brand-info;
}
// added Forms ======================================================================
.input-group-addon {
background-color: @btn-default-bg;
}
// different code tag
code {
background-color: @input-bg;
color: @input-color;
}

@ -0,0 +1,159 @@
// 34c3 dark (2017)
// Variables
// --------------------------------------------------
@import "dark";
//== changed Colors
$gray-dark: #282828;
$gray-light: #888;
$gray-darker: #222;
$gray-lighter: #ADAFAE;
$brand-primary: rgb(164, 28, 49);
$primary: rgb(164, 28, 49);
$brand-success: rgb(153, 204, 0);
$success: rgb(153, 204, 0);
$brand-info: rgb(0, 204, 255);
$info: rgb(0, 204, 255);
$brand-warning: rgb(255, 255, 51);
$warning: rgb(255, 255, 51);
$brand-danger: rgb(255, 102, 0);
$danger: rgb(255, 102, 0);
$secondary: #424242;
$alert-bg-scale: 0%;
.badge.bg-warning, .progress-bar.progress-bar-warning {
color: #000;
}
//== changed Buttons
$btn-color: #fff;
$btn-default-bg: lighten($gray-dark, 10%);
$btn-primary-border: darken($btn-default-bg, 10%);
$btn-success-border: $btn-primary-border;
$btn-info-border: $btn-primary-border;
$btn-warning-border: $btn-primary-border;
$btn-danger-border: $btn-primary-border;
$btn-link-disabled-color: $gray-light;
//== changed Forms
$input-bg: $gray-darker;
$input-bg-disabled: $gray-lighter;
$input-group-addon-bg: $gray-lighter;
//== changed Pagination
$pagination-hover-color: #fff;
$pagination-active-color: #fff;
//== changed Form states and alerts
$state-success-text: #fff;
$state-success-bg: $brand-success;
$state-success-border: darken($state-success-bg, 5%);
$state-info-text: #fff;
$state-info-bg: $brand-info;
$state-info-border: darken($state-info-bg, 7%);
$state-warning-text: #000;
$state-warning-bg: $brand-warning;
$state-warning-border: darken($state-warning-bg, 3%);
$state-danger-text: #fff;
$state-danger-bg: $brand-danger;
$state-danger-border: darken($state-danger-bg, 3%);
//== changed List group
$list-group-bg: darken($gray-darker, 10%);
//== changed Badges
$badge-color: #fff;
//== changed Type
$headings-small-color: $gray-light;
// Bootswatch
// -----------------------------------------------------
@import "cyborg_variables.scss";
@import "cyborg_styles.scss";
// Typography =================================================================
.text-primary,
.text-primary:hover,
a.text-primary,
a.text-primary:hover {
color: $brand-primary;
}
.text-success,
.text-success:hover,
a.text-success,
a.text-success:hover {
color: $brand-success;
}
.text-danger,
.text-danger:hover,
a.text-danger,
a.text-danger:hover {
color: $brand-danger;
}
.text-warning,
.text-warning:hover,
a.text-warning,
a.text-warning:hover {
color: $brand-warning;
}
.text-info,
.text-info:hover,
a.text-info,
a.text-info:hover {
color: $brand-info;
}
// added Forms ======================================================================
.input-group-addon {
background-color: $btn-default-bg;
}
// different code tag
code {
background-color: $input-bg;
color: $input-color;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
&.bg-warning {
color: #000;
}
}

@ -1,280 +0,0 @@
// 35c3 dark (2018)
@import "cyborg_variables.less";
// Variables
// --------------------------------------------------
//== changed Colors
// gray BEBOOT: #4d4d4c
// blue FRESH: #0084b0
// green HOPE: #00a356
// dark blue BASE: #18386b
// orange GLINT: #f9b000
// rot BEAT: #e40429
// violet TENACY: #44357e
@gray-darker: #000;
@gray-dark: #000;
@gray: #4d4d4c; // BEBOOT
@gray-light: @gray;
@gray-lighter: lighten(@gray, 15%);
@brand-primary: #0084b0; // FRESH
@brand-success: #00a356; // HOPE
@brand-info: @brand-primary;
@brand-warning: #f9b000; // GLINT
@brand-danger: #e40429; // BEAT
//== changed Scaffolding
@body-bg: #000;
@text-color: @gray-lighter;
@link-hover-color: lighten(@link-color, 10%);
//== changed Typography
@headings-color: @brand-primary;
//== changed Tables
@table-bg: @gray-darker;
@table-bg-accent: #111;
@table-border-color: @gray;
//== changed Buttons
@btn-default-color: @link-color;
@btn-default-bg: @gray-darker;
@btn-default-border: @brand-primary;
@btn-primary-color: @gray-darker;
@btn-primary-border: @brand-primary;
@btn-success-border: darken(@btn-default-bg, 10%);
@btn-info-color: @gray-darker;
@btn-info-border: darken(@btn-default-bg, 10%);
@btn-warning-color: @gray-darker;
@btn-warning-border: darken(@btn-default-bg, 10%);
@btn-danger-color: @gray-darker;
@btn-danger-border: darken(@btn-default-bg, 10%);
//== changed Forms
@input-bg: @gray-darker;
@input-color: @link-color;
@input-border: @brand-primary;
@input-group-addon-bg: @gray-lighter;
//== changed Dropdowns
@dropdown-border: @brand-primary;
@dropdown-fallback-border: @brand-primary;
@dropdown-divider-bg: @dropdown-border;
@dropdown-link-color: @link-color;
@dropdown-link-hover-color: @link-hover-color;
@dropdown-link-hover-bg: @dropdown-bg;
//== changed Navbar
@navbar-default-border: @brand-primary;
@navbar-default-link-hover-color: @link-hover-color;
@navbar-default-link-active-color: @brand-primary;
@navbar-default-brand-color: @brand-primary;
@navbar-default-brand-hover-color: lighten(@brand-primary, 10%);
//== changed Pagination
@pagination-color: @brand-primary;
@pagination-border: @brand-primary;
@pagination-hover-color: @gray-darker;
@pagination-hover-border: @pagination-border;
@pagination-active-color: @pagination-hover-color;
@pagination-active-bg: @pagination-hover-bg;
@pagination-active-border: @pagination-hover-border;
//== changed Form states and alerts
@state-success-text: @gray-darker;
@state-success-bg: @brand-success;
@state-success-border: darken(@state-success-bg, 5%);
@state-info-text: @gray-darker;
@state-info-bg: @brand-info;
@state-info-border: darken(@state-info-bg, 7%);
@state-warning-text: @gray-darker;
@state-warning-bg: @brand-warning;
@state-warning-border: darken(@state-warning-bg, 3%);
@state-danger-text: @gray-darker;
@state-danger-bg: @brand-danger;
@state-danger-border: darken(@state-danger-bg, 3%);
//== changed Labels
@label-color: @gray-darker;
@label-link-hover-color: @brand-primary;
//== changed Panels
@panel-default-border: @brand-primary;
@panel-default-heading-bg: @gray-darker;
@panel-primary-text: @gray-darker;
//== changed Badges
@badge-color: #fff;
@badge-link-hover-color: #fff;
//== changed Type
@headings-small-color: @gray-light;
@import "cyborg_styles.less";
.messages .text-danger {
color: @gray-darker;
}
.messages .text-info {
color: @gray-darker;
}
.messages .caret {
color: @gray-darker;
}
// Bootswatch
// -----------------------------------------------------
// changed Typography =================================================================
.text-primary,
.text-primary:hover,
a.text-primary:hover {
color: @brand-primary;
}
.text-success,
.text-success:hover,
a.text-success:hover {
color: @brand-success;
}
.text-danger,
.text-danger:hover,
a.text-danger:hover {
color: @brand-danger;
}
.text-warning,
.text-warning:hover,
a.text-warning:hover {
color: @brand-warning;
}
.text-info,
.text-info:hover,
a.text-info:hover {
color: @brand-info;
}
// changed Tables =====================================================================
table,
.table {
color: @text-color;
a:not(.btn) {
color: @brand-primary;
text-decoration: underline;
}
.text-muted {
color: @text-muted;
}
}
// changed Forms ======================================================================
.input-group-addon {
background-color: @btn-default-bg;
}
// changed Indicators =================================================================
.alert {
.h1, .h2, .h3, .h4, .h5, .h6,
h1, h2, h3, h4, h5, h6 {
color: #fff;
}
.alert-link,
a {
color: @alert-warning-text;
text-decoration: underline;
}
.close {
text-decoration: none;
}
}
// changed Containers =================================================================
.btn-primary, .panel-info .panel-heading {
background-image: linear-gradient(to right, rgb(0, 132, 176) , rgb(0, 163, 86));
}
.label-warning {
color: #000;
}
// changed code tag
code {
background-color: @state-info-bg;
color: @state-info-text;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
code {
color: @headings-color;
}
}

@ -0,0 +1,283 @@
// 35c3 dark (2018)
// Variables
// --------------------------------------------------
@import "dark";
$gray-darker: #000;
$gray-dark: #000;
$gray: #4d4d4c; // BEBOOT
$gray-light: $gray;
$gray-lighter: lighten($gray, 15%);
$brand-primary: #0084b0; // FRESH
$primary: #0084b0;
$brand-success: #00a356; // HOPE
$success: #00a356; // HOPE
$brand-info: $brand-primary;
$info: $brand-primary;
$brand-warning: #f9b000; // GLINT
$warning: #f9b000; // GLINT
$brand-danger: #e40429; // BEAT
$danger: #e40429; // BEAT
//== changed Scaffolding
$text-color: $gray-lighter;
$body-bg: #000;
$body-color: $text-color;
$link-color: $brand-primary;
$link-hover-color: lighten($link-color, 10%);
//== changed Typography
$headings-color: $brand-primary;
//== changed Tables
$table-bg: $gray-darker;
$table-bg-accent: #111;
$table-border-color: $gray;
// component
$component-active-color: #fff;
$component-active-bg: $primary;
//== changed Buttons
$btn-color: $link-color;
$btn-default-bg: $gray-darker;
$btn-default-border: $brand-primary;
$btn-primary-color: $gray-darker;
$btn-primary-border: $brand-primary;
$btn-success-border: darken($btn-default-bg, 10%);
$btn-info-color: $gray-darker;
$btn-info-border: darken($btn-default-bg, 10%);
$btn-warning-color: $gray-darker;
$btn-warning-border: darken($btn-default-bg, 9%);
$btn-danger-color: $gray-darker;
$btn-danger-border: darken($btn-default-bg, 10%);
//== changed Forms
$input-bg: $gray-darker;
$input-color: $link-color;
$input-border-color: $brand-primary;
$input-group-addon-bg: $gray-lighter;
//== changed Dropdowns
$dropdown-border: $brand-primary;
$dropdown-fallback-border: $brand-primary;
$dropdown-divider-bg: $dropdown-border;
$dropdown-link-color: $link-color;
$dropdown-link-hover-color: $link-hover-color;
$dropdown-bg: $gray-darker;
$dropdown-link-hover-bg: $dropdown-bg;
//== changed Navbar
$navbar-default-border: $brand-primary;
$navbar-default-link-hover-color: $link-hover-color;
$navbar-default-link-active-color: $brand-primary;
$navbar-default-brand-color: $brand-primary;
$navbar-default-brand-hover-color: lighten($brand-primary, 10%);
//== changed Pagination
$pagination-color: $brand-primary;
$pagination-border: $brand-primary;
$pagination-hover-color: $gray-darker;
$pagination-hover-bg: $component-active-bg;
$pagination-hover-border: $pagination-border;
$pagination-active-color: $pagination-hover-color;
$pagination-active-bg: $pagination-hover-bg;
$pagination-active-border: $pagination-hover-border;
//== changed Form states and alerts
$state-success-text: $gray-darker;
$state-success-bg: $brand-success;
$state-success-border: darken($state-success-bg, 5%);
$state-info-text: $gray-darker;
$state-info-bg: $brand-info;
$state-info-border: darken($state-info-bg, 7%);
$state-warning-text: $gray-darker;
$state-warning-bg: $brand-warning;
$state-warning-border: darken($state-warning-bg, 3%);
$state-danger-text: $gray-darker;
$state-danger-bg: $brand-danger;
$state-danger-border: darken($state-danger-bg, 3%);
//== changed Labels
$label-color: $gray-darker;
$label-link-hover-color: $brand-primary;
//== changed Type
$headings-small-color: $gray-light;
$alert-bg-scale: 0%;
$alert-border-scale: 0;
$alert-color-scale: 0;
@import "cyborg_variables.scss";
@import "cyborg_styles.scss";
.messages .text-danger {
color: $gray-darker;
}
.messages .text-info {
color: $gray-darker;
}
.messages .caret {
color: $gray-darker;
}
// Bootswatch
// -----------------------------------------------------
// changed Typography =================================================================
.text-primary,
.text-primary:hover,
a.text-primary:hover {
color: $brand-primary;
}
.text-success,
.text-success:hover,
a.text-success:hover {
color: $brand-success;
}
.text-danger,
.text-danger:hover,
a.text-danger:hover {
color: $brand-danger;
}
.text-warning,
.text-warning:hover,
a.text-warning:hover {
color: $brand-warning;
}
.text-info,
.text-info:hover,
a.text-info:hover {
color: $brand-info;
}
// changed Tables =====================================================================
table,
.table {
color: $text-color;
a:not(.btn) {
color: $brand-primary;
text-decoration: underline;
}
.text-muted {
color: $text-muted;
}
}
// changed Forms ======================================================================
.input-group-addon {
background-color: $btn-default-bg;
}
// changed Indicators =================================================================
.alert {
.h1, .h2, .h3, .h4, .h5, .h6,
h1, h2, h3, h4, h5, h6 {
color: #fff;
}
.alert-link,
a {
color: $alert-warning-text;
text-decoration: underline;
}
.close {
text-decoration: none;
}
}
// changed Containers =================================================================
.btn-primary, .card-info .card-heading {
background-image: linear-gradient(to right, rgb(0, 132, 176) , rgb(0, 163, 86));
}
.btn-secondary {
color: $primary;
background-color: #000;
border-color: $primary;
&:hover {
color: $primary;
background-color: #000;
border-color: darken($primary, 10%);
}
}
.bg-warning {
color: #000;
}
// changed code tag
code {
background-color: $state-info-bg;
color: $state-info-text;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
code {
color: $headings-color;
}
&.bg-primary,
&.bg-secondary,
&.bg-success,
&.bg-danger,
&.bg-info {
color: #fff;
}
}

@ -1,57 +0,0 @@
// cccamp19 blue (2019)
@import "cyborg_variables.less";
// Variables
// --------------------------------------------------
//== changed Colors
@gray-dark: #282828; // #333
@gray-light: #888; // #999
@gray-lighter: #ADAFAE; // #eee
@brand-primary: #0076ba;
@import "cyborg_styles.less";
// Specials for cccamp19 design
.navbar-brand {
.icon-icon_angel {
background-color: @brand-primary;
}
strong {
font-weight: lighter;
color: @brand-primary;
text-shadow:
0 0 10px @brand-primary,
0 0 20px @brand-primary,
0 0 30px @brand-primary,
0 0 40px @brand-primary,
0 0 70px @brand-primary,
0 0 80px @brand-primary;
}
}
h1 {
font-weight: lighter;
color: @brand-primary;
text-shadow: 0 0 10px @brand-primary;
.icon-icon_angel {
background-color: @brand-primary;
}
}
.panel-title {
color: #fff;
}
.input-group-addon {
color: #000;
.icon-icon_angel {
background-color: #000;
}
}

@ -0,0 +1,63 @@
// cccamp19 blue (2019)
// Variables
@import "dark";
//== changed Colors
$gray-dark: #282828;
$gray-light: #888;
$gray-lighter: #ADAFAE;
$brand-primary: #0076ba;
$primary: #0076ba;
$text-muted: $primary;
@import "cyborg_variables.scss";
@import "cyborg_styles.scss";
// Specials for cccamp19 design
@import "card-glow";
.navbar-brand {
.icon-icon_angel {
background-color: $brand-primary;
}
strong {
font-weight: normal;
color: $brand-primary;
text-shadow:
0 0 10px $brand-primary,
0 0 20px $brand-primary,
0 0 30px $brand-primary,
0 0 40px $brand-primary,
0 0 70px $brand-primary,
0 0 80px $brand-primary;
}
}
h1 {
font-weight: normal;
color: $brand-primary;
text-shadow: 0 0 10px $brand-primary;
.icon-icon_angel {
background-color: $brand-primary;
}
}
.input-group-addon {
color: #000;
.icon-icon_angel {
background-color: #000;
}
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
&.bg-warning {
color: #000;
}
}

@ -1,57 +0,0 @@
// cccamp19 yellow (2019)
@import "cyborg_variables.less";
// Variables
// --------------------------------------------------
//== changed Colors
@gray-dark: #282828; // #333
@gray-light: #888; // #999
@gray-lighter: #ADAFAE; // #eee
@brand-primary: #ffc600;
@import "cyborg_styles.less";
// Specials for cccamp19 design
.navbar-brand {
.icon-icon_angel {
background-color: @brand-primary;
}
strong {
font-weight: lighter;
color: @brand-primary;
text-shadow:
0 0 10px @brand-primary,
0 0 20px @brand-primary,
0 0 30px @brand-primary,
0 0 40px @brand-primary,
0 0 70px @brand-primary,
0 0 80px @brand-primary;
}
}
h1 {
font-weight: lighter;
color: @brand-primary;
text-shadow: 0 0 10px @brand-primary;
.icon-icon_angel {
background-color: @brand-primary;
}
}
.panel-title {
color: #fff;
}
.input-group-addon {
color: #000;
.icon-icon_angel {
background-color: #000;
}
}

@ -0,0 +1,65 @@
// cccamp19 yellow (2019)
// Variables
// --------------------------------------------------
@import "dark";
//== changed Colors
$gray-dark: #282828;
$gray-light: #888;
$gray-lighter: #ADAFAE;
$brand-primary: #ffc600;
$primary: $brand-primary;
$text-muted: $primary;
@import "cyborg_variables.scss";
@import "cyborg_styles.scss";
// Specials for cccamp19 design
@import "card-glow";
.navbar-brand {
.icon-icon_angel {
background-color: $brand-primary;
}
strong {
font-weight: normal;
color: $brand-primary;
text-shadow:
0 0 10px $brand-primary,
0 0 20px $brand-primary,
0 0 30px $brand-primary,
0 0 40px $brand-primary,
0 0 70px $brand-primary,
0 0 80px $brand-primary;
}
}
h1 {
font-weight: normal;
color: $brand-primary;
text-shadow: 0 0 10px $brand-primary;
.icon-icon_angel {
background-color: $brand-primary;
}
}
.input-group-addon {
color: #000;
.icon-icon_angel {
background-color: #000;
}
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
&.bg-primary,
&.bg-warning {
color: #000;
}
}

@ -53,6 +53,9 @@ msgstr "Der Schichttyp konnte nicht gefunden werden."
msgid "schedule.import.success"
msgstr "Das Programm wurde erfolgreich importiert."
msgid "shifts.filter.toggle"
msgstr "Filter verstecken/anzeigen"
msgid "validation.schedule-url.required"
msgstr "Bitte gib eine Programm URL an."

@ -51,6 +51,9 @@ msgstr "The shift type can't not be found."
msgid "schedule.import.success"
msgstr "Schedule import successful."
msgid "shifts.filter.toggle"
msgstr "collapse/show filters"
msgid "validation.schedule-url.required"
msgstr "The schedule URL is required."

@ -10,7 +10,7 @@
<div class="row">
<div class="col-md-12">
<div class="inline-form-spacing">
<div class="mb-3">
<form method="POST" action="{{ url('/admin/logs') }}" class="form-inline">
{{ csrf() }}
@ -44,9 +44,9 @@
{%- endif %}
<tr>
<td class="{{ td_type }}">{{ entry.created_at.format(__('Y-m-d H:i')) }}</td>
<td class="{{ td_type }}">
<span class="label label-{{ type }}">{{ entry.level|capitalize }}</span>
<td class="table-{{ td_type }}">{{ entry.created_at.format(__('Y-m-d H:i')) }}</td>
<td class="table-{{ td_type }}">
<span class="badge bg-{{ type }}">{{ entry.level|capitalize }}</span> <!-- //todo bs5 -->
</td>
<td>{{ entry.message|nl2br }}</td>
</tr>

@ -10,7 +10,7 @@
{% block content_title %}{{ title }}{% endblock %}
{% if is_index|default(false) %}
{{ m.button(m.glyphicon('plus'), url('/admin/schedule/edit')) }}
{{ m.button(m.icon('plus-lg'), url('/admin/schedule/edit'), 'secondary') }}
{% endif %}
</h1>
@ -40,12 +40,12 @@
<div class="btn-group">
<a
href="{{ url('/admin/schedule/load/' ~ schedule.id) }}"
class="btn btn-xs btn-default">
class="btn btn-sm btn-primary">
{{ __('form.import') }}
</a>
<a
href="{{ url('/admin/schedule/edit/' ~ schedule.id) }}"
class="btn btn-xs btn-default">
class="btn btn-sm btn-primary">
{{ __('form.edit') }}
</a>
</div>

@ -4,10 +4,10 @@
{% block content_container %}
<div class="row">
<div class="col-sm-6 col-sm-offset-3 error-big">
<div class="col-md-6 offset-md-3 col-lg-4 offset-lg-4 error-big">
<h2>
4<span class="pulse">:</span>{{ status|slice(1, 2) }}
<small>{{ __("No sleep found") }}</small>
<small class="text-muted">{{ __("No sleep found") }}</small>
</h2>
{% block content_text %}

@ -1,4 +1,3 @@
{% set theme = theme|default(user.settings.theme|default(config('theme'))) %}
<!DOCTYPE html>
<html lang="{{ session_get('locale')|split('_')[0]|escape('html_attr') }}">
<head>
@ -9,13 +8,13 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" type="text/css" href="{{ asset('assets/theme' ~ theme ~ '.css') }}"/>
<link rel="stylesheet" type="text/css" href="{{ asset('assets/theme' ~ themeId ~ '.css') }}"/>
<script type="text/javascript" src="{{ asset('assets/vendor.js') }}"></script>
{% if page() in ['news', 'meetings'] and is_user() and has_permission_to('atom') -%}
{% set parameters = {'key': user.api_key} -%}
{% if page() == 'meetings' -%}
{% set parameters = parameters|merge({'meetings': 1}) -%}
{% set parameters = {'meetings': 1}|merge(parameters) -%}
{% endif %}
<link href="{{ url('atom', parameters) }}" type="application/atom+xml" rel="alternate" title="Atom Feed">
{% endif %}
@ -30,12 +29,12 @@
{% endblock %}
<div class="container-fluid">
<div class="row" id="content">
<div id="content">
{% block content %}
{{ content|raw }}
{% endblock %}
</div>
<div class="row" id="footer">
<div id="footer">
{% block footer %}
{% include "layouts/parts/footer.twig" %}
{% endblock %}

@ -34,9 +34,9 @@
<div class="jumbotron">
<div class="container text-center">
<h1>
<span class="glyphicon glyphicon-scissors"></span>
<span class="glyphicon glyphicon-wrench"></span>
<span class="glyphicon glyphicon-fire"></span>
<span class="bi bi-scissors"></span>
<span class="bi bi-wrench"></span>
<span class="bi bi-cloud-lightning-rain"></span>
</h1>
<div class="col-md-6">
<h2>

@ -1,3 +1,5 @@
{% import 'macros/base.twig' as m %}
<div class="col-md-12">
<hr/>
<div class="text-center footer" style="margin-bottom: 10px;">
@ -27,7 +29,7 @@
{% for name,url in config('footer_items') %}
<a href="{% if url starts with '/' %}{{ url(url) }}{% else %}{{ url }}{% endif %}">
{% if '@' in url %}<span class="glyphicon glyphicon-envelope"></span>{% endif %}
{% if '@' in url %}{{ m.icon('envelope') }}{% endif %}
{{ __(name) }}
</a> ·
{% endfor %}

@ -1,86 +1,66 @@
{% import 'macros/base.twig' as m %}
{% macro toolbar_item(label, link, active_page, icon) %}
<li{% if page() == active_page %} class="active"{% endif %}>
<a href="{{ link }}">
{% if icon %}<span class="{% if 'glyphicon-' in icon %}glyphicon {% endif %}{{ icon }}"></span>{% endif %}
<li class="nav-item">
<a class="nav-link{% if page() == active_page %} active{% endif %}" href="{{ link }}">
{% if icon %}{{ m.icon(icon) }}{% endif %}
{{ label|raw }}
</a>
</li>
{% endmacro %}
<div class="navbar navbar-default navbar-fixed-top">
<nav class="navbar fixed-top navbar-expand-lg border-bottom {{ theme['navbar_classes'] }}">
<div class="container-fluid">
{% block navbar %}
<div class="navbar-header">
<button type="button"
class="navbar-toggle collapsed"
data-toggle="offcanvas"
data-target="#navbar-offcanvas"
aria-label="Toggle navigation">
<span class="text-primary glyphicon glyphicon-menu-hamburger icon-open"></span>
<span class="text-primary glyphicon glyphicon-remove icon-close"></span>
</button>
<a class="navbar-brand" href="{{ url('/') }}">
<span class="icon-icon_angel"></span>
<strong class="visible-lg-inline">{{ config('app_name')|upper }}</strong>
</a>
</div>
{% block menu %}
<div class="collapse navbar-collapse" id="navbar-offcanvas">
{% block menu_items %}
{{ menu() }}
{% if config('header_items') %}
<ul class="nav navbar-nav">
{% for text,link in config('header_items', {}) %}
<li>
<a href="{{ link|replace({'%lang%': session_get('locale')|split('_')[0]})|escape('html_attr') }}">
{{ text }}
</a>
</li>
{% endfor %}
</ul>
{% endif %}
{% endblock %}
{% block menu_toolbar %}
<ul class="nav navbar-nav navbar-right">
<a class="navbar-brand" href="{{ url('/') }}">
<span class="icon-icon_angel"></span>
<strong class="visible-lg-inline">{{ config('app_name')|upper }}</strong>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
{{ menu() }}
{% if is_user() %}
{{ _self.toolbar_item(menuUserShiftState(user), url('shifts', {'action': 'next'}), '', 'glyphicon-time') }}
{% elseif has_permission_to('register') and config('registration_enabled') %}
{{ _self.toolbar_item(__('Register'), url('register'), 'register', 'glyphicon-plus') }}
{% endif %}
{% if config('header_items') %}
<ul class="navbar-nav mb-2 mb-lg-0">
{% for text,link in config('header_items', {}) %}
<li class="nav-item">
<a href="{{ link|replace({'%lang%': session_get('locale')|split('_')[0]})|escape('html_attr') }}">
{{ text }}
</a>
</li>
{% endfor %}
</ul>
{% endif %}
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
{% if is_user() %}
{{ _self.toolbar_item(menuUserShiftState(user), url('shifts', {'action': 'next'}), '', 'clock') }}
{% elseif has_permission_to('register') and config('registration_enabled') %}
{{ _self.toolbar_item(__('Register'), url('register'), 'register', 'plus') }}
{% endif %}
{% if has_permission_to('login') %}
{{ _self.toolbar_item(__('Login'), url('login'), 'login', 'glyphicon-log-in') }}
{% endif %}
{% if has_permission_to('login') %}
{{ _self.toolbar_item(__('Login'), url('login'), 'login', 'box-arrow-in-right') }}
{% endif %}
{% if is_user() and has_permission_to('user_messages') %}
{{ _self.toolbar_item(menuUserMessages(), url('user-messages'), 'user-messages', 'glyphicon-envelope') }}
{% endif %}
{% if is_user() and has_permission_to('user_messages') %}
{{ _self.toolbar_item(menuUserMessages(), url('user-messages'), 'user-messages', 'envelope') }}
{% endif %}
{{ menuUserHints() }}
{{ menuUserHints() }}
{% if has_permission_to('user_myshifts') %}
{{ _self.toolbar_item(user.name, url('users', {'action': 'view'}), 'users', 'icon icon-icon_angel') }}
{% endif %}
{% if has_permission_to('user_myshifts') %}
{{ _self.toolbar_item(user.name, url('users', {'action': 'view'}), 'users', 'icon icon-icon_angel') }}
{% endif %}
<li class="hidden-xs">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
{{ menuUserSubmenu()|join(" ")|raw }}
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-mobile hidden-sm hidden-md hidden-lg">
{{ menuUserSubmenu()|join(" ")|raw }}
</ul>
{% endblock %}
</div>
{% endblock %}
{% endblock %}
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
{{ menuUserSubmenu()|join(" ")|raw }}
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>

@ -2,8 +2,8 @@
<span class="icon-icon_angel"></span>
{% endmacro %}
{% macro glyphicon(glyph) %}
<span class="glyphicon glyphicon-{{ glyph }}"></span>
{% macro icon(icon, color) %}
<span class="bi bi-{{ icon }} {% if color %} text-{{ color }} {% endif %}"></span>
{% endmacro %}
{% macro alert(message, type) %}
@ -19,11 +19,19 @@
{% endmacro %}
{% macro button(label, url, type, size, title) %}
<a href="{{ url }}" class="btn btn-{{ type|default('default') }}{% if size %} btn-{{ size }}{% endif %}"{% if title %} title="{{ title }}"{% endif %}>
<a href="{{ url }}" class="btn btn-{{ type|default('secondary') }}{% if size %} btn-{{ size }}{% endif %}"{% if title %} title="{{ title }}"{% endif %}>
{{ label }}
</a>
{% endmacro %}
{% macro info(text) %}
<span class="help-block">{{ _self.glyphicon('info-sign') }}{{ text }}</span>
<span class="help-block">{{ _self.icon('info-circle') }}{{ text }}</span>
{%- endmacro %}
{% macro type_bg_class() -%}
{% if theme.type == 'light' %}bg-white{% else %}bg-dark{% endif %}
{%- endmacro %}
{% macro type_text_class() -%}
{% if theme.type == 'light' %}text-dark{% else %}text-light{% endif %}
{%- endmacro %}

@ -1,7 +1,7 @@
{% macro input(name, label, type, opt) %}
<div class="form-group">
<div class="mb-3">
{% if label -%}
<label for="{{ name }}"{% if opt.hide_label|default(false) %} class="sr-only"{% endif %}>{{ label }}</label>
<label for="{{ name }}" class="form-label {% if opt.hide_label|default(false) %}sr-only{% endif %}">{{ label }}</label>
{%- endif %}
<input
type="{{ type|default('text') }}" class="form-control"
@ -22,9 +22,9 @@
{%- endmacro %}
{% macro textarea(name, label, opt) %}
<div class="form-group">
<div class="mb-3">
{% if label -%}
<label for="{{ name }}">{{ label }}</label>
<label class="form-label" for="{{ name }}">{{ label }}</label>
{%- endif %}
<textarea class="form-control" id="{{ name }}" name="{{ name }}"
{%- if opt.required|default(false) %}
@ -38,9 +38,9 @@
{%- endmacro %}
{% macro select(name, data, label, selected) %}
<div class="form-group">
<div class="mb-3">
{% if label -%}
<label for="{{ name }}">{{ label }}</label>
<label class="form-label" for="{{ name }}">{{ label }}</label>
{% endif %}
<select id="{{ name }}" name="{{ name }}" class="form-control">
{% for value,decription in data -%}
@ -66,7 +66,9 @@
{%- endmacro %}
{% macro button(label, opt) %}
<button class="btn btn-{{ opt.btn_type|default('primary') }} btn-{{ opt.btn_size|default('m') }}"
<button
class="btn btn-{{ opt.btn_type|default('secondary') }}
{%- if 'btn_size' in opt %} btn-{{ opt.btn_size }}{% endif %}"
{%- if opt.type is defined %} type="{{ opt.type }}"{% endif %}
{%- if opt.name is defined %} name="{{ opt.name }}"{% endif %}
{%- if opt.title is defined %} title="{{ opt.title }}"{% endif %}
@ -77,5 +79,5 @@
{%- endmacro %}
{% macro submit(label, opt) %}
{{ _self.button(label|default(__('form.submit')), opt|default({})|merge({'type': 'submit'})) }}
{{ _self.button(label|default(__('form.submit')), {'type': 'submit', 'btn_type': 'primary'}|merge(opt|default({}))) }}
{%- endmacro %}

@ -5,25 +5,48 @@
{% block title %}{{ __('Design') }}{% endblock %}
{% set colors=['success', 'info', 'warning', 'danger'] %}
{% set types=['default', 'primary', 'success', 'info', 'warning', 'danger'] %}
{% set types_buttons=types|merge(['link']) %}
{% set types=[
'primary',
'secondary',
'success',
'danger',
'warning',
'info',
'light',
'dark'
]
%}
{% set types_color=[
['primary', 'light'],
['secondary', 'light'],
['success', 'light'],
['danger', 'light'],
['warning', 'dark'],
['info', 'dark'],
['light', 'dark'],
['dark', 'light'],
] %}
{% set types_buttons=['link']|merge(types) %}
{% set shortsum='Lorem ipsum dolor…' %}
{% set lipsum='Lorem ipsum dolor sit amet, consectetur adipisici elit…' %}
{% set linksum='Lorem ipsum! Dolor <a href="#">link</a> amet, consectetur adipisici elit!' %}
{% block content %}
<div class="container">
<h1>{{ block('title') }} <small>{{ themes[theme] }}</small></h1>
<div class="col-12">
<div class="container">
<h1 class="mb-4">
{{ block('title') }} <small class="text-muted">{{ themes[themeId]['name'] }}</small>
</h1>
<h2>Elements <small>small</small></h2>
<h2>Elements <small class="text-muted">small</small></h2>
<div class="row">
<div class="col-md-2">
<h3>Headings <small>small</small></h3>
<h4>H4 <small>small</small></h4>
<h5>H5 <small>small</small></h5>
<h6>H6 <small>small</small></h6>
<div class="col-md-6 col-lg-2 mb-4">
<h3>Headings <small class="text-muted">small</small></h3>
<h4>H4 <small class="text-muted">small</small></h4>
<h5>H5 <small class="text-muted">small</small></h5>
<h6>H6 <small class="text-muted">small</small></h6>
</div>
<div class="col-md-6">
<div class="col-md-6 mb-4">
<h3>Lists</h3>
<p>
This page should be used when creating and testing new designs to find usability and/or design issues.
@ -41,13 +64,14 @@
</ol>
<p>{{ linksum|raw }} {{ lipsum }}</p>
</div>
<div class="col-md-4">
<div class="col-lg-4 mb-4">
<h3>Themes</h3>
<ul>
{% for id,theme in themes|sort %}
{% for id,theme in themes %}
<li>
<a href="{{ url('design', {'theme': id}) }}">
{{ theme }}
<a href="{{ url('design', {'theme': id}) }}"
{%- if id == themeId %} class="text-info"{% endif %}>
{{ theme['name'] }}
</a>
</li>
{% endfor %}
@ -55,7 +79,7 @@
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="col-md-6 col-lg-4 mb-4">
<h3>Tables</h3>
<table class="table table-striped">
<tr>
@ -66,44 +90,56 @@
<tr>
<td>Table content</td>
<td>{{ lipsum }}</td>
<td><span class="text-success">{{ m.glyphicon('ok') }}</span></td>
<td><span class="text-success">{{ m.icon('check-lg') }}</span></td>
</tr>
<tr>
<td>Another content</td>
<td></td>
<td><span class="text-danger">{{ m.glyphicon('remove') }}</span></td>
<td><span class="text-danger">{{ m.icon('x-lg') }}</span></td>
</tr>
</table>
</div>
<div class="col-md-3">
<div class="col-md-6 col-lg-4 mb-4">
<h3>Navigation Tabs</h3>
<ul class="nav nav-tabs">
<li class="active"><a href="#">Lorem</a></li>
<li><a href="#">Ipsum</a></li>
<li><a href="#">Dolor</a></li>
<li class="nav-item">
<a class="nav-link active" href="#">Lorem</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Ipsum</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Dolor</a>
</li>
</ul>
</div>
<div class="col-md-3 settings-menu">
<div class="col-md-6 col-lg-4 mb-4">
<h3>Navigation Pills</h3>
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">Some</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Menu</a></li>
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Some</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Test</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Menu</a>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="col-6 col-md-12 mb-4">
<h3>Texts</h3>
<p>
{{ linksum|raw }}<br>
{{ lipsum }} {{ lipsum|replace({'…': '.'}) }} {{ lipsum|replace({'…': '.'}) }} {{ lipsum }}
</p>
<div class="row">
<div class="row mb-4">
{% for color in types %}
<div class="col-md-3">
<div class="col-12 col-md-3">
<p class="text-{{ color }}">{{ color|capitalize }}: {{ linksum|raw }}</p>
</div>
{% endfor %}
@ -112,15 +148,15 @@
</div>
<div class="row">
<div class="col-md-6">
<h3>Labels</h3>
<div class="col-6 col-md-12 mb-4">
<h3>Badges</h3>
<p>
{% for type in types %}
<span class="label label-{{ type }}">{{ type|capitalize }}</span>
{% for type in types_color %}
<span class="badge bg-{{ type[0] }} text-{{ type[1] }}">{{ type[0]|capitalize }}</span>
{% endfor %}
</p>
</div>
<div class="col-md-6">
<div class="col-6 col-md-12 mb-4">
<h3>Buttons</h3>
<p>
{% for type in types_buttons %}
@ -130,13 +166,13 @@
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="row mb-4">
<div class="col">
<h3>Alerts</h3>
<div class="row">
{% for color in colors %}
<div class="col-md-3">
<div class="col">
<h4>{{ color|capitalize }}</h4>
{{ m.alert(lipsum, color) }}
</div>
@ -145,51 +181,76 @@
</div>
</div>
<div class="row">
<div class="row mb-4">
<div class="col-md-12 mb-3">
<h3>Cards</h3>
<div class="row">
{% for type in types %}
<div class="col mb-3">
<div class="card border-{{ type }} {{ m.type_bg_class() }}">
<h4 class="card-header bg-{{ type }}">{{ type|capitalize }}</h4>
<div class="card-body">
<p class="card-text">{{ shortsum }}</p>
<p class="card-text"><a href="#" class="card-link">Some link</a></p>
</div>
<div class="card-footer text-muted">
Footer
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
<div class="row mb-4">
<div class="col-md-12">
<h3>Forms</h3>
<div class="row">
<div class="col-md-2">
<div class="col-md-3 col-lg-2">
{{ f.input('form-input-text', 'Text', 'text', {'value': 'Value'}) }}
</div>
<div class="col-md-2">
<div class="col-md-3 col-lg-2">
{{ f.input('form-input-text-hidden-label', 'Hidden label', 'text', {'value': 'Hidden label', 'hide_label': true}) }}
</div>
<div class="col-md-2">
<div class="col-md-3 col-lg-2">
{{ f.input('form-input-text-disabled', 'Disabled', 'text', {'disabled': true, 'value': 'Value'}) }}
</div>
<div class="col-md-2">
<div class="col-md-3 col-lg-2">
{{ f.input('form-input-text-readonly', 'Readonly', 'text', {'readonly': true, 'value': 'Value'}) }}
</div>
<div class="col-md-2">
<div class="col-md-3 col-lg-2">
{{ f.input('form-input-password', 'Password', 'password', {'value': 'Value'}) }}
</div>
<div class="col-md-2">
<div class="col-md-3 col-lg-2">
{{ f.input('form-input-number', 'Number', 'number', {'value': 42}) }}
</div>
</div>
<div class="row">
<div class="col-md-2">
<div class="col-md-3 col-lg-2">
{{ f.textarea('form-input-textarea', 'Textarea', {'rows': 2, 'value': lipsum}) }}
</div>
<div class="col-md-2">
<div class="col-md-3 col-lg-2">
{{ f.select('form-input-select', {'lorem': 'Ipsum', 'dolor': 'Sit'}, 'Select', 'dolor') }}
</div>
<div class="col-md-2">
Button<br>
{{ f.button('Button', {'btn_type': 'default'}) }}
<div class="col-md-3 col-lg-2">
<label class="form-label">Button</label>
<div>
{{ f.button('Button') }}
</div>
</div>
<div class="col-md-2">
<div class="col-md-3 col-lg-2">
Submit button<br>
{{ f.submit() }}
</div>
<div class="col-md-2">
<div class="col-md-3 col-lg-2">
Checkbox<br>
{{ f.checkbox('form-input-checkbox', 'Checkbox', true) }}
{{ f.checkbox('form-input-checkbox-2', 'Checkbox 2') }}
</div>
<div class="col-md-2 checkbox-inline">
<div class="col-md-3 col-lg-2 checkbox-inline">
Radio<br>
<label>
<input type="radio" checked="checked" name="form-input-radio" value="1"> Yey
@ -203,11 +264,11 @@
</div>
<h3>Other</h3>
<div class="row">
<div class="col-md-3">
<div class="row mb-4">
<div class="col">
<h4>Code</h4>
<p>
<code>3.1415926535897932384626433832795028841971693993751058209749445923</code>
<code>3.1415926535897932384626433832795</code>
</p>
</div>
</div>
@ -215,14 +276,14 @@
<h2>Macros</h2>
<h3>base.twig</h3>
<div class="row">
<div class="row mb-4">
<div class="col-md-3">
<h4><code>angel()</code></h4>
<p>{{ m.angel() }}</p>
</div>
<div class="col-md-3">
<h4><code>glyphicon(glyph)</code></h4>
<p>{{ m.glyphicon('star') }}</p>
<h4><code>icon(icon_name)</code></h4>
<p>{{ m.icon('star') }}</p>
</div>
<div class="col-md-3">
<h4><code>alert(message, type)</code></h4>
@ -232,8 +293,6 @@
<h4><code>user(user)</code></h4>
<p>{{ m.user(demo_user) }}<br>{{ m.user(demo_user_2) }}</p>
</div>
</div>
<div class="row">
<div class="col-md-3">
<h4><code>button(label, url, type, size)</code></h4>
<p>{{ m.button('Label', '#', 'info', 'sm') }}</p>
@ -241,7 +300,7 @@
</div>
<h3>form.twig</h3>
<div class="row">
<div class="row mb-4">
<div class="col-md-3">
<h4><code>input(name, label, type, opt)</code></h4>
<p>{{ f.input('input-name', 'Label', 'text', {'required': true, 'value': 'Value'}) }}</p>
@ -264,8 +323,6 @@
{{ f.checkbox('checkbox-name', 'Label', true, 'on') }}
</p>
</div>
</div>
<div class="row">
<div class="col-md-3">
<h4><code>hidden(name, value)</code></h4>
<p>
@ -276,7 +333,7 @@
<div class="col-md-3">
<h4><code>button(label, opt)</code></h4>
<p>
{{ f.button('Label', {'btn_type': 'default', 'name': 'button-name', 'value': 'buton-value'}) }}
{{ f.button('Label', {'name': 'button-name', 'value': 'buton-value'}) }}
</p>
</div>
@ -288,4 +345,5 @@
</div>
</div>
</div>
</div>
{% endblock %}

@ -14,12 +14,12 @@
<div class="row">
<div class="col-md-6">
<p>
{{ m.glyphicon('time') }} {{ faq.updated_at.format(__('Y-m-d H:i')) }}
{{ m.icon('clock') }} {{ faq.updated_at.format(__('Y-m-d H:i')) }}
{% if faq.updated_at != faq.created_at %}
&emsp;{{ __('form.updated') }}
<br>
{{ m.glyphicon('time') }} {{ faq.created_at.format(__('Y-m-d H:i')) }}
{{ m.icon('clock') }} {{ faq.created_at.format(__('Y-m-d H:i')) }}
{% endif %}
</p>
</div>
@ -29,7 +29,7 @@
<form action="" enctype="multipart/form-data" method="post">
{{ csrf() }}
<div class="row">
<div class="row mb-4">
<div class="col-md-12">
{{ f.input('question', __('faq.question'), null, {'required': true, 'value': faq ? faq.question : ''}) }}
</div>
@ -38,10 +38,10 @@
{{ f.submit() }}
{{ f.submit(m.glyphicon('eye-close'), {'name': 'preview', 'btn_type': 'info', 'title': __('form.preview')}) }}
{{ f.submit(m.icon('eye'), {'name': 'preview', 'btn_type': 'info', 'title': __('form.preview')}) }}
{% if faq and faq.id %}
{{ f.submit(m.glyphicon('trash'), {'name': 'delete', 'btn_type': 'danger', 'title': __('form.delete')}) }}
{{ f.submit(m.icon('trash'), {'name': 'delete', 'btn_type': 'danger', 'title': __('form.delete')}) }}
{% endif %}
</div>
</div>
@ -51,12 +51,11 @@
<div class="col-md-12">
<h2>{{ __('form.preview') }}</h2>
<div class="panel panel-default">
<div class="panel-heading">
<div class="card {% if theme.type =='light' %}bg-light{% else %}bg-dark{% endif %}">
<div class="card-header">
{{ faq.question }}
</div>
<div class="panel-body">
<div class="card-body bg-body">
{{ faq.text|markdown }}
</div>
</div>

@ -11,7 +11,7 @@
{{ block('title') }}
{%- if has_permission_to('faq.edit') -%}
{{ m.button(m.glyphicon('plus'), url('admin/faq')) }}
{{ m.button(m.icon('plus-lg'), url('admin/faq'), 'secondary') }}
{%- endif %}
</h1>
@ -30,24 +30,26 @@
{% for item in items %}
<div class="col-md-12 faq">
<span id="faq-{{ item.id }}" class="ref-id"></span>
<div class="panel panel-default">
<div class="panel-heading">
<h3>
{{ item.question }}
<small><a class="ref-link" href="#faq-{{ item.id }}">{{ m.glyphicon('link') }}</a></small>
</h3>
</div>
<div class="panel-body">
<div class="card {% if theme.type =='light' %}bg-light{% else %}bg-dark{% endif %} mb-4">
<h4 class="card-header">
{{ item.question }}
<small class="text-muted">
<a class="ref-link" href="#faq-{{ item.id }}">{{ m.icon('link') }}</a>
</small>
</h4>
<div class="card-body bg-body">
{{ item.text|markdown }}
</div>
<div class="panel-footer">
{{ m.glyphicon('time') }} {{ item.updated_at.format(__('Y-m-d H:i')) }}
<div class="card-footer {% if theme.type =='light' %}bg-light{% else %}bg-dark{% endif %} d-flex align-items-center">
<div class="me-3">
{{ m.icon('clock') }} {{ item.updated_at.format(__('Y-m-d H:i')) }}
</div>
{% if has_permission_to('faq.edit') %}
<span class="pull-right">
{{ m.button(m.glyphicon('edit'), url('admin/faq/' ~ item.id), null, 'xs') }}
<span class="ms-auto">
{{ m.button(m.icon('pencil-square'), url('admin/faq/' ~ item.id), 'secondary', 'sm') }}
</span>
{% endif %}
</div>

@ -5,13 +5,13 @@
{% block content %}
<div class="col-md-12">
<div class="row">
<div class="row mb-3 mt-5">
<div class="col-sm-12 text-center" id="welcome-title">
<h2>{{ __('Welcome to the %s!', [config('name') ~ m.angel() ~ (config('app_name')|upper) ])|raw }}</h2>
</div>
</div>
<div class="row">
<div class="row mb-3">
{% for name,date in {
(__('Buildup starts')): config('buildup_start'),
(__('Event starts')): config('event_start'),
@ -19,7 +19,7 @@
(__('Teardown ends')): config('teardown_end')
} | filter(date => date) %}
{% if date > date() %}
<div class="col-sm-3 text-center hidden-xs">
<div class="col-sm-3 text-center d-none d-sm-block">
<h4>{{ name }}</h4>
<span class="moment-countdown text-big" data-timestamp="{{ date.getTimestamp }}">%c</span>
<small>{{ date.format(__('Y-m-d')) }}</small>
@ -28,19 +28,21 @@
{% endfor %}
</div>
<div class="row">
<div class="col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4">
<div class="panel panel-primary first">
<div class="panel-body">
<div class="row mb-5">
<div class="col-md-6 offset-md-3 col-lg-4 offset-lg-4">
<div class="card {{ m.type_bg_class() }}">
<div class="card-body">
{% include 'layouts/parts/messages.twig' %}
<form action="" enctype="multipart/form-data" method="post">
{{ csrf() }}
<div class="form-group">
<div class="input-group">
<span class="input-group-addon input-lg">{{ m.angel }}</span>
<div class="mb-3">
<div class="input-group input-group-lg">
<span class="input-group-text {{ m.type_text_class() }}">
{{ m.angel }}
</span>
<input
class="form-control input-lg"
class="form-control"
id="form_nick"
type="text"
name="login"
@ -50,32 +52,38 @@
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon input-lg">{{ m.glyphicon('lock') }}</span>
<div class="mb-3">
<div class="input-group input-group-lg">
<span class="input-group-text {{ m.type_text_class() }}">
<i class="bi bi-key"></i>
</span>
<input
class="form-control input-lg" id="form_password"
class="form-control" id="form_password"
type="password" name="password" value="" placeholder="{{ __('Password') }}"
>
</div>
</div>
<div class="form-group">
<div class="mb-3 text-center">
<button class="btn btn-primary btn-lg btn-block" type="submit" name="submit">
{{ __('Login') }}
</button>
</div>
<div class="form-group btn-group btn-group-justified">
{% for name,config in config('oauth') %}
<a href="{{ url('oauth/' ~ name) }}" class="btn btn-primary btn-lg{% if config.hidden|default(false) %} hidden{% endif %}">
{{ __(
'oauth.login-using-provider',
[__(config.name|default(name|capitalize))]
) }}
</a>
{% endfor %}
</div>
{% if config('oauth') is not empty %}
<div class="row">
<div class="mb-3 btn-group">
{% for name,config in config('oauth') %}
<a href="{{ url('oauth/' ~ name) }}" class="btn btn-primary btn-lg{% if config.hidden|default(false) %} d-none{% endif %}">
{{ __(
'oauth.login-using-provider',
[__(config.name|default(name|capitalize))]
) }}
</a>
{% endfor %}
</div>
</div>
{% endif %}
<div class="text-center">
<a href="{{ url('/password/reset') }}" class="">
@ -88,14 +96,12 @@
</div>
</div>
<div class="row">
<div class="row mb-5">
<div class="col-sm-6 text-center">
<h2>{{ __('Register') }}</h2>
{% if has_permission_to('register') and config('registration_enabled') %}
<p>{{ __('Please sign up, if you want to help us!') }}</p>
<div class="form-group">
<a href="{{ url('register') }}" class="btn btn-default">{{ __('Register') }} &raquo;</a>
</div>
<a href="{{ url('register') }}" class="btn btn-primary">{{ __('Register') }} &raquo;</a>
{% else %}
{{ m.alert(__('Registration is disabled.'), 'danger') }}
{% endif %}
@ -104,15 +110,13 @@
<div class="col-sm-6 text-center">
<h2>{{ __('What can I do?') }}</h2>
<p>{{ __('Please read about the jobs you can do to help us.') }}</p>
<div class="form-group">
<a href="{{ url('angeltypes', {'action': 'about'}) }}" class="btn btn-default">
{{ __('Teams/Job description') }} &raquo;
</a>
</div>
<a href="{{ url('angeltypes', {'action': 'about'}) }}" class="btn btn-primary">
{{ __('Teams/Job description') }} &raquo;
</a>
</div>
<div class="col-md-12 text-center">
{{ m.glyphicon('info-sign') }} {{ __('Please note: You have to activate cookies!') }}
{{ m.icon('info-circle') }} {{ __('Please note: You have to activate cookies!') }}
</div>
</div>
</div>

@ -14,12 +14,12 @@
<div class="row">
<div class="col-md-6">
<p>
{{ m.glyphicon('time') }} {{ news.updated_at.format(__('Y-m-d H:i')) }}
{{ m.icon('clock') }} {{ news.updated_at.format(__('Y-m-d H:i')) }}
{% if news.updated_at != news.created_at %}
&emsp;{{ __('news.updated') }}
<br>
{{ m.glyphicon('time') }} {{ news.created_at.format(__('Y-m-d H:i')) }}
{{ m.icon('clock') }} {{ news.created_at.format(__('Y-m-d H:i')) }}
{% endif %}
&emsp;{{ m.user(news.user) }}
@ -46,16 +46,16 @@
</div>
</div>
<div class="row">
<div class="row mb-4">
<div class="col-md-12">
{{ f.textarea('text', __('news.edit.message'), {'required': true, 'rows': 10, 'value': news ? news.text : ''}) }}
{{ f.submit() }}
{{ f.submit(m.glyphicon('eye-close'), {'name': 'preview', 'btn_type': 'info', 'title': __('form.preview')}) }}
{{ f.submit(m.icon('eye'), {'name': 'preview', 'btn_type': 'info', 'title': __('form.preview')}) }}
{% if news and news.id %}
{{ f.submit(m.glyphicon('trash'), {'name': 'delete', 'btn_type': 'danger', 'title': __('form.delete')}) }}
{{ f.submit(m.icon('trash'), {'name': 'delete', 'btn_type': 'danger', 'title': __('form.delete')}) }}
{% endif %}
</div>
</div>
@ -65,15 +65,12 @@
<div class="col-md-12">
<h2>{{ __('form.preview') }}</h2>
<div class="panel {% if not news.is_meeting %}panel-default{% else %}panel-info{% endif %}">
<div class="panel-heading">
<h3 class="panel-title">
{% if news.is_meeting %}{{ __('news.is_meeting') }}{% endif %}
{{ news.title }}
</h3>
<div class="card {% if news.is_meeting %}bg-info{% else %}{% if theme.type =='light' %}bg-light{% else %}bg-secondary{% endif %}{% endif %} mb-4">
<div class="card-header {% if news.is_meeting and theme.type == 'dark' %}text-white{% endif %}">
{% if news.is_meeting %}{{ __('news.is_meeting') }}{% endif %}
{{ news.title }}
</div>
<div class="panel-body">
<div class="card-body bg-body">
{{ news.text|raw|markdown(false) }}
</div>
</div>

@ -9,18 +9,19 @@
{% endblock %}
{% block comments %}
<div class="col-md-12">
<div class="col-md-12 mt-4">
<h2>{{ __('news.comments') }}</h2>
{% for comment in news.comments %}
<div class="panel panel-default">
<div class="panel-body">
<div class="card {% if theme.type == 'light' %}bg-light{% else %}bg-secondary{% endif %} mb-4">
<div class="card-body {{ m.type_bg_class() }}">
{{ comment.text|nl2br }}
</div>
<div class="panel-footer text-muted">
{{ m.glyphicon('time') }}
{{ comment.created_at.format(__('Y-m-d H:i')) }}
<div class="card-footer {% if theme.type =='light' %}bg-light{% else %}bg-dark{% endif %} text-muted d-flex align-items-center">
<div class="me-3">
{{ m.icon('clock') }}
{{ comment.created_at.format(__('Y-m-d H:i')) }}
</div>
{{ m.user(comment.user) }}
{% if comment.user.id == user.id or has_permission_to('admin_news') or has_permission_to('comment.delete') %}
@ -41,14 +42,12 @@
{% block write_comment %}
{% if has_permission_to('news_comments') %}
<div class="col-md-12">
<div class="col-md-12 mt-4">
<h3>{{ __('news.comments.new') }}</h3>
<form action="" enctype="multipart/form-data" method="post">
{{ csrf() }}
{{ f.textarea('comment', __('news.comments.message'), {'required': true}) }}
{{ f.submit() }}
</form>
</div>

@ -9,7 +9,7 @@
<h1>
{{ block('title') }}
{%- if has_permission_to('admin_news') and is_overview|default(false) -%}
{{ m.button(m.glyphicon('plus'), url('admin/news', only_meetings ? {'meeting': 1} : {})) }}
{{ m.button(m.icon('plus-lg'), url('admin/news', only_meetings ? {'meeting': 1} : {}), 'secondary') }}
{%- endif %}
</h1>
@ -48,48 +48,53 @@
{% endblock %}
{% macro news(news, show_comments_link, is_overview) %}
<div class="panel {% if not news.is_meeting %}panel-default{% else %}panel-info{% endif %}">
<div class="card {% if news.is_meeting %}bg-info{% else %}{% if theme.type =='light' %}bg-light{% else %}bg-dark{% endif %}{% endif %} mb-4">
{% if is_overview|default(false) %}
<div class="panel-heading">
<h3 class="panel-title">
<a href="{{ url('news/' ~ news.id) }}">
{% if news.is_pinned %}{{ m.glyphicon('pushpin') }}{% endif %}
{% if news.is_meeting %}{{ __('news.is_meeting') }}{% endif %}
{{ news.title }}
</a>
</h3>
<div class="card-header {% if news.is_meeting and theme.type == 'dark' %}text-white{% endif %}">
<a href="{{ url('news/' ~ news.id) }}" class="text-inherit">
{% if news.is_pinned %}{{ m.icon('pin-angle') }}{% endif %}
{% if news.is_meeting %}{{ __('news.is_meeting') }}{% endif %}
{{ news.title }}
</a>
</div>
{% endif %}
<div class="panel-body">
<div class="card-body bg-body">
{{ news.text|raw|markdown(false) }}
</div>
<div class="panel-footer text-muted">
{{ m.glyphicon('time') }} {{ news.updated_at.format(__('Y-m-d H:i')) }}
<div class="card-footer {% if theme.type =='light' %}bg-light{% else %}bg-dark{% endif %} text-muted">
{% if news.updated_at != news.created_at and not is_overview %}
&emsp;{{ __('news.updated') }}
<br>
{{ m.glyphicon('time') }} {{ news.created_at.format(__('Y-m-d H:i')) }}
<div class="d-flex align-items-center">
<div class="me-3">
{{ m.icon('clock') }} {{ news.created_at.format(__('Y-m-d H:i')) }}
</div>
{{ __('news.updated') }}
</div>
{% endif %}
<div class="d-flex align-items-center">
<div class="me-3">
{{ m.icon('clock') }} {{ news.updated_at.format(__('Y-m-d H:i')) }}
</div>
&emsp;{{ m.user(news.user) }}
<div class="me-3">
{{ m.user(news.user) }}
</div>
{% if show_comments_link|default(false) %}
&ensp;
<a href="{{ url('news/' ~ news.id) }}">
{{ m.glyphicon('comment') }} {{ __('news.comments') }} &raquo;
</a>
<span class="badge">{{ news.comments.count() }}</span>
{% endif %}
{% if show_comments_link|default(false) %}
<a href="{{ url('news/' ~ news.id) }}" class="me-1">
{{ m.icon('chat-left-text') }} {{ __('news.comments') }}
</a>
<span class="badge bg-primary">{{ news.comments.count() }}</span>
{{ m.icon('chevron-double-right', 'primary') }}
{% endif %}
{% if has_permission_to('admin_news') %}
<div class="pull-right">
{{ m.button(m.glyphicon('edit'), url('admin/news/' ~ news.id), null, 'xs') }}
</div>
{% endif %}
{% if has_permission_to('admin_news') %}
<div class="ms-auto">
{{ m.button(m.icon('pencil-square'), url('admin/news/' ~ news.id), 'secondary', 'sm') }}
</div>
{% endif %}
</div>
</div>
</div>
{% endmacro %}

@ -10,9 +10,7 @@
{{ f.input('password', __('Password'), 'password', {'min': min_length, 'required': true}) }}
{{ f.input('password_confirmation', __('Confirm password'), 'password', {'min': min_length, 'required': true}) }}
<div class="form-group">
{{ f.submit(__('Save')) }}
</div>
{{ f.submit(__('Save')) }}
</form>
</div>
{% endblock %}

@ -19,9 +19,7 @@
{{ __('We will send you an e-mail with a password recovery link. Please use the email address you used for registration.') }}
{{ f.input('email', __('E-Mail'), 'email', {'required': true}) }}
<div class="form-group">
{{ f.submit(__('Recover')) }}
</div>
{{ f.submit(__('Recover')) }}
</form>
</div>
{% endblock %}

@ -14,12 +14,12 @@
<div class="row">
<div class="col-md-6">
<p>
{{ m.glyphicon('time') }} {{ question.updated_at.format(__('Y-m-d H:i')) }}
{{ m.icon('clock') }} {{ question.updated_at.format(__('Y-m-d H:i')) }}
{% if question.updated_at != question.created_at %}
&emsp;{{ __('form.updated') }}
<br>
{{ m.glyphicon('time') }} {{ question.created_at.format(__('Y-m-d H:i')) }}
{{ m.icon('clock') }} {{ question.created_at.format(__('Y-m-d H:i')) }}
{% endif %}
</p>
</div>
@ -41,31 +41,31 @@
{{ f.submit() }}
{% if is_admin|default(false) %}
{{ f.submit(m.glyphicon('eye-close'), {'name': 'preview', 'btn_type': 'info', 'title': __('form.preview')}) }}
{{ f.submit(m.icon('eye'), {'name': 'preview', 'btn_type': 'info', 'title': __('form.preview')}) }}
{% if question and question.id %}
{{ f.submit(m.glyphicon('trash'), {'name': 'delete', 'btn_type': 'danger', 'title': __('form.delete')}) }}
{{ f.submit(m.icon('trash'), {'name': 'delete', 'btn_type': 'danger', 'title': __('form.delete')}) }}
{% endif %}
{% endif %}
</div>
</div>
{% if question %}
<div class="row">
<div class="row mt-3">
<div class="col-md-12">
<h2>{{ __('form.preview') }}</h2>
<div class="panel panel-default">
<div class="panel-body">
<div class="card {% if theme.type =='light' %}bg-light{% else %}bg-secondary{% endif %} mb-4">
<div class="card-body bg-body">
{{ question.text|nl2br }}
</div>
</div>
</div>
{% if question.answer %}
<div class="col-md-11 col-md-offset-1">
<div class="panel panel-info">
<div class="panel-body">
<div class="col-md-11 offset-md-1">
<div class="card bg-info">
<div class="card-body bg-body">
{{ question.answer|markdown }}
</div>
</div>

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

Loading…
Cancel
Save