mirror of
https://github.com/voltbonn/qrcode.volt.link.git
synced 2024-06-24 06:50:59 +00:00
327 lines
7.6 KiB
CSS
327 lines
7.6 KiB
CSS
:root {
|
|
--white: #fff;
|
|
--white-rgb: 255, 255, 255;
|
|
--grey: #ede8f1;
|
|
--grey-rgb: 237, 232, 241;
|
|
--dark-grey: #aa94c0;
|
|
--dark-grey-rgb: 170, 148, 192;
|
|
|
|
--purple: #502379;
|
|
--purple-rgb: 80, 35, 121;
|
|
--purple-dark: #140022;
|
|
--purple-dark-rgb: 20, 0, 34;
|
|
|
|
--alpha-more: 0.8;
|
|
--alpha-less: 0.12;
|
|
|
|
--blur: 20px;
|
|
|
|
--yellow: #FDC220;
|
|
--on-yellow: #fff;
|
|
--green: #1BBE6F;
|
|
--on-green: #fff;
|
|
--blue: #82D0F4;
|
|
--on-blue: #fff;
|
|
--red: #E63E12;
|
|
--on-red: #fff;
|
|
|
|
--basis: 0.4rem;
|
|
--basis_x0_2: calc(0.2 * var(--basis));
|
|
--basis_x0_5: calc(0.5 * var(--basis));
|
|
--basis_x2: calc(2 * var(--basis));
|
|
--basis_x4: calc(4 * var(--basis));
|
|
--basis_x8: calc(8 * var(--basis));
|
|
--basis_x16: calc(16 * var(--basis));
|
|
/* --basis_x32: calc(32 * var(--basis)); */
|
|
--basis_x64: calc(64 * var(--basis));
|
|
|
|
--font-add: 1rem;
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: 'Ubuntu', 'Noto Kufi Arabic', 'Geeza Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
|
|
/*
|
|
Ubuntu = Volt (It includes latin and arabic characters.)
|
|
|
|
Noto Kufi Arabic = A Noto font from Google (maybe it's installed)
|
|
Geeza Pro = macOS Arabic Default
|
|
|
|
-apple-system, BlinkMacSystemFont = macOS Default
|
|
Helvetica Neue = Old macOS Default
|
|
Segoe UI = Windows Default
|
|
Roboto = Android Default
|
|
Fira Sans = Firefox OS Default
|
|
Oxygen, Cantarell, Droid Sans = Linux
|
|
|
|
sans-serif = Fallback
|
|
*/
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
html {
|
|
--background: var(--white);
|
|
--background-rgb: var(--white-rgb);
|
|
--background-contrast: var(--grey);
|
|
--background-contrast-rgb: var(--grey-rgb);
|
|
--on-background: var(--purple);
|
|
--on-background-contrast: var(--purple-dark);
|
|
|
|
--input-background: var(--background);
|
|
--constant-button-color: var(--background);
|
|
}
|
|
@media (prefers-color-scheme: dark) {
|
|
html {
|
|
--background: var(--purple-dark);
|
|
--background-rgb: var(--purple-dark-rgb);
|
|
--background-contrast: var(--purple);
|
|
--background-contrast-rgb: var(--purple-rgb);
|
|
--on-background: var(--white);
|
|
--on-background-contrast: var(--dark-grey);
|
|
|
|
--input-background: var(--background);
|
|
--constant-button-color: var(--background-contrast);
|
|
}
|
|
}
|
|
|
|
html[lang="ar"] { /* for arabic */
|
|
letter-spacing: 0 !important;
|
|
}
|
|
|
|
body {
|
|
background: var(--background);
|
|
color: var(--on-background);
|
|
|
|
--body-font-size: calc(var(--font-add) + var(--basis));
|
|
--body2-font-size: calc(var(--font-add) + var(--basis_x0_5));
|
|
font-size: var(--body-font-size);
|
|
}
|
|
|
|
code {
|
|
font-family: 'Ubuntu Mono', source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
|
|
}
|
|
code.filled{
|
|
padding: var(--basis_x0_2);
|
|
margin: 0 var(--basis_x0_2);
|
|
border-radius: var(--basis_x0_5);
|
|
background: var(--on-background);
|
|
color: var(--background);
|
|
}
|
|
|
|
a,
|
|
a:visited {
|
|
color: var(--on-background);
|
|
}
|
|
a:hover,
|
|
a:focus {
|
|
color: var(--on-background-contrast);
|
|
}
|
|
|
|
footer {
|
|
padding: var(--basis_x4);
|
|
text-align: center;
|
|
}
|
|
|
|
h1 {
|
|
font-size: calc(var(--font-add) + var(--basis_x4));
|
|
line-height: 0.9;
|
|
/* margin: 0 0 var(--basis) 0; */
|
|
margin: var(--basis_x4) 0 var(--basis) 0;
|
|
text-decoration: inherit;
|
|
}
|
|
|
|
h2 {
|
|
font-size: calc(var(--font-add) + var(--basis_x2));
|
|
margin: var(--basis_x4) 0 var(--basis) 0;
|
|
text-decoration: inherit;
|
|
}
|
|
|
|
h3 {
|
|
font-size: calc(var(--font-add) + var(--basis));
|
|
margin: var(--basis_x4) 0 var(--basis) 0;
|
|
text-decoration: inherit;
|
|
}
|
|
|
|
h1.yellow,
|
|
h2.yellow,
|
|
h3.yellow {
|
|
color: var(--yellow);
|
|
}
|
|
h1.green,
|
|
h2.green,
|
|
h3.green {
|
|
color: var(--green);
|
|
}
|
|
h1.blue,
|
|
h2.blue,
|
|
h3.blue {
|
|
color: var(--blue);
|
|
}
|
|
h1.red,
|
|
h2.red,
|
|
h3.red {
|
|
color: var(--red);
|
|
}
|
|
|
|
p {
|
|
/* width: calc(var(--basis_x16) + var(--basis_x8)); */
|
|
max-width: 100%;
|
|
margin: var(--basis) 0;
|
|
text-decoration: inherit;
|
|
}
|
|
|
|
ul {
|
|
margin-inline-start: var(--basis_x4);
|
|
max-width: calc(100% - var(--basis_x4));
|
|
}
|
|
|
|
.body2 {
|
|
font-size: var(--body2-font-size);
|
|
}
|
|
|
|
button,
|
|
textarea,
|
|
input[type="text"],
|
|
select {
|
|
min-width: 0px;
|
|
outline: none;
|
|
border: none;
|
|
margin: var(--basis);
|
|
font-size: var(--body-font-size);
|
|
}
|
|
textarea,
|
|
input[type="text"] {
|
|
padding: var(--basis);
|
|
background: var(--input-background);
|
|
color: var(--on-background);
|
|
box-shadow: inset 0 0 0 calc(0.2 * var(--basis)) var(--on-background);
|
|
}
|
|
textarea.inverted,
|
|
input[type="text"].inverted {
|
|
background: var(--on-background);
|
|
color: var(--input-background);
|
|
box-shadow: inset 0 0 0 calc(0.2 * var(--basis)) var(--on-background);
|
|
}
|
|
|
|
textarea:focus,
|
|
input[type="text"]:focus {
|
|
background: var(--input-background);
|
|
color: var(--on-background);
|
|
box-shadow: inset 0 0 0 calc(0.2 * var(--basis)) var(--on-background-contrast);
|
|
}
|
|
|
|
textarea {
|
|
resize: vertical;
|
|
padding-bottom: var(--basis_x2);
|
|
min-height: 20px; /* TODO: Find out why this is value works. */
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
button,
|
|
select {
|
|
font-weight: bold;
|
|
transition: transform 0.2s ease;
|
|
position: relative;
|
|
cursor: pointer;
|
|
padding: var(--basis) var(--basis_x2);
|
|
|
|
--button-background: var(--on-background);
|
|
--button-color: var(--constant-button-color);
|
|
background: var(--button-background);
|
|
color: var(--button-color);
|
|
}
|
|
|
|
select {
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
appearance: none;
|
|
background-repeat: no-repeat;
|
|
background-position-x: calc(100% - 6px);
|
|
background-position-y: 50%;
|
|
padding: var(--basis) calc(var(--basis_x2) + 14px) var(--basis) var(--basis_x2);
|
|
|
|
background-image: url("data:image/svg+xml;utf8,<svg fill='white' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
|
|
}
|
|
@media (prefers-color-scheme: dark) {
|
|
select {
|
|
background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
|
|
}
|
|
}
|
|
|
|
button.yellow {
|
|
--button-background: var(--yellow);
|
|
--button-color: var(--on-yellow);
|
|
}
|
|
button.green {
|
|
--button-background: var(--green);
|
|
--button-color: var(--on-green);
|
|
}
|
|
button.blue {
|
|
--button-background: var(--blue);
|
|
--button-color: var(--on-blue);
|
|
}
|
|
button.red {
|
|
--button-background: var(--red);
|
|
--button-color: var(--on-red);
|
|
}
|
|
button.text {
|
|
--button-background: transparent;
|
|
--button-color: var(--on-background);
|
|
}
|
|
button:focus {
|
|
--button-background: var(--background-contrast);
|
|
--button-color: var(--on-background);
|
|
}
|
|
button:hover{
|
|
transform-origin: center center;
|
|
transform: scale(1.05);
|
|
}
|
|
button.choosen:after {
|
|
content: "";
|
|
position: absolute;
|
|
top: calc(-1 * var(--basis_x0_5));
|
|
right: calc(-1 * var(--basis_x0_5));
|
|
bottom: calc(-1 * var(--basis_x0_5));
|
|
left: calc(-1 * var(--basis_x0_5));
|
|
box-shadow: 0 0 0 var(--basis_x0_5) var(--on-background);
|
|
}
|
|
button:focus.choosen:after {
|
|
box-shadow: 0 0 0 var(--basis_x0_5) var(--on-background-contrast);
|
|
}
|
|
|
|
.buttonRow button {
|
|
--margin-right: calc(var(--basis) * 1.5);
|
|
margin: var(--basis) var(--margin-right) calc(var(--basis) * .5) 0;
|
|
}
|
|
.buttonRow button:last-of-type {
|
|
margin-right: 0;
|
|
}
|
|
.buttonRow.usesLinks button:last-of-type {
|
|
margin-right: var(--margin-right);
|
|
}
|
|
.buttonRow.usesLinks a:last-of-type button {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.buttonRow button.hasIcon{
|
|
padding-left: var(--basis);
|
|
}
|
|
.buttonRow button.hasIcon span {
|
|
margin-left: var(--basis_x2);
|
|
}
|
|
|
|
hr {
|
|
margin: var(--basis_x4) 0;
|
|
border: none;
|
|
height: var(--basis_x0_2);
|
|
background: var(--on-background);
|
|
}
|
|
|
|
@media (max-width: 1000px) {
|
|
.hideOnSmallScreen {
|
|
display: none;
|
|
}
|
|
}
|