stage-manager/assets/styles/drake.scss

192 lines
2.9 KiB
SCSS
Raw Normal View History

$navbar-height: 60px;
2023-03-04 21:31:42 -05:00
$highlight-color: #2980b9;
$highlight-color-dark: lighten($highlight-color, 10%);
2023-03-02 19:33:03 -05:00
body{
2023-03-02 19:33:03 -05:00
padding-top: calc($navbar-height + 15px);
2023-03-04 21:26:36 -05:00
background: #eee;
}
2023-03-02 19:33:03 -05:00
a{
color: $highlight-color;
2023-03-03 15:36:18 -05:00
transition: all 230ms ease-in-out;
&:hover{
color: $highlight-color-dark;
}
}
hr{
margin-top: 20px;
margin-bottom: 20px;
}
#main-wrapper{
max-width: 1120px;
2023-03-04 21:26:36 -05:00
padding: 15px 25px;
background: white;
border-radius: 8px;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}
2023-03-02 19:33:03 -05:00
#main-nav{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: $navbar-height;
2023-03-04 21:26:36 -05:00
background: $highlight-color;
2023-03-02 19:33:03 -05:00
border-bottom: 1px solid #999;
2023-03-04 21:26:36 -05:00
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
z-index: 10;
2023-03-02 19:33:03 -05:00
ul{
display: inline-block;
margin-bottom: 0;
list-style: none;
li{
display: inline-block;
margin-top: 5px;
margin-left: 10px;
2023-03-02 19:33:03 -05:00
}
}
h3{
display: inline-block;
margin-top: 14px;
2023-03-04 21:26:36 -05:00
margin-left: 25px;
2023-03-02 19:33:03 -05:00
margin-bottom: 0;
2023-03-04 21:26:36 -05:00
color: white;
font-size: 2.5rem;
2023-03-02 19:33:03 -05:00
}
li > a{
2023-03-04 21:26:36 -05:00
color: white;
2023-03-02 19:33:03 -05:00
font-size: 2rem;
font-weight: bold;
2023-03-04 21:26:36 -05:00
&:hover{
color: #eee;
}
2023-03-02 19:33:03 -05:00
}
}
#site-header{
margin-bottom: 10px;
}
2023-03-03 15:36:18 -05:00
#channel-header,
#video-header{
.channel-name,
.video-name{
2023-03-03 15:36:18 -05:00
margin-bottom: 5px;
}
.channel-created,
.channel-updated,
.video-created,
.video-updated{
margin-bottom: 5px;
color: #666;
font-size: 1.5rem;
font-style: italic;
}
.channel-description,
.video-description{
2023-03-03 15:36:18 -05:00
margin-top: 10px;
font-size: 1.75rem;
}
#sidebar{
background: #eee;
2023-03-03 15:36:18 -05:00
border: 1px solid #666;
2023-03-04 21:26:36 -05:00
border-radius: 5px;
2023-03-03 15:36:18 -05:00
div:not(:last-child){
border-bottom: 1px solid #666;
}
> div{
padding: 10px 15px 9px;
p{
margin: 0;
font-size: 2rem;
text-align: left;
}
}
.actions-bar,
.script-controls{
2023-03-03 15:36:18 -05:00
padding: 0;
span{
display: inline-block;
width: calc(50% - 1px);
height: 100%;
margin: 0;
padding: 0;
}
span:not(:last-child){
width: 50%;
border-right: 1px solid #666;
}
a{
display: block;
box-sizing: border-box;
width: 100%;
padding-top: 10px;
padding-bottom: 9px;
background: rgba(0, 0, 0, 0);
font-size: 2rem;
text-align: center;
text-decoration: none;
&:hover{
background: rgba(0, 0, 0, 0.1);
}
}
}
.video-status,
.video-serial{
transition: background 230ms ease-in-out;
&:hover{
background: rgba(0, 0, 0, 0.1);
cursor: pointer;
}
}
2023-03-03 15:36:18 -05:00
}
}
#video_script{
max-width: 100%;
min-height: 250px;
}
2023-03-04 21:26:36 -05:00
#video-script{
.script{
h1{
font-size: 4rem;
}
h2{
font-size: 3.5rem;
}
h3{
font-size: 3rem;
}
h4{
font-size: 2.5rem;
}
h5{
font-size: 2.25rem;
}
h6{
font-size: 2rem;
}
}
}