mirror of
https://github.com/FreshRSS/FreshRSS.git
synced 2026-05-20 09:30:36 +00:00
Use native CSS instead of SCSS (#8241)
I was tired of having to handle the SCSS themes differently. fix https://github.com/FreshRSS/FreshRSS/issues/7611 Follow-up of https://github.com/FreshRSS/FreshRSS/pull/8200 Convert Ansum and Mapco themes from SCSS to native CSS. The changes are actually quite limited (mostly changing the syntax of the variables and a few other things) Require support for: * https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Nesting * https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/Nesting_selector * https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix SCSS and SAAS tools and references are also removed. Tests welcome. The styles are left as individual CSS files as designed originally in SCSS. I expect proper HTTP caching and HTTP/2 to be sufficient instead of aggregating back to a single CSS, but might be done in another PR if needed. At the same time, fixed the fact that we had various whitespace styles in our JSON files, in particular in those themes, sometimes with 2 spaces, or 4 spaces, or tabs. Use tabs everywhere as defined in editorconfig. I would like to merge this one first to complete https://github.com/FreshRSS/FreshRSS/pull/8230 * RTLCSS stringMap https://github.com/FreshRSS/FreshRSS/pull/8241#discussion_r2553175514 https://github.com/MohammadYounes/rtlcss/issues/108#issuecomment-347033134
This commit is contained in:
Alexandre Alapetite
committed by
GitHub
GitHub
parent
a7579e0cf5
commit
1c92d55917
+1
-1
@@ -6,7 +6,7 @@ end_of_line = lf
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
|
||||
[*.{css,scss}]
|
||||
[*.css]
|
||||
indent_style = tab
|
||||
|
||||
[*.{html,php,phtml}]
|
||||
|
||||
@@ -24,5 +24,3 @@
|
||||
*.save
|
||||
*.autosav
|
||||
*.autosave
|
||||
*.sass-cache
|
||||
sass.sh
|
||||
|
||||
@@ -3,9 +3,5 @@ extensions/
|
||||
node_modules/
|
||||
p/scripts/vendor/
|
||||
vendor/
|
||||
# ignore SASS-generated CSS
|
||||
p/themes/Ansum/*.css
|
||||
p/themes/Mapco/*.css
|
||||
p/themes/Swage/*.css
|
||||
# Ignore RTLCSS auto-generated CSS
|
||||
*.rtl.css
|
||||
|
||||
+65
-71
@@ -1,73 +1,67 @@
|
||||
{
|
||||
"extends": "stylelint-config-recommended-scss",
|
||||
"plugins": [
|
||||
"stylelint-order",
|
||||
"stylelint-scss",
|
||||
"@stylistic/stylelint-plugin"
|
||||
],
|
||||
"rules": {
|
||||
"at-rule-empty-line-before": [
|
||||
"always", {
|
||||
"ignoreAtRules": [ "after-comment", "else" ]
|
||||
}
|
||||
],
|
||||
"@stylistic/at-rule-name-space-after": [
|
||||
"always", {
|
||||
"ignoreAtRules": [ "after-comment" ]
|
||||
}
|
||||
],
|
||||
"@stylistic/block-closing-brace-newline-after": [
|
||||
"always", {
|
||||
"ignoreAtRules": [ "if", "else" ]
|
||||
}
|
||||
],
|
||||
"@stylistic/block-closing-brace-newline-before": "always-multi-line",
|
||||
"@stylistic/block-opening-brace-newline-after": "always-multi-line",
|
||||
"@stylistic/block-opening-brace-space-before": "always",
|
||||
"@stylistic/color-hex-case": "lower",
|
||||
"color-hex-length": "short",
|
||||
"color-no-invalid-hex": true,
|
||||
"@stylistic/declaration-colon-space-after": "always",
|
||||
"@stylistic/declaration-colon-space-before": "never",
|
||||
"@stylistic/indentation": "tab",
|
||||
"no-descending-specificity": null,
|
||||
"@stylistic/no-eol-whitespace": true,
|
||||
"property-no-vendor-prefix": true,
|
||||
"rule-empty-line-before": [
|
||||
"always", {
|
||||
"except": ["after-single-line-comment","first-nested"]
|
||||
}
|
||||
],
|
||||
"order/properties-order": [
|
||||
"margin",
|
||||
"padding",
|
||||
"background",
|
||||
"display",
|
||||
"float",
|
||||
"max-width",
|
||||
"width",
|
||||
"max-height",
|
||||
"height",
|
||||
"color",
|
||||
"font",
|
||||
"font-family",
|
||||
"font-size",
|
||||
"border",
|
||||
"border-top",
|
||||
"border-top-color",
|
||||
"border-right",
|
||||
"border-right-color",
|
||||
"border-bottom",
|
||||
"border-bottom-color",
|
||||
"border-left",
|
||||
"border-left-color",
|
||||
"border-radius",
|
||||
"box-shadow"
|
||||
],
|
||||
"scss/at-else-closing-brace-newline-after": "always-last-in-chain",
|
||||
"scss/at-else-closing-brace-space-after": "always-intermediate",
|
||||
"scss/at-else-empty-line-before": "never",
|
||||
"scss/at-if-closing-brace-newline-after": "always-last-in-chain",
|
||||
"scss/at-if-closing-brace-space-after": "always-intermediate"
|
||||
}
|
||||
"extends": "stylelint-config-recommended",
|
||||
"plugins": [
|
||||
"stylelint-order",
|
||||
"@stylistic/stylelint-plugin"
|
||||
],
|
||||
"rules": {
|
||||
"at-rule-empty-line-before": [
|
||||
"always", {
|
||||
"ignoreAtRules": [ "after-comment", "else" ]
|
||||
}
|
||||
],
|
||||
"@stylistic/at-rule-name-space-after": [
|
||||
"always", {
|
||||
"ignoreAtRules": [ "after-comment" ]
|
||||
}
|
||||
],
|
||||
"@stylistic/block-closing-brace-newline-after": [
|
||||
"always", {
|
||||
"ignoreAtRules": [ "if", "else" ]
|
||||
}
|
||||
],
|
||||
"@stylistic/block-closing-brace-newline-before": "always-multi-line",
|
||||
"@stylistic/block-opening-brace-newline-after": "always-multi-line",
|
||||
"@stylistic/block-opening-brace-space-before": "always",
|
||||
"@stylistic/color-hex-case": "lower",
|
||||
"color-hex-length": "short",
|
||||
"color-no-invalid-hex": true,
|
||||
"@stylistic/declaration-colon-space-after": "always",
|
||||
"@stylistic/declaration-colon-space-before": "never",
|
||||
"@stylistic/indentation": "tab",
|
||||
"no-descending-specificity": null,
|
||||
"@stylistic/no-eol-whitespace": true,
|
||||
"property-no-vendor-prefix": true,
|
||||
"rule-empty-line-before": [
|
||||
"always", {
|
||||
"except": ["after-single-line-comment","first-nested"]
|
||||
}
|
||||
],
|
||||
"order/properties-order": [
|
||||
"margin",
|
||||
"padding",
|
||||
"background",
|
||||
"display",
|
||||
"float",
|
||||
"max-width",
|
||||
"width",
|
||||
"max-height",
|
||||
"height",
|
||||
"color",
|
||||
"font",
|
||||
"font-family",
|
||||
"font-size",
|
||||
"border",
|
||||
"border-top",
|
||||
"border-top-color",
|
||||
"border-right",
|
||||
"border-right-color",
|
||||
"border-bottom",
|
||||
"border-bottom-color",
|
||||
"border-left",
|
||||
"border-left-color",
|
||||
"border-radius",
|
||||
"box-shadow"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
+85
-85
@@ -1,87 +1,87 @@
|
||||
{
|
||||
"name": "freshrss.org/freshrss",
|
||||
"description": "A free, self-hostable aggregator",
|
||||
"type": "project",
|
||||
"homepage": "https://freshrss.org/",
|
||||
"license": "AGPL-3.0",
|
||||
"support": {
|
||||
"docs": "https://freshrss.github.io/FreshRSS/",
|
||||
"issues": "https://github.com/FreshRSS/FreshRSS/issues",
|
||||
"source": "https://github.com/FreshRSS/FreshRSS/"
|
||||
},
|
||||
"keywords": [
|
||||
"news",
|
||||
"aggregator",
|
||||
"RSS",
|
||||
"Atom",
|
||||
"WebSub"
|
||||
],
|
||||
"require": {
|
||||
"php": ">=8.1",
|
||||
"ext-ctype": "*",
|
||||
"ext-curl": "*",
|
||||
"ext-dom": "*",
|
||||
"ext-fileinfo": "*",
|
||||
"ext-gmp": "*",
|
||||
"ext-intl": "*",
|
||||
"ext-json": "*",
|
||||
"ext-libxml": "*",
|
||||
"ext-mbstring": "*",
|
||||
"ext-openssl": "*",
|
||||
"ext-pcre": "*",
|
||||
"ext-pdo": "*",
|
||||
"ext-pdo_sqlite": "*",
|
||||
"ext-session": "*",
|
||||
"ext-simplexml": "*",
|
||||
"ext-xml": "*",
|
||||
"ext-xmlreader": "*",
|
||||
"ext-zend-opcache": "*",
|
||||
"ext-zip": "*",
|
||||
"ext-zlib": "*"
|
||||
},
|
||||
"suggest": {
|
||||
"ext-iconv": "*",
|
||||
"ext-pdo_mysql": "*",
|
||||
"ext-pdo_pgsql": "*"
|
||||
},
|
||||
"config": {
|
||||
"allow-plugins": {
|
||||
"phpstan/extension-installer": false
|
||||
},
|
||||
"platform": {
|
||||
"php": "8.1"
|
||||
}
|
||||
},
|
||||
"require-dev": {
|
||||
"php": ">=8.1",
|
||||
"ext-phar": "*",
|
||||
"ext-tokenizer": "*",
|
||||
"ext-xmlwriter": "*",
|
||||
"phpstan/phpstan": "^2.1",
|
||||
"phpstan/phpstan-phpunit": "^2.0",
|
||||
"phpstan/phpstan-strict-rules": "^2.0",
|
||||
"phpunit/phpunit": "^10",
|
||||
"squizlabs/php_codesniffer": "^4.0"
|
||||
},
|
||||
"scripts": {
|
||||
"php-lint": "find . -type d -name 'vendor' -prune -o -name '*.php' -print0 | xargs -0 -n1 -P4 php -l 1>/dev/null",
|
||||
"phtml-lint": "find . -type d -name 'vendor' -prune -o -name '*.phtml' -print0 | xargs -0 -n1 -P4 php -l 1>/dev/null",
|
||||
"phpcs": "phpcs . -s",
|
||||
"phpcbf": "phpcbf . -p -s",
|
||||
"phpstan": "phpstan analyse .",
|
||||
"phpstan-next": "phpstan analyse -c phpstan-next.neon .",
|
||||
"phpunit": "phpunit --bootstrap ./tests/bootstrap.php --display-notices --display-phpunit-deprecations ./tests",
|
||||
"translations": "cli/manipulate.translation.php --action format && cli/check.translation.php --generate-readme",
|
||||
"test": [
|
||||
"@php-lint",
|
||||
"@phtml-lint",
|
||||
"@phpunit",
|
||||
"@phpcs",
|
||||
"@phpstan"
|
||||
],
|
||||
"fix": [
|
||||
"@translations",
|
||||
"@phpcbf"
|
||||
]
|
||||
}
|
||||
"name": "freshrss.org/freshrss",
|
||||
"description": "A free, self-hostable aggregator",
|
||||
"type": "project",
|
||||
"homepage": "https://freshrss.org/",
|
||||
"license": "AGPL-3.0",
|
||||
"support": {
|
||||
"docs": "https://freshrss.github.io/FreshRSS/",
|
||||
"issues": "https://github.com/FreshRSS/FreshRSS/issues",
|
||||
"source": "https://github.com/FreshRSS/FreshRSS/"
|
||||
},
|
||||
"keywords": [
|
||||
"news",
|
||||
"aggregator",
|
||||
"RSS",
|
||||
"Atom",
|
||||
"WebSub"
|
||||
],
|
||||
"require": {
|
||||
"php": ">=8.1",
|
||||
"ext-ctype": "*",
|
||||
"ext-curl": "*",
|
||||
"ext-dom": "*",
|
||||
"ext-fileinfo": "*",
|
||||
"ext-gmp": "*",
|
||||
"ext-intl": "*",
|
||||
"ext-json": "*",
|
||||
"ext-libxml": "*",
|
||||
"ext-mbstring": "*",
|
||||
"ext-openssl": "*",
|
||||
"ext-pcre": "*",
|
||||
"ext-pdo": "*",
|
||||
"ext-pdo_sqlite": "*",
|
||||
"ext-session": "*",
|
||||
"ext-simplexml": "*",
|
||||
"ext-xml": "*",
|
||||
"ext-xmlreader": "*",
|
||||
"ext-zend-opcache": "*",
|
||||
"ext-zip": "*",
|
||||
"ext-zlib": "*"
|
||||
},
|
||||
"suggest": {
|
||||
"ext-iconv": "*",
|
||||
"ext-pdo_mysql": "*",
|
||||
"ext-pdo_pgsql": "*"
|
||||
},
|
||||
"config": {
|
||||
"allow-plugins": {
|
||||
"phpstan/extension-installer": false
|
||||
},
|
||||
"platform": {
|
||||
"php": "8.1"
|
||||
}
|
||||
},
|
||||
"require-dev": {
|
||||
"php": ">=8.1",
|
||||
"ext-phar": "*",
|
||||
"ext-tokenizer": "*",
|
||||
"ext-xmlwriter": "*",
|
||||
"phpstan/phpstan": "^2.1",
|
||||
"phpstan/phpstan-phpunit": "^2.0",
|
||||
"phpstan/phpstan-strict-rules": "^2.0",
|
||||
"phpunit/phpunit": "^10",
|
||||
"squizlabs/php_codesniffer": "^4.0"
|
||||
},
|
||||
"scripts": {
|
||||
"php-lint": "find . -type d -name 'vendor' -prune -o -name '*.php' -print0 | xargs -0 -n1 -P4 php -l 1>/dev/null",
|
||||
"phtml-lint": "find . -type d -name 'vendor' -prune -o -name '*.phtml' -print0 | xargs -0 -n1 -P4 php -l 1>/dev/null",
|
||||
"phpcs": "phpcs . -s",
|
||||
"phpcbf": "phpcbf . -p -s",
|
||||
"phpstan": "phpstan analyse .",
|
||||
"phpstan-next": "phpstan analyse -c phpstan-next.neon .",
|
||||
"phpunit": "phpunit --bootstrap ./tests/bootstrap.php --display-notices --display-phpunit-deprecations ./tests",
|
||||
"translations": "cli/manipulate.translation.php --action format && cli/check.translation.php --generate-readme",
|
||||
"test": [
|
||||
"@php-lint",
|
||||
"@phtml-lint",
|
||||
"@phpunit",
|
||||
"@phpcs",
|
||||
"@phpstan"
|
||||
],
|
||||
"fix": [
|
||||
"@translations",
|
||||
"@phpcbf"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
Generated
+1949
-1949
File diff suppressed because it is too large
Load Diff
+27
-27
@@ -1,29 +1,29 @@
|
||||
{
|
||||
"name": "freshrss.org/freshrss",
|
||||
"description": "A free, self-hostable aggregator",
|
||||
"type": "project",
|
||||
"homepage": "https://freshrss.org/",
|
||||
"license": "AGPL-3.0",
|
||||
"repositories": [
|
||||
{
|
||||
"type": "git",
|
||||
"url": "https://github.com/FreshRSS/simplepie.git"
|
||||
}
|
||||
],
|
||||
"require": {
|
||||
"marienfressinaud/lib_opml": "0.5.1",
|
||||
"phpgt/cssxpath": "v1.4.0",
|
||||
"phpmailer/phpmailer": "7.0.0",
|
||||
"simplepie/simplepie": "dev-freshrss#e7b26b4f01d377dc8174d5d4aee961604534d065"
|
||||
},
|
||||
"config": {
|
||||
"sort-packages": true,
|
||||
"vendor-dir": "./"
|
||||
},
|
||||
"scripts": {
|
||||
"post-update-cmd": [
|
||||
"git clean -d -ff -X .",
|
||||
"find . -name '.git' -type d -exec rm -rf {} + || true"
|
||||
]
|
||||
}
|
||||
"name": "freshrss.org/freshrss",
|
||||
"description": "A free, self-hostable aggregator",
|
||||
"type": "project",
|
||||
"homepage": "https://freshrss.org/",
|
||||
"license": "AGPL-3.0",
|
||||
"repositories": [
|
||||
{
|
||||
"type": "git",
|
||||
"url": "https://github.com/FreshRSS/simplepie.git"
|
||||
}
|
||||
],
|
||||
"require": {
|
||||
"marienfressinaud/lib_opml": "0.5.1",
|
||||
"phpgt/cssxpath": "v1.4.0",
|
||||
"phpmailer/phpmailer": "7.0.0",
|
||||
"simplepie/simplepie": "dev-freshrss#e7b26b4f01d377dc8174d5d4aee961604534d065"
|
||||
},
|
||||
"config": {
|
||||
"sort-packages": true,
|
||||
"vendor-dir": "./"
|
||||
},
|
||||
"scripts": {
|
||||
"post-update-cmd": [
|
||||
"git clean -d -ff -X .",
|
||||
"find . -name '.git' -type d -exec rm -rf {} + || true"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
+1
-1
@@ -1,6 +1,6 @@
|
||||
<IfModule mod_authz_core.c>
|
||||
# Deny files without extension or with specific extensions
|
||||
<FilesMatch "^[^.]+$|\.(md|scss|sh)$">
|
||||
<FilesMatch "^[^.]+$|\.(md|sh)$">
|
||||
Require all denied
|
||||
</FilesMatch>
|
||||
</IfModule>
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
{
|
||||
"name": "Alternative Dark",
|
||||
"author": "Ghost",
|
||||
"description": "Save my eyes!!!",
|
||||
"version": 0.1,
|
||||
"files": ["_frss.css", "adark.css"],
|
||||
"theme-color": "#171717"
|
||||
"name": "Alternative Dark",
|
||||
"author": "Ghost",
|
||||
"description": "Save my eyes!!!",
|
||||
"version": 0.1,
|
||||
"files": ["_frss.css", "adark.css"],
|
||||
"theme-color": "#171717"
|
||||
}
|
||||
|
||||
@@ -1,13 +1,7 @@
|
||||
@use "sass:string";
|
||||
|
||||
@use "mixins";
|
||||
|
||||
@use "variables";
|
||||
|
||||
/*=== COMPONENTS */
|
||||
/*===============*/
|
||||
/*=== Forms */
|
||||
// parti dans _forms.scss
|
||||
/* parti dans _forms.css */
|
||||
|
||||
/*=== Horizontal-list */
|
||||
.horizontal-list {
|
||||
@@ -24,14 +18,14 @@
|
||||
/*=== Dropdown */
|
||||
.dropdown {
|
||||
.dropdown-target:target + .btn {
|
||||
background-color: variables.$grey-medium-light;
|
||||
background-color: var(--grey-medium-light);
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
margin: 9px 0 0 0;
|
||||
padding: 0.5rem 0 1rem 0;
|
||||
background: variables.$grey-lighter;
|
||||
background: var(--grey-lighter);
|
||||
font-size: 1rem;
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
@@ -48,20 +42,20 @@
|
||||
padding: 1rem 1.5rem;
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
color: variables.$grey-dark;
|
||||
color: var(--grey-dark);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.item {
|
||||
|
||||
@include mixins.transition(all, 0.075s, ease-in-out);
|
||||
transition: all 0.075s ease-in-out;
|
||||
|
||||
> a,
|
||||
> span,
|
||||
> .as-link {
|
||||
& > a,
|
||||
& > span,
|
||||
& > .as-link {
|
||||
padding: 0 2rem;
|
||||
color: variables.$main-font-color;
|
||||
color: var(--main-font-color);
|
||||
font-size: inherit;
|
||||
line-height: 2.5em;
|
||||
|
||||
@@ -70,11 +64,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
> a,
|
||||
> .as-link {
|
||||
& > a,
|
||||
& > .as-link {
|
||||
&:not(.addItem):hover {
|
||||
background: variables.$main-first;
|
||||
color: variables.$white;
|
||||
background: var(--main-first);
|
||||
color: var(--white);
|
||||
|
||||
.icon {
|
||||
filter: grayscale(100%) brightness(2.5);
|
||||
@@ -85,8 +79,8 @@
|
||||
&.dropdown-section {
|
||||
margin-top: 0.75rem;
|
||||
|
||||
~ .dropdown-section {
|
||||
border-top-color: variables.$grey-light;
|
||||
& ~ .dropdown-section {
|
||||
border-top-color: var(--grey-light);
|
||||
}
|
||||
|
||||
.item {
|
||||
@@ -97,10 +91,10 @@
|
||||
}
|
||||
|
||||
&:not(.addItem) {
|
||||
> a:hover,
|
||||
& > a:hover,
|
||||
button:hover {
|
||||
background: variables.$main-first;
|
||||
color: variables.$white;
|
||||
background: var(--main-first);
|
||||
color: var(--white);
|
||||
|
||||
.icon {
|
||||
filter: brightness(3);
|
||||
@@ -115,15 +109,15 @@
|
||||
}
|
||||
}
|
||||
|
||||
~ .dropdown-header {
|
||||
& ~ .dropdown-header {
|
||||
margin-top: 0.75rem;
|
||||
padding-top: 1.75rem;
|
||||
border-top-color: variables.$grey-light;
|
||||
border-top-color: var(--grey-light);
|
||||
}
|
||||
|
||||
&.separator {
|
||||
margin-top: 0.75rem;
|
||||
border-top-color: variables.$grey-light;
|
||||
border-top-color: var(--grey-light);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -138,21 +132,21 @@
|
||||
}
|
||||
|
||||
.tree .tree-folder .tree-folder-items .dropdown-menu {
|
||||
// to reset the appearance of the dropdown in the case of a dark sidebar
|
||||
/* to reset the appearance of the dropdown in the case of a dark sidebar */
|
||||
.item {
|
||||
padding: 0;
|
||||
|
||||
a,
|
||||
button {
|
||||
color: variables.$main-font-color;
|
||||
color: var(--main-font-color);
|
||||
|
||||
&:hover {
|
||||
color: variables.$white;
|
||||
color: var(--white);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: variables.$main-first;
|
||||
background: var(--main-first);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -162,12 +156,12 @@
|
||||
|
||||
/*=== Alerts */
|
||||
.alert {
|
||||
background: variables.$grey-lighter;
|
||||
color: variables.$grey-dark;
|
||||
background: var(--grey-lighter);
|
||||
color: var(--grey-dark);
|
||||
font-size: 1rem;
|
||||
border: 1px solid variables.$grey-medium;
|
||||
border: 1px solid var(--grey-medium);
|
||||
border-radius: 3px;
|
||||
text-shadow: 0 0 1px variables.$grey-light;
|
||||
text-shadow: 0 0 1px var(--grey-light);
|
||||
}
|
||||
|
||||
.alert-head {
|
||||
@@ -180,30 +174,30 @@
|
||||
}
|
||||
|
||||
.alert-warn {
|
||||
background: variables.$warning-light;
|
||||
color: variables.$warning-text;
|
||||
border: 1px solid string.unquote(variables.$warning-text + '33'); // on ajoute l’opacité à la fin
|
||||
background: var(--warning-light);
|
||||
color: var(--warning-text);
|
||||
border: 1px solid color-mix(in srgb, var(--warning-text) 20%, transparent);
|
||||
}
|
||||
|
||||
.alert-success {
|
||||
background: variables.$success-light;
|
||||
color: variables.$success-text;
|
||||
border: 1px solid string.unquote(variables.$success-text + '33');
|
||||
background: var(--success-light);
|
||||
color: var(--success-text);
|
||||
border: 1px solid color-mix(in srgb, var(--success-text) 20%, transparent);
|
||||
}
|
||||
|
||||
.alert-error {
|
||||
background: variables.$alert-light;
|
||||
color: variables.$alert-text;
|
||||
border: 1px solid string.unquote(variables.$alert-text + '33');
|
||||
background: var(--alert-light);
|
||||
color: var(--alert-text);
|
||||
border: 1px solid color-mix(in srgb, var(--alert-text) 20%, transparent);
|
||||
}
|
||||
|
||||
/*=== Pagination */
|
||||
.pagination {
|
||||
background: variables.$grey-light;
|
||||
color: variables.$main-font-color;
|
||||
background: var(--grey-light);
|
||||
color: var(--main-font-color);
|
||||
|
||||
.item a {
|
||||
color: variables.$main-font-color;
|
||||
color: var(--main-font-color);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -214,15 +208,15 @@
|
||||
|
||||
/*=== Boxes */
|
||||
.box {
|
||||
background: variables.$white;
|
||||
// border: 1px solid #ddd;
|
||||
background: var(--white);
|
||||
/* border: 1px solid #ddd; */
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.25);
|
||||
|
||||
.box-title {
|
||||
background: variables.$grey-light;
|
||||
color: variables.$main-font-color;
|
||||
background: var(--grey-light);
|
||||
color: var(--main-font-color);
|
||||
border-radius: 2px 2px 0 0;
|
||||
}
|
||||
|
||||
@@ -231,9 +225,9 @@
|
||||
|
||||
.item {
|
||||
padding: 0.5rem 0;
|
||||
color: variables.$main-font-color;
|
||||
color: var(--main-font-color);
|
||||
font-size: 1rem;
|
||||
border-bottom: 1px solid variables.$grey-light;
|
||||
border-bottom: 1px solid var(--grey-light);
|
||||
line-height: 1.7em;
|
||||
}
|
||||
|
||||
@@ -253,7 +247,7 @@
|
||||
|
||||
&:hover {
|
||||
border-radius: 2px;
|
||||
background-color: variables.$main-first;
|
||||
background-color: var(--main-first);
|
||||
|
||||
.icon {
|
||||
filter: brightness(3);
|
||||
@@ -266,13 +260,13 @@
|
||||
#bigMarkAsRead.big {
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
background: variables.$main-first-light;
|
||||
color: variables.$main-first;
|
||||
background: var(--main-first-light);
|
||||
color: var(--main-first);
|
||||
|
||||
@include mixins.transition(all, 0.15s, ease-in-out);
|
||||
transition: all 0.15s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
background: variables.$main-first;
|
||||
background: var(--main-first);
|
||||
color: #fff;
|
||||
|
||||
.bigTick {
|
||||
@@ -0,0 +1,286 @@
|
||||
/*=== COMPONENTS */
|
||||
/*===============*/
|
||||
/*=== Forms */
|
||||
/* parti dans _forms.css */
|
||||
|
||||
/*=== Horizontal-list */
|
||||
.horizontal-list {
|
||||
padding: 0.1rem 0;
|
||||
|
||||
& > .item {
|
||||
&:first-child {
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
/*=== Dropdown */
|
||||
.dropdown {
|
||||
.dropdown-target:target + .btn {
|
||||
background-color: var(--grey-medium-light);
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
margin: 9px 0 0 0;
|
||||
padding: 0.5rem 0 1rem 0;
|
||||
background: var(--grey-lighter);
|
||||
font-size: 1rem;
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0px 6px 8px 0px rgba(0,0,0,0.35);
|
||||
text-align: right;
|
||||
|
||||
&::after {
|
||||
border: none;
|
||||
left: 17px;
|
||||
}
|
||||
|
||||
.dropdown-header,
|
||||
.dropdown-section .dropdown-section-title {
|
||||
padding: 1rem 1.5rem;
|
||||
font-weight: bold;
|
||||
text-align: right;
|
||||
color: var(--grey-dark);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.item {
|
||||
|
||||
transition: all 0.075s ease-in-out;
|
||||
|
||||
& > a,
|
||||
& > span,
|
||||
& > .as-link {
|
||||
padding: 0 2rem;
|
||||
color: var(--main-font-color);
|
||||
font-size: inherit;
|
||||
line-height: 2.5em;
|
||||
|
||||
span.icon {
|
||||
padding: 0 0.25rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
& > a,
|
||||
& > .as-link {
|
||||
&:not(.addItem):hover {
|
||||
background: var(--main-first);
|
||||
color: var(--white);
|
||||
|
||||
.icon {
|
||||
filter: grayscale(100%) brightness(2.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.dropdown-section {
|
||||
margin-top: 0.75rem;
|
||||
|
||||
& ~ .dropdown-section {
|
||||
border-top-color: var(--grey-light);
|
||||
}
|
||||
|
||||
.item {
|
||||
a, .as-link {
|
||||
padding-right: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.addItem) {
|
||||
& > a:hover,
|
||||
button:hover {
|
||||
background: var(--main-first);
|
||||
color: var(--white);
|
||||
|
||||
.icon {
|
||||
filter: brightness(3);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[aria-checked="true"] {
|
||||
a::before {
|
||||
margin: 0 -14px 0 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
& ~ .dropdown-header {
|
||||
margin-top: 0.75rem;
|
||||
padding-top: 1.75rem;
|
||||
border-top-color: var(--grey-light);
|
||||
}
|
||||
|
||||
&.separator {
|
||||
margin-top: 0.75rem;
|
||||
border-top-color: var(--grey-light);
|
||||
}
|
||||
}
|
||||
|
||||
.input {
|
||||
select, input {
|
||||
margin: 0 auto 5px;
|
||||
padding: 2px 5px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.tree .tree-folder .tree-folder-items .dropdown-menu {
|
||||
/* to reset the appearance of the dropdown in the case of a dark sidebar */
|
||||
.item {
|
||||
padding: 0;
|
||||
|
||||
a,
|
||||
button {
|
||||
color: var(--main-font-color);
|
||||
|
||||
&:hover {
|
||||
color: var(--white);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--main-first);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/*=== Alerts */
|
||||
.alert {
|
||||
background: var(--grey-lighter);
|
||||
color: var(--grey-dark);
|
||||
font-size: 1rem;
|
||||
border: 1px solid var(--grey-medium);
|
||||
border-radius: 3px;
|
||||
text-shadow: 0 0 1px var(--grey-light);
|
||||
}
|
||||
|
||||
.alert-head {
|
||||
font-size: 1.15em;
|
||||
}
|
||||
|
||||
.alert > a {
|
||||
text-decoration: underline;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.alert-warn {
|
||||
background: var(--warning-light);
|
||||
color: var(--warning-text);
|
||||
border: 1px solid color-mix(in srgb, var(--warning-text) 20%, transparent);
|
||||
}
|
||||
|
||||
.alert-success {
|
||||
background: var(--success-light);
|
||||
color: var(--success-text);
|
||||
border: 1px solid color-mix(in srgb, var(--success-text) 20%, transparent);
|
||||
}
|
||||
|
||||
.alert-error {
|
||||
background: var(--alert-light);
|
||||
color: var(--alert-text);
|
||||
border: 1px solid color-mix(in srgb, var(--alert-text) 20%, transparent);
|
||||
}
|
||||
|
||||
/*=== Pagination */
|
||||
.pagination {
|
||||
background: var(--grey-light);
|
||||
color: var(--main-font-color);
|
||||
|
||||
.item a {
|
||||
color: var(--main-font-color);
|
||||
}
|
||||
}
|
||||
|
||||
#load_more.loading,
|
||||
#load_more.loading:hover {
|
||||
background: url("loader.gif") center center no-repeat #34495e;
|
||||
}
|
||||
|
||||
/*=== Boxes */
|
||||
.box {
|
||||
background: var(--white);
|
||||
/* border: 1px solid #ddd; */
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.25);
|
||||
|
||||
.box-title {
|
||||
background: var(--grey-light);
|
||||
color: var(--main-font-color);
|
||||
border-radius: 2px 2px 0 0;
|
||||
}
|
||||
|
||||
.box-content {
|
||||
padding-right: 30px;
|
||||
|
||||
.item {
|
||||
padding: 0.5rem 0;
|
||||
color: var(--main-font-color);
|
||||
font-size: 1rem;
|
||||
border-bottom: 1px solid var(--grey-light);
|
||||
line-height: 1.7em;
|
||||
}
|
||||
|
||||
.item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.configure {
|
||||
margin-left: 0.5rem;
|
||||
padding: 0.25rem;
|
||||
border-radius: 3px;
|
||||
|
||||
.icon {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-radius: 2px;
|
||||
background-color: var(--main-first);
|
||||
|
||||
.icon {
|
||||
filter: brightness(3);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*=== "Load more" part */
|
||||
#bigMarkAsRead.big {
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
background: var(--main-first-light);
|
||||
color: var(--main-first);
|
||||
|
||||
transition: all 0.15s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
background: var(--main-first);
|
||||
color: #fff;
|
||||
|
||||
.bigTick {
|
||||
filter: brightness(7);
|
||||
}
|
||||
}
|
||||
|
||||
.bigTick {
|
||||
margin: 0.5rem 0;
|
||||
background: url(icons/tick-color.svg) center no-repeat;
|
||||
display: inline-block;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
text-indent: -9999px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
@@ -1,11 +1,9 @@
|
||||
@use "variables";
|
||||
|
||||
/*=== Configuration pages */
|
||||
.post {
|
||||
font-size: 1rem;
|
||||
|
||||
h1, h2 {
|
||||
color: variables.$main-font-color;
|
||||
color: var(--main-font-color);
|
||||
font-size: 2rem;
|
||||
margin-top: 1.75rem;
|
||||
font-weight: 300;
|
||||
@@ -17,14 +15,14 @@
|
||||
}
|
||||
|
||||
a[href="./"] {
|
||||
// This is the "Back to your feeds" button.
|
||||
/* This is the "Back to your feeds" button.*/
|
||||
margin: 0;
|
||||
padding: 0.75rem 1.5rem;
|
||||
background: variables.$grey-lighter;
|
||||
background: var(--grey-lighter);
|
||||
display: inline-block;
|
||||
color: variables.$grey-dark;
|
||||
color: var(--grey-dark);
|
||||
font-size: 1rem;
|
||||
border: 1px solid variables.$grey-medium-light;
|
||||
border: 1px solid var(--grey-medium-light);
|
||||
border-radius: 5px;
|
||||
min-width: 15px;
|
||||
line-height: 25px;
|
||||
@@ -33,9 +31,9 @@
|
||||
overflow: hidden;
|
||||
|
||||
&:hover {
|
||||
background: variables.$main-first;
|
||||
background: var(--main-first);
|
||||
color: white;
|
||||
border: 1px solid variables.$main-first;
|
||||
border: 1px solid var(--main-first);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
/*=== Configuration pages */
|
||||
.post {
|
||||
font-size: 1rem;
|
||||
|
||||
h1, h2 {
|
||||
color: var(--main-font-color);
|
||||
font-size: 2rem;
|
||||
margin-top: 1.75rem;
|
||||
font-weight: 300;
|
||||
line-height: 1.2em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
a[href="./"] {
|
||||
/* This is the "Back to your feeds" button.*/
|
||||
margin: 0;
|
||||
padding: 0.75rem 1.5rem;
|
||||
background: var(--grey-lighter);
|
||||
display: inline-block;
|
||||
color: var(--grey-dark);
|
||||
font-size: 1rem;
|
||||
border: 1px solid var(--grey-medium-light);
|
||||
border-radius: 5px;
|
||||
min-width: 15px;
|
||||
line-height: 25px;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
|
||||
&:hover {
|
||||
background: var(--main-first);
|
||||
color: white;
|
||||
border: 1px solid var(--main-first);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
#slider {
|
||||
border-right: none;
|
||||
box-shadow: 0px 6px 8px 0px rgba(0,0,0,0.35);
|
||||
}
|
||||
|
||||
.theme-preview-list {
|
||||
.preview-container {
|
||||
.properties {
|
||||
padding: 1rem;
|
||||
background: rgba(0, 0, 0, 0.75);
|
||||
color: white;
|
||||
border: 0;
|
||||
|
||||
.page-number {
|
||||
left: 1rem;
|
||||
top: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
/*=== DIVERS */
|
||||
/*===========*/
|
||||
.aside.aside_feed .nav-form input,
|
||||
.aside.aside_feed .nav-form select {
|
||||
width: 140px;
|
||||
}
|
||||
|
||||
.aside.aside_feed .nav-form .dropdown .dropdown-menu {
|
||||
left: -20px;
|
||||
}
|
||||
|
||||
.aside.aside_feed .nav-form .dropdown .dropdown-menu::after {
|
||||
left: 33px;
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
@font-face {
|
||||
font-family: "lato";
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
font-weight: 400;
|
||||
src: local("Lato"), url("../fonts/LatoLatin-Regular.woff") format("woff");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "lato";
|
||||
font-style: italic;
|
||||
font-stretch: normal;
|
||||
font-weight: 400;
|
||||
src: local("Lato"), url("../fonts/LatoLatin-Italic.woff") format("woff");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "lato";
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
font-weight: 700;
|
||||
src: local("Lato"), url("../fonts/LatoLatin-Bold.woff") format("woff");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "lato";
|
||||
font-style: italic;
|
||||
font-stretch: normal;
|
||||
font-weight: 700;
|
||||
src: local("Lato"), url("../fonts/LatoLatin-BoldItalic.woff") format("woff");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "spectral";
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
font-weight: 400;
|
||||
src: local("Spectral"), url("../fonts/Spectral-Regular.woff") format("woff");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "spectral";
|
||||
font-style: italic;
|
||||
font-stretch: normal;
|
||||
font-weight: 400;
|
||||
src: local("Spectral"), url("../fonts/Spectral-Italic.woff") format("woff");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "spectral";
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
font-weight: 700;
|
||||
src: local("Spectral"), url("../fonts/Spectral-Bold.woff") format("woff");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "spectral";
|
||||
font-style: italic;
|
||||
font-stretch: normal;
|
||||
font-weight: 700;
|
||||
src: local("Spectral"), url("../fonts/Spectral-BoldItalic.woff") format("woff");
|
||||
}
|
||||
@@ -1,13 +1,9 @@
|
||||
@use "mixins";
|
||||
|
||||
@use "variables";
|
||||
|
||||
/* btns */
|
||||
.btn {
|
||||
margin: 0;
|
||||
padding: 0.5rem 1.5rem;
|
||||
background: variables.$grey-lighter;
|
||||
color: variables.$grey-dark;
|
||||
background: var(--grey-lighter);
|
||||
color: var(--grey-dark);
|
||||
font-size: 1rem;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
@@ -16,15 +12,15 @@
|
||||
line-height: 25px;
|
||||
vertical-align: middle;
|
||||
|
||||
@include mixins.transition(all, 0.15s, ease-in-out);
|
||||
transition: all 0.15s ease-in-out;
|
||||
|
||||
&.btn-important {
|
||||
background: variables.$main-first;
|
||||
color: variables.$white;
|
||||
background: var(--main-first);
|
||||
color: var(--white);
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
background: variables.$main-first-alt;
|
||||
background: var(--main-first-alt);
|
||||
}
|
||||
|
||||
img {
|
||||
@@ -34,12 +30,12 @@
|
||||
|
||||
|
||||
&.btn-attention {
|
||||
background: variables.$alert-bg;
|
||||
background: var(--alert-bg);
|
||||
color: #fff;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
background: variables.$alert-text;
|
||||
background: var(--alert-text);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -65,7 +61,7 @@ label {
|
||||
min-height: 25px;
|
||||
padding: 5px 0;
|
||||
cursor: pointer;
|
||||
color: variables.$grey-dark;
|
||||
color: var(--grey-dark);
|
||||
}
|
||||
|
||||
textarea {
|
||||
@@ -74,11 +70,11 @@ textarea {
|
||||
|
||||
input, select, textarea, button {
|
||||
padding: 5px 10px;
|
||||
background: variables.$white;
|
||||
color: variables.$grey-dark;
|
||||
background: var(--white);
|
||||
color: var(--grey-dark);
|
||||
font-family: "lato", "Helvetica", "Arial", sans-serif;
|
||||
font-size: 1rem;
|
||||
border: 1px solid variables.$grey-light;
|
||||
border: 1px solid var(--grey-light);
|
||||
border-radius: 2px;
|
||||
min-height: 25px;
|
||||
line-height: 25px;
|
||||
@@ -94,18 +90,19 @@ option {
|
||||
}
|
||||
|
||||
input:focus, select:focus, textarea:focus {
|
||||
color: variables.$main-font-color;
|
||||
border-color: variables.$main-first;
|
||||
color: var(--main-font-color);
|
||||
border-color: var(--main-first);
|
||||
}
|
||||
|
||||
input:invalid, select:invalid {
|
||||
color: variables.$alert-bg;
|
||||
border-color: variables.$alert-bg;
|
||||
color: var(--alert-bg);
|
||||
border-color: var(--alert-bg);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
input:disabled, select:disabled {
|
||||
background: variables.$grey-light;
|
||||
color: var(--grey-medium-dark);
|
||||
border-color: var(--grey-medium-dark);
|
||||
}
|
||||
|
||||
.form-group {
|
||||
@@ -0,0 +1,141 @@
|
||||
/* btns */
|
||||
.btn {
|
||||
margin: 0;
|
||||
padding: 0.5rem 1.5rem;
|
||||
background: var(--grey-lighter);
|
||||
color: var(--grey-dark);
|
||||
font-size: 1rem;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
min-height: 25px;
|
||||
min-width: 15px;
|
||||
line-height: 25px;
|
||||
vertical-align: middle;
|
||||
|
||||
transition: all 0.15s ease-in-out;
|
||||
|
||||
&.btn-important {
|
||||
background: var(--main-first);
|
||||
color: var(--white);
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
background: var(--main-first-alt);
|
||||
}
|
||||
|
||||
img {
|
||||
filter: brightness(3);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&.btn-attention {
|
||||
background: var(--alert-bg);
|
||||
color: #fff;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
background: var(--alert-text);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
/*=== Forms */
|
||||
legend {
|
||||
margin: 2rem 0 1rem 0;
|
||||
padding: 0;
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
font-size: 1rem;
|
||||
clear: both;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
label {
|
||||
min-height: 25px;
|
||||
padding: 5px 0;
|
||||
cursor: pointer;
|
||||
color: var(--grey-dark);
|
||||
}
|
||||
|
||||
textarea {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
input, select, textarea, button {
|
||||
padding: 5px 10px;
|
||||
background: var(--white);
|
||||
color: var(--grey-dark);
|
||||
font-family: "lato", "Helvetica", "Arial", sans-serif;
|
||||
font-size: 1rem;
|
||||
border: 1px solid var(--grey-light);
|
||||
border-radius: 2px;
|
||||
min-height: 25px;
|
||||
line-height: 25px;
|
||||
}
|
||||
|
||||
select {
|
||||
padding-top: 9px;
|
||||
padding-bottom: 9px;
|
||||
}
|
||||
|
||||
option {
|
||||
padding: 0 .5em;
|
||||
}
|
||||
|
||||
input:focus, select:focus, textarea:focus {
|
||||
color: var(--main-font-color);
|
||||
border-color: var(--main-first);
|
||||
}
|
||||
|
||||
input:invalid, select:invalid {
|
||||
color: var(--alert-bg);
|
||||
border-color: var(--alert-bg);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
input:disabled, select:disabled {
|
||||
color: var(--grey-medium-dark);
|
||||
border-color: var(--grey-medium-dark);
|
||||
}
|
||||
|
||||
.form-group {
|
||||
padding: 5px;
|
||||
border-radius: 3px;
|
||||
|
||||
&::after {
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.group-name {
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.group-controls {
|
||||
min-height: 25px;
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
.group-controls .control {
|
||||
line-height: 2.0em;
|
||||
}
|
||||
|
||||
&.form-actions {
|
||||
margin: 15px 0 25px;
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
&.form-actions .btn {
|
||||
margin: 0 0 0 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -1,5 +1,3 @@
|
||||
@use "variables";
|
||||
|
||||
/*=== GLOBAL VIEW */
|
||||
/*================*/
|
||||
#stream {
|
||||
@@ -13,7 +11,7 @@
|
||||
background: none;
|
||||
|
||||
a.title {
|
||||
color: variables.$grey-dark;
|
||||
color: var(--grey-dark);
|
||||
font-size: 1rem;
|
||||
font-weight: normal;
|
||||
text-decoration: none;
|
||||
@@ -24,7 +22,7 @@
|
||||
&:not([data-unread="0"])::after {
|
||||
margin: -0.5rem 1rem 0 0;
|
||||
padding: 0 0.75rem;
|
||||
background: variables.$grey-light;
|
||||
background: var(--grey-light);
|
||||
border-radius: 12px;
|
||||
position: absolute;
|
||||
top: 1.75rem;
|
||||
@@ -34,7 +32,7 @@
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: variables.$main-first;
|
||||
color: var(--main-first);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -42,11 +40,11 @@
|
||||
.box-content {
|
||||
.item.feed {
|
||||
a {
|
||||
color: variables.$main-font-color;
|
||||
color: var(--main-font-color);
|
||||
font-weight: 400;
|
||||
|
||||
&:hover {
|
||||
color: variables.$main-first;
|
||||
color: var(--main-first);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
@@ -56,7 +54,7 @@
|
||||
}
|
||||
|
||||
|
||||
// the panel that appears in overlay to display the flows
|
||||
/* the panel that appears in overlay to display the flows*/
|
||||
#overlay {
|
||||
background: rgba(0, 0, 0, 0.65);
|
||||
}
|
||||
@@ -0,0 +1,68 @@
|
||||
/*=== GLOBAL VIEW */
|
||||
/*================*/
|
||||
#stream {
|
||||
.box.category {
|
||||
&:not([data-unread="0"]) .box-title .title {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.box-title {
|
||||
padding: 1.5rem;
|
||||
background: none;
|
||||
|
||||
a.title {
|
||||
color: var(--grey-dark);
|
||||
font-size: 1rem;
|
||||
font-weight: normal;
|
||||
text-decoration: none;
|
||||
text-align: right;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
|
||||
&:not([data-unread="0"])::after {
|
||||
margin: -0.5rem 0 0 1rem;
|
||||
padding: 0 0.75rem;
|
||||
background: var(--grey-light);
|
||||
border-radius: 12px;
|
||||
position: absolute;
|
||||
top: 1.75rem;
|
||||
left: 0;
|
||||
line-height: 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--main-first);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box-content {
|
||||
.item.feed {
|
||||
a {
|
||||
color: var(--main-font-color);
|
||||
font-weight: 400;
|
||||
|
||||
&:hover {
|
||||
color: var(--main-first);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* the panel that appears in overlay to display the flows*/
|
||||
#overlay {
|
||||
background: rgba(0, 0, 0, 0.65);
|
||||
}
|
||||
|
||||
#panel {
|
||||
top: 3rem;
|
||||
left: 3rem;
|
||||
bottom: 3rem;
|
||||
right: 3rem;
|
||||
border-radius: 3px;
|
||||
}
|
||||
@@ -1,12 +1,8 @@
|
||||
@use "mixins";
|
||||
|
||||
@use "variables";
|
||||
|
||||
/*=== STRUCTURE */
|
||||
/*===============*/
|
||||
/*=== Header */
|
||||
.header {
|
||||
background: variables.$sid-bg;
|
||||
background: var(--sid-bg);
|
||||
|
||||
.item {
|
||||
vertical-align: middle;
|
||||
@@ -30,26 +26,26 @@
|
||||
&.search {
|
||||
input {
|
||||
width: 350px;
|
||||
color: variables.$sid-font-color;
|
||||
color: var(--sid-font-color);
|
||||
border: none;
|
||||
border-radius: 2px 0 0 2px;
|
||||
background-color: variables.$sid-bg-alt;
|
||||
background-color: var(--sid-bg-alt);
|
||||
|
||||
@include mixins.transition(all, 0.15s, ease-in-out);
|
||||
transition: all 0.15s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
background-color: variables.$sid-bg-dark;
|
||||
background-color: var(--sid-bg-dark);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
color: variables.$grey-dark;
|
||||
background-color: variables.$white;
|
||||
color: var(--grey-dark);
|
||||
background-color: var(--white);
|
||||
}
|
||||
}
|
||||
|
||||
input:focus ~ .btn,
|
||||
input:hover ~ .btn {
|
||||
background-color: variables.$main-first;
|
||||
background-color: var(--main-first);
|
||||
|
||||
.icon {
|
||||
filter: brightness(3);
|
||||
@@ -59,7 +55,7 @@
|
||||
.btn {
|
||||
width: 3rem;
|
||||
border-radius: 0 2px 2px 0;
|
||||
background-color: variables.$sid-bg-alt;
|
||||
background-color: var(--sid-bg-alt);
|
||||
border-left-width: 0;
|
||||
min-height: 35px;
|
||||
|
||||
@@ -68,7 +64,7 @@
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: variables.$main-first-alt;
|
||||
background-color: var(--main-first-alt);
|
||||
|
||||
.icon {
|
||||
filter: brightness(3);
|
||||
@@ -95,13 +91,13 @@
|
||||
|
||||
/*=== Prompt (centered) */
|
||||
main.prompt {
|
||||
background: variables.$grey-light;
|
||||
background: var(--grey-light);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
/*=== New article notification */
|
||||
#new-article {
|
||||
background: variables.$main-first;
|
||||
background: var(--main-first);
|
||||
font-size: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -109,18 +105,18 @@ main.prompt {
|
||||
#new-article > a {
|
||||
padding: calc(0.75rem + var(--frss-padding-top-bottom)) 1rem;
|
||||
font-weight: bold;
|
||||
color: variables.$white;
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
#new-article > a:hover {
|
||||
text-decoration: none;
|
||||
background: variables.$main-first-alt;
|
||||
background: var(--main-first-alt);
|
||||
}
|
||||
|
||||
/*=== Transition indication, e.g. day */
|
||||
.transition {
|
||||
padding: 1rem 0 0 1.25rem;
|
||||
color: variables.$light-font-color;
|
||||
color: var(--light-font-color);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 700;
|
||||
line-height: 3em;
|
||||
@@ -129,7 +125,7 @@ main.prompt {
|
||||
|
||||
.name {
|
||||
padding: 0 1rem 0 1rem;
|
||||
color: variables.$main-font-color;
|
||||
color: var(--main-font-color);
|
||||
font-size: 0.875rem;
|
||||
position: relative;
|
||||
left: 0;
|
||||
@@ -140,18 +136,18 @@ main.prompt {
|
||||
.btn {
|
||||
border-left-width: 0;
|
||||
padding: 0.5rem 1rem;
|
||||
background-color: variables.$grey-light;
|
||||
background-color: var(--grey-light);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
@include mixins.transition(all, 0.15s, ease-in-out);
|
||||
transition: all 0.15s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
background-color: variables.$grey-medium-light;
|
||||
background-color: var(--grey-medium-light);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: variables.$main-first;
|
||||
background-color: var(--main-first);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -163,12 +159,12 @@ main.prompt {
|
||||
.btn {
|
||||
border-left-width: 0;
|
||||
padding: 0.5rem 1rem;
|
||||
background-color: variables.$grey-lighter;
|
||||
background-color: var(--grey-lighter);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
&:hover {
|
||||
background-color: variables.$grey-medium-light;
|
||||
background-color: var(--grey-medium-light);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -177,18 +173,18 @@ main.prompt {
|
||||
.btn {
|
||||
border-left-width: 0;
|
||||
padding: 0.5rem 1rem;
|
||||
background-color: variables.$grey-lighter;
|
||||
background-color: var(--grey-lighter);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
@include mixins.transition(all, 0.15s, ease-in-out);
|
||||
transition: all 0.15s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
background-color: variables.$grey-medium-light;
|
||||
background-color: var(--grey-medium-light);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: variables.$main-first;
|
||||
background-color: var(--main-first);
|
||||
|
||||
.icon {
|
||||
filter: brightness(5);
|
||||
@@ -197,13 +193,13 @@ main.prompt {
|
||||
|
||||
&.read_all {
|
||||
padding: 5px 16px;
|
||||
color: variables.$main-font-color;
|
||||
background-color: variables.$grey-lighter;
|
||||
color: var(--main-font-color);
|
||||
background-color: var(--grey-lighter);
|
||||
|
||||
@include mixins.transition(all, 0.15s, ease-in-out);
|
||||
transition: all 0.15s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
background-color: variables.$grey-medium-light;
|
||||
background-color: var(--grey-medium-light);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -243,19 +239,19 @@ main.prompt {
|
||||
|
||||
h1.title, h1 {
|
||||
a {
|
||||
color: variables.$main-font-color;
|
||||
color: var(--main-font-color);
|
||||
font-family: "spectral", serif;
|
||||
font-size: 2rem;
|
||||
|
||||
&:hover {
|
||||
color: variables.$main-first;
|
||||
color: var(--main-first);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.author {
|
||||
color: variables.$light-font-color;
|
||||
color: var(--light-font-color);
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
@@ -266,38 +262,38 @@ main.prompt {
|
||||
|
||||
.content hr {
|
||||
margin: 30px 10px;
|
||||
background: variables.$grey-medium-light;
|
||||
background: var(--grey-medium-light);
|
||||
height: 1px;
|
||||
border: 0;
|
||||
box-shadow: 0 2px 5px #ccc;
|
||||
}
|
||||
|
||||
pre {
|
||||
background: variables.$main-first-darker;
|
||||
color: variables.$white;
|
||||
background: var(--main-first-darker);
|
||||
color: var(--white);
|
||||
border-radius: 3px;
|
||||
|
||||
code {
|
||||
background: transparent;
|
||||
color: variables.$white;
|
||||
color: var(--white);
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
code {
|
||||
background: variables.$grey-lighter;
|
||||
border-color: variables.$grey-light;
|
||||
background: var(--grey-lighter);
|
||||
border-color: var(--grey-light);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 0;
|
||||
padding: 5px 20px;
|
||||
background: variables.$grey-lighter;
|
||||
background: var(--grey-lighter);
|
||||
display: block;
|
||||
color: variables.$main-font-color;
|
||||
border-top: 1px solid variables.$grey-medium-light;
|
||||
border-bottom: 1px solid variables.$grey-medium-light;
|
||||
color: var(--main-font-color);
|
||||
border-top: 1px solid var(--grey-medium-light);
|
||||
border-bottom: 1px solid var(--grey-medium-light);
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
@@ -309,10 +305,10 @@ main.prompt {
|
||||
/*=== Notification and actualize notification */
|
||||
.notification {
|
||||
padding: 1rem 0;
|
||||
background: variables.$grey-medium-light;
|
||||
background: var(--grey-medium-light);
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
color: variables.$grey-dark;
|
||||
color: var(--grey-dark);
|
||||
font-size: 1em;
|
||||
border: none;
|
||||
position: fixed;
|
||||
@@ -333,13 +329,13 @@ main.prompt {
|
||||
}
|
||||
|
||||
&.good {
|
||||
background: variables.$success-bg;
|
||||
color: variables.$white;
|
||||
background: var(--success-bg);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
&.bad {
|
||||
background: variables.$alert-bg;
|
||||
color: variables.$white;
|
||||
background: var(--alert-bg);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.close {
|
||||
@@ -349,11 +345,11 @@ main.prompt {
|
||||
}
|
||||
|
||||
&.good .close:hover {
|
||||
background: variables.$success-text;
|
||||
background: var(--success-text);
|
||||
}
|
||||
|
||||
&.bad .close:hover {
|
||||
background: variables.$alert-text;
|
||||
background: var(--alert-text);
|
||||
}
|
||||
|
||||
&#actualizeProgress {
|
||||
@@ -369,5 +365,5 @@ main.prompt {
|
||||
|
||||
/*=== Navigation menu (for articles) */
|
||||
#nav_entries {
|
||||
background: variables.$sid-bg;
|
||||
background: var(--sid-bg);
|
||||
}
|
||||
@@ -0,0 +1,369 @@
|
||||
/*=== STRUCTURE */
|
||||
/*===============*/
|
||||
/*=== Header */
|
||||
.header {
|
||||
background: var(--sid-bg);
|
||||
|
||||
.item {
|
||||
vertical-align: middle;
|
||||
|
||||
&.title {
|
||||
a {
|
||||
padding: 0.5rem 1rem;
|
||||
|
||||
.logo {
|
||||
filter: invert(80%);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.logo {
|
||||
filter: invert(80%) opacity(80%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.search {
|
||||
input {
|
||||
width: 350px;
|
||||
color: var(--sid-font-color);
|
||||
border: none;
|
||||
border-radius: 0 2px 2px 0;
|
||||
background-color: var(--sid-bg-alt);
|
||||
|
||||
transition: all 0.15s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--sid-bg-dark);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
color: var(--grey-dark);
|
||||
background-color: var(--white);
|
||||
}
|
||||
}
|
||||
|
||||
input:focus ~ .btn,
|
||||
input:hover ~ .btn {
|
||||
background-color: var(--main-first);
|
||||
|
||||
.icon {
|
||||
filter: brightness(3);
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 3rem;
|
||||
border-radius: 2px 0 0 2px;
|
||||
background-color: var(--sid-bg-alt);
|
||||
border-right-width: 0;
|
||||
min-height: 35px;
|
||||
|
||||
.icon {
|
||||
filter: invert(49%) sepia(13%) saturate(2426%) hue-rotate(346deg) brightness(99%) contrast(95%);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--main-first-alt);
|
||||
|
||||
.icon {
|
||||
filter: brightness(3);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.configure {
|
||||
text-align: center;
|
||||
|
||||
.btn {
|
||||
padding: 0.25rem 1rem;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*=== Body */
|
||||
#global {
|
||||
height: calc(100vh - (calc(3rem + 2 * var(--frss-padding-top-bottom))));
|
||||
}
|
||||
|
||||
/*=== Prompt (centered) */
|
||||
main.prompt {
|
||||
background: var(--grey-light);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
/*=== New article notification */
|
||||
#new-article {
|
||||
background: var(--main-first);
|
||||
font-size: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#new-article > a {
|
||||
padding: calc(0.75rem + var(--frss-padding-top-bottom)) 1rem;
|
||||
font-weight: bold;
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
#new-article > a:hover {
|
||||
text-decoration: none;
|
||||
background: var(--main-first-alt);
|
||||
}
|
||||
|
||||
/*=== Transition indication, e.g. day */
|
||||
.transition {
|
||||
padding: 1rem 1.25rem 0 0;
|
||||
color: var(--light-font-color);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 700;
|
||||
line-height: 3em;
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
|
||||
.name {
|
||||
padding: 0 1rem 0 1rem;
|
||||
color: var(--main-font-color);
|
||||
font-size: 0.875rem;
|
||||
position: relative;
|
||||
right: 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
border-right-width: 0;
|
||||
padding: 0.5rem 1rem;
|
||||
background-color: var(--grey-light);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
transition: all 0.15s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--grey-medium-light);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: var(--main-first);
|
||||
}
|
||||
}
|
||||
|
||||
/*=== Index menu */
|
||||
.nav_menu {
|
||||
text-align: center;
|
||||
padding: 5px 0;
|
||||
|
||||
.btn {
|
||||
border-right-width: 0;
|
||||
padding: 0.5rem 1rem;
|
||||
background-color: var(--grey-lighter);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--grey-medium-light);
|
||||
}
|
||||
}
|
||||
|
||||
.stick,
|
||||
.group {
|
||||
.btn {
|
||||
border-right-width: 0;
|
||||
padding: 0.5rem 1rem;
|
||||
background-color: var(--grey-lighter);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
transition: all 0.15s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--grey-medium-light);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: var(--main-first);
|
||||
|
||||
.icon {
|
||||
filter: brightness(5);
|
||||
}
|
||||
}
|
||||
|
||||
&.read_all {
|
||||
padding: 5px 16px;
|
||||
color: var(--main-font-color);
|
||||
background-color: var(--grey-lighter);
|
||||
|
||||
transition: all 0.15s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--grey-medium-light);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown:not(#dropdown-search-wrapper) {
|
||||
a.dropdown-toggle {
|
||||
border-right-width: 0;
|
||||
background-image: url(icons/more.svg);
|
||||
|
||||
.icon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#dropdown-search-wrapper.dropdown {
|
||||
a.dropdown-toggle {
|
||||
border-right-width: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#dropdown-query ~ .dropdown-menu .dropdown-header .icon {
|
||||
vertical-align: middle;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
|
||||
/*=== Content of feed articles */
|
||||
.content, .content_thin {
|
||||
padding: 20px 10px;
|
||||
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.8rem;
|
||||
|
||||
h1.title, h1 {
|
||||
a {
|
||||
color: var(--main-font-color);
|
||||
font-family: "spectral", serif;
|
||||
font-size: 2rem;
|
||||
|
||||
&:hover {
|
||||
color: var(--main-first);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.author {
|
||||
color: var(--light-font-color);
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
p, ul {
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.8rem;
|
||||
}
|
||||
|
||||
.content hr {
|
||||
margin: 30px 10px;
|
||||
background: var(--grey-medium-light);
|
||||
height: 1px;
|
||||
border: 0;
|
||||
box-shadow: 0 2px 5px #ccc;
|
||||
}
|
||||
|
||||
pre {
|
||||
background: var(--main-first-darker);
|
||||
color: var(--white);
|
||||
border-radius: 3px;
|
||||
|
||||
code {
|
||||
background: transparent;
|
||||
color: var(--white);
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
code {
|
||||
background: var(--grey-lighter);
|
||||
border-color: var(--grey-light);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 0;
|
||||
padding: 5px 20px;
|
||||
background: var(--grey-lighter);
|
||||
display: block;
|
||||
color: var(--main-font-color);
|
||||
border-top: 1px solid var(--grey-medium-light);
|
||||
border-bottom: 1px solid var(--grey-medium-light);
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*=== Notification and actualize notification */
|
||||
.notification {
|
||||
padding: 1rem 0;
|
||||
background: var(--grey-medium-light);
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
color: var(--grey-dark);
|
||||
font-size: 1em;
|
||||
border: none;
|
||||
position: fixed;
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
|
||||
a {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.msg {
|
||||
display: inline-block;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
&.good {
|
||||
background: var(--success-bg);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
&.bad {
|
||||
background: var(--alert-bg);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.close {
|
||||
.icon {
|
||||
filter: brightness(3);
|
||||
}
|
||||
}
|
||||
|
||||
&.good .close:hover {
|
||||
background: var(--success-text);
|
||||
}
|
||||
|
||||
&.bad .close:hover {
|
||||
background: var(--alert-text);
|
||||
}
|
||||
|
||||
&#actualizeProgress {
|
||||
br {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 0 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*=== Navigation menu (for articles) */
|
||||
#nav_entries {
|
||||
background: var(--sid-bg);
|
||||
}
|
||||
@@ -0,0 +1,94 @@
|
||||
/*=== Feed articles */
|
||||
.flux {
|
||||
/* border-left: 2px solid #ecf0f1;*/
|
||||
background: var(--white);
|
||||
|
||||
transition: all 0.15s ease-in-out;
|
||||
|
||||
.flux_header {
|
||||
&:hover {
|
||||
background: var(--grey-lighter);
|
||||
|
||||
&:not(.current):hover .item .title {
|
||||
background: var(--grey-lighter);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.current {
|
||||
background: var(--white);
|
||||
border-left-color: var(--main-first);
|
||||
|
||||
&:not(.active) {
|
||||
background: var(--grey-lighter);
|
||||
}
|
||||
}
|
||||
|
||||
&.not_read:not(.current) {
|
||||
background: var(--unread-bg);
|
||||
|
||||
&:hover .item .title {
|
||||
background: var(--unread-bg);
|
||||
}
|
||||
}
|
||||
|
||||
&.not_read {
|
||||
.item .title {
|
||||
a {
|
||||
color: var(--unread-font-color);
|
||||
}
|
||||
}
|
||||
|
||||
.item.website {
|
||||
a {
|
||||
color: var(--unread-font-color);
|
||||
}
|
||||
}
|
||||
|
||||
.item .date {
|
||||
color: color-mix(in srgb, var(--unread-font-color) 50%, transparent);
|
||||
}
|
||||
}
|
||||
|
||||
&.favorite {
|
||||
border-left-color: var(--fav-bg);
|
||||
|
||||
transition: all 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
&.favorite:not(.current) {
|
||||
background: var(--fav-light);
|
||||
|
||||
&:hover .item .title {
|
||||
background: var(--fav-light);
|
||||
}
|
||||
}
|
||||
|
||||
.website {
|
||||
a {
|
||||
color: var(--main-font-color);
|
||||
opacity: 0.75;
|
||||
}
|
||||
}
|
||||
|
||||
.flux_header .date,
|
||||
.flux_content .bottom .date {
|
||||
color: color-mix(in srgb, var(--main-font-color) 50%, transparent);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
font-size: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.flux_header {
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
border-top: 1px solid var(--grey-light);
|
||||
|
||||
.title {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,94 @@
|
||||
/*=== Feed articles */
|
||||
.flux {
|
||||
/* border-left: 2px solid #ecf0f1;*/
|
||||
background: var(--white);
|
||||
|
||||
transition: all 0.15s ease-in-out;
|
||||
|
||||
.flux_header {
|
||||
&:hover {
|
||||
background: var(--grey-lighter);
|
||||
|
||||
&:not(.current):hover .item .title {
|
||||
background: var(--grey-lighter);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.current {
|
||||
background: var(--white);
|
||||
border-right-color: var(--main-first);
|
||||
|
||||
&:not(.active) {
|
||||
background: var(--grey-lighter);
|
||||
}
|
||||
}
|
||||
|
||||
&.not_read:not(.current) {
|
||||
background: var(--unread-bg);
|
||||
|
||||
&:hover .item .title {
|
||||
background: var(--unread-bg);
|
||||
}
|
||||
}
|
||||
|
||||
&.not_read {
|
||||
.item .title {
|
||||
a {
|
||||
color: var(--unread-font-color);
|
||||
}
|
||||
}
|
||||
|
||||
.item.website {
|
||||
a {
|
||||
color: var(--unread-font-color);
|
||||
}
|
||||
}
|
||||
|
||||
.item .date {
|
||||
color: color-mix(in srgb, var(--unread-font-color) 50%, transparent);
|
||||
}
|
||||
}
|
||||
|
||||
&.favorite {
|
||||
border-right-color: var(--fav-bg);
|
||||
|
||||
transition: all 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
&.favorite:not(.current) {
|
||||
background: var(--fav-light);
|
||||
|
||||
&:hover .item .title {
|
||||
background: var(--fav-light);
|
||||
}
|
||||
}
|
||||
|
||||
.website {
|
||||
a {
|
||||
color: var(--main-font-color);
|
||||
opacity: 0.75;
|
||||
}
|
||||
}
|
||||
|
||||
.flux_header .date,
|
||||
.flux_content .bottom .date {
|
||||
color: color-mix(in srgb, var(--main-font-color) 50%, transparent);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
font-size: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.flux_header {
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
border-top: 1px solid var(--grey-light);
|
||||
|
||||
.title {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
@@ -1,100 +0,0 @@
|
||||
@use "sass:color";
|
||||
|
||||
@use "mixins";
|
||||
|
||||
@use "variables";
|
||||
|
||||
/*=== Feed articles */
|
||||
.flux {
|
||||
// border-left: 2px solid #ecf0f1;
|
||||
background: variables.$white;
|
||||
|
||||
@include mixins.transition(all, 0.15s, ease-in-out);
|
||||
|
||||
.flux_header {
|
||||
&:hover {
|
||||
background: variables.$grey-lighter;
|
||||
|
||||
&:not(.current):hover .item .title {
|
||||
background: variables.$grey-lighter;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.current {
|
||||
background: variables.$white;
|
||||
border-left-color: variables.$main-first;
|
||||
|
||||
&:not(.active) {
|
||||
background: variables.$grey-lighter;
|
||||
}
|
||||
}
|
||||
|
||||
&.not_read:not(.current) {
|
||||
background: variables.$unread-bg;
|
||||
|
||||
&:hover .item .title {
|
||||
background: variables.$unread-bg;
|
||||
}
|
||||
}
|
||||
|
||||
&.not_read {
|
||||
.item .title {
|
||||
a {
|
||||
color: variables.$unread-font-color;
|
||||
}
|
||||
}
|
||||
|
||||
.item.website {
|
||||
a {
|
||||
color: variables.$unread-font-color;
|
||||
}
|
||||
}
|
||||
|
||||
.item .date {
|
||||
color: color.scale(variables.$unread-font-color, $alpha: -50%);
|
||||
}
|
||||
}
|
||||
|
||||
&.favorite {
|
||||
border-left-color: variables.$fav-bg;
|
||||
|
||||
@include mixins.transition(all, 0.15s, ease-in-out);
|
||||
}
|
||||
|
||||
&.favorite:not(.current) {
|
||||
background: variables.$fav-light;
|
||||
|
||||
&:hover .item .title {
|
||||
background: variables.$fav-light;
|
||||
}
|
||||
}
|
||||
|
||||
.website {
|
||||
a {
|
||||
color: variables.$main-font-color;
|
||||
opacity: 0.75;
|
||||
}
|
||||
}
|
||||
|
||||
.flux_header .date,
|
||||
.flux_content .bottom .date {
|
||||
color: color.scale(variables.$main-font-color, $alpha: -50%);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
font-size: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.flux_header {
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
border-top: 1px solid variables.$grey-light;
|
||||
|
||||
.title {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
/*=== LOGS */
|
||||
/*=========*/
|
||||
.log-item.log-error {
|
||||
background-color: rgba(var(--main-first), 0.2);
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
/*=== LOGS */
|
||||
/*=========*/
|
||||
.log-item.log-error {
|
||||
background-color: rgba(var(--main-first), 0.2);
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
@use "variables";
|
||||
|
||||
/*=== LOGS */
|
||||
/*=========*/
|
||||
.log-item.log-error {
|
||||
background-color: rgba(variables.$main-first, 0.2);
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
/* stylelint-disable property-no-vendor-prefix */
|
||||
|
||||
/* FUNCTIONS */
|
||||
|
||||
@mixin transition($target, $duration, $ease) {
|
||||
transition: $target $duration $ease;
|
||||
}
|
||||
@@ -1,14 +1,10 @@
|
||||
@use "mixins";
|
||||
|
||||
@use "variables";
|
||||
|
||||
/*=== MOBILE */
|
||||
/*===========*/
|
||||
|
||||
@media (max-width: 840px) {
|
||||
.aside {
|
||||
|
||||
@include mixins.transition(all, 0.2s, ease-in-out);
|
||||
transition: all 0.2s ease-in-out;
|
||||
|
||||
&.aside_feed {
|
||||
padding: 0;
|
||||
@@ -23,10 +19,10 @@
|
||||
#overlay .close,
|
||||
.dropdown-menu .toggle_aside,
|
||||
#slider .toggle_aside {
|
||||
background-color: variables.$main-first;
|
||||
background-color: var(--main-first);
|
||||
|
||||
&:hover {
|
||||
background-color: variables.$main-first-alt;
|
||||
background-color: var(--main-first-alt);
|
||||
}
|
||||
|
||||
.icon {
|
||||
@@ -109,15 +105,15 @@
|
||||
}
|
||||
|
||||
.dropdown-target:target {
|
||||
~ .dropdown-toggle::after {
|
||||
background-color: variables.$grey-lighter;
|
||||
border-top: 1px solid variables.$grey-light;
|
||||
border-left: 1px solid variables.$grey-light;
|
||||
& ~ .dropdown-toggle::after {
|
||||
background-color: var(--grey-lighter);
|
||||
border-top: 1px solid var(--grey-light);
|
||||
border-left: 1px solid var(--grey-light);
|
||||
right: 21px;
|
||||
bottom: -14px;
|
||||
}
|
||||
|
||||
~ a.dropdown-toggle {
|
||||
& ~ a.dropdown-toggle {
|
||||
&:not(.btn) {
|
||||
&::after {
|
||||
bottom: -17px;
|
||||
@@ -0,0 +1,161 @@
|
||||
/*=== MOBILE */
|
||||
/*===========*/
|
||||
|
||||
@media (max-width: 840px) {
|
||||
.aside {
|
||||
|
||||
transition: all 0.2s ease-in-out;
|
||||
|
||||
&.aside_feed {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.tree .tree-folder .tree-folder-items .item a {
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.aside .toggle_aside,
|
||||
#overlay .close,
|
||||
.dropdown-menu .toggle_aside,
|
||||
#slider .toggle_aside {
|
||||
background-color: var(--main-first);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--main-first-alt);
|
||||
}
|
||||
|
||||
.icon {
|
||||
filter: grayscale(100%) brightness(2.5);
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
.item {
|
||||
&.search {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.configure {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#global {
|
||||
height: calc(100% - 8rem);
|
||||
}
|
||||
|
||||
#panel {
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.post {
|
||||
padding-right: 1rem;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.nav_menu {
|
||||
.btn {
|
||||
margin: 0;
|
||||
padding: 0.85rem 1.25rem;
|
||||
}
|
||||
|
||||
.stick,
|
||||
.group {
|
||||
margin: 0.5rem 0.5rem;
|
||||
|
||||
.btn {
|
||||
margin: 0;
|
||||
padding: 0.85rem 1.25rem;
|
||||
|
||||
&.read_all {
|
||||
padding: 0.85rem 1.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search {
|
||||
.input {
|
||||
max-width: 97%;
|
||||
width: 90px;
|
||||
|
||||
&:focus {
|
||||
width: 400px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#nav_menu_read_all #nav_menu_read .dropdown-toggle.btn {
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
#stream {
|
||||
.flux {
|
||||
.flux_header {
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-target:target {
|
||||
& ~ .dropdown-toggle::after {
|
||||
background-color: var(--grey-lighter);
|
||||
border-top: 1px solid var(--grey-light);
|
||||
border-right: 1px solid var(--grey-light);
|
||||
left: 21px;
|
||||
bottom: -14px;
|
||||
}
|
||||
|
||||
& ~ a.dropdown-toggle {
|
||||
&:not(.btn) {
|
||||
&::after {
|
||||
bottom: -17px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.transition {
|
||||
text-align: center;
|
||||
padding: 1rem 0;
|
||||
|
||||
.name {
|
||||
padding: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
line-height: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
#nav_entries button {
|
||||
height: 4.5rem;
|
||||
}
|
||||
|
||||
.notification {
|
||||
border-radius: 0;
|
||||
|
||||
a.close {
|
||||
background: transparent;
|
||||
display: block;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
a.close:hover {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
a.close .icon {
|
||||
display: none;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
/*=== READER VIEW */
|
||||
/*================*/
|
||||
#stream.reader {
|
||||
.flux {
|
||||
background: var(--grey-light);
|
||||
color: var(--main-font-color);
|
||||
border: none;
|
||||
|
||||
.flux_content {
|
||||
background-color: var(--white);
|
||||
border: none;
|
||||
|
||||
.author {
|
||||
color: var(--grey-medium-dark);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
/*=== READER VIEW */
|
||||
/*================*/
|
||||
#stream.reader {
|
||||
.flux {
|
||||
background: var(--grey-light);
|
||||
color: var(--main-font-color);
|
||||
border: none;
|
||||
|
||||
.flux_content {
|
||||
background-color: var(--white);
|
||||
border: none;
|
||||
|
||||
.author {
|
||||
color: var(--grey-medium-dark);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,20 +0,0 @@
|
||||
@use "variables";
|
||||
|
||||
/*=== READER VIEW */
|
||||
/*================*/
|
||||
#stream.reader {
|
||||
.flux {
|
||||
background: variables.$grey-light;
|
||||
color: variables.$main-font-color;
|
||||
border: none;
|
||||
|
||||
.flux_content {
|
||||
background-color: variables.$white;
|
||||
border: none;
|
||||
|
||||
.author {
|
||||
color: variables.$grey-medium-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,25 +1,19 @@
|
||||
@use "sass:string";
|
||||
|
||||
@use "mixins";
|
||||
|
||||
@use "variables";
|
||||
|
||||
/*=== Tree */
|
||||
.tree {
|
||||
margin: 10px 0;
|
||||
|
||||
&#sidebar {
|
||||
scrollbar-color: rgba(255,255, 0, 0.1) rgba(0, 0, 0, 0.05);
|
||||
scrollbar-color: string.unquote(variables.$sid-font-color + "33") string.unquote(variables.$sid-font-color + "22");
|
||||
scrollbar-color: color-mix(in srgb, var(--sid-font-color) 20%, transparent) color-mix(in srgb, var(--sid-font-color) 13%, transparent);
|
||||
}
|
||||
|
||||
.tree-folder {
|
||||
border-bottom: 1px solid variables.$sid-sep;
|
||||
border-bottom: 1px solid var(--sid-sep);
|
||||
box-shadow: inset -1px -11px 8px #0003;
|
||||
|
||||
.tree-folder-title {
|
||||
padding: 0.75rem 1rem;
|
||||
background: variables.$sid-bg;
|
||||
background: var(--sid-bg);
|
||||
position: relative;
|
||||
font-size: 0.85rem;
|
||||
letter-spacing: 1px;
|
||||
@@ -44,7 +38,7 @@
|
||||
|
||||
.title {
|
||||
background: inherit;
|
||||
color: variables.$sid-font-color;
|
||||
color: var(--sid-font-color);
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
@@ -54,43 +48,43 @@
|
||||
|
||||
&.active {
|
||||
.tree-folder-title {
|
||||
background: variables.$sid-bg;
|
||||
background: var(--sid-bg);
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.tree-folder-items {
|
||||
background: variables.$sid-bg-alt;
|
||||
background: var(--sid-bg-alt);
|
||||
|
||||
.item {
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
|
||||
@include mixins.transition(all, 0.15s, ease-in-out);
|
||||
transition: all 0.15s ease-in-out;
|
||||
|
||||
&.active {
|
||||
background: variables.$sid-active;
|
||||
background: var(--sid-active);
|
||||
|
||||
.dropdown li a {
|
||||
color: variables.$main-font-color;
|
||||
color: var(--main-font-color);
|
||||
|
||||
&:hover {
|
||||
color: variables.$sid-font-color;
|
||||
color: var(--sid-font-color);
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: variables.$sid-active-font;
|
||||
color: var(--sid-active-font);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: variables.$sid-bg-dark;
|
||||
background: var(--sid-bg-dark);
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: variables.$sid-font-color;
|
||||
color: var(--sid-font-color);
|
||||
|
||||
&.dropdown-toggle {
|
||||
.icon {
|
||||
@@ -127,20 +121,20 @@
|
||||
.dropdown + .btn,
|
||||
.dropdown + input,
|
||||
.dropdown + .dropdown > .btn {
|
||||
border-left: 1px solid variables.$grey-medium-light;
|
||||
border-left: 1px solid var(--grey-medium-light);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.aside {
|
||||
background: variables.$sid-bg;
|
||||
background: var(--sid-bg);
|
||||
|
||||
|
||||
&.aside_feed {
|
||||
padding: 10px 0;
|
||||
text-align: center;
|
||||
background: variables.$sid-bg;
|
||||
border-right: 1px solid variables.$sid-sep;
|
||||
background: var(--sid-bg);
|
||||
border-right: 1px solid var(--sid-sep);
|
||||
|
||||
.tree-folder-title:hover button.dropdown-toggle .icon {
|
||||
filter: none;
|
||||
@@ -176,7 +170,7 @@
|
||||
}
|
||||
|
||||
.item {
|
||||
background: variables.$sid-bg;
|
||||
background: var(--sid-bg);
|
||||
min-height: 2.5em;
|
||||
line-height: 2.5em;
|
||||
|
||||
@@ -188,25 +182,25 @@
|
||||
a,
|
||||
.as-link {
|
||||
padding: 0 1rem;
|
||||
color: variables.$sid-font-color;
|
||||
color: var(--sid-font-color);
|
||||
|
||||
@include mixins.transition(all, 0.15s, ease-in-out);
|
||||
transition: all 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
.as-link:hover {
|
||||
background: variables.$sid-bg-dark;
|
||||
background: var(--sid-bg-dark);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: variables.$main-first;
|
||||
color: variables.$white;
|
||||
background: var(--main-first);
|
||||
color: var(--white);
|
||||
|
||||
a,
|
||||
.as-link {
|
||||
background: variables.$main-first;
|
||||
color: variables.$white;
|
||||
background: var(--main-first);
|
||||
color: var(--white);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
@@ -215,7 +209,7 @@
|
||||
.nav-header {
|
||||
padding: 0 1rem;
|
||||
font-weight: bold;
|
||||
color: variables.$grey-dark;
|
||||
color: var(--grey-dark);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
@@ -233,37 +227,37 @@
|
||||
|
||||
.aside.aside_feed .category .title:not([data-unread="0"])::after {
|
||||
margin: 0.75rem 0 0 0;
|
||||
background-color: variables.$sid-pills;
|
||||
background-color: var(--sid-pills);
|
||||
}
|
||||
|
||||
.aside.aside_feed .feed .item-title:not([data-unread="0"])::after {
|
||||
margin: 0.5em 0 0 0;
|
||||
background-color: variables.$sid-pills;
|
||||
background-color: var(--sid-pills);
|
||||
}
|
||||
|
||||
.feed.item.empty.active {
|
||||
background: variables.$grey-dark;
|
||||
background: var(--grey-dark);
|
||||
}
|
||||
|
||||
.feed.item.error.active {
|
||||
background: variables.$grey-dark;
|
||||
background: var(--grey-dark);
|
||||
}
|
||||
|
||||
.feed.item.empty,
|
||||
.feed.item.empty > a {
|
||||
color: variables.$grey-dark;
|
||||
color: var(--grey-dark);
|
||||
}
|
||||
|
||||
.feed.item.error,
|
||||
.feed.item.error > a {
|
||||
color: variables.$grey-dark;
|
||||
color: var(--grey-dark);
|
||||
}
|
||||
|
||||
.feed.item.empty.active,
|
||||
.feed.item.error.active,
|
||||
.feed.item.empty.active > a,
|
||||
.feed.item.error.active > a {
|
||||
color: variables.$white;
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.aside_feed .tree-folder-items .dropdown-menu::after {
|
||||
@@ -277,5 +271,5 @@
|
||||
}
|
||||
|
||||
.aside_feed .stick #btn-add {
|
||||
border-left-color: variables.$sid-bg;
|
||||
border-left-color: var(--sid-bg);
|
||||
}
|
||||
@@ -0,0 +1,275 @@
|
||||
/*=== Tree */
|
||||
.tree {
|
||||
margin: 10px 0;
|
||||
|
||||
&#sidebar {
|
||||
scrollbar-color: rgba(255,255, 0, 0.1) rgba(0, 0, 0, 0.05);
|
||||
scrollbar-color: color-mix(in srgb, var(--sid-font-color) 20%, transparent) color-mix(in srgb, var(--sid-font-color) 13%, transparent);
|
||||
}
|
||||
|
||||
.tree-folder {
|
||||
border-bottom: 1px solid var(--sid-sep);
|
||||
box-shadow: inset 1px -11px 8px #0003;
|
||||
|
||||
.tree-folder-title {
|
||||
padding: 0.75rem 1rem;
|
||||
background: var(--sid-bg);
|
||||
position: relative;
|
||||
font-size: 0.85rem;
|
||||
letter-spacing: 1px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
|
||||
button.dropdown-toggle {
|
||||
margin: -0.75rem -1rem -0.75rem 0.25rem;
|
||||
padding: 0.75rem 1rem 0.75rem 0;
|
||||
|
||||
&:hover {
|
||||
.icon {
|
||||
filter: brightness(1.7) !important;
|
||||
transition: 0.1s linear;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
background: inherit;
|
||||
color: var(--sid-font-color);
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
.tree-folder-title {
|
||||
background: var(--sid-bg);
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.tree-folder-items {
|
||||
background: var(--sid-bg-alt);
|
||||
|
||||
.item {
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
|
||||
transition: all 0.15s ease-in-out;
|
||||
|
||||
&.active {
|
||||
background: var(--sid-active);
|
||||
|
||||
.dropdown li a {
|
||||
color: var(--main-font-color);
|
||||
|
||||
&:hover {
|
||||
color: var(--sid-font-color);
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--sid-active-font);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--sid-bg-dark);
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--sid-font-color);
|
||||
|
||||
&.dropdown-toggle {
|
||||
.icon {
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*=== Buttons */
|
||||
.stick,
|
||||
.group {
|
||||
input, .btn {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.btn:first-child {
|
||||
border-radius: 0 5px 5px 0;
|
||||
}
|
||||
|
||||
.btn:last-child, input:last-child, .dropdown:last-child > .btn {
|
||||
border-radius: 5px 0 0 5px;
|
||||
}
|
||||
|
||||
.btn + .btn,
|
||||
.btn + input,
|
||||
.btn + .dropdown > .btn,
|
||||
input + .btn,
|
||||
input + input,
|
||||
input + .dropdown > .btn,
|
||||
.dropdown + .btn,
|
||||
.dropdown + input,
|
||||
.dropdown + .dropdown > .btn {
|
||||
border-right: 1px solid var(--grey-medium-light);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.aside {
|
||||
background: var(--sid-bg);
|
||||
|
||||
|
||||
&.aside_feed {
|
||||
padding: 10px 0;
|
||||
text-align: center;
|
||||
background: var(--sid-bg);
|
||||
border-left: 1px solid var(--sid-sep);
|
||||
|
||||
.tree-folder-title:hover button.dropdown-toggle .icon {
|
||||
filter: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.aside_feed .tree {
|
||||
margin: 10px 0 50px;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
.icon {
|
||||
filter: brightness(1.7);
|
||||
transition: 0.1s linear;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* Sidebar des pages de configuration */
|
||||
|
||||
|
||||
|
||||
/*=== Navigation */
|
||||
.nav-list {
|
||||
font-size: 1rem;
|
||||
|
||||
.item.nav-header,
|
||||
.item {
|
||||
min-height: 2.5em;
|
||||
line-height: 2.5em;
|
||||
}
|
||||
|
||||
.item {
|
||||
background: var(--sid-bg);
|
||||
min-height: 2.5em;
|
||||
line-height: 2.5em;
|
||||
|
||||
&.nav-header {
|
||||
min-height: 2.5em;
|
||||
line-height: 2.5em;
|
||||
}
|
||||
|
||||
a,
|
||||
.as-link {
|
||||
padding: 0 1rem;
|
||||
color: var(--sid-font-color);
|
||||
|
||||
transition: all 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
.as-link:hover {
|
||||
background: var(--sid-bg-dark);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: var(--main-first);
|
||||
color: var(--white);
|
||||
|
||||
a,
|
||||
.as-link {
|
||||
background: var(--main-first);
|
||||
color: var(--white);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-header {
|
||||
padding: 0 1rem;
|
||||
font-weight: bold;
|
||||
color: var(--grey-dark);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.nav-form {
|
||||
padding: 3px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
/*=== Aside main page (categories) */
|
||||
.aside_feed .tree-folder-title > .title:not([data-unread="0"]) {
|
||||
width: calc(100% - 35px - 35px);
|
||||
}
|
||||
|
||||
.aside.aside_feed .category .title:not([data-unread="0"])::after {
|
||||
margin: 0.75rem 0 0 0;
|
||||
background-color: var(--sid-pills);
|
||||
}
|
||||
|
||||
.aside.aside_feed .feed .item-title:not([data-unread="0"])::after {
|
||||
margin: 0.5em 0 0 0;
|
||||
background-color: var(--sid-pills);
|
||||
}
|
||||
|
||||
.feed.item.empty.active {
|
||||
background: var(--grey-dark);
|
||||
}
|
||||
|
||||
.feed.item.error.active {
|
||||
background: var(--grey-dark);
|
||||
}
|
||||
|
||||
.feed.item.empty,
|
||||
.feed.item.empty > a {
|
||||
color: var(--grey-dark);
|
||||
}
|
||||
|
||||
.feed.item.error,
|
||||
.feed.item.error > a {
|
||||
color: var(--grey-dark);
|
||||
}
|
||||
|
||||
.feed.item.empty.active,
|
||||
.feed.item.error.active,
|
||||
.feed.item.empty.active > a,
|
||||
.feed.item.error.active > a {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.aside_feed .tree-folder-items .dropdown-menu::after {
|
||||
right: 2px;
|
||||
}
|
||||
|
||||
.aside_feed .tree-folder-items .item .dropdown-target:target ~ .dropdown-toggle > .icon,
|
||||
.aside_feed .tree-folder-items .item:hover .dropdown-toggle > .icon,
|
||||
.aside_feed .tree-folder-items .item.active .dropdown-toggle > .icon {
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.aside_feed .stick #btn-add {
|
||||
border-right-color: var(--sid-bg);
|
||||
}
|
||||
@@ -1,5 +1,3 @@
|
||||
@use "variables";
|
||||
|
||||
/*=== STATISTICS */
|
||||
/*===============*/
|
||||
.stat {
|
||||
@@ -14,5 +12,5 @@
|
||||
|
||||
.stat > table td,
|
||||
.stat > table th {
|
||||
border-bottom: 1px solid variables.$grey-medium-light;
|
||||
border-bottom: 1px solid var(--grey-medium-light);
|
||||
}
|
||||
@@ -1,5 +1,3 @@
|
||||
@use "variables";
|
||||
|
||||
/*=== STATISTICS */
|
||||
/*===============*/
|
||||
.stat {
|
||||
@@ -14,5 +12,5 @@
|
||||
|
||||
.stat > table td,
|
||||
.stat > table th {
|
||||
border-bottom: 1px solid variables.$grey-medium-light;
|
||||
border-bottom: 1px solid var(--grey-medium-light);
|
||||
}
|
||||
@@ -1,16 +1,14 @@
|
||||
@use "variables";
|
||||
|
||||
/*=== Tables */
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
th, td {
|
||||
border: 1px solid variables.$grey-medium-light;
|
||||
border: 1px solid var(--grey-medium-light);
|
||||
}
|
||||
|
||||
th {
|
||||
background: variables.$grey-lighter;
|
||||
background: var(--grey-lighter);
|
||||
}
|
||||
|
||||
.config-articleicons td,
|
||||
@@ -1,16 +1,14 @@
|
||||
@use "variables";
|
||||
|
||||
/*=== Tables */
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
th, td {
|
||||
border: 1px solid variables.$grey-medium-light;
|
||||
border: 1px solid var(--grey-medium-light);
|
||||
}
|
||||
|
||||
th {
|
||||
background: variables.$grey-lighter;
|
||||
background: var(--grey-lighter);
|
||||
}
|
||||
|
||||
.config-articleicons td,
|
||||
@@ -0,0 +1,56 @@
|
||||
:root {
|
||||
/* The main color of the theme*/
|
||||
--main-first: #ca7227; /* main color*/
|
||||
--main-first-alt: #b7641d; /* var for hovers*/
|
||||
--main-first-light: #fdf6ef; /* var light 1*/
|
||||
--main-first-lighter: #fefaf7; /* var light 2*/
|
||||
--main-first-dark: #3c3835; /* var for hovers*/
|
||||
--main-first-darker: #221f1d; /* var for hovers*/
|
||||
|
||||
/* linked font colors*/
|
||||
--main-font-color: #363330;
|
||||
--light-font-color: #6d655f;
|
||||
--white: #fff; /* white (sometimes we would like to tint it a little)*/
|
||||
|
||||
/* the whole palette of grays, very useful*/
|
||||
/* we will try to tint these grays according to the main color*/
|
||||
--grey-darker: #524236;
|
||||
--grey-dark: #766556;
|
||||
--grey-medium-dark: #ba9;
|
||||
--grey-medium: #d9ccbf;
|
||||
--grey-medium-light: #e4d8cc;
|
||||
--grey-light: #f5f0ec;
|
||||
--grey-lighter: #fcfaf8;
|
||||
|
||||
--unread-font-color: #161a38;
|
||||
--unread-bg: #f2f6f8;
|
||||
--unread-bg-light: #fdfdfe;
|
||||
|
||||
/* alert colors (red, yellow, green)*/
|
||||
--alert-bg: #f5633e; /* the base*/
|
||||
--alert-light: #fde0d8; /* +light*/
|
||||
--alert-text: #73341f; /* +dark*/
|
||||
|
||||
--warning-bg: #f4f762;
|
||||
--warning-light: #fdfde0;
|
||||
--warning-text: #73762f;
|
||||
|
||||
--success-bg: #10f5b2;
|
||||
--success-light: #cffdef;
|
||||
--success-text: #0c7556;
|
||||
|
||||
/* favorites*/
|
||||
--fav-bg: #ffc300;
|
||||
--fav-light: #fff6da;
|
||||
|
||||
/* the sidebar color, useful if you want a theme that would have a dark sidebar, e.g.*/
|
||||
--sid-font-color: #363330; /* the background color of the left bar and the header*/
|
||||
--sid-bg: #fbf9f6; /* the general background of the left bar, and of the header*/
|
||||
--sid-bg-alt: #f7f2ea; /* background inside groups*/
|
||||
--sid-bg-dark: #efe3d3; /* the hover*/
|
||||
--sid-sep: #f0e7da; /* the separators*/
|
||||
--sid-active: var(--main-first); /* the active color*/
|
||||
/* stylelint-disable-next-line color-hex-length*/
|
||||
--sid-active-font: #ffffff; /* the active color*/
|
||||
--sid-pills: rgba(35,35,0, 0.15); /* capsules*/
|
||||
}
|
||||
@@ -0,0 +1,56 @@
|
||||
:root {
|
||||
/* The main color of the theme*/
|
||||
--main-first: #ca7227; /* main color*/
|
||||
--main-first-alt: #b7641d; /* var for hovers*/
|
||||
--main-first-light: #fdf6ef; /* var light 1*/
|
||||
--main-first-lighter: #fefaf7; /* var light 2*/
|
||||
--main-first-dark: #3c3835; /* var for hovers*/
|
||||
--main-first-darker: #221f1d; /* var for hovers*/
|
||||
|
||||
/* linked font colors*/
|
||||
--main-font-color: #363330;
|
||||
--light-font-color: #6d655f;
|
||||
--white: #fff; /* white (sometimes we would like to tint it a little)*/
|
||||
|
||||
/* the whole palette of grays, very useful*/
|
||||
/* we will try to tint these grays according to the main color*/
|
||||
--grey-darker: #524236;
|
||||
--grey-dark: #766556;
|
||||
--grey-medium-dark: #ba9;
|
||||
--grey-medium: #d9ccbf;
|
||||
--grey-medium-light: #e4d8cc;
|
||||
--grey-light: #f5f0ec;
|
||||
--grey-lighter: #fcfaf8;
|
||||
|
||||
--unread-font-color: #161a38;
|
||||
--unread-bg: #f2f6f8;
|
||||
--unread-bg-light: #fdfdfe;
|
||||
|
||||
/* alert colors (red, yellow, green)*/
|
||||
--alert-bg: #f5633e; /* the base*/
|
||||
--alert-light: #fde0d8; /* +light*/
|
||||
--alert-text: #73341f; /* +dark*/
|
||||
|
||||
--warning-bg: #f4f762;
|
||||
--warning-light: #fdfde0;
|
||||
--warning-text: #73762f;
|
||||
|
||||
--success-bg: #10f5b2;
|
||||
--success-light: #cffdef;
|
||||
--success-text: #0c7556;
|
||||
|
||||
/* favorites*/
|
||||
--fav-bg: #ffc300;
|
||||
--fav-light: #fff6da;
|
||||
|
||||
/* the sidebar color, useful if you want a theme that would have a dark sidebar, e.g.*/
|
||||
--sid-font-color: #363330; /* the background color of the left bar and the header*/
|
||||
--sid-bg: #fbf9f6; /* the general background of the left bar, and of the header*/
|
||||
--sid-bg-alt: #f7f2ea; /* background inside groups*/
|
||||
--sid-bg-dark: #efe3d3; /* the hover*/
|
||||
--sid-sep: #f0e7da; /* the separators*/
|
||||
--sid-active: var(--main-first); /* the active color*/
|
||||
/* stylelint-disable-next-line color-hex-length*/
|
||||
--sid-active-font: #ffffff; /* the active color*/
|
||||
--sid-pills: rgba(35,35,0, 0.15); /* capsules*/
|
||||
}
|
||||
@@ -1,54 +0,0 @@
|
||||
// The main color of the theme
|
||||
$main-first: #ca7227; // main color
|
||||
$main-first-alt: #b7641d; // var for hovers
|
||||
$main-first-light: #fdf6ef; // var light 1
|
||||
$main-first-lighter: #fefaf7; // var light 2
|
||||
$main-first-dark: #3c3835; // var for hovers
|
||||
$main-first-darker: #221f1d; // var for hovers
|
||||
|
||||
// linked font colors
|
||||
$main-font-color: #363330;
|
||||
$light-font-color: #6d655f;
|
||||
$white: #fff; // white (sometimes we would like to tint it a little)
|
||||
|
||||
// the whole palette of grays, very useful
|
||||
// we will try to tint these grays according to the main color
|
||||
$grey-darker: #524236;
|
||||
$grey-dark: #766556;
|
||||
$grey-medium-dark: #ba9;
|
||||
$grey-medium: #d9ccbf;
|
||||
$grey-medium-light: #e4d8cc;
|
||||
$grey-light: #f5f0ec;
|
||||
$grey-lighter: #fcfaf8;
|
||||
|
||||
$unread-font-color: #161a38;
|
||||
$unread-bg: #f2f6f8;
|
||||
$unread-bg-light: #fdfdfe;
|
||||
|
||||
// alert colors (red, yellow, green)
|
||||
$alert-bg: #f5633e; // the base
|
||||
$alert-light: #fde0d8; // +light
|
||||
$alert-text: #73341f; // +dark
|
||||
|
||||
$warning-bg: #f4f762;
|
||||
$warning-light: #fdfde0;
|
||||
$warning-text: #73762f;
|
||||
|
||||
$success-bg: #10f5b2;
|
||||
$success-light: #cffdef;
|
||||
$success-text: #0c7556;
|
||||
|
||||
// favorites
|
||||
$fav-bg: #ffc300;
|
||||
$fav-light: #fff6da;
|
||||
|
||||
// the sidebar color, useful if you want a theme that would have a dark sidebar, e.g.
|
||||
$sid-font-color: #363330; // the background color of the left bar and the header
|
||||
$sid-bg: #fbf9f6; // the general background of the left bar, and of the header
|
||||
$sid-bg-alt: #f7f2ea; // background inside groups
|
||||
$sid-bg-dark: #efe3d3; // the hover
|
||||
$sid-sep: #f0e7da; // the separators
|
||||
$sid-active: $main-first; // the active color
|
||||
// stylelint-disable-next-line color-hex-length
|
||||
$sid-active-font: #ffffff; // the active color
|
||||
$sid-pills: rgba(35,35,0, 0.15); // capsules
|
||||
+20
-1310
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
+20
-1308
File diff suppressed because it is too large
Load Diff
@@ -1,53 +0,0 @@
|
||||
@use "fonts";
|
||||
|
||||
@use "mixins";
|
||||
|
||||
@use "variables";
|
||||
|
||||
@use "forms";
|
||||
|
||||
@use "tables";
|
||||
|
||||
@use "components";
|
||||
|
||||
@use "divers";
|
||||
|
||||
@use "sidebar";
|
||||
|
||||
@use "layout";
|
||||
|
||||
@use "list-view";
|
||||
|
||||
@use "global-view";
|
||||
|
||||
@use "reader-view";
|
||||
|
||||
@use "configuration";
|
||||
|
||||
@use "logs";
|
||||
|
||||
@use "stats";
|
||||
|
||||
@use "mobile";
|
||||
|
||||
@charset "UTF-8";
|
||||
|
||||
/*=== GENERAL */
|
||||
/*============*/
|
||||
html, body {
|
||||
background: variables.$grey-light;
|
||||
color: variables.$unread-font-color;
|
||||
font-family: "lato", "Helvetica", "Arial", sans-serif;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
body.formLogin,
|
||||
body.register {
|
||||
background: variables.$sid-bg;
|
||||
}
|
||||
|
||||
/*=== Links */
|
||||
a, button.as-link {
|
||||
outline: none;
|
||||
color: variables.$main-first;
|
||||
}
|
||||
@@ -1,8 +1,8 @@
|
||||
{
|
||||
"name": "Ansum",
|
||||
"author": "Thomas Guesnon",
|
||||
"description": "Thème sablonneux",
|
||||
"version": 0.1,
|
||||
"files": ["_frss.css", "ansum.css"],
|
||||
"theme-color": "#fbf9f6"
|
||||
"name": "Ansum",
|
||||
"author": "Thomas Guesnon",
|
||||
"description": "Thème sablonneux",
|
||||
"version": 0.2,
|
||||
"files": ["_frss.css", "ansum.css"],
|
||||
"theme-color": "#fbf9f6"
|
||||
}
|
||||
|
||||
@@ -1,2 +0,0 @@
|
||||
#!/bin/sh
|
||||
sass --watch ansum.scss:ansum.css
|
||||
@@ -1,8 +1,8 @@
|
||||
{
|
||||
"name": "Dark pink",
|
||||
"author": "Miicat_47",
|
||||
"description": "Nice dawk pink theme. >_< UwU",
|
||||
"version": 0.1,
|
||||
"files": ["_frss.css", "../Alternative-Dark/adark.css", "pinkdark.css"],
|
||||
"name": "Dark pink",
|
||||
"author": "Miicat_47",
|
||||
"description": "Nice dawk pink theme. >_< UwU",
|
||||
"version": 0.1,
|
||||
"files": ["_frss.css", "../Alternative-Dark/adark.css", "pinkdark.css"],
|
||||
"theme-color": "#171717"
|
||||
}
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
{
|
||||
"name": "Flat design",
|
||||
"author": "Marien Fressinaud",
|
||||
"description": "Thème plat pour FreshRSS",
|
||||
"version": 0.2,
|
||||
"files": ["_frss.css", "flat.css"],
|
||||
"name": "Flat design",
|
||||
"author": "Marien Fressinaud",
|
||||
"description": "Thème plat pour FreshRSS",
|
||||
"version": 0.2,
|
||||
"files": ["_frss.css", "flat.css"],
|
||||
"theme-color": "#34495e"
|
||||
}
|
||||
|
||||
@@ -1,13 +1,7 @@
|
||||
@use "sass:string";
|
||||
|
||||
@use "mixins";
|
||||
|
||||
@use "variables";
|
||||
|
||||
/*=== COMPONENTS */
|
||||
/*===============*/
|
||||
/*=== Forms */
|
||||
// see _forms.scss
|
||||
/* see _forms.css*/
|
||||
|
||||
/*=== Horizontal-list */
|
||||
.horizontal-list {
|
||||
@@ -24,14 +18,14 @@
|
||||
/*=== Dropdown */
|
||||
.dropdown {
|
||||
.dropdown-target:target + .btn {
|
||||
background-color: variables.$grey-medium-light;
|
||||
background-color: var(--grey-medium-light);
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
margin: 9px 0 0 0;
|
||||
padding: 0.5rem 0 1rem 0;
|
||||
background: variables.$grey-lighter;
|
||||
background: var(--grey-lighter);
|
||||
font-size: 1rem;
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
@@ -48,20 +42,20 @@
|
||||
padding: 1rem 1.5rem;
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
color: variables.$grey-dark;
|
||||
color: var(--grey-dark);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.item {
|
||||
|
||||
@include mixins.transition(all, 0.075s, ease-in-out);
|
||||
transition: all 0.075s ease-in-out;
|
||||
|
||||
> a,
|
||||
> span,
|
||||
> .as-link {
|
||||
padding: 0 2rem;
|
||||
color: variables.$main-font-color;
|
||||
color: var(--main-font-color);
|
||||
font-size: inherit;
|
||||
line-height: 2.5em;
|
||||
|
||||
@@ -73,8 +67,8 @@
|
||||
> a,
|
||||
> .as-link {
|
||||
&:not(.addItem):hover {
|
||||
background: variables.$main-first;
|
||||
color: variables.$white;
|
||||
background: var(--main-first);
|
||||
color: var(--white);
|
||||
|
||||
.icon {
|
||||
filter: brightness(3);
|
||||
@@ -85,8 +79,8 @@
|
||||
&.dropdown-section {
|
||||
margin-top: 0.75rem;
|
||||
|
||||
~ .dropdown-section {
|
||||
border-top-color: variables.$grey-light;
|
||||
& ~ .dropdown-section {
|
||||
border-top-color: var(--grey-light);
|
||||
}
|
||||
|
||||
.item {
|
||||
@@ -103,15 +97,15 @@
|
||||
}
|
||||
}
|
||||
|
||||
~ .dropdown-header {
|
||||
& ~ .dropdown-header {
|
||||
margin-top: 0.75rem;
|
||||
padding-top: 1.75rem;
|
||||
border-top-color: variables.$grey-light;
|
||||
border-top-color: var(--grey-light);
|
||||
}
|
||||
|
||||
&.separator {
|
||||
margin-top: 0.75rem;
|
||||
border-top-color: variables.$grey-light;
|
||||
border-top-color: var(--grey-light);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -125,21 +119,21 @@
|
||||
}
|
||||
|
||||
.tree .tree-folder .tree-folder-items .dropdown-menu {
|
||||
// to reset the appearance of the dropdown in the case of a dark sidebar
|
||||
/* to reset the appearance of the dropdown in the case of a dark sidebar*/
|
||||
.item {
|
||||
padding: 0;
|
||||
|
||||
a,
|
||||
button {
|
||||
color: variables.$main-font-color;
|
||||
color: var(--main-font-color);
|
||||
|
||||
&:hover {
|
||||
color: variables.$white;
|
||||
color: var(--white);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: variables.$main-first;
|
||||
background: var(--main-first);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -149,12 +143,12 @@
|
||||
|
||||
/*=== Alerts */
|
||||
.alert {
|
||||
background: variables.$grey-lighter;
|
||||
color: variables.$grey-dark;
|
||||
background: var(--grey-lighter);
|
||||
color: var(--grey-dark);
|
||||
font-size: 1rem;
|
||||
border: 1px solid variables.$grey-medium;
|
||||
border: 1px solid var(--grey-medium);
|
||||
border-radius: 3px;
|
||||
text-shadow: 0 0 1px variables.$grey-light;
|
||||
text-shadow: 0 0 1px var(--grey-light);
|
||||
}
|
||||
|
||||
.alert-head {
|
||||
@@ -167,30 +161,30 @@
|
||||
}
|
||||
|
||||
.alert-warn {
|
||||
background: variables.$warning-light;
|
||||
color: variables.$warning-text;
|
||||
border: 1px solid string.unquote(variables.$warning-text + '33'); // add opacity at the end
|
||||
background: var(--warning-light);
|
||||
color: var(--warning-text);
|
||||
border: 1px solid color-mix(in srgb, var(--warning-text) 20%, transparent);
|
||||
}
|
||||
|
||||
.alert-success {
|
||||
background: variables.$success-light;
|
||||
color: variables.$success-text;
|
||||
border: 1px solid string.unquote(variables.$success-text + '33');
|
||||
background: var(--success-light);
|
||||
color: var(--success-text);
|
||||
border: 1px solid color-mix(in srgb, var(--success-text) 20%, transparent);
|
||||
}
|
||||
|
||||
.alert-error {
|
||||
background: variables.$alert-light;
|
||||
color: variables.$alert-text;
|
||||
border: 1px solid string.unquote(variables.$alert-text + '33');
|
||||
background: var(--alert-light);
|
||||
color: var(--alert-text);
|
||||
border: 1px solid color-mix(in srgb, var(--alert-text) 20%, transparent);
|
||||
}
|
||||
|
||||
/*=== Pagination */
|
||||
.pagination {
|
||||
background: variables.$grey-light;
|
||||
color: variables.$main-font-color;
|
||||
background: var(--grey-light);
|
||||
color: var(--main-font-color);
|
||||
|
||||
.item a {
|
||||
color: variables.$main-font-color;
|
||||
color: var(--main-font-color);
|
||||
}
|
||||
|
||||
}
|
||||
@@ -202,15 +196,15 @@
|
||||
|
||||
/*=== Boxes */
|
||||
.box {
|
||||
background: variables.$white;
|
||||
background: var(--white);
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
|
||||
box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.25);
|
||||
|
||||
.box-title {
|
||||
background: variables.$grey-light;
|
||||
color: variables.$main-font-color;
|
||||
background: var(--grey-light);
|
||||
color: var(--main-font-color);
|
||||
border-radius: 2px 2px 0 0;
|
||||
|
||||
.configure {
|
||||
@@ -224,7 +218,7 @@
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: variables.$main-first;
|
||||
background-color: var(--main-first);
|
||||
|
||||
.icon {
|
||||
filter: brightness(3);
|
||||
@@ -262,9 +256,9 @@
|
||||
|
||||
.item {
|
||||
padding: 0.25rem 0;
|
||||
color: variables.$main-font-color;
|
||||
color: var(--main-font-color);
|
||||
font-size: 1rem;
|
||||
border-bottom: 1px solid variables.$grey-light;
|
||||
border-bottom: 1px solid var(--grey-light);
|
||||
line-height: 1.7em;
|
||||
|
||||
.configure {
|
||||
@@ -275,7 +269,7 @@
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: variables.$main-first;
|
||||
background-color: var(--main-first);
|
||||
|
||||
.icon {
|
||||
filter: brightness(3);
|
||||
@@ -294,13 +288,13 @@
|
||||
#bigMarkAsRead.big {
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
background: variables.$main-first-light;
|
||||
color: variables.$main-first;
|
||||
background: var(--main-first-light);
|
||||
color: var(--main-first);
|
||||
|
||||
@include mixins.transition(all, 0.15s, ease-in-out);
|
||||
transition: all 0.15s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
background: variables.$main-first;
|
||||
background: var(--main-first);
|
||||
color: #fff;
|
||||
|
||||
.bigTick {
|
||||
@@ -0,0 +1,314 @@
|
||||
/*=== COMPONENTS */
|
||||
/*===============*/
|
||||
/*=== Forms */
|
||||
/* see _forms.css*/
|
||||
|
||||
/*=== Horizontal-list */
|
||||
.horizontal-list {
|
||||
padding: 0.1rem 0;
|
||||
|
||||
& > .item {
|
||||
&:first-child {
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
/*=== Dropdown */
|
||||
.dropdown {
|
||||
.dropdown-target:target + .btn {
|
||||
background-color: var(--grey-medium-light);
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
margin: 9px 0 0 0;
|
||||
padding: 0.5rem 0 1rem 0;
|
||||
background: var(--grey-lighter);
|
||||
font-size: 1rem;
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0px 6px 8px 0px rgba(0,0,0,0.35);
|
||||
text-align: right;
|
||||
|
||||
&::after {
|
||||
border: none;
|
||||
left: 18px;
|
||||
}
|
||||
|
||||
.dropdown-header,
|
||||
.dropdown-section .dropdown-section-title {
|
||||
padding: 1rem 1.5rem;
|
||||
font-weight: bold;
|
||||
text-align: right;
|
||||
color: var(--grey-dark);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.item {
|
||||
|
||||
transition: all 0.075s ease-in-out;
|
||||
|
||||
> a,
|
||||
> span,
|
||||
> .as-link {
|
||||
padding: 0 2rem;
|
||||
color: var(--main-font-color);
|
||||
font-size: inherit;
|
||||
line-height: 2.5em;
|
||||
|
||||
span.icon {
|
||||
padding: 0 0.25rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
> a,
|
||||
> .as-link {
|
||||
&:not(.addItem):hover {
|
||||
background: var(--main-first);
|
||||
color: var(--white);
|
||||
|
||||
.icon {
|
||||
filter: brightness(3);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.dropdown-section {
|
||||
margin-top: 0.75rem;
|
||||
|
||||
& ~ .dropdown-section {
|
||||
border-top-color: var(--grey-light);
|
||||
}
|
||||
|
||||
.item {
|
||||
a, .as-link {
|
||||
padding-right: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[aria-checked="true"] {
|
||||
a::before {
|
||||
margin: 0 -14px 0 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
& ~ .dropdown-header {
|
||||
margin-top: 0.75rem;
|
||||
padding-top: 1.75rem;
|
||||
border-top-color: var(--grey-light);
|
||||
}
|
||||
|
||||
&.separator {
|
||||
margin-top: 0.75rem;
|
||||
border-top-color: var(--grey-light);
|
||||
}
|
||||
}
|
||||
|
||||
.input {
|
||||
select, input {
|
||||
margin: 0 auto 5px;
|
||||
padding: 2px 5px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tree .tree-folder .tree-folder-items .dropdown-menu {
|
||||
/* to reset the appearance of the dropdown in the case of a dark sidebar*/
|
||||
.item {
|
||||
padding: 0;
|
||||
|
||||
a,
|
||||
button {
|
||||
color: var(--main-font-color);
|
||||
|
||||
&:hover {
|
||||
color: var(--white);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--main-first);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/*=== Alerts */
|
||||
.alert {
|
||||
background: var(--grey-lighter);
|
||||
color: var(--grey-dark);
|
||||
font-size: 1rem;
|
||||
border: 1px solid var(--grey-medium);
|
||||
border-radius: 3px;
|
||||
text-shadow: 0 0 1px var(--grey-light);
|
||||
}
|
||||
|
||||
.alert-head {
|
||||
font-size: 1.15em;
|
||||
}
|
||||
|
||||
.alert > a {
|
||||
text-decoration: underline;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.alert-warn {
|
||||
background: var(--warning-light);
|
||||
color: var(--warning-text);
|
||||
border: 1px solid color-mix(in srgb, var(--warning-text) 20%, transparent);
|
||||
}
|
||||
|
||||
.alert-success {
|
||||
background: var(--success-light);
|
||||
color: var(--success-text);
|
||||
border: 1px solid color-mix(in srgb, var(--success-text) 20%, transparent);
|
||||
}
|
||||
|
||||
.alert-error {
|
||||
background: var(--alert-light);
|
||||
color: var(--alert-text);
|
||||
border: 1px solid color-mix(in srgb, var(--alert-text) 20%, transparent);
|
||||
}
|
||||
|
||||
/*=== Pagination */
|
||||
.pagination {
|
||||
background: var(--grey-light);
|
||||
color: var(--main-font-color);
|
||||
|
||||
.item a {
|
||||
color: var(--main-font-color);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
#load_more.loading,
|
||||
#load_more.loading:hover {
|
||||
background: url("loader.gif") center center no-repeat #34495e;
|
||||
}
|
||||
|
||||
/*=== Boxes */
|
||||
.box {
|
||||
background: var(--white);
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
|
||||
box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.25);
|
||||
|
||||
.box-title {
|
||||
background: var(--grey-light);
|
||||
color: var(--main-font-color);
|
||||
border-radius: 2px 2px 0 0;
|
||||
|
||||
.configure {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.configure {
|
||||
.icon {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--main-first);
|
||||
|
||||
.icon {
|
||||
filter: brightness(3);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
form {
|
||||
input {
|
||||
width: 85%;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
float: left;
|
||||
|
||||
a.dropdown-toggle {
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
background-image: url(icons/more.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: left 8px;
|
||||
|
||||
img {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box-content {
|
||||
padding-right: 30px;
|
||||
|
||||
.item {
|
||||
padding: 0.25rem 0;
|
||||
color: var(--main-font-color);
|
||||
font-size: 1rem;
|
||||
border-bottom: 1px solid var(--grey-light);
|
||||
line-height: 1.7em;
|
||||
|
||||
.configure {
|
||||
padding: 5px;
|
||||
|
||||
.icon {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--main-first);
|
||||
|
||||
.icon {
|
||||
filter: brightness(3);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*=== "Load more" part */
|
||||
#bigMarkAsRead.big {
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
background: var(--main-first-light);
|
||||
color: var(--main-first);
|
||||
|
||||
transition: all 0.15s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
background: var(--main-first);
|
||||
color: #fff;
|
||||
|
||||
.bigTick {
|
||||
filter: brightness(5);
|
||||
}
|
||||
}
|
||||
|
||||
.bigTick {
|
||||
margin: 0.5rem 0;
|
||||
background: url(icons/tick-color.svg) center no-repeat;
|
||||
display: inline-block;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
text-indent: -9999px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
@@ -1,11 +1,9 @@
|
||||
@use "variables";
|
||||
|
||||
/*=== Configuration pages */
|
||||
.post {
|
||||
font-size: 1rem;
|
||||
|
||||
h1, h2 {
|
||||
color: variables.$main-font-color;
|
||||
color: var(--main-font-color);
|
||||
font-size: 2rem;
|
||||
margin-top: 1.75rem;
|
||||
font-weight: 300;
|
||||
@@ -16,14 +14,14 @@
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
a[href="./"] { // This is the "Back to your feeds" button.
|
||||
a[href="./"] { /* This is the "Back to your feeds" button.*/
|
||||
margin: 0;
|
||||
padding: 0.75rem 1.5rem;
|
||||
background: variables.$grey-lighter;
|
||||
background: var(--grey-lighter);
|
||||
display: inline-block;
|
||||
color: variables.$grey-dark;
|
||||
color: var(--grey-dark);
|
||||
font-size: 1rem;
|
||||
border: 1px solid variables.$grey-medium-light;
|
||||
border: 1px solid var(--grey-medium-light);
|
||||
border-radius: 5px;
|
||||
min-width: 15px;
|
||||
line-height: 25px;
|
||||
@@ -32,9 +30,9 @@
|
||||
overflow: hidden;
|
||||
|
||||
&:hover {
|
||||
background: variables.$main-first;
|
||||
background: var(--main-first);
|
||||
color: white;
|
||||
border: 1px solid variables.$main-first;
|
||||
border: 1px solid var(--main-first);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
/*=== Configuration pages */
|
||||
.post {
|
||||
font-size: 1rem;
|
||||
|
||||
h1, h2 {
|
||||
color: var(--main-font-color);
|
||||
font-size: 2rem;
|
||||
margin-top: 1.75rem;
|
||||
font-weight: 300;
|
||||
line-height: 1.2em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
a[href="./"] { /* This is the "Back to your feeds" button.*/
|
||||
margin: 0;
|
||||
padding: 0.75rem 1.5rem;
|
||||
background: var(--grey-lighter);
|
||||
display: inline-block;
|
||||
color: var(--grey-dark);
|
||||
font-size: 1rem;
|
||||
border: 1px solid var(--grey-medium-light);
|
||||
border-radius: 5px;
|
||||
min-width: 15px;
|
||||
line-height: 25px;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
|
||||
&:hover {
|
||||
background: var(--main-first);
|
||||
color: white;
|
||||
border: 1px solid var(--main-first);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
#slider {
|
||||
border-right: none;
|
||||
box-shadow: 0px 6px 8px 0px rgba(0,0,0,0.35);
|
||||
}
|
||||
|
||||
.theme-preview-list {
|
||||
.preview-container {
|
||||
.properties {
|
||||
padding: 1rem;
|
||||
background: rgba(0, 0, 0, 0.75);
|
||||
color: white;
|
||||
border: 0;
|
||||
|
||||
.page-number {
|
||||
left: 1rem;
|
||||
top: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
/*=== DIVERS */
|
||||
/*===========*/
|
||||
.aside.aside_feed .nav-form input,
|
||||
.aside.aside_feed .nav-form select {
|
||||
width: 140px;
|
||||
}
|
||||
|
||||
.aside.aside_feed .nav-form .dropdown .dropdown-menu {
|
||||
left: -20px;
|
||||
}
|
||||
|
||||
.aside.aside_feed .nav-form .dropdown .dropdown-menu::after {
|
||||
left: 33px;
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
@font-face {
|
||||
font-family: "lato";
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
font-weight: 400;
|
||||
src: url("../fonts/LatoLatin-Regular.woff") format("woff");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "lato";
|
||||
font-style: italic;
|
||||
font-stretch: normal;
|
||||
font-weight: 400;
|
||||
src: url("../fonts/LatoLatin-Italic.woff") format("woff");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "lato";
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
font-weight: 700;
|
||||
src: url("../fonts/LatoLatin-Bold.woff") format("woff");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "lato";
|
||||
font-style: italic;
|
||||
font-stretch: normal;
|
||||
font-weight: 700;
|
||||
src: url("../fonts/LatoLatin-BoldItalic.woff") format("woff");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "spectral";
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
font-weight: 400;
|
||||
src: url("../fonts/Spectral-Regular.woff") format("woff");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "spectral";
|
||||
font-style: italic;
|
||||
font-stretch: normal;
|
||||
font-weight: 400;
|
||||
src: url("../fonts/Spectral-Italic.woff") format("woff");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "spectral";
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
font-weight: 700;
|
||||
src: url("../fonts/Spectral-Bold.woff") format("woff");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "spectral";
|
||||
font-style: italic;
|
||||
font-stretch: normal;
|
||||
font-weight: 700;
|
||||
src: url("../fonts/Spectral-BoldItalic.woff") format("woff");
|
||||
}
|
||||
@@ -1,13 +1,9 @@
|
||||
@use "mixins";
|
||||
|
||||
@use "variables";
|
||||
|
||||
/* btns */
|
||||
.btn {
|
||||
margin: 0;
|
||||
padding: 0.5rem 1.5rem;
|
||||
background: variables.$grey-lighter;
|
||||
color: variables.$grey-dark;
|
||||
background: var(--grey-lighter);
|
||||
color: var(--grey-dark);
|
||||
font-size: 1rem;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
@@ -16,15 +12,15 @@
|
||||
line-height: 25px;
|
||||
vertical-align: middle;
|
||||
|
||||
@include mixins.transition(all, 0.15s, ease-in-out);
|
||||
transition: all 0.15s ease-in-out;
|
||||
|
||||
&.btn-important {
|
||||
background: variables.$main-first;
|
||||
color: variables.$white;
|
||||
background: var(--main-first);
|
||||
color: var(--white);
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
background: variables.$main-first-alt;
|
||||
background: var(--main-first-alt);
|
||||
}
|
||||
|
||||
img {
|
||||
@@ -34,12 +30,12 @@
|
||||
|
||||
|
||||
&.btn-attention {
|
||||
background: variables.$alert-bg;
|
||||
background: var(--alert-bg);
|
||||
color: #fff;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
background: variables.$alert-text;
|
||||
background: var(--alert-text);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -65,7 +61,7 @@ label {
|
||||
min-height: 25px;
|
||||
padding: 5px 0;
|
||||
cursor: pointer;
|
||||
color: variables.$grey-dark;
|
||||
color: var(--grey-dark);
|
||||
}
|
||||
|
||||
textarea {
|
||||
@@ -74,11 +70,11 @@ textarea {
|
||||
|
||||
input, select, textarea, button {
|
||||
padding: 5px 10px;
|
||||
background: variables.$white;
|
||||
color: variables.$grey-dark;
|
||||
background: var(--white);
|
||||
color: var(--grey-dark);
|
||||
font-family: "lato", "Helvetica", "Arial", sans-serif;
|
||||
font-size: 1rem;
|
||||
border: 1px solid variables.$grey-light;
|
||||
border: 1px solid var(--grey-light);
|
||||
border-radius: 2px;
|
||||
min-height: 25px;
|
||||
line-height: 25px;
|
||||
@@ -94,19 +90,18 @@ option {
|
||||
}
|
||||
|
||||
input:focus, select:focus, textarea:focus {
|
||||
color: variables.$main-font-color;
|
||||
border-color: variables.$main-first;
|
||||
color: var(--main-font-color);
|
||||
border-color: var(--main-first);
|
||||
}
|
||||
|
||||
input:invalid, select:invalid {
|
||||
color: variables.$alert-bg;
|
||||
border-color: variables.$alert-bg;
|
||||
color: var(--alert-bg);
|
||||
border-color: var(--alert-bg);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
input:disabled, select:disabled {
|
||||
color: variables.$grey-medium-dark;
|
||||
border-color: variables.$grey-medium-dark;
|
||||
background: var(--grey-light);
|
||||
}
|
||||
|
||||
.form-group {
|
||||
@@ -0,0 +1,140 @@
|
||||
/* btns */
|
||||
.btn {
|
||||
margin: 0;
|
||||
padding: 0.5rem 1.5rem;
|
||||
background: var(--grey-lighter);
|
||||
color: var(--grey-dark);
|
||||
font-size: 1rem;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
min-height: 25px;
|
||||
min-width: 15px;
|
||||
line-height: 25px;
|
||||
vertical-align: middle;
|
||||
|
||||
transition: all 0.15s ease-in-out;
|
||||
|
||||
&.btn-important {
|
||||
background: var(--main-first);
|
||||
color: var(--white);
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
background: var(--main-first-alt);
|
||||
}
|
||||
|
||||
img {
|
||||
filter: brightness(3);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&.btn-attention {
|
||||
background: var(--alert-bg);
|
||||
color: #fff;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
background: var(--alert-text);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
/*=== Forms */
|
||||
legend {
|
||||
margin: 2rem 0 1rem 0;
|
||||
padding: 0;
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
font-size: 1rem;
|
||||
clear: both;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
label {
|
||||
min-height: 25px;
|
||||
padding: 5px 0;
|
||||
cursor: pointer;
|
||||
color: var(--grey-dark);
|
||||
}
|
||||
|
||||
textarea {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
input, select, textarea, button {
|
||||
padding: 5px 10px;
|
||||
background: var(--white);
|
||||
color: var(--grey-dark);
|
||||
font-family: "lato", "Helvetica", "Arial", sans-serif;
|
||||
font-size: 1rem;
|
||||
border: 1px solid var(--grey-light);
|
||||
border-radius: 2px;
|
||||
min-height: 25px;
|
||||
line-height: 25px;
|
||||
}
|
||||
|
||||
select {
|
||||
padding-top: 9px;
|
||||
padding-bottom: 9px;
|
||||
}
|
||||
|
||||
option {
|
||||
padding: 0 .5em;
|
||||
}
|
||||
|
||||
input:focus, select:focus, textarea:focus {
|
||||
color: var(--main-font-color);
|
||||
border-color: var(--main-first);
|
||||
}
|
||||
|
||||
input:invalid, select:invalid {
|
||||
color: var(--alert-bg);
|
||||
border-color: var(--alert-bg);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
input:disabled, select:disabled {
|
||||
background: var(--grey-light);
|
||||
}
|
||||
|
||||
.form-group {
|
||||
padding: 5px;
|
||||
border-radius: 3px;
|
||||
|
||||
&::after {
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.group-name {
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.group-controls {
|
||||
min-height: 25px;
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
.group-controls .control {
|
||||
line-height: 2.0em;
|
||||
}
|
||||
|
||||
&.form-actions {
|
||||
margin: 15px 0 25px;
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
&.form-actions .btn {
|
||||
margin: 0 0 0 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -1,5 +1,3 @@
|
||||
@use "variables";
|
||||
|
||||
/*=== GLOBAL VIEW */
|
||||
/*================*/
|
||||
#stream {
|
||||
@@ -13,7 +11,7 @@
|
||||
background: none;
|
||||
|
||||
a.title {
|
||||
color: variables.$grey-dark;
|
||||
color: var(--grey-dark);
|
||||
font-size: 1rem;
|
||||
font-weight: normal;
|
||||
text-decoration: none;
|
||||
@@ -24,7 +22,7 @@
|
||||
&:not([data-unread="0"])::after {
|
||||
margin: -0.5rem 1rem 0 0;
|
||||
padding: 0 0.75rem;
|
||||
background: variables.$grey-light;
|
||||
background: var(--grey-light);
|
||||
border-radius: 12px;
|
||||
position: absolute;
|
||||
top: 1.75rem;
|
||||
@@ -34,7 +32,7 @@
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: variables.$main-first;
|
||||
color: var(--main-first);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -42,11 +40,11 @@
|
||||
.box-content {
|
||||
.item.feed {
|
||||
a {
|
||||
color: variables.$main-font-color;
|
||||
color: var(--main-font-color);
|
||||
font-weight: 400;
|
||||
|
||||
&:hover {
|
||||
color: variables.$main-first;
|
||||
color: var(--main-first);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
@@ -56,7 +54,7 @@
|
||||
}
|
||||
|
||||
|
||||
// the panel that appears in overlay to display the flows
|
||||
/* the panel that appears in overlay to display the flows*/
|
||||
#overlay {
|
||||
background: rgba(0, 0, 0, 0.65);
|
||||
}
|
||||
@@ -0,0 +1,68 @@
|
||||
/*=== GLOBAL VIEW */
|
||||
/*================*/
|
||||
#stream {
|
||||
.box.category {
|
||||
&:not([data-unread="0"]) .box-title .title {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.box-title {
|
||||
padding: 1.5rem;
|
||||
background: none;
|
||||
|
||||
a.title {
|
||||
color: var(--grey-dark);
|
||||
font-size: 1rem;
|
||||
font-weight: normal;
|
||||
text-decoration: none;
|
||||
text-align: right;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
|
||||
&:not([data-unread="0"])::after {
|
||||
margin: -0.5rem 0 0 1rem;
|
||||
padding: 0 0.75rem;
|
||||
background: var(--grey-light);
|
||||
border-radius: 12px;
|
||||
position: absolute;
|
||||
top: 1.75rem;
|
||||
left: 0;
|
||||
line-height: 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--main-first);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box-content {
|
||||
.item.feed {
|
||||
a {
|
||||
color: var(--main-font-color);
|
||||
font-weight: 400;
|
||||
|
||||
&:hover {
|
||||
color: var(--main-first);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* the panel that appears in overlay to display the flows*/
|
||||
#overlay {
|
||||
background: rgba(0, 0, 0, 0.65);
|
||||
}
|
||||
|
||||
#panel {
|
||||
top: 3rem;
|
||||
left: 3rem;
|
||||
bottom: 3rem;
|
||||
right: 3rem;
|
||||
border-radius: 3px;
|
||||
}
|
||||
@@ -1,12 +1,8 @@
|
||||
@use "mixins";
|
||||
|
||||
@use "variables";
|
||||
|
||||
/*=== STRUCTURE */
|
||||
/*===============*/
|
||||
/*=== Header */
|
||||
.header {
|
||||
background: variables.$sid-bg;
|
||||
background: var(--sid-bg);
|
||||
|
||||
.item {
|
||||
vertical-align: middle;
|
||||
@@ -30,26 +26,26 @@
|
||||
&.search {
|
||||
input {
|
||||
width: 350px;
|
||||
color: variables.$sid-font-color;
|
||||
color: var(--sid-font-color);
|
||||
border: none;
|
||||
border-radius: 2px 0 0 2px;
|
||||
background-color: variables.$sid-bg-alt;
|
||||
background-color: var(--sid-bg-alt);
|
||||
|
||||
@include mixins.transition(all, 0.15s, ease-in-out);
|
||||
transition: all 0.15s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
background-color: variables.$sid-bg-dark;
|
||||
background-color: var(--sid-bg-dark);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
color: variables.$grey-dark;
|
||||
background-color: variables.$white;
|
||||
color: var(--grey-dark);
|
||||
background-color: var(--white);
|
||||
}
|
||||
}
|
||||
|
||||
input:focus ~ .btn,
|
||||
input:hover ~ .btn {
|
||||
background-color: variables.$main-first;
|
||||
background-color: var(--main-first);
|
||||
|
||||
.icon {
|
||||
filter: brightness(3);
|
||||
@@ -59,12 +55,12 @@
|
||||
.btn {
|
||||
width: 3rem;
|
||||
border-radius: 0 2px 2px 0;
|
||||
background-color: variables.$sid-bg-alt;
|
||||
background-color: var(--sid-bg-alt);
|
||||
border-left-width: 0;
|
||||
min-height: 35px;
|
||||
|
||||
&:hover {
|
||||
background-color: variables.$main-first-alt;
|
||||
background-color: var(--main-first-alt);
|
||||
|
||||
.icon {
|
||||
filter: brightness(3);
|
||||
@@ -100,13 +96,13 @@
|
||||
|
||||
/*=== Prompt (centered) */
|
||||
main.prompt {
|
||||
background: variables.$grey-light;
|
||||
background: var(--grey-light);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
/*=== New article notification */
|
||||
#new-article {
|
||||
background: variables.$main-first;
|
||||
background: var(--main-first);
|
||||
font-size: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -114,18 +110,18 @@ main.prompt {
|
||||
#new-article > a {
|
||||
padding: calc(0.75rem + var(--frss-padding-top-bottom)) 1rem;
|
||||
font-weight: bold;
|
||||
color: variables.$white;
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
#new-article > a:hover {
|
||||
text-decoration: none;
|
||||
background: variables.$main-first-alt;
|
||||
background: var(--main-first-alt);
|
||||
}
|
||||
|
||||
/*=== Transition indication, e.g. day */
|
||||
.transition {
|
||||
padding: 1rem 0 0 1.25rem;
|
||||
color: variables.$light-font-color;
|
||||
color: var(--light-font-color);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 700;
|
||||
line-height: 3em;
|
||||
@@ -134,7 +130,7 @@ main.prompt {
|
||||
|
||||
.name {
|
||||
padding: 0 1rem 0 1rem;
|
||||
color: variables.$main-font-color;
|
||||
color: var(--main-font-color);
|
||||
font-size: 0.875rem;
|
||||
position: relative;
|
||||
left: 0;
|
||||
@@ -145,18 +141,18 @@ main.prompt {
|
||||
.btn {
|
||||
border-left-width: 0;
|
||||
padding: 0.5rem 1rem;
|
||||
background-color: variables.$grey-light;
|
||||
background-color: var(--grey-light);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
@include mixins.transition(all, 0.15s, ease-in-out);
|
||||
transition: all 0.15s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
background-color: variables.$grey-medium-light;
|
||||
background-color: var(--grey-medium-light);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: variables.$main-first;
|
||||
background-color: var(--main-first);
|
||||
|
||||
.icon {
|
||||
filter: brightness(3);
|
||||
@@ -172,12 +168,12 @@ main.prompt {
|
||||
.btn {
|
||||
border-left-width: 0;
|
||||
padding: 0.5rem 1rem;
|
||||
background-color: variables.$grey-lighter;
|
||||
background-color: var(--grey-lighter);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
&:hover {
|
||||
background-color: variables.$grey-medium-light;
|
||||
background-color: var(--grey-medium-light);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -186,21 +182,21 @@ main.prompt {
|
||||
.btn {
|
||||
border-left-width: 0;
|
||||
padding: 0.5rem 1rem;
|
||||
background-color: variables.$grey-lighter;
|
||||
background-color: var(--grey-lighter);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
@include mixins.transition(all, 0.15s, ease-in-out);
|
||||
transition: all 0.15s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
background-color: variables.$grey-medium-light;
|
||||
background-color: var(--grey-medium-light);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: variables.$main-first;
|
||||
background-color: var(--main-first);
|
||||
}
|
||||
|
||||
// actions
|
||||
/* actions*/
|
||||
&#toggle-read.active {
|
||||
.icon {
|
||||
filter: brightness(3.5);
|
||||
@@ -213,16 +209,16 @@ main.prompt {
|
||||
}
|
||||
}
|
||||
|
||||
// read all
|
||||
/* read all*/
|
||||
&.read_all {
|
||||
padding: 5px 16px;
|
||||
color: variables.$main-font-color;
|
||||
background-color: variables.$grey-lighter;
|
||||
color: var(--main-font-color);
|
||||
background-color: var(--grey-lighter);
|
||||
|
||||
@include mixins.transition(all, 0.15s, ease-in-out);
|
||||
transition: all 0.15s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
background-color: variables.$grey-medium-light;
|
||||
background-color: var(--grey-medium-light);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -255,19 +251,19 @@ main.prompt {
|
||||
|
||||
h1.title, h1 {
|
||||
a {
|
||||
color: variables.$main-font-color;
|
||||
color: var(--main-font-color);
|
||||
font-family: "spectral", serif;
|
||||
font-size: 2rem;
|
||||
|
||||
&:hover {
|
||||
color: variables.$main-first;
|
||||
color: var(--main-first);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.author {
|
||||
color: variables.$light-font-color;
|
||||
color: var(--light-font-color);
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
@@ -278,27 +274,27 @@ main.prompt {
|
||||
|
||||
.content hr {
|
||||
margin: 30px 10px;
|
||||
background: variables.$grey-medium-light;
|
||||
background: var(--grey-medium-light);
|
||||
height: 1px;
|
||||
border: 0;
|
||||
box-shadow: 0 2px 5px #ccc;
|
||||
}
|
||||
|
||||
pre {
|
||||
background: variables.$main-first-darker;
|
||||
color: variables.$white;
|
||||
background: var(--main-first-darker);
|
||||
color: var(--white);
|
||||
border-radius: 3px;
|
||||
|
||||
code {
|
||||
background: transparent;
|
||||
color: variables.$white;
|
||||
color: var(--white);
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
code {
|
||||
background: variables.$code-bg;
|
||||
color: variables.$code-text;
|
||||
background: var(--code-bg);
|
||||
color: var(--code-text);
|
||||
font-size: 1rem;
|
||||
border-radius: 3px;
|
||||
}
|
||||
@@ -307,10 +303,10 @@ main.prompt {
|
||||
blockquote {
|
||||
margin: 0;
|
||||
padding: 0.5rem 1.5rem;
|
||||
background: variables.$grey-lighter;
|
||||
background: var(--grey-lighter);
|
||||
display: block;
|
||||
color: variables.$light-font-color;
|
||||
border-left: 4px solid variables.$grey-medium-light;
|
||||
color: var(--light-font-color);
|
||||
border-left: 4px solid var(--grey-medium-light);
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
@@ -324,10 +320,10 @@ main.prompt {
|
||||
.notification {
|
||||
|
||||
padding: 1rem 0;
|
||||
background: variables.$grey-medium-light;
|
||||
background: var(--grey-medium-light);
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
color: variables.$grey-dark;
|
||||
color: var(--grey-dark);
|
||||
font-size: 1em;
|
||||
border: none;
|
||||
position: fixed;
|
||||
@@ -345,13 +341,13 @@ main.prompt {
|
||||
}
|
||||
|
||||
&.good {
|
||||
background: variables.$success-bg;
|
||||
color: variables.$white;
|
||||
background: var(--success-bg);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
&.bad {
|
||||
background: variables.$alert-bg;
|
||||
color: variables.$white;
|
||||
background: var(--alert-bg);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.close {
|
||||
@@ -361,11 +357,11 @@ main.prompt {
|
||||
}
|
||||
|
||||
&.good .close:hover {
|
||||
background: variables.$success-text;
|
||||
background: var(--success-text);
|
||||
}
|
||||
|
||||
&.bad .close:hover {
|
||||
background: variables.$alert-text;
|
||||
background: var(--alert-text);
|
||||
}
|
||||
|
||||
&#actualizeProgress {
|
||||
@@ -382,5 +378,5 @@ main.prompt {
|
||||
|
||||
/*=== Navigation menu (for articles) */
|
||||
#nav_entries {
|
||||
background: variables.$sid-bg;
|
||||
background: var(--sid-bg);
|
||||
}
|
||||
@@ -0,0 +1,382 @@
|
||||
/*=== STRUCTURE */
|
||||
/*===============*/
|
||||
/*=== Header */
|
||||
.header {
|
||||
background: var(--sid-bg);
|
||||
|
||||
.item {
|
||||
vertical-align: middle;
|
||||
|
||||
&.title {
|
||||
a {
|
||||
padding: 0.5rem 1rem;
|
||||
|
||||
.logo {
|
||||
filter: grayscale(100%) brightness(3);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.logo {
|
||||
filter: grayscale(100%) brightness(2.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.search {
|
||||
input {
|
||||
width: 350px;
|
||||
color: var(--sid-font-color);
|
||||
border: none;
|
||||
border-radius: 0 2px 2px 0;
|
||||
background-color: var(--sid-bg-alt);
|
||||
|
||||
transition: all 0.15s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--sid-bg-dark);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
color: var(--grey-dark);
|
||||
background-color: var(--white);
|
||||
}
|
||||
}
|
||||
|
||||
input:focus ~ .btn,
|
||||
input:hover ~ .btn {
|
||||
background-color: var(--main-first);
|
||||
|
||||
.icon {
|
||||
filter: brightness(3);
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 3rem;
|
||||
border-radius: 2px 0 0 2px;
|
||||
background-color: var(--sid-bg-alt);
|
||||
border-right-width: 0;
|
||||
min-height: 35px;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--main-first-alt);
|
||||
|
||||
.icon {
|
||||
filter: brightness(3);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.configure {
|
||||
text-align: center;
|
||||
|
||||
.btn .icon,
|
||||
> .icon {
|
||||
filter: brightness(3)
|
||||
}
|
||||
|
||||
.signin {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 0.25rem 1rem;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*=== Body */
|
||||
#global {
|
||||
height: calc(100vh - (calc(3rem + 2 * var(--frss-padding-top-bottom))));
|
||||
}
|
||||
|
||||
/*=== Prompt (centered) */
|
||||
main.prompt {
|
||||
background: var(--grey-light);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
/*=== New article notification */
|
||||
#new-article {
|
||||
background: var(--main-first);
|
||||
font-size: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#new-article > a {
|
||||
padding: calc(0.75rem + var(--frss-padding-top-bottom)) 1rem;
|
||||
font-weight: bold;
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
#new-article > a:hover {
|
||||
text-decoration: none;
|
||||
background: var(--main-first-alt);
|
||||
}
|
||||
|
||||
/*=== Transition indication, e.g. day */
|
||||
.transition {
|
||||
padding: 1rem 1.25rem 0 0;
|
||||
color: var(--light-font-color);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 700;
|
||||
line-height: 3em;
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
|
||||
.name {
|
||||
padding: 0 1rem 0 1rem;
|
||||
color: var(--main-font-color);
|
||||
font-size: 0.875rem;
|
||||
position: relative;
|
||||
right: 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
border-right-width: 0;
|
||||
padding: 0.5rem 1rem;
|
||||
background-color: var(--grey-light);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
transition: all 0.15s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--grey-medium-light);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: var(--main-first);
|
||||
|
||||
.icon {
|
||||
filter: brightness(3);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*=== Index menu */
|
||||
.nav_menu {
|
||||
text-align: center;
|
||||
padding: 5px 0;
|
||||
|
||||
.btn {
|
||||
border-right-width: 0;
|
||||
padding: 0.5rem 1rem;
|
||||
background-color: var(--grey-lighter);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--grey-medium-light);
|
||||
}
|
||||
}
|
||||
|
||||
.stick,
|
||||
.group {
|
||||
.btn {
|
||||
border-right-width: 0;
|
||||
padding: 0.5rem 1rem;
|
||||
background-color: var(--grey-lighter);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
transition: all 0.15s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--grey-medium-light);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: var(--main-first);
|
||||
}
|
||||
|
||||
/* actions*/
|
||||
&#toggle-read.active {
|
||||
.icon {
|
||||
filter: brightness(3.5);
|
||||
}
|
||||
}
|
||||
|
||||
&#toggle-unread.active {
|
||||
.icon {
|
||||
filter: brightness(3.5) grayscale(1);
|
||||
}
|
||||
}
|
||||
|
||||
/* read all*/
|
||||
&.read_all {
|
||||
padding: 5px 16px;
|
||||
color: var(--main-font-color);
|
||||
background-color: var(--grey-lighter);
|
||||
|
||||
transition: all 0.15s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--grey-medium-light);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown:not(#dropdown-search-wrapper) {
|
||||
a.dropdown-toggle {
|
||||
border-right-width: 0;
|
||||
background-image: url(icons/more.svg);
|
||||
|
||||
.icon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#dropdown-search-wrapper.dropdown {
|
||||
a.dropdown-toggle {
|
||||
border-right-width: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*=== Content of feed articles */
|
||||
.content, .content_thin {
|
||||
padding: 20px 10px;
|
||||
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.8rem;
|
||||
|
||||
h1.title, h1 {
|
||||
a {
|
||||
color: var(--main-font-color);
|
||||
font-family: "spectral", serif;
|
||||
font-size: 2rem;
|
||||
|
||||
&:hover {
|
||||
color: var(--main-first);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.author {
|
||||
color: var(--light-font-color);
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
p, ul {
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.8rem;
|
||||
}
|
||||
|
||||
.content hr {
|
||||
margin: 30px 10px;
|
||||
background: var(--grey-medium-light);
|
||||
height: 1px;
|
||||
border: 0;
|
||||
box-shadow: 0 2px 5px #ccc;
|
||||
}
|
||||
|
||||
pre {
|
||||
background: var(--main-first-darker);
|
||||
color: var(--white);
|
||||
border-radius: 3px;
|
||||
|
||||
code {
|
||||
background: transparent;
|
||||
color: var(--white);
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
code {
|
||||
background: var(--code-bg);
|
||||
color: var(--code-text);
|
||||
font-size: 1rem;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
|
||||
blockquote {
|
||||
margin: 0;
|
||||
padding: 0.5rem 1.5rem;
|
||||
background: var(--grey-lighter);
|
||||
display: block;
|
||||
color: var(--light-font-color);
|
||||
border-right: 4px solid var(--grey-medium-light);
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
/*=== Notification and actualize notification */
|
||||
.notification {
|
||||
|
||||
padding: 1rem 0;
|
||||
background: var(--grey-medium-light);
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
color: var(--grey-dark);
|
||||
font-size: 1em;
|
||||
border: none;
|
||||
position: fixed;
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
text-align: center;
|
||||
line-height: 3em;
|
||||
vertical-align: middle;
|
||||
|
||||
.msg {
|
||||
display: inline-block;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
&.good {
|
||||
background: var(--success-bg);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
&.bad {
|
||||
background: var(--alert-bg);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.close {
|
||||
.icon {
|
||||
filter: brightness(3);
|
||||
}
|
||||
}
|
||||
|
||||
&.good .close:hover {
|
||||
background: var(--success-text);
|
||||
}
|
||||
|
||||
&.bad .close:hover {
|
||||
background: var(--alert-text);
|
||||
}
|
||||
|
||||
&#actualizeProgress {
|
||||
br {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 0 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*=== Navigation menu (for articles) */
|
||||
#nav_entries {
|
||||
background: var(--sid-bg);
|
||||
}
|
||||
@@ -0,0 +1,91 @@
|
||||
/*=== Feed articles */
|
||||
.flux {
|
||||
background: var(--white);
|
||||
|
||||
transition: all 0.15s ease-in-out;
|
||||
|
||||
.flux_header {
|
||||
&:hover {
|
||||
background: var(--grey-lighter);
|
||||
|
||||
&:not(.current):hover .item .title {
|
||||
background: var(--grey-lighter);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.current {
|
||||
background: var(--grey-lighter);
|
||||
border-left-color: var(--main-first);
|
||||
}
|
||||
|
||||
&.not_read:not(.current) {
|
||||
background: var(--unread-bg);
|
||||
|
||||
&:hover .item .title {
|
||||
background: var(--unread-bg);
|
||||
}
|
||||
}
|
||||
|
||||
&.not_read {
|
||||
.item .title {
|
||||
a {
|
||||
color: var(--unread-font-color);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.item.website {
|
||||
a {
|
||||
color: var(--unread-font-color);
|
||||
}
|
||||
}
|
||||
|
||||
.item .date {
|
||||
color: color-mix(in srgb, var(--unread-font-color) 50%, transparent);
|
||||
}
|
||||
}
|
||||
|
||||
&.favorite {
|
||||
border-left-color: var(--fav-bg);
|
||||
|
||||
transition: all 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
&.favorite:not(.current) {
|
||||
background: var(--fav-light);
|
||||
|
||||
&:hover .item .title {
|
||||
background: var(--fav-light);
|
||||
}
|
||||
}
|
||||
|
||||
.website {
|
||||
a {
|
||||
color: var(--main-font-color);
|
||||
opacity: 0.75;
|
||||
}
|
||||
}
|
||||
|
||||
.flux_header .date,
|
||||
.flux_content .bottom .date {
|
||||
color: color-mix(in srgb, var(--main-font-color) 50%, transparent);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
font-size: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.flux_header {
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
border-top: 1px solid var(--grey-light);
|
||||
|
||||
.title {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,91 @@
|
||||
/*=== Feed articles */
|
||||
.flux {
|
||||
background: var(--white);
|
||||
|
||||
transition: all 0.15s ease-in-out;
|
||||
|
||||
.flux_header {
|
||||
&:hover {
|
||||
background: var(--grey-lighter);
|
||||
|
||||
&:not(.current):hover .item .title {
|
||||
background: var(--grey-lighter);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.current {
|
||||
background: var(--grey-lighter);
|
||||
border-right-color: var(--main-first);
|
||||
}
|
||||
|
||||
&.not_read:not(.current) {
|
||||
background: var(--unread-bg);
|
||||
|
||||
&:hover .item .title {
|
||||
background: var(--unread-bg);
|
||||
}
|
||||
}
|
||||
|
||||
&.not_read {
|
||||
.item .title {
|
||||
a {
|
||||
color: var(--unread-font-color);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.item.website {
|
||||
a {
|
||||
color: var(--unread-font-color);
|
||||
}
|
||||
}
|
||||
|
||||
.item .date {
|
||||
color: color-mix(in srgb, var(--unread-font-color) 50%, transparent);
|
||||
}
|
||||
}
|
||||
|
||||
&.favorite {
|
||||
border-right-color: var(--fav-bg);
|
||||
|
||||
transition: all 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
&.favorite:not(.current) {
|
||||
background: var(--fav-light);
|
||||
|
||||
&:hover .item .title {
|
||||
background: var(--fav-light);
|
||||
}
|
||||
}
|
||||
|
||||
.website {
|
||||
a {
|
||||
color: var(--main-font-color);
|
||||
opacity: 0.75;
|
||||
}
|
||||
}
|
||||
|
||||
.flux_header .date,
|
||||
.flux_content .bottom .date {
|
||||
color: color-mix(in srgb, var(--main-font-color) 50%, transparent);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
font-size: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.flux_header {
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
border-top: 1px solid var(--grey-light);
|
||||
|
||||
.title {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,97 +0,0 @@
|
||||
@use "sass:color";
|
||||
|
||||
@use "mixins";
|
||||
|
||||
@use "variables";
|
||||
|
||||
/*=== Feed articles */
|
||||
.flux {
|
||||
background: variables.$white;
|
||||
|
||||
@include mixins.transition(all, 0.15s, ease-in-out);
|
||||
|
||||
.flux_header {
|
||||
&:hover {
|
||||
background: variables.$grey-lighter;
|
||||
|
||||
&:not(.current):hover .item .title {
|
||||
background: variables.$grey-lighter;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.current {
|
||||
background: variables.$grey-lighter;
|
||||
border-left-color: variables.$main-first;
|
||||
}
|
||||
|
||||
&.not_read:not(.current) {
|
||||
background: variables.$unread-bg;
|
||||
|
||||
&:hover .item .title {
|
||||
background: variables.$unread-bg;
|
||||
}
|
||||
}
|
||||
|
||||
&.not_read {
|
||||
.item .title {
|
||||
a {
|
||||
color: variables.$unread-font-color;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.item.website {
|
||||
a {
|
||||
color: variables.$unread-font-color;
|
||||
}
|
||||
}
|
||||
|
||||
.item .date {
|
||||
color: color.scale(variables.$unread-font-color, $alpha: -50%);
|
||||
}
|
||||
}
|
||||
|
||||
&.favorite {
|
||||
border-left-color: variables.$fav-bg;
|
||||
|
||||
@include mixins.transition(all, 0.15s, ease-in-out);
|
||||
}
|
||||
|
||||
&.favorite:not(.current) {
|
||||
background: variables.$fav-light;
|
||||
|
||||
&:hover .item .title {
|
||||
background: variables.$fav-light;
|
||||
}
|
||||
}
|
||||
|
||||
.website {
|
||||
a {
|
||||
color: variables.$main-font-color;
|
||||
opacity: 0.75;
|
||||
}
|
||||
}
|
||||
|
||||
.flux_header .date,
|
||||
.flux_content .bottom .date {
|
||||
color: color.scale(variables.$main-font-color, $alpha: -50%);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
font-size: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.flux_header {
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
border-top: 1px solid variables.$grey-light;
|
||||
|
||||
.title {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,5 @@
|
||||
/*=== LOGS */
|
||||
/*=========*/
|
||||
.log-item.log-error {
|
||||
background-color: rgba(var(--main-first), 0.2);
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
/*=== LOGS */
|
||||
/*=========*/
|
||||
.log-item.log-error {
|
||||
background-color: rgba(var(--main-first), 0.2);
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
@use "variables";
|
||||
|
||||
/*=== LOGS */
|
||||
/*=========*/
|
||||
.log-item.log-error {
|
||||
background-color: rgba(variables.$main-first, 0.2);
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
/* stylelint-disable property-no-vendor-prefix */
|
||||
|
||||
/* FUNCTIONS */
|
||||
|
||||
@mixin transition($target, $duration, $ease) {
|
||||
transition: $target $duration $ease;
|
||||
}
|
||||
@@ -1,14 +1,10 @@
|
||||
@use "mixins";
|
||||
|
||||
@use "variables";
|
||||
|
||||
/*=== MOBILE */
|
||||
/*===========*/
|
||||
|
||||
@media (max-width: 840px) {
|
||||
.aside {
|
||||
|
||||
@include mixins.transition(all, 0.2s, ease-in-out);
|
||||
transition: all 0.2s ease-in-out;
|
||||
|
||||
&.aside_feed {
|
||||
padding: 0;
|
||||
@@ -23,10 +19,10 @@
|
||||
#overlay .close,
|
||||
.dropdown-menu .toggle_aside,
|
||||
#slider .toggle_aside {
|
||||
background-color: variables.$main-first;
|
||||
background-color: var(--main-first);
|
||||
|
||||
&:hover {
|
||||
background-color: variables.$main-first-alt;
|
||||
background-color: var(--main-first-alt);
|
||||
}
|
||||
|
||||
.icon {
|
||||
@@ -116,15 +112,15 @@
|
||||
}
|
||||
|
||||
.dropdown-target:target {
|
||||
~ .dropdown-toggle::after {
|
||||
background-color: variables.$grey-lighter;
|
||||
border-top: 1px solid variables.$grey-light;
|
||||
border-left: 1px solid variables.$grey-light;
|
||||
& ~ .dropdown-toggle::after {
|
||||
background-color: var(--grey-lighter);
|
||||
border-top: 1px solid var(--grey-light);
|
||||
border-left: 1px solid var(--grey-light);
|
||||
right: 21px;
|
||||
bottom: -14px;
|
||||
}
|
||||
|
||||
~ a.dropdown-toggle {
|
||||
& ~ a.dropdown-toggle {
|
||||
&:not(.btn) {
|
||||
&::after {
|
||||
bottom: -17px;
|
||||
@@ -0,0 +1,168 @@
|
||||
/*=== MOBILE */
|
||||
/*===========*/
|
||||
|
||||
@media (max-width: 840px) {
|
||||
.aside {
|
||||
|
||||
transition: all 0.2s ease-in-out;
|
||||
|
||||
&.aside_feed {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.tree .tree-folder .tree-folder-items .item a {
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.aside .toggle_aside,
|
||||
#overlay .close,
|
||||
.dropdown-menu .toggle_aside,
|
||||
#slider .toggle_aside {
|
||||
background-color: var(--main-first);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--main-first-alt);
|
||||
}
|
||||
|
||||
.icon {
|
||||
filter: grayscale(100%) brightness(2.5);
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
.item {
|
||||
&.search {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.configure {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
#global {
|
||||
height: calc(100% - 8rem);
|
||||
}
|
||||
|
||||
#panel {
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
main.prompt {
|
||||
max-width: 100%;
|
||||
min-width: auto;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.post {
|
||||
padding-right: 1rem;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.nav_menu {
|
||||
.btn {
|
||||
margin: 0;
|
||||
padding: 0.85rem 1.25rem;
|
||||
}
|
||||
|
||||
.stick,
|
||||
.group {
|
||||
margin: 0.5rem 0.5rem;
|
||||
|
||||
.btn {
|
||||
margin: 0;
|
||||
padding: 0.85rem 1.25rem;
|
||||
|
||||
&.read_all {
|
||||
padding: 0.85rem 1.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search {
|
||||
.input {
|
||||
max-width: 97%;
|
||||
width: 90px;
|
||||
|
||||
&:focus {
|
||||
width: 400px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#nav_menu_read_all #nav_menu_read .dropdown-toggle.btn {
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
#stream {
|
||||
.flux {
|
||||
.flux_header {
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-target:target {
|
||||
& ~ .dropdown-toggle::after {
|
||||
background-color: var(--grey-lighter);
|
||||
border-top: 1px solid var(--grey-light);
|
||||
border-right: 1px solid var(--grey-light);
|
||||
left: 21px;
|
||||
bottom: -14px;
|
||||
}
|
||||
|
||||
& ~ a.dropdown-toggle {
|
||||
&:not(.btn) {
|
||||
&::after {
|
||||
bottom: -17px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.transition {
|
||||
text-align: center;
|
||||
padding: 1rem 0;
|
||||
|
||||
.name {
|
||||
padding: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
line-height: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
#nav_entries button {
|
||||
height: 4.5rem;
|
||||
}
|
||||
|
||||
.notification {
|
||||
border-radius: 0;
|
||||
|
||||
a.close {
|
||||
background: transparent;
|
||||
display: block;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
a.close:hover {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
a.close .icon {
|
||||
display: none;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
/*=== READER VIEW */
|
||||
/*================*/
|
||||
#stream.reader {
|
||||
.flux {
|
||||
background: var(--grey-light);
|
||||
color: var(--main-font-color);
|
||||
border: none;
|
||||
|
||||
.flux_content {
|
||||
background-color: var(--white);
|
||||
border: none;
|
||||
|
||||
.author {
|
||||
color: var(--grey-medium-dark);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
/*=== READER VIEW */
|
||||
/*================*/
|
||||
#stream.reader {
|
||||
.flux {
|
||||
background: var(--grey-light);
|
||||
color: var(--main-font-color);
|
||||
border: none;
|
||||
|
||||
.flux_content {
|
||||
background-color: var(--white);
|
||||
border: none;
|
||||
|
||||
.author {
|
||||
color: var(--grey-medium-dark);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,20 +0,0 @@
|
||||
@use "variables";
|
||||
|
||||
/*=== READER VIEW */
|
||||
/*================*/
|
||||
#stream.reader {
|
||||
.flux {
|
||||
background: variables.$grey-light;
|
||||
color: variables.$main-font-color;
|
||||
border: none;
|
||||
|
||||
.flux_content {
|
||||
background-color: variables.$white;
|
||||
border: none;
|
||||
|
||||
.author {
|
||||
color: variables.$grey-medium-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,25 +1,19 @@
|
||||
@use "sass:string";
|
||||
|
||||
@use "mixins";
|
||||
|
||||
@use "variables";
|
||||
|
||||
/*=== Tree */
|
||||
.tree {
|
||||
margin: 10px 0;
|
||||
|
||||
&#sidebar {
|
||||
scrollbar-color: rgba(255,255, 0, 0.1) rgba(0, 0, 0, 0.05);
|
||||
scrollbar-color: string.unquote(variables.$sid-font-color + "33") string.unquote(variables.$sid-font-color + "22");
|
||||
scrollbar-color: color-mix(in srgb, var(--sid-font-color) 20%, transparent) color-mix(in srgb, var(--sid-font-color) 13%, transparent);
|
||||
}
|
||||
|
||||
|
||||
.tree-folder {
|
||||
border-bottom: 1px solid variables.$sid-sep;
|
||||
border-bottom: 1px solid var(--sid-sep);
|
||||
|
||||
.tree-folder-title {
|
||||
padding: 0.75rem 1rem;
|
||||
background: variables.$sid-bg;
|
||||
background: var(--sid-bg);
|
||||
position: relative;
|
||||
font-size: 0.85rem;
|
||||
letter-spacing: 1px;
|
||||
@@ -44,7 +38,7 @@
|
||||
|
||||
.title {
|
||||
background: inherit;
|
||||
color: variables.$sid-font-color;
|
||||
color: var(--sid-font-color);
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
@@ -54,43 +48,43 @@
|
||||
|
||||
&.active {
|
||||
.tree-folder-title {
|
||||
background: variables.$sid-bg;
|
||||
background: var(--sid-bg);
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.tree-folder-items {
|
||||
background: variables.$sid-bg-alt;
|
||||
background: var(--sid-bg-alt);
|
||||
|
||||
.item {
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
|
||||
@include mixins.transition(all, 0.15s, ease-in-out);
|
||||
transition: all 0.15s ease-in-out;
|
||||
|
||||
&.active {
|
||||
background: variables.$sid-active;
|
||||
background: var(--sid-active);
|
||||
|
||||
.dropdown li a {
|
||||
color: variables.$main-font-color;
|
||||
color: var(--main-font-color);
|
||||
|
||||
&:hover {
|
||||
color: variables.$sid-font-color;
|
||||
color: var(--sid-font-color);
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: variables.$sid-active-font;
|
||||
color: var(--sid-active-font);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: variables.$sid-bg-dark;
|
||||
background: var(--sid-bg-dark);
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: variables.$sid-font-color;
|
||||
color: var(--sid-font-color);
|
||||
|
||||
&.dropdown-toggle {
|
||||
.icon {
|
||||
@@ -127,18 +121,18 @@
|
||||
.dropdown + .btn,
|
||||
.dropdown + input,
|
||||
.dropdown + .dropdown > .btn {
|
||||
border-left: 1px solid variables.$grey-medium-light;
|
||||
border-left: 1px solid var(--grey-medium-light);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.aside {
|
||||
background: variables.$sid-bg;
|
||||
background: var(--sid-bg);
|
||||
|
||||
&.aside_feed {
|
||||
padding: 10px 0;
|
||||
text-align: center;
|
||||
background: variables.$sid-bg;
|
||||
background: var(--sid-bg);
|
||||
|
||||
.tree-folder-title:hover button.dropdown-toggle .icon {
|
||||
filter: none;
|
||||
@@ -174,8 +168,8 @@
|
||||
}
|
||||
|
||||
.item {
|
||||
background: variables.$sid-bg;
|
||||
color: variables.$white;
|
||||
background: var(--sid-bg);
|
||||
color: var(--white);
|
||||
min-height: 2.5em;
|
||||
line-height: 2.5em;
|
||||
|
||||
@@ -186,23 +180,23 @@
|
||||
|
||||
a, .as-link {
|
||||
padding: 0 1rem;
|
||||
color: variables.$sid-font-color;
|
||||
color: var(--sid-font-color);
|
||||
|
||||
@include mixins.transition(all, 0.15s, ease-in-out);
|
||||
transition: all 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
a:hover, .as-link:hover {
|
||||
background: variables.$sid-bg-dark;
|
||||
background: var(--sid-bg-dark);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: variables.$main-first;
|
||||
color: variables.$white;
|
||||
background: var(--main-first);
|
||||
color: var(--white);
|
||||
|
||||
a, .as-link {
|
||||
background: variables.$main-first;
|
||||
color: variables.$white;
|
||||
background: var(--main-first);
|
||||
color: var(--white);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
@@ -211,7 +205,7 @@
|
||||
.nav-header {
|
||||
padding: 0 1rem;
|
||||
font-weight: bold;
|
||||
color: variables.$grey-dark;
|
||||
color: var(--grey-dark);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
@@ -229,37 +223,37 @@
|
||||
|
||||
.aside.aside_feed .category .title:not([data-unread="0"])::after {
|
||||
margin: 0.75rem 0 0 0;
|
||||
background-color: variables.$sid-pills;
|
||||
background-color: var(--sid-pills);
|
||||
}
|
||||
|
||||
.aside.aside_feed .feed .item-title:not([data-unread="0"])::after {
|
||||
margin: 0.5em 0 0 0;
|
||||
background-color: variables.$sid-pills;
|
||||
background-color: var(--sid-pills);
|
||||
}
|
||||
|
||||
.feed.item.empty.active {
|
||||
background: variables.$grey-dark;
|
||||
background: var(--grey-dark);
|
||||
}
|
||||
|
||||
.feed.item.error.active {
|
||||
background: variables.$grey-dark;
|
||||
background: var(--grey-dark);
|
||||
}
|
||||
|
||||
.feed.item.empty,
|
||||
.feed.item.empty > a {
|
||||
color: variables.$grey-dark;
|
||||
color: var(--grey-dark);
|
||||
}
|
||||
|
||||
.feed.item.error,
|
||||
.feed.item.error > a {
|
||||
color: variables.$grey-dark;
|
||||
color: var(--grey-dark);
|
||||
}
|
||||
|
||||
.feed.item.empty.active,
|
||||
.feed.item.error.active,
|
||||
.feed.item.empty.active > a,
|
||||
.feed.item.error.active > a {
|
||||
color: variables.$white;
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.aside_feed .tree-folder-items .dropdown-menu::after {
|
||||
@@ -273,5 +267,5 @@
|
||||
}
|
||||
|
||||
.aside_feed .stick #btn-add {
|
||||
border-left-color: variables.$sid-bg;
|
||||
border-left-color: var(--sid-bg);
|
||||
}
|
||||
@@ -0,0 +1,271 @@
|
||||
/*=== Tree */
|
||||
.tree {
|
||||
margin: 10px 0;
|
||||
|
||||
&#sidebar {
|
||||
scrollbar-color: rgba(255,255, 0, 0.1) rgba(0, 0, 0, 0.05);
|
||||
scrollbar-color: color-mix(in srgb, var(--sid-font-color) 20%, transparent) color-mix(in srgb, var(--sid-font-color) 13%, transparent);
|
||||
}
|
||||
|
||||
|
||||
.tree-folder {
|
||||
border-bottom: 1px solid var(--sid-sep);
|
||||
|
||||
.tree-folder-title {
|
||||
padding: 0.75rem 1rem;
|
||||
background: var(--sid-bg);
|
||||
position: relative;
|
||||
font-size: 0.85rem;
|
||||
letter-spacing: 1px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
|
||||
button.dropdown-toggle {
|
||||
margin: -0.75rem -1rem -0.75rem 0.25rem;
|
||||
padding: 0.75rem 1rem 0.75rem 0;
|
||||
|
||||
&:hover {
|
||||
.icon {
|
||||
filter: brightness(2) !important;
|
||||
transition: 0.1s linear;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
background: inherit;
|
||||
color: var(--sid-font-color);
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
.tree-folder-title {
|
||||
background: var(--sid-bg);
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.tree-folder-items {
|
||||
background: var(--sid-bg-alt);
|
||||
|
||||
.item {
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
|
||||
transition: all 0.15s ease-in-out;
|
||||
|
||||
&.active {
|
||||
background: var(--sid-active);
|
||||
|
||||
.dropdown li a {
|
||||
color: var(--main-font-color);
|
||||
|
||||
&:hover {
|
||||
color: var(--sid-font-color);
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--sid-active-font);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--sid-bg-dark);
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--sid-font-color);
|
||||
|
||||
&.dropdown-toggle {
|
||||
.icon {
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*=== Buttons */
|
||||
.stick,
|
||||
.group {
|
||||
input, .btn {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.btn:first-child {
|
||||
border-radius: 0 5px 5px 0;
|
||||
}
|
||||
|
||||
.btn:last-child, input:last-child, .dropdown:last-child > .btn {
|
||||
border-radius: 5px 0 0 5px;
|
||||
}
|
||||
|
||||
.btn + .btn,
|
||||
.btn + input,
|
||||
.btn + .dropdown > .btn,
|
||||
input + .btn,
|
||||
input + input,
|
||||
input + .dropdown > .btn,
|
||||
.dropdown + .btn,
|
||||
.dropdown + input,
|
||||
.dropdown + .dropdown > .btn {
|
||||
border-right: 1px solid var(--grey-medium-light);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.aside {
|
||||
background: var(--sid-bg);
|
||||
|
||||
&.aside_feed {
|
||||
padding: 10px 0;
|
||||
text-align: center;
|
||||
background: var(--sid-bg);
|
||||
|
||||
.tree-folder-title:hover button.dropdown-toggle .icon {
|
||||
filter: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.aside_feed .tree {
|
||||
margin: 10px 0 50px;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
.icon {
|
||||
filter: brightness(2);
|
||||
transition: 0.1s linear;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* Sidebar des pages de configuration */
|
||||
|
||||
|
||||
|
||||
/*=== Navigation */
|
||||
.nav-list {
|
||||
font-size: 1rem;
|
||||
|
||||
.item.nav-header,
|
||||
.item {
|
||||
min-height: 2.5em;
|
||||
line-height: 2.5em;
|
||||
}
|
||||
|
||||
.item {
|
||||
background: var(--sid-bg);
|
||||
color: var(--white);
|
||||
min-height: 2.5em;
|
||||
line-height: 2.5em;
|
||||
|
||||
&.nav-header {
|
||||
min-height: 2.5em;
|
||||
line-height: 2.5em;
|
||||
}
|
||||
|
||||
a, .as-link {
|
||||
padding: 0 1rem;
|
||||
color: var(--sid-font-color);
|
||||
|
||||
transition: all 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
a:hover, .as-link:hover {
|
||||
background: var(--sid-bg-dark);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: var(--main-first);
|
||||
color: var(--white);
|
||||
|
||||
a, .as-link {
|
||||
background: var(--main-first);
|
||||
color: var(--white);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-header {
|
||||
padding: 0 1rem;
|
||||
font-weight: bold;
|
||||
color: var(--grey-dark);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.nav-form {
|
||||
padding: 3px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
/*=== Aside main page (categories) */
|
||||
.aside_feed .tree-folder-title > .title:not([data-unread="0"]) {
|
||||
width: calc(100% - 35px - 35px);
|
||||
}
|
||||
|
||||
.aside.aside_feed .category .title:not([data-unread="0"])::after {
|
||||
margin: 0.75rem 0 0 0;
|
||||
background-color: var(--sid-pills);
|
||||
}
|
||||
|
||||
.aside.aside_feed .feed .item-title:not([data-unread="0"])::after {
|
||||
margin: 0.5em 0 0 0;
|
||||
background-color: var(--sid-pills);
|
||||
}
|
||||
|
||||
.feed.item.empty.active {
|
||||
background: var(--grey-dark);
|
||||
}
|
||||
|
||||
.feed.item.error.active {
|
||||
background: var(--grey-dark);
|
||||
}
|
||||
|
||||
.feed.item.empty,
|
||||
.feed.item.empty > a {
|
||||
color: var(--grey-dark);
|
||||
}
|
||||
|
||||
.feed.item.error,
|
||||
.feed.item.error > a {
|
||||
color: var(--grey-dark);
|
||||
}
|
||||
|
||||
.feed.item.empty.active,
|
||||
.feed.item.error.active,
|
||||
.feed.item.empty.active > a,
|
||||
.feed.item.error.active > a {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.aside_feed .tree-folder-items .dropdown-menu::after {
|
||||
right: 2px;
|
||||
}
|
||||
|
||||
.aside_feed .tree-folder-items .item .dropdown-target:target ~ .dropdown-toggle > .icon,
|
||||
.aside_feed .tree-folder-items .item:hover .dropdown-toggle > .icon,
|
||||
.aside_feed .tree-folder-items .item.active .dropdown-toggle > .icon {
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.aside_feed .stick #btn-add {
|
||||
border-right-color: var(--sid-bg);
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
/*=== STATISTICS */
|
||||
/*===============*/
|
||||
.stat {
|
||||
margin: 10px 0 20px;
|
||||
}
|
||||
|
||||
.stat th,
|
||||
.stat td,
|
||||
.stat tr {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.stat > table td,
|
||||
.stat > table th {
|
||||
border-bottom: 1px solid var(--grey-medium-light);
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
/*=== STATISTICS */
|
||||
/*===============*/
|
||||
.stat {
|
||||
margin: 10px 0 20px;
|
||||
}
|
||||
|
||||
.stat th,
|
||||
.stat td,
|
||||
.stat tr {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.stat > table td,
|
||||
.stat > table th {
|
||||
border-bottom: 1px solid var(--grey-medium-light);
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
/*=== Tables */
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
th, td {
|
||||
border: 1px solid var(--grey-medium-light);
|
||||
}
|
||||
|
||||
th {
|
||||
background: var(--grey-lighter);
|
||||
}
|
||||
|
||||
.config-articleicons td,
|
||||
.config-articleicons th {
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
/*=== Tables */
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
th, td {
|
||||
border: 1px solid var(--grey-medium-light);
|
||||
}
|
||||
|
||||
th {
|
||||
background: var(--grey-lighter);
|
||||
}
|
||||
|
||||
.config-articleicons td,
|
||||
.config-articleicons th {
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -0,0 +1,60 @@
|
||||
:root {
|
||||
/* The main color of the theme*/
|
||||
--main-first: #36c; /* main color*/
|
||||
--main-first-alt: #25c; /* var for hovers*/
|
||||
--main-first-light: #effcfd; /* var light 1*/
|
||||
--main-first-lighter: #f7fdfe; /* var light 2*/
|
||||
--main-first-dark: #35363c; /* var for hovers*/
|
||||
--main-first-darker: #1d1e22; /* var for hovers*/
|
||||
|
||||
/* linked font colors*/
|
||||
--main-font-color: #303136;
|
||||
--light-font-color: #5b6871;
|
||||
--white: #fff; /* white (sometimes we would like to tint it a little)*/
|
||||
|
||||
/* the whole palette of grays, very useful*/
|
||||
/* we will try to tint these grays according to the main color*/
|
||||
--grey-darker: #3b3f4d;
|
||||
--grey-dark: #5b6871;
|
||||
--grey-medium-dark: #a6a7ae;
|
||||
--grey-medium: #c5ced3;
|
||||
--grey-medium-light: #d5d8db;
|
||||
--grey-light: #eff0f2;
|
||||
--grey-lighter: #f9fafb;
|
||||
|
||||
--unread-font-color: $main-first;
|
||||
--unread-bg: #f2f6f8;
|
||||
--unread-bg-light: #fdfdfe;
|
||||
|
||||
/* alert colors (red, yellow, green)*/
|
||||
--alert-bg: #f5633e; /* the base*/
|
||||
--alert-light: #fde0d8; /* +light*/
|
||||
--alert-text: #73341f; /* +dark*/
|
||||
|
||||
--code-text: #e41212;
|
||||
--code-bg: #fde3e3;
|
||||
|
||||
--warning-bg: #f4f762;
|
||||
--warning-light: #fdfde0;
|
||||
--warning-text: #73762f;
|
||||
|
||||
--success-bg: #10f587;
|
||||
--success-light: #cffde7;
|
||||
--success-text: #0c7540;
|
||||
|
||||
/* favourites*/
|
||||
--fav-bg: #ffc300;
|
||||
--fav-light: #fff6da;
|
||||
|
||||
/* the sidebar color, useful if you want a theme that would have a dark sidebar, e.g.*/
|
||||
/* stylelint-disable-next-line color-hex-length*/
|
||||
--sid-font-color: #ffffff; /* the background color of the left bar and the header*/
|
||||
--sid-bg: #303136; /* the general background of the left bar, and of the header*/
|
||||
--sid-bg-alt: #26272a; /* background inside groups*/
|
||||
--sid-bg-dark: #17181a; /* the hover*/
|
||||
--sid-sep: #3f3f3f; /* the separators*/
|
||||
--sid-active: $main-first; /* the active color*/
|
||||
/* stylelint-disable-next-line color-hex-length*/
|
||||
--sid-active-font: #ffffff; /* the active color*/
|
||||
--sid-pills: rgba(0,0,0, 0.25); /* capsules*/
|
||||
}
|
||||
@@ -0,0 +1,60 @@
|
||||
:root {
|
||||
/* The main color of the theme*/
|
||||
--main-first: #36c; /* main color*/
|
||||
--main-first-alt: #25c; /* var for hovers*/
|
||||
--main-first-light: #effcfd; /* var light 1*/
|
||||
--main-first-lighter: #f7fdfe; /* var light 2*/
|
||||
--main-first-dark: #35363c; /* var for hovers*/
|
||||
--main-first-darker: #1d1e22; /* var for hovers*/
|
||||
|
||||
/* linked font colors*/
|
||||
--main-font-color: #303136;
|
||||
--light-font-color: #5b6871;
|
||||
--white: #fff; /* white (sometimes we would like to tint it a little)*/
|
||||
|
||||
/* the whole palette of grays, very useful*/
|
||||
/* we will try to tint these grays according to the main color*/
|
||||
--grey-darker: #3b3f4d;
|
||||
--grey-dark: #5b6871;
|
||||
--grey-medium-dark: #a6a7ae;
|
||||
--grey-medium: #c5ced3;
|
||||
--grey-medium-light: #d5d8db;
|
||||
--grey-light: #eff0f2;
|
||||
--grey-lighter: #f9fafb;
|
||||
|
||||
--unread-font-color: $main-first;
|
||||
--unread-bg: #f2f6f8;
|
||||
--unread-bg-light: #fdfdfe;
|
||||
|
||||
/* alert colors (red, yellow, green)*/
|
||||
--alert-bg: #f5633e; /* the base*/
|
||||
--alert-light: #fde0d8; /* +light*/
|
||||
--alert-text: #73341f; /* +dark*/
|
||||
|
||||
--code-text: #e41212;
|
||||
--code-bg: #fde3e3;
|
||||
|
||||
--warning-bg: #f4f762;
|
||||
--warning-light: #fdfde0;
|
||||
--warning-text: #73762f;
|
||||
|
||||
--success-bg: #10f587;
|
||||
--success-light: #cffde7;
|
||||
--success-text: #0c7540;
|
||||
|
||||
/* favourites*/
|
||||
--fav-bg: #ffc300;
|
||||
--fav-light: #fff6da;
|
||||
|
||||
/* the sidebar color, useful if you want a theme that would have a dark sidebar, e.g.*/
|
||||
/* stylelint-disable-next-line color-hex-length*/
|
||||
--sid-font-color: #ffffff; /* the background color of the left bar and the header*/
|
||||
--sid-bg: #303136; /* the general background of the left bar, and of the header*/
|
||||
--sid-bg-alt: #26272a; /* background inside groups*/
|
||||
--sid-bg-dark: #17181a; /* the hover*/
|
||||
--sid-sep: #3f3f3f; /* the separators*/
|
||||
--sid-active: $main-first; /* the active color*/
|
||||
/* stylelint-disable-next-line color-hex-length*/
|
||||
--sid-active-font: #ffffff; /* the active color*/
|
||||
--sid-pills: rgba(0,0,0, 0.25); /* capsules*/
|
||||
}
|
||||
@@ -1,58 +0,0 @@
|
||||
// The main color of the theme
|
||||
$main-first: #36c; // main color
|
||||
$main-first-alt: #25c; // var for hovers
|
||||
$main-first-light: #effcfd; // var light 1
|
||||
$main-first-lighter: #f7fdfe; // var light 2
|
||||
$main-first-dark: #35363c; // var for hovers
|
||||
$main-first-darker: #1d1e22; // var for hovers
|
||||
|
||||
// linked font colors
|
||||
$main-font-color: #303136;
|
||||
$light-font-color: #5b6871;
|
||||
$white: #fff; // white (sometimes we would like to tint it a little)
|
||||
|
||||
// the whole palette of grays, very useful
|
||||
// we will try to tint these grays according to the main color
|
||||
$grey-darker: #3b3f4d;
|
||||
$grey-dark: #5b6871;
|
||||
$grey-medium-dark: #a6a7ae;
|
||||
$grey-medium: #c5ced3;
|
||||
$grey-medium-light: #d5d8db;
|
||||
$grey-light: #eff0f2;
|
||||
$grey-lighter: #f9fafb;
|
||||
|
||||
$unread-font-color: $main-first;
|
||||
$unread-bg: #f2f6f8;
|
||||
$unread-bg-light: #fdfdfe;
|
||||
|
||||
// alert colors (red, yellow, green)
|
||||
$alert-bg: #f5633e; // the base
|
||||
$alert-light: #fde0d8; // +light
|
||||
$alert-text: #73341f; // +dark
|
||||
|
||||
$code-text: #e41212;
|
||||
$code-bg: #fde3e3;
|
||||
|
||||
$warning-bg: #f4f762;
|
||||
$warning-light: #fdfde0;
|
||||
$warning-text: #73762f;
|
||||
|
||||
$success-bg: #10f587;
|
||||
$success-light: #cffde7;
|
||||
$success-text: #0c7540;
|
||||
|
||||
// favourites
|
||||
$fav-bg: #ffc300;
|
||||
$fav-light: #fff6da;
|
||||
|
||||
// the sidebar color, useful if you want a theme that would have a dark sidebar, e.g.
|
||||
// stylelint-disable-next-line color-hex-length
|
||||
$sid-font-color: #ffffff; // the background color of the left bar and the header
|
||||
$sid-bg: #303136; // the general background of the left bar, and of the header
|
||||
$sid-bg-alt: #26272a; // background inside groups
|
||||
$sid-bg-dark: #17181a; // the hover
|
||||
$sid-sep: #3f3f3f; // the separators
|
||||
$sid-active: $main-first; // the active color
|
||||
// stylelint-disable-next-line color-hex-length
|
||||
$sid-active-font: #ffffff; // the active color
|
||||
$sid-pills: rgba(0,0,0, 0.25); // capsules
|
||||
+20
-1326
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
+21
-1325
File diff suppressed because it is too large
Load Diff
@@ -1,54 +0,0 @@
|
||||
@use "fonts";
|
||||
|
||||
@use "mixins";
|
||||
|
||||
@use "variables";
|
||||
|
||||
@use "forms";
|
||||
|
||||
@use "tables";
|
||||
|
||||
@use "components";
|
||||
|
||||
@use "divers";
|
||||
|
||||
@use "sidebar";
|
||||
|
||||
@use "layout";
|
||||
|
||||
@use "list-view";
|
||||
|
||||
@use "global-view";
|
||||
|
||||
@use "reader-view";
|
||||
|
||||
@use "configuration";
|
||||
|
||||
@use "logs";
|
||||
|
||||
@use "stats";
|
||||
|
||||
@use "mobile";
|
||||
|
||||
@charset "UTF-8";
|
||||
|
||||
/*=== GENERAL */
|
||||
/*============*/
|
||||
html, body {
|
||||
background: variables.$grey-light;
|
||||
color: variables.$main-font-color;
|
||||
font-family: "lato", "Helvetica", "Arial", sans-serif;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
body.formLogin,
|
||||
body.register {
|
||||
background: variables.$sid-bg;
|
||||
}
|
||||
|
||||
/*=== Links */
|
||||
a, button.as-link {
|
||||
outline: none;
|
||||
color: variables.$main-first;
|
||||
}
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
{
|
||||
"name": "Mapco",
|
||||
"author": "Thomas Guesnon",
|
||||
"description": "Thème pour FreshRSS",
|
||||
"version": 0.1,
|
||||
"files": ["_frss.css", "mapco.css"],
|
||||
"theme-color": "#303136"
|
||||
"name": "Mapco",
|
||||
"author": "Thomas Guesnon",
|
||||
"description": "Thème pour FreshRSS",
|
||||
"version": 0.2,
|
||||
"files": ["_frss.css", "mapco.css"],
|
||||
"theme-color": "#303136"
|
||||
}
|
||||
|
||||
@@ -1,2 +0,0 @@
|
||||
#!/bin/sh
|
||||
sass --watch mapco.scss:mapco.css
|
||||
@@ -1,8 +1,8 @@
|
||||
{
|
||||
"name": "Nord theme",
|
||||
"author": "joelchrono12",
|
||||
"description": "A simple theme based on Nord’s color scheme",
|
||||
"version": 0.1,
|
||||
"files": ["_frss.css","nord.css"],
|
||||
"theme-color": "#2e3440"
|
||||
"name": "Nord theme",
|
||||
"author": "joelchrono12",
|
||||
"description": "A simple theme based on Nord’s color scheme",
|
||||
"version": 0.1,
|
||||
"files": ["_frss.css","nord.css"],
|
||||
"theme-color": "#2e3440"
|
||||
}
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
{
|
||||
"name": "Origine-compact",
|
||||
"author": "Kevin Papst",
|
||||
"description": "A theme that tries to use the screen size more efficiently, based on Origine",
|
||||
"version": 0.1,
|
||||
"files": ["_frss.css", "../Origine/origine.css", "origine-compact.css"],
|
||||
"theme-color": {"dark": "#1f1f1f", "light": "#f0f0f0"}
|
||||
"name": "Origine-compact",
|
||||
"author": "Kevin Papst",
|
||||
"description": "A theme that tries to use the screen size more efficiently, based on Origine",
|
||||
"version": 0.1,
|
||||
"files": ["_frss.css", "../Origine/origine.css", "origine-compact.css"],
|
||||
"theme-color": {"dark": "#1f1f1f", "light": "#f0f0f0"}
|
||||
}
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
{
|
||||
"name": "Origine",
|
||||
"author": "Marien Fressinaud",
|
||||
"description": "Le thème par défaut pour FreshRSS",
|
||||
"version": 0.2,
|
||||
"files": ["_frss.css", "origine.css"],
|
||||
"theme-color": {"dark": "#1f1f1f", "light": "#f0f0f0"}
|
||||
"name": "Origine",
|
||||
"author": "Marien Fressinaud",
|
||||
"description": "Le thème par défaut pour FreshRSS",
|
||||
"version": 0.2,
|
||||
"files": ["_frss.css", "origine.css"],
|
||||
"theme-color": {"dark": "#1f1f1f", "light": "#f0f0f0"}
|
||||
}
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
{
|
||||
"name": "Pafat",
|
||||
"author": "Plopoyop",
|
||||
"description": "Un thème pour FreshRSS",
|
||||
"version": 0.2,
|
||||
"files": ["_frss.css", "pafat.css"],
|
||||
"theme-color": "#f4f4f4"
|
||||
"name": "Pafat",
|
||||
"author": "Plopoyop",
|
||||
"description": "Un thème pour FreshRSS",
|
||||
"version": 0.2,
|
||||
"files": ["_frss.css", "pafat.css"],
|
||||
"theme-color": "#f4f4f4"
|
||||
}
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
{
|
||||
"name": "Swage",
|
||||
"author": "Patrick Crandol",
|
||||
"description": "A Fresh take on the interface, inspired by the Flat Theme.",
|
||||
"version": 1.0,
|
||||
"files": ["_frss.css", "swage.css"],
|
||||
"theme-color": "#22303d"
|
||||
"name": "Swage",
|
||||
"author": "Patrick Crandol",
|
||||
"description": "A Fresh take on the interface, inspired by the Flat Theme.",
|
||||
"version": 1.0,
|
||||
"files": ["_frss.css", "swage.css"],
|
||||
"theme-color": "#22303d"
|
||||
}
|
||||
|
||||
@@ -66,6 +66,7 @@
|
||||
}
|
||||
|
||||
/* Compatibility: CSS Color Module Level 4, Relative Color */
|
||||
|
||||
@supports not (color: color(from white hsl h s calc(l - 10%))) {
|
||||
:root {
|
||||
--color-text-light-darker: #988484;
|
||||
@@ -911,15 +912,15 @@ main.post .drop-section li.item.feed a:hover .icon {
|
||||
}
|
||||
|
||||
#new-article {
|
||||
background-color: var(--color-background-nav);
|
||||
width: var(--width-aside);
|
||||
font-size: 1em;
|
||||
background-color: var(--color-background-nav);
|
||||
text-align: center;
|
||||
position: fixed;
|
||||
bottom: 48px;
|
||||
z-index: 900;
|
||||
left: 0;
|
||||
line-height: 1.5;
|
||||
width: var(--width-aside);
|
||||
|
||||
> a {
|
||||
padding: 1rem;
|
||||
@@ -987,11 +988,11 @@ main.post .drop-section li.item.feed a:hover .icon {
|
||||
background-color: var(--color-background-light);
|
||||
|
||||
&::after {
|
||||
display: block;
|
||||
clear: both;
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
width: 90%;
|
||||
border-top: 1px solid var(--color-border-light-darker);
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.flux_header:hover,
|
||||
@@ -1046,11 +1047,12 @@ main.post .drop-section li.item.feed a:hover .icon {
|
||||
|
||||
.notification {
|
||||
padding: 10px 0;
|
||||
background-color: var(--color-background-light-darker);
|
||||
width: var(--width-aside);
|
||||
height: auto;
|
||||
color: var(--color-text-light-darker);
|
||||
font-size: 1em;
|
||||
border: none;
|
||||
background-color: var(--color-background-light-darker);
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
vertical-align: middle;
|
||||
@@ -1058,7 +1060,6 @@ main.post .drop-section li.item.feed a:hover .icon {
|
||||
bottom: 48px;
|
||||
left: 0;
|
||||
top: auto;
|
||||
width: var(--width-aside);
|
||||
|
||||
&.good,
|
||||
&.bad {
|
||||
|
||||
@@ -66,6 +66,7 @@
|
||||
}
|
||||
|
||||
/* Compatibility: CSS Color Module Level 4, Relative Color */
|
||||
|
||||
@supports not (color: color(from white hsl h s calc(l - 10%))) {
|
||||
:root {
|
||||
--color-text-light-darker: #988484;
|
||||
@@ -911,15 +912,15 @@ main.post .drop-section li.item.feed a:hover .icon {
|
||||
}
|
||||
|
||||
#new-article {
|
||||
background-color: var(--color-background-nav);
|
||||
width: var(--width-aside);
|
||||
font-size: 1em;
|
||||
background-color: var(--color-background-nav);
|
||||
text-align: center;
|
||||
position: fixed;
|
||||
bottom: 48px;
|
||||
z-index: 900;
|
||||
right: 0;
|
||||
line-height: 1.5;
|
||||
width: var(--width-aside);
|
||||
|
||||
> a {
|
||||
padding: 1rem;
|
||||
@@ -987,11 +988,11 @@ main.post .drop-section li.item.feed a:hover .icon {
|
||||
background-color: var(--color-background-light);
|
||||
|
||||
&::after {
|
||||
display: block;
|
||||
clear: both;
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
width: 90%;
|
||||
border-top: 1px solid var(--color-border-light-darker);
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.flux_header:hover,
|
||||
@@ -1046,11 +1047,12 @@ main.post .drop-section li.item.feed a:hover .icon {
|
||||
|
||||
.notification {
|
||||
padding: 10px 0;
|
||||
background-color: var(--color-background-light-darker);
|
||||
width: var(--width-aside);
|
||||
height: auto;
|
||||
color: var(--color-text-light-darker);
|
||||
font-size: 1em;
|
||||
border: none;
|
||||
background-color: var(--color-background-light-darker);
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
vertical-align: middle;
|
||||
@@ -1058,7 +1060,6 @@ main.post .drop-section li.item.feed a:hover .icon {
|
||||
bottom: 48px;
|
||||
right: 0;
|
||||
top: auto;
|
||||
width: var(--width-aside);
|
||||
|
||||
&.good,
|
||||
&.bad {
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user