css help and documentation #788

hackitz · 2022-03-20T01:48:45Z

hackitz
Mar 20, 2022

hey all,
so i've been playing with css, what i cant figure out is how to change the search box. is there an example for this?
maybe someone can add a basic css for themes, i've searched and found nothing for the search box, i did find a bit about the rest of the page.
here is where i'm at.
`@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500:600&display=swap');

#app {
background-position: right;
}
#app #sortable,
#app main {
padding: 10px;
}
#config-buttons {
bottom: 50%;
transform: translateY(50%);
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
box-shadow: rgba(255, 255, 255, 0.1) -1px 1px 1px 0, rgba(255, 255, 255, 0.1) 0 -1px 1px 0,
rgba(0, 0, 0, 0.1) -1px 0 20px 5px;
background-color: rgba(40, 40, 40, 0.25);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
#config-buttons a {
background: none;
}
#config-buttons a svg {
transition: all 0.1s ease-in-out;
color: rgba(255, 255, 255, 0.5);
}
#config-buttons a:hover svg {
transform: scale(1.1);
color: rgba(6, 105, 205, 0.95);
}

.black {
color: white !important;
}

.item {
box-shadow: rgba(0, 0, 0, 0.05) -1px -1px 5px 0, rgba(0, 0, 0, 0.15) 0px 20px 25px -5px,
rgba(0, 0, 0, 0.04) 0px 10px 10px -5px !important;
border-radius: 25% 10%;
background-image: none;
border: none;
outline: thick double #066acf;
height: 70px;
width: 240px;
margin: 1.25rem;
padding: 1rem 55px 1rem 1rem;
transition: all 0.25s ease-in-out;
transition-property: transform, box-shadow, background-color;
background-color: rgba(14, 26, 38, 0.9) !important;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.item:after {
height: 70px;
opacity: 0.2;
}
.item:hover {
transform: scale(1.1);
background-color: rgba(100, 175, 250, 0.2) !important;
box-shadow: rgba(0, 0, 0, 0.1) 0px 60px 40px -7px !important;
}
.item .svg-inline--fa {
height: 70px;
vertical-align: middle;
opacity: 0.2;
}

@media only screen and (max-width: 750px) {
.item {
padding-top: 2rem;
padding-bottom: 2rem;
}
#config-buttons {
display: none;
}
}

.details * {
color: white !important;
}
.details {
padding: 0 0.5rem;
}

.app-icon {
width: 42px !important;
height: 42px !important;
filter: drop-shadow(1px 1px 2px rgba(10, 0, 20, 0.1));
}

.livestats-container {
margin-top: 0.5rem;
}
.livestats-container .livestats .title {
margin-bottom: 2px;
}
.livestats-container .livestats li {
padding-right: 1rem;
}

.livestats-container strong {
font-weight: 300 !important;
padding: 0 2px;
}

.details > .title {
font-weight: 400;
font-size: 1.2rem !important;
letter-spacing: 1px;
font-family: "Orbitron", sans-serif;
text-shadow: rgba(10, 0, 60, 0.25) 1px 0 5px;
text-shadow: -1px -1px 1px rgba(255, 255, 255, 0.1), 1px 1px 2px rgba(10, 0, 60, 0.25);
transition: all 0.25s ease-in-out;
}
.item:hover .details > .title {
text-shadow: -1px -1px 1px rgba(100,175, 250, 0.1), 1px 1px 5px rgba(10, 0, 60, 0.2);`

hackitz · 2022-03-23T19:49:56Z

hackitz
Mar 23, 2022
Author

sorted it out, heres my new css theme:

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500:600&display=swap');
.searchform {
margin: 20px auto;
padding: 2px;
border-radius: 4px;
width: 80%;
max-width: 620px;
}
.searchform .input-container {
background: #caebf2;
border-radius: 5px;
box-shadow: 0px 0px 5px 0 rgba(0, 0, 0, 0.4);
overflow: hidden;
position: relative;
display: flex;
}
.searchform button {
position: absolute;
right: 0px;
top: 0px;
border: none;
font-size: 16px;
padding: 7px 8px;
line-height: 38px;
font-weight: 500;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
color: black;
text-transform: uppercase;
background: #3f74d9;
}
#app {
background-position: right;
}
#app #sortable,
#app main {
padding: 8px;
}
#config-buttons {
bottom: 50%;
transform: translateY(50%);
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
box-shadow: rgba(255, 255, 255, 0.1) -1px 1px 1px 0, rgba(255, 255, 255, 0.1) 0 -1px 1px 0,
rgba(0, 0, 0, 0.1) -1px 0 20px 5px;
background-color: rgba(40, 40, 40, 0.25);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
#config-buttons a {
background: none;
}
#config-buttons a svg {
transition: all 0.1s ease-in-out;
color: rgba(255, 255, 255, 0.5);
}
#config-buttons a:hover svg {
transform: scale(1.1);
color: rgba(6, 105, 205, 0.95);
}

.black {
color: white !important;
}

.item {
box-shadow: rgba(0, 0, 0, 0.05) -1px -1px 5px 0, rgba(0, 0, 0, 0.15) 0px 20px 25px -5px,
rgba(0, 0, 0, 0.04) 0px 10px 10px -5px !important;
border-radius: 4% 4%;
background-image: none;
border:1px solid rgba(6, 105, 205, 0.45);
outline: none;
height: 70px;
width: 260px;
margin: 0.6rem;
padding: .5rem 5px .5rem .5rem;
transition: all 0.25s ease-in-out;
transition-property: transform, box-shadow, background-color;
background-color: rgba(14, 26, 38, 0.9) !important;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.item:after {
height: 70px;
opacity: 0.2;
}
.item:hover {
transform: scale(1.1);
background-color: rgba(100, 175, 250, 0.2) !important;
box-shadow: rgba(0, 0, 0, 0.1) 0px 60px 40px -7px !important;
}
.item .svg-inline--fa {
height: 30px;
vertical-align: middle;
opacity: 0.2;
width: .675em;
line-height: 110px;
}
.item .link {
line-height: 110px;
}
@media only screen and (max-width: 750px) {
.item {
padding-top: 2rem;
padding-bottom: 2rem;
}
#config-buttons {
display: none;
}
}

.details * {
color: white !important;
}
.details {
padding: 0 0.5rem;
}

.app-icon {
width: 42px !important;
height: 42px !important;
filter: drop-shadow(1px 1px 2px rgba(10, 0, 20, 0.1));
}

element {

}
.app-icon-container {
width: 60px;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
margin-right: 5px;
flex: 0 0 50px;
}
.livestats-container {
margin-top: 0.5rem;
}
.livestats-container .livestats .title {
margin-bottom: 2px;
}
.livestats-container .livestats li {
padding-right: 1rem;
}

.livestats-container strong {
font-weight: 275 !important;
padding: 0 2px;
}

.details > .title {
font-weight: 375;
font-size: 1.1rem !important;
letter-spacing: 1px;
font-family: "Orbitron", sans-serif;
text-shadow: rgba(10, 0, 60, 0.25) 1px 0 5px;
text-shadow: -1px -1px 1px rgba(255, 255, 255, 0.1), 1px 1px 2px rgba(10, 0, 60, 0.25);
transition: all 0.25s ease-in-out;
}
.item:hover .details > .title {
text-shadow: -1px -1px 1px rgba(100,175, 250, 0.1), 1px 1px 5px rgba(10, 0, 60, 0.2);
}

1 reply

hackitz Feb 15, 2023
Author

updated as google fonts url changed.

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500&display=swap');
.searchform {
margin: 5px auto;
padding: 2px;
border-radius: 2px;
width: 80%;
max-width: 620px;
height: 32px;
}
.searchform form {
width: 100%;
height: 32px;
}
.searchform .input-container {
background: #caebf2;
border-radius: 3px;
box-shadow: 0px 0px 5px 0 rgba(0, 0, 0, 0.4);
height: 32px;
font-size: 12px;
font-weight: 300;
overflow: hidden;
position: relative;
display: flex;
}
.searchform input {
padding: 1px 4px;
font-size: 12px;
border: 0 none;
width: 100%;
background: transparent;
}
.homesearch {
height: 32px;
}
.searchform button {
position: absolute;
right: 0px;
top: 0px;
border: none;
font-size: 12px;
text-align: center;
padding: 1px 4px;
line-height: 32px;
font-weight: 300;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
color: black;
text-transform: uppercase;
background: #3f74d9;
}
#app {
background-position: right;
}
#app #sortable,
#app main {
padding: 8px;
}
#config-buttons {
bottom: 50%;
transform: translateY(50%);
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
box-shadow: rgba(255, 255, 255, 0.1) -1px 1px 1px 0, rgba(255, 255, 255, 0.1) 0 -1px 1px 0,
rgba(0, 0, 0, 0.1) -1px 0 20px 5px;
background-color: rgba(40, 40, 40, 0.25);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
#config-buttons a {
background: none;
}
#config-buttons a svg {
transition: all 0.1s ease-in-out;
color: rgba(255, 255, 255, 0.5);
}
#config-buttons a:hover svg {
transform: scale(1.1);
color: rgba(6, 105, 205, 0.95);
}

.black {
color: white !important;
}

.item {
box-shadow: rgba(0, 0, 0, 0.05) -1px -1px 5px 0, rgba(0, 0, 0, 0.15) 0px 20px 25px -5px,
rgba(0, 0, 0, 0.04) 0px 10px 10px -5px !important;
border-radius: 4% 4%;
background-image: none;
border:1px solid rgba(6, 105, 205, 0.45);
outline: none;
height: 70px;
width: 250px;
margin: 0.6rem;
padding: .5rem 5px .5rem .5rem;
transition: all 0.25s ease-in-out;
transition-property: transform, box-shadow, background-color;
background-color: rgba(14, 26, 38, 0.9) !important;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.item:after {
height: 70px;
opacity: 0.2;
}
.item:hover {
transform: scale(1.1);
background-color: rgba(100, 175, 250, 0.2) !important;
box-shadow: rgba(0, 0, 0, 0.1) 0px 30px 20px -7px !important;
}
.item .svg-inline--fa {
height: 30px;
vertical-align: middle;
opacity: 0.2;
width: .675em;
line-height: 110px;
}
.item .link {
line-height: 110px;
}
@media only screen and (max-width: 750px) {
.item {
padding-top: 2rem;
padding-bottom: 2rem;
}
#config-buttons {
display: none;
}
}

.details * {
color: white !important;
}
.details {
padding: 0 0.5rem;
}

.app-icon {
width: 42px !important;
height: 42px !important;
filter: drop-shadow(1px 1px 2px rgba(10, 0, 20, 0.1));
}

element {

}
.app-icon-container {
width: 60px;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
margin-right: 5px;
flex: 0 0 50px;
}
.livestats-container {
margin-top: 0.5rem;
}
.livestats-container .livestats .title {
margin-bottom: 2px;
}
.livestats-container .livestats li {
padding-right: 1rem;
}

.livestats-container strong {
font-weight: 275 !important;
padding: 0 2px;
}

.details > .title {
font-weight: 375;
font-size: 1.1em !important;
letter-spacing: 1px;
font-family: "Orbitron", sans-serif;
text-shadow: rgba(10, 0, 60, 0.25) 1px 0 5px;
text-shadow: -1px -1px 1px rgba(255, 255, 255, 0.1), 1px 1px 2px rgba(10, 0, 60, 0.25);
transition: all 0.25s ease-in-out;
}
.item:hover .details > .title {
text-shadow: -1px -1px 1px rgba(100,175, 250, 0.1), 1px 1px 5px rgba(10, 0, 60, 0.2);
}

stevietv · 2022-04-17T20:47:55Z

stevietv
Apr 17, 2022

thanks for this, i love it!

0 replies

sunteta · 2022-05-01T18:51:48Z

sunteta
May 1, 2022

I modified it a little bit and it looked better,sheare~~~ have fun...
use this wallpaper Looks absolutely beautiful
https://www.artstation.com/artwork/L8gx0

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500:600&display=swap');
.searchform {
margin: 20px auto;
padding: 2px;
border-radius: 4px;
width: 80%;
max-width: 620px;
}
.searchform .input-container {
background: #ffffff;
border-radius: 5px;
box-shadow: 0px 0px 0px 0 rgba(0, 0, 0, 0.4);
overflow: hidden;
position: relative;
display: flex;
}
.searchform button {
position: absolute;
right: 0px;
top: 0px;
border: none;
font-size: 16px;
padding: 7px 8px;
line-height: 38px;
font-weight: 500;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
color: #ffffff;
text-transform: uppercase;
background: #2d4980;
}
#app {
background-position: right;
}
#app #sortable,
#app main {
padding: 8px;
}
#config-buttons {
bottom: 50%;
transform: translateY(50%);
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
box-shadow: rgba(255, 255, 255, 0.1) -1px 1px 1px 0, rgba(255, 255, 255, 0.1) 0 -1px 1px 0,
rgba(0, 0, 0, 0.1) -1px 0 20px 5px;
background-color: rgba(40, 40, 40, 0.25);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
#config-buttons a {
background: none;
}
#config-buttons a svg {
transition: all 0.1s ease-in-out;
color: rgba(255, 255, 255, 0.5);
}
#config-buttons a:hover svg {
transform: scale(1.1);
color: rgba(6, 105, 205, 0.95);
}

.black {
color: white !important;
}

.item {
box-shadow: rgba(0, 0, 0, 0.05) -1px -1px 5px 0, rgba(0, 0, 0, 0.15) 0px 20px 25px -5px,
rgba(0, 0, 0, 0.04) 0px 10px 10px -5px !important;
border-radius: 4% 4%;
background-image: none;
border:1px solid rgba(6, 105, 205, 0.45);
outline: none;
height: 75px;
width: 260px;
margin: 0.6rem;
padding: .5rem 5px .5rem .5rem;
transition: all 0.25s ease-in-out;
transition-property: transform, box-shadow, background-color;
background-color: rgba(14, 26, 38, 0.9) !important;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.item:after {
height: 75px;
opacity: 0.3;
}
.item:hover {
transform: scale(1.1);
background-color: rgba(100, 175, 250, 0.2) !important;
box-shadow: rgba(0, 0, 0, 0.1) 0px 60px 40px -7px !important;
}
.item .svg-inline--fa {
height: 30px;
vertical-align: middle;
opacity: 0.3;
width: .675em;
line-height: 110px;
}
.item .link {
line-height: 110px;
}
@media only screen and (max-width: 750px) {
.item {
padding-top: 2rem;
padding-bottom: 2rem;
}
#config-buttons {
display: none;
}
}

.details * {
color: white !important;
}
.details {
padding: 0 0.5rem;
}

.app-icon {
width: 42px !important;
height: 42px !important;
filter: drop-shadow(1px 1px 2px rgba(10, 0, 20, 0.1));
}

element {

}
.app-icon-container {
width: 60px;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
margin-right: 5px;
flex: 0 0 50px;
}
.livestats-container {
margin-top: 0.5rem;
}
.livestats-container .livestats .title {
margin-bottom: 2px;
}
.livestats-container .livestats li {
padding-right: 1rem;
}

.livestats-container strong {
font-weight: 275 !important;
padding: 0 2px;
}

.details > .title {
font-weight: 375;
font-size: 1 rem !important;
letter-spacing: 1px;
font-family: "Orbitron", sans-serif;
text-shadow: rgba(10, 0, 60, 0.25) 1px 0 5px;
text-shadow: -1px -1px 1px rgba(255, 255, 255, 0.1), 1px 1px 2px rgba(10, 0, 60, 0.25);
transition: all 0.25s ease-in-out;
}
.item:hover .details > .title {
text-shadow: -1px -1px 1px rgba(100,175, 250, 0.1), 1px 1px 5px rgba(10, 0, 60, 0.2);
}

0 replies

hackitz · 2022-05-02T17:29:33Z

hackitz
May 2, 2022
Author

I'll have a look at what you did tonight. Thanks for sharing.

0 replies

xekil · 2022-07-19T10:07:48Z

xekil
Jul 19, 2022

Thank you for sharing, would you have an idea to adapt Heimdall to the screen of a smartphone to have two shortcuts per line rather than one?

0 replies

Nionor · 2023-07-28T08:30:59Z

Nionor
Jul 28, 2023

If you do something like this it should work @xekil
The important part is @media only screen and (max-width: 750px) where I set the width on the item to 155.

.searchform {
  align-self: flex-start;
  background: rgba(0,0,0,.2);
  border-bottom: 1px solid hsla(0,0%,100%,.35);
  border-radius: 14px;
  border-top: 1px solid rgba(0,0,0,.5);
  box-shadow: inset 0 1px 6px 0 rgba(0,0,0,.3);
  display: flex;
  margin: 20px auto;
  max-width: 620px;
  padding: 7px;
  position: relative;
  text-align: center;
  width: 100%;
  z-index: 4;
}


.app-icon {
  display: block;
  max-height: 30px;
  max-width: 30px;
}

.app-icon-container {
  align-items: center;
  display: flex;
  flex: 0 0 40px;
  height: 60px;
  justify-content: center;
  margin-right: 15px;
  width: 60px;
}

.item {
  align-items: center;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  background-image: linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.25));
  border: 1px solid #4a4a4a;
  border: 1px solid rgba(76,76,76,.4);
  border-radius: 6px;
  color: #fff;
  display: flex;
  flex: 0 0 280px;
  height: 50px;
  margin: 20px;
  outline: 1px solid transparent;
  overflow: hidden;
  padding: 15px 55px 15px 15px;
  position: relative;
  transition: all .35s ease-in-out;
  width: 225px;
}

.item .link {
  color: #fff;
  font-size: 24px;
  height: 100%;
  line-height: 50px;
  padding-right: 10px;
  position: absolute;
  right: 0;
  text-align: right;
  top: 0;
  width: 100%;
  z-index: 1;
}

.item::after {
  display: none;
}
.item .svg-inline--fa {
  display: none;
}


element {

}
svg:not(:root).svg-inline--fa {

    overflow: visible;

}
.svg-inline--fa.fa-w-20 {

    width: 1.25em;

}
svg:not(:root) {

    overflow: hidden;

}
.svg-inline--fa {

    display: inline-block;
    font-size: inherit;
    height: 1em;
    overflow: visible;
    vertical-align: -.125em;

}
*, ::after, ::before {

    box-sizing: inherit;

}
#config-buttons a {
    color: #fff;
}

@media only screen and (max-width: 750px) {
.item {
  align-items: center;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  background-image: linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.25));
  border: 1px solid #4a4a4a;
  border: 1px solid rgba(76,76,76,.4);
  border-radius: 6px;
  color: #fff;
  display: flex;
  flex: 0 0 280px;
  height: 50px;
  margin: 10px;
  outline: 1px solid transparent;
  overflow: hidden;
  padding: 15px 10px 15px 10px;
  position: relative;
  transition: all .35s ease-in-out;
  width: 155px;
}
#config-buttons {
  display: none;
}
}

0 replies

xekil · 2023-07-28T21:29:14Z

xekil
Jul 28, 2023

thank you

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

css help and documentation #788

{{title}}

Replies: 7 comments 1 reply

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

css help and documentation #788

hackitz Mar 20, 2022

Replies: 7 comments · 1 reply

hackitz Mar 23, 2022 Author

hackitz Feb 15, 2023 Author

updated as google fonts url changed.

stevietv Apr 17, 2022

sunteta May 1, 2022

hackitz May 2, 2022 Author

xekil Jul 19, 2022

Nionor Jul 28, 2023

xekil Jul 28, 2023

hackitz
Mar 20, 2022

Replies: 7 comments 1 reply

hackitz
Mar 23, 2022
Author

hackitz Feb 15, 2023
Author

stevietv
Apr 17, 2022

sunteta
May 1, 2022

hackitz
May 2, 2022
Author

xekil
Jul 19, 2022

Nionor
Jul 28, 2023

xekil
Jul 28, 2023