merge scroll-to-top colors

This commit is contained in:
Vano Devium
2024-08-24 11:08:04 +03:00
parent c568b8ff0e
commit 819cebcb12
8 changed files with 123 additions and 119 deletions

View File

@ -1,48 +1,48 @@
//Admonition colors //Admonition colors
$admonition-background: ( $admonition-background: (
'note': rgba(68, 138, 255, 0.1), "note": rgba(68, 138, 255, 0.1),
'info': rgba(0, 184, 212, 0.1), "info": rgba(0, 184, 212, 0.1),
'tip': rgba(0, 191, 165, 0.1), "tip": rgba(0, 191, 165, 0.1),
'success': rgba(0, 200, 83, 0.1), "success": rgba(0, 200, 83, 0.1),
'warning': rgba(255, 145, 0, 0.1), "warning": rgba(255, 145, 0, 0.1),
'failure': rgba(255, 82, 82, 0.1), "failure": rgba(255, 82, 82, 0.1),
'danger': rgba(255, 23, 68, 0.1), "danger": rgba(255, 23, 68, 0.1),
'bug': rgba(245, 0, 87, 0.1), "bug": rgba(245, 0, 87, 0.1),
) !default; ) !default;
$admonition-color: ( $admonition-color: (
'note': #448aff, "note": #448aff,
'info': #00b8d4, "info": #00b8d4,
'tip': #00bfa5, "tip": #00bfa5,
'success': #00c853, "success": #00c853,
'warning': #ff9100, "warning": #ff9100,
'failure': #ff5252, "failure": #ff5252,
'danger': #ff1744, "danger": #ff1744,
'bug': #f50057, "bug": #f50057,
) !default; ) !default;
// Admonition styling // Admonition styling
.admonition{ .admonition {
position: relative; position: relative;
margin: 1rem 0 1.5rem 0; margin: 1rem 0 1.5rem 0;
border-left: .25rem solid map-get($admonition-color, 'note'); border-left: 0.25rem solid map-get($admonition-color, "note");
box-shadow: 5px 5px 10px -5px rgba(0,0,0,0.5); box-shadow: 5px 5px 10px -5px rgba(0, 0, 0, 0.5);
border-radius: 0 8px 8px 0; border-radius: 0 8px 8px 0;
overflow: auto; overflow: auto;
.admonition-title{ .admonition-title {
padding: .25rem .50rem; padding: 0.25rem 0.5rem;
border-bottom: 1px solid map-get($admonition-background, 'note'); border-bottom: 1px solid map-get($admonition-background, "note");
background-color: rgba(map-get($admonition-background, 'note'), 0.1); background-color: rgba(map-get($admonition-background, "note"), 0.1);
color: map-get($admonition-color, 'note'); color: map-get($admonition-color, "note");
.icon{ .icon {
display: inline-block; display: inline-block;
padding: 0 10px 0 0; padding: 0 10px 0 0;
font-size: 0.85rem; font-size: 0.85rem;
color: map-get($admonition-color, 'note'); color: map-get($admonition-color, "note");
} }
} }
.admonition-content{ .admonition-content {
padding: .25rem .50rem; padding: 0.25rem 0.5rem;
} }
@each $type, $color in $admonition-color { @each $type, $color in $admonition-color {
&.#{$type} { &.#{$type} {

View File

@ -1,14 +1,13 @@
// Default Colors // Default Colors
$theme: hsl(172, 99%, 26%); $theme: hsl(172, 99%, 26%) !default;
$text: hsl(204, 28%, 93%); $text: hsl(204, 28%, 93%) !default;
$light-grey: #494f5c; $light-grey: #494f5c !default;
$dark-grey: #3B3E48; $dark-grey: #3b3e48 !default;
$highlight-grey: #7d828a; $highlight-grey: #7d828a !default;
$midnightblue: #2c3e50; $midnightblue: #2c3e50 !default;
$typewriter: hsl(172, 100%, 36%); $typewriter: hsl(172, 100%, 36%) !default;
// Scroll to Top Default colors // Scroll to Top Default colors
$stt-stroke: #ccc !default;
$stt-stroke:#CCC; $stt-circle: #3b3e48 !default;
$stt-circle:#3b3e48; $stt-arrow: #018574 !default;
$stt-arrow:#018574;

17
assets/scss/_mixins.scss Normal file
View File

@ -0,0 +1,17 @@
@mixin dimmed {
opacity: $dimmed-opacity;
}
@mixin aTag {
a {
word-wrap: break-word;
border: none;
box-shadow: inset 0 -4px 0 $theme;
transition-property: box-shadow;
transition-duration: 0.1s;
&:hover {
box-shadow: inset 0 -1em 0 $theme;
}
}
}

View File

@ -1,18 +1,5 @@
// Mixins @import "colors";
@mixin dimmed { @import "fonts";
opacity: .6; @import "admonition";
} @import "variables";
@import "mixins";
@mixin aTag {
a {
word-wrap: break-word;
border: none;
box-shadow: inset 0 -4px 0 $theme;
transition-property: box-shadow;
transition-duration: .1s;
&:hover {
box-shadow: inset 0 -1em 0 $theme;
}
}
}

View File

@ -1,9 +1,9 @@
#share-links { #share-links {
position: fixed; position: fixed;
bottom: 7.0em; bottom: 7em;
right: 0.5em; right: 0.5em;
display: none; display: none;
padding: .6em 0.5em; padding: 0.6em 0.5em;
z-index: 1; z-index: 1;
box-sizing: border-box; box-sizing: border-box;
box-shadow: -1px -2px 3px 0px rgba(0, 0, 0, 0.45); box-shadow: -1px -2px 3px 0px rgba(0, 0, 0, 0.45);
@ -17,15 +17,18 @@
font-size: 1.2em; font-size: 1.2em;
a { a {
color: $highlight-grey; color: $highlight-grey;
&:hover,&:active,&:focus{ &:hover,
&:active,
&:focus {
color: $text; color: $text;
} }
} }
} }
} }
@media (max-width: 520px) { @media (max-width: 520px) {
#share-links { #share-links {
right: 0.2em; right: 0.2em;
bottom: 8.0em; bottom: 8em;
} }
} }

View File

@ -0,0 +1 @@
$dimmed-opacity: 0.6 !default;

View File

@ -1,11 +1,8 @@
@import "predefined.scss"; @import "predefined.scss";
@import "colors.scss";
@import "fonts.scss";
@import "normalize.scss"; @import "normalize.scss";
@import "syntax.scss"; @import "syntax.scss";
@import "animate.scss"; @import "animate.scss";
@import "scroll.scss"; @import "scroll.scss";
@import "admonition.scss";
@import "socialshare.scss"; @import "socialshare.scss";
{{ if (fileExists "assets/scss/userstyles.scss") }} {{ if (fileExists "assets/scss/userstyles.scss") }}
@import "userstyles.scss"; @import "userstyles.scss";