aboutsummaryrefslogtreecommitdiffstats
path: root/view/theme/dispy/dark/style.less
diff options
context:
space:
mode:
Diffstat (limited to 'view/theme/dispy/dark/style.less')
-rw-r--r--view/theme/dispy/dark/style.less310
1 files changed, 135 insertions, 175 deletions
diff --git a/view/theme/dispy/dark/style.less b/view/theme/dispy/dark/style.less
index 40c8835e6..caa45918c 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;
}
@@ -217,11 +268,12 @@ blockquote {
[class$="-desc"], [id$="-desc"] {
color: @bg_colour;
background: @main_colour;
- .rounded_corners;
- .box_shadow(3px, 3px, 5px);
- padding: 3px;
- margin: 5px 0;
+ // .rounded_corners;
+ // .box_shadow(3px, 3px, 5px);
+ 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;
@@ -1680,10 +1736,11 @@ div {
/**
* contacts
*/
-.view-contact-wrapper, .contact-entry-wrapper {
+.view-contact-wrapper,
+.contact-entry-wrapper {
float: left;
margin: 0 5px 40px 0;
- .box(120px, 120px);
+ .box(120px, 135px);
padding: 3px;
position: relative;
}
@@ -1703,6 +1760,10 @@ div {
.contact-entry-name {
width: 120px;
font-weight: bold;
+ font-size: small;
+}
+.contact-entry-details {
+ font-size: x-small;
}
.contact-entry-photo {
position: relative;
@@ -2346,7 +2407,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 +2456,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 +2836,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 +3016,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";