Spythere/pojazdownik
1
0
Fork 0
mirror of https://github.com/Spythere/pojazdownik.git synced 2026-05-03 19:48:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

Poprawki layoutu i responsywności

Browse Source
This commit is contained in:
Spythere
2022-07-29 00:28:00 +02:00
parent a539719f76
commit 767e0839e0
6 changed files with 215 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/global.scss
+120 -101
View File
@@ -1,168 +1,187 @@
@import url("https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap');
$bgColor: #2C3149;
$bgColor: #2c3149;
$textColor: #fff;
$accentColor: #FFD600;
$accentColor: #ffd600;
::-webkit-scrollbar {
width: 0.5rem;
height: 0.5rem;
width: 0.5rem;
height: 0.5rem;
&-track {
background: #222;
border-radius: 0.5rem;
}
&-track {
background: #222;
border-radius: 0.5rem;
}
&-thumb {
border-radius: 1rem;
background: #777;
}
&-thumb {
border-radius: 1rem;
background: #777;
}
}
body,
html {
margin: 0;
padding: 0;
margin: 0;
padding: 0;
font-family: "Lato", sans-serif;
font-family: 'Lato', sans-serif;
background-color: $bgColor;
width: 100vw;
overflow-x: hidden;
background-color: $bgColor;
width: 100vw;
overflow-x: hidden;
}
*,
*::before,
*::after {
box-sizing: border-box;
box-sizing: border-box;
}
a {
color: white;
text-decoration: none;
&:visited {
color: white;
text-decoration: none;
}
&:visited {
color: white;
}
&:hover, &:focus {
color: $accentColor;
}
&:hover,
&:focus {
color: $accentColor;
}
}
p {
font-size: 1.2em;
font-weight: bold;
color: $accentColor;
font-size: 1.2em;
font-weight: bold;
color: $accentColor;
}
select,
option,
input,
button {
font-family: "Lato", sans-serif;
font-size: 1em;
font-family: 'Lato', sans-serif;
font-size: 1em;
}
button {
border: none;
outline: none;
background: none;
border: none;
outline: none;
background: none;
padding: 0;
margin: 0;
padding: 0;
margin: 0;
cursor: pointer;
cursor: pointer;
font-size: 1em;
color: white;
font-size: 1em;
color: white;
&:hover {
color: $accentColor;
}
&:hover {
color: $accentColor;
}
}
button.btn {
padding: 0.25em 1em;
padding: 0.25em 1em;
border-radius: 0.25em;
border: 2px solid white;
outline: none;
background: none;
border-radius: 0.25em;
border: 2px solid white;
outline: none;
background: none;
transition: all 250ms;
&:hover {
color: $accentColor;
border-color: $accentColor;
}
&:focus {
color: $accentColor;
}
&[data-disabled='true'] {
user-select: none;
pointer-events: none;
-moz-user-select: none;
-webkit-user-select: none;
opacity: 0.7;
}
&--text {
font-weight: bold;
transition: all 250ms;
&:hover {
color: $accentColor;
border-color: $accentColor;
}
&:focus {
color: $accentColor;
}
&--text {
font-weight: bold;
transition: all 250ms;
border: none;
}
border: none;
}
}
button.btn-rect {
width: 1.5em;
height: 1.5em;
font-size: 1.65em;
width: 1.5em;
height: 1.5em;
font-size: 1.65em;
line-height: 1em;
line-height: 1em;
border-radius: 0.25em;
border: 2px solid black;
outline: none;
background: white;
color: black;
border-radius: 0.25em;
border: 2px solid black;
outline: none;
background: white;
color: black;
transition: all 250ms;
transition: all 250ms;
&:hover {
color: white;
background-color: black;
}
&:hover {
color: white;
background-color: black;
}
}
select {
background: none;
border: 2px solid white;
outline: none;
background: none;
border: 2px solid white;
outline: none;
padding: 0.25em 0.35em;
padding: 0.25em 0.35em;
color: white;
font-size: 1em;
color: white;
font-size: 1em;
width: 18em;
width: 18em;
}
option {
color: black;
border: none;
color: black;
border: none;
}
ul {
list-style: none;
margin: 0;
padding: 0;
list-style: none;
margin: 0;
padding: 0;
}
.text {
&--accent {
color: $accentColor;
}
&--accent {
color: $accentColor;
}
&--grayed {
color: gray;
}
}
&--grayed {
color: gray;
}
}
.g-card-dimmer {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
cursor: pointer;
background-color: #000000aa;
z-index: 99;
}