This repository has been archived on 2025-08-18. You can view files and clone it, but you cannot make any changes to it's state, such as pushing and creating new issues, pull requests or comments.
FeedMonkey/css/screen.css

353 lines
No EOL
5.5 KiB
CSS
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

html, body {
margin: 0;
padding: 0;
height: 100%;
font-family: FeuraSans, sans-serif;
}
body.f1 { font-size: 0.75em; }
body.f2 { font-size: 1em; }
body.f3 { font-size: 1.25em; }
body.f4 { font-size: 1.5em; }
body.f5 { font-size: 1.75em; }
.red { background: #e74c3c; color: #ecf0f1; }
.white { background: #ecf0f1; color: #2c3e50; }
.blue { background: #3498db; color: #ecf0f1; }
.yellow { background: #f1c40f; color: #2c3e50; }
a {
outline: none;
text-decoration: none;
}
.red a { color: #ecf0f1; }
.white a { color: #2c3e50; }
.blue a { color: #ecf0f1; }
.yellow a { color: #2c3e50; }
.button {
outline: none;
display: block;
width: 100%;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: none;
padding: 10px;
border-radius: 0;
font-size: 1em;
}
header .button, footer .button, .button.small {
width: auto;
display: inline-block;
}
.red .button { background: #c0392b; color: #ecf0f1; }
.white .button { background: #bdc3c7; color: #2c3e50; }
.blue .button { background: #2980b9; color: #ecf0f1; }
.yellow .button { background: #f39c12; color: #2c3e50; }
.red .bar .button { background: #e74c3c; color: #ecf0f1; }
.white .bar .button { background: #ecf0f1; color: #2c3e50; }
.blue .bar .button { background: #3498db; color: #ecf0f1; }
.yellow .bar .button { background: #f1c40f; color: #2c3e50; }
.smallogo { text-align: center; margin: 0; padding: 0; }
.smallogo img { width: 50%; }
button:active, a:active, .button:active {
background: black !important;
color: white !important;
}
#login article, #settings article {
padding: 10px 20px;
}
label {
display: none;
}
.hidden {
display: none;
}
section {
display: none;
min-height: 100%;
}
section.active {
display: block;
}
section > header {
background: #c0392b;
text-align: left;
padding: 10px;
}
.red .bar { background: #c0392b; }
.white .bar { background: #bdc3c7; }
.blue .bar { background: #2980b9; }
.yellow .bar { background: #f39c12; }
section > header h1 {
margin: 0;
padding: 0;
text-align: center;
font-weight: lighter;
}
.bar {
margin: 0;
padding: 10px;
display: block;
overflow: auto;
}
section > footer {
padding: 10px;
position: fixed;
bottom: 0;
width: 100%;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
img {
max-width: 100% !important;
height: auto;
}
@media screen and (width: 320px) {
#full > article * {
max-width: 300px !important;
}
}
@media screen and (width: 480px) {
#full > article * {
max-width: 460px !important;
}
}
canvas {
float: right;
}
#list ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#list article {
padding-bottom: 70px;
}
#list p {
margin: 0;
padding: 0;
font-size: 0.8em;
}
#list p {
font-weight: normal;
text-overflow: ellipsis;
display: block;
white-space: nowrap;
overflow: hidden;
}
#list h2 {
margin: 0;
padding: 0;
font-weight: normal;
font-size: 1.1em;
}
#list li {
position: relative;
}
.red #list li { border-bottom: 1px solid #c0392b; }
.white #list li { border-bottom: 1px solid #bdc3c7; }
.blue #list li { border-bottom: 1px solid #2980b9; }
.yellow #list li { border-bottom: 1px solid #f39c12; }
#list li:after {
content: "";
position: absolute;
right: 10px;
top: 0.1em;
font-weight: 100;
font-size: 3em;
font-family: "Open Sans";
}
.red #list li:after { color: #c0392b; }
.white #list li:after { color: #bdc3c7; }
.blue #list li:after { color: #2980b9; }
.yellow #list li:after { color: #f39c12; }
#list li > a {
display: block;
padding: 5px 25px 5px 10px;
text-decoration: none;
outline: none;
}
#list li.unread:after {
color: inherit;
}
#full.active {
min-height: 100%;
display: -moz-box;
-moz-box-orient: vertical;
min-width: 100%;
}
#full > article {
padding: 0 10px 1em 10px;
-moz-box-flex: 1;
}
#full > header {
height: 2.5em;
}
.button.icon {
line-height: 0.52;
font-size: 2em;
vertical-align: bottom;
padding-top: 0.35em;
}
.button.icon2 {
line-height: 1.05;
}
.button.icon.previous, .button.icon.next {
padding-top: 0.5em;
}
#full h1 {
font-size: 1.3em;
font-weight: normal;
margin: 0;
padding: 0;
}
#full .wrapper {
min-height: 100% !important;
border: 1px solid white;
}
#full h1 a {
text-decoration: none;
}
#full blockquote {
margin: 0;
padding: 0 1em;
font-style: italic;
}
#full .article a {
text-decoration: underline;
}
#full article header {
margin: 20px 0;
}
#full article header p {
margin: 0;
padding: 0;
}
#full footer.bar {
margin: auto 0 0 0;
position: relative;
height: 3.8em;
}
#full footer.bar a.next {
float: right;
}
.info {
border: 3px solid black;
background: white;
border-radius: 10px;
box-shadow: 0 0 5px black;
color: black;
padding: 0 1em;
}
.info.swipe {
width: 60%;
position: absolute;
top: 50%;
left: 15%;
margin: auto;
}
#settings ul {
list-style-type: none;
padding-left: 0;
margin-left: 0;
}
#settings li {
margin-bottom: 10px;
}
#settings ul a.color-red {
background: #e74c3c;
border: 20px solid #c0392b;
border-width: 1px 20px 1px 1px;
color: #ecf0f1;
}
#settings ul a.color-white {
background: #ecf0f1;
border: 20px solid #bdc3c7;
border-width: 1px 20px 1px 1px;
color: #2c3e50;
}
#settings ul a.color-blue {
background: #3498db;
border: 20px solid #2980b9;
border-width: 1px 20px 1px 1px;
color: #ecf0f1;
}
#settings ul a.color-yellow {
background: #f1c40f;
border: 20px solid #f39c12;
border-width: 1px 20px 1px 1px;
color: #2c3e50;
}
#settings .version {
font-style: italic;
}
#settings .font-size {
text-align: right;
}
#settings .font-size span {
float: left;
line-height: 2.4;
}
#settings .button.small {
width: 20%;
text-align: center;
}