cynic
/
glowing-bear
mirror of https://github.com/kurisufriend/glowing-bear
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #434 from glowing-bear/design-light-theme

Browse Source 
Design light theme
rewrite-with-urlplugin
Lorenz Hübschle-Schneider 11 years ago
parent 694e33d7b8 3964fcc674
commit 10dde0e7d9
5 changed files with 2279 additions and 96 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 107
      css/glowingbear.css
  2. 165
      css/themes/dark.css
  3. 2085
      css/themes/light.css
  4. 15
      index.html
  5. 3
      js/glowingbear.js

107
css/glowingbear.css
Unescape View File

@ -2,52 +2,15 @@ html,
body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
color: #ddd;
background-color: #181818;
}
.no-overflow {
overflow: hidden;
}
.horizontal-line {
-webkit-box-shadow: rgba(255, 255, 255, 0.07) 0 1px 0;
-moz-box-shadow: rgba(255, 255, 255, 0.07) 0 1px 0;
box-shadow: rgba(255, 255, 255, 0.07) 0 1px 0;
border-bottom: 1px solid #121212;
}
.vertical-line {
-webkit-box-shadow: rgba(255, 255, 255, 0.07) 1px 0 0;
-moz-box-shadow: rgba(255, 255, 255, 0.07) 1px 0 0;
box-shadow: rgba(255, 255, 255, 0.07) 1px 0 0;
border-right: 1px solid #121212;
}
.vertical-line-left {
-webkit-box-shadow: rgba(255, 255, 255, 0.07) -1px 0 0;
-moz-box-shadow: rgba(255, 255, 255, 0.07) -1px 0 0;
box-shadow: rgba(255, 255, 255, 0.07) -1px 0 0;
border-left: 1px solid #121212;
}
.panel-group .panel-heading + .panel-collapse .panel-body, .modal-body, .modal-header, .modal-footer {
-webkit-box-shadow: rgba(255, 255, 255, 0.07) 0 -1px 0;
-moz-box-shadow: rgba(255, 255, 255, 0.07) 0 -1px 0;
box-shadow: rgba(255, 255, 255, 0.07) 0 -1px 0;
border-top: 1px solid #121212;
}
a {
cursor: pointer;
}
.repeated-time {
}
.repeated-time .cof-chat_time,
.repeated-time .cof-chat_time_delimiters {
color: #333;
}
.repeated-time .cob-chat_time,
.repeated-time .cob-chat_time_delimiters {
background-color: transparent;
}
td.prefix {
text-align: right;
vertical-align: top;
@ -72,13 +35,15 @@ td.message {
hyphens: auto;
}
#readmarker {
margin-top: 5px;
margin-bottom: 5px;
border-top: 1px solid rgba(255, 255, 255, 0.3);
border-bottom: 1px solid #121212;
border-top: 1px solid;
border-bottom: 1px solid;
height: 2px;
}
.text {
white-space: pre-wrap;
}
@ -97,11 +62,9 @@ td.message {
input[type=text], input[type=password], #sendMessage, .badge {
border: 0;
border-radius: 0;
color: #ccc;
box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.1), 0px 1px 7px 0px rgba(0, 0, 0, 0.8) inset;
background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.3);
margin-bottom: 5px !important;
}
.input-group {
width: 100%;
}
@ -162,8 +125,8 @@ input[type=text], input[type=password], #sendMessage, .badge {
font-size: 30px;
position: fixed;
right: 0;
background: #282828;
}
#topbar .actions > * {
padding-left: 5px;
}
@ -172,9 +135,6 @@ input[type=text], input[type=password], #sendMessage, .badge {
padding-right: 6px;
}
#topbar, #sidebar, .panel, .dropdown-menu, .modal-content {
background: #282828;
}
#sidebar {
position: fixed;
width: 140px;
@ -240,16 +200,12 @@ input[type=text], input[type=password], #sendMessage, .badge {
#nicklist a {
text-decoration: none;
}
#nicklist a:hover {
background: #3b3b3b;
}
#connection-infos {
float: left;
max-width: 10%;
padding-left: 5px;
font-size: 12px;
color: #aaa;
overflow: hidden;
}
@ -267,6 +223,7 @@ input[type=text], input[type=password], #sendMessage, .badge {
background-color: #eee;
color: #222;
}
.content {
height: 100%;
min-height: 100%;
@ -277,21 +234,19 @@ input[type=text], input[type=password], #sendMessage, .badge {
height: 100%;
overflow-y: auto;
width: auto;
bottom: 42px;
bottom: 35px; /* input bar */
padding-top: 42px; /* topbar */
-webkit-transition:0.35s ease all;
transition:0.35s ease all;
}
#bufferlines > table {
margin-top: 35px;
margin-top: 35px;
width: 100%;
}
tr.bufferline {
line-height: 100%;
}
tr.bufferline:hover {
background-color: #222222;
}
td.time {
padding: 1px 5px 1px 1px;
vertical-align: top;
@ -324,25 +279,9 @@ td.time {
padding-right: 100px;
}
.color-light-green {
color: chartreuse;
}
.color-27 {
color: deepskyblue;
}
.danger, .alert-danger, .badge .alert-danger {
background-color: rgb(217, 83, 79);
color: #ddd;
}
.alert-danger {
border-color: #121212;
color: black;
}
li.notification {
color: green;
/* fix for mobile firefox which ignores :hover */
.nav-pills > li > a:active, .nav-pills > li > a:active span {
text-decoration: none;
}
[ng-click],
@ -354,12 +293,9 @@ li.notification {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track-piece {
background-color: black;
}
::-webkit-scrollbar-thumb:vertical {
height: 15px;
background: rgba(255,255,255,0.5);
}
div.embed * {
@ -428,8 +364,8 @@ table.notimestampseconds td.time span.seconds {
height: 100%;
width: 100%;
overflow: none;
background-color:rgba(0, 0, 0, 0.5)
}
.gb-modal .modal-dialog {
z-index: 1001;
position: absolute;
@ -459,11 +395,12 @@ table.notimestampseconds td.time span.seconds {
border-bottom: 0;
}
#fontchoice label {
.standard-labels label {
font-weight: normal;
text-align: left;
}
h2 {
padding-bottom: 5px;
height: 72px;
@ -599,11 +536,8 @@ li.buffer.indent.private a {
height: auto;
padding: 35px 7px 35px 10px;
text-align: center;
-webkit-box-shadow: 0px 0px 120px #000;
box-shadow: 0px 0px 120px #000;
position: fixed;
margin-top: 10px;
background: #282828;
bottom: 0px;
}
@ -648,17 +582,10 @@ li.buffer.indent.private a {
width: 96%;
}
/* a different colour is too irregular on mobile */
.repeated-time .cof-chat_time,
.repeated-time .cof-chat_time_delimiters {
color: #999;
}
.footer {
padding-left: 0px !important;
padding-right: 0px !important;
width: 100% !important;
background: rgb(24,24,24);
}
.footer.withnicklist {

165
css/style.css → css/themes/dark.css
Unescape View File

@ -1,3 +1,131 @@
body {
background-color: #181818;
color: #ddd;
}
.form-control {
color: #ccc;
box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.1), 0px 1px 7px 0px rgba(0, 0, 0, 0.8) inset;
background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.3);
border: 0px none;
}
html {
background-color: inherit;
}
.repeated-time .cob-chat_time,
.repeated-time .cob-chat_time_delimiters {
background-color: transparent;
color: #333;
}
/* fix for mobile firefox which ignores :hover */
.nav-pills > li > a:active, .nav-pills > li > a:active span {
background-color: #eee;
color: #222;
}
tr.bufferline:hover {
background-color: #222222;
}
.danger, .alert-danger, .badge .alert-danger, .badge.danger {
background-color: rgb(217, 83, 79);
color: #ddd;
}
.alert-danger {
border-color: #121212;
color: black;
}
li.notification {
color: green;
}
::-webkit-scrollbar-track-piece {
background-color: black;
}
::-webkit-scrollbar-thumb:vertical {
height: 15px;
background: rgba(255,255,255,0.5);
}
.gb-modal .backdrop {
background-color:rgba(0, 0, 0, 0.5)
}
input[type=text], input[type=password], #sendMessage, .badge {
color: #ccc;
box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.1), 0px 1px 7px 0px rgba(0, 0, 0, 0.8) inset;
background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.3);
}
#connection-infos {
color: #aaa;
}
.nav-pills > li > a {
color: #ddd;
}
.nav-pills > li > a:hover, .nav-pills > li > a:hover span {
color: #222;
}
.color-light-green {
color: chartreuse;
}
.color-27 {
color: deepskyblue;
}
#topbar .actions {
background: #282828;
}
#topbar, #sidebar, .panel, .dropdown-menu, .modal-content {
background: #282828;
}
#nicklist a:hover {
background: #3b3b3b;
}
.horizontal-line {
-webkit-box-shadow: rgba(255, 255, 255, 0.07) 0 1px 0;
-moz-box-shadow: rgba(255, 255, 255, 0.07) 0 1px 0;
box-shadow: rgba(255, 255, 255, 0.07) 0 1px 0;
border-bottom: 1px solid #121212;
}
.vertical-line {
-webkit-box-shadow: rgba(255, 255, 255, 0.07) 1px 0 0;
-moz-box-shadow: rgba(255, 255, 255, 0.07) 1px 0 0;
box-shadow: rgba(255, 255, 255, 0.07) 1px 0 0;
border-right: 1px solid #121212;
}
.vertical-line-left {
-webkit-box-shadow: rgba(255, 255, 255, 0.07) -1px 0 0;
-moz-box-shadow: rgba(255, 255, 255, 0.07) -1px 0 0;
box-shadow: rgba(255, 255, 255, 0.07) -1px 0 0;
border-left: 1px solid #121212;
}
.panel-group .panel-heading + .panel-collapse .panel-body, .modal-body, .modal-header, .modal-footer {
-webkit-box-shadow: rgba(255, 255, 255, 0.07) 0 -1px 0;
-moz-box-shadow: rgba(255, 255, 255, 0.07) 0 -1px 0;
box-shadow: rgba(255, 255, 255, 0.07) 0 -1px 0;
border-top: 1px solid #121212;
}
#readmarker {
border-top-color: rgba(255, 255, 255, 0.3);
border-bottom-color: #121212;
}
/****************************/
/* Weechat colors and style */
/****************************/
/* style options, foreground */
.cof-separator {
color: #68b5d4;
@ -263,6 +391,9 @@
.cwf-default {
color: #d9d9d9;
}
.light-theme .cwf-default {
color: #282828;
}
.cwf-black {
color: #000000;
}
@ -370,13 +501,13 @@
color: #000000; /* 000 Black */
}
.cef-1 {
color: #cd0000; /* 001 DarkRed */
color: #7f0000; /* 001 DarkRed */
}
.cef-2 {
color: #00cd00; /* 002 DarkGreen */
}
.cef-3 {
color: #cdcd00; /* 003 DarkYellow */
color: #fc7f00; /* 003 Orange */
}
.cef-4 {
color: #0000ee; /* 004 DarkBlue */
@ -1140,13 +1271,13 @@
background-color: #000000; /* 000 Black */
}
.ceb-1 {
background-color: #cd0000; /* 001 DarkRed */
background-color: #7f0000; /* 001 DarkRed */
}
.ceb-2 {
background-color: #00cd00; /* 002 DarkGreen */
}
.ceb-3 {
background-color: #cdcd00; /* 003 DarkYellow */
background-color: #fc7f00; /* 003 Orange */
}
.ceb-4 {
background-color: #0000ee; /* 004 DarkBlue */
@ -1935,3 +2066,29 @@
color: yellow;
font-weight: bold;
}
/* */
/* Mobile layout */
/* */
@media (max-width: 968px) {
/* a different colour is too irregular on mobile */
.repeated-time .cof-chat_time,
.repeated-time .cof-chat_time_delimiters {
color: #999;
}
#nicklist {
-webkit-box-shadow: 0px 0px 120px #000;
box-shadow: 0px 0px 120px #000;
background: #282828;
}
.footer {
background: rgb(24,24,24);
}
}

2085
css/themes/light.css
View File

File diff suppressed because it is too large Load Diff

15
index.html
Unescape View File

@ -12,7 +12,6 @@
<link rel="shortcut icon" sizes="128x128" href="assets/img/glowing_bear_128x128.png">
<link rel="apple-touch-icon" sizes="128x128" href="assets/img/glowing_bear_128x128.png">
<link rel="shortcut icon" type="image/png" href="assets/img/favicon.png" >
<link href="css/style.css" rel="stylesheet" media="screen">
<link href="css/glowingbear.css" rel="stylesheet" media="screen">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular-route.min.js"></script>
@ -37,6 +36,7 @@
<script type="text/javascript" src="3rdparty/favico-0.3.5.min.js"></script>
</head>
<body ng-controller="WeechatCtrl" ng-keydown="handleKeyPress($event)" ng-keypress="handleKeyPress($event)" ng-class="{'no-overflow': connected}" lang="en-US">
<link ng-href="css/themes/{{theme}}.css" rel="stylesheet" media="screen" />
<div ng-hide="connected" class="container">
<h2>
<img alt="logo" src="assets/img/glowing-bear.svg">
@ -296,7 +296,7 @@ $ openssl req -nodes -newkey rsa:4096 -keyout relay.pem -x509 -days 365 -out rel
</div>
<div class="modal-body">
<ul class="">
<li id="fontchoice">
<li class="standard-labels">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="font" class="col-sm-3 control-label make-thinner">Preferred font</label>
@ -311,6 +311,17 @@ $ openssl req -nodes -newkey rsa:4096 -keyout relay.pem -x509 -days 365 -out rel
</div>
</form>
</li>
<li class="standard-labels">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="theme" class="col-sm-3 control-label make-thinner">Theme</label>
<div class="col-sm-7">
<select id="theme" class="form-control" ng-model="theme" ng-options="theme for theme in themes"></select>
</div>
</div>
</form>
</li>
<li>
<form class="form-inline" role="form">
<div class="checkbox">

3
js/glowingbear.js
Unescape View File

@ -6,6 +6,7 @@ var weechat = angular.module('weechat', ['ngRoute', 'localStorage', 'weechatMode
weechat.controller('WeechatCtrl', ['$rootScope', '$scope', '$store', '$timeout', '$log', 'models', 'connection', 'notifications', 'utils', function ($rootScope, $scope, $store, $timeout, $log, models, connection, notifications, utils) {
$scope.command = '';
$scope.themes = ['dark', 'light'];
// From: http://stackoverflow.com/a/18539624 by StackOverflow user "plantian"
$rootScope.countWatchers = function () {
@ -256,6 +257,8 @@ weechat.controller('WeechatCtrl', ['$rootScope', '$scope', '$store', '$timeout',
$store.bind($scope, "soundnotification", false);
// Save setting for font family
$store.bind($scope, "fontfamily");
// Save setting for theme
$store.bind($scope, "theme", 'dark');
// Save setting for font size
$store.bind($scope, "fontsize", "14px");
// Save setting for readline keybindings

Write Preview
Loading…
Cancel
Save