mirror of
https://github.com/garraflavatra/rolens.git
synced 2025-07-19 22:18:03 +00:00
Frontend reorganisation
This commit is contained in:
50
frontend/src/styles/loading.css
Normal file
50
frontend/src/styles/loading.css
Normal file
@ -0,0 +1,50 @@
|
||||
#app-loading {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* Source of the following CSS: https://loading.io/css/ (modified) */
|
||||
|
||||
#app-loading .ring {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 136px;
|
||||
height: 136px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
#app-loading .ring div {
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
margin: 8px;
|
||||
border: 8px solid;
|
||||
border-radius: 50%;
|
||||
animation: loading-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
|
||||
border-color: #f1dac8 transparent transparent transparent;
|
||||
}
|
||||
|
||||
#app-loading .ring div:nth-child(1) {
|
||||
animation-delay: -0.45s;
|
||||
}
|
||||
#app-loading .ring div:nth-child(2) {
|
||||
animation-delay: -0.3s;
|
||||
}
|
||||
#app-loading .ring div:nth-child(3) {
|
||||
animation-delay: -0.15s;
|
||||
}
|
||||
|
||||
@keyframes loading-ring {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
74
frontend/src/styles/reset.css
Normal file
74
frontend/src/styles/reset.css
Normal file
@ -0,0 +1,74 @@
|
||||
/* http://meyerweb.com/eric/tools/css/reset/
|
||||
v2.0 | 20110126
|
||||
License: none (public domain)
|
||||
*/
|
||||
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
b, u, i, center,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
article, aside, canvas, details, embed,
|
||||
figure, figcaption, footer, header, hgroup,
|
||||
menu, nav, output, ruby, section, summary,
|
||||
time, mark, audio, video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
/* vertical-align: baseline; */
|
||||
}
|
||||
/* HTML5 display-role reset for older browsers */
|
||||
article, aside, details, figcaption, figure,
|
||||
footer, header, hgroup, menu, nav, section {
|
||||
display: block;
|
||||
}
|
||||
body {
|
||||
line-height: 1;
|
||||
}
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
}
|
||||
blockquote, q {
|
||||
quotes: none;
|
||||
}
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
button {
|
||||
font: inherit;
|
||||
border: none;
|
||||
background: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-shadow: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Inputs */
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
font: inherit;
|
||||
}
|
||||
input:not([type="checkbox"]) {
|
||||
min-width: 100px;
|
||||
width: 100%;
|
||||
}
|
||||
input[type="checkbox"] {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
191
frontend/src/styles/style.css
Normal file
191
frontend/src/styles/style.css
Normal file
@ -0,0 +1,191 @@
|
||||
:root {
|
||||
--darwin-titlebar-height: 36px;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
||||
Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
cursor: default;
|
||||
font-size: 13px;
|
||||
line-height: 13px;
|
||||
background-color: rgba(255, 255, 255, 0.35);
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
overscroll-behavior: none;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-rendering: optimizeLegibility;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
p:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
p strong {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.loading {
|
||||
cursor: wait;
|
||||
}
|
||||
|
||||
input:disabled,
|
||||
select:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 1;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.btn {
|
||||
background-color: #00008b;
|
||||
border: 1px solid #00008b;
|
||||
padding: 0.5rem;
|
||||
border-radius: 10px;
|
||||
color: #fff;
|
||||
}
|
||||
.btn:focus {
|
||||
box-shadow: 0 0 0 3px rgba(0, 0, 139, 0.2);
|
||||
outline: none;
|
||||
}
|
||||
.btn.danger {
|
||||
background-color: #c00;
|
||||
border: 1px solid #c00;
|
||||
}
|
||||
.btn.danger:focus {
|
||||
box-shadow: 0 0 0 3px rgba(204, 0, 0, 0.2);
|
||||
}
|
||||
.btn.secondary {
|
||||
border: 1px solid #ccc;
|
||||
background-color: #fff;
|
||||
color: inherit;
|
||||
}
|
||||
.btn.secondary:hover {
|
||||
background-color: #eee;
|
||||
}
|
||||
.btn.secondary:active {
|
||||
background-color: #ddd;
|
||||
}
|
||||
.btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
padding: 3px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.btn-sm:hover {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.btn-sm:active {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.btn-sm svg {
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.field {
|
||||
display: flex;
|
||||
white-space: nowrap;
|
||||
align-items: stretch;
|
||||
}
|
||||
.field > * {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
.field .label,
|
||||
.field span.checkbox {
|
||||
background-color: #eee;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.5rem;
|
||||
border: 1px solid #ccc;
|
||||
justify-content: center;
|
||||
}
|
||||
.field > input,
|
||||
.field > textarea,
|
||||
.field > select {
|
||||
flex: 1;
|
||||
padding: 0.5rem;
|
||||
border: 1px solid #ccc;
|
||||
background-color: #fff;
|
||||
}
|
||||
.field > input:focus,
|
||||
.field > textarea:focus,
|
||||
.field > select:focus {
|
||||
outline: none;
|
||||
border-color: #00008b;
|
||||
box-shadow: 0 0 0 3px rgba(0, 0, 139, 0.2);
|
||||
}
|
||||
.field > input.invalid,
|
||||
.field > textarea.invalid,
|
||||
.field > select.invalid {
|
||||
background-color: rgba(255, 80, 80, 0.3);
|
||||
border-color: rgb(255, 80, 80);
|
||||
}
|
||||
.field.inline {
|
||||
display: inline-flex;
|
||||
}
|
||||
.field.inline > input,
|
||||
.field.inline > textarea,
|
||||
.field.inline > select {
|
||||
max-width: 150px;
|
||||
}
|
||||
.field > span.checkbox {
|
||||
min-width: 75px;
|
||||
background-color: #fff;
|
||||
}
|
||||
.field > select {
|
||||
appearance: none;
|
||||
padding: 0.5rem 2rem 0.5rem 0.5rem;
|
||||
background: #fff;
|
||||
background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 0.5rem center;
|
||||
}
|
||||
.field > :first-child {
|
||||
border-top-left-radius: 10px;
|
||||
border-bottom-left-radius: 10px;
|
||||
}
|
||||
.field > *:not(:last-child) {
|
||||
border-right: none;
|
||||
}
|
||||
.field > :last-child {
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 10px;
|
||||
}
|
||||
|
||||
code,
|
||||
.code {
|
||||
font-family: Menlo, monospace;
|
||||
}
|
||||
|
||||
@keyframes flashGreen {
|
||||
0% {
|
||||
color: #0d0;
|
||||
}
|
||||
100% {
|
||||
color: unset;
|
||||
}
|
||||
}
|
||||
.flash-green {
|
||||
animation: 1s ease-out 0s 1 flashGreen;
|
||||
}
|
||||
Reference in New Issue
Block a user