andras/fleeting-garden
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add highlight to open page tab

Browse source
This commit is contained in:
Andras Schmelczer 2023-05-27 19:50:27 +01:00
parent 14d31b9e19
commit 68b24effde
No known key found for this signature in database
GPG key ID: FC8F2C3D3D1A718C
4 changed files with 111 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

119
src/index.scss
View file

@ -22,6 +22,7 @@ h4,
h5,
h6 {
font-family: 'Comfortaa', sans-serif;
margin-bottom: var(--small-margin);
}
p {
@ -31,6 +32,7 @@ p {
html {
height: 100%;
-webkit-font-smooth: antialiased;
> body {
width: 100%;
height: 100%;
@ -83,12 +85,13 @@ html {
@include blurred-background(#fff);
display: flex;
position: absolute;
overflow: hidden;
@include on-large-screen {
top: 50%;
left: 0;
transform: translateY(-50%);
height: 400px;
max-height: 350px;
}
@include on-small-screen {
@ -104,31 +107,113 @@ html {
> nav.buttons {
@include center-children;
gap: var(--normal-margin);
margin: var(--small-margin);
justify-content: space-evenly;
@include on-large-screen {
flex-direction: column;
}
> button.info {
@include image-button(url('../assets/icons/info.svg'), var(--accent-color));
}
> button {
position: relative;
border: none;
background-color: transparent;
cursor: pointer;
> button.maximize-full-screen {
@include image-button(url('../assets/icons/maximize.svg'), var(--accent-color));
}
@include square(var(--icon-size));
margin: var(--small-margin);
> button.minimize-full-screen {
@include image-button(url('../assets/icons/minimize.svg'), var(--accent-color));
}
&::before,
&::after {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
> button.settings {
@include image-button(url('../assets/icons/settings.svg'), var(--accent-color));
}
&::before {
background-color: var(--accent-color);
> button.restart {
@include image-button(url('../assets/icons/restart.svg'), var(--accent-color));
@include on-large-screen {
width: 0;
border-radius: 0 var(--border-radius) var(--border-radius) 0;
transition: background-color var(--transition-time),
width var(--transition-time);
left: calc(-1 * var(--small-margin));
height: 140%;
top: 50%;
transform: translateY(-50%);
}
@include on-small-screen {
height: 0;
border-radius: 0 0 var(--border-radius) var(--border-radius);
transition: background-color var(--transition-time),
height var(--transition-time);
top: calc(-1 * var(--small-margin));
width: 140%;
left: 50%;
transform: translateX(-50%);
}
}
&::after {
background-color: var(--accent-color);
transition: transform var(--transition-time),
background-color var(--transition-time);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
@include square(var(--icon-size));
}
&.active {
&::before {
@include on-large-screen {
width: calc(100% + 2 * var(--small-margin));
}
@include on-small-screen {
height: calc(100% + 2 * var(--small-margin));
}
}
&::after {
background-color: white;
}
}
&:hover::after {
transform: scale(1.15);
}
&.info::after {
-webkit-mask-image: url('../assets/icons/info.svg');
mask-image: url('../assets/icons/info.svg');
}
&.maximize-full-screen::after {
-webkit-mask-image: url('../assets/icons/maximize.svg');
mask-image: url('../assets/icons/maximize.svg');
}
&.minimize-full-screen::after {
-webkit-mask-image: url('../assets/icons/minimize.svg');
mask-image: url('../assets/icons/minimize.svg');
}
&.settings::after {
-webkit-mask-image: url('../assets/icons/settings.svg');
mask-image: url('../assets/icons/settings.svg');
}
&.restart::after {
-webkit-mask-image: url('../assets/icons/restart.svg');
mask-image: url('../assets/icons/restart.svg');
}
}
}