mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-11-07 10:34:53 +00:00
1e221ddbdb
* Styles and templates for visual changes to Saving methods listing * Color coding saver methods according to delivery * Changes to tags and few tiddlers - The tag InternetExplorer has been changed to [[Internet Explorer]] - A tag for Edge is added - Reclassified TiddlyServer as DIY instead of App The existing criteriion for classification is unclear. Here is my reasoning for the change. An app is something user can simply install and run. Like TiddlyDesktop or Tiddloid. A DIY is something user has to install additional runtimes for. Thus Nodejs is a DIY. In the same vein, TiddlyServer is a DIY * Adding Twexe * Reversing accidental changes to StoryList * Restyling Download button and Card Size * Removing "Read more" links Entire card is now clickable To give visual clues regarding the clickability of card, title will change color to blue on card hover * Removing margins from elements under link and adding padding instead. Why this change? Margins are not "clickable". Having margins under <a> tag means there are minute dead areas where the mouse pointer will change shape, is not clickable and degrade user experience. Paddings are "clickable"
200 lines
3.3 KiB
Plaintext
200 lines
3.3 KiB
Plaintext
created: 20200507002727378
|
|
modified: 20200515024640489
|
|
tags: $:/tags/Stylesheet
|
|
title: $:/_tw5.com-styles
|
|
type: text/vnd.tiddlywiki
|
|
|
|
\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline macrocallblock
|
|
|
|
.tc-double-spaced-list li {
|
|
padding-bottom: .5em;
|
|
padding-top: .5em;
|
|
}
|
|
|
|
.tc-link-info-item {
|
|
border: 1px solid #ebefcd;
|
|
padding: 5px 10px;
|
|
margin-bottom: 10px;
|
|
background: <<colour code-background>>;
|
|
font-size: 0.8em;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.tc-link-info-item h1 {
|
|
font-weight: 500;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.tc-scrollable-demo {
|
|
border: 1px solid <<colour message-border>>;
|
|
background-color: <<colour message-background>>;
|
|
padding: 1em;
|
|
height: 400px;
|
|
position: relative;
|
|
overflow: auto;
|
|
}
|
|
|
|
.tc-improvement-banner {
|
|
font-size: 0.7em;
|
|
background: #fcc;
|
|
padding-left: 5px;
|
|
margin-top: 6px;
|
|
margin-bottom: 12px;
|
|
<<box-shadow "2px 2px 2px rgba(0,0,0,0.4)">>
|
|
}
|
|
|
|
@media (max-width: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}}) {
|
|
|
|
.tc-improvement-banner {
|
|
}
|
|
|
|
}
|
|
|
|
@media (min-width: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}}) {
|
|
|
|
.tc-improvement-banner {
|
|
margin-right: -53px;
|
|
margin-left: -53px;
|
|
}
|
|
|
|
.tc-improvement-banner:before {
|
|
display: block;
|
|
position: absolute;
|
|
width: 0;
|
|
height: 0;
|
|
content: " ";
|
|
margin-left: -5px;
|
|
margin-top: -10px;
|
|
border-top: 5px solid transparent;
|
|
border-left: 5px solid transparent;
|
|
border-right: 5px solid #C07E7E;
|
|
border-bottom: 5px solid #C07E7E;
|
|
}
|
|
|
|
}
|
|
|
|
.tc-improvement-banner svg {
|
|
width: 1em;
|
|
height: 1em;
|
|
}
|
|
|
|
|
|
|
|
.tc-wrapper-flex {
|
|
display: flex;
|
|
}
|
|
|
|
.tc-saving-sidebar {
|
|
margin: 0;
|
|
padding: 0;
|
|
min-width: 200px;
|
|
overflow: auto;
|
|
}
|
|
|
|
.tc-saving-sidebar a {
|
|
display: block;
|
|
}
|
|
|
|
@media (max-width: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}}) {
|
|
.tc-wrapper-flex {
|
|
flex-direction: column;
|
|
}
|
|
.tc-saving-sidebar {
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
.tc-saving-sidebar a {
|
|
float: left;
|
|
}
|
|
}
|
|
|
|
.tc-saving-sidebar-category {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.tc-saving-sidebar-category-title {
|
|
font-weight: bold;
|
|
margin-bottom: 5px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.tc-saving-sidebar-category-item {
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.tc-card {
|
|
margin: 15px;
|
|
padding: 10px 20px;
|
|
border-radius: 10px;
|
|
border-top: 5px solid #45D3D3;
|
|
box-shadow: 0 8px 17px -8px #A3A5AE;
|
|
background-color: #FFF;
|
|
width: 200px;
|
|
transition: box-shadow 0.3s ease-in-out;
|
|
font-size: 13px;
|
|
line-height: 18px;
|
|
}
|
|
|
|
.tc-card:hover {
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
|
|
}
|
|
.tc-card:hover .tc-card-title {
|
|
color: #1462ff;
|
|
}
|
|
|
|
.tc-card-title {
|
|
text-align: center;
|
|
font-size: 1.2em;
|
|
font-weight: 600;
|
|
transition: color 0.2s ease-in-out;
|
|
padding: 10px 0;
|
|
}
|
|
|
|
.tc-card-author {
|
|
text-align: right;
|
|
}
|
|
|
|
.tc-card p {
|
|
height: 67px;
|
|
overflow: hidden;
|
|
margin: 0;
|
|
padding: 13px 0;
|
|
}
|
|
|
|
.tc-card a {
|
|
color: #222;
|
|
}
|
|
|
|
.tc-card a:hover {
|
|
text-decoration:none;
|
|
}
|
|
|
|
.tc-card a:active, .tc-card a:focus, .tc-btn-download:active, .tc-btn-download:focus{
|
|
outline: none;
|
|
}
|
|
|
|
div.content {
|
|
padding: 1px 16px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.tc-btn-download {
|
|
width: 250px;
|
|
padding: 10px;
|
|
border-radius: 5px;
|
|
background: #1462ff;
|
|
border-radius: 5px;
|
|
border: none;
|
|
box-shadow: 0 2px 2px 0 #4a74c9;
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
font-size: 1.2em;
|
|
line-height: 1.4em;
|
|
color: #fff;
|
|
fill: #fff;
|
|
}
|
|
|
|
.tc-btn-download:active {
|
|
background: #1475ff;
|
|
} |