mirror of
https://github.com/Karaka-Management/oms-HumanResourceTimeRecording.git
synced 2026-01-11 11:58:47 +00:00
move styles to css dir
This commit is contained in:
parent
5313390a83
commit
53b1d327ab
|
|
@ -1,190 +0,0 @@
|
|||
:root {
|
||||
--main-background: rgb(46, 26, 90);
|
||||
--main-background-highlight: rgb(158, 81, 197);
|
||||
--input-border: rgba(166, 135, 232, .4);
|
||||
--input-border-active: rgba(166, 135, 232, .7);
|
||||
--input-color: rgb(116, 67, 161);
|
||||
--input-color-active: rgb(94, 52, 133);
|
||||
--input-background: rgba(255, 255, 255);
|
||||
--input-background-active: rgba(255, 255, 255);
|
||||
--input-icon-color: rgba(166, 135, 232, .6);
|
||||
--input-icon-color-active: rgba(166, 135, 232, 1);
|
||||
--button-main-background: rgba(166, 135, 232, .6);
|
||||
--button-main-background-active: rgba(166, 135, 232, .8);
|
||||
--button-main-color: rgba(255, 255, 255, .9);
|
||||
--text-on-background-color: rgba(255, 255, 255, 0.7);
|
||||
--text-on-background-color-2: rgba(255, 255, 255, 0.85);
|
||||
--nav-category-background: rgb(43, 58, 101);
|
||||
--nav-category-background-highlight: rgb(113, 43, 145);
|
||||
--nav-category-background-hover: rgb(120, 50, 153);
|
||||
--nav-sub-background: rgb(72, 39, 102);
|
||||
--nav-sub-background-highlight: rgb(94, 52, 133);
|
||||
--nav-sub-background-hover: rgb(116, 67, 161);
|
||||
--nav-header-background: rgb(72, 39, 102);
|
||||
--nav-header-background-highlight: rgb(94, 52, 133);
|
||||
--nav-header-background-hover: rgb(116, 67, 161);
|
||||
--nav-content-hover: rgb(177, 97, 218);
|
||||
--font-family: 'Roboto', sans-serif;
|
||||
--button-colored-background: rgb(158, 81, 197);
|
||||
--button-colored-background-hover: rgb(177, 97, 218);
|
||||
--table-caption-background: rgb(255, 255, 255);
|
||||
--table-head-background: rgb(236, 232, 255);
|
||||
--table-row-background: rgb(255, 255, 255);
|
||||
--table-row-background-alt: rgb(255, 255, 255);
|
||||
--table-row-background-hover: rgb(220, 211, 255);
|
||||
--link-color: rgb(72, 39, 102);
|
||||
--link-hover: rgb(158, 81, 197);
|
||||
--badge-size: .55rem;
|
||||
--badge-color: rgb(255, 255, 255);
|
||||
--badge-background: rgb(158, 81, 197);
|
||||
--box-border: rgb(218, 218, 218); }
|
||||
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-width: 100%;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
font-family: var(--font-family);
|
||||
color: #000; }
|
||||
|
||||
body {
|
||||
display: flex; flex-direction: column;}
|
||||
|
||||
header {
|
||||
background: #f8f8f8;
|
||||
border-bottom: 1px solid var(--box-border);
|
||||
padding: 1rem;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-flow: row;
|
||||
flex: 0; }
|
||||
header > form {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
padding: 0 5px 0 5px;
|
||||
max-width: 800px; }
|
||||
header .inputWrapper {
|
||||
flex: 1; }
|
||||
header input[type=text] {
|
||||
width: 100%;
|
||||
background: white;
|
||||
border: 1px solid var(--input-border);
|
||||
text-shadow: none;
|
||||
box-shadow: none;
|
||||
transition: border 500ms ease-out;
|
||||
outline: none;
|
||||
box-sizing: border-box;
|
||||
padding-left: 2rem; }
|
||||
|
||||
#logo {
|
||||
flex: 1;
|
||||
text-align: right; }
|
||||
#logo select {
|
||||
background: none;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-size: .8rem; }
|
||||
|
||||
.ham-trigger {
|
||||
display: flex;
|
||||
color: #000;
|
||||
align-items: center;
|
||||
flex: 0;
|
||||
margin-right: 5px; }
|
||||
.ham-trigger i {
|
||||
font-size: 1.5rem; }
|
||||
|
||||
nav .ham-trigger {
|
||||
color: var(--text-on-background-color-2);
|
||||
margin: 0 0 0 5px;
|
||||
display: none; }
|
||||
|
||||
#t-nav-container {
|
||||
margin-left: auto; }
|
||||
|
||||
#content {
|
||||
flex: 1;
|
||||
padding-left: 1rem;
|
||||
overflow-y: auto; }
|
||||
|
||||
#t-nav {
|
||||
font-size: .8rem;
|
||||
color: #000;
|
||||
font-weight: bold; }
|
||||
#t-nav a {
|
||||
padding: 0 5px 0 5px;
|
||||
line-height: 25px; }
|
||||
#t-nav i {
|
||||
margin-right: 5px; }
|
||||
#t-nav li {
|
||||
display: inline; }
|
||||
#t-nav li:hover {
|
||||
color: var(--link-hover); }
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
background: #f1f1f1;
|
||||
flex: 1;
|
||||
box-sizing: border-box; }
|
||||
|
||||
#dim {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #000;
|
||||
opacity: 0.5;
|
||||
z-index: 5; }
|
||||
|
||||
#u-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 1rem 0 1rem;
|
||||
height: 60px;
|
||||
border-bottom: 1px solid var(--input-border);
|
||||
box-sizing: border-box; }
|
||||
#u-box img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%; }
|
||||
#u-box a {
|
||||
display: inline-block; }
|
||||
|
||||
#app-message-container {
|
||||
position: absolute;
|
||||
margin: 0 auto;
|
||||
right: 0;
|
||||
top: 0;
|
||||
padding: 85px 10px 0 0;
|
||||
}
|
||||
|
||||
.log-msg {
|
||||
z-index: 11;
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
right: 0;
|
||||
top: 0;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 500px) {
|
||||
nav .ham-trigger {
|
||||
display: flex; } }
|
||||
@media only screen and (max-width: 600px) {
|
||||
header {
|
||||
flex-flow: column;
|
||||
height: auto;
|
||||
padding: 1rem; }
|
||||
header form {
|
||||
width: 100%; }
|
||||
|
||||
#t-nav-container {
|
||||
order: -1;
|
||||
margin-bottom: .5rem; } }
|
||||
@media only screen and (max-width: 1000px) {
|
||||
#t-nav .link {
|
||||
display: none; } }
|
||||
|
|
@ -1,153 +0,0 @@
|
|||
@import "backend_vars";
|
||||
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-width: 100%;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
font-family: var(--font-family);
|
||||
color: #000;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
header {
|
||||
background: rgb(248, 248, 248);
|
||||
border-bottom: 1px solid var(--box-border);
|
||||
padding: 1rem;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-flow: row;
|
||||
flex: 0;
|
||||
|
||||
> form {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
padding: 0 5px 0 5px;
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.inputWrapper {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
input[type=text] {
|
||||
width: 100%;
|
||||
background: rgba(255, 255, 255, 1);
|
||||
border: 1px solid var(--input-border);
|
||||
text-shadow: none;
|
||||
box-shadow: none;
|
||||
transition : border 500ms ease-out;
|
||||
outline: none;
|
||||
box-sizing: border-box;
|
||||
padding-left: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
#logo {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
|
||||
select {
|
||||
background: none;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-size: .8rem;
|
||||
}
|
||||
}
|
||||
|
||||
#t-nav-container {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
#content {
|
||||
flex: 1;
|
||||
padding-left: 1rem;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#t-nav {
|
||||
font-size: .8rem;
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
|
||||
a {
|
||||
padding: 0 5px 0 5px;
|
||||
line-height: 25px;
|
||||
}
|
||||
|
||||
i {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
li {
|
||||
display: inline;
|
||||
|
||||
&:hover {
|
||||
color: var(--link-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
background: #f1f1f1;
|
||||
|
||||
flex: 1;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#dim {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #000;
|
||||
opacity: 0.5;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
#u-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 1rem 0 1rem;
|
||||
height: 60px;
|
||||
border-bottom: 1px solid var(--input-border);
|
||||
box-sizing: border-box;
|
||||
|
||||
img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
#app-message-container {
|
||||
position: absolute;
|
||||
margin: 0 auto;
|
||||
right: 0;
|
||||
top: 0;
|
||||
padding: 85px 10px 0 0;
|
||||
|
||||
.log-msg {
|
||||
z-index: 11;
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
right: 0;
|
||||
top: 0;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@import "timerecording_media";
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
@media only screen and (min-width: 1101px) {
|
||||
.b-1 {
|
||||
width: 31.5%;
|
||||
width: calc(33.3% - 10px); }
|
||||
|
||||
.b-2 {
|
||||
width: 48.5%;
|
||||
width: calc(50% - 10px); }
|
||||
|
||||
.b-3 {
|
||||
width: 63%;
|
||||
width: calc(66.6% - 10px); } }
|
||||
@media only screen and (min-width: 801px) and (max-width: 1100px) {
|
||||
.b-1 {
|
||||
width: 48.5%;
|
||||
width: calc(50% - 10px); } }
|
||||
@media only screen and (max-width: 1100px) {
|
||||
.b-2, .b-3 {
|
||||
width: 100%;
|
||||
width: calc(100% - 10px); } }
|
||||
@media only screen and (min-width: 801px) {
|
||||
.b-4 {
|
||||
width: 48.5%;
|
||||
width: calc(50% - 10px); } }
|
||||
@media only screen and (max-width: 800px) {
|
||||
.b-1, .b-3 {
|
||||
width: 100%;
|
||||
width: calc(100% - 10px); }
|
||||
|
||||
#logo {
|
||||
display: none; }
|
||||
|
||||
#s-nav {
|
||||
width: 100%; }
|
||||
|
||||
#s-bar input[type=text] {
|
||||
margin-left: 35px;
|
||||
width: 80%;
|
||||
width: calc(100% - 90px); } }
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
@media only screen and (max-width: 600px) {
|
||||
header {
|
||||
flex-flow: column;
|
||||
height: auto;
|
||||
padding: 1rem;
|
||||
|
||||
form {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
nav {
|
||||
order: -1;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1000px) {
|
||||
nav .link {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
:root {
|
||||
--main-background: rgb(46, 26, 90);
|
||||
--main-background-highlight: rgb(158, 81, 197);
|
||||
--input-border: rgba(166, 135, 232, .4);
|
||||
--input-border-active: rgba(166, 135, 232, .7);
|
||||
--input-color: rgba(166, 135, 232, .6);
|
||||
--input-color-active: rgba(166, 135, 232, .8);
|
||||
--input-icon-color: rgba(166, 135, 232, .6);
|
||||
--input-icon-color-active: rgba(166, 135, 232, 1);
|
||||
--button-main-background: rgba(166, 135, 232, .6);
|
||||
--button-main-background-active: rgba(166, 135, 232, .8);
|
||||
--button-main-color: rgba(255, 255, 255, .9);
|
||||
--text-on-background-color: rgba(255, 255, 255, 0.7);
|
||||
--nav-category-background: rgb(43, 58, 101);
|
||||
--nav-category-background-highlight: rgb(113, 43, 145);
|
||||
--nav-category-background-hover: rgb(120, 50, 153);
|
||||
--nav-sub-background: rgb(72, 39, 102);
|
||||
--nav-sub-background-highlight: rgb(94, 52, 133);
|
||||
--nav-sub-background-hover: rgb(116, 67, 161);
|
||||
--nav-header-background: rgb(72, 39, 102);
|
||||
--nav-header-background-highlight: rgb(94, 52, 133);
|
||||
--nav-header-background-hover: rgb(116, 67, 161);
|
||||
--font-family: 'Roboto', sans-serif;
|
||||
--box-border-color: rgb(202, 202, 202); }
|
||||
|
|
@ -1,55 +0,0 @@
|
|||
:root {
|
||||
--main-background: rgb(46, 26, 90);
|
||||
--main-background-highlight: rgb(158, 81, 197);
|
||||
|
||||
--input-border: rgba(166, 135, 232, .4);
|
||||
--input-border-active: rgba(166, 135, 232, .7);
|
||||
--input-color: rgb(116, 67, 161);
|
||||
--input-color-active: rgb(94, 52, 133);
|
||||
--input-background: rgba(255, 255, 255);
|
||||
--input-background-active: rgba(255, 255, 255);
|
||||
|
||||
--input-icon-color: rgba(166, 135, 232, .6);
|
||||
--input-icon-color-active: rgba(166, 135, 232, 1);
|
||||
|
||||
--button-main-background: rgba(166, 135, 232, .6);
|
||||
--button-main-background-active: rgba(166, 135, 232, .8);
|
||||
--button-main-color: rgba(255, 255, 255, .9);
|
||||
|
||||
--text-on-background-color: rgba(255, 255, 255, 0.7);
|
||||
--text-on-background-color-2: rgba(255, 255, 255, 0.85);
|
||||
|
||||
--nav-category-background: rgb(43, 58, 101);
|
||||
--nav-category-background-highlight: rgb(113, 43, 145);
|
||||
--nav-category-background-hover: rgb(120, 50, 153);
|
||||
|
||||
--nav-sub-background: rgb(72, 39, 102);
|
||||
--nav-sub-background-highlight: rgb(94, 52, 133);
|
||||
--nav-sub-background-hover: rgb(116, 67, 161);
|
||||
|
||||
--nav-header-background: rgb(72, 39, 102);
|
||||
--nav-header-background-highlight: rgb(94, 52, 133);
|
||||
--nav-header-background-hover: rgb(116, 67, 161);
|
||||
|
||||
--nav-content-hover: rgb(177, 97, 218);
|
||||
|
||||
--font-family: 'Roboto', sans-serif;
|
||||
|
||||
--button-colored-background: rgb(158, 81, 197);
|
||||
--button-colored-background-hover: rgb(177, 97, 218);
|
||||
|
||||
--table-caption-background: rgb(255, 255, 255);
|
||||
--table-head-background: rgb(236, 232, 255);
|
||||
--table-row-background: rgb(255, 255, 255);
|
||||
--table-row-background-alt: rgb(255, 255, 255);
|
||||
--table-row-background-hover: rgb(220, 211, 255);
|
||||
|
||||
--link-color: rgb(72, 39, 102);
|
||||
--link-hover: rgb(158, 81, 197);
|
||||
|
||||
--badge-size: .55rem;
|
||||
--badge-color: rgb(255, 255, 255);
|
||||
--badge-background: rgb(158, 81, 197);
|
||||
|
||||
--box-border: rgb(218, 218, 218);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user