diff --git a/css/glowingbear.css b/css/glowingbear.css index 4da300a..f8bc96f 100644 --- a/css/glowingbear.css +++ b/css/glowingbear.css @@ -359,15 +359,68 @@ table.notimestampseconds td.time span.seconds { display: none !important; } -.modal ul { +.gb-modal { + z-index: 1000; + height: 100%; + overflow-y: scroll; + position: absolute; + top: 0; + left: 0; + width: 100%; +} + +.gb-modal[data-state=hidden] { + transition: .2s ease-in-out; + visibility: hidden; + opacity: 0; +} + +.gb-modal[data-state=visible] { + transition: .2s ease-in-out; + visibility: visible; + opacity: 1; +} + +.gb-modal[data-state=hidden] .modal-dialog { + transition: top .3s ease-in; + top: -150px; +} + +.gb-modal[data-state=visible] .modal-dialog { + transition: top .3s ease-out; + top: 0px; +} +.gb-modal .backdrop { + z-index: 999; + position: fixed; + top: 0; + height: 100%; + width: 100%; + overflow: none; + background-color:rgba(0, 0, 0, 0.5) +} +.gb-modal .modal-dialog { + z-index: 1001; + position: absolute; + margin-left: auto; + margin-right: auto; + left: 0; + right: 0; + top: 35px; +} +.gb-modal[ng-click], .gb-modal div[ng-click] { + cursor: default; +} + +.gb-modal ul { list-style: none; padding-left: 15px; } -.modal li { +.gb-modal li { font-size: larger; margin-bottom: 10px; } -.modal li li { +.gb-modal li li { font-size: medium; } .modal-header { @@ -396,6 +449,27 @@ h2 span, h2 small { display: block; } +.panel[data-state=active] .panel-collapse { + transition: max-height 0.5s; + max-height: 60em; + height: auto; + display: block; +} +.panel[data-state=collapsed] .panel-collapse { + transition: max-height 0.5s; + max-height: 0; +} +.panel[data-state=collapsed] { + border: 0px solid transparent; +} + +/* fix for firefox being stupid */ +@-moz-document url-prefix() { + .panel[data-state=collapsed] .panel-collapse * { + display: none; + } +} + /* */ /* Mobile layout */ /* */ @@ -503,6 +577,11 @@ h2 span, h2 small { padding: 0px !important; } + .gb-modal .modal-dialog { + margin: 20px 2%; + width: 96%; + } + /* a different colour is too irregular on mobile */ .repeated-time .cof-chat_time, .repeated-time .cof-chat_time_delimiters { diff --git a/index.html b/index.html index 3b66ba9..695e3a5 100644 --- a/index.html +++ b/index.html @@ -13,7 +13,6 @@ - @@ -29,7 +28,6 @@ -
If you check the encryption box, the communication between browser and WeeChat will be encrypted with SSL.
Note: If you are using a self-signed certificate, you have to visit https://{{ host || 'weechathost' }}:{{ port || 'relayport' }}/ in your browser first to add a security exception. You can close that tab once you confirmed the certificate, no content will appear. The necessity of this process is a bug in Firefox and other browsers.
@@ -159,15 +157,15 @@ $ openssl req -nodes -newkey rsa:4096 -keyout relay.pem -x509 -days 365 -out relYou don't need to install anything to use this app, it should work with any modern browser. Start using it right now! However, there are a few ways to improve integration with your operating system.
Glowing bear is built by a small group of developers in their free time. As we're always trying to improve it, we would love getting your feedback and help. If that sounds like something you might enjoy, check out our project page on GitHub!
If you're interested in contributing or simply want to say hello, head over to #glowing-bear on freenode! We won't bite, promise (-ish).
@@ -206,7 +204,7 @@ $ openssl req -nodes -newkey rsa:4096 -keyout relay.pem -x509 -days 365 -out rel