TiddlyWiki5/cssbuild/tiddlywiki.less

/*
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-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";