valentin.dupont/boule2neige
valentin.dupont/boule2neige
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

lololol

Browse Source
This commit is contained in:
Valentin DUPONT 2026-01-16 16:17:20 +01:00
parent 80c3745603
commit ab9d29da8b
192 changed files with 19001 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -25,6 +25,7 @@ user/plugins/*
!user/plugins/.*
user/themes/*
!user/themes/.*
!user/themes/test*
user/**/config/security.yaml
# Environments

221
user/themes/test/CHANGELOG.md Normal file
View File

@ -0,0 +1,221 @@
# v2.1.2
## 8/25/2025
1. [](#new)
* Added `comments.html.twig` for native Comments Pro support
# v2.1.1
## 03/14/2025
1. [](#new)
* Added modular template
* Added multilingual support for the theme options in the admin panel. Initial translations include English and Spanish.
* Added a new toggle option in the admin panel for modular pages to enable or disable the `onepage_menu` functionality directly from the page settings.
1. [](#bugfix)
* Removed double `login-status.html.twig` reference, and added `ignore missing` on include in `base.html.twig`
# v2.1.0
## 03/08/2025
1. [](#new)
* Added Estonian translation [PR#205](https://github.com/getgrav/grav-theme-quark/pull/205)
* Added Japanese translation [PR#126](https://github.com/getgrav/grav-theme-quark/pull/126)
* Added Polish translation [PR#173](https://github.com/getgrav/grav-theme-quark/pull/173)
# v2.0.5
## 03/05/2025
1. [](#improved)
* Added `login-status.html.twig` if available
* Updated `partials/taxonomylist.html.twig` to support latest updates in that plugin
* Added `children_only: true` to sidebar template
* Fixed `label-primary` class in relatedpages template
* Updated README.md [#PR208](https://github.com/getgrav/grav-theme-quark/pull/208)
* Applied taxonomy value date format setting in Archives template [#PR165](https://github.com/getgrav/grav-theme-quark/pull/165)
# v2.0.4
## 09/29/2021
1. [](#new)
* Added simple gallery modular page for `lightbox-gallery` plugin
2. [](#bugfix)
* Fixed `radio` form field error when admin isn't installed
* Translate `grid size` text
# v2.0.3
## 06/08/2020
1. [](#improved)
* Updated some JS libraries
* Simplified navigation macro
* Use `site.title` in logo alt text [#139](https://github.com/getgrav/grav-theme-quark/pull/109)
# v2.0.2
## 08/09/2019
1. [](#improved)
* Allow for overriding of `{% block content %}{% endblock %}`
* Improved default `.table` styling
* Simplified navigation macro
1. [](#bugfix)
* Fixed issue with Prism Highlight [prism-highlight#1](https://github.com/trilbymedia/grav-plugin-prism-highlight/issues/1)
* Use slug for onpage links [#115](https://github.com/getgrav/grav-theme-quark/issues/115)
* Fixed 2 minor YAML linting issues
# v2.0.1
## 05/09/2019
1. [](#improved)
* Typo in blueprints [#109](https://github.com/getgrav/grav-theme-quark/pull/109)
* Added convenience scripts to `package.json` [#110](https://github.com/getgrav/grav-theme-quark/pull/110)
* Added Czech translation [#106](https://github.com/getgrav/grav-theme-quark/pull/106)
* Added Chinese translation [#114](https://github.com/getgrav/grav-theme-quark/pull/114)
* Removed redundant code [#104](https://github.com/getgrav/grav-theme-quark/pull/104)
* Updated to match Archives plugin translation output
1. [](#bugfix)
* Bugfix to class in macro [#105](https://github.com/getgrav/grav-theme-quark/pull/105)
* Bugfix a z-index issue [#75](https://github.com/getgrav/grav-theme-quark/pull/75)
# v2.0.0
## 04/11/2019
1. [](#improved)
* Updated to use new `GRAV` core language prefix
* Updated [Spectre.css](https://picturepan2.github.io/spectre/) to latest `0.5.8` version
* Support for 2FA panel styling
* Updated to Yarn 4.0 syntax
* Restructured SCSS to ensure easier Spectre updates in future
1. [](#bugfix)
* Some checkboxes fixes for Forms 3.0
* More Twig 2.0 compatibility fixes
* Fixed a Twig 2.0 issue with assets rendering
# v1.2.6
## 03/21/2019
1. [](#new)
* Set Dependency of Grav 1.5.10+ which has support for new **Deferred Block** Twig extension
* Implement assets rendering using **Deferred Block** Twig extension
# v1.2.5
## 12/07/2018
1. [](#improved)
* Updated [Spectre.css](https://picturepan2.github.io/spectre/) to latest `0.5.7` version
1. [](#bugfix)
* Fixed missing `</html>` close tag in bae template [#76](https://github.com/getgrav/grav-theme-quark/pull/76)
# v1.2.4
## 11/12/2018
1. [](#improved)
* Updated [Spectre.css](https://picturepan2.github.io/spectre/) to latest `0.5.5` version
* Added link support to modular `features` [#39](https://github.com/getgrav/grav-theme-quark/pull/39/)
* Remove desktop menu when in mobile mode [#59](https://github.com/getgrav/grav-theme-quark/pull/59/)
* Support modular `text` full-width if no image [#70](https://github.com/getgrav/grav-theme-quark/issues/70)
* Shim for IE support of BrickLayer.js [#64](https://github.com/getgrav/grav-theme-quark/issues/64)
1. [](#bugfix)
* Fixed `continue_link:` showing up as toggled [#65](https://github.com/getgrav/grav-theme-quark/issues/65)
* Fixed issue with modular pages not hidden in on-page menu with `visible: false` [#71](https://github.com/getgrav/grav-theme-quark/issues/71)
# v1.2.3
## 11/05/2018
1. [](#improved)
* Moved footer into standalone twig to allow for easier extensibility [#63](https://github.com/getgrav/grav-theme-quark/pull/63)
1. [](#bugfix)
* Fix variable name for prouction mode [#61](https://github.com/getgrav/grav-theme-quark/pull/61)
* Fix layout size in features blueprint [#67](https://github.com/getgrav/grav-theme-quark/pull/67)
* Fix active page logic in `nav` so there's no empty class attributes [#68](https://github.com/getgrav/grav-theme-quark/pull/68)
* Fix for features blueprint because `class` didn't work [#69](https://github.com/getgrav/grav-theme-quark/pull/69)
# v1.2.2
## 10/24/2018
1. [](#improved)
* Changed nav macro to format supported by Twig 2.0
* Updated `partials/form-messages.html.twig` to be more inline with latest Forms plugin
1. [](#bugfix)
* Make the theme to work with Twig auto-escaping turned on
* Moved language strings under `THEME_QUARK`
# v1.2.1
## 08/23/2018
1. [](#improved)
* Added additional "mobile custom logo" support
1. [](#bugfix)
* Addressed some CSS issues by forcing logo height
# v1.2.0
## 08/23/2018
1. [](#new)
* Added new "custom logo" support [#3](https://github.com/getgrav/grav-theme-quark/issues/3)
* Added option JSON feed syndication support in sidebar [#47](https://github.com/getgrav/grav-theme-quark/pull/47)
* Added basic form field `array` styling
# v1.1.0
## 07/25/2018
1. [](#new)
* Responsive font sizing [#28](https://github.com/getgrav/grav-theme-quark/issues/28)
1. [](#improved)
* Updated [Spectre.css](https://picturepan2.github.io/spectre/) to latest `0.5.3` version
* Make blog settings toggleable [#38](https://github.com/getgrav/grav-theme-quark/pull/38)
1. [](#bugfix)
* Proper fix for sticky footer in IE10 and IE11 [#21](https://github.com/getgrav/grav-theme-quark/issues/21)
* Fix for lists wrapping weirdly due to `outside` attribute
* Updated checkbox + radio to take into account `client_side_validation` form option
* Fixes for fallback values [#37](https://github.com/getgrav/grav-theme-quark/pull/37)
* Fix inheritance for images folder [#30](https://github.com/getgrav/grav-theme-quark/pull/30)
* Added blueprint option for `continue_link` [#45](https://github.com/getgrav/grav-theme-quark/issues/45)
* Added blueprint option for Feature `class` [#14](https://github.com/getgrav/grav-theme-quark/issues/14)
* Fixed `Duplicate ID` issues with modular sections. Might break CSS on first load, need to refresh to pick up new CSS [#24](https://github.com/getgrav/grav-theme-quark/issues/24)
* Fixed Text feature alignment issue [#4](https://github.com/getgrav/grav-theme-quark/issues/4)
* Overlapping menu and mobile button [#7](https://github.com/getgrav/grav-theme-quark/issues/7)
# v1.0.3
## 05/11/2018
1. [](#new)
* Added new primary button mixin
1. [](#improved)
* Updated [Spectre.css](https://picturepan2.github.io/spectre/) to latest `0.5.1` version
* Improved default login styling
* Removed core Spectre.css override to make upgrading Spectre easier
* Added screenshot to README.md
* Override focus to prevent overzealous blue blurs
1. [](#bugfix)
* Fix for `highlight` plugin not changing background of code blocks
* Removed extraneous `dump()` in Twig output
# v1.0.2
## 02/19/2018
1. [](#new)
* Added toggle options to enable Spectre.css _experimentals_ and _icons_ CSS files
* Switched to a fork of LineAwesome icons compatible with FontAwesome 4.7.0
1. [](#improved)
* Font tweaks
1. [](#bugfix)
* Pagination fixes
# v1.0.1
## 01/22/2018
1. [](#new)
* Added blueprints for admin editing
1. [](#improved)
* Use default lang from `site.yaml`
1. [](#bugfix)
* Fixed Current path to address issues with extending Quark
* Fixed parallax to start in same position as standard
* Fixed modular image size
# v1.0.0
## 12/28/2017
1. [](#new)
* ChangeLog started...

21
user/themes/test/LICENSE Normal file
View File

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

153
user/themes/test/README.md Normal file
View File

@ -0,0 +1,153 @@
# Quark Theme
![](assets/quark-screenshots.jpg)
**Quark** is the new default theme for [Grav CMS](http://github.com/getgrav/grav). This theme is built with the [Spectre.css](https://picturepan2.github.io/spectre/) framework and provides a powerful base for developing your own themes. Quark uses functionality that is only available in Grav 1.4+, as such you cannot run Quark on earlier versions of Grav.
## Features
* Lightweight and minimal for optimal performance
* Spectre CSS Framework
* Fully responsive with full-page mobile navigation
* SCSS based CSS source files for easy customization
* Built-in support for on-page navigation
* Multiple page template types
* Fontawesome icon support
### Supported Page Templates
* Default view template `default.md`
* Error view template `error.md`
* Blog view template `blog.md`
* Blog item view template `item.md`
* Modular view templates: `modular.md`
* Features Modular view template `features.md`
* Hero Modular view template `hero.md`
* Text Modular view template `text.md`
* Note: Gallery Modular view template `gallery.md` only works in concert with premium plugin [Lightbox Gallery](https://getgrav.org/premium/lightbox-gallery/docs)
# Installation
Installing the Quark theme can be done in one of two ways. Our GPM (Grav Package Manager) installation method enables you to quickly and easily install the theme with a simple terminal command, while the manual method enables you to do so via a zip file.
The theme by itself is useful, but you may have an easier time getting up and running by installing a skeleton. The Quark theme can be found in both the [One-page](https://github.com/getgrav/grav-skeleton-onepage-site) and [Blog Site](https://github.com/getgrav/grav-skeleton-blog-site) which are self-contained repositories for a complete sites which include: sample content, configuration, theme, and plugins.
## GPM Installation (Preferred)
The simplest way to install this theme is via the [Grav Package Manager (GPM)](http://learn.getgrav.org/advanced/grav-gpm) through your system's Terminal (also called the command line). From the root of your Grav install type:
bin/gpm install quark
This will install the Quark theme into your `/user/themes` directory within Grav. Its files can be found under `/your/site/grav/user/themes/quark`.
## Manual Installation
To install this theme, just download the zip version of this repository and unzip it under `/your/site/grav/user/themes`. Then, rename the folder to `quark`. You can find these files either on [GitHub](https://github.com/getgrav/grav-theme-quark) or via [GetGrav.org](http://getgrav.org/downloads/themes).
You should now have all the theme files under
/your/site/grav/user/themes/quark
## Default Options
Quark comes with a few default options that can be set site-wide. These options are:
```yaml
enabled: true # Enable the theme
production-mode: true # In production mode, only minified CSS is used. When disabled, nested CSS with sourcemaps are enabled
grid-size: grid-lg # The max-width of the theme, options include: `grid-xl`, `grid-lg`, and `grid-md`
header-fixed: true # Cause the header to be fixed at the top of the browser
header-animated: true # Allows the fixed header to resize to a smaller header when scrolled
header-dark: false # Inverts the text/logo to work better on dark backgrounds
header-transparent: false # Allows the fixed header to be transparent over the page
sticky-footer: true # Causes the footer to be sticky at the bottom of the page
blog-page: '/blog' # The route to the blog listing page, useful for a blog style layout with sidebar
custom_logo: # A custom logo rather than the default (see below)
custom_logo_mobile: # A custom logo to use for mobile navigation
```
To make modifications, you can copy the `user/themes/quark/quark.yaml` file to `user/config/themes/` folder and modify, or you can use the admin plugin.
> NOTE: Do not modify the `user/themes/quark/quark.yaml` file directly or your changes will be lost with any updates
## Custom Logos
To add a custom logo, you should put the log into the `user/themes/quark/images/logo` folder. Standard image formats are support (`.png`,`.jpg`, `.gif`, `.svg`, etc.). Then reference the logo via the YAML like so:
```yaml
custom_logo:
- name: 'my-logo.png'
custom_logo_mobile:
- name: 'my-mobile-logo.png'
```
Alternatively, you can you use the drag-n-drop "Custom Logo" field in the Quark theme options.
## Page Overrides
Quark has the ability to allow pages to override some of the default options by letting the user set `body_classes` for any page. The theme will merge the combination of the defaults with any `body_classes` set. For example:
```yaml
body_classes: "header-dark header-transparent"
```
On a particular page will ensure that page has those options enabled (assuming they are false by default).
## Hero Options
The hero template allows some options to be set in the page frontmatter. This is used by the modular `hero` as well as the blog and item templates to provide a more dynamic header.
```yaml
hero_classes: text-light title-h1h2 parallax overlay-dark-gradient hero-large
hero_image: road.jpg
hero_align: center
```
The `hero_classes` option allows a variety of hero classes to be set dynamically these include:
* `text-light` | `text-dark` - Controls if the text should be light or dark depending on the content
* `title-h1h2` - Enforced a close matched h1/h2 title pairing
* `parallax` - Enables a CSS-powered parallax effect
* `overlay-dark-gradient` - Displays a transparent gradient which further darkens the underlying image
* `overlay-light-gradient` - Displays a transparent gradient which further lightens the underlying image
* `overlay-dark` - Displays a solid transparent overlay which further darkens the underlying image
* `overlay-light` - Displays a solid transparent overlay which further darkens the underlying image
* `hero-fullscreen` | `hero-large` | `hero-medium` | `hero-small` | `hero-tiny` - Size of the hero block
The `hero_image` should point to an image file in the current page folder.
## Features Modular Options
The features modular template provides the ability to set a class on the features, as well as an array of feature items. For example:
```yaml
class: offset-box
features:
- header: Crazy Fast
text: "Performance is not just an afterthought, we baked it in from the start!"
icon: fighter-jet
- header: Easy to build
text: "Simple text files means Grav is trivial to install, and easy to maintain"
icon: database
- header: Awesome Technology
text: "Grav employs best-in-class technologies such as Twig, Markdown &amp; Yaml"
icon: cubes
- header: Super Flexible
text: "From the ground up, with many plugin hooks, Grav is extremely extensible"
icon: object-ungroup
- header: Abundant Plugins
text: "A vibrant developer community means over 200 themes available to download"
icon: puzzle-piece
- header: Free / Open Source
text: "Grav is an open source project, so you can spend your money on other stuff"
icon: money
```
## Text Modular Options
The text box provides a single option to control if any image found in the page folder should be left or right aligned:
```yaml
image_align: right
```

BIN
user/themes/test/assets/quark-screenshots.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 193 KiB

176
user/themes/test/blueprints.yaml Normal file
View File

@ -0,0 +1,176 @@
name: Quark
slug: quark
type: theme
version: 2.1.2
description: New Grav Default Theme
icon: microchip
author:
name: Team Grav
email: devs@getgrav.org
url: https://getgrav.org
homepage: https://github.com/getgrav/grav-theme-quark
demo: https://demo.getgrav.org/onepage-skeleton
keywords: quark, spectre, theme, core, modern, fast, responsive, html5, css3
bugs: https://github.com/getgrav/grav-theme-quark/issues
license: MIT
dependencies:
- { name: grav, version: '>=1.6.0' }
form:
validation: loose
fields:
production-mode:
type: toggle
label: THEME_QUARK.ADMIN.PRODUCTION_MODE
help: THEME_QUARK.ADMIN.PRODUCTION_MODE_HELP
highlight: 1
default: 1
options:
1: PLUGIN_ADMIN.ENABLED
0: PLUGIN_ADMIN.DISABLED
validate:
type: bool
grid-size:
type: select
label: THEME_QUARK.ADMIN.GRID_SIZE
help: THEME_QUARK.ADMIN.GRID_SIZE_HELP
size: small
options:
'': THEME_QUARK.ADMIN.GRID_SIZE_NONE
grid-xl: THEME_QUARK.ADMIN.GRID_SIZE_EXTRA_LARGE
grid-lg: THEME_QUARK.ADMIN.GRID_SIZE_LARGE
grid-md: THEME_QUARK.ADMIN.GRID_SIZE_MEDIUM
header_section:
type: section
title: THEME_QUARK.ADMIN.HEADER_DEFAULTS
underline: true
custom_logo:
type: file
label: THEME_QUARK.ADMIN.CUSTOM_LOGO
size: large
destination: 'theme://images/logo'
multiple: false
markdown: true
description: THEME_QUARK.ADMIN.CUSTOM_LOGO_DESCRIPTION
accept:
- image/*
custom_logo_mobile:
type: file
label: THEME_QUARK.ADMIN.CUSTOM_LOGO_MOBILE
size: large
destination: 'theme://images/logo'
multiple: false
accept:
- image/*
header-fixed:
type: toggle
label: THEME_QUARK.ADMIN.HEADER_FIXED
help: THEME_QUARK.ADMIN.HEADER_FIXED_HELP
highlight: 1
default: 1
options:
1: PLUGIN_ADMIN.ENABLED
0: PLUGIN_ADMIN.DISABLED
validate:
type: bool
header-animated:
type: toggle
label: THEME_QUARK.ADMIN.HEADER_ANIMATED
help: THEME_QUARK.ADMIN.HEADER_ANIMATED_HELP
highlight: 1
default: 1
options:
1: PLUGIN_ADMIN.ENABLED
0: PLUGIN_ADMIN.DISABLED
validate:
type: bool
header-dark:
type: toggle
label: THEME_QUARK.ADMIN.HEADER_DARK
help: THEME_QUARK.ADMIN.HEADER_DARK_HELP
highlight: 0
default: 0
options:
1: PLUGIN_ADMIN.ENABLED
0: PLUGIN_ADMIN.DISABLED
validate:
type: bool
header-transparent:
type: toggle
label: THEME_QUARK.ADMIN.HEADER_TRANSPARENT
help: THEME_QUARK.ADMIN.HEADER_TRANSPARENT_HELP
highlight: 0
default: 0
options:
1: PLUGIN_ADMIN.ENABLED
0: PLUGIN_ADMIN.DISABLED
validate:
type: bool
footer_section:
type: section
title: THEME_QUARK.ADMIN.FOOTER_DEFAULTS
underline: true
sticky-footer:
type: toggle
label: THEME_QUARK.ADMIN.STICKY_FOOTER
help: THEME_QUARK.ADMIN.STICKY_FOOTER_HELP
highlight: 1
default: 1
options:
1: PLUGIN_ADMIN.ENABLED
0: PLUGIN_ADMIN.DISABLED
validate:
type: bool
blog_section:
type: section
title: THEME_QUARK.ADMIN.BLOG_DEFAULTS
underline: true
blog-page:
type: text
label: THEME_QUARK.ADMIN.BLOG_PAGE
help: THEME_QUARK.ADMIN.BLOG_PAGE_HELP
size: medium
default: '/blog'
spectre_section:
type: section
title: THEME_QUARK.ADMIN.SPECTRE_OPTIONS
underline: true
spectre.exp:
type: toggle
label: THEME_QUARK.ADMIN.SPECTRE_EXP
help: THEME_QUARK.ADMIN.SPECTRE_EXP_HELP
highlight: 0
default: 0
options:
1: PLUGIN_ADMIN.ENABLED
0: PLUGIN_ADMIN.DISABLED
validate:
type: bool
spectre.icons:
type: toggle
label: THEME_QUARK.ADMIN.SPECTRE_ICONS
help: THEME_QUARK.ADMIN.SPECTRE_ICONS_HELP
highlight: 0
default: 0
options:
1: PLUGIN_ADMIN.ENABLED
0: PLUGIN_ADMIN.DISABLED
validate:
type: bool

94
user/themes/test/blueprints/blog.yaml Normal file
View File

@ -0,0 +1,94 @@
extends@: default
child_type: item
rules:
slug:
pattern: "[a-z][a-z0-9_-]+"
min: 2
max: 80
form:
fields:
tabs:
type: tabs
active: 1
fields:
advanced:
fields:
overrides:
fields:
header.child_type:
default: item
blog:
type: tab
title: Blog Config
fields:
content_title:
type: spacer
title: Content Definition
header.content.items:
type: textarea
yaml: true
label: Items
default: '@self.children'
validate:
type: yaml
header.content.limit:
type: text
label: Max Item Count
default: 5
validate:
required: true
type: int
min: 1
header.content.order.by:
type: select
label: Order By
default: date
options:
folder: Folder
title: Title
date: Date
default: Default
header.content.order.dir:
type: select
label: Order
default: desc
options:
asc: Ascending
desc: Descending
header.content.pagination:
type: toggle
label: Pagination
highlight: 1
default: 1
options:
1: PLUGIN_ADMIN.ENABLED
0: PLUGIN_ADMIN.DISABLED
validate:
type: bool
header.content.url_taxonomy_filters:
type: toggle
label: URL Taxonomy Filters
highlight: 1
default: 1
options:
1: PLUGIN_ADMIN.ENABLED
0: PLUGIN_ADMIN.DISABLED
validate:
type: bool
import@:
type: partials/blog-bits
context: blueprints://pages

15
user/themes/test/blueprints/default.yaml Normal file
View File

@ -0,0 +1,15 @@
extends@: default
form:
fields:
tabs:
fields:
advanced:
fields:
columns:
fields:
column1:
fields:
header.body_classes:
markdown: true
description: 'Available classes in Quark Theme (space separated):<br />`header-fixed`, `header-animated`, `header-dark`, `header-transparent`, `sticky-footer`'

113
user/themes/test/blueprints/item.yaml Normal file
View File

@ -0,0 +1,113 @@
extends@: default
form:
fields:
tabs:
fields:
blog:
type: tab
title: Blog Item
fields:
header_options:
type: section
title: Header Options
underline: true
header.continue_link:
type: toggle
toggleable: true
label: DF Style Link
help: Daring Fireball style title link
highlight: 1
options:
1: PLUGIN_ADMIN.ENABLED
0: PLUGIN_ADMIN.DISABLED
validate:
type: bool
header.header_image:
type: toggle
toggleable: true
label: Display Header Image
help: Enabled displaying of a header image
highlight: 1
options:
1: PLUGIN_ADMIN.ENABLED
0: PLUGIN_ADMIN.DISABLED
header.header_image_file:
type: text
toggleable: true
label: Image File
help: image filename that exists in the page folder. If not provided, will use the first image found.
placeholder: "For example: myimage.jpg"
header.header_image_width:
type: text
toggleable: true
label: Image Width
size: small
help: Header width in px
placeholder: Default is 900
validate:
type: int
min: 0
max: 5000
header.header_image_height:
type: text
toggleable: true
label: Image Height
size: small
help: Header height in px
placeholder: Default is 300
validate:
type: int
min: 0
max: 5000
summary:
type: section
title: Summary
underline: true
header.summary.enabled:
type: toggle
toggleable: true
label: Summary
highlight: 1
options:
1: PLUGIN_ADMIN.ENABLED
0: PLUGIN_ADMIN.DISABLED
header.summary.format:
type: select
toggleable: true
label: Format
classes: fancy
options:
'short': 'Use the first occurence of delimiter or size'
'long': 'Summary delimiter will be ignored'
header.summary.size:
type: text
toggleable: true
label: Size
classes: large
placeholder: 300
validate:
type: int
min: 1
header.summary.delimiter:
type: text
toggleable: true
label: Summary delimiter
classes: large
placeholder: ===
import@:
type: partials/blog-bits

47
user/themes/test/blueprints/modular.yaml Normal file
View File

@ -0,0 +1,47 @@
title: PLUGIN_ADMIN.MODULE
extends@: default
form:
fields:
tabs:
type: tabs
active: 1
fields:
content:
fields:
modular_title:
type: spacer
title: PLUGIN_ADMIN.MODULE_SETUP
header.onpage_menu:
type: toggle
style: vertical
label: THEME_QUARK.ADMIN.MODULAR.COMMON.SHOW_ONPAGE_MENU
help: THEME_QUARK.ADMIN.MODULAR.COMMON.SHOW_ONPAGE_MENU_HELP
default: 0
highlight: 0
options:
1: PLUGIN_ADMIN.YES
0: PLUGIN_ADMIN.NO
header.content.items:
type: text
label: PLUGIN_ADMIN.ITEMS
default: '@self.modular'
size: medium
header.content.order.by:
type: text
label: PLUGIN_ADMIN.ORDER_BY
placeholder: date
help:
size: small
header.content.order.dir:
type: text
label: PLUGIN_ADMIN.ORDER
help: '"desc" or "asc" are valid values'
placeholder: desc
size: small

38
user/themes/test/blueprints/modular/features.yaml Normal file
View File

@ -0,0 +1,38 @@
title: Features
'@extends': default
form:
fields:
tabs:
fields:
features:
type: tab
title: Features
fields:
header.class:
type: select
label: Layout
default: small
size: medium
options:
small: Small = 4 / 3 / 2 columns
standard: Standard = 3 / 2 / 1 columns
header.features:
name: features
type: list
label: Features
fields:
.icon:
type: iconpicker
label: Icon
.header:
type: text
label: Header
.text:
type: text
label: Text
.url:
type: text
label: Link

23
user/themes/test/blueprints/modular/hero.yaml Normal file
View File

@ -0,0 +1,23 @@
title: Hero
'@extends': default
form:
fields:
tabs:
fields:
buttons:
type: tab
title: Hero
fields:
header.hero_classes:
type: text
label: Hero Classes
markdown: true
description: 'There are several Hero class options that can be listed here (space separated):<br />`text-light`, `text-dark`, `title-h1h2`, `parallax`, `overlay-dark-gradient`, `overlay-light-gradient`, `overlay-dark`, `overlay-light`, `hero-fullscreen`, `hero-large`, `hero-medium`, `hero-small`, `hero-tiny`<br />Please consult the [Quark documentation](https://github.com/getgrav/grav-theme-quark#hero-options) for more details.'
header.hero_image:
type: filepicker
label: Hero Image
preview_images: true
description: 'If not specified, this defaults to the first image found in the page''s folder'

19
user/themes/test/blueprints/modular/text.yaml Normal file
View File

@ -0,0 +1,19 @@
title: Text
'@extends': default
form:
fields:
tabs:
fields:
content:
fields:
header.media_order:
label: Page Media (first one will be displayed next to your content)
header.image_align:
type: select
label: Image position
classes: fancy
default: left
options:
'left': 'Left'
'right': 'Right'

64
user/themes/test/blueprints/partials/blog-bits.yaml Normal file
View File

@ -0,0 +1,64 @@
form:
fields:
hero_title:
type: spacer
title: Hero Section
header.hero_classes:
type: text
label: Hero Classes
markdown: true
description: 'There are several Hero class options that can be listed here (space separated):<br />`text-light`, `text-dark`, `title-h1h2`, `parallax`, `overlay-dark-gradient`, `overlay-light-gradient`, `overlay-dark`, `overlay-light`, `hero-fullscreen`, `hero-large`, `hero-medium`, `hero-small`, `hero-tiny`<br />Please consult the [Quark documentation](https://github.com/getgrav/grav-theme-quark#hero-options) for more details.'
header.hero_image:
type: filepicker
label: Hero Image
preview_images: true
description: 'If not specified, this defaults to the first image found in the page''s folder'
toggles_title:
type: spacer
title: Configuration
header.blog_url:
type: text
toggleable: true
label: Blog Route
help: The route to the main blog page that contains the "Show ..." configuration
default: '/blog'
placeholder: '/blog'
size: medium
header.show_sidebar:
type: toggle
toggleable: true
label: Show Sidebar
highlight: 1
options:
1: PLUGIN_ADMIN.ENABLED
0: PLUGIN_ADMIN.DISABLED
validate:
type: bool
header.show_breadcrumbs:
type: toggle
toggleable: true
label: Show Breadcrumbs
highlight: 1
options:
1: PLUGIN_ADMIN.ENABLED
0: PLUGIN_ADMIN.DISABLED
validate:
type: bool
header.show_pagination:
type: toggle
toggleable: true
label: Show Pagination
highlight: 1
options:
1: PLUGIN_ADMIN.ENABLED
0: PLUGIN_ADMIN.DISABLED
validate:
type: bool

369
user/themes/test/css-compiled/spectre-exp.css Executable file
View File

File diff suppressed because one or more lines are too long

1
user/themes/test/css-compiled/spectre-exp.min.css vendored Executable file
View File

File diff suppressed because one or more lines are too long

172
user/themes/test/css-compiled/spectre-icons.css Executable file
View File

File diff suppressed because one or more lines are too long

1
user/themes/test/css-compiled/spectre-icons.min.css vendored Executable file
View File

File diff suppressed because one or more lines are too long

1257
user/themes/test/css-compiled/spectre.css Executable file
View File

File diff suppressed because one or more lines are too long

1
user/themes/test/css-compiled/spectre.min.css vendored Executable file
View File

File diff suppressed because one or more lines are too long

406
user/themes/test/css-compiled/theme.css Normal file
View File

File diff suppressed because one or more lines are too long

1
user/themes/test/css-compiled/theme.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

30
user/themes/test/css/boule.css Normal file
View File

@ -0,0 +1,30 @@
canvas {
margin: 0;
padding: 0%;
position: absolute;
z-index: 10;
}
.header-fixed #body-wrapper {
margin: 0;
padding: 0;
}
#body-wrapper {
margin: 0;
padding: 0;
}
#body-wrapper .container {
margin: 0;
padding: 0;
}
#start {
margin: 0;
padding: 0;
}
#ui {
margin-left: 50%;
}

49
user/themes/test/css/bricklayer.css Executable file
View File

@ -0,0 +1,49 @@
.bricklayer {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.bricklayer-column-sizer {
width: 100%;
display: none;
}
@media screen and (min-width: 640px) {
.bricklayer-column-sizer {
width: 100%;
}
}
@media screen and (min-width: 980px) {
.bricklayer-column-sizer {
width: 50%;
}
}
/*@media screen and (min-width: 1200px) {*/
/*.bricklayer-column-sizer {*/
/*width: 33.33333%;*/
/*}*/
/*}*/
.bricklayer-column {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
padding-left: 5px;
padding-right: 5px;
}

49
user/themes/test/css/custom.css Normal file
View File

@ -0,0 +1,49 @@
body {
background-color: black;
}
head {
background-color: black;
margin: 0;
}
p {
color: white;
}
.container {
margin: 0;
}
#container > h5{
display: flex;
justify-content: right;
}
h5{
font-size: 50px;
color: white;
margin-top: 100px;
}
h6{
font-size: 50px;
color: white;
margin-top: 100px;
}
.header-fixed #body-wrapper {
margin: 0;
padding: 0;
}
#body-wrapper {
margin: 0;
padding: 0;
}
#body-wrapper .container {
margin: 0;
padding: 0;
max-width: 100%;
}

40
user/themes/test/css/debut.css Normal file
View File

@ -0,0 +1,40 @@
body {
/* background-color: black; */
background-image: url('/images/snow.jpg');
background-size: cover;
background-position: relative;
margin: 0%;
padding-top: 0%;
}
canvas {
margin: 0;
padding: 0%;
position: absolute;
z-index: 10;
}
.header-fixed #body-wrapper {
margin: 0;
padding: 0;
}
#body-wrapper {
margin: 0;
padding: 0;
}
#body-wrapper .container {
margin: 0;
padding: 0;
}
#start {
margin: 0;
padding: 0;
}
p {
color: black;
font-size: 20px;
}

4
user/themes/test/css/line-awesome.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

BIN
user/themes/test/fonts/line-awesome.eot Normal file
View File

Binary file not shown.

2954
user/themes/test/fonts/line-awesome.svg Normal file
View File

File diff suppressed because it is too large Load Diff
Side by Side

After

Width:  |  Height:  |  Size: 444 KiB

BIN
user/themes/test/fonts/line-awesome.ttf Normal file
View File

Binary file not shown.

BIN
user/themes/test/fonts/line-awesome.woff Normal file
View File

Binary file not shown.

BIN
user/themes/test/fonts/line-awesome.woff2 Normal file
View File

Binary file not shown.

43
user/themes/test/gulpfile.js Executable file
View File

@ -0,0 +1,43 @@
var gulp = require('gulp');
var sass = require('gulp-sass');
var cleancss = require('gulp-clean-css');
var csscomb = require('gulp-csscomb');
var rename = require('gulp-rename');
var autoprefixer = require('gulp-autoprefixer');
var sourcemaps = require('gulp-sourcemaps');
// configure the paths
var watch_dir = './scss/**/*.scss';
var src_dir = './scss/*.scss';
var dest_dir = './css-compiled';
var paths = {
source: src_dir
};
function watch() {
return gulp.watch(watch_dir, build);
}
function build() {
return gulp.src(paths.source)
.pipe(sourcemaps.init())
.pipe(sass({
outputStyle: 'compact',
precision: 10
}).on('error', sass.logError)
)
.pipe(sourcemaps.write())
.pipe(autoprefixer())
.pipe(gulp.dest(dest_dir))
.pipe(csscomb())
.pipe(cleancss())
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest(dest_dir));
}
exports.watch = watch;
exports.build = build;
exports.default = build;

BIN
user/themes/test/images/P2test.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

BIN
user/themes/test/images/P3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 388 KiB

BIN
user/themes/test/images/Ptest.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 50 KiB

BIN
user/themes/test/images/favicon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

1
user/themes/test/images/grav-logo.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" viewBox="0 0 504 140" clip-rule="evenodd"><path d="M235.83 71.56h-7.98c-1.2 0-2.2 1-2.2 2.2V89.1l-.15.13c-4.7 3.96-10.64 6.14-16.72 6.14-14.36 0-26.04-11.68-26.04-26.04s11.68-26.04 26.04-26.04c5.58 0 10.92 1.76 15.44 5.1.87.66 2.1.57 2.86-.2l5.7-5.7c.44-.44.67-1.05.63-1.68-.02-.62-.32-1.2-.82-1.6-6.76-5.35-15.2-8.3-23.8-8.3-21.18 0-38.42 17.23-38.42 38.4 0 21.2 17.24 38.42 38.42 38.42 10.93 0 21.4-4.7 28.7-12.9.35-.4.55-.93.55-1.47v-19.6c0-1.22-.98-2.2-2.2-2.2M502.8 34.44c-.4-.6-1.1-.98-1.84-.98h-8.7c-.87 0-1.66.52-2 1.32l-24.5 56.84-24.9-56.85c-.36-.8-1.15-1.3-2.02-1.3h-8.72c-.74 0-1.44.36-1.84.98-.4.62-.48 1.4-.17 2.1l30.2 68.85c.34.8 1.13 1.32 2 1.32h11c.88 0 1.67-.53 2.02-1.33l29.66-68.87c.3-.68.22-1.47-.2-2.1"/><path d="M388.68 34.77c-.35-.8-1.14-1.32-2-1.32h-11c-.88 0-1.67.53-2.02 1.33L344 103.64c-.3.68-.22 1.47.18 2.08.4.62 1.1 1 1.84 1h8.7c.86 0 1.66-.53 2-1.33l24.5-56.86 24.9 56.86c.36.8 1.15 1.32 2.02 1.32h8.72c.74 0 1.44-.38 1.84-1 .4-.62.47-1.4.17-2.1l-30.2-68.85zM309.2 81.52l.47-.22c8.68-4.2 14.28-13.1 14.28-22.67 0-13.88-11.3-25.18-25.17-25.18H266.9c-1.2 0-2.2 1-2.2 2.2v68.86c0 1.23 1 2.22 2.2 2.22h8c1.2 0 2.2-1 2.2-2.2V45.8h21.68c7.05 0 12.8 5.75 12.8 12.8 0 5.9-4 11-9.73 12.42-1.04.26-2.07.4-3.07.4h-7.98c-.83 0-1.6.46-1.96 1.2-.38.73-.3 1.62.2 2.3l22.6 30.87c.42.58 1.08.92 1.78.92h9.9c.84 0 1.6-.47 1.97-1.2.37-.75.3-1.64-.2-2.3l-15.9-21.7zM107.2 80.97c-7.26-4.8-11.4-8.85-15.02-16.1-2.47 4.97-8.24 12.37-17.96 18.2-4.86 15.1-27.96 44-35.43 39.9-2.22-1.2-2.64-2.8-2.15-4.45.54-4.13 9.08-13.62 9.08-13.62s.18 2 2.92 6.18c-3.6-11.2 5.96-25.03 8.5-29.73 3.98-1.27 4.27-6.4 4.27-6.4.26-7.9-3.28-13.63-6.7-17.05 2.46 3 3.25 7.54 3.37 11.7v.02c0 .47 0 .93 0 1.4-.12 3.43-1.16 8.18-3.38 8.18v.03c-2.28-.1-5.1.4-7.63 1.18l-5.6 1.34s2.98-.13 4.6 1.25c-1.8 2.9-5.78 6.53-10.22 8.58-6.45 3-8.3-2.96-5.03-6.84.8-.94 1.62-1.74 2.38-2.4-.5-.5-.8-1.2-.88-2.06 0 0 0 0 0-.02-.46-1.97-.2-4.54 2.6-8.62.54-.86 1.2-1.75 2-2.65.02-.04.04-.07.07-.1.03-.04.07-.08.1-.12.02-.02.04-.04.06-.06.2-.23.42-.45.64-.67 3.34-3.4 8.6-6.96 16.9-10.15C64.4 43.68 67.94 41 67.94 41c1.07-1.1 2.94-2.45 3.63-2.8-5.05-8.77-6.07-21.15-4.75-24.5-.1.2-.2.38-.3.57.5-1.14.83-1.5 1.34-2.1 1.38-1.64 6.06-2.5 7.74.96.9 1.84 1.06 4.23 1.03 6.02-3.7-.2-7.06 4.04-7.06 4.04s3.07-1.46 6.88-1.5c0 0 1 .9 2.28 2.56-1.7 3.2-4.52 10.02-2.5 17.16.35 1.4.86 2.62 1.5 3.65.02.05.04.1.07.14.05.07.1.13.14.2 3.37 5.06 9.54 5.66 9.54 5.66-2.9-1.45-5.27-3.76-6.8-6.56-.82-1.5-1.3-2.77-1.6-3.77-1.64-6.3.77-10 2.14-12.47 3.17-4.9 8.95-7.9 15.15-7.18 8.72 1 14.97 8.86 13.98 17.57-.6 5.32-3.78 9.72-8.15 12.12 1.05 2.84-.07 6.28-.07 6.28 2.64 3.32 2.76 5.23 2.67 7-3.36-.55-6.62 1.7-6.62 1.7s6.48-1.53 10.24 1.82c2.44 2.64 4.08 5 5.05 6.77 1.4 2.5 7.86 2.68 7.12 7.2-.74 4.5-5.68 4.53-13.4-.57M69.56 0C31.15 0 0 31.15 0 69.57c0 38.42 31.15 69.57 69.57 69.57 38.42 0 69.57-31.15 69.57-69.57C139.14 31.15 108 0 69.57 0M73.8 51.7c.8-.82.8-2.14 0-2.95-.82-.82-2.14-.82-2.95 0-.82.8-.82 2.13 0 2.94.8.8 2.13.8 2.95 0M66.45 53.15c-.82.8-.82 2.13 0 2.95.8.8 2.13.8 2.94 0 .8-.82.8-2.14 0-2.95-.82-.8-2.14-.8-2.95 0"/><path d="M79.23 54.23c-1.27-1.27-3.34-1.27-4.6 0l-2.72 2.7c-1.27 1.3-1.27 3.35 0 4.63l3 2.97c1.26 1.28 3.32 1.28 4.6 0l2.7-2.7c1.28-1.28 1.28-3.35 0-4.62l-2.97-2.97zM95.76 41.44c-2.15-2.57 1.87-7.25 4.4-4.46 4.64 5.15-2.25 7.04-4.4 4.46m9.24 2.7c3.45-6.56-1.42-10.4-4.77-13.53-5.36-5.03-10.7-7.2-16.8-.23-6.1 6.98-2.24 15.07 3.35 19.06 5.58 4 14.78 1.25 18.22-5.3"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.4 KiB

BIN
user/themes/test/images/haha.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 102 KiB

BIN
user/themes/test/images/haha.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 60 KiB

BIN
user/themes/test/images/hahah.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 62 KiB

0
user/themes/test/images/logo/.gitkeep Normal file
View File

BIN
user/themes/test/images/perso.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 920 B

BIN
user/themes/test/images/persosad.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 699 B

BIN
user/themes/test/images/snow.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 78 KiB

BIN
user/themes/test/images/son/hit.mp3 Normal file
View File

Binary file not shown.

317
user/themes/test/js/boule.js Normal file
View File

@ -0,0 +1,317 @@
console.log("BALLLLLLLLS");
let canvas = document.getElementById('scene');
let ctx = canvas.getContext("2d");
let resizeCanvas = () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
resizeCanvas()
let onResize = (event) => {
resizeCanvas()
}
window.addEventListener('resize', onResize);
let touché = 100000000;
//let hitSound = new Audio("/user/themes/quark/images/son/hit.mp3");
let tps = 0;
let timer = setInterval(() => {
tps++;
console.log(tps);
if (tps <= 0) {
clearInterval(timer);
console.log("NOOOO TIME");
}
}, 1000);
// let tps = 60;
// let timer = null;
// let tpsTableau = [10, 30, 60, 120];
// const ui = document.getElementById("ui");
// tpsTableau.forEach(valeur => {
// const bouton = document.createElement("button");
// bouton.textContent = `${valeur} sec`;
// bouton.dataset.time = valeur;
// bouton.addEventListener("click", () => {
// console.log("CA CLIQUE OUUUUU");
// lancerTimer(valeur);
// });
// ui.appendChild(bouton);
// });
// function lancerTimer(valeur) {
// clearInterval(timer); // stop ancien timer
// tps = valeur;
// timer = setInterval(() => {
// tps--;
// if (tps <= 0) {
// clearInterval(timer);
// tps = 0;
// console.log("NOOOO TIME");
// }
// }, 1000);
// }
class P1 {
constructor(x, y, s) {
this.pos = {
x: x,
y: y
}
this.size = s
this.vx = 20
this.vy = 20
// this.img = new Image();
// this.img.onload = () => {
// this.draw();
// };
// this.img.src = "/user/themes/quark/images/perso.png";
// console.log("img", this.img.src);
this.imgNormal = new Image();
this.imgNormal.src = "/user/themes/quark/images/perso.png";
this.imgsad = new Image();
this.imgsad.src = "/user/themes/quark/images/persosad.png";
this.img = this.imgNormal;
this.isTouched = false;
}
draw() {
ctx.drawImage(this.img, this.pos.x, this.pos.y, this.size, this.size);
}
bong(){
// if(this.pos.x >= canvas.width || this.pos.x <= 0){
// this.pos.x = 0;
// this.vx = Math.abs(this.vx);
// // this.vx = -this.vx;
// console.log("ça touche :(");
// }
// if(this.pos.y >= canvas.height || this.pos.y <= 0){
// this.vy = -this.vy;
// console.log("ça touche :(");
// }
if (this.pos.x <= 0) {
this.pos.x = 0;
// this.vx = Math.abs(this.vx);
}
if (this.pos.x >= canvas.width-50) {
this.pos.x = canvas.width-50;
// this.vx = -Math.abs(this.vx);
}
if (this.pos.y <= 0) {
this.pos.y = 0;
// this.vy = Math.abs(this.vy);
}
if (this.pos.y >= canvas.height-50) {
this.pos.y = canvas.height-50;
// this.vy = -Math.abs(this.vy);
}
this.draw();
}
hit() {
if (this.isTouched) return;
this.isTouched = true;
this.img = this.imgsad;
setTimeout(() => {
this.img = this.imgNormal;
this.isTouched = false;
}, 400);
}
}
let p1 = [];
let monP1;
function createP1() {
monP1 = new P1(
canvas.width/2,
canvas.height/2,
50
);
monP1.draw() ;
p1.push(monP1);
}
createP1();
let hitSound;
window.addEventListener("keydown", (event) => {
if (!hitSound) {
hitSound = new Audio("/user/themes/quark/images/son/hit.mp3");
}
if (event.key === "ArrowLeft") {
monP1.pos.x -= monP1.vx
//console.log("gauche");
}
if (event.key === "ArrowRight") {
monP1.pos.x += monP1.vx
//console.log("droite");
}
if (event.key === "ArrowUp") {
monP1.pos.y -= monP1.vy
//console.log("haut");
}
if (event.key === "ArrowDown") {
monP1.pos.y += monP1.vy
//console.log("bas");
}
ctx.clearRect(0, 0, canvas.width, canvas.height);
monP1.draw();
monP1.bong();
});
class Boule {
constructor(x, y, s) {
// this.x = x;
// this.y = y;
this.pos = {
x: x,
y: y
}
this.size = s
this.vx = -10+Math.random()*10;
this.vy = -10+Math.random()*10;
// this.color = 'hsl(360, 50%, 50%)'
this.color = {
h:0,
s:0,
l:100
}
}
draw(){
ctx.globalCompositeOperation = this.blend;
ctx.beginPath();
ctx.fillStyle = `hsl(${this.color.h},${this.color.s}%,${this.color.l}%)`;
ctx.arc(this.pos.x, this.pos.y, this.size, 0, 2 * Math.PI);
ctx.fill();
}
move(){
this.pos.x += this.vx;
this.pos.y += this.vy;
if(this.pos.x >= canvas.width || this.pos.x <= 0){
this.vx *= -1;
}
if(/* this.pos.y >= canvas.height || */ this.pos.y <= 0){
this.vy *= -1;
}
this.draw();
}
}
let boules = [];
let maboule;
function createBoule(){
maboule = new Boule(
canvas.width, // Math.random()*canvas.width,
canvas.height, // Math.random()*canvas.height,
2+Math.random()*10
);
maboule.draw();
boules.push(maboule);
}
setInterval(()=>{
createBoule();
}, 500)
function collisionP1Boule(p1, boule) {
let dx = (p1.pos.x + p1.size / 2) - boule.pos.x;
let dy = (p1.pos.y + p1.size / 2) - boule.pos.y;
let distance = Math.sqrt(dx * dx + dy * dy);
return distance < (p1.size / 2 + boule.size);
}
let anime = () => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let i = 0; i < boules.length; i++) {
for (let j = i + 1; j < boules.length; j++) {
let a = boules[i];
let b = boules[j];
let dist = Math.hypot(b.pos.x - a.pos.x, b.pos.y - a.pos.y);
if (dist < a.size + b.size) {
let nx = (b.pos.x - a.pos.x) / dist;
let ny = (b.pos.y - a.pos.y) / dist;
let vA = a.vx * nx + a.vy * ny;
let vB = b.vx * nx + b.vy * ny;
a.vx += (vB - vA) * nx;
a.vy += (vB - vA) * ny;
b.vx += (vA - vB) * nx;
b.vy += (vA - vB) * ny;
}
}
}
for (let i = boules.length - 1; i >= 0; i--) {
let boule = boules[i];
boule.move();
if (collisionP1Boule(monP1, boule)) {
touché--;
monP1.hit();
console.log("touhché bouuuuuh");
if (hitSound) {
hitSound.currentTime = 0;
hitSound.play();
}
boules.splice(i, 1);
}
}
monP1.draw();
ctx.fillStyle = "white";
ctx.font = "20px Arial";
ctx.fillText("Boules touchées avant de perdre : " + touché + " (oui c'est beaucoup)", 20, 30);
ctx.fillText("Timer : " + tps + " secondes (oupsi ça augmente)", 20, 60);
ctx.fillText("Esquive les boules de neige :D", canvas.width - 320, 30);
requestAnimationFrame(anime);
};
window.requestAnimationFrame(anime);

1
user/themes/test/js/bricklayer.min.js vendored Executable file
View File

@ -0,0 +1 @@
!function t(e,n,r){function o(s,u){if(!n[s]){if(!e[s]){var l="function"==typeof require&&require;if(!u&&l)return l(s,!0);if(i)return i(s,!0);var a=new Error("Cannot find module '"+s+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[s]={exports:{}};e[s][0].call(p.exports,function(t){var n=e[s][1][t];return o(n?n:t)},p,p.exports,t,e,n,r)}return n[s].exports}for(var i="function"==typeof require&&require,s=0;s<r.length;s++)o(r[s]);return o}({1:[function(t,e,n){var r,o=this&&this.__extends||function(t,e){function n(){this.constructor=t}for(var r in e)e.hasOwnProperty(r)&&(t[r]=e[r]);t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)};!function(t){function e(t){return[].slice.call(t)}function n(t,e,n){if(window.CustomEvent)var r=new CustomEvent(e,{detail:n});else{var r=document.createEvent("CustomEvent");r.initCustomEvent(e,!0,!0,n)}return t.dispatchEvent(r)}var r={rulerClassName:"bricklayer-column-sizer",columnClassName:"bricklayer-column"},i=function(){function t(t){this.element=document.createElement("div"),this.element.className=t}return t.prototype.destroy=function(){this.element.parentNode.removeChild(this.element)},t}(),s=function(t){function e(){t.apply(this,arguments)}return o(e,t),e.prototype.getWidth=function(){this.element.setAttribute("style","\n display: block;\n visibility: hidden !important;\n top: -1000px !important;\n ");var t=this.element.offsetWidth;return this.element.removeAttribute("style"),t},e}(i),u=function(t){function e(){t.apply(this,arguments)}return o(e,t),e}(i),l=function(){function t(t,e){void 0===e&&(e=r),this.element=t,this.options=e,this.build(),this.buildResponsive()}return t.prototype.append=function(t){var n=this;if(Array.isArray(t))return void t.forEach(function(t){return n.append(t)});var r=this.findMinHeightColumn();this.elements=e(this.elements).concat([t]),this.applyPosition("append",r,t)},t.prototype.prepend=function(t){var n=this;if(Array.isArray(t))return void t.forEach(function(t){return n.prepend(t)});var r=this.findMinHeightColumn();this.elements=[t].concat(e(this.elements)),this.applyPosition("prepend",r,t)},t.prototype.on=function(t,e){return this.element.addEventListener("bricklayer."+t,e),this},t.prototype.redraw=function(){var t=this.columnCount;this.checkColumnCount(!1),this.reorderElements(t),n(this.element,"bricklayer.redraw",{columnCount:t})},t.prototype.destroy=function(){var t=this;this.ruler.destroy(),e(this.elements).forEach(function(e){return t.element.appendChild(e)}),e(this.getColumns()).forEach(function(t){return t.parentNode.removeChild(t)}),n(this.element,"bricklayer.destroy",{})},t.prototype.build=function(){this.ruler=new s(this.options.rulerClassName),this.elements=this.getElementsInOrder(),this.element.insertBefore(this.ruler.element,this.element.firstChild)},t.prototype.buildResponsive=function(){var t=this;window.addEventListener("resize",function(e){return t.checkColumnCount()}),this.checkColumnCount(),this.on("breakpoint",function(e){return t.reorderElements(e.detail.columnCount)}),this.columnCount>=1&&this.reorderElements(this.columnCount)},t.prototype.getColumns=function(){return this.element.querySelectorAll(":scope > ."+this.options.columnClassName)},t.prototype.findMinHeightColumn=function(){var t=e(this.getColumns()),n=t.map(function(t){return t.offsetHeight}),r=Math.min.apply(null,n);return t[n.indexOf(r)]},t.prototype.getElementsInOrder=function(){return this.element.querySelectorAll(":scope > *:not(."+this.options.columnClassName+"):not(."+this.options.rulerClassName+")")},t.prototype.checkColumnCount=function(t){void 0===t&&(t=!0);var e=this.getColumnCount();this.columnCount!==e&&(t&&n(this.element,"bricklayer.breakpoint",{columnCount:e}),this.columnCount=e)},t.prototype.reorderElements=function(t){var n=this;void 0===t&&(t=1),(t==1/0||1>t)&&(t=1);for(var r=e(this.elements).map(function(t){var e=t.parentNode?t.parentNode.removeChild(t):t;return e}),o=this.getColumns(),i=0;i<o.length;i++)o[i].parentNode.removeChild(o[i]);for(var i=0;t>i;i++){var s=new u(this.options.columnClassName).element;this.element.appendChild(s)}r.forEach(function(t){var e=n.findMinHeightColumn();e.appendChild(t)})},t.prototype.getColumnCount=function(){var t=this.element.offsetWidth,e=this.ruler.getWidth();return Math.round(t/e)},t.prototype.applyPosition=function(t,e,r){var o=this,i=function(i){var s=i+t.charAt(0).toUpperCase()+t.substr(1);n(o.element,"bricklayer."+s,{item:r,column:e})};switch(i("before"),t){case"append":e.appendChild(r);break;case"prepend":e.insertBefore(r,e.firstChild)}i("after")},t}();t.Container=l}(r||(r={})),function(t,n){"function"==typeof define&&define.amd?define(function(){return n()}):"undefined"!=typeof window&&t===window?t.Bricklayer=n():"object"==typeof e&&e.exports&&(e.exports=n())}("undefined"!=typeof window?window:this,function(){return r.Container})},{}]},{},[1]);

126
user/themes/test/js/debut.js Normal file
View File

@ -0,0 +1,126 @@
console.log("Skibidi");
let canvas = document.getElementById('scene');
let ctx = canvas.getContext("2d");
let resizeCanvas = () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
resizeCanvas()
let onResize = (event) => {
resizeCanvas()
}
window.addEventListener('resize', onResize);
class P1 {
constructor(x, y, s) {
this.pos = {
x: x,
y: y
}
this.size = s
this.vx = 10
this.vy = 10
this.img = new Image();
this.img.onload = () => {
this.draw();
};
this.img.src = "/images/P2test.png";
console.log("img", this.img.src);
}
draw() {
ctx.drawImage(this.img, this.pos.x, this.pos.y, this.size, this.size);
}
}
let p1 = [];
let monP1;
function createP1() {
monP1 = new P1(
canvas.width/5,
canvas.height-300,
300
);
monP1.draw() ;
p1.push(monP1);
}
createP1();
console.log("localisation P1", monP1);
/* console.log('est tu la ?', createP1); */
class P2 {
constructor(x, y, s) {
this.pos = {
x: x,
y: y
}
this.size = s
this.img = new Image();
this.img.onload = () => {
this.draw();
};
this.img.src = "/images/P2test.png";
console.log("img", this.img.src);
}
draw() {
ctx.drawImage(this.img, this.pos.x, this.pos.y, this.size, this.size);
}
}
let p2 = [];
let monP2;
function createP2() {
monP2 = new P2(
canvas.width/5*4,
canvas.height-300,
300
);
monP2.draw() ;
p2.push(monP2);
}
createP2();
/* let touche = () => {
let dist = Math.sqrt(
Math.pow(P2.pos.x - P1.pos.x, 2)
);
if(dist < P1.size+P2.size){
console.log("ça touche hehheheheheh");
}
} */
window.addEventListener("keydown", (event) => {
if (event.key === "ArrowLeft") {
monP1.pos.x -= monP1.vx
console.log("gauche");
}
if (event.key === "ArrowRight") {
monP1.pos.x += monP1.vx
console.log("droite");
}
ctx.clearRect(0, 0, canvas.width, canvas.height);
monP1.draw();
monP2.draw();
/* touche(); */
let dist = Math.sqrt(
Math.pow(monP2.pos.x - monP1.pos.x, 2),
Math.pow(monP2.pos.y - monP1.pos.y, 2)
);
if(dist < monP1.size-250+monP2.size-200){
console.log("ça touche hehheheheheh");
location.href = "/home/diag";
}
});

5
user/themes/test/js/diag.js Normal file
View File

@ -0,0 +1,5 @@
console.log("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaahhhhhhhhhhhhhhhh");
window.addEventListener("click", () => {
location.href = "/home/boule";
})

87
user/themes/test/js/jquery.treemenu.js Executable file
View File

@ -0,0 +1,87 @@
/*
treeMenu - jQuery plugin
version: 0.6
Copyright 2014 Stepan Krapivin
*/
(function($){
$.fn.treemenu = function(options) {
options = options || {};
options.delay = options.delay || 0;
options.openActive = options.openActive || false;
options.closeOther = options.closeOther || false;
options.activeSelector = options.activeSelector || ".active";
this.addClass("treemenu");
if (!options.nonroot) {
this.addClass("treemenu-root");
}
options.nonroot = true;
this.find("> li").each(function() {
e = $(this);
var subtree = e.find('> ul');
var button = e.find('.toggler').eq(0);
if(button.length == 0) {
// create toggler
var button = $('<span>');
button.addClass('toggler');
e.prepend(button);
}
if(subtree.length > 0) {
subtree.hide();
e.addClass('tree-closed');
e.find(button).click(function() {
var li = $(this).parent('li');
if (options.closeOther && li.hasClass('tree-closed')) {
var siblings = li.parent('ul').find("li:not(.tree-empty)");
siblings.removeClass("tree-opened");
siblings.addClass("tree-closed");
siblings.removeClass(options.activeSelector);
siblings.find('> ul').slideUp(options.delay);
}
li.find('> ul').slideToggle(options.delay);
li.toggleClass('tree-opened');
li.toggleClass('tree-closed');
li.toggleClass(options.activeSelector);
});
$(this).find('> ul').treemenu(options);
} else {
$(this).addClass('tree-empty');
}
});
if (options.openActive) {
var cls = this.attr("class");
this.find(options.activeSelector).each(function(){
var el = $(this).parent();
while (el.attr("class") !== cls) {
el.find('> ul').show();
if(el.prop("tagName") === 'UL') {
el.show();
} else if (el.prop("tagName") === 'LI') {
el.removeClass('tree-closed');
el.addClass("tree-opened");
el.show();
}
el = el.parent();
}
});
}
return this;
}
})(jQuery);

0
user/themes/test/js/monJS.js Normal file
View File

9
user/themes/test/js/scopedQuerySelectorShim.min.js vendored Normal file
View File

@ -0,0 +1,9 @@
/* scopeQuerySelectorShim.js
*
* Copyright (C) 2015 Larry Davis
* All rights reserved.
*
* This software may be modified and distributed under the terms
* of the BSD license. See the LICENSE file for details.
*/
!function(){function a(a,c){var e=a[c];a[c]=function(a){var c,f=!1,g=!1;return a.match(d)?(a=a.replace(d,""),this.parentNode||(b.appendChild(this),g=!0),parentNode=this.parentNode,this.id||(this.id="rootedQuerySelector_id_"+(new Date).getTime(),f=!0),c=e.call(parentNode,"#"+this.id+" "+a),f&&(this.id=""),g&&b.removeChild(this),c):e.call(this,a)}}if(!HTMLElement.prototype.querySelectorAll)throw new Error("rootedQuerySelectorAll: This polyfill can only be used with browsers that support querySelectorAll");var b=document.createElement("div");try{b.querySelectorAll(":scope *")}catch(c){var d=/^\s*:scope/gi;a(HTMLElement.prototype,"querySelector"),a(HTMLElement.prototype,"querySelectorAll")}}();

8
user/themes/test/js/singlepagenav.min.js vendored Normal file
View File

@ -0,0 +1,8 @@
/**
* Single Page Nav Plugin
* Copyright (c) 2014 Chris Wojcik <hello@chriswojcik.net>
* Dual licensed under MIT and GPL.
* @author Chris Wojcik
* @version 1.2.0
*/
if(typeof Object.create!=="function"){Object.create=function(e){function t(){}t.prototype=e;return new t}}(function(e,t,n,r){"use strict";var i={init:function(n,r){this.options=e.extend({},e.fn.singlePageNav.defaults,n);this.container=r;this.$container=e(r);this.$links=this.$container.find("a");if(this.options.filter!==""){this.$links=this.$links.filter(this.options.filter)}this.$window=e(t);this.$htmlbody=e("html, body");this.$links.on("click.singlePageNav",e.proxy(this.handleClick,this));this.didScroll=false;this.checkPosition();this.setTimer()},handleClick:function(t){var n=this,r=t.currentTarget,i=e(r.hash);t.preventDefault();if(i.length){n.clearTimer();if(typeof n.options.beforeStart==="function"){n.options.beforeStart()}n.setActiveLink(r.hash);n.scrollTo(i,function(){if(n.options.updateHash&&history.pushState){history.pushState(null,null,r.hash)}n.setTimer();if(typeof n.options.onComplete==="function"){n.options.onComplete()}})}},scrollTo:function(e,t){var n=this;var r=n.getCoords(e).top;var i=false;n.$htmlbody.stop().animate({scrollTop:r},{duration:n.options.speed,easing:n.options.easing,complete:function(){if(typeof t==="function"&&!i){t()}i=true}})},setTimer:function(){var e=this;e.$window.on("scroll.singlePageNav",function(){e.didScroll=true});e.timer=setInterval(function(){if(e.didScroll){e.didScroll=false;e.checkPosition()}},250)},clearTimer:function(){clearInterval(this.timer);this.$window.off("scroll.singlePageNav");this.didScroll=false},checkPosition:function(){var e=this.$window.scrollTop();var t=this.getCurrentSection(e);this.setActiveLink(t)},getCoords:function(e){return{top:Math.round(e.offset().top)-this.options.offset}},setActiveLink:function(e){var t=this.$container.find("a[href$='"+e+"']");if(!t.hasClass(this.options.currentClass)){this.$links.removeClass(this.options.currentClass);t.addClass(this.options.currentClass)}},getCurrentSection:function(t){var n,r,i,s;for(n=0;n<this.$links.length;n++){r=this.$links[n].hash;if(e(r).length){i=this.getCoords(e(r));if(t>=i.top-this.options.threshold){s=r}}}return s||this.$links[0].hash}};e.fn.singlePageNav=function(e){return this.each(function(){var t=Object.create(i);t.init(e,this)})};e.fn.singlePageNav.defaults={offset:0,threshold:120,speed:400,currentClass:"current",easing:"swing",updateHash:false,filter:"",onComplete:false,beforeStart:false}})(jQuery,window,document);

59
user/themes/test/js/site.js Normal file
View File

@ -0,0 +1,59 @@
var isTouch = window.DocumentTouch && document instanceof DocumentTouch;
function scrollHeader() {
// Has scrolled class on header
var zvalue = $(document).scrollTop();
if ( zvalue > 75 )
$("#header").addClass("scrolled");
else
$("#header").removeClass("scrolled");
}
function parallaxBackground() {
$('.parallax').css('background-positionY', ($(window).scrollTop() * 0.3) + 'px');
}
jQuery(document).ready(function($){
scrollHeader();
// Scroll Events
if (!isTouch){
$(document).scroll(function() {
scrollHeader();
parallaxBackground();
});
};
// Touch scroll
$(document).on({
'touchmove': function(e) {
scrollHeader(); // Replace this with your code.
}
});
//Smooth scroll to start
$('#to-start').click(function(){
var start_y = $('#start').position().top;
var header_offset = 45;
window.scroll({ top: start_y - header_offset, left: 0, behavior: 'smooth' });
return false;
});
//Smooth scroll to top
$('#to-top').click(function(){
window.scroll({ top: 0, left: 0, behavior: 'smooth' });
return false;
});
// Responsive Menu
$('#toggle').click(function () {
$(this).toggleClass('active');
$('#overlay').toggleClass('open');
$('body').toggleClass('mobile-nav-open');
});
// Tree Menu
$(".tree").treemenu({delay:300});
});

0
user/themes/test/js/skibidi.js Normal file
View File

6
user/themes/test/js/smooth-scroll.min.js vendored Normal file
View File

@ -0,0 +1,6 @@
/*
* smoothscroll polyfill - v0.3.4
* https://iamdustan.github.io/smoothscroll
* 2016 (c) Dustan Kasten, Jeremias Menichelli - MIT License
*/
!function(o,t,l){"use strict";function e(){function e(o,t){this.scrollLeft=o,this.scrollTop=t}function r(o){return.5*(1-Math.cos(Math.PI*o))}function n(o){if("object"!=typeof o||null===o||o.behavior===l||"auto"===o.behavior||"instant"===o.behavior)return!0;if("object"==typeof o&&"smooth"===o.behavior)return!1;throw new TypeError("behavior not valid")}function c(l){var e,r,n;do l=l.parentNode,e=l===t.body,r=l.clientHeight<l.scrollHeight||l.clientWidth<l.scrollWidth,n="visible"===o.getComputedStyle(l,null).overflow;while(!e&&(!r||n));return e=r=n=null,l}function i(t){t.frame=o.requestAnimationFrame(i.bind(o,t));var l,e,n,c=u(),s=(c-t.startTime)/f;return s=s>1?1:s,l=r(s),e=t.startX+(t.x-t.startX)*l,n=t.startY+(t.y-t.startY)*l,t.method.call(t.scrollable,e,n),e===t.x&&n===t.y?void o.cancelAnimationFrame(t.frame):void 0}function s(l,r,n){var c,s,a,f,d,h=u();l===t.body?(c=o,s=o.scrollX||o.pageXOffset,a=o.scrollY||o.pageYOffset,f=p.scroll):(c=l,s=l.scrollLeft,a=l.scrollTop,f=e),d&&o.cancelAnimationFrame(d),i({scrollable:c,method:f,startTime:h,startX:s,startY:a,x:r,y:n,frame:d})}if(!("scrollBehavior"in t.documentElement.style)){var a=o.HTMLElement||o.Element,f=468,p={scroll:o.scroll||o.scrollTo,scrollBy:o.scrollBy,scrollIntoView:a.prototype.scrollIntoView},u=o.performance&&o.performance.now?o.performance.now.bind(o.performance):Date.now;o.scroll=o.scrollTo=function(){return n(arguments[0])?void p.scroll.call(o,arguments[0].left||arguments[0],arguments[0].top||arguments[1]):void s.call(o,t.body,~~arguments[0].left,~~arguments[0].top)},o.scrollBy=function(){return n(arguments[0])?void p.scrollBy.call(o,arguments[0].left||arguments[0],arguments[0].top||arguments[1]):void s.call(o,t.body,~~arguments[0].left+(o.scrollX||o.pageXOffset),~~arguments[0].top+(o.scrollY||o.pageYOffset))},a.prototype.scrollIntoView=function(){if(n(arguments[0]))return void p.scrollIntoView.call(this,arguments[0]||!0);var l=c(this),e=l.getBoundingClientRect(),r=this.getBoundingClientRect();l!==t.body?(s.call(this,l,l.scrollLeft+r.left-e.left,l.scrollTop+r.top-e.top),o.scrollBy({left:e.left,top:e.top,behavior:"smooth"})):o.scrollBy({left:r.left,top:r.top,behavior:"smooth"})}}}"object"==typeof exports?module.exports={polyfill:e}:e()}(window,document);

438
user/themes/test/languages.yaml Normal file
View File

@ -0,0 +1,438 @@
en:
THEME_QUARK:
ADMIN:
PRODUCTION_MODE: "Production Mode"
PRODUCTION_MODE_HELP: "When enabled, Quark will render with minified CSS"
GRID_SIZE: "Grid Size"
GRID_SIZE_HELP: "The maximum width of the theme"
GRID_SIZE_NONE: "None (full width)"
GRID_SIZE_EXTRA_LARGE: "Extra Large"
GRID_SIZE_LARGE: "Large"
GRID_SIZE_MEDIUM: "Medium"
HEADER_DEFAULTS: "Header Defaults"
CUSTOM_LOGO: "Custom Logo"
CUSTOM_LOGO_DESCRIPTION: "Will be used instead of the default logo `theme://images/grav-logo.svg`"
CUSTOM_LOGO_MOBILE: "Mobile Custom Logo"
HEADER_FIXED: "Fixed Header"
HEADER_FIXED_HELP: "When enabled, the header will be fixed at the top of the browser"
HEADER_ANIMATED: "Animated"
HEADER_ANIMATED_HELP: "When enabled, the header will animate to a smaller size when scrolling"
HEADER_DARK: "Dark Style"
HEADER_DARK_HELP: "When enabled, a dark-friendly style will be used"
HEADER_TRANSPARENT: "Transparent"
HEADER_TRANSPARENT_HELP: "When enabled, a transparent style will be used"
FOOTER_DEFAULTS: "Footer Defaults"
STICKY_FOOTER: "Sticky Footer"
STICKY_FOOTER_HELP: "When enabled, the footer will be sticky at the bottom of the browser"
BLOG_DEFAULTS: "Blog Defaults"
BLOG_PAGE: "Blog Page"
BLOG_PAGE_HELP: "The route to the blog page when working with the blog sidebar"
SPECTRE_OPTIONS: "Spectre.css Options"
SPECTRE_EXP: "Experimental CSS"
SPECTRE_EXP_HELP: "When enabled, the `spectre-exp.css` file will be included"
SPECTRE_ICONS: "Icons CSS"
SPECTRE_ICONS_HELP: "When enabled, the `spectre-icons.css` file will be included"
MODULAR:
COMMON:
SHOW_ONPAGE_MENU: Show navigation on one-page sites
SHOW_ONPAGE_MENU_HELP: On single-page sites, it adds smooth scrolling on click navigation and automatically selects the correct navigation elements as you scroll through different sections.
BLOG:
ITEM:
CONTINUE_READING: Continue reading...
NEXT_POST: Next Post
PREV_POST: Previous Post
SIDEBAR:
SIMPLE_SEARCH:
HEADLINE: Search
RELATED_POSTS:
HEADLINE: Related Posts
RANDOM_ARTICLE:
HEADLINE: Random Article
FEELING_LUCKY: I'm Feeling Lucky!
SOME_TEXT_WIDGET:
HEADLINE: Some Text Widget
POPULAR_TAGS:
HEADLINE: Popular Tags
ARCHIVES:
HEADLINE: Archives
SYNDICATE:
HEADLINE: Syndicate
de:
THEME_QUARK:
BLOG:
ITEM:
CONTINUE_READING: Weiterlesen...
NEXT_POST: Nächster Beitrag
PREV_POST: Vorheriger Beitrag
SIDEBAR:
SIMPLE_SEARCH:
HEADLINE: SimpleSearch
RELATED_POSTS:
HEADLINE: Ähnliche Beiträge
RANDOM_ARTICLE:
HEADLINE: Zufälliger Artikel
FEELING_LUCKY: Auf gut Glück!
SOME_TEXT_WIDGET:
HEADLINE: Text Widget Beispiel
POPULAR_TAGS:
HEADLINE: Häufigste Tags
ARCHIVES:
HEADLINE: Archiv
SYNDICATE:
HEADLINE: Abonnements
es:
THEME_QUARK:
ADMIN:
PRODUCTION_MODE: "Modo de producción"
PRODUCTION_MODE_HELP: "Cuando está habilitado, Quark renderizará con CSS minificado"
GRID_SIZE: "Tamaño de la cuadrícula"
GRID_SIZE_HELP: "El ancho máximo del tema"
GRID_SIZE_NONE: "Ninguno (ancho completo)"
GRID_SIZE_EXTRA_LARGE: "Extra Grande"
GRID_SIZE_LARGE: "Grande"
GRID_SIZE_MEDIUM: "Mediano"
HEADER_DEFAULTS: "Configuración predeterminada del encabezado"
CUSTOM_LOGO: "Logo personalizado"
CUSTOM_LOGO_DESCRIPTION: "Se utilizará en lugar del logo predeterminado `theme://images/grav-logo.svg`"
CUSTOM_LOGO_MOBILE: "Logo personalizado para móviles"
HEADER_FIXED: "Encabezado fijo"
HEADER_FIXED_HELP: "Cuando está habilitado, el encabezado se fijará en la parte superior del navegador"
HEADER_ANIMATED: "Animado"
HEADER_ANIMATED_HELP: "Cuando está habilitado, el encabezado se animará a un encabezado más pequeño al desplazarse"
HEADER_DARK: "Estilo oscuro"
HEADER_DARK_HELP: "Cuando está habilitado, se utilizará un estilo compatible con el modo oscuro"
HEADER_TRANSPARENT: "Transparente"
HEADER_TRANSPARENT_HELP: "Cuando está habilitado, se utilizará un estilo transparente"
FOOTER_DEFAULTS: "Configuración predeterminada del pie de página"
STICKY_FOOTER: "Pie de página fijo"
STICKY_FOOTER_HELP: "Cuando está habilitado, el pie de página se fijará en la parte inferior del navegador"
BLOG_DEFAULTS: "Configuración predeterminada del blog"
BLOG_PAGE: "Página del blog"
BLOG_PAGE_HELP: "La ruta a la página del blog cuando se trabaja con la barra lateral del blog"
SPECTRE_OPTIONS: "Opciones de Spectre.css"
SPECTRE_EXP: "CSS experimental"
SPECTRE_EXP_HELP: "Cuando está habilitado, se incluirá el archivo `spectre-exp.css`"
SPECTRE_ICONS: "CSS de iconos"
SPECTRE_ICONS_HELP: "Cuando está habilitado, se incluirá el archivo `spectre-icons.css`"
MODULAR:
COMMON:
SHOW_ONPAGE_MENU: Mostrar navegación en sitios de una página
SHOW_ONPAGE_MENU_HELP: En sitios de una sola página, añade desplazamiento suave al hacer clic en la navegación y selecciona automáticamente los elementos de navegación correctos a medida que te desplazas por las diferentes secciones.
BLOG:
ITEM:
CONTINUE_READING: Continuar leyendo...
NEXT_POST: Siguiente Entrada
PREV_POST: Entrada Anterior
SIDEBAR:
SIMPLE_SEARCH:
HEADLINE: Buscar
RELATED_POSTS:
HEADLINE: Entradas Relacionadas
RANDOM_ARTICLE:
HEADLINE: Artículo Aleatorio
FEELING_LUCKY: Voy a tener suerte!
SOME_TEXT_WIDGET:
HEADLINE: Algunos Widget de Texto
POPULAR_TAGS:
HEADLINE: Etiquetas Populares
ARCHIVES:
HEADLINE: Archivos
SYNDICATE:
HEADLINE: Distribuir
et:
THEME_QUARK:
ADMIN:
GRID_SIZE: Ruudustiku suurus
BLOG:
ITEM:
CONTINUE_READING: Loe edasi...
NEXT_POST: Järgmine postitus
PREV_POST: Eelmine postitus
SIDEBAR:
SIMPLE_SEARCH:
HEADLINE: Otsi
RELATED_POSTS:
HEADLINE: Seotud postitused
RANDOM_ARTICLE:
HEADLINE: Juhuslik artikkel
FEELING_LUCKY: Ehk mul veab!
SOME_TEXT_WIDGET:
HEADLINE: Mõni teksti vidin
POPULAR_TAGS:
HEADLINE: Populaarsed märksõnad
ARCHIVES:
HEADLINE: Arhiiv
SYNDICATE:
HEADLINE: Voog
fr:
THEME_QUARK:
TRANSLATION_TEST: Quark !
BLOG:
ITEM:
CONTINUE_READING: Continuer la lecture...
NEXT_POST: Article suivant
PREV_POST: Article précédent
SIDEBAR:
SIMPLE_SEARCH:
HEADLINE: Recherche simple
RELATED_POSTS:
HEADLINE: Articles en relation
RANDOM_ARTICLE:
HEADLINE: Article aléatoire
FEELING_LUCKY: J'ai de la chance !
SOME_TEXT_WIDGET:
HEADLINE: Du texte gadget
POPULAR_TAGS:
HEADLINE: Tags populaires
ARCHIVES:
HEADLINE: Archives
SYNDICATE:
HEADLINE: Syndication
it:
THEME_QUARK:
BLOG:
ITEM:
CONTINUE_READING: Continua a leggere...
NEXT_POST: Prossimo articolo
PREV_POST: Articolo precedente
SIDEBAR:
SIMPLE_SEARCH:
HEADLINE: SimpleSearch
RELATED_POSTS:
HEADLINE: Articoli correlati
RANDOM_ARTICLE:
HEADLINE: Articolo a caso
FEELING_LUCKY: Mi sento fortunato!
SOME_TEXT_WIDGET:
HEADLINE: Widget di testo
POPULAR_TAGS:
HEADLINE: Tag popolari
ARCHIVES:
HEADLINE: Archivio
SYNDICATE:
HEADLINE: Feed
pl:
THEME_QUARK:
ADMIN:
GRID_SIZE: Rozmiar siatki
BLOG:
ITEM:
CONTINUE_READING: Kontynuuj czytanie...
NEXT_POST: Następny wpis
PREV_POST: Poprzedni wpis
SIDEBAR:
SIMPLE_SEARCH:
HEADLINE: Szukaj
RELATED_POSTS:
HEADLINE: Powiązane wpisy
RANDOM_ARTICLE:
HEADLINE: Losowy artykuł
FEELING_LUCKY: Mam szczęście!
SOME_TEXT_WIDGET:
HEADLINE: Jakiś widżet tekstowy
POPULAR_TAGS:
HEADLINE: Popularne tagi
ARCHIVES:
HEADLINE: Archiwa
SYNDICATE:
HEADLINE: Syndykacja
ro:
THEME_QUARK:
BLOG:
ITEM:
CONTINUE_READING: Mai multe...
NEXT_POST: Următorul articol
PREV_POST: Articolul anterior
SIDEBAR:
SIMPLE_SEARCH:
HEADLINE: Căutare
RELATED_POSTS:
HEADLINE: Articole corelate
RANDOM_ARTICLE:
HEADLINE: Articol aleator
FEELING_LUCKY: Mă simt norocos
SOME_TEXT_WIDGET:
HEADLINE: Text modular
POPULAR_TAGS:
HEADLINE: Etichete populare
ARCHIVES:
HEADLINE: Arhive
SYNDICATE:
HEADLINE: Abonați-vă
ru:
THEME_QUARK:
BLOG:
ITEM:
CONTINUE_READING: Читать далее...
NEXT_POST: Следующая запись
PREV_POST: Предыдущая запись
SIDEBAR:
SIMPLE_SEARCH:
HEADLINE: Поиск
RELATED_POSTS:
HEADLINE: Также читайте
RANDOM_ARTICLE:
HEADLINE: Случайная запись
FEELING_LUCKY: Мне повезёт!
SOME_TEXT_WIDGET:
HEADLINE: Текстовой виджет
POPULAR_TAGS:
HEADLINE: Популярные теги
ARCHIVES:
HEADLINE: Архив
SYNDICATE:
HEADLINE: Синдикация
uk:
THEME_QUARK:
BLOG:
ITEM:
CONTINUE_READING: Читати далі...
NEXT_POST: Наступний запис
PREV_POST: Попередній запис
SIDEBAR:
SIMPLE_SEARCH:
HEADLINE: Пошук
RELATED_POSTS:
HEADLINE: Також читайте
RANDOM_ARTICLE:
HEADLINE: Випадковий запис
FEELING_LUCKY: Мені пощастить!
SOME_TEXT_WIDGET:
HEADLINE: Текстовий віджет
POPULAR_TAGS:
HEADLINE: Популярні теги
ARCHIVES:
HEADLINE: Архів
SYNDICATE:
HEADLINE: Синдикація
hr:
THEME_QUARK:
BLOG:
ITEM:
CONTINUE_READING: Nastavi s čitanjem...
NEXT_POST: Slijedeća objava
PREV_POST: Prethodna objava
SIDEBAR:
SIMPLE_SEARCH:
HEADLINE: Pretraživanje
RELATED_POSTS:
HEADLINE: Povezane objave
RANDOM_ARTICLE:
HEADLINE: Slučajni članak
FEELING_LUCKY: Osjećam se sretno!
SOME_TEXT_WIDGET:
HEADLINE: Neki tekst widget
POPULAR_TAGS:
HEADLINE: Popularni tagovi
ARCHIVES:
HEADLINE: Arhiva
SYNDICATE:
HEADLINE: Kanali
nl:
THEME_QUARK:
BLOG:
ITEM:
CONTINUE_READING: Lees Meer...
NEXT_POST: Volgende Bericht
PREV_POST: Vorige Bericht
SIDEBAR:
SIMPLE_SEARCH:
HEADLINE: Zoek
RELATED_POSTS:
HEADLINE: Gerelateerde Berichten
RANDOM_ARTICLE:
HEADLINE: Willekeurig Artikel
FEELING_LUCKY: Ik Voel Me Gelukkig!
SOME_TEXT_WIDGET:
HEADLINE: Een Tekst Widget
POPULAR_TAGS:
HEADLINE: Populaire Labels
ARCHIVES:
HEADLINE: Archieven
SYNDICATE:
HEADLINE: Syndicatie
cs:
THEME_QUARK:
BLOG:
ITEM:
CONTINUE_READING: Pokračovat ve čtení...
NEXT_POST: Následující příspěvek
PREV_POST: Předchozí příspěvek
SIDEBAR:
SIMPLE_SEARCH:
HEADLINE: Vyhledávání
RELATED_POSTS:
HEADLINE: Související příspěvky
RANDOM_ARTICLE:
HEADLINE: Náhodný článek
FEELING_LUCKY: Zkusím štěstí!
SOME_TEXT_WIDGET:
HEADLINE: Textový widget
POPULAR_TAGS:
HEADLINE: Oblíbené štítky
ARCHIVES:
HEADLINE: Archiv
SYNDICATE:
HEADLINE: Syndikace
zh:
THEME_QUARK:
BLOG:
ITEM:
CONTINUE_READING: 继续阅读...
NEXT_POST: 下一篇
PREV_POST: 上一篇
SIDEBAR:
SIMPLE_SEARCH:
HEADLINE: 搜索
RELATED_POSTS:
HEADLINE: 相关内容
RANDOM_ARTICLE:
HEADLINE: 随机一篇
FEELING_LUCKY: 手气不错!
SOME_TEXT_WIDGET:
HEADLINE: 一个文本小部件
POPULAR_TAGS:
HEADLINE: 热门标签
ARCHIVES:
HEADLINE: 归档
SYNDICATE:
HEADLINE: 订阅流
ja:
THEME_QUARK:
BLOG:
ITEM:
CONTINUE_READING: 続きを読む...
NEXT_POST: 次の記事
PREV_POST: 前の記事
SIDEBAR:
SIMPLE_SEARCH:
HEADLINE: 検索
RELATED_POSTS:
HEADLINE: 関連した記事
RANDOM_ARTICLE:
HEADLINE: 任意の記事
FEELING_LUCKY: I'm feeling Lucky
SOME_TEXT_WIDGET:
HEADLINE: Some Text Widget
POPULAR_TAGS:
HEADLINE: 人気のタグ
ARCHIVES:
HEADLINE: アーカイブ
SYNDICATE:
HEADLINE: RSS配信

49
user/themes/test/package.json Executable file
View File

@ -0,0 +1,49 @@
{
"name": "spectre.css",
"version": "0.5.1",
"homepage": "http://picturepan2.github.io/spectre",
"author": "Yan Zhu <picturepan2@hotmail.com>",
"description": "Spectre.css: a lightweight, responsive and modern CSS framework",
"main": "docs/dist/spectre.css",
"repository": {
"type": "git",
"url": "https://github.com/picturepan2/spectre.git"
},
"license": "MIT",
"keywords": [
"css",
"framework",
"flexbox",
"responsive",
"mobile-friendly",
"front-end",
"sass",
"modern"
],
"bugs": {
"url": "https://github.com/picturepan2/spectre/issues"
},
"devDependencies": {
"gulp": "^4.0.0",
"gulp-autoprefixer": "^6.1.0",
"gulp-clean-css": "^3.9.4",
"gulp-csscomb": "^3.0.8",
"gulp-rename": "^1.2.2",
"gulp-sass": "^4.0.1"
},
"browserslist": [
"last 4 Chrome versions",
"Edge >= 12",
"Firefox ESR",
"last 4 Safari versions",
"last 4 Opera versions",
"Explorer >= 10"
],
"scripts": {
"dev": "gulp watch",
"build": "gulp build"
},
"dependencies": {
"gulp-sourcemaps": "^2.6.4"
}
}

BIN
user/themes/test/screenshot.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 156 KiB

19
user/themes/test/scss/spectre-exp.scss Executable file
View File

@ -0,0 +1,19 @@
// Variables and mixins
@import "theme/variables";
@import "spectre/variables";
@import "spectre/mixins";
/*! Spectre.css Experimentals v#{$version} | MIT License | github.com/picturepan2/spectre */
// Experimentals
@import "spectre/autocomplete";
@import "spectre/calendars";
@import "spectre/carousels";
@import "spectre/comparison-sliders";
@import "spectre/filters";
@import "spectre/meters";
@import "spectre/off-canvas";
@import "spectre/parallax";
@import "spectre/progress";
@import "spectre/sliders";
@import "spectre/timelines";
@import "spectre/viewer-360";

11
user/themes/test/scss/spectre-icons.scss Executable file
View File

@ -0,0 +1,11 @@
// Variables and mixins
@import "theme/variables";
@import "spectre/variables";
@import "spectre/mixins";
/*! Spectre.css Icons v#{$version} | MIT License | github.com/picturepan2/spectre */
// Icons
@import "spectre/icons/icons-core";
@import "spectre/icons/icons-navigation";
@import "spectre/icons/icons-action";
@import "spectre/icons/icons-object";

53
user/themes/test/scss/spectre.scss Executable file
View File

@ -0,0 +1,53 @@
// Variables and mixins
@import "theme/variables";
@import "spectre/variables";
@import "spectre/mixins";
/*! Spectre.css v#{$version} | MIT License | github.com/picturepan2/spectre */
// Reset and dependencies
@import "spectre/normalize";
@import "spectre/base";
// Elements
@import "spectre/typography";
@import "spectre/asian";
@import "spectre/tables";
@import "spectre/buttons";
@import "spectre/forms";
@import "spectre/labels";
@import "spectre/codes";
@import "spectre/media";
// Layout
@import "spectre/layout";
@import "spectre/hero";
@import "spectre/navbar";
// Components
@import "spectre/accordions";
@import "spectre/avatars";
@import "spectre/badges";
@import "spectre/breadcrumbs";
@import "spectre/bars";
@import "spectre/cards";
@import "spectre/chips";
@import "spectre/dropdowns";
@import "spectre/empty";
@import "spectre/menus";
@import "spectre/modals";
@import "spectre/navs";
@import "spectre/pagination";
@import "spectre/panels";
@import "spectre/popovers";
@import "spectre/steps";
@import "spectre/tabs";
@import "spectre/tiles";
@import "spectre/toasts";
@import "spectre/tooltips";
// Utility classes
@import "spectre/animations";
@import "spectre/utilities";
// Extras
@import "theme/extensions";

38
user/themes/test/scss/spectre/_accordions.scss Executable file
View File

@ -0,0 +1,38 @@
// Accordions
.accordion {
input:checked ~,
&[open] {
& .accordion-header {
.icon {
transform: rotate(90deg);
}
}
& .accordion-body {
max-height: 50rem;
}
}
.accordion-header {
display: block;
padding: $unit-1 $unit-2;
.icon {
transition: transform .25s;
}
}
.accordion-body {
margin-bottom: $layout-spacing;
max-height: 0;
overflow: hidden;
transition: max-height .25s;
}
}
// Remove default details marker in Webkit
summary.accordion-header {
&::-webkit-details-marker {
display: none;
}
}

20
user/themes/test/scss/spectre/_animations.scss Executable file
View File

@ -0,0 +1,20 @@
// Animations
@keyframes loading {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes slide-down {
0% {
opacity: 0;
transform: translateY(-$unit-8);
}
100% {
opacity: 1;
transform: translateY(0);
}
}

43
user/themes/test/scss/spectre/_asian.scss Executable file
View File

@ -0,0 +1,43 @@
// Optimized for East Asian CJK
html:lang(zh),
html:lang(zh-Hans),
.lang-zh,
.lang-zh-hans {
font-family: $cjk-zh-hans-font-family;
}
html:lang(zh-Hant),
.lang-zh-hant {
font-family: $cjk-zh-hant-font-family;
}
html:lang(ja),
.lang-ja {
font-family: $cjk-jp-font-family;
}
html:lang(ko),
.lang-ko {
font-family: $cjk-ko-font-family;
}
:lang(zh),
:lang(ja),
.lang-cjk {
ins,
u {
border-bottom: $border-width solid;
text-decoration: none;
}
del + del,
del + s,
ins + ins,
ins + u,
s + del,
s + s,
u + ins,
u + u {
margin-left: .125em;
}
}

47
user/themes/test/scss/spectre/_autocomplete.scss Executable file
View File

@ -0,0 +1,47 @@
// Autocomplete
.form-autocomplete {
position: relative;
.form-autocomplete-input {
align-content: flex-start;
display: flex;
flex-wrap: wrap;
height: auto;
min-height: $unit-8;
padding: $unit-h;
&.is-focused {
@include control-shadow();
border-color: $primary-color;
}
.form-input {
border-color: transparent;
box-shadow: none;
display: inline-block;
flex: 1 0 auto;
height: $unit-6;
line-height: $unit-4;
margin: $unit-h;
width: auto;
}
}
.menu {
left: 0;
position: absolute;
top: 100%;
width: 100%;
}
&.autocomplete-oneline {
.form-autocomplete-input {
flex-wrap: nowrap;
overflow-x: auto;
}
.chip {
flex: 1 0 auto;
}
}
}

77
user/themes/test/scss/spectre/_avatars.scss Executable file
View File

@ -0,0 +1,77 @@
// Avatars
.avatar {
@include avatar-base();
background: $primary-color;
border-radius: 50%;
color: rgba($light-color, .85);
display: inline-block;
font-weight: 300;
line-height: 1.25;
margin: 0;
position: relative;
vertical-align: middle;
&.avatar-xs {
@include avatar-base($unit-4);
}
&.avatar-sm {
@include avatar-base($unit-6);
}
&.avatar-lg {
@include avatar-base($unit-12);
}
&.avatar-xl {
@include avatar-base($unit-16);
}
img {
border-radius: 50%;
height: 100%;
position: relative;
width: 100%;
z-index: $zindex-0;
}
.avatar-icon,
.avatar-presence {
background: $bg-color-light;
bottom: 14.64%;
height: 50%;
padding: $border-width-lg;
position: absolute;
right: 14.64%;
transform: translate(50%, 50%);
width: 50%;
z-index: $zindex-0 + 1;
}
.avatar-presence {
background: $gray-color;
box-shadow: 0 0 0 $border-width-lg $light-color;
border-radius: 50%;
height: .5em;
width: .5em;
&.online {
background: $success-color;
}
&.busy {
background: $error-color;
}
&.away {
background: $warning-color;
}
}
&[data-initial]::before {
color: currentColor;
content: attr(data-initial);
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
z-index: $zindex-0;
}
}

60
user/themes/test/scss/spectre/_badges.scss Executable file
View File

@ -0,0 +1,60 @@
// Badges
.badge {
position: relative;
white-space: nowrap;
&[data-badge],
&:not([data-badge]) {
&::after {
background: $primary-color;
background-clip: padding-box;
border-radius: .5rem;
box-shadow: 0 0 0 .1rem $bg-color-light;
color: $light-color;
content: attr(data-badge);
display: inline-block;
transform: translate(-.05rem, -.5rem);
}
}
&[data-badge] {
&::after {
font-size: $font-size-sm;
height: .9rem;
line-height: 1;
min-width: .9rem;
padding: .1rem .2rem;
text-align: center;
white-space: nowrap;
}
}
&:not([data-badge]),
&[data-badge=""] {
&::after {
height: 6px;
min-width: 6px;
padding: 0;
width: 6px;
}
}
// Badges for Buttons
&.btn {
&::after {
position: absolute;
top: 0;
right: 0;
transform: translate(50%, -50%);
}
}
// Badges for Avatars
&.avatar {
&::after {
position: absolute;
top: 14.64%;
right: 14.64%;
transform: translate(50%, -50%);
z-index: $zindex-1;
}
}
}

71
user/themes/test/scss/spectre/_bars.scss Executable file
View File

@ -0,0 +1,71 @@
// Bars
.bar {
background: $bg-color-dark;
border-radius: $border-radius;
display: flex;
flex-wrap: nowrap;
height: $unit-4;
width: 100%;
&.bar-sm {
height: $unit-1;
}
// TODO: attr() support
.bar-item {
background: $primary-color;
color: $light-color;
display: block;
font-size: $font-size-sm;
flex-shrink: 0;
line-height: $unit-4;
height: 100%;
position: relative;
text-align: center;
width: 0;
&:first-child {
border-bottom-left-radius: $border-radius;
border-top-left-radius: $border-radius;
}
&:last-child {
border-bottom-right-radius: $border-radius;
border-top-right-radius: $border-radius;
flex-shrink: 1;
}
}
}
// Slider bar
.bar-slider {
height: $border-width-lg;
margin: $layout-spacing 0;
position: relative;
.bar-item {
left: 0;
padding: 0;
position: absolute;
&:not(:last-child):first-child {
background: $bg-color-dark;
z-index: $zindex-0;
}
}
.bar-slider-btn {
background: $primary-color;
border: 0;
border-radius: 50%;
height: $unit-3;
padding: 0;
position: absolute;
right: 0;
top: 50%;
transform: translate(50%, -50%);
width: $unit-3;
&:active {
box-shadow: 0 0 0 .1rem $primary-color;
}
}
}

44
user/themes/test/scss/spectre/_base.scss Executable file
View File

@ -0,0 +1,44 @@
// Base
*,
*::before,
*::after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
font-size: $html-font-size;
line-height: $html-line-height;
-webkit-tap-highlight-color: transparent;
}
body {
background: $body-bg;
color: $body-font-color;
font-family: $body-font-family;
font-size: $font-size;
overflow-x: hidden;
text-rendering: optimizeLegibility;
}
a {
color: $link-color;
outline: none;
text-decoration: none;
&:focus {
@include control-shadow();
}
&:focus,
&:hover,
&:active,
&.active {
color: $link-color-dark;
text-decoration: underline;
}
&:visited {
color: $link-color-light;
}
}

29
user/themes/test/scss/spectre/_breadcrumbs.scss Executable file
View File

@ -0,0 +1,29 @@
// Breadcrumbs
.breadcrumb {
list-style: none;
margin: $unit-1 0;
padding: $unit-1 0;
.breadcrumb-item {
color: $gray-color-dark;
display: inline-block;
margin: 0;
padding: $unit-1 0;
&:not(:last-child) {
margin-right: $unit-1;
a {
color: $gray-color-dark;
}
}
&:not(:first-child) {
&::before {
color: $gray-color-dark;
content: "/";
padding-right: $unit-2;
}
}
}
}

193
user/themes/test/scss/spectre/_buttons.scss Executable file
View File

@ -0,0 +1,193 @@
// Buttons
.btn {
appearance: none;
background: $bg-color-light;
border: $border-width solid $primary-color;
border-radius: $border-radius;
color: $primary-color;
cursor: pointer;
display: inline-block;
font-size: $font-size;
height: $control-size;
line-height: $line-height;
outline: none;
padding: $control-padding-y $control-padding-x;
text-align: center;
text-decoration: none;
transition: background .2s, border .2s, box-shadow .2s, color .2s;
user-select: none;
vertical-align: middle;
white-space: nowrap;
&:focus {
@include control-shadow();
}
&:focus,
&:hover {
background: $secondary-color;
border-color: $primary-color-dark;
text-decoration: none;
}
&:active,
&.active {
background: $primary-color-dark;
border-color: darken($primary-color-dark, 5%);
color: $light-color;
text-decoration: none;
&.loading {
&::after {
border-bottom-color: $light-color;
border-left-color: $light-color;
}
}
}
&[disabled],
&:disabled,
&.disabled {
cursor: default;
opacity: .5;
pointer-events: none;
}
// Button Primary
&.btn-primary {
background: $primary-color;
border-color: $primary-color-dark;
color: $light-color;
&:focus,
&:hover {
background: darken($primary-color-dark, 2%);
border-color: darken($primary-color-dark, 5%);
color: $light-color;
}
&:active,
&.active {
background: darken($primary-color-dark, 4%);
border-color: darken($primary-color-dark, 7%);
color: $light-color;
}
&.loading {
&::after {
border-bottom-color: $light-color;
border-left-color: $light-color;
}
}
}
// Button Colors
&.btn-success {
@include button-variant($success-color);
}
&.btn-error {
@include button-variant($error-color);
}
// Button Link
&.btn-link {
background: transparent;
border-color: transparent;
color: $link-color;
&:focus,
&:hover,
&:active,
&.active {
color: $link-color-dark;
}
}
// Button Sizes
&.btn-sm {
font-size: $font-size-sm;
height: $control-size-sm;
padding: $control-padding-y-sm $control-padding-x-sm;
}
&.btn-lg {
font-size: $font-size-lg;
height: $control-size-lg;
padding: $control-padding-y-lg $control-padding-x-lg;
}
// Button Block
&.btn-block {
display: block;
width: 100%;
}
// Button Action
&.btn-action {
width: $control-size;
padding-left: 0;
padding-right: 0;
&.btn-sm {
width: $control-size-sm;
}
&.btn-lg {
width: $control-size-lg;
}
}
// Button Clear
&.btn-clear {
background: transparent;
border: 0;
color: currentColor;
height: $unit-5;
line-height: $unit-4;
margin-left: $unit-1;
margin-right: -2px;
opacity: 1;
padding: $unit-h;
text-decoration: none;
width: $unit-5;
&:focus,
&:hover {
background: rgba($bg-color, .5);
opacity: .95;
}
&::before {
content: "\2715";
}
}
}
// Button groups
.btn-group {
display: inline-flex;
flex-wrap: wrap;
.btn {
flex: 1 0 auto;
&:first-child:not(:last-child) {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
&:not(:first-child):not(:last-child) {
border-radius: 0;
margin-left: -$border-width;
}
&:last-child:not(:first-child) {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
margin-left: -$border-width;
}
&:focus,
&:hover,
&:active,
&.active {
z-index: $zindex-0;
}
}
&.btn-group-block {
display: flex;
.btn {
flex: 1 0 0;
}
}
}

222
user/themes/test/scss/spectre/_calendars.scss Executable file
View File

@ -0,0 +1,222 @@
// Calendars
.calendar {
border: $border-width solid $border-color;
border-radius: $border-radius;
display: block;
min-width: 280px;
.calendar-nav {
align-items: center;
background: $bg-color;
border-top-left-radius: $border-radius;
border-top-right-radius: $border-radius;
display: flex;
font-size: $font-size-lg;
padding: $layout-spacing;
}
.calendar-header,
.calendar-body {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: $layout-spacing 0;
.calendar-date {
flex: 0 0 14.28%; // 7 calendar-items each row
max-width: 14.28%;
}
}
.calendar-header {
background: $bg-color;
border-bottom: $border-width solid $border-color;
color: $gray-color;
font-size: $font-size-sm;
text-align: center;
}
.calendar-body {
color: $gray-color-dark;
}
.calendar-date {
border: 0;
padding: $unit-1;
.date-item {
appearance: none;
background: transparent;
border: $border-width solid transparent;
border-radius: 50%;
color: $gray-color-dark;
cursor: pointer;
font-size: $font-size-sm;
height: $unit-7;
line-height: $unit-5;
outline: none;
padding: $unit-h;
position: relative;
text-align: center;
text-decoration: none;
transition: background .2s, border .2s, box-shadow .2s, color .2s;
vertical-align: middle;
white-space: nowrap;
width: $unit-7;
&.date-today {
border-color: $secondary-color-dark;
color: $primary-color;
}
&:focus {
@include control-shadow();
}
&:focus,
&:hover {
background: $secondary-color-light;
border-color: $secondary-color-dark;
color: $primary-color;
text-decoration: none;
}
&:active,
&.active {
background: $primary-color-dark;
border-color: darken($primary-color-dark, 5%);
color: $light-color;
}
// Calendar badge support
&.badge {
&::after {
position: absolute;
top: 3px;
right: 3px;
transform: translate(50%, -50%);
}
}
}
.date-item,
.calendar-event {
&:disabled,
&.disabled {
cursor: default;
opacity: .25;
pointer-events: none;
}
}
&.prev-month,
&.next-month {
.date-item,
.calendar-event {
opacity: .25;
}
}
}
.calendar-range {
position: relative;
&::before {
background: $secondary-color;
content: "";
height: $unit-7;
left: 0;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
&.range-start {
&::before {
left: 50%;
}
}
&.range-end {
&::before {
right: 50%;
}
}
&.range-start,
&.range-end {
.date-item {
background: $primary-color-dark;
border-color: darken($primary-color-dark, 5%);
color: $light-color;
}
}
.date-item {
color: $primary-color;
}
}
// Calendars size
&.calendar-lg {
.calendar-body {
padding: 0;
.calendar-date {
border-bottom: $border-width solid $border-color;
border-right: $border-width solid $border-color;
display: flex;
flex-direction: column;
height: 5.5rem;
padding: 0;
&:nth-child(7n) {
border-right: 0;
}
&:nth-last-child(-n+7) {
border-bottom: 0;
}
}
}
.date-item {
align-self: flex-end;
height: $unit-7;
margin-right: $layout-spacing-sm;
margin-top: $layout-spacing-sm;
}
.calendar-range {
&::before {
top: 19px;
}
&.range-start {
&::before {
left: auto;
width: 19px;
}
}
&.range-end {
&::before {
right: 19px;
}
}
}
.calendar-events {
flex-grow: 1;
line-height: 1;
overflow-y: auto;
padding: $layout-spacing-sm;
}
.calendar-event {
border-radius: $border-radius;
font-size: $font-size-sm;
display: block;
margin: $unit-h auto;
overflow: hidden;
padding: 3px 4px;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}

43
user/themes/test/scss/spectre/_cards.scss Executable file
View File

@ -0,0 +1,43 @@
// Cards
.card {
background: $bg-color-light;
border: $border-width solid $border-color;
border-radius: $border-radius;
display: flex;
flex-direction: column;
.card-header,
.card-body,
.card-footer {
padding: $layout-spacing-lg;
padding-bottom: 0;
&:last-child {
padding-bottom: $layout-spacing-lg;
}
}
.card-body {
flex: 1 1 auto;
}
.card-image {
padding-top: $layout-spacing-lg;
&:first-child {
padding-top: 0;
img {
border-top-left-radius: $border-radius;
border-top-right-radius: $border-radius;
}
}
&:last-child {
img {
border-bottom-left-radius: $border-radius;
border-bottom-right-radius: $border-radius;
}
}
}
}

136
user/themes/test/scss/spectre/_carousels.scss Executable file
View File

@ -0,0 +1,136 @@
// Carousels
// The number of carousel images
$carousel-number: 8;
%carousel-image-checked {
animation: carousel-slidein .75s ease-in-out 1;
opacity: 1;
z-index: $zindex-1;
}
%carousel-nav-checked {
color: $gray-color-light;
}
.carousel {
background: $bg-color;
display: block;
overflow: hidden;
position: relative;
width: 100%;
-webkit-overflow-scrolling: touch;
z-index: $zindex-0;
.carousel-container {
height: 100%;
left: 0;
position: relative;
&::before {
content: "";
display: block;
padding-bottom: 56.25%;
}
.carousel-item {
animation: carousel-slideout 1s ease-in-out 1;
height: 100%;
left: 0;
margin: 0;
opacity: 0;
position: absolute;
top: 0;
width: 100%;
&:hover {
.item-prev,
.item-next {
opacity: 1;
}
}
}
.item-prev,
.item-next {
background: rgba($gray-color-light, .25);
border-color: rgba($gray-color-light, .5);
color: $gray-color-light;
opacity: 0;
position: absolute;
top: 50%;
transition: all .4s;
transform: translateY(-50%);
z-index: $zindex-1;
}
.item-prev {
left: 1rem;
}
.item-next {
right: 1rem;
}
}
.carousel-locator {
@for $i from 1 through ($carousel-number) {
&:nth-of-type(#{$i}):checked ~ .carousel-container .carousel-item:nth-of-type(#{$i}) {
@extend %carousel-image-checked;
}
}
@for $i from 1 through ($carousel-number) {
&:nth-of-type(#{$i}):checked ~ .carousel-nav .nav-item:nth-of-type(#{$i}) {
@extend %carousel-nav-checked;
}
}
}
.carousel-nav {
bottom: $layout-spacing;
display: flex;
justify-content: center;
left: 50%;
position: absolute;
transform: translateX(-50%);
width: 10rem;
z-index: $zindex-1;
.nav-item {
color: rgba($gray-color-light, .5);
display: block;
flex: 1 0 auto;
height: $unit-8;
margin: $unit-1;
max-width: 2.5rem;
position: relative;
&::before {
background: currentColor;
content: "";
display: block;
height: $unit-h;
position: absolute;
top: .5rem;
width: 100%;
}
}
}
}
@keyframes carousel-slidein {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(0);
}
}
@keyframes carousel-slideout {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 1;
transform: translateX(-50%);
}
}

33
user/themes/test/scss/spectre/_chips.scss Executable file
View File

@ -0,0 +1,33 @@
// Chips
.chip {
align-items: center;
background: $bg-color-dark;
border-radius: 5rem;
display: inline-flex;
font-size: 90%;
height: $unit-6;
line-height: $unit-4;
margin: $unit-h;
max-width: $control-width-sm;
overflow: hidden;
padding: $unit-1 $unit-2;
text-decoration: none;
text-overflow: ellipsis;
vertical-align: middle;
white-space: nowrap;
&.active {
background: $primary-color;
color: $light-color;
}
.avatar {
margin-left: -$unit-2;
margin-right: $unit-1;
}
.btn-clear {
border-radius: 50%;
transform: scale(.75);
}
}

31
user/themes/test/scss/spectre/_codes.scss Executable file
View File

@ -0,0 +1,31 @@
// Codes
code {
@include label-base();
@include label-variant($code-color, lighten($code-color, 42.5%));
font-size: 85%;
}
.code {
border-radius: $border-radius;
color: $body-font-color;
position: relative;
&::before {
color: $gray-color;
content: attr(data-lang);
font-size: $font-size-sm;
position: absolute;
right: $layout-spacing;
top: $unit-h;
}
code {
background: $bg-color;
color: inherit;
display: block;
line-height: 1.5;
overflow-x: auto;
padding: 1rem;
width: 100%;
}
}

115
user/themes/test/scss/spectre/_comparison-sliders.scss Executable file
View File

@ -0,0 +1,115 @@
// Image comparison slider
// Credit: http://codepen.io/solipsistacp/pen/Gpmaq
.comparison-slider {
height: 50vh;
overflow: hidden;
position: relative;
width: 100%;
-webkit-overflow-scrolling: touch;
.comparison-before,
.comparison-after {
height: 100%;
left: 0;
margin: 0;
overflow: hidden;
position: absolute;
top: 0;
img {
height: 100%;
object-fit: cover;
object-position: left center;
position: absolute;
width: 100%;
}
}
.comparison-before {
width: 100%;
z-index: 1;
.comparison-label {
right: $unit-4;
}
}
.comparison-after {
max-width: 100%;
min-width: 0;
z-index: 2;
&::before {
background: transparent;
content: "";
cursor: default;
height: 100%;
left: 0;
position: absolute;
right: $unit-4;
top: 0;
z-index: $zindex-0;
}
&::after {
background: currentColor;
border-radius: 50%;
box-shadow: 0 -5px, 0 5px;
color: $light-color;
content: "";
height: 3px;
position: absolute;
right: $unit-2;
top: 50%;
transform: translate(50%, -50%);
width: 3px;
}
.comparison-label {
left: $unit-4;
}
}
.comparison-resizer {
animation: first-run 1.5s 1 ease-in-out;
cursor: ew-resize;
height: $unit-4;
left: 0;
max-width: 100%;
min-width: $unit-4;
opacity: 0;
outline: none;
position: relative;
resize: horizontal;
top: 50%;
transform: translateY(-50%) scaleY(30);
width: 0;
}
.comparison-label {
background: rgba($dark-color, .5);
bottom: $unit-4;
color: $light-color;
padding: $unit-1 $unit-2;
position: absolute;
user-select: none;
}
}
@keyframes first-run {
0% {
width: 0;
}
25% {
width: $unit-12;
}
50% {
width: $unit-4;
}
75% {
width: $unit-6;
}
100% {
width: 0;
}
}

36
user/themes/test/scss/spectre/_dropdowns.scss Executable file
View File

@ -0,0 +1,36 @@
// Dropdown
.dropdown {
display: inline-block;
position: relative;
.menu {
animation: slide-down .15s ease 1;
display: none;
left: 0;
max-height: 50vh;
overflow-y: auto;
position: absolute;
top: 100%;
}
&.dropdown-right {
.menu {
left: auto;
right: 0;
}
}
&.active .menu,
.dropdown-toggle:focus + .menu,
.menu:hover {
display: block;
}
// Fix dropdown-toggle border radius in button groups
.btn-group {
.dropdown-toggle:nth-last-child(2) {
border-bottom-right-radius: $border-radius;
border-top-right-radius: $border-radius;
}
}
}

21
user/themes/test/scss/spectre/_empty.scss Executable file
View File

@ -0,0 +1,21 @@
// Empty states (or Blank slates)
.empty {
background: $bg-color;
border-radius: $border-radius;
color: $gray-color-dark;
text-align: center;
padding: $unit-16 $unit-8;
.empty-icon {
margin-bottom: $layout-spacing-lg;
}
.empty-title,
.empty-subtitle {
margin: $layout-spacing auto;
}
.empty-action {
margin-top: $layout-spacing-lg;
}
}

37
user/themes/test/scss/spectre/_filters.scss Executable file
View File

@ -0,0 +1,37 @@
// Filters
// The number of filter options
$filter-number: 8 !default;
%filter-checked-nav {
background: $primary-color;
color: $light-color;
}
%filter-checked-body {
display: none;
}
.filter {
.filter-nav {
margin: $layout-spacing 0;
}
.filter-body {
display: flex;
flex-wrap: wrap;
}
.filter-tag {
@for $i from 0 through ($filter-number) {
&#tag-#{$i}:checked ~ .filter-nav .chip[for="tag-#{$i}"] {
@extend %filter-checked-nav;
}
}
@for $i from 1 through ($filter-number) {
&#tag-#{$i}:checked ~ .filter-body .filter-item:not([data-tag~="tag-#{$i}"]) {
@extend %filter-checked-body;
}
}
}
}

555
user/themes/test/scss/spectre/_forms.scss Executable file
View File

@ -0,0 +1,555 @@
// Forms
.form-group {
&:not(:last-child) {
margin-bottom: $layout-spacing;
}
}
fieldset {
margin-bottom: $layout-spacing-lg;
}
legend {
font-size: $font-size-lg;
font-weight: 500;
margin-bottom: $layout-spacing-lg;
}
// Form element: Label
.form-label {
display: block;
line-height: $line-height;
padding: $control-padding-y + $border-width 0;
&.label-sm {
font-size: $font-size-sm;
padding: $control-padding-y-sm + $border-width 0;
}
&.label-lg {
font-size: $font-size-lg;
padding: $control-padding-y-lg + $border-width 0;
}
}
// Form element: Input
.form-input {
appearance: none;
background: $bg-color-light;
background-image: none;
border: $border-width solid $border-color-dark;
border-radius: $border-radius;
color: $body-font-color;
display: block;
font-size: $font-size;
height: $control-size;
line-height: $line-height;
max-width: 100%;
outline: none;
padding: $control-padding-y $control-padding-x;
position: relative;
transition: background .2s, border .2s, box-shadow .2s, color .2s;
width: 100%;
&:focus {
@include control-shadow();
border-color: $primary-color;
}
&::placeholder {
color: $gray-color;
}
// Input sizes
&.input-sm {
font-size: $font-size-sm;
height: $control-size-sm;
padding: $control-padding-y-sm $control-padding-x-sm;
}
&.input-lg {
font-size: $font-size-lg;
height: $control-size-lg;
padding: $control-padding-y-lg $control-padding-x-lg;
}
&.input-inline {
display: inline-block;
vertical-align: middle;
width: auto;
}
// Input types
&[type="file"] {
height: auto;
}
}
// Form element: Textarea
textarea.form-input {
&,
&.input-lg,
&.input-sm {
height: auto;
}
}
// Form element: Input hint
.form-input-hint {
color: $gray-color;
font-size: $font-size-sm;
margin-top: $unit-1;
.has-success &,
.is-success + & {
color: $success-color;
}
.has-error &,
.is-error + & {
color: $error-color;
}
}
// Form element: Select
.form-select {
appearance: none;
border: $border-width solid $border-color-dark;
border-radius: $border-radius;
color: inherit;
font-size: $font-size;
height: $control-size;
line-height: $line-height;
outline: none;
padding: $control-padding-y $control-padding-x;
vertical-align: middle;
width: 100%;
background: $bg-color-light;
&:focus {
@include control-shadow();
border-color: $primary-color;
}
&::-ms-expand {
display: none;
}
// Select sizes
&.select-sm {
font-size: $font-size-sm;
height: $control-size-sm;
padding: $control-padding-y-sm ($control-icon-size + $control-padding-x-sm) $control-padding-y-sm $control-padding-x-sm;
}
&.select-lg {
font-size: $font-size-lg;
height: $control-size-lg;
padding: $control-padding-y-lg ($control-icon-size + $control-padding-x-lg) $control-padding-y-lg $control-padding-x-lg;
}
// Multiple select
&[size],
&[multiple] {
height: auto;
padding: $control-padding-y $control-padding-x;
option {
padding: $unit-h $unit-1;
}
}
&:not([multiple]):not([size]) {
background: $bg-color-light url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='%23667189'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E") no-repeat right .35rem center / .4rem .5rem;
padding-right: $control-icon-size + $control-padding-x;
}
}
// Form Icons
.has-icon-left,
.has-icon-right {
position: relative;
.form-icon {
height: $control-icon-size;
margin: 0 $control-padding-y;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: $control-icon-size;
z-index: $zindex-0 + 1;
}
}
.has-icon-left {
.form-icon {
left: $border-width;
}
.form-input {
padding-left: $control-icon-size + $control-padding-y * 2;
}
}
.has-icon-right {
.form-icon {
right: $border-width;
}
.form-input {
padding-right: $control-icon-size + $control-padding-y * 2;
}
}
// Form element: Checkbox and Radio
.form-checkbox,
.form-radio,
.form-switch {
display: block;
line-height: $line-height;
margin: ($control-size - $control-size-sm) / 2 0;
min-height: $control-size-sm;
padding: (($control-size-sm - $line-height) / 2) $control-padding-x (($control-size-sm - $line-height) / 2) ($control-icon-size + $control-padding-x);
position: relative;
input {
clip: rect(0, 0, 0, 0);
height: 1px;
margin: -1px;
overflow: hidden;
position: absolute;
width: 1px;
&:focus + .form-icon {
@include control-shadow();
border-color: $primary-color;
}
&:checked + .form-icon {
background: $primary-color;
border-color: $primary-color;
}
}
.form-icon {
border: $border-width solid $border-color-dark;
cursor: pointer;
display: inline-block;
position: absolute;
transition: background .2s, border .2s, box-shadow .2s, color .2s;
}
// Input checkbox, radio and switch sizes
&.input-sm {
font-size: $font-size-sm;
margin: 0;
}
&.input-lg {
font-size: $font-size-lg;
margin: ($control-size-lg - $control-size-sm) / 2 0;
}
}
.form-checkbox,
.form-radio {
.form-icon {
background: $bg-color-light;
height: $control-icon-size;
left: 0;
top: ($control-size-sm - $control-icon-size) / 2;
width: $control-icon-size;
}
input {
&:active + .form-icon {
background: $bg-color-dark;
}
}
}
.form-checkbox {
.form-icon {
border-radius: $border-radius;
}
input {
&:checked + .form-icon {
&::before {
background-clip: padding-box;
border: $border-width-lg solid $light-color;
border-left-width: 0;
border-top-width: 0;
content: "";
height: 9px;
left: 50%;
margin-left: -3px;
margin-top: -6px;
position: absolute;
top: 50%;
transform: rotate(45deg);
width: 6px;
}
}
&:indeterminate + .form-icon {
background: $primary-color;
border-color: $primary-color;
&::before {
background: $bg-color-light;
content: "";
height: 2px;
left: 50%;
margin-left: -5px;
margin-top: -1px;
position: absolute;
top: 50%;
width: 10px;
}
}
}
}
.form-radio {
.form-icon {
border-radius: 50%;
}
input {
&:checked + .form-icon {
&::before {
background: $bg-color-light;
border-radius: 50%;
content: "";
height: 6px;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 6px;
}
}
}
}
// Form element: Switch
.form-switch {
padding-left: ($unit-8 + $control-padding-x);
.form-icon {
background: $gray-color;
background-clip: padding-box;
border-radius: $unit-2 + $border-width;
height: $unit-4 + $border-width * 2;
left: 0;
top: ($control-size-sm - $unit-4) / 2 - $border-width;
width: $unit-8;
&::before {
background: $bg-color-light;
border-radius: 50%;
content: "";
display: block;
height: $unit-4;
left: 0;
position: absolute;
top: 0;
transition: background .2s, border .2s, box-shadow .2s, color .2s, left .2s;
width: $unit-4;
}
}
input {
&:checked + .form-icon {
&::before {
left: 14px;
}
}
&:active + .form-icon {
&::before {
background: $bg-color;
}
}
}
}
// Form element: Input groups
.input-group {
display: flex;
.input-group-addon {
background: $bg-color;
border: $border-width solid $border-color-dark;
border-radius: $border-radius;
line-height: $line-height;
padding: $control-padding-y $control-padding-x;
white-space: nowrap;
&.addon-sm {
font-size: $font-size-sm;
padding: $control-padding-y-sm $control-padding-x-sm;
}
&.addon-lg {
font-size: $font-size-lg;
padding: $control-padding-y-lg $control-padding-x-lg;
}
}
.form-input,
.form-select {
flex: 1 1 auto;
width: 1%;
}
.input-group-btn {
z-index: $zindex-0;
}
.form-input,
.form-select,
.input-group-addon,
.input-group-btn {
&:first-child:not(:last-child) {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
&:not(:first-child):not(:last-child) {
border-radius: 0;
margin-left: -$border-width;
}
&:last-child:not(:first-child) {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
margin-left: -$border-width;
}
&:focus {
z-index: $zindex-0 + 1;
}
}
.form-select {
width: auto;
}
&.input-inline {
display: inline-flex;
}
}
// Form validation states
.form-input,
.form-select {
.has-success &,
&.is-success {
background: lighten($success-color, 53%);
border-color: $success-color;
&:focus {
@include control-shadow($success-color);
}
}
.has-error &,
&.is-error {
background: lighten($error-color, 53%);
border-color: $error-color;
&:focus {
@include control-shadow($error-color);
}
}
}
.form-checkbox,
.form-radio,
.form-switch {
.has-error &,
&.is-error {
.form-icon {
border-color: $error-color;
}
input {
&:checked + .form-icon {
background: $error-color;
border-color: $error-color;
}
&:focus + .form-icon {
@include control-shadow($error-color);
border-color: $error-color;
}
}
}
}
.form-checkbox {
.has-error &,
&.is-error {
input {
&:indeterminate + .form-icon {
background: $error-color;
border-color: $error-color;
}
}
}
}
// validation based on :placeholder-shown (Edge doesn't support it yet)
.form-input {
&:not(:placeholder-shown) {
&:invalid {
border-color: $error-color;
&:focus {
@include control-shadow($error-color);
background: lighten($error-color, 53%);
}
& + .form-input-hint {
color: $error-color;
}
}
}
}
// Form disabled and readonly
.form-input,
.form-select {
&:disabled,
&.disabled {
background-color: $bg-color-dark;
cursor: not-allowed;
opacity: .5;
}
}
.form-input {
&[readonly] {
background-color: $bg-color;
}
}
input {
&:disabled,
&.disabled {
& + .form-icon {
background: $bg-color-dark;
cursor: not-allowed;
opacity: .5;
}
}
}
.form-switch {
input {
&:disabled,
&.disabled {
& + .form-icon::before {
background: $bg-color-light;
}
}
}
}
// Form horizontal
.form-horizontal {
padding: $layout-spacing 0;
.form-group {
display: flex;
flex-wrap: wrap;
}
}
// Form inline
.form-inline {
display: inline-block;
}

22
user/themes/test/scss/spectre/_hero.scss Executable file
View File

@ -0,0 +1,22 @@
// Hero
.hero {
display: flex;
flex-direction: column;
justify-content: space-between;
padding-bottom: 4rem;
padding-top: 4rem;
&.hero-sm {
padding-bottom: 2rem;
padding-top: 2rem;
}
&.hero-lg {
padding-bottom: 8rem;
padding-top: 8rem;
}
.hero-body {
padding: $layout-spacing;
}
}

5
user/themes/test/scss/spectre/_icons.scss Executable file
View File

@ -0,0 +1,5 @@
// CSS Icons
@import "icons/icons-core";
@import "icons/icons-navigation";
@import "icons/icons-action";
@import "icons/icons-object";

34
user/themes/test/scss/spectre/_labels.scss Executable file
View File

@ -0,0 +1,34 @@
// Labels
.label {
@include label-base();
@include label-variant(lighten($body-font-color, 5%), $bg-color-dark);
display: inline-block;
// Label rounded
&.label-rounded {
border-radius: 5rem;
padding-left: .4rem;
padding-right: .4rem;
}
// Label colors
&.label-primary {
@include label-variant($light-color, $primary-color);
}
&.label-secondary {
@include label-variant($primary-color, $secondary-color);
}
&.label-success {
@include label-variant($light-color, $success-color);
}
&.label-warning {
@include label-variant($light-color, $warning-color);
}
&.label-error {
@include label-variant($light-color, $error-color);
}
}

444
user/themes/test/scss/spectre/_layout.scss Executable file
View File

@ -0,0 +1,444 @@
// Layout
.container {
margin-left: auto;
margin-right: auto;
padding-left: $layout-spacing;
padding-right: $layout-spacing;
width: 100%;
$grid-spacing: ($layout-spacing / ($layout-spacing * 0 + 1)) * $html-font-size;
&.grid-xl {
max-width: $grid-spacing * 2 + $size-xl;
}
&.grid-lg {
max-width: $grid-spacing * 2 + $size-lg;
}
&.grid-md {
max-width: $grid-spacing * 2 + $size-md;
}
&.grid-sm {
max-width: $grid-spacing * 2 + $size-sm;
}
&.grid-xs {
max-width: $grid-spacing * 2 + $size-xs;
}
}
// Responsive breakpoint system
.show-xs,
.show-sm,
.show-md,
.show-lg,
.show-xl {
display: none !important;
}
// Responsive grid system
.columns {
display: flex;
flex-wrap: wrap;
margin-left: -$layout-spacing;
margin-right: -$layout-spacing;
&.col-gapless {
margin-left: 0;
margin-right: 0;
& > .column {
padding-left: 0;
padding-right: 0;
}
}
&.col-oneline {
flex-wrap: nowrap;
overflow-x: auto;
}
}
.column {
flex: 1;
max-width: 100%;
padding-left: $layout-spacing;
padding-right: $layout-spacing;
&.col-12,
&.col-11,
&.col-10,
&.col-9,
&.col-8,
&.col-7,
&.col-6,
&.col-5,
&.col-4,
&.col-3,
&.col-2,
&.col-1,
&.col-auto {
flex: none;
}
}
.col-12 {
width: 100%;
}
.col-11 {
width: 91.66666667%;
}
.col-10 {
width: 83.33333333%;
}
.col-9 {
width: 75%;
}
.col-8 {
width: 66.66666667%;
}
.col-7 {
width: 58.33333333%;
}
.col-6 {
width: 50%;
}
.col-5 {
width: 41.66666667%;
}
.col-4 {
width: 33.33333333%;
}
.col-3 {
width: 25%;
}
.col-2 {
width: 16.66666667%;
}
.col-1 {
width: 8.33333333%;
}
.col-auto {
flex: 0 0 auto;
max-width: none;
width: auto;
}
.col-mx-auto {
margin-left: auto;
margin-right: auto;
}
.col-ml-auto {
margin-left: auto;
}
.col-mr-auto {
margin-right: auto;
}
@media (max-width: $size-xl) {
.col-xl-12,
.col-xl-11,
.col-xl-10,
.col-xl-9,
.col-xl-8,
.col-xl-7,
.col-xl-6,
.col-xl-5,
.col-xl-4,
.col-xl-3,
.col-xl-2,
.col-xl-1,
.col-xl-auto {
flex: none;
}
.col-xl-12 {
width: 100%;
}
.col-xl-11 {
width: 91.66666667%;
}
.col-xl-10 {
width: 83.33333333%;
}
.col-xl-9 {
width: 75%;
}
.col-xl-8 {
width: 66.66666667%;
}
.col-xl-7 {
width: 58.33333333%;
}
.col-xl-6 {
width: 50%;
}
.col-xl-5 {
width: 41.66666667%;
}
.col-xl-4 {
width: 33.33333333%;
}
.col-xl-3 {
width: 25%;
}
.col-xl-2 {
width: 16.66666667%;
}
.col-xl-1 {
width: 8.33333333%;
}
.col-xl-auto {
width: auto;
}
.hide-xl {
display: none !important;
}
.show-xl {
display: block !important;
}
}
@media (max-width: $size-lg) {
.col-lg-12,
.col-lg-11,
.col-lg-10,
.col-lg-9,
.col-lg-8,
.col-lg-7,
.col-lg-6,
.col-lg-5,
.col-lg-4,
.col-lg-3,
.col-lg-2,
.col-lg-1,
.col-lg-auto {
flex: none;
}
.col-lg-12 {
width: 100%;
}
.col-lg-11 {
width: 91.66666667%;
}
.col-lg-10 {
width: 83.33333333%;
}
.col-lg-9 {
width: 75%;
}
.col-lg-8 {
width: 66.66666667%;
}
.col-lg-7 {
width: 58.33333333%;
}
.col-lg-6 {
width: 50%;
}
.col-lg-5 {
width: 41.66666667%;
}
.col-lg-4 {
width: 33.33333333%;
}
.col-lg-3 {
width: 25%;
}
.col-lg-2 {
width: 16.66666667%;
}
.col-lg-1 {
width: 8.33333333%;
}
.col-lg-auto {
width: auto;
}
.hide-lg {
display: none !important;
}
.show-lg {
display: block !important;
}
}
@media (max-width: $size-md) {
.col-md-12,
.col-md-11,
.col-md-10,
.col-md-9,
.col-md-8,
.col-md-7,
.col-md-6,
.col-md-5,
.col-md-4,
.col-md-3,
.col-md-2,
.col-md-1,
.col-md-auto {
flex: none;
}
.col-md-12 {
width: 100%;
}
.col-md-11 {
width: 91.66666667%;
}
.col-md-10 {
width: 83.33333333%;
}
.col-md-9 {
width: 75%;
}
.col-md-8 {
width: 66.66666667%;
}
.col-md-7 {
width: 58.33333333%;
}
.col-md-6 {
width: 50%;
}
.col-md-5 {
width: 41.66666667%;
}
.col-md-4 {
width: 33.33333333%;
}
.col-md-3 {
width: 25%;
}
.col-md-2 {
width: 16.66666667%;
}
.col-md-1 {
width: 8.33333333%;
}
.col-md-auto {
width: auto;
}
.hide-md {
display: none !important;
}
.show-md {
display: block !important;
}
}
@media (max-width: $size-sm) {
.col-sm-12,
.col-sm-11,
.col-sm-10,
.col-sm-9,
.col-sm-8,
.col-sm-7,
.col-sm-6,
.col-sm-5,
.col-sm-4,
.col-sm-3,
.col-sm-2,
.col-sm-1,
.col-sm-auto {
flex: none;
}
.col-sm-12 {
width: 100%;
}
.col-sm-11 {
width: 91.66666667%;
}
.col-sm-10 {
width: 83.33333333%;
}
.col-sm-9 {
width: 75%;
}
.col-sm-8 {
width: 66.66666667%;
}
.col-sm-7 {
width: 58.33333333%;
}
.col-sm-6 {
width: 50%;
}
.col-sm-5 {
width: 41.66666667%;
}
.col-sm-4 {
width: 33.33333333%;
}
.col-sm-3 {
width: 25%;
}
.col-sm-2 {
width: 16.66666667%;
}
.col-sm-1 {
width: 8.33333333%;
}
.col-sm-auto {
width: auto;
}
.hide-sm {
display: none !important;
}
.show-sm {
display: block !important;
}
}
@media (max-width: $size-xs) {
.col-xs-12,
.col-xs-11,
.col-xs-10,
.col-xs-9,
.col-xs-8,
.col-xs-7,
.col-xs-6,
.col-xs-5,
.col-xs-4,
.col-xs-3,
.col-xs-2,
.col-xs-1,
.col-xs-auto {
flex: none;
}
.col-xs-12 {
width: 100%;
}
.col-xs-11 {
width: 91.66666667%;
}
.col-xs-10 {
width: 83.33333333%;
}
.col-xs-9 {
width: 75%;
}
.col-xs-8 {
width: 66.66666667%;
}
.col-xs-7 {
width: 58.33333333%;
}
.col-xs-6 {
width: 50%;
}
.col-xs-5 {
width: 41.66666667%;
}
.col-xs-4 {
width: 33.33333333%;
}
.col-xs-3 {
width: 25%;
}
.col-xs-2 {
width: 16.66666667%;
}
.col-xs-1 {
width: 8.33333333%;
}
.col-xs-auto {
width: auto;
}
.hide-xs {
display: none !important;
}
.show-xs {
display: block !important;
}
}

75
user/themes/test/scss/spectre/_media.scss Executable file
View File

@ -0,0 +1,75 @@
// Media
// Image responsive
.img-responsive {
display: block;
height: auto;
max-width: 100%;
}
// object-fit support is coming to Microsoft Edge
// https://developer.microsoft.com/en-us/microsoft-edge/platform/status/objectfitandobjectposition/
.img-fit-cover {
object-fit: cover;
}
.img-fit-contain {
object-fit: contain;
}
// Video responsive
.video-responsive {
display: block;
overflow: hidden;
padding: 0;
position: relative;
width: 100%;
&::before {
content: "";
display: block;
padding-bottom: 56.25%; // Default ratio 16:9, you can calculate this value by dividing 9 by 16
}
iframe,
object,
embed {
border: 0;
bottom: 0;
height: 100%;
left: 0;
position: absolute;
right: 0;
top: 0;
width: 100%;
}
}
video.video-responsive {
height: auto;
max-width: 100%;
&::before {
content: none;
}
}
.video-responsive-4-3 {
&::before {
padding-bottom: 75%; // Ratio 4:3
}
}
.video-responsive-1-1 {
&::before {
padding-bottom: 100%; // Ratio 1:1
}
}
// Figure
.figure {
margin: 0 0 $layout-spacing 0;
.figure-caption {
color: $gray-color-dark;
margin-top: $layout-spacing;
}
}

66
user/themes/test/scss/spectre/_menus.scss Executable file
View File

@ -0,0 +1,66 @@
// Menus
.menu {
@include shadow-variant(.05rem);
background: $bg-color-light;
border-radius: $border-radius;
list-style: none;
margin: 0;
min-width: $control-width-xs;
padding: $unit-2;
transform: translateY($layout-spacing-sm);
z-index: $zindex-3;
&.menu-nav {
background: transparent;
box-shadow: none;
}
.menu-item {
margin-top: 0;
padding: 0 $unit-2;
position: relative;
text-decoration: none;
& > a {
border-radius: $border-radius;
color: inherit;
display: block;
margin: 0 (-$unit-2);
padding: $unit-1 $unit-2;
text-decoration: none;
&:focus,
&:hover {
background: $secondary-color;
color: $primary-color;
}
&:active,
&.active {
background: $secondary-color;
color: $primary-color;
}
}
.form-checkbox,
.form-radio,
.form-switch {
margin: $unit-h 0;
}
& + .menu-item {
margin-top: $unit-1;
}
}
.menu-badge {
align-items: center;
display: flex;
height: 100%;
position: absolute;
right: 0;
top: 0;
.label {
margin-right: $unit-2;
}
}
}

57
user/themes/test/scss/spectre/_meters.scss Executable file
View File

@ -0,0 +1,57 @@
// Meters
// Credit: https://css-tricks.com/html5-meter-element/
.meter {
appearance: none;
background: $bg-color;
border: 0;
border-radius: $border-radius;
display: block;
width: 100%;
height: $unit-4;
&::-webkit-meter-inner-element {
display: block;
}
&::-webkit-meter-bar,
&::-webkit-meter-optimum-value,
&::-webkit-meter-suboptimum-value,
&::-webkit-meter-even-less-good-value {
border-radius: $border-radius;
}
&::-webkit-meter-bar {
background: $bg-color;
}
&::-webkit-meter-optimum-value {
background: $success-color;
}
&::-webkit-meter-suboptimum-value {
background: $warning-color;
}
&::-webkit-meter-even-less-good-value {
background: $error-color;
}
&::-moz-meter-bar,
&:-moz-meter-optimum,
&:-moz-meter-sub-optimum,
&:-moz-meter-sub-sub-optimum {
border-radius: $border-radius;
}
&:-moz-meter-optimum::-moz-meter-bar {
background: $success-color;
}
&:-moz-meter-sub-optimum::-moz-meter-bar {
background: $warning-color;
}
&:-moz-meter-sub-sub-optimum::-moz-meter-bar {
background: $error-color;
}
}

10
user/themes/test/scss/spectre/_mixins.scss Executable file
View File

@ -0,0 +1,10 @@
// Mixins
@import "mixins/avatar";
@import "mixins/button";
@import "mixins/clearfix";
@import "mixins/color";
@import "mixins/label";
@import "mixins/position";
@import "mixins/shadow";
@import "mixins/text";
@import "mixins/toast";

87
user/themes/test/scss/spectre/_modals.scss Executable file
View File

@ -0,0 +1,87 @@
// Modals
.modal {
align-items: center;
bottom: 0;
display: none;
justify-content: center;
left: 0;
opacity: 0;
overflow: hidden;
padding: $layout-spacing;
position: fixed;
right: 0;
top: 0;
&:target,
&.active {
display: flex;
opacity: 1;
z-index: $zindex-4;
.modal-overlay {
background: rgba($bg-color, .75);
bottom: 0;
cursor: default;
display: block;
left: 0;
position: absolute;
right: 0;
top: 0;
}
.modal-container {
animation: slide-down .2s ease 1;
z-index: $zindex-0;
}
}
&.modal-sm {
.modal-container {
max-width: $control-width-sm;
padding: 0 $unit-2;
}
}
&.modal-lg {
.modal-overlay {
background: $bg-color-light;
}
.modal-container {
box-shadow: none;
max-width: $control-width-lg;
}
}
}
.modal-container {
@include shadow-variant(.2rem);
background: $bg-color-light;
border-radius: $border-radius;
display: flex;
flex-direction: column;
max-height: 75vh;
max-width: $control-width-md;
padding: 0 $unit-4;
width: 100%;
&.modal-fullheight {
max-height: 100vh;
}
.modal-header {
color: $dark-color;
padding: $unit-4;
}
.modal-body {
overflow-y: auto;
padding: $unit-4;
position: relative;
}
.modal-footer {
padding: $unit-4;
text-align: right;
}
}

28
user/themes/test/scss/spectre/_navbar.scss Executable file
View File

@ -0,0 +1,28 @@
// Navbar
.navbar {
align-items: stretch;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.navbar-section {
align-items: center;
display: flex;
flex: 1 0 0;
&:not(:first-child):last-child {
justify-content: flex-end;
}
}
.navbar-center {
align-items: center;
display: flex;
flex: 0 0 auto;
}
.navbar-brand {
font-size: $font-size-lg;
text-decoration: none;
}
}

34
user/themes/test/scss/spectre/_navs.scss Executable file
View File

@ -0,0 +1,34 @@
// Navs
.nav {
display: flex;
flex-direction: column;
list-style: none;
margin: $unit-1 0;
.nav-item {
a {
color: $gray-color-dark;
padding: $unit-1 $unit-2;
text-decoration: none;
&:focus,
&:hover {
color: $primary-color;
}
}
&.active {
& > a {
color: darken($gray-color-dark, 10%);
font-weight: bold;
&:focus,
&:hover {
color: $primary-color;
}
}
}
}
& .nav {
margin-bottom: $unit-2;
margin-left: $unit-4;
}
}

446
user/themes/test/scss/spectre/_normalize.scss Executable file
View File

@ -0,0 +1,446 @@
/* Manually forked from Normalize.css */
/* normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
/**
* 1. Change the default font family in all browsers (opinionated).
* 2. Correct the line height in all browsers.
* 3. Prevent adjustments of font size after orientation changes in
* IE on Windows Phone and in iOS.
*/
/* Document
========================================================================== */
html {
font-family: sans-serif; /* 1 */
-ms-text-size-adjust: 100%; /* 3 */
-webkit-text-size-adjust: 100%; /* 3 */
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers (opinionated).
*/
body {
margin: 0;
}
/**
* Add the correct display in IE 9-.
*/
article,
aside,
footer,
header,
nav,
section {
display: block;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
========================================================================== */
/**
* Add the correct display in IE 9-.
* 1. Add the correct display in IE.
*/
figcaption,
figure,
main { /* 1 */
display: block;
}
/**
* Add the correct margin in IE 8 (removed).
*/
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers. (removed)
* 2. Correct the odd `em` font sizing in all browsers.
*/
/* Text-level semantics
========================================================================== */
/**
* 1. Remove the gray background on active links in IE 10.
* 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
*/
a {
background-color: transparent; /* 1 */
-webkit-text-decoration-skip: objects; /* 2 */
}
/**
* Remove the outline on focused links when they are also active or hovered
* in all browsers (opinionated).
*/
a:active,
a:hover {
outline-width: 0;
}
/**
* Modify default styling of address.
*/
address {
font-style: normal;
}
/**
* 1. Remove the bottom border in Firefox 39-.
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. (removed)
*/
/**
* Prevent the duplicate application of `bolder` by the next rule in Safari 6.
*/
b,
strong {
font-weight: inherit;
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
pre,
samp {
font-family: $mono-font-family; /* 1 (changed) */
font-size: 1em; /* 2 */
}
/**
* Add the correct font style in Android 4.3-.
*/
dfn {
font-style: italic;
}
/**
* Add the correct background and color in IE 9-. (Removed)
*/
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
font-weight: 400; /* (added) */
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Add the correct display in IE 9-.
*/
audio,
video {
display: inline-block;
}
/**
* Add the correct display in iOS 4-7.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Remove the border on images inside links in IE 10-.
*/
img {
border-style: none;
}
/**
* Hide the overflow in IE.
*/
svg:not(:root) {
overflow: hidden;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers (opinionated).
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 (changed) */
font-size: inherit; /* 1 (changed) */
line-height: inherit; /* 1 (changed) */
margin: 0; /* 2 */
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input { /* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select { /* 1 */
text-transform: none;
}
/**
* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
* controls in Android 4.
* 2. Correct the inability to style clickable types in iOS and Safari.
*/
button,
html [type="button"], /* 1 */
[type="reset"],
[type="submit"] {
-webkit-appearance: button; /* 2 */
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule (removed).
*/
/**
* Change the border, margin, and padding in all browsers (opinionated) (changed).
*/
fieldset {
border: 0;
margin: 0;
padding: 0;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
}
/**
* 1. Add the correct display in IE 9-.
* 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
display: inline-block; /* 1 */
vertical-align: baseline; /* 2 */
}
/**
* Remove the default vertical scrollbar in IE.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10-.
* 2. Remove the padding in IE 10-.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
* Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/* Interactive
========================================================================== */
/*
* Add the correct display in IE 9-.
* 1. Add the correct display in Edge, IE, and Firefox.
*/
details, /* 1 */
menu {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
outline: none;
}
/* Scripting
========================================================================== */
/**
* Add the correct display in IE 9-.
*/
canvas {
display: inline-block;
}
/**
* Add the correct display in IE.
*/
template {
display: none;
}
/* Hidden
========================================================================== */
/**
* Add the correct display in IE 10-.
*/
[hidden] {
display: none;
}

95
user/themes/test/scss/spectre/_off-canvas.scss Executable file
View File

@ -0,0 +1,95 @@
// Off canvas menus
$off-canvas-breakpoint: $size-lg !default;
.off-canvas {
display: flex;
flex-flow: nowrap;
height: 100%;
position: relative;
width: 100%;
.off-canvas-toggle {
display: block;
position: absolute;
top: $layout-spacing;
transition: none;
z-index: $zindex-0;
@if $rtl == true {
right: $layout-spacing;
} @else {
left: $layout-spacing;
}
}
.off-canvas-sidebar {
background: $bg-color;
bottom: 0;
min-width: 10rem;
overflow-y: auto;
position: fixed;
top: 0;
transition: transform .25s;
z-index: $zindex-2;
@if $rtl == true {
right: 0;
transform: translateX(100%);
} @else {
left: 0;
transform: translateX(-100%);
}
}
.off-canvas-content {
flex: 1 1 auto;
height: 100%;
padding: $layout-spacing $layout-spacing $layout-spacing 4rem;
}
.off-canvas-overlay {
background: rgba($dark-color, .1);
border-color: transparent;
border-radius: 0;
bottom: 0;
display: none;
height: 100%;
left: 0;
position: fixed;
right: 0;
top: 0;
width: 100%;
}
.off-canvas-sidebar {
&:target,
&.active {
transform: translateX(0);
}
&:target ~ .off-canvas-overlay,
&.active ~ .off-canvas-overlay {
display: block;
z-index: $zindex-1;
}
}
}
// Responsive layout
@media (min-width: $off-canvas-breakpoint) {
.off-canvas {
&.off-canvas-sidebar-show {
.off-canvas-toggle {
display: none;
}
.off-canvas-sidebar {
flex: 0 0 auto;
position: relative;
transform: none;
}
.off-canvas-overlay {
display: none !important;
}
}
}
}

60
user/themes/test/scss/spectre/_pagination.scss Executable file
View File

@ -0,0 +1,60 @@
// Pagination
.pagination {
display: flex;
list-style: none;
margin: $unit-1 0;
padding: $unit-1 0;
.page-item {
margin: $unit-1 $unit-o;
span {
display: inline-block;
padding: $unit-1 $unit-1;
}
a {
border-radius: $border-radius;
display: inline-block;
padding: $unit-1 $unit-2;
text-decoration: none;
&:focus,
&:hover {
color: $primary-color;
}
}
&.disabled {
a {
cursor: default;
opacity: .5;
pointer-events: none;
}
}
&.active {
a {
background: $primary-color;
color: $light-color;
}
}
&.page-prev,
&.page-next {
flex: 1 0 50%;
}
&.page-next {
text-align: right;
}
.page-item-title {
margin: 0;
}
.page-item-subtitle {
margin: 0;
opacity: .5;
}
}
}

23
user/themes/test/scss/spectre/_panels.scss Executable file
View File

@ -0,0 +1,23 @@
// Panels
.panel {
border: $border-width solid $border-color;
border-radius: $border-radius;
display: flex;
flex-direction: column;
.panel-header,
.panel-footer {
flex: 0 0 auto;
padding: $layout-spacing-lg;
}
.panel-nav {
flex: 0 0 auto;
}
.panel-body {
flex: 1 1 auto;
overflow-y: auto;
padding: 0 $layout-spacing-lg;
}
}

135
user/themes/test/scss/spectre/_parallax.scss Executable file
View File

@ -0,0 +1,135 @@
// Parallax
$parallax-deg: 3deg !default;
$parallax-offset: 4.5px !default;
$parallax-offset-z: 50px !default;
$parallax-perspective: 1000px !default;
$parallax-scale: .95 !default;
$parallax-fade-color: rgba(255, 255, 255, .35) !default;
// Mixin: Parallax direction
@mixin parallax-dir() {
height: 50%;
outline: none;
position: absolute;
width: 50%;
z-index: $zindex-1;
}
.parallax {
display: block;
height: auto;
position: relative;
width: auto;
.parallax-content {
@include shadow-variant(1rem);
height: auto;
transform: perspective($parallax-perspective);
transform-style: preserve-3d;
transition: all .4s ease;
width: 100%;
&::before {
content: "";
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
}
.parallax-front {
align-items: center;
color: $light-color;
display: flex;
height: 100%;
justify-content: center;
left: 0;
position: absolute;
text-align: center;
text-shadow: 0 0 20px rgba($dark-color, .75);
top: 0;
transform: translateZ($parallax-offset-z) scale($parallax-scale);
transition: transform .4s;
width: 100%;
z-index: $zindex-0;
}
.parallax-top-left {
@include parallax-dir();
left: 0;
top: 0;
&:focus ~ .parallax-content,
&:hover ~ .parallax-content {
transform: perspective($parallax-perspective) rotateX($parallax-deg) rotateY(-$parallax-deg);
&::before {
background: linear-gradient(135deg, $parallax-fade-color 0%, transparent 50%);
}
.parallax-front {
transform: translate3d($parallax-offset, $parallax-offset, $parallax-offset-z) scale($parallax-scale);
}
}
}
.parallax-top-right {
@include parallax-dir();
right: 0;
top: 0;
&:focus ~ .parallax-content,
&:hover ~ .parallax-content {
transform: perspective($parallax-perspective) rotateX($parallax-deg) rotateY($parallax-deg);
&::before {
background: linear-gradient(-135deg, $parallax-fade-color 0%, transparent 50%);
}
.parallax-front {
transform: translate3d(-$parallax-offset, $parallax-offset, $parallax-offset-z) scale($parallax-scale);
}
}
}
.parallax-bottom-left {
@include parallax-dir();
bottom: 0;
left: 0;
&:focus ~ .parallax-content,
&:hover ~ .parallax-content {
transform: perspective($parallax-perspective) rotateX(-$parallax-deg) rotateY(-$parallax-deg);
&::before {
background: linear-gradient(45deg, $parallax-fade-color 0%, transparent 50%);
}
.parallax-front {
transform: translate3d($parallax-offset, -$parallax-offset, $parallax-offset-z) scale($parallax-scale);
}
}
}
.parallax-bottom-right {
@include parallax-dir();
bottom: 0;
right: 0;
&:focus ~ .parallax-content,
&:hover ~ .parallax-content {
transform: perspective($parallax-perspective) rotateX(-$parallax-deg) rotateY($parallax-deg);
&::before {
background: linear-gradient(-45deg, $parallax-fade-color 0%, transparent 50%);
}
.parallax-front {
transform: translate3d(-$parallax-offset, -$parallax-offset, $parallax-offset-z) scale($parallax-scale);
}
}
}
}

65
user/themes/test/scss/spectre/_popovers.scss Executable file
View File

@ -0,0 +1,65 @@
// Popovers
.popover {
display: inline-block;
position: relative;
.popover-container {
left: 50%;
opacity: 0;
padding: $layout-spacing;
position: absolute;
top: 0;
transform: translate(-50%, -50%) scale(0);
transition: transform .2s;
width: $control-width-sm;
z-index: $zindex-3;
}
*:focus + .popover-container,
&:hover .popover-container {
display: block;
opacity: 1;
transform: translate(-50%, -100%) scale(1);
}
&.popover-right {
.popover-container {
left: 100%;
top: 50%;
}
*:focus + .popover-container,
&:hover .popover-container {
transform: translate(0, -50%) scale(1);
}
}
&.popover-bottom {
.popover-container {
left: 50%;
top: 100%;
}
*:focus + .popover-container,
&:hover .popover-container {
transform: translate(-50%, 0) scale(1);
}
}
&.popover-left {
.popover-container {
left: 0;
top: 50%;
}
*:focus + .popover-container,
&:hover .popover-container {
transform: translate(-100%, -50%) scale(1);
}
}
.card {
@include shadow-variant(.2rem);
border: 0;
}
}

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