1
0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-12-25 01:20:30 +00:00
TiddlyWiki5/cssbuild/tiddlywiki.less
2012-11-27 22:27:36 +00:00

282 lines
4.4 KiB
Plaintext

/*
TiddlyWiki
Base CSS from Twitter Bootstrap plus TiddlyWiki-specific overrides
*/
/*
Base Twitter Bootstrap
*/
@import "twitter-bootstrap/less/bootstrap.less";
/*
TiddlyWiki overrides of Bootstrap variables
*/
@baseFontSize: 14px;
@baseLineHeight: 20px;
@navbarBackground: darken(@navbarBackgroundHighlight, 15%);
@navbarBackgroundHighlight: @btnDangerBackgroundHighlight;
@navbarText: @white;
@navbarLinkColor: @grayLighter;
/*
TiddlyWiki mixins
*/
// This doesn't seem to work; trying to call it puts Less into an infinite loop
.tab-size (@size) {
tab-size: @size;
-moz-tab-size: @size;
-o-tab-size: @size;
}
/*
Base re-definitions
*/
body {
position: relative; // So that height: 100% will fit to the body
padding-top: @navbarHeight; // Allow for the navbar
}
/*
Password prompts
*/
.tw-password-wrapper {
z-index: 20000;
position: fixed;
text-align: center;
width: 480px;
top: 4em;
left: 50%;
margin-left: -264px; /* - width/2 - paddingHorz/2 - border */
padding: 16px 16px 16px 16px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
color: #000;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
background-color: rgb(197, 235, 183);
border: 8px solid rgb(164, 197, 152);
}
.tw-password-wrapper form {
text-align: left;
}
.tw-password-wrapper h1 {
font-size: 16px;
line-height: 20px;
}
/*
Tweaks for full screen mode
*/
html:-webkit-full-screen { width: 100%; height: 100%; }
html:-moz-full-screen { width: 100%; height: 100%; }
html:-ms-full-screen { width: 100%; height: 100%; }
html:-o-full-screen { width: 100%; height: 100%; }
html:full-screen { width: 100%; height: 100%; }
/*
Tiddler styles
*/
@media (min-width: 767px) {
.tw-tiddler-frame {
padding: 30px 30px 30px 30px;
margin: 30px 5px 30px 5px;
.box-shadow(1px 1px 6px rgba(0,0,0,0.4));
background-color: #fff;
}
body {
background: @grayLighter; // So that the tiddlers pop out more
}
}
@media (max-width: 480px) {
}
.tw-tiddler-frame .body {
margin-top: 12px;
}
.title {
font-weight: bold;
font-size: 33px;
line-height: 40px;
color: #182955;
}
.title button {
vertical-align: top;
}
.title > span {
margin-right: 10px;
}
.tw-tiddler-missing .title {
font-style: italic;
font-weight: normal;
}
.tw-edit-field {
border: 1px dotted #888;
}
textarea.tw-edit-field {
width: 100%;
}
canvas.tw-edit-field {
cursor: crosshair;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
img, canvas, embed {
max-width: 100%;
}
embed {
width: 100%;
height: 20em;
}
a.tw-tiddlylink {
font-style: normal;
font-weight: normal;
}
a.tw-tiddlylink-resolves {
font-style: normal;
font-weight: bold;
}
a.tw-tiddlylink-missing {
font-style: italic;
}
.tw-suppress-missing-tiddlylink a.tw-tiddlylink-missing {
font-style: inherit;
}
.tw-list-element {
white-space: normal;
}
.tw-well {
.box-shadow(inset 1px 1px 4px 1px rgba(0, 0, 0, 0.15));
background: #ccc;
}
.tw-scrollable-outer {
}
.tw-scrollable-inner {
}
.tw-scrollable .tw-tiddler-frame {
margin: 10px 10px 10px 10px;
padding: 30px 30px 30px 30px;
.box-shadow(1px 1px 6px rgba(0,0,0,0.4));
background-color: #fff;
width: 400px;
}
.tw-zoomable .tw-tiddler-frame {
margin: 0px 0px 0px 0px;
padding: 30px 30px 30px 30px;
.box-shadow(1px 1px 6px rgba(0,0,0,0.4));
background-color: #fff;
width: 400px;
}
.tw-menu-list-item {
word-wrap: break-word;
padding-bottom: 0.5em;
}
/*
Dropdown menus
*/
.tw-ticked-menu-item::before {
position: absolute;
content: "\2022";
left: 4px;
}
.dropdown-menu {
position: static;
}
.dropdown-menu a {
position: relative;
}
/* This is needed to make the dropdown arrows abut to the dropdown itself */
.navbar .dropdown-menu::before {
top: -4px;
}
.navbar .dropdown-menu::after {
top: -3px;
}
/*
Buttons
*/
.btn-invisible {
border: none;
background: none;
margin: 0;
padding: 0;
}
.tw-tags-wrapper .label {
margin-right: 6px;
}
/*
Split label
*/
.splitLabel {
font-size: 9.5px;
margin-right: 5px;
}
.splitLabelLeft {
text-transform: uppercase;
font-weight: bold;
padding: 3px 2px 3px 5px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
background-color: #ccc;
}
.splitLabelRight {
padding: 3px 5px 3px 2px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
background-color: #eee;
}
/*
Includes
*/
@import "javascript.less";