1
0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-09-27 14:48:19 +00:00
TiddlyWiki5/themes/tiddlywiki/vanilla/base.tid
Jermolene 7c235566c4 Rejig the page layout to use the scrollable widget
This is the start of some refactoring of the main layout CSS intended
to give us more flexibility and control.
2014-03-25 14:29:16 +00:00

1153 lines
20 KiB
Plaintext

title: $:/themes/tiddlywiki/vanilla/base
tags: [[$:/tags/stylesheet]]
\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline
/*
** Start with the normalize CSS reset, and then belay some of its effects
*/
{{$:/themes/tiddlywiki/vanilla/reset}}
*, input[type="search"] {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
html button {
line-height: 1.2;
}
/*
** Basic element styles
*/
html {
font-family: {{$:/themes/tiddlywiki/vanilla/settings##fontfamily}};
text-rendering: optimizeLegibility; /* Enables kerning and ligatures etc. */
}
body.tw-body {
font-size: {{$:/themes/tiddlywiki/vanilla/metrics##fontsize}};
line-height: {{$:/themes/tiddlywiki/vanilla/metrics##lineheight}};
color: <<colour foreground>>;
background-color: <<colour page-background>>;
word-wrap: break-word;
}
h1, h2, h3, h4, h5, h6 {
line-height: 1.2;
font-weight: 300;
}
pre {
display: block;
padding: 14px;
margin-top: 1em;
margin-bottom: 1em;
word-break: normal;
word-wrap: break-word;
white-space: pre;
white-space: pre-wrap;
background-color: <<colour pre-background>>;
border: 1px solid <<colour pre-border>>;
padding: 0 3px 2px;
border-radius: 3px;
}
code {
color: <<colour code-foreground>>;
background-color: <<colour code-background>>;
border: 1px solid <<colour code-border>>;
white-space: pre-wrap;
padding: 0 3px 2px;
border-radius: 3px;
}
blockquote {
border-left: 5px solid <<colour blockquote-bar>>;
margin-left: 25px;
padding-left: 10px;
}
dl dt {
font-weight: bold;
margin-top: 6px;
}
/*
Markdown likes putting code elements inside pre elements
*/
pre > code {
padding: 0;
border: none;
background-color: inherit;
color: inherit;
}
table {
border: 1px solid <<colour table-border>>;
width: auto;
max-width: 100%;
caption-side: bottom;
margin-top: 1em;
margin-bottom: 1em;
}
table th, table td {
padding: 0 7px 0 7px;
border-top: 1px solid <<colour table-border>>;
border-left: 1px solid <<colour table-border>>;
}
table thead tr td, table th {
background-color: <<colour table-header-background>>;
font-weight: bold;
}
table tfoot tr td {
background-color: <<colour table-footer-background>>;
}
.tw-tiddler-frame img, .tw-tiddler-frame svg, .tw-tiddler-frame canvas, .tw-tiddler-frame embed {
max-width: 100%;
}
.tw-tiddler-frame embed {
width: 100%;
height: 600px;
}
/*
** Links
*/
a.tw-tiddlylink {
text-decoration: none;
font-weight: normal;
color: <<colour tiddler-link-foreground>>;
-webkit-user-select: inherit; /* Otherwise the draggable attribute makes links impossible to select */
}
.tw-sidebar-lists a.tw-tiddlylink {
color: <<colour sidebar-tiddler-link-foreground>>;
}
.tw-sidebar-lists a.tw-tiddlylink:hover {
color: <<colour sidebar-tiddler-link-foreground-hover>>;
}
a.tw-tiddlylink:hover {
text-decoration: underline;
}
a.tw-tiddlylink-resolves {
}
a.tw-tiddlylink-shadow {
font-weight: bold;
}
a.tw-tiddlylink-shadow.tw-tiddlylink-resolves {
font-weight: normal;
}
a.tw-tiddlylink-missing {
font-style: italic;
}
a.tw-tiddlylink-external {
text-decoration: underline;
color: <<colour external-link-foreground>>;
background-color: <<colour external-link-background>>;
}
a.tw-tiddlylink-external:visited {
color: <<colour external-link-foreground-visited>>;
background-color: <<colour external-link-background-visited>>;
}
a.tw-tiddlylink-external:hover {
color: <<colour external-link-foreground-hover>>;
background-color: <<colour external-link-background-hover>>;
}
/*
** Drag and drop styles
*/
.tw-tiddler-dragger {
position: relative;
z-index: -10000;
}
.tw-tiddler-dragger-inner {
position: absolute;
display: inline-block;
padding: 8px 20px;
font-size: 16.9px;
font-weight: bold;
line-height: 20px;
color: <<colour dragger-foreground>>;
text-shadow: 0 1px 0 rgba(0, 0, 0, 1);
white-space: nowrap;
vertical-align: baseline;
background-color: <<colour dragger-background>>;
border-radius: 20px;
}
.tw-tiddler-dragger-cover {
position: absolute;
background-color: <<colour page-background>>;
}
.tw-dropzone {
position: relative;
}
.tw-dropzone.tw-dragover:before {
z-index: 10000;
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
background: <<colour dropzone-background>>;
text-align: center;
content: "Drop here";
}
/*
** Buttons
*/
.btn-invisible {
padding: 0;
margin: 0;
background: none;
border: none;
}
.btn-icon svg {
height: 1em;
width: 1em;
fill: <<colour muted-foreground>>;
}
.btn-big-green {
padding: 8px;
margin: 4px 8px 4px 8px;
background: <<colour download-background>>;
color: <<colour download-foreground>>;
fill: <<colour download-foreground>>;
border: none;
font-size: 1.2em;
line-height: 1.4em;
}
.tw-sidebar-lists button {
color: <<colour sidebar-button-foreground>>;
}
.tw-sidebar-lists button.btn-mini {
color: <<colour sidebar-muted-foreground>>;
}
.btn-mini:hover {
color: <<colour sidebar-muted-foreground-hover>>;
}
.tw-image-button {
height: 1em;
}
/*
** Tags and missing tiddlers
*/
.tw-tag-list-item {
position: relative;
display: inline-block;
margin-right: 7px;
}
.tw-tags-wrapper {
margin: 4px 0 14px 0;
}
.tw-missing-tiddler-label {
font-style: italic;
font-weight: normal;
display: inline-block;
font-size: 11.844px;
line-height: 14px;
white-space: nowrap;
vertical-align: baseline;
}
.tw-tag-label {
display: inline-block;
padding: 2px 9px;
font-size: 0.9em;
font-weight: 300;
line-height: 1.2em;
color: <<colour tag-foreground>>;
white-space: nowrap;
vertical-align: baseline;
background-color: <<colour tag-background>>;
border-radius: 8px;
}
.tw-untagged-label {
background-color: <<colour untagged-background>>;
}
.tw-tag-label svg, .tw-tag-label img {
height: 1em;
width: 1em;
fill: <<colour tag-foreground>>;
}
/*
** Page layout
*/
.sidebar-header {
color: <<colour sidebar-foreground>>;
}
.sidebar-header .title a.tw-tiddlylink-resolves {
font-weight: 300;
}
.sidebar-header .tw-sidebar-lists p {
margin-top: 3px;
margin-bottom: 3px;
}
.sidebar-header .tw-missing-tiddler-label {
color: <<colour sidebar-foreground>>;
}
.tw-advanced-search input {
width: 60%;
}
.tw-search a svg {
height: 0.75em;
}
.tw-search-results {
padding-top: 14px;
}
.tw-page-controls {
margin-top: 14px;
}
.tw-page-controls a.tw-tiddlylink:hover {
text-decoration: none;
}
.tw-page-controls svg {
height: 1.75em;
min-width: 1px;
padding-right: 0.5em;
fill: <<colour sidebar-controls-foreground>>;
}
.tw-page-controls button:hover svg, .tw-page-controls a:hover svg {
fill: <<colour sidebar-controls-foreground-hover>>;
}
.tw-menu-list-item {
white-space: nowrap;
}
.tw-menu-list-count {
font-weight: bold;
}
.tw-open-tiddler-list {
<<transform-origin "0% 0%">>
}
.tw-menu-list-subitem {
padding-left: 7px;
}
.story-river {
position: relative;
}
.tw-story-spacer {
position: absolute;
min-height: 100%;
}
@media (max-width: {{$:/themes/tiddlywiki/vanilla/metrics##storywidth}}) {
.sidebar-header {
padding: 14px;
}
.story-river {
position: relative;
padding: 0;
}
}
@media (min-width: {{$:/themes/tiddlywiki/vanilla/metrics##storywidth}}) {
.tw-story-scrollable {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.tw-message-box {
margin: 21px -21px 21px -21px;
}
.tw-sidebar-scrollable {
z-index: 1100;
position: fixed;
top: {{$:/themes/tiddlywiki/vanilla/metrics##storytop}};
left: {{$:/themes/tiddlywiki/vanilla/metrics##storyright}};
bottom: 0;
right: 0;
overflow-y: auto;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin: 0 0 0 -42px;
padding: 70px 0 28px 42px;
}
.tw-sidebar-scrollable-backdrop {
z-index: 1000;
position: fixed;
top: {{$:/themes/tiddlywiki/vanilla/metrics##storytop}};
left: {{$:/themes/tiddlywiki/vanilla/metrics##storyright}};
bottom: 0;
right: 0;
margin: 0 0 0 -42px;
background-color: <<colour page-background>>;
opacity: 0.8;
}
.story-river {
position: relative;
left: {{$:/themes/tiddlywiki/vanilla/metrics##storyleft}};
top: {{$:/themes/tiddlywiki/vanilla/metrics##storytop}};
width: {{$:/themes/tiddlywiki/vanilla/metrics##storywidth}};
padding: 56px 42px 42px 42px;
}
}
@media print {
.sidebar-header {
display: none;
}
.story-river {
margin-left: 14px;
}
}
/*
** Tiddler styles
*/
.tw-tiddler-frame {
margin-bottom: 28px;
background-color: <<colour tiddler-background>>;
border: 1px solid <<colour tiddler-border>>;
}
.tw-tiddler-info {
padding: 14px 42px 14px 42px;
background-color: <<colour tiddler-info-background>>;
border-top: 1px solid <<colour tiddler-info-border>>;
border-bottom: 1px solid <<colour tiddler-info-border>>;
}
.tw-tiddler-info .tw-tab-buttons button.tw-tab-selected {
background-color: <<colour tiddler-info-tab-background>>;
border-bottom: 1px solid <<colour tiddler-info-tab-background>>;
}
.tw-view-field-table {
width: 100%;
}
.tw-view-field-name {
width: 1%; /* Makes this column be as narrow as possible */
text-align: right;
font-style: italic;
}
.tw-view-field-value {
}
@media (max-width: 770px) {
.tw-tiddler-frame {
padding: 14px 14px 14px 14px;
}
.tw-tiddler-info {
margin: 0 -14px 0 -14px;
}
}
@media (min-width: 770px) {
.tw-tiddler-frame {
padding: 28px 42px 42px 42px;
width: {{$:/themes/tiddlywiki/vanilla/metrics##tiddlerwidth}};
}
.tw-tiddler-info {
margin: 0 -42px 0 -42px;
}
}
.titlebar {
font-weight: 300;
font-size: 2.35em;
line-height: 1.2em;
color: <<colour tiddler-title-foreground>>;
}
.tw-system-title-prefix {
color: <<colour muted-foreground>>;
}
.titlebar img {
height: 1em;
}
.tw-subtitle {
font-size: 0.9em;
color: <<colour tiddler-subtitle-foreground>>;
font-weight: 300;
}
.tw-tiddler-missing .title {
font-style: italic;
font-weight: normal;
}
.tw-tiddler-frame .tw-tiddler-controls {
float: right;
}
.tw-tiddler-controls button {
margin: 0 0 0 5px;
vertical-align: baseline;
}
.tw-tiddler-controls button svg {
height: 0.75em;
fill: <<colour tiddler-controls-foreground>>;
}
.tw-tiddler-controls button.tw-selected svg {
fill: <<colour tiddler-controls-foreground-selected>>;
}
.tw-tiddler-controls button.btn-invisible:hover svg {
fill: <<colour tiddler-controls-foreground-hover>>;
}
@media print {
.tw-tiddler-controls {
display: none;
}
}
.tw-tiddler-help { /* Help prompts within tiddler template */
color: <<colour muted-foreground>>;
margin-top: 14px;
}
.tw-tiddler-help a.tw-tiddlylink {
color: <<colour very-muted-foreground>>;
}
.tw-tiddler-frame input.tw-edit-texteditor, .tw-tiddler-frame textarea.tw-edit-texteditor {
width: 100%;
padding: 3px 3px 3px 3px;
border: 1px solid <<colour tiddler-editor-border>>;
line-height: 1.3em;
-webkit-appearance: none;
margin: 4px 0 4px 0;
}
.tw-tiddler-frame input.tw-edit-texteditor {
background-color: <<colour tiddler-editor-background>>;
}
canvas.tw-edit-bitmapeditor {
border: 6px solid <<colour tiddler-editor-border-image>>;
cursor: crosshair;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
margin-top: 6px;
margin-bottom: 6px;
}
.tw-edit-bitmapeditor-width {
display: block;
}
.tw-edit-bitmapeditor-height {
display: block;
}
/*
** Toolbar buttons
*/
.tw-page-controls svg.tw-image-new-button {
fill: <<colour toolbar-new-button>>;
}
.tw-page-controls svg.tw-image-options-button {
fill: <<colour toolbar-options-button>>;
}
.tw-page-controls svg.tw-image-save-button {
fill: <<colour toolbar-save-button>>;
}
.tw-tiddler-controls button svg.tw-image-info-button {
fill: <<colour toolbar-info-button>>;
}
.tw-tiddler-controls button svg.tw-image-edit-button {
fill: <<colour toolbar-edit-button>>;
}
.tw-tiddler-controls button svg.tw-image-close-button {
fill: <<colour toolbar-close-button>>;
}
.tw-tiddler-controls button svg.tw-image-delete-button {
fill: <<colour toolbar-delete-button>>;
}
.tw-tiddler-controls button svg.tw-image-cancel-button {
fill: <<colour toolbar-cancel-button>>;
}
.tw-tiddler-controls button svg.tw-image-done-button {
fill: <<colour toolbar-done-button>>;
}
/*
** Tiddler edit mode
*/
.tw-tiddler-edit-frame em.tw-edit {
color: <<colour muted-foreground>>;
font-style: normal;
}
.tw-edit-type-dropdown a.tw-tiddlylink-missing {
font-style: normal;
}
.tw-edit-tags {
border: 1px solid <<colour tiddler-editor-border>>;
padding: 4px 8px 4px 8px;
}
.tw-edit-add-tag {
display: inline-block;
}
.tw-edit-add-tag .tw-add-tag-name input {
width: 50%;
}
.tw-edit-tags .tw-tag-label {
display: inline-block;
}
.tw-edit-tags-list {
margin: 14px 0 14px 0;
}
.tw-tag-editor-label {
display: inline-block;
margin-right: 7px;
}
.tw-remove-tag-button {
padding-left: 4px;
}
.tw-tiddler-preview {
overflow: auto;
}
.tw-tiddler-preview-preview {
float: right;
width: 48%;
border: 1px solid <<colour tiddler-editor-border>>;
margin: 4px 3px 3px 3px;
padding: 3px 3px 3px 3px;
}
.tw-tiddler-preview-edit {
width: 48%;
}
.tw-edit-fields {
width: 100%;
}
.tw-edit-fields table, .tw-edit-fields tr, .tw-edit-fields td {
border: none;
padding: 4px;
}
.tw-edit-fields > tbody > .tw-edit-field:nth-child(odd) {
background-color: <<colour tiddler-editor-fields-odd>>;
}
.tw-edit-fields > tbody > .tw-edit-field:nth-child(even) {
background-color: <<colour tiddler-editor-fields-even>>;
}
.tw-edit-field-name {
text-align: right;
}
.tw-edit-field-value input {
width: 100%;
}
.tw-edit-field-remove {
}
.tw-edit-field-remove svg {
height: 1em;
width: 1em;
fill: <<colour muted-foreground>>;
vertical-align: middle;
}
.tw-edit-field-add-name {
display: inline-block;
width: 15%;
}
.tw-edit-field-add-button {
display: inline-block;
width: 10%;
}
/*
** Dropdowns
*/
.btn-dropdown svg {
height: 1em;
width: 1em;
fill: <<colour muted-foreground>>;
}
.tw-drop-down {
min-width: 280px;
border: 1px solid <<colour dropdown-border>>;
background-color: <<colour dropdown-background>>;
padding: 7px 0 7px 0;
margin: 4px 0 0 0;
white-space: nowrap;
}
.tw-drop-down p {
padding: 0 14px 0 14px;
}
.tw-drop-down a {
display: block;
padding: 0 14px 0 14px;
}
.tw-drop-down a:hover {
color: <<colour tiddler-link-background>>;
background-color: <<colour tiddler-link-foreground>>;
text-decoration: none;
}
.tw-drop-down .tw-tab-buttons button {
background-color: <<colour dropdown-tab-background>>;
}
.tw-drop-down .tw-tab-buttons button.tw-tab-selected {
background-color: <<colour dropdown-tab-background-selected>>;
border-bottom: 1px solid <<colour dropdown-tab-background-selected>>;
}
.tw-drop-down .tw-tab-contents a {
padding: 0 0.5em 0 0.5em;
}
.tw-block-dropdown-wrapper {
position: relative;
}
.tw-block-dropdown {
position: absolute;
min-width: 280px;
border: 1px solid <<colour dropdown-border>>;
background-color: <<colour dropdown-background>>;
padding: 0 0 0 0;
margin: 4px 0 0 0;
white-space: nowrap;
z-index: 1000;
}
.tw-block-dropdown a {
display: block;
padding: 4px 14px 4px 14px;
}
.tw-block-dropdown a:hover {
color: <<colour tiddler-link-background>>;
background-color: <<colour tiddler-link-foreground>>;
text-decoration: none;
}
/*
** Modals
*/
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1000;
background-color: <<colour modal-backdrop>>;
}
.modal {
z-index: 1100;
background-color: <<colour modal-background>>;
border: 1px solid <<colour modal-border>>;
}
@media (max-width: 55em) {
.modal {
position: fixed;
top: 1em;
left: 1em;
right: 1em;
}
.modal-body {
overflow-y: auto;
max-height: 400px;
}
}
@media (min-width: 55em) {
.modal {
position: fixed;
top: 50%;
left: 50%;
width: 560px;
margin: -180px 0 0 -280px;
}
}
.modal-header {
padding: 9px 15px;
border-bottom: 1px solid <<colour modal-header-border>>;
}
.modal-header h3 {
margin: 0;
line-height: 30px;
}
.modal-body {
padding: 15px;
}
.modal-footer {
padding: 14px 15px 15px;
margin-bottom: 0;
text-align: right;
background-color: <<colour modal-footer-background>>;
border-top: 1px solid <<colour modal-footer-border>>;
}
/*
** Notifications
*/
.tw-notification {
position: fixed;
top: 14px;
right: 14px;
z-index: 1000;
max-width: 280px;
padding: 0 14px 0 14px;
background-color: <<colour notification-background>>;
border: 1px solid <<colour notification-border>>;
}
/*
** Tabs
*/
.tw-tab-set {
}
.tw-tab-buttons {
font-size: 0.85em;
padding-top: 1em;
margin-bottom: -1px;
}
.tw-tab-buttons button.tw-tab-selected {
color: <<colour tab-foreground-selected>>;
background-color: <<colour tab-background-selected>>;
border-left: 1px solid <<colour tab-border-selected>>;
border-top: 1px solid <<colour tab-border-selected>>;
border-right: 1px solid <<colour tab-border-selected>>;
}
.tw-tab-buttons button {
color: <<colour tab-foreground>>;
padding: 2px 4px 4px 4px;
margin-left: 2px;
margin-right: 2px;
font-weight: 300;
border: none;
background: inherit;
background-color: <<colour tab-background>>;
border-left: 1px solid <<colour tab-border>>;
border-top: 1px solid <<colour tab-border>>;
border-right: 1px solid <<colour tab-border>>;
}
.tw-tab-divider {
border-top: 1px solid <<colour tab-divider>>;
}
.tw-tab-content {
padding-top: 14px;
}
.tw-sidebar-lists .tw-tab-buttons button.tw-tab-selected {
background-color: <<colour sidebar-tab-background-selected>>;
color: <<colour sidebar-tab-foreground-selected>>;
border-left: 1px solid <<colour sidebar-tab-border-selected>>;
border-top: 1px solid <<colour sidebar-tab-border-selected>>;
border-right: 1px solid <<colour sidebar-tab-border-selected>>;
}
.tw-sidebar-lists .tw-tab-buttons button {
background-color: <<colour sidebar-tab-background>>;
color: <<colour sidebar-tab-foreground>>;
border-left: 1px solid <<colour sidebar-tab-border>>;
border-top: 1px solid <<colour sidebar-tab-border>>;
border-right: 1px solid <<colour sidebar-tab-border>>;
}
.tw-sidebar-lists .tw-tab-divider {
border-top: 1px solid <<colour sidebar-tab-divider>>;
}
.tw-more-sidebar {
white-space: nowrap;
}
@media (min-width: 770px) {
.tw-more-sidebar {
margin-left: -14px;
}
}
.tw-more-sidebar .tw-tab-buttons {
display: inline-block;
vertical-align: top;
text-align: right;
padding-top: 0;
padding-left: 0;
}
.tw-more-sidebar .tw-tab-buttons button {
display: block;
width: 100%;
text-align: right;
}
.tw-sidebar-lists .tw-more-sidebar .tw-tab-divider {
display: none;
}
.tw-more-sidebar .tw-tab-content {
display: inline-block;
vertical-align: top;
padding-top: 0;
padding-left: 14px;
}
.tw-more-sidebar .tw-tab-buttons button {
background-color: <<colour sidebar-tab-background>>;
border-top: none;
border-left: none;
border-bottom: none;
border-right: 1px solid #ccc;
}
.tw-more-sidebar .tw-tab-buttons button.tw-tab-selected {
background-color: <<colour sidebar-tab-background-selected>>;
border: none;
}
/*
** Alerts
*/
.tw-alerts {
position: fixed;
top: 0;
left: 0;
max-width: 500px;
z-index: 20000;
}
.tw-alert {
position: relative;
margin: 28px;
padding: 14px 14px 14px 14px;
border: 2px solid <<colour alert-border>>;
background-color: <<colour alert-background>>;
}
.tw-alert-toolbar {
position: absolute;
top: 14px;
right: 14px;
}
.tw-alert-toolbar svg {
fill: <<colour alert-muted-foreground>>;
}
.tw-alert-subtitle {
color: <<colour alert-muted-foreground>>;
font-weight: bold;
}
.tw-alert-highlight {
color: <<colour alert-highlight>>;
}
.tw-static-alert {
position: relative;
}
.tw-static-alert-inner {
padding: 0 2px 2px 42px;
color: <<colour static-alert-foreground>>;
position: absolute;
}
/*
** Grids
*/
.tw-grid-frame td {
width: 1em;
height: 1em;
}
/*
** Control panel
*/
.tw-control-panel td {
padding: 4px;
}
.tw-control-panel table, .tw-control-panel table input, .tw-control-panel table textarea {
width: 100%;
}
/*
** Message boxes
*/
.tw-message-box {
border: 1px solid <<colour message-border>>;
background: <<colour message-background>>;
padding: 0px 21px 0px 21px;
font-size: 12px;
line-height: 18px;
color: <<colour message-foreground>>;
}
.tw-message-box img {
float: right;
width: 150px;
margin: 0px 0px 12px 12px;
}
/*
** Chooser
*/
.tw-chooser {
border: 1px solid <<colour table-border>>;
}
.tw-chooser-item {
border: 8px;
}
.tw-chooser-item a.tw-tiddlylink {
display: block;
text-decoration: none;
color: <<colour tiddler-link-foreground>>;
background-color: <<colour tiddler-link-background>>;
margin: 4px;
}
.tw-chooser-item a.tw-tiddlylink:hover {
text-decoration: none;
color: <<colour tiddler-link-background>>;
background-color: <<colour tiddler-link-foreground>>;
}
/*
** Palette swatches
*/
.tw-swatches-horiz {
}
.tw-swatches-horiz .tw-swatch {
display: inline-block;
}
.tw-swatch {
width: 2em;
height: 2em;
margin: 4px;
border: 1px solid #000;
}