mirror of
https://github.com/KevinMidboe/zoff.git
synced 2025-10-29 18:00:23 +00:00
Schmancy
This commit is contained in:
Nicolas A. Tonne
@@ -52,35 +52,41 @@ if(isset($_GET['chan'])){
|
||||
</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Close</a>
|
||||
<a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Close</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="center-align container">
|
||||
<div class="section">
|
||||
<form class="row" id="base" method="get">
|
||||
<div class="input-field col s12">
|
||||
<input
|
||||
class="input-field"
|
||||
type="text"
|
||||
id="search"
|
||||
name="chan"
|
||||
title="Type channel name here to create or listen to a channel. Only alphanumerical chars. [a-zA-Z0-9]+"
|
||||
autocomplete="off"
|
||||
list="searches"
|
||||
required pattern="[a-zA-Z0-9]+"
|
||||
spellcheck="false"
|
||||
maxlength="18"
|
||||
data-length="18"
|
||||
/>
|
||||
<label for="search">Find or create radio channel</label>
|
||||
<datalist id="searches">
|
||||
</datalist>
|
||||
</div>
|
||||
<div class="section mega">
|
||||
<h5>Create a radio channel, collaborate and listen</h5>
|
||||
<form class="">
|
||||
<p class="prething">zoff.no/</p>
|
||||
<input
|
||||
class="input-field room-namer"
|
||||
type="text"
|
||||
id="search"
|
||||
name="chan"
|
||||
placeholder="indie-rock"
|
||||
title="Type channel name here to create or listen to a channel. Only alphanumerical chars. [a-zA-Z0-9]+"
|
||||
autocomplete="off"
|
||||
autofocus=""
|
||||
list="searches"
|
||||
required
|
||||
pattern="[a-zA-Z0-9]+"
|
||||
spellcheck="false"
|
||||
maxlength="18"
|
||||
/>
|
||||
<datalist id="searches"></datalist>
|
||||
<a class="refresh-button"><i class="small cached"></i></a>
|
||||
<button class="listen-button" action="submit">Listen</button>
|
||||
</form>
|
||||
</div>
|
||||
<div class="pitch outline">
|
||||
<div>Live & democratic playlists with YouTube Music</div>
|
||||
<div>Play everywhere — No login required</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<main class="center-align container">
|
||||
<div class="section">
|
||||
<div id="preloader" class="progress">
|
||||
<div class="indeterminate"></div>
|
||||
|
||||
@@ -257,6 +257,76 @@ hide mdi-action-visibility mdi-action-visibility-off
|
||||
margin:-1px;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family:"futura-pt";
|
||||
src:url('../font/futura.woff2') format('woff2'),url('../font/futura.woff') format('woff');
|
||||
font-style:normal;font-weight:300;
|
||||
}
|
||||
|
||||
.mega{
|
||||
padding: 6% 0px;
|
||||
background: #FF2626;
|
||||
}
|
||||
|
||||
.mega h5{
|
||||
box-sizing: border-box;
|
||||
color: rgb(255, 255, 255); cursor: default; display: inline;
|
||||
font-family: futura-pt, 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
|
||||
font-size: 50px;
|
||||
font-weight: 100;
|
||||
height: auto;
|
||||
line-height: 90.069229px; text-align: center;
|
||||
text-shadow: rgba(18, 18, 18, 0.76) 0px 1px 4px; width: auto;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.mega form{
|
||||
-webkit-background-clip: border-box; -webkit-background-origin: padding-box; -webkit-background-size: auto; -webkit-box-shadow: rgb(68, 68, 68) 0px 0px 8px 0px; background-attachment: scroll; background-clip: border-box; background-color: rgb(255, 255, 255); background-image: none; background-origin: padding-box; background-size: auto; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; box-shadow: rgb(68, 68, 68) 0px 0px 8px 0px; box-sizing: border-box; color: rgb(255, 255, 255); cursor: text; display: flex; font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 17px; font-weight: normal; height: 50px; line-height: 24.2857151031494px; margin-top: 0px; padding-bottom: 5px; padding-left: 20px; padding-right: 5px; padding-top: 5px; text-align: center; width: 507.8125px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-top: 1%;
|
||||
margin-bottom: 2%;
|
||||
}
|
||||
|
||||
.mega .prething{
|
||||
box-sizing: border-box; color: rgb(155, 155, 155); cursor: text; display: block; font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 17px; font-weight: 200; height: 24px; line-height: 24.2857151031494px; margin-bottom: 8px; margin-left: 0px; margin-right: 8.5px; margin-top: 8px;
|
||||
min-width: 56px; text-align: center;
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.mega input{
|
||||
color: rgb(0, 0, 0);
|
||||
font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
|
||||
font-size: 17px;
|
||||
height: 40px;
|
||||
line-height: 25px;
|
||||
min-width: 307px;
|
||||
width: 317px;
|
||||
word-spacing: 0px;
|
||||
box-shadow: none !important;
|
||||
border:none !important;
|
||||
}
|
||||
|
||||
.mega .refresh-button{
|
||||
box-sizing: border-box; color: rgb(175, 175, 175); cursor: pointer; display: block; font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 25.5px; font-weight: normal; height: 40px; line-height: 36.4285736083984px; margin-left: -40px; text-align: center; text-decoration: none; width: 40px;
|
||||
}
|
||||
|
||||
.mega .listen-button{
|
||||
-webkit-appearance: none; -webkit-background-clip: border-box; -webkit-background-origin: padding-box; -webkit-background-size: auto; -webkit-writing-mode: horizontal-tb; align-items: flex-start; background-attachment: scroll; background-clip: border-box;
|
||||
background-color: rgb(45, 45, 45); background-image: none; background-origin: padding-box; background-size: auto; border-bottom-color: rgb(250, 70, 104); border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-bottom-style: none; border-bottom-width: 0px; border-image-outset: 0px; border-image-repeat: stretch; border-image-slice: 100%; border-image-source: none; border-image-width: 1; border-left-color: rgb(250, 70, 104); border-left-style: none; border-left-width: 0px; border-right-color: rgb(250, 70, 104); border-right-style: none; border-right-width: 0px; border-top-color: rgb(250, 70, 104); border-top-left-radius: 3px; border-top-right-radius: 3px; border-top-style: none; border-top-width: 0px; box-sizing: border-box; color: rgb(255, 255, 255); cursor: pointer; display: block; font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; height: 40px; letter-spacing: normal; line-height: 35.625px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 30px; padding-right: 30px; padding-top: 0px; text-align: center; text-decoration: none; text-indent: 0px; text-shadow: none;
|
||||
text-transform: none;
|
||||
word-spacing: 0px;
|
||||
}
|
||||
|
||||
.mega .pitch{
|
||||
box-sizing: border-box;
|
||||
color: rgba(255, 255, 255, 0.85); display: inline; font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 17px; font-weight: normal; height: auto; line-height: 24.2857151031494px; text-align: center;
|
||||
text-shadow: rgba(81, 81, 81, 0.05) 0px 1px 4px; width: auto;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
/*#channels li{opacity: 0;}*/
|
||||
|
||||
/*------------------- Channel page ---------------------------------------------------------------------------- */
|
||||
|
||||
BIN
static/font/futura.woff
Normal file
BIN
static/font/futura.woff
Normal file
Binary file not shown.
BIN
static/font/futura.woff2
Normal file
BIN
static/font/futura.woff2
Normal file
Binary file not shown.
Reference in New Issue
Block a user