RevelaNetwork/RevelaOS
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[💄] Add gradient to launcher button

Browse source
This commit is contained in:
Parrot 2023-10-17 13:36:45 +00:00
parent 4b2724d2f9
commit 86d2958a82
1 changed files with 19 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
src/style.less
View file

@ -11,7 +11,12 @@
--crust: #11111b; --crust: #11111b;
} }
body, html { .bx-category {
color: #181926;
}
body,
html {
background-color: var(--crust); background-color: var(--crust);
width: 100vw; width: 100vw;
@ -25,7 +30,6 @@ body, html {
overflow: hidden; overflow: hidden;
} }
*::-webkit-scrollbar { *::-webkit-scrollbar {
display: none; display: none;
} }
@ -34,7 +38,7 @@ body, html {
-ms-overflow-style: none; -ms-overflow-style: none;
scrollbar-width: none; scrollbar-width: none;
font-family: 'Satoshi', sans-serif; font-family: "Satoshi", sans-serif;
font-weight: 600; font-weight: 600;
color: var(--text); color: var(--text);
@ -50,12 +54,17 @@ toolbar {
margin: 0 0 0 0; margin: 0 0 0 0;
justify-content: center; justify-content: center;
div[data-toolbar-id="appview"] {
background: rgb(150, 181, 246);
background: linear-gradient(45deg, rgba(150, 181, 246, 1) 0%, rgba(150, 181, 246, 1) 12%, rgba(77, 129, 236, 1) 100%);
color: black;
}
& > div { & > div {
background: var(--base); background: var(--base);
padding: 5px; padding: 5px;
border-radius: 5px; border-radius: 5px;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1), 0 0px 10px rgba(0, 0, 0, 0.1); box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1), 0 0px 10px rgba(0, 0, 0, 0.1);
height: 40px!important; height: 40px !important;
display: flex; display: flex;
app { app {
@ -80,7 +89,6 @@ window-area {
margin-bottom: 20px; margin-bottom: 20px;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
window { window {
background: var(--base); background: var(--base);
@ -91,8 +99,8 @@ window-area {
overflow: hidden; overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.2);
background: var(--crust); background: var(--crust);
transition: .2s opacity, .2s width, .2s height; transition: 0.2s opacity, 0.2s width, 0.2s height;
window-header { window-header {
height: 20px; height: 20px;
padding: 7.5px; padding: 7.5px;
@ -106,7 +114,7 @@ window-area {
border-radius: 40%; border-radius: 40%;
} }
} }
window-content { window-content {
height: 100%; height: 100%;
border-radius: 10px 10px 0 0; border-radius: 10px 10px 0 0;
@ -132,7 +140,7 @@ launcher {
width: 100vw; width: 100vw;
height: calc(100vh + 20px); height: calc(100vh + 20px);
gap: 20px; gap: 20px;
transition: .2s opacity, .2s backdrop-filter; transition: 0.2s opacity, 0.2s backdrop-filter;
apps { apps {
max-height: 70vh; max-height: 70vh;
@ -167,11 +175,11 @@ launcher {
width: 300px; width: 300px;
max-width: 100vw; max-width: 100vw;
text-align: center; text-align: center;
transition: border .2s; transition: border 0.2s;
&:focus { &:focus {
outline: none; outline: none;
border: 2px solid var(--text); border: 2px solid var(--text);
} }
} }
} }