Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

GUI improvements #11

Merged
merged 2 commits into from
Jan 10, 2022
Merged

GUI improvements #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c988047
Add CSS Styles
jayeclark Jan 9, 2022
0a9fead
Update unions by list and fix nWay input hiding
jayeclark Jan 9, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
331 changes: 297 additions & 34 deletions web/css/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ path:hover
margin: 0;
padding: 0;
text-align: left;
box-sizing: border-box;
}

/* Headings */
Expand Down Expand Up @@ -86,28 +87,7 @@ dd {margin-left: 1.5em;}

/* Quotes */
blockquote {font-style: italic;}
cite {}

q {}

/* Tables */
table {margin: .5em auto 1.5em auto; width: 98%;}

/* Thead */
thead th {padding: .5em .4em; text-align: left;}
thead td {}

/* Tbody */
tbody td {padding: .5em .4em;}
tbody th {}

tbody .alt td {}
tbody .alt th {}

/* Tfoot */
tfoot th {}
tfoot td {}


/* HTML5 tags */
header, section, footer,
aside, nav, article, figure {
Expand Down Expand Up @@ -162,7 +142,7 @@ img.left, figure.left {float: right; margin: 0 0 2em 2em;}
}

#banner nav ul {list-style: none; margin: 0 auto; width: 1000px;}
#banner nav li {float: left; display: inline; margin: 0;}
#banner nav li {float: left; display: inline;}

#banner nav a:link, #banner nav a:visited {
color: #fff;
Expand All @@ -177,16 +157,7 @@ img.left, figure.left {float: right; margin: 0 0 2em 2em;}
color: #fff;
text-shadow: none !important;
}

#banner nav li:first-child a {
border-top-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;

border-bottom-left-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
}


/*
Featured
Expand Down Expand Up @@ -233,6 +204,71 @@ img.left, figure.left {float: right; margin: 0 0 2em 2em;}
-webkit-border-radius: 10px;
}

/*
Forms
*****************/

input {
padding: 5px;
margin: 2px;
border: 1px solid #aaa;
border-radius: 4px;
}

input[type="file"] {
border: none;
}

textarea {
border: 1px solid #aaa;
border-radius: 4px;
}

button {
padding: 5px 10px;
margin: 2px;
border: 1px solid rgb(118,118,118);
border-radius: 4px;
background-color: #ccc;
opacity: 0.8;
cursor: pointer;
}

button:hover, button:active {
background-color: #bbb;
}

button.danger {
color: white;
background-color: rgb(199, 68, 81);
border: 1px solid rgb(199, 68, 81);
font-weight: bold;
}

button.success {
color: white;
background-color: rgb(0, 100, 0);
border: 1px solid rgb(0, 100, 0);
font-weight: bold;
}

button.danger:hover,
button.danger:active {
background-color: rgb(187, 34, 49);
}

button.success:hover,
button.success:active {
background-color: rgb(0, 73, 0);
}

button.success:disabled,
button.danger:disabled {
opacity: 0.5;
cursor: not-allowed;
}


/*
Extras
*****************/
Expand Down Expand Up @@ -366,4 +402,231 @@ li:last-child .hentry, #content > .hentry {border: 0; margin: 0;}
}

#about-author .photo {border: 1px solid #ddd; float: left; margin: 5px 1em 0 0;}


#mergeMenu {
width: 100%;
display: flex;
justify-content: space-between;
padding-bottom: 15px;
text-align: left;
padding:0px;
margin-bottom: 20px;
}

#mergeMenu .title {
display: inline-block;
width: 125px;
}

#mergeCode {
font-weight: bold;
}

#contentContainer {
display: flex;
justify-content: space-between;
width: 100%;
}

#imageContainer {
background-color: #efefef;
border-radius: 10px;
}

#imageContainer form {
padding: 16px 0px;
margin: 0px 16px 8px 16px;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
font-family: sans-serif;
font-size: 12pzx;
}

#imageContainer form span,
#imageContainer form p {
font-family: sans-serif;
font-size: 11px;
}

#imageContainer #fontsizedown,
#imageContainer #fontsizeup,
#imageContainer #opacitydown,
#imageContainer #opacityup {
width: 28px;
}

span .separator {
margin: 8px;
}

#newFeatures {
font-size:10px;
text-align: left;
margin-bottom: 16px;
padding-bottom: 16px;
border-bottom: 1px solid #ddd;
}

#newFeatures input {
margin-bottom: 16px;
}

.text-red {
color: red;
font-weight: bold;
}

.text-sm {
font-size: 12px;
}

.text-xs {
font-size: 11px;
}

#displayOptions {
font-size: 12px;
padding-top: 8px;
padding-bottom: 20px;
}

#leftColumn {
width: calc(71% - 32px);
max-width: calc(70% - 20px);
flex-grow: 0;
flex-shrink: 1;
text-align: center;
}

#diagramFrame {
position: relative;
left: 0pt;
top: 0pt;
width: 578px;
height: 578px;
border-radius: 8px;
}

#rightColumn {
font-family: sans-serif;
font-size: 12px;
width: 30%;
padding:0px;
flex-grow: 0;
flex-shrink: 0;
}

.rightColMargin {
margin-left: 17px;
}

#nWayMenu {
display:flex;
align-items: center;
margin-bottom: 16px;
}

#nWayMenu form {
display: flex;
align-items: center;
}

#rightColumn input[type="radio"] {
margin-bottom: 4px;
margin-left: 8px;
}

#dataMenu .divLabel {
display: inline-block;
width: 12px;
}

#dataMenu .elementsN {
display: inline-block;
}

#dataMenu input {
margin-top: 8px;
font-weight: bold;
}

#dataMenu .color {
width: 18px;
height: 18px;
}
#dataMenu .elementsN {
margin-left: 5px;
background-color: #eee;
padding: 3px 6px;
border-radius: 4px;
}


#dataMenu textarea {
margin-left: 17px;
width: calc(100% - 17px);
box-sizing: border-box;
}

#dataMenu input.color {
border-radius: 100%;
width: 13px!important;
height: 13px!important;
margin: 3px 0px;
border: 1px solid rgb(118, 118, 118);
}

#clearSets {
width: calc(100% - 17px);
margin-left: 17px;
margin-top: 8px;
}

#saveSets {
width: calc(100% - 17px);
margin-left: 17px;
}

#saveSetsInput {
margin-top: 16px;
margin-left: 11px;
padding-top: 3px;
border-top: 1px solid #ddd;
}

#loadSetsInput {
margin-top: 16px;
margin-left: 11px;
padding-top: 3px;
border-top: 1px solid #ddd;
}

#loadSetsInput input {
margin-bottom: 0px;
}

#loadSets {
width: calc(100% - 17px);
margin-left: 17px;
margin-top: 0px;
}

#sampleData {
margin: 16px 0px 0px 17px;
padding-bottom: 0px;
}

#citation {
display:flex;
text-align: left;
padding: 15px;
border:1px solid #ddd;
border-radius: 10px;
margin-top: 20px;
}

#citation .title {
width: 100px;
flex-grow: 0;
flex-shrink: 0;
}
Loading