├── all
    ├── scss
    │   ├── theme
    │   │   ├── .keep
    │   │   └── _chameleon.scss
    │   ├── components
    │   │   ├── .keep
    │   │   ├── _footer.scss
    │   │   ├── _toolbar.scss
    │   │   ├── _warning.scss
    │   │   ├── _stat.scss
    │   │   ├── _tooltip.scss
    │   │   ├── _hero.scss
    │   │   ├── _paging.scss
    │   │   ├── _jump.scss
    │   │   ├── _crumbs.scss
    │   │   ├── _toast.scss
    │   │   ├── _profile.scss
    │   │   ├── _editor.scss
    │   │   ├── _menu.scss
    │   │   ├── _topic.scss
    │   │   ├── _forum.scss
    │   │   ├── _tab.scss
    │   │   ├── _drawer.scss
    │   │   ├── _post.scss
    │   │   └── _notification.scss
    │   ├── objects
    │   │   └── _chameleon.scss
    │   ├── tools
    │   │   ├── function
    │   │   │   ├── _functions.scss
    │   │   │   ├── _strip-unit.scss
    │   │   │   ├── _letter-spacing.scss
    │   │   │   ├── _unitless.scss
    │   │   │   └── _fluid.scss
    │   │   └── mixin
    │   │   │   ├── _border_radius.scss
    │   │   │   ├── _space.scss
    │   │   │   ├── _vertical-rhythm.scss
    │   │   │   ├── _center.scss
    │   │   │   ├── _mixins.scss
    │   │   │   ├── _flexbox.scss
    │   │   │   ├── _font-size.scss
    │   │   │   ├── _clearfix.scss
    │   │   │   ├── _rtl.scss
    │   │   │   ├── _background-triangle.scss
    │   │   │   ├── _animations.scss
    │   │   │   ├── _shadows.scss
    │   │   │   └── _type.scss
    │   ├── base
    │   │   └── _chameleon.scss
    │   ├── settings
    │   │   ├── _default.scss
    │   │   ├── _dark.scss
    │   │   └── _light.scss
    │   ├── theme.0.3.0.scss
    │   └── theme-dark.0.3.0.scss
    ├── views
    │   ├── emoji.twig
    │   ├── includes
    │   │   ├── alert.twig
    │   │   ├── birthdays.twig
    │   │   ├── crumb.twig
    │   │   ├── search.twig
    │   │   ├── stats.twig
    │   │   ├── permissions.twig
    │   │   ├── jumpto.twig
    │   │   ├── footer.twig
    │   │   ├── toolbar.twig
    │   │   ├── forum-stats.twig
    │   │   ├── navbar.twig
    │   │   ├── forum-tools.twig
    │   │   ├── paging-fixed.twig
    │   │   ├── notification.twig
    │   │   ├── forum-subs.twig
    │   │   ├── emoji-picker.twig
    │   │   ├── topic.twig
    │   │   ├── post.twig
    │   │   ├── profile.twig
    │   │   └── forums.twig
    │   ├── index.twig
    │   ├── old
    │   │   ├── icons.twig
    │   │   └── pm.twig
    │   ├── layout
    │   │   └── layout.twig
    │   ├── topic.twig
    │   └── macros
    │   │   └── online.twig
    └── js
    │   └── _emoji-build.js
├── .npmignore
├── tests
    └── mock
    │   ├── sorts.json
    │   ├── filter.json
    │   ├── global.json
    │   ├── stats.json
    │   ├── rules.json
    │   ├── crumb.json
    │   ├── groups.json
    │   ├── birthdays.json
    │   ├── msg.json
    │   ├── online.json
    │   ├── announce.json
    │   ├── notification.json
    │   └── lang.json
├── .editorconfig
├── .travis.yml
├── .gitignore
├── .htmlhintrc
├── LICENSE
├── .vscode
    └── settings.json
├── README.md
├── package.json
├── gulpfile.js
└── .postcss-sorting.json


/all/scss/theme/.keep:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/all/scss/components/.keep:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | /dist/**/*
2 | /docs/**/*
3 | 


--------------------------------------------------------------------------------
/tests/mock/sorts.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"sorts": [
 3 | 		"Author",
 4 | 		"Time",
 5 | 		"Subject",
 6 | 		"Relies",
 7 | 		"views"
 8 | 	]
 9 | }
10 | 


--------------------------------------------------------------------------------
/tests/mock/filter.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"filters": [
 3 | 		"All Topics",
 4 | 		"1 Day",
 5 | 		"7 Days",
 6 | 		"2 Weeks",
 7 | 		"1 Month",
 8 | 		"3 Months",
 9 | 		"6 Months",
10 | 		"1 Year"
11 | 	]
12 | }
13 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # editorconfig.org
 2 | 
 3 | root = true
 4 | 
 5 | [*]
 6 | indent_style = tab
 7 | indent_size = 4
 8 | end_of_line = lf
 9 | charset = utf-8
10 | trim_trailing_whitespace = true
11 | insert_final_newline = true
12 | 
13 | [*.md]
14 | trim_trailing_whitespace = true
15 | 


--------------------------------------------------------------------------------
/all/views/emoji.twig:
--------------------------------------------------------------------------------
 1 | {# emoji.twig #}
 2 | {% extends "./layout/layout.twig" %}
 3 | 
 4 | {% block title %}
 5 | 	Emoji
 6 | {% endblock %}
 7 | 
 8 | {% block main %}
 9 | 	<div class="o-container">
10 | 		{% include './includes/emoji-picker.twig' %}
11 | 	</div>
12 | {% endblock %}
13 | 


--------------------------------------------------------------------------------
/tests/mock/global.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"phpbb": {
 3 | 		"notifications":"2",
 4 | 		"pms":"103",
 5 | 		"user": {
 6 | 			"name":"Hanakin",
 7 | 			"avatar":"https://avatars2.githubusercontent.com/u/73081?v=4&amp;s=46"
 8 | 		}
 9 | 	},
10 | 	"page": {
11 | 		"index": 0,
12 | 		"forum:": 0,
13 | 		"topic": 0,
14 | 		"ucp": 0
15 | 	}
16 | }
17 | 


--------------------------------------------------------------------------------
/all/views/includes/alert.twig:
--------------------------------------------------------------------------------
 1 | <div class="o-modal-mask" role="alert">
 2 | 	<div class="o-modal">
 3 | 		<header class="o-modal-header">
 4 | 			<h2 class="o-modal-header-title">
 5 | 				Get this party started?
 6 | 			</h2>
 7 | 		</header>
 8 | 		<p class="o-modal-body">
 9 | 			Turn up the jams and have a good time.
10 | 		</p>
11 | 	</div>
12 | </div>
13 | 


--------------------------------------------------------------------------------
/tests/mock/stats.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"stats": {
 3 | 		"online": {
 4 | 			"current":"519",
 5 | 			"registered":"16",
 6 | 			"hidden":"1",
 7 | 			"guests":"502",
 8 | 			"most":"3056"
 9 | 		},
10 | 		"posts":"161430",
11 | 		"topics":"20309",
12 | 		"members":"63056",
13 | 		"newest": {
14 | 			"name":"bobMarley",
15 | 			"profile": "./memberlist.php"
16 | 		}
17 | 	}
18 | }
19 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | language: node_js
 2 | node_js:
 3 |     - "10"
 4 |     - "11"
 5 |     - "12"
 6 |     - "13"
 7 | matrix:
 8 |     fast_finish: true
 9 |     allow_failures: 10
10 | cache:
11 |     directories:
12 |     - node_modules # NPM packages
13 | install: npm install
14 | before_script:
15 |     - npm i -g npm
16 |     - npm install -g gulp-cli
17 |     - npm install -g gulp
18 | script:
19 | 


--------------------------------------------------------------------------------
/all/scss/objects/_chameleon.scss:
--------------------------------------------------------------------------------
 1 | //------------------------------------------------------------------------------
 2 | // @object: Chameleon
 3 | //------------------------------------------------------------------------------
 4 | // @author: hanakin -- midaym
 5 | // @version: 0.3.0
 6 | // @description
 7 | //
 8 | //------------------------------------------------------------------------------
 9 | 
10 | //
11 | // @settings
12 | 
13 | // Layout Variables
14 | 
15 | // Variables
16 | 
17 | 
18 | //
19 | // @scss
20 | 


--------------------------------------------------------------------------------
/all/scss/tools/function/_functions.scss:
--------------------------------------------------------------------------------
 1 | //------------------------------------------------------------------------------
 2 | // @render: Functions
 3 | //------------------------------------------------------------------------------
 4 | // @author: hanakin -- midaym
 5 | // @version: 1.0.2
 6 | // @description
 7 | //
 8 | //------------------------------------------------------------------------------
 9 | //
10 | 
11 | 
12 | // 2.1 Functions
13 | @import 'fluid';
14 | @import 'strip-unit';
15 | @import 'unitless';
16 | @import 'letter-spacing';
17 | 


--------------------------------------------------------------------------------
/all/scss/base/_chameleon.scss:
--------------------------------------------------------------------------------
 1 | //------------------------------------------------------------------------------
 2 | // @base: Chameleon
 3 | //------------------------------------------------------------------------------
 4 | // @author: hanakin -- midaym
 5 | // @version: 0.3.0
 6 | // @description
 7 | //
 8 | //------------------------------------------------------------------------------
 9 | 
10 | //
11 | // @settings
12 | 
13 | // Layout Variables
14 | 
15 | // Variables
16 | 
17 | 
18 | 
19 | //
20 | // @scss
21 | 
22 | 
23 | header,
24 | section,
25 | footer {
26 | 	margin: 0 0 1.5rem;
27 | }
28 | 


--------------------------------------------------------------------------------
/all/scss/tools/function/_strip-unit.scss:
--------------------------------------------------------------------------------
 1 | //------------------------------------------------------------------------------
 2 | // @tool: Strip Units
 3 | //------------------------------------------------------------------------------
 4 | // @author: hanakin -- midaym
 5 | // @version: 1.1.0
 6 | // @description
 7 | //
 8 | // A function for striping a value of units
 9 | //
10 | //------------------------------------------------------------------------------
11 | 
12 | @use 'sass:math';
13 | 
14 | //
15 | // @scss
16 | @function strip-units($number) {
17 | 	@return math.div($number, ($number * 0 + 1));
18 | }
19 | 


--------------------------------------------------------------------------------
/all/scss/tools/mixin/_border_radius.scss:
--------------------------------------------------------------------------------
 1 | //------------------------------------------------------------------------------
 2 | // @tool: Border Radius
 3 | //------------------------------------------------------------------------------
 4 | // @author: hanakin -- midaym
 5 | // @version: 1.0.2
 6 | // @description
 7 | //
 8 | //
 9 | // Helper to make only top, bottom radius
10 | //
11 | //------------------------------------------------------------------------------
12 | 
13 | //
14 | // @scss
15 | @mixin border-radius($type, $radius) {
16 | 	border-#{$type}-left-radius: $radius;
17 | 	border-#{$type}-right-radius: $radius;
18 | }
19 | 


--------------------------------------------------------------------------------
/tests/mock/rules.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"rules": [
 3 | 		{
 4 | 			"id":"1",
 5 | 			"forum":"1",
 6 | 			"content":"test"
 7 | 		},
 8 | 		{
 9 | 			"id":"2",
10 | 			"forum":"2",
11 | 			"content":"<p>Please do not post support questions regarding installing, updating, or upgrading phpBB 3.2.x. If you need support for phpBB 3.2.x please visit the <a class=\"c-warning-link\" href=\"\">3.2.x Support Forum</a> on phpbb.com.</p><p>If you have questions regarding writing extensions please post in <a class=\"c-warning-link\" href=\"\">Extension Writers Discussion</a> to receive proper guidance from our staff and community.</p>"
12 | 		}
13 | 	]
14 | }
15 | 


--------------------------------------------------------------------------------
/all/scss/tools/mixin/_space.scss:
--------------------------------------------------------------------------------
 1 | //------------------------------------------------------------------------------
 2 | // @tool: Space
 3 | //------------------------------------------------------------------------------
 4 | // @author: hanakin -- midaym
 5 | // @version: 1.0.2
 6 | // @description
 7 | //
 8 | // Space elements by an amount based on your magic number. Pass in the property
 9 | // to be indented as a parameter
10 | //
11 | // Based on Typeset
12 | //
13 | //------------------------------------------------------------------------------
14 | 
15 | //
16 | // @scss
17 | @mixin space($property) {
18 | 	#{$property}: 2 * $default-line-height;
19 | }
20 | 


--------------------------------------------------------------------------------
/all/scss/tools/function/_letter-spacing.scss:
--------------------------------------------------------------------------------
 1 | //------------------------------------------------------------------------------
 2 | // @tool: Letter Spacing
 3 | //------------------------------------------------------------------------------
 4 | // @author: hanakin -- midaym
 5 | // @version: 1.1.0
 6 | // @description
 7 | //
 8 | // A function for returning proper letter spacing based on font-size
 9 | //
10 | //------------------------------------------------------------------------------
11 | 
12 | @use 'sass:math';
13 | 
14 | //
15 | // @scss
16 | @function letterspacing($tracking, $font-size) {
17 | 	@return math.div($tracking, ($font-size * 16)) * 1em;
18 | }
19 | 


--------------------------------------------------------------------------------
/all/scss/tools/function/_unitless.scss:
--------------------------------------------------------------------------------
 1 | //------------------------------------------------------------------------------
 2 | // @tool: Unitless
 3 | //------------------------------------------------------------------------------
 4 | // @author: hanakin -- midaym
 5 | // @version: 1.1.0
 6 | // @description
 7 | //
 8 | // A function for returning a unitless number based on root font-size
 9 | //
10 | //------------------------------------------------------------------------------
11 | 
12 | @use 'sass:math';
13 | 
14 | //
15 | // @scss
16 | @function unit-less($line-height, $font-size: $default-font-size) {
17 | 	@return strip-units(math.div($line-height, $font-size));
18 | }
19 | 


--------------------------------------------------------------------------------
/all/scss/tools/mixin/_vertical-rhythm.scss:
--------------------------------------------------------------------------------
 1 | //------------------------------------------------------------------------------
 2 | // @tool: Vertical Rhythm
 3 | //------------------------------------------------------------------------------
 4 | // @author: hanakin -- midaym
 5 | // @version: 1.0.2
 6 | // @description
 7 | //
 8 | // A lot of elements need to share some declarations (mainly for
 9 | // vertical rhythm), so we `extend` some silent classes.
10 | //
11 | // based on Typeset
12 | //
13 | //------------------------------------------------------------------------------
14 | 
15 | //
16 | // @scss
17 | @mixin vertical-rhythm {
18 | 	margin: 0 0 $default-line-height;
19 | }
20 | 


--------------------------------------------------------------------------------
/all/scss/tools/mixin/_center.scss:
--------------------------------------------------------------------------------
 1 | //------------------------------------------------------------------------------
 2 | // @tool: Center
 3 | //------------------------------------------------------------------------------
 4 | // @author: hanakin -- midaym
 5 | // @version: 1.0.2
 6 | // @description
 7 | //
 8 | // Mixin for centering content in the vertical center of an element.
 9 | //
10 | //------------------------------------------------------------------------------
11 | 
12 | //
13 | // @settings
14 | 
15 | //
16 | // @scss
17 | 
18 | @mixin center($height: false) {
19 | 	display: inline-flex;
20 | 	justify-content: center;
21 | 	align-items: center;
22 | 	@if ($height) {
23 | 		height: $height;
24 | 	}
25 | }
26 | 


--------------------------------------------------------------------------------
/tests/mock/crumb.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"crumbs": [
 3 | 		{
 4 | 			"id":1,
 5 | 			"title":"[1] phpBB 3.x Discussion",
 6 | 			"link":"#1"
 7 | 		},
 8 | 		{
 9 | 			"id":2,
10 | 			"title":"[2] phpBB 3.x Development",
11 | 			"link":"#2"
12 | 		},
13 | 		{
14 | 			"id":3,
15 | 			"title":"[3] Merged RFCs",
16 | 			"link":"#3"
17 | 		},
18 | 		{
19 | 			"id":4,
20 | 			"title":"[4] Merged Event Requests",
21 | 			"link":"#4"
22 | 		},
23 | 		{
24 | 			"id":5,
25 | 			"title":"[5] Your first category",
26 | 			"link":"#5"
27 | 		},
28 | 		{
29 | 			"id":6,
30 | 			"title":"[6] Your first category",
31 | 			"link":"#6"
32 | 		},
33 | 		{
34 | 			"id":7,
35 | 			"title":"[7] Your first category",
36 | 			"link":"#7"
37 | 		}
38 | 	]
39 | }
40 | 


--------------------------------------------------------------------------------
/all/scss/tools/mixin/_mixins.scss:
--------------------------------------------------------------------------------
 1 | //------------------------------------------------------------------------------
 2 | // @render: Mixins
 3 | //------------------------------------------------------------------------------
 4 | // @author: hanakin -- midaym
 5 | // @version: 1.0.2
 6 | // @description
 7 | //
 8 | //------------------------------------------------------------------------------
 9 | //
10 | 
11 | 
12 | // 2.2 Mixins
13 | @import 'rtl';
14 | @import 'animations';
15 | @import 'background-triangle';
16 | @import 'center';
17 | @import 'clearfix';
18 | @import 'font-size';
19 | @import 'flexbox';
20 | @import 'shadows';
21 | @import 'space';
22 | @import 'type';
23 | @import 'vertical-rhythm';
24 | @import 'border_radius';
25 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | 
 6 | # Runtime data
 7 | pids
 8 | *.pid
 9 | *.seed
10 | 
11 | # Directory for instrumented libs generated by jscoverage/JSCover
12 | lib-cov
13 | 
14 | # Coverage directory used by tools like istanbul
15 | coverage
16 | 
17 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
18 | .grunt
19 | 
20 | # node-waf configuration
21 | .lock-wscript
22 | 
23 | # Compiled binary addons (http://nodejs.org/api/addons.html)
24 | build/Release
25 | 
26 | # Dependency directory
27 | node_modules
28 | 
29 | # Optional npm cache directory
30 | .npm
31 | 
32 | # Optional REPL history
33 | .node_repl_history
34 | /tests/.DS_Store
35 | /.DS_Store
36 | /.cache
37 | 


--------------------------------------------------------------------------------
/all/scss/tools/mixin/_flexbox.scss:
--------------------------------------------------------------------------------
 1 | //------------------------------------------------------------------------------
 2 | // @tool: Flexbox
 3 | //------------------------------------------------------------------------------
 4 | // @author: hanakin -- midaym
 5 | // @version: 1.0.2
 6 | // @description
 7 | //
 8 | // Mixin for flexbox
 9 | //
10 | //------------------------------------------------------------------------------
11 | 
12 | //
13 | // @settings
14 | 
15 | // Layout Variables
16 | 
17 | //
18 | // @scss
19 | 
20 | @mixin parent($col: row) {
21 | 	display: flex;
22 | 	flex-direction: $col;
23 | }
24 | 
25 | @mixin column {
26 | 	flex-direction: column;
27 | }
28 | 
29 | @mixin child {
30 | 	flex: 1;
31 | 	align-self: auto;
32 | }
33 | 


--------------------------------------------------------------------------------
/all/views/includes/birthdays.twig:
--------------------------------------------------------------------------------
 1 | <div class="c-tab-pane t-tab-pane" id="birthdays" role="tabpanel">
 2 | 	<div class="c-tab-pane-row t-tab-pane-row">
 3 | 		<h4 class="c-tab-pane-title t-tab-pane-title">{{ lang.congrats }}{{ lang.colon }} </h4>
 4 | 		<span class="c-tab-pane-text t-tab-pane-text">
 5 | 			{% for item in birthdays %}
 6 | 				{% if item.group %}
 7 | 					<a class="c-tab-pane-link t-tab-pane-link" href="{{ item.profile }}" style="color: {{ item.group }};">{{ item.name }}</a> ({{ item.age }})
 8 | 				{% else %}
 9 | 					<a class="c-tab-pane-link t-tab-pane-link" href="{{ item.profile }}">{{ item.name }}</a> ({{ item.age }})
10 | 				{% endif %}
11 | 				{% if loop.last %}{% else %}, {% endif %}
12 | 			{% endfor %}
13 | 		</span>
14 | 	</div>
15 | </div>
16 | 


--------------------------------------------------------------------------------
/all/scss/tools/function/_fluid.scss:
--------------------------------------------------------------------------------
 1 | //------------------------------------------------------------------------------
 2 | // @tool: Responsive Fluid Type
 3 | //------------------------------------------------------------------------------
 4 | // @author: hanakin -- midaym
 5 | // @version: 1.0.2
 6 | // @description
 7 | //
 8 | // responsive fluid text based on min max breakpoints and viewport size
 9 | //
10 | // based on:
11 | // https://madebymike.com.au/writing/precise-control-responsive-typography/
12 | // https://medium.com/@zkareemz/golden-ratio-62b3b6d4282a
13 | //
14 | //------------------------------------------------------------------------------
15 | 
16 | //
17 | // @scss
18 | @function fluid($mn, $mx, $sm, $lg) {
19 | 	$val: calc(#{$mn}PX + (#{$mx} - #{$mn}) * ( (100vw - #{$sm}PX) / ( #{$lg} - #{$sm}) ));
20 | 	@return $val;
21 | }
22 | 


--------------------------------------------------------------------------------
/all/scss/tools/mixin/_font-size.scss:
--------------------------------------------------------------------------------
 1 | //------------------------------------------------------------------------------
 2 | // @tool: Font-size
 3 | //------------------------------------------------------------------------------
 4 | // @author: hanakin -- midaym
 5 | // @version: 1.1.0
 6 | // @description
 7 | //
 8 | //
 9 | // Typeset Mixins
10 | //
11 | // Quickly generate a font-size in rems, with a pixel fallback, based on the
12 | // value we pass into the mixin
13 | //
14 | //------------------------------------------------------------------------------
15 | 
16 | @use 'sass:math';
17 | 
18 | //
19 | // @scss
20 | @mixin font-size($font-size, $line-height: true) {
21 | 	font-size: rem($font-size);
22 | 	@if $line-height == true {
23 | 		line-height: ceil(math.div($font-size, $default-line-height)) * math.div($default-line-height, $font-size);
24 | 	}
25 | }
26 | 


--------------------------------------------------------------------------------
/all/views/includes/crumb.twig:
--------------------------------------------------------------------------------
 1 | <div class="c-crumbs-container t-crumbs-container" role="navigation">
 2 | 	<ul class="c-crumbs t-crumbs" role="list">
 3 | 		<li class="c-crumbs-item t-crumbs-item" role="listitem">
 4 | 			<a class="c-crumbs-link t-crumbs-link" href="#" title="{{ lang.board_index }}">
 5 | 				{{ 'ic:outline-home'|icon('iconify', 'o-icon c-crumbs-icon t-crumbs-icon')|safe }}
 6 | 				<span class="c-crumbs-text t-crumbs-text">{{ lang.board_index }}</span>
 7 | 			</a>
 8 | 		</li>
 9 | 		{% for crumb in crumbs %}
10 | 			<li class="c-crumbs-item t-crumbs-item" role="listitem">
11 | 				<a class="c-crumbs-link t-crumbs-link" href="{{ crumb.link }}">
12 | 					{{ 'mdi:chevron-right'|icon('iconify', 'o-icon c-crumbs-icon t-crumbs-icon')|safe }}
13 | 					<span class="c-crumbs-text t-crumbs-text">{{ crumb.title }}</span>
14 | 				</a>
15 | 			</li>
16 | 		{% endfor %}
17 | 	</ul>
18 | </div>
19 | 


--------------------------------------------------------------------------------
/.htmlhintrc:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"doctype-first": true,
 3 | 	"doctype-html5": true,
 4 | 	"head-script-disabled": false,
 5 | 	"style-disabled": true,
 6 | 	"title-require": true,
 7 | 
 8 | 	"attr-lowercase": ["viewBox", "preserveAspectRatio"],
 9 | 	"attr-no-duplication": true,
10 | 	"attr-no-unnecessary-whitespace": true,
11 | 	"attr-unsafe-chars": true,
12 | 	"attr-value-double-quotes": true,
13 | 	"attr-value-not-empty": false,
14 | 	"alt-require": true,
15 | 	"input-requires-label": true,
16 | 
17 | 	"tag-pair": true,
18 | 	"tagname-lowercase": true,
19 | 	"empty-tag-not-self-closed": true,
20 | 	"src-not-empty": true,
21 | 	"href-abs-or-rel": false,
22 | 
23 | 	"id-class-ad-disabled": false,
24 | 	"id-class-value": "dash",
25 | 	"id-unique": true,
26 | 
27 | 	"inline-script-disabled": true,
28 | 	"inline-style-disabled": false,
29 | 
30 | 	"space-tab-mixed-disabled": "tab",
31 | 	"spec-char-escape": true
32 | }
33 | 


--------------------------------------------------------------------------------
/all/views/includes/search.twig:
--------------------------------------------------------------------------------
 1 | <div class="o-bar o-bar-search t-bar-search" data-container="search">
 2 | 	<form class="o-bar-search-form t-bar-search-form" action="./search.php" method="get" id="search" role="search">
 3 | 		<a class="o-bar-search-toggle t-bar-search-toggle" href="#" data-tooltip="true" title="{{ lang.search }}">
 4 | 			{{ 'mdi:search'|icon('iconify', 'o-icon o-bar-search-toggle-icon t-bar-search-toggle-icon')|safe }}
 5 | 		</a>
 6 | 		<input class="o-bar-search-field t-bar-search-field" name="keywords" id="keywords" type="search" maxlength="128" title="{{ lang.search }}" value="" placeholder="Search…">
 7 | 		<a class="o-action o-bar-search-action t-bar-search-action" href="./search.php" data-tooltip="true" title="{{ lang.search_adv }}">
 8 | 			{{ 'mdi:settings-outline'|icon('iconify', 'o-icon o-bar-search-toggle-icon t-bar-search-toggle-icon')|safe }}
 9 | 			<span class="o-action-text t-bar-action-text u-sr-only">
10 | 				{{ lang.search_adv }}
11 | 			</span>
12 | 		</a>
13 | 	</form>
14 | </div>
15 | 


--------------------------------------------------------------------------------
/all/scss/components/_footer.scss:
--------------------------------------------------------------------------------
 1 | //------------------------------------------------------------------------------
 2 | // @component: Footer
 3 | //------------------------------------------------------------------------------
 4 | // @author: hanakin -- midaym
 5 | // @version: 0.2.0
 6 | // @description
 7 | //
 8 | //------------------------------------------------------------------------------
 9 | 
10 | //
11 | // @settings
12 | 
13 | // Layout Variables
14 | $footer-spacing: $default-spacing !default;
15 | $footer-height: $default-height-dense !default;
16 | 
17 | // Theme Variables
18 | 
19 | //
20 | // @scss
21 | 
22 | .c-footer {
23 | 	text-align: center;
24 | 	padding: ($footer-spacing * 8) 0 ($footer-spacing * 10);
25 | 
26 | 	&-nav {
27 | 		&-link {
28 | 			@include center($footer-height);
29 | 			padding: 0 ($footer-spacing * 2);
30 | 
31 | 			&-icon + &-text {
32 | 				margin-left: $footer-spacing;
33 | 			}
34 | 		}
35 | 	}
36 | 
37 | 	&-copyright,
38 | 	&-legal {
39 | 		margin: ($footer-spacing * 2) 0;
40 | 	}
41 | }
42 | 


--------------------------------------------------------------------------------
/all/scss/tools/mixin/_clearfix.scss:
--------------------------------------------------------------------------------
 1 | //------------------------------------------------------------------------------
 2 | // @tool: Clearfix
 3 | //------------------------------------------------------------------------------
 4 | // @author: hanakin -- midaym
 5 | // @version: 1.0.2
 6 | // @description:
 7 | //
 8 | // Clearfix: contain floats
 9 | //
10 | // For modern browsers
11 | // 1. The space content is one way to avoid an Opera bug when the
12 | //    `contenteditable` attribute is included anywhere else in the document.
13 | //    Otherwise it causes space to appear at the top and bottom of elements
14 | //    that receive the `clearfix` class.
15 | // 2. The use of `table` rather than `block` is only necessary if using
16 | //    `:before` to contain the top-margins of child elements.
17 | //
18 | //------------------------------------------------------------------------------
19 | 
20 | //
21 | // @scss
22 | @mixin clearfix {
23 | 	&:after {
24 | 		display: table; // [2]
25 | 		clear: both;
26 | 		content: ' '; // [1]
27 | 	}
28 | }
29 | 


--------------------------------------------------------------------------------
/all/views/includes/stats.twig:
--------------------------------------------------------------------------------
 1 | <div class="c-tab-pane t-tab-pane is-active" id="statistics" role="tabpanel">
 2 | 	<div class="c-tab-pane-row t-tab-pane-row">
 3 | 		<ul class="c-stat-list c-tab-pane-stats t-tab-list t-tab-pane-stats">
 4 | 			<li class="c-stat-item t-stat-item">{{ lang.total_posts }} <span class="o-tag c-stat-badge t-stat-badge">{{ stats.posts }}</span></li>
 5 | 			<li class="c-stat-item t-stat-item">{{ lang.total_topics }} <span class="o-tag c-stat-badge t-stat-badge">{{ stats.topics }}</span></li>
 6 | 			<li class="c-stat-item t-stat-item">{{ lang.total_members }} <span class="o-tag c-stat-badge t-stat-badge">{{ stats.members }}</span></li>
 7 | 			<li class="c-stat-item t-stat-item">{{ lang.most_online }} <span class="o-tag c-stat-badge t-stat-badge">{{ stats.online.most }}</span></li>
 8 | 			<li class="c-stat-item t-stat-item">{{ lang.newest_member }}
 9 | 				<a class="o-tag c-stat-badge c-stat-badge-link t-stat-badge t-stat-badge-link" href="{{ stats.newest.profile }}">{{ stats.newest.name }}</a>
10 | 			</li>
11 | 		</ul>
12 | 	</div>
13 | </div>
14 | 


--------------------------------------------------------------------------------
/all/scss/tools/mixin/_rtl.scss:
--------------------------------------------------------------------------------
 1 | //------------------------------------------------------------------------------
 2 | // @tool: RTL
 3 | //------------------------------------------------------------------------------
 4 | // @author: hanakin -- midaym
 5 | // @version: 1.0.2
 6 | // @description
 7 | //
 8 | //
 9 | // Helper mixin to include rtl changes to a components. Mixin is a port of the
10 | // material-web components project: https://github.com/material-components/material-components-web/blob/master/packages/mdc-rtl/_mixins.scss
11 | // Guidance on usage rtl can be found here: https://material.io/design/usability/bidirectionality.html#mirroring-layout
12 | //
13 | //------------------------------------------------------------------------------
14 | 
15 | //
16 | // @scss
17 | @mixin rtl($root-selector: null) {
18 | 	@if ($root-selector) {
19 | 		@at-root {
20 | 			#{$root-selector}[dir='rtl'] &,
21 | 			[dir='rtl'] #{$root-selector} & {
22 | 				@content;
23 | 			}
24 | 		}
25 | 	} @else {
26 | 		[dir='rtl'] &,
27 | 		&[dir='rtl'] {
28 | 			@content;
29 | 		}
30 | 	}
31 | }
32 | 


--------------------------------------------------------------------------------
/all/scss/tools/mixin/_background-triangle.scss:
--------------------------------------------------------------------------------
 1 | //------------------------------------------------------------------------------
 2 | // @tool: Background Triangle
 3 | //------------------------------------------------------------------------------
 4 | // @author: hanakin -- midaym
 5 | // @version: 1.0.2
 6 | // @description
 7 | //
 8 | // Adds a downward-facing triangle as a background image to an element.
 9 | // The image is formatted as an SVG, making it easy to change the color.
10 | // Because Internet Explorer doesn't support encoded SVGs as background images,
11 | // a fallback is also included.
12 | //
13 | //------------------------------------------------------------------------------
14 | 
15 | //
16 | // @scss
17 | @mixin background-triangle($color: $black) {
18 | 	background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="36px" height="36px" viewBox="0 0 24 24"%3E%3Cpath fill-rule="evenodd" style="fill:#{$color}" d="M12 16c-.297 0-.578-.133-.768-.359l-5-6A1.001 1.001 0 0 1 7 8h10a1 1 0 0 1 .767 1.64l-5 6A1 1 0 0 1 12 16zm-2.865-6L12 13.437l2.865-3.438h-5.73V10z"%3E%3C/path%3E%3C/svg%3E');
19 | }
20 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2016 Michael Miday
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/all/scss/components/_toolbar.scss:
--------------------------------------------------------------------------------
 1 | //------------------------------------------------------------------------------
 2 | // @component: Toolbar
 3 | //------------------------------------------------------------------------------
 4 | // @author: hanakin -- midaym
 5 | // @version: 0.3.0
 6 | // @description
 7 | //
 8 | //------------------------------------------------------------------------------
 9 | 
10 | //
11 | // @settings
12 | 
13 | // Layout Variables
14 | $toolbar-spacing: $default-spacing !default;
15 | $toolbar-border-radius: $default-border-radius !default;
16 | 
17 | // Theme Variables
18 | 
19 | //
20 | // @scss
21 | 
22 | //
23 | .c-toolbar {
24 | 	@include shadow(2); // google material design
25 | 	border-radius: $toolbar-border-radius;
26 | 	margin: 0 0 ($toolbar-spacing * 3);
27 | 	grid-template-columns: auto auto;
28 | 
29 | 	&-item {
30 | 		position: relative;
31 | 	}
32 | 
33 | 	&-action {
34 | 		&:last-of-type {
35 | 			border-top-right-radius: $toolbar-border-radius;
36 | 			border-bottom-right-radius: $toolbar-border-radius;
37 | 		}
38 | 
39 | 		@media (min-width: $md) {
40 | 			&-text + &-icon {
41 | 				margin-left: $toolbar-spacing;
42 | 			}
43 | 
44 | 			&-icon + &-text {
45 | 				margin-right: $toolbar-spacing;
46 | 			}
47 | 		}
48 | 	}
49 | }
50 | 


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "cSpell.words": [
 3 |         "abcdefghijklmnopqrstuvwxyz",
 4 |         "Alexa",
 5 |         "architected",
 6 |         "atrule",
 7 |         "Cpath",
 8 |         "Csvg",
 9 |         "docsify",
10 |         "Exabot",
11 |         "francona",
12 |         "Gazit",
13 |         "Git's",
14 |         "groupby",
15 |         "hanakin",
16 |         "helvetica",
17 |         "hljs",
18 |         "horiz",
19 |         "htmlhintrc",
20 |         "iconify",
21 |         "Idan",
22 |         "invisibles",
23 |         "ITCSS",
24 |         "jsdelivr",
25 |         "jsfiddle",
26 |         "jumpto",
27 |         "labelledby",
28 |         "Miday",
29 |         "midaym",
30 |         "necolas",
31 |         "Neue",
32 |         "octo",
33 |         "octocat",
34 |         "onclick",
35 |         "OOCSS",
36 |         "paren",
37 |         "PHPBB",
38 |         "prefs",
39 |         "pxtorem",
40 |         "rgba",
41 |         "Roboto",
42 |         "rque",
43 |         "SMACSS",
44 |         "stlyelintrc",
45 |         "stylefmt",
46 |         "stylelintrc",
47 |         "svg",
48 |         "svgs",
49 |         "torem",
50 |         "twemoji",
51 |         "unspaced",
52 |         "winky",
53 |         "xlink",
54 |         "YYYYMMDD"
55 |     ]
56 | }
57 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ## CODENAME: Chameleon
 2 | 
 3 | @version 0.3.0
 4 | 
 5 | ## WHAT IS IT
 6 | A new theme being developed to replace prosilver going forward for the phpBB platform. It is meant to be forward thinking, easily maintainable and endlessly scaleable yet still be very customizable. Checkout the [Development Topic](https://area51.phpbb.com/docs/dev/development/index.html) on phpBB.com or open a discussion on area51 in the [Style Development](https://area51.phpbb.com/phpBB/viewforum.php?f=131&sid=719d3d0bbf257d54cbe43d1dfb4fb8c2) forum for more detailed information. You can check out the current core [Blockers/Todos](https://area51.phpbb.com/phpBB/viewtopic.php?f=141&t=61766) as well.
 7 | 
 8 | ## GUIDELINES
 9 | We are using very strict coding guidelines now to help ensure everything stays maintainable and easy to use.
10 | Check them out [here](https://area51.phpbb.com/docs/dev/development/index.html)
11 | 
12 | ## DEPENDENCIES
13 | This project relies on the new [Base-L](https://github.com/hanakin/base-l) front-end framework being built along side of the theme.
14 | 
15 | ## HOW TO CONTRIBUTE
16 | 1. Fork the project
17 | 2. Create an Issue
18 | 4. Submit a Pull Request ensure you add a link to the issue in your Pull Request comment
19 | 
20 | ## LICENSE
21 | [MIT](https://opensource.org/licenses/MIT)
22 | 


--------------------------------------------------------------------------------
/tests/mock/groups.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"groups": [
 3 | 		{
 4 | 			"id": 0,
 5 | 			"name": "Management",
 6 | 			"color": "#4f6772",
 7 | 			"url": "./memberlist.php?mode=group&g=0"
 8 | 		},
 9 | 		{
10 | 			"id": 1,
11 | 			"name": "Development",
12 | 			"color": "#00bfa5",
13 | 			"url": "./memberlist.php?mode=group&g=1"
14 | 		},
15 | 		{
16 | 			"id": 2,
17 | 			"name": "Customizations",
18 | 			"color": "#b84fdb",
19 | 			"url": "./memberlist.php?mode=group&g=2"
20 | 		},
21 | 		{
22 | 			"id": 3,
23 | 			"name": "Support",
24 | 			"color": "#ffab40",
25 | 			"url": "./memberlist.php?mode=group&g=3"
26 | 		},
27 | 		{
28 | 			"id": 4,
29 | 			"name": "Community",
30 | 			"color": "#3f54c0",
31 | 			"url": "./memberlist.php?mode=group&g=4"
32 | 		},
33 | 		{
34 | 			"id": 5,
35 | 			"name": "Infrastructure",
36 | 			"color": "#00bcd4",
37 | 			"url": "./memberlist.php?mode=group&g=5"
38 | 		},
39 | 		{
40 | 			"id": 6,
41 | 			"name": "Consultant",
42 | 			"color": "#b0bec5",
43 | 			"url": "./memberlist.php?mode=group&g=6"
44 | 		},
45 | 		{
46 | 			"id": 7,
47 | 			"name": "Registered User",
48 | 			"color": "#008dff",
49 | 			"url": "./memberlist.php?mode=group&g=7"
50 | 		},
51 | 		{
52 | 			"id": 8,
53 | 			"name": "Bots",
54 | 			"color": "#9e8da7",
55 | 			"url": "./memberlist.php?mode=group&g=8"
56 | 		}
57 | 	]
58 | }
59 | 


--------------------------------------------------------------------------------
/all/views/includes/permissions.twig:
--------------------------------------------------------------------------------
 1 | <div class="c-tab-pane t-tab-pane is-active" id="forum-permissions" role="tabpanel">
 2 | 	<div class="c-tab-pane-row t-tab-pane-row">
 3 | 		<span class="c-tab-pane-text t-tab-text" role="list">
 4 | 			<span class="o-tag c-stat-badge t-stat-badge" data-tooltip="true" title="{{ lang.forum_post }}" role="listitem">
 5 | 				{{ 'file-new'|icon('inline', 'o-icon c-stat-badge-icon t-stat-badge-icon')|safe }}
 6 | 			</span>
 7 | 			<span class="o-tag c-stat-badge t-stat-badge" data-tooltip="true" title="{{ lang.forum_reply }}" role="listitem">
 8 | 				{{ 'mdi:reply'|icon('iconify', 'o-icon c-stat-badge-icon t-stat-badge-icon')|safe }}
 9 | 			</span>
10 | 			<span class="o-tag c-stat-badge t-stat-badge" data-tooltip="true" title="{{ lang.forum_edit }}" role="listitem">
11 | 				{{ 'mdi:pencil-outline'|icon('iconify', 'o-icon c-stat-badge-icon t-stat-badge-icon')|safe }}
12 | 			</span>
13 | 			<span class="o-tag c-stat-badge t-stat-badge" data-tooltip="true" title="{{ lang.forum_delete }}" role="listitem">
14 | 				{{ 'mdi:trash-outline'|icon('iconify', 'o-icon c-stat-badge-icon t-stat-badge-icon')|safe }}
15 | 			</span>
16 | 			<span class="o-tag c-stat-badge t-stat-badge" data-tooltip="true" title="{{ lang.forum_attach }}" role="listitem">
17 | 				{{ 'mdi:attach-file'|icon('iconify', 'o-icon c-stat-badge-icon t-stat-badge-icon')|safe }}
18 | 			</span>
19 | 		</span>
20 | 	</div>
21 | </div>
22 | 


--------------------------------------------------------------------------------
/all/views/includes/jumpto.twig:
--------------------------------------------------------------------------------
 1 | <a class="o-bar-item o-action c-toolbar-action" href="" data-toggle="menu" data-tooltip="true" title="{{ lang.jump_to }}">
 2 | 	{{ 'outline-directions'|icon('inline', 'o-icon o-action-icon c-toolbar-action-icon')|safe }}
 3 | </a>
 4 | <div class="c-menu-container c-jumpto t-menu-container t-jumpto" data-container="menu">
 5 | 	<ul class="c-menu t-menu">
 6 | 	{% for item in forums %}
 7 | 		{% if item.cat == 1 %}
 8 | 			<li class="c-menu-header t-menu-header">
 9 | 				<span class="c-menu-header-text t-forum-header-text">{{ item.name }}</span>
10 | 			</li>
11 | 		{% else %}
12 | 			<li class="c-menu-item t-menu-item">
13 | 				<a class="c-menu-link t-menu-link" href="{{ item.url }}" title="{{ item.name }}">
14 | 					{{ item.type|icon('inline', 'o-icon c-menu-link-icon t-menu-forum-icon')|safe }}
15 | 					<span class="c-menu-text t-forum-text">{{ item.name }}</span>
16 | 				</a>
17 | 			</li>
18 | 			{% if item.subs %}
19 | 			<li class="c-menu-divider"></li>
20 | 				{% for sub in item.subs %}
21 | 					<li class="c-menu-item t-menu-item">
22 | 						<a class="c-menu-link t-menu-link" href="{{ sub.url }}" title="{{ sub.name }}">
23 | 							{{ 'circle-small-outline'|icon('inline', 'o-icon c-menu-link-icon t-menu-forum-icon')|safe }}
24 | 							<span class="c-menu-text t-forum-text">{{ sub.name }}</span>
25 | 						</a>
26 | 					</li>
27 | 				{% endfor %}
28 | 			{% endif %}
29 | 		{% endif %}
30 | 	{% endfor %}
31 | 	</ul>
32 | </div>
33 | 


--------------------------------------------------------------------------------
/all/scss/tools/mixin/_animations.scss:
--------------------------------------------------------------------------------
 1 | //------------------------------------------------------------------------------
 2 | // @tool: Animations
 3 | //------------------------------------------------------------------------------
 4 | // @author: hanakin -- midaym
 5 | // @version: 1.0.2
 6 | // @description
 7 | //
 8 | //------------------------------------------------------------------------------
 9 | 
10 | //
11 | // @settings
12 | $animation-curve-fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1) !default;
13 | $animation-curve-linear-out-slow-in: cubic-bezier(0, 0, 0.2, 1) !default;
14 | $animation-curve-fast-out-linear-in: cubic-bezier(0.4, 0, 1, 1) !default;
15 | 
16 | $default-animation-curve: $animation-curve-fast-out-slow-in !default;
17 | 
18 | //
19 | // @scss
20 | @mixin material-animation-fast-out-slow-in($duration: 0.2s) {
21 | 	transition-timing-function: $animation-curve-fast-out-slow-in;
22 | 	transition-duration: $duration;
23 | }
24 | 
25 | @mixin material-animation-linear-out-slow-in($duration: 0.2s) {
26 | 	transition-timing-function: $animation-curve-linear-out-slow-in;
27 | 	transition-duration: $duration;
28 | }
29 | 
30 | @mixin material-animation-fast-out-linear-in($duration: 0.2s) {
31 | 	transition-timing-function: $animation-curve-fast-out-linear-in;
32 | 	transition-duration: $duration;
33 | }
34 | 
35 | @mixin material-animation-default($duration: 0.2s) {
36 | 	transition-timing-function: $animation-curve-default;
37 | 	transition-duration: $duration;
38 | }
39 | 


--------------------------------------------------------------------------------
/all/views/includes/footer.twig:
--------------------------------------------------------------------------------
 1 | <div class="c-footer t-footer">
 2 | 	<nav class="c-footer-nav t-footer-nav">
 3 | 		<a class="c-footer-nav-link t-footer-nav-link" href="">
 4 | 			{{ 'mdi:email-outline'|icon('iconify', 'o-icon c-footer-nav-link-icon t-footer-nav-link-icon')|safe }}
 5 | 			<span class="c-footer-nav-link-text t-footer-nav-link-text">{{ lang.contact_us }}</span>
 6 | 		</a>
 7 | 		<a class="c-footer-nav-link t-footer-nav-link" href="">
 8 | 			{{ 'mdi:account-group-outline'|icon('iconify', 'o-icon c-footer-nav-link-icon t-footer-nav-link-icon')|safe }}
 9 | 			<span class="c-footer-nav-link-text t-footer-nav-link-text">{{ lang.team }}</span>
10 | 		</a>
11 | 		<a class="c-footer-nav-link t-footer-nav-link" href="">
12 | 			{{ 'ic:outline-contacts'|icon('iconify', 'o-icon c-footer-nav-link-icon t-footer-nav-link-icon')|safe }}
13 | 			<span class="c-footer-nav-link-text t-footer-nav-link-text">{{ lang.members }}</span>
14 | 		</a>
15 | 		<a class="c-footer-nav-link t-footer-nav-link" href="">
16 | 			{{ 'mdi:delete-outline'|icon('iconify', 'o-icon c-footer-nav-link-icon t-footer-nav-link-icon')|safe }}
17 | 			<span class="c-footer-nav-link-text t-footer-nav-link-text">{{ lang.delete_cookies }}</span>
18 | 		</a>
19 | 	</nav>
20 | 	<p class="c-footer-copyright t-footer-copyright">{{ lang.powered_by }} <a href="">{{ lang.site_title }}</a> {{ lang.copyright }}</p>
21 | 	<p class="c-footer-legal t-footer-legal">
22 | 		<a href="">{{ lang.privacy }}</a> | <a href="">{{ lang.terms }}</a>
23 | 	</p>
24 | </div>
25 | 


--------------------------------------------------------------------------------
/tests/mock/birthdays.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"birthdays": [
 3 | 		{
 4 | 			"id": 1,
 5 | 			"name": "user11",
 6 | 			"profile": "./memberlist.php",
 7 | 			"age": 53
 8 | 		},
 9 | 		{
10 | 			"id": 2,
11 | 			"name": "myNameBart",
12 | 			"profile": "./memberlist.php",
13 | 			"age": 47
14 | 		},
15 | 		{
16 | 			"id": 3,
17 | 			"name": "I help",
18 | 			"profile": "./memberlist.php",
19 | 			"group": "#ffab40",
20 | 			"age": 35
21 | 		},
22 | 		{
23 | 			"id": 4,
24 | 			"name": "user32",
25 | 			"profile": "./memberlist.php",
26 | 			"age": 38
27 | 		},
28 | 		{
29 | 			"id": 5,
30 | 			"name": "meInIrene",
31 | 			"profile": "./memberlist.php",
32 | 			"age": 15
33 | 		},
34 | 		{
35 | 			"id": 6,
36 | 			"name": "Dave",
37 | 			"profile": "./memberlist.php",
38 | 			"age": 31
39 | 		},
40 | 		{
41 | 			"id": 7,
42 | 			"name": "francony",
43 | 			"profile": "./memberlist.php",
44 | 			"age": 42
45 | 		},
46 | 		{
47 | 			"id": 8,
48 | 			"name": "widgetFree",
49 | 			"profile": "./memberlist.php",
50 | 			"age": 26
51 | 		},
52 | 		{
53 | 			"id": 9,
54 | 			"name": "I manage",
55 | 			"profile": "./memberlist.php",
56 | 			"group": "#4f6772",
57 | 			"age": 33
58 | 		},
59 | 		{
60 | 			"id": 10,
61 | 			"name": "scubaSteve",
62 | 			"profile": "./memberlist.php",
63 | 			"age": 67
64 | 		},
65 | 		{
66 | 			"id": 11,
67 | 			"name": "pickleRick",
68 | 			"profile": "./memberlist.php",
69 | 			"age": 22
70 | 		},
71 | 		{
72 | 			"id": 12,
73 | 			"name": "Soba",
74 | 			"profile": "./memberlist.php",
75 | 			"age": 17
76 | 		}
77 | 	]
78 | }
79 | 


--------------------------------------------------------------------------------
/all/scss/components/_warning.scss:
--------------------------------------------------------------------------------
 1 | //------------------------------------------------------------------------------
 2 | // @component: Warning
 3 | //------------------------------------------------------------------------------
 4 | // @author: hanakin -- midaym
 5 | // @version: 0.2.0
 6 | // @description
 7 | //
 8 | //------------------------------------------------------------------------------
 9 | 
10 | //
11 | // @settings
12 | 
13 | // Layout Variables
14 | $warning-spacing: $default-spacing !default;
15 | 
16 | // Theme Variables
17 | $warning-background-color: $red-50 !default;
18 | $warning-text-color: $default-error-color !default;
19 | $warning-text-dark-color: $default-error-dark-color !default;
20 | 
21 | 
22 | //
23 | // @scss
24 | .c-warning {
25 | 	@include shadow(2);
26 | 	background-color: $warning-background-color;
27 | 	opacity: 0;
28 | 	display: none;
29 | 	width: 100%;
30 | 	min-width: unset;
31 | 	max-width: unset;
32 | 	transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
33 | 	transform: scale(1.2);
34 | 
35 | 	&-title,
36 | 	&-body {
37 | 		color: $warning-text-dark-color;
38 | 	}
39 | 
40 | 	&-link:hover {
41 | 		text-decoration: underline;
42 | 	}
43 | 
44 | 	&-close {
45 | 		color: $warning-text-color;
46 | 		position: absolute;
47 | 		right: 0;
48 | 		padding: ($warning-spacing * 2);
49 | 
50 | 		&:hover,
51 | 		&:focus {
52 | 			color: $warning-text-dark-color;
53 | 			transition: 0.5s;
54 | 		}
55 | 	}
56 | 
57 | 	&.is-active {
58 | 		opacity: 1;
59 | 		display: block;
60 | 		transition: all 0.3s ease;
61 | 		transform: scale(1);
62 | 	}
63 | }
64 | 


--------------------------------------------------------------------------------
/all/views/includes/toolbar.twig:
--------------------------------------------------------------------------------
 1 | <div class="o-bar c-toolbar t-toolbar">
 2 | 	<ul class="o-bar-left c-toolbar-left t-toolbar-left">
 3 | 		<li class="o-bar-item c-toolbar-item t-toolbar-item">
 4 | 			<a class="o-bar-action c-toolbar-action t-toolbar-action" href="#" title="{{ lang.new_topic }}">
 5 | 				<span class="c-toolbar-action-text t-toolbar-action-text">{{ lang.new_topic }}</span>
 6 | 				{{ 'mdi:plus'|icon('iconify', 'o-icon c-toolbar-action-icon t-toolbar-action-icon')|safe }}
 7 | 			</a>
 8 | 		</li>
 9 | 	</ul>
10 | 	<ul class="o-bar-right c-toolbar-right t-toolbar-right">
11 | 		<li class="o-bar-item c-toolbar-item t-toolbar-item">
12 | 			<a class="o-bar-action c-toolbar-action t-toolbar-action" href="#" data-tooltip="true" title="Jump To">
13 | 				{{ 'ic:outline-directions'|icon('iconify', 'o-icon c-toolbar-action-icon t-toolbar-action-icon')|safe }}
14 | 			</a>
15 | 			<a class="o-bar-action c-toolbar-action t-toolbar-action" href="#" data-tooltip="true" title="Filter">
16 | 				{{ 'mdi:filter-variant'|icon('iconify', 'o-icon c-toolbar-action-icon t-toolbar-action-icon')|safe }}
17 | 			</a>
18 | 			<a class="o-bar-action c-toolbar-action t-toolbar-action" href="#" data-tooltip="true" title="Sort">
19 | 				{{ 'mdi:sort'|icon('iconify', 'o-icon c-toolbar-action-icon t-toolbar-action-icon')|safe }}
20 | 			</a>
21 | 			<a class="o-bar-action c-toolbar-action t-toolbar-action" href="#" data-tooltip="true" title="Order">
22 | 				{{ 'mdi:sort-ascending'|icon('iconify', 'o-icon c-toolbar-action-icon t-toolbar-action-icon')|safe }}
23 | 			</a>
24 | 		</li>
25 | 	</ul>
26 | </div>
27 | 


--------------------------------------------------------------------------------
/all/scss/components/_stat.scss:
--------------------------------------------------------------------------------
 1 | //------------------------------------------------------------------------------
 2 | // @component: Stat
 3 | //------------------------------------------------------------------------------
 4 | // @author: hanakin -- midaym
 5 | // @version: 0.2.0
 6 | // @description
 7 | //
 8 | //------------------------------------------------------------------------------
 9 | 
10 | //
11 | // @settings
12 | 
13 | // Layout Variables
14 | $stat-spacing: $default-spacing !default;
15 | 
16 | 
17 | // Theme Variables
18 | $stat-badge-bg-color: $default-primary-color;
19 | $stat-badge-bg-hover-color: $default-primary-dark-color;
20 | $stat-badge-color: $default-primary-item-color;
21 | 
22 | //
23 | // @scss
24 | .c-stat {
25 | 	&-wrap {
26 | 		@include parent(column);
27 | 		justify-content: center;
28 | 		margin: 0 auto;
29 | 		padding-bottom: ($stat-spacing * 2);
30 | 	}
31 | 
32 | 	&-list {
33 | 		@include parent();
34 | 		flex-wrap: wrap;
35 | 		justify-content: center;
36 | 		margin: 0 auto;
37 | 		padding: ($stat-spacing * 2);
38 | 	}
39 | 
40 | 	&-item {
41 | 		flex-shrink: 1;
42 | 		padding: $stat-spacing;
43 | 		list-style: none;
44 | 		@media (min-width: $lg) {
45 | 			padding: 0 $stat-spacing;
46 | 		}
47 | 	}
48 | 
49 | 	&-info {
50 | 		@include type(caption, $lh: 1);
51 | 		text-align: center;
52 | 		opacity: 0.54;
53 | 		flex-grow: 1;
54 | 	}
55 | 
56 | 	&-badge {
57 | 		&-link {
58 | 			background-color: $stat-badge-bg-color;
59 | 			color: $stat-badge-color;
60 | 
61 | 			&:hover {
62 | 				background-color: $stat-badge-bg-hover-color;
63 | 				color: $stat-badge-color;
64 | 			}
65 | 		}
66 | 	}
67 | }
68 | 


--------------------------------------------------------------------------------
/all/views/index.twig:
--------------------------------------------------------------------------------
 1 | {# index.twig #}
 2 | {% extends "./layout/layout.twig" %}
 3 | {% from './macros/online.twig' import who_is_online %}
 4 | 
 5 | {% block title %}
 6 | Chameleon
 7 | {% endblock %}
 8 | 
 9 | {% block main %}
10 | <section class="o-container">
11 | 	{% include './includes/forums.twig' %}
12 | </section>
13 | {% endblock %}
14 | 
15 | {% block footer %}
16 | <div class="o-container">
17 | 	<div class="c-tab-card t-tab-card">
18 | 		<div class="c-tab-bar-frame t-tab-bar-frame">
19 | 			<nav class="c-tab-bar t-tab-bar" data-toggle="tabs">
20 | 				<a class="c-tab t-tab is-active" href="#statistics" role="tab" aria-controls="statistics" aria-selected="true">
21 | 					{{ 'mdi:chart-line'|icon('iconify', 'o-icon c-tab-icon t-tab-icon')|safe }}
22 | 					<span class="c-tab-text t-tab-text">{{ lang.stats }}</span>
23 | 				</a>
24 | 				<a class="c-tab t-tab" href="#who-is-online" role="tab" aria-controls="who-is-online" aria-selected="false">
25 | 					{{ 'mdi:access-point'|icon('iconify', 'o-icon c-tab-icon t-tab-icon')|safe }}
26 | 					<span class="c-tab-text t-tab-text">{{ lang.who_is_online }}</span>
27 | 				</a>
28 | 				<a class="c-tab t-tab" href="#birthdays" role="tab" aria-controls="birthdays" aria-selected="false">
29 | 					{{ 'ic:outline-cake'|icon('iconify', 'o-icon c-tab-icon t-tab-icon')|safe }}
30 | 					<span class="c-tab-text t-tab-text">{{ lang.birthday }}</span>
31 | 				</a>
32 | 			</nav>
33 | 		</div>
34 | 		{% include './includes/stats.twig' %}
35 | 		{{ who_is_online('index', online, lang, stats, groups) }}
36 | 		{% include './includes/birthdays.twig' %}
37 | 	</div>
38 | </div>
39 | {% endblock %}
40 | 


--------------------------------------------------------------------------------
/all/views/includes/forum-stats.twig:
--------------------------------------------------------------------------------
 1 | <div class="c-tab-card t-tab-card">
 2 | 	<div class="c-tab-bar-frame t-tab-bar-frame">
 3 | 		<nav class="c-tab-bar t-tab-bar" data-toggle="tabs">
 4 | 			<a class="c-tab t-tab is-active" href="#who-is-online" role="tab" aria-controls="who-is-online">
 5 | 				{{ 'mdi:access-point'|icon('iconify', 'o-icon c-tab-icon t-tab-icon')|safe }}
 6 | 				<span class="c-tab-text t-tab-text">{{ lang.who_is_online }}</span>
 7 | 			</a>
 8 | 			<a class="c-tab t-tab" href="#forum-permissions" role="tab" aria-controls="forum-permissions">
 9 | 				{{ 'mdi:check-shield'|icon('iconify', 'o-icon c-tab-icon t-tab-icon')|safe }}
10 | 				<span class="c-tab-text t-tab-text">{{ lang.permissions }}</span>
11 | 			</a>
12 | 		</nav>
13 | 	</div>
14 | 	<div class="c-tab-pane t-tab-pane is-active" id="who-is-online">
15 | 		<div class="c-tab-pane-row t-tab-pane-row">
16 | 			<h4 class="c-tab-pane-title t-tab-pane-title">{{ lang.online_forum }}{{ lang.colon }}</h4>
17 | 			<span class="c-tab-pane-text t-tab-text">
18 | 				{% for item in forums[1].online %}
19 | 					{% if item.group %}
20 | 						{% if item.bot %}
21 | 							<span style="color: {{ item.group }};">{{ item.name }}</span>
22 | 						{% else %}
23 | 							<a class="c-tab-pane-link t-tab-pane-link" href="{{ item.profile }}" style="color: {{ item.group }};">{{ item.name }}</a>
24 | 						{% endif %}
25 | 					{% else %}
26 | 						<a class="c-tab-pane-link t-tab-pane-link" href="{{ item.profile }}">{{ item.name }}</a>
27 | 					{% endif %}
28 | 					{% if loop.last %}{% else %}, {% endif %}
29 | 				{% endfor %}
30 | 			</span>
31 | 		</div>
32 | 	</div>
33 | 	{% include './permissions.twig' %}
34 | </div>
35 | 


--------------------------------------------------------------------------------
/all/scss/components/_tooltip.scss:
--------------------------------------------------------------------------------
 1 | //------------------------------------------------------------------------------
 2 | // @component: Tooltip
 3 | //------------------------------------------------------------------------------
 4 | // @author: hanakin -- midaym
 5 | // @version: 0.3.0
 6 | // @description
 7 | //
 8 | //------------------------------------------------------------------------------
 9 | 
10 | @use 'sass:math';
11 | 
12 | //
13 | // @settings
14 | 
15 | // Layout Variables
16 | $tooltip-spacing: $default-spacing !default;
17 | $tooltip-max-width: 192px !default;
18 | $tooltip-max-height: 20px !default;
19 | $tooltip-border-radius: $default-border-radius !default;
20 | 
21 | 
22 | // Theme Variables
23 | $tooltip-bg-color: $default-info-dark-color !default;
24 | $tooltip-text-color: $default-info-item-color !default;
25 | 
26 | //
27 | // @scss
28 | @keyframes pulse {
29 | 	0% {
30 | 		opacity: 0;
31 | 		transform: scale(0);
32 | 	}
33 | 
34 | 	50% {
35 | 		transform: scale(0.99);
36 | 	}
37 | 
38 | 	100% {
39 | 		opacity: 1;
40 | 		transform: scale(1);
41 | 	}
42 | }
43 | 
44 | .c-tooltip {
45 | 	@include type(caption, $lh: 1.375);
46 | 	text-align: center;
47 | 	background-color: $tooltip-bg-color;
48 | 	border-radius: $tooltip-border-radius;
49 | 	color: $tooltip-text-color;
50 | 	opacity: 0;
51 | 	position: absolute;
52 | 	z-index: 999;
53 | 	display: inline-block;
54 | 	width: auto;
55 | 	max-width: $tooltip-max-width;
56 | 	min-height: $tooltip-max-height;
57 | 	padding: math.div($tooltip-spacing, 2) $tooltip-spacing;
58 | 	transition: none;
59 | 	transform: scale(0);
60 | 	transform-origin: center center;
61 | 
62 | 	&.is-active {
63 | 		animation: pulse 200ms cubic-bezier(0, 0, 0.2, 1) forwards;
64 | 	}
65 | }
66 | 


--------------------------------------------------------------------------------
/all/views/old/icons.twig:
--------------------------------------------------------------------------------
 1 | {# icons.twig #}
 2 | <!DOCTYPE html>
 3 | <html>
 4 | 	<head>
 5 | 		<meta charset="utf-8"/>
 6 | 		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
 7 | 		<meta name="viewport" content="width=device-width,initial-scale=1">
 8 | 
 9 | 		<title></title>
10 | 
11 | 		<style media="screen">
12 | 			section {
13 | 				margin: 2rem auto;
14 | 			}
15 | 
16 | 			.icon-display {
17 | 				list-style: none;
18 | 				display: flex;
19 | 				flex-wrap: wrap;
20 | 			}
21 | 
22 | 			.icon-display li a {
23 | 				display: block;
24 | 				width: 300px;
25 | 				margin-bottom: 0.5rem;
26 | 				padding: 0.5rem;
27 | 				color: #757575;
28 | 			}
29 | 
30 | 			.icon-display li a:hover {
31 | 				background-color: #eeeeee;
32 | 				color: #258cf4;
33 | 			}
34 | 		</style>
35 | 	</head>
36 | 	<body>
37 | 		{% include './includes/defs.twig' %}
38 | 		{% for item in icons %}
39 | 			{% if loop.first %}
40 | 		<section>
41 | 			<h3>{{ item.cat|capitalize }}</h3>
42 | 			<ul class="icon-display">
43 | 			{% elseif item.cat !== cat %}
44 | 			</ul>
45 | 		</section>
46 | 
47 | 		<section>
48 | 			<h3>{{ item.cat|capitalize }}</h3>
49 | 			<ul class="icon-display">
50 | 			{% endif %}
51 | 				<li><a href=""><svg class="o-icon"><use xlink:href="#{{ item.icon }}"></use></svg> <span>{{ item.icon|capitalize }}</span></a></li>
52 | 			{% set cat = item.cat %}
53 | 			{% if loop.last %}
54 | 			</ul>
55 | 		</section>
56 | 			{% endif %}
57 | 		{% endfor %}
58 | 		<section>
59 | 			<h3>Logo</h3>
60 | 			<ul class="icon-display">
61 | 				<li><a href=""><svg class="o-icon"><use xlink:href="#logo"></use></svg> <span>Logo</span></a></li>
62 | 				<li><a href=""><svg class="o-icon"><use xlink:href="#logo-dense"></use></svg> <span>Logo-Dense</span></a></li>
63 | 			</ul>
64 | 		</section>
65 | 	</body>
66 | </html>
67 | 


--------------------------------------------------------------------------------
/all/views/includes/navbar.twig:
--------------------------------------------------------------------------------
 1 | <div class="o-bar c-navbar t-navbar">
 2 | 	<div class="o-bar-left c-navbar-left t-navbar-left"></div>
 3 | 	<div class="o-bar-right c-navbar-right t-navbar-right">
 4 | 		<a class="o-bar-item o-action c-navbar-action t-navbar-action" href="#" data-toggle="search" data-tooltip="true" title="{{ lang.search }}">
 5 | 			{{ 'mdi:search'|icon('iconify', 'o-icon c-navbar-action-icon t-navbar-action-icon')|safe }}
 6 | 		</a>
 7 | 		<a class="o-bar-item o-action c-navbar-action t-navbar-action" href="#" data-tooltip="true" title="{{ lang.private_msgs }}">
 8 | 			{{ 'mdi:inbox'|icon('iconify', 'o-icon c-navbar-action-icon t-navbar-action-icon')|safe }}
 9 | 			<span class="o-tag o-bar-badge c-navbar-badge t-navbar-badge">{{ phpbb.pms }}</span>
10 | 			<span class="o-action-text c-navbar-action-text t-navbar-action-text u-sr-only">{{ lang.private_msgs }}</span>
11 | 		</a>
12 | 		<span class="o-bar-item c-navbar-item t-navbar-item">
13 | 			<a class="o-action c-navbar-action t-navbar-action" href="#" data-toggle="notifications" data-tooltip="true" title="{{ lang.notifications }}">
14 | 				{{ 'mdi:bell-outline'|icon('iconify', 'o-icon c-navbar-action-icon t-navbar-action-icon')|safe }}
15 | 				<span class="o-tag o-bar-badge c-navbar-badge t-navbar-badge">{{ phpbb.notifications }}</span>
16 | 				<span class="o-action-text c-navbar-action-text t-navbar-action-text u-sr-only">{{ lang.notifications }}</span>
17 | 			</a>
18 | 			{% include './notification.twig' %}
19 | 		</span>
20 | 		<a class="o-bar-item o-action c-navbar-action t-navbar-action" href="#" data-toggle="drawer" data-tooltip="true" title="{{ phpbb.user.name }}">
21 | 			<span class="o-avatar-wrap o-bar-avatar c-navbar-avatar t-navbar-avatar">
22 | 				<img class="o-avatar" src="{{ phpbb.user.avatar }}" alt="User Avatar">
23 | 				<span class="o-avatar-online"></span>
24 | 			</span>
25 | 		</a>
26 | 	</div>
27 | </div>
28 | 


--------------------------------------------------------------------------------
/all/views/layout/layout.twig:
--------------------------------------------------------------------------------
 1 | {# layout.twig #}
 2 | <!DOCTYPE html>
 3 | <html lang="en">
 4 | 
 5 | 	<head>
 6 | 		<meta charset="utf-8" />
 7 | 		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
 8 | 		<meta name="viewport" content="width=device-width,initial-scale=1">
 9 | 		<meta name="description" content="phpbb forum software">
10 | 		{% block meta %}{% endblock %}
11 | 
12 | 		<title>{% block title %}{% endblock %}</title>
13 | 		<link href="../../all/css/core-dark.1.3.0.min.css" rel="stylesheet">
14 | 		<link href="../../all/css/theme-dark.{{ version }}.css" rel="stylesheet">
15 | 		<link href="../../all/css/utilities.1.3.0.min.css" rel="stylesheet">
16 | 		{% block css %}{% endblock %}
17 | 	</head>
18 | 
19 | 	<body>
20 | 		{# {% include '../includes/defs.twig' %} #}
21 | 		{% block sidemenu %}
22 | 			{% include '../includes/drawer.twig' %}
23 | 		{% endblock %}
24 | 		<div class="page" id="page-top" data-container="page">
25 | 			<header>
26 | 				{% block hero %}
27 | 					{% include '../includes/hero.twig' %}
28 | 				{% endblock %}
29 | 				{% block navbar %}
30 | 					{% include '../includes/search.twig' %}
31 | 					{% include '../includes/navbar.twig' %}
32 | 				{% endblock %}
33 | 				{% block crumb %}
34 | 					{% include '../includes/crumb.twig' %}
35 | 				{% endblock %}
36 | 				{% block header %}{% endblock %}
37 | 			</header>
38 | 
39 | 			<main role="main">
40 | 				{% block main %}{% endblock %}
41 | 			</main>
42 | 
43 | 			<footer id="page-bottom">
44 | 				{% block footer %}{% endblock %}
45 | 				{% include '../includes/footer.twig' %}
46 | 			</footer>
47 | 			{% block bottom %}{% endblock %}
48 | 		</div>
49 | 
50 | 		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
51 | 		<script src="https://code.iconify.design/1/1.0.0-rc7/iconify.min.js"></script>
52 | 		<script src="../../all/js/temp.js"></script>
53 | 		{% block scripts %}{% endblock %}
54 | 	</body>
55 | 
56 | </html>
57 | 


--------------------------------------------------------------------------------
/all/scss/components/_hero.scss:
--------------------------------------------------------------------------------
 1 | //------------------------------------------------------------------------------
 2 | // @component: Hero
 3 | //------------------------------------------------------------------------------
 4 | // @author: hanakin -- midaym
 5 | // @version: 0.3.0
 6 | // @description
 7 | //
 8 | //------------------------------------------------------------------------------
 9 | 
10 | //
11 | // @settings
12 | 
13 | // Layout Variables
14 | $hero-spacing: $default-spacing !default;
15 | $hero-border-size: $default-border-size !default;
16 | $hero-logo-max-height: 120px !default;
17 | $hero-logo-width: 300px !default;
18 | $hero-height: 400px !default;
19 | $hero-lead-max-width: 448px !default;
20 | 
21 | // Theme Variables
22 | $hero-logo-color: $default-primary-color !default;
23 | $hero-color: $default-primary-item-color !default;
24 | $hero-border-color: rgba(255, 255, 255, 0.15) !default;
25 | $hero-background: url('https://i.imgur.com/DnPCBsG.jpg') !default;
26 | 
27 | //
28 | // @scss
29 | 
30 | .c-hero {
31 | 	text-align: center;
32 | 	position: relative;
33 | 	padding-top: ($hero-spacing * 14);
34 | 
35 | 	&-container {
36 | 		background: $hero-background;
37 | 		background-repeat: no-repeat;
38 | 		background-position: 50% 0;
39 | 		background-size: cover;
40 | 		border-bottom: $hero-border-size solid $hero-border-color;
41 | 		height: $hero-height;
42 | 	}
43 | 
44 | 	&-logo {
45 | 		color: $hero-logo-color;
46 | 		width: $hero-logo-width;
47 | 		height: auto;
48 | 		max-height: $hero-logo-max-height;
49 | 	}
50 | 
51 | 	&-heading {
52 | 		@include type(headline5, $lh: 1.2, $fw: 700);
53 | 		text-transform: uppercase;
54 | 		color: $hero-color;
55 | 	}
56 | 
57 | 	&-lead {
58 | 		@include type(headline5, $lh: 1, $fw: 200);
59 | 		color: $hero-color;
60 | 
61 | 		@media (min-width: $md) {
62 | 			@include type(headline1, $lh: 1, $fw: 200);
63 | 			max-width: $hero-lead-max-width;
64 | 		}
65 | 	}
66 | 
67 | 	@media (min-width: $md) {
68 | 		text-align: left;
69 | 	}
70 | }
71 | 


--------------------------------------------------------------------------------
/all/scss/theme/_chameleon.scss:
--------------------------------------------------------------------------------
 1 | //------------------------------------------------------------------------------
 2 | // @theme: Chameleon
 3 | //------------------------------------------------------------------------------
 4 | // @version: 0.3.0
 5 | // @description
 6 | //
 7 | // @author: hanakin
 8 | //------------------------------------------------------------------------------
 9 | 
10 | //
11 | // @settings
12 | 
13 | // Layout Variables
14 | 
15 | 
16 | // Theme Variables
17 | $theme-primary: #009ae4;
18 | $theme-link: rgba($white, 0.5);
19 | $theme-link-hover: $white;
20 | $theme-text: rgba($white, 0.3);
21 | $theme-frosted-bg: rgba($white, 0.05);
22 | $theme-frosted-bg-hover: rgba($white, 0.1);
23 | $theme-border-color: rgba($white, 0.15);
24 | $theme-shadow-color: rgba($black, 0.2);
25 | $theme-dark-text: rgba($white, 0.7);
26 | $theme-dark-link: rgba($white, 0.7);
27 | $theme-dark-bg: rgba(21, 26, 35, 0.95);
28 | $theme-dark-bg-hover: rgba($black, 0.3);
29 | $theme-dark-border: rgba($black, 0.5);
30 | 
31 | 
32 | //
33 | // @scss
34 | .t-navbar {
35 | 	background-color: transparent;
36 | 	margin-top: -56px;
37 | 
38 | 	&-right {
39 | 		background-color: $default-surface-color;
40 | 		border-top-left-radius: $default-border-radius;
41 | 		padding-right: ($default-spacing * 2);
42 | 
43 | 		@media (min-width: $md) {
44 | 			padding-right: ($default-spacing * 3);
45 | 		}
46 | 	}
47 | 
48 | 	&-action {
49 | 		border-top-left-radius: $default-border-radius;
50 | 	}
51 | 
52 | 	&-badge {
53 | 		background-color: $default-error-color;
54 | 	}
55 | }
56 | 
57 | .t-bar-search {
58 | 	margin-top: -56px;
59 | }
60 | 
61 | .t-drawer {
62 | 	top: 0;
63 | }
64 | 
65 | .t-forum-page-title {
66 | 	@include type(headline2);
67 | }
68 | 
69 | .t-topic-page-title {
70 | 	@include type(headline2);
71 | 	margin: 48px 24px 72px;
72 | }
73 | 
74 | .t-topic-page-title-icon {
75 | 	color: $default-primary-color;
76 | 	width: 34px;
77 | 	height: 34px;
78 | }
79 | 
80 | .t-jumpto {
81 | 	overflow-y: scroll;
82 | 	max-height: 240px;
83 | }
84 | 


--------------------------------------------------------------------------------
/tests/mock/msg.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"msgs": [
 3 | 		{
 4 | 			"id":1,
 5 | 			"pm":1,
 6 | 			"author": "Joe",
 7 | 			"color": "#009900",
 8 | 			"url": "./memberlist.php?mode=viewprofile&amp;u=61815",
 9 | 			"online": true,
10 | 			"avatar": "https://avatars2.githubusercontent.com/u/71081?v=4&amp;s=46",
11 | 			"time": "2016-11-11T19:18:00Z",
12 | 			"content":"This is the copy for this message."
13 | 		},
14 | 		{
15 | 			"id":2,
16 | 			"pm":1,
17 | 			"author": "Bob",
18 | 			"color": "#000099",
19 | 			"url": "./memberlist.php?mode=viewprofile&amp;u=61815",
20 | 			"online": true,
21 | 			"avatar": "https://avatars2.githubusercontent.com/u/73085?v=4&amp;s=46",
22 | 			"time": "2016-11-11T20:10:00Z",
23 | 			"content":"This is the copy for this message."
24 | 		},
25 | 		{
26 | 			"id":3,
27 | 			"pm":1,
28 | 			"author": "Joe",
29 | 			"color": "#009900",
30 | 			"url": "./memberlist.php?mode=viewprofile&amp;u=61815",
31 | 			"online": true,
32 | 			"avatar": "https://avatars2.githubusercontent.com/u/71081?v=4&amp;s=46",
33 | 			"time": "2016-11-12T09:18:00Z",
34 | 			"content":"This is the copy for this message."
35 | 		},
36 | 		{
37 | 			"id":4,
38 | 			"pm":1,
39 | 			"author": "Frank",
40 | 			"color": "#000099",
41 | 			"url": "./memberlist.php?mode=viewprofile&amp;u=61815",
42 | 			"online": false,
43 | 			"avatar": "https://avatars2.githubusercontent.com/u/73081?v=4&amp;s=46",
44 | 			"time": "2016-11-12T12:08:00Z",
45 | 			"content":"This is the copy for this message."
46 | 		},
47 | 		{
48 | 			"id":5,
49 | 			"pm":1,
50 | 			"author": "James",
51 | 			"color": "#009900",
52 | 			"url": "./memberlist.php?mode=viewprofile&amp;u=61815",
53 | 			"online": false,
54 | 			"avatar": "https://avatars2.githubusercontent.com/u/73031?v=4&amp;s=46",
55 | 			"time": "2016-11-12T15:16:00Z",
56 | 			"content":"This is the copy for this message."
57 | 		},
58 | 		{
59 | 			"id":6,
60 | 			"pm":1,
61 | 			"author": "Joe",
62 | 			"color": "#009900",
63 | 			"url": "./memberlist.php?mode=viewprofile&amp;u=61815",
64 | 			"online": true,
65 | 			"avatar": "https://avatars2.githubusercontent.com/u/71081?v=4&amp;s=46",
66 | 			"time": "2016-11-13T10:11:00Z",
67 | 			"content":"This is the copy for this message."
68 | 		}
69 | 	]
70 | }
71 | 


--------------------------------------------------------------------------------
/tests/mock/online.json:
--------------------------------------------------------------------------------
  1 | {
  2 | 	"online": [
  3 | 		{
  4 | 			"id": 1,
  5 | 			"name": "Alexa [Bot]",
  6 | 			"profile": "./memberlist.php",
  7 | 			"bot": 1,
  8 | 			"group": "#9e8da7"
  9 | 		},
 10 | 		{
 11 | 			"id": 2,
 12 | 			"name": "Yahoo Slurp [Bot]",
 13 | 			"profile": "./memberlist.php",
 14 | 			"bot": 1,
 15 | 			"group": "#9e8da7"
 16 | 		},
 17 | 		{
 18 | 			"id": 3,
 19 | 			"name": "I Manage",
 20 | 			"profile": "./memberlist.php",
 21 | 			"group": "#4f6772"
 22 | 		},
 23 | 		{
 24 | 			"id": 4,
 25 | 			"name": "Bing [Bot]",
 26 | 			"profile": "./memberlist.php",
 27 | 			"bot": 1,
 28 | 			"group": "#9e8da7"
 29 | 		},
 30 | 		{
 31 | 			"id": 5,
 32 | 			"name": "devIsMe",
 33 | 			"profile": "./memberlist.php",
 34 | 			"group": "#00bfa5"
 35 | 		},
 36 | 		{
 37 | 			"id": 6,
 38 | 			"name": "Google Feedfetcher [Bot]",
 39 | 			"profile": "./memberlist.php",
 40 | 			"bot": 1,
 41 | 			"group": "#9e8da7"
 42 | 		},
 43 | 		{
 44 | 			"id": 7,
 45 | 			"name": "Baidu [Spider]",
 46 | 			"profile": "./memberlist.php",
 47 | 			"bot": 1,
 48 | 			"group": "#9e8da7"
 49 | 		},
 50 | 		{
 51 | 			"id": 8,
 52 | 			"name": "user1",
 53 | 			"profile": "./memberlist.php"
 54 | 		},
 55 | 		{
 56 | 			"id": 9,
 57 | 			"name": "communAnyOne",
 58 | 			"profile": "./memberlist.php",
 59 | 			"group": "#3f54c0"
 60 | 		},
 61 | 		{
 62 | 			"id": 10,
 63 | 			"name": "Google [Bot]",
 64 | 			"profile": "./memberlist.php",
 65 | 			"bot": 1,
 66 | 			"group": "#9e8da7"
 67 | 		},
 68 | 		{
 69 | 			"id": 11,
 70 | 			"name": "siteMaintainer",
 71 | 			"profile": "./memberlist.php",
 72 | 			"group": "#00bcd4"
 73 | 		},
 74 | 		{
 75 | 			"id": 12,
 76 | 			"name": "user2",
 77 | 			"profile": "./memberlist.php"
 78 | 		},
 79 | 		{
 80 | 			"id": 13,
 81 | 			"name": "thisIsUser3",
 82 | 			"profile": "./memberlist.php"
 83 | 		},
 84 | 		{
 85 | 			"id": 14,
 86 | 			"name": "Exabot [Bot]",
 87 | 			"profile": "./memberlist.php",
 88 | 			"bot": 1,
 89 | 			"group": "#9e8da7"
 90 | 		},
 91 | 		{
 92 | 			"id": 15,
 93 | 			"name": "helpUiCan",
 94 | 			"profile": "./memberlist.php",
 95 | 			"group": "#ffab40"
 96 | 		},
 97 | 		{
 98 | 			"id": 16,
 99 | 			"name": "orangeCounty",
100 | 			"profile": "./memberlist.php",
101 | 			"group": "#b84fdb"
102 | 		}
103 | 	]
104 | }
105 | 


--------------------------------------------------------------------------------
/all/js/_emoji-build.js:
--------------------------------------------------------------------------------
 1 | /* eslint-disable */
 2 | 
 3 | // scraps data from http://unicode.org/emoji/charts/full-emoji-list.html
 4 | 
 5 | var _emojis = [];
 6 | $('td.code').each(function() {
 7 | 	if ($(this).siblings('.name').first().text().includes('⊛') || parseInt($(this).first().prev().text()) === 484 || parseInt($(this).first().prev().text()) === 485 || parseInt($(this).first().prev().text()) === 486) {
 8 | 		// do nothing
 9 |     } else {
10 |       _emojis.push({
11 |         order: parseInt($(this).first().prev().text()),
12 |         code: $(this).text().replace(new RegExp('U', 'g'), '').replace(new RegExp('[+]', 'g'), ''),
13 |         emoji: $(this).next().text(),
14 |         name: $(this).siblings('.name').first().text().replace(new RegExp('[:\.\,\'\`\’\!\(\)\“\”]', 'g'), '').replace(new RegExp('[\#]', 'g'), 'pound').replace(new RegExp('[\*]', 'g'), 'asterisk').replace(new RegExp('flag ', 'g'), 'flag for ').replace(new RegExp('&', 'g'), 'and').replace(new RegExp('é', 'g'), 'e').replace(new RegExp(' - ', 'g'), ' ').replace(new RegExp('ô', 'g'), 'o').replace(new RegExp('ç', 'g'), 'c').replace(new RegExp('North Macedonia', 'g'), 'flag North Macedonia').replace(new RegExp('Macao SAR China', 'g'), 'flag macao sar china').replace(new RegExp('ã', 'g'), 'a').replace(new RegExp('í', 'g'), 'i').replace(new RegExp('Eswatini', 'g'), 'flag eswatini').replace(new RegExp('Åland', 'g'), 'aland'),
15 |         keywords: $(this).siblings('.name').last().text().split(', ')
16 |       });
17 |     }
18 | });
19 | 
20 | for (var index = _emojis.length - 1; index >= 0; index--) {
21 |   var emoji = _emojis[index];
22 |   // Determine if this is a child emoji and get the parent emoji
23 |   var types = emoji.code.match(/U[+]+[0-9A-F]*/gi)
24 |   if (Array.isArray(types) && types.length === 2) {
25 |     var parentEmojiCode = types[0];
26 |     var parentEmoji = _emojis.filter(function (_emoji) {
27 |       return _emoji.code === parentEmojiCode;
28 |     })[0];
29 | 
30 |     if (emoji.no < 1535) {
31 |       // Initialize the parent emoji types and append child emoji types
32 |       if (!parentEmoji.hasOwnProperty('types'))
33 |         parentEmoji['types'] = [];
34 | 
35 |       parentEmoji['types'].push(emoji.code);
36 | 
37 |       // Clean up and remove this child emoji
38 |       _emojis.splice(index, 1);
39 |     }
40 |   }
41 | }
42 | 
43 | _emojis = JSON.stringify(_emojis);
44 | 


--------------------------------------------------------------------------------
/all/scss/components/_paging.scss:
--------------------------------------------------------------------------------
 1 | //------------------------------------------------------------------------------
 2 | // @component: Paging
 3 | //------------------------------------------------------------------------------
 4 | // @author: hanakin -- midaym
 5 | // @version: 0.3.0
 6 | // @description
 7 | //
 8 | //------------------------------------------------------------------------------
 9 | 
10 | //
11 | // @settings
12 | 
13 | // Layout Variables
14 | $paging-spacing: $default-spacing !default;
15 | $paging-height: $default-height !default;
16 | $paging-border-radius: $default-border-radius !default;
17 | $paging-right: 48px !default;
18 | 
19 | // Theme Variables
20 | $paging-bg-color: $default-action-bg !default;
21 | $paging-bg-hover-color: $default-action-bg-hover !default;
22 | $paging-color: $default-action-color !default;
23 | $paging-hover-color: $default-action-color-hover !default;
24 | 
25 | 
26 | //
27 | // @scss
28 | .c-paging {
29 | 	@include shadow(24);
30 | 	background-color: $paging-bg-color;
31 | 	border-top-left-radius: $paging-border-radius;
32 | 	border-top-right-radius: $paging-border-radius;
33 | 	position: fixed;
34 | 	right: 0;
35 | 	bottom: 0;
36 | 	left: auto;
37 | 	display: inline-flex;
38 | 	margin: 0 auto;
39 | 	padding: 0;
40 | 
41 | 	&-item {
42 | 		line-height: 0;
43 | 		flex-shrink: 1;
44 | 		margin: 0;
45 | 		padding: 0;
46 | 		list-style: none;
47 | 	}
48 | 
49 | 	&-spacer:hover {
50 | 		background-color: $paging-bg-color;
51 | 	}
52 | 
53 | 	&-action {
54 | 		@include type(subhead1, $lh: 1.5, $fw: 700);
55 | 		@include center($paging-height);
56 | 		background-color: $paging-bg-color;
57 | 		color: $paging-color;
58 | 		position: relative;
59 | 		overflow: hidden;
60 | 		padding: ($paging-spacing * 2);
61 | 		transform: translate3d(0, 0, 0);
62 | 
63 | 		&:hover,
64 | 		&:focus {
65 | 			background-color: $paging-bg-hover-color;
66 | 			color: $paging-hover-color;
67 | 		}
68 | 
69 | 		&-text + &-icon {
70 | 			margin-left: $paging-spacing;
71 | 		}
72 | 
73 | 		&-icon + &-text {
74 | 			margin-right: $paging-spacing;
75 | 		}
76 | 	}
77 | 
78 | 	&-item:first-of-type .c-paging-action {
79 | 		border-top-left-radius: $paging-border-radius;
80 | 	}
81 | 
82 | 	&-item:last-of-type .c-paging-action {
83 | 		border-top-right-radius: $paging-border-radius;
84 | 	}
85 | 
86 | 	@media (min-width: $sm) {
87 | 		right: $paging-right;
88 | 	}
89 | }
90 | 


--------------------------------------------------------------------------------
/all/views/old/pm.twig:
--------------------------------------------------------------------------------
 1 | {# post.twig #}
 2 | {% extends "./layout/layout.twig" %}
 3 | 
 4 | {% block component %}
 5 | 	<div class="c-pm-container">
 6 | 		<ul class="o-list c-pm-list">
 7 | 			{% for pm in pms %}
 8 | 			<li class="o-list-item c-pm-item">
 9 | 				<a class="o-list-media c-pm-media" href="{{ pm.url }}">
10 | 					<span class="o-avatar-wrap o-list-avatar">
11 | 						{% if pm.participants.length > 1 %}
12 | 						<img class="o-avatar" src="http://ensmm-annaba.dz/wp-content/uploads/wp-user-manager-uploads/2016/02/54cf0cfd8466607d037b7f25_team-icon.png" alt="User Avatar">
13 | 						{% else %}
14 | 						<img class="o-avatar" src="{{ pm.avatar }}" alt="User Avatar">
15 | 							{% if pm.online %}
16 | 						<span class="o-avatar-online o-action-bar-avatar-online"></span>
17 | 						{% endif %} {% endif %}
18 | 						{% if pm.unread %}
19 | 						<span class="o-tag c-pm-badge">{{ pm.unread }}</span>
20 | 						{% endif %}
21 | 					</span>
22 | 				</a>
23 | 				<span class="o-list-primary c-pm-primary">
24 | 					<span class="o-list-secondary c-pm-secondary">
25 | 						{% if pm.important %}
26 | 						<svg class="o-icon o-list-secondary-item-icon"><use xlink:href="#important"></use></svg>
27 | 						{% endif %}
28 | 						<a class="o-list-title" href="#"><strong>{{ pm.title }}</strong></a>
29 | 					</span>
30 | 					<span class="o-list-secondary c-pm-secondary">
31 | 						<svg class="o-icon o-list-secondary-item-icon"><use xlink:href="#{{ pm.type }}"></use></svg>
32 | 						<a class="o-list-secondary-item-link" href="{{ pm.url }}" style="color: {{ pm.color }};">{{ pm.author }}</a>
33 | 						{% if pm.participants.length > 1 %} {% for user in pm.participants %}
34 | 						, <svg class="o-icon o-list-secondary-item-icon"><use xlink:href="#{{ user.type }}"></use></svg>
35 | 						<a class="o-list-secondary-item-link" href="{{ user.url }}" style="color: {{ user.color }};">{{ user.name }}</a>
36 | 						{% endfor %} {% endif %}
37 | 					</span>
38 | 					<span class="o-list-secondary c-pm-secondary">
39 | 						<span class="o-list-secondary-item">
40 | 							<svg class="o-icon o-list-secondary-item-icon"><use xlink:href="#time"></use></svg>
41 | 							<time datetime="{{ pm.created }}" title="{{ pm.created }}" data-short="{{ pm.created }}">{{ pm.created }}</time>
42 | 						</span>
43 | 					</span>
44 | 				</span>
45 | 			</li>
46 | 			{% endfor %}
47 | 		</ul>
48 | 	</div>
49 | {% endblock %}
50 | 


--------------------------------------------------------------------------------
/all/views/includes/forum-tools.twig:
--------------------------------------------------------------------------------
 1 | <div class="o-bar c-toolbar t-toolbar">
 2 | 	<div class="o-bar-left c-toolbar-left t-toolbar-left"></div>
 3 | 	<div class="o-bar-right c-toolbar-right t-toolbar-right">
 4 | 		<span class="o-bar-item c-toolbar-item c-toolbar-item">
 5 | 			<a class="o-bar-item o-action c-toolbar-action t-toolbar-action" href="#" data-tooltip="true" data-toggle="menu" title="{{ lang.filter }}">
 6 | 				{{ 'mdi:filter-variant'|icon('iconify', 'o-icon c-toolbar-action-icon t-toolbar-action-icon')|safe }}
 7 | 			</a>
 8 | 			<div class="c-menu-container t-menu-container" data-container="menu">
 9 | 				<ul class="c-menu t-menu">
10 | 					{% for item in filters %}
11 | 					<li class="c-menu-item t-menu-item">
12 | 						<a class="c-menu-link t-menu-link" href="#">{{ item }}</a>
13 | 					</li>
14 | 					{% endfor %}
15 | 				</ul>
16 | 			</div>
17 | 		</span>
18 | 		<span class="o-bar-item c-toolbar-item c-toolbar-item">
19 | 			<a class="o-bar-item o-action c-toolbar-action t-toolbar-action" href="#" data-tooltip="true" data-toggle="menu" title="{{ lang.sort }}">
20 | 				{{ 'mdi:sort'|icon('iconify', 'o-icon c-toolbar-action-icon t-toolbar-action-icon')|safe }}
21 | 			</a>
22 | 			<div class="c-menu-container t-menu-container" data-container="menu">
23 | 				<ul class="c-menu t-menu">
24 | 					{% for item in sorts %}
25 | 					<li class="c-menu-item t-menu-item">
26 | 						<a class="c-menu-link t-menu-link" href="#">{{ item }}</a>
27 | 					</li>
28 | 					{% endfor %}
29 | 				</ul>
30 | 			</div>
31 | 		</span>
32 | 		<a class="o-bar-item o-action c-toolbar-action t-toolbar-action u-hidden-sm-down" href="#" data-tooltip="true" title="{{ lang.order }}">
33 | 			{{ 'mdi:sort-ascending'|icon('iconify', 'o-icon c-toolbar-action-icon t-toolbar-action-icon')|safe }}
34 | 		</a>
35 | 		<a class="o-bar-item o-action c-toolbar-action t-toolbar-action" href="#" data-tooltip="true" title="{{ lang.mark }}">
36 | 			{{ 'mdi:checkbox-marked-outline'|icon('iconify', 'o-icon c-toolbar-action-icon t-toolbar-action-icon')|safe }}
37 | 		</a>
38 | 		<a class="o-bar-item o-action c-toolbar-action t-toolbar-action" href="#" data-tooltip="true" title="{{ lang.new_topic }}">
39 | 			<span class="c-toolbar-action-text t-toolbar-action-text u-hidden-sm-down">{{ lang.new_topic }}</span>
40 | 			{{ 'mdi:plus'|icon('iconify', 'o-icon c-toolbar-action-icon t-toolbar-action-icon')|safe }}
41 | 		</a>
42 | 	</div>
43 | </div>
44 | 


--------------------------------------------------------------------------------
/all/views/topic.twig:
--------------------------------------------------------------------------------
 1 | {# topic.twig #}
 2 | {% extends "./layout/layout.twig" %}
 3 | {% from './macros/online.twig' import who_is_online %}
 4 | 
 5 | {% block title %}
 6 | 	{{ topics[2].name }}
 7 | {% endblock %}
 8 | 
 9 | {% block css %}
10 | 	<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/atom-one-dark.min.css">
11 | {% endblock %}
12 | 
13 | {% block header %}
14 | {% endblock %}
15 | 
16 | {% block main %}
17 | 	<section class="o-container">
18 | 		<h2 class="t-topic-page-title" role="heading" aria-level="2">
19 | 			{{ topics[2].icon|icon('inline', 'o-icon t-topic-page-title-icon')|safe }} <a class="t-topic-page-title-link" href="" title="{{ topics[2].name }}">{{ topics[2].name }}</a>
20 | 		</h2>
21 | 	</section>
22 | 	<section class="o-container">
23 | 		{% include './includes/topic-tools.twig' %}
24 | 	</section>
25 | 	<section class="o-container">
26 | 		{% for item in posts %}
27 | 			{% if loop.index <= 25 %}
28 | 				{% include './includes/post.twig' %}
29 | 			{% endif %}
30 | 		{% endfor %}
31 | 	</section>
32 | {% endblock %}
33 | 
34 | {% block footer %}
35 | 	<section class="o-container">
36 | 		{% include './includes/topic-tools.twig' %}
37 | 	</section>
38 | 	<div class="o-container">
39 | 		<div class="o-bar c-toolbar t-toolbar">
40 | 			<div class="o-bar-left c-toolbar-left t-toolbar-left">
41 | 				<a class="o-bar-item o-action c-toolbar-action t-toolbar-action" href="" data-tooltip="true" title="{{ lang.return }}">
42 | 					{{ 'mdi:chevron-left'|icon('iconify', 'o-icon o-action-icon c-toolbar-action-icon t-toolbar-action-icon')|safe }}
43 | 				</a>
44 | 			</div>
45 | 			<div class="o-bar-right c-toolbar-right t-toolbar-right">
46 | 				{% include './includes/jumpto.twig' %}
47 | 			</div>
48 | 		</div>
49 | 	</div>
50 | 	<div class="o-container">
51 | 		<div class="c-tab-card t-tab-card">
52 | 			<div class="c-tab-bar-frame t-tab-bar-frame">
53 | 				<nav class="c-tab-bar t-tab-bar" data-toggle="tabs">
54 | 					<a class="c-tab t-tab is-active" href="#who-is-online" role="tab" aria-controls="who-is-online" aria-selected="true">
55 | 						{{ 'mdi:access-point'|icon('iconify', 'o-icon c-tab-icon t-tab-icon')|safe }}
56 | 						<span class="c-tab-text t-tab-text">{{lang.who_is_online}}</span>
57 | 					</a>
58 | 				</nav>
59 | 			</div>
60 | 			{{ who_is_online('topic', topics[2].online, lang) }}
61 | 		</div>
62 | 	</div>
63 | 	{% include './includes/paging-fixed.twig' %}
64 | {% endblock %}
65 | 


--------------------------------------------------------------------------------
/all/scss/components/_jump.scss:
--------------------------------------------------------------------------------
 1 | //------------------------------------------------------------------------------
 2 | // @component: Jump
 3 | //------------------------------------------------------------------------------
 4 | // @author: hanakin -- midaym
 5 | // @version: 0.3.0
 6 | // @description
 7 | //
 8 | //------------------------------------------------------------------------------
 9 | 
10 | //
11 | // @settings
12 | 
13 | // Layout Variables
14 | $jump-spacing: $default-spacing !default;
15 | $jump-height: $default-height !default;
16 | $jump-border-radius: $default-border-radius !default;
17 | $jump-border-size: $default-border-size !default;
18 | $jump-border-style: solid;
19 | 
20 | // Theme Variables
21 | $jump-bg-color: $default-background-color !default;
22 | $jump-header-bg-color: $default-surface-color !default;
23 | $jump-header-title-color: $default-surface-item-color !default;
24 | $jump-border-color: $default-border-color !default;
25 | $jump-btn-color: $white !default;
26 | $jump-btn-hover-color: $white !default;
27 | $jump-btn-bg-color: $default-primary-color !default;
28 | $jump-btn-bg-hover-color: $default-primary-dark-color !default;
29 | 
30 | .c-jump {
31 | 	&-container {
32 | 		@include shadow(2);
33 | 		background-color: $jump-bg-color;
34 | 		border-radius: $jump-border-radius;
35 | 		position: absolute;
36 | 		z-index: 99;
37 | 		right: 0;
38 | 		bottom: ($default-height + $jump-spacing);
39 | 		overflow: auto;
40 | 		transition: all 0.2s ease;
41 | 		transform: scale(0);
42 | 		transform-origin: 50% 100%;
43 | 
44 | 		&.is-active {
45 | 			transform: scale(1);
46 | 		}
47 | 	}
48 | 
49 | 	&-form {
50 | 		margin: 0;
51 | 	}
52 | 
53 | 	&-header {
54 | 		@include shadow(2);
55 | 		background-color: $jump-header-bg-color;
56 | 		border-bottom: $jump-border-size $jump-border-style $jump-border-color;
57 | 		margin: 0;
58 | 		padding: ($jump-spacing  * 3);
59 | 
60 | 		&-title {
61 | 			color: $jump-header-title-color;
62 | 			margin: 0;
63 | 		}
64 | 	}
65 | 
66 | 	&-section {
67 | 		border-top: $jump-border-size $jump-border-style $jump-border-color;
68 | 		border-bottom: $jump-border-size $jump-border-style $jump-border-color;
69 | 		margin: 0;
70 | 		padding: ($jump-spacing * 2);
71 | 	}
72 | 
73 | 	&-footer {
74 | 		border-top: $jump-border-size $jump-border-style $jump-border-color;
75 | 		margin: 0;
76 | 		padding: ($jump-spacing * 2);
77 | 	}
78 | 
79 | 	&-btn {
80 | 		background-color: $jump-btn-bg-color;
81 | 		color: $jump-btn-color;
82 | 
83 | 		&:hover {
84 | 			background-color: $jump-btn-bg-hover-color;
85 | 			color: $jump-btn-hover-color;
86 | 		}
87 | 	}
88 | 
89 | 	&-item {
90 | 		margin: 0;
91 | 	}
92 | }
93 | 


--------------------------------------------------------------------------------
/tests/mock/announce.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"announcements": [
 3 | 		{
 4 | 			"id": 1,
 5 | 			"name": "Announce Locked",
 6 | 			"type": "announce",
 7 | 			"icon": "announce-locked",
 8 | 			"status": 0,
 9 | 			"author": "mod",
10 | 			"author_profile": "./memberlist.php?mode=viewprofile&amp;u=x",
11 | 			"author_color": "#009900",
12 | 			"time": "2016-09-14T19:18:00Z",
13 | 			"last_time": "2016-11-11T19:18:00Z",
14 | 			"last_author": "mod",
15 | 			"last_author_profile": "./memberlist.php?mode=viewprofile&amp;u=x",
16 | 			"last_color": "009900",
17 | 			"last_avatar": "https://avatars2.githubusercontent.com/u/72045?v=4&amp;s=46",
18 | 			"replies": 0,
19 | 			"approved": true,
20 | 			"views": 5
21 | 		},
22 | 		{
23 | 			"id": 5,
24 | 			"name": "Announce Locked Mine",
25 | 			"type": "announce",
26 | 			"icon": "announce-locked-mine",
27 | 			"status": 1,
28 | 			"author": "Im a mod with a long name",
29 | 			"author_profile": "./memberlist.php?mode=viewprofile&amp;u=x",
30 | 			"author_color": "#009900",
31 | 			"time": "2016-09-14T19:18:00Z",
32 | 			"last_time": "2016-11-11T19:18:00Z",
33 | 			"last_author": "Im a Dev but has a long name",
34 | 			"last_author_profile": "./memberlist.php?mode=viewprofile&amp;u=x",
35 | 			"last_color": "009900",
36 | 			"last_avatar": "https://avatars2.githubusercontent.com/u/10946388?v=4&amp;s=46",
37 | 			"replies": 54,
38 | 			"approved": true,
39 | 			"views": 234
40 | 		},
41 | 		{
42 | 			"id": 10,
43 | 			"name": "Announce Mine",
44 | 			"type": "announce",
45 | 			"icon": "announce-mine",
46 | 			"status": 0,
47 | 			"author": "hanakin",
48 | 			"author_profile": "./memberlist.php?mode=viewprofile&amp;u=x",
49 | 			"author_color": "#aa0000",
50 | 			"time": "2016-09-14T19:18:00Z",
51 | 			"last_time": "2016-11-11T19:18:00Z",
52 | 			"last_author": "hanakin",
53 | 			"last_author_profile": "./memberlist.php?mode=viewprofile&amp;u=x",
54 | 			"last_color": "aa0000",
55 | 			"last_avatar": "https://avatars2.githubusercontent.com/u/73081?v=4&amp;s=46",
56 | 			"replies": 1,
57 | 			"approved": true,
58 | 			"views": 6
59 | 		},
60 | 		{
61 | 			"id": 12,
62 | 			"name": "Announce",
63 | 			"type": "announce",
64 | 			"icon": "announce",
65 | 			"status": 0,
66 | 			"author": "mod",
67 | 			"author_profile": "./memberlist.php?mode=viewprofile&amp;u=x",
68 | 			"author_color": "#009900",
69 | 			"time": "2017-01-09T13:05:00Z",
70 | 			"last_time": "2017-01-09T13:05:00Z",
71 | 			"last_author": "mod",
72 | 			"last_author_profile": "./memberlist.php?mode=viewprofile&amp;u=x",
73 | 			"last_color": "009900",
74 | 			"last_avatar": "https://avatars2.githubusercontent.com/u/72045?v=4&amp;s=46",
75 | 			"replies": 8,
76 | 			"approved": true,
77 | 			"views": 53
78 | 		}
79 | 	]
80 | }
81 | 


--------------------------------------------------------------------------------
/all/views/macros/online.twig:
--------------------------------------------------------------------------------
 1 | {% macro who_is_online(page, online, lang, stats, groups) %}
 2 | <div class="c-tab-pane t-tab-pane{% if page == "topic" %} is-active{% endif %}" id="who-is-online" role="tabpanel">
 3 | 	<div class="c-tab-pane-row t-tab-pane-row">
 4 | 		{% if page == "index" %}
 5 | 			<h4 class="c-tab-pane-title t-tab-pane-title">{{ lang.registered_users }}{{ lang.colon }}</h4>
 6 | 		{% elseif page == "forum" %}
 7 | 			<h4 class="c-tab-pane-title t-tab-pane-title">{{ lang.online_forum }}{{ lang.colon }}</h4>
 8 | 		{% elseif page == "topic" %}
 9 | 			<h4 class="c-tab-pane-title t-tab-pane-title">{{ lang.online_topic }}{{ lang.colon }}</h4>
10 | 		{% endif %}
11 | 		<span class="c-tab-pane-text t-tab-text">
12 | 			{% for item in online %}
13 | 				{% if item.group %}
14 | 					{% if item.bot %}
15 | 						<span style="color: {{ item.group }};">{{ item.name }}</span>
16 | 					{% else %}
17 | 						<a class="c-tab-pane-link t-tab-pane-link" href="{{ item.profile }}" style="color: {{ item.group }};">{{ item.name }}</a>
18 | 					{% endif %}
19 | 				{% else %}
20 | 					<a class="c-tab-pane-link t-tab-pane-link" href="{{ item.profile }}">{{ item.name }}</a>
21 | 				{% endif %}
22 | 				{% if loop.last %}{% else %}, {% endif %}
23 | 			{% endfor %}
24 | 		</span>
25 | 	</div>
26 | 	{% if page == "index" %}
27 | 		<div class="c-tab-pane-row t-tab-pane-row">
28 | 			<div class="c-stat-wrap s-stat-wrap">
29 | 				<ul class="c-stat-list c-tab-pane-stats t-stat-list t-tab-pane-stats">
30 | 					<li class="c-stat-item t-stat-item">{{ lang.total_online }} <span class="o-tag c-stat-badge t-stat-badge">{{ stats.online.current }}</span></li>
31 | 					<li class="c-stat-item t-stat-item">{{ lang.registered }} <span class="o-tag c-stat-badge t-stat-badge">{{ stats.online.registered }}</span></li>
32 | 					<li class="c-stat-item t-stat-item">{{ lang.hidden }} <span class="o-tag c-stat-badge t-stat-badge">{{ stats.online.hidden }}</span></li>
33 | 					<li class="c-stat-item t-stat-item">{{ lang.guests }} <span class="o-tag c-stat-badge t-stat-badge">{{ stats.online.guests }}</span></li>
34 | 				</ul>
35 | 				<span class="c-stat-info t-stat-info">{{ lang.stats.stats_disclaimer }}</span>
36 | 			</div>
37 | 		</div>
38 | 		<div class="c-tab-pane-footer t-tab-pane-footer">
39 | 			<h4 class="c-tab-pane-title t-tab-pane-title">{{ lang.legend }}{{ lang.colon }}</h4>
40 | 			<span class="c-tab-pane-text t-tab-pane-text">
41 | 				{% for item in groups %}
42 | 					<a class="c-tab-pane-link t-tab-pane-link" style="color:{{ item.color }};" href="{{ item.url }}">{{ item.name }}</a>
43 | 					{% if loop.last %}{% else %}, {% endif %}
44 | 				{% endfor %}
45 | 			</span>
46 | 		</div>
47 | 	{% endif %}
48 | </div>
49 | {% endmacro %}
50 | 


--------------------------------------------------------------------------------
/all/scss/components/_crumbs.scss:
--------------------------------------------------------------------------------
  1 | //------------------------------------------------------------------------------
  2 | // @component: Crumbs
  3 | //------------------------------------------------------------------------------
  4 | // @author: hanakin -- midaym
  5 | // @version: 0.3.0
  6 | // @description
  7 | //
  8 | //------------------------------------------------------------------------------
  9 | 
 10 | //
 11 | // @settings
 12 | 
 13 | // Layout Variables
 14 | $crumbs-spacing: $default-spacing !default;
 15 | $crumbs-height: $default-height !default;
 16 | $crumbs-separator-height: $default-height-dense !default;
 17 | 
 18 | 
 19 | // Theme Variables
 20 | $crumbs-bg-color: $default-surface-color !default;
 21 | $crumbs-bg-hover-color: $default-surface-hover-color !default;
 22 | $crumbs-border-color: $default-border-color !default;
 23 | $crumbs-icon-hover-color: $default-action-color-hover !default;
 24 | 
 25 | @use 'sass:math';
 26 | 
 27 | //
 28 | // @scss
 29 | .c-crumbs {
 30 | 	@include parent();
 31 | 	margin: 0;
 32 | 	padding: 0;
 33 | 	list-style: none;
 34 | 
 35 | 	&-container {
 36 | 		background-color: $crumbs-bg-color;
 37 | 		border-top: 1px solid $crumbs-border-color;
 38 | 		box-shadow:
 39 | 			0 11px 15px -7px rgba(0, 0, 0, 0.2),
 40 | 			0 24px 38px 3px rgba(0, 0, 0, 0.14);
 41 | 		z-index: 10;
 42 | 		width: 100%;
 43 | 		margin: 0;
 44 | 		padding: 0 ($crumbs-spacing * 4);
 45 | 	}
 46 | 
 47 | 	&-item {
 48 | 		margin: 0;
 49 | 		padding: 0;
 50 | 
 51 | 		&:not(:first-of-type) {
 52 | 			display: none;
 53 | 		}
 54 | 
 55 | 		@media (min-width: $sm) {
 56 | 			&:nth-last-of-type(-n+1) {
 57 | 				display: block;
 58 | 			}
 59 | 		}
 60 | 
 61 | 		@media (min-width: $md) {
 62 | 			&:nth-last-of-type(-n+2) {
 63 | 				display: block;
 64 | 			}
 65 | 		}
 66 | 
 67 | 		@media (min-width: $lg) {
 68 | 			&:nth-last-of-type(-n+3) {
 69 | 				display: block;
 70 | 			}
 71 | 		}
 72 | 
 73 | 		@media (min-width: $xl) {
 74 | 			&:nth-last-of-type(-n+4) {
 75 | 				display: block;
 76 | 			}
 77 | 		}
 78 | 	}
 79 | 
 80 | 	&-separator {
 81 | 		width: $crumbs-separator-height;
 82 | 		height: $crumbs-separator-height;
 83 | 		margin-left: -(math.div($crumbs-spacing, 2));
 84 | 	}
 85 | 
 86 | 	&-link {
 87 | 		white-space: nowrap;
 88 | 		position: relative;
 89 | 		display: inline-flex;
 90 | 		justify-content: center;
 91 | 		align-items: center;
 92 | 		height: $crumbs-height;
 93 | 		padding: $crumbs-spacing;
 94 | 		padding-right: 0;
 95 | 
 96 | 		&:hover {
 97 | 			text-decoration: underline;
 98 | 			color: $crumbs-icon-hover-color;
 99 | 		}
100 | 	}
101 | 
102 | 	&-text {
103 | 		align-self: center;
104 | 		padding-left: math.div($crumbs-spacing, 2);
105 | 	}
106 | 
107 | 	&-icon {
108 | 		margin-right: math.div($crumbs-spacing, 2);
109 | 	}
110 | }
111 | 


--------------------------------------------------------------------------------
/all/scss/components/_toast.scss:
--------------------------------------------------------------------------------
  1 | //------------------------------------------------------------------------------
  2 | // @component: Toast
  3 | //------------------------------------------------------------------------------
  4 | // @author: hanakin -- midaym
  5 | // @version: 0.2.0
  6 | // @description
  7 | //
  8 | //------------------------------------------------------------------------------
  9 | 
 10 | //
 11 | // @settings
 12 | 
 13 | // Layout Variables
 14 | $toast-spacing: $default-spacing !default;
 15 | $toast-height: $default-height !default;
 16 | $toast-right: 48px !default;
 17 | 
 18 | 
 19 | // Theme Variables
 20 | $toast-bg-color: $default-info-dark-color !default;
 21 | $toast-bg-hover-color: $default-success-color !default;
 22 | $toast-text-color: $default-info-item-color !default;
 23 | $toast-success-color: $default-success-color !default;
 24 | $toast-success-hover-color: $default-white !default;
 25 | $toast-important-color: $default-error-color !default;
 26 | $toast-important-hover-color: $default-white !default;
 27 | 
 28 | //
 29 | // @scss
 30 | .c-toast {
 31 | 	background-color: $toast-bg-color;
 32 | 	opacity: 0;
 33 | 	position: fixed;
 34 | 	right: 0;
 35 | 	bottom: ($toast-spacing * 10);
 36 | 	left: auto;
 37 | 	display: inline-flex;
 38 | 	margin: 0 auto;
 39 | 	padding: 0;
 40 | 	transition: transform 0.25s cubic-bezier(0.4, 0, 1, 1) 0ms, opacity 0.25s cubic-bezier(0.4, 0, 1, 1) 0ms;
 41 | 	transform: translate(4%, 8%);
 42 | 	pointer-events: none;
 43 | 	will-change: transform;
 44 | 
 45 | 	&-text {
 46 | 		@include type(body1);
 47 | 		color: $toast-text-color;
 48 | 		display: flex;
 49 | 		align-items: center;
 50 | 		height: $toast-height;
 51 | 		margin-right: auto;
 52 | 		margin-left: 0;
 53 | 		padding-right: ($toast-spacing * 3);
 54 | 		padding-left: ($toast-spacing * 3);
 55 | 	}
 56 | 
 57 | 	&-action {
 58 | 		color: $toast-text-color;
 59 | 		display: flex;
 60 | 		align-items: center;
 61 | 		height: $toast-height;
 62 | 		margin-right: auto;
 63 | 		margin-left: 0;
 64 | 		padding: ($toast-spacing * 0.75) ($toast-spacing * 3);
 65 | 
 66 | 		&-success {
 67 | 			color: $toast-success-color;
 68 | 
 69 | 			&:hover,
 70 | 			&:focus {
 71 | 				color: $toast-success-hover-color;
 72 | 			}
 73 | 		}
 74 | 
 75 | 		&-important {
 76 | 			color: $toast-important-color;
 77 | 
 78 | 			&:hover,
 79 | 			&:focus {
 80 | 				color: $toast-important-hover-color;
 81 | 			}
 82 | 		}
 83 | 
 84 | 		&:hover,
 85 | 		&:focus {
 86 | 			background-color: $toast-bg-hover-color;
 87 | 		}
 88 | 	}
 89 | 
 90 | 	&.is-active {
 91 | 		opacity: 1;
 92 | 		transition: transform 0.25s cubic-bezier(0.4, 0, 1, 1) 0ms, opacity 0.25s cubic-bezier(0.4, 0, 1, 1) 0ms;
 93 | 		transform: translate(0, 0);
 94 | 		pointer-events: auto;
 95 | 	}
 96 | 
 97 | 	@media (min-width: $sm) {
 98 | 		right: $toast-right;
 99 | 	}
100 | }
101 | 


--------------------------------------------------------------------------------
/all/views/includes/paging-fixed.twig:
--------------------------------------------------------------------------------
 1 | <ul class="c-paging">
 2 | 	<li class="c-paging-item">
 3 | 		<a class="c-paging-action" href="#page-top" data-tooltip="true" title="{{ lang.top }}">
 4 | 			{{ 'mdi:chevron-double-up'|icon('iconify', 'o-icon c-paging-action-icon t-paging-fixed-action-icon')|safe }}
 5 | 		</a>
 6 | 	</li>
 7 | 	<li class="c-paging-item">
 8 | 		<a class="c-paging-action" href="#" data-tooltip="true" title="{{ lang.prev }}">
 9 | 			{{ 'mdi:chevron-left'|icon('iconify', 'o-icon c-paging-action-icon t-paging-fixed-action-icon')|safe }}
10 | 		</a>
11 | 	</li>
12 | 	<li class="c-paging-item">
13 | 		<a class="c-paging-action" href="#" data-tooltip="true" data-toggle="jump" title="{{ lang.goto }} #...">
14 | 			7535
15 | 		</a>
16 | 		<div class="c-jump-container" data-container="jump">
17 | 			<form class="o-form c-jump-form" action="">
18 | 				<header class="c-jump-header">
19 | 					<h4 class="c-jump-header-title">{{ lang.jump_to }}</h4>
20 | 				</header>
21 | 				<section class="c-jump-section">
22 | 					<div class="o-form-group c-jump-item has-icon">
23 | 						<span class="o-form-lead c-jump-form-lead">
24 | 							{{ 'mdi:file-outline'|icon('iconify', 'o-icon o-form-leading-icon c-jump-form-leading-icon')|safe }}
25 | 						</span>
26 | 						<input class="o-form-input o-form-input-right c-jump-form-input c-jump-form-input-right t-jump-form-input t-jump-form-input-right" type="text" id="post" placeholder="7535">
27 | 						<label class="o-form-floating-label c-jump-form-floating-label" for="post">{{ lang.goto }} #</label>
28 | 						<span class="o-form-suffix c-jump-form-suffix">/{{ topics[2].replies }}</span>
29 | 					</div>
30 | 				</section>
31 | 				<section class="c-jump-section">
32 | 					<div class="o-form-group c-jump-item has-icon">
33 | 						<span class="o-form-lead c-jump-form-lead">
34 | 							{{ 'mdi:calendar-blank'|icon('iconify', 'o-icon o-form-leading-icon c-jump-form-leading-icon')|safe }}
35 | 						</span>
36 | 						<input class="o-form-input c-jump-form-input t-jump-form-input" type="date" id="post-date">
37 | 						<label class="o-form-floating-label c-jump-form-floating-label" for="post-date">{{ lang.post_goto_date }}</label>
38 | 					</div>
39 | 				</section>
40 | 				<footer class="c-jump-footer">
41 | 					<button type="submit" class="o-btn c-jump-btn">{{ lang.submit }}</button>
42 | 				</footer>
43 | 			</form>
44 | 		</div>
45 | 	</li>
46 | 	<li class="c-paging-item">
47 | 		<a class="c-paging-action" href="#" data-tooltip="true" title="{{ lang.next }}">
48 | 			{{ 'mdi:chevron-right'|icon('iconify', 'o-icon c-paging-action-icon t-paging-fixed-action-icon')|safe }}
49 | 		</a>
50 | 	</li>
51 | 	<li class="c-paging-item">
52 | 		<a class="c-paging-action" href="#page-bottom" data-tooltip="true" title="{{ lang.down }}">
53 | 			{{ 'mdi:chevron-double-down'|icon('iconify', 'o-icon c-paging-action-icon t-paging-fixed-action-icon')|safe }}
54 | 		</a>
55 | 	</li>
56 | </ul>
57 | 


--------------------------------------------------------------------------------
/all/scss/components/_profile.scss:
--------------------------------------------------------------------------------
  1 | //------------------------------------------------------------------------------
  2 | // @component: Profile
  3 | //------------------------------------------------------------------------------
  4 | // @author: hanakin -- midaym
  5 | // @version: 0.3.0
  6 | // @description
  7 | //
  8 | //------------------------------------------------------------------------------
  9 | 
 10 | @use 'sass:math';
 11 | 
 12 | //
 13 | // @settings
 14 | 
 15 | // Layout Variables
 16 | $profile-spacing: $default-spacing !default;
 17 | $profile-width: 336px !default;
 18 | $profile-group-height: 48px !default;
 19 | $profile-border-radius: $default-border-radius !default;
 20 | $profile-opacity-38: $default-opacity-38 !default;
 21 | 
 22 | 
 23 | // Theme Variables
 24 | $profile-background-color: $default-surface-color !default;
 25 | $profile-user-title-color: $default-background-item-color !default;
 26 | $profile-action-color: $default-surface-item-color !default;
 27 | $profile-action-color-hover: $default-action-color-hover !default;
 28 | $profile-good-color: $default-success-color !default;
 29 | $profile-bad-color: $default-error-color !default;
 30 | 
 31 | 
 32 | //
 33 | // @scss
 34 | .c-profile {
 35 | 	@include shadow(2);
 36 | 	background-color: $profile-background-color;
 37 | 	border-radius: $profile-border-radius;
 38 | 	position: absolute;
 39 | 	z-index: 999;
 40 | 	top: 0;
 41 | 	width: $profile-width;
 42 | 	padding: 0 0 ($profile-spacing * 2) 0;
 43 | 	transition: all 0.2s ease;
 44 | 	transform: scale(0);
 45 | 	transform-origin: left top;
 46 | 
 47 | 	&.is-active {
 48 | 		transform: scale(1);
 49 | 	}
 50 | 
 51 | 	&-toggle {
 52 | 		position: relative;
 53 | 		cursor: pointer;
 54 | 	}
 55 | 
 56 | 	&-user {
 57 | 		&-title {
 58 | 			color: $profile-user-title-color;
 59 | 			opacity: $profile-opacity-38;
 60 | 		}
 61 | 
 62 | 		&:hover {
 63 | 			text-decoration: underline;
 64 | 			transition: 0.5s;
 65 | 		}
 66 | 	}
 67 | 
 68 | 	&-group {
 69 | 		@include type(body2);
 70 | 		text-align: center;
 71 | 		height: $profile-group-height;
 72 | 		margin: math.div($profile-spacing, 2) 0 (-$profile-spacing);
 73 | 	}
 74 | 
 75 | 	&-action {
 76 | 		color: $profile-action-color;
 77 | 		display: inline-block;
 78 | 		padding: ($profile-spacing * 2);
 79 | 
 80 | 		&:hover,
 81 | 		&:focus {
 82 | 			color: $profile-action-color-hover;
 83 | 			transition: 0.5s;
 84 | 		}
 85 | 	}
 86 | 
 87 | 	&-close {
 88 | 		float: right;
 89 | 	}
 90 | 
 91 | 	&-meta {
 92 | 		text-align: center;
 93 | 		margin: 0;
 94 | 		padding: ($profile-spacing * 2);
 95 | 	}
 96 | 
 97 | 	&-stats {
 98 | 		@include parent();
 99 | 		flex-wrap: wrap;
100 | 		margin: 0;
101 | 		padding: 0;
102 | 		list-style: none;
103 | 	}
104 | 
105 | 	&-stat {
106 | 		@include child();
107 | 		text-align: center;
108 | 		min-width: calc((100% / 3));
109 | 		padding: $profile-spacing ($profile-spacing * 2);
110 | 
111 | 		&-wrap {
112 | 			font-size: 14px;
113 | 			margin: 0;
114 | 			padding: 0;
115 | 		}
116 | 
117 | 		&-title {
118 | 			margin-left: $profile-spacing;
119 | 		}
120 | 
121 | 		&-value {
122 | 			@include type(caption);
123 | 			padding-top: $profile-spacing;
124 | 		}
125 | 	}
126 | 
127 | 	&-rating {
128 | 		&-good {
129 | 			font-weight: 600;
130 | 			color: $profile-good-color;
131 | 		}
132 | 
133 | 		&-bad {
134 | 			font-weight: 600;
135 | 			color: $profile-bad-color;
136 | 		}
137 | 	}
138 | }
139 | 


--------------------------------------------------------------------------------
/all/views/includes/notification.twig:
--------------------------------------------------------------------------------
 1 | <div class="c-notification-container t-notification-container" data-container="notifications">
 2 | 	<div class="o-bar c-notification-header t-notification-header">
 3 | 		<div class="o-bar-left c-notification-header-left t-notification-header-left">
 4 | 			<h2 class="o-bar-title c-notification-bar-title t-notification-bar-title">{{ lang.notifications }}</h2>
 5 | 		</div>
 6 | 		<div class="o-bar-right c-notification-header-left t-notification-header-left">
 7 | 			<a class="o-bar-item o-action c-notification-header-action t-notification-header-action" href="" data-tooltip="true" title="{{ lang.settings }}">
 8 | 				{{ 'mdi:settings-outline'|icon('iconify', 'o-icon c-notification-header-action-icon t-notification-header-action-icon')|safe }}
 9 | 			</a>
10 | 		</div>
11 | 	</div>
12 | 	<ul class="c-notification-list t-notification-list">
13 | 		{% for item in notification %}
14 | 			<li class="c-notification-item{% if item.unread %} c-notification-unread{% endif %} t-notification-item{% if item.unread %}t-notification-unread{% endif %}">
15 | 				<a class="c-notification-media t-notification-media" href="{{ item.url }}">
16 | 					<span class="o-avatar-wrap c-notification-list-avatar t-notification-list-avatar">
17 | 						<img class="o-avatar c-notification-avatar t-notification-avatar" src="{{ item.avatar }}" alt="User Avatar">
18 | 						{% if item.online %}
19 | 							<span class="o-avatar-online c-notification-avatar-online t-notification-avatar-online"></span>
20 | 						{% endif %}
21 | 					</span>
22 | 				</a>
23 | 				<span class="c-notification-users t-notification-users">
24 | 					{{ 'mdi:account-circle-outline'|icon('iconify', 'o-icon c-notification-user-icon t-notification-user-icon')|safe }}
25 | 					<a class="c-notification-user t-notification-user" href="{{ item.url }}" style="color: {{ item.color }};">{{ item.user }}</a>
26 | 					{% for participant in item.participants %}
27 | 					, <a class="c-notification-user t-notification-user" href="{{ participant.url }}" style="color: {{ participant.color }};">{{ participant.name }}</a>
28 | 					{% endfor %}
29 | 				</span>
30 | 				<span class="c-notification-title t-notification-title">
31 | 					{{ 'mdi:page-last'|icon('iconify', 'o-icon c-notification-title-icon t-notification-title-icon')|safe }}
32 | 					<a class="c-notification-title-text t-notification-title-text" href="#"><strong>{{ item.title }}</strong></a>
33 | 				</span>
34 | 				<span class="c-notification-time t-notification-time">
35 | 					{{ 'mdi:clock-outline'|icon('iconify', 'o-icon c-notification-time-icon t-notification-time-icon')|safe }}
36 | 					<time class="c-notification-time-text t-notification-time-text" datetime="{{ item.time }}" title="{{ item.time }}" data-short="{{ item.time }}">{{ item.time }}</time>
37 | 				</span>
38 | 				<a class="c-notification-action{% if item.approved == 1 %} c-notification-approved{% elseif item.approved == 2 %} c-notification-unapproved{% endif %} t-notification-action{% if item.approved == 1 %} t-notification-approved{% elseif item.approved == 2 %} t-notification-unapproved{% endif %}" href="" data-tooltip="true" title="{{ item.typeTitle }}">
39 | 					{{ item.type|icon('iconify', 'o-icon c-notification-action-icon t-notification-action-icon')|safe }}
40 | 				</a>
41 | 			</li>
42 | 		{% endfor %}
43 | 	</ul>
44 | 	<div class="o-bar c-notification-footer t-notification-footer">
45 | 		<a class="o-bar-item o-action c-notification-footer-action t-notification-footer-action" href="">
46 | 			<span class="o-action-text c-notification-footer-action-text t-notification-footer-action-text">{{ lang.see_all }}</span>
47 | 		</a>
48 | 	</div>
49 | </div>
50 | 


--------------------------------------------------------------------------------
/all/scss/components/_editor.scss:
--------------------------------------------------------------------------------
  1 | //------------------------------------------------------------------------------
  2 | // @component: Editor
  3 | //------------------------------------------------------------------------------
  4 | // @author: hanakin -- midaym
  5 | // @version: 0.2.0
  6 | // @description
  7 | //
  8 | //------------------------------------------------------------------------------
  9 | 
 10 | //
 11 | // @settings
 12 | 
 13 | // Layout Variables
 14 | $editor-spacing: $default-spacing !default;
 15 | $editor-width: 88% !default;
 16 | $editor-width-md: $md !default;
 17 | $editor-width-lg: $lg !default;
 18 | $editor-width-xl: $xl !default;
 19 | $editor-border-radius: $default-border-radius !default;
 20 | $editor-border-style: solid !default;
 21 | $editor-border-size: $default-border-size !default;
 22 | $editor-submit-height: $default-height !default;
 23 | $editor-btn-height: 36px !default;
 24 | $editor-emoji-picker-bottom: 66px !default;
 25 | $editor-toolbar-bottom: 58px !default;
 26 | $editor-toolbar-width: calc(5 * 56px) !default;
 27 | $editor-toolbar-width-lg: calc(12 * 56px) !default;
 28 | 
 29 | // Theme Variables
 30 | $editor-background-color: $default-surface-color !default;
 31 | $editor-border-color: $default-border-color !default;
 32 | $editor-btn-color: $white !default;
 33 | $editor-btn-background: $default-primary-color !default;
 34 | $editor-btn-color-hover: $white !default;
 35 | $editor-btn-background-hover: $default-primary-dark-color !default;
 36 | 
 37 | 
 38 | //
 39 | // @scss
 40 | 
 41 | //
 42 | .c-editor {
 43 | 	@include shadow(2);
 44 | 	background-color: $editor-background-color;
 45 | 	border-radius: $editor-border-radius;
 46 | 	// position: fixed;
 47 | 	right: 0;
 48 | 	bottom: ($editor-spacing * 3);
 49 | 	left: 0;
 50 | 	width: $editor-width;
 51 | 	margin: 0 auto;
 52 | 
 53 | 	&-title,
 54 | 	&-content {
 55 | 		background-color: transparent;
 56 | 	}
 57 | 
 58 | 	&-content,
 59 | 	&-content:focus {
 60 | 		background-image: none;
 61 | 		border-bottom: none;
 62 | 	}
 63 | 
 64 | 	&-toolbar {
 65 | 		position: absolute;
 66 | 		z-index: 99;
 67 | 		right: 0;
 68 | 		bottom: $editor-toolbar-bottom;
 69 | 		width: $editor-toolbar-width;
 70 | 		transition: all 0.2s ease;
 71 | 		transform: scale(0);
 72 | 		transform-origin: right bottom;
 73 | 
 74 | 		&.is-active {
 75 | 			transform: scale(1);
 76 | 		}
 77 | 
 78 | 		@media (min-width: $lg) {
 79 | 			width: $editor-toolbar-width-lg;
 80 | 		}
 81 | 	}
 82 | 
 83 | 	&-emoji-picker {
 84 | 		position: absolute;
 85 | 		z-index: 99;
 86 | 		bottom: $editor-emoji-picker-bottom;
 87 | 		transition: all 0.2s ease;
 88 | 		transform: scale(0);
 89 | 		transform-origin: left bottom;
 90 | 
 91 | 		&.is-active {
 92 | 			transform: scale(1);
 93 | 		}
 94 | 	}
 95 | 
 96 | 	&-footer {
 97 | 		border-top: $editor-border-size $editor-border-style $editor-border-color;
 98 | 	}
 99 | 
100 | 	&-submit {
101 | 		display: inline-flex;
102 | 		justify-content: center;
103 | 		align-items: center;
104 | 		height: $editor-submit-height;
105 | 		margin-right: ($editor-spacing * 2);
106 | 		padding-left: $editor-spacing;
107 | 
108 | 		&-btn {
109 | 			line-height: 1;
110 | 			background-color: $editor-btn-background;
111 | 			color: $editor-btn-color;
112 | 			height: $editor-btn-height;
113 | 			padding: $editor-spacing;
114 | 
115 | 			&:hover,
116 | 			&:focus {
117 | 				background-color: $editor-btn-background-hover;
118 | 				color: $editor-btn-color-hover;
119 | 			}
120 | 		}
121 | 	}
122 | 
123 | 	@media (min-width: $md) {
124 | 		width: $editor-width-md;
125 | 	}
126 | 
127 | 	@media (min-width: $lg) {
128 | 		width: $editor-width-lg;
129 | 	}
130 | 
131 | 	@media (min-width: $xl) {
132 | 		width: $editor-width-xl;
133 | 	}
134 | }
135 | 


--------------------------------------------------------------------------------
/all/scss/components/_menu.scss:
--------------------------------------------------------------------------------
  1 | //------------------------------------------------------------------------------
  2 | // @component: Menu
  3 | //------------------------------------------------------------------------------
  4 | // @author: hanakin -- midaym
  5 | // @version: 0.2.0
  6 | // @description
  7 | //
  8 | //------------------------------------------------------------------------------
  9 | 
 10 | //
 11 | // @settings
 12 | 
 13 | // Layout Variables
 14 | $menu-spacing: $default-spacing !default;
 15 | $menu-icon-size: $default-icon-md !default;
 16 | $menu-link-size: 48px !default;
 17 | $menu-border-radius: $default-border-radius !default;
 18 | $menu-divider-height: $default-border-size !default;
 19 | $menu-opacity-1: $default-opacity !default;
 20 | $menu-opacity-87: $default-opacity-87 !default;
 21 | $menu-opacity-54: $default-opacity-54 !default;
 22 | $menu-opacity-38: $default-opacity-38 !default;
 23 | $menu-opacity-12: $default-opacity-12 !default;
 24 | 
 25 | // Theme Variables
 26 | $menu-header-background-color: $default-background-color !default;
 27 | $menu-background-color: $default-surface-color !default;
 28 | $menu-link-color: $default-surface-item-color !default;
 29 | $menu-action-icon-color: $default-surface-item-color !default;
 30 | $menu-action-color-hover: $default-action-color-hover !default;
 31 | $menu-action-bg: $default-surface-alt-color !default;
 32 | $menu-divider-color: $default-border-color !default;
 33 | 
 34 | 
 35 | //
 36 | // @scss
 37 | .c-menu {
 38 | 	margin: 0;
 39 | 	padding: $menu-spacing 0;
 40 | 	list-style: none;
 41 | 
 42 | 	&-container {
 43 | 		@include shadow(2);
 44 | 		text-align: left;
 45 | 		background-color: $menu-background-color;
 46 | 		border-radius: $menu-border-radius;
 47 | 		position: absolute;
 48 | 		z-index: 999;
 49 | 		top: 0;
 50 | 		overflow: auto;
 51 | 		transition: all 0.2s ease;
 52 | 		transform: scale(0);
 53 | 
 54 | 		&.is-active {
 55 | 			transform: scale(1);
 56 | 		}
 57 | 	}
 58 | 
 59 | 	&-item {
 60 | 		position: relative;
 61 | 		margin: 0;
 62 | 	}
 63 | 
 64 | 	&-toggle {
 65 | 		position: relative;
 66 | 		cursor: pointer;
 67 | 	}
 68 | 
 69 | 	&-header {
 70 | 		@include type(body2);
 71 | 		@include parent();
 72 | 		background-color: $menu-header-background-color;
 73 | 		color: $menu-link-color;
 74 | 		position: relative;
 75 | 		align-items: center;
 76 | 		height: $menu-link-size;
 77 | 		padding: 0 ($menu-spacing * 2) 0 ($menu-spacing * 2);
 78 | 	}
 79 | 
 80 | 	&-link {
 81 | 		@include type(body2);
 82 | 		@include parent();
 83 | 		white-space: nowrap;
 84 | 		text-decoration: none;
 85 | 		color: $menu-link-color;
 86 | 		align-items: center;
 87 | 		height: $menu-link-size;
 88 | 		padding: 0 ($menu-spacing * 2) 0 ($menu-spacing * 2);
 89 | 		cursor: pointer;
 90 | 
 91 | 		&-icon {
 92 | 			color: $menu-action-icon-color;
 93 | 			opacity: $menu-opacity-54;
 94 | 			width: $menu-icon-size;
 95 | 			height: $menu-icon-size;
 96 | 			margin-right: ($menu-spacing * 3);
 97 | 		}
 98 | 
 99 | 		&:hover {
100 | 			text-decoration: none;
101 | 			background-color: $menu-action-bg;
102 | 			color: $menu-action-color-hover;
103 | 			transition: 0.5s;
104 | 
105 | 			.c-menu-link-icon {
106 | 				color: $menu-action-color-hover;
107 | 				opacity: $menu-opacity-1;
108 | 				transition: 0.5s;
109 | 			}
110 | 		}
111 | 	}
112 | 
113 | 	&-divider {
114 | 		background-color: $menu-divider-color;
115 | 		height: $menu-divider-height;
116 | 		margin-top: $menu-spacing;
117 | 		margin-bottom: $menu-spacing;
118 | 	}
119 | 
120 | 	&-form {
121 | 		&-group {
122 | 			flex: 1.5;
123 | 			margin: 0;
124 | 
125 | 			&:first-of-type {
126 | 				margin-right: ($menu-spacing * 2);
127 | 				padding-left: ($menu-spacing * 2);
128 | 			}
129 | 
130 | 			&:last-of-type {
131 | 				flex: 1;
132 | 			}
133 | 		}
134 | 	}
135 | }
136 | 


--------------------------------------------------------------------------------
/all/views/includes/forum-subs.twig:
--------------------------------------------------------------------------------
 1 | <li class="o-list-item c-topic-item" role="row" data-tooltip="true" title="{{ item.desc }}">
 2 | 	<span class="o-list-media">
 3 | 		{% if item.status == 1 %}
 4 | 			{% if item.icon %}
 5 | 				{{ item.icon|icon('inline', 'o-icon o-list-media-icon c-topic-read')|safe }}
 6 | 			{% else %}
 7 | 				{{ 'forum'|icon('inline', 'o-icon o-list-media-icon c-topic-read')|safe }}
 8 | 			{% endif %}
 9 | 		{% else %}
10 | 			{% if item.icon %}
11 | 				{{ item.icon|icon('inline', 'o-icon o-list-media-icon c-topic-read')|safe }}
12 | 			{% else %}
13 | 				{{ 'forum'|icon('inline', 'o-icon o-list-media-icon c-topic-read')|safe }}
14 | 			{% endif %}
15 | 		{% endif %}
16 | 	</span>
17 | 	<span class="o-list-primary">
18 | 		<h4 class="c-topic-title" role="heading" aria-level="4">
19 | 			<a class="o-list-title c-topic-title-text" href="#">{{item.name}}</a>
20 | 		</h4>
21 | 		<span class="o-list-secondary">
22 | 			{% if item.approved %}
23 | 				{% if item.approved == false %}
24 | 					<a class="o-list-secondary-item c-topic-unapproved" href="#" data-tooltip="true" title="{{ lang.unapproved }}">
25 | 						{{ 'mdi:alert-decagram-outline'|icon('iconify', 'o-icon o-list-secondary-item-icon')|safe }}
26 | 					</a>
27 | 				{% endif %}
28 | 				<span class="o-list-secondary-item c-topic-user">
29 | 					{{ 'mdi:account-circle-outline'|icon('iconify', 'o-icon o-list-secondary-item-icon')|safe }}
30 | 					<a class="o-list-secondary-item-link" href="{{ item.author_profile }}" style="color: {{ item.author_color }};">{{ item.author }}</a>
31 | 				</span>
32 | 				<span class="o-list-secondary-item c-topic-time">
33 | 					{{ 'mdi:clock-outline'|icon('iconify', 'o-icon o-list-secondary-item-icon')|safe }}
34 | 					<time datetime="{{ item.time }}" title="{{ item.time }}" data-short="{{ item.time }}">{{ item.time|moment("YYYYMMDD", true) }}</time>
35 | 				</span>
36 | 				<span class="o-list-secondary-item c-topic-views">
37 | 					{{ 'mdi:file-eye-outline'|icon('iconify', 'o-icon o-list-secondary-item-icon')|safe }}
38 | 					{{ item.views }}
39 | 				</span>
40 | 				<span class="o-list-secondary-item c-topic-replies">
41 | 					{{ 'mdi:comment-text-outline'|icon('iconify', 'o-icon o-list-secondary-item-icon')|safe }}
42 | 					{{ item.replies }}
43 | 				</span>
44 | 				{% if item.pages %}
45 | 					<a class="o-list-secondary-item" href="#" data-tooltip="true" title="{{ lang.page_goto }}">
46 | 						{{ 'mdi:pages'|icon('iconify', 'o-icon o-list-secondary-item-icon')|safe }}
47 | 					</a>
48 | 				{% endif %}
49 | 			{% else %}
50 | 				<span class="o-list-secondary-item c-topic-subforum-topics">
51 | 					{{ 'mdi:file-outline'|icon('iconify', 'o-icon o-list-secondary-item-icon')|safe }}
52 | 					{{ item.topics }}
53 | 				</span>
54 | 				<span class="o-list-secondary-item c-topic-subforum-posts">
55 | 					{{ 'mdi:comment-text-outline'|icon('iconify', 'o-icon o-list-secondary-item-icon')|safe }}
56 | 					{{ item.posts }}
57 | 				</span>
58 | 			{% endif %}
59 | 		</span>
60 | 	</span>
61 | 	<span class="o-list-meta c-topic-meta">
62 | 		<span class="o-list-meta-primary c-topic-meta-primary">
63 | 			<a class="o-list-meta-link c-topic-link" href="{{ item.last_author_profile }}" style="color: #{{ item.last_color }};">{{ item.last_author }}</a>
64 | 			<span class="o-list-meta-secondary">
65 | 				<a class="o-list-meta-link" href="">
66 | 					<time datetime="{{ item.last_time }}" title="{{ item.last_time }}" data-short="{{ item.last_time }}">{{ item.last_time|moment("YYYYMMDD", true) }}</time>
67 | 				</a>
68 | 			</span>
69 | 		</span>
70 | 		<a class="o-list-meta-media" href="{{ item.last_author_profile }}">
71 | 			<span class="o-avatar-wrap o-list-avatar">
72 | 				<img class="o-avatar" src="{{ item.last_avatar }}" alt="User Avatar">
73 | 				<span class="o-avatar-online o-action-bar-avatar-online"></span>
74 | 			</span>
75 | 		</a>
76 | 	</span>
77 | </li>
78 | 


--------------------------------------------------------------------------------
/all/scss/components/_topic.scss:
--------------------------------------------------------------------------------
  1 | 
  2 | // @component: Topic
  3 | //------------------------------------------------------------------------------
  4 | // @author: hanakin -- midaym
  5 | // @version: 0.3.0
  6 | // @description
  7 | //
  8 | //------------------------------------------------------------------------------
  9 | 
 10 | @use 'sass:math';
 11 | 
 12 | //
 13 | // @settings
 14 | 
 15 | // Layout Variables
 16 | $topic-spacing: $default-spacing !default;
 17 | $topic-data-icon-size: 20px !default;
 18 | $topic-border-size: $default-border-size !default;
 19 | $topic-border-radius: $default-border-radius !default;
 20 | 
 21 | // Theme Variables
 22 | $topic-icon-color: $default-secondary-color !default;
 23 | $topic-icon-color-read: $default-primary-color !default;
 24 | $topic-bg-color: $default-background-color !default;
 25 | $topic-bg-hover-color: $default-background-alt-color !default;
 26 | $topic-color: $default-background-item-color !default;
 27 | $topic-border-color: $default-border-color !default;
 28 | $topic-header-color: $default-surface-color !default;
 29 | $topic-header-icon-color: $default-surface-item-color !default;
 30 | 
 31 | 
 32 | //
 33 | // @scss
 34 | .c-topic {
 35 | 	box-shadow: none;
 36 | 	display: block;
 37 | 	transition: 0.35s ease-in-out;
 38 | 	transform: scaleY(1);
 39 | 	transform-origin: center top;
 40 | 
 41 | 	&-container {
 42 | 		@include shadow(2); // google material design
 43 | 	}
 44 | 
 45 | 	&-item {
 46 | 		background-color: $topic-bg-color;
 47 | 		border-top: $topic-border-size solid $topic-border-color;
 48 | 		color: $topic-color;
 49 | 
 50 | 		&:hover {
 51 | 			background-color: $topic-bg-hover-color;
 52 | 			transition: 0.5s;
 53 | 		}
 54 | 	}
 55 | 
 56 | 	&-header {
 57 | 		border-top-left-radius: $topic-border-radius;
 58 | 		border-top-right-radius: $topic-border-radius;
 59 | 
 60 | 		&-info {
 61 | 			padding-right: ($topic-spacing * 2);
 62 | 		}
 63 | 
 64 | 		&-action {
 65 | 			&:focus {
 66 | 				background-color: $topic-header-color;
 67 | 				color: $topic-header-icon-color;
 68 | 			}
 69 | 
 70 | 			&-icon {
 71 | 				transition: 0.35s ease-in-out;
 72 | 			}
 73 | 
 74 | 			&:last-of-type {
 75 | 				border-top-right-radius: $topic-border-radius;
 76 | 			}
 77 | 		}
 78 | 	}
 79 | 
 80 | 	&-title {
 81 | 		line-height: 1;
 82 | 		margin: 0;
 83 | 
 84 | 		&-text {
 85 | 			@include type(subhead1);
 86 | 		}
 87 | 	}
 88 | 
 89 | 	&-meta {
 90 | 		@include parent();
 91 | 		text-align: right;
 92 | 		position: relative;
 93 | 		justify-content: flex-start;
 94 | 		align-items: center;
 95 | 	}
 96 | 
 97 | 	&-unread {
 98 | 		color: $topic-icon-color;
 99 | 	}
100 | 
101 | 	&-read {
102 | 		color: $topic-icon-color-read;
103 | 	}
104 | 
105 | 	&-unapproved {
106 | 		color: $topic-icon-color;
107 | 		padding: 0;
108 | 	}
109 | 
110 | 	&-meta-primary,
111 | 	&-time,
112 | 	&-date {
113 | 		display: none;
114 | 
115 | 		@media (min-width: $lg) {
116 | 			display: inline-block;
117 | 		}
118 | 	}
119 | 
120 | 	&-paging {
121 | 		display: none;
122 | 
123 | 		&-link {
124 | 			font-size: inherit;
125 | 			height: ($topic-spacing * 3);
126 | 			padding: math.div($topic-spacing, 4) math.div($topic-spacing, 2);
127 | 
128 | 			&-icon {
129 | 				width: $topic-data-icon-size;
130 | 				height: $topic-data-icon-size;
131 | 			}
132 | 		}
133 | 
134 | 		@media (min-width: $md) {
135 | 			display: inline-flex;
136 | 		}
137 | 	}
138 | 
139 | 	&-checkbox-label {
140 | 		text-indent: 9999px;
141 | 		width: 0;
142 | 	}
143 | 
144 | 	&.is-collapsed {
145 | 		display: none;
146 | 		transition: 0.35s ease-in-out;
147 | 		transform: scaleY(0);
148 | 
149 | 		.c-topic-header {
150 | 			border-bottom-right-radius: $topic-border-radius;
151 | 			border-bottom-left-radius: $topic-border-radius;
152 | 		}
153 | 
154 | 		.c-topic-header-action-icon {
155 | 			transition: 0.35s ease-in-out;
156 | 			transform: rotate(180deg);
157 | 		}
158 | 
159 | 		.c-topic-header-action:last-of-type {
160 | 			border-bottom-right-radius: $topic-border-radius;
161 | 		}
162 | 	}
163 | }
164 | 


--------------------------------------------------------------------------------
/all/scss/components/_forum.scss:
--------------------------------------------------------------------------------
  1 | //------------------------------------------------------------------------------
  2 | // @component: Forum
  3 | //------------------------------------------------------------------------------
  4 | // @author: hanakin -- midaym
  5 | // @version: 0.3.0
  6 | // @description
  7 | //
  8 | //------------------------------------------------------------------------------
  9 | 
 10 | //
 11 | // @settings
 12 | 
 13 | // Layout Variables
 14 | $forum-spacing: $default-spacing !default;
 15 | $forum-title-icon-alignment: -5px !default;
 16 | $forum-border-radius: $default-border-radius !default;
 17 | $forum-media-size: $default-icon-lg !default;
 18 | $forum-bar-height: $default-height !default;
 19 | $forum-border-style: solid !default;
 20 | $forum-border-size: $default-border-size !default;
 21 | 
 22 | 
 23 | // Theme Variables
 24 | $forum-background-color: $default-background-color !default;
 25 | $forum-text-color: $default-background-item-color !default;
 26 | $forum-border-color: $default-border-color !default;
 27 | $forum-media-color: $default-secondary-color !default;
 28 | $forum-media-read-color: $default-primary-color !default;
 29 | $forum-title-icon-color: $default-info-color !default;
 30 | $forum-action-color: $default-action-icon-color !default;
 31 | 
 32 | 
 33 | //
 34 | // @scss
 35 | .c-forum {
 36 | 	@include shadow(2);
 37 | 	background-color: $forum-background-color;
 38 | 	border-radius: $forum-border-radius;
 39 | 	position: relative;
 40 | 	display: grid;
 41 | 	grid-template-rows: auto $forum-bar-height;
 42 | 	margin-bottom: ($forum-spacing * 2);
 43 | 
 44 | 	&-body {
 45 | 		border-bottom: $forum-border-size $forum-border-style $forum-border-color;
 46 | 		display: grid;
 47 | 		grid-template-columns: ($default-icon-lg + ($forum-spacing * 4)) auto;
 48 | 		padding-bottom: ($forum-spacing * 2);
 49 | 	}
 50 | 
 51 | 	&-media {
 52 | 		margin: ($forum-spacing * 2);
 53 | 	}
 54 | 
 55 | 	&-media-icon {
 56 | 		color: $forum-media-color;
 57 | 		width: $forum-media-size;
 58 | 		height: $forum-media-size;
 59 | 
 60 | 		&-read {
 61 | 			color: $forum-media-read-color;
 62 | 			width: $forum-media-size;
 63 | 			height: $forum-media-size;
 64 | 		}
 65 | 	}
 66 | 
 67 | 	&-info {
 68 | 		margin-right: ($forum-spacing * 2);
 69 | 	}
 70 | 
 71 | 	&-title {
 72 | 		@include type(headline5, $lh: 1);
 73 | 		margin-top: ($forum-spacing * 3);
 74 | 		margin-bottom: ($forum-spacing * 1.5);
 75 | 
 76 | 		&-link {
 77 | 			line-height: 1;
 78 | 		}
 79 | 
 80 | 		&-icon {
 81 | 			color: $forum-title-icon-color;
 82 | 			margin-top: $forum-title-icon-alignment;
 83 | 		}
 84 | 
 85 | 		@media (min-width: $lg) {
 86 | 			margin-bottom: 0;
 87 | 		}
 88 | 	}
 89 | 
 90 | 	&-text {
 91 | 		@include type(body2);
 92 | 		color: $forum-text-color;
 93 | 		margin: $forum-spacing 0 0;
 94 | 	}
 95 | 
 96 | 	&-footer {
 97 | 		border-radius: 0 0 $forum-border-radius $forum-border-radius;
 98 | 
 99 | 		&-item {
100 | 			position: relative;
101 | 		}
102 | 	}
103 | 
104 | 	&-cat {
105 | 		&-header {
106 | 			background-color: transparent;
107 | 			border-bottom: $forum-border-size $forum-border-style $forum-border-color;
108 | 			margin-top: ($forum-spacing * 2);
109 | 			margin-bottom: ($forum-spacing * 3);
110 | 
111 | 			&-title {
112 | 				@include type(headline5);
113 | 			}
114 | 
115 | 			&-action {
116 | 				&:focus {
117 | 					background-color: transparent;
118 | 					color: $forum-action-color;
119 | 				}
120 | 
121 | 				&-icon {
122 | 					transition: 0.35s ease-in-out;
123 | 				}
124 | 
125 | 				&.is-collapsed .c-forum-cat-header-action-icon {
126 | 					transition: 0.35s ease-in-out;
127 | 					transform: rotate(180deg);
128 | 				}
129 | 			}
130 | 		}
131 | 	}
132 | 
133 | 	&-deck {
134 | 		display: block;
135 | 		transition: 0.35s ease-in-out;
136 | 		transform-origin: center top;
137 | 
138 | 		&.is-collapsed {
139 | 			display: none;
140 | 			transition: 0.35s ease-in-out;
141 | 			transform: scaleY(0);
142 | 		}
143 | 	}
144 | 
145 | 	@media (min-width: $lg) {
146 | 		&-deck {
147 | 			display: grid;
148 | 			grid-column-gap: 1rem;
149 | 			grid-template-columns: 1fr 1fr;
150 | 		}
151 | 	}
152 | }
153 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 | 	"name": "chameleon",
  3 | 	"version": "0.3.0",
  4 | 	"description": "The default theme for phpbb",
  5 | 	"main": "gulpfile.js",
  6 | 	"eslintConfig": {
  7 | 		"extends": "xo",
  8 | 		"ignores": [
  9 | 			"all/js/_*.js"
 10 | 		],
 11 | 		"rules": {
 12 | 			"quotes": [
 13 | 				"error",
 14 | 				"single"
 15 | 			],
 16 | 			"comma-dangle": [
 17 | 				"error",
 18 | 				"always-multiline"
 19 | 			],
 20 | 			"max-params": [
 21 | 				"error",
 22 | 				6
 23 | 			],
 24 | 			"block-spacing": "error",
 25 | 			"array-bracket-spacing": [
 26 | 				"error",
 27 | 				"always"
 28 | 			],
 29 | 			"multiline-comment-style": "off",
 30 | 			"computed-property-spacing": "off",
 31 | 			"space-in-parens": "off",
 32 | 			"capitalized-comments": "off",
 33 | 			"object-curly-spacing": [
 34 | 				"error",
 35 | 				"always"
 36 | 			],
 37 | 			"no-lonely-if": "off",
 38 | 			"unicorn/prefer-module": "off",
 39 | 			"space-before-function-paren": [
 40 | 				"error",
 41 | 				"never"
 42 | 			]
 43 | 		},
 44 | 		"env": {
 45 | 			"es6": true,
 46 | 			"browser": true,
 47 | 			"node": true,
 48 | 			"jquery": true
 49 | 		}
 50 | 	},
 51 | 	"browserslist": [
 52 | 		"> 1%",
 53 | 		"not ie 11",
 54 | 		"not samsung 10.1",
 55 | 		"not and_uc 12.12",
 56 | 		"not op_mini all",
 57 | 		"edge >= 18",
 58 | 		"ff >= 72",
 59 | 		"chrome >= 79",
 60 | 		"safari >= 13",
 61 | 		"ios >= 12.4"
 62 | 	],
 63 | 	"scripts": {
 64 | 		"css-compile": "sass --style expanded --source-map --embed-sources --no-error-css all/scss/:all/css/",
 65 | 		"css-postcss": "postcss --config build/postcss.config.js --replace \"all/css/*.css\" \"!all/css/*.min*\" \"!all/css/*.css.map\"",
 66 | 		"css-fix": "stylelint --fix \"all/css/*.css\" \"!all/css/*.min.css\" \"!all/css/*.css.map\" --cache --cache-location .cache/.stylelintcsscache",
 67 | 		"css-minify": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output all/css/ --batch --batch-suffix \".min\" \"all/css/*.css\" \"!all/css/*.min.css\" \"!all/css/*.css.map\"",
 68 | 		"html-fix": "js-beautify --html --replace -t -n -p -m 10 -I -b \"collapse\" -S \"normal\" -w 0 -A \"auto\" -i 1 --templating \"django\" tests/views/*.html",
 69 | 		"lint-html": "htmlhint --config .htmlhintrc tests/",
 70 | 		"lint-js": "eslint --cache --cache-location .cache/.eslintcache --report-unused-disable-directives .",
 71 | 		"lint-scss": "stylelint \"all/scss/**/*.scss\" --config \".stylelintrc\" --cache --cache-location .cache/.stylelintscsscache",
 72 | 		"css": "npm-run-all --continue-on-error css-compile css-postcss css-fix css-minify",
 73 | 		"lint": "npm-run-all --parallel lint-*",
 74 | 		"build": "npm-run-all --parallel css",
 75 | 		"watch": "npm-run-all --parallel watch-*",
 76 | 		"watch-css": "nodemon --watch all/scss/ --ext scss --exec \"npm-run-all --continue-on-error css-compile css-postcss css-fix css-minify\""
 77 | 	},
 78 | 	"repository": {
 79 | 		"type": "git",
 80 | 		"url": "git+https://github.com/phpbb/chameleon.git"
 81 | 	},
 82 | 	"author": "Michael Miday (Hanakin)",
 83 | 	"license": "MIT",
 84 | 	"bugs": {
 85 | 		"url": "https://github.com/phpbb/chameleon/issues"
 86 | 	},
 87 | 	"homepage": "https://github.com/phpbb/chameleon#readme",
 88 | 	"devDependencies": {
 89 | 		"autoprefixer": "^10.4.4",
 90 | 		"clean-css-cli": "^5.6.0",
 91 | 		"compression": "^1.7.4",
 92 | 		"del": "^6.0.0",
 93 | 		"eslint": "^8.12.0",
 94 | 		"eslint-config-xo": "^0.40.0",
 95 | 		"express": "^4.18.1",
 96 | 		"gulp": "^4.0.2",
 97 | 		"gulp-beautify": "^3.0.0",
 98 | 		"gulp-data": "^1.3.1",
 99 | 		"gulp-merge-json": "^2.1.2",
100 | 		"gulp-nunjucks-render": "^2.2.3",
101 | 		"gulp-rename": "^2.0.0",
102 | 		"htmlhint": "^1.1.3",
103 | 		"js-beautify": "^1.14.2",
104 | 		"moment": "^2.29.3",
105 | 		"nodemon": "^1.3.3",
106 | 		"npm-run-all": "^4.1.5",
107 | 		"postcss": "^8.4.12",
108 | 		"postcss-cli": "^9.1.0",
109 | 		"postcss-pxtorem": "^6.0.0",
110 | 		"postcss-sorting": "^7.0.1",
111 | 		"sass": "^1.50.0",
112 | 		"stylelint": "^14.6.1",
113 | 		"stylelint-config-standard-scss": "^3.0.0",
114 | 		"stylelint-order": "^5.0.0",
115 | 		"stylelint-scss": "^4.2.0",
116 | 		"webpack": "^5.73.0"
117 | 	}
118 | }
119 | 


--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | const fs = require('fs');
  4 | const gulp = require('gulp');
  5 | const moment = require('moment');
  6 | const nunjucks = require('gulp-nunjucks-render');
  7 | const rename = require('gulp-rename');
  8 | const merge = require('gulp-merge-json');
  9 | const pkg = require('./package.json');
 10 | 
 11 | // Config
 12 | 
 13 | const paths = {
 14 | 	data: {
 15 | 		src: './tests/mock/*.json',
 16 | 		db: './tests/mock/db/db.json',
 17 | 		dest: './tests/mock/db/',
 18 | 	},
 19 | 	twig: {
 20 | 		src: './all/views/*.twig',
 21 | 		all: './all/views/**/*.twig',
 22 | 		views: './all/views/',
 23 | 		dest: './tests/views/',
 24 | 	},
 25 | 	theme: '',
 26 | };
 27 | 
 28 | if (paths.theme) {
 29 | 	paths.twig.dest = './' + paths.theme + '/views';
 30 | }
 31 | 
 32 | const manageEnvironment = function(environment) {
 33 | 	environment.addFilter('moment', (date, format, fromNow) => {
 34 | 		if (fromNow) {
 35 | 			date = moment(date, format).fromNow();
 36 | 		} else {
 37 | 			date = moment(date, format);
 38 | 		}
 39 | 
 40 | 		return date;
 41 | 	});
 42 | 
 43 | 	environment.addFilter('numFormatter', number => {
 44 | 		const SI_SYMBOL = [ '', 'k', 'M', 'G', 'T', 'P', 'E' ];
 45 | 
 46 | 		// what tier? (determines SI symbol)
 47 | 		const tier = Math.log10(number) / 3 | 0;
 48 | 
 49 | 		if (tier === 0) {
 50 | 			return number;
 51 | 		}
 52 | 
 53 | 		const suffix = SI_SYMBOL[tier];
 54 | 		const scale = 10 ** (tier * 3);
 55 | 		const scaled = number / scale;
 56 | 
 57 | 		return scaled.toFixed(1) + suffix;
 58 | 	});
 59 | 
 60 | 	environment.addFilter('icon', (icon, type, classlist, hidden = false, title = '', viewbox = '0 0 24 24' ) => {
 61 | 		let source = '';
 62 | 		let html;
 63 | 		hidden = hidden ? hidden = 'true' : hidden = 'false';
 64 | 		type = type.toLowerCase();
 65 | 		if (type === 'svg') {
 66 | 			title = title === '' ? '' : 'alt="' + title + '" ';
 67 | 		} else {
 68 | 			title = title === '' ? '' : 'title="' + title + '" ';
 69 | 		}
 70 | 		// $icon = icon.isArray() ? $this->get_first_icon($icon) : $icon;
 71 | 
 72 | 		if (icon === '')		{
 73 | 			return '';
 74 | 		}
 75 | 
 76 | 		if (type === 'iconify') {
 77 | 			source = icon.split(':');
 78 | 			source = source[0];
 79 | 			html = `<span class="iconify o-icon o-icon-src-${source} ${classlist}" ${title} data-icon="${icon}" data-inline="false" aria-hidden="${hidden}"></span>`;
 80 | 		} else if (type === 'inline') {
 81 | 			let item = {};
 82 | 			let db = JSON.parse(fs.readFileSync(paths.data.db));
 83 | 			for (item in db.icons) {
 84 | 				if (db.icons[item].name) {
 85 | 					item = db.icons[item];
 86 | 					if (item.name === icon) {
 87 | 						html = `
 88 | 							<svg class="${classlist}" viewBox="${viewbox}" xmlns="http://www.w3.org/2000/svg" aria-hidden="${hidden}" role="img">
 89 | 								<path fill-rule="evenodd" d="${item.path}" />
 90 | 							</svg>`;
 91 | 					}
 92 | 				}
 93 | 			}
 94 | 		} else if (type === 'svg') {
 95 | 			html = `<img class="o-icon o-icon-svg ${classlist}" ${title}src="../svg/${icon}.svg" aria-hidden="${hidden}">`;
 96 | 		}
 97 | 
 98 | 		return html;
 99 | 	});
100 | };
101 | 
102 | function data() {
103 | 	return gulp.src(paths.data.src)
104 | 		.pipe(merge({
105 | 			fileName: 'db.json',
106 | 			edit: (parsedJson, file) => {
107 | 				parsedJson.version = pkg.version;
108 | 				return parsedJson;
109 | 			},
110 | 		}))
111 | 		.pipe(gulp.dest(paths.data.dest));
112 | 
113 | 	let db = JSON.parse(fs.readFileSync(paths.data.db));
114 | 	db.version = pkg.version;
115 | }
116 | 
117 | function twig() {
118 | 	let db = JSON.parse(fs.readFileSync(paths.data.db));
119 | 
120 | 	return gulp.src(paths.twig.src)
121 | 		.pipe(nunjucks({
122 | 			data: db,
123 | 			path: [ paths.twig.views ],
124 | 			manageEnv: manageEnvironment,
125 | 			autoescape: false,
126 | 		}))
127 | 		/* eslint-enable camelcase */
128 | 		.pipe(rename({
129 | 			extname: '.html',
130 | 		}))
131 | 		.pipe(gulp.dest(paths.twig.dest));
132 | }
133 | 
134 | function watchAll() {
135 | 	gulp.watch(paths.twig.all, gulp.series(twig));
136 | 	gulp.watch(paths.data.src, gulp.series(data, twig));
137 | }
138 | 
139 | 
140 | exports.data = data;
141 | exports.twig = twig;
142 | exports.serve = watchAll;
143 | 
144 | exports.default = gulp.series(data, twig, watchAll);
145 | 


--------------------------------------------------------------------------------
/all/scss/components/_tab.scss:
--------------------------------------------------------------------------------
  1 | //------------------------------------------------------------------------------
  2 | // @Component: Tab
  3 | //------------------------------------------------------------------------------
  4 | // @author: hanakin -- midaym
  5 | // @version: 0.3.0
  6 | // @description
  7 | //
  8 | //------------------------------------------------------------------------------
  9 | 
 10 | @use 'sass:math';
 11 | 
 12 | //
 13 | // @settings
 14 | 
 15 | // Layout Variables
 16 | $tab-spacing: $default-spacing !default;
 17 | $tab-height: 72px !default;
 18 | $tab-width: 160px !default;
 19 | $tab-border-radius: $default-border-radius !default;
 20 | $tab-border-height: $default-border-size !default;
 21 | $tab-icon-size: $default-icon-md !default;
 22 | 
 23 | 
 24 | // Theme Variables
 25 | $tab-footer-bg-color: $default-surface-color !default;
 26 | $tab-pane-bg-color: $default-background-color !default;
 27 | $tab-text-color: $default-surface-item-color !default;
 28 | $tab-icon-color: $default-surface-item-color !default;
 29 | $tab-icon-hover-color: $default-action-color-hover !default;
 30 | $tab-border-type: solid !default;
 31 | $tab-border-color: $default-border-color !default;
 32 | $tab-border: $tab-border-height $tab-border-type $tab-border-color !default;
 33 | 
 34 | 
 35 | //
 36 | // @scss
 37 | .c-tab {
 38 | 	@include type(body1);
 39 | 	text-align: center;
 40 | 	vertical-align: middle;
 41 | 	white-space: nowrap;
 42 | 	text-transform: uppercase;
 43 | 	background-color: transparent;
 44 | 	color: $tab-text-color;
 45 | 	position: relative;
 46 | 	display: table-cell;
 47 | 	overflow: hidden;
 48 | 	min-width: $tab-width;
 49 | 	height: $tab-height;
 50 | 	margin: 0 $tab-border-height;
 51 | 	padding: 0 ($tab-spacing * 1.5);
 52 | 	transition: color 0.25s;
 53 | 
 54 | 	&:after {
 55 | 		background-color: $tab-icon-hover-color;
 56 | 		position: absolute;
 57 | 		bottom: -$tab-border-height;
 58 | 		left: 0;
 59 | 		width: 0;
 60 | 		height: math.div($tab-spacing, 2);
 61 | 		content: '';
 62 | 		transition:
 63 | 			background-color 0s ease-in 0.5s,
 64 | 			width 0.15s ease-in 0.25s;
 65 | 	}
 66 | 
 67 | 	&:hover,
 68 | 	&.is-active {
 69 | 		color: $tab-icon-hover-color;
 70 | 		transition: 0.5s;
 71 | 
 72 | 		&:after {
 73 | 			left: 0;
 74 | 			width: 100%;
 75 | 		}
 76 | 	}
 77 | 
 78 | 	&-icon {
 79 | 		text-align: center;
 80 | 		display: block;
 81 | 		width: $tab-icon-size;
 82 | 		height: $tab-icon-size;
 83 | 		margin: 0 auto;
 84 | 		margin-top: math.div($tab-spacing, 2);
 85 | 	}
 86 | 
 87 | 	&-icon + &-text {
 88 | 		padding-top: ($tab-spacing * 0.75);
 89 | 	}
 90 | 
 91 | 	&-card {
 92 | 		@include shadow(2);
 93 | 		background-color: $tab-pane-bg-color;
 94 | 		border-radius: $tab-border-radius;
 95 | 	}
 96 | 
 97 | 	&-bar {
 98 | 		border-bottom: 0;
 99 | 		position: relative;
100 | 		display: table;
101 | 
102 | 		&-frame {
103 | 			@include parent();
104 | 			@include child();
105 | 			border-bottom: $tab-border;
106 | 			position: relative;
107 | 			overflow-x: scroll;
108 | 			justify-content: flex-start;
109 | 
110 | 			&::-webkit-scrollbar {
111 | 				display: none;
112 | 			}
113 | 		}
114 | 	}
115 | 
116 | 	&-pane {
117 | 		@include parent(column);
118 | 		display: none;
119 | 		margin: 0;
120 | 
121 | 		&.is-active {
122 | 			display: block;
123 | 		}
124 | 
125 | 		&-row {
126 | 			@include child();
127 | 			@include parent(column);
128 | 			@media (min-width: $lg) {
129 | 				flex-direction: row;
130 | 			}
131 | 		}
132 | 
133 | 		&-title {
134 | 			@include type(headline6, $lh: 1);
135 | 			flex-shrink: 1;
136 | 			margin-bottom: 0;
137 | 			padding: ($tab-spacing * 2) 0 0 ($tab-spacing * 2);
138 | 			@media (min-width: $lg) {
139 | 				padding-bottom: ($tab-spacing * 2);
140 | 			}
141 | 		}
142 | 
143 | 		&-text {
144 | 			@include child();
145 | 			padding: ($tab-spacing * 2);
146 | 		}
147 | 
148 | 		&-link {
149 | 			display: inline-block;
150 | 
151 | 			&:hover {
152 | 				text-decoration: underline;
153 | 				transition: 0.5s;
154 | 			}
155 | 		}
156 | 
157 | 		&-row + &-row &-stats {
158 | 			padding-top: 0;
159 | 		}
160 | 
161 | 		&-footer {
162 | 			@include parent();
163 | 			@include border-radius(bottom, $tab-border-radius);
164 | 			background-color: $tab-footer-bg-color;
165 | 			border-top: $tab-border;
166 | 		}
167 | 	}
168 | }
169 | 


--------------------------------------------------------------------------------
/all/scss/settings/_default.scss:
--------------------------------------------------------------------------------
  1 | //------------------------------------------------------------------------------
  2 | // @setting: Default
  3 | //------------------------------------------------------------------------------
  4 | // @author: hanakin -- midaym
  5 | // @version: 1.0.3
  6 | // @description
  7 | //
  8 | //------------------------------------------------------------------------------
  9 | 
 10 | //
 11 | // @settings
 12 | 
 13 | $default-font-size: 16px !default;
 14 | $default-line-height: 24px !default;
 15 | 
 16 | $default-border-size: 1px !default;
 17 | $default-border-radius: 2px !default;
 18 | 
 19 | $default-grid-gutter: 16px !default;
 20 | $default-grid-gutter-sm: 12px !default;
 21 | 
 22 | // Grid Breakpoints
 23 | $xxs: 360px !default;
 24 | $xs: 411px !default;
 25 | $sm: 540px !default;
 26 | $md: 770px !default;
 27 | $lg: 960px !default;
 28 | $xl: 1140px !default;
 29 | 
 30 | // Spacing
 31 | $default-spacing: 8px !default;
 32 | 
 33 | $sp1: $default-spacing; // (1) 8px
 34 | $sp1-4: ($sp1 * 0.25); // (1/4) 2px
 35 | $sp1-2: ($sp1 * 0.5); // (1/2) 4px
 36 | $sp2: ($sp1 * 2); // (2) 16px
 37 | $sp3: ($sp1 * 3); // (3) 24px
 38 | $sp4: ($sp1 * 4); // (4) 32px
 39 | $sp5: ($sp1 * 5); // (5) 40px
 40 | $sp6: ($sp1 * 6); // (6) 48px
 41 | $sp7: ($sp1 * 7); // (7) 56px
 42 | $sp8: ($sp1 * 8); // (8) 64px
 43 | $sp9: ($sp1 * 9); // (9) 72px
 44 | 
 45 | // Object heights
 46 | $default-height: 56px !default;
 47 | $default-height-dense: 32px !default;
 48 | 
 49 | // icons
 50 | $default-icon-sm: 16px !default;
 51 | $default-icon-md: 24px !default;
 52 | $default-icon-lg: 40px !default;
 53 | 
 54 | // Fonts
 55 | $default-font: Roboto, Helvetica, Arial, sans-serif !default;
 56 | $default-code-font: Monaco, Andale Mono, Courier New, Courier, Mono !default;
 57 | 
 58 | // opacity
 59 | $default-opacity: 1 !default;
 60 | $default-opacity-87: 0.87 !default;
 61 | $default-opacity-54: 0.54 !default;
 62 | $default-opacity-38: 0.38 !default;
 63 | $default-opacity-12: 0.12 !default;
 64 | 
 65 | // Map light/dark colors
 66 | @function mode($arr: 'background', $key: 'light', $variant: 'color') {
 67 | 	$map: map-get($defaults, $arr);
 68 | 	$map: map-get($map, $key);
 69 | 	@return map-get($map, $variant);
 70 | }
 71 | 
 72 | // color scheme Light/Dark prestaged
 73 | $default-background-color:                 null;
 74 | $default-background-alt-color:             null;
 75 | $default-background-item-color:            null;
 76 | $default-surface-color:                    null;
 77 | $default-surface-hover-color:              null;
 78 | $default-surface-alt-color:                null;
 79 | $default-surface-alt-hover-color:          null;
 80 | $default-surface-item-color:               null;
 81 | $default-border-color:                     null;
 82 | $default-border-hover-color:               null;
 83 | $default-page-color:                   	   null;
 84 | 
 85 | $default-background-color-inverted:        null;
 86 | $default-background-alt-color-inverted:    null;
 87 | $default-background-item-color-inverted:   null;
 88 | $default-surface-color-inverted:           null;
 89 | $default-surface-hover-color-inverted:     null;
 90 | $default-surface-alt-color-inverted:       null;
 91 | $default-surface-alt-hover-color-inverted: null;
 92 | $default-surface-item-color-inverted:      null;
 93 | $default-border-color-inverted:            null;
 94 | $default-border-hover-color-inverted:      null;
 95 | 
 96 | // color scheme Light/Dark variables
 97 | $defaults: (
 98 | 	'background': (
 99 | 		'dark': (
100 | 			'color': $gray-1300,
101 | 			'alt': $gray-1100,
102 | 			'item': $gray-50
103 | 		),
104 | 		'light': (
105 | 			'color': $gray-50,
106 | 			'alt': $gray-400,
107 | 			'item':  $gray-1300
108 | 		)
109 | 	),
110 | 	'surface': (
111 | 		'dark': (
112 | 			'color': $gray-1200,
113 | 			'color-hover': $gray-1100,
114 | 			'alt': $gray-1000,
115 | 			'alt-hover': $gray-900,
116 | 			'item': $gray-900
117 | 		),
118 | 		'light': (
119 | 			'color': $gray-100,
120 | 			'color-hover': $gray-200,
121 | 			'alt': $gray-300,
122 | 			'alt-hover': $gray-200,
123 | 			'item': $gray-600
124 | 		)
125 | 	),
126 | 	'border': (
127 | 		'dark': (
128 | 			'color': $gray-1000,
129 | 			'color-hover': $gray-1000
130 | 		),
131 | 		'light': (
132 | 			'color': $gray-500,
133 | 			'color-hover': $gray-500
134 | 		)
135 | 	)
136 | );
137 | 


--------------------------------------------------------------------------------
/all/scss/tools/mixin/_shadows.scss:
--------------------------------------------------------------------------------
  1 | //------------------------------------------------------------------------------
  2 | // @tool: Shadows
  3 | //------------------------------------------------------------------------------
  4 | // @author: hanakin -- midaym
  5 | // @version: 1.1.0
  6 | // @description
  7 | //
  8 | // Mixin for generating Google Material Design shadows
  9 | //
 10 | //------------------------------------------------------------------------------
 11 | 
 12 | //
 13 | // @settings
 14 | $shadow-color: $black;
 15 | $shadow-umbra-opacity: 0.2 !default;
 16 | $shadow-penumbra-opacity: 0.14 !default;
 17 | $shadow-ambient-opacity: 0.12 !default;
 18 | 
 19 | // The css property used for elevation. In most cases this should not be changed. It is exposed
 20 | // as a variable for abstraction for easy use when needing to reference the property directly, for
 21 | // example in a `will-change` rule.
 22 | $shadow-elevation-property: box-shadow !default;
 23 | 
 24 | // The default duration value for elevation transitions.
 25 | $shadow-duration: 280ms !default;
 26 | 
 27 | // The default easing value for elevation transitions.
 28 | $shadow-easing: cubic-bezier(0.4, 0, 0.2, 1) !default;
 29 | 
 30 | $shadow-umbra-elevation: (
 31 | 	0: '0px 0px 0px 0px',
 32 | 	1: '0px 2px 1px -1px',
 33 | 	2: '0px 3px 1px -2px',
 34 | 	3: '0px 3px 3px -2px',
 35 | 	4: '0px 2px 4px -1px',
 36 | 	5: '0px 3px 5px -1px',
 37 | 	6: '0px 3px 5px -1px',
 38 | 	7: '0px 4px 5px -2px',
 39 | 	8: '0px 5px 5px -3px',
 40 | 	9: '0px 5px 6px -3px',
 41 | 	10: '0px 6px 6px -3px',
 42 | 	11: '0px 6px 7px -4px',
 43 | 	12: '0px 7px 8px -4px',
 44 | 	13: '0px 7px 8px -4px',
 45 | 	14: '0px 7px 9px -4px',
 46 | 	15: '0px 8px 9px -5px',
 47 | 	16: '0px 8px 10px -5px',
 48 | 	17: '0px 8px 11px -5px',
 49 | 	18: '0px 9px 11px -5px',
 50 | 	19: '0px 9px 12px -6px',
 51 | 	20: '0px 10px 13px -6px',
 52 | 	21: '0px 10px 13px -6px',
 53 | 	22: '0px 10px 14px -6px',
 54 | 	23: '0px 11px 14px -7px',
 55 | 	24: '0px 11px 15px -7px'
 56 | );
 57 | 
 58 | $shadow-penumbra-elevation: (
 59 | 	0: '0px 0px 0px 0px',
 60 | 	1: '0px 1px 1px 0px',
 61 | 	2: '0px 2px 2px 0px',
 62 | 	3: '0px 3px 4px 0px',
 63 | 	4: '0px 4px 5px 0px',
 64 | 	5: '0px 5px 8px 0px',
 65 | 	6: '0px 6px 10px 0px',
 66 | 	7: '0px 7px 10px 1px',
 67 | 	8: '0px 8px 10px 1px',
 68 | 	9: '0px 9px 12px 1px',
 69 | 	10: '0px 10px 14px 1px',
 70 | 	11: '0px 11px 15px 1px',
 71 | 	12: '0px 12px 17px 2px',
 72 | 	13: '0px 13px 19px 2px',
 73 | 	14: '0px 14px 21px 2px',
 74 | 	15: '0px 15px 22px 2px',
 75 | 	16: '0px 16px 24px 2px',
 76 | 	17: '0px 17px 26px 2px',
 77 | 	18: '0px 18px 28px 2px',
 78 | 	19: '0px 19px 29px 2px',
 79 | 	20: '0px 20px 31px 3px',
 80 | 	21: '0px 21px 33px 3px',
 81 | 	22: '0px 22px 35px 3px',
 82 | 	23: '0px 23px 36px 3px',
 83 | 	24: '0px 24px 38px 3px'
 84 | );
 85 | 
 86 | $shadow-ambient-elevation: (
 87 | 	0: '0px 0px 0px 0px',
 88 | 	1: '0px 1px 3px 0px',
 89 | 	2: '0px 1px 5px 0px',
 90 | 	3: '0px 1px 8px 0px',
 91 | 	4: '0px 1px 10px 0px',
 92 | 	5: '0px 1px 14px 0px',
 93 | 	6: '0px 1px 18px 0px',
 94 | 	7: '0px 2px 16px 1px',
 95 | 	8: '0px 3px 14px 2px',
 96 | 	9: '0px 3px 16px 2px',
 97 | 	10: '0px 4px 18px 3px',
 98 | 	11: '0px 4px 20px 3px',
 99 | 	12: '0px 5px 22px 4px',
100 | 	13: '0px 5px 24px 4px',
101 | 	14: '0px 5px 26px 4px',
102 | 	15: '0px 6px 28px 5px',
103 | 	16: '0px 6px 30px 5px',
104 | 	17: '0px 6px 32px 5px',
105 | 	18: '0px 7px 34px 6px',
106 | 	19: '0px 7px 36px 6px',
107 | 	20: '0px 8px 38px 7px',
108 | 	21: '0px 8px 40px 7px',
109 | 	22: '0px 8px 42px 7px',
110 | 	23: '0px 9px 44px 8px',
111 | 	24: '0px 9px 46px 8px'
112 | );
113 | 
114 | 
115 | //
116 | // @scss
117 | @mixin shadow($depth, $change: false) {
118 | 	$shadow-umbra-depth: map-get($shadow-umbra-elevation, $depth);
119 | 	$shadow-penumbra-depth: map-get($shadow-penumbra-elevation, $depth);
120 | 	$shadow-ambient-depth: map-get($shadow-ambient-elevation, $depth);
121 | 
122 | 	$shadow-umbra-color: rgba($shadow-color, $shadow-umbra-opacity);
123 | 	$shadow-penumbra-color: rgba($shadow-color, $shadow-penumbra-opacity);
124 | 	$shadow-ambient-color: rgba($shadow-color, $shadow-ambient-opacity);
125 | 
126 | 	// Focus Shadow
127 | 	box-shadow:
128 | 		#{'#{$shadow-umbra-depth} #{$shadow-umbra-color}'},
129 | 		#{'#{$shadow-penumbra-depth} #{$shadow-penumbra-color}'},
130 | 		#{'#{$shadow-ambient-depth} #{$shadow-ambient-color}'};
131 | 
132 | 	@if not ($change) {
133 | 		transition: #{$shadow-elevation-property} #{$shadow-duration} #{$shadow-easing};
134 | 		will-change: $shadow-elevation-property;
135 | 	}
136 | }
137 | 


--------------------------------------------------------------------------------
/all/views/includes/emoji-picker.twig:
--------------------------------------------------------------------------------
 1 | <div class="c-emoji-picker">
 2 | 	<div class="c-emoji-picker-header">
 3 | 		<div class="c-emoji-picker-search-wrap">
 4 | 			<div class="c-emoji-picker-search">
 5 | 				<input class="c-emoji-picker-search-field" type="text" spellcheck="false" placeholder=":innocent:" value="" data-emoji-filter="input">
 6 | 				<a class="c-emoji-picker-search-field-button" href="#recent" tabindex="0" role="button">
 7 | 					{{ 'mdi:search'|icon('iconify', 'o-icon c-emoji-picker-search-button-icon')|safe }}
 8 | 				</a>
 9 | 			</div>
10 | 		</div>
11 | 		<a class="c-emoji-picker-tone-button" href="#recent" tabindex="0" role="button" data-toggle="menu">
12 | 			{{ 'twemoji:ok-hand'|icon('iconify', 'o-icon c-emoji-picker-tone-button-icon')|safe }}
13 | 		</a>
14 | 		<div class="c-emoji-picker-tone-menu" data-container="menu">
15 | 			<a class="c-emoji-picker-tone-menu-item" href="#" data-emoji-append="">
16 | 				{{ 'twemoji:ok-hand'|icon('iconify', 'o-icon c-emoji-picker-tone-menu-item-icon')|safe }}
17 | 				<span class="c-emoji-picker-tone-menu-text u-sr-only">Neutral Skin Tone</span>
18 | 			</a>
19 | 			<a class="c-emoji-picker-tone-menu-item" href="#" data-emoji-append="light-skin-tone">
20 | 				{{ 'twemoji:ok-hand-light-skin-tone'|icon('iconify', 'o-icon c-emoji-picker-tone-menu-item-icon')|safe }}
21 | 				<span class="c-emoji-picker-tone-menu-text u-sr-only">Light Skin Tone</span>
22 | 			</a>
23 | 			<a class="c-emoji-picker-tone-menu-item" href="#" data-emoji-append="medium-light-skin-tone">
24 | 				{{ 'twemoji:ok-hand-medium-light-skin-tone'|icon('iconify', 'o-icon c-emoji-picker-tone-menu-item-icon')|safe }}
25 | 				<span class="c-emoji-picker-tone-menu-text u-sr-only">Medium Light Skin Tone</span>
26 | 			</a>
27 | 			<a class="c-emoji-picker-tone-menu-item" href="#" data-emoji-append="medium-skin-tone">
28 | 				{{ 'twemoji:ok-hand-medium-skin-tone'|icon('iconify', 'o-icon c-emoji-picker-tone-menu-item-icon')|safe }}
29 | 				<span class="c-emoji-picker-tone-menu-text u-sr-only">Medium Skin Tone</span>
30 | 			</a>
31 | 			<a class="c-emoji-picker-tone-menu-item" href="#" data-emoji-append="medium-dark-skin-tone">
32 | 				{{ 'twemoji:ok-hand-medium-dark-skin-tone'|icon('iconify', 'o-icon c-emoji-picker-tone-menu-item-icon')|safe }}
33 | 				<span class="c-emoji-picker-tone-menu-text u-sr-only">Medium Dark Skin Tone</span>
34 | 			</a>
35 | 			<a class="c-emoji-picker-tone-menu-item" href="#" data-emoji-append="dark-skin-tone">
36 | 				{{ 'twemoji:ok-hand-dark-skin-tone'|icon('iconify', 'o-icon c-emoji-picker-tone-menu-item-icon')|safe }}
37 | 				<span class="c-emoji-picker-tone-menu-text u-sr-only">Dark Skin Tone</span>
38 | 			</a>
39 | 		</div>
40 | 	</div>
41 | 	<div class="c-emoji-picker-body">
42 | 		<div class="c-emoji-picker-area">
43 | 			{% for item in emojis %}
44 | 				<h4 class="c-emoji-picker-area-title" id="{{ item.slug }}">{{ item.title }}</h4>
45 | 				<div class="c-emoji-picker-section">
46 | 					{% if item.slug == 'custom' %}
47 | 						{% for emoji in item.emojis %}
48 | 							<a class="c-emoji-picker-section-item" href="#" tabindex="0" role="button" data-emoji-preview="emoji" data-emoji-name=":{{ emoji.name | replace(' ','-') | replace(' ','-') | lower }}:" data-emoji-code="{{ emoji.code | replace(' ','-') | lower }}">
49 | 								{{ emoji.name |icon('svg', 'o-icon c-emoji-picker-section-item-icon')|safe }}
50 | 							</a>
51 | 						{% endfor %}
52 | 					{% else %}
53 | 						{% for emoji in item.emojis %}
54 | 							<a class="c-emoji-picker-section-item" href="#" tabindex="0" role="button" data-emoji-preview="emoji" data-emoji-name=":{{ emoji.name | replace(' ','-') | replace(' ','-') | lower }}:" data-emoji-code="{{ emoji.code | replace(' ','-') | lower }}">
55 | 								{{ ('twemoji:' + emoji.name) | replace(' ','-') | lower | icon('iconify', 'o-icon c-emoji-picker-section-item-icon') | safe }}
56 | 							</a>
57 | 						{% endfor %}
58 | 					{% endif %}
59 | 				</div>
60 | 			{% endfor %}
61 | 		</div>
62 | 	</div>
63 | 	<div class="c-emoji-picker-preview" data-emoji-preview="container">
64 | 		{{ 'twemoji:grinning-face'|icon('iconify', 'o-icon c-emoji-picker-preview-icon')|safe }}<span class="c-emoji-picker-preview-icon">:grinning-face:</span>
65 | 	</div>
66 | 	<nav class="c-emoji-picker-footer" data-toggle="tabs">
67 | 		{% for item in emojis %}
68 | 	<a class="c-emoji-picker-tab{% if loop.first %} is-active{% endif %}" href="#{{ item.slug }}" title="{{ item.title }}" role="tab" aria-controls="{{ item.slug }}">
69 | 				{{ item.icon|icon('iconify', 'o-icon c-emoji-picker-tab-icon')|safe }}
70 | 			</a>
71 | 		{% endfor %}
72 | 	</nav>
73 | </div>
74 | 


--------------------------------------------------------------------------------
/all/scss/components/_drawer.scss:
--------------------------------------------------------------------------------
  1 | //------------------------------------------------------------------------------
  2 | // @component: Drawers
  3 | //------------------------------------------------------------------------------
  4 | // @author: hanakin -- midaym
  5 | // @version: 0.3.0
  6 | // @description
  7 | //
  8 | //------------------------------------------------------------------------------
  9 | 
 10 | //
 11 | // @settings
 12 | 
 13 | // Layout Variables
 14 | $drawer-spacing: $default-spacing !default;
 15 | $drawer-bar-offset: 58px !default;
 16 | $drawer-width: 248px !default;
 17 | $drawer-border-height: $default-border-size;
 18 | 
 19 | 
 20 | // Theme Variables
 21 | $drawer-bg-color: $default-background-color !default;
 22 | $drawer-bg-hover-color: $default-surface-color !default;
 23 | $drawer-bg-sub-color: $default-surface-color !default;
 24 | $drawer-bg-sub-hover-color: $default-surface-hover-color !default;
 25 | $drawer-text-color: $default-action-color !default;
 26 | $drawer-text-hover-color: $default-action-color-hover !default;
 27 | $drawer-icon-color: $default-action-color !default;
 28 | $drawer-icon-hover-color: $default-action-color-hover !default;
 29 | $drawer-border-color: $default-border-color !default;
 30 | 
 31 | 
 32 | //
 33 | // @scss
 34 | .c-drawer {
 35 | 	@include shadow(2);
 36 | 	background-color: $drawer-bg-color;
 37 | 	border: none;
 38 | 	position: absolute;
 39 | 	z-index: 1000;
 40 | 	top: $drawer-bar-offset;
 41 | 	right: 0;
 42 | 	bottom: 0;
 43 | 	flex-shrink: 1;
 44 | 	align-self: auto;
 45 | 	height: 100%;
 46 | 	padding: 0;
 47 | 	transform: scaleX(0);
 48 | 	transform-origin: center right;
 49 | 
 50 | 	&:hover,
 51 | 	&.is-active {
 52 | 		transition: 0.35s ease-in-out;
 53 | 		transform: scaleX(1);
 54 | 
 55 | 		.c-drawer-link-text {
 56 | 			display: inline-block;
 57 | 			min-width: $drawer-width;
 58 | 		}
 59 | 
 60 | 		.c-drawer-user-name {
 61 | 			display: inline-block;
 62 | 		}
 63 | 	}
 64 | 
 65 | 	&-user {
 66 | 		@include type(body2);
 67 | 		border-bottom: $drawer-border-height solid $drawer-border-color;
 68 | 		color: $drawer-text-color;
 69 | 		margin-bottom: 0;
 70 | 		padding: ($drawer-spacing * 2);
 71 | 
 72 | 		&-name {
 73 | 			@include type(body1);
 74 | 			vertical-align: middle;
 75 | 			display: none;
 76 | 			margin-left: $drawer-spacing;
 77 | 			padding: 0 ($drawer-spacing * 2) 0 0;
 78 | 		}
 79 | 
 80 | 		&-title {
 81 | 			@include type(caption);
 82 | 			color: $drawer-text-color;
 83 | 			display: block;
 84 | 		}
 85 | 	}
 86 | 
 87 | 	&-menu {
 88 | 		border-top: $drawer-border-height solid $drawer-border-color;
 89 | 		border-bottom: $drawer-border-height solid $drawer-border-color;
 90 | 		display: none;
 91 | 		margin: 0;
 92 | 		padding: 0;
 93 | 		transition: 0.35s ease;
 94 | 		transform: scaleY(0);
 95 | 		transform-origin: top;
 96 | 
 97 | 		&.is-active {
 98 | 			display: block;
 99 | 			transform: scaleY(1);
100 | 		}
101 | 	}
102 | 
103 | 	&-divider {
104 | 		background-color: $drawer-border-color;
105 | 		height: $drawer-border-height;
106 | 	}
107 | 
108 | 	&-link {
109 | 		color: $drawer-text-color;
110 | 		position: relative;
111 | 		display: block;
112 | 		overflow: hidden;
113 | 		padding: ($drawer-spacing * 2) ($drawer-spacing * 2) ($drawer-spacing * 2) ($drawer-spacing * 3);
114 | 		cursor: pointer;
115 | 		transition:
116 | 			background-color 0.2s $default-animation-curve,
117 | 			color 0.2s $default-animation-curve;
118 | 		transform: translate3d(0, 0, 0);
119 | 
120 | 		&-icon {
121 | 			color: $drawer-icon-color;
122 | 			margin: 0;
123 | 		}
124 | 
125 | 		&-text {
126 | 			display: none;
127 | 			padding-left: $drawer-spacing;
128 | 		}
129 | 
130 | 		&:after {
131 | 			background-image: radial-gradient(circle, $black 10%, transparent 10.01%);
132 | 			background-repeat: no-repeat;
133 | 			background-position: 50%;
134 | 			opacity: 0;
135 | 			position: absolute;
136 | 			top: 0;
137 | 			left: 0;
138 | 			display: block;
139 | 			width: 100%;
140 | 			height: 100%;
141 | 			content: '';
142 | 			transition: transform 0.5s, opacity 1s;
143 | 			transform: scale(10, 10);
144 | 			pointer-events: none;
145 | 		}
146 | 
147 | 		&:active:after {
148 | 			opacity: 0.2;
149 | 			transition: 0s;
150 | 			transform: scale(0, 0);
151 | 		}
152 | 
153 | 		&:hover {
154 | 			background-color: $drawer-bg-hover-color;
155 | 
156 | 			.c-drawer-link-text {
157 | 				color: $drawer-text-hover-color;
158 | 			}
159 | 
160 | 			.c-drawer-link-icon {
161 | 				color: $drawer-icon-hover-color;
162 | 			}
163 | 		}
164 | 	}
165 | 
166 | 	&-menu &-link {
167 | 		background-color: $drawer-bg-sub-color;
168 | 
169 | 		&:hover,
170 | 		&:focus {
171 | 			background-color: $drawer-bg-sub-hover-color;
172 | 		}
173 | 	}
174 | }
175 | 


--------------------------------------------------------------------------------
/.postcss-sorting.json:
--------------------------------------------------------------------------------
  1 | {
  2 | 	"order": [
  3 | 		"custom-properties",
  4 | 		"dollar-variables",
  5 | 		{
  6 | 			"type": "at-rule",
  7 | 			"name": "include"
  8 | 		},
  9 | 		"declarations",
 10 | 		"rules",
 11 | 		{
 12 | 			"type": "at-rule",
 13 | 			"name": "media"
 14 | 		}
 15 | 	],
 16 | 	"properties-order": [
 17 | 		"font",
 18 | 		"font-family",
 19 | 		"font-size",
 20 | 		"font-weight",
 21 | 		"font-style",
 22 | 		"font-variant",
 23 | 		"font-size-adjust",
 24 | 		"font-stretch",
 25 | 		"font-effect",
 26 | 		"font-emphasize",
 27 | 		"font-emphasize-position",
 28 | 		"font-emphasize-style",
 29 | 		"font-smooth",
 30 | 		"font-smoothing",
 31 | 		"line-height",
 32 | 		"text-align",
 33 | 		"text-align-last",
 34 | 		"vertical-align",
 35 | 		"white-space",
 36 | 		"text-decoration",
 37 | 		"text-emphasis",
 38 | 		"text-emphasis-color",
 39 | 		"text-emphasis-style",
 40 | 		"text-emphasis-position",
 41 | 		"text-indent",
 42 | 		"text-justify",
 43 | 		"letter-spacing",
 44 | 		"word-spacing",
 45 | 		"writing-mode",
 46 | 		"text-outline",
 47 | 		"text-transform",
 48 | 		"text-size-adjust",
 49 | 		"text-wrap",
 50 | 		"text-overflow",
 51 | 		"text-overflow-ellipsis",
 52 | 		"text-overflow-mode",
 53 | 		"word-wrap",
 54 | 		"word-break",
 55 | 		"tab-size",
 56 | 		"hyphens",
 57 | 
 58 | 		"background",
 59 | 		"background-color",
 60 | 		"background-image",
 61 | 		"background-repeat",
 62 | 		"background-attachment",
 63 | 		"background-position",
 64 | 		"background-position-x",
 65 | 		"background-position-y",
 66 | 		"background-clip",
 67 | 		"background-origin",
 68 | 		"background-size",
 69 | 		"interpolation-mode",
 70 | 		"filter",
 71 | 		"border",
 72 | 		"border-width",
 73 | 		"border-style",
 74 | 		"border-color",
 75 | 		"border-top",
 76 | 		"border-top-width",
 77 | 		"border-top-style",
 78 | 		"border-top-color",
 79 | 		"border-right",
 80 | 		"border-right-width",
 81 | 		"border-right-style",
 82 | 		"border-right-color",
 83 | 		"border-bottom",
 84 | 		"border-bottom-width",
 85 | 		"border-bottom-style",
 86 | 		"border-bottom-color",
 87 | 		"border-left",
 88 | 		"border-left-width",
 89 | 		"border-left-style",
 90 | 		"border-left-color",
 91 | 		"border-radius",
 92 | 		"border-top-left-radius",
 93 | 		"border-top-right-radius",
 94 | 		"border-bottom-right-radius",
 95 | 		"border-bottom-left-radius",
 96 | 		"border-image",
 97 | 		"border-image-source",
 98 | 		"border-image-slice",
 99 | 		"border-image-width",
100 | 		"border-image-outset",
101 | 		"border-image-repeat",
102 | 		"outline",
103 | 		"outline-width",
104 | 		"outline-style",
105 | 		"outline-color",
106 | 		"outline-offset",
107 | 		"tap-highlight-color",
108 | 
109 | 		"box-decoration-break",
110 | 		"box-shadow",
111 | 		"text-shadow",
112 | 
113 | 		"color",
114 | 		"opacity",
115 | 
116 | 		"position",
117 | 		"z-index",
118 | 		"top",
119 | 		"right",
120 | 		"bottom",
121 | 		"left",
122 | 
123 | 		"display",
124 | 		"visibility",
125 | 		"float",
126 | 		"clear",
127 | 		"overflow",
128 | 		"overflow-x",
129 | 		"overflow-y",
130 | 		"overflow-scrolling",
131 | 		"clip",
132 | 		"zoom",
133 | 		"flex",
134 | 		"flex-direction",
135 | 		"flex-order",
136 | 		"flex-pack",
137 | 		"flex-align",
138 | 		"flex-grow",
139 | 		"flex-shrink",
140 | 		"flex-basis",
141 | 		"flex-wrap",
142 | 		"justify-content",
143 | 		"align-items",
144 | 		"align-self",
145 | 
146 | 		"box-sizing",
147 | 		"width",
148 | 		"min-width",
149 | 		"max-width",
150 | 		"height",
151 | 		"min-height",
152 | 		"max-height",
153 | 		"margin",
154 | 		"margin-top",
155 | 		"margin-right",
156 | 		"margin-bottom",
157 | 		"margin-left",
158 | 		"padding",
159 | 		"padding-top",
160 | 		"padding-right",
161 | 		"padding-bottom",
162 | 		"padding-left",
163 | 
164 | 		"table-layout",
165 | 		"empty-cells",
166 | 		"caption-side",
167 | 		"border-spacing",
168 | 		"border-collapse",
169 | 		"list-style",
170 | 		"list-style-position",
171 | 		"list-style-type",
172 | 		"list-style-image",
173 | 
174 | 		"content",
175 | 		"quotes",
176 | 		"counter-reset",
177 | 		"counter-increment",
178 | 		"resize",
179 | 		"cursor",
180 | 		"touch-callout",
181 | 		"touch-action",
182 | 		"user-select",
183 | 		"nav-index",
184 | 		"nav-up",
185 | 		"nav-right",
186 | 		"nav-down",
187 | 		"nav-left",
188 | 		"transition",
189 | 		"transition-delay",
190 | 		"transition-timing-function",
191 | 		"transition-duration",
192 | 		"transition-property",
193 | 		"transform",
194 | 		"transform-origin",
195 | 		"animation",
196 | 		"animation-name",
197 | 		"animation-duration",
198 | 		"animation-play-state",
199 | 		"animation-timing-function",
200 | 		"animation-delay",
201 | 		"animation-iteration-count",
202 | 		"animation-direction",
203 | 		"pointer-events"
204 | 	],
205 | 	"unspecified-properties-position": "bottomAlphabetical"
206 | }
207 | 


--------------------------------------------------------------------------------
/all/scss/tools/mixin/_type.scss:
--------------------------------------------------------------------------------
  1 | //------------------------------------------------------------------------------
  2 | // @tool: Type
  3 | //------------------------------------------------------------------------------
  4 | // @author: hanakin -- midaym
  5 | // @version: 1.2.0
  6 | // @description
  7 | //
  8 | // A mixin for generating type settings based on Google Material Design types
  9 | //
 10 | //------------------------------------------------------------------------------
 11 | 
 12 | //@settings
 13 | $type-font-weight: (
 14 | 	light: 200,
 15 | 	regular: 400,
 16 | 	bold: 600
 17 | );
 18 | 
 19 | $type-styles: (
 20 | 	display1: (
 21 | 		font-size: 4rem, // 64px
 22 | 		line-height: unit-less(76, 64), // 76px
 23 | 		letter-spacing: letterspacing(-0.5, 4),
 24 | 		font-weight: map-get($type-font-weight, regular)
 25 | 	),
 26 | 	display2: (
 27 | 		font-size: 3.5625rem, // 57px
 28 | 		line-height: unit-less(64, 57), // 76px
 29 | 		letter-spacing: letterspacing(-0.25, 3.5625),
 30 | 		font-weight: map-get($type-font-weight, regular)
 31 | 	),
 32 | 	display3: (
 33 | 		font-size: 2.8125rem, // 45px
 34 | 		line-height: unit-less(52, 45), // 52px
 35 | 		letter-spacing: normal,
 36 | 		font-weight: map-get($type-font-weight, regular)
 37 | 	),
 38 | 	headline1: (
 39 | 		font-size: 2.25rem, // 36px
 40 | 		line-height: unit-less(44, 36), // 44px
 41 | 		letter-spacing: normal,
 42 | 		font-weight: map-get($type-font-weight, regular)
 43 | 	),
 44 | 	headline2: (
 45 | 		font-size: 2rem, // 32px
 46 | 		line-height: unit-less(40, 32), // 40px
 47 | 		letter-spacing: normal,
 48 | 		font-weight: map-get($type-font-weight, regular)
 49 | 	),
 50 | 	headline3: (
 51 | 		font-size: 1.75rem, // 28px
 52 | 		line-height: unit-less(36, 28),  // 36px
 53 | 		letter-spacing: normal,
 54 | 		font-weight: map-get($type-font-weight, regular)
 55 | 	),
 56 | 	headline4: (
 57 | 		font-size: 1.5rem, // 24px
 58 | 		line-height: unit-less(32, 24), // 32px
 59 | 		letter-spacing: normal,
 60 | 		font-weight: map-get($type-font-weight, regular)
 61 | 	),
 62 | 	headline5: (
 63 | 		font-size: 1.375rem, // 22px
 64 | 		line-height: unit-less(28, 22), // 28px
 65 | 		letter-spacing: normal,
 66 | 		font-weight: map-get($type-font-weight, regular)
 67 | 	),
 68 | 	headline6: (
 69 | 		font-size: 1.25rem, // 20px
 70 | 		line-height: unit-less(24, 20), // 24px
 71 | 		letter-spacing: letterspacing(0.15, 1.25),
 72 | 		font-weight: map-get($type-font-weight, regular)
 73 | 	),
 74 | 	subhead1: (
 75 | 		font-size: 1rem, // 16px
 76 | 		line-height: unit-less(20, 16), // 20px
 77 | 		letter-spacing: letterspacing(0.1, 1),
 78 | 		font-weight: map-get($type-font-weight, bold)
 79 | 	),
 80 | 	subhead2: (
 81 | 		font-size: 0.875rem, // 14px
 82 | 		line-height: unit-less(20, 14), // 20px
 83 | 		letter-spacing: letterspacing(0.1, 0.875),
 84 | 		font-weight: map-get($type-font-weight, bold)
 85 | 	),
 86 | 	body1: (
 87 | 		font-size: 1rem, // 16px
 88 | 		line-height: unit-less(24, 16), // 24px
 89 | 		letter-spacing: letterspacing(0.5, 1),
 90 | 		font-weight: map-get($type-font-weight, regular)
 91 | 	),
 92 | 	body2: (
 93 | 		font-size: 0.875rem, // 14px
 94 | 		line-height: unit-less(20, 14), // 20px
 95 | 		letter-spacing: letterspacing(0.25, 0.875),
 96 | 		font-weight: map-get($type-font-weight, regular)
 97 | 	),
 98 | 	button: (
 99 | 		font-size: 0.875rem, // 14px
100 | 		line-height: unit-less(20, 14), // 20px
101 | 		letter-spacing: letterspacing(0.1, 0.875),
102 | 		font-weight: map-get($type-font-weight, bold)
103 | 	),
104 | 	caption: (
105 | 		font-size: 0.75rem, // 12px
106 | 		line-height: unit-less(16, 12), // 16px
107 | 		letter-spacing: letterspacing(0.4, 0.75),
108 | 		font-weight: map-get($type-font-weight, regular)
109 | 	),
110 | 	overline: (
111 | 		font-size: 0.75rem, // 12px
112 | 		line-height: unit-less(16, 12), // 16px
113 | 		letter-spacing: letterspacing(0.5, 0.75),
114 | 		font-weight: map-get($type-font-weight, bold)
115 | 	),
116 | 	labelsmall: (
117 | 		font-size: 0.6875rem, // 12px
118 | 		line-height: unit-less(16, 11), // 16px
119 | 		letter-spacing: letterspacing(0.5, 0.6875),
120 | 		font-weight: map-get($type-font-weight, bold)
121 | 	)
122 | );
123 | 
124 | //
125 | // @scss
126 | @mixin type($type, $lh: false, $fw: false) {
127 | 	$type-props: map-get($type-styles, $type);
128 | 	font-size: map-get($type-props, font-size);
129 | 	letter-spacing: map-get($type-props, letter-spacing);
130 | 
131 | 	@if not map-has-key($type-styles, $type) {
132 | 		@error 'Invalid style specified! Choose one of #{map-keys($type-styles)}';
133 | 	}
134 | 
135 | 	@if $type == button {
136 | 		text-transform: uppercase;
137 | 	}
138 | 
139 | 	@if $type == overline {
140 | 		text-transform: uppercase;
141 | 	}
142 | 
143 | 	@if $fw {
144 | 		font-weight: $fw;
145 | 	} @else {
146 | 		font-weight: #{map-get($type-props, font-weight)};
147 | 	}
148 | 
149 | 	@if $lh {
150 | 		line-height: $lh;
151 | 	} @else {
152 | 		line-height: map-get($type-props, line-height);
153 | 	}
154 | }
155 | 


--------------------------------------------------------------------------------
/all/scss/theme.0.3.0.scss:
--------------------------------------------------------------------------------
  1 | //------------------------------------------------------------------------------
  2 | // @render: Base-L
  3 | //------------------------------------------------------------------------------
  4 | // @author: hanakin -- midaym
  5 | // @version: 0.3.0
  6 | // @description
  7 | //
  8 | //
  9 | // Base-L is a true core css framework.
 10 | //
 11 | // It follows the ITCSS structure coined by Harry Roberts of csswizardry.com
 12 | //
 13 | // Providing a strong foundation to add components and objects to. It provides
 14 | // true scalability and extendability while keeping maintainability and
 15 | // specificity in check.
 16 | //
 17 | // It provides a strict structure and guidelines for how your css is to be written
 18 | // to keep your projects in check as they grow and evolve.
 19 | //
 20 | // The framework was designed and developed along side the popular forum software
 21 | // PHPBB as its core template library. By providing the most common foundations
 22 | // in a higher layer we allow for better control and flexibility in component
 23 | // design and themeing while still balancing maintainability and specificity.
 24 | //
 25 | //
 26 | // The MIT License (MIT)
 27 | //
 28 | // Copyright (c) 2015 Michael Miday
 29 | //
 30 | // Permission is hereby granted, free of charge, to any person obtaining a copy
 31 | // of this software and associated documentation files (the 'Software'), to
 32 | // deal in the Software without restriction, including without limitation the
 33 | // rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
 34 | // sell copies of the Software, and to permit persons to whom the Software is
 35 | // furnished to do so, subject to the following conditions:
 36 | //
 37 | // The above copyright notice and this permission notice shall be included in
 38 | // all copies or substantial portions of the Software.
 39 | //
 40 | // THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 41 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 42 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 43 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 44 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 45 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 46 | // SOFTWARE.
 47 | //
 48 | 
 49 | //
 50 | // CONTENTS
 51 | //
 52 | // 1. Settings.....................The global settings only no object or
 53 | //                                 component settings. Those belong in the
 54 | //                                 individual partial files
 55 | //
 56 | // 2. Tools........................These are the mixins & functions used.
 57 | //
 58 | // 3. Generic......................This is for normalizing and resetting the css.
 59 | //
 60 | // 4. Base.........................This contains only the default html entity
 61 | //                                 styles, no classes or ids here.
 62 | //
 63 | // 5. Objects......................This contains all objects or partials to
 64 | //                                 build components.
 65 | //
 66 | // 6. Components...................Her is where you can build the component
 67 | //                                 library for your project.
 68 | //
 69 | // 7. Theme........................Here you can specify any theme alterations
 70 | //                                 to use with your objects & components.
 71 | //
 72 | // 8. Utilities....................This is where all your trumps or utility
 73 | //                                 classes go those that usually contain the
 74 | //                                 highest specificity.
 75 | //
 76 | 
 77 | 
 78 | // 1. Global Settings
 79 | //-------------------------
 80 | @import 'settings/color';
 81 | @import 'settings/default';
 82 | @import 'settings/light';
 83 | 
 84 | 
 85 | // 2. Tools
 86 | //-------------------------
 87 | @import 'tools/function/functions';
 88 | @import 'tools/mixin/mixins';
 89 | 
 90 | 
 91 | // 4. Base
 92 | //-------------------------
 93 | @import 'base/chameleon';
 94 | 
 95 | 
 96 | // 5. Objects
 97 | //-------------------------
 98 | @import 'objects/chameleon';
 99 | 
100 | 
101 | // 6. Components
102 | //-------------------------
103 | @import 'components/emoji';
104 | @import 'components/paging';
105 | @import 'components/jump';
106 | @import 'components/forum';
107 | @import 'components/topic';
108 | @import 'components/post';
109 | @import 'components/profile';
110 | @import 'components/menu';
111 | @import 'components/notification';
112 | @import 'components/drawer';
113 | @import 'components/tab';
114 | @import 'components/stat';
115 | @import 'components/crumbs';
116 | @import 'components/toolbar';
117 | @import 'components/tooltip';
118 | @import 'components/toast';
119 | @import 'components/hero';
120 | @import 'components/footer';
121 | @import 'components/warning';
122 | 
123 | 
124 | // 7. Theme
125 | @import 'theme/chameleon';
126 | 


--------------------------------------------------------------------------------
/all/scss/theme-dark.0.3.0.scss:
--------------------------------------------------------------------------------
  1 | //------------------------------------------------------------------------------
  2 | // @render: Base-L
  3 | //------------------------------------------------------------------------------
  4 | // @author: hanakin -- midaym
  5 | // @version: 0.3.0
  6 | // @description
  7 | //
  8 | //
  9 | // Base-L is a true core css framework.
 10 | //
 11 | // It follows the ITCSS structure coined by Harry Roberts of csswizardry.com
 12 | //
 13 | // Providing a strong foundation to add components and objects to. It provides
 14 | // true scalability and extendability while keeping maintainability and
 15 | // specificity in check.
 16 | //
 17 | // It provides a strict structure and guidelines for how your css is to be written
 18 | // to keep your projects in check as they grow and evolve.
 19 | //
 20 | // The framework was designed and developed along side the popular forum software
 21 | // PHPBB as its core template library. By providing the most common foundations
 22 | // in a higher layer we allow for better control and flexibility in component
 23 | // design and themeing while still balancing maintainability and specificity.
 24 | //
 25 | //
 26 | // The MIT License (MIT)
 27 | //
 28 | // Copyright (c) 2015 Michael Miday
 29 | //
 30 | // Permission is hereby granted, free of charge, to any person obtaining a copy
 31 | // of this software and associated documentation files (the 'Software'), to
 32 | // deal in the Software without restriction, including without limitation the
 33 | // rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
 34 | // sell copies of the Software, and to permit persons to whom the Software is
 35 | // furnished to do so, subject to the following conditions:
 36 | //
 37 | // The above copyright notice and this permission notice shall be included in
 38 | // all copies or substantial portions of the Software.
 39 | //
 40 | // THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 41 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 42 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 43 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 44 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 45 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 46 | // SOFTWARE.
 47 | //
 48 | 
 49 | //
 50 | // CONTENTS
 51 | //
 52 | // 1. Settings.....................The global settings only no object or
 53 | //                                 component settings. Those belong in the
 54 | //                                 individual partial files
 55 | //
 56 | // 2. Tools........................These are the mixins & functions used.
 57 | //
 58 | // 3. Generic......................This is for normalizing and resetting the css.
 59 | //
 60 | // 4. Base.........................This contains only the default html entity
 61 | //                                 styles, no classes or ids here.
 62 | //
 63 | // 5. Objects......................This contains all objects or partials to
 64 | //                                 build components.
 65 | //
 66 | // 6. Components...................Her is where you can build the component
 67 | //                                 library for your project.
 68 | //
 69 | // 7. Theme........................Here you can specify any theme alterations
 70 | //                                 to use with your objects & components.
 71 | //
 72 | // 8. Utilities....................This is where all your trumps or utility
 73 | //                                 classes go those that usually contain the
 74 | //                                 highest specificity.
 75 | //
 76 | 
 77 | 
 78 | // 1. Global Settings
 79 | //-------------------------
 80 | @import 'settings/color';
 81 | @import 'settings/default';
 82 | @import 'settings/dark';
 83 | 
 84 | 
 85 | // 2. Tools
 86 | //-------------------------
 87 | @import 'tools/function/functions';
 88 | @import 'tools/mixin/mixins';
 89 | 
 90 | 
 91 | // 4. Base
 92 | //-------------------------
 93 | @import 'base/chameleon';
 94 | 
 95 | 
 96 | // 5. Objects
 97 | //-------------------------
 98 | @import 'objects/chameleon';
 99 | 
100 | 
101 | // 6. Components
102 | //-------------------------
103 | @import 'components/emoji';
104 | @import 'components/paging';
105 | @import 'components/jump';
106 | @import 'components/forum';
107 | @import 'components/topic';
108 | @import 'components/post';
109 | @import 'components/profile';
110 | @import 'components/menu';
111 | @import 'components/notification';
112 | @import 'components/drawer';
113 | @import 'components/tab';
114 | @import 'components/stat';
115 | @import 'components/crumbs';
116 | @import 'components/toolbar';
117 | @import 'components/tooltip';
118 | @import 'components/toast';
119 | @import 'components/hero';
120 | @import 'components/footer';
121 | @import 'components/warning';
122 | 
123 | 
124 | // 7. Theme
125 | @import 'theme/chameleon';
126 | 


--------------------------------------------------------------------------------
/all/views/includes/topic.twig:
--------------------------------------------------------------------------------
 1 | <li class="o-list-item c-topic-item t-topic-item" role="row">
 2 | 	<span class="o-list-media">
 3 | 		{% if item.status == 1 %}
 4 | 			{% if item.type == 'sub' %}
 5 | 				{{ 'forum'|icon('inline', 'o-icon o-list-media-icon c-topic-read t-topic-read')|safe }}
 6 | 			{% else %}
 7 | 				{{ item.icon|icon('inline', 'o-icon o-list-media-icon c-topic-read t-topic-read')|safe }}
 8 | 			{% endif %}
 9 | 		{% else %}
10 | 			{% if item.type == 'sub' %}
11 | 				{{ 'forum'|icon('inline', 'o-icon o-list-media-icon c-topic-unread t-topic-unread')|safe }}
12 | 			{% else %}
13 | 				{{ item.icon|icon('inline', 'o-icon o-list-media-icon c-topic-unread t-topic-unread')|safe }}
14 | 			{% endif %}
15 | 		{% endif %}
16 | 	</span>
17 | 	<span class="o-list-primary c-topic-primary t-topic-primary">
18 | 		<h4 class="c-topic-title t-topic-title" role="heading" aria-level="4">
19 | 			<a class="o-list-title c-topic-title-text t-topic-title-text" href="#">{{item.name}}</a>
20 | 		</h4>
21 | 		<span class="o-list-secondary c-topic-secondary t-topic-secondary">
22 | 			{% if item.type != 'sub' %}
23 | 				{% if item.unapproved %}
24 | 					<a class="o-list-secondary-item c-topic-secondary-item t-topic-secondary-item c-topic-unapproved t-topic-unapproved" href="#" data-tooltip="true" title="{{ lang.unapproved }}">
25 | 						{{ 'mdi:alert-decagram-outline'|icon('iconify', 'o-icon o-list-secondary-item-icon c-topic-secondary-item-icon t-topic-secondary-item-icon')|safe }}
26 | 					</a>
27 | 				{% endif %}
28 | 				<span class="o-list-secondary-item c-topic-secondary-item t-topic-secondary-item c-topic-user t-topic-user">
29 | 					{{ 'mdi:account-circle-outline'|icon('iconify', 'o-icon o-list-secondary-item-icon c-topic-secondary-item-icon t-topic-secondary-item-icon')|safe }}
30 | 					<a class="o-list-secondary-item-link" href="{{ item.author_profile }}" style="color: {{ item.author_color }};">{{ item.author }}</a>
31 | 				</span>
32 | 				<span class="o-list-secondary-item c-topic-secondary-item t-topic-secondary-item c-topic-time t-topic-time">
33 | 					{{ 'mdi:clock-outline'|icon('iconify', 'o-icon o-list-secondary-item-icon c-topic-secondary-item-icon t-topic-secondary-item-icon')|safe }}
34 | 					<time datetime="{{ item.time }}" title="{{ item.time }}" data-short="{{ item.time }}">{{ item.time|moment("YYYYMMDD", true) }}</time>
35 | 				</span>
36 | 				<span class="o-list-secondary-item c-topic-secondary-item t-topic-secondary-item c-topic-views t-topic-views">
37 | 					{{ 'mdi:file-eye-outline'|icon('iconify', 'o-icon o-list-secondary-item-icon c-topic-secondary-item-icon t-topic-secondary-item-icon')|safe }}
38 | 					{{ item.views }}
39 | 				</span>
40 | 				<span class="o-list-secondary-item c-topic-secondary-item t-topic-secondary-item c-topic-replies t-topic-replies">
41 | 					{{ 'mdi:comment-text-outline'|icon('iconify', 'o-icon o-list-secondary-item-icon c-topic-secondary-item-icon t-topic-secondary-item-icon')|safe }}
42 | 					{{ item.replies }}
43 | 				</span>
44 | 				{% if item.pages %}
45 | 					<a class="o-list-secondary-item c-topic-secondary-item t-topic-secondary-item" href="#" data-tooltip="true" title="{{ lang.page_goto }}">
46 | 						{{ 'mdi:checkbox-multiple-blank-outline'|icon('iconify', 'o-icon o-list-secondary-item-icon c-topic-secondary-item-icon t-topic-secondary-item-icon')|safe }}
47 | 					</a>
48 | 				{% endif %}
49 | 			{% else %}
50 | 				<span class="o-list-secondary-item c-topic-secondary-item t-topic-secondary-item c-topic-subforum-topics t-topic-subforum-topics">
51 | 					{{ 'mdi:file-outline'|icon('iconify', 'o-icon o-list-secondary-item-icon c-topic-secondary-item-icon t-topic-secondary-item-icon')|safe }}
52 | 					{{ item.topics }}
53 | 				</span>
54 | 				<span class="o-list-secondary-item c-topic-secondary-item t-topic-secondary-item c-topic-subforum-posts t-topic-subforum-posts">
55 | 					{{ 'mdi:comment-text-outline'|icon('iconify', 'o-icon o-list-secondary-item-icon c-topic-secondary-item-icon t-topic-secondary-item-icon')|safe }}
56 | 					{{ item.posts }}
57 | 				</span>
58 | 			{% endif %}
59 | 		</span>
60 | 	</span>
61 | 	<span class="o-list-meta c-topic-meta t-topic-meta">
62 | 		<span class="o-list-meta-primary c-topic-meta-primary t-topic-meta-primary">
63 | 			<a class="o-list-meta-link c-topic-link t-topic-link" href="{{ item.last_author_profile }}" style="color: #{{ item.last_color }};">{{ item.last_author }}</a>
64 | 			<span class="o-list-meta-secondary c-topic-meta-secondary t-topic-meta-secondary">
65 | 				<a class="o-list-meta-link c-topic-meta-link t-topic-meta-link" href="">
66 | 					<time datetime="{{ item.last_time }}" title="{{ item.last_time }}" data-short="{{ item.last_time }}">{{ item.last_time|moment("YYYYMMDD", true) }}</time>
67 | 				</a>
68 | 			</span>
69 | 		</span>
70 | 		<a class="o-list-meta-media c-topic-meta-media t-topic-meta-media" href="{{ item.last_author_profile }}">
71 | 			<span class="o-avatar-wrap o-list-avatar c-topic-avatar t-topic-avatar">
72 | 				<img class="o-avatar" src="{{ item.last_avatar }}" alt="User Avatar">
73 | 				<span class="o-avatar-online o-action-bar-avatar-online"></span>
74 | 			</span>
75 | 		</a>
76 | 	</span>
77 | </li>
78 | 


--------------------------------------------------------------------------------
/all/views/includes/post.twig:
--------------------------------------------------------------------------------
 1 | <div class="c-post">
 2 | 	<div class="o-bar c-post-bar">
 3 | 		<div class="o-bar-left c-post-bar-left">
 4 | 			<span class="o-bar-item c-post-bar-item">
 5 | 				<a class="o-action o-bar-profile" href="" data-toggle="profile">
 6 | 					<span class="o-avatar-wrap o-bar-avatar">
 7 | 						<img class="o-avatar" src="{{ item.avatar }}" alt="User Avatar">
 8 | 						<span class="o-avatar-online o-bar-avatar-online"></span>
 9 | 					</span>
10 | 					<span class="o-bar-user" style="color: {{ item.color }};">
11 | 						{{ item.name }}
12 | 						<small class="o-bar-user-title">{{ item.rank }}</small>
13 | 					</span>
14 | 				</a>
15 | 				{% include './profile.twig' %}
16 | 			</span>
17 | 		</div>
18 | 		<div class="o-bar-right c-post-bar-right">
19 | 			<span class="o-bar-item o-bar-info c-post-meta-time u-hidden-xs-down">
20 | 				<time class="c-post-meta-time-text" datetime="{{ item.time }}" title="{{ item.time }}" data-short="{{ item.time }}">{{ item.time|moment("YYYYMMDD", true) }}</time>
21 | 			</span>
22 | 			<a class="o-bar-item o-action c-post-meta-number" href="#">
23 | 				<span class="c-post-meta-number-text">#{{ item.id }}</span>
24 | 			</a>
25 | 		</div>
26 | 	</div>
27 | 	<div class="c-post-body">
28 | 		<div class="c-copy">
29 | 			{{ item.content|safe }}
30 | 		</div>
31 | 		<div class="o-bar c-post-action-bar">
32 | 			<div class="o-bar-left c-post-action-bar-right"></div>
33 | 			<div class="o-bar-right c-post-action-bar-right">
34 | 				<span class="o-bar-item c-post-action-bar-item u-hidden-md-up">
35 | 					<a class="o-action c-post-action" href="#" data-tooltip="true" data-toggle="menu" data-placement="top" title="{{ lang.post_more_actions }}">
36 | 						{{ 'mdi:more-vert'|icon('iconify', 'o-icon o-action-icon c-post-action-icon')|safe }}
37 | 					</a>
38 | 					<div class="c-menu-container t-menu-container" data-container="menu">
39 | 						<ul class="c-menu t-menu">
40 | 							<li class="c-menu-item t-menu-item">
41 | 								<a class="c-menu-link t-menu-item" href="">
42 | 									{{ 'mdi:info-outline'|icon('iconify', 'o-icon c-menu-link-icon t-menu-topic-icon')|safe }}
43 | 									<span class="c-menu-text t-topic-text">{{ lang.post_info }}</span>
44 | 								</a>
45 | 							</li>
46 | 							<li class="c-menu-item t-menu-item">
47 | 								<a class="c-menu-link t-menu-item" href="">
48 | 									{{ 'mdi:shield-alert-outline'|icon('iconify', 'o-icon c-menu-link-icon t-menu-topic-icon')|safe }}
49 | 									<span class="c-menu-text t-topic-text">{{ lang.post_warn }}</span>
50 | 								</a>
51 | 							</li>
52 | 							<li class="c-menu-item t-menu-item">
53 | 								<a class="c-menu-link t-menu-item" href="">
54 | 									{{ 'fa-regular:flag'|icon('iconify', 'o-icon c-menu-link-icon t-menu-topic-icon')|safe }}
55 | 									<span class="c-menu-text t-topic-text">{{ lang.post_report }}</span>
56 | 								</a>
57 | 							</li>
58 | 							<li class="c-menu-item t-menu-item">
59 | 								<a class="c-menu-link t-menu-item" href="">
60 | 									{{ 'mdi:share-variant'|icon('iconify', 'o-icon c-menu-link-icon t-menu-topic-icon')|safe }}
61 | 									<span class="c-menu-text t-topic-text">{{ lang.post_share }}</span>
62 | 								</a>
63 | 							</li>
64 | 						</ul>
65 | 					</div>
66 | 				</span>
67 | 				<a class="o-bar-item o-action c-post-action u-hidden-sm-down" href="" data-tooltip="true" title="{{ lang.post_info }}">
68 | 					{{ 'mdi:info-outline'|icon('iconify', 'o-icon o-action-icon c-post-action-icon')|safe }}
69 | 				</a>
70 | 				<a class="o-bar-item o-action c-post-action u-hidden-sm-down" href="" data-tooltip="true" title="{{ lang.post_warn }}">
71 | 					{{ 'mdi:shield-alert-outline'|icon('iconify', 'o-icon o-action-icon c-post-action-icon')|safe }}
72 | 				</a>
73 | 				<a class=" o-bar-item o-action c-post-action u-hidden-sm-down" href="" data-tooltip="true" title="{{ lang.post_report }}">
74 | 					{{ 'fa-regular:flag'|icon('iconify', 'o-icon o-action-icon c-post-action-icon')|safe }}
75 | 				</a>
76 | 				<a class="o-bar-item o-action c-post-action u-hidden-sm-down" href="" data-tooltip="true" title="{{ lang.post_share }}">
77 | 					{{ 'mdi:share-variant'|icon('iconify', 'o-icon o-action-icon c-post-action-icon')|safe }}
78 | 				</a>
79 | 				<a class="o-bar-item o-action c-post-action" href="" data-tooltip="true" title="{{ lang.post_quote }}">
80 | 					{{ 'mdi:comment-quote-outline'|icon('iconify', 'o-icon o-action-icon c-post-action-icon')|safe }}
81 | 				</a>
82 | 				<a class="o-bar-item o-action c-post-action" href="" data-tooltip="true" title="{{ lang.post_delete }}">
83 | 					{{ 'mdi:trash-outline'|icon('iconify', 'o-icon o-action-icon c-post-action-icon')|safe }}
84 | 				</a>
85 | 				<a class="o-bar-item o-action c-post-action" href="" data-tooltip="true" title="{{ lang.post_edit }}">
86 | 					{{ 'mdi:pencil-outline'|icon('iconify', 'o-icon o-action-icon c-post-action-icon')|safe }}
87 | 				</a>
88 | 				<a class="o-bar-item o-action c-post-action" href="" data-tooltip="true" title="{{ lang.post_like }}">
89 | 					{{ 'mdi:heart-outline'|icon('iconify', 'o-icon o-action-icon c-post-action-icon')|safe }}
90 | 				</a>
91 | 			</div>
92 | 		</div>
93 | 	</div>
94 | </div>
95 | 


--------------------------------------------------------------------------------
/tests/mock/notification.json:
--------------------------------------------------------------------------------
  1 | {
  2 | 	"notification": [
  3 | 		{
  4 | 			"id": 1,
  5 | 			"user": "Joe",
  6 | 			"color": "#009900",
  7 | 			"url": "./memberlist.php?mode=viewprofile&amp;u=61815",
  8 | 			"avatar": "https://avatars2.githubusercontent.com/u/71081?v=4&amp;s=46",
  9 | 			"type": "mdi:reply-outline",
 10 | 			"typeTitle": "Replied",
 11 | 			"participants": [
 12 | 				{
 13 | 					"name": "Frank",
 14 | 					"color": "#009900",
 15 | 					"url": "./memberlist.php?mode=viewprofile&amp;u=61815"
 16 | 				}
 17 | 			],
 18 | 			"title": "Your first pm msg title",
 19 | 			"time": "2016-11-11T19:18:00Z",
 20 | 			"unread": 1,
 21 | 			"approved": 0
 22 | 		},
 23 | 		{
 24 | 			"id": 2,
 25 | 			"user": "Joe",
 26 | 			"color": "#009900",
 27 | 			"url": "./memberlist.php?mode=viewprofile&amp;u=61815",
 28 | 			"avatar": "https://avatars2.githubusercontent.com/u/71081?v=4&amp;s=46",
 29 | 			"type": "mdi:plus",
 30 | 			"typeTitle": "Posted",
 31 | 			"participants": [
 32 | 				{
 33 | 					"name": "Frank",
 34 | 					"color": "#009900",
 35 | 					"url": "./memberlist.php?mode=viewprofile&amp;u=61815"
 36 | 				},
 37 | 				{
 38 | 					"name": "Frank",
 39 | 					"color": "#009900",
 40 | 					"url": "./memberlist.php?mode=viewprofile&amp;u=61815"
 41 | 				}
 42 | 			],
 43 | 			"title": "Your first pm msg title",
 44 | 			"time": "2016-11-11T19:18:00Z",
 45 | 			"unread": 1,
 46 | 			"approved": 0
 47 | 		},
 48 | 		{
 49 | 			"id": 3,
 50 | 			"user": "Joe",
 51 | 			"color": "#009900",
 52 | 			"url": "./memberlist.php?mode=viewprofile&amp;u=61815",
 53 | 			"avatar": "https://avatars2.githubusercontent.com/u/71081?v=4&amp;s=46",
 54 | 			"type": "mdi:format-quote-open-outline",
 55 | 			"typeTitle": "Quoted",
 56 | 			"participants": [
 57 | 				{
 58 | 					"name": "Frank",
 59 | 					"color": "#009900",
 60 | 					"url": "./memberlist.php?mode=viewprofile&amp;u=61815"
 61 | 				}
 62 | 			],
 63 | 			"title": "Your first pm msg title",
 64 | 			"time": "2016-11-11T19:18:00Z",
 65 | 			"unread": 0,
 66 | 			"approved": 0
 67 | 		},
 68 | 		{
 69 | 			"id": 4,
 70 | 			"user": "Joe",
 71 | 			"color": "#009900",
 72 | 			"url": "./memberlist.php?mode=viewprofile&amp;u=61815",
 73 | 			"avatar": "https://avatars2.githubusercontent.com/u/71081?v=4&amp;s=46",
 74 | 			"type": "mdi:comment-account-outline",
 75 | 			"typeTitle": "Messaged",
 76 | 			"participants": [
 77 | 				{
 78 | 					"name": "Frank",
 79 | 					"color": "#009900",
 80 | 					"url": "./memberlist.php?mode=viewprofile&amp;u=61815"
 81 | 				}
 82 | 			],
 83 | 			"title": "Your first pm msg title",
 84 | 			"time": "2016-11-11T19:18:00Z",
 85 | 			"unread": 0,
 86 | 			"approved": 0
 87 | 		},
 88 | 		{
 89 | 			"id": 5,
 90 | 			"user": "Joe",
 91 | 			"color": "#009900",
 92 | 			"url": "./memberlist.php?mode=viewprofile&amp;u=61815",
 93 | 			"avatar": "https://avatars2.githubusercontent.com/u/71081?v=4&amp;s=46",
 94 | 			"type": "fa-regular:flag",
 95 | 			"typeTitle": "Reported",
 96 | 			"participants": [
 97 | 				{
 98 | 					"name": "Frank",
 99 | 					"color": "#009900",
100 | 					"url": "./memberlist.php?mode=viewprofile&amp;u=61815"
101 | 				}
102 | 			],
103 | 			"title": "Your first pm msg title",
104 | 			"time": "2016-11-11T19:18:00Z",
105 | 			"unread": 0,
106 | 			"approved": 0
107 | 		},
108 | 		{
109 | 			"id": 6,
110 | 			"user": "Joe",
111 | 			"color": "#009900",
112 | 			"url": "./memberlist.php?mode=viewprofile&amp;u=61815",
113 | 			"avatar": "https://avatars2.githubusercontent.com/u/71081?v=4&amp;s=46",
114 | 			"type": "mdi:alert-decagram-outline",
115 | 			"typeTitle": "Dissapproved",
116 | 			"participants": [
117 | 				{
118 | 					"name": "Frank",
119 | 					"color": "#009900",
120 | 					"url": "./memberlist.php?mode=viewprofile&amp;u=61815"
121 | 				}
122 | 			],
123 | 			"title": "Your first pm msg title",
124 | 			"time": "2016-11-11T19:18:00Z",
125 | 			"unread": 0,
126 | 			"approved": 2
127 | 		},
128 | 		{
129 | 			"id": 7,
130 | 			"user": "Joe",
131 | 			"color": "#009900",
132 | 			"url": "./memberlist.php?mode=viewprofile&amp;u=61815",
133 | 			"avatar": "https://avatars2.githubusercontent.com/u/71081?v=4&amp;s=46",
134 | 			"type": "mdi:decagram-check",
135 | 			"typeTitle": "Approved",
136 | 			"participants": [
137 | 				{
138 | 					"name": "Frank",
139 | 					"color": "#009900",
140 | 					"url": "./memberlist.php?mode=viewprofile&amp;u=61815"
141 | 				}
142 | 			],
143 | 			"title": "Your first pm msg title",
144 | 			"time": "2016-11-11T19:18:00Z",
145 | 			"unread": 1,
146 | 			"approved": 1
147 | 		},
148 | 		{
149 | 			"id": 8,
150 | 			"user": "Joe",
151 | 			"color": "#009900",
152 | 			"url": "./memberlist.php?mode=viewprofile&amp;u=61815",
153 | 			"avatar": "https://avatars2.githubusercontent.com/u/71081?v=4&amp;s=46",
154 | 			"type": "mdi:shield-alert-outline",
155 | 			"typeTitle": "Warned",
156 | 			"participants": [
157 | 				{
158 | 					"name": "Frank",
159 | 					"color": "#009900",
160 | 					"url": "./memberlist.php?mode=viewprofile&amp;u=61815"
161 | 				}
162 | 			],
163 | 			"title": "Your first pm msg title",
164 | 			"time": "2016-11-11T19:18:00Z",
165 | 			"unread": 0,
166 | 			"approved": 0
167 | 		}
168 | 	]
169 | }
170 | 


--------------------------------------------------------------------------------
/tests/mock/lang.json:
--------------------------------------------------------------------------------
  1 | {
  2 | 	"lang": {
  3 | 		"who_is_online": "Who's Online",
  4 | 		"stats": "Statistics",
  5 | 		"birthday": "Birthdays",
  6 | 		"colon": ":",
  7 | 		"registered": "Registered",
  8 | 		"total_online": "Total Online",
  9 | 		"registered_users": "Registered users",
 10 | 		"hidden": "Hidden",
 11 | 		"guests": "Guests",
 12 | 		"stats_disclaimer": "(based on users active over the past 60 minutes)",
 13 | 		"legend": "Legend",
 14 | 		"total_posts": "Total Posts",
 15 | 		"total_topics": "Total Topics",
 16 | 		"total_members": "Total Members",
 17 | 		"most_online": "Most Online",
 18 | 		"newest_member": "Newest Member",
 19 | 		"congrats": "Congratulations",
 20 | 		"notifications": "Notifications",
 21 | 		"private_msgs": "Private Messages",
 22 | 		"search": "Search...",
 23 | 		"search_adv": "Search Advanced",
 24 | 		"board_index": "Board Index",
 25 | 		"logout": "Logout",
 26 | 		"profile": "Profile",
 27 | 		"profile_likes": "Likes",
 28 | 		"profile_online": "User is online",
 29 | 		"profile_location": "Location",
 30 | 		"profile_rating": "Rating",
 31 | 		"profile_rating_up": "Rate User Up",
 32 | 		"profile_rating_down": "Rate User Down",
 33 | 		"profile_joined": "Joined",
 34 | 		"profile_posts": "Posts",
 35 | 		"contact_youtube": "Visit User's Youtube",
 36 | 		"contact_twitter": "Visit User's Twitter",
 37 | 		"contact_facebook": "Visit User's Facebook",
 38 | 		"contact_website": "Visit User's Website",
 39 | 		"contact_skype": "Skype User",
 40 | 		"contact_email": "Email User",
 41 | 		"contact_pm": "Private Message User",
 42 | 		"contact_menu": "Contact Menu",
 43 | 		"profile_close": "Close",
 44 | 		"user_panel": "User Panel",
 45 | 		"forum_overview": "Forum Overview",
 46 | 		"board_prefs": "Board Preferences",
 47 | 		"profile_settings": "Profile Settings",
 48 | 		"groups": "Groups",
 49 | 		"friends_foes": "Friends & Foes",
 50 | 		"mod_panel": "Moderation Panel",
 51 | 		"queue": "Queue",
 52 | 		"reports": "Reports",
 53 | 		"notes": "Notes",
 54 | 		"warnings": "Warnings",
 55 | 		"logs": "Logs",
 56 | 		"bans": "Bans",
 57 | 		"admin_panel": "Administrator Panel",
 58 | 		"quick_links": "Quick Links",
 59 | 		"your_posts": "Your Posts",
 60 | 		"new_posts": "New Posts",
 61 | 		"unread_posts": "Unread Posts",
 62 | 		"unanswered_topics": "Unanswered Topics",
 63 | 		"active_topics": "Active Topics",
 64 | 		"faqs": "Faqs",
 65 | 		"members": "Members",
 66 | 		"team": "The Team",
 67 | 		"contact_us": "Contact Us",
 68 | 		"delete_cookies": "Delete Cookies",
 69 | 		"site_motto": "forum software",
 70 | 		"site_desc": "Helping to create communities around the world since 2000",
 71 | 		"site_title": "phpBB",
 72 | 		"copyright": "Forum Software © phpBB Limited",
 73 | 		"powered_by": "Powered by",
 74 | 		"terms": "Terms",
 75 | 		"privacy": "Privacy",
 76 | 		"subforums": "Sub Forums",
 77 | 		"see_all": "See All",
 78 | 		"announcements": "Announcements",
 79 | 		"forum": "Forum",
 80 | 		"forum_rules": "Forum Rules",
 81 | 		"topic_tools": "Topic Tools",
 82 | 		"page_goto": "Go To Page",
 83 | 		"post_goto": "Go To Post",
 84 | 		"goto": "Go To ",
 85 | 		"post_goto_date": "Go To Date",
 86 | 		"jump_to": "Jump To",
 87 | 		"filter": "Filter",
 88 | 		"sort": "Sort",
 89 | 		"order": "Order",
 90 | 		"mark": "Mark Read",
 91 | 		"return": "Return to ...",
 92 | 		"load_more": "Load More ",
 93 | 		"online_forum": "Users browsing this forum",
 94 | 		"online_topic": "Users browsing this topic",
 95 | 		"permissions": "Permissions",
 96 | 		"forum_post": "Can Create Topics",
 97 | 		"forum_reply": "Can Reply Topics",
 98 | 		"forum_edit": "Can Edit Posts",
 99 | 		"forum_delete": "Can Delete Your posts",
100 | 		"forum_attach": "Can Post Attachments",
101 | 		"unapproved": "Unapproved Topic",
102 | 		"new_topic": "New Topic",
103 | 		"topics": "Topics",
104 | 		"settings": "Settings",
105 | 		"close": "Close",
106 | 		"next": "Next Page",
107 | 		"prev": "Previous Page",
108 | 		"down": "Down",
109 | 		"top": "Top",
110 | 		"collapse": "Collapse",
111 | 		"expand": "Expand",
112 | 		"mod_tools": "Quick Mod Tools",
113 | 		"forum_watch": "Watch Forum",
114 | 		"topic_watch": "Watch Topic",
115 | 		"topic_unwatch": "UnWatch Topic",
116 | 		"topic_favorite": "Favorite Topic",
117 | 		"topic_unfavorite": "UnFavorite Topic",
118 | 		"topic_bump": "Bump Topic",
119 | 		"topic_email": "Email Topic",
120 | 		"topic_print": "Print View",
121 | 		"topic_lock": "Lock Topic",
122 | 		"topic_unlock": "Unlock Topic",
123 | 		"topic_delete": "Delete Topic",
124 | 		"topic_move": "Move Topic",
125 | 		"topic_move_posts": "Move Topic Posts",
126 | 		"topic_split": "Split Topic",
127 | 		"topic_merge": "Merge Topic",
128 | 		"topic_copy": "Copy Topic",
129 | 		"topic_sticky": "Make Sticky",
130 | 		"topic_announce": "Make Announce",
131 | 		"topic_normal": "Make Normal",
132 | 		"topic_logs": "View Topic Logs",
133 | 		"post_info": "Post Info",
134 | 		"post_edit": "Post Edit",
135 | 		"post_quote": "Post Quote",
136 | 		"post_warn": "Post Warn",
137 | 		"post_like": "Like Post",
138 | 		"post_share": "Post Share",
139 | 		"post_delete": "Post Delete",
140 | 		"post_report": "Post Report",
141 | 		"post_more_actions": "More Post Actions",
142 | 		"submit": "submit",
143 | 		"post_reply": "Post Reply"
144 | 	}
145 | }
146 | 


--------------------------------------------------------------------------------
/all/scss/settings/_dark.scss:
--------------------------------------------------------------------------------
  1 | //------------------------------------------------------------------------------
  2 | // @setting: Dark Mode Colors
  3 | //------------------------------------------------------------------------------
  4 | // @author: hanakin -- midaym
  5 | // @version: 1.2.1
  6 | // @description
  7 | //
  8 | // Include this file in build process to enable dark mode
  9 | //
 10 | //------------------------------------------------------------------------------
 11 | 
 12 | //
 13 | // @settings
 14 | 
 15 | // color scheme Background
 16 | $default-background-color:					mode('background', 'dark', 'color');
 17 | $default-background-alt-color:				mode('background', 'dark', 'alt');
 18 | $default-background-item-color:				mode('background', 'dark', 'item');
 19 | 
 20 | $default-background-color-inverted:			mode('background', 'light', 'color');
 21 | $default-background-alt-color-inverted:		mode('background', 'light', 'alt');
 22 | $default-background-item-color-inverted:	mode('background', 'light', 'item');
 23 | 
 24 | // color scheme Surface
 25 | $default-surface-color:						mode('surface', 'dark', 'color');
 26 | $default-surface-hover-color:				mode('surface', 'dark', 'color-hover');
 27 | $default-surface-alt-color:					mode('surface', 'dark', 'alt');
 28 | $default-surface-alt-hover-color:			mode('surface', 'dark', 'alt-hover');
 29 | $default-surface-item-color:				mode('surface', 'dark', 'item');
 30 | 
 31 | $default-surface-color-inverted:			mode('surface', 'light', 'color');
 32 | $default-surface-hover-color-inverted:		mode('surface', 'light', 'color-hover');
 33 | $default-surface-alt-color-inverted:		mode('surface', 'light', 'alt');
 34 | $default-surface-alt-hover-color-inverted:	mode('surface', 'light', 'alt-hover');
 35 | $default-surface-item-color-inverted:		mode('surface', 'light', 'item');
 36 | 
 37 | // color scheme Border
 38 | $default-border-color:						mode('border', 'dark', 'color');
 39 | $default-border-hover-color:				mode('border', 'dark', 'color-hover');
 40 | $default-border-color-inverted:				mode('border', 'light', 'color');
 41 | $default-border-hover-color-inverted:		mode('border', 'light', 'color-hover');
 42 | 
 43 | // other
 44 | $default-disabled-color: 				$gray-700 !default;
 45 | $default-disabled-stroke:				$gray-400 !default;
 46 | 
 47 | // color scheme Grays
 48 | $default-white:                         $gray-50 !default;
 49 | $default-black:                         $gray-1300 !default;
 50 | 
 51 | $default-gray:                          $gray-700 !default;
 52 | $default-gray-dark:                     $gray-900 !default;
 53 | $default-gray-light:                    $gray-500 !default;
 54 | 
 55 | // color scheme Primary
 56 | $default-primary-color:                 $blue-700 !default;
 57 | $default-primary-dark-color:            $blue-900 !default;
 58 | $default-primary-light-color:           $blue-500 !default;
 59 | $default-primary-item-color:            $gray-50 !default;
 60 | $default-primary-item-light-color:      $gray-1300 !default;
 61 | 
 62 | // color scheme Secondary
 63 | $default-secondary-color:               $pink-700 !default;
 64 | $default-secondary-dark-color:          $pink-900 !default;
 65 | $default-secondary-light-color:         $pink-500 !default;
 66 | $default-secondary-item-color:          $gray-50 !default;
 67 | $default-secondary-item-light-color:    $gray-1300 !default;
 68 | 
 69 | // color scheme Error
 70 | $default-error-color:                   $red-700 !default;
 71 | $default-error-dark-color:              $red-900 !default;
 72 | $default-error-light-color:             $red-500 !default;
 73 | $default-error-item-color:              $gray-50 !default;
 74 | $default-error-item-light-color:        $gray-1300 !default;
 75 | 
 76 | // color scheme Success
 77 | $default-success-color:                 $green-700 !default;
 78 | $default-success-dark-color:            $green-900 !default;
 79 | $default-success-light-color:           $green-500 !default;
 80 | $default-success-item-color:            $gray-50 !default;
 81 | $default-success-item-light-color:      $gray-1300 !default;
 82 | 
 83 | // color scheme Warning
 84 | $default-warning-color:                 $amber-700 !default;
 85 | $default-warning-dark-color:            $amber-900 !default;
 86 | $default-warning-light-color:           $amber-500 !default;
 87 | $default-warning-item-color:            $gray-50 !default;
 88 | $default-warning-item-light-color:      $gray-1300 !default;
 89 | 
 90 | // color scheme Info
 91 | $default-info-color:                    $blue-gray-700 !default;
 92 | $default-info-dark-color:               $blue-gray-900 !default;
 93 | $default-info-light-color:              $blue-gray-500 !default;
 94 | $default-info-item-color:               $gray-50 !default;
 95 | $default-info-item-light-color:         $gray-1300 !default;
 96 | 
 97 | // color scheme
 98 | $default-page-color:					$gray-1400 !default;
 99 | $default-link-color:                    $default-primary-color !default;
100 | $default-link-color-hover:              $default-primary-dark-color !default;
101 | 
102 | $default-action-bg:                     $default-surface-color !default;
103 | $default-action-bg-hover:               $default-surface-alt-color !default;
104 | $default-action-color:                  $default-surface-item-color !default;
105 | $default-action-color-hover:            $default-primary-color !default;
106 | $default-action-icon-color:             $default-surface-item-color !default;
107 | 


--------------------------------------------------------------------------------
/all/scss/settings/_light.scss:
--------------------------------------------------------------------------------
  1 | //------------------------------------------------------------------------------
  2 | // @setting: Light Mode Colors
  3 | //------------------------------------------------------------------------------
  4 | // @author: hanakin -- midaym
  5 | // @version: 1.2.1
  6 | // @description
  7 | //
  8 | // Include this file in build process to enable light mode
  9 | //
 10 | //------------------------------------------------------------------------------
 11 | 
 12 | //
 13 | // @settings
 14 | 
 15 | // color scheme Background
 16 | $default-background-color:					mode('background', 'light', 'color');
 17 | $default-background-alt-color:				mode('background', 'light', 'alt');
 18 | $default-background-item-color:				mode('background', 'light', 'item');
 19 | 
 20 | $default-background-color-inverted:			mode('background', 'dark', 'color');
 21 | $default-background-alt-color-inverted:		mode('background', 'dark', 'alt');
 22 | $default-background-item-color-inverted:	mode('background', 'dark', 'item');
 23 | 
 24 | // color scheme Surface
 25 | $default-surface-color:						mode('surface', 'light', 'color');
 26 | $default-surface-hover-color:				mode('surface', 'light', 'color-hover');
 27 | $default-surface-alt-color:					mode('surface', 'light', 'alt');
 28 | $default-surface-alt-hover-color:			mode('surface', 'light', 'alt-hover');
 29 | $default-surface-item-color:				mode('surface', 'light', 'item');
 30 | 
 31 | $default-surface-color-inverted:			mode('surface', 'dark', 'color');
 32 | $default-surface-hover-color-inverted:		mode('surface', 'dark', 'color-hover');
 33 | $default-surface-alt-color-inverted:		mode('surface', 'dark', 'alt');
 34 | $default-surface-alt-hover-color-inverted:	mode('surface', 'dark', 'alt-hover');
 35 | $default-surface-item-color-inverted:		mode('surface', 'dark', 'item');
 36 | 
 37 | // color scheme Border
 38 | $default-border-color:						mode('border', 'light', 'color');
 39 | $default-border-hover-color:				mode('border', 'light', 'color-hover');
 40 | $default-border-color-inverted:				mode('border', 'dark', 'color');
 41 | $default-border-hover-color-inverted:		mode('border', 'dark', 'color-hover');
 42 | 
 43 | // other
 44 | $default-disabled-color: 				$gray-700 !default;
 45 | $default-disabled-stroke:				$gray-400 !default;
 46 | 
 47 | // color scheme Grays
 48 | $default-white:                         $gray-50 !default;
 49 | $default-black:                         $gray-1300 !default;
 50 | 
 51 | $default-gray:                          $gray-700 !default;
 52 | $default-gray-dark:                     $gray-900 !default;
 53 | $default-gray-light:                    $gray-500 !default;
 54 | 
 55 | // color scheme Primary
 56 | $default-primary-color:                 $blue-700 !default;
 57 | $default-primary-dark-color:            $blue-900 !default;
 58 | $default-primary-light-color:           $blue-500 !default;
 59 | $default-primary-item-color:            $gray-50 !default;
 60 | $default-primary-item-light-color:      $gray-1300 !default;
 61 | 
 62 | // color scheme Secondary
 63 | $default-secondary-color:               $pink-700 !default;
 64 | $default-secondary-dark-color:          $pink-900 !default;
 65 | $default-secondary-light-color:         $pink-500 !default;
 66 | $default-secondary-item-color:          $gray-50 !default;
 67 | $default-secondary-item-light-color:    $gray-1300 !default;
 68 | 
 69 | // color scheme Error
 70 | $default-error-color:                   $red-700 !default;
 71 | $default-error-dark-color:              $red-900 !default;
 72 | $default-error-light-color:             $red-500 !default;
 73 | $default-error-item-color:              $gray-50 !default;
 74 | $default-error-item-light-color:        $gray-1300 !default;
 75 | 
 76 | // color scheme Success
 77 | $default-success-color:                 $green-700 !default;
 78 | $default-success-dark-color:            $green-900 !default;
 79 | $default-success-light-color:           $green-500 !default;
 80 | $default-success-item-color:            $gray-50 !default;
 81 | $default-success-item-light-color:      $gray-1300 !default;
 82 | 
 83 | // color scheme Warning
 84 | $default-warning-color:                 $amber-700 !default;
 85 | $default-warning-dark-color:            $amber-900 !default;
 86 | $default-warning-light-color:           $amber-500 !default;
 87 | $default-warning-item-color:            $gray-50 !default;
 88 | $default-warning-item-light-color:      $gray-1300 !default;
 89 | 
 90 | // color scheme Info
 91 | $default-info-color:                    $blue-gray-700 !default;
 92 | $default-info-dark-color:               $blue-gray-900 !default;
 93 | $default-info-light-color:              $blue-gray-500 !default;
 94 | $default-info-item-color:               $gray-50 !default;
 95 | $default-info-item-light-color:         $gray-1300 !default;
 96 | 
 97 | // color scheme
 98 | $default-page-color:					$white !default;
 99 | $default-link-color:                    $default-primary-color !default;
100 | $default-link-color-hover:              $default-primary-dark-color !default;
101 | 
102 | $default-action-bg:                     $default-surface-color !default;
103 | $default-action-bg-hover:               $default-surface-alt-color !default;
104 | $default-action-color:                  $default-surface-item-color !default;
105 | $default-action-color-hover:            $default-primary-color !default;
106 | $default-action-icon-color:             $default-surface-item-color !default;
107 | 


--------------------------------------------------------------------------------
/all/scss/components/_post.scss:
--------------------------------------------------------------------------------
  1 | //------------------------------------------------------------------------------
  2 | // @component: Post
  3 | //------------------------------------------------------------------------------
  4 | // @author: hanakin -- midaym
  5 | // @version: 0.3.0
  6 | // @description
  7 | //
  8 | //------------------------------------------------------------------------------
  9 | 
 10 | //
 11 | // @settings
 12 | 
 13 | // Layout Variables
 14 | $post-spacing: $default-spacing !default;
 15 | $post-border-radius: $default-border-radius !default;
 16 | $post-border-style: solid !default;
 17 | $post-border-size: $default-border-size !default;
 18 | $post-body-min-height: 192px !default;
 19 | $post-pre-max-height: 264px !default;
 20 | $post-emoji-size: 1em !default;
 21 | $post-emoji-size-min: $default-icon-sm !default;
 22 | 
 23 | 
 24 | // Theme Variables
 25 | $post-bg-color: $default-background-color !default;
 26 | $post-header-bg-color: $default-surface-color !default;
 27 | $post-border-color: $default-border-color !default;
 28 | 
 29 | //
 30 | // @scss
 31 | .c-post {
 32 | 	@include shadow(2);
 33 | 	background-color: $post-bg-color;
 34 | 	border-radius: $post-border-radius;
 35 | 	margin-bottom: ($post-spacing * 3);
 36 | 
 37 | 	&-bar {
 38 | 		@include border-radius(top, $post-border-radius);
 39 | 		border-bottom: $post-border-size $post-border-style $post-border-color;
 40 | 		grid-template-columns: auto auto;
 41 | 	}
 42 | 
 43 | 	&-body {
 44 | 		min-height: $post-body-min-height;
 45 | 		padding: ($post-spacing * 4) ($post-spacing * 3);
 46 | 
 47 | 		@media (min-width: $md) {
 48 | 			padding: ($post-spacing * 4) ($post-spacing * 6);
 49 | 		}
 50 | 	}
 51 | 
 52 | 	&-meta {
 53 | 		padding: ($post-spacing * 2);
 54 | 
 55 | 		&-number {
 56 | 			&-text {
 57 | 				text-align: center;
 58 | 				display: inline-block;
 59 | 				width: 24px;
 60 | 			}
 61 | 		}
 62 | 	}
 63 | 
 64 | 	&-title {
 65 | 		@include type(headline5);
 66 | 		margin-bottom: 0;
 67 | 
 68 | 		@media (min-width: $lg) {
 69 | 			padding-right: $post-spacing;
 70 | 		}
 71 | 	}
 72 | 
 73 | 	&-subtitle {
 74 | 		@include type(caption);
 75 | 		display: block;
 76 | 
 77 | 		&-item:not(:first-child) {
 78 | 			padding-left: $post-spacing;
 79 | 		}
 80 | 	}
 81 | 
 82 | 	&-action {
 83 | 		&:hover,
 84 | 		&:focus,
 85 | 		&-bar {
 86 | 			background-color: transparent;
 87 | 		}
 88 | 
 89 | 		&-bar {
 90 | 			grid-template-columns: 0 2fr;
 91 | 
 92 | 			&-right {
 93 | 				position: relative; // needs added to bar obj in base-l
 94 | 			}
 95 | 		}
 96 | 
 97 | 		&:active:after,
 98 | 		&:after {
 99 | 			opacity: 0;
100 | 			transition: 0s;
101 | 			transform: scale(0, 0);
102 | 		}
103 | 	}
104 | }
105 | 
106 | .c-copy {
107 | 	@include type(subhead1);
108 | 	font-weight: 300;
109 | 	margin: ($post-spacing * 2) 0 0;
110 | 
111 | 	> p,
112 | 	&-list,
113 | 	&-blockquote {
114 | 		font-size: calc(18px + 0.25vw);
115 | 		/* stylelint-disable */
116 | 		line-height: calc(34px + 0.2vw);
117 | 		/* stylelint-enable */
118 | 		word-wrap: break-word;
119 | 		word-break: break-word;
120 | 		margin-bottom: ($post-spacing * 4);
121 | 	}
122 | 
123 | 	&-blockquote {
124 | 		border: $post-border-size $post-border-style $post-border-color;
125 | 
126 | 		&-wrap {
127 | 			text-indent: 0;
128 | 			margin: 0;
129 | 			padding-left: ($post-spacing * 6);
130 | 		}
131 | 
132 | 		&-header {
133 | 			background-color: $post-header-bg-color;
134 | 			border-bottom: $post-border-size $post-border-style $post-border-color;
135 | 			display: grid;
136 | 			grid-template-areas:
137 | 				'meta'
138 | 				'date';
139 | 			padding: $post-spacing ($post-spacing * 2);
140 | 		}
141 | 
142 | 		&-meta {
143 | 			grid-area: meta;
144 | 		}
145 | 
146 | 		&-date {
147 | 			grid-area: date;
148 | 		}
149 | 
150 | 		&-author,
151 | 		&-jumpto {
152 | 			display: inline;
153 | 		}
154 | 
155 | 		&-body {
156 | 			padding: ($post-spacing * 3) ($post-spacing * 4);
157 | 
158 | 			p {
159 | 				margin-bottom: 0;
160 | 
161 | 				&:before,
162 | 				&:after,
163 | 				&:last-of-type:after {
164 | 					content: '';
165 | 				}
166 | 			}
167 | 		}
168 | 
169 | 		.c-copy-blockquote-wrap {
170 | 			padding-left: ($post-spacing * 3);
171 | 		}
172 | 
173 | 		.c-copy-blockquote {
174 | 			margin-bottom: ($post-spacing * 3);
175 | 		}
176 | 	}
177 | 
178 | 	&-list {
179 | 		margin-right: 0;
180 | 		padding-left: ($post-spacing * 2);
181 | 
182 | 		& & {
183 | 			margin: $post-spacing ($post-spacing * 3);
184 | 			margin-right: 0;
185 | 		}
186 | 	}
187 | 
188 | 	&-links {
189 | 		//
190 | 	}
191 | 
192 | 	&-bold {
193 | 		font-weight: 700;
194 | 	}
195 | 
196 | 	&-italic {
197 | 		font-weight: 200;
198 | 		font-style: italic;
199 | 	}
200 | 
201 | 	&-underline {
202 | 		text-decoration: underline;
203 | 	}
204 | 
205 | 	&-img {
206 | 		//
207 | 	}
208 | 
209 | 	&-attachment {
210 | 		//
211 | 	}
212 | 
213 | 	pre {
214 | 		background-color: #282c34;
215 | 		max-height: $post-pre-max-height;
216 | 		padding: ($post-spacing * 3);
217 | 	}
218 | 
219 | 	&-color {
220 | 		//
221 | 	}
222 | 
223 | 	&-smiles {
224 | 		vertical-align: text-bottom;
225 | 	}
226 | 
227 | 	&-emoji {
228 | 		width: $post-emoji-size;
229 | 		min-width: $post-emoji-size-min;
230 | 		height: $post-emoji-size;
231 | 		min-height: $post-emoji-size-min;
232 | 	}
233 | }
234 | 
235 | .c-post-fluid {
236 | 	.c-post-title {
237 | 		font-size: fluid(24, 36, 400, 1100);
238 | 		line-height: fluid(36, 48, 400, 1100);
239 | 	}
240 | 
241 | 	.c-copy {
242 | 		font-size: fluid(14, 21, 400, 1100);
243 | 		line-height: fluid(24, 36, 400, 1100);
244 | 	}
245 | }
246 | 


--------------------------------------------------------------------------------
/all/views/includes/profile.twig:
--------------------------------------------------------------------------------
 1 | <div class="c-profile" data-container="profile">
 2 | 	<a class="c-profile-action" href="" data-toggle="menu" data-placement="top" data-tooltip="true" title="{{ lang.contact_menu }}">
 3 | 		{{ 'mdi:comment-processing-outline'|icon('iconify', 'o-icon c-profile-menu-icon')|safe }}
 4 | 	</a>
 5 | 	<div class="c-menu-container t-menu-container" data-container="menu">
 6 | 		<ul class="c-menu c-profile-menu t-menu t-profile-menu">
 7 | 			<li class="c-menu-item t-menu-item">
 8 | 				<a class="c-menu-link c-menu-action" href="#" data-tooltip="true" title="{{ lang.contact_pm }}">
 9 | 					{{ 'mdi:comment-account-outline'|icon('iconify', 'o-icon c-profile-menu-icon')|safe }}
10 | 					<span class="c-menu-text t-topic-text u-sr-only">{{ lang.contact_pm }}</span>
11 | 				</a>
12 | 				<a class="c-menu-link c-menu-action" href="#" data-tooltip="true" title="{{ lang.contact_email }}">
13 | 					{{ 'mdi:at'|icon('iconify', 'o-icon c-profile-menu-icon')|safe }}
14 | 					<span class="c-menu-text t-topic-text u-sr-only">{{ lang.contact_email }}</span>
15 | 				</a>
16 | 				<a class="c-menu-link c-menu-action" href="#" data-tooltip="true" title="{{ lang.contact_skype }}">
17 | 					{{ 'mdi:skype'|icon('iconify', 'o-icon c-profile-menu-icon')|safe }}
18 | 					<span class="c-menu-text t-topic-text u-sr-only">{{ lang.contact_skype }}</span>
19 | 				</a>
20 | 				<a class="c-menu-link c-menu-action" href="#" data-tooltip="true" title="{{ lang.contact_website }}">
21 | 					{{ 'website'|icon('inline', 'o-icon c-profile-menu-icon')|safe }}
22 | 					<span class="c-menu-text t-topic-text u-sr-only">{{ lang.contact_website }}</span>
23 | 				</a>
24 | 				<a class="c-menu-link c-menu-action" href="#" data-tooltip="true" title="{{ lang.contact_facebook }}">
25 | 					{{ 'mdi:facebook-box'|icon('iconify', 'o-icon c-profile-menu-icon')|safe }}
26 | 					<span class="c-menu-text t-topic-text u-sr-only">{{ lang.contact_facebook }}</span>
27 | 				</a>
28 | 				<a class="c-menu-link c-menu-action" href="#" data-tooltip="true" title="{{ lang.contact_twitter }}">
29 | 					{{ 'mdi:twitter'|icon('iconify', 'o-icon c-profile-menu-icon')|safe }}
30 | 					<span class="c-menu-text t-topic-text u-sr-only">{{ lang.contact_twitter }}</span>
31 | 				</a>
32 | 				<a class="c-menu-link c-menu-action" href="#" data-tooltip="true" title="{{ lang.contact_youtube }}">
33 | 					{{ 'mdi:youtube'|icon('iconify', 'o-icon c-profile-menu-icon')|safe }}
34 | 					<span class="c-menu-text t-topic-text u-sr-only">{{ lang.contact_youtube }}</span>
35 | 				</a>
36 | 			</li>
37 | 		</ul>
38 | 	</div>
39 | 	<a class="c-profile-action c-profile-close" href="" data-tooltip="true" data-close="true" title="{{ lang.profile_close }}">
40 | 		{{ 'mdi:close'|icon('iconify', 'o-icon c-profile-menu-icon')|safe }}
41 | 	</a>
42 | 	<div class="o-avatar-wrap">
43 | 		<a class="o-avatar-rate-good" href="" data-tooltip="true" title="{{ lang.profile_rating_up }}">{{ 'mdi:thumbs-up-outline'|icon('iconify', 'o-icon c-profile-menu-icon')|safe }}</a>
44 | 		<a class="" href="{{ item.url }}">
45 | 			<img class="o-avatar" src="{{ item.avatar }}" alt="User Avatar">
46 | 		</a>
47 | 		<a class="o-avatar-rate-bad" href="" data-tooltip="true" title="{{ lang.profile_rating_down }}">{{ 'mdi:thumbs-down-outline'|icon('iconify', 'o-icon c-profile-menu-icon')|safe }}</a>
48 | 		{% if item.online %}
49 | 			<span class="o-avatar-online" data-tooltip="true" title="{{ lang.profile_online }}"></span>
50 | 		{% endif %}
51 | 	</div>
52 | 	<h4 class="c-profile-meta">
53 | 		<a class="c-profile-user" href="{{ item.url }}" style="color: {{ item.color }};">{{ item.name }}</a>
54 | 		{% if item.rank %}
55 | 			<small class="c-profile-user-title">{{ item.rank }}</small>
56 | 		{% endif %}
57 | 		{% if item.badge %}
58 | 		<a class="c-group-link" href="{{ item.group_url }}">
59 | 			{{ item.badge|safe }}
60 | 		</a>
61 | 		{% endif %}
62 | 	</h4>
63 | 	<ul class="c-profile-stats">
64 | 		<li class="c-profile-stat">
65 | 			<h5 class="c-profile-stat-wrap">
66 | 				{{ 'mdi:comment-text-outline'|icon('iconify', 'o-icon')|safe }}<span class="c-profile-stat-title">{{ lang.profile_posts }}</span>
67 | 				<small class="c-profile-stat-value">{{ item.posts }}</small>
68 | 			</h5>
69 | 		</li>
70 | 		<li class="c-profile-stat">
71 | 			<h5 class="c-profile-stat-wrap">
72 | 				{{ 'mdi:clock-outline'|icon('iconify', 'o-icon')|safe }}<span class="c-profile-stat-title">{{ lang.profile_joined }}</span>
73 | 				<small class="c-profile-stat-value">
74 | 					<time>{{ item.joined|moment("YYYYMMDD", true) }}</time>
75 | 				</small>
76 | 			</h5>
77 | 		</li>
78 | 		<li class="c-profile-stat">
79 | 			<h5 class="c-profile-stat-wrap">
80 | 				{{ 'mdi:thumb-up-outline'|icon('iconify', 'o-icon')|safe }}<span class="c-profile-stat-title">{{ lang.rating }}</span>
81 | 				<small class="c-profile-stat-value"><span class="{% if item.rating|int < 0 %}c-profile-rating-bad{% else %}c-profile-rating-good{% endif %}">{{ item.rating }}</span></small>
82 | 			</h5>
83 | 		</li>
84 | 		<li class="c-profile-stat">
85 | 			<h5 class="c-profile-stat-wrap">
86 | 				{{ 'ic:outline-room'|icon('iconify', 'o-icon')|safe }}<span class="c-profile-stat-title">{{ lang.profile_location }}</span>
87 | 				<small class="c-profile-stat-value">{{ item.location }}</small>
88 | 			</h5>
89 | 		</li>
90 | 		<li class="c-profile-stat">
91 | 			<h5 class="c-profile-stat-wrap">
92 | 				{{ 'mdi:heart-outline'|icon('iconify', 'o-icon')|safe }}<span class="c-profile-stat-title">{{ lang.profile_likes }}</span>
93 | 				<small class="c-profile-stat-value"><span class="{% if item.likes|int < 0 %}c-profile-rating-bad{% else %}c-profile-rating-good{% endif %}">{{ item.likes }}</span></small>
94 | 			</h5>
95 | 		</li>
96 | 	</ul>
97 | </div>
98 | 


--------------------------------------------------------------------------------
/all/views/includes/forums.twig:
--------------------------------------------------------------------------------
  1 | {% for item in forums %}
  2 | 	{% if item.cat == 1 %}
  3 | 		{% if loop.first %}
  4 | 			<div class="c-forum-cat t-forum-cat" role="list">
  5 | 				<div class="o-bar c-forum-cat-header t-forum-cat-header" role="list" data-toggle-parent="collapse">
  6 | 					<div class="o-bar-left c-forum-cat-header-left t-forum-cat-header-left">
  7 | 						<span class="o-bar-item c-forum-cat-header-item t-forum-cat-header-item">
  8 | 							<h2 class="o-bar-title c-forum-cat-header-title t-forum-cat-header-title" role="heading" aria-level="2">
  9 | 								<a class="c-forum-cat-link t-forum-cat-link" href="{{ item.url }}">{{ item.name }}</a>
 10 | 							</h2>
 11 | 						</span>
 12 | 					</div>
 13 | 					<div class="o-bar-right c-forum-cat-header-right t-forum-cat-header-right">
 14 | 						<a class="o-bar-item o-action c-forum-cat-header-action t-forum-cat-header-action" href="#" data-tooltip="true" data-toggle="collapse" data-toggle-tooltip="Expand" title="Collapse">
 15 | 							{{ 'mdi:chevron-up'|icon('iconify', 'o-icon o-action-icon c-forum-cat-header-action-icon t-forum-cat-header-action-icon')|safe }}
 16 | 						</a>
 17 | 					</div>
 18 | 				</div>
 19 | 				<div class="c-forum-deck t-forum-deck" data-container="collapse">
 20 | 		{% else %}
 21 | 				</div>
 22 | 			</div>
 23 | 			<div class="c-forum-cat t-forum-cat" role="list">
 24 | 				<div class="o-bar c-forum-cat-header t-forum-cat-header" role="list" data-toggle-parent="collapse">
 25 | 					<div class="o-bar-left c-forum-cat-header-left t-forum-cat-header-left">
 26 | 						<span class="o-bar-item c-forum-cat-header-item t-forum-cat-header-item">
 27 | 							<h2 class="o-bar-title c-forum-cat-header-title t-forum-cat-header-title" role="heading" aria-level="2">
 28 | 								<a class="c-forum-cat-link t-forum-cat-link" href="{{ item.url }}">{{ item.name }}</a>
 29 | 							</h2>
 30 | 						</span>
 31 | 					</div>
 32 | 					<div class="o-bar-right c-forum-cat-header-right t-forum-cat-header-right">
 33 | 						<a class="o-bar-item o-action c-forum-cat-header-action t-forum-cat-header-action" href="#" data-tooltip="true" data-toggle="collapse" title="Collapse">
 34 | 							{{ 'mdi:chevron-up'|icon('iconify', 'o-icon o-action-icon c-forum-cat-header-action-icon t-forum-cat-header-action-icon')|safe }}
 35 | 						</a>
 36 | 					</div>
 37 | 				</div>
 38 | 				<div class="c-forum-deck t-forum-deck" data-container="collapse">
 39 | 		{% endif %}
 40 | 	{% elseif item.cat == 0 %}
 41 | 					<div class="c-forum t-forum" role="listitem">
 42 | 						<a class="c-forum-body t-forum-body" href="{{ item.url }}">
 43 | 							<span class="c-forum-media t-forum-media">
 44 | 							{% if item.status == 0 %}
 45 | 								{{ item.type|icon('inline', 'o-icon c-forum-media-icon t-forum-media-icon')|safe }}
 46 | 							{% else %}
 47 | 								{{ item.type|icon('inline', 'o-icon c-forum-media-icon-read t-forum-media-icon-read')|safe }}
 48 | 							{% endif %}
 49 | 							</span>
 50 | 							<span class="c-forum-info t-forum-info">
 51 | 								<h4 class="c-forum-title t-forum-title" role="heading" aria-level="3">
 52 | 									{% if item.icon %}
 53 | 										{{ item.icon|icon('inline', 'o-icon c-forum-title-icon t-forum-title-icon')|safe }}
 54 | 									{% endif %}
 55 | 									{{ item.name }}
 56 | 								</h4>
 57 | 								<p class="c-forum-text t-forum-text">
 58 | 									{{ item.desc }}
 59 | 								</p>
 60 | 							</span>
 61 | 						</a>
 62 | 						<div class="o-bar c-forum-footer t-forum-footer">
 63 | 							<div class="o-bar-left c-forum-footer-left">
 64 | 								<span class="o-bar-item c-forum-footer-item">
 65 | 									<span class="o-bar-info c-forum-footer-info">
 66 | 										{{ 'mdi:file-outline'|icon('iconify', 'o-icon o-bar-info-icon c-forum-footer-info-icon')|safe }}
 67 | 										<span class="o-bar-item-text c-forum-footer-text">{{ item.topics }}</span>
 68 | 									</span>
 69 | 								</span>
 70 | 								<span class="o-bar-item c-forum-footer-item">
 71 | 									<span class="o-bar-info c-forum-footer-info">
 72 | 										{{ 'mdi:comment-text-outline'|icon('iconify', 'o-icon o-bar-info-icon c-forum-footer-info-icon')|safe }}
 73 | 										<span class="o-bar-item-text c-forum-footer-text">{{ item.posts }}</span>
 74 | 									</span>
 75 | 								</span>
 76 | 							</div>
 77 | 							{% if item.type !== 'link' %}
 78 | 							<div class="o-bar-right c-forum-footer-right">
 79 | 								{% if item.last_subject %}
 80 | 								<a class="o-bar-item o-action c-forum-footer-action" href="" {% if item.last_color %} style="color: {{ item.last_color }}" {% endif %}data-tooltip="true" title="{{ item.last_subject }}, by {{ item.last_author }}, <br>{{ item.last_time|moment("YYYYMMDD", true) }}">
 81 | 									{{ 'mdi:page-last'|icon('iconify', 'o-icon o-action-icon c-forum-footer-action-icon')|safe }}
 82 | 								</a>
 83 | 								{% endif %}
 84 | 								{% if item.subs %}
 85 | 								<span class="o-bar-item c-forum-footer-item">
 86 | 									<a class="o-action c-forum-footer-action" href="" data-toggle="menu" data-tooltip="true" title="{{ lang.subforums }}">
 87 | 										{{ 'mdi:more-vert'|icon('iconify', 'o-icon o-action-icon c-forum-footer-action-icon')|safe }}
 88 | 									</a>
 89 | 									<div class="c-menu-container t-menu-container" data-container="menu">
 90 | 										<ul class="c-menu t-menu">
 91 | 											{% for sub in item.subs %}
 92 | 											<li class="c-menu-item t-menu-item">
 93 | 												<a class="c-menu-link t-menu-item" href="{{ sub.url }}">
 94 | 													{{ 'circle-small-outline'|icon('inline', 'o-icon c-menu-link-icon t-menu-forum-icon')|safe }}
 95 | 													<span class="c-menu-text t-forum-text">{{ sub.name }}</span>
 96 | 												</a>
 97 | 											</li>
 98 | 											{% endfor %}
 99 | 										</ul>
100 | 									</div>
101 | 								</span>
102 | 								{% endif %}
103 | 							</div>
104 | 							{% endif %}
105 | 						</div>
106 | 					</div>
107 | 	{% endif %}
108 | 	{% if loop.last %}
109 | 			</div>
110 | 		</div>
111 | 	{% endif %}
112 | {% endfor %}
113 | 


--------------------------------------------------------------------------------
/all/scss/components/_notification.scss:
--------------------------------------------------------------------------------
  1 | //------------------------------------------------------------------------------
  2 | // @component: Notification
  3 | //------------------------------------------------------------------------------
  4 | // @author: hanakin -- midaym
  5 | // @version: 0.3.0
  6 | // @description
  7 | //
  8 | //------------------------------------------------------------------------------
  9 | 
 10 | //
 11 | // @settings
 12 | 
 13 | // Layout Variables
 14 | $notification-spacing: $default-spacing !default;
 15 | $notification-border-radius: $default-border-radius !default;
 16 | $notification-border-size: $default-border-size !default;
 17 | $notification-icon-size: $default-icon-md !default;
 18 | $notification-meta-border-radius: 50% !default;
 19 | $notification-container-width: 350px !default;
 20 | $notification-container-size-lg: 420px !default;
 21 | 
 22 | // Theme Variables
 23 | $notification-bg-color: $default-background-color !default;
 24 | $notification-hover-color: $default-surface-color !default;
 25 | $notification-approved-color: $default-success-color !default;
 26 | $notification-approved-hover-color: $default-success-dark-color !default;
 27 | $notification-disapproved-color: $default-error-color !default;
 28 | $notification-disapproved-hover-color: $default-error-dark-color !default;
 29 | $notification-border-color: $default-border-color !default;
 30 | $notification-action-icon-color: $default-surface-item-color !default;
 31 | $notification-action-color-hover: $default-action-color-hover !default;
 32 | $notification-action-bg: $default-surface-alt-color !default;
 33 | $notification-unread: $default-primary-color !default;
 34 | $notification-unread-color: $default-primary-item-color !default;
 35 | 
 36 | 
 37 | //
 38 | // @scss
 39 | .c-notification {
 40 | 	&-container {
 41 | 		@include shadow(4);
 42 | 		position: absolute;
 43 | 		z-index: 999;
 44 | 		right: 0;
 45 | 		// overflow: auto;
 46 | 		width: $notification-container-width;
 47 | 		margin-top: 1px;
 48 | 		transition: all 0.2s ease;
 49 | 		transform: scale(0);
 50 | 		transform-origin: right top;
 51 | 
 52 | 		&.is-active {
 53 | 			transform: scale(1);
 54 | 		}
 55 | 
 56 | 		@media (min-width: $md) {
 57 | 			width: $notification-container-size-lg;
 58 | 		}
 59 | 	}
 60 | 
 61 | 	&-list {
 62 | 		@include type(subhead1, $lh: 1.5);
 63 | 		letter-spacing: calc((0.15 / 16) * 1em);
 64 | 		overflow-x: hidden;
 65 | 		overflow-y: scroll;
 66 | 		max-height: $notification-container-size-lg;
 67 | 		margin: 0;
 68 | 		padding: 0;
 69 | 		list-style: none;
 70 | 	}
 71 | 
 72 | 	&-header {
 73 | 		border-bottom: $notification-border-size solid $notification-border-color;
 74 | 		border-top-left-radius: $notification-border-radius;
 75 | 		border-top-right-radius: $notification-border-radius;
 76 | 
 77 | 		&-action {
 78 | 			border-top-right-radius: $notification-border-radius;
 79 | 		}
 80 | 	}
 81 | 
 82 | 	&-item {
 83 | 		background-color: $notification-bg-color;
 84 | 		border-top: $notification-border-size solid $notification-border-color;
 85 | 		position: relative;
 86 | 		display: grid;
 87 | 		overflow: hidden;
 88 | 		padding: 1rem;
 89 | 		grid-template-areas:
 90 | 			'media users action'
 91 | 			'media title action'
 92 | 			'media time action';
 93 | 		grid-template-columns: 56px auto 92px;
 94 | 		grid-template-rows: auto;
 95 | 
 96 | 		&:hover {
 97 | 			background-color: $notification-hover-color;
 98 | 			transition: 0.5s;
 99 | 		}
100 | 
101 | 		&:first-of-type {
102 | 			border: none;
103 | 		}
104 | 	}
105 | 
106 | 	&-media {
107 | 		align-self: center;
108 | 		margin-right: 1rem;
109 | 		grid-area: media;
110 | 		justify-self: start;
111 | 	}
112 | 
113 | 	&-users {
114 | 		align-self: center;
115 | 		grid-area: users;
116 | 	}
117 | 
118 | 	&-user {
119 | 		&:hover {
120 | 			text-decoration: underline;
121 | 		}
122 | 	}
123 | 
124 | 	&-title {
125 | 		align-self: center;
126 | 		grid-area: title;
127 | 	}
128 | 
129 | 	&-time {
130 | 		align-self: center;
131 | 		grid-area: time;
132 | 	}
133 | 
134 | 	&-action {
135 | 		border-radius: $notification-meta-border-radius;
136 | 		color: $notification-action-icon-color;
137 | 		align-self: center;
138 | 		padding: ($notification-spacing * 2);
139 | 		transition: transform 0.5s, opacity 1s;
140 | 		transform: translate3d(0, 0, 0);
141 | 		grid-area: action;
142 | 		justify-self: end;
143 | 
144 | 		&:after {
145 | 			background-image: radial-gradient(circle, $black 10%, transparent 10.01%);
146 | 			background-repeat: no-repeat;
147 | 			background-position: 50%;
148 | 			opacity: 0;
149 | 			position: absolute;
150 | 			top: 0;
151 | 			left: 0;
152 | 			display: block;
153 | 			width: 100%;
154 | 			height: 100%;
155 | 			content: '';
156 | 			transition: transform 0.5s, opacity 1s;
157 | 			transform: scale(10, 10);
158 | 			pointer-events: none;
159 | 		}
160 | 
161 | 		&:active:after {
162 | 			opacity: 0.2;
163 | 			transition: 0s;
164 | 			transform: scale(0, 0);
165 | 		}
166 | 
167 | 		&:hover {
168 | 			background-color: $notification-action-bg;
169 | 			color: $notification-action-color-hover;
170 | 		}
171 | 
172 | 		&-icon {
173 | 			width: 40px;
174 | 			height: 40px;
175 | 		}
176 | 	}
177 | 
178 | 	&-approved {
179 | 		color: $notification-approved-color;
180 | 
181 | 		&:hover {
182 | 			color: $notification-approved-hover-color;
183 | 		}
184 | 	}
185 | 
186 | 	&-unapproved {
187 | 		color: $notification-disapproved-color;
188 | 
189 | 		&:hover {
190 | 			color: $notification-disapproved-hover-color;
191 | 		}
192 | 	}
193 | 
194 | 	&-unread .c-notification-action {
195 | 		background-color: $notification-unread;
196 | 		color: $notification-unread-color;
197 | 		transition: transform 0.5s, opacity 1s;
198 | 
199 | 		&:hover {
200 | 			background-color: $notification-action-bg;
201 | 			color: $notification-action-color-hover;
202 | 		}
203 | 	}
204 | 
205 | 	&-unread .c-notification-unapproved {
206 | 		background-color: $notification-disapproved-color;
207 | 
208 | 		&:hover {
209 | 			color: $notification-disapproved-color;
210 | 		}
211 | 	}
212 | 
213 | 	&-unread .c-notification-approved {
214 | 		background-color: $notification-approved-color;
215 | 
216 | 		&:hover {
217 | 			color: $notification-approved-color;
218 | 		}
219 | 	}
220 | 
221 | 	&-footer {
222 | 		border-top: $notification-border-size solid $notification-border-color;
223 | 		border-bottom-right-radius: $notification-border-radius;
224 | 		border-bottom-left-radius: $notification-border-radius;
225 | 
226 | 		&-action {
227 | 			text-transform: uppercase;
228 | 			border-bottom-right-radius: $notification-border-radius;
229 | 			border-bottom-left-radius: $notification-border-radius;
230 | 			grid-column: span 2;
231 | 		}
232 | 	}
233 | }
234 | 


--------------------------------------------------------------------------------