imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

initial stab at an official dark theme via the magic of SASS.

Browse source 
SVGs are all broken, and some of the more exotic colours haven't been updated. There's been no attempt to use SASS to remove duplication from the CSS yet.
no attempt to switch it at runtime yet.
This commit is contained in:
Matthew Hodgson 2016-12-28 04:04:43 +00:00
parent 33f0eaada0
commit c6beaa1631
57 changed files with 388 additions and 259 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/skins/vector/css/vector-web/structures/_RightPanel.scss
View file

@ -33,7 +33,7 @@ limitations under the License.
-webkit-order: 1;
order: 1;
border-bottom: 1px solid #e5e5e5;
border-bottom: 1px solid $primary-hairline-color;
margin-right: 20px;
-webkit-flex: 0 0 70px;
@ -45,7 +45,7 @@ limitations under the License.
.mx_RightPanel_headerButtonGroup {
margin-top: 6px;
float: left;
background-color: #fff;
background-color: $primary-bg-color;
margin-left: 0px;
}
@ -73,7 +73,7 @@ limitations under the License.
.mx_RightPanel_headerButton_badge {
font-size: 11px;
color: #76cfa6;
color: $accent-color;
font-weight: bold;
padding-bottom: 2px;
}
@ -97,7 +97,7 @@ limitations under the License.
-webkit-order: 3;
order: 3;
border-top: 1px solid #e5e5e5;
border-top: 1px solid $primary-hairline-color;
margin-right: 20px;
-webkit-flex: 0 0 60px;
@ -107,7 +107,7 @@ limitations under the License.
.mx_RightPanel_footer .mx_RightPanel_invite {
line-height: 35px;
font-size: 14px;
color: #4A4A4A;
color: $primary-fg-color;
padding-top: 13px;
padding-left: 5px;
cursor: pointer;

6
src/skins/vector/css/vector-web/structures/_RoomDirectory.scss
View file

@ -20,7 +20,7 @@ limitations under the License.
margin-left: auto;
margin-right: auto;
margin-bottom: 12px;
color: #4a4a4a;
color: $primary-fg-color;
display: -webkit-box;
display: -moz-box;
@ -78,7 +78,7 @@ limitations under the License.
.mx_RoomDirectory_table {
font-size: 14px;
color: #4a4a4a;
color: $primary-fg-color;
width: 100%;
text-align: left;
table-layout: fixed;
@ -110,7 +110,7 @@ limitations under the License.
padding-right: 5px;
height: 15px;
border-radius: 11px;
background-color: #eaf5f0;
background-color: $secondary-accent-color;
text-transform: uppercase;
font-weight: 600;
font-size: 11px;

36
src/skins/vector/css/vector-web/structures/_RoomSubList.scss
View file

@ -29,7 +29,7 @@ limitations under the License.
.mx_RoomSubList_label {
position: relative;
text-transform: uppercase;
color: #3d3b39;
color: $roomsublist-label-fg-color;
font-weight: 600;
font-size: 12px;
width: 203px; /* padding + width = LHS Panel width */
@ -39,8 +39,8 @@ limitations under the License.
padding-top: 6px;
padding-bottom: 6px;
cursor: pointer;
background-color: #d3efe1;
border-top: solid 2px #eaf5f0;
background-color: $roomsublist-label-bg-color;
border-top: solid 2px $secondary-accent-color;
}
.mx_RoomSubList_label.mx_RoomSubList_fixed {
@ -63,7 +63,7 @@ limitations under the License.
display: inline-block;
font-size: 12px;
font-weight: normal;
color: #76cfa6;
color: $accent-color;
padding-left: 5px;
text-transform: none;
}
@ -80,14 +80,14 @@ limitations under the License.
right: 8px; /*gutter */
top: 7px;
border-radius: 8px;
color: #fff;
color: $accent-fg-color;
font-weight: 600;
font-size: 10px;
text-align: center;
padding-top: 1px;
padding-left: 4px;
padding-right: 4px;
background-color: #76cfa6;
background-color: $accent-color;
}
/*
@ -97,7 +97,7 @@ limitations under the License.
*/
.mx_RoomSubList_badgeHighlight {
background-color: #ff0064;
background-color: $warning-color;
}
/* This is the bottom of the speech bubble */
@ -108,7 +108,7 @@ limitations under the License.
width: 0;
height: 0;
margin-left: 5px;
border-top: 5px solid #ff0064;
border-top: 5px solid $warning-color;
border-right: 7px solid transparent;
}
@ -129,7 +129,7 @@ limitations under the License.
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 6px solid #76cfa6;
border-top: 6px solid $accent-color;
}
.mx_RoomSubList_chevronUp {
@ -137,14 +137,14 @@ limitations under the License.
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 6px solid #76cfa6;
border-bottom: 6px solid $accent-color;
}
.mx_RoomSubList_chevronRight {
width: 0;
height: 0;
border-top: 5px solid transparent;
border-left: 6px solid #76cfa6;
border-left: 6px solid $accent-color;
border-bottom: 5px solid transparent;
}
@ -165,7 +165,7 @@ limitations under the License.
.mx_RoomSubList_line {
display: inline-block;
width: 159px;
border-top: dotted 2px #76cfa6;
border-top: dotted 2px $accent-color;
vertical-align: middle;
}
@ -179,7 +179,7 @@ limitations under the License.
font-size: 10px;
font-weight: 600;
text-align: left;
color: #76cfa6;
color: $accent-color;
padding-left: 7px;
padding-right: 7px;
padding-left: 7px;
@ -198,20 +198,20 @@ limitations under the License.
right: 8px; /*gutter */
top: -2px;
border-radius: 8px;
border: solid 1px #76cfa6;
color: #fff;
border: solid 1px $accent-color;
color: $accent-fg-color;
font-weight: 600;
font-size: 10px;
text-align: center;
padding-top: 1px;
padding-left: 3px;
padding-right: 3px;
background-color: #fff;
background-color: $primary-bg-color;
vertical-align: middle;
}
.mx_RoomSubList_moreBadge.mx_RoomSubList_moreBadgeNotify {
background-color: #76cfa6;
background-color: $accent-color;
border: 0;
padding-top: 3px;
padding-left: 4px;
@ -219,7 +219,7 @@ limitations under the License.
}
.mx_RoomSubList_moreBadge.mx_RoomSubList_moreBadgeHighlight {
background-color: #ff0064;
background-color: $warning-color;
border: 0;
padding-top: 3px;
padding-left: 4px;

2
src/skins/vector/css/vector-web/views/context_menus/_RoomTagContextMenu.scss
View file

@ -31,7 +31,7 @@ limitations under the License.
.mx_RoomTagContextMenu_field:last-child {
padding-bottom: 4px;
color: #ff0064;
color: $warning-color;
}
.mx_RoomTagContextMenu_field.mx_RoomTagContextMenu_fieldSet {

6
src/skins/vector/css/vector-web/views/directory/_NetworkDropdown.scss
View file

@ -21,14 +21,14 @@ limitations under the License.
.mx_NetworkDropdown_input {
position: relative;
border-radius: 3px;
border: 1px solid #c7c7c7;
border: 1px solid $strong-input-border-color;
font-weight: 300;
font-size: 13px;
user-select: none;
}
.mx_NetworkDropdown_arrow {
border-color: #4a4a4a transparent transparent;
border-color: $primary-fg-color transparent transparent;
border-style: solid;
border-width: 5px 5px 0;
display: block;
@ -67,7 +67,7 @@ input.mx_NetworkDropdown_networkoption, input.mx_NetworkDropdown_networkoption:f
margin: 0;
padding: 0px;
border-radius: 3px;
border: 1px solid #76cfa6;
border: 1px solid $accent-color;
background-color: white;
}

8
src/skins/vector/css/vector-web/views/elements/_ImageView.scss
View file

@ -87,7 +87,7 @@ limitations under the License.
padding-right: 30px;
min-height: 100%;
max-width: 240px;
color: #fff;
color: $lightbox-fg-color;
}
.mx_ImageView_cancel {
@ -114,10 +114,10 @@ limitations under the License.
margin-top: 24px;
margin-bottom: 6px;
border-radius: 5px;
background-color: #454545;
background-color: $lightbox-bg-color;
font-size: 14px;
padding: 9px;
border: 1px solid #fff;
border: 1px solid $lightbox-border-color;
}
.mx_ImageView_size {
@ -125,7 +125,7 @@ limitations under the License.
}
.mx_ImageView_link {
color: #fff ! important;
color: $lightbox-fg-color ! important;
text-decoration: none ! important;
}

6
src/skins/vector/css/vector-web/views/globals/_GuestWarningBar.scss
View file

@ -15,8 +15,8 @@ limitations under the License.
*/
.mx_GuestWarningBar {
background-color: #76cfa6;
color: #fff;
background-color: $accent-color;
color: $accent-fg-color;
display: -webkit-box;
display: -moz-box;
@ -34,7 +34,7 @@ limitations under the License.
}
.mx_GuestWarningBar a {
color: #fff ! important;
color: $accent-fg-color ! important;
text-decoration: underline ! important;
cursor: pointer;
}

6
src/skins/vector/css/vector-web/views/globals/_MatrixToolbar.scss
View file

@ -15,8 +15,8 @@ limitations under the License.
*/
.mx_MatrixToolbar {
background-color: #76cfa6;
color: #fff;
background-color: $accent-color;
color: $accent-fg-color;
display: -webkit-box;
display: -moz-box;
@ -40,7 +40,7 @@ limitations under the License.
.mx_MatrixToolbar_link
{
color: #fff ! important;
color: $accent-fg-color ! important;
text-decoration: underline ! important;
cursor: pointer;
}

6
src/skins/vector/css/vector-web/views/rooms/_RoomDropTarget.scss
View file

@ -22,8 +22,8 @@ limitations under the License.
margin-bottom: 7px;
padding-top: 5px;
padding-bottom: 5px;
border: 1px dashed #76cfa6;
color: #454545;
border: 1px dashed $accent-color;
color: $primary-fg-color;
background-color: rgba(255,255,255,0.5);
border-radius: 4px;
}
@ -39,7 +39,7 @@ limitations under the License.
}
.mx_RoomDropTarget_avatar {
background-color: #fff;
background-color: $primary-bg-color;
border-radius: 24px;
width: 24px;
height: 24px;

12
src/skins/vector/css/vector-web/views/rooms/_RoomTooltip.scss
View file

@ -21,16 +21,16 @@ limitations under the License.
width: 0;
height: 0;
border-top: 8px solid transparent;
border-right: 8px solid rgba(187, 187, 187, 0.5);
border-right: 8px solid $menu-border-color;
border-bottom: 8px solid transparent;
}
.mx_RoomTooltip_chevron:after{
.mx_RoomTooltip_chevron:after {
content:'';
width: 0;
height: 0;
border-top: 7px solid transparent;
border-right: 7px solid #fff;
border-right: 7px solid $primary-bg-color;
border-bottom: 7px solid transparent;
position:absolute;
top: -7px;
@ -40,14 +40,14 @@ limitations under the License.
.mx_RoomTooltip {
display: none;
position: fixed;
border: 1px solid rgba(187, 187, 187, 0.5);
border: 1px solid $menu-border-color;
border-radius: 5px;
background-color: #fff;
background-color: $primary-bg-color;
z-index: 2000;
padding: 5px;
pointer-events: none;
line-height: 14px;
font-size: 13px;
color: rgba(0, 0, 0, 0.7);
color: $primary-fg-color;
}

14
src/skins/vector/css/vector-web/views/rooms/_SearchBar.scss
View file

@ -26,7 +26,7 @@ limitations under the License.
.mx_SearchBar_input {
display: inline block;
border-radius: 3px 0px 0px 3px;
border: 1px solid #f0f0f0;
border: 1px solid $input-border-color;
font-size: 15px;
padding: 9px;
padding-left: 11px;
@ -41,7 +41,7 @@ limitations under the License.
width: 37px;
height: 37px;
border-radius: 0px 3px 3px 0px;
background-color: #76CFA6;
background-color: $accent-color;
}
@keyframes pulsate {
@ -61,8 +61,8 @@ limitations under the License.
border-radius: 36px;
font-weight: 400;
font-size: 15px;
color: #fff;
background-color: #76cfa6;
color: $accent-fg-color;
background-color: $accent-color;
width: auto;
margin: auto;
margin-left: 7px;
@ -74,9 +74,9 @@ limitations under the License.
}
.mx_SearchBar_unselected {
background-color: #fff;
color: #76CFA6;
border: #76CFA6 1px solid;
background-color: $primary-bg-color;
color: $accent-color;
border: $accent-color 1px solid;
}
.mx_SearchBar_cancel {

2
src/skins/vector/css/vector-web/views/settings/_Notifications.scss
View file

@ -58,7 +58,7 @@ limitations under the License.
.mx_UserNotifSettings_keywords {
cursor: pointer;
color: #76cfa6;
color: $accent-color;
}
.mx_UserSettings_devicesTable td {