major reworking of dispy dark. light to follow
Signed-off-by: Simon L'nu <simon.lnu@gmail.com>
This commit is contained in:
Simon L'nu
parent
4c8a82456e
commit
1a13c56fef
10 changed files with 3300 additions and 1923 deletions
|
|
@ -44,3 +44,4 @@ function cmtBbOpen(id) {
|
|||
$(".comment-edit-bb-" + id).show();
|
||||
}
|
||||
</script>
|
||||
<script type="text/javascript" src="$baseurl/view/theme/dispy/js/modernizr.custom.2.5.3.min.js"></script>
|
||||
|
|
|
|||
136
view/theme/dispy/dark/_base.less
Normal file
136
view/theme/dispy/dark/_base.less
Normal file
|
|
@ -0,0 +1,136 @@
|
|||
// _base.less
|
||||
//
|
||||
// the base file for dispy's dark "sub-theme".
|
||||
//
|
||||
// Notes:
|
||||
// this is used to define mixins (think of them as functions)
|
||||
// and variables. the mixins are the ".foo () {}" things, vars are
|
||||
// like "@bar".
|
||||
//
|
||||
// (BTW, this will make it a LOT easier to maintain.)
|
||||
//
|
||||
// Dev. Note: the // style comments don't show up at all when
|
||||
// you "compile" the css (with `lessc`), but css (/**/) comments
|
||||
// do. i use them to our advantage :).
|
||||
|
||||
//* backgrounds */
|
||||
@dk_bg_colour: #1d1f1d;
|
||||
@bg_colour: #2e2f2e;
|
||||
@bg_alt_colour: #2e302e;
|
||||
@med_bg_colour: #4e4f4e;
|
||||
@menu_bg_colour: #555753;
|
||||
|
||||
//* font colour, aka color: */
|
||||
@lt_main_colour: #ffff99;
|
||||
@main_colour: #eeeecc;
|
||||
@main_alt_colour: #eeeeee;
|
||||
// darken(@main_alt_colour, 13%) > #cdcdcd
|
||||
// darken(@main_alt_colour, 60%) > #555555
|
||||
@disabled_colour: #ddddbb;
|
||||
@shiny_colour: #2e3436;
|
||||
@red_orange: #ff2000;
|
||||
@orange: #f8911b;
|
||||
@lt_orange: #fcaf3e;
|
||||
@shadow_colour: #111111;
|
||||
@friendica_blue: #3465a4;
|
||||
@notice: #3320bc;
|
||||
@info: #1353b1;
|
||||
@alert: #ff0000;
|
||||
|
||||
@lt_main_colour: lighten(@bg_colour, 10%);
|
||||
@dk_main_colour: darken(@bg_colour, 10%);
|
||||
|
||||
//* links */
|
||||
@link_colour: #88a9d2;
|
||||
@dk_link_colour: darken(@link_colour, 10%);
|
||||
@lt_link_colour: lighten(@link_colour, 10%);
|
||||
//@hover_colour: #729fcf;
|
||||
@hover_colour: @dk_link_colour;
|
||||
|
||||
//* box shadows */
|
||||
@menu_shadow: 5px 0 10px 0 @shadow_colour;
|
||||
@main_shadow: 3px 3px 3px 10px 0 @shadow_colour;
|
||||
|
||||
// default here was @main_shadow
|
||||
.box_shadow(@h: 5px, @v: 5px, @blur: 5px, @spread: 0px, @colour: @shadow_colour) {
|
||||
-moz-box-shadow: @h @v @blur @spread @colour;
|
||||
-o-box-shadow: @h @v @blur @spread @colour;
|
||||
-webkit-box-shadow: @h @v @blur @spread @colour;
|
||||
-ms-box-shadow: @h @v @blur @spread @colour;
|
||||
box-shadow: @h @v @blur @spread @colour;
|
||||
}
|
||||
//* http://css-tricks.com/snippets/css/css-box-shadow/
|
||||
//* box-shadow:
|
||||
//* 1. The horizontal offset of the shadow, positive means
|
||||
//* the shadow will be on the right of the box, a negative
|
||||
//* offset will put the shadow on the left of the box.
|
||||
//* 2. The vertical offset of the shadow, a negative one
|
||||
//* means the box-shadow will be above the box, a
|
||||
//* positive one means the shadow will be below the box.
|
||||
//* 3. The blur radius (optional), if set to 0 the shadow
|
||||
//* will be sharp, the higher the number, the more blurred
|
||||
//* it will be.
|
||||
//* 4. The spread radius (optional), positive values increase
|
||||
//* the size of the shadow, negative values decrease the size.
|
||||
//* Default is 0 (the shadow is same size as blur).
|
||||
//* 5. Colo[u]r
|
||||
//*/
|
||||
|
||||
//* text-shadow */
|
||||
.text_shadow (@h: 1px, @v: 1px, @c: #111) {
|
||||
-moz-text-shadow: @h @v @c;
|
||||
-o-text-shadow: @h @v @c;
|
||||
-webkit-text-shadow: @h @v @c;
|
||||
-ms-text-shadow: @h @v @c;
|
||||
text-shadow: @h @v @c;
|
||||
}
|
||||
//* transitions */
|
||||
.transition (@type: all, @dur: 0.5s, @effect: ease-in-out) {
|
||||
-webkit-transition: @arguments;
|
||||
-moz-transition: @arguments;
|
||||
-o-transition: @arguments;
|
||||
-ms-transition: @arguments;
|
||||
transition: @arguments;
|
||||
}
|
||||
|
||||
//* borders */
|
||||
.borders (@size: 1px, @style: solid, @colour: @main_colour) {
|
||||
border: @size @style @colour;
|
||||
}
|
||||
|
||||
//* rounded box corners */
|
||||
.rounded_corners (@r: 5px) {
|
||||
-o-border-radius: @r;
|
||||
-webkit-border-radius: @r;
|
||||
-moz-border-radius: @r;
|
||||
-ms-border-radius: @r;
|
||||
border-radius: @r;
|
||||
}
|
||||
|
||||
//* pre wrap */
|
||||
.wrap () {
|
||||
white-space: pre-wrap;
|
||||
white-space: pre;
|
||||
word-wrap: none;
|
||||
}
|
||||
//* font size sizing */
|
||||
.default_font () {
|
||||
font-size: 16px;
|
||||
line-height: 1.1em;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
//* reset ul, ol */
|
||||
.list_reset () {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
list-style: none;
|
||||
list-style-position: inside;
|
||||
}
|
||||
|
||||
//* box size: width, height */
|
||||
.box (@w: 20px, @h: 20px) {
|
||||
width: @w;
|
||||
height: @h;
|
||||
}
|
||||
|
||||
|
|
@ -2,36 +2,39 @@ article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display
|
|||
audio,canvas,video,time{display:inline-block;*display:inline;*zoom:1;}
|
||||
audio:not([controls]),[hidden]{display:none;}
|
||||
html{font-size:100%;overflow-y:scroll;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}
|
||||
body{margin:0;font-size:16px;line-height:1.1em;font-family:sans-serif;color:#eec;background-color:#2e2f2e;}
|
||||
button,input,select,textarea{font-family:sans-serif;color:#eec;background-color:#2e2f2e;}
|
||||
select{border:1px #555 dotted;padding:3px;margin:3px;color:#eec;background:#2e2f2e;}
|
||||
option{padding:3px;color:#eec;background:#2e2f2e;}option[selected="selected"]{color:#2e2f2e;background:#eec;}
|
||||
ul,ol{padding:0;}
|
||||
body{margin:0;padding:0;font-size:16px;line-height:1.1em;font-family:sans-serif;color:#eeeecc;background-color:#2e2f2e;}
|
||||
button,input,select,textarea{color:#eeeecc;background-color:#2e2f2e;}
|
||||
select{border:1px #555 dotted;padding:1px;margin:3px;color:#eeeecc;background:#2e2f2e;}
|
||||
option{padding:1px;color:#eeeecc;background:#2e2f2e;}option[selected="selected"]{color:#2e2f2e;background:#eeeecc;}
|
||||
ul,ol{margin:0px;padding:0px;list-style:none;list-style-position:inside;}
|
||||
tr:nth-child(even){background-color:#474947;}
|
||||
:focus{outline:0;}
|
||||
[disabled="disabled"]{background:#4e4f4f;color:#ddb;}
|
||||
ins{background-color:#2e302e;color:#ff9;text-decoration:none;}
|
||||
mark{background-color:#2e302e;color:#ff9;font-style:italic;font-weight:bold;}
|
||||
[disabled="disabled"]{background:#4e4f4e;color:#ddddbb;}
|
||||
ins,mark{background-color:#2e302e;color:#474947;}
|
||||
ins{text-decoration:none;}
|
||||
mark{font-style:italic;font-weight:bold;}
|
||||
pre,code,kbd,samp,.wall-item-body code{font-family:monospace, monospace;_font-family:monospace;font-size:1em;}
|
||||
pre,.wall-item-body code{white-space:pre;white-space:pre-wrap;word-wrap:break-word;}
|
||||
pre,.wall-item-body code{white-space:pre-wrap;white-space:pre;word-wrap:none;}
|
||||
q{quotes:none;}q:before,q:after{content:"";content:none;}
|
||||
small{font-size:85%;}
|
||||
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}
|
||||
sub{bottom:-0.25em;}
|
||||
sup{top:-0.5em;}
|
||||
img{border:0 none;}
|
||||
a{color:#88a9d2;text-decoration:none;margin-bottom:1px;}a:hover img{text-decoration:none;}
|
||||
blockquote{background:#444;color:#eec;text-indent:5px;padding:5px;border:1px #aaa solid;border-radius:5px;}
|
||||
a:hover{color:#729fcf;border-bottom:1px dotted #729fcf;}
|
||||
a{color:#88a9d2;text-decoration:none;margin-bottom:1px;}a:hover{color:#638ec4;border-bottom:1px dotted #638ec4;}
|
||||
a:hover img{text-decoration:none;}
|
||||
blockquote{background:#444;color:#eeeecc;text-indent:5px;padding:5px;border:1px #aaa solid;-o-border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;border-radius:5px;}
|
||||
.required{display:inline;color:#ff0;font-size:16px;font-weight:bold;margin:3px;}
|
||||
.fakelink,.lockview{color:#729fcf;cursor:pointer;}
|
||||
.fakelink:hover{color:#729fcf;}
|
||||
.fakelink,.lockview{color:#88a9d2;cursor:pointer;}
|
||||
.fakelink:hover{color:#638ec4;}
|
||||
.smalltext{font-size:0.7em;}
|
||||
#panel{position:absolute;font-size:0.8em;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;border:1px solid #fff;background-color:#2e302e;color:#eeeeec;padding:1em;}
|
||||
#panel{position:absolute;-o-border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;border-radius:5px;border:1px solid #eeeeee;background-color:#2e302e;color:#eeeecc;padding:1em;}
|
||||
.pager{margin-top:60px;display:block;clear:both;text-align:center;}.pager span{padding:4px;margin:4px;}
|
||||
.pager_current{background-color:#729fcf;color:#fff;}
|
||||
.pager_current{background-color:#88a9d2;color:#eeeeee;}
|
||||
.action{margin:5px 0;}
|
||||
.tool{margin:5px 0;list-style:none;}
|
||||
#articlemain{width:100%;height:100%;margin:0 auto;}
|
||||
[class$="-desc"],[id$="-desc"]{color:#2e2f2e;background:#eeeecc;-o-border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;border-radius:5px;-moz-box-shadow:3px 3px 5px 0px #111111;-o-box-shadow:3px 3px 5px 0px #111111;-webkit-box-shadow:3px 3px 5px 0px #111111;-ms-box-shadow:3px 3px 5px 0px #111111;box-shadow:3px 3px 5px 0px #111111;padding:3px;margin:5px 0;font-weight:bold;}
|
||||
#asidemain .field{overflow:hidden;width:200px;}
|
||||
#login-extra-links{overflow:auto !important;padding-top:60px !important;width:100% !important;}#login-extra-links a{margin-right:20px;}
|
||||
#login_standard{display:block !important;float:none !important;height:100% !important;position:relative !important;width:100% !important;}#login_standard .field label{width:200px !important;}
|
||||
|
|
@ -41,10 +44,10 @@ a:hover{color:#729fcf;border-bottom:1px dotted #729fcf;}
|
|||
#asidemain #login_openid{position:relative !important;float:none !important;margin-left:0px !important;height:auto !important;width:200px !important;}
|
||||
#login_openid #id_openid_url{width:180px !important;overflow:hidden !important;}
|
||||
#login_openid label{width:180px !important;}
|
||||
nav{height:60px;background-color:#1d1f1d;color:#eeeeec;position:relative;padding:20px 20px 10px 95px;}nav a{text-decoration:none;color:#eeeeec;border:0px;}nav a:hover{text-decoration:none;color:#eeeeec;border:0px;}
|
||||
nav{height:60px;background-color:#1d1f1d;color:#eeeeee;position:relative;padding:20px 20px 10px 95px;}nav a{text-decoration:none;color:#eeeeee;border:0px;}nav a:hover{text-decoration:none;color:#eeeeee;border:0px;}
|
||||
nav #banner{display:block;position:absolute;left:51px;top:25px;}nav #banner #logo-text a{font-size:40px;font-weight:bold;margin-left:3px;}
|
||||
ul#user-menu-popup{display:none;position:absolute;background-color:#555753;width:100%;padding:10px 0px;margin:0px;top:20px;left:0;-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px;box-shadow:5px 10px 10px 0 #111;z-index:10000;}ul#user-menu-popup li{display:block;}ul#user-menu-popup li a{display:block;padding:5px;}ul#user-menu-popup li a:hover{color:#2e302e;background-color:#eeeeec;}
|
||||
ul#user-menu-popup li a.nav-sep{border-top:1px solid #eeeeec;}
|
||||
ul#user-menu-popup{display:none;position:absolute;background-color:#555753;width:100%;padding:10px 0px;margin:0px;top:20px;left:0;-o-border-radius:0 0 5px 5px;-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;-ms-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px;-moz-box-shadow:5px 5px 10px 0px #111111;-o-box-shadow:5px 5px 10px 0px #111111;-webkit-box-shadow:5px 5px 10px 0px #111111;-ms-box-shadow:5px 5px 10px 0px #111111;box-shadow:5px 5px 10px 0px #111111;z-index:10000;}ul#user-menu-popup li{display:block;}ul#user-menu-popup li a{display:block;padding:5px;}ul#user-menu-popup li a:hover{color:#eeeecc;background-color:#2e302e;}
|
||||
ul#user-menu-popup li a.nav-sep{border-top:1px solid #2e302e;}
|
||||
nav .nav-link{display:inline-block;width:22px;height:22px;overflow:hidden;margin:0px 5px 5px;text-indent:50px;background:transparent url(dark/icons.png) 0 0 no-repeat;}
|
||||
#nav-apps-link{background-position:0 -66px;}#nav-apps-link:hover{background-position:-22px -66px;}
|
||||
#nav-community-link,#nav-contacts-link{background-position:0 -22px;}#nav-community-link:hover,#nav-contacts-link:hover{background-position:-22px -22px;}
|
||||
|
|
@ -58,24 +61,24 @@ nav .nav-link{display:inline-block;width:22px;height:22px;overflow:hidden;margin
|
|||
#nav-notify-link:hover{background-position:-66px -110px;}
|
||||
#nav-network-link{background-position:0px -177px;}#nav-network-link:hover{background-position:-22px -177px;}
|
||||
#nav-search-link{background-position:0 -44px;}#nav-search-link:hover{background-position:-22px -44px;}
|
||||
#profile-link,#profile-title,#wall-image-upload,#wall-file-upload,#profile-attach-wrapper,#profile-audio,#profile-link,#profile-location,#profile-nolocation,#profile-title,#jot-title,#profile-upload-wrapper,#profile-video,#profile-jot-submit,#wall-image-upload-div,#wall-file-upload-div,.icon,.hover,.focus,.pointer{cursor:pointer;}
|
||||
div.jGrowl div.notice{background:#511919 url("../../../images/icons/48/notice.png") no-repeat 5px center;color:#ffffff;padding-left:58px;}
|
||||
div.jGrowl div.info{background:#364e59 url("../../../images/icons/48/info.png") no-repeat 5px center;color:#ffffff;padding-left:58px;}
|
||||
#jot-title,#profile-link,#profile-title,#profile-attach-wrapper,#profile-audio,#profile-link,#profile-location,#profile-nolocation,#profile-title,#profile-upload-wrapper,#profile-video,#profile-jot-submit,#wall-image-upload,#wall-file-upload,#wall-image-upload-div,#wall-file-upload-div,.icon,.hover,.focus,.pointer{cursor:pointer;}
|
||||
div.jGrowl div.notice{background:#3320bc url("../../../images/icons/48/notice.png") no-repeat 5px center;color:white;padding-left:58px;margin-top:50px;}
|
||||
div.jGrowl div.info{background:#1353b1 url("../../../images/icons/48/info.png") no-repeat 5px center;color:white;padding-left:58px;margin-top:50px;}
|
||||
#nav-notifications-menu{margin:30px 0 0 -20px;width:275px;max-height:300px;overflow-y:auto;font-size:9pt;}#nav-notifications-menu .contactname{font-weight:bold;font-size:0.9em;}
|
||||
#nav-notifications-menu img{float:left;margin-right:5px;}
|
||||
#nav-notifications-menu .notif-when{font-size:0.8em;display:block;}
|
||||
#nav-notifications-menu li{word-wrap:normal;border-bottom:1px solid #000;}#nav-notifications-menu li:hover{color:black;}
|
||||
#nav-notifications-menu li{word-wrap:normal;border-bottom:1px solid black;}#nav-notifications-menu li:hover{color:black;}
|
||||
#nav-notifications-menu a:hover{color:black;text-decoration:underline;}
|
||||
nav #nav-notifications-linkmenu.on .icon.s22.notify,nav #nav-notifications-linkmenu.selected .icon.s22.notify{background-image:url("../../../images/icons/22/notify_on.png");}
|
||||
nav #nav-notifications-linkmenu.on .icon.s22.notify,nav #nav-notifications-linkmenu.selected .icon.s22.notify{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAQAAABuvaSwAAAAAmJLR0QA/4ePzL8AAAAJcEhZcwAAUJcAAFCXAZtv64UAAAHuSURBVCjPbZPbTlNBFIYHLixXRIhEQGNRMUopJAJyAyZ4Z2l8B+XwEBqKtjwOp8oDIAJKIJFUjdFIQCUYrRytdyb0459ht8wG9rrYs9b618y/TsYEH4ZK4qRYYIdDybZOI7TKakIfVhrJ8J2i5IBNyV93/kaaBuv3oV3MgwCTPKGHPkkPA0xRUMBrOgN4AP0o6BseEpF2m3es0qJTFQneyvMhgDsC9tZprnEcGuOPeMcDLUpW3jlLxlDBmJTFY6gLvsVv8tyh9G7U3Z6mwtCuJAoiECSh/w1+8otmTjLqF2KDNsNzRY1bruV0o6rFFtc9S5USh5RRWvAYv4xX9dYPS8ur1oBQC4Y99m2uHriRNda5ErLdU1l3jCI2xdJ3XOYLX6kP2W6K2OF54Et84jN154F31d6ukKOG92pSbcjWLRrbRhVGLTZeOtXqX46LoQSHhJo3jOo3ESrdBQbljIRKNyXUiKHNNSXhTdbZiUzyT/WJ23Zn3BBFy+2u4ZHc1eV2N7EkxAvbbqMRmZOSlbE0g/uajRgl6Iy8r1wpnaFTQ4ji+8XOEsuxYmdDWpJleXJ0+BPdoduL4p5Vavd5IOllmJfiWmSWu6d3pV4jteFWqaAGbLkdKSqtUXXUnN3DSvF8phfy/JfkxfOp9sVb2COz+hY/T0qkwwAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxMS0wOS0xNlQwOTozOTowMCswMjowMC9Oi90AAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTEtMDktMTZUMDk6Mzk6MDArMDI6MDBeEzNhAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAABJRU5ErkJggg==");}
|
||||
.show{display:block;}
|
||||
#notifications{height:20px;width:170px;position:absolute;top:-19px;left:4px;}
|
||||
#nav-floater{position:fixed;top:20px;right:1%;padding:5px;background:#1d1f1d;color:transparent;border-radius:5px;z-index:100;width:300px;height:60px;}
|
||||
#notifications{width:170px;height:20px;position:absolute;top:-19px;left:4px;}
|
||||
#nav-floater{position:fixed;top:20px;right:1%;padding:5px;background:#1d1f1d;color:transparent;-o-border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;border-radius:5px;z-index:100;width:300px;height:60px;}
|
||||
#nav-buttons{clear:both;list-style:none;padding:0px;margin:0px;height:25px;}#nav-buttons>li{padding:0;display:inline-block;margin:0px -4px 0px 0px;}
|
||||
.floaterflip{display:block;position:fixed;z-index:110;top:56px;right:19px;width:22px;height:22px;overflow:hidden;margin:0px;background:transparent url(dark/icons.png) -190px -60px no-repeat;}
|
||||
.search-box{display:inline-block;margin:5px;position:fixed;rig | ||||