Clean CSS with scss

This commit is contained in:
Le Libre Au Quotidien 2020-10-25 18:38:14 +01:00
parent bee5daee32
commit 862c752c9a
2 changed files with 236 additions and 175 deletions

235
public/css/app.css vendored
View File

@ -9199,11 +9199,28 @@ input[type=range]::-ms-thumb {
.fa,
.fas,
.licence,
.sb-btns > a[href*=agenda]:before,
.sb-btns > a[href*=calendar]:before,
.sb-btns > a[href*=events]:before,
.sb-btns > a[href*="youtube.com"]:before,
.sb-btns > a[href*=peertube]:before,
.sb-btns > a[href*="tube.p2p.legal"]:before,
.sb-btns > a[href*=chat]:before,
.sb-btns > a[href*=forum]:before,
.sb-btns > a[href*="demo.cesium.app"]:before,
.sb-btns > a[href*="helloasso.com"]:before,
.sb-btns > a[href*="opencollective.com"]:before,
.sb-btns > a[href*="liberapay.com"]:before,
.donate:before,
.licence:before,
.far,
.fal,
.fad,
.fab {
.fab,
.sb-btns > a[href*="twitter.com"]:before,
.sb-btns > a[href*=mastodon]:before,
.sb-btns > a[href*="facebook.com"]:before,
.sb-btns > a[href*="framasphere.org"]:before {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
@ -9213,7 +9230,24 @@ input[type=range]::-ms-thumb {
line-height: 1;
}
.licence {
.sb-btns > a[href*=agenda]:before,
.sb-btns > a[href*=calendar]:before,
.sb-btns > a[href*=events]:before,
.sb-btns > a[href*="youtube.com"]:before,
.sb-btns > a[href*=peertube]:before,
.sb-btns > a[href*="tube.p2p.legal"]:before,
.sb-btns > a[href*="twitter.com"]:before,
.sb-btns > a[href*=mastodon]:before,
.sb-btns > a[href*="facebook.com"]:before,
.sb-btns > a[href*="framasphere.org"]:before,
.sb-btns > a[href*=chat]:before,
.sb-btns > a[href*=forum]:before,
.sb-btns > a[href*="demo.cesium.app"]:before,
.sb-btns > a[href*="helloasso.com"]:before,
.sb-btns > a[href*="opencollective.com"]:before,
.sb-btns > a[href*="liberapay.com"]:before,
.donate:before,
.licence:before {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: inline-block;
@ -9316,19 +9350,53 @@ input[type=range]::-ms-thumb {
.fa.fa-pull-left,
.fas.fa-pull-left,
.fa-pull-left.licence,
.sb-btns > a.fa-pull-left[href*=agenda]:before,
.sb-btns > a.fa-pull-left[href*=calendar]:before,
.sb-btns > a.fa-pull-left[href*=events]:before,
.sb-btns > a.fa-pull-left[href*="youtube.com"]:before,
.sb-btns > a.fa-pull-left[href*=peertube]:before,
.sb-btns > a.fa-pull-left[href*="tube.p2p.legal"]:before,
.sb-btns > a.fa-pull-left[href*=chat]:before,
.sb-btns > a.fa-pull-left[href*=forum]:before,
.sb-btns > a.fa-pull-left[href*="demo.cesium.app"]:before,
.sb-btns > a.fa-pull-left[href*="helloasso.com"]:before,
.sb-btns > a.fa-pull-left[href*="opencollective.com"]:before,
.sb-btns > a.fa-pull-left[href*="liberapay.com"]:before,
.fa-pull-left.donate:before,
.fa-pull-left.licence:before,
.far.fa-pull-left,
.fal.fa-pull-left,
.fab.fa-pull-left {
.fab.fa-pull-left,
.sb-btns > a.fa-pull-left[href*="twitter.com"]:before,
.sb-btns > a.fa-pull-left[href*=mastodon]:before,
.sb-btns > a.fa-pull-left[href*="facebook.com"]:before,
.sb-btns > a.fa-pull-left[href*="framasphere.org"]:before {
margin-right: 0.3em;
}
.fa.fa-pull-right,
.fas.fa-pull-right,
.fa-pull-right.licence,
.sb-btns > a.fa-pull-right[href*=agenda]:before,
.sb-btns > a.fa-pull-right[href*=calendar]:before,
.sb-btns > a.fa-pull-right[href*=events]:before,
.sb-btns > a.fa-pull-right[href*="youtube.com"]:before,
.sb-btns > a.fa-pull-right[href*=peertube]:before,
.sb-btns > a.fa-pull-right[href*="tube.p2p.legal"]:before,
.sb-btns > a.fa-pull-right[href*=chat]:before,
.sb-btns > a.fa-pull-right[href*=forum]:before,
.sb-btns > a.fa-pull-right[href*="demo.cesium.app"]:before,
.sb-btns > a.fa-pull-right[href*="helloasso.com"]:before,
.sb-btns > a.fa-pull-right[href*="opencollective.com"]:before,
.sb-btns > a.fa-pull-right[href*="liberapay.com"]:before,
.fa-pull-right.donate:before,
.fa-pull-right.licence:before,
.far.fa-pull-right,
.fal.fa-pull-right,
.fab.fa-pull-right {
.fab.fa-pull-right,
.sb-btns > a.fa-pull-right[href*="twitter.com"]:before,
.sb-btns > a.fa-pull-right[href*=mastodon]:before,
.sb-btns > a.fa-pull-right[href*="facebook.com"]:before,
.sb-btns > a.fa-pull-right[href*="framasphere.org"]:before {
margin-left: 0.3em;
}
@ -15307,7 +15375,20 @@ readers do not read off random characters that represent icons */
.fa,
.fas,
.licence {
.sb-btns > a[href*=agenda]:before,
.sb-btns > a[href*=calendar]:before,
.sb-btns > a[href*=events]:before,
.sb-btns > a[href*="youtube.com"]:before,
.sb-btns > a[href*=peertube]:before,
.sb-btns > a[href*="tube.p2p.legal"]:before,
.sb-btns > a[href*=chat]:before,
.sb-btns > a[href*=forum]:before,
.sb-btns > a[href*="demo.cesium.app"]:before,
.sb-btns > a[href*="helloasso.com"]:before,
.sb-btns > a[href*="opencollective.com"]:before,
.sb-btns > a[href*="liberapay.com"]:before,
.donate:before,
.licence:before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
}
@ -15326,7 +15407,11 @@ readers do not read off random characters that represent icons */
src: url(/fonts/fa-brands-400.eot?e2ca6541bff3a3e9f4799ee327b28c58) format("embedded-opentype"), url(/fonts/fa-brands-400.woff2?f075c50f89795e4cdb4d45b51f1a6800) format("woff2"), url(/fonts/fa-brands-400.woff?ad527cc5ec23d6da66e8a1d6772ea6d3) format("woff"), url(/fonts/fa-brands-400.ttf?8300bd7f30e0a313c1d772b49d96cb8e) format("truetype"), url(/fonts/fa-brands-400.svg?2f12242375edd68e9013ecfb59c672e9) format("svg");
}
.fab {
.fab,
.sb-btns > a[href*="twitter.com"]:before,
.sb-btns > a[href*=mastodon]:before,
.sb-btns > a[href*="facebook.com"]:before,
.sb-btns > a[href*="framasphere.org"]:before {
font-family: "Font Awesome 5 Brands";
font-weight: 400;
}
@ -15342,127 +15427,93 @@ readers do not read off random characters that represent icons */
/* BUTTONS ICONS (before) */
.donate:before,
a[href*="demo.cesium.app"]:before,
a[href*="helloasso.com"]:before,
a[href*="opencollective.com"]:before,
a[href*="liberapay.com"]:before {
.donate:before {
padding-right: 5px;
content: "\F4B9";
}
a[href*=chat],
a[href*=forum] {
font-family: "Font Awesome 5 Free";
font-weight: 900;
.sb-btns > a[href*="demo.cesium.app"]:before,
.sb-btns > a[href*="helloasso.com"]:before,
.sb-btns > a[href*="opencollective.com"]:before,
.sb-btns > a[href*="liberapay.com"]:before {
padding-right: 5px;
content: "\F4B9";
}
.sb-btns > a[href*="demo.cesium.app"]:after,
.sb-btns > a[href*="helloasso.com"]:after,
.sb-btns > a[href*="opencollective.com"]:after,
.sb-btns > a[href*="liberapay.com"]:after {
content: "Donner";
}
.sb-btns > a[href*=chat]:before,
.sb-btns > a[href*=forum]:before {
content: "\F086";
padding-right: 5px;
}
a[href*="framasphere.org"] {
font-family: "Font Awesome 5 Brands";
font-weight: 900;
.sb-btns > a[href*="framasphere.org"]:before {
content: "\F791";
padding-right: 5px;
}
a[href*="facebook.com"] {
font-family: "Font Awesome 5 Brands";
font-weight: 900;
.sb-btns > a[href*="facebook.com"]:before {
content: "\F09A";
padding-right: 5px;
}
a[href*=mastodon] {
font-family: "Font Awesome 5 Brands";
font-weight: 900;
.sb-btns > a[href*="facebook.com"]:after {
content: "Facebook";
}
.sb-btns > a[href*=mastodon]:before {
content: "\F4F6";
padding-right: 5px;
}
a[href*="twitter.com"] {
font-family: "Font Awesome 5 Brands";
font-weight: 900;
.sb-btns > a[href*=mastodon]:after {
content: "Mastodon";
}
.sb-btns > a[href*="twitter.com"]:before {
content: "\F099";
padding-right: 5px;
}
a[href*="youtube.com"],
a[href*=peertube],
a[href*="tube.p2p.legal"] {
font-family: "Font Awesome 5 Free";
font-weight: 900;
.sb-btns > a[href*="twitter.com"]:after {
content: "Twitter";
}
.sb-btns > a[href*="youtube.com"]:before,
.sb-btns > a[href*=peertube]:before,
.sb-btns > a[href*="tube.p2p.legal"]:before {
content: "\F04B";
padding-right: 5px;
}
a[href*=agenda],
a[href*=calendar],
a[href*=events] {
font-family: "Font Awesome 5 Free";
font-weight: 900;
.sb-btns > a[href*=agenda]:before,
.sb-btns > a[href*=calendar]:before,
.sb-btns > a[href*=events]:before {
content: "\F073";
padding-right: 5px;
}
/* BUTTONS TEXTS (after) */
a[href*="facebook.com"]::after {
content: "Facebook";
}
a[href*=agenda]::after,
a[href*=calendar]::after,
a[href*=events]::after {
.sb-btns > a[href*=agenda]:after,
.sb-btns > a[href*=calendar]:after,
.sb-btns > a[href*=events]:after {
content: "Agenda";
}
a[href*="framasphere.org"]::after {
content: "diaspora";
}
a[href*=forum]::after {
.sb-btns > a[href*=agenda] a[href*=forum]::after,
.sb-btns > a[href*=calendar] a[href*=forum]::after,
.sb-btns > a[href*=events] a[href*=forum]::after {
content: "Forum";
}
a[href*=chat]::after {
.sb-btns > a[href*=agenda] a[href*=chat]::after,
.sb-btns > a[href*=calendar] a[href*=chat]::after,
.sb-btns > a[href*=events] a[href*=chat]::after {
content: "Chat";
}
a[href*="demo.cesium.app"]::after,
a[href*="helloasso.com"]::after,
a[href*="opencollective.com"]::after,
a[href*="liberapay.com"]::after {
content: "Donner";
}
a[href*=mastodon]::after {
content: "Mastodon";
}
a[href*="twitter.com"]::after {
content: "Twitter";
}
a[href*=peertube]::after {
content: "Peertube";
}
a[href*="youtube.com"]::after {
content: "Youtube";
}
/* DEFINE DEFAULT USE FONT */
@media (prefers-color-scheme: dark) {
.day.dark-scheme {
background: #333;
color: white;
}
.night.dark-scheme {
background: black;
color: #ddd;
}
}

View File

@ -9,105 +9,115 @@
@import "solid.scss";
@import "brands.scss";
$icons-padding: 5px;
.buttons::after{
content:"Aller";
}
.licence{
@extend %fa-icon;
@extend .fas;
&:before{
@extend %fa-icon;
@extend .fas;
content: fa-content($fa-var-balance-scale);
padding-right: $icons-padding;
}
}
/* BUTTONS ICONS (before) */
.donate,a[href*="demo.cesium.app"],a[href*="helloasso.com"],a[href*="opencollective.com"],a[href*="liberapay.com"]{
.donate{
&:before{
@extend %fa-icon;
@extend .fas;
padding-right:5px;
content: fa-content($fa-var-donate);
}
}
.sb-btns > {
a[href*="demo.cesium.app"],a[href*="helloasso.com"],a[href*="opencollective.com"],a[href*="liberapay.com"]{
&:before{
@extend %fa-icon;
@extend .fas;
padding-right:$icons-padding;
content: fa-content($fa-var-donate);
}
&:after{
content:"Donner";
}
}
a[href*="chat"],a[href*="forum"]{
&:before{
@extend %fa-icon;
@extend .fas;
content: fa-content($fa-var-comments);
padding-right: $icons-padding;
}
}
a[href*="framasphere.org"]{
&:before{
@extend %fa-icon;
@extend .fab;
content: fa-content($fa-var-diaspora);
padding-right: $icons-padding;
}
}
a[href*="facebook.com"]{
&:before{
@extend %fa-icon;
@extend .fab;
content: fa-content($fa-var-facebook);
padding-right: $icons-padding;
}
&:after{
content: "Facebook";
}
}
a[href*="mastodon"]{
&:before{
@extend %fa-icon;
@extend .fab;
content: fa-content($fa-var-mastodon);
padding-right: $icons-padding;
}
&:after{
content: "Mastodon";
}
}
a[href*="twitter.com"]{
&:before{
@extend %fa-icon;
@extend .fab;
content: fa-content($fa-var-twitter);
padding-right: $icons-padding;
}
&:after{
content: "Twitter";
}
}
a[href*="youtube.com"],a[href*="peertube"],a[href*="tube.p2p.legal"]{
&:before{
@extend %fa-icon;
@extend .fas;
content: fa-content($fa-var-play);
padding-right: $icons-padding;
}
}
a[href*="agenda"],a[href*="calendar"],a[href*="events"]{
&:before{
@extend %fa-icon;
@extend .fas;
content: fa-content($fa-var-calendar-alt);
padding-right: $icons-padding;
}
&:after{
content: "Agenda";
}
a[href*="forum"]::after{
content:"Forum";
}
a[href*="chat"]::after{
content:"Chat";
}
}
a[href*="chat"],a[href*="forum"]{
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f086";
padding-right:5px;
}
a[href*="framasphere.org"]{
font-family: "Font Awesome 5 Brands";
font-weight: 900;
content: "\f791";
padding-right:5px;
}
a[href*="facebook.com"]{
font-family: "Font Awesome 5 Brands";
font-weight: 900;
content: "\f09a";
padding-right:5px;
}
a[href*="mastodon"]{
font-family: "Font Awesome 5 Brands";
font-weight: 900;
content: "\f4f6";
padding-right:5px;
}
a[href*="twitter.com"]{
font-family: "Font Awesome 5 Brands";
font-weight: 900;
content: "\f099";
padding-right:5px;
}
a[href*="youtube.com"],a[href*="peertube"],a[href*="tube.p2p.legal"]{
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f04b";
padding-right:5px;
}
a[href*="agenda"],a[href*="calendar"],a[href*="events"]{
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f073";
padding-right:5px;
}
/* BUTTONS TEXTS (after) */
a[href*="facebook.com"]::after{
content:"Facebook";
}
a[href*="agenda"]::after,a[href*="calendar"]::after,a[href*="events"]::after{
content:"Agenda";
}
a[href*="framasphere.org"]::after{
content:"diaspora";
}
a[href*="forum"]::after{
content:"Forum";
}
a[href*="chat"]::after{
content:"Chat";
}
a[href*="demo.cesium.app"]::after,a[href*="helloasso.com"]::after,a[href*="opencollective.com"]::after,a[href*="liberapay.com"]::after{
content:"Donner";
}
a[href*="mastodon"]::after{
content:"Mastodon";
}
a[href*="twitter.com"]::after{
content:"Twitter";
}
a[href*="peertube"]::after{
content:"Peertube";
}
a[href*="youtube.com"]::after{
content:"Youtube";
}
/* DEFINE DEFAULT USE FONT */
@media (prefers-color-scheme: dark) {
.day.dark-scheme { background: #333; color: white; }
.night.dark-scheme { background: black; color: #ddd; }
}