diff options
Diffstat (limited to 'view/theme/dispy/dark/style.less')
| -rw-r--r-- | view/theme/dispy/dark/style.less | 297 |
1 files changed, 126 insertions, 171 deletions
diff --git a/view/theme/dispy/dark/style.less b/view/theme/dispy/dark/style.less index 40c8835e6..f48a77e27 100644 --- a/view/theme/dispy/dark/style.less +++ b/view/theme/dispy/dark/style.less @@ -1,19 +1,19 @@ /* - * dispy-dark - * + * dispy dark + * Description: Dispy Dark: dark, sleek, functional * author, maintainer: simon <http://simon.kisikew.org/> * * Author's notes: * A few things of note here. The less file is our working copy, * and the CSS is *generated* from it. The CSS is the one that's * included in the HTML, and not the less one. This is to save - * bandwidth and processing time. + * bandwidth and processing time, by not including less.js. */ -/* from html5boilerplate */ -/* these are to tell browsers they should be displayed a certain way */ @import "_base"; +///* from html5boilerplate */ +///* these are to tell browsers they should be displayed a certain way */ article, aside, details, @@ -37,12 +37,12 @@ time { audio:not([controls]), [hidden] { display: none; } -/* - * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units - * 2. Force vertical scrollbar in non-IE - * 3. Prevent iOS text size adjust on device orientation change, - * without disabling user zoom: h5bp.com/g - */ +///* +// * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units +// * 2. Force vertical scrollbar in non-IE +// * 3. Prevent iOS text size adjust on device orientation change, +// * without disabling user zoom: h5bp.com/g +// */ html { font-size: 100%; overflow-y: scroll; @@ -61,11 +61,13 @@ button, input, select, textarea { background-color: @bg_colour; } select { - border: 1px #555 dotted; + .borders(1px, dotted, darken(@main_alt_colour, 60%)); padding: 1px; margin: 3px; color: @main_colour; background: @bg_colour; + max-width: 85%; + min-width: 85px; } option { padding: 1px; @@ -76,13 +78,10 @@ option { background: @main_colour; } } -ul, ol { - .list_reset; -} tr:nth-child(even) { background-color: lighten(@bg_colour, 10%); } -/* remember to define focus styles! */ +///* remember to define focus styles! */ :focus { outline: 0; } @@ -90,7 +89,7 @@ tr:nth-child(even) { background: @med_bg_colour; color: @disabled_colour; } -/* remember to highlight inserts somehow! */ +///* remember to highlight inserts somehow! */ ins, mark { background-color: @bg_alt_colour; color: @lt_main_colour; @@ -102,14 +101,19 @@ mark { font-style: italic; font-weight: bold; } -/* Redeclare monospace font family: h5bp.com/j */ -pre, code, kbd, samp, .wall-item-body code { +///* Redeclare monospace font family: h5bp.com/j */ +pre, +code, +kbd, +samp, +.wall-item-body code { font-family: monospace, monospace; _font-family: monospace; font-size: 1em; } -/* Improve readability of pre-formatted text in all browsers */ -pre, .wall-item-body code { +///* Improve readability of pre-formatted text in all browsers */ +pre, +.wall-item-body code { .wrap; } q { @@ -122,7 +126,8 @@ q { small { font-size: 85%; } -/* Position subscript and superscript content without affecting line-height: h5bp.com/k */ +///* Position subscript and superscript content without affecting +// * line-height: h5bp.com/k */ sub, sup { font-size: 75%; line-height: 0; @@ -151,13 +156,57 @@ a { } } blockquote { - background: #444; + background: darken(@main_alt_colour, 66.5%); color: @main_colour; text-indent: 5px; padding: 5px; - border: 1px #aaa solid; + .borders(1px, solid, darken(@main_alt_colour, 33%)); .rounded_corners; } +label { + width: 38%; + display: inline-block; + font-size: 0.95em; + margin: 0 10px 1em 0; + .borders(1px, solid, @bg_colour); + padding: 5px; + background: @main_colour; + color: darken(@main_alt_colour, 86.5%); + .box_shadow(3px, 3px, 5px); +} +input { + .box(250px, 25px); + .borders(1px, solid, darken(@main_alt_colour, 33.5%)); + &[type="checkbox"], + &[type="radio"] { + margin: 0; + .box(15px, 15px); + } + &[type="submit"], + &[type="button"] { + background-color: @main_alt_colour; + .borders(2px, outset, darken(@main_alt_colour, 24%)); + .rounded_corners; + .box_shadow(1px, 3px, 4px, 0); + color: @bg_alt_colour; + cursor: pointer; + font-weight: bold; + width: auto; + .text_shadow; + } + &[type="submit"]:active, + &[type="button"]:active { + .box_shadow(0, 0, 0, 0); + } +} +h1, h2, h3, +h4, h5, h6 { + margin: 10px 0px; + font-weight: bold; + border-bottom: 1px solid @hover_colour; +} + +// .required { display: inline; color: #ff0; @@ -188,6 +237,8 @@ blockquote { display: block; clear: both; text-align: center; + font-size: small; + font-weight: bold; span { padding: 4px; margin: 4px; @@ -195,7 +246,7 @@ blockquote { } .pager_current { background-color: @link_colour; - color: @main_alt_colour; + color: @bg_colour; } @@ -219,9 +270,10 @@ blockquote { background: @main_colour; .rounded_corners; .box_shadow(3px, 3px, 5px); - padding: 3px; - margin: 5px 0; + margin: 3px 10px 7px 0; + padding: 6px 7px; font-weight: bold; + font-size: smaller; } @@ -276,7 +328,8 @@ blockquote { overflow: hidden !important; } label { width: 180px !important; - } } + } +} /** @@ -315,6 +368,8 @@ ul#user-menu-popup { margin: 0px; top: 20px; left: 0; + font-size: small; + line-height: 1; .rounded_corners(0 0 5px 5px); .box_shadow(5px, 5px, 10px, 0px); z-index: 10000; @@ -378,7 +433,8 @@ nav .nav-link { &:hover { background-position: -66px -88px; } } -#nav-notify-link, #nav-notifications-linkmenu { +#nav-notify-link, +#nav-notifications-linkmenu { background-position: -44px -110px; } #nav-notify-link:hover { @@ -417,9 +473,7 @@ nav .nav-link { .pointer { cursor: pointer; } - -/* popup notifications */ - +//* popup notifications */ div.jGrowl div { &.notice { background: @notice url("../../../images/icons/48/notice.png") no-repeat 5px center; @@ -434,7 +488,6 @@ div.jGrowl div { margin-top: 50px; } } - #nav-notifications-menu { margin: 30px 0 0 -20px; width: 275px; @@ -458,9 +511,9 @@ div.jGrowl div { } a:hover { color: black; - text-decoration: underline; } + text-decoration: underline; + } } - nav #nav-notifications-linkmenu { &.on .icon.s22.notify, &.selected .icon.s22.notify { @@ -473,9 +526,10 @@ nav #nav-notifications-linkmenu { } #notifications { .box(170px, 20px); - position: absolute; + font-size: small; top: -19px; left: 4px; + position: absolute; } #nav-floater { position: fixed; @@ -560,7 +614,7 @@ nav #nav-notifications-linkmenu { } } #user-menu-label { - font-size: 12px; + font-size: small; padding: 3px 20px 9px 5px; height: 10px; } @@ -700,7 +754,7 @@ nav #nav-notifications-linkmenu { */ #asidemain { float: left; - font-size: smaller; + font-size: 0.75em; margin: 20px 0 20px 35px; width: 25%; display: inline; @@ -712,9 +766,9 @@ nav #nav-notifications-linkmenu { } .vcard { .fn { - font-size: 1.7em; + font-size: 1.5em; font-weight: bold; - border-bottom: 1px solid #729fcf; + border-bottom: 1px solid @hover_colour; padding-bottom: 3px; } #profile-photo-wrapper { @@ -746,7 +800,8 @@ nav #nav-notifications-linkmenu { background: @main_colour; color: @bg_colour; font-weight: bold; - .box_shadow(1px 1px 5px 0); + .box_shadow(3px, 3px, 5px); + .rounded_corners; margin: 15px 0 5px; padding-left: 5px; } @@ -981,14 +1036,6 @@ nav #nav-notifications-linkmenu { .rounded_corners; overflow: hidden; } -#profile-jot-acl-wrapper { - margin: 0 10px; - .borders(1px, solid, darken(@main_alt_colour, 60%)); - border-top: 0; - display: block !important; - .borders(1px solid @menu_bg_colour); - .box_shadow; -} #group_allow_wrapper, #group_deny_wrapper, #acl-permit-outer-wrapper, @@ -1046,10 +1093,12 @@ nav #nav-notifications-linkmenu { color: @main_colour; .borders(1px, solid, @main_colour); .rounded_corners; + .box_shadow(5px, 0, 10px); padding: 3px 3px 6px 10px; .wall-item-outside-wrapper { border: 0; .rounded_corners(0px 0px 0px 0px); + .box_shadow(0, 0, 0, 0); } } @@ -1115,7 +1164,7 @@ nav #nav-notifications-linkmenu { } .wall-item-content-wrapper { position: relative; - padding: 10px; + padding: 0.75em; width: auto; } .wall-item-outside-wrapper .wall-item-comment-wrapper { @@ -1133,10 +1182,11 @@ nav #nav-notifications-linkmenu { } .wall-item-content { overflow-x: auto; - margin: 0px 15px 0px 5px; + margin: 0px 4em 1em 5px; } -[id^="tread-wrapper"], [class^="tread-wrapper"] { - margin: 15px 0 0 0; +[id^="tread-wrapper"], +[class^="tread-wrapper"] { + margin: 1.2em 0 0 0; padding: 0px; } .wall-item-photo-menu { @@ -1182,22 +1232,22 @@ nav #nav-notifications-linkmenu { .wall-item-subtools1 { .box(30px, 30px); list-style: none outside none; - margin: 20px 0 30px -20px; + margin: 18px 0 30px -20px; padding: 0; } .wall-item-subtools2 { .box(25px, 25px); list-style: none outside none; - margin: -75px 0 0 5px; + margin: -78px 0 0 5px; padding: 0; } .wall-item-title { font-size: 1.2em; font-weight: bold; - margin-bottom: 1em; + margin-bottom: 1.4em; } .wall-item-body { - margin: 20px 20px 10px 0px; + margin: 15px 10px 10px 0px; text-align: left; overflow-x: auto; } @@ -1212,14 +1262,20 @@ nav #nav-notifications-linkmenu { clear: left; font-size: 0.8em; color: lighten(@menu_bg_colour, 20%); - margin: 5px 0 5px 120px; + margin: 5px 0 5px 10.2em; + .transition; + opacity: 0.5; + &:hover { + opacity: 1; + } } .wall-item-author, .wall-item-actions-author { clear: left; + float: left; font-size: 0.8em; color: lighten(@menu_bg_colour, 20%); - margin: 20px 20px 0 110px; + margin: 1em auto 0 0.2em; } .wall-item-ago { display: inline; @@ -1309,10 +1365,10 @@ nav #nav-notifications-linkmenu { */ .ccollapse-wrapper { font-size: 0.9em; - margin-left: 80px; + margin-left: 5em; } .wall-item-outside-wrapper.comment { - margin-left: 80px; + margin-left: 5em; .wall-item-photo { width: 40px !important; height: 40px !important; @@ -1332,7 +1388,7 @@ nav #nav-notifications-linkmenu { margin-left: 10px; } .wall-item-author { - margin-left: 50px; + margin-left: 0.2em; } .wall-item-photo-menu { min-width: 50px; @@ -1371,7 +1427,7 @@ nav #nav-notifications-linkmenu { [class^="comment-edit-text"] { margin: 5px 0 10px 20px; - width: 84.5%; + width: 94%; } .comment-edit-text-empty { height: 20px; @@ -2346,7 +2402,6 @@ div { label { width: 38%; display: inline-block; - font-size: 1.077em; margin: 0 10px 1em 0; border: 1px @bg_colour solid; padding: 5px; @@ -2396,42 +2451,6 @@ div { .field.radio .field_help { margin-left: 297px; } -label { - width: 38%; - display: inline-block; - font-size: 1.077em; - margin: 0 10px 1em 0; - .borders(1px, solid, @bg_colour); - padding: 5px; - background: @main_colour; - color: darken(@main_alt_colour, 86.5%); - .box_shadow(3px, 3px, 5px); -} -input { - .box(250px, 25px); - .borders(1px, solid, darken(@main_alt_colour, 33.5%)); - &[type="checkbox"], - &[type="radio"] { - margin: 0; - .box(15px, 15px); - } - &[type="submit"], - &[type="button"] { - background-color: @main_alt_colour; - .borders(2px, outset, darken(@main_alt_colour, 24%)); - .rounded_corners; - .box_shadow(1px, 3px, 4px, 0); - color: @bg_alt_colour; - cursor: pointer; - font-weight: bold; - width: auto; - .text_shadow; - } - &[type="submit"]:active, - &[type="button"]:active { - .box_shadow(0, 0, 0, 0); - } -} /* @@ -2812,6 +2831,12 @@ footer { background: @bg_colour; color: @main_colour; } +#profile-jot-acl-wrapper { + margin: 0 10px; + .borders(1px, solid, @menu_bg_colour); + border-top: 0; + // .box_shadow; +} #acl-wrapper { width: 660px; margin: 0 auto; @@ -2986,74 +3011,4 @@ footer { z-index: 999; } - -//* media stuff */ -@media handheld { - body { - font-size: 15pt; - } -} -//* Smartphones (portrait and landscape) ----------- */ -@media only screen and (min-device-width: 320px) - and (max-device-width: 480px) { - body { - font-size: 10px; - } -} -//* Smartphones (landscape) ----------- */ -@media only screen and (min-width: 321px) { - body { - font-size: 10px; - } -} -//* Smartphones (portrait) ----------- */ -@media only screen and (max-width: 320px) { - body { - font-size: 10px; - } -} -//* iPads (portrait and landscape) ----------- */ -@media only screen and (min-device-width: 768px) - and (max-device-width: 1024px) { - body { - font-size: 16px; - } -} -//* iPads (landscape) ----------- */ -@media only screen and (min-device-width: 768px) - and (max-device-width: 1024px) - and (orientation: landscape) { - body { - font-size: 16px; - } -} -//* iPads (portrait) ----------- */ -@media only screen and (min-device-width: 768px) - and (max-device-width: 1024px) - and (orientation: portrait) { - body { - font-size: 16px; - } -} -//* Desktops and laptops ----------- */ -//adjusted to 1024 from 1224. -//not everybody has a fucking big screen ffs -@media only screen and (min-width: 1024px) { - body { - font-size: 16px; - } -} -//* Large screens - */ -@media only screen and (min-width: 1520px) { - body { - font-size: 18px; - } -} -//* iPhone 4 ----------- */ -@media only screen and (-webkit-min-device-pixel-ratio: 1.5), - only screen and (min-device-pixel-ratio: 1.5) { - body { - font-size: 16px; - } -} - +@import "../css/media"; |