Move roster specific scss into separate file.
This commit is contained in:
JC Brand
parent
b4c24a2b3a
commit
a945d58ee0
201
css/converse.css
201
css/converse.css
|
|
@ -604,95 +604,9 @@
|
|||
#conversejs .requesting-xmpp-contact .request-actions {
|
||||
margin-left: 0.5em;
|
||||
float: right; }
|
||||
#conversejs #converse-roster {
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
margin: 0.5em 0 0 0;
|
||||
height: 194px;
|
||||
height: calc(100% - 50px - 20px);
|
||||
overflow: hidden;
|
||||
padding-bottom: 3em;
|
||||
/* (jQ addClass:) if input has value: */
|
||||
/* (jQ addClass:) if mouse is over the 'x' input area*/ }
|
||||
#conversejs #converse-roster.no-contact-requests {
|
||||
height: calc(100% - 25px - 20px); }
|
||||
#conversejs #converse-roster .filter-type {
|
||||
display: table-cell;
|
||||
float: right;
|
||||
font-size: calc(14px - 2px);
|
||||
height: 25px;
|
||||
margin: 0 0 0.5em -1px;
|
||||
padding: 0;
|
||||
width: 84px;
|
||||
border-radius: 0;
|
||||
border: 1px solid; }
|
||||
#conversejs #converse-roster .roster-filter {
|
||||
float: left;
|
||||
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAABNSURBVHjaXI7BDcAwCAMvyQjMyQ6dAbZiKfqoUK34g2zJh1dENIC7M8pMAPYdzAVY3d0ajNz9aypS/b5R6o+ZPdqoKgCq6h80KH3xDgBqNR97p8oAGQAAAABJRU5ErkJggg==) no-repeat right -20px center;
|
||||
border: 1px solid #999;
|
||||
font-size: 14px;
|
||||
height: 25px;
|
||||
margin: 0 0 0.5em 7px;
|
||||
padding: 0;
|
||||
padding: 2px;
|
||||
width: 103px; }
|
||||
#conversejs #converse-roster .roster-filter.x {
|
||||
background-position: right 3px center; }
|
||||
#conversejs #converse-roster .roster-filter.onX {
|
||||
cursor: pointer; }
|
||||
#conversejs #converse-roster .roster-contacts {
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto; }
|
||||
#conversejs #converse-roster .group-toggle {
|
||||
color: #6C4C44;
|
||||
display: block;
|
||||
width: 100%; }
|
||||
#conversejs #converse-roster dt {
|
||||
display: none; }
|
||||
#conversejs #converse-roster dd {
|
||||
line-height: 16px;
|
||||
padding: 4px 2px 0 4px;
|
||||
height: 24px; }
|
||||
#conversejs #converse-roster dd a, #conversejs #converse-roster dd span {
|
||||
text-shadow: 0 1px 0 #FAFAFA;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
margin-left: 3px; }
|
||||
#conversejs #converse-roster dd span {
|
||||
padding: 0 5px 0 0; }
|
||||
#conversejs #converse-roster dd a.decline-xmpp-request {
|
||||
margin-left: 5px; }
|
||||
#conversejs #converse-roster dd a.remove-xmpp-contact {
|
||||
float: right;
|
||||
width: 22px;
|
||||
margin: 0;
|
||||
display: none;
|
||||
color: #6C4C44; }
|
||||
#conversejs #converse-roster dd:hover a.remove-xmpp-contact {
|
||||
display: inline-block; }
|
||||
#conversejs #converse-roster dd.odd {
|
||||
background-color: #DCEAC5;
|
||||
/* Make this difference */ }
|
||||
#conversejs #converse-roster dd.current-xmpp-contact span {
|
||||
font-size: 16px;
|
||||
float: left;
|
||||
color: #436F64; }
|
||||
#conversejs #converse-roster dd a.open-chat {
|
||||
width: 80%; }
|
||||
#conversejs #converse-roster span.pending-contact-name {
|
||||
width: 80%; }
|
||||
#conversejs #converse-roster span.req-contact-name {
|
||||
width: 69%;
|
||||
padding: 0; }
|
||||
#conversejs #available-chatrooms {
|
||||
text-align: left; }
|
||||
#conversejs #available-chatrooms dt,
|
||||
#conversejs #converse-roster dt {
|
||||
#conversejs #available-chatrooms dt {
|
||||
font-weight: normal;
|
||||
color: #6C4C44;
|
||||
border: none;
|
||||
|
|
@ -740,17 +654,6 @@
|
|||
#conversejs dd.available-chatroom:hover .room-info {
|
||||
display: block;
|
||||
font-size: 14px; }
|
||||
#conversejs #converse-roster dd {
|
||||
border: none;
|
||||
clear: both;
|
||||
color: #6C4C44;
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
overflow-y: hidden;
|
||||
text-shadow: 0 1px 0 #FAFAFA; }
|
||||
#conversejs .roster-group:hover,
|
||||
#conversejs #converse-roster dd:hover {
|
||||
background-color: #E1E6E5; }
|
||||
#conversejs .chatbox,
|
||||
#conversejs .chatroom {
|
||||
height: 35px;
|
||||
|
|
@ -1157,6 +1060,108 @@
|
|||
top: 0;
|
||||
left: 0; }
|
||||
|
||||
#conversejs #converse-roster {
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
margin: 0.5em 0 0 0;
|
||||
height: 194px;
|
||||
height: calc(100% - 50px - 20px);
|
||||
overflow: hidden;
|
||||
padding-bottom: 3em;
|
||||
/* (jQ addClass:) if input has value: */
|
||||
/* (jQ addClass:) if mouse is over the 'x' input area*/ }
|
||||
#conversejs #converse-roster.no-contact-requests {
|
||||
height: calc(100% - 25px - 20px); }
|
||||
#conversejs #converse-roster .filter-type {
|
||||
display: table-cell;
|
||||
float: right;
|
||||
font-size: calc(14px - 2px);
|
||||
height: 25px;
|
||||
margin: 0 0 0.5em -1px;
|
||||
padding: 0;
|
||||
width: 84px;
|
||||
border-radius: 0;
|
||||
border: 1px solid; }
|
||||
#conversejs #converse-roster .roster-filter {
|
||||
float: left;
|
||||
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAABNSURBVHjaXI7BDcAwCAMvyQjMyQ6dAbZiKfqoUK34g2zJh1dENIC7M8pMAPYdzAVY3d0ajNz9aypS/b5R6o+ZPdqoKgCq6h80KH3xDgBqNR97p8oAGQAAAABJRU5ErkJggg==) no-repeat right -20px center;
|
||||
border: 1px solid #999;
|
||||
font-size: 14px;
|
||||
height: 25px;
|
||||
margin: 0 0 0.5em 7px;
|
||||
padding: 0;
|
||||
padding: 2px;
|
||||
width: 103px; }
|
||||
#conversejs #converse-roster .roster-filter.x {
|
||||
background-position: right 3px center; }
|
||||
#conversejs #converse-roster .roster-filter.onX {
|
||||
cursor: pointer; }
|
||||
#conversejs #converse-roster .roster-contacts {
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto; }
|
||||
#conversejs #converse-roster .group-toggle {
|
||||
color: #6C4C44;
|
||||
display: block;
|
||||
width: 100%; }
|
||||
#conversejs #converse-roster .roster-group:hover {
|
||||
background-color: #E1E6E5; }
|
||||
#conversejs #converse-roster dt {
|
||||
border: none;
|
||||
color: #6C4C44;
|
||||
display: none;
|
||||
font-weight: normal;
|
||||
padding: 0.5em;
|
||||
text-shadow: 0 1px 0 #FAFAFA; }
|
||||
#conversejs #converse-roster dd {
|
||||
border: none;
|
||||
clear: both;
|
||||
color: #6C4C44;
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
height: 24px;
|
||||
line-height: 16px;
|
||||
overflow-y: hidden;
|
||||
padding: 4px 2px 0 4px;
|
||||
text-shadow: 0 1px 0 #FAFAFA; }
|
||||
#conversejs #converse-roster dd:hover {
|
||||
background-color: #E1E6E5; }
|
||||
#conversejs #converse-roster dd a, #conversejs #converse-roster dd span {
|
||||
text-shadow: 0 1px 0 #FAFAFA;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
margin-left: 3px; }
|
||||
#conversejs #converse-roster dd span {
|
||||
padding: 0 5px 0 0; }
|
||||
#conversejs #converse-roster dd a.decline-xmpp-request {
|
||||
margin-left: 5px; }
|
||||
#conversejs #converse-roster dd a.remove-xmpp-contact {
|
||||
float: right;
|
||||
width: 22px;
|
||||
margin: 0;
|
||||
display: none;
|
||||
color: #6C4C44; }
|
||||
#conversejs #converse-roster dd:hover a.remove-xmpp-contact {
|
||||
display: inline-block; }
|
||||
#conversejs #converse-roster dd.odd {
|
||||
background-color: #DCEAC5;
|
||||
/* Make this difference */ }
|
||||
#conversejs #converse-roster dd.current-xmpp-contact span {
|
||||
font-size: 16px;
|
||||
float: left;
|
||||
color: #436F64; }
|
||||
#conversejs #converse-roster dd a.open-chat {
|
||||
width: 80%; }
|
||||
#conversejs #converse-roster span.pending-contact-name {
|
||||
width: 80%; }
|
||||
#conversejs #converse-roster span.req-contact-name {
|
||||
width: 69%;
|
||||
padding: 0; }
|
||||
|
||||
#conversejs .chatroom {
|
||||
width: 300px; }
|
||||
@media screen and (max-width: 480px) {
|
||||
|
|
|
|||
132
sass/_core.scss
132
sass/_core.scss
|
|
@ -624,126 +624,11 @@
|
|||
float: right;
|
||||
}
|
||||
|
||||
#converse-roster {
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
margin: 0.5em 0 0 0;
|
||||
height: $roster-height;
|
||||
height: calc(100% - #{$controlbox-dropdown-height*2} - 20px);
|
||||
overflow: hidden;
|
||||
padding-bottom: 3em;
|
||||
|
||||
&.no-contact-requests {
|
||||
height: calc(100% - #{$controlbox-dropdown-height} - 20px);
|
||||
}
|
||||
|
||||
.filter-type {
|
||||
display: table-cell;
|
||||
float: right;
|
||||
font-size: calc(#{$font-size} - 2px);
|
||||
height: $controlbox-dropdown-height;
|
||||
margin: 0 0 0.5em -1px;
|
||||
padding: 0;
|
||||
width: 84px;
|
||||
border-radius: 0;
|
||||
border: 1px solid;
|
||||
}
|
||||
.roster-filter {
|
||||
float: left;
|
||||
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAABNSURBVHjaXI7BDcAwCAMvyQjMyQ6dAbZiKfqoUK34g2zJh1dENIC7M8pMAPYdzAVY3d0ajNz9aypS/b5R6o+ZPdqoKgCq6h80KH3xDgBqNR97p8oAGQAAAABJRU5ErkJggg== ) no-repeat right -20px center;
|
||||
border: 1px solid #999;
|
||||
font-size: $font-size;
|
||||
height: $controlbox-dropdown-height;
|
||||
margin: 0 0 0.5em 7px;
|
||||
padding: 0;
|
||||
padding: 2px;
|
||||
width: 103px;
|
||||
}
|
||||
/* (jQ addClass:) if input has value: */
|
||||
.roster-filter.x {
|
||||
background-position: right 3px center;
|
||||
}
|
||||
/* (jQ addClass:) if mouse is over the 'x' input area*/
|
||||
.roster-filter.onX {
|
||||
cursor: pointer;
|
||||
}
|
||||
.roster-contacts {
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.group-toggle {
|
||||
color: $text-color;
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
dt {
|
||||
display: none;
|
||||
}
|
||||
dd {
|
||||
line-height: 16px;
|
||||
padding: 4px 2px 0 4px;
|
||||
height: 24px;
|
||||
a, span {
|
||||
text-shadow: 0 1px 0 $link-shadow-color;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
margin-left: 3px;
|
||||
}
|
||||
span {
|
||||
padding: 0 5px 0 0;
|
||||
}
|
||||
a {
|
||||
&.decline-xmpp-request {
|
||||
margin-left: 5px;
|
||||
}
|
||||
&.remove-xmpp-contact {
|
||||
float: right;
|
||||
width: 22px;
|
||||
margin: 0;
|
||||
display: none;
|
||||
color: $text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
dd:hover a.remove-xmpp-contact {
|
||||
display: inline-block;
|
||||
}
|
||||
dd {
|
||||
&.odd {
|
||||
background-color: #DCEAC5;
|
||||
/* Make this difference */
|
||||
}
|
||||
&.current-xmpp-contact span {
|
||||
font-size: 16px;
|
||||
float: left;
|
||||
color: $link-color;
|
||||
}
|
||||
a.open-chat {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
span {
|
||||
&.pending-contact-name {
|
||||
width: 80%;
|
||||
}
|
||||
&.req-contact-name {
|
||||
width: 69%;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#available-chatrooms {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#available-chatrooms dt,
|
||||
#converse-roster dt {
|
||||
#available-chatrooms dt {
|
||||
font-weight: normal;
|
||||
color: $text-color;
|
||||
border: none;
|
||||
|
|
@ -811,21 +696,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
#converse-roster dd {
|
||||
border: none;
|
||||
clear: both;
|
||||
color: $text-color;
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
overflow-y: hidden;
|
||||
text-shadow: 0 1px 0 $text-shadow-color;
|
||||
}
|
||||
|
||||
.roster-group:hover,
|
||||
#converse-roster dd:hover {
|
||||
background-color: $highlight-color;
|
||||
}
|
||||
|
||||
.chatbox,
|
||||
.chatroom {
|
||||
height: $bottom-gutter-height;
|
||||
|
|
|
|||
134
sass/_roster.scss
Normal file
134
sass/_roster.scss
Normal file
|
|
@ -0,0 +1,134 @@
|
|||
#conversejs #converse-roster {
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
margin: 0.5em 0 0 0;
|
||||
height: $roster-height;
|
||||
height: calc(100% - #{$controlbox-dropdown-height*2} - 20px);
|
||||
overflow: hidden;
|
||||
padding-bottom: 3em;
|
||||
|
||||
&.no-contact-requests {
|
||||
height: calc(100% - #{$controlbox-dropdown-height} - 20px);
|
||||
}
|
||||
|
||||
.filter-type {
|
||||
display: table-cell;
|
||||
float: right;
|
||||
font-size: calc(#{$font-size} - 2px);
|
||||
height: $controlbox-dropdown-height;
|
||||
margin: 0 0 0.5em -1px;
|
||||
padding: 0;
|
||||
width: 84px;
|
||||
border-radius: 0;
|
||||
border: 1px solid;
|
||||
}
|
||||
.roster-filter {
|
||||
float: left;
|
||||
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAABNSURBVHjaXI7BDcAwCAMvyQjMyQ6dAbZiKfqoUK34g2zJh1dENIC7M8pMAPYdzAVY3d0ajNz9aypS/b5R6o+ZPdqoKgCq6h80KH3xDgBqNR97p8oAGQAAAABJRU5ErkJggg== ) no-repeat right -20px center;
|
||||
border: 1px solid #999;
|
||||
font-size: $font-size;
|
||||
height: $controlbox-dropdown-height;
|
||||
margin: 0 0 0.5em 7px;
|
||||
padding: 0;
|
||||
padding: 2px;
|
||||
width: 103px;
|
||||
}
|
||||
/* (jQ addClass:) if input has value: */
|
||||
.roster-filter.x {
|
||||
background-position: right 3px center;
|
||||
}
|
||||
/* (jQ addClass:) if mouse is over the 'x' input area*/
|
||||
.roster-filter.onX {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.roster-contacts {
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.group-toggle {
|
||||
color: $text-color;
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
.roster-group:hover {
|
||||
background-color: $highlight-color;
|
||||
}
|
||||
dt {
|
||||
border: none;
|
||||
color: $text-color;
|
||||
display: none;
|
||||
font-weight: normal;
|
||||
padding: 0.5em;
|
||||
text-shadow: 0 1px 0 $text-shadow-color;
|
||||
}
|
||||
dd {
|
||||
border: none;
|
||||
clear: both;
|
||||
color: $text-color;
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
height: 24px;
|
||||
line-height: 16px;
|
||||
overflow-y: hidden;
|
||||
padding: 4px 2px 0 4px;
|
||||
text-shadow: 0 1px 0 $text-shadow-color;
|
||||
|
||||
&:hover {
|
||||
background-color: $highlight-color;
|
||||
}
|
||||
|
||||
a, span {
|
||||
text-shadow: 0 1px 0 $link-shadow-color;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
margin-left: 3px;
|
||||
}
|
||||
span {
|
||||
padding: 0 5px 0 0;
|
||||
}
|
||||
a {
|
||||
&.decline-xmpp-request {
|
||||
margin-left: 5px;
|
||||
}
|
||||
&.remove-xmpp-contact {
|
||||
float: right;
|
||||
width: 22px;
|
||||
margin: 0;
|
||||
display: none;
|
||||
color: $text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
dd {
|
||||
&:hover a.remove-xmpp-contact {
|
||||
display: inline-block;
|
||||
}
|
||||
&.odd {
|
||||
background-color: #DCEAC5;
|
||||
/* Make this difference */
|
||||
}
|
||||
&.current-xmpp-contact span {
|
||||
font-size: 16px;
|
||||
float: left;
|
||||
color: $link-color;
|
||||
}
|
||||
a.open-chat {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
span {
|
||||
&.pending-contact-name {
|
||||
width: 80%;
|
||||
}
|
||||
&.req-contact-name {
|
||||
width: 69%;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -9,5 +9,6 @@
|
|||
@import "bourbon";
|
||||
@import "variables";
|
||||
@import "core";
|
||||
@import "roster";
|
||||
@import "chatrooms";
|
||||
@import "minimized_chats";
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user