michael.dollinger/mlmmj-light-web-ecg
1
0
Fork 0
forked from services/mlmmj-light-web-ecg
Code Issues Pull Requests Projects Releases Wiki Activity

UI improvement - light layout changes #17

Browse Source
This commit is contained in:
Michael Dollinger
2022-05-15 10:37:02 +02:00
parent 40bf54a504
commit 3eda42ad1a
1 changed files with 94 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

237
style.css
View File

@@ -1,5 +1,4 @@
body body {
{
margin: 0; margin: 0;
padding: 0; padding: 0;
font-family: sans-serif; font-family: sans-serif;
@@ -7,14 +6,12 @@ body
height: 100%; height: 100%;
} }
form form {
{
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
a a {
{
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
cursor: pointer; cursor: pointer;
@@ -22,18 +19,15 @@ a
text-decoration: none; text-decoration: none;
} }
a:hover a:hover {
{
color: #66ccff; color: #66ccff;
} }
td td {
{
padding-right: 8px; padding-right: 8px;
} }
#header #header {
{
font-size: 30px; font-size: 30px;
background-color: #222222; background-color: #222222;
color: #9d9d9d; color: #9d9d9d;
@@ -48,48 +42,40 @@ td
justify-content: space-between; justify-content: space-between;
} }
#error #error {
{
padding-top: 15px; padding-top: 15px;
padding-left: 30px; padding-left: 30px;
} }
#header_left #header_left {
{
float: left; float: left;
} }
#header_left a #header_left a {
{
color: #9d9d9d; color: #9d9d9d;
} }
#header_left a:hover #header_left a:hover {
{
color: #66ccff; color: #66ccff;
} }
#header_right #header_right {
{
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 20px; font-size: 20px;
} }
#header_right a #header_right a {
{
color: #9d9d9d; color: #9d9d9d;
} }
#header_right a:hover #header_right a:hover {
{
color: #66ccff; color: #66ccff;
} }
#login #login {
{
width: 100%; width: 100%;
position: absolute; position: absolute;
top: 60px; top: 60px;
@@ -97,45 +83,45 @@ td
display: flex; display: flex;
} }
#login_form #login_form {
{ width: 400px;
width: 250px;
padding: 10px; padding: 10px;
margin: auto; margin: auto;
align-self: center; align-self: center;
} }
#login_form > form {
width: 300px;
}
#username, #password #username, #password {
{
width: 100%; width: 100%;
padding-bottom: 5px; padding-bottom: 5px;
display: flex; display: flex;
} }
#username_left, #password_left #username_left, #password_left {
{
align-self: center; align-self: center;
} }
#username_right, #password_right #username_right, #password_right {
{
margin-left: auto; margin-left: auto;
} }
#username_input, #password_input #username_input, #password_input {
{
width: 170px; width: 170px;
} }
#enter #enter {
{ width: 100%;
padding-top: 5px; padding-top: 5px;
display: inline-block; display: inline-block;
margin-left: 80px; # margin-left: 80px;
}
#enter > input {
width: 100%;
} }
#breadcrumbs #breadcrumbs {
{
height: 40px; height: 40px;
background-color: #f5f5f5; background-color: #f5f5f5;
margin-top: 20px; margin-top: 20px;
@@ -147,43 +133,36 @@ td
align-items: center; align-items: center;
} }
#index #index {
{
margin-left: 30px; margin-left: 30px;
} }
#lists_header #lists_header {
{
margin-bottom: 10px; margin-bottom: 10px;
display: flex; display: flex;
align-items: center; align-items: center;
} }
#lists #lists {
{
padding-left: 17px; padding-left: 17px;
margin-bottom: 5px; margin-bottom: 5px;
} }
#add_list #add_list {
{
display: flex; display: flex;
padding-left: 20px; padding-left: 20px;
} }
#add_list_input #add_list_input {
{
width: 170px; width: 170px;
} }
.tooltip .tooltip {
{
position: relative; position: relative;
display: inline-block; display: inline-block;
} }
.tooltip .help_add_list .tooltip .help_add_list {
{
visibility: hidden; visibility: hidden;
width: 450px; width: 450px;
background-color: #111; background-color: #111;
@@ -197,8 +176,7 @@ td
left: 170%; left: 170%;
} }
.tooltip .help_add_list::after .tooltip .help_add_list::after {
{
content: ""; content: "";
position: absolute; position: absolute;
top: 5px; top: 5px;
@@ -209,142 +187,131 @@ td
border-color: transparent #111 transparent transparent; border-color: transparent #111 transparent transparent;
} }
.tooltip:hover .help_add_list .tooltip:hover .help_add_list {
{
visibility: visible; visibility: visible;
} }
#edit_page #edit_page {
{
display: table; display: table;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.success .success {
{
font-weight: bold; font-weight: bold;
color: #00aa00; color: #00aa00;
text-align: center; text-align: center;
} }
#save_list #save_list {
{ background-color: #f5f5f5;
margin-top: 20px; margin-top: 20px;
margin-bottom: 20px; margin-bottom: 20px;
margin-left: 30px; margin-left: 30px;
margin-right: 30px; margin-right: 30px;
height: calc(100% - 170px); height: calc(100% - 280px);
min-height: 400px; min-height: 400px;
width: calc(100% - 60px); width: calc(100% - 60px);
} }
#column_left #column_left {
{
height: 100%; height: 100%;
display: table-cell; display: table-cell;
min-width: 300px; min-width: 300px;
} }
#subscribers_header #subscribers_header {
{
height: 30px; height: 30px;
width: 300px; width: 350px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-left: auto; margin-left: auto;
} }
#subscribers_body #subscribers_body {
{ height: calc(100% - 50px);
height: calc(100% - 100px); width: 350px;
width: 300px;
margin-left: auto; margin-left: auto;
} }
#subscribers #subscribers {
{
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
#column_right #column_right {
{
height: 100%; height: 100%;
display: table-cell; display: table-cell;
min-width: 320px; min-width: 320px;
} }
#moderators_header #moderators_header {
{
height: 30px; height: 30px;
width: 300px; width: 350px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
#moderators_body #moderators_body {
{ height: calc(100% - 50px);
height: calc(100% - 100px); width: 350px;
width: 300px;
} }
#moderators #moderators {
{
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
#column_middle #column_middle {
{
padding-top: 30px; padding-top: 30px;
width: 500px; width: 500px;
height: 100%;
display: table-cell; display: table-cell;
min-width: 440px; min-width: 440px;
vertical-align: top; vertical-align: top;
padding-bottom: 20px; padding-bottom: 20px;
} }
#column_middle_inner #column_middle_inner {
{
height: 100%; height: 100%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
flex-direction: column; flex-direction: column;
} }
#table_middle .table_middle {
{ width: 100%;
text-align: right; # text-align: center;
margin: auto; margin-bottom: 30px;
padding: 0 25px 0 25px;
} }
#table_middle td #table_middle td {
{
padding-bottom: 10px; padding-bottom: 10px;
} }
#prefix, #list_type #prefix, #list_type {
{
width: 100%; width: 100%;
} }
#footer #footer {
{
width: 100%; width: 100%;
height: 100px; height: 100px;
} }
#save_btn #save_btn {
{
text-align: center; text-align: center;
width: 100%;
height: 30px;
}
#save_btn > input {
text-align: center;
height: 30px;
width: 50%;
} }
.tooltip .help_sub, .tooltip .help_mod .tooltip .help_sub, .tooltip .help_mod {
{
visibility: hidden; visibility: hidden;
width: 250px; width: 250px;
background-color: #111; background-color: #111;
@@ -359,8 +326,7 @@ td
margin-left: -133px; margin-left: -133px;
} }
.tooltip .help_sub::after, .tooltip .help_mod::after .tooltip .help_sub::after, .tooltip .help_mod::after {
{
content: ""; content: "";
position: absolute; position: absolute;
bottom: 100%; bottom: 100%;
@@ -371,13 +337,11 @@ td
border-color: transparent transparent #111 transparent; border-color: transparent transparent #111 transparent;
} }
.tooltip:hover .help_sub, .tooltip:hover .help_mod .tooltip:hover .help_sub, .tooltip:hover .help_mod {
{
visibility: visible; visibility: visible;
} }
.tooltip .help_list_type .tooltip .help_list_type {
{
visibility: hidden; visibility: hidden;
width: 300px; width: 300px;
background-color: #111; background-color: #111;
@@ -391,8 +355,7 @@ td
right: 170%; right: 170%;
} }
.tooltip .help_list_type::after .tooltip .help_list_type::after {
{
content: ""; content: "";
position: absolute; position: absolute;
top: 5px; top: 5px;
@@ -403,19 +366,16 @@ td
border-color: transparent transparent transparent #111; border-color: transparent transparent transparent #111;
} }
.tooltip:hover .help_list_type .tooltip:hover .help_list_type {
{
visibility: visible; visibility: visible;
} }
#list_type_header, #prefix_header, #footer_header, #notmetoo_header #list_type_header, #prefix_header, #footer_header, #notmetoo_header, #listdescription_header {
{
display: flex; display: flex;
align-items: center; align-items: center;
} }
.tooltip .help_prefix .tooltip .help_prefix {
{
visibility: hidden; visibility: hidden;
width: 200px; width: 200px;
background-color: #111; background-color: #111;
@@ -429,8 +389,7 @@ td
right: 160%; right: 160%;
} }
.tooltip .help_prefix::after .tooltip .help_prefix::after {
{
content: ""; content: "";
position: absolute; position: absolute;
top: 50%; top: 50%;
@@ -441,13 +400,11 @@ td
border-color: transparent transparent transparent #111; border-color: transparent transparent transparent #111;
} }
.tooltip:hover .help_prefix .tooltip:hover .help_prefix {
{
visibility: visible; visibility: visible;
} }
.tooltip .help_footer .tooltip .help_footer {
{
visibility: hidden; visibility: hidden;
width: 200px; width: 200px;
background-color: #111; background-color: #111;
@@ -461,8 +418,7 @@ td
right: 160%; right: 160%;
} }
.tooltip .help_footer::after .tooltip .help_footer::after {
{
content: ""; content: "";
position: absolute; position: absolute;
top: 50%; top: 50%;
@@ -473,19 +429,16 @@ td
border-color: transparent transparent transparent #111; border-color: transparent transparent transparent #111;
} }
.tooltip:hover .help_footer .tooltip:hover .help_footer {
{
visibility: visible; visibility: visible;
} }
#notmetoo_checkbox #notmetoo_checkbox {
{
margin-left: 5px; margin-left: 5px;
margin-right: 5px; margin-right: 5px;
} }
.tooltip .help_notmetoo .tooltip .help_notmetoo {
{
visibility: hidden; visibility: hidden;
width: 300px; width: 300px;
background-color: #111; background-color: #111;
@@ -499,8 +452,7 @@ td
right: 160%; right: 160%;
} }
.tooltip .help_notmetoo::after .tooltip .help_notmetoo::after {
{
content: ""; content: "";
position: absolute; position: absolute;
top: 50%; top: 50%;
@@ -511,7 +463,6 @@ td
border-color: transparent transparent transparent #111; border-color: transparent transparent transparent #111;
} }
.tooltip:hover .help_notmetoo .tooltip:hover .help_notmetoo {
{
visibility: visible; visibility: visible;
} }