CSS layout rewrite for cstimer.net using css grid.
This makes the interface more modern, with coherent border radius, ligh shadows...
csTimer UI Rewrite by Tiago
Details
AuthorTiago
LicenseNo License
Categorycstimer.net
Created
Updated
Size9.7 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
The stylesheet currently does not support the Material Design.
Next step: Material Design to cstimer.
Source code
/* ==UserStyle==
@name csTimer (standalone)
@namespace github.com/openstyles/stylus
@version 1.0
@description Better csTimer+ UI design should be set to "normal"
@author Tiago
==/UserStyle== */
@-moz-document domain("cstimer.net") {
/* Normal design { */
/* Layout { */
/* desktop layout { */
html,
body {
overflow: auto;
/* good CSS doesn't need to hide the overflow :D */
}
html,
html.m {
/* reset weird font */
font-size: 1rem;
}
body {
display: grid;
gap: .5rem;
grid-template-columns: clamp(14rem, 20%, 16rem) 1fr;
grid-template-rows: auto auto 1fr;
padding-right: clamp(5rem, 20%, 18rem);
}
body > div:nth-child(2) {
/* div that holds the background image */
display: contents;
}
body > div[style*='visibility: hidden'] {
display: none;
/* caused an hour of struggle finding that overflow */
}
#wndctn {
display: contents;
& > div {
position: relative;
}
}
#leftbar {
width: unset;
height: unset;
aspect-ratio: 1;
grid-column: 1 / 2;
grid-row: 1 / 3;
}
#stats {
padding-top: 2.5rem;
inset: 0;
grid-column: 1 / 2;
grid-row: 3;
display: grid;
height: 0;
min-height: calc(100% - 3rem);
grid-template-rows: auto auto 1fr;
& > .stattl > .myscroll {
height: unset !important;
}
& > div {
overflow: auto;
}
& * {
box-sizing: border-box;
}
}
#stats table {
min-width: calc(100% - 2px) !important;
}
#scrambleDiv {
inset: 0;
grid-column: 2 / -1;
grid-row: 1 / 2;
}
#toolsDiv {
position: fixed !important;
z-index: 5;
resize: both;
margin: .5rem;
}
#timer {
width: unset;
height: min-content;
;
position: relative;
inset: 0;
grid-column: 2 / -1;
grid-row: 2 / -1;
align-self: center;
margin-bottom: 6lh;
}
body:has(#leftbar[style^='opacity: 0']) #timer[style*="249.95px"] {
grid-column: 1 / -1;
}
#container {
font-size: clamp(10rem, 18vw, 16rem) !important;
}
#rtimer {
position: relative;
height: unset !important;
padding: 0.5rem !important;
z-index: 36;
}
.m #timer[style*="padding-bottom: 0px;"] #lcd::before {
position: fixed;
}
/* } */
/* mobile layout { */
html.m {
& body {
grid-template-columns: 100dvw 100dvw;
grid-template-rows: auto 1fr auto;
padding-right: 0;
padding-bottom: 4rem;
/* toolbar height */
scroll-snap-type: x mandatory;
-ms-overflow-style: none;
scrollbar-width: none;
}
& body::-webkit-scrollbar {
display: none;
}
& #leftbar {
position: fixed;
inset: 0;
top: unset;
aspect-ratio: unset;
height: 4rem;
z-index: 5;
}
& #timer {
grid-row: 2 / 3;
scroll-snap-align: center;
padding: 0 !important;
margin-bottom: 1rem;
}
& #stats {
inset: 0;
grid-row: 1 / -1;
scroll-snap-align: center;
}
& #toolsDiv:not([style*='none']) {
display: grid !important;
}
& #toolsDiv {
place-items: center;
position: relative !important;
grid-column: 2 / -1;
grid-row: 3 / 4;
inset: 0;
z-index: 4;
margin: 0;
border-radius: 0;
}
& #rtimer {
position: static !important;
grid-column: 2 / -1;
grid-row: 1 / -1;
z-index: 0;
}
& #scrambleTxt {
max-height: 2lh !important;
}
}
/* }} */
/* Shadow and backdrop { */
.mywindow::before,
.popup,
.dialog,
#leftbar::before {
box-shadow: 0 0 3rem -.5rem rgba(0, 0, 0, .2), 0 0 1rem -.5rem rgba(0, 0, 0, .4);
}
#gray {
background-color: rgba(255, 255, 255, 0.2);
}
/* } */
/* General styling { */
html:not(.m) body {
padding: .5rem;
}
/* chide */
.chide {
border-radius: 0.3rem 0.2rem 50% .2rem !important;
margin: .15rem
}
/* buttons and selects */
select {
padding: 0.4rem 1.2rem 0.4rem 0.6rem;
border-radius: 0.4rem;
max-width: 5rem;
background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='18' viewBox='0 0 24 24' width='18' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
background-repeat: no-repeat;
background-position: right;
}
input[type='button'] {
padding: 0.4rem 0.6rem;
border-radius: 0.4rem;
}
#stats > :first-child {
position: absolute;
inset: 0;
bottom: unset;
display: flex !important;
flex-wrap: wrap;
align-items: center;
justify-content: space-around;
}
.button {
display: flex;
flex-wrap: wrap;
width: 100%;
gap: .6rem;
}
body .buttonOK {
margin: 0;
flex-grow: 1;
}
/* checkboxes */
input[type='checkbox'] {
position: relative;
appearance: none;
width: 1.2rem;
height: 1.2rem;
background-color: rgba(125, 125, 125, .15);
border: 0.1rem solid rgba(125, 125, 125, .2);
border-radius: .25rem;
}
input[type='checkbox']:checked {
background-color: #1f85ff;
&::before {
position: absolute;
translate: .28rem .1rem;
rotate: 40deg;
content: '';
width: .25rem;
height: .5rem;
border: solid white;
border-width: 0 .25rem .25rem 0;
border-radius: .1rem;
}
}
/* } */
/* Leftbar / Toolbar { */
#leftbar {
border: none;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
& > div {
position: static;
width: unset !important;
height: unset;
}
& #logo {
grid-column: span 3;
}
&::before {
border-radius: .6rem;
}
padding: .2rem;
gap: 0.2rem;
}
.mybutton {
background-color: rgba(125, 125, 125, .15);
border: none !important;
border-radius: .4rem !important;
transition: background-color 100ms ease;
overflow: hidden;
}
.m #leftbar {
grid-template-columns: repeat(9, 1fr);
grid-template-rows: 1fr;
}
.m .mybutton {
font-size: clamp(.5rem, 2vw, 1rem);
}
.m #logo {
font-size: max(1rem, 5vw) !important;
}
/* } */
/* Tools { */
#toolsDiv {
border: none;
&::before {
border-radius: .6rem;
}
}
/* } */
/* Dialog { */
.dialog {
inset: 20% 10%;
border: none;
border-radius: 1rem;
}
.opttable {
margin: 0 !important;
}
.tabValue {
border: none;
border-radius: 0;
}
/* tabs */
.options > tbody > tr > td:has(.tab) {
display: flex;
flex-direction: column;
gap: .5rem;
overflow: auto;
background-color: rgba(144, 144, 144, .2);
border-radius: .6rem 0 0 .6rem;
padding: .25rem 0 .25rem .25rem;
}
.tab {
position: relative;
border-radius: .4rem 0 0 .4rem;
padding: .2rem .6rem;
margin: 0;
border: none !important;
background-color: transparent;
}
.tab.enable {
&::before,
&::after {
content: '';
background-color: inherit;
width: 10px;
height: 10px;
position: absolute;
right: 0;
clip-path: path('M 10,0 A 10,10 0 0 1 0,10 h 10 z')
}
&::before {
top: -9.6px;
}
&::after {
top: 100%;
rotate: -90deg;
}
}
/* }} */
/* Material design { */
/* warning * /
.mtds {
&::before {
position: relative;
top: 2rem;
left: 1rem;
background: inherit;
padding: 1rem;
content: 'Material Design is not available yet. Please switch back to Normal UI design in the settings';
font-size: 2rem;
z-index: 99999;
}
& * {
opacity: 0.95
}
}
/* warning end */
:root.mtds {
& body {
padding: 0
}
/* Main bar (#leftbar) { */
& #leftbar {
&::before {
/* shadow */
display: none;
}
padding: 12px;
gap: 1rem;
aspect-ratio: unset;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto 1fr 1fr;
& > div:not(#logo) {
border-radius: 9rem !important;
}
& .icon {
font-size: 1rem;
}
}
& #logo {
grid-row: 1;
font-size: 2rem !important;
border-radius: 16px !important;
}
& .mybutton {
position: relative !important;
top: unset !important;
left: unset !important;
overflow: visible;
padding: 0.5rem 0;
&:not(#logo) {
margin-bottom: 1lh;
}
}
& #leftbar .mybutton:not(#logo) div {
& span:first-child {
display: block !important;
position: absolute !important;
top: 110%;
font-size: 0.8rem;
line-height: 1;
left: 50%;
translate: -50%;
text-transform: lowercase;
}
& span.icon {
display: table-cell !important;
}
}
/* } */
}
/* } */
}