Signal/Desktop
1
0
Fork 0
mirror of https://github.com/signalapp/Signal-Desktop.git synced 2025-12-24 20:26:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

Start on panels

Browse Source
This commit is contained in:
Riley Shaw
2015-01-15 18:41:44 -10:00
committed by lilia
parent 02d0c58e5e
commit 2cbcb28ee3
13 changed files with 451 additions and 331 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
stylesheets/_gutter.scss
View File

@@ -1,73 +0,0 @@
.gutter {
float:left;
border-right:1px solid lightgray;
width:240px;
position:relative;
background-color:blue;
z-index:100;
.contact {
float:left;
width:100%;
border-bottom:1px solid whitesmoke;
color:#333;
&:hover {
background-color:whitesmoke;
margin-top:-1px;
border-bottom:1px solid lightgray;
border-top:1px solid lightgray;
}
}
.contact-details {
position:relative;
width:156px;
float:left;
text-align: left;
h3 {
font-size:13px;
margin-bottom:4px;
}
.last-message {
color:lighten(#333, 40%);
letter-spacing:0.15px;
-webkit-text-stroke: 0.2px;
margin:0;
font-size: 12px;
}
.last-timestamp {
position:absolute;
top:14px;
right:8px;
font-size:12px;
font-weight: 500;
color:gray;
}
}
}
.avatar {
cursor:pointer;
height:56px;
width:56px;
display:inline-block;
margin:10px;
margin-right:14px;
float:left;
clear:both;
background-color:whitesmoke;
}
.search {
padding:10px;
border-bottom:1px solid whitesmoke;
input[type=search] {
box-sizing: border-box;
font-size:12px;
outline:0;
width:100%;
margin:0;
letter-spacing: 0.25px;
padding:4px 8px;
border:1px solid lightgray;
}
}

41
stylesheets/index.css
View File

@@ -1,41 +1,3 @@
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
body {
min-width: 320px;
min-height: 500px;
}
.number.error {
background-color: #ffdddd;
}
.gutter {
padding-bottom: 0;
overflow: hidden;
}
#contacts {
overflow-y: scroll;
}
#contacts::-webkit-scrollbar {
display: none;
}
.contact.selected {
background-color: aliceblue;
}
.gutter .contact .avatar {
background-position: center;
background-size: cover;
}
.conversation {
margin: 0;
padding: 0;
}
ul.discussion {
margin: 0;
padding: 10px;
@@ -115,6 +77,7 @@ img.preview {
ul.country-list {
min-width: 197px !important;
}
<<<<<<< HEAD
div.attachments {
width: 95% !important;
@@ -211,4 +174,4 @@ input.file-input {
font-size: 1em;
position: relative;
}
}
}

175
stylesheets/manifest.css
View File

@@ -81,99 +81,94 @@ body {
.gutter .search {
display: block; } }
@media screen and (min-width: 320px) {
.gutter {
width: 64px;
.gutter {
width: 100%;
float: left;
border-right: 1px solid lightgray;
position: relative;
box-sizing: border-box;
overflow: scroll;
background-color: white;
padding-bottom: 80px;
z-index: 100; }
.gutter .contact {
cursor: pointer;
float: left;
border-right: 1px solid lightgray;
position: relative;
box-sizing: border-box;
height: 458px;
overflow: scroll;
background-color: white;
padding-bottom: 80px; }
.gutter .contact {
cursor: pointer;
float: left;
width: 100%;
border-bottom: 1px solid whitesmoke;
color: #333; }
.gutter .contact:hover {
background-color: whitesmoke;
margin-top: -1px;
border-bottom: 1px solid lightgray;
border-top: 1px solid lightgray; }
.gutter .contact.active {
background-color: #ecfcff;
margin-top: -1px;
border-bottom: 1px solid lightgray;
border-top: 1px solid lightgray; }
.gutter .contact .avatar {
height: 42px;
width: 42px;
border-radius: 42px;
cursor: pointer;
display: inline-block;
margin: 10px;
margin-right: 14px;
float: left;
clear: both;
background-color: whitesmoke; }
.gutter .contact .contact-details {
display: none; } }
@media screen and (min-width: 480px) {
.gutter {
width: 240px;
height: auto;
z-index: 100; }
.gutter .search {
padding: 10px;
border-bottom: 1px solid whitesmoke; }
.gutter .search input[type=search] {
box-sizing: border-box;
font-size: 12px;
outline: 0;
width: 100%;
margin: 0;
letter-spacing: 0.25px;
padding: 4px 8px;
border: 1px solid lightgray; }
.gutter .search.d6 {
display: block; }
width: 100%;
border-bottom: 1px solid whitesmoke;
color: #333; }
.gutter .contact:hover {
background-color: whitesmoke;
margin-top: -1px;
border-bottom: 1px solid lightgray;
border-top: 1px solid lightgray; }
.gutter .contact.active {
background-color: #ecfcff;
margin-top: -1px;
border-bottom: 1px solid lightgray;
border-top: 1px solid lightgray; }
.gutter .contact .avatar {
height: 56px;
width: 56px; }
.gutter .contact .contact-details {
display: block;
position: relative;
width: 156px;
height: 42px;
width: 42px;
border-radius: 42px;
cursor: pointer;
display: inline-block;
margin: 10px;
margin-right: 14px;
float: left;
text-align: left; }
.gutter .contact .contact-details h3 {
font-size: 13px;
margin-bottom: 4px; }
.gutter .contact .contact-details .contact-name {
width: 105px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; }
.gutter .contact .contact-details .last-message {
color: #999999;
letter-spacing: 0.15px;
-webkit-text-stroke: 0.2px;
margin: 0;
font-size: 12px;
width: 150px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; }
.gutter .contact .contact-details .last-timestamp {
position: absolute;
top: 14px;
right: 8px;
font-size: 12px;
font-weight: 500;
color: gray; } }
clear: both;
background-color: whitesmoke; }
.gutter .contact .contact-details {
display: none; }
.gutter .search {
padding: 10px;
border-bottom: 1px solid whitesmoke; }
.gutter .search input[type=search] {
box-sizing: border-box;
font-size: 12px;
outline: 0;
width: 100%;
margin: 0;
letter-spacing: 0.25px;
padding: 4px 8px;
border: 1px solid lightgray; }
.gutter .search.d6 {
display: block; }
.gutter .contact .avatar {
height: 56px;
width: 56px; }
.gutter .contact .contact-details {
display: block;
position: relative;
width: 156px;
float: left;
text-align: left; }
.gutter .contact .contact-details h3 {
font-size: 13px;
margin-bottom: 4px; }
.gutter .contact .contact-details .contact-name {
width: 105px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; }
.gutter .contact .contact-details .last-message {
color: #999999;
letter-spacing: 0.15px;
-webkit-text-stroke: 0.2px;
margin: 0;
font-size: 12px;
width: 150px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; }
.gutter .contact .contact-details .last-timestamp {
position: absolute;
top: 14px;
right: 8px;
font-size: 12px;
font-weight: 500;
color: gray; }
.conversation {
margin-top: 10px;
width: 100%;

2
stylesheets/manifest.css.map
View File

File diff suppressed because one or more lines are too long

202
stylesheets/view/_gutter.scss
View File

@@ -1,119 +1,107 @@
@media #{$D7} {
.gutter {
width:64px;
.gutter {
width:100%;
float:left;
border-right:1px solid lightgray;
position:relative;
box-sizing: border-box;
overflow: scroll;
background-color:white;
padding-bottom:80px;
.contact {
cursor:pointer;
float:left;
border-right:1px solid lightgray;
position:relative;
box-sizing: border-box;
height:458px;
overflow: scroll;
background-color:white;
padding-bottom:80px;
.search {
//display:none;
width:100%;
border-bottom:1px solid whitesmoke;
color:#333;
&:hover {
background-color:whitesmoke;
margin-top:-1px;
border-bottom:1px solid lightgray;
border-top:1px solid lightgray;
}
.contact {
&.active {
background-color:$lightblue;
margin-top:-1px;
border-bottom:1px solid lightgray;
border-top:1px solid lightgray;
}
.avatar {
height:42px;
width:42px;
border-radius:42px;
cursor:pointer;
display:inline-block;
margin:10px;
margin-right:14px;
float:left;
clear:both;
background-color:whitesmoke;
}
.contact-details {
display:none;
}
}
z-index:100;
.search {
padding:10px;
border-bottom:1px solid whitesmoke;
input[type=search] {
box-sizing: border-box;
font-size:12px;
outline:0;
width:100%;
border-bottom:1px solid whitesmoke;
color:#333;
&:hover {
background-color:whitesmoke;
margin-top:-1px;
border-bottom:1px solid lightgray;
border-top:1px solid lightgray;
}
&.active {
background-color:$lightblue;
margin-top:-1px;
border-bottom:1px solid lightgray;
border-top:1px solid lightgray;
}
.avatar {
height:42px;
width:42px;
border-radius:42px;
cursor:pointer;
display:inline-block;
margin:10px;
margin-right:14px;
float:left;
clear:both;
background-color:whitesmoke;
}
.contact-details {
display:none;
}
margin:0;
letter-spacing: 0.25px;
padding:4px 8px;
border:1px solid lightgray;
}
&.d6 {
display:block;
}
}
}
@media #{$D6} {
.gutter {
width:240px;
height:auto;
z-index:100;
.search {
padding:10px;
border-bottom:1px solid whitesmoke;
input[type=search] {
box-sizing: border-box;
font-size:12px;
outline:0;
width:100%;
.contact {
.avatar {
height:56px;
width:56px;
}
.contact-details {
display:block;
position:relative;
width:156px;
float:left;
text-align: left;
h3 {
font-size:13px;
margin-bottom:4px;
}
.contact-name {
width: 105px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.last-message {
color:lighten(#333, 40%);
letter-spacing:0.15px;
-webkit-text-stroke: 0.2px;
margin:0;
letter-spacing: 0.25px;
padding:4px 8px;
border:1px solid lightgray;
font-size: 12px;
width: 150px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
&.d6 {
display:block;
.last-timestamp {
position:absolute;
top:14px;
right:8px;
font-size:12px;
font-weight: 500;
color:gray;
}
}
.contact {
.avatar {
height:56px;
width:56px;
}
.contact-details {
display:block;
position:relative;
width:156px;
float:left;
text-align: left;
h3 {
font-size:13px;
margin-bottom:4px;
}
.contact-name {
width: 105px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.last-message {
color:lighten(#333, 40%);
letter-spacing:0.15px;
-webkit-text-stroke: 0.2px;
margin:0;
font-size: 12px;
width: 150px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.last-timestamp {
position:absolute;
top:14px;
right:8px;
font-size:12px;
font-weight: 500;
color:gray;
}
}
}
}
}
}