A style that restores 4/5 of the classic blogger views
Blogger: classic views style by ivyclaw22
Details
Authorivyclaw22
LicenseGPLv3
Categoryblogger
Created
Updated
Size6.5 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Blogger views is a built in blogger theme that can be accessed by going to "[blogurl]/view"
Source code
/* ==UserStyle==
@name blogger.googleblog.com - Apr 2024
@namespace github.com/openstyles/stylus
@version 1.0.0
@description A new userstyle
@author Me
@preprocessor stylus
@license GPLv3
@var checkbox hide "Hide navbar (better accuracy)" 0
==/UserStyle== */
@-moz-document domain("googleblog.com"), domain("blogspot.com") {
#header .header-bar {
width: 100%;
height: 50px;
padding-bottom: 2px;
background-color: #f3f3f3;
background-image: -moz-linear-gradient(-90deg, #fff, #eee);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#eee));
position: absolute;
z-index: 2;
-webkit-box-shadow: 0 0 5px #aaa;
box-shadow: 0 0 5px #aaa;
}
#header:hover .header-drawer, #header .header-drawer.open {
background-color: #555;
position: absolute;
top: 52px;
-moz-box-shadow: 0 0 5px #666;
-webkit-box-shadow: 0 0 5px #666;
box-shadow: 0 0 5px #666;
z-index: 1;
if hide {
display: none
}
}
.header-bar::before {
content: "";
background: url('//www.blogblog.com/dynamicviews/8ff3a059fbbbb9f2/images/icon_30_light.png') center center no-repeat;
width: 30px;
height: 30px;
position: absolute;
left: 10px;
top: 10px;
}
#header .header-bar .title {
position: absolute;
display: inline-block;
color: #666;
font-size: 28px;
height: 50px;
line-height: 50px;
left: 50px;
top: 0;
text-shadow: 1px 1px 1px white;
margin: 0;
}
#header .header-bar .title h1 {
color: #666;
font-family: "Helvetica Neue Light", HelveticaNeue-Light, "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
top: 50px;
}
.title h3 {
display: none!important
}
#header input#search {
position: absolute;
right: 10px;
top: 10px;
width: 200px;
margin: 0;
padding: 7px 7px;
height: 16px;
font-family: "Helvetica Neue Light", HelveticaNeue-Light, "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
font-size: 15px;
color: #333;
-moz-border-radius: 3px;
border-radius: 3px;
border: none;
background-color: white;
text-transform: lowercase;
text-align: left;
box-shadow: inset 1px 1px 3px #aaa;
-moz-box-shadow: inset 0 1px 1px #aaa;
-webkit-box-shadow: inset 1px 1px 3px #aaa;
-webkit-transition: background-color 0.3s ease-in-out;
-moz-transition: background-color 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
#sidebar {
top: 87px!important;
if hide {
top: 52px!important;
}
}
.article .article-header .title {
margin: 0;
padding-top: 20px;
min-height: 30px;
line-height: 30px;
font-size: 25px;
font-weight: 100;
color: #009eb8;
margin-right: 20px;
line-height: 1.2;
display: inline-block;
text-align: left
}
.title a {
color: #009eb8;
}
.article .article-header {
display: block;
text-align: left
}
.article .article-content {
clear: both;
margin: 0;
text-align: justify;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #333;
max-width: 800px;
min-width: 400px;
font-size: 13px;
line-height: 1.4;
}
#controls {
position: fixed;
top: 87px;
left: 10px;
overflow: visible;
margin: 0;
padding: 0;
z-index: 1;
-webkit-transition: margin-left .7s ease-in;
-moz-transition: margin-left .7s ease-in;
transition: margin-left .7s ease-in;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
if hide {
top: 52px
}
}
.flipcard #main {
margin: 0;
min-width: 300px;
position: relative;
}
#header-container {
height: 87px;
if hide {
height: 52px
}
}
.flipcard #main {
position: fixed;
top: 87px;
width: 100%;
bottom: 0;
z-index: -1;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-webkit-transition: margin-left .7s ease-in;
-moz-transition: margin-left .7s ease-in;
transition: margin-left .7s ease-in;
overflow-y: scroll;
overflow-x: auto;
padding: 15px 5px;
margin-left: 0;
outline: 0;
if hide{
top: 50px
}
}
.flipcard #content {
margin: 35px 5px;
position: relative;
min-width: 300px;
overflow: visible;
}
.item {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-transition: all .7s ease-out;
-moz-transition: all .7s ease-out;
-o-transition: all .7s ease-out;
transition: all .7s ease-out;
z-index: 0;
}
#controls ul#groups {
margin: 0;
padding: 0;
display: inline-block;
float: left;
-webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.2);
-moz-box-shadow: 1px 1px 4px rgba(0,0,0,0.2);
box-shadow: 1px 1px 4px rgba(0,0,0,0.2);
}
#controls ul#groups li {
font-family: "Helvetica Neue Light",HelveticaNeue-Light,"Helvetica Neue",Arial,Helvetica,Geneva,sans-serif;
font-size: 15px;
height: 35px;
line-height: 35px;
padding: 0 15px;
margin: 0;
border: none;
list-style: none;
display: inline-block;
color: white;
cursor: pointer;
background-color: #79c4d9;
-webkit-transition: background-color 0.2s ease-in-out;
-moz-transition: background-color 0.2s ease-in-out;
transition: background-color 0.2s ease-in-out;
background-image:none;
width:auto
}
#controls ul#groups li:hover:not(.selected) {
background-color: #369dc0;
background-image:none;
color:#fff
}
#controls ul#groups li.selected {
background-color: #ffa366;
-webkit-box-shadow: inset 1px 1px 3px rgba(51,51,51,0.3);
-moz-box-shadow: inset 1px 1px 3px rgba(51,51,51,0.3);
box-shadow: inset 1px 1px 3px rgba(51,51,51,0.3);
color: white;
background-image:none;
}
#controls ul#groups li + li {
border-left: solid 1px white;
}
.flipcard .grouped #labels{
top: 50px
}
#labels .group-label, #labels .group-label a, #labels .group-label span{
font-family: "Helvetica Neue Light",HelveticaNeue-Light,"Helvetica Neue",Arial,Helvetica,Geneva,sans-serif;
text-overflow: ellipsis;
overflow: hidden;
max-height: 60px;
text-align: left;
padding: 10px 20px 0 0;
color: #666;
font-size: 18px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.snapshot .item{
transition: transform .15s linear;
}
}