Skip to content

Commit

Permalink
Made header work better for small resolutions.
Browse files Browse the repository at this point in the history 
Now using flexbox for the header.
Cleaned some CSS by moving things around.
Removed some stuff from menu css/html also.
  • Loading branch information
@henrinie
henrinie committed Aug 10, 2017
1 parent f856bef commit ebf196a
Show file tree
Hide file tree
Showing 5 changed files with 333 additions and 342 deletions.
342 changes: 242 additions & 100 deletions signbank/static/css/signbank.css
View file
Original file line number Diff line number Diff line change
@@ -1,102 +1,10 @@
/* This is the PRIMARY_CSS file of signbank app */
html {
/* */
}
#leftcontentborder {
/* */
}
#rightcontentborder {
/* */
}
#header {
padding-left: 1em;
padding-right: 1em;
background: #2980b9;
min-height: 60px;
clear: both;
position: relative;
margin: 0 -1px 0 -1px; /* To match the border of menu / nav */

/* Used in comment applications list.html template */
section p {
word-wrap: break-word;
}
#header a {
text-decoration: none;
float: left;
color: #133a53;
}
#header h1 {
margin-top: 10px;
}
#headertitle {
float: left;
}
#langbar {
float: right;
padding-top: 10px;
}
#langselect {
float: right;
}
.languageform {
float: left;
padding-left: 5px;
}
#login {
float: right;
padding-left: 10px;
}
.register-button {
margin-left: 5px;
}
.width-100 li, .width-100 a {
width: 100%;
}
#menu {
padding-left: 1em;
padding-right: 1em;
clear: both;
position: relative;
}
.menu-hr {
margin-top: 5px;
margin-bottom: 5px;
}
#footer a {
color: #828282;
}
#footer a:focus {
color: #575757;
}
#footercontainer {
min-height: 70px;
}
.footerbg {
background-color: #f5f5f5;
margin-left: 0px;
margin-right: 0px;
}
#logoholder {
float: left;
position: relative;
padding-top: 5px;
padding-bottom: 5px;
padding-right: 0px;
}
#logojy {
max-width: 140px;
max-height: 70px;
float: left;
margin-right: 20px;
}
#logokl {
padding-top: 25px;
padding-bottom: 9px;
max-width: 187px;
max-height: 70px;
float: left;
}
#license {
padding-top: 15px;
}

.searchinput {
padding-left: 0px;
padding-bottom: 5px;
Expand Down Expand Up @@ -130,7 +38,241 @@ html {
.tooltip-thumbnail {
max-width: 280px;
}
/* Used in comment applications list.html template */
section p {
word-wrap: break-word;
}

#signinfo {
background-color: #ffffff;
margin-bottom: 0px;
}
#signinfo .navbar-text {
color: #FFFFFF;
}
#signinfo #editbutton {
margin-right: 15px;
}
#definitionblock {
border-top: 1px solid #000;
margin-top: 0px;
background-color: #FFF;
}
@media (min-width: 992px) {
#definitionblock .col-md-8 {
padding-left: 60px;
}
}
#leftblock {
float: left;
}
#videocontainer {
margin: auto;
}
#videocontainer .player {
margin: auto;
background-color: white;
margin-bottom: 5px;
}
.player video {
border-style: solid;
border-color: #F0F0F0;
border-width: 0px 1px 1px;
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 5px;
}
.videocontainer {
margin: auto;
position: relative;
}
.videocontainer .player {
margin: auto;
background-color: white;
}
#novideo
{
margin: 10px 0px 10px 0px;
display: block;
height: 100px;
text-align: center;
}
#videoiframe {
-webkit-border-radius: 0px 0px 10px 10px;
-moz-border-radius: 0px 0px 10px 10px;
border-radius: 0px 0px 10px 10px;
width:460px;
height:259px;
}
#definition {
padding-left: 6px;
}
/* admin search form */
#searchformwell {
background: #FFFFFF;
}
#adminsearch td input {
width: 100%;
}
#adminsearch #searchpanels > td {
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}
#adminsearch #searchfields td {
width: 33%;
border-top: 0px;
}
#adminsearch .table
{
margin-bottom: 5px;
}
#adminsearch .table-condensed .table-condensed
{
margin-bottom: 0px;
}
#adminsearch #searchpanels {
width: 100%;
}
#adminsearch #searchpanels select {
width: 100%;
}
.pagination {
margin: 0 0 5px 0;
}
#paginate_by select {
width: 100px;
}
#paginate_by {
float: right;
}
#paginate_by label {
display: inline;
}
#paginate_by select {
display: inline-block;
}
/* editing gloss */
.edit_enabled {
background-color: red;
}
#definition .table th {
width: 20em;
}

/* tag code adapted from http://cssglobe.com/pure-css3-post-tags/ */
.taglist {
margin:0;
padding:0;
list-style:none;
}
.tag {
float:left;
height:24px;
line-height:24px;
position:relative;
margin-left:20px;
margin-top: 5px;
margin-bottom: 5px;
padding:0 10px 0 12px;
background:#0089e0;
color:#fff;
text-decoration:none;
-moz-border-radius-bottomright:4px;
-webkit-border-bottom-right-radius:4px;
border-bottom-right-radius:4px;
-moz-border-radius-topright:4px;
-webkit-border-top-right-radius:4px;
border-top-right-radius:4px;
}
.tag:before {
content:"";
float:left;
position:absolute;
top:0;
left:-12px;
width:0;
height:0;
border-color:transparent #0089e0 transparent transparent;
border-style:solid;
border-width:12px 12px 12px 0;
}
.tag:after {
content:"";
position:absolute;
top:10px;
left:0;
float:left;
width:4px;
height:4px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
background:#fff;
-moz-box-shadow:-1px -1px 2px #004977;
-webkit-box-shadow:-1px -1px 2px #004977;
box-shadow:-1px -1px 2px #004977;
}
.tagdelete {
color: red;
}
#tagaddform {
clear: both;
}
td .tag {
margin-left: 15px;
margin-top: 0px;
margin-bottom: 1px;
padding: 0px 10px 0px 8px;
}

/* These styles are for typeahead script */
/*.typeahead,
.tt-query,
.tt-hint {*/
/*width: 396px;*/
/*height: 30px;
padding: 8px 12px;
font-size: 24px;
line-height: 30px;
border: 2px solid #ccc;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
outline: none;
}*/
/*.typeahead {
background-color: #fff;
}
.typeahead:focus {
border: 2px solid #0097cf;
}*/
/*.tt-query {
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}*/
.tt-hint {
color: #999;
}
.tt-menu {
max-width: 422px;
margin-top: 8px;
padding: 8px 0;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
-moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
box-shadow: 0 5px 10px rgba(0,0,0,.2);
}
.tt-suggestion {
padding: 3px 20px;
line-height: 20px;
}
/*.tt-suggestion.tt-cursor {
color: #fff;
background-color: #0097cf;
}
.tt-suggestion p {
margin: 0;
}*/
Loading

0 comments on commit ebf196a

Please sign in to comment.