Démelage de spaghettis !
This commit is contained in:
29
static/styles/colors.css
Normal file
29
static/styles/colors.css
Normal file
@@ -0,0 +1,29 @@
|
||||
/*
|
||||
* Here are the base color scheme and icon set.
|
||||
* You can modify it or create your own using the same variables
|
||||
* and make it loaded after this one but before the fonts.css in
|
||||
* the HTML header section of the index.html template file.
|
||||
*/
|
||||
:root {
|
||||
--coloured-bg: #FF5D00;
|
||||
--light-coloured-bg: #FFB387;
|
||||
--clear-bg: #E5E5E5;
|
||||
--mid-bg: #BBBBBB;
|
||||
--dark-bg: #2B2B2B;
|
||||
--dark-border: #888888;
|
||||
--text-color: #555555;
|
||||
--white: #FFFFFF;
|
||||
--black: #000000;
|
||||
--font-normal: url("/static/fonts/RobotoCondensed-Regular.ttf") format("truetype");
|
||||
--font-bold: url("/static/fonts/RobotoCondensed-Bold.ttf") format("truetype");
|
||||
--banner-logo: url(/static/images/logo.png);
|
||||
--add_icon: url(/static/images/add.png);
|
||||
--edit_icon: url(/static/images/edit.png);
|
||||
--login_icon: url(/static/images/login.png);
|
||||
--logout_icon: url(/static/images/logout.png);
|
||||
--refresh_icon: url(/static/images/refresh.png);
|
||||
--save_icon: url(/static/images/save.png);
|
||||
--search_icon: url(/static/images/search.png);
|
||||
--trash_icon: url(/static/images/trash.png);
|
||||
--upload_icon: url(/static/images/upload.png);
|
||||
}
|
||||
20
static/styles/fonts.css
Normal file
20
static/styles/fonts.css
Normal file
@@ -0,0 +1,20 @@
|
||||
/*
|
||||
* Here are the font definitions.
|
||||
* You can modify it or create your own and make it loaded
|
||||
* after this one in the HTML header section of the index.html
|
||||
* template file.
|
||||
*/
|
||||
|
||||
@font-face {
|
||||
font-family: "Roboto Condensed";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: var(--font-normal);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Roboto Condensed";
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: var(--font-bold);
|
||||
}
|
||||
370
static/styles/tetawebapp.css
Normal file
370
static/styles/tetawebapp.css
Normal file
@@ -0,0 +1,370 @@
|
||||
/*
|
||||
* Do NOT modify this file:
|
||||
* ------------------------
|
||||
* If you want to add or modify classes, create a new
|
||||
* CSS files and make it loaded after this one in the
|
||||
* HTML header section of the index.html template file.
|
||||
*/
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 10px;
|
||||
font-family: "Roboto Condensed";
|
||||
background-color: var(--dark-bg);
|
||||
}
|
||||
|
||||
div.content {
|
||||
display: flex;
|
||||
min-height: calc(100vh - 110px);
|
||||
}
|
||||
|
||||
main > article {
|
||||
flex: 1;
|
||||
background-color: var(--clear-bg);
|
||||
}
|
||||
|
||||
main > section.inline {
|
||||
display: flex;
|
||||
background-color: var(--clear-bg);
|
||||
}
|
||||
|
||||
main > section.inline > article.left {
|
||||
flex: 0 0 50%;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
main > section.inline > article.right {
|
||||
flex: 1;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
div.content > nav.vertical {
|
||||
flex: 0 0 200px;
|
||||
background-color: var(--clear-bg);
|
||||
border-right-color: var(--mid-bg);
|
||||
border-right-style: solid;
|
||||
border-right-width: 1px;
|
||||
}
|
||||
|
||||
div.content > nav.vertical {
|
||||
order: -1;
|
||||
display: block;
|
||||
}
|
||||
|
||||
div.content > nav.vertical > a {
|
||||
display: block;
|
||||
background-color: var(--clear-bg);
|
||||
font-size: 20px;
|
||||
color: var(--text-color);
|
||||
padding: 5px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
div.content > nav.vertical > a:hover {
|
||||
background-color: var(--coloured-bg);
|
||||
color: var(--white);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
div.content > nav.vertical > a.selected {
|
||||
background-color: var(--light-coloured-bg);
|
||||
}
|
||||
|
||||
main {
|
||||
color: var(--text-color);
|
||||
background-color: var(--clear-bg);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
main > div.navbar_container {
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
main > div.navbar_container > ul.horizontal {
|
||||
display: inline-block;
|
||||
list-style-type: none;
|
||||
margin: 10px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
background-color: var(--white);
|
||||
border-color: var(--coloured-bg);
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
color: var(--text-color);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
main > div.navbar_container > ul.horizontal > li {
|
||||
float: left;
|
||||
}
|
||||
|
||||
main > div.navbar_container > ul.horizontal > li > a {
|
||||
display: block;
|
||||
color: var(--text-color);
|
||||
text-align: center;
|
||||
padding: 5px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
main > div.navbar_container > ul.horizontal > li > a:hover {
|
||||
background-color: var(--coloured-bg);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
main > div.navbar_container > ul.horizontal > li > a.right_border {
|
||||
border-right-color: var(--coloured-bg);
|
||||
border-right-style: solid;
|
||||
border-right-width: 1px;
|
||||
}
|
||||
|
||||
main > div.navbar_container > ul.horizontal > li > a.selected {
|
||||
background-color: var(--light-coloured-bg);
|
||||
}
|
||||
|
||||
main > article {
|
||||
padding: 10px;
|
||||
color: var(--text-color);
|
||||
display: block;
|
||||
}
|
||||
|
||||
main > article.error,
|
||||
main > article.error > p {
|
||||
padding: 10px;
|
||||
color: var(--text-color);
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
main > article > h3,
|
||||
main > section.inline > article > h3 {
|
||||
font-size: 30px;
|
||||
color: var(--text-color);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
main > article > p,
|
||||
main > article > ul,
|
||||
main > article > ol {
|
||||
color: var(--text-color);
|
||||
text-align: justify;
|
||||
text-justify: distribute;
|
||||
}
|
||||
|
||||
main > hr {
|
||||
border-color: var(--mid-bg);
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
main > article > img {
|
||||
display:inline-block;
|
||||
border-color: var(--mid-bg);
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
main > article > p > a {
|
||||
color: var(--coloured-bg);
|
||||
}
|
||||
|
||||
main > article > p > a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
main > article.right > img {
|
||||
float: right;
|
||||
margin: 0 0 0px 10px;
|
||||
}
|
||||
|
||||
main > article.left > img {
|
||||
float: left;
|
||||
margin: 0 10px 0px 0;
|
||||
}
|
||||
|
||||
header {
|
||||
height: 65px;
|
||||
font-size: 34px;
|
||||
padding: 10px;
|
||||
text-align: right;
|
||||
color: var(--white);
|
||||
background: var(--banner-logo);
|
||||
background-repeat: no-repeat;
|
||||
background-position: 10px;
|
||||
text-shadow: 0 0 1px var(--black);
|
||||
border-bottom-color: var(--dark-border);
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 1px;
|
||||
border-top-color: var(--white);
|
||||
border-top-style: solid;
|
||||
border-top-width: 1px;
|
||||
}
|
||||
|
||||
footer {
|
||||
height: 35px;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
padding: 1em;
|
||||
border-bottom-color: var(--white);
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 1px;
|
||||
border-top-color: var(--dark-border);
|
||||
border-top-style: solid;
|
||||
border-top-width: 1px;
|
||||
}
|
||||
|
||||
header,
|
||||
footer {
|
||||
background-color: var(--coloured-bg);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="password"],
|
||||
textarea,
|
||||
select,
|
||||
pre {
|
||||
border-color: var(--dark-border);
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
background-color: var(--white);
|
||||
color: var(--text-color);
|
||||
padding: 5px;
|
||||
font-family: "Roboto Condensed";
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
pre {
|
||||
border-color: var(--coloured-bg);
|
||||
}
|
||||
|
||||
button,
|
||||
input[type="button"],
|
||||
input[type="submit"] {
|
||||
border-color: var(--dark-border);
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
background-color: var(--coloured-bg);
|
||||
color: var(--white);
|
||||
font-weight: bold;
|
||||
padding: 5px;
|
||||
font-family: "Roboto Condensed";
|
||||
margin: 5px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
button:hover,
|
||||
input[type="button"]:hover,
|
||||
input[type="submit"]:hover,
|
||||
input[type="file"]:hover {
|
||||
background-color: var(--light-coloured-bg);
|
||||
color: var(--text-color);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
div.file_upload {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-radius: 2px;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
border-color: var(--clear-bg);
|
||||
}
|
||||
|
||||
input[type="file"] {
|
||||
position: absolute;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
left: 0;
|
||||
top: 1px;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
|
||||
input.add,
|
||||
input.edit,
|
||||
input.login,
|
||||
input.logout,
|
||||
input.refresh,
|
||||
input.save,
|
||||
input.search,
|
||||
input.trash,
|
||||
input.upload {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-radius: 2px;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
input.add:hover,
|
||||
input.edit:hover,
|
||||
input.login:hover,
|
||||
input.logout:hover,
|
||||
input.refresh:hover,
|
||||
input.save:hover,
|
||||
input.search:hover,
|
||||
input.trash:hover,
|
||||
input.upload:hover {
|
||||
border-color: var(--text-color);
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
background-color: var(--coloured-bg);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input.add {
|
||||
background: var(--add_icon);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
}
|
||||
input.edit {
|
||||
background: var(--edit_icon);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
}
|
||||
input.login {
|
||||
background: var(--login_icon);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
}
|
||||
input.logout {
|
||||
background: var(--logout_icon);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
}
|
||||
input.refresh {
|
||||
background: var(--refresh_icon);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
}
|
||||
input.save {
|
||||
background: var(--save_icon);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
}
|
||||
input.search {
|
||||
background: var(--search_icon);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
}
|
||||
input.trash {
|
||||
background: var(--trash_icon);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
}
|
||||
input.upload {
|
||||
background: var(--upload_icon);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
}
|
||||
Reference in New Issue
Block a user